/* Hand-built figures for lesson 10, Pretraining at scale. */

/* shared: two columns that stack on a phone, bars, chart text, readouts, tables */
.pt-two { display: grid; gap: 22px 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) { .pt-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pt-track { position: relative; display: block; height: 18px; border-radius: 6px; background: var(--surface-2); overflow: hidden; min-width: 0; }
.pt-track i { display: block; height: 100%; min-width: 2px; background: var(--accent); transition: width 0.2s; }
.pt-track i.good { background: var(--good); } .pt-track i.bad { background: var(--bad); } .pt-track i.accent { background: var(--accent); }
.pt-track u { position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--ink); }
.pt-axis { stroke: var(--ink-3); stroke-width: 1.2; }
.pt-drop { stroke: var(--ink-3); stroke-dasharray: 4 4; fill: none; }
.pt-tick { font: 12px var(--f-mono); fill: var(--ink-3); }
.pt-tick.hi { fill: var(--ink); font-weight: 600; }
.pt-curve { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.pt-dot { fill: var(--gold); stroke: var(--bg); stroke-width: 2; }
.pt-work { font: 0.92rem/1.6 var(--f-mono); color: var(--ink-2); margin: 0 0 8px; overflow-wrap: anywhere; }
.pt-work b { color: var(--ink); }
.pt-big { font: 400 1.5rem/1.25 var(--f-display); margin: 8px 0; overflow-wrap: anywhere; }
.pt-big b, .pt-big-inline { color: var(--gold); font-weight: 400; }
.pt-big-inline { font: 400 1.4rem/1 var(--f-display); }
.seg.pt-wrap { flex-wrap: wrap; border-radius: 14px; }
.seg.pt-wrap button { white-space: normal; text-align: left; height: auto; min-height: 28px; padding: 4px 12px; line-height: 1.3; }
.pt-table { border-collapse: collapse; width: 100%; font: 0.85rem var(--f-ui); margin: 6px 0 12px; }
.pt-table th { text-align: left; font: 500 0.66rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding: 5px 6px; border-bottom: 1px solid var(--line-2); }
.pt-table td { padding: 6px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.pt-table td.num { font-family: var(--f-mono); font-size: 0.82rem; color: var(--ink); white-space: nowrap; }
.pt-two .slider, .or-top .slider, .mb-ctl .slider, .zs-ctl .slider, .pg-ctl .slider, .sf-ctl .slider, .sb-ctl .slider, .rs-traffic .slider { font-size: 0.85rem; margin: 6px 0; }
.pt-two .muted, .mb-read, .zs-read { font-size: 0.85rem; line-height: 1.5; }
.pt-two input[type="range"], .or-top input[type="range"], .mb-ctl input[type="range"], .zs-ctl input[type="range"], .pg-ctl input[type="range"], .sf-ctl input[type="range"], .sb-ctl input[type="range"], .rs-traffic input[type="range"] { width: min(220px, 55vw); }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
.sw.what { background: var(--gold); } .sw.how { background: var(--accent); }
.sw.c1 { background: var(--c1); } .sw.c2 { background: var(--c2); } .sw.c3 { background: var(--c3); } .sw.c4 { background: var(--c4); } .sw.c5 { background: var(--c5); } .sw.act { background: var(--gold); }
.sw.fwd { background: var(--accent); } .sw.bwd { background: var(--good); } .sw.idle { background: var(--surface-2); border: 1px solid var(--line-2); }
.sw.bad { background: var(--bad); }
.sw.fp32 { background: var(--gold); } .sw.bf16 { background: var(--accent); } .sw.fp16 { background: var(--ink-3); }
.sw.line { height: 0; width: 18px; border-top: 2px solid var(--ink); vertical-align: 3px; }
.sw.line.mean { border-top-style: dashed; border-color: var(--ink-3); }
b.good { color: var(--good); } b.bad { color: var(--bad); }

/* hero: the belt */
.hp { width: 100%; height: auto; display: block; margin: 0 auto; max-width: 900px; }
.hp-belt { fill: var(--surface-2); stroke: var(--line-2); }
.hp-roller { fill: var(--ink-3); }
.hp-sheet { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; }
.hp-page.keep .hp-sheet { stroke: var(--good); }
.hp-rule { stroke: var(--line-2); stroke-width: 2; stroke-linecap: round; }
.hp-what { font: 13px var(--f-mono); fill: var(--ink-3); }
.hp-what.strong { font: 500 14px var(--f-ui); fill: var(--ink); }
.hp-stamp { opacity: 0; transition: opacity 0.5s var(--ease); }
.hp-stamp.in { opacity: 1; }
.hp-verdict.keep { fill: var(--good); } .hp-verdict.drop { fill: var(--surface-2); stroke: var(--line-2); }
.hp-vtext { font: 500 12px var(--f-ui); fill: var(--ink); }
.hp-verdict.keep + .hp-vtext { fill: var(--bg); }
.hp-arrow { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hp-bale { fill: var(--gold-soft); stroke: var(--gold); stroke-width: 1.5; }
.hp-gpu { fill: var(--accent-soft); stroke: var(--accent); }

/* Level 1: the options map */
.lo-ask .kicker { margin-bottom: 8px; }
.lo-sits { gap: 4px; padding: 4px; }
.lo-sits button { font-size: 0.82rem; }
.lo-map { display: grid; gap: 16px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.lo-gh { font: 500 0.7rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.lo-cards { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.lo-card { margin: 0 !important; position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 30px; border-radius: var(--r-1); background: var(--surface-2); border: 1px solid var(--line); transition: opacity 0.25s, border-color 0.25s, background 0.25s; }
.lo-name { font: 600 0.9rem/1.3 var(--f-ui); color: var(--ink); }
.lo-ex { font-size: 0.78rem; color: var(--ink-3); }
.lo-does { font-size: 0.8rem; line-height: 1.4; color: var(--ink-2); margin-top: 4px; }
.lo-pick { position: absolute; left: 14px; bottom: 9px; font: 600 0.68rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--good); opacity: 0; transition: opacity 0.25s; }
.lo-card.on { border-color: var(--good); background: color-mix(in oklab, var(--good) 10%, var(--surface-2)); }
.lo-card.on .lo-pick { opacity: 1; }
.lo-card.dim { opacity: 0.45; }
@media (max-width: 480px) {
  .lo-cards { grid-template-columns: 1fr 1fr; gap: 6px; }
  .lo-card { padding: 10px 10px 26px; }
  .lo-name { font-size: 0.82rem; }
  .lo-does { display: none; }
  .lo-pick { left: 10px; font-size: 0.62rem; }
}
.lo-verdict { display: grid; gap: 10px 22px; grid-template-columns: 1fr; margin-top: 18px; padding: 16px 18px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--bg-2); min-height: 9rem; }
@media (min-width: 760px) { .lo-verdict { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lo-verdict p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); }
.lo-verdict .lo-h { font: 600 0.7rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--good); margin-bottom: 4px; }
.lo-verdict .watch .lo-h { color: var(--bad); }
.lo-verdict a { color: var(--accent-ink); }
.lo-always { font-size: 0.85rem; color: var(--ink-2); margin: 12px 0 0; }
.lo-always b { color: var(--ink); }

/* Level 2: which box decided that? */
.cp-choices { margin-bottom: 16px; }
.cp-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 10px; }
.cp-box { padding: 8px 12px; border-radius: var(--r-1); border: 1px solid var(--line-2); background: var(--surface-2); font: 500 0.88rem var(--f-ui); color: var(--ink-2); border-bottom-width: 3px; border-bottom-color: var(--accent); transition: background 0.25s, color 0.25s, border-color 0.25s; }
.cp-box.what { border-bottom-color: var(--gold); }
.cp-box.on { background: var(--ink); color: var(--bg); }
.cp-arrow { color: var(--ink-3); }
.cp-halves { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 0.8rem; color: var(--ink-3); margin: 0 0 12px; }
.cp-halves b { color: var(--ink-2); }
.cp-read { font-size: 0.95rem; line-height: 1.55; min-height: 4.6em; margin: 0; }

/* 1: the belt */
.cb-stages { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 8px; }
.cb-stage { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-size: 0.85rem; cursor: pointer; }
.cb-stage:has(input:not(:checked)) { opacity: 0.5; text-decoration: line-through; }
.cb-n { font: 600 0.7rem var(--f-mono); color: var(--ink-3); margin-right: 6px; font-style: normal; }
.cb-table td:first-child { width: 3ch; }
.cb-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font: 500 0.78rem var(--f-mono); background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2); overflow-wrap: anywhere; }
.cb-chip.kept { background: var(--good); border-color: var(--good); color: var(--bg); }
.cb-chip.language { border-color: var(--c2); } .cb-chip.quality { border-color: var(--c3); } .cb-chip.exact { border-color: var(--c4); } .cb-chip.near { border-color: var(--c5); }
.cb-read { font-size: 0.92rem; margin: 0; }
@media (max-width: 560px) {
  .cb-table thead { display: none; }
  .cb-table tr { display: grid; grid-template-columns: 3ch minmax(0, 1fr); gap: 2px 6px; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .cb-table td { border: 0; padding: 0; }
  .cb-table td:nth-child(3) { grid-column: 2; }
}
.cb-read b { color: var(--gold); }

/* 1c: votes */
.wv-in { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 0.85rem; color: var(--ink-3); }
.wv-in input, .sb-in input, .fb-in input { flex: 1 1 260px; min-width: 0; height: 38px; padding: 0 12px; border-radius: var(--r-1); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 0.95rem var(--f-mono); }
.wv-presets { margin: 10px 0 14px; }
.wv-words { display: flex; flex-wrap: wrap; gap: 6px; min-height: 3.4rem; align-content: flex-start; }
.wv-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); font: 0.85rem var(--f-ui); color: var(--ink); }
.wv-chip b { font: 600 0.72rem var(--f-mono); color: var(--ink-3); }
.wv-chip.good { border-color: var(--good); } .wv-chip.good b { color: var(--good); }
.wv-chip.bad { border-color: var(--bad); } .wv-chip.bad b { color: var(--bad); }
.wv-chip.none { opacity: 0.6; border-style: dashed; }
.wv-total { font: 400 1.5rem/1.3 var(--f-display); margin: 14px 0 4px; }
.wv-total .muted { font: 0.85rem var(--f-ui); margin-left: 8px; }
.wv-work { font: 0.82rem/1.6 var(--f-mono); color: var(--ink-3); margin: 0; overflow-wrap: anywhere; min-height: 2.6em; }

