@font-face{font-family:Geist;src:url(/assets/geist-latin.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(/assets/geist-mono-latin.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{
  --bg:#0A0E13;--panel:#10161E;--panel2:#0D131A;--line:#1F2B38;--line2:#2A3949;
  --text:#E6EDF3;--body:#AEBCC9;--data:#7FB2CC;--dim:#62748A;--or:#FF5A1F;
  --sans:Geist,ui-sans-serif,system-ui,sans-serif;--mono:'Geist Mono',ui-monospace,monospace;
  --pad:clamp(16px,3.5vw,48px);--u:8px;--h1:clamp(44px,6.6vw,96px);
}
*{box-sizing:border-box;margin:0;padding:0}

/* Line grid. Every line box is a whole number of --u tall and every block starts on a grid line
   (1px borders come out of the padding), so all baselines fall on the same lines, 6px above the
   bottom of their line box. Geist and Geist Mono share metrics: the baseline sits .355em below the
   middle of the line box, and --snap moves it from there onto the grid. ?grid shows the lines. */
h1,h2,h3,p,dt,dd,th,td,address,.legal li,.k,thead th span{--lh:round(calc(var(--lr,1.5)*1em),var(--u));--snap:calc(var(--lh)/2 - .355em - 6px);line-height:var(--lh)}
h1,h2,h3,p,dt,dd,address,.legal li,.k,thead th span{position:relative;top:var(--snap)}
html[data-grid] body::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;background:repeating-linear-gradient(transparent 0 2px,rgba(255,90,31,.4) 2px 3px,transparent 3px var(--u))}

html{background:var(--bg);color-scheme:dark}
body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;position:relative;
  background-image:radial-gradient(rgba(127,178,204,.12) 1px,transparent 1px);background-size:48px 48px;background-position:-24px -24px}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 var(--pad)}
.k{font:500 11px/var(--lh) var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.sq{display:inline-block;width:7px;height:7px;background:var(--or);flex:none}

header{border-bottom:1px solid var(--line);background:rgba(10,14,19,.85);backdrop-filter:blur(6px);position:sticky;top:0;z-index:2}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:55px}
.mark{font-weight:600;font-size:21px;letter-spacing:-.03em;color:var(--text);text-decoration:none;display:flex;align-items:baseline;gap:2px}
.mark .sq{width:6px;height:6px}
.state{display:flex;align-items:center;gap:10px;text-decoration:none}
.state .short{display:none}
.state .sq{animation:blink 1.6s steps(1) infinite}
.state b{font:500 11px var(--mono);letter-spacing:.16em;color:var(--data)}
@keyframes blink{50%{opacity:.2}}

.hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start;padding:round(clamp(40px,6vw,88px),var(--u)) 0 round(clamp(40px,5vw,64px),var(--u))}
.intro{grid-column:1/9}
.intro p{font-size:clamp(17px,1.4vw,20px);color:var(--body);max-width:32em;margin-top:32px}
.side .go{margin-top:32px}
h1{font-weight:600;font-size:var(--h1);--lr:.94;letter-spacing:-.05em;text-wrap:balance}
h1 .sq{width:.16em;height:.16em;margin-left:.04em;vertical-align:baseline}
/* The first spec row (baseline 26px into its 40px row) shares the baseline of the headline's first line. */
.side{grid-column:9/13;padding-top:calc(round(.94*var(--h1),var(--u)) - 32px)}
.spec{box-shadow:inset 0 1px var(--line)}
.spec div{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:start;padding:8px 0 7px;border-bottom:1px solid var(--line)}
.spec dt,.spec dd{--lh:24px}
.spec dd{font-size:15px;color:var(--text)}
.spec .on{display:flex;align-items:center;gap:8px;color:var(--or);font:500 13px/var(--lh) var(--mono);letter-spacing:.06em}

