:root{
  --bg:#05060f; --ink:#e9ecff; --dim:#9aa3c7; --line:rgba(160,175,255,.16);
  --cyan:#22d3ee; --violet:#8b5cf6; --pink:#f472b6; --amber:#fbbf24; --green:#34d399;
  --glass:rgba(10,13,32,.55);
  --sans:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}
body{overscroll-behavior:none;touch-action:none}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}
.mono{font-family:var(--mono)}
a{color:inherit}

/* loader */
#loader{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#101640,#05060f 70%);transition:opacity .9s ease,visibility .9s}
#loader.gone{opacity:0;visibility:hidden;pointer-events:none}
.loader-inner{text-align:center;padding:24px;max-width:420px}
.logo-mark{width:72px;height:72px;margin:0 auto 22px;border-radius:20px;display:grid;place-items:center;font-weight:700;font-size:26px;letter-spacing:1px;background:linear-gradient(135deg,var(--cyan),var(--violet));color:#05060f;box-shadow:0 0 60px rgba(34,211,238,.45);animation:float 3s ease-in-out infinite}
.loader-inner h1{font-size:34px;letter-spacing:-.5px}
.loader-inner p{color:var(--dim);margin-top:8px;font-size:13px}
.loader-inner .small{margin-top:22px;font-size:12px}
.bar{height:3px;background:var(--line);border-radius:3px;margin:28px 0 22px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--pink));transition:width .3s}
#enter{font:600 15px var(--sans);padding:14px 30px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--dim);cursor:not-allowed;transition:.3s}
#enter:not(:disabled){cursor:pointer;color:#05060f;background:linear-gradient(90deg,var(--cyan),#a78bfa);border-color:transparent;box-shadow:0 0 40px rgba(34,211,238,.4)}
#enter:not(:disabled):hover{transform:scale(1.05)}
@keyframes float{50%{transform:translateY(-8px)}}

/* top / nav */
.top{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:20px 28px;pointer-events:none}
.top>*{pointer-events:auto}
.brand{font-weight:700;font-size:22px;text-decoration:none;letter-spacing:1px}
.brand span{color:var(--cyan)}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px);color:var(--ink);cursor:pointer;font-size:16px;transition:.2s;display:grid;place-items:center}
.icon-btn:hover{border-color:var(--cyan);color:var(--cyan);transform:scale(1.08)}
.icon-btn.off{opacity:.45;text-decoration:line-through}
#dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:10;display:flex;flex-direction:column;gap:14px;align-items:flex-end}
#dots button{display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--dim);cursor:pointer;font:500 11px var(--mono);letter-spacing:.8px;text-transform:uppercase}
#dots button span{opacity:0;transform:translateX(6px);transition:.25s;pointer-events:none}
#dots button:hover span,#dots button.on span{opacity:1;transform:none}
#dots button i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--dim);transition:.3s}
#dots button.on{color:var(--cyan)}
#dots button.on i{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 14px var(--cyan);transform:scale(1.3)}

