/* ════════════════════════════════════════════════════════════════════
   THE LIVING BLUEPRINT — design tokens & system
   Sheet 0 of 13 · drafting standard for this drawing set
   Palette: ink/paper carry 90%; blueprint, signal, phosphor are intent.
   Scale: modular 1.25 (committed). Grid: 8px base rhythm.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── raw pigments ── */
  --ink:        #14171C;
  --paper:      #EFF2F5;
  --blueprint:  #1C3F94;
  --signal:     #FF5C35;
  --phosphor:   #29E7CD;
  --graphite:   #47505F;   /* darkened from #6B7280 — original fell to 3.8:1 on paper */

  /* ── role tokens (theme-mapped) ── */
  --bg:         var(--paper);
  --text:       var(--ink);
  --muted:      var(--graphite);
  --card:       #F8FAFC;
  --card-2:     #E4E9EF;
  --line:       rgba(28, 63, 148, 0.28);
  --grid-line:  rgba(28, 63, 148, 0.055);
  --draft:      var(--blueprint);          /* drawing/annotation color */
  --draft-strong: #16327A;
  --accent:     var(--signal);             /* live / active / correction */
  --accent-ink: #C33212;                   /* signal, darkened for small text on paper: 5.0:1 */
  --glow:       #0B7D6E;                   /* phosphor, ink-adjusted for light bg text: 4.9:1 */
  --glow-raw:   var(--phosphor);           /* decorative only on light theme */
  --focus:      var(--signal);
  --chart-quiet: #4E6AAE;   /* validated vs light surface — see colophon */
  --chart-hot:   #E84C27;
  --shadow:     0 1px 2px rgba(20,23,28,.06), 0 8px 24px -12px rgba(28,63,148,.25);

  /* ── type ── */
  --font-mono:  "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui:    "General Sans", "Segoe UI", system-ui, sans-serif;

  /* modular scale · ratio 1.25, base 1.0625rem (17px) */
  --step--2: clamp(0.66rem, 0.62rem + 0.15vw, 0.70rem);
  --step--1: clamp(0.80rem, 0.76rem + 0.20vw, 0.86rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.30vw, 1.0625rem);
  --step-1:  clamp(1.22rem, 1.14rem + 0.40vw, 1.33rem);
  --step-2:  clamp(1.48rem, 1.36rem + 0.62vw, 1.66rem);
  --step-3:  clamp(1.80rem, 1.60rem + 1.00vw, 2.08rem);
  --step-4:  clamp(2.14rem, 1.83rem + 1.60vw, 2.60rem);
  --step-5:  clamp(2.50rem, 2.05rem + 2.40vw, 3.25rem);
  --step-6:  clamp(2.90rem, 2.20rem + 3.60vw, 4.06rem);

  /* ── space (8px rhythm) ── */
  --s-1: 4px;  --s0: 8px;  --s1: 12px; --s2: 16px; --s3: 24px;
  --s4: 32px;  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 144px;

  --r-1: 4px; --r0: 8px; --r1: 12px; --r2: 16px;

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-micro: 140ms;
  --t-move:  260ms;

  color-scheme: light;
  accent-color: var(--signal);
}

:root[data-theme="dark"] {
  --bg:         #101318;
  --text:       #E9EDF2;
  --muted:      #9AA6B6;
  --card:       #171C24;
  --card-2:     #1E242E;
  --line:       rgba(126, 155, 232, 0.32);
  --grid-line:  rgba(126, 155, 232, 0.075);
  --draft:      #7E9BE8;
  --draft-strong: #A9BDF2;
  --accent:     #FF6B47;
  --accent-ink: #FF8A6B;
  --glow:       var(--phosphor);
  --glow-raw:   var(--phosphor);
  --chart-quiet: #5F7CC9;   /* validated vs dark surface */
  --chart-hot:   #E85F3B;
  --shadow:     0 1px 2px rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.6);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:         #101318;
    --text:       #E9EDF2;
    --muted:      #9AA6B6;
    --card:       #171C24;
    --card-2:     #1E242E;
    --line:       rgba(126, 155, 232, 0.32);
    --grid-line:  rgba(126, 155, 232, 0.075);
    --draft:      #7E9BE8;
    --draft-strong: #A9BDF2;
    --accent:     #FF6B47;
    --accent-ink: #FF8A6B;
    --glow:       var(--phosphor);
    --glow-raw:   var(--phosphor);
    --chart-quiet: #5F7CC9;
    --chart-hot:   #E85F3B;
    --shadow:     0 1px 2px rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}

/* ── base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: var(--step-0);
  font-weight: 420;
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* graph-paper base texture — the signature motif, present everywhere */
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
  transition: background-color var(--t-move) var(--ease-out), color var(--t-move) var(--ease-out);
}

img, svg, canvas { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
p { max-width: 68ch; }

::selection { background: var(--blueprint); color: #EFF2F5; }
:root[data-theme="dark"] ::selection { background: var(--phosphor); color: #14171C; }

/* every interactive element earns a visible focus state — no exceptions */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100px; left: var(--s2); z-index: 300;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-ui); font-size: var(--step--1);
  padding: var(--s1) var(--s2); border-radius: var(--r-1);
  transition: top var(--t-micro) var(--ease-out);
}
.skip-link:focus-visible { top: var(--s2); }

/* ── typography roles ─────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-mono); font-weight: 640; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

.lede { font-size: var(--step-1); line-height: 1.55; max-width: 58ch; }

/* annotation label — the draftsman's hand */
.ann {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 560;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ann--draft  { color: var(--draft); }
.ann--accent { color: var(--accent-ink); }

.ui { font-family: var(--font-ui); }

code, .code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 0.1em 0.4em;
  white-space: nowrap;
}

a { color: var(--draft-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }

/* ── layout shell ─────────────────────────────────────────────────── */
.wrap { width: min(1120px, 100% - 2 * var(--s3)); margin-inline: auto; }

.sheet { padding-block: var(--s7); position: relative; }
.sheet + .sheet { border-top: 1px solid var(--line); }

/* drafting title block — sheet numbers are real drawing-set semantics here */
.titleblock {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3);
  border-block: 1.5px solid var(--draft);
  padding-block: var(--s1);
  margin-bottom: var(--s5);
}
.titleblock .tb-no { color: var(--draft); }
.titleblock .tb-name { flex: 1; min-width: 200px; }
.titleblock h2 { font-size: var(--step-3); }
.titleblock .tb-scale { margin-left: auto; }

.sheet-intro { margin-bottom: var(--s5); display: grid; gap: var(--s2); }

/* ── the plate: demo panel with viewfinder corner brackets ────────── */
.plate {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  padding: var(--s4);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
  box-shadow: var(--shadow);
}
.plate::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  background:
    linear-gradient(var(--draft), var(--draft)) left 0 top 0 / 16px 1.5px,
    linear-gradient(var(--draft), var(--draft)) left 0 top 0 / 1.5px 16px,
    linear-gradient(var(--draft), var(--draft)) right 0 top 0 / 16px 1.5px,
    linear-gradient(var(--draft), var(--draft)) right 0 top 0 / 1.5px 16px,
    linear-gradient(var(--draft), var(--draft)) left 0 bottom 0 / 16px 1.5px,
    linear-gradient(var(--draft), var(--draft)) left 0 bottom 0 / 1.5px 16px,
    linear-gradient(var(--draft), var(--draft)) right 0 bottom 0 / 16px 1.5px,
    linear-gradient(var(--draft), var(--draft)) right 0 bottom 0 / 1.5px 16px;
  background-repeat: no-repeat;
}
.plate__tag {
  position: absolute; top: -0.7em; left: var(--s3);
  background: var(--bg); padding-inline: var(--s1);
}