/* 1e: shingles */
.sb-in { display: grid; gap: 8px; }
.sb-in label { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 0.85rem; color: var(--ink-3); }
.sb-in label span { min-width: 4.5em; }
.sb-ctl { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 4px; }
.sb-presets { margin-top: 8px; }
.sb-presets .btn { height: auto; min-height: 36px; white-space: normal; text-align: left; line-height: 1.3; padding: 6px 12px; }
.sb-bags { margin-top: 16px; }
.sb-bag { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; min-height: 5rem; }
.sb-bag .kicker { flex-basis: 100%; margin-bottom: 2px; }
.sb-chip { padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--surface-2); font: 0.82rem var(--f-mono); color: var(--ink-2); }
.sb-chip.shared { border-color: var(--gold); background: var(--gold-soft); color: var(--ink); }
.sb-chip.more { border-style: dashed; color: var(--ink-3); }
.sb-read { font-size: 0.95rem; margin: 14px 0 0; }
.sb-read b { color: var(--gold); font-weight: 500; }

/* 1g: the cliff */
.lc-curve, .ls-line, .mc-plot, .cv-plot, .sf-plot, .pg-grid, .mb-bar { width: 100%; display: block; }

/* 1h: the only road */
.or-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-bottom: 10px; }
.or-line { font-size: 0.95rem; color: var(--ink); margin: 0 0 10px; }
.or-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 120px; gap: 10px; align-items: center; margin: 8px 0; font-size: 0.85rem; }
.or-row b { text-align: right; white-space: nowrap; }
@media (max-width: 480px) { .or-row { grid-template-columns: minmax(0, 1fr) 120px; } .or-row .pt-track { grid-column: 1 / -1; } }
.or-read { font: 0.92rem/1.7 var(--f-mono); margin: 14px 0 0; overflow-wrap: anywhere; }

