/* Section 01 native figures and table views. Scoped to s01-*; kit tokens only. */
/* One encoding across Sections 1-3: dense/baseline = grey dashed, MoE and the
   Olmo-core DDP path = teal, the legacy FSDP path = warm grey; pink only marks
   the scrub point, the current selection, annotations and focus.
   Exception: Figure 2 (roofline) follows the PDF figure's palette at the
   author's request (2026-11-02): dense teal solid, MoE pink dashed. */
.s01-fig,.s01-tplot{--s01-dense:#77828a;--s01-legacy:#968671;--s01-legacy-deep:#6f6150}
.s01-fig{container:s01/inline-size;position:relative;margin:0;color:var(--ink);font-size:14.5px;line-height:1.5}
.report-content .s01-fig p{margin:0}
.report-content .s01-fig :is(ul,ol){margin:0;padding:0;list-style:none}
.report-content .s01-fig li{margin:0;padding:0}
.report-content .s01-fig li::marker{content:none}

/* Head */
.s01-fig-head{margin:2px 0 16px}
.report-content .s01-fig .s01-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 8px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.s01-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.3;letter-spacing:.11em;text-transform:uppercase;background:var(--teal-wash);color:var(--teal-deep)}
.s01-tag::before{content:'';width:8px;height:8px;border-radius:50%;border:1.5px dashed var(--teal);box-sizing:border-box}
.s01-tag--illus{background:rgba(10,43,53,.07);color:var(--ink-deep)}
.s01-tag--illus::before{border-style:dotted;border-color:var(--ink-deep)}
.s01-tag--measured{background:var(--pink-wash);color:var(--pink-deep)}
.s01-tag--measured::before{border:0;background:var(--pink)}
.s01-tag--web{background:var(--cream-lo);color:var(--ink-soft)}
.s01-tag--web::before{border:0;background:var(--teal);border-radius:2px}
.report-content .s01-fig .s01-fig-title{margin:0;font-size:clamp(21px,2.1vw,27px);font-weight:400;line-height:1.2;letter-spacing:-.022em;color:var(--ink-deep);text-wrap:balance}

/* Controls */
.s01-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:0 0 14px}
.s01-control{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.s01-control-label{font-size:11px;font-weight:700;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.s01-dim{font-weight:400;letter-spacing:.02em;text-transform:none}
.s01-seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:20px;background:var(--cream-lo);border:1px solid var(--line)}
.s01-seg button{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px;border:0;border-radius:999px;background:none;color:var(--muted);font-size:13px;font-weight:700;line-height:1;cursor:pointer;transition:background-color .2s var(--ease),color .2s,box-shadow .2s}
.s01-seg button small{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pink-deep)}
.s01-seg button:hover{color:var(--ink)}
.s01-seg button[aria-pressed="true"]{background:var(--cream-hi);color:var(--ink-deep);box-shadow:inset 0 0 0 1.5px var(--ink-deep),0 1px 3px rgba(10,43,53,.16)}
.s01-switch{display:inline-flex;align-items:center;gap:10px;position:relative;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;min-height:34px}
.s01-switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.s01-switch-ui{position:relative;flex:none;width:38px;height:22px;border-radius:999px;background:var(--sand);transition:background-color .2s var(--ease)}
.s01-switch-ui::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--cream-hi);box-shadow:0 1px 2px rgba(10,43,53,.25);transition:transform .2s var(--ease)}
.s01-switch input:checked+.s01-switch-ui{background:var(--teal)}
.s01-switch input:checked+.s01-switch-ui::after{transform:translateX(16px)}
.s01-switch input:focus-visible+.s01-switch-ui{outline:2.5px solid var(--pink);outline-offset:3px}
.s01-range{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.s01-range input[type=range]{-webkit-appearance:none;appearance:none;width:min(280px,100%);height:28px;margin:0;background:transparent;cursor:pointer}
.s01-range input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--teal-line),var(--sand))}
.s01-range input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--teal-line),var(--sand))}
.s01-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;background:var(--teal);border:3px solid var(--cream-hi);box-shadow:0 1px 4px rgba(10,43,53,.3)}
.s01-range input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--teal);border:3px solid var(--cream-hi);box-shadow:0 1px 4px rgba(10,43,53,.3)}
.s01-range input[type=range]:focus-visible{outline:2.5px solid var(--pink);outline-offset:2px;border-radius:6px}
.s01-range output{min-width:5.5ch;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-deep)}
.s01-only-narrow{display:none!important}

