:root{--bg:#0d1117;--panel:#161b22;--line:#30363d;--fg:#e6edf3;--muted:#a3adba;--accent:#58a6ff;--ci:#f0b429;--ann:#3fb950;--spec:#d29922;--warn:#f85149;--radius:10px;color-scheme:dark}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent)}a:focus-visible,summary:focus-visible,.btn:focus-visible{outline:3px solid var(--ci);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--fg);color:var(--bg);padding:8px 12px;z-index:9}
header.site{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(13,17,23,.94);backdrop-filter:blur(6px);z-index:5}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding-top:10px;padding-bottom:10px}
.brand{font-weight:800;color:var(--fg);text-decoration:none;letter-spacing:-.01em}.brand span{color:var(--accent)}
nav{display:flex;flex-wrap:wrap;gap:4px}nav a{color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:6px;font-size:15px}nav a:hover,nav a[aria-current]{color:var(--fg);background:var(--panel)}
h1{font-size:clamp(30px,5vw,48px);line-height:1.1;letter-spacing:-.02em;margin:28px 0 10px}
h2{font-size:clamp(22px,3vw,28px);line-height:1.2;margin:8px 0 10px}
.lede{font-size:clamp(17px,2.2vw,20px);color:#c9d1d9;max-width:760px}
.kicker{text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--muted);margin:24px 0 0}
.answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:22px 0}
.ans{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;text-decoration:none;color:var(--fg)}
.ans:hover{border-color:var(--accent)}.ans span{display:block;color:var(--muted);font-size:14px}.ans strong{display:block;font-size:19px;margin:2px 0}.ans small{color:var(--muted)}
.view,#scorecard,.cta{border-top:1px solid var(--line);padding:18px 0 26px;margin-top:10px}
figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
figcaption{color:var(--muted);font-size:14px;margin-top:8px}
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:#21262d}.chart .tick,.chart .axis,.chart .sublbl{fill:var(--muted);font-size:12px}.chart .axis{font-size:12.5px}
.chart .lbl{fill:var(--fg);font-size:14px;font-weight:600}.chart .val{fill:var(--fg);font-size:13px}
.chart .bar{fill:var(--accent);opacity:.85}.chart .bar-unk{fill:#30363d}
.chart .hatch-bg{fill:rgba(63,185,80,.18)}.chart .hatch-line{stroke:var(--ann);stroke-width:2}.chart .bar-ann{stroke:var(--ann);stroke-width:1}
.chart .ci,.chart .ci-arrow{stroke:var(--ci);stroke-width:2.5;fill:none}
.chart .prior{fill:var(--bg);stroke:#ff7b72;stroke-width:2.5}.chart .marker{stroke:#fff;stroke-width:3}
.legend{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--muted);font-size:14px;margin:4px 0 6px}
.sw{display:inline-block;width:18px;height:10px;margin-right:6px;vertical-align:middle;border-radius:2px}
.sw-bar{background:var(--accent)}.sw-ci{height:3px;background:var(--ci)}.sw-ann{background:repeating-linear-gradient(45deg,var(--ann) 0 2px,rgba(63,185,80,.18) 2px 6px)}
.sw-prior{width:10px;height:10px;border-radius:50%;border:2px solid #ff7b72}.sw-marker{width:3px;height:14px;background:#fff}
.flag{border-left:3px solid var(--ci);background:rgba(240,180,41,.08);padding:8px 12px;border-radius:0 6px 6px 0;font-size:14.5px}
.srcline{color:var(--muted);font-size:13.5px}
details.table{margin:10px 0}summary{cursor:pointer;color:var(--accent)}
.scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:14.5px;margin:8px 0}
caption{text-align:left;color:var(--muted);padding:4px 0}th,td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}thead th{color:var(--muted);font-weight:600}
.btn{display:inline-block;background:var(--accent);color:#0d1117;font-weight:700;text-decoration:none;padding:10px 16px;border-radius:8px;margin:4px 6px 4px 0}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.tag{display:inline-block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--muted);vertical-align:middle}
.tag.spec{border-color:var(--spec);color:var(--spec)}
.spec-banner{border:2px dashed var(--spec);border-radius:var(--radius);padding:12px 16px;margin-top:24px;background:rgba(210,153,34,.08)}.spec-banner strong{color:var(--spec)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin:18px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}.card.spec{border-style:dashed;border-color:rgba(210,153,34,.6)}
.card h2{font-size:20px}dt{color:var(--muted);font-size:13px;margin-top:8px}dd{margin:2px 0 0}
.concept{border:2px dashed var(--spec);border-radius:var(--radius);padding:16px;margin:24px 0}.pitch{font-size:19px;font-style:italic}
.caveats li{margin:8px 0}
.offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:18px 0}
.offer{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column}.offer h2{font-size:19px}.offer ul{flex:1;padding-left:18px}
.price span{font-size:34px;font-weight:800}.placeholder{border-left:3px solid var(--warn);padding:8px 12px;background:rgba(248,81,73,.08)}
footer.site{border-top:1px solid var(--line);margin-top:30px;color:var(--muted);font-size:14px}
@media (max-width:640px){figure{overflow-x:auto;padding:10px}.chart{min-width:600px}figure::after{content:"← swipe to see full chart →";display:block;color:var(--muted);font-size:12px;text-align:center}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media print{:root{--bg:#fff;--panel:#fff;--line:#d0d7de;--fg:#111;--muted:#555;--accent:#0969da;--ci:#bf8700;color-scheme:light}header.site,footer.site,.cta,nav,.skip{display:none}body{font-size:12px}details.table>*{display:block}details.table summary{display:none}.view{break-inside:avoid}.chart .marker{stroke:#111}a{color:#0969da}}

/* ===== v1.1 interactive layer ===== */
.no-js .js-only{display:none!important}
.muted{color:var(--muted)}.small{font-size:13px}
/* hero */
.hero{position:relative;overflow:hidden;border-radius:0 0 var(--radius) var(--radius);margin:0 -20px;padding:0 20px;min-height:min(78vh,640px);display:flex;align-items:flex-start;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 70% 40%,#16233a,#0d1117 70%)}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.42;transform-origin:60% 50%;animation:kb 28s ease-in-out infinite alternate}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,17,23,.96) 0%,rgba(13,17,23,.82) 42%,rgba(13,17,23,.35) 100%),linear-gradient(0deg,#0d1117 0%,transparent 30%)}
@keyframes kb{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-2%,-1.5%)}}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero-copy{max-width:min(520px,48%);padding:20px 0 40px}
.hero .lede{font-size:clamp(16px,2vw,19px)}.hero-note{color:var(--muted);font-size:13.5px}
.hero-cap{position:absolute;right:20px;bottom:6px;margin:0;font-size:11.5px;color:#c9d1d9;opacity:.85}
@media (max-width:700px){.hero{min-height:760px}.hero-copy{max-width:100%}.hero-bg::after{background:linear-gradient(180deg,rgba(13,17,23,.95) 0%,rgba(13,17,23,.85) 50%,rgba(13,17,23,.7) 100%)}}
/* controls */
.controls{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:6px 0 10px}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{background:transparent;color:var(--fg);border:0;border-right:1px solid var(--line);padding:7px 12px;font:inherit;font-size:14px;cursor:pointer;min-height:36px}
.seg button:last-child{border-right:0}.seg button[aria-pressed=true]{background:var(--accent);color:#0d1117;font-weight:700}
.seg button:focus-visible,.sort select:focus-visible,.play:focus-visible,input[type=range]:focus-visible,.scen-toggle:focus-visible,g.row:focus-visible{outline:3px solid var(--ci);outline-offset:2px}
.sort{font-size:14px;color:var(--muted)}.sort select{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font:inherit;font-size:14px}
.badge{font-size:12px;font-weight:800;letter-spacing:.06em;border-radius:6px;padding:4px 8px}.badge.prelim{background:rgba(240,180,41,.16);color:var(--ci);border:1px solid var(--ci)}.badge.fc{border:1px solid #8b949e;color:#c9d1d9}
.scrub{gap:12px}.scrub input[type=range]{flex:1;min-width:180px;accent-color:var(--accent)}.scrub output{font-weight:800;font-size:18px;color:var(--fg);margin-left:4px}
.play{background:var(--accent);color:#0d1117;border:0;border-radius:50%;width:38px;height:38px;font-size:14px;cursor:pointer}
.btn.small{padding:6px 10px;font-size:13px;margin:0}
/* chart animation: bars grow, whiskers/dots/labels always visible */
.chart .hit{fill:transparent}.chart g.row[data-tip]{cursor:pointer}.chart g.row[data-tip]:hover .lbl{fill:#fff;text-decoration:underline}
.chart.anim .bar,.chart.anim .bar-ann,.chart.anim .bar-fc{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.chart.anim.in .bar,.chart.anim.in .bar-ann,.chart.anim.in .bar-fc{transform:scaleX(1)}
.chart .bar-fc{fill:#a5d6ff;opacity:.55;stroke:#a5d6ff;stroke-dasharray:4 3}
.chart.is-prelim .bar{opacity:.7}
.sw-fc{background:#a5d6ff;opacity:.6}
.ix{position:relative}
.tip{position:absolute;left:0;top:0;z-index:20;max-width:320px;background:#0b0f14;border:1px solid var(--accent);border-radius:8px;padding:10px 12px;font-size:13px;box-shadow:0 8px 30px rgba(0,0,0,.5);pointer-events:none}
.tip dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:6px 0 0}.tip dt{color:var(--muted);margin:0;font-size:12px}.tip dd{margin:0}
/* H100e explainer */
.explainer{border-top:1px solid var(--line);padding:18px 0 26px;margin-top:10px}
.gpu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14px,1fr));gap:3px;max-width:860px;margin:12px 0}
.gpu-grid i{display:block;aspect-ratio:1;border-radius:2px;background:#1c2330;border:1px solid #21262d;transition:background .25s}
.gpu-grid i.g-solid,.g.g-solid{background:var(--accent);border-color:var(--accent)}
.gpu-grid i.g-mid,.g.g-mid{background:rgba(88,166,255,.55);border-color:var(--accent)}
.gpu-grid i.g-hi,.g.g-hi{background:rgba(240,180,41,.22);border-color:var(--ci)}
.grid-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted)}.g{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px;border:1px solid}
.gpu-read{min-height:3em}
.chipeq{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin-top:8px}
.chip{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:26px;padding:0 6px;border-radius:4px;font-size:12px;font-weight:700;color:#0d1117}
.chip.h100{background:var(--accent)}.chip.tpu{background:var(--ann)}.chip.s{min-width:22px;width:22px}.chip.part{width:7px;min-width:7px;padding:0}.sep{width:20px}
/* photos */
.photo{margin:26px 0;background:none;border:0;padding:0}
.photo-frame{overflow:hidden;border-radius:var(--radius);aspect-ratio:16/7;background:#161b22}
.photo-frame img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.12);will-change:transform}
.photo figcaption{font-size:12.5px;margin-top:6px}
/* scenarios explorer */
.spec-sticky{position:sticky;top:52px;z-index:4;background:#2a2108;border:1px solid var(--spec);color:#f2cc60;border-radius:8px;padding:6px 12px;margin-top:12px;font-size:14px}
.spec-sticky strong{color:#f2cc60}
.scen h2{margin:4px 0}.scen-toggle{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;gap:8px;font-size:20px;font-weight:700;border-radius:6px}
.chev{transition:transform .25s;color:var(--muted)}.scen.open .chev{transform:rotate(180deg)}
.js .scen:not(.open) .scen-panel{display:none}
.scen-meta{margin:4px 0;font-size:13px;color:var(--muted)}
.meter{display:inline-flex;gap:3px;vertical-align:middle}.meter i{width:14px;height:8px;border-radius:2px;background:#30363d}.meter i.on{background:var(--spec)}
.steps{display:grid;gap:10px;margin-top:10px;border-left:2px dashed var(--spec);padding-left:12px}
.step-k{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#f2cc60}.step p{margin:2px 0 0}
.js .scen.open .scen-panel{animation:fadein .35s ease}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero-bg img{animation:none}.photo-frame img{transform:none!important}.chart.anim .bar,.chart.anim .bar-ann,.chart.anim .bar-fc{transform:none;transition:none}.gpu-grid i{transition:none}.js .scen.open .scen-panel{animation:none}.chev{transition:none}}
.cards.explorer{align-items:start}
@media print{.chart.anim .bar,.chart.anim .bar-ann,.chart.anim .bar-fc{transform:none!important;transition:none!important}#hero-canvas,.js-only,.hero-bg,.photo,.tip,.spec-sticky{display:none!important}.hero{min-height:0;margin:0;padding:0}.hero-copy{max-width:100%}.js .scen .scen-panel{display:block!important}}
@media print{.lede,.hero .lede,.hero-cap,.chart .val,.chart .lbl{color:#111!important}.chart .val,.chart .lbl{fill:#111!important}.chart .tick,.chart .axis,.chart .sublbl{fill:#444!important}.spec-banner,.concept,.card{background:#fff!important}}