/* Raw scales from palette.mjs; -975 and -990 extend each scale darker for dark page grounds. */
:root {
  --ink-50: oklch(97.5% 0.003 285.0);
  --ink-100: oklch(94.0% 0.004 285.0);
  --ink-200: oklch(89.0% 0.006 285.0);
  --ink-300: oklch(82.0% 0.009 285.0);
  --ink-400: oklch(72.0% 0.014 285.0);
  --ink-500: oklch(64.0% 0.017 285.0);
  --ink-600: oklch(56.0% 0.017 285.0);
  --ink-700: oklch(49.0% 0.017 285.0);
  --ink-800: oklch(43.0% 0.017 285.0);
  --ink-900: oklch(38.0% 0.016 285.0);
  --ink-950: oklch(27.0% 0.015 285.0);
  --ink-975: oklch(19.5% 0.015 285.0);
  --ink-990: oklch(15% 0.015 285.0);
  --lime-50: oklch(97.5% 0.013 130.0);
  --lime-100: oklch(94.0% 0.028 130.0);
  --lime-200: oklch(89.0% 0.052 130.0);
  --lime-300: oklch(82.0% 0.089 130.0);
  --lime-400: oklch(72.0% 0.139 130.0);
  --lime-500: oklch(64.0% 0.172 130.0);
  --lime-600: oklch(56.0% 0.149 130.0);
  --lime-700: oklch(49.0% 0.132 130.0);
  --lime-800: oklch(43.0% 0.114 130.0);
  --lime-900: oklch(38.0% 0.101 130.0);
  --lime-950: oklch(27.0% 0.072 130.0);
  --lime-975: oklch(19.5% 0.072 130.0);
  --lime-990: oklch(15% 0.072 130.0);
  --blue-50: oklch(97.5% 0.011 245.0);
  --blue-100: oklch(94.0% 0.024 245.0);
  --blue-200: oklch(89.0% 0.045 245.0);
  --blue-300: oklch(82.0% 0.077 245.0);
  --blue-400: oklch(72.0% 0.120 245.0);
  --blue-500: oklch(64.0% 0.149 245.0);
  --blue-600: oklch(56.0% 0.140 245.0);
  --blue-700: oklch(49.0% 0.122 245.0);
  --blue-800: oklch(43.0% 0.108 245.0);
  --blue-900: oklch(38.0% 0.095 245.0);
  --blue-950: oklch(27.0% 0.064 245.0);
  --blue-975: oklch(19.5% 0.064 245.0);
  --blue-990: oklch(15% 0.064 245.0);
  --amber-50: oklch(97.5% 0.010 88.0);
  --amber-100: oklch(94.0% 0.021 88.0);
  --amber-200: oklch(89.0% 0.039 88.0);
  --amber-300: oklch(82.0% 0.067 88.0);
  --amber-400: oklch(72.0% 0.105 88.0);
  --amber-500: oklch(64.0% 0.130 88.0);
  --amber-600: oklch(56.0% 0.114 88.0);
  --amber-700: oklch(49.0% 0.099 88.0);
  --amber-800: oklch(43.0% 0.088 88.0);
  --amber-900: oklch(38.0% 0.077 88.0);
  --amber-950: oklch(27.0% 0.054 88.0);
  --amber-975: oklch(19.5% 0.054 88.0);
  --amber-990: oklch(15% 0.054 88.0);
  --ember-50: oklch(97.5% 0.012 42.0);
  --ember-100: oklch(94.0% 0.025 42.0);
  --ember-200: oklch(89.0% 0.047 42.0);
  --ember-300: oklch(82.0% 0.081 42.0);
  --ember-400: oklch(72.0% 0.126 42.0);
  --ember-500: oklch(64.0% 0.156 42.0);
  --ember-600: oklch(56.0% 0.168 42.0);
  --ember-700: oklch(49.0% 0.148 42.0);
  --ember-800: oklch(43.0% 0.128 42.0);
  --ember-900: oklch(38.0% 0.104 42.0);
  --ember-950: oklch(27.0% 0.067 42.0);
  --ember-975: oklch(19.5% 0.067 42.0);
  --ember-990: oklch(15% 0.067 42.0);
  --white: oklch(100% 0 0);
}

