/* Light: a squared maths notebook. Dark: a chalkboard. Prose sits on plain paper; only drawings carry the grid. */
:root {
  --bg: #fbf8ef; --surface: #f1ecdc; --paper: #fffdf6; --text: #1a2130; --muted: #3b455b; --line: #cfc8b2;
  --pen: #18418a; --pen-soft: #dbe6f8; --red: #8f1a10; --red-soft: #f9dcd6; --green: #0f6a3d; --green-soft: #d6efe0;
  --gold: #f2c94c; --gold-soft: #fbefc4; --ball: #d4410f; --on-pen: #ffffff;
  --grid: #c9d6ea; --grid-strong: #9fb4d6; --hero-a: #fbf8ef; --hero-b: #eef3fb;
  --topbar-h: 3rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1c2e; --surface: #162639; --paper: #132338; --text: #eaf0f8; --muted: #b6c4d8; --line: #2d4460;
    --pen: #92c4ff; --pen-soft: #1d3a5e; --red: #ffa090; --red-soft: #4a2420; --green: #86e6b6; --green-soft: #17402e;
    --gold: #ffd866; --gold-soft: #4a3f17; --ball: #ff8a66; --on-pen: #0c1726;
    --grid: #223853; --grid-strong: #34557f; --hero-a: #0f1c2e; --hero-b: #132740;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1c2e; --surface: #162639; --paper: #132338; --text: #eaf0f8; --muted: #b6c4d8; --line: #2d4460;
  --pen: #92c4ff; --pen-soft: #1d3a5e; --red: #ffa090; --red-soft: #4a2420; --green: #86e6b6; --green-soft: #17402e;
  --gold: #ffd866; --gold-soft: #4a3f17; --ball: #ff8a66; --on-pen: #0c1726;
  --grid: #223853; --grid-strong: #34557f; --hero-a: #0f1c2e; --hero-b: #132740;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .001s !important; transition-duration: .001s !important; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.125rem/1.65 "Atkinson Hyperlegible Next", system-ui, sans-serif; overflow-x: hidden; }
h1, h2, h3, .big-n, .kicker { font-family: Fraunces, Georgia, serif; font-variation-settings: "SOFT" 70; }
h1, h2, h3 { line-height: 1.12; margin: 0; font-weight: 640; text-wrap: balance; }
p { margin: 0 0 1em; }
a { color: var(--pen); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .12em; }
:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; border-radius: 3px; }
.skip { position: absolute; left: .5rem; top: -4rem; background: var(--pen); color: var(--on-pen); padding: .6rem 1rem; z-index: 50; border-radius: .4rem; }
.skip:focus { top: .5rem; }
section[id], article[id] { scroll-margin-top: calc(var(--topbar-h) + .75rem); }
.wrap { max-width: 42rem; margin: 0 auto; padding: 0 1rem; }
.wrap.wide { max-width: 66rem; }
sup { font-size: .72em; line-height: 0; }
.v { font-style: italic; color: var(--pen); }
code, .mono { font-family: ui-monospace, Menlo, monospace; font-size: .92em; }

