/* Section 04 native figures and table views. Scoped to s04-*; kit tokens plus
   the figure categories below (lighter versions of the report figures' own
   phase and tensor colours; Figure 9 uses the hue families of its drawio
   source: blue main weight, purple optimizer states). Pink is reserved for
   the playhead, selection, annotations and focus. The FSDP series uses the
   kit's legacy-path warm grey, as in Section 1's throughput plot of the same
   CSV (integration 2026-10-10; Figure 8's caption names no colours). */
.s04-fig{
 --s04-fwd:#f6e7bd;--s04-fwd-s:#c39a3f;--s04-bwd:#e7dbef;--s04-bwd-s:#9478ad;
 --s04-ag:#d5e6f3;--s04-ag-s:#5f8db3;--s04-agrs:#d7ebd6;--s04-agrs-s:#5f9a64;
 --s04-red:#c9e4d6;--s04-red-s:#2f7a57;--s04-opt:#f8d6d3;--s04-opt-s:#c06260;--s04-lm:#ecebe8;--s04-lm-s:#9aa3a6;
 --s04-ep8:#2d5a5e;--s04-ep1:#86adb0;--s04-ep1-t:#4f7679;--s04-fsdp:#968671;--s04-fsdp-t:#6f6150;
 --s04-weight:#2d5a5e;--s04-grad:#86adb0;--s04-main:#46709f;--s04-m1:#7a5c95;--s04-m2:#c3b0d4;
 --s04-t0:#fbdcb8;--s04-t0-s:#cf8a34;--s04-t1:#d4e3f6;--s04-t1-s:#6a8dbd;--s04-t2:#d5e9d2;--s04-t2-s:#78ab62;--s04-t3:#e4d6ea;--s04-t3-s:#9573a8;
 --s04-d0:#407579;--s04-d1:#5c7fb0;--s04-d2:#c98a1d;--s04-d3:#7f63ab;
 container:s04/inline-size;position:relative;margin:0;color:var(--ink);font-size:14.5px;line-height:1.5}
.report-content .s04-fig p{margin:0}
.report-content .s04-fig :is(ul,ol){margin:0;padding:0;list-style:none}
.report-content .s04-fig li{margin:0;padding:0}
.report-content .s04-fig li::marker{content:none}
.s04-fig sub{font-size:.72em;line-height:0}
/* SVG subscripts never render below about 10px (their font-size attributes say 8.5-9). */
.s04-fig svg tspan[baseline-shift="sub"]{font-size:10px}
.s04-fig code{font-size:.9em}
/* Manrope has no italic: give synthesized italic variables room before the next glyph. */
.s04-fig i:not(.s04-sw),.s04-tool i{padding-right:.12em}
.s04-fig i:not(.s04-sw):has(+sub),.s04-tool i:has(+sub){padding-right:.05em}
.s04-prop{font-family:"STIX Two Math","Cambria Math","Times New Roman",serif;font-style:normal;font-size:1.1em}

/* Head: one title row (the frame badge is the evidence label) */
.s04-fig-head{margin:2px 0 16px}
.report-content .s04-fig .s04-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 */
.s04-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin:0 0 14px}
.s04-control{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.s04-control[hidden]{display:none}
.s04-control-label{font-size:11px;font-weight:700;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.s04-control-label i,.s04-control-label sub{text-transform:none;letter-spacing:0}
.s04-seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:20px;background:var(--cream-lo);border:1px solid var(--line)}
.s04-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}
.s04-seg button small{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pink-deep)}
.s04-seg button:hover{color:var(--ink)}
.s04-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)}
.s04-seg button:disabled{opacity:.38;cursor:not-allowed}
.s04-num{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--sand);color:var(--ink-deep);font-size:10.5px}
.s04-seg button[aria-pressed="true"] .s04-num{background:var(--ink-deep);color:var(--cream)}
.s04-range input[type=range]{-webkit-appearance:none;appearance:none;width:200px;max-width:100%;height:28px;margin:0;background:transparent;cursor:pointer}
.s04-range input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--teal-line),var(--sand))}
.s04-range input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--teal-line),var(--sand))}
.s04-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)}
.s04-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)}
.s04-range input[type=range]:focus-visible{outline:2.5px solid var(--pink);outline-offset:2px;border-radius:6px}
.s04-range output{min-width:5ch;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-deep);white-space:nowrap}
/* Shared autoplay pill (autoplay.js, Figures 6 and 7): last item of the controls row, pushed right. */
.s04-fig .s04-controls>.ap-slot{margin-left:auto}
.s04-fig .ap-face svg{display:block;width:18px;height:18px;overflow:hidden}

