/* =====================================================================
   styles.css — Portal Tutoring, "One family, three worlds".
   Shared system only: every token for every theme, shared components,
   the CSS half of the motion engine, lab restyles and print.
   Theme signatures live in assets/css/theme-*.css (loaded after this).

   01 Registered properties        16 Duo + F2 "graphite, then spark"
   02 Layer 1 raw colours          17 Paper islands, sheets, chat, terminal
   03 Type, grid, motion tokens    18 Pinned story framework (static)
   04 Layer 2 theme slots          19 FAQ
   05 Layer 3 semantic aliases     20 Form & contact
   06 Reset & base                 21 Footer, motion toggle, float pill
   07 Layout & surfaces            22 Labs: shell + seven widgets
   08 Type components              23 Motion support (keyframes, draw,
   09 Header, nav, headroom           type, words, count, reveal base)
   10 Sub-nav + F3 progress        24 View transitions
   11 Buttons, links, F4 ink       25 Safety nets (reduced motion, no JS,
   12 Page hero, stage, contents      forced colours, transparency)
   13 Stat strip, odometer, bits   26 Print
   14 Cards, tiles, flips, gallery 27 RULE-10 BLOCK (hidden starting
   15 Segmented control               states + pinned layout)
   (+) Legacy page components      28 6.7 thanks & 404 (other builder)

   Rule 10: every html.motion-ok rule that hides, offsets, clips or
   un-draws something, and every pinned-layout rule, lives ONLY in the
   single @media screen and (prefers-reduced-motion:no-preference)
   block in section 27. Outside it, everything is the final frame.
   ===================================================================== */

/* ---------------------------------------------------------------- 01 */
@property --p      { syntax: "<number>"; inherits: true;  initial-value: 1; }
@property --pe     { syntax: "<number>"; inherits: true;  initial-value: 1; }
@property --step-p { syntax: "<number>"; inherits: true;  initial-value: 1; }
@property --arc    { syntax: "<angle>";  inherits: false; initial-value: 360deg; }
@property --accent     { syntax: "<color>"; inherits: true; initial-value: #eeeeee; }
@property --accent-ink { syntax: "<color>"; inherits: true; initial-value: #eeeeee; }
@property --tint       { syntax: "<color>"; inherits: true; initial-value: #161616; }
@property --band       { syntax: "<color>"; inherits: true; initial-value: #000000; }

/* ---------------------------------------------------------------- 02 */
/* Shared black surfaces and light ink. Subject accents stay deliberately quiet. */
:root {
  --paper: #000000; --paper-2: #070707; --paper-3: #181818; --white: #111111;
  --ink: #f4f4f4; --ink-2: #c6c6c6; --ink-3: #a0a0a0; --ink-4: #757575;
  --hair: rgba(255,255,255,.12); --hair-strong: rgba(255,255,255,.24); --hair-ui: #545454;
  --night: #000000; --night-2: #111111; --night-ink: #f4f4f4; --night-ink-2: #a0a0a0;
  --focus: #bdcde3; --focus-night: #bdcde3; --success: #abd3b9; --danger: #eea49e;
  --clay: #e1ded8; --math: #bacce5; --english: #e0d5c3; --cs: #afcfbe; --approach: #dadada;
  --math-soft: rgba(186,204,229,.10); --english-soft: rgba(224,213,195,.10); --cs-soft: rgba(175,207,190,.10);
  --spark: #c8bdd4; --spark-ink: #c8bdd4; --spark-bright: #d9cde5; --spark-tint: #17141b;
  --hl: #4e442c; --hl-claim: #554629; --hl-evidence: #243e59; --hl-analysis: #254b3a;
  --pen: #e2a49b; --ink-blue: #bacce5; --cream: #111110;
  --rule: rgba(255,255,255,.07); --margin-rule: rgba(224,213,195,.18);
  --term-bg: #0a0c0b; --term-ink: #e3e9e6; --tok-k: #c8bdd4; --tok-f: #bacce5; --tok-n: #e0d5c3;
  --tok-s: #afcfbe; --tok-c: #95a49d; --tok-p: #afcfbe; --cmp: #e0ce9e; --swp: #eea49e; --sorted: #afcfbe; --amber: #e0d5c3;
  --graphite: #c6c6c6; --gold: #e0d5c3;
}

/* ---------------------------------------------------------------- 03 */
:root {
  --font-sans:  -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, "New York", "Iowan Old Style", Charter, "Bitstream Charter", Georgia, serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-hand:  "Bradley Hand", Noteworthy, "Segoe Print", "Ink Free", ui-serif, Georgia, serif;

  /* fluid type scale 375 -> 1440 */
  --fs-wordmark: clamp(3rem, 1.25rem + 7.5vw, 8rem);
  --fs-display:  clamp(3rem, 1.944rem + 4.507vw, 6rem);
  --fs-h1:       clamp(2.5rem, 1.796rem + 3.005vw, 4.5rem);
  --fs-h2:       clamp(2rem, 1.472rem + 2.254vw, 3.5rem);
  --fs-h3:       clamp(1.3125rem, 1.158rem + .657vw, 1.75rem);
  --fs-stat:     clamp(2.5rem, 1.62rem + 3.756vw, 5rem);
  --fs-eyebrow:  clamp(1.0625rem, .908rem + .657vw, 1.5rem);
  --fs-lead:     clamp(1.25rem, 1.074rem + .751vw, 1.75rem);
  --fs-read:     clamp(1.0625rem, 1.04rem + .09vw, 1.125rem);
  --fs-body:     clamp(1rem, .978rem + .094vw, 1.0625rem);
  --fs-small: .875rem; --fs-meta: .75rem; --fs-mono: .9375rem; --fs-mono-sm: .8125rem;

  /* grid, spacing, radii, shadows */
  --gutter: clamp(1.25rem, .6rem + 2.8vw, 2.5rem);
  --wrap: 1180px; --wrap-wide: 1440px; --narrow: 820px; --read: 640px;
  --gap: clamp(1rem, .8rem + .9vw, 1.5rem);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 200px;
  --space-1: var(--s-1); --space-2: var(--s-2); --space-3: var(--s-4); --space-4: var(--s-6); --space-5: var(--s-7); --space-6: var(--s-8);
  --section-y: clamp(4.5rem, 3.09rem + 6.01vw, 8.5rem);
  --head-gap:  clamp(2.5rem, 2rem + 2vw, 4.5rem);
  --header-h: 56px; --subnav-h: 52px;
  --stick-top: 0px; --stick-top-ui: 0px;
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px;
  --r-tile: clamp(20px, 1rem + 1vw, 28px);
  --shadow-1: 0 1px 2px rgba(20,20,19,.06), 0 1px 1px rgba(20,20,19,.04);
  --shadow-2: 0 10px 28px -14px rgba(20,20,19,.22);
  --shadow-3: 0 28px 64px -28px rgba(20,20,19,.32);
  --shadow-float: 0 12px 32px -10px rgba(20,20,19,.35), 0 0 0 1px rgba(20,20,19,.06);
  --pencil-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8C60 3 140 11 298 5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --tick-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6l3.4 3.4L13.5 4.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pin-step: 70svh;

  /* motion */
  --ease-out: cubic-bezier(.165,.84,.44,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
  --ease-expo: cubic-bezier(.19,1,.22,1);
  --ease-pencil: cubic-bezier(.45,.05,.35,1);
  --ease-pop: cubic-bezier(.34,1.56,.64,1);
  --dur-press: 120ms; --dur-ui: 240ms; --dur-swap: 480ms; --dur-reveal: 640ms; --dur-hero: 900ms; --dur-draw: 1400ms; --stagger: 70ms;

  /* every JS-written / inline var has a resting default (p = 1 is rest) */
  --p: 1; --pe: 1; --step: 99; --step-p: 1; --mx: .5; --my: .5; --chars: 0; --type-delay: 0ms; --type-dur: 600ms;
  --at: 0; --len: .25; --until: 999;
  --i: 0; --d: 0; --n: 1; --w: 0; --digit: 0; --autoplay: 6000ms; --x: 0; --v: 1; --fin: 0; --push: 0; --pop: 999; --from: 0; --to: 1;
  --rx: 50%; --ry: 50%; --seg-i: 0; --seg-n: 3;
  --li: 0; --k: 0; --ai: .7; --steps: 1;
}
body[data-subnav] { --stick-top: var(--subnav-h); --stick-top-ui: var(--subnav-h); }
/* --stick-top is the pinned-story offset (headroom is forced hidden while a story is
   engaged, so it never moves). --stick-top-ui is for every OTHER sticky child: it
   follows headroom, so a revealed header + sub-nav never cover it. */
html.js body[data-subnav] { --stick-top-ui: calc(var(--header-h) + var(--subnav-h)); }
html.js[data-head="hidden"] body[data-subnav] { --stick-top-ui: var(--subnav-h); }

/* ---------------------------------------------------------------- 04 */
/* Subject identity: typography and motifs over one shared dark palette. */
:root, [data-theme] {
  --accent: #eeeeee; --accent-ink: #eeeeee; --accent-bright: #ffffff; --tint: #161616; --tint-2: #0c0c0c;
  --band: #000000; --band-2: #111111; --band-ink: #f4f4f4; --band-ink-2: #a0a0a0; --band-hair: rgba(255,255,255,.12);
  --cta-bg: #f2f2f2; --cta-fg: #080808; --cta-bg-band: #f2f2f2; --cta-fg-band: #080808;
  --brand-lines: #000000;
  --motif: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.5px) 0 0/24px 24px;
  --motif-band: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1.5px) 0 0/24px 24px;
  --tone-gradient: linear-gradient(90deg, #ffffff, #b8b8b8);
  --tone-font: initial; --tone-style: normal; --tone-weight: initial;
  --kicker-font: var(--font-sans); --kicker-prefix: ""; --num-font: var(--font-sans);
  --sel: rgba(255,255,255,.22);
  --plot-bg: #090b0e; --plot-grid: rgba(186,204,229,.08); --plot-grid-major: rgba(186,204,229,.16); --plot-axis: rgba(255,255,255,.55);
  --plot-label: #b0b7c1; --plot-curve: #bacce5; --plot-target: rgba(255,255,255,.45); --plot-target-dot: #ffffff; --plot-vertex: #ffffff;
}
[data-theme="english"] {
  --accent: #e0d5c3; --accent-ink: #e0d5c3; --accent-bright: #eee5d7; --tint: #1b1915; --tint-2: #0c0b0a;
  --motif: repeating-linear-gradient(to bottom, transparent 0 39px, rgba(224,213,195,.055) 39px 40px);
  --motif-band: repeating-linear-gradient(to bottom, transparent 0 39px, rgba(224,213,195,.04) 39px 40px);
  --tone-font: var(--font-serif); --tone-style: italic; --tone-weight: 400;
}
[data-theme="math"] {
  --accent: #bacce5; --accent-ink: #bacce5; --accent-bright: #d6e2f3; --tint: #141a22; --tint-2: #090c10;
  --motif: linear-gradient(rgba(186,204,229,.06) 1px, transparent 1px) 0 0/40px 40px,
           linear-gradient(90deg, rgba(186,204,229,.06) 1px, transparent 1px) 0 0/40px 40px;
  --motif-band: linear-gradient(rgba(186,204,229,.045) 1px, transparent 1px) 0 0/40px 40px,
                linear-gradient(90deg, rgba(186,204,229,.045) 1px, transparent 1px) 0 0/40px 40px;
}
[data-theme="cs"] {
  --accent: #afcfbe; --accent-ink: #afcfbe; --accent-bright: #c4e1d2; --tint: #141d18; --tint-2: #090c0a;
  --motif: radial-gradient(rgba(175,207,190,.10) 1px, transparent 1.5px) 0 0/20px 20px;
  --motif-band: radial-gradient(rgba(175,207,190,.07) 1px, transparent 1.5px) 0 0/20px 20px;
  --kicker-font: var(--font-mono); --num-font: var(--font-mono);
}
[data-theme="approach"] {
  --accent: #dadada; --accent-ink: #dadada; --accent-bright: #ffffff; --tint: #171717; --tint-2: #0a0a0a;
  --motif: repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 9px);
}
#subject-stage { transition: --accent 480ms var(--ease-in-out), --tint 480ms var(--ease-in-out); }

/* ---------------------------------------------------------------- 05 */
/* Layer 3 — semantic aliases, re-declared on every scope. */
:root, [data-theme], .bg-paper, .bg-paper-2, .section-alt, .bg-white, .bg-tint {
  --surface: var(--paper); --card-bg: var(--white); --text: var(--ink); --text-2: var(--ink-2); --text-3: var(--ink-3);
  --line: var(--hair); --line-strong: var(--hair-strong); --accent-text: var(--accent-ink); --spark-text: var(--spark-ink);
  --btn-bg: var(--cta-bg); --btn-fg: var(--cta-fg); --seg-bg: rgba(20,20,19,.06); --focus-ring: var(--focus);
  --mark: var(--accent);
}
.bg-paper-2, .section-alt { --surface: var(--paper-2); }
.bg-white { --surface: var(--white); --card-bg: var(--paper); }
.bg-tint { --surface: var(--tint); }
.bg-band, .hero-stage, .term, .sheet--band {
  --surface: var(--band); --card-bg: var(--band-2); --text: var(--band-ink); --text-2: var(--band-ink);
  --text-3: var(--band-ink-2); --line: var(--band-hair); --line-strong: rgba(255,255,255,.22);
  --accent-text: var(--accent-bright); --spark-text: var(--spark-bright); --btn-bg: var(--cta-bg-band); --btn-fg: var(--cta-fg-band);
  --seg-bg: rgba(255,255,255,.10); --focus-ring: var(--focus-night); --mark: var(--accent-bright); color-scheme: dark;
}
.bg-paper, .bg-paper-2, .section-alt, .bg-white, .bg-tint, .bg-band { background-color: var(--surface); color: var(--text-2); }
.term { --surface: var(--term-bg); --text: var(--term-ink); --text-2: var(--term-ink); --text-3: var(--tok-c); background: var(--term-bg); color: var(--term-ink); }
/* light islands inside dark stages/bands/terminals */
.paper, .slip, .sheet:not(.sheet--band), .chat-bubble.is-ai {
  --surface: var(--cream); --card-bg: var(--white); --text: var(--ink); --text-2: var(--ink-2); --text-3: var(--ink-3);
  --line: var(--hair); --line-strong: var(--hair-strong); --accent-text: var(--accent-ink); --spark-text: var(--spark-ink); --mark: var(--accent);
  --btn-bg: var(--cta-bg); --btn-fg: var(--cta-fg); --seg-bg: rgba(20,20,19,.06); --focus-ring: var(--focus); color-scheme: dark; color: var(--text-2);
}
.paper, .slip { background-color: var(--cream); }
.sheet:not(.sheet--band) { background-color: var(--card-bg); }
.chat-bubble.is-ai { background-color: var(--spark-tint); }
/* shorthand, not background-image: several --motif tokens carry position/size
   ("0 0/22px 22px"), which only the shorthand accepts. Colour = last layer. */
.motif { background: var(--motif), var(--surface); }
.bg-band.motif, .hero-stage.motif { background: var(--motif-band), var(--band); }
::selection { background: var(--sel); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* ---------------------------------------------------------------- 06 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); scroll-padding-top: calc(var(--header-h) + 12px); scroll-padding-bottom: 88px; }
html:has(body[data-subnav]) { scroll-padding-top: calc(var(--header-h) + var(--subnav-h) + 12px); }
html.motion-ok { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; background: var(--surface); color: var(--text-2);
  font: 400 var(--fs-body)/1.55 var(--font-sans); overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;   /* clip, never hidden: keeps position:sticky alive */
}
@supports not (overflow: clip) { body { overflow-x: hidden; } }
body.nav-open { overflow: hidden; }

h1, h2, h3, h4 { font-family: var(--font-sans); color: var(--text); text-wrap: balance; margin: 0 0 .45em; }
h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.07; letter-spacing: -.012em; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.14; letter-spacing: -.008em; }
h4 { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
p { margin: 0 0 var(--s-4); max-width: 68ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.2em; }
li { margin-bottom: .4em; }
li:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }
small { font-size: .875em; }
em, i { font-style: italic; }
a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, kbd, pre, samp { font-family: var(--font-mono); }
mark { background: var(--hl); color: var(--ink); }
del { text-decoration-thickness: 2px; }
hr { border: 0; height: 1px; background: var(--line); margin: var(--s-7) 0; }
[hidden] { display: none !important; }
.var { font-family: var(--font-serif); font-style: italic; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: fixed; left: 50%; top: 0; z-index: 100; transform: translate(-50%, -120%);
  padding: 12px 20px; border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none;
  transition: transform var(--dur-ui) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--paper); outline-color: var(--focus-night); }
