/* ==========================================================================
   page.css — layout and components. Uses ONLY tokens from theme.css.
   Restyle via theme.css; edit this file only to change structure.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--space-m); }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body);
  font-feature-settings: "kern", "liga"; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--color-accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--color-accent-hover); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; }
code, var { font-family: var(--font-mono); font-size: 0.92em; font-style: normal; }
var { font-family: var(--font-body); font-style: italic; font-size: 1em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--color-ink); color: var(--color-paper); padding: var(--space-2xs) var(--space-s); z-index: 10; }
.skip-link:focus { left: var(--space-s); }
.hint { color: var(--color-ink-muted); font-size: var(--text-sm); margin: var(--space-2xs) 0; }
.noscript { text-align: center; padding: var(--space-s); background: var(--color-paper-sunk); margin: 0; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--leading-tight); color: var(--color-ink); text-wrap: balance; letter-spacing: -0.012em; }
.toc, .kicker, .status, label, legend, button, select, input, output, .chart, .chart text, .legend, .legend-inline, .tabs, .hint, figcaption, .tooltip, .compare, .stats dt, .stats dd small, .limits, .chapter__rung, .prompt__label, .story__label, .note-instructor summary, .life__story, .game__top, .game__who, .refs, .methods__list, .colophon, .ladder__d { font-family: var(--font-ui); }
h2 { font-size: var(--text-xl); margin: 0 0 var(--space-m); letter-spacing: -0.005em; }
h3 { font-size: var(--text-lg); margin: var(--space-l) 0 var(--space-xs); }
h4 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 600; margin: var(--space-s) 0 var(--space-3xs); }
p { margin: 0 0 var(--space-s); text-wrap: pretty; }
ul, ol { padding-left: 1.3em; margin: 0 0 var(--space-s); }
li { margin-bottom: var(--space-3xs); }
li > ul { margin-top: var(--space-3xs); }

/* ---- Masthead ------------------------------------------------------------ */
.masthead { border-bottom: var(--border); }
.masthead__inner { position: relative; max-width: var(--wide); margin: 0 auto; padding: var(--space-xl) var(--space-m) var(--space-l); }
.kicker { font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: var(--space-xs); }
.masthead h1 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.035em; margin: 0 0 var(--space-s); font-variation-settings: "opsz" 96; }
.dek { font-size: var(--text-lg); color: var(--color-ink-soft); max-width: 42ch; line-height: 1.45; margin-bottom: var(--space-m); }
.status { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-soft); background: var(--color-paper-sunk); border-radius: 999px; padding: var(--space-3xs) var(--space-s); margin: 0; }
.status__dot { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--color-accent); flex: none; }
.theme-toggle { position: absolute; top: var(--space-m); right: var(--space-m); }

/* ---- Layout: TOC rail + content ----------------------------------------- */
.layout { max-width: var(--wide); margin: 0 auto; padding: 0 var(--space-m); }
.toc { padding: var(--space-s) 0; border-bottom: var(--border); overflow-x: auto; }
.toc__title { display: none; }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-s); white-space: nowrap; }
.toc li { margin: 0; }
.toc a { color: var(--color-ink-soft); text-decoration: none; font-size: var(--text-sm); }
.toc a:hover, .toc a[aria-current="true"] { color: var(--color-accent); }
@media (min-width: 1180px) {
  .layout { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--space-l); }
  .toc { position: sticky; top: var(--space-m); align-self: start; border-bottom: 0; padding-top: var(--space-xl); }
  .toc__title { display: block; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: var(--space-xs); }
  .toc ol { display: block; white-space: normal; border-left: var(--border); }
  .toc li { padding: var(--space-3xs) 0 var(--space-3xs) var(--space-xs); margin-left: -1px; border-left: 2px solid transparent; }
  .toc li:has(a[aria-current="true"]) { border-left-color: var(--color-accent); }
}

/* ---- Chapters --------------------------------------------------------------- */
.chapter { padding: var(--space-xl) 0 var(--space-l); border-bottom: var(--border); }
.chapter > * { max-width: var(--measure); }
.chapter--wide > * { max-width: none; }
.chapter--wide > h2, .chapter--wide > p, .chapter--wide > .lede, .chapter--wide > .chapter__rung { max-width: var(--measure); }
.chapter__rung { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-2xs); }
.lede { font-size: var(--text-lg); color: var(--color-ink-soft); }

