/* base.css */
:root{
  color-scheme:light;
  --bg:#fffefa;--paper:#fffefa;--paper-soft:#f8f7f3;--panel:#fff;--panel-2:#f1f0eb;--panel-3:#e7ecea;
  --line:#d9d8d2;--line-strong:#aeb9b7;--text:#182426;--muted:#677477;
  --param:#2563c7;--activation:#08746e;--accent:#08746e;--gradient:#a95c08;--optimizer:#7041b8;
  --communication:#cf405d;--compute:#16855b;--idle:#7b8789;--danger:#c8413c;
  --diagram:#fffefa;--diagram-2:#f0f4f5;--diagram-line:#b8c6cc;--diagram-text:#182426;--diagram-muted:#50646d;
  --radius:4px;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--text);font-family:var(--sans);scroll-behavior:smooth;scroll-padding-top:28px}
body{margin:0;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
::selection{background:#cce8e4;color:var(--text)}
button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}
a{color:var(--accent);text-underline-offset:4px;text-decoration-thickness:1px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--activation);outline-offset:4px}
.app{min-width:0;background:var(--bg)}
.site-header{width:min(960px,calc(100% - 48px));margin:0 auto;padding:25px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}
.site-name{font-size:16px;font-weight:700;color:var(--text);text-decoration:none;letter-spacing:-.025em}
.icon-button{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:transparent;font-weight:700;color:var(--muted)}
.icon-button:hover{border-color:var(--text);color:var(--text)}
main,#main{min-width:0;width:min(960px,calc(100% - 48px));margin:auto}
.article-intro{max-width:720px;margin:64px auto 32px}.article-intro>p{font-size:19px;line-height:1.75}
.reading-settings{margin:28px 0;font-size:15px}.reading-settings summary,.lab-controls summary{cursor:pointer;font-weight:600;padding:12px 0;color:var(--accent)}
.reading-settings[open] summary{margin-bottom:12px}.reading-settings>div,.reading-settings .global-controls{display:flex;align-items:center;flex-wrap:wrap;gap:16px}
.topology-select{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.topology-select select{width:auto;max-width:100%}
.table-of-contents{max-width:720px;margin:32px auto 72px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 28px}
.table-of-contents a{display:block;font-size:15px;text-decoration:none;padding:4px 0}.table-of-contents a:hover{text-decoration:underline}.table-of-contents b{font:12px var(--mono);color:var(--muted);margin-right:10px}.table-of-contents h2,.table-of-contents>p{grid-column:1/-1}
.chapter{padding:0 0 72px;margin:0 0 64px;border-bottom:1px solid var(--line);scroll-margin-top:30px}.chapter:last-child{margin-bottom:0;border-bottom:0}
.view{position:static;overflow:visible;padding:0;min-width:0}.view-inner{width:100%;margin:0;display:flex;flex-direction:column;gap:28px;min-width:0}
.figure-block{width:100%;min-width:0;margin:8px 0 28px}.figure-transport{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.5}
.figure-transport button{min-width:40px;min-height:40px;border:1px solid var(--line);border-radius:4px;background:transparent;padding:6px 12px}.figure-transport button:hover{background:var(--paper-soft)}.figure-transport [data-action=play]{background:var(--text);color:white;border-color:var(--text)}
.figure-transport [data-phase]{flex:1 1 240px;min-width:0;color:var(--muted);overflow-wrap:anywhere}.figure-transport label{display:flex;align-items:center;gap:8px;font-size:13px}.figure-transport input[type=range]{width:90px}
.transport-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.transport-title{flex:1 1 240px}.transport-title small{display:block;color:var(--muted)}
kbd{font:12px var(--mono);border:1px solid var(--line);border-radius:3px;padding:2px 5px;background:var(--paper-soft)}
#toast{position:fixed;z-index:50;left:50%;bottom:24px;max-width:calc(100vw - 32px);transform:translate(-50%,10px);opacity:0;pointer-events:none;background:var(--text);border-radius:4px;padding:10px 16px;color:white;font-size:14px;transition:opacity .18s,transform .18s}#toast.show{opacity:1;transform:translate(-50%,0)}
dialog{border:0;background:transparent;color:var(--text);padding:0;max-width:min(620px,calc(100vw - 28px))}dialog::backdrop{background:#18242680}.dialog-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:32px}.dialog-card h2{margin:5px 0 20px}.dialog-card p{font-size:16px;line-height:1.7}.dialog-close{position:absolute;right:10px;top:8px;width:40px;height:40px;border:0;background:transparent;color:var(--muted);font-size:24px}.legend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0;font-size:14px}.legend-grid span{display:flex;align-items:center;gap:7px}.fineprint{border-top:1px solid var(--line);padding-top:20px}.eyebrow{margin:0 0 12px;color:var(--muted);font:12px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase}

/* components.css */
h1,h2,h3,h4,p{margin-top:0}h1{font-size:clamp(32px,4.5vw,46px);line-height:1.15;letter-spacing:-.035em;margin-bottom:24px;font-weight:700}h2{font-size:clamp(27px,3.5vw,35px);line-height:1.2;letter-spacing:-.025em;margin-bottom:20px}h3{font-size:20px;line-height:1.4;margin-bottom:12px}.muted{color:var(--muted)}.mono{font-family:var(--mono)}.fine{font-size:16px;color:var(--muted);line-height:1.75}.lede{font-size:18px;line-height:1.8;color:var(--text);max-width:720px}.nowrap{white-space:nowrap}.num{font-variant-numeric:tabular-nums;font-family:var(--mono)}
.stage-head{display:block;width:min(720px,100%);margin:0 auto}.stage-head h1,.stage-head h2{margin:8px 0 20px}.stage-head p{margin-bottom:0}.stage-head-copy{min-width:0}.stage-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;min-width:0}.stage-actions .segmented,.view-inner>.segmented{max-width:100%;min-width:0;flex-wrap:wrap}.view-inner>.segmented{align-self:flex-start;margin-left:max(0px,calc((100% - 720px)/2))}.chapter-choices{width:min(720px,100%);margin:0 auto}.stage-head .chapter-choices{margin-top:16px}.chapter-choices:empty{display:none}
.stage-grid,.stage-grid.equal{display:block;min-width:0}.stage-column{display:block;min-width:0}.stage-column>.panel:not(.visual),.stage-column>.lab-controls,.stage-column>div:not(.panel):not(.figure-block){max-width:720px;margin:0 auto 28px}.panel{background:transparent;border:0;border-radius:0;min-width:0}.panel.pad{padding:0}.panel-title{min-width:0;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.panel-title>div{min-width:0}.panel-title h3{margin:0}.panel-title p{margin:8px 0 0;font-size:16px;color:var(--muted);line-height:1.7}
.visual{position:relative;overflow-x:auto;overflow-y:hidden;min-width:0;background:var(--diagram);color:var(--diagram-text);border-radius:0;isolation:isolate}.visual.pad{padding:24px;min-height:0!important}.visual svg{display:block;width:100%;height:auto;min-width:800px}.visual canvas{display:block;width:100%;height:auto}.visual .panel-title h3,.visual .panel-title strong{color:var(--diagram-text)}.visual .panel-title p,.visual .fine{color:var(--diagram-muted)}.visual .panel-title p{font-size:15px}.visual .callout{font-size:15px}
.lab-controls{border-bottom:1px solid var(--line);padding:0 0 10px}.lab-controls[open]{padding-bottom:20px}.lab-controls .controls-panel{padding-top:16px}
.controls-panel{display:grid;gap:0}.control-row{display:grid;grid-template-columns:minmax(130px,.7fr) minmax(0,1.3fr) minmax(64px,auto);align-items:center;gap:12px;padding:12px 0}.control-row+.control-row{border-top:1px solid #ebeae5}.control-row>label,.control-label{font-size:13px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:600}.control-value{font:800 14px var(--mono);min-width:58px;text-align:right;color:var(--text)}input[type=range]{width:100%;accent-color:var(--activation)}select,.field{width:100%;background:var(--paper-soft);border:1px solid var(--line);border-radius:7px;padding:8px 9px;outline:none;font-size:16px}.segmented{display:flex;gap:2px;padding:3px;border:0;border-radius:8px;background:var(--panel-2)}.segmented button{flex:1;min-height:44px;border:0;border-radius:6px;background:transparent;padding:7px 9px;color:var(--muted);font-size:14px;font-weight:800;white-space:nowrap}.segmented button:hover:not(:disabled){color:var(--text)}.segmented button.active{color:#fff;background:var(--activation)}.segmented.compact button{min-height:40px;padding:6px 8px;font-size:13px}.topbar .segmented button.active{background:var(--text)}
.kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.kpi{padding:8px 18px;min-width:0}.kpi:first-child{padding-left:0}.kpi:last-child{padding-right:0}.kpi+.kpi{border-left:1px solid var(--line)}.kpi label{display:block;color:var(--muted);font-size:12px;letter-spacing:.09em;text-transform:uppercase;line-height:1.3}.kpi strong{display:block;font:700 21px/1.3 var(--mono);margin-top:6px;white-space:normal;overflow:visible;overflow-wrap:anywhere}.kpi small{display:block;color:var(--muted);font-size:13px;margin-top:4px;line-height:1.35}.kpi.good strong{color:var(--compute)}.kpi.warn strong{color:var(--gradient)}.kpi.bad strong{color:var(--communication)}
.callout{border:0;border-left:2px solid var(--gradient);border-radius:0;background:transparent;padding:4px 0 4px 12px;color:var(--muted);font-size:16px;line-height:1.55}.callout strong{color:var(--text)}.callout.cyan{border-left-color:var(--activation)}.callout.red{border-left-color:var(--communication)}.callout.green{border-left-color:var(--compute)}.formula+.callout,.callout+.callout,.panel-title+.callout,.panel-title+.formula{margin-top:12px}.visual .callout{color:var(--diagram-muted)}.visual .callout strong{color:var(--diagram-text)}
.formula{max-width:100%;overflow-x:auto;font:15px/1.62 var(--mono);background:var(--paper-soft);border:0;border-left:2px solid var(--line-strong);border-radius:0;padding:10px 12px;color:#344447}.formula b{color:var(--activation)}.formula .dim{color:#778487}.formula .hot{color:var(--compute)}.visual .formula{background:var(--paper-soft);color:var(--text);border-left-color:var(--line-strong)}.visual .formula .dim{color:var(--diagram-muted)}
.legend{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;color:var(--muted);font-size:13px}.legend>span{display:flex;align-items:center;gap:5px}.swatch{display:inline-block;width:15px;height:5px;border-radius:1px;background:var(--idle)}.swatch.param{background:var(--param)}.swatch.activation{background:var(--activation)}.swatch.gradient{background:var(--gradient)}.swatch.optimizer{background:var(--optimizer)}.swatch.communication{background:var(--communication)}.swatch.compute{background:var(--compute)}.swatch.idle{background:repeating-linear-gradient(135deg,#7d898b 0 2px,#d7dddc 2px 4px)}
.axis-map{width:min(720px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent}.axis-card{position:relative;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;padding:18px 0;color:var(--text)}.axis-card:hover{background:var(--paper-soft)}.axis-card.active{border-left:3px solid var(--activation);padding-left:11px}.axis-card b{display:block;font-size:17px;font-weight:650;color:var(--accent);margin-bottom:5px}.axis-card span{display:block;font-size:15px;color:var(--muted);line-height:1.6}.axis-card em{display:block;margin-top:7px;font:12px var(--mono);color:var(--muted)}
.table-wrap{overflow:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);touch-action:pan-x pan-y}table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:8px 9px;border-bottom:1px solid #ecebe6;text-align:left}th{background:var(--paper-soft);color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-size:12px;z-index:1}tr:last-child td{border-bottom:0}td.num,th.num{text-align:right}.visual .table-wrap{border-color:var(--line)}.visual table{color:var(--diagram-text)}.visual th{background:var(--paper-soft);color:var(--diagram-muted)}.visual th,.visual td{border-bottom-color:var(--line)}
.timeline-grid{display:grid;gap:2px;min-width:620px}.timeline-cell{height:30px;border-radius:3px;display:grid;place-items:center;font:750 12px var(--mono);border:1px solid transparent;background:#edf1f2;color:#50646d}.timeline-cell.forward{background:#dcefeb;border-color:#9ac6bd;color:#165c53}.timeline-cell.backward{background:#fff0d8;border-color:#d8b77b;color:#754b09}.timeline-cell.idle{background:repeating-linear-gradient(135deg,#f5f6f4 0 3px,#e7ebe9 3px 6px);color:#53615f}.timeline-cell.cursor{outline:2px solid var(--text);outline-offset:-1px}.timeline-label{display:grid;place-items:center;color:var(--diagram-muted);font:12px var(--mono)}
.memory-stack{display:flex;min-height:40px;height:auto;border:1px solid var(--line-strong);border-radius:3px;overflow:hidden;background:#edf1f2}.memory-stack span{display:grid;place-items:center;min-width:0;padding:5px 2px;overflow-wrap:anywhere;white-space:normal;text-align:center;font:700 12px/1.4 var(--mono);color:#172329;transition:width .25s}.memory-stack .param{background:#6ea8ff}.memory-stack .gradient{background:#ffc568}.memory-stack .optimizer{background:#bd8cff}.memory-stack .activation{background:#54d8d3}
.gpu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.gpu-card{position:relative;border:1px solid var(--line-strong);border-radius:3px;background:transparent;padding:10px;min-width:0}.gpu-card h4{font:800 12px var(--mono);color:var(--diagram-muted);margin:0 0 6px}.gpu-card.active{border-color:var(--compute)}.gpu-chip{min-height:44px;height:auto;padding:8px;white-space:normal;overflow-wrap:anywhere;text-align:center;border:1px solid var(--line-strong);border-radius:3px;background:#f0f4f5;display:grid;place-items:center;font:800 13px var(--mono);color:var(--text)}.gpu-chip.param{border-color:#89a9cd;color:#254e82}.gpu-chip.activation{border-color:#80b4ab;color:#165c53}
.matrix{display:grid;gap:2px}.matrix-cell{aspect-ratio:1;border-radius:2px;background:#dce3e3;min-width:0}.matrix-cell.a{background:#6f9ed7}.matrix-cell.b{background:#65aaa4}.matrix-cell.partial{background:#d2a35e}.matrix-cell.dim{opacity:.25}.matrix-brace{font:12px var(--mono);color:var(--muted);text-align:center}
.token{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);background:var(--paper-soft);font:750 12px var(--mono);color:var(--text)}.token.hot{border-color:var(--gradient);color:var(--gradient)}.expert-box{border:1px solid #b8a6d0;border-radius:6px;background:#f1edf7;padding:7px;text-align:center;font:800 12px var(--mono);color:var(--optimizer)}
.resource-grid{display:block}.resource-card{display:block;text-decoration:none;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;padding:26px 0;color:var(--text)}.resource-card:nth-child(even){border-left:0}.resource-card:hover{background:var(--paper-soft)}.resource-card .tier{display:inline-block;font:800 12px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--activation);margin-bottom:6px}.resource-card h3{font-size:18px;margin:0 0 5px}.resource-card p{font-size:16px;color:var(--muted);line-height:1.7;margin:0}.resource-card footer{display:flex;justify-content:space-between;gap:8px;color:#7a8789;font-size:13px;margin-top:9px}.resource-card.done{opacity:.55}.resource-card.done h3{text-decoration:line-through}.resource-check{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;display:grid;place-items:center;flex:0 0 auto}
.quiz-card{max-width:720px;margin:0 auto 32px;padding:0}.quiz-card h2{font-size:23px;line-height:1.25}.quiz-options{display:grid;gap:0;margin:18px 0;border-top:1px solid var(--line)}.quiz-option{text-align:left;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:12px 4px;color:#425154;font-size:16px}.quiz-option:hover:not(:disabled){background:var(--paper-soft);padding-left:9px}.quiz-option.correct{border-left:3px solid var(--compute);background:#edf7f1;padding-left:10px}.quiz-option.wrong{border-left:3px solid var(--communication);background:#fbf0f2;padding-left:10px}.quiz-explanation{display:none}.quiz-explanation.show{display:block}.progress-track{height:4px;border-radius:4px;background:#e1e5e3;overflow:hidden}.progress-track span{display:block;height:100%;background:var(--activation);transition:width .2s}
.svg-label{fill:var(--diagram-muted);font:11px var(--mono)}.svg-title{fill:var(--diagram-text);font:700 13px var(--sans)}.svg-rank{fill:#08675f;font:700 11px var(--mono)}.svg-link{stroke:#a6b8c1;stroke-width:2;fill:none}.svg-link.active{stroke:var(--communication);stroke-width:3;stroke-dasharray:6 4}.packet{fill:var(--communication)}.flow-path{fill:none;stroke:var(--communication);stroke-width:2;stroke-dasharray:5 4}.attention-tile{fill:#edf2f4;stroke:#b8c6cc}.attention-tile.done{fill:#bce1d8;stroke:#438e7f}.attention-tile.masked{fill:#f6f6f3;stroke:#d8dedc}.node-box{fill:#f1f5f6;stroke:#b8c6cc}.gpu-box{fill:#e5eef5;stroke:#9eb5c6}.gpu-box.hot{stroke:var(--communication);stroke-width:2}.group-halo{fill:none;stroke-width:2;stroke-dasharray:5 4}

/* Lifecycle phrases are prose, unlike the compact pipeline clock cells. */
#data-flow .timeline-grid{width:100%;min-width:0;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px}
#data-flow .timeline-cell{min-width:0;min-height:90px;height:auto;padding:10px;white-space:normal;overflow-wrap:break-word;text-align:left;align-content:center;font:600 13px/1.5 var(--sans)}
#data-ranks .memory-stack{height:auto!important;min-height:48px}
#pipeline-timeline{overflow-x:auto;padding:2px 0 6px}
#pipeline-timeline .timeline-grid{width:max-content}

/* responsive.css */
@media(max-width:960px){.gpu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .site-header,main,#main{width:calc(100% - 40px)}
  .article-intro{margin-top:44px}.article-intro>p{font-size:18px}
  .chapter{padding-bottom:48px;margin-bottom:48px}.table-of-contents{margin-bottom:52px}
  .visual.pad{padding:20px}.gpu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .figure-transport [data-phase]{flex-basis:100%;order:2}.figure-transport label{margin-left:auto}
  .stage-actions{gap:10px}.segmented{flex-wrap:wrap}
  .legend-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){
  #data-flow .timeline-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #data-flow .timeline-cell{padding:9px;font-size:13px}
  .stage-head,.article-intro,.stage-column{overflow-wrap:break-word}
  .stage-actions>.formula{min-width:0}
  .reading-settings .global-controls{align-items:stretch}
  .topology-select select{width:100%;min-width:0}
  .segmented{max-width:100%;min-width:0}.segmented button{white-space:normal}
  .panel-title>.mono{overflow-wrap:anywhere}

  .site-header,main,#main{width:calc(100% - 32px)}.site-header{padding:18px 0}
  .site-name{font-size:15px}.article-intro{margin-top:36px}
  .table-of-contents{gap:7px 16px}.table-of-contents a{font-size:14px}.table-of-contents b{display:block;margin:0}
  .axis-map{grid-template-columns:1fr}.axis-card{padding:16px 0}
  .control-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}.control-row>label{grid-column:1/-1}.control-value{min-width:64px}.control-row>select{grid-column:1/-1}
  .kpi-grid{grid-template-columns:1fr;gap:16px}.kpi,.kpi:first-child,.kpi:last-child{padding:0 0 16px;border:0;border-bottom:1px solid var(--line)}.kpi strong{font-size:22px}.kpi label{font-size:13px}.kpi small{font-size:14px}
  .formula{overflow-x:auto;font-size:13px}.visual.pad{padding:16px}.visual .panel-title{display:block}.visual .panel-title h3{font-size:18px}
  .panel-title{gap:12px}.resource-card footer{flex-wrap:wrap}.quiz-card h2{font-size:24px}.dialog-card{padding:26px 20px}
  .gpu-card h4{font-size:11px}.gpu-chip{font-size:12px}.memory-stack span{font-size:10px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}.flow-path,.svg-link.active{stroke-dasharray:none}}
@media print{.site-header,.reading-settings,.lab-controls,.figure-transport{display:none}.chapter{break-before:page}.visual{overflow:visible}.visual svg{min-width:0}main,#main{width:100%}}

/* Prediction exercise map */
.drill-map{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.drill-map button{height:44px;border:1px solid var(--line);border-radius:7px;background:var(--paper-soft);color:var(--muted);display:flex;align-items:center;justify-content:center;gap:5px}.drill-map button.active{border-color:var(--activation);color:var(--text);background:#eaf5f3}.drill-map i{width:6px;height:6px;border-radius:50%}