.noscript-bar { padding: 12px var(--gutter); background: var(--tint); color: var(--text); font-size: 14px; text-align: center; }

/* ---------------------------------------------------------------- 07 */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2 * var(--gutter), var(--wrap-wide)); margin-inline: auto; }
.narrow { max-width: var(--narrow); margin-inline: auto; }
.read { max-width: var(--read); margin-inline: auto; }
.read p { font: 400 var(--fs-read)/1.65 var(--font-sans); }
.grid-12 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
@media (min-width: 720px) { .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.stack > * + * { margin-top: var(--s-6); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

.section { position: relative; padding-block: var(--section-y); overflow-x: clip; }
.motif.motif-fade { background: var(--surface); position: relative; isolation: isolate; }
.motif.motif-fade::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--motif);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 40%, transparent 85%);
          mask-image: radial-gradient(120% 80% at 50% 0%, #000 40%, transparent 85%);
}
/* §6.0 band entrance (transform-only; corners hide outside the clip at p = 1) */
.bg-band.is-framed, .bg-band.motif.is-framed { background: transparent; }
.is-framed { position: relative; isolation: isolate; overflow: clip; }
.is-framed::before {
  content: ""; position: absolute; inset: -48px; z-index: -1; border-radius: 64px; pointer-events: none;
  background: var(--motif-band), var(--band);
  transform: scale(calc(.92 + .08 * var(--pe)), calc(.88 + .12 * var(--pe)));
}
@media (max-width: 719px) { .is-framed::before { transform: none; } }

/* ---------------------------------------------------------------- 08 */
.display { font-size: var(--fs-display); font-weight: 700; line-height: 1.02; letter-spacing: -.022em; }
.lead { font: 400 var(--fs-lead)/1.5 var(--font-sans); letter-spacing: -.005em; color: var(--text-2); max-width: 34em; }
.t-meta { font: 600 var(--fs-meta)/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }

.section-head { max-width: 52rem; margin: 0 0 var(--head-gap); }
.section-head h2 { margin: 0; }
.section-kicker { display: block; font: 700 var(--fs-eyebrow)/1.17 var(--kicker-font); letter-spacing: 0; color: var(--text); margin: 0 0 var(--s-3); max-width: none; }
.section-kicker::before { content: var(--kicker-prefix); content: var(--kicker-prefix) / ""; color: var(--accent-text); }
.section-lead { font: 400 var(--fs-lead)/1.29 var(--font-serif); letter-spacing: -.005em; color: var(--text-2); max-width: 34em; margin: var(--s-5) 0 0; }
.section-head > p:not(.section-kicker):not(.section-lead) { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--text-2); }
.section-head > p:not(.section-kicker):not(.section-lead):has(.btn) { font-size: inherit; margin-top: var(--s-5); }
.tone { color: var(--accent-text); font-family: var(--tone-font); font-style: var(--tone-style); font-weight: var(--tone-weight); }
@media (min-width: 960px) { .section-head h2 .tone { display: block; } }
.tone--spectrum {
  background: var(--tone-gradient) 0 0/100% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* F1 pencil rule under every section h2 */
.section-head h2::after {
  content: ""; display: block; width: min(4.5em, 60%); height: 10px; margin-top: var(--s-3); background: var(--mark);
  -webkit-mask: var(--pencil-stroke) no-repeat center/100% 100%; mask: var(--pencil-stroke) no-repeat center/100% 100%;
}
.section-head.is-center { text-align: center; max-width: 820px; margin-inline: auto; }
.section-head.is-center h2::after, .section-head.is-center p { margin-inline: auto; }
.section-head.is-split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-5); max-width: none; }
.section-head.is-split > :first-child { max-width: 52rem; }
.section-head.no-rule h2::after { content: none; }

/* §3.8 subject wordmark (base geometry; per-theme animation in theme files) */
.wordmark {
  position: relative; display: inline-block; max-width: 100%; margin: 0 0 var(--s-4);
  font: 700 var(--fs-wordmark)/.95 var(--font-sans); letter-spacing: -.035em; color: var(--text);
}
.wm-text { position: relative; display: inline-block; }
.wm-english { font-family: var(--font-serif); font-style: italic; font-weight: 500; }
.wm-cs { font-family: var(--font-mono); font-size: min(var(--fs-wordmark), 11vw); letter-spacing: -.04em; }
.wm-line { display: inline-block; }
.wm-construct, .wm-flourish { position: absolute; inset: auto 0 -12% 0; width: 100%; height: auto; pointer-events: none; overflow: visible; fill: none; }
.wm-blot { position: absolute; right: -.18em; bottom: -.05em; width: 10px; height: 10px; border-radius: 48% 52% 45% 55%; background: var(--accent); }
.wm-caret { display: inline-block; width: .55em; height: .82em; margin-left: .06em; vertical-align: -.04em; background: var(--amber); }

/* ---------------------------------------------------------------- 09 */
.site-header {
  position: sticky; top: 0; z-index: 50; isolation: isolate; color: var(--text-2);
  transition: transform var(--dur-ui) var(--ease-out);
}
.site-header::before, .subnav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgb(0 0 0 / .85);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  transition: background-color var(--dur-ui) var(--ease-out);
}
.site-header.is-stuck::before { box-shadow: inset 0 -1px 0 var(--line); }
@media (pointer: coarse) {
  .site-header::before, .subnav::before, .float-pill::before, .gallery-ctrl::before { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
html[data-head="hidden"] .site-header { transform: translateY(-100%); }
body.nav-open .site-header { transform: none !important; }
html:not(.js) body[data-subnav] .site-header { position: relative; }
/* dark glass while a dark band/stage passes under the bars (the sub-nav only once it is stuck
   under the header — in flow it still sits over the light page) */
html[data-tone-under="dark"] body:not(.nav-open) .site-header,
html.sub-stuck[data-tone-under="dark"] body:not(.nav-open) .subnav {
  --text: var(--night-ink); --text-2: var(--night-ink); --text-3: var(--night-ink-2);
  --line: rgba(250,249,245,.12); --line-strong: rgba(250,249,245,.22); --accent-text: var(--accent-bright);
  --btn-bg: var(--cta-bg-band); --btn-fg: var(--cta-fg-band); --seg-bg: rgba(255,255,255,.10);
  --focus-ring: var(--focus-night); --mark: var(--accent-bright); color-scheme: dark;
}
html[data-tone-under="dark"] body:not(.nav-open) .site-header::before,
html.sub-stuck[data-tone-under="dark"] body:not(.nav-open) .subnav::before { background: rgb(15 15 14 / .72); }

.header-inner { display: flex; align-items: center; gap: var(--s-4); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); text-decoration: none; }
.brand-mark { display: inline-flex; flex: none; color: var(--accent); }
.brand-mark svg { width: 28px; height: 28px; }
.brand-lines { stroke: var(--brand-lines); fill: none; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.brand-text strong { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); white-space: nowrap; }
.brand-text small { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.primary-nav ul { display: flex; gap: clamp(14px, 1.6vw, 24px); list-style: none; margin: 0; padding: 0; }
.primary-nav li { margin: 0; }
.primary-nav ul a {
  display: inline-block; padding: 6px 0; font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100%/0 1px no-repeat;
  transition: background-size var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.primary-nav ul a:hover { color: var(--text); background-size: 100% 1px; }
.primary-nav ul a.is-current, .primary-nav ul a[aria-current="page"] { color: var(--text); background-size: 100% 1px; }
.nav-cta { margin: 0; }
.nav-toggle {
  display: none; align-items: center; gap: 8px; min-height: 36px; margin-left: auto; padding: 0 14px;
  border: 0; border-radius: var(--r-pill); background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 600 14px/1 var(--font-sans); color: var(--text);
}
.nav-toggle-bars { display: inline-flex; flex-direction: column; gap: 3px; }
.nav-toggle-bars span { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur-ui) var(--ease-out), opacity var(--dur-ui); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
@media (min-width: 901px) {
  .primary-nav { display: flex !important; align-items: center; gap: clamp(16px, 2vw, 28px); margin-left: auto; }
}
@media (min-width: 901px) and (max-width: 1100px) { .brand-text small { display: none; } }
@media (max-width: 900px) {
  .header-inner { flex-wrap: wrap; }
  html.js .nav-toggle { display: inline-flex; }
  html.js .header-inner { flex-wrap: nowrap; }
  html.js .primary-nav {
    display: none; position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--s-5) var(--gutter) calc(var(--s-7) + env(safe-area-inset-bottom)); background: var(--paper);
    --text: var(--ink); --text-2: var(--ink-2); --line: var(--hair); --btn-bg: var(--cta-bg); --btn-fg: var(--cta-fg);
  }
  html.js .primary-nav.is-open { display: block; }
  html.js .primary-nav ul { flex-direction: column; gap: 0; }
  html.js .primary-nav ul a {
    display: block; padding: 14px 0; font-size: 28px; font-weight: 600; letter-spacing: -.01em; color: var(--text);
    background: none; box-shadow: inset 0 -1px 0 var(--line);
  }
  html.js .nav-cta { margin-top: var(--s-6); }
  html.js .nav-cta .btn { width: 100%; min-height: 52px; font-size: 17px; }
  html:not(.js) .primary-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); flex-basis: 100%; padding-bottom: var(--s-3); }
  html:not(.js) .primary-nav ul { flex-wrap: wrap; }
  /* the open menu covers the page: take the page out of the tab order so focus can't hide behind it */
  html.js body.nav-open :is(main, .site-footer, .subnav, .float-pill) { visibility: hidden; }
}
@media (max-width: 479px) {
  .brand-text small { display: none; }
  /* visually hidden, NOT display:none: the label is the toggle's accessible name */
  .nav-toggle-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .nav-toggle { padding: 0 11px; }
}

/* ---------------------------------------------------------------- 10 */
.subnav { position: sticky; top: var(--header-h); z-index: 45; isolation: isolate; height: var(--subnav-h); transition: transform var(--dur-ui) var(--ease-out); }
.subnav::before { box-shadow: inset 0 -1px 0 var(--line); }
html[data-head="hidden"] .subnav { transform: translateY(calc(-1 * var(--header-h))); }
html:not(.js) .subnav { top: 0; }
.subnav-inner { display: flex; align-items: center; gap: var(--s-5); height: 100%; }
.subnav-title { display: inline-flex; align-items: center; gap: 8px; flex: none; font: 600 21px/1 var(--font-sans); letter-spacing: -.012em; color: var(--text); text-decoration: none; white-space: nowrap; }
.subnav-title:hover { text-decoration: none; }
.subnav-links { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 24px); min-width: 0; list-style: none; margin: 0 0 0 auto; padding: 0; }
.subnav-links li { flex: none; margin: 0; scroll-snap-align: start; }
.subnav-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.subnav-links a:hover { color: var(--text); }
.subnav-links a[aria-current="location"] { color: var(--text); text-decoration: underline 1px; text-underline-offset: 6px; }
/* focusing a control inside the stuck bar must not scroll the page to clear scroll-padding-top */
.subnav a { scroll-margin-top: calc(-1 * (var(--header-h) + var(--subnav-h) + 12px)); }
.subnav-inner > .btn { flex: none; }
.sw-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
/* below 900px the link strip scrolls (6 links + title + CTA don't fit at tablet widths) */
@media (max-width: 899px) {
  .subnav-inner { gap: var(--s-3); }
  .subnav-links {
    flex: 1 1 auto; align-self: stretch; margin-left: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    gap: clamp(4px, 1vw, 12px); padding-inline: 8px; scroll-padding-inline: 16px;
    /* edge fades only where links are hidden (main.js: .is-scrolled / .is-end) */
    --fade-l: 0px; --fade-r: 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  }
  .subnav-links.is-scrolled { --fade-l: 16px; }
  .subnav-links.is-end { --fade-r: 0px; }
  .subnav-links::-webkit-scrollbar { display: none; }
  /* the scroller clips outside rings: draw the ring inside the link box */
  .subnav-links a { padding-inline: 8px; border-radius: var(--r-sm); }
  .subnav-links a:focus-visible { outline-offset: -3px; }
}
@media (max-width: 479px) { .subnav-title { display: none; } }
/* F3 progress pencil (sub-nav bottom edge; on home: header bottom edge) */
.subnav-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; pointer-events: none; container-type: inline-size; display: none; }
.motion-ok .subnav-progress { display: block; }
.subnav-progress::before { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; background: var(--text-3); transform: scaleX(var(--p)); transform-origin: left; }
.subnav-progress i {
  position: absolute; left: 0; bottom: 0; width: 10px; height: 4px; display: none;
  background: linear-gradient(90deg, var(--graphite) 0 60%, var(--accent) 60%);
  clip-path: polygon(0 0, 60% 0, 100% 50%, 60% 100%, 0 100%);
  transform: translateX(calc(var(--p) * 100cqi - 100%));
}
@supports (width: 1cqi) { .subnav-progress i { display: block; } }

/* ---------------------------------------------------------------- 11 */
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px; border: 0; border-radius: var(--r-pill);
  font: 600 1rem/1.15 var(--font-sans); text-align: center; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui), box-shadow var(--dur-ui), filter var(--dur-ui);
}
.btn:hover { text-decoration: none; }
/* bar buttons re-tone when a dark band passes under the glass: fade the label with the pill */
.site-header .btn, .subnav .btn { transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui), color var(--dur-ui), box-shadow var(--dur-ui), filter var(--dur-ui); }
.btn:active { transform: scale(.97); }
.btn svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { color: var(--btn-fg); }
@media (hover: hover) { .btn-primary:hover { filter: brightness(1.08); } }
.btn-secondary, .btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-secondary:hover, .btn-ghost:hover { color: var(--text); }
@media (hover: hover) { .btn-secondary:hover, .btn-ghost:hover { background: var(--seg-bg); } }
.btn-lg { min-height: 52px; padding: 12px 28px; font-size: 1.0625rem; }
.btn-sm { min-height: 36px; padding: 6px 16px; font-size: .875rem; }
.btn-xs { min-height: 30px; padding: 4px 14px; font-size: .8125rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; filter: none; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: var(--s-6) 0 0; max-width: none; }
@media (max-width: 479px) { .hero-actions .btn { width: 100%; } }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font: 500 1.0625rem/1.3 var(--font-sans); color: var(--accent-text); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }
.link-arrow svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-ui) var(--ease-out); }
.link-arrow:is(:hover, :focus-visible) svg { transform: translateX(3px); }
.link-plus { display: inline-flex; align-items: center; gap: 10px; font: 500 1.0625rem/1.3 var(--font-sans); color: var(--text); text-decoration: none; }
.link-plus::after {
  content: "+"; content: "+" / ""; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--text); color: var(--surface); font: 400 20px/1 var(--font-sans); transition: rotate var(--dur-ui) var(--ease-out);
}
.link-plus:is(:hover, :focus-visible)::after { rotate: 90deg; }
.btn-tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 12px 16px; border: 0; border-radius: var(--r-xs);
  background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); font: 500 12px/1.2 var(--font-sans); color: var(--text);
  text-decoration: none; cursor: pointer; transition: background-color var(--dur-ui) var(--ease-out);
}
@media (hover: hover) { .btn-tag:hover { background: var(--seg-bg); text-decoration: none; } }
html:not(.motion-ok) [data-motion~="replay"]:not([data-m-value]) { display: none; }
.lift { transition: translate var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out); }
@media (hover: hover) { .lift:hover { translate: 0 -4px; box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); } }
.lift:focus-within { translate: 0 -4px; box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); }
.tool-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong); font: 600 14px/1.2 var(--font-sans); color: var(--text); cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui), box-shadow var(--dur-ui);
}
@media (hover: hover) { .tool-btn:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--text); } }
.tool-btn[aria-pressed="true"] { background: var(--text); color: var(--surface); box-shadow: none; }
.tool-btn.is-solid { background: var(--btn-bg); color: var(--btn-fg); box-shadow: none; }
.tool-btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.btn-row + .lab-msg, .btn-row.lab-controls { margin-top: var(--s-4); }