/* Shared surfaces and SVG text */
.s01-surface,.s01-moe-stage,.s01-roof-grid,.s01-fr-grid,.s01-chart--tps{background:var(--cream-hi);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.s01-fig svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--font)}
.s01-t{font-size:15.5px;fill:var(--ink)}
.s01-t--small{font-size:13.5px}
.s01-t--num{font-size:17px;font-weight:700}
.s01-t--var{font-size:18px;font-weight:700;font-style:italic;fill:var(--ink-deep)}
.s01-t--state{font-size:11.5px;fill:var(--muted)}
.s01-t--note{font-size:12px;fill:var(--muted);paint-order:stroke;stroke:var(--cream-hi);stroke-width:4px;stroke-linejoin:round}
.s01-t--weight{font-size:13px;font-weight:700;fill:var(--pink-deep)}
.s01-t--tick{font-size:12px;fill:var(--muted);font-variant-numeric:tabular-nums}
.s01-t--strong{fill:var(--ink);font-weight:700}
.s01-t--axis{font-size:12.5px;fill:var(--muted)}
.s01-t--sub{font-size:9.5px;fill:var(--muted)}
.s01-t--legend{font-size:12.5px;fill:var(--ink)}
.s01-t--panel{font-size:14.5px;font-weight:700;fill:var(--ink-deep)}
.s01-t--val{font-size:13px;font-weight:700;paint-order:stroke;stroke:var(--cream-hi);stroke-width:4px;stroke-linejoin:round}
.s01-t--dense{fill:var(--ink-soft)}
.s01-t--moe{fill:var(--teal-deep)}
.s01-t--gap{font-size:13px;font-weight:700;fill:var(--pink-deep);paint-order:stroke;stroke:var(--cream-hi);stroke-width:4px;stroke-linejoin:round}
.s01-t--legend.is-selected{font-weight:700;fill:var(--ink-deep)}
.s01-t--bar{font-size:12px;font-weight:700;fill:var(--ink)}
.s01-t--plabel{font-size:12px;font-weight:700;fill:var(--ink-deep);paint-order:stroke;stroke:var(--cream-hi);stroke-width:4px;stroke-linejoin:round}
.s01-grid{stroke:var(--line);stroke-width:1}
.s01-grid--v{stroke-dasharray:2 4}
.s01-axis,.s01-tickmark{stroke:var(--line-strong);stroke-width:1}
.s01-hit{fill:transparent;cursor:crosshair}
.s01-cursor line{stroke:var(--pink-deep);stroke-width:1.2;stroke-dasharray:3 3;opacity:.8}
.s01-fig-note{margin:12px 0 0;max-width:860px;font-size:12.5px;line-height:1.58;color:var(--muted)}
.report-content .s01-fig .s01-fig-note a[data-reference-type]{font-weight:700}
.s01-tip{position:absolute;z-index:5;max-width:280px;padding:9px 12px;border-radius:10px;background:var(--ink-deep);color:var(--cream);font-size:12.5px;line-height:1.45;box-shadow:var(--shadow-pop);pointer-events:none}
.s01-tip[hidden]{display:none}
.s01-tip p{margin:0}
.s01-tip p+p{margin-top:2px}
.s01-tip b{color:#fff}
.s01-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:13px;color:var(--ink)}
.s01-legend li{display:inline-flex;align-items:center;gap:8px}
.s01-sw{display:inline-block;flex:none;width:14px;height:10px;border-radius:3px}
.s01-sw--old{background:var(--s01-legacy)}
.s01-sw--new{background:var(--teal)}
.s01-sw--y23{background:#b9d3d4;border-radius:50%;width:10px}
.s01-sw--y24{background:#7fa6a9;border-radius:50%;width:10px}
.s01-sw--y25{background:#407579;border-radius:50%;width:10px}
.s01-sw--y26{background:#0a2b35;border-radius:50%;width:10px}
.s01-sw--family{height:2px;background:var(--pink)}

/* ---------- Figure 1: MoE and dense blocks (inference / training) ----------
   After the Olmo-core 3 blog's dense-vs-MoE figure: pale boxes, thin
   connectors, flow bottom to top; pink marks active FFN computation only
   (routed experts, shared expert, dense FFN). Token dots are ink so they stay
   legible inside a lit (pink) expert. The drawings scale with their column
   (about 0.9 at 1440 px wide, 0.74 on a phone), so SVG font sizes are set to
   render at 13 px or more at both. */
.s01-moe{--s01-box:#e3ebe8;--s01-box-line:#b2c6c2;--s01-ln:#bccbc8;--s01-pill-line:#a1b9b5;--s01-pass:#d4e4df}
.s01-moe-stage{display:grid;grid-template-columns:minmax(0,430fr) minmax(0,210fr) minmax(220px,250fr);grid-template-rows:auto 1fr;grid-template-areas:"moe dense state" "moe dense part";gap:0 30px;align-items:start;padding:18px 22px 20px}
.s01-panel-moe{grid-area:moe}
.s01-panel-dense{grid-area:dense}
.s01-moe-panel{position:relative;min-width:0}
.s01-panel-dense::before{content:'';position:absolute;left:-15px;top:0;bottom:0;border-left:1px solid var(--line)}
.report-content .s01-fig .s01-panel-head{display:flex;flex-direction:column;gap:1px;margin:0 0 10px;line-height:1.3}
.s01-panel-head b{font-size:15.5px;font-weight:700;color:var(--ink-deep)}
.s01-panel-head span{font-size:13px;color:var(--muted)}
.s01-moe-host{position:relative}
.s01-moe .s01-t{font-size:17px;fill:var(--ink)}
.s01-moe .s01-t--expert{font-size:19px;font-weight:700;fill:var(--ink-deep)}
.s01-moe .s01-t--small{font-size:17px;font-weight:700;fill:var(--ink-deep)}
.s01-moe .s01-t--state{font-size:15px;fill:var(--muted)}
.s01-moe .s01-t--weight{font-size:16.5px}
.s01-moe .s01-ln{fill:none;stroke:var(--s01-ln);stroke-width:1.6;stroke-linejoin:round}
.s01-sel{fill:none;stroke:var(--pink);stroke-width:2.6;stroke-linecap:round}
.s01-node{outline:none;cursor:default}
.s01-pill{fill:var(--cream-hi);stroke:var(--s01-pill-line);stroke-width:1.3}
.s01-box{fill:var(--s01-box);stroke:var(--s01-box-line);stroke-width:1.3}
.s01-light{fill:var(--pink)}
.s01-light--pass{fill:var(--s01-pass)}
.s01-plus{fill:var(--cream-hi);stroke:var(--s01-pill-line);stroke-width:1.3}
.s01-plus-mark{fill:none;stroke:var(--ink-soft);stroke-width:1.5;stroke-linecap:round}
.s01-moe[data-shared="off"] .s01-box--shared{fill:none;stroke-dasharray:4 3}
.s01-moe[data-shared="off"] .s01-node[data-part="shared"] .s01-t{fill:var(--muted)}
.s01-moe[data-shared="off"] .s01-ln--shared{stroke-dasharray:3 4;opacity:.6}
.s01-node.is-focus>rect,.s01-node.is-focus>circle{stroke:var(--pink-deep);stroke-width:2.2;stroke-dasharray:none}
.s01-node:focus-visible>rect,.s01-node:focus-visible>circle{stroke:var(--pink-deep);stroke-width:3;stroke-dasharray:none}
.s01-dot circle{fill:var(--ink-deep);stroke:var(--cream-hi);stroke-width:1.6}
.s01-dot text{font-size:15.5px;font-weight:700;fill:#fff;font-variant-numeric:tabular-nums}
.s01-count circle{fill:var(--cream-hi);stroke:var(--ink-deep);stroke-width:1.3}
.s01-count text{font-size:15px;font-weight:700;fill:var(--ink-deep);font-variant-numeric:tabular-nums}
.s01-dots{pointer-events:none}
/* Router weight p_e: a pill on the expert's stub into Combine (inference). */
.s01-wpill{fill:var(--cream-hi);stroke:var(--pink);stroke-width:1.4}
.s01-weight{pointer-events:none}
/* Training: tokens per routed expert against the balanced load. */
.s01-loads{margin-top:12px}
.s01-moe[data-mode="inference"] .s01-loads{display:none}
.report-content .s01-fig .s01-loads-title{margin:0 0 7px;font-size:13.5px;font-weight:700;line-height:1.35;color:var(--ink-deep)}
.s01-loads-title span{font-weight:400;color:var(--muted);white-space:nowrap}
.s01-load-list{display:grid;gap:6px}
.report-content .s01-fig .s01-load-list li,.s01-load-axis{display:grid;grid-template-columns:24px minmax(0,1fr) 12px 24px;align-items:center;gap:0 8px}
.report-content .s01-fig .s01-load-list li{font-size:13.5px;line-height:18px}
.s01-load-name{font-weight:700;color:var(--ink-deep)}
.s01-load-track{position:relative;height:12px;border-radius:3px;background:var(--cream-lo)}
.s01-load-track i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--teal)}
.s01-load-track::after{content:'';position:absolute;z-index:1;left:var(--s01-bal);top:-4px;bottom:-4px;margin-left:-.75px;border-left:1.5px dashed var(--ink-deep)}
.s01-load-list li.is-over i{background:var(--pink)}
.s01-load-list li.is-under i{background:var(--cream-hi);box-shadow:inset 0 0 0 1.5px var(--teal)}
.s01-load-list b{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-deep)}
.s01-load-list em{font-size:13px;font-style:normal;font-weight:700;color:var(--teal-deep);font-variant-numeric:tabular-nums}
.s01-load-list li.is-over b,.s01-load-list li.is-over em{color:var(--pink-deep)}
.s01-load-axis{margin-top:2px}
.s01-load-ticks{grid-column:2;position:relative;height:17px;font-size:13px;line-height:17px;color:var(--muted);font-variant-numeric:tabular-nums}
.s01-load-ticks span{position:absolute;top:0;transform:translateX(-50%)}
.report-content .s01-fig .s01-load-foot{margin-top:4px;font-size:13px;line-height:1.45;color:var(--muted)}
.s01-node.is-lit .s01-t{fill:#fff}
/* Step-through controls and status */
.s01-moe .s01-control-label{font-size:12.5px}
.s01-moe .s01-seg button{font-size:14px}
.s01-moe .kit-button{font-size:13.5px}
.s01-moe .s01-switch{font-size:14px}
.s01-transport{gap:6px}
.s01-transport[hidden],.s01-transport [hidden]{display:none!important}
.s01-transport .kit-button svg{width:11px;height:11px;fill:currentColor}
.s01-transport .s01-step{min-width:34px;padding:0}
.s01-transport.is-off{visibility:hidden}
/* Shared autoplay pill (autoplay.js): last item of the controls row, pushed right. */
.s01-moe .s01-controls>.ap-slot{margin-left:auto}
.s01-fig .ap-face svg{display:block;width:18px;height:18px;overflow:hidden}
.s01-inspector{min-width:0;padding-left:22px;border-left:1px solid var(--line)}
.s01-insp-state{grid-area:state;padding-top:2px}
.s01-insp-part{grid-area:part;align-self:stretch;margin-top:16px;padding-top:14px;min-height:120px;position:relative}
.s01-insp-part::before{content:'';position:absolute;left:22px;right:0;top:0;border-top:1px solid var(--line)}
.report-content .s01-fig .s01-mode-lead{font-size:14px;line-height:1.5;color:var(--ink-soft)}
.s01-seq-row{display:flex;align-items:center;gap:12px;margin-top:12px}
.report-content .s01-fig .s01-seq{display:flex;gap:6px}
.report-content .s01-fig .s01-seq li{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.4px solid var(--line-strong);font-size:13.5px;font-weight:700;line-height:1;color:var(--faint);transition:background-color .2s var(--ease),color .2s,border-color .2s}
.report-content .s01-fig .s01-seq li.is-done{border-color:var(--teal);background:var(--teal-wash);color:var(--teal-deep)}
.report-content .s01-fig .s01-seq li.is-now{border-color:var(--ink-deep);background:var(--ink-deep);color:#fff}
.report-content .s01-fig .s01-now{margin-top:12px;min-height:3em;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.s01-now b{color:var(--ink-deep)}
.s01-now-tag{display:inline;margin-left:2px;font-size:13px;font-style:italic;color:var(--muted)}
.report-content .s01-fig .s01-key{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;line-height:1.4;color:var(--muted)}
.s01-key i{flex:none;width:10px;height:10px;border-radius:2px;background:var(--pink)}
.report-content .s01-fig .s01-part-name{font-size:14px;font-weight:700;color:var(--ink-deep)}
.report-content .s01-fig .s01-part-note,.report-content .s01-fig .s01-part-hint{margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.report-content .s01-fig blockquote.s01-quote{margin:8px 0 0;padding:0 0 0 12px;border-left:2px solid var(--pink);font-size:14px;line-height:1.55;color:var(--ink-soft)}
.s01-quote cite{display:block;margin-top:4px;font-size:13px;font-style:normal;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.s01-moe .s01-fig-note{font-size:13.5px}
@container s01 (max-width:860px){
 .s01-moe-stage{grid-template-columns:minmax(0,430fr) minmax(0,210fr);grid-template-rows:auto auto;grid-template-areas:"moe dense" "state part";gap:0 30px}
 .s01-inspector{margin-top:18px;padding:16px 0 0;border-left:0;border-top:1px solid var(--line)}
 .s01-insp-part{min-height:0}
 .s01-insp-part::before{display:none}
}
/* Phone: the step status (token strip and status line) sits above the MoE
   block so the reader sees the current token while watching; the part note
   goes last. */
@container s01 (max-width:560px){
 .s01-moe-stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"state" "moe" "dense" "part";padding:12px 12px 16px}
 .s01-insp-state{margin:0 0 12px;padding:0 0 10px;border-top:0;border-bottom:1px solid var(--line)}
 .report-content .s01-fig .s01-insp-state .s01-mode-lead{font-size:13px;line-height:1.45}
 .report-content .s01-fig .s01-panel-head{margin-bottom:6px}
 .s01-insp-state .s01-seq-row{margin-top:8px}
 .s01-insp-state .s01-now{margin-top:8px;min-height:0}
 .s01-insp-state .s01-key{margin-top:6px}
 .s01-panel-dense{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
 .s01-panel-dense::before{display:none}
 .s01-panel-dense .s01-moe-host{width:48.84%;margin:0 auto}
 .s01-insp-part{margin-top:16px;padding-top:12px}
 .s01-controls{gap:10px 16px}
 .s01-moe .s01-t{font-size:18px}
 .s01-moe .s01-t--expert{font-size:19.5px}
 .s01-moe .s01-t--small,.s01-moe .s01-t--state{font-size:18px}
 .s01-moe .s01-t--weight{font-size:18px}
 .s01-dot text{font-size:17.5px}
 .s01-count text{font-size:18px}
}

/* ---------- Figure 2: analytical roofline ---------- */
/* PDF palette (plot_dense_moe_roofline.py): DENSE #337A7D, MOE #C44B89,
   MOE_LIGHT #F9E8F1. Pink text uses a deeper shade for contrast on cream. */
.s01-roof{--s01-r-dense:#337a7d;--s01-r-moe:#c44b89;--s01-r-moe-ink:#b03a78;--s01-r-tint:#f9e8f1;--s01-r-tint-line:rgba(196,75,137,.4)}
.s01-roof-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(250px,1fr);gap:26px;padding:18px 22px 16px}
.s01-roof-gap{fill:var(--s01-r-tint)}
.s01-roof-dense{fill:none;stroke:var(--s01-r-dense);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.s01-roof-moe{fill:none;stroke:var(--s01-r-moe);stroke-width:2.6;stroke-dasharray:10 7;stroke-linejoin:round}
.s01-roof .s01-cursor line{stroke:var(--ink-soft);opacity:.55}
.s01-roof .s01-t--dense{fill:var(--s01-r-dense)}
.s01-roof .s01-t--moe{fill:var(--s01-r-moe-ink)}
.s01-roof-span{fill:none;stroke:var(--muted);stroke-width:1.2}
.s01-roof-svg .s01-edge-head{fill:var(--muted)}
.s01-knee{fill:var(--ink-deep)}
.s01-cur-dense{fill:var(--s01-r-dense);stroke:var(--cream-hi);stroke-width:2.5}
.s01-cur-moe{fill:var(--s01-r-moe);stroke:var(--cream-hi);stroke-width:2.5}
.s01-chart{position:relative;min-width:0}
.s01-chart svg{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.s01-side-block+.s01-side-block{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.report-content .s01-fig .s01-side-title{margin:0 0 10px;font-size:13.5px;font-weight:700;line-height:1.35;color:var(--ink-deep)}
.s01-side-title span{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.s01-ratios{display:grid;gap:9px}
.report-content .s01-fig .s01-ratios p{font-size:13px;line-height:1.3;margin:0 0 4px}
.s01-ratios p span{color:var(--muted)}
/* (a) As in the PDF: dense bar teal with "1×", MoE bar pink with its ratio. */
.s01-ratio{display:grid;gap:3px;padding-right:44px}
.s01-ratio-row{display:flex;align-items:center;gap:6px;min-width:0}
.s01-ratio-d,.s01-ratio-m{display:block;flex:none;height:7px;border-radius:2px;transition:width .3s var(--ease)}
.s01-ratio-d{background:var(--s01-r-dense)}
.s01-ratio-m{background:var(--s01-r-moe)}
.s01-ratio-row em{flex:none;font-size:13px;font-style:normal;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.s01-ratio-row--d em{font-weight:600;color:var(--s01-r-dense)}
.s01-ratio-row--m em{font-weight:700;color:var(--s01-r-moe-ink)}
.report-content .s01-fig .s01-side-foot{margin-top:8px;font-size:12px;color:var(--muted)}
.s01-stack-row{display:grid;grid-template-columns:48px 1fr 66px;align-items:center;gap:10px;margin:6px 0;font-size:13px}
.s01-stack-row b{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-deep)}
.s01-stack-name{color:var(--muted);font-weight:700}
.s01-stack-name--dense{color:var(--s01-r-dense)}
.s01-stack-name--moe{color:var(--s01-r-moe-ink)}
.s01-stack{display:flex;height:16px;border-radius:4px;overflow:hidden;background:var(--cream-lo)}
.s01-stack span{display:block;height:100%;transition:width .3s var(--ease)}
.s01-seg-weights{background:var(--ink-deep)}
.s01-seg-inputs{background:var(--teal)}
.s01-seg-intermediate{background:#9cc0c2}
.s01-seg-outputs{background:#c9a97f}
.s01-stack-key{display:flex!important;flex-wrap:wrap;gap:4px 14px;margin:8px 0 12px!important;font-size:12px;color:var(--muted)}
.s01-stack-key i{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:2px;vertical-align:-1px}
.s01-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:0;font-size:12.5px;line-height:1.4}
.s01-facts dt{color:var(--muted)}
.s01-facts dd{margin:2px 0 0;font-weight:700;color:var(--ink-deep);font-variant-numeric:tabular-nums}
.s01-hbm{color:var(--ink-deep)}
.s01-cmp{color:var(--teal-deep)}
/* Figure 2: teal now means dense, so the bound state reads pink (HBM-bound,
   as the tinted region) or ink (compute-bound). */
.s01-roof .s01-hbm{color:var(--s01-r-moe-ink)}
.s01-roof .s01-cmp{color:var(--ink-deep)}
@container s01 (max-width:820px){.s01-roof-grid{grid-template-columns:1fr;gap:18px}}
@container s01 (max-width:600px){.s01-roof-grid{padding:14px 12px}.s01-range input[type=range]{width:100%}}

/* ---------- Figure 3: compute and wall-time frontiers ---------- */
.s01-fr-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:16px 18px 10px}
.s01-fr-dense{fill:none;stroke:var(--s01-dense);stroke-width:2.3;stroke-dasharray:6 4}
.s01-fr-moe{fill:none;stroke:var(--teal);stroke-width:2.4}
.s01-fr-slow{fill:none;stroke:var(--pink);stroke-width:2.6;stroke-dasharray:1.5 4.5;stroke-linecap:round}
.s01-fr-custom{fill:none;stroke:var(--ink-deep);stroke-width:2.2}
.s01-fr-moe.is-selected,.s01-fr-custom.is-selected{stroke-width:3.4}
.s01-fr-slow.is-selected{stroke-width:3.6}
.s01-fr-dot{stroke:var(--cream-hi);stroke-width:1.8}
.s01-fr-dot--dense{fill:var(--s01-dense)}
.s01-fr-dot--moe{fill:var(--teal)}
.s01-fr-dot--slow{fill:var(--pink)}
.s01-fr-dot--custom{fill:var(--ink-deep)}
.s01-target{stroke:var(--muted);stroke-width:1;stroke-dasharray:1.5 3}
.s01-gap{fill:none;stroke:var(--pink);stroke-width:1.4}
.s01-readout{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:14px;padding:14px 20px;border-radius:var(--radius);background:var(--ink-deep);color:var(--cream)}
.report-content .s01-fig .s01-eq{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:17px;line-height:1.2;color:#dbe7e6;font-variant-numeric:tabular-nums}
.s01-eq-term{font-style:italic;color:#fff}
.s01-eq-frac{display:inline-flex;flex-direction:column;align-items:center;font-size:12.5px;line-height:1.25}
.s01-eq-frac span:first-child{padding:0 3px 1px;border-bottom:1px solid currentColor}
.s01-eq b{color:#fff}
.s01-eq .s01-eq-pen{color:#ff8fc2}
.s01-eq .s01-eq-out{padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.12)}
.report-content .s01-fig .s01-verdict{font-size:14.5px;line-height:1.45;color:#c9d9d8;max-width:520px}
.s01-verdict b{color:#fff}
@container s01 (max-width:700px){.s01-fr-grid{grid-template-columns:1fr;gap:14px;padding:12px 10px 6px}.s01-readout{padding:12px 14px}}

/* ---------- Figure 4: measured throughput ---------- */
.s01-chart--tps{padding:16px 18px 8px}
.s01-bar{outline:none;cursor:pointer}
.s01-bar rect{transition:opacity .2s,stroke .2s}
.s01-bar--old rect{fill:var(--s01-legacy)}
.s01-bar--neu rect{fill:var(--teal)}
.s01-bar.is-dense rect{opacity:.55}
.s01-bar:focus-visible rect{stroke:var(--ink-deep);stroke-width:2.5}
.s01-col-focus{fill:var(--teal-wash)}
.s01-trend{fill:none;stroke-width:1.3;stroke-dasharray:2 4;stroke-linecap:round}
.s01-trend--old{stroke:var(--s01-legacy-deep)}
.s01-trend--neu{stroke:var(--teal-deep)}
.s01-readout--tps{display:block;margin-top:12px;padding:0;background:none;color:inherit}
.report-content .s01-fig .s01-tps-head{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--muted)}
.s01-tps-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:640px}
.report-content .s01-fig .s01-tps-ratio{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.s01-tps-card{display:flex;flex-direction:column;gap:1px;padding:10px 14px 11px;border:1px solid var(--line);border-radius:10px;background:var(--cream-hi)}
.s01-tps-card span{font-size:12px;font-weight:700;color:var(--muted)}
.s01-tps-card b{font-size:26px;font-weight:400;line-height:1.15;letter-spacing:-.02em;color:var(--ink-deep);font-variant-numeric:tabular-nums}
.s01-tps-card em{font-size:12.5px;font-style:normal;color:var(--muted)}
.s01-tps-card--old{box-shadow:inset 3px 0 0 var(--s01-legacy)}
.s01-tps-card--new{box-shadow:inset 3px 0 0 var(--teal)}
@container s01 (max-width:600px){.s01-chart--tps{padding:12px 8px 6px}.s01-tps-cards{grid-template-columns:1fr 1fr}.s01-tps-card b{font-size:22px}}

/* ---------- Table 1 plot and table tools ---------- */
.s01-tool{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:var(--cream-hi);color:var(--teal-deep);font-size:12px;font-weight:700;line-height:1;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.s01-tool svg{fill:currentColor}
.s01-tool:hover{border-color:var(--teal-line)}
.s01-tool--plot[aria-pressed="true"]{background:var(--ink-deep);border-color:var(--ink-deep);color:var(--cream)}
.s01-tool-seg{display:inline-flex;padding:2px;border-radius:999px;background:var(--cream-lo);border:1px solid var(--line)}
.s01-tool-seg .s01-tool{min-height:28px;border:0;background:none;color:var(--muted)}
.s01-tool-seg .s01-tool[aria-pressed="true"]{background:var(--cream-hi);color:var(--ink-deep);box-shadow:inset 0 0 0 1.5px var(--ink-deep),0 1px 3px rgba(10,43,53,.14)}
.s01-only-phone{display:none!important}
.s01-tplot{position:relative;margin:0 0 12px;padding:14px 18px 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--cream-hi);box-shadow:var(--shadow-card)}
.s01-tplot[hidden]{display:none}
.s01-tplot-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px;margin:0 0 6px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.report-content .s01-tplot-head p{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.report-content .s01-tplot :is(ul,ol){margin:0;padding:0;list-style:none}
.report-content .s01-tplot li{margin:0;padding:0}
.s01-legend--years{font-size:12px;color:var(--muted);gap:4px 12px}
.s01-tplot svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--font)}
.s01-pt{outline:none;cursor:pointer}
.s01-pt circle{stroke:var(--cream-hi);stroke-width:1.5}
.s01-pt--y23 circle{fill:#b9d3d4}
.s01-pt--y24 circle{fill:#7fa6a9}
.s01-pt--y25 circle{fill:#407579}
.s01-pt--y26 circle{fill:#0a2b35}
.s01-pt.is-family circle{stroke:var(--pink);stroke-width:2}
.s01-pt.is-focus circle{stroke:var(--pink);stroke-width:3}
.s01-pt:focus-visible circle{stroke:var(--pink);stroke-width:3.5}
.s01-family path{fill:none;stroke:var(--pink);stroke-width:1.8;stroke-linecap:round}
.report-content tbody tr.s01-row-focus>*{background:var(--pink-wash)}

/* Phone cards (Cards | Grid); the grid is the unchanged report table. */
.report-content ol.s01-cards{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.s01-cards[hidden]{display:none!important}
.report-content .s01-cards>li{margin:0;padding:12px 14px 13px;border:1px solid var(--line);border-radius:12px;background:var(--cream-hi);font-size:14.5px;line-height:1.45}
.report-content .s01-cards>li::marker{content:none}
.report-content .s01-cards p{margin:0}
.s01-card-title{margin:0 0 8px;font-size:15px;font-weight:700;line-height:1.4;color:var(--ink-deep)}
.s01-card-title .citation{font-size:13px;font-weight:400;color:var(--muted)}
.s01-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;margin:0}
/* Values share a baseline even when a label wraps to two lines. */
.s01-card-grid>div{min-width:0;display:flex;flex-direction:column;justify-content:space-between}
.s01-card-grid dt{font-size:11px;line-height:1.3;color:var(--muted)}
.s01-card-grid dt strong{font-weight:700}
.s01-card-grid dd{margin:2px 0 0;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-deep)}
.report-content .s01-cards .s01-card-eyebrow{margin:0 0 2px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink-deep)}
.s01-card--tax .s01-card-title{font-size:15px;margin:0 0 4px}
.report-content .s01-card--tax .s01-card-title p+p{margin-top:0;font-size:13px;font-weight:400}
.report-content .s01-card-includes ul{margin:4px 0 10px;padding-left:1.1em;font-size:14px}
.report-content .s01-card-includes li{margin:.2em 0;padding-left:.2em}
.s01-card-compare{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.s01-card-compare>div{padding:8px 10px;border-radius:8px;background:var(--cream-lo);min-width:0}
.s01-card-compare>.s01-cmp-moe{background:var(--teal-wash)}
.s01-card-compare dt{font-size:11.5px;line-height:1.35;color:var(--muted)}
.s01-card-compare dd{margin:3px 0 0;font-size:13.5px;line-height:1.4;font-weight:700;color:var(--ink-deep)}
.table-frame.s01-cards-on>.table-viewport,.table-frame.s01-cards-on>.table-scroll{display:none!important}
.table-frame.s01-cards-on .table-hint{display:none!important}
@media (max-width:860px){
 .s01-only-phone{display:inline-flex!important}
 .s01-tplot{padding:12px 10px 6px}
 .s01-tplot-head{font-size:12px}
}

/* Motion and print */
@media (prefers-reduced-motion:reduce){
 .s01-fig *,.s01-tplot *{transition:none!important;animation:none!important}
}
@media print{
 .s01-controls,.s01-inspector,.s01-transport,.s01-tool,.s01-tool-seg,.s01-tplot,.s01-cards{display:none!important}
 .table-frame.s01-cards-on>.table-viewport{display:block!important}
}
.s01-legend-plate{fill:var(--cream-hi);stroke:var(--line)}
.s01-roof-main{min-width:0}
.s01-legend--lines{margin:0 0 6px!important;font-size:12.5px;gap:4px 18px}
/* Figure 2 legend line swatches (<i>); Figure 1's SVG connectors use .s01-moe .s01-ln. */
i.s01-ln{display:inline-block;width:28px;height:2.6px;border-radius:1px;background:var(--s01-r-dense)}
i.s01-ln--moe{background:repeating-linear-gradient(90deg,var(--s01-r-moe) 0 9px,transparent 9px 14px)}
.s01-sw--gap{background:var(--s01-r-tint);border:1px solid var(--s01-r-tint-line)}
.s01-tplot-title b{color:var(--ink-deep);font-weight:700}
.s01-tplot-title>span:last-child{display:inline}
.report-content .s01-fig .s01-part-state{margin-top:4px;color:var(--teal-deep);font-weight:700;font-size:13px}

/* Figure 2: "beyond the report" exploration sits apart from the main control. */
.s01-control--explore{padding-left:18px;border-left:1px solid var(--line)}
@container s01 (max-width:600px){.s01-control--explore{padding-left:0;border-left:0}}

/* Table 2 (grid view): the "Tax" group is a band; Dense and MoE are tinted. */
.report-content table.s01-tax-table tr.s01-tax-band>td{padding:9px 14px 8px;background:var(--cream-lo);text-align:left!important;font-size:11px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep);border-bottom:1px solid var(--line)}
.report-content table.s01-tax-table tr.s01-tax-band>td strong{font-weight:700}
.report-content table.s01-tax-table tr.s01-tax-band:hover>td{background:var(--cream-lo)}
.report-content table.s01-tax-table td.s01-col-dense{background:rgba(243,232,218,.6)}
.report-content table.s01-tax-table td.s01-col-moe{background:rgba(64,117,121,.07)}
.report-content table.s01-tax-table th.s01-col-moe{box-shadow:inset 0 -2px 0 var(--teal)}
.report-content table.s01-tax-table th.s01-col-dense{box-shadow:inset 0 -2px 0 var(--s01-dense,#77828a)}
.report-content table.s01-tax-table td.s01-col-includes ul{padding-right:12px}
.report-content table.s01-tax-table tbody tr:not(.s01-tax-band):hover>*{background:rgba(64,117,121,.12)}

/* Forced colours: keep the switch and the selected segment visible. */
@media (forced-colors:active){
 .s01-switch-ui{border:1px solid CanvasText;background:Canvas}
 .s01-switch-ui::after{background:CanvasText;forced-color-adjust:none}
 .s01-switch input:checked+.s01-switch-ui{background:Highlight}
 .s01-seg button[aria-pressed="true"],.s01-tool-seg .s01-tool[aria-pressed="true"],.s01-tool--plot[aria-pressed="true"]{outline:2px solid Highlight;outline-offset:-2px}
}

/* Figure 4 (2026-11-02): the original figure's colours (generate_olmo_old_new_tps_capacity_bars.py). */
.s01-chart--tps,.s01-fig{--f4-old-dense:#9DBAD5;--f4-old-moe:#E7A46A;--f4-new-dense:#0072B2;--f4-new-moe:#D55E00}
.s01-bar--old rect{fill:var(--f4-old-moe)}
.s01-bar--neu rect{fill:var(--f4-new-moe)}
.s01-bar--old.is-dense rect{fill:var(--f4-old-dense);opacity:1}
.s01-bar--neu.is-dense rect{fill:var(--f4-new-dense);opacity:1}
.s01-trend--old{stroke:#B9722F}
.s01-trend--neu{stroke:#9C4400}
.s01-legend--tps .s01-sw--old-dense{background:var(--f4-old-dense)}
.s01-legend--tps .s01-sw--old{background:var(--f4-old-moe)}
.s01-legend--tps .s01-sw--new-dense{background:var(--f4-new-dense)}
.s01-legend--tps .s01-sw--new{background:var(--f4-new-moe)}
.s01-tps-card--old{box-shadow:inset 3px 0 0 var(--f4-old-moe)}
.s01-tps-card--new{box-shadow:inset 3px 0 0 var(--f4-new-moe)}