/* Fonts: self-hosted, Latin subset. Licences ship beside the files. */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-400.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/inter-var.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/jetbrains-mono-var.woff2") format("woff2"); }

/* Scale and shape tokens */
:root {
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem;
  --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem;
  --fs-24: 1.5rem; --fs-30: 1.875rem; --fs-36: 2.25rem; --fs-48: 3rem;
  --fs-hero: clamp(2.5rem, 1.4rem + 4.4vw, 4.75rem);
  --fs-big: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
  --r-1: 4px; --r-2: 8px; --r-3: 14px; --r-pill: 999px;
  --z-rail: 10;
  --measure: 66ch;
  --f-display: "Instrument Serif", Georgia, serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* Light: graphite and lime */
:root {
  color-scheme: light;
  --bg: var(--white); --surface: var(--ink-50); --surface-2: var(--ink-100); --line: var(--ink-200); --line-strong: var(--ink-300);
  --text: var(--ink-950); --text-2: var(--ink-800); --text-3: var(--ink-700);
  --accent: var(--lime-600); --accent-text: var(--lime-800); --on-accent: var(--white); --accent-soft: var(--lime-100);
  --good: var(--blue-700); --mixed: var(--amber-700); --bad: var(--ember-600); --idle: var(--ink-500);
  --tag-bad: var(--ember-700); --tag-mixed: var(--amber-800); --on-tag: var(--white);
  --code-bg: var(--ink-50); --syn-k: var(--ember-700); --syn-t: var(--blue-700); --syn-f: var(--lime-800); --syn-s: var(--amber-800); --syn-m: var(--lime-700); --syn-n: var(--amber-700); --syn-c: var(--ink-700); --syn-k2: var(--blue-800);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--ink-990); --surface: var(--ink-975); --surface-2: var(--ink-950); --line: var(--ink-900); --line-strong: var(--ink-800);
    --text: var(--ink-50); --text-2: var(--ink-300); --text-3: var(--ink-400);
    --accent: var(--lime-400); --accent-text: var(--lime-300); --on-accent: var(--lime-950); --accent-soft: var(--lime-950);
    --good: var(--blue-400); --mixed: var(--amber-400); --bad: var(--ember-400); --idle: var(--ink-400);
    --tag-bad: var(--ember-400); --tag-mixed: var(--amber-400); --on-tag: var(--ink-990);
    --code-bg: var(--ink-990); --syn-k: var(--ember-300); --syn-t: var(--blue-300); --syn-f: var(--lime-300); --syn-s: var(--amber-300); --syn-m: var(--lime-400); --syn-n: var(--amber-300); --syn-c: var(--ink-400); --syn-k2: var(--blue-200);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--ink-990); --surface: var(--ink-975); --surface-2: var(--ink-950); --line: var(--ink-900); --line-strong: var(--ink-800);
  --text: var(--ink-50); --text-2: var(--ink-300); --text-3: var(--ink-400);
  --accent: var(--lime-400); --accent-text: var(--lime-300); --on-accent: var(--lime-950); --accent-soft: var(--lime-950);
  --good: var(--blue-400); --mixed: var(--amber-400); --bad: var(--ember-400); --idle: var(--ink-400);
  --tag-bad: var(--ember-400); --tag-mixed: var(--amber-400); --on-tag: var(--ink-990);
  --code-bg: var(--ink-990); --syn-k: var(--ember-300); --syn-t: var(--blue-300); --syn-f: var(--lime-300); --syn-s: var(--amber-300); --syn-m: var(--lime-400); --syn-n: var(--amber-300); --syn-c: var(--ink-400); --syn-k2: var(--blue-200);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs-16)/1.55 var(--f-body); text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: var(--accent-text); text-underline-offset: 0.2em; }
code, pre { font-family: var(--f-mono); font-variant-ligatures: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; inset: var(--sp-2) auto auto var(--sp-2); z-index: calc(var(--z-rail) + 1); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-2); background: var(--text); color: var(--bg); }