/* F4 themed press ink (motion.js appends .press-ink on pointerdown) */
.btn, .tool-btn, .seg > button, .chip > span, .gc-dot { position: relative; overflow: hidden; }
.press-ink {
  position: absolute; left: var(--rx); top: var(--ry); width: 120px; height: 120px; margin: -60px 0 0 -60px; pointer-events: none;
  border-radius: 50%; background: currentColor; opacity: 0; animation: ink-ripple 420ms var(--ease-out);
}
[data-theme="math"] .press-ink { background: none; box-shadow: inset 0 0 0 1.5px currentColor; animation-name: ink-ring; }
[data-theme="english"] .press-ink { border-radius: 48% 52% 45% 55%; animation-name: ink-blot; }
[data-theme="cs"] .press-ink { border-radius: 0; animation-timing-function: steps(4); animation-name: ink-pixel; }
[data-theme="approach"] .press-ink { background: radial-gradient(closest-side, currentColor, transparent); animation-name: ink-smudge; }
html:not(.motion-ok) .press-ink { display: none; }

/* ---------------------------------------------------------------- 12 */
.page-hero { position: relative; padding-block: clamp(40px, 2rem + 3.5vw, 96px) var(--s-8); }
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { margin-top: var(--s-5); }
.page-hero-grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 1000px) { .page-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }
.hero-visual { position: relative; display: flex; justify-content: center; min-width: 0; }
.subject-switcher {
  display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 100%; list-style: none; margin: var(--s-6) 0 0; padding: 4px;
  border-radius: var(--r-xl); background: var(--seg-bg);
}
.subject-switcher li { margin: 0; }
.subject-switcher a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  font: 600 14px/1.15 var(--font-sans); color: var(--text); text-decoration: none; transition: background-color var(--dur-ui) var(--ease-out);
}
@media (hover: hover) { .subject-switcher a:not([aria-current="page"]):hover { background: var(--seg-bg); } }
.subject-switcher a[aria-current="page"] { background: var(--btn-bg); color: var(--btn-fg); }
.subject-switcher a[aria-current="page"] .sw-dot { background: currentColor; }
/* phones: keep the switcher one row; a long name wraps inside its own pill */
@media (max-width: 479px) {
  .subject-switcher { display: flex; flex-wrap: nowrap; width: 100%; }
  .subject-switcher li { flex: 1 1 auto; min-width: 0; }
  .subject-switcher a { width: 100%; justify-content: center; gap: 6px; padding: 4px 8px; font-size: 13px; text-align: center; }
}

/* §3.9 hero stage (dark theater window) + "On this page" */
.hero-stage-wrap { margin-top: var(--s-7); }
.hero-stage {
  position: relative; display: grid; gap: var(--s-6); padding: clamp(20px, 3vw, 48px); border-radius: var(--r-2xl);
  background-color: var(--band); color: var(--text-2); overflow: clip;
}
@media (min-width: 960px) { .hero-stage { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--s-7); } }
.hero-figure { position: relative; margin: 0; display: grid; gap: var(--s-4); min-width: 0; }
.hero-figure > .seg { justify-self: center; }
.hero-figure > .btn-tag { justify-self: end; }
.hero-figure figcaption { color: var(--text-2); }
.contents { min-width: 0; }
.contents-head { margin: 0 0 var(--s-3); color: var(--text-3); }
.contents-list { counter-reset: c; list-style: none; margin: 0; padding: 0; }
.contents-list li { counter-increment: c; margin: 0; }
.contents-list a {
  display: grid; grid-template-columns: auto minmax(24px, 1fr) auto; gap: 12px; align-items: center; min-height: 44px; padding-block: 10px;
  font: 400 1.0625rem/1.5 var(--font-sans); color: var(--text); text-decoration: none; box-shadow: inset 0 -1px 0 var(--line);
}
.contents-num { font: 500 15px/1 var(--font-sans); color: var(--text-3); font-variant-numeric: tabular-nums; transition: color var(--dur-ui); }
.contents-num::before { content: "(" counter(c) ")"; }
[data-theme="math"] .contents-num::before { content: "§" counter(c); }
[data-theme="english"] .contents-num::before { content: counter(c, lower-roman) "."; font-family: var(--font-serif); font-style: italic; }
[data-theme="cs"] .contents-num::before { content: counter(c, decimal-leading-zero); font-family: var(--font-mono); }
.contents-dots { height: 4px; background: radial-gradient(circle, currentColor 0 1px, transparent 1.4px) 0 50%/8px 4px repeat-x; opacity: .45; }
.contents-label { text-align: right; transition: translate var(--dur-ui) var(--ease-out); }
.contents-list a:is(:hover, :focus-visible) .contents-num { color: var(--accent-text); }
.contents-list a:is(:hover, :focus-visible) .contents-label { translate: 4px 0; }
.motion-ok .contents-list a:is(:hover, :focus-visible) .contents-dots { animation: dots-slide 600ms linear; }

/* index hero (base; theme-home.css adds the H1 signature) */
.hero { position: relative; padding-block: clamp(48px, 2rem + 5vw, 120px) var(--s-8); }
.hero-grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.hero-copy { min-width: 0; }
.hero-art { display: flex; justify-content: center; min-width: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--s-5); max-width: none; font: 600 var(--fs-meta)/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.eyebrow .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(47,122,74,.18); }
.trust-chips { display: flex; flex-wrap: wrap; gap: 10px 20px; list-style: none; padding: 0; margin: var(--s-6) 0 var(--s-4); }
.trust-chips li { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--text-2); }
.trust-chips svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--accent-text); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.trust-chips li:first-child svg { fill: var(--accent); stroke: none; }
.replies { font-size: 15px; color: var(--text-2); }
.replies strong { color: var(--text); }
.session-card { width: min(100%, 30rem); overflow: hidden; border-radius: var(--r-tile); background: var(--card-bg); box-shadow: var(--shadow-3), inset 0 0 0 1px var(--line); color: var(--text-2); }
.session-card-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; box-shadow: inset 0 -1px 0 var(--line); }
.monogram { display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; overflow: hidden; border-radius: 50%; background: var(--ink); color: var(--paper); font: 600 16px/1 var(--font-sans); }
.monogram-lg { width: 80px; height: 80px; font-size: 30px; }
.session-card-who { display: flex; flex-direction: column; margin-right: auto; line-height: 1.35; }
.session-card-who strong { font-size: 15px; color: var(--text); }
.session-card-who small { font-size: 12px; color: var(--text-3); }
.live-pill { padding: 4px 10px; border-radius: var(--r-pill); background: rgba(47,122,74,.10); color: var(--success); font: 700 11px/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; }
.session-card-body { padding: 20px; }
.mock-question, .mock-answer { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r-md); font-size: 15px; }
.mock-question { background: var(--tint); color: var(--text); border-top-left-radius: 4px; }
.mock-answer { background: var(--paper-2); color: var(--text-2); border-top-right-radius: 4px; }
.mock-plan { list-style: none; padding: 0; margin: 18px 0 14px; }
.mock-plan li { display: grid; grid-template-columns: 1fr 5.5rem; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 13px; color: var(--text-2); }
.mock-plan .bar { display: block; height: 6px; overflow: hidden; border-radius: var(--r-pill); background: var(--paper-3); }
.mock-plan .bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.mock-note { margin: 0; font-size: 12px; color: var(--text-3); }

/* ---------------------------------------------------------------- 13 */
.stat-strip { padding-block: var(--s-8); }
.stat-row { display: grid; gap: var(--s-5); }
.stat { position: relative; margin: 0; max-width: none; }
.stat-num {
  position: relative; display: block; margin-bottom: var(--s-3); font: 700 var(--fs-stat)/1 var(--num-font);
  letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums;
}
.stat-label { display: block; font-size: 1.0625rem; line-height: 1.4; color: var(--text-2); }
@media (max-width: 719px) { .stat-row > .stat + .stat { padding-top: var(--s-5); box-shadow: inset 0 1px 0 var(--line); } }
@media (min-width: 720px) {
  .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .stat-row > .stat { padding-inline: var(--s-5); }
  .stat-row > .stat:first-child { padding-left: 0; }
  .stat-row > .stat + .stat { box-shadow: inset 1px 0 0 var(--line); }
}
/* odometer wheels (motion.js builds them; rest = --digit, so no-motion shows the value) */
.odo { display: inline-flex; }
.odo-d { display: inline-block; height: 1em; line-height: 1; overflow: hidden; }
.odo-d > span {
  display: block; width: 1ch; word-break: break-all; font-variant-numeric: tabular-nums;
  transform: translateY(calc(var(--digit) * -1em)); transition: transform 1200ms var(--ease-out) calc(var(--k) * 80ms);
}
/* binary bit cells (theme-fx.js "binary" formatter; also C5 roadmap) */
.bin { display: inline-grid; vertical-align: top; }
.bin > * { grid-area: 1 / 1; }
.bits { display: inline-flex; align-items: center; gap: .08em; }
.bin .bits { font-size: .5em; opacity: 0; transition: opacity 240ms var(--ease-out); }
.bin-dec { transition: opacity 240ms var(--ease-out); }
.bit {
  position: relative; display: inline-block; width: .72em; height: 1.1em; font-style: normal; line-height: 1.1;
  transform-style: preserve-3d; transition: transform 360ms var(--ease-in-out) calc(var(--i) * 80ms);
}
.bit::before, .bit::after {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-strong);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.bit::before { content: "0"; content: "0" / ""; color: var(--text-3); background: var(--surface); }
.bit::after { content: "1"; content: "1" / ""; color: var(--accent-text); background: var(--tint); transform: rotateX(180deg); }
.bit[data-b="1"] { transform: rotateX(180deg); }

/* ---------------------------------------------------------------- 14 */
.card, .cross-link, .subject-card, .price-card, .pillar, .stage-body, .callout, .about-card, .contact-card {
  position: relative; background: var(--card-bg); border-radius: var(--r-tile);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); padding: clamp(24px, 1.5rem + 1vw, 40px);
}
.card { display: flex; flex-direction: column; }
.card > h3, .pillar > h3, .callout > h3 { margin-bottom: .35em; }
.card-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.5rem), 1fr)); }

/* tiles (gallery, cross-links, 404) — scoped data-theme paints its own world */
.tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5); overflow: hidden;
  padding: clamp(24px, 1.5rem + 1vw, 40px); border-radius: var(--r-tile); background: var(--motif), var(--tint);
  box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); text-decoration: none;
  transition: translate var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
/* English: pull the 63px margin rule left of the tile's text column */
.tile[data-theme="english"] { background-position: -48px 0, 0 0; background-repeat: no-repeat, repeat; }
.tile:hover { text-decoration: none; color: var(--text-2); }
@media (hover: hover) { .tile:hover { translate: 0 -4px; box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); } }
.tile-kicker { margin: 0; color: var(--text-2); }
.tile-title, .cross-link h3 { margin: 0; max-width: none; font: 600 var(--fs-h3)/1.14 var(--font-sans); letter-spacing: -.008em; color: var(--text); text-wrap: balance; }
.tile-sub, .cross-link p { margin: 0; font-size: 15px; color: var(--text-2); }
.tile-art { display: block; flex: none; align-self: flex-end; width: 120px; height: 80px; margin-top: auto; }
.tile-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tile-art path { fill: none; stroke: var(--mark); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tile-art .ta-grid { stroke: var(--line-strong); stroke-width: 1; }
.tile-art .ta-dot { fill: var(--mark); stroke: none; transform-box: fill-box; transform-origin: center; }
.tile-art .ta-hl { fill: var(--hl); stroke: none; transform-box: fill-box; transform-origin: left center; }
.tile-art .ta-spark { fill: var(--spark); stroke: none; transform-box: fill-box; transform-origin: center; }
.ta-term { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: var(--r-md); background: var(--term-bg); font: 700 28px/1 var(--font-mono); color: var(--tok-p); }
.tile-art:has(.ta-term) { display: flex; align-items: flex-end; justify-content: flex-end; }
.ta-prompt { color: var(--tok-p); }
.ta-caret { display: inline-block; width: .55em; height: 1em; background: var(--amber); }
/* mini motif plays once on hover/focus (fine pointers) or on .is-in (touch) */
.motion-ok .tile:is(:hover, :focus-visible) .tile-art .draw { animation: draw-on 700ms var(--ease-pencil) both; }
.motion-ok .tile:is(:hover, :focus-visible) .tile-art .ta-grid { animation: fade-in 400ms var(--ease-out) both; }
.motion-ok .tile:is(:hover, :focus-visible) .tile-art .ta-dot { animation: pop-in 420ms var(--ease-pop) 650ms both; }
.motion-ok .tile:is(:hover, :focus-visible) .tile-art .ta-hl { animation: ta-sweep 420ms var(--ease-out) both; }
.motion-ok .tile:is(:hover, :focus-visible) .tile-art .ta-hl ~ .draw { animation-delay: 380ms; }
.motion-ok .tile:is(:hover, :focus-visible) .tile-art .ta-spark { animation: pop-in 420ms var(--ease-pop) 700ms both; }
.motion-ok .tile:is(:hover, :focus-visible) .tile-art .ta-caret { animation: caret 600ms steps(1) 3; }
@media (hover: none) {
  .motion-ok .tile.is-in .tile-art .draw { animation: draw-on 700ms var(--ease-pencil) both; }
  .motion-ok .tile.is-in .tile-art .ta-grid { animation: fade-in 400ms var(--ease-out) both; }
  .motion-ok .tile.is-in .tile-art .ta-dot { animation: pop-in 420ms var(--ease-pop) 650ms both; }
  .motion-ok .tile.is-in .tile-art .ta-hl { animation: ta-sweep 420ms var(--ease-out) both; }
  .motion-ok .tile.is-in .tile-art .ta-hl ~ .draw { animation-delay: 380ms; }
  .motion-ok .tile.is-in .tile-art .ta-spark { animation: pop-in 420ms var(--ease-pop) 700ms both; }
  .motion-ok .tile.is-in .tile-art .ta-caret { animation: caret 600ms steps(1) 3; }
}
@media (hover: hover) and (pointer: fine) {
  .motion-ok .tile[data-motion~="tilt"]:is(:not(.reveal), .is-visible) {
    transform: perspective(900px) rotateX(calc((var(--my) - .5) * -4deg)) rotateY(calc((var(--mx) - .5) * 4deg));
  }
  .motion-ok .tile[data-motion~="tilt"]:hover { transition: transform 120ms linear, translate var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out); }
}