/* topbar */
.topbar { position: sticky; top: 0; z-index: 30; height: var(--topbar-h); display: flex; align-items: center; gap: .6rem; padding: 0 .9rem; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); font-size: .95rem; }
.home { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; color: var(--text); font-weight: 600; white-space: nowrap; }
.home span { display: none; }
@media (min-width: 40rem) { .home span { display: inline; } }
.homeball { color: var(--ball); }
.topnav { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a { padding: .35rem .55rem; text-decoration: none; color: var(--muted); white-space: nowrap; border-radius: .4rem; min-width: 2.75rem; min-height: 2.75rem; display: inline-grid; place-items: center; }
.topnav a:hover, .topnav a[aria-current="true"] { color: var(--text); background: var(--surface); }
.topnav a[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--pen); }
.spacer { flex: 1 0 .25rem; }
.chip-link { display: inline-grid; place-items: center; min-height: 2.75rem; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 2rem; text-decoration: none; color: var(--text); white-space: nowrap; font-size: .9rem; }
.chip-link:hover { border-color: var(--pen); }
.icon-btn { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--text); display: grid; place-items: center; cursor: pointer; flex: none; }
.icon-btn:hover { border-color: var(--pen); color: var(--pen); }
.icon-btn svg { display: block; }
.icon-btn svg[hidden] { display: none; }
.progress { position: sticky; top: var(--topbar-h); z-index: 29; height: 0; }
.progress .pfill { position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--ball); transform-origin: left; transform: scaleX(0); opacity: 0; transition: opacity .2s; }
.progress .pball { position: absolute; left: 0; top: -6px; width: 11px; height: 11px; border-radius: 50%; background: var(--ball); opacity: 0; transition: opacity .2s; will-change: transform; }
.progress.on .pfill, .progress.on .pball { opacity: 1; }

/* hero */
.hero { background: linear-gradient(180deg, var(--hero-a), var(--hero-b)); border-bottom: 1px solid var(--line); }
.hero-in { max-width: 74rem; margin: 0 auto; padding: 1.6rem 1rem 2.2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.kicker { margin: 0 0 .6rem; color: var(--red); font-size: 1.02rem; letter-spacing: .02em; font-weight: 640; }
.hero h1 { font-size: 1.95rem; font-weight: 660; }
.hero .deck { margin: .8rem 0 0; font-size: 1.15rem; color: var(--muted); max-width: 40rem; }
.hero .lede { margin: .6rem 0 0; max-width: 40rem; }
.hero-go { margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
@media (min-width: 62rem) { .hero-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; align-items: center; } .hero h1 { font-size: 2.45rem; } }

/* ladder map */
.ladder-sec { padding: 2.2rem 0 1rem; }
.ladder { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); counter-reset: step; }
.ladder li { margin: 0; }
.ladder a { display: grid; grid-template-columns: 2.6rem 1fr; gap: .15rem .7rem; align-items: center; padding: .75rem .85rem; border: 1.5px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--text); background: var(--paper); min-height: 4.4rem; }
.ladder a:hover { border-color: var(--pen); }
.ladder .n { grid-row: 1 / 3; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font: 650 1.2rem Fraunces, Georgia, serif; background: var(--pen-soft); color: var(--pen); }
.ladder b { font-weight: 640; line-height: 1.2; }
.ladder small { color: var(--muted); font-size: .88rem; line-height: 1.3; }
.ladder a[data-done="true"] .n { background: var(--green); color: var(--bg); }
.ladder a[data-done="true"] .n::after { content: ""; width: .45rem; height: .85rem; border: solid currentColor; border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-2px, -2px); }
.ladder a[data-done="true"] .n span { display: none; }

/* step sections */
.step { padding: 3rem 0 1.5rem; border-top: 1px solid var(--line); }
.step.alt { background: color-mix(in srgb, var(--surface) 55%, var(--bg)); }
.step-head { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: center; margin-bottom: 1rem; }
.big-n { grid-row: 1 / 3; width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; font-weight: 650; background: var(--red-soft); color: var(--red); border: 2px solid var(--red); }
.grades { font-size: .92rem; color: var(--muted); letter-spacing: .02em; }
.grades b { color: var(--red); font-weight: 640; }
.step h2 { font-size: 1.65rem; }
@media (min-width: 40rem) { .step h2 { font-size: 2rem; } }
.lead { font-size: 1.15rem; }
.note { margin: 1.1rem 0; padding: .7rem .95rem; border-left: 4px solid var(--gold); background: var(--gold-soft); border-radius: 0 10px 10px 0; font-size: 1rem; }
.note p:last-child { margin-bottom: 0; }
.rule-card { margin: 1rem 0; padding: .8rem 1rem; border: 2px solid var(--pen); border-radius: 14px; background: var(--pen-soft); }
.rule-card p:last-child { margin-bottom: 0; }