/* 1k: the bill */
.tb-ctl .controls .btn { height: auto; min-height: 36px; white-space: normal; text-align: left; line-height: 1.3; padding: 6px 12px; }

/* 2: the memory bill */
.mb-ctl { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-bottom: 10px; }
.mb-seg { stroke: var(--bg); stroke-width: 1; }
.mb-seg.c1 { fill: var(--c1); } .mb-seg.c2 { fill: var(--c2); } .mb-seg.c3 { fill: var(--c3); } .mb-seg.c4 { fill: var(--c4); } .mb-seg.c5 { fill: var(--c5); } .mb-seg.act { fill: var(--gold); }
.mb-key { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.8rem; color: var(--ink-2); margin: 6px 0 10px; }
.mb-read { margin: 0; }
.mb-read b { color: var(--gold); }

/* 3a: the ring */
.rs-step { font-size: 0.85rem; color: var(--ink-2); }
.rs-grid-wrap { overflow-x: auto; }
.rs-grid { min-width: 0; }
@media (max-width: 560px) { .rs-grid { font-size: 0.78rem; } .rs-grid td.num { font-size: 0.85rem; padding: 5px 4px; } .rs-grid th { padding: 4px 3px; font-size: 0.6rem; } }
.rs-grid th[scope="row"] { font: 500 0.8rem var(--f-ui); color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.rs-grid td.num { text-align: center; font-size: 0.95rem; border: 1px solid var(--line); transition: background 0.2s; }
.rs-grid td.num.done { background: var(--gold-soft); color: var(--gold); font-weight: 600; }
.rs-grid td.num.got { background: var(--accent-soft); }
.rs-grid td.num.sent { outline: 2px solid var(--accent); outline-offset: -2px; }
.rs-grid td.rs-sent { color: var(--ink-3); }
.rs-read { font-size: 0.92rem; min-height: 3em; margin: 6px 0 12px; }
.rs-traffic { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.85rem; }

/* 3b: ZeRO */
.zs-ctl { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-bottom: 12px; }
.zs-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 80px; gap: 10px; align-items: center; margin: 10px 0; font-size: 0.88rem; }
.zs-row b { text-align: right; }
.zs-name { display: flex; flex-direction: column; color: var(--ink); }
.zs-name small { font-size: 0.75rem; color: var(--ink-3); }
@media (max-width: 560px) { .zs-row { grid-template-columns: minmax(0, 1fr) 80px; } .zs-row .zs-bar { grid-column: 1 / -1; } }
.zs-read { margin: 12px 0 0; font-family: var(--f-mono); overflow-wrap: anywhere; }

