body { display: flex; flex-direction: column; }
header { order: 0; }.intro{order:1}.case { order: 2; }.architectures { order: 3; } main { order: 4; } footer { order: 5; }
.jump { color: var(--cyan); font-size: 12px; }
.board-controls{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:0 0 12px;padding:11px 14px;background:#071d20;border:1px solid #17464a;border-radius:9px}.board-controls strong{display:block;margin-top:3px}.board-controls .controls{justify-content:flex-end}
.intro{padding:44px 5vw 34px;background:radial-gradient(circle at 80% 0,#123c40 0,transparent 38%),#041719;border-bottom:1px solid #17464a}.intro-lead{max-width:980px}.intro h2{margin:7px 0 10px;font-size:clamp(28px,4vw,48px);line-height:1.08}.intro-lead p{max-width:900px;color:#b9d7d9;font-size:17px;line-height:1.55}.intro-lead strong{display:inline-block;padding:8px 12px;background:#5a4215;color:#ffe29a;border-radius:6px;font:700 12px ui-monospace}.intro-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0 16px}.intro-cards article{padding:20px;background:#071f22;border:1px solid #287077;border-radius:10px}.intro-cards span{color:var(--cyan);font:700 11px ui-monospace}.intro-cards h3{margin:9px 0}.intro-cards p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.intro-rule{padding:14px 18px;border-left:4px solid var(--green);background:#0b292d;font-size:14px;line-height:1.5}.intro-rule a{color:var(--cyan)}
.case { padding: 34px 5vw; border-top: 1px solid #17464a; background: #051a1d; }
.case-head { display: flex; align-items: end; justify-content: space-between; }
.case h2 { margin: .2rem 0; font-size: 28px; }
.verdict { max-width: 1000px; font-size: 17px; line-height: 1.55; }
.cards, .tradeoffs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0; }
.cards article, .tradeoffs article, .evidence { padding: 18px; background: var(--panel); border: 1px solid #24585e; border-radius: 10px; }
.cards b { display: block; color: var(--cyan); font: 700 21px ui-monospace; }
.cards em, .note { color: var(--muted); font-size: 12px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--panel); }
th, td { text-align: right; padding: 10px; border-bottom: 1px solid #1b464a; font: 13px ui-monospace; }
th:first-child, td:first-child { text-align: left; }
.pro { color: var(--green); }
.con { color: var(--amber); }
summary { cursor: pointer; color: var(--cyan); font-weight: 700; }
.evidence { margin-top: 10px; line-height: 1.55; }
.evidence a { color: var(--cyan); }
.lab { margin: 24px 0; padding: 20px; border: 2px solid #2b7278; border-radius: 12px; background: #061d20; }.lab h3 small { color: var(--amber); font-size: 11px; }.knobs { display: grid; grid-template-columns: repeat(6, minmax(105px,1fr)); gap: 10px; }.knobs label { display: grid; gap: 4px; }.knobs input { width: 100%; }.lab-graphs { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 14px; }.decision { margin: 16px 0; padding: 15px; border-radius: 8px; font-weight: 800; text-align: center; }.decision.good { background: #145c38; color: var(--green); }.decision.caution { background: #5a4215; color: #ffe29a; }.bar.budget { background: #6e7e82; }.bar-row meter { width: 100%; accent-color: var(--cyan); }.donut-row { display:flex;justify-content:space-around;margin-top:20px}.donut{--value:.5;width:110px;height:110px;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle,#071f22 54%,transparent 56%),conic-gradient(var(--cyan) calc(var(--value)*1turn),#17383b 0)}.donut b,.donut span{display:block}.donut span{color:var(--muted);font-size:10px}.warnings p{margin:7px 0;padding:9px 12px;border-left:3px solid var(--amber);background:#30260e;color:#ffe6ab;font-size:12px}
.claim-strip{display:grid;grid-template-columns:2fr 2fr auto;gap:18px;align-items:center;padding:17px;margin:18px 0;border:2px solid var(--amber);border-radius:10px;background:#111f1e}.claim-strip h3{margin:4px 0}.claim-strip p{margin:5px 0;color:var(--muted);font-size:12px}.claim-strip>a{color:var(--cyan);font-size:12px}.claim-states{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.claim-states span{padding:9px;border-radius:6px;font:700 10px ui-monospace}.claim-states b{font-weight:400}.measured-state{background:#145c38;color:var(--green)}.simulated-state{background:#244f55;color:var(--cyan)}.missing-state{background:#5a4215;color:#ffe29a}
.charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0; }
figure { margin: 0; padding: 18px; background: #071f22; border: 1px solid #24585e; border-radius: 10px; }
figcaption strong, figcaption span { display: block; }
figcaption span { min-height: 38px; margin-top: 5px; color: var(--muted); font-size: 12px; }
.bar-chart { margin-top: 15px; }
.bar-row { display: grid; grid-template-columns: 58px 1fr 72px; align-items: center; gap: 8px; margin: 9px 0; font: 11px ui-monospace; }
.storage-row{grid-template-columns:90px 1fr 145px}.storage-row b{text-align:right}.storage-row small{display:block;color:var(--muted);font-weight:400}
.delta-row{display:grid;grid-template-columns:100px 1fr 45px;gap:8px;align-items:center;margin:8px 0;font:10px ui-monospace}.delta-row span small{display:block;color:var(--muted)}.delta-track{position:relative;height:12px;background:linear-gradient(to right,#301c1c 0 50%,#102f33 50%);border-radius:3px}.delta-track:after{content:"";position:absolute;left:50%;height:100%;border-left:1px solid #a1b8ba}.delta-track i{position:absolute;height:100%}.delta-track .gain{background:var(--green)}.delta-track .loss{background:#ff7777}.delta-row b.gain{color:var(--green)}.delta-row b.loss{color:#ff7777}
.bar-track { height: 14px; background: #102f33; border-radius: 4px; overflow: hidden; }
.bar { height: 100%; min-width: 2px; border-radius: 4px; }
.bar.resident, .line-resident { background: var(--amber); stroke: var(--amber); }
.bar.serial, .line-serial { background: var(--cyan); stroke: var(--cyan); }
.chart-takeaway { min-height: 48px; padding: 9px; border-left: 3px solid var(--green); color: var(--ink); font-size: 12px; line-height: 1.45; }
.cycle-stack { display: flex; height: 48px; margin: 32px 0 14px; overflow: hidden; border-radius: 6px; font: 11px ui-monospace; }
.cycle-stack span { display: grid; place-items: center; color: #031315; }.cycle-stack span:nth-child(1) { background: var(--amber); }.cycle-stack span:nth-child(2) { background: var(--cyan); }.cycle-stack span:nth-child(3) { background: var(--green); }
.cycle-total { text-align: center; font: 12px ui-monospace; }
#throughput-chart { width: 100%; margin-top: 6px; }
.chart-grid { stroke: #194348; stroke-width: 1; }.chart-line { fill: none; stroke-width: 4; }.chart-point { stroke: #031315; stroke-width: 2; }.chart-label { fill: var(--muted); font: 11px ui-monospace; }
footer { height: auto; min-height: 54px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--cyan); }
#build-info { font-family: ui-monospace, monospace; }
.architectures{padding:34px 5vw;border-top:1px solid #17464a;background:#041719}.architecture-head{display:flex;align-items:end;justify-content:space-between;gap:18px}.architecture-head h2{margin:.2rem 0;font-size:28px}.flow-layout{display:grid;grid-template-columns:minmax(620px,1fr) 260px;gap:16px;align-items:stretch}.flow-layout>svg{width:100%;min-height:440px;background:#071f22;border:1px solid #24585e;border-radius:12px}.flow-key{border:1px solid #24585e;border-radius:12px}.flow-key strong{display:block;color:var(--amber);font:700 12px ui-monospace;margin-bottom:16px}.flow-key span{display:block;margin:13px 0;font-size:12px}.flow-key i{display:inline-block;width:22px;height:4px;margin-right:9px;vertical-align:middle}.weight-key,.flow-edge.weights{stroke:var(--amber)}.activation-key,.flow-edge.activation{stroke:var(--cyan)}.kv-key,.flow-edge.kv{stroke:var(--green)}.control-key,.flow-edge.control{stroke:#bb8cff}.flow-edge{fill:none;stroke-width:4;opacity:.72}.flow-edge.control{stroke-dasharray:7 7}.flow-particle.weights{fill:var(--amber)}.flow-particle.activation{fill:var(--cyan)}.flow-particle.kv{fill:var(--green)}.flow-particle.control{fill:#bb8cff}.flow-node rect{fill:#0b292d;stroke:#287077;stroke-width:2}.flow-node.inactive{opacity:.18}.flow-node text{text-anchor:middle;fill:var(--ink);font:700 13px ui-monospace}.flow-node .sub{fill:var(--muted);font-size:10px;font-weight:400}.flow-label{fill:#bdd9db;font:10px ui-monospace;text-anchor:middle;paint-order:stroke;stroke:#071f22;stroke-width:5px;stroke-linejoin:round}.flow-key p{color:var(--muted);font-size:12px;line-height:1.5}marker path{fill:context-stroke}
@media (max-width: 1100px) { .charts,.lab-graphs { grid-template-columns: 1fr; }.knobs{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 900px) { .cards, .tradeoffs,.flow-layout,.claim-strip,.intro-cards { grid-template-columns: 1fr; } .case-head,.architecture-head { align-items: start; gap: 15px; }.flow-layout>svg{min-height:0}.board-controls{align-items:flex-start;flex-direction:column} }
.notebook-nav{position:relative;z-index:30;display:flex;justify-content:center;align-items:center;gap:.8rem;flex-wrap:wrap;padding:.75rem 1rem;background:#f5f0df;border-bottom:2px solid #292821;font:12px ui-monospace,monospace}.notebook-nav a{color:#292821;text-decoration:none;padding:.3rem}.notebook-nav a:hover,.notebook-nav a:focus-visible,.notebook-nav a.active{background:#f0d85b;color:#292821}
.lab-glossary{display:flex;justify-content:center;gap:.45rem;flex-wrap:wrap;padding:.55rem 1rem;border-bottom:1px solid #17464a;background:#061d20;font:11px ui-monospace,monospace;color:var(--muted)}.lab-glossary abbr{color:var(--cyan);cursor:help;text-underline-offset:3px}.lab-glossary abbr:focus{outline:2px solid var(--amber);outline-offset:2px}.lab-glossary span{margin-right:1rem}