:root{
  --fg:#f2f4f7; --dim:rgba(242,244,247,.56); --line:rgba(242,244,247,.16);
  --sans:"Onest","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,Menlo,monospace;
  --gut:clamp(16px,3.4vw,54px); --top:clamp(56px,8vh,72px);
}
body[data-tone=light]{--fg:#0a0c10;--dim:rgba(10,12,16,.6);--line:rgba(10,12,16,.16)}
*{box-sizing:border-box;margin:0}
html{background:#000;-webkit-text-size-adjust:100%}
body{background:#000;color:var(--fg);font-family:var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:color .2s}
#scroll{height:2700vh;pointer-events:none}
#gl{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:1px solid var(--fg);outline-offset:4px}

/* HUD reveals once the terminal hands over */
#hud{opacity:0;transition:opacity 1s}
.live #hud{opacity:1}
#hud{position:fixed;z-index:30;left:0;right:0;top:0;height:var(--top);padding:0 var(--gut);display:flex;justify-content:space-between;align-items:center;font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.brand{display:block;width:92px;height:15px}
.brand svg{display:block;width:100%;height:100%}
.hud-r{display:flex;gap:18px;justify-self:end;align-items:center}
#sound{display:flex;gap:9px;align-items:center;letter-spacing:inherit;text-transform:inherit;height:28px;padding:0 11px;border:1px solid var(--line);border-radius:2px;transition:background .2s,color .2s}
#lang{display:flex;gap:2px;align-items:center;height:28px;padding:0 6px;border:1px solid var(--line);border-radius:2px;letter-spacing:.12em}
#lang b{font-weight:400;padding:3px 5px;color:var(--dim);transition:color .2s}
#lang b.on{color:var(--fg)}
#lang:hover b{color:var(--fg)}
#sound i{display:block;width:6px;height:6px;border-radius:50%;background:var(--dim)}
#sound[aria-pressed=true] i{background:#7dffb0;box-shadow:0 0 8px #7dffb0}
#sound:hover{background:var(--fg);color:#000}
body[data-tone=light] #sound:hover{color:#fff}



/* copy */
.beat{position:fixed;z-index:10;opacity:0;visibility:hidden;will-change:opacity,transform}
h1{display:block;width:min(66vw,1040px);margin:0 auto}
h1 svg{display:block;width:100%;aspect-ratio:926/160;height:auto;overflow:visible;filter:drop-shadow(0 0 22px rgba(0,0,0,.72))}
h2{font-weight:300;font-size:clamp(32px,4.1vw,64px);line-height:1.05;letter-spacing:-.022em;text-wrap:balance}
.k{font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:clamp(14px,2.4vh,22px)}
.txt{font-size:clamp(17px,1.5vw,22px);line-height:1.32;font-weight:300;letter-spacing:-.008em}
body[data-tone=dark] .beat h2,body[data-tone=dark] .txt{text-shadow:0 0 22px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.6)}
.eq{font:400 clamp(11px,1vw,13px)/1.75 var(--mono);color:var(--dim);margin-top:18px}
.sub{font:300 clamp(16px,1.5vw,22px)/1.3 var(--sans);letter-spacing:-.005em;color:var(--fg)}
.hero{left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;margin-top:-5vh;pointer-events:none}
.hero .sub{margin-top:clamp(18px,3.4vh,34px);text-shadow:0 0 18px #000,0 0 3px #000}
.left{left:var(--gut);max-width:min(620px,70vw)}
.left.mid{top:50%;margin-top:-9vh}
.left.top{top:calc(var(--top) + clamp(26px,6vh,62px))}
.beat.right{right:var(--gut);max-width:min(420px,76vw)}
.beat.right.low{bottom:clamp(60px,11vh,110px)}
.beat.right.top{top:calc(var(--top) + clamp(30px,8vh,80px))}
.center{left:0;right:0;top:50%;margin-top:-6vh;text-align:center;padding:0 var(--gut);white-space:pre-line}
.apply{left:0;right:0;top:calc(50% + clamp(10px,3vh,34px));padding:0 calc(var(--gut) + 20px);text-align:center}
.apply h2{font-size:clamp(24px,2.5vw,36px);margin-bottom:clamp(16px,3vh,28px)}
.row{display:grid;grid-template-columns:1fr 1fr 1.3fr auto;gap:clamp(14px,2vw,28px);align-items:start;max-width:1040px;margin:0 auto;text-align:left}
.field{position:relative;display:flex;flex-direction:column}
.field label{font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.field input{appearance:none;width:100%;height:36px;padding:0 0 6px;background:none;border:0;border-bottom:1px solid rgba(242,244,247,.36);border-radius:0;color:var(--fg);font:300 17px/1 var(--sans);outline:0;transition:border-color .2s}
.field input:focus{border-bottom-color:#f2f4f7}
.field input:-webkit-autofill{-webkit-text-fill-color:#f2f4f7;box-shadow:0 0 0 40px #000 inset;caret-color:#f2f4f7}
.field:nth-child(3){grid-column:3/5}
.wish{grid-column:1/4}
.field textarea{appearance:none;display:block;width:100%;height:58px;padding:2px 0 6px;background:none;border:0;border-bottom:1px solid rgba(242,244,247,.36);border-radius:0;color:var(--fg);font:300 16px/1.3 var(--sans);outline:0;resize:none;transition:border-color .2s}
.field textarea{scrollbar-width:none}
.field textarea::-webkit-scrollbar{display:none}
.field textarea:focus{border-bottom-color:#f2f4f7}
.field.bad input{border-bottom-color:#ff8f7a}
.err{min-height:16px;margin-top:6px;font:400 11px/1.3 var(--mono);color:#ffb3a4}
#apply button{display:inline-flex;gap:14px;align-items:center;justify-content:center;height:46px;margin-top:16px;padding:0 20px;white-space:nowrap;background:#f2f4f7;color:#000;border-radius:2px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;transition:opacity .2s}
#apply button:hover{opacity:.84}#apply button:disabled{opacity:.4;cursor:wait}
#apply button i{font-style:normal;transition:transform .2s}#apply button:hover i{transform:translateX(4px)}
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.status{min-height:10px;font:400 12px/1.4 var(--mono);color:#ffb3a4}
.after{font:300 clamp(20px,2.2vw,32px)/1.25 var(--sans);opacity:0;position:absolute;left:0;right:0;top:clamp(20px,5vh,50px);pointer-events:none;transition:opacity 1.2s .9s}
.accepted .after{opacity:1}
.accepted #apply{opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
#card{position:fixed;z-index:12;left:0;right:0;top:50%;margin-top:14px;display:flex;justify-content:center;gap:12px;font:400 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;opacity:0;pointer-events:none}
.foot{left:calc(var(--gut) + 70px);right:calc(var(--gut) + 70px);bottom:clamp(14px,2.6vh,22px);display:flex;justify-content:center;gap:26px;font:400 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* labels pinned to the machine */
.tag3d{position:fixed;left:0;top:0;z-index:9;opacity:0;transition:opacity .4s;pointer-events:none;will-change:transform}
.tag3d i{position:absolute;left:0;top:0;width:clamp(30px,5vw,74px);height:1px;background:#f2f4f7;transform-origin:left;transform:rotate(-32deg)}
.tag3d i::before{content:"";position:absolute;left:-3px;top:-3px;width:7px;height:7px;border:1px solid #f2f4f7;border-radius:50%;background:#000}
.tag3d p{position:absolute;left:clamp(26px,4.4vw,66px);top:clamp(-52px,-3.2vw,-30px);padding-left:8px;white-space:nowrap;font:400 10px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#f2f4f7;text-shadow:0 0 8px #000}
.tag3d b{font-weight:400;display:inline-block;background:#f2f4f7;color:#000;padding:0 5px;margin-right:7px;text-shadow:none}
.tag3d small{display:block;font-size:10px;color:rgba(242,244,247,.66);letter-spacing:.08em;text-transform:none}

#nudge{position:fixed;z-index:14;left:0;right:0;bottom:calc(clamp(12px,2.4vh,22px) + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--fg);font:400 13px/1 var(--sans);opacity:0;transform:translateY(6px);transition:opacity .7s,transform .7s;pointer-events:none}
#nudge.show{opacity:.86;transform:none}
#nudge i{position:relative;display:block;width:1px;height:40px;overflow:hidden;background:color-mix(in srgb,currentColor 22%,transparent)}
#nudge i::after{content:"";position:absolute;left:0;top:-16px;width:1px;height:16px;background:currentColor;animation:nudge 2.1s cubic-bezier(.6,0,.3,1) infinite}
@keyframes nudge{to{transform:translateY(56px)}}
@media (max-height:540px){
  .apply{top:auto;bottom:6px}
  .field textarea{height:30px}
  .apply h2{font-size:18px;margin-bottom:6px}
  .foot{display:none}
  #apply button{margin-top:6px}
  .err{min-height:12px;font-size:10px}
}

.msg{display:none;position:fixed;inset:0;height:max-content;max-width:520px;margin:auto;padding:24px;text-align:center;font-size:20px;z-index:60}
noscript .msg{display:block}
.nogl .nogl-msg{display:block}.nogl #hud,.nogl #nudge{display:none}

@media (max-width:760px){
    h1{width:calc(100vw - 2*var(--gut))}
  .left,.beat.right{left:var(--gut);right:var(--gut);max-width:none}
  .left.mid{top:auto;bottom:clamp(70px,13vh,110px);margin:0}
  .left.top{top:calc(var(--top) + 26px)}
  .beat.right.low{bottom:clamp(58px,10vh,90px)}
  .tag3d i{width:24px}.tag3d p{left:20px;top:-30px}
  .apply{top:auto;bottom:clamp(92px,15vh,130px);padding:0 var(--gut)}
  .row{grid-template-columns:1fr;gap:2px}
  .field:nth-child(3),.wish{grid-column:auto}
  .field textarea{height:46px}
  .wish{margin-bottom:8px}
  .err{min-height:13px;margin-top:3px}
  #apply button{margin-top:2px;width:100%}
  .field input{height:34px}
  .apply h2{margin-bottom:12px}
  .after{top:auto;bottom:40px}
  .foot{left:var(--gut);right:var(--gut);bottom:38px;flex-direction:column;align-items:center;gap:6px;font-size:9px}
  h2{font-size:clamp(30px,8.4vw,40px)}
}
@media (max-width:760px) and (max-height:740px){
  .apply h2{font-size:21px;margin-bottom:8px}
  .apply{bottom:calc(10px + env(safe-area-inset-bottom))}
  .foot{display:none}
  .field input{height:30px}
  .field label{margin-bottom:3px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} #nudge i{animation:none} }
.svc-btn{display:inline-flex;gap:14px;align-items:center;justify-content:center;height:44px;margin-top:6px;padding:0 20px;border:1px solid rgba(242,244,247,.5);border-radius:2px;background:rgba(0,0,0,.35);color:#f2f4f7;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:background .2s,color .2s}
.svc-btn i{font-style:normal;transition:transform .2s}
.svc-btn:hover{background:#f2f4f7;color:#000}.svc-btn:hover i{transform:translateX(4px)}
.accepted .svc-btn{position:relative;top:clamp(70px,12vh,110px)}
@media (max-width:760px){.svc-btn{display:flex;width:100%;height:42px;margin-top:4px}}
@media (max-height:540px){.svc-btn{height:32px;margin-top:0}}