/* flip cards (§3.11) — no JS: both faces stacked */
.flip-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); margin: 0; }
.flip-inner { display: grid; gap: var(--s-3); width: 100%; flex: 1 1 auto; }
.flip-front, .flip-back { min-width: 0; padding: clamp(20px, 1.25rem + .6vw, 32px); border-radius: var(--r-tile); background: var(--card-bg); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.flip-back { background: var(--tint); color: var(--text); }
.flip-front h3 { margin-bottom: .35em; }
.flip-front p, .flip-back p { margin: 0; }
.flip-back .t-meta { margin-bottom: var(--s-3); color: var(--accent-text); }
.flip-back p:not(.t-meta) { font: 400 var(--fs-read)/1.6 var(--font-sans); color: var(--text); }
/* html.no-m = motion.js failed to load/boot (head failsafe): keep both faces stacked */
html.js:not(.no-m) .flip-inner { gap: 0; }
html.js:not(.no-m) .flip-front, html.js:not(.no-m) .flip-back { grid-area: 1 / 1; transition: opacity var(--dur-ui) var(--ease-out), visibility 0s; }
html.js:not(.no-m) .flip-back, html.js:not(.no-m) .flip-card.is-flipped .flip-front { opacity: 0; visibility: hidden; transition: opacity var(--dur-ui) var(--ease-out), visibility 0s linear var(--dur-ui); }
html.js:not(.no-m) .flip-card.is-flipped .flip-back { opacity: 1; visibility: visible; transition: opacity var(--dur-ui) var(--ease-out), visibility 0s; }
.flip-btn { flex: none; }
/* the button lives inside the card (bottom-left), as a family pill — not a tag floating under it */
html.js:not(.no-m) .flip-card { position: relative; gap: 0; }
html.js:not(.no-m) .flip-card :is(.flip-front, .flip-back) { padding-bottom: calc(clamp(20px, 1.25rem + .6vw, 32px) + 52px); }
html.js:not(.no-m) .flip-card .flip-btn {
  position: absolute; left: clamp(12px, .75rem + .6vw, 24px); bottom: clamp(12px, .75rem + .4vw, 20px); z-index: 1;
  padding-inline: 18px; border-radius: var(--r-pill); background: var(--seg-bg); box-shadow: none; font-size: 13px; font-weight: 600;
}
@media (hover: hover) { html.js:not(.no-m) .flip-card .flip-btn:hover { background: rgba(20,20,19,.12); } }

/* §3.13 gallery (home) — autoplay is user-initiated only */
.gallery { position: relative; }
.gallery-track {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2); padding-block: 8px 16px;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track:focus-visible { outline-offset: -3px; }
.gallery-list {
  display: grid; grid-auto-flow: column; gap: var(--gap); width: max-content; list-style: none; margin: 0;
  padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2);
}
.gallery-item { margin: 0; scroll-snap-align: start; }
.gallery .tile { width: clamp(280px, 80vw, 560px); aspect-ratio: 4 / 5; }
@media (min-width: 900px) { .gallery .tile { aspect-ratio: 7 / 6; } }
.gallery-ctrl { position: relative; isolation: isolate; display: flex; align-items: center; gap: 2px; width: fit-content; max-width: calc(100% - 2 * var(--gutter)); margin: var(--s-5) auto 0; padding: 0 6px; border-radius: var(--r-pill); }
.gallery-ctrl::before, .float-pill::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: rgb(250 249 245 / .78); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}
.gallery-ctrl::before { box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.gc-play, .gc-prev, .gc-next { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
@media (hover: hover) { .gc-play:hover, .gc-prev:hover, .gc-next:hover { background: rgba(20,20,19,.06); } }
.gc-play::before { content: ""; width: 11px; height: 13px; margin-left: 2px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.gallery.is-playing .gc-play::before { width: 11px; margin-left: 0; clip-path: none; background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px, currentColor 7px); }
.gc-prev::before, .gc-next::before { content: ""; width: 9px; height: 9px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; }
.gc-prev::before { transform: translateX(2px) rotate(-45deg); }
.gc-next::before { transform: translateX(-2px) rotate(135deg); }
/* dim only the chevron: the focus ring on the button keeps full contrast */
.gc-prev[aria-disabled="true"], .gc-next[aria-disabled="true"] { cursor: default; }
.gc-prev[aria-disabled="true"]::before, .gc-next[aria-disabled="true"]::before { opacity: .4; }
html:not(.motion-ok) .gc-play { display: none; }
.gc-dots { display: flex; align-items: center; }
/* gallery dots + story step dots share one look */
.gc-dot, .story-dots > button {
  display: inline-grid; place-items: center; width: 24px; height: 44px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer;
  transition: width var(--dur-ui) var(--ease-out);
}
.gc-dot { color: var(--ink); }
.gc-dot::before, .story-dots > button::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--hair-ui); transition: width var(--dur-ui) var(--ease-out), background-color var(--dur-ui); }
.story-dots > button::before { background: var(--text-3); }
.gc-dot[aria-current="true"], .story-dots > button[aria-current="step"] { width: 52px; }
.gc-dot[aria-current="true"]::before, .story-dots > button[aria-current="step"]::before { width: 40px; background: currentColor; }
.gc-dot i { position: absolute; left: 6px; top: 50%; width: 40px; height: 8px; margin-top: -4px; border-radius: var(--r-pill); background: currentColor; transform: scaleX(0); transform-origin: left; opacity: 0; }
.gallery.is-playing .gc-dot[aria-current="true"]::before { background: var(--hair-ui); }
.gallery.is-playing .gc-dot[aria-current="true"] i { opacity: 1; animation: gc-fill var(--autoplay) linear forwards; }

/* ---------------------------------------------------------------- 15 */
.seg {
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; max-width: 100%;
  padding: 4px; border-radius: var(--r-pill); background: var(--seg-bg); vertical-align: middle;
}
.seg > button {
  position: relative; z-index: 1; min-width: 0; min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--r-pill);
  background: none; font: 600 14px/1.15 var(--font-sans); color: var(--text); cursor: pointer;
  transition: color var(--dur-swap) var(--ease-in-out);
}
.seg-thumb {
  position: absolute; inset: 4px auto 4px 4px; width: calc((100% - 8px) / var(--seg-n)); border-radius: var(--r-pill); background: var(--text);
  transform: translateX(calc(var(--seg-i) * 100%)); transition: transform var(--dur-swap) var(--ease-in-out); pointer-events: none;
}
.seg > :is([aria-selected="true"], [aria-pressed="true"]) { color: var(--surface); }
.seg:has(> :nth-child(2):is([aria-selected="true"], [aria-pressed="true"])) { --seg-i: 1; }
.seg:has(> :nth-child(3):is([aria-selected="true"], [aria-pressed="true"])) { --seg-i: 2; }
.seg:has(> :nth-child(4):is([aria-selected="true"], [aria-pressed="true"])) { --seg-i: 3; }
@supports not selector(:has(*)) {
  .seg-thumb { display: none; }
  .seg > :is([aria-selected="true"], [aria-pressed="true"]) { background: var(--text); }
}
html:not(.js) .seg[data-motion] { display: none; }
@media (max-width: 30rem) { .seg > button { font-size: 13px; padding: 0 10px; } }
/* existing lab groups that became .seg keep .btn-row/.lab-controls/.tool-btn */
.seg.btn-row { display: inline-grid; gap: 0; flex-wrap: nowrap; }
.seg > .tool-btn, .seg > .tool-btn[aria-pressed="true"] { background: none; box-shadow: none; min-height: 36px; }
.seg > .tool-btn[aria-pressed="true"] { color: var(--surface); }
.tag-tools:has([data-tag-tool="claim"][aria-pressed="true"]) .seg-thumb { background: var(--hl-claim); }
.tag-tools:has([data-tag-tool="evidence"][aria-pressed="true"]) .seg-thumb { background: var(--hl-evidence); }
.tag-tools:has([data-tag-tool="analysis"][aria-pressed="true"]) .seg-thumb { background: var(--hl-analysis); }
.seg.tag-tools > .tool-btn[aria-pressed="true"] { color: var(--ink); }
.seg-panel { min-width: 0; }
html.js:not(.no-m) .seg-panel .seg-title { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* -------------------------------------------------------- legacy pages */
/* subject cards (home tab panels) */
.subject-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--s-4); border-radius: var(--r-md); background: var(--tint); color: var(--accent-text); }
.subject-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.subject-card h3 { margin-bottom: .3em; }
.subject-tagline { margin-bottom: var(--s-4); font-weight: 600; color: var(--accent-text); }
.subject-for { margin-bottom: var(--s-5); padding: 12px 16px; border-radius: var(--r-md); background: var(--paper-2); font-size: 15px; color: var(--text-2); }
.subject-for strong { color: var(--text); }
.subject-list { margin-bottom: var(--s-5); padding-left: 1.15em; font-size: 15px; color: var(--text-2); }
.subject-list li::marker { color: var(--mark); }
.subject-levels { margin: auto 0 var(--s-4); padding-top: var(--s-2); font-size: var(--fs-small); color: var(--text-3); }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: auto; }
.subject-footnote, .faq-footnote { margin-top: var(--s-6); font-size: 15px; color: var(--text-2); }

/* process steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); counter-reset: step; }
.steps > li { position: relative; margin: 0; padding: var(--s-5); border-radius: var(--r-tile); background: var(--card-bg); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.steps h3 { margin: var(--s-4) 0 .35em; }
.steps p { margin: 0; font-size: 15px; color: var(--text-2); }
.step-num {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--mark); font: 600 15px/1 var(--num-font); color: var(--text); font-variant-numeric: tabular-nums;
}

/* pricing */
.price-card { display: flex; flex-direction: column; }
.price-card-featured { box-shadow: var(--shadow-2), inset 0 0 0 1.5px var(--mark); }
.price-badge { align-self: flex-start; margin: 0 0 var(--s-4); padding: 5px 10px; border-radius: var(--r-pill); background: var(--tint); color: var(--accent-text); font: 600 var(--fs-meta)/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }
.price-card h3 { margin-bottom: .4em; }
.price { margin-bottom: var(--s-4); font: 700 clamp(2rem, 1.6rem + 1.5vw, 2.75rem)/1.05 var(--font-sans); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.price small { font: 500 15px/1 var(--font-sans); letter-spacing: 0; color: var(--text-3); }
.price-pending { margin-bottom: var(--s-4); font: 400 var(--fs-body)/1.5 var(--font-sans); color: var(--text); }
.price-card ul { margin: 0; padding-left: 1.1em; font-size: 15px; color: var(--text-2); }
.price-card li::marker { color: var(--mark); }
.pricing-notes { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; gap: 12px 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); font-size: 15px; color: var(--text-2); }
.pricing-notes li { position: relative; margin: 0; padding-left: 26px; }
.pricing-notes li::before { content: "✓"; content: "✓" / ""; position: absolute; left: 0; font-weight: 700; color: var(--success); }
.pricing-notes strong { color: var(--text); }

/* about */
.about-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 960px) { .about-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.about-copy { min-width: 0; }
.about-copy .section-head { margin-bottom: var(--s-6); }
.about-photo { display: flex; justify-content: center; padding: var(--s-2) 0 var(--s-5); }
.about-photo img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.about-mark { display: inline-flex; color: var(--accent); }
.about-mark svg { width: 80px; height: 80px; }
.about-facts { margin: 0; font-size: 15px; }
.about-facts > div { display: flex; justify-content: space-between; gap: var(--s-4); padding: 12px 0; box-shadow: inset 0 1px 0 var(--line); }
.about-facts dt { color: var(--text-3); }
.about-facts dd { margin: 0; text-align: right; font-weight: 500; color: var(--text); }
.credential-list { list-style: none; padding: 0; margin: var(--s-5) 0; display: grid; gap: 10px; }
.credential-list li { position: relative; margin: 0; padding-left: 28px; color: var(--text-2); }
.credential-list li::before { content: ""; position: absolute; left: 0; top: .3em; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--mark); }
.about-cta { margin: var(--s-5) 0 0; }

/* roadmap (base; theme files add line/stack/git variants) */
.roadmap { position: relative; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.roadmap::before {
  content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; border-radius: 2px; background: var(--line-strong);
  transform: scaleY(var(--p)); transform-origin: top;
}
.roadmap > li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-4); margin: 0; }
.stage-num {
  position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--card-bg); box-shadow: inset 0 0 0 1.5px var(--mark); font: 600 17px/1 var(--num-font); color: var(--text); font-variant-numeric: tabular-nums;
}
.stage-body { min-width: 0; transition: translate var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out); }
@media (hover: hover) { .roadmap > li:hover > .stage-body { translate: 0 -3px; box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); } }
.stage-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: var(--s-3); }
.stage-head h3 { margin: 0; }
.stage-meta { margin: 0; padding: 4px 10px; border-radius: var(--r-pill); background: var(--tint); color: var(--accent-text); font: 600 12px/1.3 var(--font-sans); letter-spacing: .04em; }
.stage-body > p { font: 400 var(--fs-read)/1.65 var(--font-sans); color: var(--text-2); }
.topic-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: var(--s-4) 0 0; }
.topic-chips li { margin: 0; padding: 6px 12px; border-radius: var(--r-pill); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; line-height: 1.3; color: var(--text-2); }
@media (max-width: 599px) {
  .roadmap > li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .roadmap::before { display: none; }
  .stage-num { width: 40px; height: 40px; font-size: 15px; }
}

