/* ASVAB Test blog: articles, the blog's front page and the interactive figures (blog.js), on the site's
   tokens (styles.css). Blue marks where you are and what you picked, red the four AFQT subtests, green
   right and cleared. Motion only explains something, and settles when the reader prefers less. */

/* ---------- Article ---------- */
.post { padding-bottom: 88px; }
.post-head, .post-grid, .post-foot { max-width: 1120px; }
.post-head .crumbs,
.blog-head .crumbs { font: 500 12px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 22px; }
.post-head .crumbs a,
.blog-head .crumbs a { color: var(--text-2); text-decoration: none; }
.post-head h1,
.blog-head h1 { max-width: 17ch; font-size: clamp(40px, 6vw, 74px); line-height: 0.98; letter-spacing: -0.055em; font-weight: 800; text-wrap: balance; }
.post-dek { max-width: 44ch; margin-top: 22px; font-size: clamp(18px, 2vw, 22px); line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 24px; font: 500 12px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }

.post-grid { display: grid; gap: 40px; align-items: start; margin-top: 44px; }
@media (min-width: 1100px) { .post-grid { grid-template-columns: minmax(0, 720px) 264px; justify-content: space-between; } }
.post-body { min-width: 0; max-width: 720px; }
.post-body > p, .post-body > ul, .post-body > ol { font-size: 18px; line-height: 1.7; }
.post-body > ul li, .post-body > ol li { margin: 8px 0; }
.post-body > ol li::marker { font: 700 15px var(--mono); color: var(--text-3); }
.post-body h2 { font-size: clamp(26px, 3vw, 32px); line-height: 1.15; letter-spacing: -0.035em; margin: 68px 0 16px; scroll-margin-top: 100px; }
.post-body h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; margin: 40px 0 8px; }
.post-body .answer-box { margin: 0 0 30px; }
.post-body .answer-box p { font-size: 18px; }
.post-body table th[scope='row'] { color: var(--text); font-weight: 600; white-space: nowrap; }
.post-body table td.src, .post-body table .src { min-width: 140px; font-size: 14px; }
.prose a.button { color: var(--bg); text-decoration: none; }
.prose a.button.ghost, .prose a.button.secondary { color: var(--text); }
.prose .st-card { color: inherit; text-decoration: none; }
.post-body .st-grid { margin: 18px 0 8px; }
.post .sources { font-size: 15px; }
.post .sources li { color: var(--text-3); }
.post .sources a { color: var(--text-2); }
.post .fine { font-size: 14px; line-height: 1.6; color: var(--text-3); max-width: 76ch; }

/* The quizzes inside an article: undo the article's list and paragraph spacing. */
.post-quiz { margin: 26px 0 30px; }
.prose .test ol, .prose .test ul { padding: 0; margin: 0; }
.prose .test li { margin: 0; }
.prose .test p { margin: 0; }
.post-body .test h3 { margin: 0; }
.post-body .test h3.tq-meta { font: 500 12px/1.2 var(--mono); letter-spacing: 0.12em; }
.post-body .test h3.label { font: 500 12px/1.2 var(--mono); letter-spacing: 0.14em; }
.prose .test .tq-why p { color: var(--text-2); }

/* Contents: a side column on wide screens, a fold-out at the top on phones. */
.toc-inline { margin: 0 0 30px; border-radius: 16px; background: rgba(255, 255, 255, 0.02); box-shadow: inset 0 0 0 1px var(--line); }
.toc-inline summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; font: 600 15px/1.2 var(--font); color: var(--text); }
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary .icon { color: var(--text-3); transition: transform 250ms var(--ease); }
.toc-inline[open] summary .icon { transform: rotate(180deg); }
.prose .toc-inline ol { margin: 0; padding: 0 18px 16px 40px; font-size: 16px; }
.prose .toc-inline li { margin: 6px 0; }
.prose .toc-inline a { color: var(--text-2); text-decoration: none; }
.post-aside { display: none; }
@media (min-width: 1100px) {
  .toc-inline { display: none; }
  .post-aside { position: sticky; top: 104px; display: grid; gap: 22px; }
}
.post-toc-title { font: 500 12px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.post-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-2); }
.post-toc a { display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; color: var(--text-3); text-decoration: none; font-size: 14px; line-height: 1.35; transition: color 160ms, border-color 160ms; }
.post-toc a:hover { color: var(--text); }
.post-toc a.active { color: var(--text); border-left-color: var(--blue); }
.aside-practice { display: grid; gap: 8px; padding: 18px 18px 16px; border-radius: 20px; text-decoration: none; color: var(--text-2); font-size: 14px; line-height: 1.45; background: radial-gradient(120% 90% at 100% 0%, rgba(255, 45, 70, 0.14), transparent 60%), linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 200ms; }
.aside-practice-title { font: 700 16px/1.2 var(--font); letter-spacing: -0.02em; color: var(--text); }
.aside-practice-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--red-text); font-weight: 600; }
.aside-practice-go .icon { transition: transform 200ms var(--ease); }
@media (hover: hover) {
  .aside-practice:hover { box-shadow: inset 0 0 0 1px rgba(255, 90, 110, 0.45); }
  .aside-practice:hover .aside-practice-go .icon { transform: translateX(3px); }
}