/* Glyphs: shape carries meaning, colour repeats it */
.gl { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gl.is-fill > :first-child { fill: currentColor; stroke: none; }
.gl.is-fill .gl-in { stroke: var(--bg); stroke-width: 1.8; }
.gl.is-line .gl-in { stroke-width: 1.8; }
.t-good { --tone: var(--good); } .t-mixed { --tone: var(--mixed); } .t-bad { --tone: var(--bad); } .t-idle { --tone: var(--idle); }
.gl { color: var(--tone); }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-13); color: var(--text-2); }
.legend li { display: inline-flex; align-items: center; gap: 0.4em; }

/* Shell: a sticky bar on narrow screens, a sticky chapter rail from 1100 px */
.rail { position: sticky; top: 0; z-index: var(--z-rail); display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); background: var(--bg); border-block-end: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; font: 600 var(--fs-14)/1 var(--f-body); color: var(--text); text-decoration: none; }
.brand-mark { width: 0.75rem; height: 0.75rem; border-radius: 3px; background: var(--accent); }
.rail nav { position: relative; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.chips { display: flex; gap: var(--sp-1); }
.chips a { display: inline-flex; gap: var(--sp-1); align-items: center; min-height: 2.75rem; padding: 0 var(--sp-3); border-radius: var(--r-pill); color: var(--text-2); text-decoration: none; font-size: var(--fs-13); white-space: nowrap; }
.nv-n { font: 400 var(--fs-12)/1 var(--f-mono); color: var(--text-3); }
.chips a[aria-current] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.chips a[aria-current] .nv-n { color: var(--accent-text); }
.theme { flex: none; min-height: 2.75rem; padding: 0 var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-13); color: var(--text-2); }
.theme[hidden] { display: none; }
.main { padding: 0 var(--sp-4) var(--sp-8); max-width: 48rem; margin-inline: auto; }
@media (min-width: 1100px) {
  .shell { display: grid; grid-template-columns: 13rem minmax(0, 1fr); max-width: 90rem; margin-inline: auto; }
  .rail { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--sp-5); height: 100vh; padding: var(--sp-6) var(--sp-5); border: 0; }
  .rail nav { flex: none; overflow: visible; }
  .chips { flex-direction: column; gap: 2px; border-inline-start: 1px solid var(--line); }
  .chips a { display: grid; grid-template-columns: 1.75rem 1fr; min-height: 0; padding: var(--sp-2) var(--sp-3); margin-inline-start: -1px; border-radius: 0; border-inline-start: 1px solid transparent; }
  .chips a[aria-current] { background: none; box-shadow: none; border-color: var(--accent); }
  .theme { align-self: start; margin-block-start: auto; }
  .main { margin-inline: 0 auto; padding-inline: var(--sp-6) calc(16rem + var(--sp-6)); max-width: calc(45rem + 3 * var(--sp-6) + 16rem); }
}
.ch { scroll-margin-top: 3.75rem; }
@media (min-width: 1100px) { .ch { scroll-margin-top: 0; } }