/* the 20-second check */
.check { margin: 1.2rem 0 1.6rem; padding: .85rem 1rem; border: 2px dashed var(--grid-strong); border-radius: 14px; background: var(--paper); }
.check .ck-h { margin: 0 0 .2rem; font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 640; }
.qtext { margin: 0 0 .6rem; font-weight: 600; }
.skip-link { margin-left: .4rem; font-weight: 640; }

/* toy layouts */
.toy { margin: 1.6rem auto; max-width: 66rem; padding: 0 1rem; }
.toy-card { padding: 1rem; background: var(--paper); border: 1.5px solid var(--line); border-radius: 18px; box-shadow: 0 2px 0 var(--line); }
.toy-card > h3 { font-size: 1.25rem; margin-bottom: .2rem; }
.toy-card > .sub { color: var(--muted); font-size: 1rem; margin-bottom: .8rem; }
.toy2 { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.toy3 { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 52rem) { .toy2 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .toy3 { grid-template-columns: 9rem minmax(0, 1.3fr) minmax(0, 1fr); } }
.toy-plane { min-width: 0; }
.toy-plane.small { margin-top: .8rem; }
.panel { min-width: 0; }
.trio { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.tri { margin: 0; }
.tri figcaption { font-size: .95rem; margin-top: .3rem; }

/* drawings */
.plane, .tiles, .balance, .track, .numline, .street { display: block; width: 100%; height: auto; max-height: 86vh; overflow: visible; }
.tiles { max-width: 26rem; margin: 0 auto; }
.track { max-width: 9rem; margin: 0 auto; }
.pl-bg { fill: var(--paper); stroke: var(--grid-strong); stroke-width: 1; }
.gl { stroke: var(--grid); stroke-width: .8; }
.gl.g5 { stroke: var(--grid-strong); stroke-width: 1; }
.axis { stroke: var(--text); stroke-width: calc(1.7px * var(--u, 1)); }
.axis-head { fill: var(--text); }
.tk { fill: var(--muted); font-size: calc(12px * var(--u, 1)); }
.axl { fill: var(--text); font-size: calc(14px * var(--u, 1)); font-style: italic; }
.lb { fill: var(--text); font-size: calc(13px * var(--u, 1)); }
.lb.strong { font-weight: 700; }
.curve { fill: none; stroke: var(--pen); stroke-width: calc(3.2px * var(--u, 1)); stroke-linecap: round; stroke-linejoin: round; }
.curve.dash { stroke-dasharray: calc(8px * var(--u, 1)) calc(7px * var(--u, 1)); stroke: var(--ball); }
.curve.faint { opacity: .45; }
.curve.boat, .seg.boat { stroke: var(--ball); stroke-width: calc(3.2px * var(--u, 1)); stroke-linecap: round; }
.boat-done .seg.boat { stroke: var(--green); }
.seg { stroke: var(--text); stroke-width: calc(2px * var(--u, 1)); }
.seg.guide { stroke: var(--muted); stroke-dasharray: 5 5; }
.seg.window { stroke: var(--green); stroke-width: calc(2.6px * var(--u, 1)); stroke-dasharray: 8 6; }
.seg.axis-m { stroke: var(--red); stroke-width: calc(2px * var(--u, 1)); stroke-dasharray: 7 6; }
.route.h { stroke: var(--pen); stroke-width: calc(3px * var(--u, 1)); stroke-dasharray: 2 6; stroke-linecap: round; }
.route.v { stroke: var(--red); stroke-width: calc(3px * var(--u, 1)); stroke-dasharray: 2 6; stroke-linecap: round; }
.stair { stroke-width: calc(3px * var(--u, 1)); }
.stair.h { stroke: var(--pen); } .stair.v { stroke: var(--red); }
.dot { fill: var(--pen); stroke: var(--paper); stroke-width: 1.5; }
.dot.root { fill: var(--green); }
.dot.vert { fill: var(--ball); }
.dot.icpt { fill: var(--gold); stroke: var(--text); }
.dot.hit { fill: var(--green); }
.dot.miss { fill: var(--red); }
.dot.ok { fill: var(--pen); }
.dot.cur { fill: var(--ball); }
.dot.mir { fill: var(--red); opacity: .8; }
.dot.ghost { fill: var(--paper); stroke: var(--red); stroke-width: 2.5; }
.dot.hov { fill: none; stroke: var(--muted); stroke-width: 2; pointer-events: none; }
.dot.flagp { fill: var(--ball); }
.ray { stroke: var(--gold); stroke-width: calc(2px * var(--u, 1)); } .ray.out { stroke: var(--ball); }
.ball { fill: var(--ball); stroke: var(--paper); stroke-width: 2; }
.zone { fill: var(--green); opacity: .55; }
.flagpole { stroke: var(--text); stroke-width: calc(2.4px * var(--u, 1)); }
.flagcloth { fill: var(--ball); stroke: var(--ball); }
.handle { fill: var(--gold); stroke: var(--text); stroke-width: 2.5; cursor: grab; touch-action: none; }
.handle.grab { cursor: grabbing; }
.handle:focus-visible { outline: none; stroke: var(--pen); stroke-width: 5; }
.handle.a { fill: var(--pen-soft); } .handle.b { fill: var(--red-soft); }
.road { stroke: var(--grid-strong); stroke-width: 6; stroke-linecap: round; }
.pl-bg:focus { outline: none; }
.plane { cursor: default; }
.tile { fill: var(--pen-soft); stroke: var(--pen); stroke-width: 1; }
.tile.A { fill: var(--pen-soft); } .tile.B { fill: var(--green-soft); stroke: var(--green); } .tile.X { fill: var(--gold-soft); stroke: var(--text); }
.tile.S { fill: var(--gold-soft); stroke: var(--text); } .tile.C { fill: var(--red-soft); stroke: var(--red); }
.tile.L0 { fill: var(--pen-soft); } .tile.L1 { fill: var(--gold-soft); stroke: var(--text); }
.xsq { fill: none; stroke: var(--pen); stroke-width: 2.5; stroke-dasharray: 8 5; }
.gap { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-dasharray: 5 4; }
.outline { fill: none; stroke: var(--green); stroke-width: 3.5; }
.tilelab { fill: var(--text); font: 700 17px "Atkinson Hyperlegible Next", sans-serif; }
.tilelab.sm { font-size: 13px; }

/* the balance */
.bal-base { fill: var(--text); } .bal-post { fill: var(--text); }
.bal-bar { fill: var(--text); } .bal-pivot { fill: var(--gold); stroke: var(--text); stroke-width: 3; }
.bal-rope { stroke: var(--muted); stroke-width: 2; } .bal-pan { fill: var(--surface); stroke: var(--text); stroke-width: 3; }
.bal-box { fill: var(--gold-soft); stroke: var(--text); stroke-width: 3; }
.bal-box.open { fill: var(--green-soft); stroke: var(--green); }
.bal-w { fill: var(--pen-soft); stroke: var(--pen); stroke-width: 2.5; }
.bal-t { font: 700 26px Fraunces, serif; fill: var(--text); } .bal-t.w { font-size: 22px; fill: var(--text); }
.machine { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0 0 .8rem; padding: .7rem; background: var(--surface); border: 2px solid var(--text); border-radius: 16px; }
.slot { min-width: 4.2rem; padding: .35rem .6rem; text-align: center; font: 650 1.7rem Fraunces, serif; border: 2px solid var(--text); border-radius: 10px; background: var(--paper); }
.slot.out { background: var(--gold-soft); }
.gear { color: var(--muted); display: inline-flex; }

/* controls */
.rng { display: grid; grid-template-columns: minmax(3.2rem, auto) 1fr minmax(4.4rem, auto); gap: .6rem; align-items: center; margin: .15rem 0; }
.rng label { font-weight: 640; }
.rng output { text-align: right; font-weight: 640; font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; min-height: 2.75rem; accent-color: var(--pen); background: transparent; }
.btn { font: inherit; font-weight: 640; min-height: 2.75rem; padding: .45rem 1.1rem; border-radius: 2rem; border: 2px solid var(--pen); background: transparent; color: var(--pen); cursor: pointer; line-height: 1.2; }
.btn:hover:not(:disabled) { background: var(--pen-soft); }
.btn.solid { background: var(--pen); color: var(--on-pen); }
.btn.solid:hover:not(:disabled) { filter: brightness(1.12); background: var(--pen); }
.btn.ghost { border-color: var(--line); color: var(--text); }
.btn.chip { min-height: 2.75rem; padding: .3rem .9rem; border-color: var(--grid-strong); color: var(--text); }
.btn.chip[data-on="true"] { background: var(--pen); color: var(--on-pen); border-color: var(--pen); }
.btn:disabled { opacity: .45; cursor: default; }
.row { display: flex; flex-wrap: wrap; gap: .55rem; margin: .5rem 0; }
.row.wrap { flex-wrap: wrap; }
.row .btn { flex: 0 1 auto; }
.seg { border: 1.5px solid var(--line); border-radius: 12px; margin: .4rem 0; padding: .2rem .6rem .5rem; }
.seg legend { padding: 0 .4rem; font-size: .92rem; color: var(--muted); font-weight: 640; }
.seglab { display: inline-flex; align-items: center; margin-right: .9rem; min-height: 2.5rem; gap: .35rem; cursor: pointer; }
.seglab input { width: 1.2rem; height: 1.2rem; accent-color: var(--pen); }
.coordform { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin: .6rem 0; }
.numf { display: grid; gap: .1rem; }
.numf label { font-size: .9rem; color: var(--muted); font-weight: 640; }
input[type="number"], input.cell, select { font: inherit; min-height: 2.75rem; width: 5.2rem; padding: .3rem .5rem; border: 2px solid var(--grid-strong); border-radius: 10px; background: var(--paper); color: var(--text); }
select { width: auto; max-width: 100%; }
input.cell { width: 4.4rem; text-align: center; }
input.cell.good { border-color: var(--green); background: var(--green-soft); }
input.cell.bad { border-color: var(--red); background: var(--red-soft); }
fieldset.pick { border: 0; padding: 0; margin: .6rem 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
fieldset.pick legend { font-weight: 640; margin-bottom: .3rem; }
.status { min-height: 1.6em; margin: .5rem 0; font-weight: 600; }
.readout { margin: .4rem 0; color: var(--muted); }
.readout.big { color: var(--text); font-size: 1.1rem; font-weight: 600; }
.hint { color: var(--muted); font-size: .98rem; }
.rule { margin: .2rem 0 .4rem; }
.eqline { margin: .6rem 0; font: 600 1.35rem/1.35 Fraunces, Georgia, serif; padding: .45rem .75rem; background: var(--surface); border-radius: 10px; overflow-wrap: anywhere; }
.eqline.big { font-size: 1.6rem; }
.eqbig { font: 650 1.5rem Fraunces, serif; }
.calc { margin: .3rem 0; padding: .45rem .75rem; background: var(--gold-soft); border-radius: 10px; font-size: 1rem; }
.facts { margin: .4rem 0; padding-left: 1.2rem; }
.facts li { margin: .15rem 0; }
.steps-log { margin: .6rem 0; padding-left: 1.5rem; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.steps-log li { margin: .2rem 0; }
.steps-log.big { font-size: 1.1rem; }
.tbl { border-collapse: collapse; margin: .6rem 0; font-variant-numeric: tabular-nums; }
.tbl caption { text-align: left; font-weight: 640; padding-bottom: .25rem; }
.tbl th, .tbl td { border: 1.5px solid var(--grid-strong); padding: .25rem .8rem; text-align: center; }
.tbl th { background: var(--surface); }
.derive { list-style: none; padding: 0; margin: .8rem 0; counter-reset: d; }
.derive li { display: grid; grid-template-columns: 1fr; gap: .1rem; padding: .55rem .8rem; margin: .4rem 0; background: var(--surface); border-radius: 12px; }
@media (min-width: 40rem) { .derive li { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1rem; align-items: center; } }
.derive .fl { font-size: 1.25rem; font-weight: 600; }
.derive .why { color: var(--muted); font-size: .98rem; }
.fr { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 .12em; font-size: .92em; line-height: 1.15; }
.fr > span:first-child { border-bottom: 1.5px solid currentColor; padding: 0 .15em .06em; }
.fr > span:last-child { padding: .06em .15em 0; }
.calcbox { margin: 1.2rem 0 0; padding: .8rem 1rem; border: 2px dashed var(--grid-strong); border-radius: 14px; }
.calcout ul { margin: .4rem 0; padding-left: 1.1rem; }
.puzzle, .worked, .quiz { margin-top: .8rem; }
.qrow { margin: .8rem 0; }
.worked ol { margin: .5rem 0; padding-left: 1.3rem; }
.worked li { margin: .3rem 0; }
.fallback { color: var(--muted); }

/* mistakes */
.mk-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.mk { padding: 1rem; border: 1.5px solid var(--line); border-radius: 16px; background: var(--paper); }
.mk h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.mk .no { color: var(--red); font-weight: 800; }
.mk .side { margin: .1rem 0; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.mk .verdict { margin: .4rem 0; font-weight: 700; }
.mk .verdict.same { color: var(--green); } .mk .verdict.diff { color: var(--red); }
.mk .why { font-size: .98rem; margin: .5rem 0 0; padding-top: .5rem; border-top: 1px dashed var(--line); }
.mk-extra { max-width: 20rem; margin-top: .4rem; }

/* adults */
.cmap { width: 100%; border-collapse: collapse; font-size: .98rem; margin: 1rem 0; }
.cmap th, .cmap td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmap th { color: var(--muted); font-weight: 640; font-size: .9rem; }
.cmap td:first-child { white-space: nowrap; font-weight: 640; }
.refs { padding-left: 1.2rem; font-size: .98rem; }
.refs li { margin: .35rem 0; }
.wrap.prose p, .wrap.prose li { max-width: 40rem; }
.foot { padding: 2rem 0 3rem; color: var(--muted); font-size: .95rem; border-top: 1px solid var(--line); }
.foot a { color: var(--muted); }
.share-wrap { margin-top: 1.5rem; }
.nf { padding: 4rem 1rem; text-align: center; }
@media (max-width: 30rem) { .topnav a { padding: .35rem .4rem; } .home { display: none; } }
.topnav .nl { display: none; margin-left: .3rem; }
@media (min-width: 70rem) { .topnav .nl { display: inline; } }
.topnav .nn { font-weight: 640; }
.sub-h { font-size: 1.3rem; margin: 2rem 0 .5rem; }
.cap { margin: .6rem 0 0; }
.cite { text-decoration: none; font-size: .8em; vertical-align: super; line-height: 0; margin-left: .1em; padding: .1em .15em; }
.cmapw { overflow-x: auto; }
.hero-t.toy { padding: 0; margin: 0; }
.hero-t .toy-card { background: color-mix(in srgb, var(--paper) 94%, transparent); }
.hero-toy .lede { margin-top: .8rem; }
.step.prose h2, .step h2 { margin-bottom: .6rem; }

.hero-t .toy2 { grid-template-columns: minmax(0, 1fr); }
.hero-t .toy-plane { max-width: 40rem; }
.status:empty { min-height: 0; margin: 0; }
.tbl caption { white-space: nowrap; }
@media (max-width: 40rem) {
  .rng { grid-template-columns: 1fr auto; gap: 0 .6rem; }
  .rng label { grid-column: 1; } .rng output { grid-column: 2; }
  .rng input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
}
.route { margin: 1rem 0 .4rem; padding: .6rem .9rem; background: var(--gold-soft); border-radius: 10px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the lesson layer: plan, trail, problem, prediction, check, step links ---------- */
.target { margin: 1rem 0 1.2rem; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.target > div { padding: .65rem .85rem; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); }
.target dt { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 640; }
.target dd { margin: .15rem 0 0; font-size: 1rem; line-height: 1.45; }
.chain-h { margin: 0 0 .4rem; font-weight: 640; }
.chain, .trail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .2rem; align-items: center; }
.chain li, .trail li { display: inline-flex; align-items: center; }
.chain li:not(:last-child)::after, .trail li:not(:last-child)::after { content: "→"; color: var(--muted); margin: 0 .2rem 0 .35rem; }
.chain a { display: inline-grid; place-items: center; min-height: 2.75rem; padding: .25rem .75rem; border-radius: 2rem; border: 1.5px solid var(--grid-strong); background: var(--paper); color: var(--text); text-decoration: none; font-size: .98rem; }
.chain a:hover { border-color: var(--pen); }
.prog-count { margin: .9rem 0 .2rem; font-weight: 640; color: var(--text); }
.prog-count:empty { display: none; }
.topnav a[data-done="true"] .nn::after { content: "✓"; margin-left: .15rem; color: var(--green); font-size: .85em; }

.trail { margin: 0 0 1rem; padding: .6rem .85rem; border-radius: 12px; background: var(--surface); font-size: .96rem; }
.trail-h { margin: 0 0 .3rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 640; }
.trail a { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; padding: 0 .2rem; text-decoration: none; }
.trail a .tl { text-decoration: underline; text-underline-offset: .18em; }
.trail li[aria-current] { font-weight: 700; min-height: 2.75rem; }
.trail li.base { color: var(--muted); font-style: italic; }
.trail .tn { display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--bg); color: var(--text); border: 1.5px solid var(--pen); font-weight: 700; font-size: .85rem; font-style: normal; }
.trail li[aria-current] .tn { background: var(--bg); color: var(--text); border-color: var(--red); border-width: 2.5px; }
.trail-hint { margin: .25rem 0 0; color: var(--muted); font-size: .9rem; }

.frame { margin: 0 0 1.2rem; padding: .9rem 1rem; border-radius: 14px; border: 2px solid var(--ball); background: var(--paper); }
.frame-h { margin: 0 0 .2rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--red); font-weight: 700; }
.frame-q { margin: 0 0 .6rem; font: 600 1.22rem/1.35 Fraunces, Georgia, serif; }
.frame-why { margin: 0; font-size: 1rem; color: var(--muted); }
.frame-why b { color: var(--text); }

.qz { margin: 1.4rem 0; padding: .9rem 1rem; border-radius: 14px; border: 2px solid var(--grid-strong); background: var(--paper); }
.qz-end { border-color: var(--green); }
.qz-h { margin: 0 0 .2rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.qz-end .qz-h { color: var(--text); }
.qz-q { margin: 0 0 .5rem; font-weight: 640; }
.qz-o[data-state="ok"] { background: var(--green-soft); border-color: var(--green); }
.qz-o[data-state="no"] { background: var(--red-soft); border-color: var(--red); }
.qz-o[data-state="ok"]::before { content: "✓ "; color: var(--green); }
.qz-o[data-state="no"]::before { content: "✗ "; color: var(--red); }
.qz-fb { margin: .5rem 0 0; }
.qz-fb:empty { display: none; }
.qz-fb .back { display: block; margin-top: .4rem; padding: .45rem .7rem; border-left: 3px solid var(--gold); background: var(--gold-soft); border-radius: 0 8px 8px 0; }
.qz[data-answered="no"] .qz-fb b { color: var(--red); }
.qz[data-answered="ok"] .qz-fb b { color: var(--green); }
.qz-why { margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--line); }
.qz-why p:last-child { margin-bottom: 0; }
.qz-why p:empty { display: none; }
.qz-next { margin: .8rem 0 0; }
.qz-next .btn { display: inline-grid; place-items: center; text-decoration: none; }

.mini { display: block; width: 100%; max-width: 26rem; height: auto; margin: .6rem 0; }
.mini .mg { stroke: var(--grid); stroke-width: 1; }
.mini .mt { fill: var(--muted); font-size: 12px; font-family: inherit; }
.mini .ml-a { stroke: var(--pen); stroke-width: 3; }
.mini .ml-b { stroke: var(--ball); stroke-width: 3; stroke-dasharray: 7 4; }
.mini .mla { fill: var(--pen); font-weight: 700; font-size: 14px; }
.mini .mlb { fill: var(--ball); font-weight: 700; font-size: 14px; }
.mini .mx { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.mini .mdot { fill: var(--gold); stroke: var(--text); stroke-width: 1.5; }

.compare { margin: 1.2rem 0; display: grid; gap: .7rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) { .compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cmp { padding: .75rem .9rem; border-radius: 12px; background: var(--pen-soft); }
.cmp + .cmp { background: var(--gold-soft); }
.cmp-h { margin: 0 0 .35rem; font-weight: 700; }
.cmp p:last-child { margin-bottom: 0; }
.mini-t { border-collapse: collapse; margin: 0 0 .5rem; font-variant-numeric: tabular-nums; font-size: .98rem; }
.mini-t th, .mini-t td { padding: .2rem .45rem; text-align: center; }
.mini-t th { text-align: left; font-weight: 640; color: var(--text); }
.mini-t tr + tr td { border-top: 1px solid var(--line); }
.mini-t .dif td { color: var(--text); font-weight: 800; }
.mini-t tr.dif td, .mini-t tr.dif th { border-top: 2px dashed var(--text); }

.stepnav { margin: 1.8rem 0 .4rem; padding-top: .9rem; border-top: 1px solid var(--line); display: grid; gap: .4rem; grid-template-columns: minmax(0, 1fr); font-size: .98rem; }
.stepnav a { display: inline-grid; align-items: center; min-height: 2.75rem; }
.sn-mid { color: var(--muted); }
@media (min-width: 40rem) { .stepnav { grid-template-columns: 1fr auto 1fr; align-items: center; } .sn-mid { text-align: center; } .sn-next { text-align: right; } }

.say { margin: .8rem 0 0; font-size: .98rem; }
.say summary { cursor: pointer; color: var(--pen); font-weight: 640; min-height: 2.75rem; display: flex; align-items: center; }
.say p { margin: .3rem 0 0; color: var(--text); }


/* share row (standards/v2/tools/share_row.py) */
.share-row{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.share-row .lab{font-size:.95rem;margin-inline-end:.3rem}
.share-row a,.share-row button{display:inline-grid;place-items:center;flex:none;width:2.5rem;height:2.5rem;padding:0;border-radius:50%;border:1px solid var(--sr-line,color-mix(in srgb,currentColor 28%,transparent));background:transparent;color:var(--sr-ink,inherit);text-decoration:none;cursor:pointer;font:inherit;transition:color .15s,border-color .15s}
.share-row a:hover,.share-row button:hover,.share-row a:focus-visible,.share-row button:focus-visible{color:var(--sr-acc,inherit);border-color:var(--sr-acc,currentColor)}
.share-row [hidden]{display:none}
@media (pointer:coarse){.share-row a,.share-row button{width:2.75rem;height:2.75rem}}
@media (max-width:30rem){.share-row .lab{flex-basis:100%;margin:0 0 .15rem}}
.share-status{font-size:.92rem;color:var(--sr-ok,inherit);min-height:1.2em;margin:.4rem 0 0}
.share-status:empty{display:none}
.share-field{display:block;width:100%;max-width:36rem;margin-top:.4rem;font:inherit;font-size:.9rem}