/* Ladder: rails and rungs */
.ladder { list-style: none; padding: 0; margin: var(--space-l) 0; position: relative; }
.ladder::before, .ladder::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--color-rule-strong); }
.ladder::before { left: 1.25rem; } .ladder::after { right: 0; }
.ladder li { margin: 0; }
.ladder a { position: relative; display: grid; grid-template-columns: 2.6rem 1fr; column-gap: var(--space-s); padding: var(--space-s) var(--space-m) var(--space-s) 0; text-decoration: none; color: var(--color-ink); border-top: 2px solid var(--color-rule-strong); transition: background var(--dur-fast) var(--ease-out); }
.ladder li:last-child a { border-bottom: 2px solid var(--color-rule-strong); }
.ladder a:hover { background: var(--color-paper-sunk); }
.ladder__n { grid-row: span 2; justify-self: center; align-self: center; z-index: 1; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--color-paper); border: 2px solid var(--color-rule-strong); font-family: var(--font-display); font-weight: 600; }
.ladder a:hover .ladder__n { border-color: var(--color-accent); color: var(--color-accent); }
.ladder__t { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }
.ladder__d { color: var(--color-ink-soft); font-size: var(--text-sm); }

.assumptions { counter-reset: a; list-style: none; padding: 0; display: grid; gap: var(--space-2xs) var(--space-m); }
@media (min-width: 720px) { .assumptions { grid-template-columns: 1fr 1fr; } }
.assumptions li { counter-increment: a; position: relative; padding-left: 2rem; margin: 0; }
.assumptions li::before { content: counter(a); position: absolute; left: 0; top: 0.05em; font-family: var(--font-display); font-weight: 600; color: var(--color-accent); }

/* ---- Callouts --------------------------------------------------------------- */
.prompt, .story { background: var(--color-paper-sunk); border-radius: var(--radius-m); padding: var(--space-m); margin: var(--space-l) 0; }
.prompt__label, .story__label { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-2xs); font-weight: 600; }
.prompt ul { margin-bottom: 0; }
.story p:last-child, .prompt p:last-child { margin-bottom: 0; }
.prompt--predict { max-width: var(--measure); }
.predict__row { display: flex; align-items: center; gap: var(--space-s); flex-wrap: wrap; }
.predict__row input { width: min(320px, 60vw); }
.predict__row output { font-family: var(--font-display); font-size: var(--text-xl); min-width: 2.5ch; font-variant-numeric: tabular-nums; }
.predict__answer { margin-top: var(--space-s); }
.note-instructor { margin: var(--space-m) 0; border-top: 1px dashed var(--color-rule-strong); border-bottom: 1px dashed var(--color-rule-strong); padding: var(--space-2xs) 0; font-size: var(--text-sm); color: var(--color-ink-soft); }
.note-instructor summary { cursor: pointer; color: var(--color-ink-soft); font-weight: 600; padding: var(--space-3xs) 0; }
.note-instructor[open] summary { margin-bottom: var(--space-2xs); }

/* ---- Ingredients (rung 3) ------------------------------------------------- */
.ingredient { margin-top: var(--space-l); }
.ingredient h3 { display: flex; align-items: baseline; gap: var(--space-xs); }
.ingredient__n, .finding__n { font-family: var(--font-display); color: var(--color-accent); font-weight: 400; font-size: 0.9em; }
.two-col { display: grid; gap: var(--space-m); }
@media (min-width: 720px) { .two-col { grid-template-columns: 1fr 1.25fr; } }
.two-col h4 { margin-top: 0; }

/* ---- Figures & charts --------------------------------------------------------- */
.figure { margin: var(--space-m) 0 var(--space-l); }
figcaption { font-size: var(--text-sm); color: var(--color-ink-muted); margin-top: var(--space-2xs); max-width: var(--measure); }
.figure__controls { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-xs) var(--space-m); margin-bottom: var(--space-xs); font-size: var(--text-sm); }
.chart { position: relative; width: 100%; min-height: 220px; }
.chart--short { min-height: 170px; }
.chart--hist { min-height: 130px; margin-top: var(--space-s); }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart text { font-size: 11.5px; fill: var(--color-ink-muted); }
.chart .lbl { fill: var(--color-ink-soft); font-size: 12px; }
.chart .title { fill: var(--color-ink); font-weight: 600; font-size: 12.5px; }
.chart .grid line { stroke: var(--data-grid); stroke-width: 1; }
.chart .axis line, .chart .axis path { stroke: var(--data-axis); }
.chart .s1 { stroke: var(--data-1); } .chart .f1 { fill: var(--data-1); }
.chart .s2 { stroke: var(--data-2); } .chart .f2 { fill: var(--data-2); }
.chart .s3 { stroke: var(--data-3); } .chart .f3 { fill: var(--data-3); }
.chart .sref { stroke: var(--data-ref); stroke-dasharray: 4 3; }
.chart .fref { fill: var(--data-ref); }
.chart .ftruth { fill: var(--data-truth); }
.chart .fnever { fill: var(--data-never); stroke: var(--data-never-hatch); }
.chart .fblank { fill: var(--data-blank); }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .hover-line { stroke: var(--color-ink-muted); stroke-width: 1; }
.chart .dot { stroke: var(--color-paper); stroke-width: 2; }
.chart .band { opacity: 0.16; }
.tooltip { position: absolute; pointer-events: none; z-index: 5; background: var(--color-paper-raised); color: var(--color-ink); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-s); padding: var(--space-3xs) var(--space-2xs); font-size: var(--text-xs); line-height: 1.4; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); }
.tooltip b { font-weight: 600; }
.legend-inline { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); font-size: var(--text-sm); color: var(--color-ink-soft); margin: var(--space-2xs) 0; }
.legend-inline span { display: inline-flex; align-items: center; gap: 0.4em; }
.legend-inline i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.legend-inline i.s1 { background: var(--data-1); } .legend-inline i.s2 { background: var(--data-2); } .legend-inline i.s3 { background: var(--data-3); }
.legend-inline i.sref { background: repeating-linear-gradient(90deg, var(--data-ref) 0 4px, transparent 4px 7px); }
.legend-inline i.dot { width: 9px; height: 9px; border-radius: 50%; }