/* callout, split, cross-links, page CTA */
.callout { background: var(--card-bg); }
.split { display: grid; gap: clamp(24px, 3.5vw, 48px); align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.cross-links { display: grid; gap: var(--gap); }
@media (min-width: 720px) { .cross-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 719px) {
  .cross-links {
    grid-auto-flow: column; grid-auto-columns: min(82%, 340px); overflow-x: auto; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; scrollbar-width: none; padding: 6px 4px 12px; margin: -6px -4px 0;
  }
  .cross-links::-webkit-scrollbar { display: none; }
  .cross-links > * { scroll-snap-align: start; }
}
.cross-link { display: flex; flex-direction: column; gap: var(--s-3); color: var(--text-2); text-decoration: none; }
.cross-link:hover { text-decoration: none; color: var(--text-2); }
.cross-link .sw-dot { width: 10px; height: 10px; }
.page-cta .section-head { margin-bottom: var(--s-6); }
.page-cta .hero-actions { justify-content: center; margin-top: 0; }

/* approach page */
.pillars { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.pillar-num { margin: 0 0 var(--s-3); font: 600 var(--fs-meta)/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.pillar h3 { margin-bottom: .4em; }
.pillar p { margin: 0; color: var(--text-2); }
.exercise-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.exercise-grid > li { margin: 0; }
.exercise-grid > li:not(.flip-card) { padding: var(--s-5); border-radius: var(--r-tile); background: var(--card-bg); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.exercise-grid h3 { margin-bottom: .35em; }
.exercise-grid p { margin: 0; color: var(--text-2); }
.why { display: block; margin-top: var(--s-3); font: 600 var(--fs-small)/1.4 var(--font-sans); color: var(--accent-text); }
.rules { list-style: none; padding: 0; margin: 0; counter-reset: rule; display: grid; gap: var(--s-3); }
.rules li {
  counter-increment: rule; position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s-4); align-items: start;
  margin: 0; padding: var(--s-5); border-radius: var(--r-lg); background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--line);
}
.rules li::before {
  content: counter(rule); content: counter(rule) / ""; position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--mark); font: 700 15px/1 var(--num-font); color: var(--text); font-variant-numeric: tabular-nums;
}
.rules h3 { margin: 0 0 .3em; font-size: 1.1875rem; }
.rules p { margin: 0; color: var(--text-2); }
.ladder { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.ladder li {
  margin: 0; padding: var(--s-5); border-radius: var(--r-lg); background: var(--card-bg); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
  border-top: 3px solid var(--mark); color: var(--text-2);
}
.ladder .grade { margin: 0; font: 600 var(--fs-meta)/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.ladder h3 { margin: 8px 0 .35em; }
.ladder p { margin: 0; }
@media (max-width: 559px) { .rules li { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } }

/* ---------------------------------------------------------------- 16 */
.duo { display: grid; gap: var(--gap); }
@media (min-width: 960px) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .duo:has(> .spark-link) { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}
.duo-col {
  min-width: 0; padding: clamp(24px, 1.5rem + 1vw, 40px); border-radius: var(--r-tile);
  background: var(--card-bg); background: color-mix(in srgb, var(--card-bg) 80%, transparent); box-shadow: inset 0 0 0 1px var(--line);
}
.duo-col h3 { display: flex; align-items: center; gap: 12px; }
.duo-col > p { color: var(--text-2); }
.duo-icon { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--seg-bg); color: var(--text); }
.duo-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.is-ai .duo-icon { color: var(--spark-text); }
.duo-col.is-ai h3::after { content: "✦"; content: "✦" / ""; margin-left: 2px; font-size: .8em; color: var(--spark-text); }
.duo-foot { margin: var(--s-6) 0 0; color: var(--text-2); }
.check-list { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: 12px; }
.check-list li { position: relative; margin: 0; padding-left: 28px; color: var(--text-2); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 16px; height: 16px; background: var(--mark);
  -webkit-mask: var(--tick-mask) no-repeat center/16px 16px; mask: var(--tick-mask) no-repeat center/16px 16px;
}
.is-ai .check-list li::before { background: var(--spark-text); }
.check-list.is-no li::before { top: .7em; height: 2px; width: 12px; -webkit-mask: none; mask: none; background: var(--danger); }
.spark-link { display: none; }
@media (min-width: 960px) {
  .spark-link { display: block; align-self: center; width: 120px; fill: none; overflow: visible; }
  .spark-link .dash { stroke: var(--spark); stroke-width: 1.5; stroke-dasharray: 4 6; stroke-linecap: round; }
}
/* shared dashed draw-on (§3.18) and ring hosts (H6, A1) */
.dash { fill: none; stroke: var(--spark); stroke-width: 1.5; stroke-dasharray: 4 6; stroke-linecap: round; }
.ring-host { position: relative; display: inline-block; }
.ring-host > svg { position: absolute; left: -14%; top: -40%; width: 128%; max-width: none; height: 180%; overflow: visible; pointer-events: none; }

/* ---------------------------------------------------------------- 17 */
.paper {
  --rule-h: 2rem; --paper-margin: 2.5rem;
  position: relative; padding: var(--rule-h) 1.25rem var(--rule-h) calc(var(--paper-margin) + .9rem); border-radius: var(--r-sm);
  background-image:
    linear-gradient(90deg, transparent var(--paper-margin), var(--margin-rule) var(--paper-margin) calc(var(--paper-margin) + 1.5px), transparent calc(var(--paper-margin) + 1.5px)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--rule-h) - 1px), var(--rule) calc(var(--rule-h) - 1px) var(--rule-h));
  font: 400 1.0625rem/var(--rule-h) var(--font-serif); color: var(--text); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line);
}
.paper p { margin: 0 0 var(--rule-h); max-width: none; }
.paper p:last-child { margin-bottom: 0; }
.paper strong { color: inherit; }
.paper del { color: var(--danger); }
.paper ins { text-decoration: none; color: var(--ink-blue); font-style: italic; }
@media (max-width: 559px) { .paper { --paper-margin: 1.75rem; padding-right: 1rem; font-size: 1rem; } }
.margin-note { font-family: var(--font-serif); font-style: italic; color: var(--accent-text); line-height: 1.4; }
.slip { padding: 10px 14px; border-radius: var(--r-xs); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); font: 400 15px/1.4 var(--font-serif); color: var(--text); }
.sheet { position: relative; border-radius: var(--r-tile); padding: clamp(20px, 3vw, 40px); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); color: var(--text-2); }
.sheet--band { background-color: var(--band-2); }
.sheet--graph, .sheet--ruled { background: var(--motif), var(--card-bg); }
.sheet--ruled { padding-left: max(84px, clamp(20px, 3vw, 40px)); }
.sheet.sheet--hatch { background: var(--motif), var(--paper); }
.sheet--hatch { box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); }
.chat-bubble {
  justify-self: end; max-width: 22rem; margin: 0; padding: 14px 16px; border-radius: 18px 18px 4px 18px;
  background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; line-height: 1.5; color: var(--text);
}
.chat-bubble.is-ai { justify-self: start; border-radius: 18px 18px 18px 4px; }
.chat-who { display: block; margin-bottom: 4px; font: 600 11px/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.chat-bubble.is-ai .chat-who { color: var(--spark-text); }
.hv-paper { width: min(100%, 30rem); }
.hv-pencil { position: absolute; left: -1rem; top: -1.5rem; width: 8rem; rotate: -28deg; pointer-events: none; }
.hv-duo { display: grid; gap: var(--s-4); width: min(100%, 30rem); }
.hv-term { width: 100%; }
/* terminals */
.term { width: 100%; overflow: hidden; border-radius: var(--r-lg); font-family: var(--font-mono); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); }
.term-bar { display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; box-shadow: inset 0 -1px 0 var(--line); font: 400 12px/1 var(--font-mono); color: var(--text-3); }
.term-bar > i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--swp); }
.term-bar > i:nth-child(2) { background: var(--amber); }
.term-bar > i:nth-child(3) { background: var(--sorted); margin-right: 8px; }
.term-file { color: var(--text-3); }
.term-body { padding: 16px 18px 20px; font: 400 var(--fs-mono-sm)/1.75 var(--font-mono); color: var(--text-2); overflow-x: auto; }
.tl, [data-type-line] { display: block; width: fit-content; white-space: pre; }
.tok-k { color: var(--tok-k); } .tok-f { color: var(--tok-f); } .tok-s { color: var(--tok-s); }
.tok-n { color: var(--tok-n); } .tok-c { color: var(--tok-c); } .tok-p { color: var(--tok-p); }
/* legacy hero visuals (pre-redesign markup, restyled for the dark stage) */
.hv-graph { position: relative; width: min(100%, 26rem); aspect-ratio: 1; overflow: hidden; border-radius: var(--r-lg); background: var(--band-2); }
.hv-graph svg { display: block; width: 100%; height: 100%; }
.hv-grid line, .hv-grid path { stroke: var(--band-hair); stroke-width: 1; }
.hv-axis { stroke: var(--band-ink-2); stroke-width: 1.4; }
.hv-curve { fill: none; stroke: var(--accent-bright); stroke-width: 3.5; stroke-linecap: round; }
.hv-tangent { stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 5 5; }
.hv-point { fill: var(--gold); }
.hv-label { fill: var(--band-ink-2); font: 600 13px var(--font-mono); }
.float-syms { position: absolute; inset: -1rem; pointer-events: none; }
.float-syms span { position: absolute; font: 400 1.9rem/1 var(--font-serif); color: var(--band-ink-2); opacity: .4; }
.float-syms span:nth-child(1) { top: 2%; left: 4%; }
.float-syms span:nth-child(2) { top: 12%; right: 2%; font-size: 2.4rem; }
.float-syms span:nth-child(3) { bottom: 6%; left: 0; }
.float-syms span:nth-child(4) { bottom: 0; right: 10%; font-size: 1.5rem; }
.float-syms span:nth-child(5) { top: 46%; left: -2%; font-size: 1.4rem; }
/* E3 highlighter marks (real <mark>: highlighted at rest) */
.hl { background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 88%/100% .62em; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: inherit; }
.hl-ev { background-image: linear-gradient(var(--hl-evidence), var(--hl-evidence)); }
.hl-an { background-image: linear-gradient(var(--hl-analysis), var(--hl-analysis)); }
:is(.bg-band, .hero-stage, .term) .hl:not(.paper .hl) { color: var(--ink); }

/* ---------------------------------------------------------------- 18 */
.story-track { position: relative; }
.story-stage { position: relative; display: grid; gap: var(--s-7); padding-block: var(--s-7); }
.story-visual { position: relative; margin: 0; min-width: 0; }
.story-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
.story-steps > li { position: relative; margin: 0; padding-left: 52px; color: var(--text-2); }
.story-steps .step-num { position: absolute; left: 0; top: -4px; }
.story-steps h3 { margin-bottom: .35em; }
.story-steps p { margin: 0 0 var(--s-3); }
.story-steps p:last-child { margin-bottom: 0; }
.story-rail { display: none; }
.story-controls { display: none; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.story-dots { display: flex; align-items: center; }
.story-skip { margin-left: auto; }
@media (min-width: 900px) {
  .story-stage { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "visual steps" "visual controls"; grid-template-rows: 1fr auto; align-items: center; }
  .story-visual { grid-area: visual; }
  .story-steps { grid-area: steps; align-self: center; }
  .story-controls { grid-area: controls; }
  .story-rail {
    display: block; position: absolute; top: 15%; bottom: 15%; width: 2px; border-radius: 2px; background: var(--mark); opacity: .5;
    left: calc((100% - var(--s-7)) * 7 / 12 + var(--s-7) / 2 - 1px); transform: scaleY(var(--p)); transform-origin: top;
  }
}
/* per-theme step numbers inside stories */
[data-theme="math"] .story-steps .step-num { box-shadow: inset 0 0 0 1px var(--line-strong); }
[data-theme="math"] .story-steps .step-num::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--mark) var(--arc), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
[data-theme="english"] .story-steps .step-num { box-shadow: none; font-family: var(--font-serif); font-style: italic; font-size: 18px; }
[data-theme="english"] .story-steps .step-num::after { content: ""; position: absolute; inset: -2px; border: 1.5px solid var(--mark); border-radius: 48% 52% 45% 55%; rotate: -8deg; }
[data-theme="cs"] .story-steps .step-num { border-radius: var(--r-xs); font-family: var(--font-mono); grid-auto-flow: column; justify-content: center; }
[data-theme="cs"] .story-steps .step-num::before { content: "0"; content: "0" / ""; }
[data-theme="approach"] .story-steps .step-num { width: auto; min-width: 36px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); font: 600 12px/1 var(--font-mono); letter-spacing: .08em; }
[data-theme="home"] .story-steps .step-num { width: 28px; height: 28px; font-size: 13px; }
/* story parts: static figure shows every part (final frame) */
.strike { position: absolute; left: 0; right: 0; top: 55%; height: 2px; background: var(--pen); transform-origin: left; pointer-events: none; }
.wl-wrong { position: relative; }
mark.tp-hl { position: relative; isolation: isolate; background: none; color: inherit; }
mark.tp-hl::before { content: ""; position: absolute; left: -.1em; right: -.1em; bottom: .08em; height: .62em; z-index: -1; background: var(--hl); transform-origin: left; }
.story:not(.is-pinned) .tp-keep { opacity: 1; }
/* call stack frames (generic; C7) */
.callstack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 6px; }
.frame { margin: 0; padding: 6px 10px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line-strong); font: 400 var(--fs-mono-sm)/1.4 var(--font-mono); color: var(--text); }
.story:not(.is-pinned) .frame { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- 19 */
.faq { display: grid; box-shadow: inset 0 1px 0 var(--line); }
.faq details { box-shadow: inset 0 -1px 0 var(--line); }
.faq summary {
  position: relative; display: block; padding: 24px 56px 24px 0; cursor: pointer; list-style: none;
  font: 600 1.25rem/1.3 var(--font-sans); letter-spacing: -.005em; color: var(--text); transition: color var(--dur-ui);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary::after {
  content: "+"; content: "+" / ""; position: absolute; right: 0; top: 50%; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -14px;
  border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); font: 400 20px/1 var(--font-sans); color: var(--text);
  transition: transform var(--dur-ui) var(--ease-out), background-color var(--dur-ui);
}
.faq details[open] > summary::after { transform: rotate(45deg); background: var(--seg-bg); }
@media (hover: hover) { .faq summary:hover { color: var(--accent-text); } }
.faq details > p { margin: 0; padding: 0 56px 26px 0; max-width: 62ch; font: 400 1rem/1.7 var(--font-sans); color: var(--text-2); }
.motion-ok .faq details[open] > p { animation: faq-in 320ms var(--ease-out); }
@supports (interpolate-size: allow-keywords) {
  .motion-ok .faq { interpolate-size: allow-keywords; }
  .motion-ok .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 320ms var(--ease-out), content-visibility 320ms allow-discrete; }
  .motion-ok .faq details[open]::details-content { block-size: auto; }
}