/* leader line: dashed connector from a label to the thing it names */
.leader {
  display: flex; align-items: center; gap: var(--s1);
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--draft-strong);
}
.leader::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.leader__line { flex: 1; border-top: 1.5px dashed var(--line); min-width: 16px; }

/* dimension line: |←— value —→| */
.dim {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--step--2);
  color: var(--draft-strong); letter-spacing: 0.06em;
  user-select: none;
}
.dim::before, .dim::after {
  content: ""; flex: 1; height: 9px; min-width: 14px;
  border-bottom: 1.5px solid var(--draft);
  transform: translateY(-4.5px);
}
.dim::before { border-left: 1.5px solid var(--draft); }
.dim::after  { border-right: 1.5px solid var(--draft); }

/* ── controls: the page's own UI kit ──────────────────────────────── */
.btn {
  font-family: var(--font-ui); font-weight: 560; font-size: var(--step--1);
  letter-spacing: 0.01em; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s0);
  min-height: 44px; min-width: 44px;             /* touch target floor */
  padding: 0 var(--s3);
  border-radius: var(--r0);
  border: 1.5px solid var(--ink);
  background: var(--card); color: var(--text);
  cursor: pointer;
  transition: transform var(--t-micro) var(--ease-out),
              box-shadow var(--t-micro) var(--ease-out),
              background-color var(--t-micro) var(--ease-out),
              border-color var(--t-micro) var(--ease-out);
}
:root[data-theme="dark"] .btn { border-color: var(--line); }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); transition-duration: 60ms; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--primary {
  background: var(--signal); color: #14171C; border-color: transparent;
}
.btn--primary:hover { background: #FF6E4C; }
.btn--ghost { background: transparent; border-color: var(--line); }
.btn--sm { min-height: 36px; padding: 0 var(--s2); font-size: var(--step--2); }

/* chip / tab buttons for switching demo modes */
.chip {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.08em; text-transform: uppercase;
  min-height: 36px; padding: 0 var(--s2);
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: all var(--t-micro) var(--ease-out);
}
.chip:hover { color: var(--text); border-color: var(--draft); }
.chip[aria-pressed="true"], .chip.is-on {
  background: var(--draft); color: var(--bg); border-color: var(--draft);
}

/* switch — reused and re-skinned throughout */
.switch {
  --sw-w: 52px; --sw-h: 30px;
  position: relative; display: inline-flex; align-items: center; gap: var(--s1);
  cursor: pointer; font-family: var(--font-ui); font-size: var(--step--1);
  min-height: 44px;
}
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.switch .track {
  width: var(--sw-w); height: var(--sw-h); border-radius: 999px;
  background: var(--card-2); border: 1.5px solid var(--line);
  transition: background-color var(--t-micro) var(--ease-out), border-color var(--t-micro) var(--ease-out);
  flex: 0 0 auto; position: relative;
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: calc(var(--sw-h) - 7px); height: calc(var(--sw-h) - 7px);
  border-radius: 50%; background: var(--bg);
  border: 1.5px solid var(--line);
  transition: translate var(--t-move) var(--ease-out), background-color var(--t-micro);
}
.switch input:checked + .track { background: var(--draft); border-color: var(--draft); }
.switch input:checked + .track::after { translate: calc(var(--sw-w) - var(--sw-h) + 1px) 0; background: var(--bg); border-color: transparent; }
.switch input:focus-visible + .track { outline: 2px solid var(--focus); outline-offset: 3px; }

/* range slider */
input[type="range"] {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 44px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; background: var(--line); border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--draft);
  margin-top: -8.5px;
  transition: transform var(--t-micro) var(--ease-out);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-track { height: 3px; background: var(--line); border-radius: 2px; }
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--draft);
}
input[type="range"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.field { display: grid; gap: 6px; }
.field > .ann { display: flex; justify-content: space-between; gap: var(--s2); }
.field output { color: var(--text); font-weight: 640; letter-spacing: 0.02em; text-transform: none; }

input[type="text"], input[type="color"], select {
  min-height: 44px; padding: 0 var(--s2);
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r0);
  font-family: var(--font-ui);
}
input[type="color"] { padding: 4px; width: 60px; cursor: pointer; }

/* ── header ───────────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar__in {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 56px;
}
.topbar__brand {
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: 640;
  letter-spacing: 0.06em; color: var(--text); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--s0); min-height: 44px;
}
.topbar__brand .tick { color: var(--accent); }
.topbar nav { margin-left: auto; display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  color: var(--muted); padding: var(--s1) var(--s1); white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 2px solid transparent;
}
.topbar nav a:hover { color: var(--text); }
.topbar nav a[aria-current="true"] { color: var(--draft-strong); border-bottom-color: var(--accent); }

.iconbtn {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r0);
  cursor: pointer; color: var(--text);
  transition: border-color var(--t-micro), background-color var(--t-micro);
}
.iconbtn:hover { border-color: var(--draft); background: var(--card); }

/* fixed corner control — the global grid switch (sheet 6 proves the system) */
.gridswitch {
  position: fixed; left: var(--s2); bottom: var(--s2); z-index: 210;
  display: inline-flex; align-items: center; gap: var(--s1);
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--card); color: var(--text);
  border: 1.5px solid var(--line); border-radius: 999px;
  min-height: 44px; padding: 0 var(--s2) 0 var(--s1);
  cursor: pointer; box-shadow: var(--shadow);
}
.gridswitch .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); transition: background-color var(--t-micro); }
.gridswitch[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink); }
.gridswitch[aria-pressed="true"] .dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* whole-page drafting overlay */
.grid-overlay {
  position: fixed; inset: 0; z-index: 190; pointer-events: none;
  opacity: 0; transition: opacity var(--t-move) var(--ease-out);
  background-image:
    linear-gradient(rgba(255,92,53,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,92,53,.09) 1px, transparent 1px),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 96px 96px, 96px 96px;
}
html.grid-on .grid-overlay { opacity: 1; }
html.grid-on .plate { outline: 1px dashed var(--accent); outline-offset: 4px; }
html.grid-on .sheet { position: relative; }
.sheet__dim {
  position: absolute; top: var(--s2); right: var(--s2);
  opacity: 0; transition: opacity var(--t-move) var(--ease-out);
  pointer-events: none;
}
html.grid-on .sheet__dim { opacity: 1; }

