:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: an editorial long read. Part 1 pins an isometric schematic on the left while the story scrolls on the right;
   Parts 2 and 3 keep the same figure-left, text-right grid for the live instruments. One light paper theme by design. */
:root{
  --paper:#ffffff;--wash:#f5f5f1;--ink:#1b1b19;--ink-2:#2b2b28;--muted:#6b6b65;--faint:#9b9b94;--rule:#dcdcd6;--rule-2:#ececE6;
  --rust:#a63a2b;--rust-wash:#f7ebe7;
  --leaf:#6fa32c;--leaf-ink:#5b8a1f;--leaf-soft:#d5e2b9;--leaf-wash:#f2f6ea;
  --steel:#8e9089;--steel-dark:#666861;
  --f-serif:'Source Serif 4','Source Serif Pro',Georgia,'Times New Roman',serif;
  --f-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color-scheme:light}
html,body{background:var(--paper);color:var(--ink)}
body{margin:0;font-family:var(--f-serif);font-size:19px;line-height:1.66;-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
[hidden]{display:none!important}
a{color:inherit;text-decoration-color:var(--rule);text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,3vw,32px)}
p{margin:0}
h1,h2,h3{font-family:var(--f-serif);margin:0;text-wrap:balance;color:var(--ink)}
.sans{font-family:var(--f-sans)}
.num{font-family:var(--f-sans);font-variant-numeric:tabular-nums}
.label{font-family:var(--f-sans);font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.eyebrow{font-family:var(--f-sans);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
.fn{font-family:var(--f-sans);font-size:.62em;font-weight:500;line-height:0;vertical-align:.62em;margin-left:1px;color:var(--faint)}
.fn a{text-decoration:underline;text-decoration-color:var(--rule);color:var(--muted)}
.fn a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--leaf);outline-offset:3px}