/* Hero and chapters */
.hero { display: grid; gap: var(--sp-4); padding-block: var(--sp-8) var(--sp-7); border-block-end: 1px solid var(--line); }
.kicker { font: 500 var(--fs-12)/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
h1 { font: 400 var(--fs-hero)/1.02 var(--f-display); letter-spacing: -0.015em; text-wrap: balance; }
.dek { font-size: var(--fs-20); line-height: 1.5; color: var(--text-2); max-width: 38rem; text-wrap: pretty; }
.facts { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: var(--sp-2) var(--sp-6); margin-block-start: var(--sp-3); }
.facts div { display: grid; gap: 2px; }
.facts dt { font-size: var(--fs-12); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.facts dd { font: 500 var(--fs-20)/1.2 var(--f-mono); font-variant-numeric: tabular-nums; }
.ch { position: relative; display: grid; gap: var(--sp-5); padding-block: var(--sp-8); border-block-end: 1px solid var(--line); }
.ch > p:not([class]) { max-width: var(--measure); font-size: var(--fs-18); line-height: 1.65; text-wrap: pretty; }
.ch-n { font: 500 var(--fs-12)/1 var(--f-mono); letter-spacing: 0.06em; color: var(--accent-text); text-transform: uppercase; }
h2 { font: 400 var(--fs-big)/1.08 var(--f-display); letter-spacing: -0.01em; margin-block-start: calc(-1 * var(--sp-3)); text-wrap: balance; }
.sub { font: 400 var(--fs-30)/1.2 var(--f-display); margin-block-start: var(--sp-3); }
.roles, .flow { display: grid; gap: var(--sp-3); }
.flow { grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { .roles { grid-template-columns: repeat(3, 1fr); } .flow { grid-template-columns: repeat(4, 1fr); } }
.roles li, .flow li { display: grid; gap: var(--sp-1); align-content: start; padding: var(--sp-4); border-radius: var(--r-3); background: var(--surface); border: 1px solid var(--line); }
.roles span, .flow span { font: 500 var(--fs-12)/1 var(--f-mono); color: var(--accent-text); }
.roles b { font: 400 var(--fs-30)/1.1 var(--f-display); }
.flow b { font: 400 var(--fs-24)/1.1 var(--f-display); }
.roles p, .flow p { font-size: var(--fs-14); color: var(--text-2); }
.margin { padding: var(--sp-4); border-inline-start: 2px solid var(--accent); font-size: var(--fs-14); }
.margin-h { font: 500 var(--fs-12)/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin-block-end: var(--sp-3); }
.margin dt { font-weight: 600; }
.margin dd { color: var(--text-2); margin-block-end: var(--sp-3); }
.margin dd:last-child { margin-block-end: 0; }
@media (min-width: 1100px) {
  .margin { position: absolute; inset-inline-start: calc(100% + var(--sp-6)); inset-block-start: var(--sp-8); width: 15rem; }
  .wide { margin-inline-end: -16rem; }
}
.pull { padding-inline-start: var(--sp-5); border-inline-start: 2px solid var(--accent); max-width: 40rem; }
.pull p { font: italic 400 var(--fs-30)/1.2 var(--f-display); text-wrap: balance; }
.verdict { display: grid; gap: var(--sp-2); max-width: var(--measure); }
.verdict-k { font: 500 var(--fs-12)/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.verdict p:last-child { font-size: var(--fs-18); line-height: 1.65; }
.caveat { font-size: var(--fs-13); color: var(--text-2); }
.foot { display: grid; gap: var(--sp-2); padding-block: var(--sp-6); font-size: var(--fs-13); color: var(--text-2); max-width: var(--measure); }
@media (max-width: 560px) {
  h2 { font-size: var(--fs-36); }
  .facts { grid-template-columns: repeat(2, auto); }
  .ch { padding-block: var(--sp-7); }
}

/* Figures, plan cost cards and build cards */
.fig { display: grid; gap: var(--sp-4); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); box-shadow: 0 12px 32px -20px color-mix(in oklch, var(--text) 25%, transparent); }
.fig-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.fig-head h3 { font: 600 var(--fs-16)/1.3 var(--f-body); }
.fig > figcaption, .plan figcaption { font-size: var(--fs-13); color: var(--text-2); }
.fig > figcaption { padding-block-start: var(--sp-3); border-block-start: 1px solid var(--line); }
.fig-n { font-weight: 600; color: var(--text); margin-inline-end: var(--sp-1); }
.pstats { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.pstat { display: grid; gap: var(--sp-1); align-content: start; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-3); }
.pstat-k { font-size: var(--fs-13); color: var(--text-2); }
.pstat-v { font: 600 var(--fs-30)/1.2 var(--f-body); font-variant-numeric: tabular-nums; }
.pstat-d, .pstat-s { font-size: var(--fs-13); color: var(--text-2); }
.pstat-s b { color: var(--text); font-weight: 600; font-family: var(--f-mono); }
.group { display: grid; gap: var(--sp-3); }
.grp { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding-block-end: var(--sp-2); border-block-end: 1px solid var(--line); font: 600 var(--fs-14)/1.3 var(--f-body); }
.grp small { font: 400 var(--fs-12)/1 var(--f-mono); color: var(--text-3); white-space: nowrap; }
.cards { display: grid; gap: var(--sp-3); }
@media (min-width: 900px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-4); border-radius: var(--r-3); background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 2px 0 var(--tone); }
.card-top { display: flex; align-items: center; gap: var(--sp-2); }
.card-top .gl { font-size: var(--fs-18); }
.card-name { flex: 1; min-width: 0; font: 600 var(--fs-16)/1.3 var(--f-body); }
.score { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--f-mono); font-size: var(--fs-13); white-space: nowrap; }
.score b { font-weight: 600; font-variant-numeric: tabular-nums; }
.score small { font-size: var(--fs-12); color: var(--text-3); }
.score.is-none { color: var(--text-3); font-family: var(--f-body); font-size: var(--fs-12); }
.pips { display: inline-flex; gap: 2px; }
.pip { width: 0.5rem; height: 0.5rem; border-radius: var(--r-pill); background: linear-gradient(to right, var(--text) var(--f), transparent var(--f)); box-shadow: inset 0 0 0 1px var(--text-3); }
.card-out { font-size: var(--fs-12); font-weight: 500; letter-spacing: 0.02em; color: var(--text-2); }
.card-note { font-size: var(--fs-14); line-height: 1.5; text-wrap: pretty; }
.card-fix { font-size: var(--fs-13); color: var(--text-2); }
.mts { display: grid; gap: var(--sp-1); margin-block-start: var(--sp-1); }
.mt { display: grid; grid-template-columns: 3.5rem 1fr 4.25rem; align-items: center; gap: var(--sp-2); font-size: var(--fs-12); }
.mt-k { color: var(--text-3); }
.mt-tr { position: relative; height: 4px; border-radius: var(--r-pill); background: var(--surface-2); }
.mt-tr i { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); border-radius: inherit; background: var(--text-2); }
.mt:first-child .mt-tr i { background: var(--tone); }
.mt-v { font-family: var(--f-mono); font-variant-numeric: tabular-nums; text-align: end; color: var(--text-2); }

