@font-face{font-family:"Geist Mono";src:url(/geist-mono.woff2) format("woff2");font-weight:400;font-display:swap}
:root{
  --bg:#000;--fg:#fff;--muted:#8a8a8a;--line:#1f1f1f;--accent:#D4FF00;
  --pad:24px;--gap:24px;--sec:56px;
  /* type scale — see docs/DESIGN.md "Type" */
  --s:14px;--s-lh:22px;--m:16px;--m-lh:26px;--l:20px;--l-lh:30px;
  --xl:32px;--xl-lh:40px;--xxl:40px;--xxl-lh:44px;
  --display:min(56px,calc((100vw - 2*var(--pad)) / 9.6));--display-lh:1.04;
}
@media (min-width:768px){:root{--pad:48px;--sec:96px;--xxl:56px;--xxl-lh:60px}}
@media (min-width:1024px){:root{--display:clamp(48px,calc((100vw - 2*var(--pad)) / 18.6),72px)}}
@media (min-width:1280px){:root{--pad:64px;--sec:128px;--gap:32px}}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--fg);font:400 var(--m)/var(--m-lh) "Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;-webkit-text-size-adjust:100%}
body{font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)}

/* header */
header{height:72px;display:flex;align-items:center;justify-content:space-between}
.wordmark{font-size:var(--m)}
nav{font-size:var(--s);line-height:var(--s-lh);color:var(--muted);display:flex;gap:var(--gap)}

/* hero */
.hero{padding:var(--sec) 0;display:flex;flex-direction:column;gap:var(--sec)}
@media (min-width:1024px){.hero{min-height:calc(100svh - 72px);justify-content:space-between;padding:64px 0;gap:64px}}
h1{font-size:var(--display);line-height:var(--display-lh);font-weight:400;letter-spacing:-.03em;white-space:nowrap}
h1 span{display:block}
h1 br{display:inline}
@media (min-width:768px){h1 br{display:none}}
.hero-grid{display:grid;gap:var(--sec) var(--gap)}
@media (min-width:1024px){.hero-grid{grid-template-columns:repeat(12,1fr);align-items:end}.lede{grid-column:1/7}.install{grid-column:7/13}}
.lede p{font-size:var(--l);line-height:var(--l-lh);max-width:34ch}
.lede p+p{color:var(--muted);margin-top:16px}
.button{display:block;text-align:center;white-space:nowrap;background:var(--accent);color:#000;padding:14px 20px;border-radius:2px;font-size:var(--s);line-height:var(--m-lh);margin-top:40px}
@media (min-width:768px){.button{display:inline-block;padding:14px 24px;font-size:var(--m)}}
.button:hover{opacity:.9;text-decoration:none}

/* install — the three lines, composed large */
.code{border:1px solid var(--line);border-radius:2px;position:relative}
.code pre{padding:28px 32px 32px;overflow-x:auto;white-space:pre;font-size:var(--l);line-height:var(--l-lh)}
@media (min-width:1280px){.code pre{padding:40px 40px 48px}}
.copy{position:absolute;top:12px;right:16px;background:none;border:0;color:var(--muted);font:inherit;font-size:var(--s);line-height:var(--s-lh);cursor:pointer}
.copy:hover{color:var(--fg)}
code{font:inherit}

/* live readout — big ticking figures */
.readout{display:grid;gap:var(--gap);border-top:1px solid var(--line);padding-top:var(--gap);min-height:112px}
@media (min-width:768px){.readout{grid-template-columns:repeat(12,1fr)}.readout .stat{grid-column:span 4}.readout .stat.wide{grid-column:span 6}}
.stat .n{font-size:var(--xxl);line-height:var(--xxl-lh);letter-spacing:-.03em;white-space:nowrap}
.stat .l{font-size:var(--s);line-height:var(--s-lh);color:var(--muted);margin-top:8px}
.dot{color:var(--accent);animation:pulse 1s ease-out infinite;font-size:.5em;vertical-align:.35em;margin-right:.3em}
.dot.off{color:var(--muted);animation:none}

/* sections */
section{border-top:1px solid var(--line);padding:var(--sec) 0}
h2{font-size:var(--s);line-height:var(--s-lh);font-weight:400;color:var(--muted);margin-bottom:40px}
.grid{display:grid;gap:40px var(--gap)}
@media (min-width:768px){.grid{grid-template-columns:repeat(12,1fr)}.grid>*{grid-column:span 6}}
@media (min-width:1024px){.grid.four>*{grid-column:span 3}.grid.stats>*{grid-column:span 6}}
.step .idx{font-size:var(--xl);line-height:var(--xl-lh);letter-spacing:-.02em;color:var(--muted)}
.step h3{font-size:var(--l);line-height:var(--l-lh);font-weight:400;margin:16px 0 8px}
.step p{color:var(--muted)}
.step code{color:var(--fg)}
.date{color:var(--muted);font-size:var(--s);line-height:var(--s-lh);margin-top:40px}
.cols{display:grid;gap:40px var(--gap)}
@media (min-width:768px){.cols{grid-template-columns:repeat(12,1fr)}.cols>*{grid-column:span 6}}
.cols h2{margin-bottom:0}
.cols ul{list-style:none}
.cols li{padding:16px 0;border-bottom:1px solid var(--line);font-size:var(--l);line-height:var(--l-lh)}
.cols li:first-child{border-top:1px solid var(--line);margin-top:24px}
.sentence{font-size:var(--xl);line-height:var(--xl-lh);letter-spacing:-.02em;max-width:30ch}
@media (min-width:768px){.sentence{font-size:var(--xxl);line-height:var(--xxl-lh);letter-spacing:-.03em}}

/* footer */
footer{border-top:1px solid var(--line);padding:40px 0 56px;display:flex;justify-content:space-between;align-items:baseline;gap:var(--gap);flex-wrap:wrap;color:var(--muted);font-size:var(--s);line-height:var(--s-lh)}
footer .links{display:flex;gap:var(--gap)}

/* motion — the one animation (install lines arrive once + block cursor), see docs/DESIGN.md "Motion" */
.ln{display:inline;animation:appear 150ms ease-out both}
.ln:nth-child(2){animation-delay:80ms}
.ln:nth-child(3){animation-delay:160ms}
.cur{display:inline-block;width:.55em;height:1em;background:var(--fg);vertical-align:-.15em;margin-left:.1em;animation:blink 1s steps(2,start) infinite}
@keyframes appear{from{opacity:0}to{opacity:1}}
@keyframes blink{to{visibility:hidden}}
@keyframes pulse{from{opacity:1}to{opacity:.3}}
@media (prefers-reduced-motion:reduce){.ln,.cur,.dot{animation:none}}