/* ---- Form controls ----------------------------------------------------------- */
label { display: inline-flex; flex-direction: column; gap: var(--space-3xs); font-size: var(--text-sm); color: var(--color-ink-soft); }
select, input[type="number"] { font: inherit; font-size: var(--text-sm); color: var(--color-ink); background: var(--color-paper-raised); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-s); padding: 0.35em 0.5em; min-height: 2.25rem; }
input[type="range"] { accent-color: var(--color-accent); width: 100%; min-width: 140px; }
output { font-variant-numeric: tabular-nums; color: var(--color-ink); }
label:has(> input[type="range"]) { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-2xs); }
label:has(> input[type="range"]) > input { grid-column: 1; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-muted); padding: 0; margin-bottom: var(--space-2xs); }
.seg { display: inline-flex; flex-direction: column; }
.seg label { flex-direction: row; align-items: center; display: inline-flex; gap: 0.3em; margin-right: var(--space-xs); color: var(--color-ink); }
.seg legend { margin-bottom: var(--space-3xs); }
.btn { font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; border-radius: var(--radius-s); padding: 0.45em 1em; min-height: 2.25rem; border: 1px solid var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn--ghost, .theme-toggle { background: transparent; color: var(--color-accent); }
.btn--ghost:hover { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.theme-toggle { font: inherit; font-size: var(--text-xs); cursor: pointer; border: var(--border); border-radius: 999px; padding: 0.3em 0.9em; color: var(--color-ink-soft); }
.btn[disabled] { opacity: 0.5; cursor: progress; }

/* ---- Game (rung 1) ------------------------------------------------------------- */
.widget { margin: var(--space-l) 0; border: var(--border); border-radius: var(--radius-m); padding: var(--space-m); background: var(--color-paper-raised); }
.widget__fallback { color: var(--color-ink-muted); margin: 0; }
.game__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs); }
.game__age { font-size: var(--text-sm); color: var(--color-ink-muted); }
.game__card { display: flex; align-items: baseline; gap: var(--space-s); margin: var(--space-s) 0; }
.game__score { font-family: var(--font-display); font-size: clamp(3rem, 2rem + 4vw, 4.5rem); line-height: 1; font-variant-numeric: tabular-nums; }
.game__who { color: var(--color-ink-soft); }
.game__actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.game__strip { margin-top: var(--space-m); }
.game__result { margin-top: var(--space-s); }
.game__result p { margin-bottom: var(--space-2xs); }

/* ---- Explorer (rung 4) ----------------------------------------------------------- */
.explorer { display: grid; gap: var(--space-m) var(--space-l); margin-top: var(--space-m); }
.explorer__controls { display: grid; gap: var(--space-m); align-content: start; }
.explorer__controls fieldset { display: grid; gap: var(--space-xs); }
.explorer__controls select { width: 100%; }
.explorer__prior { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
.explorer__prior .hint { grid-column: 1 / -1; margin: 0; }
.explorer__prior[data-disabled] label { opacity: 0.45; }
@media (min-width: 760px) { .explorer { grid-template-columns: minmax(220px, 250px) minmax(0, 1fr); } .explorer__life { grid-column: 1 / -1; } }
.explorer__board { display: grid; gap: var(--space-xs) var(--space-l); align-content: start; min-width: 0; }
@media (min-width: 1000px) {
  .explorer__board { grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); grid-template-areas: "head head" "board stats" "board hist" "legend hist"; }
  .explorer__board > .board-head { grid-area: head; } .explorer__board > .board { grid-area: board; }
  .explorer__board > .legend { grid-area: legend; } .explorer__board > .stats { grid-area: stats; margin-top: 0; }
  .explorer__board > .chart--hist { grid-area: hist; margin-top: 0; }
}
.explorer__life { border-top: var(--border); padding-top: var(--space-m); }