/* ---------------------------------------------------------------- 20 */
.contact-grid { display: grid; gap: clamp(24px, 3vw, 44px); align-items: start; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.inquiry-form { padding: clamp(20px, 3vw, 40px); border-radius: var(--r-tile); background: var(--card-bg); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.field-group { min-width: 0; margin: 0 0 var(--s-6); padding: 0; border: 0; }
.field-group > legend { width: 100%; margin-bottom: var(--s-4); padding: 0 0 var(--s-3); font: 600 1.1875rem/1.3 var(--font-sans); color: var(--text); box-shadow: inset 0 -1px 0 var(--line); }
.field { margin-bottom: var(--s-5); }
.field:last-child { margin-bottom: 0; }
.field-row { display: grid; gap: 0 var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.field-row > .field:last-child { margin-bottom: var(--s-5); }
.field-group > .field-row:last-child > .field:last-child { margin-bottom: 0; }
.field label, .chip-fieldset > legend { display: block; margin-bottom: 8px; padding: 0; font: 600 15px/1.35 var(--font-sans); color: var(--text); }
.chip-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.req { color: var(--danger); }
.optional { font-weight: 400; font-size: .9em; color: var(--text-3); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], select, textarea {
  width: 100%; min-height: 52px; margin: 0; padding: 13px 16px; border: 0; border-radius: var(--r-md);
  background: var(--white); color: var(--ink); font: 400 1rem/1.4 var(--font-sans);
  box-shadow: inset 0 0 0 1px var(--hair-ui); -webkit-appearance: none; appearance: none;
  transition: box-shadow var(--dur-ui) var(--ease-out);
}
textarea { min-height: 140px; resize: vertical; }
select {
  padding-right: 44px; cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5l6-6' fill='none' stroke='%235E5D59' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="search"], [type="url"]):focus, select:focus, textarea:focus {
  outline: 2px solid transparent; outline-offset: 2px; box-shadow: inset 0 0 0 1px var(--focus), 0 0 0 3px var(--focus);
}
.field-hint { margin: 8px 0 0; font-size: var(--fs-small); color: var(--text-3); }
.field-error { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font: 600 var(--fs-small)/1.4 var(--font-sans); color: var(--danger); }
.field-error::before { content: "!"; content: "!" / ""; display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--danger); color: var(--white); font: 700 11px/1 var(--font-sans); }
.field.has-error :is(input, select, textarea), .has-error > :is(input, select, textarea) { box-shadow: inset 0 0 0 2px var(--danger); }
.chip-fieldset.has-error .chip > span { box-shadow: inset 0 0 0 1.5px var(--danger); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.chip > span {
  display: inline-flex; align-items: center; gap: 0; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill);
  background: var(--white); box-shadow: inset 0 0 0 1px var(--hair-ui); font: 500 15px/1.2 var(--font-sans); color: var(--ink-2);
  transition: background-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), color var(--dur-ui), gap var(--dur-ui) var(--ease-out);
}
@media (hover: hover) { .chip:hover > span { box-shadow: inset 0 0 0 1px var(--ink-3); } }
.chip-tick { flex: none; width: 0; height: 12px; overflow: visible; transition: width var(--dur-ui) var(--ease-out); }
.chip-tick .draw { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dashoffset: 1.001; transition: stroke-dashoffset 240ms var(--ease-pencil) 80ms; }
.chip input:checked + span { gap: 8px; background: var(--tint); color: var(--accent-text); font-weight: 600; box-shadow: inset 0 0 0 2px var(--accent-text); }
.chip input:checked + span .chip-tick { width: 12px; }
.chip input:checked + span .chip-tick .draw { stroke-dashoffset: 0; }
.chip input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.field-consent { margin-top: var(--s-2); }
/* .field .consent beats `.field label { display: block }` */
.field .consent, .consent { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 0; font-weight: 500; font-size: 15px; cursor: pointer; }
.consent input { flex: none; width: 22px; height: 22px; margin: 0; margin-top: -1px; accent-color: var(--accent-ink); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin: var(--s-6) 0 0; max-width: none; }
.turnstile-widget { margin-top: var(--s-5); min-height: 65px; }
.turnstile-widget:empty { display: none; }
.form-note { max-width: 32rem; font-size: var(--fs-small); color: var(--text-3); }
@media (max-width: 479px) { .form-actions .btn { width: 100%; } }
.form-status { margin-bottom: var(--s-5); }
.form-status:empty { display: none; }
.form-status.is-error, .form-status.is-success, .form-status.is-info { padding: 16px 20px; border-radius: var(--r-md); font-size: 15px; }
.form-status.is-error { background: #271918; color: var(--danger); box-shadow: inset 0 0 0 1px rgba(180,35,24,.3); }
.form-status.is-success { background: #17221b; color: var(--success); box-shadow: inset 0 0 0 1px rgba(47,122,74,.3); }
.form-status.is-info { background: var(--tint); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.form-status h3 { margin: 0 0 .35em; font-size: 1.0625rem; color: inherit; }
.form-status p { margin: 0 0 .5em; }
.form-status p:last-child { margin-bottom: 0; }
.form-status ul { margin: 8px 0 0; padding-left: 1.25em; }
.form-status strong, .form-status a { color: inherit; }
.contact-aside { display: grid; gap: var(--s-4); }
@media (min-width: 1000px) { .contact-aside { position: sticky; top: calc(var(--header-h) + var(--s-5)); } }
.contact-card { padding: var(--s-5); }
.contact-card-quiet { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.contact-card h3 { margin-bottom: var(--s-4); font-size: 1.1875rem; }
.contact-methods { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: var(--s-4); }
.contact-methods li { display: flex; align-items: center; gap: 14px; margin: 0; }
.contact-icon { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--tint); color: var(--accent-text); }
.contact-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-method-body { display: flex; flex-direction: column; min-width: 0; }
.contact-label { font: 600 var(--fs-meta)/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.contact-method-body a { font-weight: 600; overflow-wrap: anywhere; }
.copy-btn {
  flex: none; margin-left: auto; min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong); font: 600 13px/1 var(--font-sans); color: var(--text-2); cursor: pointer;
}
@media (hover: hover) { .copy-btn:hover { background: var(--seg-bg); color: var(--text); } }
.contact-facts { margin: 0; font-size: 15px; }
.contact-facts > div { display: flex; justify-content: space-between; gap: var(--s-4); padding: 10px 0; box-shadow: inset 0 1px 0 var(--line); }
.contact-facts dt { color: var(--text-3); }
.contact-facts dd { margin: 0; text-align: right; font-weight: 500; color: var(--text); }
.contact-reassure { margin: var(--s-5) 0 0; font-size: 15px; color: var(--text-2); }
.contact-pending { margin: 0 0 var(--s-5); font-size: 15px; color: var(--text-2); }
.mini-steps { margin: 0; padding-left: 1.25em; font-size: 15px; color: var(--text-2); }
.mini-steps li::marker { color: var(--accent-text); font-weight: 700; }

/* ---------------------------------------------------------------- 21 */
.site-footer { --surface: var(--paper-2); background: var(--paper-2); box-shadow: inset 0 1px 0 var(--line); padding-block: var(--s-8) var(--s-6); font-size: 14px; color: var(--text-2); }
.footer-grid { display: grid; gap: var(--s-6); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer li { margin: 0; }
.site-footer a { color: var(--text-2); text-decoration: none; }
.site-footer a:hover { color: var(--text); text-decoration: underline; }
.site-footer a:is([href^="mathematics"], [href^="english"], [href^="computer-science"], [href^="approach"])::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: .05em;
}
.site-footer a[href^="mathematics"]::before { background: var(--math); }
.site-footer a[href^="english"]::before { background: var(--english); }
.site-footer a[href^="computer-science"]::before { background: var(--cs); }
.site-footer a[href^="approach"]::before { background: var(--approach); }
.footer-brand { margin: 0 0 4px; font: 600 1.0625rem/1.3 var(--font-sans); color: var(--text); }
.footer-tagline { margin: 0 0 var(--s-4); font-size: 12px; color: var(--text-3); }
.footer-note { max-width: 30rem; color: var(--text-2); }
.footer-heading { margin: 0 0 var(--s-4); font: 600 var(--fs-meta)/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: var(--s-7); padding-top: var(--s-5); box-shadow: inset 0 1px 0 var(--line); font-size: 12px; color: var(--text-3); }
.footer-bottom:first-child { margin-top: 0; padding-top: 0; box-shadow: none; }
.footer-bottom p { margin: 0; }
/* mid widths: © line + toggle share row 1, the note takes row 2 (instead of a lone toggle) */
@media (min-width: 700px) and (max-width: 1199px) { .footer-bottom > .footer-fine { order: 3; flex-basis: 100%; max-width: none; } }
.footer-fine { max-width: 42rem; }
.motion-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; border: 0; border-radius: var(--r-sm);
  background: none; font: 500 13px/1 var(--font-sans); color: var(--text-2); cursor: pointer;
}
.motion-toggle::before {
  content: ""; flex: none; width: 32px; height: 20px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px var(--hair-ui);
  background: radial-gradient(circle at 10px 50%, var(--ink-3) 0 5px, transparent 5.5px) no-repeat;
  transition: background-color var(--dur-ui), box-shadow var(--dur-ui);
}
.motion-toggle[aria-pressed="true"]::before { box-shadow: none; background: radial-gradient(circle at 22px 50%, var(--paper) 0 5px, transparent 5.5px) no-repeat var(--ink); }
@media (hover: hover) { .motion-toggle:hover { color: var(--text); } }

/* §3.16 floating pill (existing .mobile-cta). Must come after [hidden]. */
.float-pill {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; isolation: isolate;
  display: inline-flex !important; align-items: center; gap: 10px; padding: 10px 10px 10px 20px; border-radius: var(--r-pill);
  box-shadow: var(--shadow-float); color: var(--ink); font: 600 15px/1 var(--font-sans); text-decoration: none; white-space: nowrap;
  transform: translate(-50%, 140%); visibility: hidden;
  transition: transform var(--dur-swap) var(--ease-out), visibility 0s linear var(--dur-swap);
}
.float-pill:hover { color: var(--ink); text-decoration: none; }
.float-pill.is-shown:not([hidden]) { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }
.pill-plus { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); font: 500 18px/1 var(--font-sans); }
html:not(.js) .float-pill, html.no-m .float-pill { position: relative; left: auto; display: flex !important; width: fit-content; margin: var(--s-6) auto; transform: none; visibility: visible; }
body.nav-open .float-pill { visibility: hidden; }
.mobile-cta:not(.float-pill) { display: none; }

/* ---------------------------------------------------------------- 22 */
/* §3.17 lab shell + theme strip */
.lab-stack { display: grid; gap: var(--s-7); counter-reset: fig; }
.lab {
  counter-increment: fig; --card-bg: var(--white); position: relative; overflow: clip; border-radius: var(--r-tile);
  background: var(--card-bg); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); color: var(--text-2);
}
.lab::before { content: ""; display: block; height: 40px; box-shadow: inset 0 -1px 0 var(--line); }
[data-theme="math"] .lab::before {
  content: "FIG. " counter(fig); content: "FIG. " counter(fig) / "";
  display: flex; align-items: center; justify-content: flex-end; padding-inline: clamp(20px, 3vw, 32px);
  font: 600 var(--fs-meta)/1 var(--font-sans); letter-spacing: .12em; color: var(--text-3);
  background:
    repeating-linear-gradient(90deg, rgba(91,63,208,.45) 0 1px, transparent 1px 40px) 0 100%/calc(100% - 7.5em) 18px no-repeat,
    repeating-linear-gradient(90deg, rgba(91,63,208,.3) 0 1px, transparent 1px 8px) 0 100%/calc(100% - 7.5em) 10px no-repeat;
}
[data-theme="english"] .lab::before {
  background:
    linear-gradient(90deg, transparent 47px, var(--margin-rule) 47px 49px, transparent 49px),
    linear-gradient(transparent 19px, var(--rule) 19px 20px, transparent 20px 29px, var(--rule) 29px 30px, transparent 30px),
    var(--cream);
}
[data-theme="cs"] .lab::before {
  background:
    radial-gradient(circle at 24px 20px, var(--swp) 0 5px, transparent 5.5px),
    radial-gradient(circle at 42px 20px, var(--amber) 0 5px, transparent 5.5px),
    radial-gradient(circle at 60px 20px, var(--sorted) 0 5px, transparent 5.5px),
    var(--paper-2);
}
[data-theme="approach"] .lab::before { background: repeating-linear-gradient(-45deg, rgba(20,20,19,.08) 0 1px, transparent 1px 7px); }
[data-theme="home"] .lab::before { content: none; }
.lab-head { display: grid; justify-items: start; gap: 8px; padding: var(--s-5) clamp(20px, 3vw, 32px) 0; }
.lab-head h3 { margin: 0; }
.lab-head p { margin: 0; color: var(--text-2); }
.lab-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); background: var(--tint); color: var(--accent-text); font: 600 var(--fs-meta)/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }
.lab.is-live .lab-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.lab-body { padding: var(--s-5) clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px); }
.lab-grid { display: grid; gap: clamp(20px, 3vw, 32px); align-items: start; }
@media (min-width: 900px) { .lab-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lab-msg { min-height: 1.5em; margin: var(--s-3) 0 0; font-size: 15px; color: var(--text-2); }
.lab-msg.is-good { color: var(--success); }
.lab-msg.is-good::before { content: "✓ "; content: "✓ " / ""; font-weight: 700; }
.lab-msg.is-bad { color: var(--danger); }
.lab-msg.is-bad::before { content: "! "; content: "! " / ""; font-weight: 700; }
.lab-foot { margin: var(--s-5) 0 0; padding-top: var(--s-4); box-shadow: inset 0 1px 0 var(--line); font-size: var(--fs-small); color: var(--text-2); max-width: none; }
.lab-foot strong { color: var(--accent-text); }
.lab-nojs { font-size: var(--fs-small); font-style: italic; color: var(--text-3); }
html.js .lab-nojs { display: none; }
html:not(.js) .lab-controls { display: none !important; }
html:not(.js) .js-only { display: none !important; }
/* motion.js owns these controls: if it failed (html.no-m) they would be dead, so drop them;
   the content they switch between is all shown (panels, flip backs, every graph caption) */
html.no-m :is(.seg[data-motion], .flip-btn, .gallery-ctrl, .story-dots, .motion-toggle, [data-motion~="replay"]) { display: none !important; }
.is-new { animation: pop-in 360ms var(--ease-out) both; }
.pf-steps code, .lab-foot code, .lab-head code { padding: .05em .3em; border-radius: 4px; background: var(--seg-bg); font-size: .92em; color: var(--text); }

/* parabola */
.plot { position: relative; aspect-ratio: 1; overflow: hidden; padding: 0; border-radius: var(--r-lg); background: var(--plot-bg); box-shadow: inset 0 0 0 1px var(--line); }
.plot canvas { display: block; }
.sliders { display: grid; gap: 14px; margin-bottom: var(--s-5); }
.slider { display: grid; grid-template-columns: 28px minmax(0, 1fr) 56px; align-items: center; gap: 12px; }
.slider label { font: 700 1rem/1 var(--font-mono); color: var(--text); }
.slider output { display: inline-flex; justify-content: center; padding: 5px 8px; border-radius: var(--r-pill); background: var(--tint); color: var(--accent-text); font: 600 14px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; height: 28px; margin: 0; background: transparent; accent-color: var(--accent-ink); cursor: pointer; -webkit-appearance: none; appearance: none; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--r-pill); background: var(--line-strong); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: var(--line-strong); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: var(--accent-ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border: 0; border-radius: 50%; background: var(--accent-ink); box-shadow: 0 0 0 3px var(--white), 0 1px 4px 2px rgba(20,20,19,.25); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--accent-ink); box-shadow: 0 0 0 3px var(--white), 0 1px 4px 2px rgba(20,20,19,.25); }
input[type="range"]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--r-sm); }
.readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 var(--s-5); }
.readout > div { min-width: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.readout dt { margin-bottom: 4px; font: 600 var(--fs-meta)/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.readout dd { margin: 0; font: 400 15px/1.4 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.readout .eq { font: italic 400 1.125rem/1.35 var(--font-serif); color: var(--accent-text); }
@media (max-width: 419px) { .readout { grid-template-columns: minmax(0, 1fr); } }

/* pencil-first */
.pf-problem { max-width: none; margin-bottom: var(--s-5); padding: var(--s-5); border-radius: var(--r-lg); background: var(--motif), var(--paper); box-shadow: inset 0 0 0 1px var(--line); font: 400 var(--fs-lead)/1.4 var(--font-serif); color: var(--text); }
.pf-gate { display: flex; align-items: flex-start; gap: 12px; margin-bottom: var(--s-4); padding: 14px 16px; border: 1.5px dashed var(--hair-ui); border-radius: var(--r-md); font-size: 15px; color: var(--text-2); cursor: pointer; }
.pf-gate input {
  flex: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 6px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/0 0;
  box-shadow: inset 0 0 0 1.5px var(--hair-ui); transition: background-color var(--dur-ui), background-size var(--dur-ui) var(--ease-pop), box-shadow var(--dur-ui);
}
.pf-gate input:checked { background-color: var(--accent-text); background-size: 15px 15px; box-shadow: none; }
.pf-steps { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: 10px; counter-reset: pf; }
.pf-steps li { counter-increment: pf; position: relative; margin: 0; padding: 12px 16px 12px 52px; border-radius: var(--r-md); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }
.pf-steps li::before {
  content: counter(pf); content: counter(pf) / ""; position: absolute; left: 14px; top: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--mark); font: 600 13px/1 var(--num-font); color: var(--accent-text); font-variant-numeric: tabular-nums;
}
.lab .tool-btn[data-action="next-step"] { margin-top: var(--s-2); }

/* anatomy */
.tag-tools .tool-btn { display: inline-flex; align-items: center; gap: 8px; }
.swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(20,20,19,.2); }
.swatch-claim { background: var(--hl-claim); }
.swatch-evidence { background: var(--hl-evidence); }
.swatch-analysis { background: var(--hl-analysis); }
.anatomy-text { margin-top: var(--s-5); }
.sent {
  --sent-hl: transparent; padding: .06em .1em; border-radius: 3px; cursor: pointer;
  background: linear-gradient(var(--sent-hl), var(--sent-hl)) no-repeat 0 0/0% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 360ms var(--ease-out), box-shadow var(--dur-ui);
}
.sent[data-tag="claim"] { --sent-hl: var(--hl-claim); }
.sent[data-tag="evidence"] { --sent-hl: var(--hl-evidence); }
.sent[data-tag="analysis"] { --sent-hl: var(--hl-analysis); }
.sent[data-tag] { background-size: 100% 100%; color: var(--ink); }
@media (hover: hover) { .sent:not([data-tag]):hover { box-shadow: inset 0 -2px 0 var(--hair-strong); } }
.sent:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sent.is-right { text-decoration-line: underline; text-decoration-style: double; text-decoration-color: var(--success); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.sent.is-right::after { content: " ✓"; content: " ✓" / ""; font-weight: 700; color: var(--success); }
.sent.is-wrong { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: var(--pen); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.tag-badge { display: inline-block; margin-right: .35em; padding: 3px 6px; border-radius: 4px; background: var(--white); box-shadow: inset 0 0 0 1px var(--hair-strong); font: 700 10px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; vertical-align: .3em; color: var(--ink-2); }
.tag-badge:empty { display: none; }
.motion-ok .tag-badge:not(:empty) { animation: pop-in 240ms var(--ease-pop); }

/* revision */
.draft-tabs { margin-bottom: var(--s-5); }
.draft-note { margin: var(--s-4) 0 0; padding-left: 14px; box-shadow: inset 3px 0 0 var(--pen); font: italic 400 1rem/1.55 var(--font-serif); color: var(--text-2); }
.draft-note strong { font-style: normal; color: var(--accent-text); }
.motion-ok [data-draft]:not([hidden]) .paper { animation: page-in 420ms var(--ease-out); }
.motion-ok [data-draft]:not([hidden]) .draft-note { animation: rise-in 420ms var(--ease-out) 120ms both; }

/* sorter */
.sorter-grid { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .sorter-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 230px; padding: 28px 16px 12px; }
.bars .bar { position: relative; flex: 1; min-height: 4px; border-radius: 3px 3px 0 0; background: rgba(230,242,236,.28); transition: height .16s ease, background-color .16s ease; }
.bars .bar i { position: absolute; top: -1.6em; left: -4px; right: -4px; font: normal 400 11px/1 var(--font-mono); text-align: center; color: var(--text-3); }
.bars .bar.is-sorted { background: var(--sorted); }
.bars .bar.is-compare { background: var(--cmp); }
.bars .bar.is-swap { background: var(--swp); }
.sorter-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0 16px 14px; list-style: none; font-size: 12px; color: var(--text-3); }
.sorter-legend li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.sorter-legend i { width: 10px; height: 10px; border-radius: 2px; }
.code-panel { display: block; margin: 0; padding: 12px 10px; overflow-x: auto; font: 400 var(--fs-mono-sm)/1.55 var(--font-mono); color: var(--text-2); }
.code-line { display: block; padding: 2px 10px; border-radius: 4px; white-space: pre; color: var(--text-3); transition: background-color var(--dur-ui), color var(--dur-ui); }
.code-line.is-active { background: rgba(62,230,181,.12); color: var(--term-ink); box-shadow: inset 3px 0 0 var(--tok-p); }
.sorter-stats { margin: var(--s-4) 0 0; font: 500 14px/1.4 var(--font-mono); color: var(--accent-text); }
.sorter-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: var(--s-4); }
.sorter-controls select { width: auto; min-height: 36px; padding: 0 40px 0 14px; border-radius: var(--r-pill); font-size: 14px; background-position: right 14px center; }
.sorter-controls label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.sorter-controls input[type="range"] { width: 7rem; }
.tool-btn[data-action="play"][aria-pressed="true"]::before { content: "❚❚"; content: "❚❚" / ""; font-size: .75em; letter-spacing: -.12em; }
@media (max-width: 559px) { .bars { gap: 3px; padding-inline: 10px; } .bars .bar i { font-size: 9px; } }

/* predict */
.code-wrap { display: flex; overflow-x: auto; }
.code-gutter { flex: none; margin: 0; padding: 16px 0 16px 16px; font: 400 var(--fs-mono)/1.7 var(--font-mono); text-align: right; color: var(--tok-c); -webkit-user-select: none; user-select: none; }
.code-block { margin: 0; padding: 16px 18px; overflow-x: auto; white-space: pre; font: 400 var(--fs-mono)/1.7 var(--font-mono); color: var(--term-ink); }
.code-wrap .code-block { flex: 1; min-width: 0; overflow: visible; }
.predict-form {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; max-width: 34rem;
  margin-top: var(--s-5); padding: 16px 18px; border-radius: var(--r-xs); background: var(--cream); rotate: -.6deg;
  box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); color: var(--ink-2);
}
.predict-form label { grid-column: 1 / -1; font: 600 15px/1.35 var(--font-sans); color: var(--ink); }
.predict-form::before { content: ">>>"; content: ">>>" / ""; grid-row: 2; grid-column: 1; font: 700 15px/1 var(--font-mono); color: var(--ink-blue); }
.predict-form input { grid-row: 2; grid-column: 2; min-height: 44px; font-family: var(--font-mono); color: var(--ink-blue); }
.predict-form button { grid-row: 2; grid-column: 3; }
@media (max-width: 479px) { .predict-form button { grid-row: 3; grid-column: 1 / -1; justify-self: start; } }
.trace { width: 100%; margin-top: var(--s-5); border-collapse: collapse; font: 400 14px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
.trace th, .trace td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.trace th { font: 600 var(--fs-meta)/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.trace td { color: var(--text); }
.trace tbody tr:last-child td:last-child::after { content: " ✓"; content: " ✓" / ""; color: var(--success); font-weight: 700; }
.motion-ok .trace tr.is-new td:first-child { animation: write-in 280ms steps(4) both; }

/* tool or crutch */
.toc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.toc-item { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 20px 22px; border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); color: var(--text-2); }
@media (min-width: 900px) {
  .toc-item:nth-child(odd) { rotate: -.4deg; }
  .toc-item:nth-child(even) { rotate: .4deg; }
  .toc-item:focus-within { rotate: 0deg; }
}
.toc-item > p { margin: 0; font: 400 1.0625rem/1.6 var(--font-sans); color: var(--text); }
.toc-item .btn-row { margin-top: auto; }
.toc-item .tool-btn[data-choice="tool"] { color: var(--spark-text); box-shadow: inset 0 0 0 1.5px var(--spark); }
.toc-item .tool-btn[data-choice="crutch"] { color: var(--graphite); box-shadow: inset 0 0 0 1.5px var(--graphite); }
.toc-item .tool-btn.is-picked[data-choice="tool"] { background: var(--spark-ink); color: var(--white); box-shadow: none; }
.toc-item .tool-btn.is-picked[data-choice="crutch"] { background: var(--graphite); color: var(--white); box-shadow: none; }
.toc-item .tool-btn:disabled { opacity: .6; cursor: default; }
.toc-item .tool-btn.is-picked:disabled { opacity: 1; }   /* the student's own answer stays AA-readable */
.toc-item.is-right { box-shadow: var(--shadow-1), inset 0 0 0 2px var(--success); }
.toc-item.is-wrong { box-shadow: var(--shadow-1), inset 0 0 0 2px var(--danger); }
.toc-why { margin: 0; font-size: 15px; color: var(--text-2); }
.toc-why strong { color: var(--text); }
.toc-score { min-height: 1.2em; margin: var(--s-5) 0 0; font: 600 var(--fs-h3)/1.2 var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; }
.motion-ok .toc-score:not(:empty) { animation: pop-in 360ms var(--ease-pop); }

/* ---------------------------------------------------------------- 23 */
@keyframes draw-on   { from { stroke-dashoffset: 1.001; } }
@keyframes write-in  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise-in   { from { opacity: 0; translate: 0 .3em; } }
@keyframes fade-in   { from { opacity: 0; } }
@keyframes pop-in    { from { opacity: 0; scale: .6; } }
@keyframes stamp-in  { from { opacity: 0; scale: 1.4; rotate: -12deg; } }
@keyframes caret     { 50% { opacity: 0; } }
@keyframes page-in   { from { opacity: 0; transform: rotateY(-6deg) translateX(12px); } }
@keyframes flip-down { from { opacity: 0; transform: rotateX(-70deg); transform-origin: top; } }
@keyframes shake     { 25%, 75% { translate: -3px 0; } 50% { translate: 3px 0; } }
@keyframes ink-ripple { from { transform: scale(0); opacity: .22; } to { transform: scale(1.4); opacity: 0; } }
@keyframes ink-ring   { from { transform: scale(0); opacity: .22; } to { transform: scale(1.4); opacity: 0; } }
@keyframes ink-blot   { from { transform: scale(0); opacity: .22; } to { transform: scale(1.4); opacity: 0; } }
@keyframes ink-pixel  { from { transform: scale(0); opacity: .22; } to { transform: scale(1.4); opacity: 0; } }
@keyframes ink-smudge { from { transform: scale(0); opacity: .22; } to { transform: scale(1.4); opacity: 0; } }
@keyframes p-drive   { from { --p: 0; } to { --p: 1; } }
@keyframes arc-spin  { from { --arc: 0deg; } to { --arc: 360deg; } }
@keyframes type-in   { to { clip-path: inset(0 0 0 0); } }
@keyframes gc-fill   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes faq-in    { from { opacity: 0; translate: 0 -6px; } }
@keyframes panel-in  { from { opacity: 0; translate: 0 8px; } }
@keyframes dots-slide { from { background-position-x: 0; } to { background-position-x: 16px; } }
@keyframes ta-sweep  { from { transform: scaleX(0); } }

/* draw (both modes) — rest = fully drawn */
.draw { fill: none; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
/* reveal base (hidden start lives in the rule-10 block) */
.reveal { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out), clip-path var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--i) * var(--stagger)); }
.reveal.lift, .reveal.tile {
  transition: opacity var(--dur-reveal) var(--ease-out) calc(var(--i) * var(--stagger)), transform var(--dur-reveal) var(--ease-out) calc(var(--i) * var(--stagger)),
              translate var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
}
/* words */
.w { display: inline; }
/* scroll timelines (enhancement): CSS drives the progress pencil */
@supports (animation-timeline: scroll()) {
  .motion-ok .subnav-progress[data-m-css] { animation: p-drive linear both; animation-timeline: scroll(root); }
}