/* Log price chart */
.strip { --label-col: 5.5rem; position: relative; display: grid; padding-block-end: var(--sp-6); }
.strip-grid { position: absolute; inset-block: 0 var(--sp-6); inset-inline: var(--label-col) 0; pointer-events: none; }
.tick { position: absolute; inset-block: 0; inset-inline-start: var(--x); width: 1px; background: var(--line); }
.lane { position: relative; display: grid; grid-template-columns: var(--label-col) 1fr; align-items: center; border-block-end: 1px solid var(--line); }
.lane-h { justify-self: start; padding-inline-end: var(--sp-1); font: 500 var(--fs-12)/1.2 var(--f-mono); color: var(--text-2); background: var(--surface); }
.lane-tr { position: relative; height: calc(var(--rows) * 1.75rem + var(--sp-3)); }
.dot { position: absolute; inset-inline-start: var(--x); inset-block-start: calc(var(--sp-2) + var(--row) * 1.75rem + 0.875rem); translate: -50% -50%; display: flex; align-items: center; font-size: var(--fs-20); background: var(--surface); border-radius: var(--r-pill); }
.dot-lab { position: absolute; inset-inline-start: calc(100% + var(--sp-1)); white-space: nowrap; font: 600 var(--fs-12)/1 var(--f-body); color: var(--text); }
.axis { position: absolute; inset-block-end: 0; inset-inline: var(--label-col) 0; height: var(--sp-5); }
.axis span { position: absolute; inset-inline-start: var(--x); inset-block-end: 0; translate: -50% 0; font: 400 var(--fs-12)/1 var(--f-mono); color: var(--text-3); }
@media (max-width: 560px) {
  .strip { --label-col: 0rem; }
  .lane { grid-template-columns: 1fr; padding-block-start: var(--sp-2); }
  .lane-h { padding-block-end: var(--sp-1); }
  .dot-lab, .axis .minor { display: none; }
  .axis span:first-child { translate: 0 0; }
}