.board-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-xs); }
.tabs { display: flex; gap: var(--space-3xs); border-bottom: var(--border); }
.tabs button { font: inherit; font-size: var(--text-sm); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: var(--space-3xs) var(--space-2xs); color: var(--color-ink-soft); cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--color-ink); border-bottom-color: var(--color-accent); font-weight: 600; }
.toggle { flex-direction: row; align-items: center; gap: 0.35em; }
.board { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; max-width: 380px; width: 100%; }
.cell { aspect-ratio: 1; border: 0; border-radius: 3px; padding: 0; cursor: pointer; background: var(--data-never); transition: transform var(--dur-fast) var(--ease-out); }
.cell:hover { transform: scale(1.12); z-index: 1; }
.cell.never { background: repeating-linear-gradient(45deg, var(--data-never) 0 3px, var(--data-never-hatch) 3px 4px); }
.cell[aria-pressed="true"] { outline: 2px solid var(--color-ink); outline-offset: 1px; }
.cell.enter { animation: cell-in 360ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 4ms); }
@keyframes cell-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2xs) var(--space-s); margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-ink-soft); max-width: 420px; }
.legend__ramp { display: inline-flex; align-items: center; gap: 0.4em; }
.legend__ramp span.bar { display: inline-block; width: 110px; height: 10px; border-radius: 2px; }
.legend__sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -2px; margin-right: 0.3em; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s) var(--space-m); margin: var(--space-m) 0 0; }
.stats div { margin: 0; }
.stats dt { font-size: var(--text-xs); color: var(--color-ink-muted); }
.stats dd { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.stats dd small { display: block; font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-ink-muted); }
.delta-up { color: var(--color-ink-soft); }

.explorer__life { min-width: 0; }
.life__empty { color: var(--color-ink-muted); border: 1px dashed var(--color-rule-strong); border-radius: var(--radius-m); padding: var(--space-l) var(--space-m); text-align: center; }
.life__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2xs); align-items: baseline; }
.life__title { font-family: var(--font-display); font-size: var(--text-lg); margin: 0; }
.life__story { color: var(--color-ink-soft); font-size: var(--text-sm); margin: var(--space-2xs) 0; min-height: 3em; }
.life__controls { display: flex; align-items: center; gap: var(--space-xs); margin: var(--space-2xs) 0; }
.life__controls input[type="range"] { flex: 1; }
.life__belief { margin-top: var(--space-xs); }

/* ---- Findings --------------------------------------------------------------------- */
.finding { padding: var(--space-l) 0; border-top: var(--border); }
.finding:first-of-type { border-top: 0; }
.finding h3 { margin-top: 0; font-size: var(--text-lg); max-width: 40ch; }
.finding__body { display: grid; gap: var(--space-m); }
@media (min-width: 900px) { .finding__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } .finding__body--text { grid-template-columns: minmax(0, var(--measure)); } }
.finding__text { max-width: var(--measure); }
.figure--finding { margin: 0; }

/* ---- Sandbox -------------------------------------------------------------------------- */
.sandbox { display: grid; gap: var(--space-l); margin-top: var(--space-m); }
@media (min-width: 900px) { .sandbox { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); } }
.sandbox__controls { display: grid; gap: var(--space-m); align-content: start; }
.sandbox__controls fieldset { display: grid; gap: var(--space-xs); }
.sandbox__controls label { width: 100%; }
.sandbox__out { min-width: 0; }
.compare { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin: var(--space-s) 0; font-variant-numeric: tabular-nums; }
.compare th, .compare td { text-align: left; padding: var(--space-3xs) var(--space-xs) var(--space-3xs) 0; border-bottom: var(--border); }
.compare th { color: var(--color-ink-muted); font-weight: 400; }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: right; }
.sandbox__boards { display: flex; flex-wrap: wrap; gap: var(--space-l); }
.sandbox__boards > div { flex: 1 1 260px; min-width: 0; }
.sandbox__boards h4 { margin-top: 0; }
.sandbox__boards .board { max-width: 300px; }