.post-foot { display: grid; gap: 52px; margin-top: 64px; }
.post-foot .guide-cta { margin: 0; max-width: 720px; }
.post-more { max-width: 880px; }
.post-more h2 { font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.035em; margin-bottom: 10px; }

/* Reading progress: a hairline across the top that fills as the article scrolls (where the browser can). */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .post::after { content: ''; position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 2px; background: linear-gradient(90deg, var(--red), var(--blue)); transform-origin: 0 50%; animation: read-progress linear both; animation-timeline: scroll(root); }
  }
}
@keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- The blog's front page and post lists ---------- */
.blog-index { padding-bottom: 100px; }
.blog-feature { margin-top: 48px; }
.post-feature { display: grid; gap: 26px; align-items: center; padding: 26px; border-radius: var(--r-lg); text-decoration: none; background: radial-gradient(80% 90% at 100% 0%, rgba(77, 142, 255, 0.14), transparent 60%), radial-gradient(70% 80% at 0% 100%, rgba(255, 45, 70, 0.12), transparent 60%), linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -48px rgba(0, 0, 0, 0.9); transition: box-shadow 250ms; }
@media (min-width: 860px) { .post-feature { grid-template-columns: 1.15fr 0.85fr; padding: 44px 48px; } }
.post-feature-text { display: grid; gap: 14px; justify-items: start; }
.post-feature-title { font: 800 clamp(32px, 4.4vw, 54px)/1 var(--font); letter-spacing: -0.05em; color: var(--text); text-wrap: balance; }
.post-feature .post-summary { font-size: 18px; max-width: 42ch; }
.post-feature .post-art { display: grid; place-items: center; padding: 18px; border-radius: 22px; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px var(--line); }
.post-feature .cover { width: 100%; max-width: 440px; height: auto; }
.post-feature .post-time .icon { transition: transform 200ms var(--ease); }
@media (hover: hover) {
  .post-feature:hover { box-shadow: inset 0 0 0 1px rgba(77, 142, 255, 0.45), 0 40px 80px -48px rgba(0, 0, 0, 0.9); }
  .post-feature:hover .post-time .icon { transform: translateX(4px); }
}
.post-kind { font: 600 12px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-text); }
.post-summary { color: var(--text-2); font-size: 16px; line-height: 1.5; }
.post-time { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }

.blog-groups { display: grid; gap: 56px; margin-top: 80px; }
@media (min-width: 980px) { .blog-groups { grid-template-columns: 1fr 1fr; gap: 64px; } }
.blog-group h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -0.04em; margin-bottom: 14px; }
.post-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.post-row a { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.post-row .post-art { display: grid; place-items: center; width: 104px; aspect-ratio: 1.6; border-radius: 14px; background: rgba(255, 255, 255, 0.02); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 200ms; }
.post-row .cover { width: 88px; height: auto; }
.post-text { display: grid; gap: 6px; }
.post-title { margin: 0; font: 700 20px/1.25 var(--font); letter-spacing: -0.025em; color: var(--text); text-wrap: balance; }
@media (hover: hover) {
  .post-row a:hover .post-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .post-row a:hover .post-art { box-shadow: inset 0 0 0 1px rgba(77, 142, 255, 0.45); }
}
@media (max-width: 520px) {
  .post-row a { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
  .post-row .post-art { width: 72px; }
  .post-row .cover { width: 62px; }
  .post-title { font-size: 18px; }
}

.blog-practice { display: grid; gap: 28px; margin-top: 96px; padding-top: 52px; border-top: 1px solid var(--line); }
@media (min-width: 980px) { .blog-practice { grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; } }
.blog-practice h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.05; letter-spacing: -0.045em; }
.blog-practice p { margin-top: 14px; max-width: 44ch; color: var(--text-2); }
.blog-practice .button { margin-top: 8px; }

/* ---------- Cover drawings (blog-covers.mjs) ---------- */
.cover { color: var(--text-2); overflow: visible; }
.cover path, .cover polyline { fill: none; stroke: currentColor; stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.cover circle, .cover rect { fill: currentColor; stroke: none; }
.cover .ring { fill: none; stroke: currentColor; stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
.cover .c-dim { color: rgba(160, 180, 255, 0.24); }
.cover .c-ink { color: var(--text-2); }
.cover .c-blue { color: var(--blue); }
.cover .c-red { color: var(--red-text); }
.cover .c-green { color: var(--green); }
.cover .c-band { fill: rgba(77, 142, 255, 0.16); stroke: none; }
.cover .c-water { fill: rgba(77, 142, 255, 0.32); transform-box: fill-box; transform-origin: 50% 100%; }
.cover rect:not(.solid):not(.c-water) { opacity: 0.55; }
.cover-gears path { fill: rgba(255, 255, 255, 0.03); }
.cover-gears g, .cover .hand { transform-box: view-box; }
.post-feature .cover path, .post-feature .cover polyline, .post-feature .cover .ring { stroke-width: 2.2px; }
@media (prefers-reduced-motion: no-preference) {
  .post-row a:hover .cover-crowd circle.on, .post-feature:hover .cover-crowd circle.on { animation: cover-dot 900ms var(--ease) both; animation-delay: calc(var(--i) * 14ms); }
  .post-row a:hover .cover .run, .post-feature:hover .cover .run { stroke-dasharray: 200; animation: cover-draw 1100ms var(--ease) both; }
  .post-row a:hover .cover-tank .c-water, .post-feature:hover .cover-tank .c-water { animation: cover-fill 1400ms var(--ease) both; }
  .post-row a:hover .cover-tank .stream, .post-feature:hover .cover-tank .stream { animation: cover-flow 600ms linear infinite; }
  .post-row a:hover .cover-gears .spin-a, .post-feature:hover .cover-gears .spin-a { animation: spin-gear 2.4s linear infinite; }
  .post-row a:hover .cover-gears .spin-b, .post-feature:hover .cover-gears .spin-b { animation: spin-gear 4s linear infinite reverse; }
  .post-row a:hover .cover-clock .hand, .post-feature:hover .cover-clock .hand { animation: spin-gear 3s linear infinite; }
  .post-row a:hover .cover-calendar rect, .post-feature:hover .cover-calendar rect { animation: cover-pop 500ms var(--ease) both; animation-delay: calc(var(--i) * 22ms); }
}
@keyframes cover-dot { from { opacity: 0.15; } to { opacity: 1; } }
@keyframes cover-draw { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
@keyframes cover-fill { from { transform: scaleY(0.2); } to { transform: none; } }
@keyframes cover-flow { to { stroke-dashoffset: -7; } }
@keyframes cover-pop { from { opacity: 0; transform: scale(0.6); } }
.cover-calendar rect { transform-box: fill-box; transform-origin: center; }

/* ---------- Figures: the shared frame and controls ---------- */
.widget { position: relative; display: grid; gap: 18px; margin: 30px 0 34px; padding: 20px; border-radius: var(--r-lg); background: radial-gradient(90% 60% at 100% 0%, rgba(77, 142, 255, 0.08), transparent 60%), linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
@media (min-width: 720px) { .widget { padding: 26px; } }
.prose .widget p, .prose .widget ul, .prose .widget ol, .prose .widget dl { margin: 0; padding: 0; }
.prose .widget .crowd-score, .prose .widget .tank-time, .prose .widget .session-now, .prose .widget .breathe-cue { color: var(--text); }
.prose .widget li { margin: 0; }
.widget ul, .widget ol { list-style: none; }
.widget figcaption { max-width: 66ch; font-size: 14px; line-height: 1.55; color: var(--text-3); }
.widget svg text { font-family: var(--mono); }
.mono-label, .field > span, .crowd-slider > span, .lever-slider > span, .seg legend { font: 500 12px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }

.seg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; }
.seg legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; }
.seg label { position: relative; display: inline-flex; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span,
.seg-buttons button,
.crowd-presets button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); font: 500 14px/1 var(--font); white-space: nowrap; cursor: pointer; transition: background 180ms, color 180ms, box-shadow 180ms; }
.seg input:checked + span,
.seg-buttons button[aria-pressed='true'],
.crowd-presets button[aria-pressed='true'] { color: #fff; background: var(--blue-soft); box-shadow: inset 0 0 0 1.5px var(--blue); }
.seg input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 3px; }
.seg-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
@media (hover: hover) {
  .seg label:hover span, .seg-buttons button:hover, .crowd-presets button:hover { color: var(--text); box-shadow: inset 0 0 0 1px rgba(77, 142, 255, 0.55); }
}
.seg-buttons .play { margin-left: auto; }

.widget input[type='range'] { width: 100%; height: 30px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.widget input[type='range']::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--blue) var(--fill, 50%), rgba(255, 255, 255, 0.1) var(--fill, 50%)); }
.widget input[type='range']::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.widget input[type='range']::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--blue); }
.widget input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(77, 142, 255, 0.25), 0 0 18px rgba(77, 142, 255, 0.6); }
.widget input[type='range']::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(77, 142, 255, 0.25); }

