@font-face{font-family:Geist;src:url(/fonts/geist-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Geist;src:url(/fonts/geist-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/geist-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/fonts/barlow-condensed-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Archivo;src:url(/fonts/archivo-wdth.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

/* Tokens. Type: 13 meta · 15 row · 17 body · 20 lead · section h2 · hero h1.
   Colour: one accent at a time. Amber = needs you, green = running or done, violet only inside the Solana rim.
   Line breaks: every headline and lead is made of .cl clauses that never break inside, so a line can only end
   after a full stop or a comma. Headings put each clause on its own line and shrink until the longest fits. */
:root{--ink:#f3f0ea;--dim:#a29d95;--mute:#8a857d;--faint:#3a3833;--line:#1c1b20;--raise:#0d0d10;
  --g:#14f195;--v:#9945ff;--amber:#ffb547;--ease:cubic-bezier(.2,.8,.2,1);
  --pad:clamp(20px,4vw,72px);--gap:clamp(40px,6vh,72px);
  --h2fit:12.6;--h1fit:12.9}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:#000;scroll-behavior:smooth}
body{position:relative;background:#000;color:var(--ink);font:400 17px/1.5 Geist,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--g);outline-offset:3px;border-radius:6px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.skip{position:fixed;left:16px;top:-60px;z-index:30;background:var(--ink);color:#000;padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.cl{white-space:nowrap}
h1 .cl,.h2 .cl{display:block}

/* Top bar: the wordmark, and the waitlist one step away from anywhere */
.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad);
  background:linear-gradient(#000d,#0000)}
.wm{display:flex;align-items:center;gap:2px;padding:12px 0;margin:-12px 0;font:900 19px/1 Archivo;font-stretch:125%;letter-spacing:.01em;color:var(--ink);text-decoration:none}
.wm i{width:19px;height:19px;background:url(/assets/cube-96.webp) center/150%;border-radius:4px;margin-left:1px}
.tj{font:600 15px/1 Geist;color:var(--ink);text-decoration:none;padding:14px 16px;border-radius:999px;transition:background .2s}
.tj:hover{background:#ffffff10}

/* Sections: plain document flow, one centred group each */
section{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(96px,12vh,140px) var(--pad);text-align:center}
.h2{font:800 min(clamp(46px,4.9vw,92px),calc((100vw - 2 * var(--pad)) / var(--h2fit)))/.92 "Barlow Condensed";text-transform:uppercase;letter-spacing:.004em}
.lead{margin:20px auto 0;max-width:34em;font-size:clamp(18px,1.25vw,22px);line-height:1.45;color:var(--dim);text-wrap:balance}
.sample{font:500 12px/1 "Geist Mono";color:var(--mute);letter-spacing:.02em}

/* Hero: the static team, the line, the field */
.hero{padding-top:84px;padding-bottom:64px}
.team{width:min(820px,92vw,calc((100svh - 340px) * 1.87));aspect-ratio:1536/820;height:auto;object-fit:cover;object-position:50% 58%;
  -webkit-mask:linear-gradient(transparent,#000 12%,#000 70%,transparent),linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(transparent,#000 12%,#000 70%,transparent),linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect}
.hero h1{margin-top:-2px;font:800 min(clamp(40px,5.4vw,92px),calc((100vw - 2 * var(--pad)) / var(--h1fit)))/1.02 Archivo;font-stretch:112%;letter-spacing:-.02em}
.hero .lead{margin-top:14px}
.hero .join{margin-top:clamp(28px,4vh,44px)}

/* The waitlist field: the light ring, the obsidian key with the Solana rim (starts a flow) */
.join{width:min(560px,100%)}
.ring{border-radius:999px;padding:1.5px;background:conic-gradient(from 200deg,#14f19500,#14f195 40deg,#9945ff 90deg,#9945ff00 140deg,#ffffff1a 360deg)}
.ring:focus-within{box-shadow:0 0 0 2px var(--g)}
.join.bad .ring{background:#ff6b6b}
.in{position:relative;display:flex;align-items:center;gap:6px;background:#070707;border-radius:999px;padding:6px 6px 6px 8px}
.in input{flex:1;min-width:0;outline:none;font-size:17px;padding:12px 16px}
.in input::placeholder{color:var(--mute)}
.key{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;color:#fff;font:600 15px/1 Geist;border-radius:999px;padding:14px 16px 14px 22px;min-height:48px;
  background:linear-gradient(#17151c,#0b0a0e) padding-box,linear-gradient(100deg,#9945ff,#14f195) border-box;border:1.5px solid transparent;
  box-shadow:0 0 26px #9945ff2a,0 0 40px #14f1951c;transition:box-shadow .2s var(--ease),transform .12s var(--ease)}
.key i{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#9945ff,#14f195);display:grid;place-items:center;font:600 13px/1 Geist;font-style:normal;color:#000;transition:transform .2s var(--ease)}
.key:hover{box-shadow:0 0 30px #9945ff55,0 0 52px #14f19533}
.key:hover i{transform:translateX(2px)}
.key:active{transform:scale(.98)}
.key:focus-visible{outline:2px solid #fff;outline-offset:3px}
.key[aria-busy=true]{cursor:progress}
.key[aria-busy=true] i{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.note{margin-top:12px;font-size:14px;color:var(--mute);text-wrap:balance}
.msg{font-size:14px;color:#ff8a8a}
.msg:not(:empty){margin-top:10px}

/* After sign-up: the offer, then the visitor's own invite link */
.done{padding:6px 0 0;outline:none}
.done b{display:block;font:800 22px/1.2 Archivo;font-stretch:112%;color:var(--ink)}
.done p{margin-top:8px;color:var(--dim);font-size:16px;text-wrap:balance}
.share{margin-top:22px;display:grid;justify-items:center;gap:10px}
.share label{font:500 12px/1 "Geist Mono";color:var(--mute);letter-spacing:.02em}
.link{display:flex;align-items:center;width:min(440px,100%);border-radius:12px;background:var(--raise);box-shadow:inset 0 0 0 1px #24232a}
.link:focus-within{box-shadow:inset 0 0 0 1px #24232a,0 0 0 2px var(--g)}
.link input{flex:1;min-width:0;padding:12px 14px;font:400 14px/1 "Geist Mono";color:var(--dim);outline:none}
.copy{font:600 14px/1 Geist;padding:14px 16px;min-height:44px;color:var(--ink);border-left:1px solid #24232a}
.copy:hover{color:var(--g)}
.post{font-size:14px;color:var(--dim);text-decoration:underline;text-decoration-color:#4a4740;text-underline-offset:4px;padding:10px 4px}
.post:hover{color:var(--ink);text-decoration-color:var(--g)}

/* 1 · Ten chats, one needs you. Rows are the app's sidebar rows at true size, no card around them. */

.board{width:min(720px,100%);margin-top:var(--gap);text-align:left}
.bhead{display:flex;align-items:center;gap:20px;padding:0 18px 14px;font:600 14px/1 Archivo;font-stretch:108%;color:var(--dim)}
.bhead span{display:flex;align-items:center;gap:8px}
.bhead b{font:800 17px/1 Archivo;font-stretch:112%;color:var(--ink);font-variant-numeric:tabular-nums}
.bhead .you b{color:var(--amber)}.bhead .run b{color:var(--g)}
.bhead .sample{margin-left:auto}
.rows{list-style:none}
.row{border-radius:14px;transition:background .35s var(--ease)}
.rb{width:100%;display:grid;grid-template-columns:8px 22px minmax(0,1fr) auto;align-items:center;column-gap:14px;padding:clamp(9px,1.25vh,14px) 18px;text-align:left;border-radius:14px;cursor:default}
.d{width:8px;height:8px;border-radius:50%;background:var(--g);transition:background .35s,box-shadow .35s}
.pm{font:800 9px/1 Archivo;font-stretch:112%;width:22px;height:18px;border-radius:5px;display:grid;place-items:center;color:#000;font-style:normal}
.pm.fv{background:var(--g)}.pm.tl{background:var(--amber)}.pm.sd{background:var(--ink)}.pm.r{background:var(--v);color:#fff}
.nm{display:flex;align-items:baseline;gap:12px;min-width:0;white-space:nowrap}
.nm b{font:500 16px/1.3 Archivo;flex:none}
.st{font-size:15px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
.tm{font:400 13px/1 "Geist Mono";color:var(--mute);font-variant-numeric:tabular-nums}
.row:hover:not(.you) .st{color:var(--dim)}
.row.you{background:#17130b}
.row.you .rb{cursor:pointer}
.row.you .d{background:var(--amber);box-shadow:0 0 10px #ffb547aa}
.row.you .st{color:var(--amber)}
.row.you .tm{color:var(--ink);font:600 14px/1 Geist}
.row.you:hover{background:#1f190d}
.row.fresh .st{color:var(--g)}
.ask{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.ask>div{overflow:hidden}
.row.open .ask{grid-template-rows:1fr}
.aq{padding:2px 18px 18px 76px}
.aq p{font-size:17px;color:var(--ink)}
.aq small{display:block;margin-top:4px;font-size:14px;color:var(--mute)}
.ch{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
/* the answer key: dimmed lacquer commits a step */
.lq{font:600 15px/1 Geist;padding:14px 18px;min-height:44px;border-radius:12px;color:#0b0a08;background:linear-gradient(#f6f1e8,#d9d2c6);box-shadow:inset 0 1px 0 #fff8,0 1px 0 #0006;transition:transform .12s,filter .2s}
.lq:hover{filter:brightness(1.06)}.lq:active{transform:translateY(1px)}
.lq.alt{color:var(--ink);background:#1d1b20;box-shadow:inset 0 1px 0 #ffffff14}
.calm{outline:none;margin-top:18px;padding:0 18px;font-size:15px;color:var(--mute);min-height:23px}

/* 2 · The dial: six workflows round the cube; the pointer's angle picks one, the window shows its real screen */
.jobs{width:min(1900px,100%);margin-top:clamp(28px,4vh,56px);display:flex;align-items:center;justify-content:center}
.dial{position:relative;flex:none;width:var(--dw);height:var(--dw);--dw:clamp(320px,min(25vw,52svh),560px);margin:0 clamp(96px,8vw,150px);touch-action:manipulation}
.dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.dial .track{fill:none;stroke:#26252c;stroke-width:.45}
.dial .arc{fill:none;stroke:url(#arcg);stroke-width:1;stroke-linecap:round;transform-origin:50% 50%;transform-box:view-box;transition:transform .45s var(--ease)}
.dial .node{fill:#2a2930;transition:fill .3s}
.dial .node.on{fill:var(--g)}
.cubebox{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%)}
.cubebox img{width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten;transition:transform .45s var(--ease),opacity .3s;filter:drop-shadow(0 18px 30px #000)}
.cubebox:after{content:"";position:absolute;inset:-30%;z-index:-1;background:radial-gradient(closest-side,#14f19522,transparent)}
.wf{position:absolute;white-space:nowrap;font:600 clamp(15px,1.05vw,19px)/1 Archivo;font-stretch:108%;color:var(--mute);padding:14px 4px;transition:color .25s}
.wf:hover{color:var(--dim)}
.wf[aria-checked=true]{color:var(--ink)}
.view{flex:1;min-width:0;max-width:min(1180px,calc((100svh - 330px) * 1.6));text-align:left}
.vt{display:flex;align-items:baseline;gap:16px;min-height:56px}
.vt b{font:800 13px/1 Archivo;font-stretch:125%;letter-spacing:.08em;text-transform:uppercase;color:var(--g);flex:none}
.vt p{font-size:clamp(17px,1.3vw,23px);line-height:1.35;color:var(--ink);text-wrap:balance}
.win{position:relative;margin-top:14px;aspect-ratio:1.6;border-radius:12px;overflow:hidden;background:#050505;
  box-shadow:0 0 0 1px #ffffff17,0 50px 110px -40px #000,0 30px 120px -70px #14f19580}
.win img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s var(--ease)}
.win img.on{opacity:1}
.steps{display:flex;align-items:center;gap:14px;margin-top:14px;min-height:44px;font-size:15px;color:var(--mute)}
.steps button{color:var(--ink);font-weight:600;padding:12px 4px}
.steps button:hover{color:var(--g)}
.steps .sep{flex:1}
.steps span,.steps button{white-space:nowrap}

/* 3 · Ask your network */
.ask3{width:min(760px,100%);margin-top:var(--gap);text-align:left}
.q{display:flex;align-items:center;gap:14px;height:64px;padding:0 22px;border-radius:16px;background:var(--raise);box-shadow:inset 0 0 0 1px #24232a}
.q:focus-within{box-shadow:inset 0 0 0 1px #14f19588,0 0 0 3px #14f19522}
.q svg{flex:none;stroke:var(--mute);fill:none;stroke-width:2}
.q input{flex:1;min-width:0;outline:none;font-size:19px}
.q kbd{font:400 13px/1 "Geist Mono";color:var(--mute)}
.try{margin-top:14px;padding:0 22px;font-size:15px;color:var(--mute)}
.try button{color:var(--dim);text-decoration:underline;text-decoration-color:#4a4740;text-underline-offset:4px;padding:13px 2px}
.try button:hover{color:var(--ink);text-decoration-color:var(--g)}
.res{list-style:none;margin-top:28px}
.p{display:grid;grid-template-columns:28px 52px minmax(0,1fr) auto;column-gap:16px;align-items:start;padding:18px 22px}
.p.rise{opacity:0;transform:translateY(14px)}
.p.up{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.p .n{font:800 17px/52px Archivo;font-stretch:112%;color:var(--mute)}
.p .ph{width:52px;height:52px;border-radius:50%;object-fit:cover;background:#26252b;display:grid;place-items:center;font:700 15px/1 Archivo;color:#cfcac2}
.p h3{font:600 18px/1.3 Archivo;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.p h3 span{font:400 15px/1.3 Archivo;color:var(--mute)}
.p .why{margin-top:4px;font-size:16px;color:var(--ink)}
.p q{display:block;margin-top:6px;font-size:15px;color:var(--dim);quotes:"\201C" "\201D"}
.p .src{font:400 13px/1.5 Geist;color:var(--mute);text-align:right;padding-top:2px}
.miss{padding:4px 22px 0;font-size:15px;color:var(--mute)}
.foot3{display:flex;justify-content:space-between;padding:10px 22px 0}

/* 4 · Drag the night */
.night{width:min(860px,100%);margin-top:var(--gap);text-align:left}
.clock{display:flex;justify-content:space-between;align-items:baseline;font:600 15px/1 Archivo;font-stretch:108%;color:var(--mute)}
.clock b{font:800 clamp(28px,2.2vw,40px)/1 Archivo;font-stretch:112%;color:var(--ink);font-variant-numeric:tabular-nums}
.tr{position:relative;margin-top:18px;height:44px}
.tr .base{position:absolute;left:0;right:0;top:21px;height:2px;border-radius:2px;background:#1f1e24}
.tr .fill{position:absolute;left:0;top:21px;height:2px;border-radius:2px;background:linear-gradient(90deg,#9945ff,#14f195);width:calc(var(--t) * 100%)}
.tr .tick{position:absolute;top:16px;width:2px;height:12px;border-radius:1px;background:#33323a;transform:translateX(-1px);transition:background .3s}
.tr .tick.on{background:var(--g)}
.tr input{position:absolute;inset:0;width:100%;height:44px;opacity:0;cursor:grab;margin:0}
.tr input:active{cursor:grabbing}
.knob{position:absolute;top:2px;left:calc(var(--t) * 100%);width:40px;height:40px;margin-left:-20px;border-radius:50%;pointer-events:none;
  background:#0c0c0f url(/assets/cube-96.webp) center/150%;box-shadow:0 0 0 1.5px #2c2a33,0 6px 18px #000;transition:box-shadow .2s,opacity .3s}
.tr:focus-within .knob{box-shadow:0 0 0 2px var(--g),0 6px 18px #000}
.ends{display:flex;justify-content:space-between;margin-top:6px;font-size:14px;color:var(--mute)}
.log{list-style:none;margin-top:28px}
.lg{display:grid;grid-template-columns:90px 22px minmax(0,1fr);column-gap:14px;align-items:baseline;padding:11px 0}
/* not done yet: muted, never faded below readable contrast */
.lg:not(.on) p,.lg:not(.on) p span{color:var(--mute);font-weight:400}
.lg:not(.on) .pm{background:#1d1b20;color:var(--mute)}
.lg time{font:400 14px/1 "Geist Mono";color:var(--mute)}
.lg .pm{align-self:center}
.lg p{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg p b{font-weight:600;margin-right:10px}
.lg p span{color:var(--mute)}
.sum{margin-top:30px;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.sum.on{opacity:1;transform:none}
.sum p{font:800 clamp(20px,2vw,34px)/1.2 Archivo;font-stretch:112%;text-wrap:balance}
.sum .dim{color:var(--dim)}

/* End: the blank seat is yours */
.seat{position:relative;width:min(760px,92vw)}
.seat .team{width:100%;filter:brightness(.32) saturate(.6)}
.seat .lit{position:absolute;inset:0;filter:none;clip-path:inset(0 0 0 72%)}
.end .h2{margin-top:6px}
.end .join{margin-top:32px}

.foot{display:flex;justify-content:space-between;gap:16px;padding:28px var(--pad) 36px;font-size:14px;color:var(--mute);border-top:1px solid var(--line)}
.foot a{text-decoration:none;display:inline-block;padding:14px 0;margin:-14px 0}
.foot a:hover{color:var(--ink)}

/* The live cube's layer: one full-window transparent frame, above the page, never catching the pointer.
   Wild moments may fly out of their slot, so the frame is the whole window and the slot is placed in it. */
.cubelayer{position:absolute;inset:0;overflow:clip;pointer-events:none;z-index:15}
.cubefx{position:absolute;left:0;top:0;width:1px;height:1px;border:0;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);background:transparent}
.cubefx.on{opacity:1}
.held{opacity:0!important}

/* The EU storage notice: a corner, never in the way */
.eu{position:fixed;left:16px;bottom:16px;z-index:25;max-width:min(380px,calc(100vw - 32px));display:flex;gap:14px;align-items:center;
  padding:12px 12px 12px 16px;border-radius:14px;background:#0e0e11ee;box-shadow:inset 0 0 0 1px #26252c,0 12px 40px #000a;font-size:13px;line-height:1.4;color:var(--dim)}
.eu button{flex:none;font:600 14px/1 Geist;color:var(--ink);padding:12px 14px;min-height:44px;border-radius:10px;background:#1d1b20}

/* thanks.html and join-error.html: the no-JavaScript answers */
.solo{min-height:100svh;display:grid;place-items:center;padding:40px var(--pad);text-align:center}
.solo h1{font:800 clamp(36px,5vw,56px)/1.05 Archivo;font-stretch:112%}
.solo p{margin-top:12px;color:var(--dim);text-wrap:balance}
.solo .back{margin-top:28px}
.solo .cube{width:160px;margin:0 auto 18px}

@media (max-width:980px){
  .jobs{flex-direction:column}
  .dial{--dw:min(320px,60vw);margin:0 0 8px}
  .view{width:100%;max-width:none}
}
/* Under 760 px the ring has no room for its labels: the six become a wrapped row of choices over the window */
@media (max-width:760px){
  .dial{width:100%;height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 18px;margin:0 0 10px}
  .dial svg,.dial .cubebox{display:none}
  .dial .wf{position:static;transform:none!important;padding:12px 2px;font-size:15px}
  .dial .wf[aria-checked=true]{box-shadow:inset 0 -2px 0 var(--g)}
  .vt{flex-direction:column;gap:8px;min-height:0}
  .steps{flex-direction:column;align-items:flex-start;gap:0}
  .steps .sep{display:none}
}
@media (max-width:640px){
  .in{flex-wrap:wrap;border-radius:22px;padding:6px}
  .ring{border-radius:24px}
  .in .key{width:100%}
  .nm{flex-direction:column;gap:2px}
  .nm .st{max-width:100%;font-size:14px}
  .aq{padding-left:18px}
  .p{grid-template-columns:44px minmax(0,1fr);row-gap:6px;padding:16px 4px}
  .p .n,.p .src{display:none}.p .ph{width:44px;height:44px}
  .lg{grid-template-columns:72px 22px minmax(0,1fr)}
  .lg p{white-space:normal}
  .lg p b{display:block}
  .bhead .sample{display:none}
  .foot{flex-direction:column;align-items:flex-start}
  .sum p{font-stretch:100%}
  /* the hero line on one line at phone width: Archivo narrows on its own width axis rather than shrinking */
  .hero h1{font-stretch:87%;--h1fit:10.1}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition-duration:.01ms!important;animation:none!important}
}