/* ---- Limits, takeaways, questions -------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin: var(--space-m) 0; max-width: none !important; }
.limits { border-collapse: collapse; font-size: var(--text-sm); min-width: 640px; }
.limits caption { text-align: left; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-muted); padding-bottom: var(--space-2xs); }
.limits th, .limits td { text-align: left; vertical-align: top; padding: var(--space-xs) var(--space-s) var(--space-xs) 0; border-bottom: var(--border); }
.limits thead th { font-size: var(--text-xs); color: var(--color-ink-muted); font-weight: 600; border-bottom-color: var(--color-rule-strong); }
.limits tbody th { font-weight: 600; width: 26%; }
.limits td:last-child { color: var(--color-ink-soft); width: 26%; }
.takeaways li, .questions li { margin-bottom: var(--space-s); }
.coming { margin-top: var(--space-l); padding: var(--space-m); border: 1px dashed var(--color-rule-strong); border-radius: var(--radius-m); }
.coming h3 { margin-top: 0; }

/* ---- References & methods -------------------------------------------------------------------- */
.refs { list-style: none; padding: 0; font-size: var(--text-sm); }
.refs li { padding-left: 1.5em; text-indent: -1.5em; margin-bottom: var(--space-2xs); }
.refs li:target { background: var(--color-accent-soft); }
.cite { white-space: nowrap; }
.methods { margin-top: var(--space-xl); }
.methods__list { font-size: var(--text-sm); display: grid; gap: var(--space-2xs) var(--space-m); }
@media (min-width: 720px) { .methods__list { grid-template-columns: 9em 1fr; } }
.methods__list dt { font-weight: 600; }
.methods__list dd { margin: 0; color: var(--color-ink-soft); }

.colophon { max-width: var(--wide); margin: 0 auto; padding: var(--space-l) var(--space-m) var(--space-xl); font-size: var(--text-xs); color: var(--color-ink-muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}
@media print {
  .toc, .theme-toggle, .explorer__controls, .sandbox, .figure__controls, .btn { display: none !important; }
  .chapter { break-inside: avoid-page; }
}

/* ---- v2: derivation widgets (Part 1.3) ---------------------------------------------------------------- */
.derive { margin: var(--space-m) 0 var(--space-l); }
.derive__controls { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m); align-items: end; margin-bottom: var(--space-s); }
.derive__controls label { min-width: 200px; }
.seats { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; max-width: 560px; }
.seat { aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius-s); border: 1px solid var(--color-rule-strong); background: var(--color-paper-raised); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.seat--look { background: var(--data-truth); }
.seat--before { border-style: dashed; }
.seat--best { background: var(--data-2); border-color: var(--data-2); color: var(--color-paper); font-weight: 600; }
.seat--pick { outline: 3px solid var(--data-1); outline-offset: 1px; }
.derive__text { margin-top: var(--space-s); }
.sumtable { border-collapse: collapse; font-family: var(--font-ui); font-size: var(--text-sm); font-variant-numeric: tabular-nums; margin: var(--space-s) 0; }
.sumtable th, .sumtable td { padding: var(--space-3xs) var(--space-s) var(--space-3xs) 0; border-bottom: var(--border); text-align: right; }
.sumtable th:first-child, .sumtable td:first-child { text-align: left; }
.sumtable th { color: var(--color-ink-muted); font-weight: 400; }
.math { font-family: var(--font-body); font-style: italic; font-size: var(--text-lg); margin: var(--space-s) 0; overflow-x: auto; }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps > li { counter-increment: step; position: relative; padding-left: 2.6rem; margin-bottom: var(--space-l); }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-paper-sunk); font-family: var(--font-display); font-weight: 600; color: var(--color-accent); }
.steps h4 { margin-top: 0; font-family: var(--font-display); font-size: var(--text-base); }

/* ---- v2: premise cards (Part 2) -------------------------------------------------------------------------- */
.premises { display: grid; gap: var(--space-s); margin: var(--space-m) 0; }
@media (min-width: 760px) { .premises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.premise { border: var(--border); border-radius: var(--radius-m); padding: var(--space-s) var(--space-m); background: var(--color-paper-raised); min-width: 0; }
.premise--hidden { border-style: dashed; }
.premise__id { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); }
.premise__text { font-weight: 600; margin: var(--space-3xs) 0 var(--space-xs); }
.premise__votes { display: flex; gap: var(--space-3xs); flex-wrap: wrap; }
.premise__votes button { font: inherit; font-family: var(--font-ui); font-size: var(--text-xs); border: 1px solid var(--color-rule-strong); background: transparent; color: var(--color-ink-soft); border-radius: 999px; padding: 0.2em 0.8em; cursor: pointer; }
.premise__votes button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.premise__model { margin: var(--space-xs) 0 0; font-size: var(--text-sm); color: var(--color-ink-soft); }
.premise__model strong { color: var(--color-ink); }
/* once revealed, each card shows whether our models loosen the premise or keep it (colour + the word in the text) */
.premise.is-revealed[data-status="loosen"] { border-color: var(--status-loosen); background: var(--status-loosen-bg); }
.premise.is-revealed[data-status="keep"] { border-color: var(--status-keep); background: var(--status-keep-bg); }
.premise.is-revealed[data-status="loosen"] .premise__model strong { color: var(--status-loosen); }
.premise.is-revealed[data-status="keep"] .premise__model strong { color: var(--status-keep); }
.premise-key { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-ink-soft); margin: 0 0 var(--space-s); }
.premise-key span { display: inline-flex; align-items: center; gap: var(--space-3xs); }
.premise-key i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 2px solid; }
.premise-key i.loosen { border-color: var(--status-loosen); background: var(--status-loosen-bg); }
.premise-key i.keep { border-color: var(--status-keep); background: var(--status-keep-bg); }