/* Two-traps diagram */
.forkfig { display: grid; gap: var(--sp-4); }
.ff-plan { justify-self: center; display: grid; justify-items: center; padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill); background: var(--text); color: var(--bg); }
.ff-plan b { font: 400 var(--fs-20)/1.2 var(--f-display); }
.ff-plan small { font-size: var(--fs-12); }
.ff-traps { position: relative; display: grid; gap: var(--sp-4); padding-block-start: var(--sp-5); }
.ff-traps::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 50%; width: 1px; height: var(--sp-5); background: var(--line-strong); }
@media (min-width: 760px) {
  .ff-traps { grid-template-columns: 1fr 1fr; }
  .ff-traps::after { content: ""; position: absolute; inset-block-start: var(--sp-5); inset-inline: 25%; height: 1px; background: var(--line-strong); }
}
.ff-t { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-4); border-radius: var(--r-3); border: 1px solid var(--line); background: var(--bg); }
.ff-k { font: 600 var(--fs-12)/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.ff-real .ff-k { color: var(--bad); } .ff-false .ff-k { color: var(--mixed); }
.ff-t h4 { font: 400 var(--fs-24)/1.15 var(--f-display); }
.ff-t > p:not(.ff-k) { font-size: var(--fs-14); color: var(--text-2); }
.ff-out { display: grid; gap: var(--sp-2); margin-block-start: var(--sp-2); }
@media (min-width: 560px) { .ff-out { grid-template-columns: 1fr 1fr; } }
.ff-out > span { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-2); background: color-mix(in oklch, var(--tone) 10%, transparent); font-size: var(--fs-13); font-weight: 500; }
.ff-out .gl { font-size: var(--fs-16); margin-block-start: 0.1em; }
.ff-out small { display: block; font-size: var(--fs-12); font-weight: 400; color: var(--text-2); }