/* The video is rounded to whole grid lines (cropping at most 4px) so the page below stays on the grid. */
.console{border:1px solid var(--line);background:var(--panel2);container-type:inline-size}
.chrome{display:flex;align-items:center;justify-content:space-between;gap:16px;height:47px;padding:0 14px 0 16px;border-bottom:1px solid var(--line)}
.chrome .l,.chrome .r{display:flex;align-items:center;gap:14px;min-width:0}
.chrome .k,footer .k{top:0}
.chrome .file{font:13px var(--mono);color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc{font:13px var(--mono);color:var(--data);font-variant-numeric:tabular-nums;white-space:nowrap}
.tc span{color:var(--dim)}
.btn{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text);background:none;border:1px solid var(--line2);height:28px;padding:0 10px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.btn:hover{border-color:var(--data)}
.btn:focus-visible,.seg:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.btn i{width:6px;height:6px;background:var(--dim)}
.btn[aria-pressed=true] i{background:var(--or)}
.screen{position:relative;cursor:pointer}
.screen video{display:block;width:100%;height:round(56.25cqw,var(--u));object-fit:cover;background:var(--panel)}
.console.tall .screen video{height:round(177.78cqw,var(--u))}
.rail{position:relative;display:flex;border-top:1px solid var(--line)}
.seg{flex:1 1 0;min-width:0;text-align:left;background:none;border:0;border-right:1px solid var(--line);padding:12px;cursor:pointer;color:var(--dim);font:500 11px/14px var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.seg:last-child{border-right:0}
.seg:nth-child(1){flex-grow:4.2}.seg:nth-child(2){flex-grow:2.8}.seg:nth-child(3){flex-grow:2.5}.seg:nth-child(4){flex-grow:1.9}.seg:nth-child(5){flex-grow:3.6}
.seg:hover{color:var(--body)}
.seg.on{color:var(--text)}
.seg b{color:var(--or);font-weight:500;margin-right:8px}

section.block{padding:round(clamp(56px,8vw,112px),var(--u)) 0 0}
.bar{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.bar::after{content:"";flex:1;height:1px;background:var(--line);order:1}
.bar .k:last-child{order:2}
h2{font-weight:600;font-size:clamp(28px,3.2vw,44px);letter-spacing:-.035em;--lr:1.05;margin-bottom:32px;max-width:18em;text-wrap:balance}

table{width:100%;border-collapse:collapse;table-layout:fixed}
/* Cells take --snap as padding (a shifted cell would take its border along). --pt is rounded to layout units so top and bottom add up exactly. */
th,td{--pt:round(calc(15px + var(--snap)),1px/64);text-align:left;vertical-align:top;padding:var(--pt) 24px calc(31px - var(--pt)) 0;border-top:1px solid var(--line)}
thead th{border-top:0;padding:0 24px 16px 0}
thead th:not(:first-child){font-weight:600;font-size:20px;letter-spacing:-.02em;color:var(--text)}
thead th span{display:block;--lh:24px}
thead th .k{color:var(--or);margin-bottom:8px;--lh:16px}
tbody th{font:500 11px/var(--lh) var(--mono);--lh:24px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
tbody td{font-size:17px;--lh:24px;color:var(--body)}
tbody tr:last-child>*{border-bottom:1px solid var(--line);padding-bottom:calc(30px - var(--pt))}
col.c1{width:200px}

.stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 24px;list-style:none}
.stage{position:relative;padding-top:22px;border-top:2px solid var(--line)}
.stage::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--or);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.stage.on::before{width:100%}
.stage .k{display:block;color:var(--or)}
.stage h3{font-weight:600;font-size:22px;--lh:24px;letter-spacing:-.02em;margin:8px 0}
.stage p{font-size:15px;--lh:24px;color:var(--body)}

footer{margin-top:round(clamp(72px,10vw,136px),var(--u));border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:63px}

@media (max-width:1040px){
  .intro,.side{grid-column:1/-1}
  .side{padding-top:var(--u)}
  .stages{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
}
@media (max-width:720px){
  .chrome .l,.tc span{display:none}
  .chrome{justify-content:flex-end}
  .seg{font-size:0;padding:12px 0}
  .seg b{font-size:11px;margin:0 0 0 10px;vertical-align:top}
  .stages{grid-template-columns:1fr 1fr}
  table,thead,tbody,tr,th,td{display:block;width:auto}
  thead{display:none}
  tbody tr{border-top:1px solid var(--line);padding:15px 0 16px}
  tbody tr:last-child{border-bottom:1px solid var(--line);padding-bottom:15px}
  tbody th,tbody td,tbody tr:last-child>*{border:0;padding:0;position:relative;top:var(--snap)}
  tbody th{padding-bottom:8px}
  tbody td::before{content:attr(data-col);display:block;position:relative;top:calc(2px - .355em);font:500 11px/16px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin-top:8px}
  footer .wrap{height:auto;padding-top:20px;padding-bottom:20px;flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:440px){.stages{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.state .sq{animation:none}.stage::before{transition:none}}

/* invite */
.go{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;background:var(--or);color:var(--bg);border:0;font:600 13px var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;vertical-align:top}
.go:hover{background:#FF7443}
.go:focus-visible,.invite input:focus-visible,a:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.go[disabled]{opacity:.6;cursor:progress}
.cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:round(clamp(32px,5vw,72px),var(--u));align-items:end}
.cta h2{margin-bottom:16px}
.lead{font-size:17px;--lh:24px;color:var(--body);max-width:32em}
.invite{border:1px solid var(--line);background:var(--panel2);padding:23px}
.invite .k{display:block;margin-bottom:8px}
.invite .row{display:flex;gap:0}
.invite input{flex:1;min-width:0;height:48px;padding:0 14px;background:var(--bg);color:var(--text);border:1px solid var(--line2);border-right:0;font:16px var(--sans);border-radius:0}
.invite input::placeholder{color:var(--dim)}
.invite input[aria-invalid=true]{border-color:var(--or)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{min-height:var(--lh);margin-top:8px;font:14px/var(--lh) var(--mono);--lh:24px;color:var(--data)}
.msg.err{color:var(--or)}
.invite.done .row{display:none}
.invite.done .msg{font:600 18px/var(--lh) var(--sans);color:var(--text);margin-top:0;display:flex;align-items:center;gap:10px}
.invite.done .msg::before{content:"";width:9px;height:9px;background:var(--or)}
.note{font-size:13px;--lh:24px;color:var(--dim)}
.note a,.legal a{color:var(--data)}

/* footer + legal pages */
.legal-nav{display:flex;gap:24px}
.legal-nav a{text-decoration:none}
.legal-nav a:hover{color:var(--body)}
.legal{max-width:760px;padding:round(clamp(48px,8vw,104px),var(--u)) 0 0}
.legal h1{font-size:clamp(40px,5vw,64px);margin-bottom:16px}
.legal .sub{color:var(--dim);font:13px/var(--lh) var(--mono);--lh:24px;letter-spacing:.06em;margin-bottom:48px}
.legal h2{font-size:22px;--lh:24px;letter-spacing:-.02em;margin:40px 0 16px;max-width:none}
.legal p,.legal li{font-size:16px;--lh:24px;color:var(--body)}
.legal p+p{margin-top:16px}
.legal ul{padding-left:20px;margin-top:8px}
.legal li+li{margin-top:8px}
.legal address{font-style:normal;font-size:16px;--lh:24px;color:var(--text)}
.legal .facts{box-shadow:inset 0 1px var(--line);margin-top:24px}
.legal .facts div{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:8px 0 7px;border-bottom:1px solid var(--line)}
.legal .facts dt,.legal .facts dd{--lh:24px}
.legal .facts dd{color:var(--text)}
.lost{padding:round(clamp(72px,14vw,180px),var(--u)) 0 0}
.lost .k{display:block}
.lost h1{margin:16px 0 24px}
.lost p{font-size:17px;--lh:24px;color:var(--body);margin-bottom:32px}

@media (max-width:900px){.cta{grid-template-columns:1fr}}
@media (max-width:720px){
  .state .long{display:none}.state .short{display:inline}
  .invite{padding:15px}
  .invite .row{flex-direction:column;gap:8px}
  .invite input{flex:none;border-right:1px solid var(--line2)}
  .legal .facts div{grid-template-columns:1fr;gap:0}
  footer .legal-nav{gap:20px}
}

main{flex:1 0 auto}