/* ---- v2: parts and "simplifying the model" box ---------------------------------------------------------------- */
.part-label { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-2xs); }
.simplify { background: var(--color-paper-sunk); border-radius: var(--radius-m); padding: var(--space-m); margin: var(--space-l) 0; }
.simplify h4 { margin-top: 0; }
.simplify table { border-collapse: collapse; font-family: var(--font-ui); font-size: var(--text-sm); width: 100%; }
.simplify th, .simplify td { text-align: left; vertical-align: top; padding: var(--space-3xs) var(--space-s) var(--space-3xs) 0; border-bottom: var(--border); }
.simplify th { color: var(--color-ink-muted); font-weight: 400; }

/* ---- v2: two-sided replay marks and legend keys ------------------------------------------------------------------- */
.chart .refused { stroke: var(--color-ink); stroke-width: 2; }
.chart .f3.band { opacity: 0.16; }
.legend-inline i.k-ref { background: var(--data-ref); width: 9px; height: 9px; border-radius: 50%; }
.legend-inline i.k-look { background: var(--data-truth); width: 14px; height: 10px; border-radius: 2px; }
.legend-inline i.k-blank { background: var(--data-blank); width: 14px; height: 10px; border-radius: 2px; }
.legend-inline i.k-1 { background: var(--data-1); width: 9px; height: 9px; border-radius: 50%; }
.legend-inline i.k-x { width: 10px; height: 10px; background: linear-gradient(45deg, transparent 42%, var(--color-ink) 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--color-ink) 42% 58%, transparent 58%); border-radius: 0; }
.assumptions li.assumption--hidden { color: var(--color-ink-muted); }
.assumptions li.assumption--hidden::before { color: var(--color-ink-muted); }

/* ==========================================================================================================
   v3 (2026-10-11): pixel polish for khyang-lab.org — tokens only (theme.css). Overrides earlier rules on purpose,
   so the original structure above stays readable.
   ========================================================================================================== */

/* ---- Overall: pixel frames and hard shadows --------------------------------------------------------------- */
.kicker, .chapter__rung, .part-label, .toc__title, .prompt__label, .story__label, .life__title { font-family: var(--font-pixel); letter-spacing: 0.06em; }
.masthead { border-bottom: 2px solid var(--color-ink); background:
  linear-gradient(var(--color-paper), var(--color-paper)) padding-box,
  repeating-linear-gradient(90deg, var(--color-ink) 0 8px, transparent 8px 12px) border-box; }
.status { border-radius: 0; box-shadow: inset 0 0 0 2px var(--color-rule-strong); }
.status__dot { border-radius: 0; width: 0.6em; height: 0.6em; }
.widget, .prompt, .story, .simplify, .coming { border-radius: 0; }
.widget { border: 2px solid var(--color-ink); box-shadow: var(--shadow-px); }
.btn { border-radius: 0; border-width: 2px; box-shadow: 3px 3px 0 var(--color-ink); transform: translate(0, 0); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--color-ink); }
.btn--ghost { box-shadow: 3px 3px 0 var(--color-rule-strong); }
.theme-toggle { border-radius: 0; border: 2px solid var(--color-rule-strong); font-family: var(--font-ui); }
select, input[type="number"] { border-radius: 0; border-width: 2px; }
.tabs button[aria-selected="true"] { border-bottom-width: 3px; }