/* ---------- Figure: the percentile crowd ---------- */
.crowd-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.crowd-score { display: flex; align-items: baseline; gap: 10px; }
.crowd-score b { min-width: 2ch; font: 800 clamp(64px, 9vw, 96px)/0.85 var(--font); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.crowd-score span { font: 500 12px/1 var(--mono); letter-spacing: 0.12em; color: var(--text-3); }
.crowd-text { flex: 1 1 260px; display: grid; gap: 6px; }
.crowd-cat { font: 700 13px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.prose .widget .crowd-line { font-size: 16px; line-height: 1.45; color: var(--text-2); }
.crowd-stage { display: grid; grid-template-columns: minmax(0, 420px) 96px; gap: 14px; align-items: stretch; }
.crowd-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(5px, 1.3vw, 10px); aspect-ratio: 1; }
.crowd-grid i { display: block; border-radius: 50%; background: rgba(160, 180, 255, 0.1); box-shadow: inset 0 0 0 1px var(--line); transition: background 260ms var(--ease), box-shadow 260ms var(--ease), transform 260ms var(--ease); }
.crowd-grid i.on { background: var(--blue); box-shadow: 0 0 10px rgba(77, 142, 255, 0.5); }
.crowd-grid i.edge { background: #fff; box-shadow: 0 0 0 3px rgba(77, 142, 255, 0.45), 0 0 16px rgba(77, 142, 255, 0.9); transform: scale(1.15); }
.crowd-ladder { display: flex; flex-direction: column; gap: 2px; }
.crowd-ladder li { flex: var(--span) 1 0; min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 8px; border-radius: 0 6px 6px 0; border-left: 2px solid var(--line-2); font: 500 11px/1 var(--mono); color: var(--text-3); overflow: hidden; transition: background 260ms, border-color 260ms, color 260ms; }
.crowd-ladder li b { font-weight: 700; color: var(--text-2); }
.crowd-ladder li.now { border-left-color: var(--blue); background: linear-gradient(90deg, var(--blue-soft), transparent); color: var(--text); }
.crowd-ladder li.now b { color: #fff; }
.crowd-controls { display: grid; gap: 12px; }
.crowd-slider { display: grid; gap: 6px; }
.crowd-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.crowd-presets button { min-height: 36px; padding: 0 12px; font-size: 13px; }
.crowd-presets b { font: 700 13px/1 var(--mono); color: var(--text); }
.prose .widget .crowd-branches { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 520px) {
  .crowd-stage { grid-template-columns: minmax(0, 1fr) 70px; gap: 10px; }
  .crowd-ladder li { padding: 0 6px; font-size: 10px; }
  .crowd-ladder li span { display: none; }
  .prose .widget .crowd-branches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .prose .widget .crowd-branches li { gap: 6px; padding: 8px 10px; font-size: 14px; }
  .crowd-branches .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Figure: what the AFQT is made of ---------- */
.weights-bar { display: flex; gap: 6px; min-height: 92px; }
.w-part { flex: var(--n) 1 0; min-width: 0; display: grid; align-content: end; gap: 4px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 90, 110, 0.24), rgba(255, 45, 70, 0.08)); box-shadow: inset 0 0 0 1px rgba(255, 90, 110, 0.38); }
.w-part.w-verbal { background: linear-gradient(180deg, rgba(255, 90, 110, 0.4), rgba(255, 45, 70, 0.14)); }
.w-part b { font: 700 14px/1 var(--mono); letter-spacing: 0.06em; color: #fff; }
.w-part span { font-size: 13px; line-height: 1.25; color: var(--text-2); }
.prose .widget .weights-formula { font: 600 16px/1.4 var(--mono); color: var(--text); }
.weights-formula span { color: var(--red-text); }
@media (max-width: 560px) { .w-part span { display: none; } .weights-bar { min-height: 64px; } }
@media (prefers-reduced-motion: no-preference) {
  .js .weights .w-part { clip-path: inset(0 100% 0 0 round 14px); transition: clip-path 900ms var(--ease); transition-delay: calc(var(--i) * 180ms + 100ms); }
  .js .weights.in .w-part { clip-path: inset(0 0 0 0 round 14px); }
}

/* ---------- Figure: the retest planner ---------- */
.planner-form { display: grid; gap: 18px; }
@media (min-width: 760px) { .planner-form { grid-template-columns: auto 1fr; align-items: end; gap: 24px; } }
.field { display: grid; gap: 8px; }
.field input { min-height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: 500 16px var(--font); color-scheme: dark; }
.field input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.prose .widget .planner-status { font-size: 17px; line-height: 1.5; color: var(--text); }
.planner-line { display: grid; }
.pl-node { display: grid; grid-template-columns: 26px auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 46px; }
.pl-node::before { content: ''; grid-column: 1; justify-self: center; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-2); box-shadow: inset 0 0 0 2px var(--blue); }
.pl-node time { font: 700 16px/1.2 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-node span { color: var(--text-2); font-size: 15px; line-height: 1.35; }
.pl-node.is-done::before { background: var(--text); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08); }
.pl-node.is-open::before { background: var(--green); box-shadow: 0 0 12px rgba(43, 227, 140, 0.8); }
.pl-node.is-open span::after { content: ' (open now)'; color: var(--green); }
.pl-node.is-expire::before { box-shadow: inset 0 0 0 2px var(--text-3); }
.pl-node.is-expire time { color: var(--text-2); }
.pl-gap { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 34px; }
.pl-gap::before { content: ''; grid-column: 1; justify-self: center; width: 2px; height: 100%; min-height: 34px; border-radius: 2px; background: linear-gradient(var(--blue), rgba(77, 142, 255, 0.25)); }
.pl-gap span { font: 500 12px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
@media (prefers-reduced-motion: no-preference) {
  .planner-line.drawn .pl-node { animation: pl-in 480ms var(--ease) both; animation-delay: calc(var(--i) * 140ms); }
  .planner-line.drawn .pl-gap::before { animation: pl-grow 420ms var(--ease) both; animation-delay: calc(var(--i) * 140ms - 60ms); transform-origin: top; }
}
@keyframes pl-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes pl-grow { from { transform: scaleY(0); } to { transform: none; } }

/* ---------- Figure: the adaptive ladder ---------- */
.prose .widget .ladder-status { min-height: 3em; font-size: 16px; line-height: 1.5; color: var(--text); }
.ladder-svg { width: 100%; height: auto; overflow: visible; }
.ladder-grid path { stroke: var(--line); stroke-width: 1; }
.ladder-axis text { fill: var(--text-3); font-size: 11px; letter-spacing: 0.04em; }
.ladder-axis .qn { text-anchor: middle; }
.ladder-band { fill: rgba(77, 142, 255, 0.12); }
.ladder-path { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ladder-dots circle { stroke: var(--panel); stroke-width: 3; }
.ladder-dots .right { fill: var(--green); }
.ladder-dots .wrong { fill: var(--red-text); }
.ladder-dots .current { fill: var(--blue); filter: drop-shadow(0 0 6px rgba(77, 142, 255, 0.9)); }
.ladder-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.ladder-controls .button[disabled] { opacity: 0.4; cursor: default; }

/* ---------- Figure: seconds per question ---------- */
.pace-list { display: grid; gap: 10px; }
.pace-list li { display: grid; grid-template-columns: 46px minmax(0, 190px) minmax(0, 1fr) 52px; align-items: center; gap: 14px; font-size: 15px; }
.pace-list .tq-code { text-align: center; }
.pace-list li.core .tq-code { color: #fff; background: var(--red-ink); box-shadow: none; }
.pace-list .name { overflow: hidden; color: var(--text-2); white-space: nowrap; text-overflow: ellipsis; }
.pace-list .bar { display: block; height: 10px; }
.pace-list .bar i { display: block; height: 100%; width: calc(var(--w) * 1%); border-radius: 999px; background: linear-gradient(90deg, rgba(77, 142, 255, 0.3), var(--blue)); transform-origin: left; }
.pace-list li.core .bar i { background: linear-gradient(90deg, rgba(255, 90, 110, 0.3), var(--red-text)); }
.pace-list .t { font: 700 15px/1 var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .pace-list li { grid-template-columns: 40px minmax(0, 1fr) 46px; grid-template-areas: 'code name t' 'code bar t'; gap: 4px 12px; }
  .pace-list .tq-code { grid-area: code; }
  .pace-list .name { grid-area: name; font-size: 14px; }
  .pace-list .bar { grid-area: bar; height: 8px; }
  .pace-list .t { grid-area: t; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .pace .bar i { transform: scaleX(0); transition: transform 900ms var(--ease); transition-delay: calc(var(--i) * 70ms + 120ms); }
  .js .pace.in .bar i { transform: none; }
}

/* ---------- Figure: two pipes, one tank ---------- */
.tank-stage { display: grid; gap: 16px; align-items: center; }
@media (min-width: 640px) { .tank-stage { grid-template-columns: 1.4fr 1fr; gap: 24px; } }
.tank-svg { width: 100%; height: auto; }
.tank-svg .pipe { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.tank-svg .pipe-a { stroke: rgba(255, 90, 110, 0.65); }
.tank-svg .pipe-b { stroke: rgba(77, 142, 255, 0.7); }
.tank-svg .pipe-label { fill: var(--text-2); font-size: 12px; font-weight: 700; }
.tank-svg .stream { fill: none; stroke-width: 4; stroke-dasharray: 6 8; stroke-linecap: round; opacity: 0; transition: opacity 250ms; }
.tank-svg .stream-a { stroke: var(--red-text); }
.tank-svg .stream-b { stroke: var(--blue); }
.tank-svg .stream.on { opacity: 0.9; }
.tank-svg .water { fill: rgba(77, 142, 255, 0.3); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--fill, 1)); }
.tank-svg .tank-wall { fill: none; stroke: var(--text-2); stroke-width: 2; }
.tank-svg .tank-tick { stroke: var(--text-3); stroke-width: 1.5; }
.tank-readout { display: grid; gap: 10px; }
.tank-time { display: flex; align-items: baseline; gap: 10px; }
.tank-time b { font: 800 clamp(56px, 8vw, 76px)/0.9 var(--font); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.tank-time span { font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.prose .widget .tank-eq { font: 500 15px/1.5 var(--mono); color: var(--text-2); }
@media (prefers-reduced-motion: no-preference) { .tank-svg .stream.on { animation: flow 600ms linear infinite; } }
@keyframes flow { to { stroke-dashoffset: -14; } }

/* ---------- Figure: a worked shortcut, step by step ---------- */
.move { gap: 14px; }
.prose .widget .move-q { font: 600 clamp(19px, 2.4vw, 22px)/1.35 var(--font); letter-spacing: -0.02em; color: var(--text); }
.move-q span { display: block; margin-bottom: 6px; font: 500 12px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.move-steps { display: grid; gap: 8px; counter-reset: move; }
.prose .widget .move-steps li { counter-increment: move; position: relative; padding: 11px 14px 11px 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font-size: 16px; line-height: 1.5; transition: opacity 450ms var(--ease), transform 450ms var(--ease); }
.move-steps li::before { content: counter(move); position: absolute; left: 16px; top: 15px; font: 700 12px/1 var(--mono); color: var(--text-3); }
.move-steps li b { color: var(--text); font-weight: 700; }
.prose .widget .move-steps li.move-a { background: rgba(43, 227, 140, 0.07); box-shadow: inset 0 0 0 1px rgba(43, 227, 140, 0.4); color: var(--text); }
.move-steps li.move-a::before { content: '='; color: var(--green); font-size: 15px; }
.js .move.stepping .move-steps li:not(.shown) { opacity: 0; transform: translateY(8px); }

/* ---------- Figure: gears ---------- */
.gears-svg { width: 100%; height: auto; overflow: visible; }
.gears-svg [data-scene].off { display: none; }
.gear { transform-box: view-box; }
.gear path:first-child { fill: rgba(255, 255, 255, 0.035); stroke: var(--text-2); stroke-width: 1.6; stroke-linejoin: round; }
.gear.driver path:first-child { fill: rgba(77, 142, 255, 0.14); stroke: var(--blue); }
.gear .hub { fill: var(--bg-2); stroke: var(--text-2); stroke-width: 1.6; }
.gear.driver .hub { stroke: var(--blue); }
.gear .spoke { stroke: var(--text-3); stroke-width: 2.5; stroke-linecap: round; }
.gears-running .gear { animation: spin-gear var(--t) linear infinite; }
.gears-running .gear[data-ccw] { animation-direction: reverse; }
@keyframes spin-gear { to { transform: rotate(360deg); } }
.gears-svg .turn { fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; }
.gears-svg .turn-head { fill: var(--text-3); }
.gears-svg .gear-label { fill: var(--text-2); font-size: 13px; font-weight: 700; text-anchor: middle; }
.gears-readout { display: grid; gap: 8px; }
.prose .widget .gears-readout li { display: flex; gap: 10px; align-items: baseline; font-size: 16px; color: var(--text); }
.gears-readout b { min-width: 64px; font: 600 12px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.prose .widget .gears-readout li.rule { color: var(--text-2); }

/* ---------- Figure: the lever ---------- */
.lever-svg { width: 100%; height: auto; overflow: visible; }
.lever-svg .ground { stroke: var(--line-2); stroke-width: 2; }
.lever-svg .fulcrum { fill: rgba(255, 255, 255, 0.06); stroke: var(--text-2); stroke-width: 1.6; stroke-linejoin: round; }
.lever-svg .bar { fill: rgba(255, 255, 255, 0.07); stroke: var(--text-2); stroke-width: 1.5; }
.lever-svg .tick { stroke: var(--text-3); stroke-width: 1.5; }
.lever-svg .ft { fill: var(--text-3); font-size: 11px; font-weight: 600; text-anchor: middle; }
.lever-svg .load rect { fill: rgba(255, 255, 255, 0.05); stroke: var(--text-2); stroke-width: 1.6; }
.lever-svg .load.right rect { fill: rgba(77, 142, 255, 0.16); stroke: var(--blue); }
.lever-svg .load text { fill: var(--text); font-size: 13px; font-weight: 700; text-anchor: middle; }
.lever-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; }
.lever-slider input { grid-column: 1 / -1; }
.lever-slider output { font: 700 15px/1 var(--mono); color: var(--text); grid-row: 1; grid-column: 2; }
.lever-math { display: grid; gap: 6px; }
.prose .widget .lever-math p { font: 500 15px/1.5 var(--mono); color: var(--text-2); }
.lever-math span { display: inline-block; min-width: 56px; color: var(--text-3); }
.lever-math b { color: var(--text); }
.prose .widget .lever-math .verdict { font: 700 13px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); }
.prose .widget .lever-math .verdict.is-level { color: var(--green); }

/* ---------- Figure: pulleys ---------- */
.pulley-stage { display: grid; gap: 18px; align-items: center; }
@media (min-width: 720px) { .pulley-stage { grid-template-columns: 1.4fr 1fr; } }
.pulley-svg { width: 100%; height: auto; max-height: 380px; }
.pulley-svg g.off { display: none; }
.pulley-svg .ceiling { stroke: var(--text-2); stroke-width: 4; stroke-linecap: round; }
.pulley-svg .rope { fill: none; stroke: var(--text-3); stroke-width: 3; stroke-linecap: round; }
.pulley-svg .rope.hold { stroke: var(--blue); filter: drop-shadow(0 0 4px rgba(77, 142, 255, 0.5)); }
.pulley-svg .rope.pull { stroke: var(--text-2); }
.pulley-svg .sheave { fill: rgba(255, 255, 255, 0.04); stroke: var(--text-2); stroke-width: 2; }
.pulley-svg .sheave.moving, .pulley-svg .block.moving { stroke: var(--blue); }
.pulley-svg .axle { fill: var(--text-2); }
.pulley-svg .hanger { stroke: var(--text-2); stroke-width: 3; }
.pulley-svg .block { fill: rgba(255, 255, 255, 0.05); stroke: var(--text-2); stroke-width: 2; }
.pulley-svg .crate rect { fill: rgba(255, 178, 36, 0.12); stroke: var(--amber); stroke-width: 2; }
.pulley-svg .crate text { fill: var(--text); font-size: 14px; font-weight: 700; text-anchor: middle; }
.pulley-svg .hand circle { fill: none; stroke: var(--text); stroke-width: 3; }
.pulley-svg .hand path { fill: none; stroke: var(--text-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pulley-readout { display: grid; gap: 14px; margin: 0; }
.pulley-readout div { display: grid; gap: 4px; }
.pulley-readout dt { font: 500 12px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.pulley-readout dd { margin: 0; font: 800 clamp(28px, 4vw, 36px)/1 var(--font); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.pulleys > .button { justify-self: start; }
.pulleys > .button[disabled] { opacity: 0.5; }

/* ---------- Figure: the test session ---------- */
.session-readout { display: grid; gap: 6px; min-height: 88px; align-content: start; }
.session-now { display: flex; align-items: center; gap: 12px; font: 700 21px/1.2 var(--font); letter-spacing: -0.02em; }
.prose .widget .session-detail { font-size: 16px; line-height: 1.5; color: var(--text-2); }
.session-track { display: flex; gap: 4px; }
.session-track .phase { flex: var(--w) 1 30px; min-width: 0; }
.session-track .phase.untimed { flex: 0 0 46px; }
.session-track button { display: grid; gap: 8px; width: 100%; padding: 0 0 4px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.session-track button::before { content: ''; height: 12px; border-radius: 4px; background: rgba(255, 255, 255, 0.09); transition: background 300ms, box-shadow 300ms; }
.session-track .core button::before { background: rgba(255, 90, 110, 0.3); }
.session-track .untimed button::before { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 3px, transparent 3px 6px); }
.session-track .phase.now button::before { background: var(--blue); box-shadow: 0 0 14px rgba(77, 142, 255, 0.75); }
.session-track b { overflow: hidden; font: 700 11px/1 var(--mono); letter-spacing: 0.04em; color: var(--text-2); text-overflow: clip; white-space: nowrap; }
.session-track span { display: none; }
.session-track .phase.now b { color: #fff; }
@media (max-width: 760px) {
  .session-track { flex-direction: column; gap: 6px; }
  .session-track .phase, .session-track .phase.untimed { flex: none; }
  .session-track button { grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; padding: 0; }
  .session-track button::before { grid-column: 2; grid-row: 1; width: calc(max(var(--w), 6) / 55 * 100%); max-width: 100%; }
  .session-track .untimed button::before { width: 46px; }
  .session-track b { grid-column: 1; grid-row: 1; font-size: 12px; }
}

/* ---------- Figure: box breathing ---------- */
.breathe-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px; }
.breathe-svg { width: clamp(150px, 34vw, 230px); height: auto; overflow: visible; }
.breathe-box { fill: rgba(77, 142, 255, 0.05); stroke: var(--line-2); stroke-width: 2; }
.breathe-side { fill: none; stroke: transparent; stroke-width: 4; stroke-linecap: round; transition: stroke 300ms; }
.breathe-side.on { stroke: var(--blue); }
.breathe-dot { fill: #fff; filter: drop-shadow(0 0 8px rgba(77, 142, 255, 0.95)); }
.breathe-cue { display: grid; gap: 6px; }
.breathe-cue b { font: 800 clamp(26px, 4vw, 40px)/1.05 var(--font); letter-spacing: -0.04em; }
.breathe-cue span { font: 700 44px/1 var(--mono); color: var(--blue); font-variant-numeric: tabular-nums; min-height: 44px; }
.breathe > .button { justify-self: start; }

/* ---------- Figure: the study plan ---------- */
.plan-form { display: grid; gap: 16px; }
.check { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 15px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--blue); }
.plan-grid { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; }
.plan-weeks { display: grid; gap: 10px; min-width: 640px; }
.plan-week { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: start; }
.plan-wk { padding-top: 9px; font: 600 12px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.plan-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.plan-day { display: grid; align-content: start; gap: 4px; min-height: 76px; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px var(--line); }
.plan-dn { font: 500 10px/1 var(--mono); letter-spacing: 0.06em; color: var(--text-3); margin-bottom: 2px; }
.plan-day .s { display: block; padding: 4px 6px; border-radius: 6px; font: 600 11px/1.2 var(--font); }
.s-afqt { background: rgba(255, 90, 110, 0.16); color: #ffc4cc; }
.s-tech { background: var(--blue-soft); color: #c9dcff; }
.s-exam { background: rgba(255, 255, 255, 0.13); color: #fff; }
.s-review { background: rgba(255, 178, 36, 0.15); color: #ffdd94; }
.s-rest { color: var(--text-3); }
.plan-day .s-rest { padding-left: 0; }
.s-test { background: rgba(43, 227, 140, 0.16); color: #a8f5cf; }
.prose .widget .plan-summary { font-size: 16px; line-height: 1.5; color: var(--text); }
.plan-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.prose .widget .plan-legend li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.plan-legend i { width: 12px; height: 12px; border-radius: 4px; background: currentColor; }
.plan-legend .s-afqt, .plan-legend .s-tech, .plan-legend .s-exam, .plan-legend .s-review, .plan-legend .s-rest { background: none; padding: 0; }
.plan-legend .s-afqt i { background: rgba(255, 90, 110, 0.55); }
.plan-legend .s-tech i { background: rgba(77, 142, 255, 0.6); }
.plan-legend .s-exam i { background: rgba(255, 255, 255, 0.6); }
.plan-legend .s-review i { background: rgba(255, 178, 36, 0.6); }
.plan-legend .s-rest i { background: rgba(255, 255, 255, 0.12); }
@media (prefers-reduced-motion: no-preference) {
  .plan-grid.drawn .plan-day { animation: plan-in 420ms var(--ease) both; animation-delay: calc(var(--i) * 12ms); }
}
@keyframes plan-in { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: none; } }