/* ---------------------------------------------------------------- 24 */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 280ms; animation-timing-function: var(--ease-out); }
  /* No view-transition-name on .site-header: a named element becomes a
     backdrop root, which stops its frosted-glass ::before from blurring the
     page behind it. The root crossfade is enough for the header. */
  .subject-switcher a[aria-current="page"] { view-transition-name: subject-pill; }
}
html:not(.motion-ok)::view-transition-group(*), html:not(.motion-ok)::view-transition-old(*), html:not(.motion-ok)::view-transition-new(*) { animation: none; }

/* ---------------------------------------------------------------- 25 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .site-header, .subnav { transition: none; }
  .motion-toggle { display: none; }
}
/* the footer toggle (and a failed motion.js) behave the same even when the OS allows motion */
html.js:not(.motion-ok) *, html.js:not(.motion-ok) *::before, html.js:not(.motion-ok) *::after {
  animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important;
}
@media (prefers-reduced-transparency: reduce) {
  .site-header::before, .subnav::before, .float-pill::before, .gallery-ctrl::before { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-tone-under="dark"] body:not(.nav-open) :is(.site-header, .subnav)::before { background: var(--night); }
}
@media (forced-colors: active) {
  .tone--spectrum { background: none; color: CanvasText; }
  .seg-thumb { display: none; }
  .seg > :is([aria-selected="true"], [aria-pressed="true"]) { outline: 2px solid CanvasText; outline-offset: -4px; }
  .gc-dot::before, .story-dots > button::before { background: CanvasText; }
  .pf-gate input { -webkit-appearance: auto; appearance: auto; }
  .sent[data-tag] { outline: 1px solid CanvasText; }
}