/* ---- 5. The ladder: Part 1 → 5 visible at a glance ----------------------------------------------------------- */
.part-label { display: inline-block; padding: 0.15em 0.6em; color: var(--color-on-accent); background: var(--color-accent); box-shadow: 3px 3px 0 var(--color-ink); text-transform: uppercase; }
.ladder::before, .ladder::after { width: 4px; background: repeating-linear-gradient(180deg, var(--color-rule-strong) 0 6px, transparent 6px 10px); }
.ladder a { border-top-width: 4px; border-top-style: solid; }
.ladder li:last-child a { border-bottom-width: 4px; }
.ladder__n { border-radius: 0; border-width: 2px; font-family: var(--font-pixel); box-shadow: 2px 2px 0 var(--color-ink); }
/* rungs darken as the model gets less simplified: one step per part */
.ladder li:nth-child(1) .ladder__n { background: var(--color-paper); }
.ladder li:nth-child(2) .ladder__n { background: color-mix(in oklab, var(--color-accent-soft) 60%, var(--color-paper)); }
.ladder li:nth-child(3) .ladder__n { background: var(--color-accent-soft); }
.ladder li:nth-child(4) .ladder__n { background: color-mix(in oklab, var(--color-accent) 35%, var(--color-accent-soft)); }
.ladder li:nth-child(5) .ladder__n { background: var(--color-accent); color: var(--color-on-accent); }
/* contents: a sticky progress strip on phones; parts already passed are ticked off in both layouts */
.toc { position: sticky; top: 0; z-index: 4; background: var(--color-paper); }
.toc ol { counter-reset: none; }
.toc li { position: relative; }
.toc a::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.4em; vertical-align: 0.05em; }
.toc li:has(~ li a[aria-current="true"]) a { color: var(--color-ink-muted); }
.toc li:has(~ li a[aria-current="true"]) a::before { background: var(--color-rule-strong); }                  /* parts already passed */
.toc a[aria-current="true"] { color: var(--color-ink); font-weight: 600; }
.toc a[aria-current="true"]::before { width: auto; height: auto; content: "▶"; font-size: 0.7em; color: var(--color-accent); } /* RPG menu cursor */
@media (max-width: 1179px) {
  .toc { margin: 0 calc(-1 * var(--space-m)); padding-left: var(--space-m); padding-right: var(--space-m); border-bottom: 2px solid var(--color-ink); }
  .toc a[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--color-accent); padding-bottom: 2px; }
}
@media (min-width: 1180px) {
  .toc { background: transparent; z-index: auto; }
  .toc ol { border-left: 4px solid var(--color-rule); }
  .toc li { margin-left: -4px; border-left: 4px solid transparent; }
  .toc li:has(a[aria-current="true"]) { border-left-color: var(--color-accent); }
  .toc li:has(~ li a[aria-current="true"]) { border-left-color: var(--color-rule-strong); }
}
/* predict-first prompts and instructor notes */
.prompt--predict { border: 2px solid var(--color-ink); box-shadow: var(--shadow-px); background: var(--color-paper-raised); position: relative; }
.prompt--predict .prompt__label::before { content: "?"; display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; margin-right: 0.5em; background: var(--color-accent); color: var(--color-on-accent); font-family: var(--font-pixel); }
.note-instructor { border-top-style: dashed; border-bottom-style: dashed; border-width: 2px; }
.note-instructor summary { font-family: var(--font-pixel); letter-spacing: 0.04em; }

/* ---- 1. Life replay: chart view only (Kunhao, 2026-10-11) ---------------------------------------------------- */
.life__title { font-size: var(--text-base); }

/* ---- 2. Boards of 100 lives: pixel tiles ---------------------------------------------------------------------- */
.board { gap: 2px; padding: 4px; background: var(--board-frame); box-shadow: var(--shadow-px); }
.cell { border-radius: 0; box-shadow: inset 2px 2px 0 rgb(255 255 255 / 0.28), inset -2px -2px 0 rgb(0 0 0 / 0.18); image-rendering: pixelated; }
.cell.never { background: repeating-linear-gradient(45deg, var(--data-never) 0 3px, var(--data-never-hatch) 3px 5px); box-shadow: none; }
.cell:hover { transform: none; outline: 2px solid var(--color-paper); outline-offset: -2px; }
.cell[aria-pressed="true"] { outline: none; box-shadow: inset 0 0 0 3px var(--color-ink), inset 0 0 0 5px var(--color-paper); position: relative; z-index: 2; }
.cell:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }
.legend__sw { border-radius: 0; }
.legend__ramp span.bar { border-radius: 0; background-size: 100% 100%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1); }
.stats dd { font-family: var(--font-display); }
/* sandbox: the two boards side by side, same size, framed like two game cartridges */
.sandbox__boards { gap: var(--space-m); align-items: start; }
.sandbox__boards > div { border: 2px solid var(--color-ink); padding: var(--space-s); background: var(--color-paper-raised); box-shadow: var(--shadow-px); }
.sandbox__boards > div:first-child h4 { box-shadow: inset 0 -3px 0 var(--data-1); display: inline-block; }
.sandbox__boards > div:last-child h4 { box-shadow: inset 0 -3px 0 var(--data-ref); display: inline-block; }
.sandbox__boards .board { max-width: 280px; }