/* 3d: the pipeline grid */
.pg-ctl { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-bottom: 10px; }
.pg-cell.fwd { fill: var(--accent); } .pg-cell.bwd { fill: var(--good); } .pg-cell.idle { fill: var(--surface-2); stroke: var(--line-2); }
.pg-num { font: 11px var(--f-mono); fill: var(--bg); }
.pg-key { font-size: 0.8rem; color: var(--ink-2); margin: 6px 0; }
.pg-read { font-size: 0.95rem; margin: 0; }
.pg-read b { color: var(--gold); }

/* 4a: a float bit by bit */
.fb-ctl { display: grid; gap: 10px; margin-bottom: 14px; }
.fb-in { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 0.85rem; color: var(--ink-3); }
.fb-bits { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 12px; }
.fb-field { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.fb-fl { flex-basis: 100%; font: 500 0.7rem var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.fb-bit { display: inline-flex; width: 22px; height: 26px; align-items: center; justify-content: center; border-radius: 4px; font: 600 0.85rem var(--f-mono); color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-2); }
.fb-bit.s { border-color: var(--ink-3); } .fb-bit.e { border-color: var(--accent); background: var(--accent-soft); } .fb-bit.f { border-color: var(--gold); background: var(--gold-soft); }
.fb-read .pt-big { font-size: 1.35rem; }

/* 4b: loss scaling */
.ls-lost { fill: var(--bad); fill-opacity: 0.18; }
.ls-raw { fill: var(--ink-3); stroke: var(--bg); stroke-width: 2; }

/* 4c: the master copy */
.mc-line { fill: none; stroke-width: 2.5; }
.mc-line.fp32 { stroke: var(--gold); } .mc-line.bf16 { stroke: var(--accent); } .mc-line.fp16 { stroke: var(--ink-3); stroke-dasharray: 5 4; }
.mc-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin: 4px 0; font-size: 0.88rem; }
.mc-row span:first-of-type { min-width: 3em; }

/* 5a: the spike */
.sf-ctl { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; margin-bottom: 8px; }
.sf-bar { fill: var(--accent); } .sf-bar.flag { fill: var(--bad); }
.sf-rule { fill: none; stroke-width: 2; } .sf-rule.med { stroke: var(--ink); } .sf-rule.mean { stroke: var(--ink-3); stroke-dasharray: 5 4; }
.sf-key { font-size: 0.8rem; color: var(--ink-2); margin: 6px 0; line-height: 1.8; }
.sf-read { font-size: 0.92rem; margin: 0; }
.sf-read b { color: var(--gold); }

/* 5d: the valley */
.cv-you { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.cv-ctl .controls .btn { height: auto; min-height: 36px; white-space: normal; text-align: left; line-height: 1.3; padding: 6px 12px; }