/* reveal-on-scroll — enhancement only; without JS everything is visible */
html.js .rv { opacity: 0; translate: 0 18px; }
html.js .rv.is-in {
  opacity: 1; translate: 0 0;
  transition: opacity 500ms var(--ease-out), translate 500ms var(--ease-out);
  transition-delay: calc(var(--rv-i, 0) * 60ms);
}
@media (prefers-reduced-motion: reduce) {
  html.js .rv { opacity: 1; translate: none; transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   SHEET 1 — HERO
   ════════════════════════════════════════════════════════════════════ */
.hero { min-height: 92svh; display: grid; align-items: center; padding-block: 120px var(--s7); position: relative; overflow: clip; }
.hero__three { position: absolute; inset: 0; z-index: -1; opacity: 0.6; }
.hero__kicker { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.hero__kicker .leader__line { max-width: 90px; }

.hero h1 { margin-bottom: var(--s3); position: relative; cursor: crosshair; }
.hero h1 .w { display: inline-block; white-space: nowrap; }
.hero h1 .c { display: inline-block; }
html.js.anim .hero h1 .c {
  opacity: 0; translate: 0 0.55em; rotate: 4deg;
  animation: heroChar 640ms var(--ease-out) forwards;
  animation-delay: calc(120ms + var(--ci) * 22ms);
}
@keyframes heroChar { to { opacity: 1; translate: 0 0; rotate: 0deg; } }
.hero h1 em { font-style: normal; color: var(--draft); position: relative; }
.hero h1 mark { background: none; color: var(--accent); }

/* cursor-following type annotation */
.type-probe {
  position: fixed; z-index: 220; pointer-events: none;
  translate: 14px 14px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  letter-spacing: 0.05em;
  padding: 6px 10px; border-radius: 3px;
  border-left: 3px solid var(--phosphor);
  opacity: 0; transition: opacity var(--t-micro) var(--ease-out);
  white-space: pre;
}
.type-probe.is-on { opacity: 1; }

.hero__sub { margin-bottom: var(--s5); }

.hero__cta { display: inline-grid; justify-items: center; gap: var(--s1); }
.cta-note {
  font-family: var(--font-mono); font-size: var(--step--2); color: var(--accent-ink);
  letter-spacing: 0.08em;
  opacity: 0; translate: 0 -4px;
  transition: opacity var(--t-micro) var(--ease-out), translate var(--t-micro) var(--ease-out);
}
.cta-dim { width: 100%; opacity: 0.35; transition: opacity var(--t-micro) var(--ease-out); }
.hero__cta:hover .cta-note, .hero__cta:focus-within .cta-note { opacity: 1; translate: 0 0; }
.hero__cta:hover .cta-dim, .hero__cta:focus-within .cta-dim { opacity: 1; }
.btn--magnetic { will-change: transform; }

.hero__foot { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }

/* ════════════════════════════════════════════════════════════════════
   SHEET 2 — HISTORY TIMELINE (scroll-snap)
   ════════════════════════════════════════════════════════════════════ */
.timeline {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(360px, 82vw);
  gap: var(--s3);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: var(--s2) var(--s3) var(--s4);
  margin-inline: calc(-1 * var(--s3));
  scrollbar-width: thin; scrollbar-color: var(--draft) transparent;
}
.timeline > * { scroll-snap-align: center; }
.era { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s3); }
.era__stage {
  display: grid; place-items: center; min-height: 150px;
  border-radius: var(--r1); padding: var(--s3);
}
.era__year { color: var(--draft); }
.era p { font-size: var(--step--1); line-height: 1.6; }

/* era-skinned switches — same control, five costumes */
.eswitch { position: relative; display: inline-block; cursor: pointer; }
.eswitch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.eswitch input:focus-visible ~ .es-ui { outline: 2px solid var(--focus); outline-offset: 4px; }
.es-ui { display: block; position: relative; transition: all var(--t-move) var(--ease-out); }

/* 1 · skeuomorph — brushed metal, embossed, literal */
.era--skeuo .era__stage { background: linear-gradient(180deg, #B9BEC7, #888E9A); }
.era--skeuo .es-ui {
  width: 96px; height: 44px; border-radius: 8px;
  background: linear-gradient(180deg, #6E7683, #3F454F);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.45);
}
.era--skeuo .es-ui::after {
  content: "OFF"; position: absolute; top: 4px; left: 4px;
  width: 46px; height: 36px; border-radius: 6px;
  display: grid; place-items: center;
  font: 700 10px/1 var(--font-ui); letter-spacing: .1em; color: #3A3F48;
  background: linear-gradient(180deg, #F4F5F7, #C6CAD2);
  box-shadow: 0 2px 3px rgba(0,0,0,.5), inset 0 1px 0 #fff;
  transition: left var(--t-move) var(--ease-out);
}
.era--skeuo input:checked ~ .es-ui::after { content: "ON"; left: 46px; color: #0B5E2E; }

/* 2 · flat — pure geometry, zero depth */
.era--flat .era__stage { background: #2D9CDB; }
.era--flat .es-ui { width: 88px; height: 36px; background: #1B6FA8; }
.era--flat .es-ui::after {
  content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 36px;
  background: #fff; transition: left var(--t-move) linear;
}
.era--flat input:checked ~ .es-ui { background: #F2C94C; }
.era--flat input:checked ~ .es-ui::after { left: 52px; }

/* 3 · neumorph — same-surface extrusion */
.era--neu .era__stage { background: #E4EBF1; }
.era--neu .es-ui {
  width: 92px; height: 42px; border-radius: 999px; background: #E4EBF1;
  box-shadow: inset 6px 6px 12px #c3cbd3, inset -6px -6px 12px #ffffff;
}
.era--neu .es-ui::after {
  content: ""; position: absolute; top: 5px; left: 6px; width: 32px; height: 32px;
  border-radius: 50%; background: #E4EBF1;
  box-shadow: 4px 4px 8px #c3cbd3, -4px -4px 8px #ffffff;
  transition: left var(--t-move) var(--ease-out);
}
.era--neu input:checked ~ .es-ui::after { left: 54px; background: #7f9cf5; }

/* 4 · glass — translucency & backdrop blur */
.era--glass .era__stage {
  background:
    radial-gradient(circle at 20% 30%, #FF5C35 0 18%, transparent 40%),
    radial-gradient(circle at 80% 70%, #29E7CD 0 16%, transparent 42%),
    #1C3F94;
}
.era--glass .es-ui {
  width: 92px; height: 42px; border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.era--glass .es-ui::after {
  content: ""; position: absolute; top: 5px; left: 5px; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(255,255,255,.85);
  transition: left var(--t-move) var(--ease-out);
}
.era--glass input:checked ~ .es-ui { background: rgba(41,231,205,.4); }
.era--glass input:checked ~ .es-ui::after { left: 55px; }

/* 5 · os-native / spatial — platform conventions, subtle depth returns */
.era--native .era__stage { background: linear-gradient(180deg, var(--card-2), var(--card)); }
.era--native .es-ui {
  width: 52px; height: 32px; border-radius: 999px; background: #78788029;
  border: none; box-shadow: inset 0 0 0 1px rgba(120,120,128,.2);
}
.era--native .es-ui::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 28px; height: 28px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.25), 0 1px 1px rgba(0,0,0,.16);
  transition: left var(--t-move) var(--ease-out);
}
.era--native input:checked ~ .es-ui { background: #34C759; }
.era--native input:checked ~ .es-ui::after { left: 22px; }

/* ════════════════════════════════════════════════════════════════════
   SHEET 3 — PERCEPTION & PSYCHOLOGY
   ════════════════════════════════════════════════════════════════════ */
.demo-grid { display: grid; gap: var(--s4); }
.demo-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); margin-bottom: var(--s2); }
.demo-head h3 { font-size: var(--step-1); }
.demo-copy { font-size: var(--step--1); line-height: 1.6; color: var(--muted); max-width: 62ch; }
:root[data-theme="dark"] .demo-copy { color: var(--muted); }

.gestalt-stage { position: relative; height: 300px; margin-block: var(--s3); }
.gestalt-dot {
  position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: var(--draft); border: 1.5px solid transparent;
  transition: all 600ms var(--ease-inout);
}
.gestalt-dot.alt { background: var(--accent); }
.gestalt-dot.hollow { background: transparent; border-color: var(--draft); }
.gestalt-dot.square { border-radius: 4px; }
.chiprow { display: flex; flex-wrap: wrap; gap: var(--s0); }

.fitts-stage {
  position: relative; height: 220px; margin-top: var(--s3);
  border: 1px dashed var(--line); border-radius: var(--r0);
  touch-action: manipulation;
}
.fitts-home, .fitts-target {
  position: absolute; top: 50%; translate: 0 -50%;
  border-radius: 50%; cursor: pointer; border: none;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
}
.fitts-home { left: 20px; width: 52px; height: 52px; background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .fitts-home { background: var(--paper); color: var(--ink); }
.fitts-target { background: var(--signal); color: #14171C; transition: width var(--t-micro), height var(--t-micro), left var(--t-micro); }
.fitts-readout { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s3); }
.readout { display: grid; gap: 2px; }
.readout b { font-family: var(--font-mono); font-size: var(--step-1); font-weight: 640; }
.readout b.good { color: var(--glow); }
.readout b.bad { color: var(--accent-ink); }

.hick-menu { display: grid; gap: 6px; margin-block: var(--s3); max-width: 380px; }
.hick-item {
  min-height: 44px; padding: 0 var(--s2); text-align: left;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-1);
  font-family: var(--font-ui); font-size: var(--step--1); cursor: pointer;
  transition: border-color var(--t-micro), background-color var(--t-micro);
}
.hick-item:hover { border-color: var(--draft); background: var(--card-2); }
.hick-item.is-goal { border-color: var(--glow); }

.miller { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-block: var(--s3); }
.miller .digits {
  font-family: var(--font-mono); font-size: var(--step-2); font-weight: 640;
  letter-spacing: 0.04em; padding: var(--s3); text-align: center;
  border: 1px solid var(--line); border-radius: var(--r0); background: var(--bg);
}
.miller .digits.chunked { color: var(--draft-strong); letter-spacing: 0.1em; }

.jakob { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-block: var(--s3); }
.jakob-nav {
  border: 1px solid var(--line); border-radius: var(--r0); overflow: hidden; background: var(--bg);
}
.jakob-nav .bar {
  display: flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2);
  border-bottom: 1px solid var(--line); font-family: var(--font-ui); font-size: var(--step--1);
}
.jakob-nav .bar .logo { font-family: var(--font-mono); font-weight: 640; }
.jakob-nav .bar a { text-decoration: none; color: var(--muted); }
.jakob-nav .bar .cartish { margin-left: auto; }
.jakob-nav .body { padding: var(--s2); font-size: var(--step--2); color: var(--muted); font-family: var(--font-ui); }
.jakob-nav.weird .bar { flex-direction: row-reverse; }
.jakob-nav.weird .bar .cartish { margin-left: 0; margin-right: auto; }

.fx-callouts { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fx-callout {
  border-left: 3px solid var(--draft); padding: var(--s1) var(--s2);
  background: var(--card); font-size: var(--step--1); line-height: 1.6;
}
.fx-callout .ann { display: block; margin-bottom: 4px; }

/* ════════════════════════════════════════════════════════════════════
   SHEET 4 — COLOR SYSTEM
   ════════════════════════════════════════════════════════════════════ */
.scale-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-block: var(--s3); }
.scale-cell { display: grid; gap: 4px; justify-items: center; }
.scale-cell .swatch {
  width: 100%; aspect-ratio: 1 / 1.15; border-radius: var(--r-1);
  border: 1px solid rgba(20,23,28,.08);
  display: grid; place-items: end center; padding-bottom: 4px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 640;
}
.scale-cell .ann { font-size: 9px; letter-spacing: .04em; }
.scale-cell .cr { font-family: var(--font-mono); font-size: 9px; color: var(--muted); }
.scale-cell .cr.pass { color: var(--glow); font-weight: 640; }

.semantic-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s2); margin-top: var(--s3); }
.semantic {
  border-radius: var(--r0); padding: var(--s2);
  font-family: var(--font-ui); font-size: var(--step--1); font-weight: 560;
  border: 1px solid var(--line);
  display: grid; gap: 2px;
}
.semantic .ann { color: inherit; opacity: .75; }

.theme-demo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); }

/* ════════════════════════════════════════════════════════════════════
   SHEET 5 — TYPOGRAPHY
   ════════════════════════════════════════════════════════════════════ */
.type-controls { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: var(--s3); }
.scale-ladder { display: grid; gap: var(--s1); margin-block: var(--s3); overflow-x: auto; }
.scale-ladder .rung { display: flex; align-items: baseline; gap: var(--s2); white-space: nowrap; }
.scale-ladder .rung .ann { min-width: 110px; }
.scale-ladder .rung b { font-family: var(--font-serif); font-weight: 560; line-height: 1.1; }

.specimen-wrap { position: relative; margin-top: var(--s4); }
.specimen {
  position: relative; background: var(--bg); border: 1px solid var(--line);
  padding: var(--s4); max-width: var(--spec-w, 640px); min-width: 240px;
  transition: none;
}
.specimen.gridded {
  background-image: repeating-linear-gradient(var(--bg) 0 27px, rgba(255,92,53,.18) 27px 28px);
}
.specimen h3 { font-family: var(--font-serif); font-weight: var(--spec-wght, 620); font-variation-settings: "opsz" var(--spec-opsz, 72); line-height: 28px; font-size: 28px; margin-bottom: 28px; }
.specimen p { font-size: 17px; line-height: 28px; margin-bottom: 28px; max-width: none; }
.specimen p:last-child { margin-bottom: 0; }
.spec-handle {
  position: absolute; top: 0; bottom: 0; right: -14px; width: 28px;
  cursor: ew-resize; border: none; background: transparent;
  display: grid; place-items: center; touch-action: none;
}
.spec-handle::after {
  content: ""; width: 5px; height: 56px; border-radius: 3px;
  background: var(--draft); opacity: .8;
}
.spec-handle:hover::after, .spec-handle:focus-visible::after { background: var(--accent); }
.cpl-flag { margin-top: var(--s2); }
.cpl-flag b { font-family: var(--font-mono); }
.cpl-flag.bad b { color: var(--accent-ink); }
.cpl-flag.bad::after { content: " — past ~75ch the eye loses the return sweep"; color: var(--accent-ink); }

/* ════════════════════════════════════════════════════════════════════
   SHEET 6 — SPACING / GRID / RHYTHM
   ════════════════════════════════════════════════════════════════════ */
.radius-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: end; margin-block: var(--s3); }
.radius-demo { display: grid; gap: 6px; justify-items: center; }
.radius-demo .box {
  width: 72px; height: 72px; background: var(--card-2);
  border: 1.5px solid var(--draft);
}

.reflow-wrap { margin-top: var(--s3); }
.reflow {
  position: relative; border: 1.5px solid var(--draft);
  background: var(--bg); padding: var(--s2);
  width: var(--rf-w, 100%); min-width: 220px; max-width: 100%;
  container-type: inline-size;
}
.rf-cards { display: grid; gap: var(--s2); grid-template-columns: 1fr; }
.rf-card {
  border: 1px solid var(--line); border-radius: var(--r0);
  padding: var(--s2); background: var(--card);
  font-family: var(--font-ui); font-size: var(--step--2);
  display: grid; gap: 6px;
}
.rf-card .thumb { height: 44px; border-radius: var(--r-1); background: var(--card-2); border: 1px dashed var(--line); }
@container (min-width: 480px) { .rf-cards { grid-template-columns: 1fr 1fr; } }
@container (min-width: 720px) { .rf-cards { grid-template-columns: 1fr 1fr 1fr; } }
.rf-handle {
  position: absolute; top: 0; bottom: 0; right: -14px; width: 28px;
  cursor: ew-resize; border: none; background: transparent;
  display: grid; place-items: center; touch-action: none;
}
.rf-handle::after {
  content: ""; width: 5px; height: 56px; border-radius: 3px; background: var(--draft);
}
.rf-handle:hover::after, .rf-handle:focus-visible::after { background: var(--accent); }
.rf-meta { margin-top: var(--s1); display: flex; gap: var(--s3); flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════════
   SHEET 7 — MOTION
   ════════════════════════════════════════════════════════════════════ */
.ease-lanes { display: grid; gap: var(--s2); margin-block: var(--s3); }
.lane { display: grid; grid-template-columns: 150px 1fr 64px; align-items: center; gap: var(--s2); }
.lane .curve { width: 44px; height: 32px; }
.lane .curve polyline { fill: none; stroke: var(--draft); stroke-width: 2; }
.lane .track { position: relative; height: 36px; border-bottom: 1.5px dashed var(--line); }
.lane .ball {
  position: absolute; left: 0; top: 4px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); border: 1.5px solid var(--ink);
}
:root[data-theme="dark"] .lane .ball { border-color: var(--paper); }
.lane .ms { text-align: right; }
.lane-label { display: grid; gap: 2px; }

.dur-chart { display: grid; gap: var(--s1); margin-block: var(--s3); }
.dur-row { display: grid; grid-template-columns: minmax(110px, 200px) 1fr; align-items: center; gap: var(--s2); }
.dur-track { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.dur-bar { height: 20px; border-radius: 3px; background: var(--draft); flex: 0 0 auto; }
.dur-bar.warn { background: var(--accent); }
.dur-track .ann { flex: 1 1 120px; min-width: 0; }

.rm-sim[data-rm="on"] .lane .ball { transition: none !important; animation: none !important; }
.motion-note { border-left: 3px solid var(--accent); padding: var(--s1) var(--s2); background: var(--card); font-size: var(--step--1); }

/* ════════════════════════════════════════════════════════════════════
   SHEET 8 — BUTTON ANATOMY
   ════════════════════════════════════════════════════════════════════ */
.anatomy { display: grid; gap: var(--s2); }
.anatomy-row {
  display: grid; grid-template-columns: minmax(180px, 240px) minmax(24px, 1fr) minmax(200px, 2fr);
  align-items: center; gap: var(--s2);
  padding-block: var(--s2);
  border-bottom: 1px dashed var(--line);
}
.anatomy-row:last-child { border-bottom: none; }
.anatomy-row .stage { display: grid; justify-items: start; }
.anatomy-row .lead { border-top: 1.5px dashed var(--draft); position: relative; height: 0; }
.anatomy-row .lead::before {
  content: ""; position: absolute; left: -3px; top: -4px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.anatomy-row .note { font-size: var(--step--1); line-height: 1.55; }
.anatomy-row .note .ann { display: block; margin-bottom: 3px; }

/* forced states for the exploded view */
.btn.f-hover { transform: translateY(-1px); box-shadow: var(--shadow); background: #FF6E4C; }
.btn.f-focus { outline: 2px solid var(--focus); outline-offset: 3px; }
.btn.f-active { transform: translateY(1px) scale(.985); background: #E84C27; }
.btn .spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(20,23,28,.25); border-top-color: #14171C;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .btn .spinner { animation-duration: 1600ms; }
}
.btn.f-success { background: #1F9D6B; color: #fff; }
.btn.f-error { background: transparent; border-color: #C33212; color: var(--accent-ink); }

.touch-ring { position: relative; }
.touch-ring::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  width: 44px; height: 44px; translate: -50% -50%;
  border: 1.5px dashed var(--accent); border-radius: 50%;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════
   SHEET 9 — FEEDBACK & STATUS
   ════════════════════════════════════════════════════════════════════ */
.skel-card {
  border: 1px solid var(--line); border-radius: var(--r0); background: var(--bg);
  padding: var(--s3); display: grid; gap: var(--s1); min-height: 132px;
}
.skel { border-radius: 4px; background: var(--card-2); position: relative; overflow: hidden; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg) 60%, transparent), transparent);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { from { translate: -100% 0; } to { translate: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }
.skel.line-lg { height: 20px; width: 60%; }
.skel.line { height: 12px; width: 100%; }
.skel.line-sm { height: 12px; width: 40%; }

.race { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-block: var(--s3); }
.race-col { display: grid; gap: var(--s2); align-content: start; }
.fav {
  display: inline-flex; align-items: center; gap: var(--s0);
  min-height: 44px; padding: 0 var(--s2);
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg);
  font-family: var(--font-ui); font-size: var(--step--1); cursor: pointer;
  transition: all var(--t-micro) var(--ease-out);
  justify-self: start;
}
.fav .heart { transition: transform var(--t-micro) var(--ease-out); }
.fav[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink); }
.fav[aria-pressed="true"] .heart { transform: scale(1.25); }
.fav .lat { font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted); }

.toast-stack {
  position: fixed; bottom: var(--s2); right: var(--s2); z-index: 240;
  display: grid; gap: var(--s1); max-width: min(380px, calc(100vw - 2 * var(--s2)));
}
.toast {
  background: var(--ink); color: var(--paper);
  border-left: 3px solid var(--phosphor);
  border-radius: var(--r-1); padding: var(--s2);
  font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.5;
  box-shadow: var(--shadow);
  display: grid; gap: 4px;
  animation: toastIn 240ms var(--ease-out);
}
.toast.err { border-left-color: var(--signal); }
.toast b { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; }
.toast button {
  justify-self: start; background: none; border: none; cursor: pointer;
  color: var(--phosphor); text-decoration: underline; text-underline-offset: 3px;
  padding: 4px 0; min-height: auto; font-size: var(--step--1);
}
.toast.err button { color: #FFB4A0; }
@keyframes toastIn { from { opacity: 0; translate: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ════════════════════════════════════════════════════════════════════
   SHEET 10 — ACCESSIBILITY
   ════════════════════════════════════════════════════════════════════ */
.contrast-lab { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.contrast-prev {
  border-radius: var(--r0); padding: var(--s3); border: 1px solid var(--line);
  display: grid; gap: var(--s0); min-height: 130px; align-content: center;
}
.contrast-prev .big { font-family: var(--font-ui); font-size: var(--step-2); font-weight: 640; }
.verdicts { display: flex; flex-wrap: wrap; gap: var(--s0); }
.verdict {
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .06em;
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; color: var(--muted);
}
.verdict.pass { border-color: var(--glow); color: var(--glow); font-weight: 640; }
.verdict.fail { border-color: var(--accent-ink); color: var(--accent-ink); text-decoration: line-through; }

.kbd-demo { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-block: var(--s3); }
.kbd-demo .btn:focus-visible, .kbd-demo a:focus-visible, .kbd-demo .switch input:focus-visible + .track {
  outline-width: 3px; outline-offset: 4px;
}
kbd {
  font-family: var(--font-mono); font-size: var(--step--2);
  border: 1px solid var(--line); border-bottom-width: 2.5px; border-radius: 4px;
  padding: 2px 7px; background: var(--card);
}
.sr-demo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.sr-demo .revealed {
  font-family: var(--font-mono); font-size: var(--step--2); color: var(--glow);
  border: 1px dashed var(--glow); border-radius: 4px; padding: 4px 10px;
}
.pref-cards { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: var(--s3); }
.pref-card { border: 1px solid var(--line); background: var(--card); padding: var(--s2); font-size: var(--step--1); display: grid; gap: 4px; }
.pref-card .val { font-family: var(--font-mono); color: var(--glow); font-weight: 640; }

/* ════════════════════════════════════════════════════════════════════
   SHEET 11 — SYSTEMS OF THOUGHT
   ════════════════════════════════════════════════════════════════════ */
.thinkers { display: grid; gap: var(--s4); }
.principles { display: grid; gap: 0; counter-reset: p; }
.principle {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s0) var(--s3);
  align-items: baseline;
  padding-block: var(--s1); border-bottom: 1px dashed var(--line);
  font-size: var(--step--1); line-height: 1.55;
}
.principle:last-child { border-bottom: none; }
.principle .pin {
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .06em;
  color: var(--draft-strong); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
}
.principle .pin::before { content: ""; width: 18px; border-top: 1.5px dashed var(--line); }
.principle .pin:hover { color: var(--accent-ink); }
.principle b { font-family: var(--font-ui); font-weight: 620; }
.heur { columns: 2; column-gap: var(--s4); font-size: var(--step--1); }
.heur li { break-inside: avoid; margin-bottom: var(--s1); line-height: 1.5; }
@media (max-width: 640px) { .heur { columns: 1; } .principle { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════
   SHEET 12 — THE STUDIO (tokens playground)
   ════════════════════════════════════════════════════════════════════ */
.studio-kit {
  /* local token contract — themes only rewrite these */
  --k-bg: var(--card); --k-text: var(--text); --k-muted: var(--muted);
  --k-line: var(--line); --k-accent: var(--signal); --k-accent-text: #14171C;
  --k-r: 8px; --k-font: var(--font-ui); --k-head: var(--font-mono);
  --k-shadow: var(--shadow); --k-border-w: 1.5px;
  background: var(--k-bg); color: var(--k-text);
  border: var(--k-border-w) solid var(--k-line); border-radius: var(--k-r);
  padding: var(--s3); display: grid; gap: var(--s3);
  font-family: var(--k-font);
  transition: all var(--t-move) var(--ease-out);
}
.studio-kit[data-kit="editorial"] {
  --k-bg: #FBF7F0; --k-text: #2A2320; --k-muted: #6E6259;
  --k-line: #E4D9CB; --k-accent: #8C4A32; --k-accent-text: #FBF7F0;
  --k-r: 18px; --k-font: var(--font-serif); --k-head: var(--font-serif);
  --k-shadow: 0 12px 32px -16px rgba(80,60,40,.35); --k-border-w: 1px;
}
.studio-kit[data-kit="brutal"] {
  --k-bg: #F5F5F0; --k-text: #000; --k-muted: #333;
  --k-line: #000; --k-accent: #FFE600; --k-accent-text: #000;
  --k-r: 0px; --k-font: var(--font-mono); --k-head: var(--font-mono);
  --k-shadow: 6px 6px 0 #000; --k-border-w: 2.5px;
}
:root[data-theme="dark"] .studio-kit[data-kit="editorial"] { --k-bg:#241E19; --k-text:#F2E9DD; --k-muted:#B3A493; --k-line:#463B30; --k-accent:#D98E6B; --k-accent-text:#241E19; }
:root[data-theme="dark"] .studio-kit[data-kit="brutal"] { --k-bg:#111; --k-text:#F5F5F0; --k-muted:#CCC; --k-line:#F5F5F0; --k-accent:#FFE600; --k-shadow:6px 6px 0 #F5F5F0; }

.kit-nav { display: flex; align-items: center; gap: var(--s2); border-bottom: var(--k-border-w) solid var(--k-line); padding-bottom: var(--s2); flex-wrap: wrap; }
.kit-nav .logo { font-family: var(--k-head); font-weight: 700; }
.kit-nav a { color: var(--k-muted); text-decoration: none; font-size: var(--step--1); }
.kit-nav a:hover { color: var(--k-text); }
.kit-body { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.kit-card {
  border: var(--k-border-w) solid var(--k-line); border-radius: var(--k-r);
  padding: var(--s3); box-shadow: var(--k-shadow); background: var(--k-bg);
  display: grid; gap: var(--s1);
}
.kit-card h4 { font-family: var(--k-head); font-size: var(--step-1); }
.kit-card p { font-size: var(--step--1); color: var(--k-muted); line-height: 1.55; }
.kit-form { display: grid; gap: var(--s2); }
.kit-input {
  min-height: 44px; padding: 0 var(--s2); width: 100%;
  border: var(--k-border-w) solid var(--k-line); border-radius: var(--k-r);
  background: var(--k-bg); color: var(--k-text); font-family: var(--k-font);
}
.kit-input::placeholder { color: var(--k-muted); }
.kit-btn {
  min-height: 44px; padding: 0 var(--s3); justify-self: start;
  border: var(--k-border-w) solid transparent; border-radius: var(--k-r);
  background: var(--k-accent); color: var(--k-accent-text);
  font-family: var(--k-font); font-weight: 620; font-size: var(--step--1); cursor: pointer;
  box-shadow: var(--k-shadow);
  transition: transform var(--t-micro) var(--ease-out);
}
.studio-kit[data-kit="brutal"] .kit-btn { border-color: #000; }
:root[data-theme="dark"] .studio-kit[data-kit="brutal"] .kit-btn { border-color: var(--k-line); }
.kit-btn:hover { transform: translateY(-1px); }
.kit-btn:active { transform: translateY(1px); }

/* ════════════════════════════════════════════════════════════════════
   SHEET 13 — COLOPHON
   ════════════════════════════════════════════════════════════════════ */
.colophon { border-top: 1.5px solid var(--draft); }
.colo-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.colo-grid ul { list-style: none; padding: 0; display: grid; gap: var(--s0); font-size: var(--step--1); }
.colo-grid li { display: flex; gap: var(--s1); align-items: baseline; }
.colo-grid li::before { content: "—"; color: var(--draft); font-family: var(--font-mono); }
.egg-zone { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.stamp {
  display: none; font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink);
  border: 2px solid var(--accent-ink); border-radius: 4px; padding: var(--s1) var(--s2);
  rotate: -3deg; user-select: none;
}
html.grid-on .stamp { display: inline-block; animation: stampIn 300ms var(--ease-out); }
@keyframes stampIn { from { scale: 1.6; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .stamp { animation: none; } }
.trail-dot {
  position: fixed; z-index: 250; pointer-events: none;
  font-family: var(--font-mono); font-size: 12px; color: var(--draft);
  translate: -50% -50%; opacity: 0.8;
  animation: trailFade 900ms var(--ease-out) forwards;
}
@keyframes trailFade { to { opacity: 0; scale: 0.4; } }

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .anatomy-row { grid-template-columns: 1fr; gap: var(--s1); }
  .anatomy-row .lead { display: none; }
  .lane { grid-template-columns: 110px 1fr 52px; }
  .topbar nav { display: none; }
  .scale-row { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 420px) {
  .lane { grid-template-columns: 1fr; gap: 6px; }
  .lane .ms { text-align: left; }
  .titleblock h2 { font-size: var(--step-2); }
}

/* motion off = still a complete page */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.js .hero h1 .c { opacity: 1; translate: none; rotate: none; animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   SHEET 4 — HIERARCHY & THE SQUINT TEST
   base state of .hier-card = deliberately undesigned; each .sN class
   layers exactly one principle on top, in teaching order
   ════════════════════════════════════════════════════════════════════ */
.hier-wrap { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; margin-top: var(--s3); }
.hier-card {
  border: 1px solid var(--line); background: var(--bg); padding: var(--s3);
  max-width: 480px; transition: filter var(--t-move) var(--ease-out);
}
.hier-card.squint { filter: blur(5px); }
.hier-card > * {
  font-family: var(--font-serif); font-weight: 420; font-size: 16px; line-height: 1.5;
  text-align: center; margin: 3px 0; color: var(--text); letter-spacing: normal;
  text-transform: none; max-width: none;
  transition: all var(--t-move) var(--ease-out);
}
.hc-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.hc-btn {
  background: none; border: 1px solid var(--line); color: var(--text);
  padding: 0 14px; min-height: 44px; cursor: pointer;
  font: inherit; transition: all var(--t-move) var(--ease-out);
}
/* + alignment */
.hier-card.s1 > * { text-align: left; }
.hier-card.s1 .hc-actions { justify-content: flex-start; }
/* + proximity */
.hier-card.s2 .hc-eyebrow { margin-bottom: 0; }
.hier-card.s2 .hc-title   { margin-bottom: 0; }
.hier-card.s2 .hc-meta    { margin-bottom: 18px; }
.hier-card.s2 .hc-body    { margin-bottom: 14px; }
.hier-card.s2 .hc-stat    { margin-bottom: 22px; }
/* + scale & weight */
.hier-card.s3 .hc-eyebrow { font: 560 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.hier-card.s3 .hc-title   { font: 640 24px/1.2 var(--font-mono); letter-spacing: -0.02em; }
.hier-card.s3 .hc-meta    { font: 400 13px var(--font-ui); }
.hier-card.s3 .hc-body    { font-size: 15px; line-height: 1.6; }
.hier-card.s3 .hc-stat    { font: 640 15px var(--font-mono); }
.hier-card.s3 .hc-btn     { font: 560 14px var(--font-ui); }
/* + contrast with intent */
.hier-card.s4 .hc-eyebrow { color: var(--draft); }
.hier-card.s4 .hc-meta    { color: var(--muted); }
.hier-card.s4 .hc-stat    { color: var(--glow); }
.hier-card.s4 .hc-btn     { border-radius: var(--r0); }
.hier-card.s4 .hc-btn--primary { background: var(--signal); border-color: transparent; color: #14171C; font-weight: 620; }
.hier-note { min-height: 3.2em; }

/* ════════════════════════════════════════════════════════════════════
   SHEET 7 addendum — THUMB ZONE
   ════════════════════════════════════════════════════════════════════ */
.thumb-wrap { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: center; }
.thumb-phone { max-width: 230px; margin-inline: auto; }
.thumb-legend { display: grid; gap: var(--s1); font-size: var(--step--1); }
.thumb-legend li { display: flex; gap: var(--s1); align-items: baseline; list-style: none; }
.thumb-legend .key { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; translate: 0 2px; }
.thumb-legend ul { padding: 0; margin: 0; display: grid; gap: var(--s1); }

/* ════════════════════════════════════════════════════════════════════
   SHEET 6 addendum — I18N STRESS TEST
   ════════════════════════════════════════════════════════════════════ */
.i18n-card {
  border: 1px solid var(--line); background: var(--bg); border-radius: var(--r0);
  padding: var(--s3); max-width: 460px; margin-top: var(--s3);
  display: grid; gap: var(--s2); font-family: var(--font-ui);
}
.i18n-card h4 { font-size: var(--step-0); font-family: var(--font-ui); font-weight: 620; }
.i18n-card .switch { min-height: 44px; }
.i18n-card[dir="rtl"] { text-align: right; }

/* ════════════════════════════════════════════════════════════════════
   SHEET 10 — FORMS
   ════════════════════════════════════════════════════════════════════ */
.vfield { display: grid; gap: 6px; max-width: 420px; margin-top: var(--s3); }
.vfield label { font-family: var(--font-ui); font-size: var(--step--1); font-weight: 560; }
.vfield input {
  min-height: 48px; padding: 0 var(--s2); width: 100%;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r0);
  font-family: var(--font-ui); font-size: var(--step-0);
  transition: border-color var(--t-micro) var(--ease-out), box-shadow var(--t-micro) var(--ease-out);
}
.vfield input:hover { border-color: var(--draft); }
.vfield input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vfield.is-bad input { border-color: #C33212; }
.vfield.is-good input { border-color: var(--glow); }
.vmsg { font-family: var(--font-ui); font-size: var(--step--1); min-height: 1.5em; }
.vfield.is-bad .vmsg { color: var(--accent-ink); }
.vfield.is-good .vmsg { color: var(--glow); }

.pw-row { display: flex; gap: var(--s0); align-items: stretch; max-width: 420px; }
.pw-row input { flex: 1; min-width: 0; }
.pw-row .iconbtn { height: auto; }
.pw-checks { list-style: none; padding: 0; margin: var(--s2) 0 0; display: grid; gap: 6px; font-family: var(--font-ui); font-size: var(--step--1); color: var(--muted); }
.pw-checks li { display: flex; gap: var(--s1); align-items: baseline; transition: color var(--t-micro); }
.pw-checks li::before { content: "○"; font-family: var(--font-mono); }
.pw-checks li.ok { color: var(--glow); }
.pw-checks li.ok::before { content: "●"; }

.label-duel { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: var(--s3); }
.label-duel .vfield { margin-top: 0; }
.label-duel .verdict-tag { justify-self: start; }

/* ════════════════════════════════════════════════════════════════════
   SHEET 12 — DATA IS INTERFACE
   ════════════════════════════════════════════════════════════════════ */
.chart-stage { position: relative; margin-top: var(--s3); }
.chart-stage svg { width: 100%; height: auto; }
.chart-stage text { font-family: var(--font-mono); }
.chart-title { font-family: var(--font-ui); font-weight: 620; font-size: var(--step-0); margin-bottom: 2px; }
.chart-sub { font-size: var(--step--1); color: var(--muted); font-family: var(--font-ui); margin-bottom: var(--s2); }
.bar-clean { cursor: pointer; }
.bar-clean:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: 12px; padding: 5px 9px; border-radius: 3px;
  border-left: 3px solid var(--phosphor);
  translate: -50% calc(-100% - 10px);
  opacity: 0; transition: opacity var(--t-micro) var(--ease-out);
  white-space: nowrap;
}
.chart-tip.is-on { opacity: 1; }

.pre-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px;
  max-width: 480px; margin-top: var(--s3);
  font-family: var(--font-mono); font-size: var(--step--1);
}
.pre-cell {
  display: grid; place-items: center; aspect-ratio: 1.4;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg);
  transition: all var(--t-move) var(--ease-out);
}
.pre-grid.lit .pre-cell.target { background: var(--signal); color: #14171C; font-weight: 700; border-color: transparent; scale: 1.08; }
@media (max-width: 480px) { .pre-grid { grid-template-columns: repeat(5, 1fr); } }

/* ════════════════════════════════════════════════════════════════════
   SHEET 14 — DARK PATTERNS, NAMED
   ════════════════════════════════════════════════════════════════════ */
.dp-grid { display: grid; gap: var(--s4); }
.dp-spec { display: grid; gap: var(--s2); }
.dp-stage { display: grid; place-items: center; padding: var(--s3) var(--s2); background: var(--card-2); border-radius: var(--r0); }
.dp-modal {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r1);
  padding: var(--s3); max-width: 340px; width: 100%;
  box-shadow: var(--shadow); font-family: var(--font-ui);
  display: grid; gap: var(--s1);
}
.dp-modal h4 { font-family: var(--font-ui); font-size: var(--step-1); }
.dp-modal p { font-size: var(--step--1); color: var(--muted); }
.dp-modal .dp-actions { display: grid; gap: var(--s1); margin-top: var(--s1); }
.dp-shame {
  background: none; border: none; cursor: pointer;
  font-size: 11px; color: #B9C0CB; text-decoration: underline; padding: 6px; min-height: 32px;
}
:root[data-theme="dark"] .dp-shame { color: #4A5260; }
.dp-cart { font-family: var(--font-ui); font-size: var(--step--1); display: grid; gap: var(--s1); width: 100%; max-width: 340px; }
.dp-cart .row { display: flex; justify-content: space-between; gap: var(--s2); align-items: center; }
.dp-cart .row.total { border-top: 1.5px solid var(--line); padding-top: var(--s1); font-weight: 640; }
.dp-cart label { display: flex; gap: 8px; align-items: center; min-height: 44px; cursor: pointer; }
.dp-cart input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--signal); }
.dp-urgency { display: grid; gap: var(--s1); justify-items: center; font-family: var(--font-ui); text-align: center; }
.dp-count { font-family: var(--font-mono); font-size: var(--step-3); font-weight: 640; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.dp-name { color: var(--accent-ink); }
.dp-spec[data-honest="true"] .dp-name { color: var(--glow); }

/* ════════════════════════════════════════════════════════════════════
   SHEET 11 addendum — DOHERTY LATENCY DIAL
   ════════════════════════════════════════════════════════════════════ */
.lat-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.lat-btn { position: relative; }
.lat-btn .tickmark { color: var(--glow); font-family: var(--font-mono); opacity: 0; transition: opacity 120ms var(--ease-out); }
.lat-btn.done .tickmark { opacity: 1; }

/* ════════════════════════════════════════════════════════════════════
   SHEET 16 addendum — TOKEN INSPECTOR
   ════════════════════════════════════════════════════════════════════ */
.tok-table { display: grid; gap: 4px; margin-top: var(--s3); }
.tok-row {
  display: grid; grid-template-columns: minmax(120px, 180px) 1fr auto; gap: var(--s2);
  align-items: center; font-family: var(--font-mono); font-size: var(--step--2);
  padding: 5px 0; border-bottom: 1px dashed var(--line);
}
.tok-row .tok-name { color: var(--draft-strong); }
.tok-row .tok-val { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tok-row .tok-chip { width: 20px; height: 20px; border-radius: 4px; border: 1px solid var(--line); }
@media (max-width: 480px) { .tok-row { grid-template-columns: minmax(90px, 120px) 1fr auto; } }