/* ---- 3. Part 1 derivation: a worked example on a blackboard ------------------------------------------------------ */
.derive { background: var(--chalk-board); color: var(--chalk-ink); padding: var(--space-m); border: 6px solid var(--chalk-board-edge); box-shadow: var(--shadow-px); }
.derive label, .derive output, .derive var { color: var(--chalk-ink); }
.derive input[type="range"] { accent-color: var(--chalk-ink); }
.derive .btn { background: var(--chalk-ink); color: var(--chalk-board); border-color: var(--chalk-ink); box-shadow: 3px 3px 0 #000; }
.derive .btn--ghost { background: transparent; color: var(--chalk-ink); }
.derive strong { color: var(--chalk-ink); }
.seat { border-radius: 0; border: 2px solid var(--chalk-line); background: transparent; color: var(--chalk-dim); font-family: var(--font-mono); }
.seat--look { background: var(--chalk-fill); background-image: conic-gradient(rgb(255 255 255 / 0.10) 25%, transparent 0 50%, rgb(255 255 255 / 0.10) 0 75%, transparent 0); background-size: 6px 6px; color: var(--chalk-ink); }
.seat--before { border-style: dashed; color: var(--chalk-ink); }
.seat--best { background: var(--data-2); border-color: var(--data-2); color: #1A1714; font-weight: 600; }
.seat--pick { outline: 3px solid var(--seq-2); outline-offset: 2px; }
.derive__text { color: var(--chalk-ink); }
.derive .table-wrap { margin: var(--space-s) 0 0; }
.derive .sumtable { color: var(--chalk-ink); font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.derive .sumtable td { white-space: nowrap; }
.derive .sumtable th { color: var(--chalk-dim); }
.derive .sumtable th, .derive .sumtable td { border-bottom: 1px dashed var(--chalk-line); }
.derive .sumtable tbody tr:last-child td { border-bottom: 2px solid var(--chalk-ink); }
.derive :focus-visible { outline-color: var(--chalk-ink); }
.steps > li::before { border-radius: 0; font-family: var(--font-pixel); background: var(--color-accent); color: var(--color-on-accent); box-shadow: 2px 2px 0 var(--color-ink); }
.math { font-family: var(--font-body); }

/* ---- 4. Part 2 premise cards: flip to reveal ------------------------------------------------------------------- */
.premises { gap: var(--space-m); }
.premise { border: 2px solid var(--color-ink); border-radius: 0; box-shadow: var(--shadow-px); position: relative; }
.premise--hidden { border-style: dashed; box-shadow: none; }
.premise__id { font-family: var(--font-pixel); }
.premise__votes button { border-radius: 0; border-width: 2px; min-height: 2rem; }
.premise.is-revealed { animation: card-flip 420ms var(--ease-out); }
.premise.is-revealed[data-status="loosen"] { border-color: var(--status-loosen); box-shadow: 4px 4px 0 var(--status-loosen); }
.premise.is-revealed[data-status="keep"] { border-color: var(--status-keep); box-shadow: 4px 4px 0 var(--status-keep); }
.premise-key i { border-radius: 0; }
@keyframes card-flip { 0% { transform: perspective(700px) rotateY(0); } 45% { transform: perspective(700px) rotateY(90deg); } 55% { transform: perspective(700px) rotateY(90deg); } 100% { transform: perspective(700px) rotateY(0); } }

@media (prefers-reduced-motion: reduce) { .premise.is-revealed { animation: none; } .btn:active { transform: none; } }
@media print { .derive { background: none; color: inherit; border: 1px solid; } }
/* sliders whose label contains <var>: the label flows as one sentence (the generic range-label grid split them) */
label:has(> var):has(> input[type="range"]) { display: block; min-width: min(260px, 100%); }
label:has(> var):has(> input[type="range"]) > input { display: inline-block; vertical-align: middle; width: calc(100% - 3em); min-width: 0; margin: var(--space-3xs) 0 0; }
label:has(> var):has(> input[type="range"]) > output { display: inline-block; width: 2.5em; text-align: right; vertical-align: middle; font-family: var(--font-mono); }
@media (max-width: 560px) {
  .derive { padding: var(--space-s) var(--space-xs); border-width: 4px; }
  .derive .sumtable { font-size: var(--text-xs); }
  .derive .sumtable th, .derive .sumtable td { padding-right: var(--space-2xs); }
}
/* site chrome for khyang-lab.org: the lab's prompt mark, linking back to the blog list */
.sitebar { display: inline-block; margin-bottom: var(--space-m); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); text-decoration: none; }
.sitebar:hover { text-decoration: underline; }