/* ---------------------------------------------------------------- 26 */
@media print {
  .bg-band, .hero-stage, .term, .sheet--band, .site-header, .subnav {
    --surface: #FFFFFF; --card-bg: #FFFFFF; --text: #000000; --text-2: #222222; --text-3: #444444; --line: #CCCCCC; --line-strong: #999999;
    --accent-text: var(--accent-ink); --spark-text: var(--spark-ink); --btn-bg: #000000; --btn-fg: #FFFFFF; --mark: var(--accent); color-scheme: light;
  }
  body, .bg-paper, .bg-paper-2, .section-alt, .bg-white, .bg-tint, .bg-band, .hero-stage, .term, .sheet, .site-footer { background: #FFFFFF !important; color: #222222; }
  body { font-size: 11pt; }
  .motif, .motif-fade::before, .tile, .sheet--graph, .sheet--ruled, .sheet--hatch { background-image: none !important; }
  .is-framed::before { display: none; }
  .js-only, .lab-controls, .float-pill, .mobile-cta, .subnav, .story-controls, .motion-toggle, .gallery-ctrl,
  .site-header, .skip-link, .nav-toggle, .inquiry-form, .subnav-progress, .seg[data-motion], .press-ink { display: none !important; }
  .section { padding-block: 1.25rem; }
  .story-track { height: auto !important; }
  .story-stage { position: static !important; height: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .flip-inner { display: block !important; transform: none !important; }
  .flip-front, .flip-back { opacity: 1 !important; visibility: visible !important; transform: none !important; margin-bottom: 8px; }
  .card, .stage-body, .lab, .tile, .duo-col, .sheet, .term { box-shadow: 0 0 0 1px #CCCCCC !important; break-inside: avoid; }
  .faq details > p { padding-right: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444444; }
}

/* ---------------------------------------------------------------- 27 */
/* =====================================================================
   RULE-10 BLOCK — the only place for hidden starting states and pinned
   layout. Print, reduced motion and the no-JS page never see any of it.
   ===================================================================== */
@media screen and (prefers-reduced-motion: no-preference) {

  /* reveals (main.js adds .is-visible) */
  .motion-ok .reveal:not(.is-visible) { opacity: 0; transform: translateY(24px); }
  .motion-ok .reveal[data-reveal="scale"]:not(.is-visible) { transform: scale(.96); }
  .motion-ok .reveal[data-reveal="clip"]:not(.is-visible) { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
  /* never hide something that holds keyboard focus (WCAG 2.4.7) */
  .motion-ok .reveal:not(.is-visible):focus-within { opacity: 1; transform: none; clip-path: none; }

  /* F1 pencil rule draws after its header reveals */
  .motion-ok .section-head.reveal:not(.is-visible) h2::after { clip-path: inset(0 100% 0 0); }
  .motion-ok .section-head.reveal h2::after { transition: clip-path var(--dur-hero) var(--ease-pencil) 250ms; }

  /* draw: once (on .is-in) and scrub (on --p, windowed by --from/--to) */
  .motion-ok [data-motion~="draw"]:not([data-m-draw="scrub"]):not(.is-in) .draw { stroke-dashoffset: 1.001; }
  .motion-ok [data-motion~="draw"] .draw { transition: stroke-dashoffset var(--dur-draw) var(--ease-pencil) calc(var(--d) * 120ms); }
  .motion-ok [data-m-draw="scrub"] .draw { transition: none; stroke-dashoffset: calc(1.001 - clamp(0, (var(--p) - var(--from)) / (var(--to) - var(--from)), 1)); }

  /* words: ink-in by opacity only */
  .motion-ok [data-motion~="words"] .w { opacity: clamp(.18, (var(--p) * (var(--n) + 4) - var(--w)) / 4, 1); }

  /* type: per-line clip, steps per character */
  .motion-ok [data-motion~="type"] [data-type-line] { clip-path: inset(0 100% 0 0); }
  /* jump-start: the last step lands exactly on 1 (jump-end + fractional durations can stop a glyph short) */
  .motion-ok [data-motion~="type"].is-in [data-type-line] { animation: type-in var(--type-dur) steps(var(--chars), jump-start) var(--type-delay) forwards; }
  .motion-ok [data-motion~="type"].is-done [data-type-line] { animation: none; clip-path: none; }

  /* count: odometer wheels start at 0; binary shows bits until done */
  .motion-ok .stat-num:not(.is-counting):not(.is-done) .odo-d > span { transform: none; }
  .motion-ok .stat-num:not(.is-done) .bin .bits { opacity: 1; }
  .motion-ok .stat-num:not(.is-done) .bin-dec { opacity: 0; }
  .motion-ok .stat-num:not(.is-counting):not(.is-done) .bit { transform: none; }

  /* hero stage entry scale (not on phones) */
  @media (min-width: 720px) { .motion-ok .hero-stage { scale: calc(.94 + .06 * var(--pe)); } }

  /* E3 highlighter sweeps (seq adds .is-in) */
  .motion-ok .hl[data-motion]:not(.is-in) { background-size: 0% .62em; }
  .motion-ok .hl[data-motion] { transition: background-size 520ms var(--ease-out) 200ms; }

  /* F2 graphite, then spark */
  .motion-ok .duo:not(.is-in) .duo-col:not(.is-ai) .check-list li::before { clip-path: inset(0 100% 0 0); }
  .motion-ok .duo .duo-col:not(.is-ai) .check-list li::before { transition: clip-path 360ms var(--ease-pencil) calc(var(--li) * 90ms); }
  .motion-ok .duo:not(.is-in) .is-ai .duo-icon { transform: scale(.6); opacity: 0; }
  .motion-ok .duo .is-ai .duo-icon { transition: transform 420ms var(--ease-pop) 660ms, opacity 200ms 660ms; }
  .motion-ok .duo:not(.is-in) .spark-link .draw { stroke-dashoffset: 1.001; }
  .motion-ok .duo .spark-link .draw { transition: stroke-dashoffset 600ms var(--ease-pencil) 900ms; }

  /* tabs/toggles: the incoming panel rises in */
  .motion-ok .seg-panel:not([hidden]) { animation: panel-in var(--dur-swap) var(--ease-out) both; }

  /* flip cards turn in 3D (no motion: crossfade, set outside this block) */
  .motion-ok .flip-card { perspective: 1200px; }
  .motion-ok .flip-inner { transform-style: preserve-3d; transition: transform var(--dur-swap) var(--ease-in-out); }
  html.motion-ok .flip-card .flip-front, html.motion-ok .flip-card .flip-back,
  html.motion-ok .flip-card.is-flipped .flip-front, html.motion-ok .flip-card.is-flipped .flip-back {
    opacity: 1; visibility: visible; transition: none; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  }
  html.motion-ok .flip-card .flip-back, html.motion-ok .flip-card.is-flipped .flip-back { transform: rotateY(180deg); }
  .motion-ok .flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }

  /* §3.19 PINNED STORIES — layout (only when motion.js confirms .is-pinned) */
  .motion-ok .story-track { height: calc(var(--steps) * var(--pin-step, 70svh) + 100svh); }
  .motion-ok .story-stage { position: sticky; top: var(--stick-top); height: calc(100svh - var(--stick-top)); align-content: center; }
  @supports not (height: 1svh) {
    .motion-ok .story-track { height: calc(var(--steps) * 70vh + 100vh); }
    .motion-ok .story-stage { height: calc(100vh - var(--stick-top)); }
  }
  @media (max-width: 899px) {
    .motion-ok .story-track { --pin-step: 55svh; }
    .motion-ok .story.is-pinned .story-stage { grid-template-areas: "visual" "steps" "controls"; grid-template-rows: minmax(0, 1fr) auto auto; gap: var(--s-4); padding-block: var(--s-4); }
    .motion-ok .story.is-pinned .story-visual { grid-area: visual; min-height: 0; }
    /* size the sheet to its content instead of stretching it over the whole row (tablets showed empty paper) */
    .motion-ok .story.is-pinned .story-visual { align-self: center; }
    .motion-ok .story.is-pinned .story-steps { grid-area: steps; display: grid; }
    .motion-ok .story.is-pinned .story-controls { grid-area: controls; }
    .motion-ok .story.is-pinned .story-steps > li { grid-area: 1 / 1; opacity: 0; transition: opacity var(--dur-ui); }
    .motion-ok .story.is-pinned .story-steps > li.is-active { opacity: 1; }
  }
  /* short screens and phones: the final sheet can't fit beside the step text in a pinned frame,
     so show the static final frame + full step list instead (motion.js follows this gating) */
  @media (max-height: 560px), (max-width: 899px) and (max-height: 760px) {
    .motion-ok .story-track { height: auto; }
    .motion-ok .story-stage { position: static; height: auto; }
  }
  .motion-ok .story.is-pinned .story-controls { display: flex; }
  /* keep the dots + skip link clear of the fixed float pill (≈ 44px + 16px inset) */
  .motion-ok .story.is-pinned .story-stage { padding-bottom: max(var(--s-7), calc(76px + env(safe-area-inset-bottom))); }
  /* short laptop viewports: reclaim vertical space so tall step lists never ride under the sub-nav */
  @media (min-width: 900px) and (max-height: 760px) {
    .motion-ok .story.is-pinned .story-stage { padding-top: var(--s-4); row-gap: var(--s-4); align-content: safe center; }
    .motion-ok .story.is-pinned .story-steps { gap: var(--s-5); }
  }
  .motion-ok .story.is-pinned .story-visual { max-height: 100%; min-height: 0; overflow: hidden; will-change: transform; }
  /* Apple "current spec line turns colour" */
  .motion-ok .story:is(.is-pinned, .is-player) .story-steps > li { color: var(--text-3); transition: color var(--dur-ui) var(--ease-out), opacity var(--dur-ui); }
  .motion-ok .story:is(.is-pinned, .is-player) .story-steps > li h3 { color: var(--text-3); transition: color var(--dur-ui) var(--ease-out); }
  .motion-ok .story:is(.is-pinned, .is-player) .story-steps > li.is-active { color: var(--text); }
  .motion-ok .story:is(.is-pinned, .is-player) .story-steps > li.is-active h3 { color: var(--accent-text); }
  .motion-ok [data-theme="math"] .story:is(.is-pinned, .is-player) .story-steps > li:not(.is-active):not(.is-past) .step-num::after { opacity: 0; }
  .motion-ok [data-theme="math"] .story:is(.is-pinned, .is-player) .story-steps > li.is-active .step-num::after { animation: arc-spin 700ms var(--ease-pencil) both; }
  /* universal timeline parts: --on runs 0 -> 1 between --at and --at + --len */
  .motion-ok .story:is(.is-pinned, .is-player) .tp { --on: clamp(0, (var(--step) + var(--step-p) - var(--at)) / var(--len), 1); opacity: var(--on); transform: translateY(calc((1 - var(--on)) * 12px)); }
  .motion-ok .story:is(.is-pinned, .is-player) .tp-draw .draw { stroke-dasharray: 1 2; stroke-dashoffset: calc(1.001 - var(--on)); }
  .motion-ok .story:is(.is-pinned, .is-player) .tp-write { clip-path: inset(0 calc((1 - var(--on)) * 100%) 0 0); transform: none; }
  .motion-ok .story:is(.is-pinned, .is-player) .tp-pop { transform: scale(calc(.6 + .4 * var(--on))); }
  .motion-ok .story:is(.is-pinned, .is-player) .tp.strike { opacity: 1; transform: scaleX(var(--on)); }
  .motion-ok .story:is(.is-pinned, .is-player) .tp-out { opacity: calc(var(--on) * (1 - clamp(0, (var(--step) + var(--step-p) - var(--until)) / .2, 1))); }
  .motion-ok .story:is(.is-pinned, .is-player) mark.tp-hl { --on: clamp(0, (var(--step) + var(--step-p) - var(--at)) / var(--len), 1); }
  .motion-ok .story:is(.is-pinned, .is-player) mark.tp-hl::before { transform: scaleX(var(--on)); }
  /* call-stack frames push/pop with the story */
  .motion-ok .story:is(.is-pinned, .is-player) .frame {
    --t: calc(var(--step) + var(--step-p)); --in: clamp(0, (var(--t) - var(--push)) * 4, 1); --out: clamp(0, (var(--t) - var(--pop)) * 4, 1);
    opacity: calc(var(--in) * (1 - var(--out))); transform: translateY(calc((1 - var(--in)) * -24px + var(--out) * -16px));
  }
}

/* === 6.7 thanks & 404 (owned by the thanks/404 builder) === */
/* Portal, quiet (§6.7, §8.3, §8.4): one-screen utility pages. Everything
   here is scoped to main.utility, .thanks-tick, .tile-row or .mini-spark,
   so the index contact aside (.mini-steps) and gallery tiles are untouched. */
.utility { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-height: calc(100svh - var(--header-h)); }
@supports not (height: 1svh) { .utility { min-height: calc(100vh - var(--header-h)); } }
.utility h1 { max-width: 16ch; margin: 0; }
.utility .lead { margin: var(--s-5) 0 0; }
.utility-copy > .section-kicker { margin-bottom: var(--s-3); }
.utility .card-title { margin: 0 0 var(--s-4); font-size: var(--fs-h3); line-height: 1.14; letter-spacing: -.008em; }
.utility .contact-card .card-title { padding-right: 44px; } /* room for the .mini-spark corner mark */
@media (max-width: 479px) { .utility-actions .btn { width: 100%; } }

/* thanks: tick beside the h1 */
.utility-head { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 720px) { .utility-head { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-6); } }
.thanks-tick { display: block; width: 72px; height: 72px; overflow: visible; }
@media (min-width: 720px) { .thanks-tick { width: 96px; height: 96px; margin-top: 6px; } }
.thanks-tick .tt-disc { fill: var(--tint); transform-box: fill-box; transform-origin: center; }
.thanks-tick .draw { stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; }
.thanks-tick .tt-ring { stroke-width: 3; }
.thanks-tick .tt-check { stroke-width: 7; }

/* thanks: "What happens next" as a ticked timeline (the <ol> keeps its order) */
.utility { --tt-base: 700ms; --tt-gap: 300ms; } /* on main, so the sibling .mini-spark can read them too */
.utility .mini-steps { list-style: none; padding: 0; display: grid; font-size: var(--fs-body); line-height: 1.55; }
.utility .mini-steps li { position: relative; min-height: 28px; padding-left: 44px; }
.utility .mini-steps li:not(:last-child) {
  padding-bottom: var(--s-5);
  background: linear-gradient(var(--line-strong), var(--line-strong)) 13px 33px / 2px calc(100% - 37px) no-repeat;
}
.utility .mini-steps li::before { content: ""; position: absolute; left: 0; top: -1px; width: 28px; height: 28px; border-radius: 50%; background: var(--tint); }
.utility .mini-steps li::after {
  content: ""; position: absolute; left: 6px; top: 5px; width: 16px; height: 16px; background: var(--accent-text);
  -webkit-mask: var(--tick-mask) no-repeat center/16px 16px; mask: var(--tick-mask) no-repeat center/16px 16px;
}
.mini-spark {
  position: absolute; top: clamp(20px, 1rem + .75vw, 32px); right: clamp(20px, 1rem + .75vw, 32px);
  font: 400 26px/1 var(--font-sans); color: var(--spark); pointer-events: none; user-select: none;
}

/* 404: three themed tiles (each tile re-scopes its own world) */
.tile-row { list-style: none; margin-bottom: 0; padding: 0; display: grid; gap: var(--gap); } /* keep .stack's margin-top */
@media (min-width: 720px) { .tile-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile-row > li { display: flex; margin: 0; min-width: 0; }
.tile-row .tile { --t404-d: calc(var(--i) * 240ms + 300ms); flex: 1 1 auto; min-width: 0; }
.tile-row .tile-title { overflow-wrap: break-word; }
.tile-row .nobr { white-space: nowrap; }
/* keep the English margin rule in the padding, clear of the title text */
.tile-row .tile[data-theme="english"] { background-position: calc(clamp(24px, 1.5rem + 1vw, 40px) / 2 - 64px) 0, 0 0; }
.start-card .subject-list { margin-bottom: 0; }

/* intro keyframes (distinct names, so the shared hover replay can add a fresh run) */
@keyframes t404-draw  { from { stroke-dashoffset: 1.001; } }
@keyframes t404-fade  { from { opacity: 0; } }
@keyframes t404-pop   { from { opacity: 0; scale: .6; } }
@keyframes t404-sweep { from { transform: scaleX(0); } }
@keyframes t404-rise  { from { opacity: 0; translate: 0 8px; } }
@keyframes t404-caret { 50% { opacity: 0; } }

/* rule-10 block for 6.7: hidden starting states + sequenced one-shots */
@media screen and (prefers-reduced-motion: no-preference) {
  /* thanks: tint disc pops, clay ring is drawn by hand, then the tick */
  .motion-ok .thanks-tick:not(.is-in) .tt-disc { opacity: 0; scale: .4; }
  .motion-ok .thanks-tick .tt-disc { transition: opacity 240ms var(--ease-out), scale 560ms var(--ease-pop); }
  .motion-ok .thanks-tick[data-motion~="draw"] .tt-ring { transition: stroke-dashoffset 800ms var(--ease-pencil) 120ms; }
  .motion-ok .thanks-tick[data-motion~="draw"] .tt-check { transition: stroke-dashoffset 520ms var(--ease-pencil) 760ms; }

  /* thanks: each step's circle pops, its tick writes in, the rail grows to the next — then the spark */
  .motion-ok .utility .mini-steps:not(.is-in) li::before { opacity: 0; scale: .5; }
  .motion-ok .utility .mini-steps li::before {
    transition: opacity 200ms var(--ease-out) calc(var(--tt-base) + var(--li) * var(--tt-gap)),
                scale 420ms var(--ease-pop) calc(var(--tt-base) + var(--li) * var(--tt-gap));
  }
  .motion-ok .utility .mini-steps:not(.is-in) li::after { clip-path: inset(0 100% 0 0); }
  .motion-ok .utility .mini-steps li::after { transition: clip-path 360ms var(--ease-pencil) calc(var(--tt-base) + var(--li) * var(--tt-gap) + 120ms); }
  .motion-ok .utility .mini-steps:not(.is-in) li:not(:last-child) { background-size: 2px 0; }
  .motion-ok .utility .mini-steps li:not(:last-child) { transition: background-size 300ms var(--ease-out) calc(var(--tt-base) + var(--li) * var(--tt-gap) + 260ms); }
  .motion-ok .utility .mini-steps:not(.is-in) + .mini-spark { opacity: 0; scale: .3; rotate: -40deg; }
  .motion-ok .utility .mini-steps + .mini-spark {
    transition: opacity 200ms var(--ease-out) calc(var(--tt-base) + 2 * var(--tt-gap) + 400ms),
                scale 520ms var(--ease-pop) calc(var(--tt-base) + 2 * var(--tt-gap) + 400ms),
                rotate 520ms var(--ease-pop) calc(var(--tt-base) + 2 * var(--tt-gap) + 400ms);
  }

  /* 404: each tile plays its mini motif once as the row arrives (staggered by
     the li's --i), and again on every hover/focus. The hover list keeps the
     finished intro animation and appends the shared one, so leaving a tile
     never re-runs anything. */
  .motion-ok .tile-row .tile:not(.is-in) .tile-art .draw { stroke-dashoffset: 1.001; }
  .motion-ok .tile-row .tile:not(.is-in) .tile-art :is(.ta-grid, .ta-dot, .ta-term) { opacity: 0; }
  .motion-ok .tile-row .tile:not(.is-in) .tile-art .ta-hl { transform: scaleX(0); }

  .motion-ok .tile-row .tile.is-in .tile-art .ta-grid { animation: t404-fade 400ms var(--ease-out) var(--t404-d) both; }
  .motion-ok .tile-row .tile.is-in .tile-art .draw { animation: t404-draw 900ms var(--ease-pencil) calc(var(--t404-d) + 100ms) both; }
  .motion-ok .tile-row .tile.is-in .tile-art .ta-dot { animation: t404-pop 420ms var(--ease-pop) calc(var(--t404-d) + 850ms) both; }
  .motion-ok .tile-row .tile.is-in .tile-art .ta-hl { animation: t404-sweep 420ms var(--ease-out) var(--t404-d) both; }
  .motion-ok .tile-row .tile.is-in .tile-art .ta-hl ~ .draw { animation: t404-draw 700ms var(--ease-pencil) calc(var(--t404-d) + 380ms) both; }
  .motion-ok .tile-row .tile.is-in .tile-art .ta-term { animation: t404-rise 420ms var(--ease-out) var(--t404-d) both; }
  .motion-ok .tile-row .tile.is-in .tile-art .ta-caret { animation: t404-caret 600ms steps(1) calc(var(--t404-d) + 420ms) 3; }

  .motion-ok .tile-row .tile.is-in:is(:hover, :focus-visible) .tile-art .ta-grid {
    animation: t404-fade 400ms var(--ease-out) var(--t404-d) both, fade-in 400ms var(--ease-out) both; }
  .motion-ok .tile-row .tile.is-in:is(:hover, :focus-visible) .tile-art .draw {
    animation: t404-draw 900ms var(--ease-pencil) calc(var(--t404-d) + 100ms) both, draw-on 700ms var(--ease-pencil) both; }
  .motion-ok .tile-row .tile.is-in:is(:hover, :focus-visible) .tile-art .ta-dot {
    animation: t404-pop 420ms var(--ease-pop) calc(var(--t404-d) + 850ms) both, pop-in 420ms var(--ease-pop) 650ms both; }
  .motion-ok .tile-row .tile.is-in:is(:hover, :focus-visible) .tile-art .ta-hl {
    animation: t404-sweep 420ms var(--ease-out) var(--t404-d) both, ta-sweep 420ms var(--ease-out) both; }
  .motion-ok .tile-row .tile.is-in:is(:hover, :focus-visible) .tile-art .ta-hl ~ .draw {
    animation: t404-draw 700ms var(--ease-pencil) calc(var(--t404-d) + 380ms) both, draw-on 700ms var(--ease-pencil) 380ms both; }
  .motion-ok .tile-row .tile.is-in:is(:hover, :focus-visible) .tile-art .ta-caret {
    animation: t404-caret 600ms steps(1) calc(var(--t404-d) + 420ms) 3, caret 600ms steps(1) 3; }
}