/* Surfaces, SVG text, notes */
.s04-surface{position:relative;background:var(--cream-hi);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.s04-fig svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--font)}
.s04-t{font-size:13px;fill:var(--ink)}
.s04-t--small{font-size:11.5px;fill:var(--ink-soft)}
.s04-t--k{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;fill:var(--muted)}
.s04-t--tick{font-size:11.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.s04-t--strong{fill:var(--ink);font-weight:700}
.s04-t--axis{font-size:12px;fill:var(--muted)}
.s04-t--muted{font-size:12px;fill:var(--muted);font-style:italic}
.s04-grid{stroke:var(--line);stroke-width:1}
.s04-grid--v{stroke-dasharray:2 4}
.s04-axis,.s04-tickmark{stroke:var(--line-strong);stroke-width:1}
.s04-axis-head{fill:none;stroke:var(--line-strong);stroke-width:1.2}
.s04-hit{fill:transparent;cursor:crosshair}
.report-content .s04-fig .s04-fig-note{margin:14px 0 0;max-width:880px;font-size:12.5px;line-height:1.58;color:var(--muted)}
.report-content .s04-fig .s04-fig-note a[data-reference-type]{font-weight:700}
.s04-dim{font-weight:400;color:var(--muted)}
.report-content .s04-fig .s04-quote{margin:0;padding:0 0 0 14px;border-left:2px solid var(--pink);font-size:14px;line-height:1.55;color:var(--ink-soft);max-width:760px}
.report-content .s04-fig .s04-quote p{margin:0}
.report-content .s04-fig .s04-quote footer{margin-top:3px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.report-content .s04-fig .s04-quote footer a{color:var(--teal-deep);text-decoration-color:var(--teal-line)}
.report-content .s04-fig .s04-quote+.s04-quote{margin-top:10px}
.s04-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:12.5px;color:var(--ink)}
.s04-legend li{display:inline-flex;align-items:center;gap:7px}
.s04-sw{display:inline-block;flex:none;width:14px;height:10px;border-radius:3px;border:1px solid transparent}
.s04-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.s04-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.s04-card{display:flex;flex-direction:column;gap:1px;min-width:0;padding:10px 14px 11px;border:1px solid var(--line);border-radius:10px;background:var(--cream-hi)}
.s04-card span{font-size:12px;font-weight:700;color:var(--muted)}
.s04-card b{font-size:24px;font-weight:400;line-height:1.15;letter-spacing:-.02em;color:var(--ink-deep);font-variant-numeric:tabular-nums}
.s04-card em{font-size:12.5px;font-style:normal;line-height:1.4;color:var(--muted)}
.s04-card.is-warn{box-shadow:inset 3px 0 0 var(--pink)}
.report-content .s04-fig .s04-read-head{margin:0 0 8px;font-size:12.5px;font-weight:700;color:var(--muted)}
.report-content .s04-fig .s04-read-note{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.s04-swipe{display:none}
.report-content .s04-fig .s04-swipe[hidden]{display:none}
/* Toggle buttons in legends (series on/off in Figure 8; highlight one item in Figures 9 and 10) */
.s04-legend--btn{gap:4px 6px}
.s04-leg{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--cream-hi);color:var(--ink);font-size:12px;font-weight:700;line-height:1;cursor:pointer;transition:opacity .2s,border-color .2s,box-shadow .2s}
.s04-leg:hover{border-color:var(--teal-line)}
.s04-leg:focus-visible{outline:2.5px solid var(--pink);outline-offset:2px}
.s04-leg .s04-dim{font-size:11.5px}
.s04-sweep .s04-leg[aria-pressed="false"]{opacity:.5;text-decoration:line-through;text-decoration-thickness:1px}
.s04-legend li.is-hot>.s04-leg--hl{border-color:var(--ink-deep)}
.s04-leg--hl[aria-pressed="true"]{border-color:var(--ink-deep);box-shadow:inset 0 0 0 1px var(--ink-deep)}

/* ---------- Figure 6: replicas ---------- */
.s04-rep-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:18px;align-items:start;padding:16px 18px 18px}
.s04-rep-card{fill:var(--cream);stroke:var(--line-strong);stroke-width:1}
.s04-t--gpu{font-size:12.5px;font-weight:700;letter-spacing:.1em;fill:var(--ink-deep)}
.s04-t--ver{font-size:11.5px;fill:var(--muted)}
.s04-rep-w1{display:none}
.s04-rep-layerbox{fill:var(--cream-hi);stroke:var(--line-strong);stroke-width:1;transition:stroke .3s,fill .3s}
.s04-rep-cell{fill:#d9e8ef;stroke:#7d9fb4;stroke-width:.8;transition:fill .3s}
.s04-rep-attn rect{fill:#f5e3c4;stroke:#c99b54;stroke-width:.9}
.s04-part{outline:none;cursor:pointer}
.s04-part-hit{fill:transparent}
.s04-part.is-focus .s04-part-hit,.s04-part.is-peer .s04-part-hit{fill:var(--pink-wash);stroke:var(--pink);stroke-width:1.2}
.s04-part:focus-visible .s04-part-hit{stroke:var(--pink);stroke-width:2.2}
.s04-rep-attn.is-focus rect,.s04-rep-attn.is-peer rect,.s04-rep-attn:focus-visible rect{stroke:var(--pink);stroke-width:2}
.s04-rep-arrow{fill:none;stroke:var(--line-strong);stroke-width:1.4}
.s04-rep-head{fill:var(--line-strong)}
.s04-t--chip{font-size:12px;font-weight:700;fill:var(--ink-deep)}
.s04-rep-data rect,.s04-rep-grad rect{stroke-width:1.5;transition:fill .3s,stroke .3s,opacity .3s}
.s04-rep-data--0 rect{fill:rgba(64,117,121,.14);stroke:var(--s04-d0)}
.s04-rep-data--1 rect{fill:rgba(92,127,176,.15);stroke:var(--s04-d1)}
.s04-rep-data--2 rect{fill:rgba(201,138,29,.15);stroke:var(--s04-d2)}
.s04-rep-data--3 rect{fill:rgba(127,99,171,.14);stroke:var(--s04-d3)}
/* Peers: thicker stroke in their own hue. Focus and the selected part: pink. */
.s04-rep-stage[data-phase] :is(.s04-rep-data,.s04-rep-grad).is-peer rect{stroke-width:2.6}
.s04-rep-stage[data-phase] :is(.s04-rep-data,.s04-rep-grad):is(.is-focus,:focus-visible) rect{stroke:var(--pink);stroke-width:2.6;stroke-dasharray:none}
.s04-rep-grad rect{fill:var(--cream);stroke:var(--line-strong);stroke-dasharray:3 3}
.s04-rep-grad text{fill:var(--muted)}
.s04-rep-gs{display:none}
/* Synchronization band: pending (dashed outline) until step 3 */
.s04-rep-band rect{fill:transparent;stroke:var(--line-strong);stroke-width:1.2;stroke-dasharray:4 4;transition:fill .35s var(--ease),stroke .35s}
.s04-rep-band .s04-rep-conn{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:3 4}
.s04-t--band{font-size:12.5px;font-weight:700;fill:var(--muted)}
.s04-rep-stage[data-phase] .s04-rep-band:is(.is-focus,:focus-visible) rect{stroke:var(--pink);stroke-width:2.5;stroke-dasharray:none}
.s04-rep-repl path{fill:none;stroke:var(--teal-deep);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.s04-t--repl{font-size:11px;font-weight:700;letter-spacing:.08em;fill:var(--teal-deep)}
/* phases */
.s04-rep-stage[data-phase="grad"] .s04-rep-grad rect{stroke-dasharray:none}
.s04-rep-stage[data-phase="grad"] .s04-rep-grad text{fill:var(--ink-deep)}
.s04-rep-stage[data-phase="grad"] .s04-rep-grad--0 rect{fill:rgba(64,117,121,.2);stroke:var(--s04-d0)}
.s04-rep-stage[data-phase="grad"] .s04-rep-grad--1 rect{fill:rgba(92,127,176,.2);stroke:var(--s04-d1)}
.s04-rep-stage[data-phase="grad"] .s04-rep-grad--2 rect{fill:rgba(201,138,29,.2);stroke:var(--s04-d2)}
.s04-rep-stage[data-phase="grad"] .s04-rep-grad--3 rect{fill:rgba(127,99,171,.2);stroke:var(--s04-d3)}
.s04-rep-stage:is([data-phase="sync"],[data-phase="update"]) .s04-rep-grad rect{fill:var(--ink-deep);stroke:var(--ink-deep);stroke-dasharray:none}
.s04-rep-stage:is([data-phase="sync"],[data-phase="update"]) .s04-rep-grad text{fill:var(--cream)}
.s04-rep-stage:is([data-phase="sync"],[data-phase="update"]) .s04-rep-gl{display:none}
.s04-rep-stage:is([data-phase="sync"],[data-phase="update"]) .s04-rep-gs{display:inline}
.s04-rep-stage[data-phase="sync"] .s04-rep-band rect{fill:var(--ink-deep);stroke:var(--ink-deep);stroke-dasharray:none}
.s04-rep-stage[data-phase="update"] .s04-rep-band rect{fill:var(--teal-deep);stroke:var(--teal-deep);stroke-dasharray:none}
.s04-rep-stage:is([data-phase="sync"],[data-phase="update"]) .s04-t--band{fill:var(--cream)}
.s04-rep-stage:is([data-phase="sync"],[data-phase="update"]) .s04-rep-conn{stroke:var(--ink-deep)}
.s04-rep-stage[data-phase="update"] .s04-rep-w0{display:none}
.s04-rep-stage[data-phase="update"] .s04-rep-w1{display:inline;font-weight:700;fill:var(--teal-deep)}
.s04-rep-stage[data-phase="update"] .s04-rep-layerbox{stroke:var(--teal);stroke-width:1.8;fill:#f1f6f4}
.s04-rep-stage[data-phase="update"] .s04-rep-cell{fill:#c3dbd8}
.s04-rep-stage[data-phase="data"] .s04-rep-flow{stroke:var(--teal);stroke-width:1.8}
/* Motion: is-live is one autoplay cycle (four 1.1 s marches; s04.js restarts
   it each cycle). Suspended (off screen) freezes it; a reader stop removes it. */
.s04-rep.is-live .s04-rep-stage[data-phase="data"] .s04-rep-flow{stroke-dasharray:4 4;animation:s04-flow 1.1s linear 4}
.s04-rep.is-live .s04-rep-stage[data-phase="sync"] .s04-rep-conn{animation:s04-flow 1.1s linear 4}
.s04-rep[data-autoplay="suspended"] :is(.s04-rep-flow,.s04-rep-conn){animation-play-state:paused}
@keyframes s04-flow{to{stroke-dashoffset:-16}}
.s04-note{align-self:stretch;padding:4px 0 0 18px;border-left:1px solid var(--line)}
.report-content .s04-fig .s04-note-kicker{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep)}
@container s04 (max-width:900px){.s04-rep-stage{grid-template-columns:1fr;padding:12px 10px 14px}.s04-note{padding:12px 4px 0;border-left:0;border-top:1px solid var(--line)}}

/* ---------- Figure 7: two clocks ---------- */
.s04-clk-stage{padding:16px 18px 12px}
.s04-clk-host{overflow-x:auto;overscroll-behavior-x:contain;border-radius:8px;scrollbar-width:thin}
.s04-clk-host:focus-visible{outline:2.5px solid var(--pink);outline-offset:3px}
.s04-clk-host svg{min-width:600px}
/* Narrow hosts: the 600 px timeline scrolls under a sticky copy of the label column. */
.s04-clk-track.is-split{display:grid;width:max-content}
.s04-clk-track.is-split>svg{grid-area:1/1;width:auto;min-width:0}
.s04-clk-labels{position:sticky;left:0;z-index:1;pointer-events:none;align-self:start;justify-self:start}
.s04-clk-labels-bg{fill:var(--cream-hi)}
.s04-clk-labels-edge{stroke:var(--line);stroke-width:1}
.s04-clk-labels .s04-t--group{paint-order:stroke;stroke:var(--cream-hi);stroke-width:4px;stroke-linejoin:round}
.s04-t--group{font-size:14px;font-weight:700;fill:var(--ink-deep)}
.s04-t--groupsub{font-size:12px;fill:var(--muted)}
.s04-group-rule{stroke:var(--line);stroke-width:1}
.s04-t--lane{font-size:12px;fill:var(--muted)}
.s04-lane-base{stroke:var(--line);stroke-width:1}
.s04-t--box{font-size:12px;font-weight:700;fill:var(--ink-deep);pointer-events:none}
.s04-box rect{stroke-width:1.1;transition:filter .15s,stroke-width .15s}
.s04-box--fwd rect{fill:var(--s04-fwd);stroke:var(--s04-fwd-s)}
.s04-box--bwd rect{fill:var(--s04-bwd);stroke:var(--s04-bwd-s)}
.s04-box--ag rect{fill:var(--s04-ag);stroke:var(--s04-ag-s)}
.s04-box--agrs rect,.s04-box--rs rect{fill:var(--s04-agrs);stroke:var(--s04-agrs-s)}
.s04-box--red rect{fill:var(--s04-red);stroke:var(--s04-red-s)}
.s04-box--opt rect{fill:var(--s04-opt);stroke:var(--s04-opt-s)}
.s04-box--lm rect{fill:var(--s04-lm);stroke:var(--s04-lm-s)}
.s04-box--nosync rect{fill:none;stroke:var(--line-strong);stroke-dasharray:3 4}
.s04-t--nosync{font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;fill:var(--muted)}
.s04-box.is-hot rect{stroke:var(--ink-deep);stroke-width:2.2}
.s04-box--nosync.is-hot rect{stroke:var(--teal);stroke-width:1.6}
.s04-resident rect{fill:var(--teal-wash);stroke:var(--teal-line);stroke-width:1}
.s04-t--resident{font-size:11px;font-weight:700;fill:var(--teal-deep)}
.s04-life-track{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3}
.s04-life{fill:var(--s04-ag-s);opacity:.55;transition:opacity .15s}
.s04-life.is-hot{opacity:1;fill:var(--pink)}
.s04-life--res{fill:var(--teal);opacity:.45}
.s04-life--res.is-hot{fill:var(--teal);opacity:.85}
.s04-t--unit{font-size:10.5px;font-weight:700;fill:var(--muted)}
.s04-playhead line{stroke:var(--pink);stroke-width:1.6}
.s04-playhead circle{fill:var(--pink);stroke:var(--cream-hi);stroke-width:2.5}
.s04-clk-legend{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:12px}
.s04-sw--fwd{background:var(--s04-fwd);border-color:var(--s04-fwd-s)}
.s04-sw--bwd{background:var(--s04-bwd);border-color:var(--s04-bwd-s)}
.s04-sw--ag{background:var(--s04-ag);border-color:var(--s04-ag-s)}
.s04-sw--agrs{background:var(--s04-agrs);border-color:var(--s04-agrs-s)}
.s04-sw--red{background:var(--s04-red);border-color:var(--s04-red-s)}
.s04-sw--opt{background:var(--s04-opt);border-color:var(--s04-opt-s)}
.s04-clk-read{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0}
.s04-clk-col{padding:11px 14px 12px;border:1px solid var(--line);border-radius:10px;background:var(--cream-hi)}
.s04-clk-col--fsdp{box-shadow:inset 3px 0 0 var(--s04-ag-s)}
.s04-clk-col--ddp{box-shadow:inset 3px 0 0 var(--teal)}
.report-content .s04-fig .s04-clk-name{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--ink-deep)}
.s04-clk-col dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:13px;line-height:1.45}
.s04-clk-col dl>div{display:contents}
.s04-clk-col dt{color:var(--muted)}
.s04-clk-col dd{margin:0;font-weight:700;color:var(--ink);min-width:0}
.s04-clk-col .s04-count dd{font-weight:400}
.s04-clk-col .s04-count b{font-size:15px;color:var(--ink-deep)}
.s04-idle{color:var(--muted);font-weight:400}
.s04-tally{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 0}
.s04-tally[hidden],[data-s04-tally][hidden]{display:none}
.s04-tally-item{display:flex;flex-direction:column;gap:1px;padding:10px 14px 11px;border-radius:10px;background:var(--cream-lo)}
.s04-tally-item span{font-size:12px;font-weight:700;color:var(--muted)}
.s04-tally-item span a{font-weight:700}
.s04-tally-item b{font-size:19px;font-weight:400;line-height:1.25;letter-spacing:-.01em;color:var(--ink-deep)}
.s04-tally-item em{font-size:12.5px;font-style:normal;color:var(--muted)}
.s04-tally-item--fsdp{box-shadow:inset 3px 0 0 var(--s04-ag-s)}
.s04-tally-item--ddp{box-shadow:inset 3px 0 0 var(--teal)}
.s04-clk-quotes{margin:14px 0 0}
@container s04 (max-width:640px){
 .s04-clk-stage{padding:10px 8px 10px}
 .report-content .s04-fig .s04-swipe{display:flex;justify-content:space-between;margin:0 4px 8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
 .report-content .s04-fig .s04-swipe[hidden]{display:none}
 .s04-swipe b{font-weight:700}
 .s04-clk-read,.s04-tally{grid-template-columns:1fr}
}
/* Phones: label, slider and value stay on one line. */
@container s04 (max-width:520px){
 .s04-controls>.s04-range{flex:1 1 260px;flex-wrap:nowrap;max-width:100%}
 .s04-range .s04-control-label{white-space:nowrap}
 .s04-range input[type=range]{width:auto;flex:1 1 90px;min-width:80px}
}

/* ---------- Figure 8: sweeps ---------- */
/* Panels share row tracks (subgrid), so titles, tools, plots and readouts line up. */
.s04-sw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.s04-sw-panel{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start;padding:14px 14px 12px;min-width:0}
.report-content .s04-fig .s04-panel-title{display:flex;align-items:baseline;gap:9px;margin:0 0 8px;font-size:14px;font-weight:700;line-height:1.4;color:var(--ink-deep)}
.s04-panel-key{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--ink-deep);color:var(--cream);font-size:12px;transform:translateY(-1px)}
.s04-panel-tools{display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:8px 14px;margin:0 0 4px;min-height:40px}
.s04-panel-tools .s04-seg button{min-height:28px;padding:0 10px;font-size:12px}
.s04-sw--line-ep8,.s04-sw--line-ep1,.s04-sw--line-fsdp{position:relative;width:20px;height:3px;border:0;border-radius:2px}
.s04-sw--line-ep8{background:var(--s04-ep8)}
.s04-sw--line-ep1{background:var(--s04-ep1)}
.s04-sw--line-fsdp{background:var(--s04-fsdp)}
.s04-sw--line-ep8::after,.s04-sw--line-ep1::after,.s04-sw--line-fsdp::after{content:'';position:absolute;left:6px;top:-3.5px;width:8px;height:8px;border-radius:50%;background:inherit}
.s04-sw--square::after{border-radius:1.5px}
.s04-sw--diamond::after{border-radius:1px;transform:rotate(45deg) scale(.9)}
.s04-sw--ref{width:20px;height:0;border:0;border-top:2px dashed #7c8a8f;border-radius:0}
.s04-chart{position:relative;outline:none;border-radius:8px;touch-action:pan-y}
.s04-chart:focus-visible{outline:2.5px solid var(--pink);outline-offset:3px}
.s04-line{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.s04-line--ep8{stroke:var(--s04-ep8)}
.s04-line--ep1{stroke:var(--s04-ep1)}
.s04-line--fsdp{stroke:var(--s04-fsdp)}
.s04-pt :is(circle,rect,path){stroke:var(--cream-hi);stroke-width:1.5}
.s04-pt--ep8 :is(circle,rect,path){fill:var(--s04-ep8)}
.s04-pt--ep1 :is(circle,rect,path){fill:var(--s04-ep1)}
.s04-pt--fsdp :is(circle,rect,path){fill:var(--s04-fsdp)}
.s04-pt.is-focus :is(circle,rect,path){stroke:var(--ink-deep);stroke-width:2}
.s04-col-focus{fill:var(--teal-wash)}
.s04-ref{stroke-width:1.6}
.s04-ref--ddp{stroke:#7c8a8f;stroke-dasharray:6 4}
.s04-ref--fsdp{stroke:#a9b3b6;stroke-dasharray:2 3}
.s04-t--ref{font-size:11px;font-weight:700;fill:#5f6c71;paint-order:stroke;stroke:var(--cream-hi);stroke-width:4px;stroke-linejoin:round}
.s04-t--val{font-size:13px;font-weight:700;paint-order:stroke;stroke:var(--cream-hi);stroke-width:4px;stroke-linejoin:round}
.s04-t--ep8{fill:var(--s04-ep8)}
.s04-t--ep1{fill:var(--s04-ep1-t)}
.s04-t--fsdp{fill:var(--s04-fsdp-t)}
.s04-oom path{fill:none;stroke:#6f9598;stroke-width:2.2;stroke-linecap:round}
.s04-t--oom{font-size:10.5px;font-weight:700;fill:var(--s04-ep1-t)}
.s04-oom.is-focus path{stroke:var(--ink-deep)}
.s04-read{margin:10px 0 0}
.s04-sweep .s04-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.s04-sweep .s04-card{padding:8px 11px 9px}
.s04-sweep .s04-card b{font-size:21px}
.s04-sweep .s04-card em{font-size:11.5px}
.s04-card--ep8{box-shadow:inset 3px 0 0 var(--s04-ep8)}
.s04-card--ep1{box-shadow:inset 3px 0 0 var(--s04-ep1)}
.s04-card--fsdp{box-shadow:inset 3px 0 0 var(--s04-fsdp)}
.s04-card--gap{background:var(--cream-lo)}
.s04-card.is-oom b{color:var(--s04-ep1-t)}
.s04-card.is-na b{color:var(--muted)}
@container s04 (max-width:720px){.s04-sw-grid{grid-template-columns:1fr}}
@container s04 (max-width:460px){.s04-sw-panel{padding:12px 8px 10px}.s04-sweep .s04-card b{font-size:19px}.s04-sweep .s04-card{padding:7px 9px 8px}}

/* ---------- Figure 9: memory accounting ---------- */
.s04-mem-stage{padding:14px 18px 16px}
.s04-mem-legend{margin:0 0 8px;font-size:12px}
.s04-mem-floor-key{padding:0 6px;font-size:12px;color:var(--ink-soft)}
.s04-sw--weight{background:var(--s04-weight)}
.s04-sw--grad{background:var(--s04-grad)}
.s04-sw--main{background:var(--s04-main)}
.s04-sw--m1{background:var(--s04-m1)}
.s04-sw--m2{background:var(--s04-m2)}
.s04-sw--floor{width:3px;height:14px;border-radius:0;background:repeating-linear-gradient(var(--ink-deep) 0 3px,transparent 3px 5px)}
.s04-t--rowname{font-size:13.5px;font-weight:700;fill:var(--ink-deep)}
.s04-t--rowsub{font-size:11.5px;fill:var(--muted)}
.s04-mseg{cursor:pointer}
.s04-mseg rect{stroke:var(--cream-hi);stroke-width:1;transition:x .45s var(--ease),width .45s var(--ease),opacity .2s}
.s04-mseg--weight rect{fill:var(--s04-weight)}
.s04-mseg--grad rect{fill:var(--s04-grad)}
.s04-mseg--main rect{fill:var(--s04-main)}
.s04-mseg--m1 rect{fill:var(--s04-m1)}
.s04-mseg--m2 rect{fill:var(--s04-m2)}
.s04-mem-host:has(.s04-mseg.is-hot) .s04-mseg:not(.is-hot) rect{opacity:.35}
.s04-t--segv{font-size:11.5px;font-weight:700;fill:#fff;pointer-events:none}
.s04-mseg--m2 .s04-t--segv,.s04-mseg--grad .s04-t--segv{fill:var(--ink-deep)}
.s04-floor line{stroke:var(--ink-deep);stroke-width:1.6;stroke-dasharray:3 2}
.s04-t--total{font-size:15px;font-weight:700;fill:var(--ink-deep);font-variant-numeric:tabular-nums}
.s04-t--formula{font-size:11.5px;fill:var(--muted)}
.s04-mem-read{margin:12px 0 0}
.s04-card--mem-ddp{box-shadow:inset 3px 0 0 var(--line-strong)}
.s04-card--mem-dopt{box-shadow:inset 3px 0 0 var(--s04-main)}
.s04-card--mem-ep{box-shadow:inset 3px 0 0 var(--teal)}
.s04-mem-topo{margin:14px 0 0;padding:14px 16px 16px;border-radius:var(--radius);background:var(--cream-lo)}
.s04-mem-topo-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 18px;margin:0 0 10px}
.report-content .s04-fig .s04-mem-topo-head .s04-dim{font-size:12.5px;max-width:560px}
.s04-grid-ranks{display:grid;grid-template-columns:repeat(var(--shards),minmax(0,1fr));gap:8px;margin:0 0 14px}
.s04-shard{min-width:0;padding:8px 8px 7px;border-radius:10px;background:var(--cream-hi);border:1px solid var(--line)}
.report-content .s04-fig .s04-shard p{display:flex;flex-direction:column;font-size:11.5px;font-weight:700;line-height:1.3;color:var(--ink-deep);overflow-wrap:normal;word-break:keep-all}
.s04-shard p small{font-size:10.5px;font-weight:400;color:var(--muted)}
.report-content .s04-fig .s04-shard-foot{margin-top:4px;font-size:10.5px;font-weight:400;color:var(--muted)}
/* Ranks: 20 px targets on a 24 px pitch, wrapping inside each shard card. */
.s04-shard-ranks{display:grid;grid-template-columns:repeat(auto-fill,20px);gap:4px;margin-top:6px}
.s04-rank{display:block;width:20px;height:20px;margin:0;padding:0;border:0;border-radius:4px;background:var(--hue,var(--teal));opacity:.75;cursor:pointer;transition:opacity .15s,transform .15s}
.s04-rank:focus-visible{outline:2.5px solid var(--pink);outline-offset:2px}
.s04-shard--0{--hue:#2d5a5e}.s04-shard--1{--hue:#46709f}.s04-shard--2{--hue:#c98a1d}.s04-shard--3{--hue:#7f63ab}
.s04-shard--4{--hue:#5f8f4e}.s04-shard--5{--hue:#6b7a80}.s04-shard--6{--hue:#b5603a}.s04-shard--7{--hue:#8b8a2e}
.s04-grid-ranks:has(.is-self) .s04-rank{opacity:.22}
.s04-rank.is-dp,.s04-rank.is-mp{opacity:.85!important}
.s04-rank.is-mp{box-shadow:0 0 0 1.5px var(--ink-deep)}
.s04-rank.is-self{opacity:1!important;transform:scale(1.15);box-shadow:0 0 0 2px var(--cream-hi),0 0 0 4px var(--pink)}
.s04-mem-quotes{margin:14px 0 0}
@container s04 (max-width:640px){
 .s04-mem-stage{padding:12px 10px 12px}
 .s04-mem .s04-cards--3{grid-template-columns:1fr;gap:6px}
 .s04-mem .s04-card{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:10px;padding:8px 11px}
 .s04-mem .s04-card em{grid-column:1/-1}
 .s04-mem .s04-card b{font-size:19px}
 .s04-mem-topo{padding:12px 10px}
 .s04-grid-ranks{grid-template-columns:repeat(var(--shards-narrow,var(--shards)),minmax(0,1fr));gap:5px}
 .s04-shard{padding:7px 6px 6px}
 .s04-shard-ranks{grid-template-columns:repeat(auto-fill,18px);gap:6px}
 .s04-rank{width:18px;height:18px}
 .s04-mem-legend .s04-leg .s04-dim{display:none}
}

/* ---------- Figure 10: layouts ---------- */
.s04-lay-stage{padding:14px 18px 14px}
.s04-lay-legend{margin:0 0 8px}
.s04-sw--t0{background:var(--s04-t0);border-color:var(--s04-t0-s)}
.s04-sw--t1{background:var(--s04-t1);border-color:var(--s04-t1-s)}
.s04-sw--t2{background:var(--s04-t2);border-color:var(--s04-t2-s)}
.s04-sw--t3{background:var(--s04-t3);border-color:var(--s04-t3-s)}
.s04-ten,.s04-piece{cursor:pointer}
.s04-ten rect,.s04-piece rect{stroke-width:1.1;transition:opacity .2s,stroke-width .15s}
.s04-ten--0 rect{fill:var(--s04-t0);stroke:var(--s04-t0-s)}
.s04-ten--1 rect{fill:var(--s04-t1);stroke:var(--s04-t1-s)}
.s04-ten--2 rect{fill:var(--s04-t2);stroke:var(--s04-t2-s)}
.s04-ten--3 rect{fill:var(--s04-t3);stroke:var(--s04-t3-s)}
.s04-piece.is-rep rect{stroke-dasharray:4 2;fill-opacity:.55}
.s04-lay-host:has(.is-hot) :is(.s04-ten,.s04-piece):not(.is-hot) rect{opacity:.3}
.s04-ten.is-hot rect,.s04-piece.is-hot rect{stroke-width:2}
.s04-t--ten{font-size:11.5px;font-weight:700;fill:var(--ink-deep);pointer-events:none}
.s04-t--rank{font-size:12px;font-weight:700;fill:var(--muted)}
.s04-t--load{font-size:11.5px;font-weight:700;fill:var(--ink-deep);font-variant-numeric:tabular-nums}
.s04-t--rep{font-size:10.5px;font-style:italic;fill:var(--ink-soft);pointer-events:none}
.s04-t--even{font-size:11px;font-weight:700;fill:var(--teal-deep)}
.s04-cut{stroke:var(--ink-deep);stroke-width:1.3;stroke-dasharray:3 3}
.s04-even{stroke:var(--teal);stroke-width:1.5;stroke-dasharray:5 4}
.s04-lay-read{margin:12px 0 0}
.s04-lay-read .s04-cards{margin:0 0 14px}
.s04-lay .s04-card b{font-size:21px}
.s04-seg button small{margin-left:2px}
@container s04 (max-width:760px){.s04-cards--4{grid-template-columns:1fr 1fr}.s04-lay-stage{padding:12px 10px}}

/* ---------- Tables 4 and 5 ---------- */
.s04-hl{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.s04-hl-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.s04-hl-status{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.s04-tool{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--muted);font-size:12.5px;font-weight:700;line-height:1;cursor:pointer;transition:background-color .2s,color .2s}
.s04-tool sub{font-size:.75em;line-height:0}
.s04-tool:hover{color:var(--ink)}
.s04-tool-seg{display:inline-flex;padding:2px;border-radius:999px;background:var(--cream-lo);border:1px solid var(--line)}
.s04-tool-seg[hidden]{display:none}
.s04-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)}
.report-content .table-frame.s04-hl-active tbody tr>*{transition:opacity .25s,background-color .25s}
.report-content .table-frame.s04-hl-active tbody tr.s04-row-off>*{opacity:.36}
.report-content .table-frame.s04-hl-active tbody tr.s04-row-on>*{background:var(--pink-wash)}
.report-content .table-frame.s04-hl-active tbody tr.s04-row-on>:first-child{box-shadow:inset 3px 0 0 var(--pink)}
.report-content ol.s04-cards-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.s04-cards-list[hidden]{display:none!important}
.report-content .s04-cards-list>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.5;transition:opacity .25s}
.report-content .s04-cards-list>li::marker{content:none}
.report-content .s04-cards-list p{margin:0}
.report-content .s04-cards-list>li.s04-row-off{opacity:.4}
.report-content .s04-cards-list>li.s04-row-on{box-shadow:inset 3px 0 0 var(--pink);background:#fff6f9}
.report-content .s04-cards-list .s04-card-title{margin:0 0 8px;font-size:15.5px;font-weight:700;line-height:1.35;color:var(--ink-deep)}
.s04-card-dl{display:grid;gap:8px;margin:0}
.s04-card-dl>div{min-width:0}
.s04-card-dl dt{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.s04-card-dl dt strong{font-weight:700}
.s04-card-dl dd{margin:2px 0 0;font-size:14.5px;color:var(--ink)}
.s04-card-dl .s04-card-f2 dd{color:var(--ink-deep);font-weight:700}
.table-frame.s04-cards-on>.table-viewport,.table-frame.s04-cards-on>.table-scroll{display:none!important}
.table-frame.s04-cards-on .table-hint{display:none!important}

/* Forced colours: keep selections, focus and the playhead visible. */
@media (forced-colors:active){
 /* Diagram surfaces keep their authored colours (SVG fills are not forced), so text stays legible. */
 .s04-surface{forced-color-adjust:none;border:1px solid CanvasText}
 .s04-seg button[aria-pressed="true"],.s04-tool[aria-pressed="true"],.s04-leg--hl[aria-pressed="true"]{outline:2px solid Highlight;outline-offset:-2px}
 .s04-sweep .s04-leg[aria-pressed="false"]{color:GrayText}
 .s04-rank{forced-color-adjust:none;background:GrayText;opacity:1}
 .s04-rank.is-dp,.s04-rank.is-mp{background:LinkText}
 .s04-rank.is-self{background:Highlight;outline:2px solid Highlight;box-shadow:none}
 .s04-playhead line{stroke:Highlight}
 .s04-playhead circle{fill:Highlight}
 .s04-part.is-focus .s04-part-hit,.s04-part:focus-visible .s04-part-hit,.s04-rep-data.is-focus rect,.s04-rep-grad.is-focus rect,.s04-rep-band.is-focus rect{stroke:Highlight}
 .s04-box.is-hot rect,.s04-life.is-hot{stroke:Highlight}
}

/* Motion and print */
@media (prefers-reduced-motion:reduce){
 .s04-fig *,.s04-cards-list>li{transition:none!important}
 /* Only a cycle the reader asked for ("Play animation") may animate. */
 .s04-fig:not([data-autoplay="running"]) *,.s04-cards-list>li{animation:none!important}
}
@media print{
 .s04-controls,.s04-tool,.s04-tool-seg,.s04-hl,.s04-cards-list{display:none!important}
 .table-frame.s04-cards-on>.table-viewport,.table-frame.s04-cards-on>.table-scroll{display:block!important}
}