/* masthead */
.mast{padding-block:28px 0}
.mast-rule{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--rule);padding-top:14px}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(28px,5vw,64px) 28px}
.hero-txt{display:flex;flex-direction:column;gap:22px;min-width:0}
.hero h1{font-size:clamp(46px,7vw,96px);line-height:.98;font-weight:600;letter-spacing:-.015em}
.dek{font-size:clamp(20px,2.2vw,25px);line-height:1.45;color:var(--ink-2);max-width:30ch}
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:8px}
.hero-stats div{display:flex;flex-direction:column;gap:4px;border-top:2px solid var(--leaf);padding-top:10px}
.hero-stats div:nth-child(n+2){border-top-color:var(--rule)}
.hero-stats b{font-size:clamp(18px,2vw,24px);font-weight:600;color:var(--ink)}
.hero-fig{position:relative;display:flex;flex-direction:column;gap:6px;align-items:center}
.hero-stage{position:relative;width:100%;aspect-ratio:4/5;max-height:72vh}
.hero-stage svg{position:absolute;inset:0;width:100%;height:100%}
.drag-hint{display:none}.has3d .drag-hint{display:inline}
.gl{position:absolute;inset:0;width:100%!important;height:100%!important;cursor:grab;touch-action:pan-y;transition:none}
.gl.grabbing{cursor:grabbing}
.co3{position:absolute;width:0;height:0;pointer-events:none;transition:opacity .35s ease;z-index:2}
.co3 .bx{position:absolute;left:0;top:0;background:rgba(255,255,255,.95);padding:6px 10px 7px;text-align:center;font-family:var(--f-sans);white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 18px rgba(27,27,25,.08);border-radius:2px}
.co3 b{display:block;font-weight:500;font-size:15px;color:var(--ink);line-height:1.3}
.co3 span{display:block;font-size:12.5px;color:var(--muted);line-height:1.35}
.co3 .ld{position:absolute;left:0;top:0;height:1px;background:var(--ink-2);opacity:.5;transform-origin:0 0}
.co3::before{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 3px rgba(111,163,44,.25)}
.snap{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lede{max-width:760px;margin:0 auto;font-size:20px;line-height:1.7;color:var(--ink-2)}
.ask{max-width:760px;margin:10px auto 0;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--rule);padding-top:20px}
.ask label{font-family:var(--f-sans);font-size:13px;font-weight:500;color:var(--muted)}
textarea{font:inherit;font-size:19px;line-height:1.5;color:var(--ink);background:var(--wash);border:0;border-bottom:1px solid var(--steel);border-radius:2px;padding:12px 14px;resize:vertical;width:100%;box-sizing:border-box}
.tokens{display:flex;flex-wrap:wrap;gap:4px;max-height:140px;overflow:auto}
.tok{font-family:var(--f-sans);font-size:13px;padding:2px 6px;border-radius:2px;white-space:pre;color:var(--ink-2)}
.tok:nth-child(3n+1){background:var(--leaf-wash)}.tok:nth-child(3n+2){background:#efefea}.tok:nth-child(3n){background:#e4ecd2}
.ask-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.note{font-family:var(--f-sans);font-size:13px;line-height:1.5;color:var(--muted)}
.btn{font-family:var(--f-sans);font-size:15px;font-weight:500;background:var(--ink);color:#fff;border:0;border-radius:3px;padding:10px 16px;cursor:pointer}
.btn:hover{background:#000}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.btn.ghost:hover{border-color:var(--ink)}
.linkbtn{font-family:var(--f-sans);font-size:13px;color:var(--ink-2);background:none;border:0;padding:0;text-decoration:underline;text-decoration-color:var(--steel);text-underline-offset:4px;cursor:pointer}
.chapter-foot{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--rule);padding-block:14px 0;margin-top:clamp(40px,6vw,72px)}

/* part 1: the story */
.story{padding-block:24px 40px}
.story-grid{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:clamp(32px,4.5vw,72px);align-items:start}
.story-fig{position:sticky;top:calc(env(safe-area-inset-top,0px) + 18px);display:flex;flex-direction:column;gap:14px}
.fig-head{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--rule);padding-top:12px}
.stage{position:relative;width:100%;aspect-ratio:16/10.4;max-height:58vh}
.stage svg{position:absolute;inset:0;width:100%;height:100%;transition:opacity .6s ease}
.stage svg.off{opacity:0;pointer-events:none}
.co{position:absolute;transform:translate(-50%,-100%);background:var(--paper);padding:6px 10px 8px;text-align:center;font-family:var(--f-sans);white-space:nowrap;transition:opacity .45s ease;pointer-events:none;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.co b{display:block;font-weight:500;font-size:15px;color:var(--ink);line-height:1.3}
.co span{display:block;font-size:12.5px;color:var(--muted);line-height:1.35}
.co i{display:block;width:22px;height:2px;background:var(--leaf);margin:6px auto 0}
.stage.moving .co{opacity:0}
#journey{overflow-x:clip}
.status{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.st{display:flex;flex-direction:column;gap:7px;font-family:var(--f-sans);min-width:0}
.st .k{font-size:14px;color:var(--ink-2)}
.st .k.cu{color:var(--leaf-ink)}
.st .bar{height:3px;background:var(--rule);transition:background .5s}
.st[data-s="active"] .bar{background:var(--leaf)}
.st[data-s="soft"] .bar{background:var(--leaf-soft)}
.st[data-s="hold"] .bar{background:var(--steel-dark)}
.st .v{font-size:12.5px;color:var(--muted);line-height:1.35}
.fig-cap{font-size:18px;line-height:1.5;color:var(--ink-2);min-height:3em}
.fig-foot{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.fig-foot .label{font-size:11px}
.steps{display:flex;flex-direction:column}
.step{min-height:88vh;padding-block:14vh 6vh;display:flex;flex-direction:column;gap:22px}
.step-txt{display:flex;flex-direction:column;gap:22px;min-width:0}
.step:first-child{padding-top:3vh}
.step:last-child{min-height:70vh}
.step h2{font-size:clamp(30px,3.3vw,44px);line-height:1.12;font-weight:600;letter-spacing:-.005em}
.step p{color:var(--ink-2)}
.step .tokens{max-height:120px}
.step-fig{display:none}
.big{font-family:var(--f-sans);font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
/* static view */
.story.is-static .story-grid{grid-template-columns:minmax(0,1fr)}
.story.is-static .story-fig{display:none}
.story.is-static .step{min-height:0;padding-block:20px 48px;display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.story.is-static .step-fig{display:flex;flex-direction:column;gap:12px}
.story.is-static .stage{max-height:none}
.static-bar{display:none;justify-content:flex-end;padding-bottom:8px}
.story.is-static .static-bar{display:flex}

/* iso drawing */
.iso polygon,.iso polyline,.iso line,.iso path{transition:fill .6s ease,stroke .6s ease,opacity .6s ease}
.iso polygon{stroke:rgba(30,30,25,.10);stroke-width:.6;stroke-linejoin:round}
.m-board .ft{fill:#d6d7d0}.m-board .fl{fill:#bcbdb6}.m-board .fr{fill:#acada6}
.m-sub .ft{fill:#f3f3ef}.m-sub .fl{fill:#dcddd6}.m-sub .fr{fill:#cdcec7}
.m-chip .ft{fill:#c9cbc2}.m-chip .fl{fill:#b2b4ab}.m-chip .fr{fill:#a4a69d}
.m-mem .ft{fill:#cdcfc7}.m-mem .fl{fill:#b5b7ae}.m-mem .fr{fill:#a6a8a0}
.m-conn .ft{fill:#3b3c39}.m-conn .fl{fill:#222321}.m-conn .fr{fill:#2c2d2a}
.m-dark .ft{fill:#8d8f88}.m-dark .fl{fill:#73756e}.m-dark .fr{fill:#686a63}
.m-post .ft{fill:#4a4b47}.m-post .fl{fill:#3a3b38}.m-post .fr{fill:#454642}
.cell{fill:#dcded5;stroke:none!important}
.face{fill:#e9eae4;stroke:none!important}
.face.k-gpu{fill:#c5d3a6}.face.k-cpu{fill:#c8cac2}.face.k-sw{fill:#3d3e3a}.face.k-pw{fill:#e2e3dd}.face.k-dot{fill:#9fa198}
.pt[data-s="soft"] .m-chip .ft,.pt[data-s="soft"] .m-mem .ft{fill:#dbe6c3}
.pt[data-s="soft"] .m-chip .fl,.pt[data-s="soft"] .m-mem .fl{fill:#c5d1ac}
.pt[data-s="soft"] .m-chip .fr,.pt[data-s="soft"] .m-mem .fr{fill:#b8c49f}
.pt[data-s="soft"] .cell{fill:#eef3e2}
.pt[data-s="active"] .m-chip .ft,.pt[data-s="active"] .m-mem .ft{fill:#76a930}
.pt[data-s="active"] .m-chip .fl,.pt[data-s="active"] .m-mem .fl{fill:#5f8f22}
.pt[data-s="active"] .m-chip .fr,.pt[data-s="active"] .m-mem .fr{fill:#56811f}
.pt[data-s="active"] .cell{fill:#cfe4a3}
.pt[data-s="kv"] .m-mem .ft{fill:#a9aba3}.pt[data-s="kv"] .m-mem .fl{fill:#93958d}.pt[data-s="kv"] .m-mem .fr{fill:#878981}
.pt[data-s="kv"] .m-mem.lt .ft{fill:#76a930}.pt[data-s="kv"] .m-mem.lt .fl{fill:#5f8f22}.pt[data-s="kv"] .m-mem.lt .fr{fill:#56811f}
.pt[data-s="hold"] .m-mem .ft{fill:#a9aba3}.pt[data-s="hold"] .m-mem .fl{fill:#93958d}.pt[data-s="hold"] .m-mem .fr{fill:#878981}
.cable{fill:none;stroke:#b4b5ae;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pt[data-s="active"] .cable{stroke:#76a930}
.flow{fill:none;stroke:#6fa32c;stroke-width:2.2;stroke-dasharray:5 7;stroke-linecap:round;opacity:0}
.iso[data-flow="hbm"] .flow.f-hbm,.iso[data-flow="link"] .flow.f-link{opacity:1;animation:dash 1.1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-24}}
.cold{opacity:0}
.iso[data-cold="1"] .cold{opacity:1}
.m-cold .ft{fill:#ecd3cc}.m-cold .fl{fill:#ddb7ad}.m-cold .fr{fill:#d2a89d}
.pipe{fill:none;stroke:#a63a2b;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.iso[data-pulse="1"] .pt[data-s="active"] .cell{animation:pulse 1.4s ease-in-out infinite;animation-delay:var(--d,0ms)}
@keyframes pulse{50%{fill:#9cc85a}}
.slab.hl .ft{fill:#dbe6c3}.slab.hl .fl{fill:#c5d1ac}

/* part 2: instruments */
.part-head{padding-block:clamp(56px,8vw,96px) 10px;max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:16px;text-align:center}
.part-head h2{font-size:clamp(36px,5vw,60px);line-height:1.06;font-weight:600}
.part-head p{color:var(--ink-2);font-size:20px}
.bench{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid var(--rule);margin-top:28px}
.bench .wrap{display:flex;flex-direction:column;gap:12px;padding-block:12px}
.bench-sum{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--f-sans);font-size:14.5px;color:var(--ink-2)}
.bench-sum b{font-weight:600;color:var(--ink)}
.bench-sum .sep{color:var(--faint)}
.bench-sum .linkbtn{margin-left:auto}
.bench-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) repeat(3,minmax(0,1.3fr));gap:12px 16px;align-items:end}
.bench.collapsed .bench-grid{display:none}
label.ctl{display:flex;flex-direction:column;gap:5px;font-family:var(--f-sans);font-size:12.5px;font-weight:500;color:var(--muted);min-width:0}
select{font-family:var(--f-sans);font-size:14.5px;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:3px;padding:7px 8px;min-width:0;width:100%}
input[type=range]{width:100%;accent-color:var(--leaf);margin:0}
.rr{display:flex;align-items:center;gap:10px}
.rr output{font-family:var(--f-sans);font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink);min-width:54px;text-align:right}
.chapter{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:clamp(32px,4.5vw,72px);align-items:start;padding-block:clamp(48px,7vw,88px) 8px;border-bottom:1px solid var(--rule-2)}
.chapter:last-of-type{border-bottom:0}
.inst{display:flex;flex-direction:column;gap:18px;min-width:0}
.txt{display:flex;flex-direction:column;gap:20px;min-width:0}
.txt h2{font-size:clamp(28px,3vw,40px);line-height:1.14;font-weight:600}
.txt p{color:var(--ink-2)}
.readouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.ro{border-top:1px solid var(--rule);padding-top:10px;display:flex;flex-direction:column;gap:3px;font-family:var(--f-sans);min-width:0}
.ro .k{font-size:12.5px;color:var(--muted)}
.ro .v{font-size:24px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2}
.ro .s{font-size:12.5px;color:var(--muted);line-height:1.4}
.meters{display:flex;flex-direction:column;gap:10px}
.meter{display:grid;grid-template-columns:150px minmax(0,1fr) 72px;gap:12px;align-items:center;font-family:var(--f-sans);font-size:14px;color:var(--ink-2)}
.meter .track{height:6px;background:var(--rule-2)}
.meter .fill{height:100%;transition:width .25s}
.meter .val{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.kvrow{grid-template-columns:130px minmax(0,1fr) 150px}
.chart{width:100%;height:auto;display:block;font-size:11px}
.chart text{font-family:var(--f-sans);fill:var(--muted)}
.membar{display:flex;height:26px;background:#f1f1ec;overflow:hidden}
.membar > div{height:100%;transition:width .25s}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--f-sans);font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.tbl-wrap{overflow-x:auto;border-top:1px solid var(--ink)}
table{border-collapse:collapse;width:100%;font-family:var(--f-sans);font-size:14px;min-width:760px;font-variant-numeric:tabular-nums}
th,td{padding:10px 10px;border-bottom:1px solid var(--rule);text-align:right;vertical-align:top}
th:first-child,td:first-child{text-align:left}
th{font-weight:500;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);vertical-align:bottom;line-height:1.35}
td .sub{display:block;font-size:12px;color:var(--muted);margin-top:2px}
tr.cur td{background:var(--leaf-wash)}
.err{font-family:var(--f-sans);font-size:14px;color:var(--rust)}
.pill{display:inline-block;font-family:var(--f-sans);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:2px;margin-right:8px}
.pill.good{color:var(--leaf-ink);background:var(--leaf-wash)}.pill.bad{color:var(--rust);background:var(--rust-wash)}
.checks{display:flex;flex-direction:column;gap:8px;font-family:var(--f-sans);font-size:14.5px;color:var(--ink-2)}
.score{font-family:var(--f-serif);font-size:clamp(34px,5vw,54px);font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.score.bad{color:var(--rust)}
.fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.notes{columns:2;column-gap:40px;font-family:var(--f-sans);font-size:13.5px;line-height:1.5;color:var(--ink-2);padding-left:22px}
.notes li{margin-bottom:8px;break-inside:avoid}
.notes li:target{background:var(--leaf-wash)}
.method{display:flex;flex-direction:column;gap:14px;max-width:760px;font-size:17px;color:var(--ink-2)}
.foot{border-top:1px solid var(--rule);margin-top:48px;padding-block:16px 48px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.swipe{display:none}

#journey.has3d .stage{aspect-ratio:16/10.4}
@media (max-width:1100px){.bench-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.bench-grid > label:nth-child(n+5){grid-column:span 2}}
@media (max-width:900px){
  .story-grid,.chapter{grid-template-columns:minmax(0,1fr)}
  .story-fig{display:none}
  .step{min-height:0;padding-block:28px 36px;border-top:1px solid var(--rule)}
  .step-fig{display:flex;flex-direction:column;gap:12px;order:-1}
  .story.is-static .step{display:flex;flex-direction:column}
  .static-bar{display:none!important}
  .stage{max-height:none}
  .status{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px}
  .bench-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bench-grid > label:nth-child(n){grid-column:auto}
  .notes{columns:1}
  .swipe{display:block}
  .co b{font-size:13px}.co span{font-size:11px}.co{padding:4px 7px 6px;white-space:normal;max-width:44%}
}
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr)}.hero-stage{aspect-ratio:1/1;max-height:62vh}
  #journey.has3d .story-fig{display:flex;position:sticky;top:0;z-index:6;background:var(--paper);padding-block:8px 8px;gap:8px;box-shadow:0 10px 14px -14px rgba(0,0,0,.25)}
  #journey.has3d .fig-cap,#journey.has3d .fig-foot{display:none}
  #journey.has3d .stage{max-height:34vh;aspect-ratio:16/10}
  #journey.has3d .status{gap:6px 10px}
  #journey.has3d .st{gap:4px}#journey.has3d .st .k{font-size:12px}#journey.has3d .st .v{font-size:11px}
  #journey.has3d .step{min-height:78vh;border-top:0;padding-block:18px 8vh}
  #journey.has3d .step-fig{display:none}
  #journey.has3d .static-bar{display:flex!important;justify-content:flex-end}
  #journey.has3d #btnScrolly{display:none}
  #journey.has3d.is-static #btnScrolly{display:inline}#journey.has3d.is-static #btnStatic2{display:none}
  #journey.has3d.is-static .story-fig{display:none}
  #journey.has3d.is-static .step{min-height:0;border-top:1px solid var(--rule);padding-block:24px 32px}
  #journey.has3d.is-static .step-fig{display:flex}
  .co3 .bx{padding:4px 7px 5px}.co3 b{font-size:12.5px}.co3 span{display:none}
}
.static-bar #btnStatic2{display:none}
.story.is-static .static-bar #btnStatic2{display:none}
@media (max-width:520px){.hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.co span{display:none}.co i{margin-top:4px}body{font-size:18px}.meter{grid-template-columns:96px minmax(0,1fr) 64px}.kvrow{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}.kvrow .track{grid-column:1/-1;grid-row:2}.fieldset{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}