:root{
  --ink:#050508; --chrome:#eef1f8; --muted:#9aa0bd; --peri:#738adb; --peri-hi:#a9b8ff;
  --mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:#000;color:var(--chrome);font:14px/1.5 var(--mono)}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
kbd{display:inline-grid;place-items:center;min-width:1.7em;height:1.7em;padding:0 .4em;margin:0 .15em;border:1px solid rgba(238,241,248,.55);border-radius:4px;
  font:700 11px var(--mono);color:#fff;background:rgba(0,0,0,.4);box-shadow:0 2px 0 rgba(0,0,0,.6)}
body:not(.touch) .touch-only{display:none!important}
body.touch .desk-only{display:none!important}

/* film look over the 3D view */
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:2;opacity:.09;animation:grain .5s steps(4) infinite;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes grain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,-2%)}}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.75) 100%)}

/* gate */
.gate{position:fixed;inset:0;z-index:20;display:grid;place-content:center;justify-items:center;gap:18px;padding:24px;text-align:center;
  background:radial-gradient(700px 400px at 50% 40%,rgba(115,138,219,.16),transparent 70%),rgba(3,3,6,.9);transition:opacity .6s}
.gate.gone{opacity:0;pointer-events:none}
.gate-logo{position:relative;width:min(420px,78vw);aspect-ratio:740/162;filter:drop-shadow(0 0 22px rgba(169,184,255,.35));margin-bottom:6px}
.gate-logo img{position:absolute;inset:0;width:100%;height:100%;display:block}
.gate-logo .gate-star{left:89.865%;top:-4.321%;width:10.811%;height:49.383%;will-change:transform;transform-origin:50% 50%}
.gate-status{margin:0;color:var(--muted);font-size:12px;letter-spacing:.12em}
.gate-btn{border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.08);color:#fff;font:700 14px var(--mono);letter-spacing:.3em;padding:14px 38px;border-radius:999px;cursor:pointer}
.gate-btn:hover,.gate-btn:focus-visible{background:#fff;color:#000;outline:none}
.gate-help{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;color:var(--muted);font-size:12px;max-width:520px}

/* HUD */
.crosshair{position:fixed;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:rgba(255,255,255,.75);z-index:5;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s}
.crosshair.on{opacity:1}
.crosshair.hot{transform:scale(2.2);background:#fff;box-shadow:0 0 10px #fff}
.prompt{position:fixed;left:28px;bottom:26px;z-index:5;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;
  background:rgba(0,0,0,.45);font:700 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;pointer-events:none}
.label{position:fixed;left:50%;top:calc(50% + 26px);transform:translateX(-50%);z-index:5;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px #000;pointer-events:none}
.touch-act{position:fixed;right:22px;bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:6;width:86px;height:86px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.7);background:rgba(115,138,219,.35);color:#fff;font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.stick{position:fixed;left:26px;bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:6;width:120px;height:120px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35);background:rgba(0,0,0,.2);pointer-events:none;opacity:0;transition:opacity .2s}
.stick.on{opacity:1}
.stick i{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(255,255,255,.55)}

/* synth: only a small hint, the real 3D keys move */
.synth-hint{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:16px;padding:8px 10px 8px 16px;border-radius:999px;
  background:rgba(0,0,0,.5);font-size:12px;color:var(--muted);white-space:nowrap}
.synth-close{border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font:700 11px var(--mono);letter-spacing:.14em;padding:6px 12px;border-radius:999px;cursor:pointer}
.synth-close:hover{background:#fff;color:#000}.synth-close:hover kbd{color:#000;border-color:#000;background:transparent}
body.synth-on #gl{cursor:pointer}

/* PC: boot video, then the website, full screen */
.pc{position:fixed;inset:0;z-index:10;background:#000;opacity:0;transition:opacity .5s}
.pc.on{opacity:1}
.pc video,.pc iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;background:#000}
.pc iframe{opacity:0;transition:opacity .8s}
.pc.site iframe{opacity:1}
.pc.site video{opacity:0;transition:opacity .6s}
.crt{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.55) 100%);
  animation:crtOn .7s ease-out}
.pc.site .crt{opacity:.35}
@keyframes crtOn{0%{transform:scaleY(.01) scaleX(.4);filter:brightness(5)}60%{transform:scaleY(1) scaleX(1)}100%{filter:none}}
.pc-btn{position:absolute;z-index:3;right:16px;top:16px;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.55);color:#fff;
  font:700 11px var(--mono);letter-spacing:.14em;padding:9px 14px;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px)}
.pc-btn:hover{background:#fff;color:#000}
.pc-btn.leave{top:74px;right:16px}

@media (prefers-reduced-motion:reduce){.grain,.crt{animation:none}}