:root{
  --ink:#000;--paper:#fff;--rule:#e4e4e4;--mute:#6a6a6a;--soft:#f4f4f2;--live:#12a150;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
:where(a,button,summary):focus-visible{outline:2px solid var(--ink);outline-offset:4px}
button{color:inherit}
:where(section,figure,.card,.cols>div,.figs>* ,.table-wrap,details){min-width:0}
:where(p,li,td,code,.kicker,.tool b){overflow-wrap:anywhere}
[hidden]{display:none!important}
img{max-width:100%;height:auto}
code,pre{font-family:var(--mono);font-size:.92em}
pre{background:var(--soft);padding:16px 18px;border-radius:8px;overflow-x:auto;line-height:1.5;margin:10px 0 0}
pre code{font-size:14px}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.05}
h2{font-weight:900;font-size:clamp(28px,4vw,44px)}
h3{font-weight:900;font-size:22px;margin-bottom:8px}
p{margin:0 0 12px}
.fine{color:var(--mute);font-size:14px}
.eyebrow{font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:13px;color:var(--mute);margin-bottom:14px}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:14px clamp(16px,4vw,48px);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;font-size:22px;letter-spacing:-.03em;white-space:nowrap}
.brand-mark{width:34px;height:auto}
.brand-word small{font-size:12px;font-weight:600;letter-spacing:0;margin-left:6px}
.brand-word sup{font-size:8px}
.nav{display:flex;gap:22px;margin-left:auto;font-weight:600;font-size:15px}
.nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-color:var(--ink)}
.nav-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;flex:none;width:44px;height:44px;padding:10px;border:1px solid var(--rule);border-radius:50%;background:var(--paper);cursor:pointer}
.nav-toggle span{display:block;width:17px;height:1.5px;background:var(--ink);transition:transform .15s ease}
.top[data-menu-open="true"] .nav-toggle span:first-child{transform:translateY(3.25px) rotate(45deg)}
.top[data-menu-open="true"] .nav-toggle span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.chip{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);background:var(--paper);border-radius:999px;padding:7px 12px;font:600 13px var(--sans);cursor:pointer;white-space:nowrap}
.chip .dot{width:8px;height:8px;border-radius:50%;background:#bbb}
.chip.live .dot{background:var(--live);box-shadow:0 0 0 3px rgba(18,161,80,.18)}

/* hero */
.hero{max-width:var(--max);margin:0 auto;padding:clamp(56px,9vw,120px) clamp(16px,4vw,48px) clamp(40px,6vw,80px)}
.hero h1{font-weight:900;font-size:clamp(44px,8.6vw,124px);letter-spacing:-.045em;line-height:.94}
.lede{max-width:760px;font-size:clamp(18px,1.6vw,22px);margin:28px 0 0;color:#222}
.lede em{font-style:normal;font-weight:900}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:15px;padding:13px 20px;border-radius:999px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);transition:transform .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.ghost{border-color:var(--rule)}
.hero-note{margin-top:22px;color:var(--mute);font-size:14px;max-width:760px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* sections */
section{max-width:var(--max);margin:0 auto;padding:clamp(40px,6vw,80px) clamp(16px,4vw,48px)}
.sec-h{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;margin-bottom:34px;padding-top:22px;border-top:1.5px solid var(--ink)}
.num{font:500 14px var(--mono);color:var(--mute)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.card{border:1.5px solid var(--ink);border-radius:16px;padding:26px 24px 22px;display:flex;flex-direction:column;background:var(--paper)}
.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.tag{font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--ink);border-radius:999px;padding:4px 10px}
.count{font:500 13px var(--mono);color:var(--mute)}
.card h3{font-size:24px;margin-bottom:12px}
.card p{color:#222}
.feats{margin:6px 0 20px;padding-left:18px;color:#333;font-size:15px}
.feats li{margin:4px 0}
.card-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px}
.card-actions .btn{font-size:14px;padding:10px 16px;white-space:nowrap}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:32px}
.cols.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.prompts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.prompts button{width:100%;text-align:left;font:500 15px/1.4 var(--sans);background:var(--soft);border:1px solid var(--rule);border-radius:10px;padding:12px 14px;cursor:pointer;color:var(--ink)}
.prompts button:hover{border-color:var(--ink)}
.prompts button.copied{background:var(--ink);color:var(--paper)}
.table-wrap{overflow-x:auto;margin-bottom:34px}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
th{text-align:left;font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:8px 12px;border-bottom:1.5px solid var(--ink)}
td{padding:14px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
td:nth-child(2){font-family:var(--mono);font-weight:500;white-space:nowrap}
.manifesto{border-top:1.5px solid var(--ink)}
.manifesto h2{margin-bottom:24px}
.lines p{font-weight:600;font-size:clamp(18px,2vw,24px);max-width:820px;color:#222}
.lines .big{font-weight:900;font-size:clamp(28px,4.4vw,52px);letter-spacing:-.03em;line-height:1.05;margin-top:28px;color:var(--ink)}
.lines .big span{display:block}
.lines .big span+span{margin-top:.25em}
.foot{max-width:var(--max);margin:0 auto;padding:40px clamp(16px,4vw,48px) 64px;border-top:1.5px solid var(--ink)}
.foot-brand img{width:330px;max-width:80vw;margin-bottom:18px}
.foot p{max-width:900px}

/* tools sheet */
.sheet{position:fixed;right:16px;top:70px;z-index:30;width:min(440px,calc(100vw - 32px));max-height:min(70vh,640px);overflow:auto;background:var(--paper);border:1.5px solid var(--ink);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.sheet-h{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--paper)}
.sheet-h button{width:44px;height:44px;flex:none;border:0;background:none;font-size:22px;cursor:pointer;line-height:1}
html.tools-open{overflow:hidden}
.sheet-body{padding:8px 16px 16px}
.tool{padding:12px 16px;border-bottom:1px solid var(--rule)}
.tool b{font-family:var(--mono);font-weight:500;font-size:14px}
.tool p{margin:4px 0 0;font-size:14px;color:#333}
.sheet .status{padding:12px 16px;font-size:14px;color:var(--mute)}

/* The same navigation remains available on every screen size. */
@media (max-width:900px){
  .nav-toggle{display:flex}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;margin:0;padding:12px 16px 20px;background:var(--paper);border-bottom:1px solid var(--rule);box-shadow:0 14px 24px rgba(0,0,0,.05);gap:0;flex-direction:column}
  .nav a{padding:13px 12px;border:0;border-radius:8px}
  .nav a:hover,.nav a[aria-current="page"]{background:var(--soft)}
  .top[data-menu-open="true"] .nav{display:flex}
  .brand-word small{display:none}
  .top{gap:10px;padding-top:10px;padding-bottom:10px}
  .chip{margin-left:auto;min-height:44px}
}
@media (max-width:420px){
  .chip{width:44px;justify-content:center;padding:0;flex:none}
  .chip #chip-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* phones: wide tables stack into cards, and preformatted blocks scroll instead of clipping */
pre{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:640px){
  table{min-width:0}
  .table-wrap{overflow:visible}
  .table-wrap td,.table-wrap td code{white-space:normal;overflow-wrap:anywhere}
  .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:100%}
  .table-wrap thead{display:none}
  .table-wrap tr{padding:14px 0;border-top:1px solid var(--rule)}
  .table-wrap td{padding:2px 0;border:0}
  .table-wrap td:first-child{font-weight:700;display:inline}
  .table-wrap td:nth-child(2){display:inline;margin-left:8px;color:var(--mute)}
  #surface td:nth-child(2)::after{content:" tools"}
  #apertures td:nth-child(3)::before{content:"Survivors (part, mm inside, mm behind): ";color:var(--mute)}
  #apertures td:nth-child(4)::before{content:"Touching the edge: ";color:var(--mute)}
  #apertures td:nth-child(2){font-weight:700}
  #instruments td:first-child{display:block;margin-bottom:2px}
  #instruments td:nth-child(2){display:block;margin:0;color:inherit}
  #instruments td:nth-child(2)::after{content:none}
  pre{font-size:13px}
}

/* Home hero: the exploding Roadster is the page's first picture. On wide screens it fills the
   hero and runs out to the right edge of the window, with the headline over its left side; a mask
   fades the drawing to white under the words so they stay legible while the car shows through. */
.home-page .hero{--gutter:clamp(16px,4vw,48px);position:relative;max-width:none;display:grid;grid-template-columns:minmax(0,1fr);padding:30px var(--gutter) clamp(32px,5vw,56px)}
.home-page .hero h1{font-size:clamp(43px,11.5vw,72px)}
.home-page .lede{font-size:18px;margin-top:22px}
.home-page .cta{margin-top:26px}
.home-page .hero-note{margin:14px 0 0}
.hero-media{position:relative;margin:10px calc(-1 * var(--gutter)) -6px;overflow:hidden;background:var(--paper)}
.hero-media__video,.hero-media__video img{display:block;width:118%;max-width:none;height:auto;margin-left:-9%;aspect-ratio:1568/880;background:var(--paper)}
/* Soft edges: the render is on pure white already; this hides the frame line a video encoder can leave. */
.hero-media__video{-webkit-mask-image:radial-gradient(closest-side,#000 82%,transparent);mask-image:radial-gradient(closest-side,#000 82%,transparent);-webkit-mask-size:100% 100%;mask-size:100% 100%}
.hero-media__toggle{position:absolute;right:max(12px,var(--gutter));bottom:10px;z-index:2;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--rule);border-radius:50%;background:rgba(255,255,255,.86);cursor:pointer;opacity:.75;transition:opacity .15s ease}
.hero-media__toggle:hover,.hero-media__toggle:focus-visible{opacity:1;border-color:var(--ink)}
.hero-media__toggle span{width:10px;height:12px;border-left:3px solid var(--ink);border-right:3px solid var(--ink)}
.hero-media__toggle[data-paused="true"] span{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--ink);margin-left:3px}
.home-page .cta .primary{width:100%;text-align:center}
@media (min-width:600px){.home-page .cta .primary{width:auto}.hero-media__video,.hero-media__video img{width:100%;margin-left:0}}
/* Stacked tablets and narrow windows: cap the film so the headline, lede and the one button still fit
   on the first screen. The render is on white, so letterboxing it (contain) leaves no visible bars. */
@media (min-width:600px){.hero-media__video,.hero-media__video img{max-height:max(240px,calc(100svh - 595px));object-fit:contain}}
/* The overlay starts where the old two-column hero did (721 px), for any window that is not a tall portrait
   one; tall portrait tablets keep the stacked layout, which fits them with the full-width film. */
@media (min-width:960px),(min-width:721px) and (min-aspect-ratio:4/5){
  .home-page .hero{
    /* the text keeps the page's left edge (the sections' 1180 px column); the picture does not */
    padding:clamp(20px,2.5vw,40px) 0 clamp(20px,2.5vw,40px) max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)));
    grid-template-columns:minmax(0,min(600px,max(42vw,340px))) minmax(0,1fr);grid-template-rows:1fr repeat(5,auto) 1fr;
    min-height:clamp(580px,calc(100svh - 240px),720px)}
  .home-page .hero>:not(.hero-media){grid-column:1;position:relative;z-index:1}
  .home-page .hero>.eyebrow{grid-row:2}.home-page .hero>h1{grid-row:3}.home-page .hero>.lede{grid-row:4}
  .home-page .hero>.cta{grid-row:5}.home-page .hero>.hero-note{grid-row:6}
  .home-page .hero h1{font-size:clamp(44px,6.1vw,92px)}
  .home-page .lede{max-width:30em}
  .home-page .lede,.home-page .hero-note{text-shadow:0 0 6px var(--paper),0 0 14px var(--paper),0 0 2px var(--paper)}
  .hero-media{grid-column:1 / -1;grid-row:1 / -1;align-self:center;justify-self:end;z-index:0;margin:0;width:min(100%,max(84%,calc(100% - 340px)));overflow:visible;background:none}
  .hero-media__video,.hero-media__video img{width:100%;max-height:none;margin:0}
  .hero-media__video{-webkit-mask-image:linear-gradient(to right,transparent 3%,rgba(0,0,0,.25) 18%,rgba(0,0,0,.6) 30%,#000 42%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(to right,transparent 3%,rgba(0,0,0,.25) 18%,rgba(0,0,0,.6) 30%,#000 42%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
  .hero-media__toggle{right:clamp(16px,4vw,48px);bottom:4%}
}
@media (prefers-reduced-motion:reduce){.hero-media__toggle{transition:none}}
.card-details{margin:4px 0 20px}
.card-details summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;cursor:pointer;list-style:none;border-top:1px solid var(--rule)}
.card-details summary::after{content:"+";font-size:20px;font-weight:400}
.card-details[open] summary::after{content:"−"}
.card-details .feats{margin-top:4px;margin-bottom:0}
.section-disclosure>summary{cursor:pointer;list-style:none;position:relative;grid-template-columns:auto minmax(0,1fr) auto;margin-bottom:0;padding-bottom:22px}
.section-disclosure>summary::after{content:"+";font-size:30px;line-height:1;font-weight:400}
.section-disclosure[open]>summary{margin-bottom:20px}
.section-disclosure[open]>summary::after{content:"−"}
.home-page section:has(>.section-disclosure){padding-top:16px;padding-bottom:16px}
summary::-webkit-details-marker{display:none}
.card-top{gap:10px;flex-wrap:wrap}
.home-page .card-details{margin-top:auto}
.home-page .card-actions{margin-top:0;align-self:start;align-items:center}
.home-page .card-actions .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px}
@supports (grid-template-rows:subgrid){
  .home-page .card{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:0}
  .home-page .card-details{margin-top:4px}
}
@media (max-width:720px){
  .sec-h{gap:12px;margin-bottom:24px}
  .cards{gap:16px}
  .card{padding:22px 20px}
  .sheet{top:76px;max-height:calc(100dvh - 92px)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.nav-toggle span{transition:none}}

/* Engine: the measured result first, with inspectable detail beneath it. */
.engine-page .hero{padding-top:clamp(32px,5vw,64px);padding-bottom:40px}
.engine-page .hero h1{font-size:clamp(40px,7vw,92px)}
.engine-page .hero .lede{max-width:760px;font-size:clamp(18px,1.6vw,21px);margin-top:24px}
.engine-page .hero .cta{margin-top:24px}
.engine-page section:not(.hero){padding-top:32px;padding-bottom:32px}
.fig{margin:0;border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:#fff}
.fig img{display:block;width:100%;background:#fff}
.fig figcaption{padding:14px 16px;font-size:14px;color:#333;border-top:1px solid var(--rule)}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px}
.engine-preview{margin-top:28px}
.engine-preview img{max-height:380px;object-fit:contain}
.kicker{font:400 12px/1.6 var(--mono);color:var(--mute)}
.fit-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 18px}
.fit-summary>div{display:flex;flex-direction:column;gap:10px;border:1px solid var(--rule);border-radius:12px;padding:20px}
.fit-summary .metric{font-weight:900;font-size:clamp(26px,4vw,46px);line-height:1;letter-spacing:-.04em;white-space:nowrap}
.fit-summary .metric small{font-size:.5em;font-weight:600;letter-spacing:0}
.fit-summary>div>span:last-child{font-size:14px;color:var(--mute);line-height:1.4}
.report-status{color:#444;font-size:15px}
.report-details{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:24px}
.report-details>summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;min-height:56px;font-weight:600;font-size:16px;list-style:none;cursor:pointer}
.report-details>summary::after{content:"+";font-size:22px;font-weight:400}
.report-details[open]>summary::after{content:"−"}
.report-details[open]{padding-bottom:24px}
#fit-table table{font-size:14px}
#fit-table th:not(:first-child),#fit-table td:not(:first-child){text-align:right}
#fit-table td:not(:first-child){font:400 14px/1.55 var(--mono)}
#fit-table td:first-child{font-weight:600}
.fit-badge{display:block;margin-top:4px;font:400 12px/1.4 var(--sans);color:var(--mute)}
.fit-badge.miss,td.miss{color:#b3261e;font-weight:600}
td.info{color:#666}
.extremes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.extremes>div{padding:14px;background:var(--soft);border-radius:8px;min-width:0}
.extremes dt{font-size:14px;font-weight:600}
.extremes dd{margin:6px 0 0;font:400 13px/1.6 var(--mono);overflow-wrap:anywhere}
#instruments td:nth-child(2){font-family:var(--sans);font-weight:400;white-space:normal}
@media (max-width:640px){
  .engine-page .hero .cta{gap:10px 12px}
  .engine-page .hero .cta .primary{width:100%;text-align:center}
  .engine-page .hero .cta .btn:not(.primary){border-color:transparent;padding-left:0;padding-right:8px;text-decoration:underline;text-underline-offset:4px}
  .engine-preview img{min-height:150px;object-fit:contain}
  .engine-preview figcaption{font-size:13px;padding:12px}
  .fit-summary{gap:8px}
  .fit-summary>div{padding:14px 10px;gap:8px}
  .fit-summary .metric{font-size:clamp(22px,6.8vw,36px)}
  .fit-summary>div>span:last-child{font-size:12px}
  #fit-table tr{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;padding:18px 0}
  #fit-table td:first-child{grid-column:1 / -1;display:block}
  #fit-table td:not(:first-child){display:block;text-align:left;margin:0;color:inherit}
  #fit-table td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font:400 12px/1.4 var(--sans);color:var(--mute)}
  .fit-badge{display:inline;margin-left:8px}
  .extremes{grid-template-columns:1fr}
}