/* panels */
#panels{position:fixed;inset:0;z-index:5;pointer-events:none}
.panel{position:absolute;left:5vw;top:50%;width:min(440px,88vw);transform:translateY(-46%);opacity:0;visibility:hidden;transition:opacity .6s ease,transform .6s ease,visibility .6s;padding:30px 30px 26px;border-radius:24px;background:linear-gradient(160deg,rgba(14,18,44,.62),rgba(8,10,26,.5));border:1px solid var(--line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.panel.on{opacity:1;visibility:visible;transform:translateY(-50%);pointer-events:auto;transition-delay:.15s}
.panel>*{margin-bottom:14px}
.panel>*:last-child{margin-bottom:0}
.panel h2{font-size:clamp(28px,3.2vw,40px);line-height:1.05;letter-spacing:-1px}
.panel h2.mega{font-size:clamp(46px,6.2vw,84px);line-height:.95;letter-spacing:-3px;background:linear-gradient(120deg,#fff 20%,var(--cyan) 60%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.panel p{color:#c3c9ea;line-height:1.55;font-size:15px}
.kicker{color:var(--cyan);font-size:12px;letter-spacing:1.6px;text-transform:uppercase}
.lead{font-size:17px!important;color:var(--ink)!important}
.roles{font:600 18px var(--mono)!important;color:var(--pink)!important;min-height:26px}
.caret{animation:blink 1s steps(1) infinite;color:var(--pink)}
@keyframes blink{50%{opacity:0}}
.hint{font-size:11.5px!important;color:var(--dim)!important;letter-spacing:.4px}
.mini{font-size:11.5px!important;color:var(--dim)!important;line-height:1.7!important}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12.5px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:#d6dbf7}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.cta.col{flex-direction:column}
.btn{font:600 14px var(--sans);padding:12px 20px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);cursor:pointer;text-decoration:none;transition:.25s;text-align:center}
.btn:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:0 8px 30px rgba(34,211,238,.18)}
.btn.primary{background:linear-gradient(90deg,var(--cyan),#a78bfa);color:#05060f;border-color:transparent}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stats div{padding:14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.stats b{display:block;font-size:28px;letter-spacing:-1px;background:linear-gradient(90deg,var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{font-size:11.5px;color:var(--dim);line-height:1.35;display:block;margin-top:4px}
.rows{list-style:none;display:grid;gap:8px}
.rows li{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.035);cursor:pointer;transition:.25s}
.rows li:hover,.rows li.hl{border-color:var(--cyan);transform:translateX(6px);background:rgba(34,211,238,.07)}
.rows li b{font-size:14px;font-weight:600}
.rows li span{font:12px var(--mono);color:var(--dim)}
.cats{display:grid;gap:8px}
.cat{padding:11px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.035);cursor:default;transition:.25s}
.cat:hover,.cat.hl{border-color:var(--c,var(--cyan));transform:translateX(6px)}
.cat i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c);margin-right:8px}
.cat b{font-size:14px}
.cat span{display:block;font-size:12.5px;color:var(--dim);margin-top:4px;line-height:1.4}

.avatar{display:flex;align-items:center;gap:14px}
.avatar .ph{position:relative;width:88px;height:88px;border-radius:50%;flex:none;box-shadow:0 0 34px rgba(34,211,238,.4)}
.avatar .ph::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--cyan),var(--violet),var(--pink),var(--cyan));animation:spinring 6s linear infinite}
.avatar img{position:relative;display:block;width:82px;height:82px;margin:3px;border-radius:50%;object-fit:cover;border:0}
.avatar .status{font-size:12px;color:var(--green);padding:5px 11px;border:1px solid rgba(52,211,153,.4);border-radius:999px;background:rgba(52,211,153,.08)}
@keyframes spinring{to{transform:rotate(360deg)}}

/* drawer */
#drawer{position:fixed;z-index:20;top:50%;right:5vw;width:min(420px,90vw);max-height:84vh;overflow:auto;transform:translate(40px,-50%);opacity:0;visibility:hidden;transition:.45s cubic-bezier(.2,.8,.2,1);padding:30px;border-radius:24px;background:linear-gradient(160deg,rgba(16,20,50,.9),rgba(8,10,26,.88));border:1px solid rgba(34,211,238,.35);backdrop-filter:blur(20px);box-shadow:0 0 80px rgba(34,211,238,.12),0 30px 80px rgba(0,0,0,.5)}
#drawer.on{opacity:1;visibility:visible;transform:translate(0,-50%)}
#drawer>*{margin-bottom:14px}
#close{position:absolute;top:14px;right:14px;width:34px;height:34px;font-size:13px;margin:0!important}
#drawer h3{font-size:25px;line-height:1.15;letter-spacing:-.5px;padding-right:30px}
#drawer .meta{color:var(--pink);font-size:12.5px}
#drawer ul{list-style:none;display:grid;gap:10px}
#drawer li{position:relative;padding-left:20px;font-size:14px;line-height:1.5;color:#cfd4f2}
#drawer li::before{content:"◆";position:absolute;left:0;color:var(--cyan);font-size:9px;top:5px}