/* Recipe, lessons, scoreboard */
.recipe { display: grid; gap: var(--sp-3); }
@media (min-width: 760px) { .recipe { grid-template-columns: repeat(3, 1fr); } }
.recipe li { display: grid; gap: var(--sp-1); align-content: start; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); box-shadow: inset 0 2px 0 var(--accent); }
.rc-n { font: 600 var(--fs-12)/1 var(--f-mono); color: var(--accent-text); }
.rc-step { font-size: var(--fs-13); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }
.rc-pick { font: 400 var(--fs-30)/1.1 var(--f-display); }
.rc-why { font-size: var(--fs-14); color: var(--text-2); }
.lessons { display: grid; gap: var(--sp-4); }
@media (min-width: 760px) { .lessons { grid-template-columns: 1fr 1fr; } }
.lessons li { display: flex; gap: var(--sp-3); }
.ls-n { font: 500 var(--fs-13)/1.6 var(--f-mono); color: var(--accent-text); }
.lessons h4 { font-size: var(--fs-16); font-weight: 600; }
.lessons p { color: var(--text-2); font-size: var(--fs-14); }
.board { display: grid; }
.bd { display: grid; grid-template-columns: 1.25rem 1fr auto; grid-template-areas: "m n u" ". w w" ". r s"; gap: 2px var(--sp-3); align-items: center; padding-block: var(--sp-3); border-block-start: 1px solid var(--line); }
.bd-mark { grid-area: m; display: flex; font-size: var(--fs-18); }
.bd-name { grid-area: n; font-weight: 600; font-size: var(--fs-14); }
.bd-word { grid-area: w; font-size: var(--fs-13); color: var(--text-2); }
.runs { grid-area: r; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.run { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-12); color: var(--text-2); }
.bd-score, .bd-usd { font: 500 var(--fs-13)/1 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.bd-usd { grid-area: u; text-align: end; }
.bd-score { grid-area: s; text-align: end; }
@media (min-width: 900px) {
  .bd { grid-template-columns: 1.25rem 9rem 1fr auto 6.5rem 6rem; grid-template-areas: "m n w r s u"; }
}

.pipe { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .pipe { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pipe { grid-template-columns: repeat(4, 1fr); } }
.pipe li { display: grid; gap: var(--sp-1); align-content: start; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg); }
.pl-n { font: 500 var(--fs-12)/1 var(--f-mono); color: var(--accent-text); }
.pl-step { font: 400 var(--fs-24)/1.1 var(--f-display); }
.pl-who { font: 600 var(--fs-14)/1.3 var(--f-body); }
.pl-note { font-size: var(--fs-14); color: var(--text-2); }

/* Plan excerpt: rendered preview with a Source toggle */
.plan { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); overflow: hidden; }
.plan-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border-block-end: 1px solid var(--line); }
.plan-file { font: 500 var(--fs-12)/1 var(--f-mono); color: var(--text-2); }
.seg { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg); }
.seg button { min-height: 2.75rem; padding: 0 var(--sp-4); border: 0; border-radius: var(--r-pill); background: none; color: var(--text-2); font-size: var(--fs-13); }
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.plan-body { padding: var(--sp-4); display: grid; gap: var(--sp-3); font-size: var(--fs-14); }
.plan-body[hidden] { display: none; }
.pv-ln { display: inline-block; min-width: 2.2rem; font: 400 var(--fs-12)/1 var(--f-mono); color: var(--text-3); }
.pv-h { font: 600 var(--fs-16)/1.3 var(--f-body); }
.pv-h code, .pv-p code, .pv-rule code { font-size: 0.86em; padding: 0.05em 0.35em; border-radius: var(--r-1); background: var(--surface-2); overflow-wrap: anywhere; }
.pv-p { color: var(--text-2); line-height: 1.55; }
.pv-p strong { color: var(--text); }
.pv-p.is-mark { padding: var(--sp-3); border-radius: var(--r-2); background: color-mix(in oklch, var(--mixed) 12%, transparent); box-shadow: inset 3px 0 0 var(--mixed); color: var(--text); }
.pv-rule { padding: var(--sp-3) var(--sp-4); border-inline-start: 2px solid var(--good); background: color-mix(in oklch, var(--good) 8%, transparent); border-radius: 0 var(--r-2) var(--r-2) 0; }
.pv-rule small { display: block; margin-block-start: var(--sp-1); color: var(--text-2); font-size: var(--fs-12); }
.pv-gap { color: var(--text-3); font-family: var(--f-mono); text-align: center; line-height: 1; }
.pv-code, .plan-src { position: relative; margin: 0; padding: var(--sp-3) 0; border-radius: var(--r-2); background: var(--code-bg); color: var(--text); font-size: var(--fs-13); line-height: 1.6; overflow-x: auto; border: 1px solid var(--line); }
.plan-src { border-radius: 0; border: 0; padding: var(--sp-4) 0; }
.pv-lang { position: absolute; inset-block-start: var(--sp-2); inset-inline-end: var(--sp-3); font-size: var(--fs-12); color: var(--text-3); }
@media (max-width: 560px) { .pv-lang { display: none; } }
.pv-code code, .plan-src code { display: grid; min-width: max-content; }
.cl { display: grid; grid-template-columns: 3.25rem auto auto 1fr; align-items: center; padding-inline-end: var(--sp-4); white-space: pre; }
.cl-n { padding-inline-end: var(--sp-3); text-align: end; color: var(--text-3); user-select: none; font-variant-numeric: tabular-nums; }
.cl.is-mark { background: color-mix(in oklch, var(--bad) 16%, transparent); box-shadow: inset 3px 0 0 var(--bad); }
.cl-gap { color: var(--text-3); padding-inline-start: 3.25rem; }
.ptag { display: inline-flex; align-items: center; margin-inline: var(--sp-3) var(--sp-2); padding: 0.1em 0.5em; border-radius: var(--r-pill); font: 600 var(--fs-12)/1.3 var(--f-mono); white-space: nowrap; background: var(--tag-bad); color: var(--on-tag); }
.ptag-T2 { background: var(--tag-mixed); }
.plan-src .cl.is-mark:has(.ptag-T2) { background: color-mix(in oklch, var(--mixed) 16%, transparent); box-shadow: inset 3px 0 0 var(--mixed); }
.plan-src .cl { white-space: pre-wrap; overflow-wrap: anywhere; }
.plan-src code { min-width: 0; }
.pv-p .ptag { margin-inline: 0 var(--sp-2); }
.sy-k { color: var(--syn-k); } .sy-t { color: var(--syn-t); } .sy-f { color: var(--syn-f); } .sy-s { color: var(--syn-s); }
.sy-m { color: var(--syn-m); } .sy-n { color: var(--syn-n); } .sy-c { color: var(--syn-c); font-style: italic; } .sy-k2 { color: var(--syn-k2); }
.plan figcaption { padding: var(--sp-3) var(--sp-4); border-block-start: 1px solid var(--line); }

/* Per-element values */
.sv1{--x:0.0%}
.sv2{--x:12.2%}
.sv3{--x:28.2%}
.sv4{--x:40.4%}
.sv5{--x:52.5%}
.sv6{--x:68.6%}
.sv7{--x:80.7%}
.sv8{--x:92.9%}
.sv9{--x:28.2%;--row:0}
.sv10{--x:46.3%;--row:0}
.sv11{--x:47.5%;--row:1}
.sv12{--x:62.3%;--row:0}
.sv13{--x:65.9%;--row:1}
.sv14{--rows:2}
.sv15{--x:19.3%;--row:0}
.sv16{--x:56.4%;--row:0}
.sv17{--x:57.1%;--row:1}
.sv18{--x:61.3%;--row:2}
.sv19{--rows:3}
.sv20{--f:100%}
.sv21{--f:40%}
.sv22{--f:0%}
.sv23{--w:6.5%}
.sv24{--w:4.6%}
.sv25{--w:2.0%}
.sv26{--w:7.0%}
.sv27{--w:11.2%}
.sv28{--w:9.0%}
.sv29{--w:16.4%}
.sv30{--w:6.6%}
.sv31{--w:20.1%}
.sv32{--w:18.9%}
.sv33{--w:4.3%}
.sv34{--w:2.3%}
.sv35{--w:12.4%}
.sv36{--w:8.5%}
.sv37{--w:0%}
.sv38{--w:11.7%}
.sv39{--w:24.3%}
.sv40{--w:24.0%}
.sv41{--w:12.1%}
.sv42{--w:3.3%}
.sv43{--w:15.4%}
.sv44{--w:10.4%}
.sv45{--x:11.3%;--row:0}
.sv46{--x:12.2%;--row:1}
.sv47{--x:22.0%;--row:0}
.sv48{--x:31.4%;--row:1}
.sv49{--x:45.0%;--row:1}
.sv50{--x:47.5%;--row:0}
.sv51{--x:49.7%;--row:2}
.sv52{--x:57.8%;--row:1}
.sv53{--x:64.7%;--row:0}
.sv54{--w:18.2%}
.sv55{--w:4.9%}
.sv56{--w:2.8%}
.sv57{--w:26.0%}
.sv58{--w:9.3%}
.sv59{--w:19.4%}
.sv60{--w:7.9%}
.sv61{--w:21.4%}
.sv62{--w:2.1%}
.sv63{--w:18.7%}
.sv64{--w:22.3%}
.sv65{--w:5.1%}
.sv66{--w:6.1%}
.sv67{--w:13.8%}
.sv68{--w:7.8%}
.sv69{--w:6.9%}
.sv70{--w:12.6%}
.sv71{--w:7.6%}
.sv72{--x:38.5%;--row:0}
.sv73{--x:39.1%;--row:1}
.sv74{--x:72.4%;--row:0}
.sv75{--x:83.3%;--row:0}
.sv76{--x:90.7%;--row:0}
.sv77{--x:44.8%;--row:0}
.sv78{--x:71.2%;--row:0}
.sv79{--x:73.2%;--row:1}
.sv80{--x:76.8%;--row:2}
.sv81{--x:94.1%;--row:0}
.sv82{--w:54.2%}
.sv83{--w:5.6%}
.sv84{--f:50%}
.sv85{--w:36.4%}
.sv86{--w:44.8%}
.sv87{--w:29.0%}
.sv88{--w:20.9%}
.sv89{--w:8.9%}
.sv90{--w:82.7%}
.sv91{--w:87.1%}
.sv92{--w:88.7%}
.sv93{--w:4.2%}
.sv94{--w:6.8%}
.sv95{--w:2.6%}
.sv96{--w:30.4%}
.sv97{--w:33.7%}
.sv98{--w:50.9%}
.sv99{--w:37.4%}
.sv100{--w:18.4%}
.sv101{--w:5.7%}
.sv102{--w:6.0%}
.sv103{--w:65.3%}
.sv104{--w:75.6%}
.sv105{--w:27.1%}
.sv106{--w:23.5%}
.sv107{--w:100.0%}