/* hud */
#hud{position:fixed;z-index:10;left:0;right:0;bottom:0;padding:20px 28px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}
#hud>*{pointer-events:auto}
#shards{font:600 14px var(--mono);padding:9px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px)}
#shards i{color:var(--amber);font-style:normal;text-shadow:0 0 10px var(--amber)}
#shards span{color:var(--dim)}
#shards em{font-style:normal}
#shards.pop{animation:pop .5s}
@keyframes pop{40%{transform:scale(1.25);border-color:var(--amber)}}
#nav-arrows{display:flex;gap:10px;margin-right:46px}
#hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:11px;color:var(--dim);letter-spacing:1px;transition:opacity .6s;pointer-events:none;white-space:nowrap}
#hint.hide{opacity:0}
#tip{position:fixed;z-index:30;pointer-events:none;padding:6px 11px;border-radius:8px;background:rgba(5,6,15,.85);border:1px solid var(--cyan);color:var(--ink);font-size:12px;opacity:0;transform:translate(14px,14px);transition:opacity .15s;white-space:nowrap}
#tip.on{opacity:1}
#toast{position:fixed;z-index:40;left:50%;top:84px;transform:translate(-50%,-20px);opacity:0;padding:14px 22px;border-radius:16px;background:rgba(10,13,32,.9);border:1px solid var(--amber);color:var(--ink);font-size:14px;text-align:center;max-width:90vw;transition:.5s;pointer-events:none;box-shadow:0 0 50px rgba(251,191,36,.2)}
#toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:820px){
  .top{padding:14px 16px}
  #dots{right:10px;gap:11px}
  #dots button span{display:none}
  .panel{left:50%;top:auto;bottom:62px;width:min(560px,calc(100vw - 24px));max-height:46vh;overflow:auto;transform:translate(-50%,20px);padding:18px 18px 16px;border-radius:20px}
  .panel.on{transform:translate(-50%,0)}
  .panel>*{margin-bottom:10px}
  .panel p{font-size:13.5px}
  .panel h2{font-size:26px}.panel h2.mega{font-size:46px}
  .stats b{font-size:22px}
  .panel[data-i="0"] .lead,.panel[data-i="0"] .chips,.panel[data-i="0"] .hint,.panel .hint{display:none}
  .stats span{font-size:10.5px}
  #drawer{right:auto;left:50%;top:auto;bottom:12px;width:calc(100vw - 24px);max-height:70vh;transform:translate(-50%,30px)}
  #drawer.on{transform:translate(-50%,0)}
  #hud{padding:14px 16px}#hint{display:none}
  #nav-arrows{margin-right:30px}
}
@media (prefers-reduced-motion:reduce){.panel,#drawer{transition-duration:.01s}}

/* fall into the black hole */
#fall{position:fixed;inset:0;z-index:35;background:#000;opacity:0;pointer-events:none;display:grid;place-items:center;text-align:center}
#fall.done{pointer-events:auto}
#fall .card{max-width:520px;padding:28px;opacity:0;transform:translateY(14px);transition:opacity 1.4s .5s,transform 1.4s .5s}
#fall.done .card{opacity:1;transform:none}
#fall h3{font-size:clamp(24px,4vw,36px);line-height:1.15;letter-spacing:-.5px;margin:12px 0 14px}
#fall p{color:#c3c9ea;line-height:1.55;font-size:15px}
#fall .cta{justify-content:center;margin-top:22px}
body.falling .panel,body.falling .top,body.falling #dots,body.falling #hud,body.falling #tip,body.falling #toast{opacity:0!important;pointer-events:none!important;transition:opacity .5s}

#fall-msg{font-size:17px!important;color:var(--ink)!important;margin-top:4px}
#fall-msg b{display:inline-block;min-width:1ch;font:700 22px var(--mono);color:var(--cyan);text-shadow:0 0 18px var(--cyan)}
.fall-bar{height:2px;width:min(320px,70vw);margin:20px auto 16px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.fall-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--pink));box-shadow:0 0 14px var(--cyan)}
.fall-bar i.run{width:100%;transition:width 10s linear}
#fall .mini{font-size:11px;color:var(--dim)}

/* very tall cards scroll instead of running off short screens */
@media (min-width:821px){.panel{max-height:90vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(160,175,255,.3) transparent}}