@import "https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap";:root{--bg:#040608;--ink:#d6e0ef;--muted:#8f97a6;--accent:#7fe0ff;--accent-warm:#f4bf79;--panel:#0d101699}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0}body{color:var(--ink);background:radial-gradient(circle at 14% 25%, #3862852e, transparent 30%), radial-gradient(circle at 84% 11%, #c27c2a21, transparent 22%), radial-gradient(circle at 50% 55%, #4980b414, transparent 45%), var(--bg);font-family:Orbitron,sans-serif;overflow:hidden}#loading-screen{z-index:9999;background:var(--bg);justify-content:center;align-items:center;transition:opacity .5s ease-out;display:flex;position:fixed;inset:0}.loading-content{flex-direction:column;align-items:center;gap:2rem;animation:.5s ease-out fade-in;display:flex}.loading-logo{opacity:.9;width:80%;max-width:280px;height:auto}.loading-bar{background:#7fe0ff26;border-radius:2px;width:300px;height:3px;overflow:hidden;box-shadow:0 0 10px #7fe0ff33}.loading-progress{background:linear-gradient(90deg, var(--accent), var(--accent-warm));width:0%;height:100%;box-shadow:0 0 10px var(--accent);transition:width .3s ease-out}.loading-text{letter-spacing:.15em;color:var(--muted);margin:0;font-family:Helvetica,Arial,sans-serif;font-size:.75rem;animation:2s ease-in-out infinite pulse}@keyframes fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}#scene{width:100%;height:100%;animation:1.35s cubic-bezier(.2,.8,.2,1) scene-enter;display:block;position:absolute;inset:0}.vignette,.grain,.hud{pointer-events:none;position:absolute;inset:0}.vignette{background:radial-gradient(circle at 50% 45%,#0000 38%,#000000a3 100%)}.grain{opacity:.18;mix-blend-mode:screen;background-image:repeating-linear-gradient(0deg,#ffffff14 0 1px,#0000 1px 3px),repeating-linear-gradient(90deg,#ffffff05 0 1px,#0000 1px 4px);animation:8s linear infinite grain-pan}.hud{grid-template-rows:auto 1fr auto;grid-template-columns:1fr auto;gap:.8rem;padding:1.3rem;display:grid}.brand{background:var(--panel);text-align:center;pointer-events:auto;border:1px solid #a0c2e352;border-radius:.1rem;grid-area:1/1;align-self:start;width:fit-content;padding:.85rem 1rem;animation:.8s ease-out rise}.brand .logo{width:100%;max-width:200px;height:auto;margin:0 auto .5rem;display:block}.tagline{color:var(--muted);letter-spacing:.02em;text-align:left;max-width:280px;margin:.5rem 0 0;font-family:Helvetica,Arial,sans-serif;font-size:.75rem;line-height:1.5}.tagline .cmd{color:var(--accent-warm);letter-spacing:.05em;font-family:Courier New,monospace;font-weight:600}.controls{letter-spacing:.12em;color:var(--accent);pointer-events:auto;background:#0e121bb8;border:1px solid #82bedc61;grid-area:1/2;place-self:start end;padding:.6rem .85rem;font-family:Helvetica,Arial,sans-serif;font-size:.66rem;font-weight:700;animation:.9s ease-out rise}.music-control{background:#081018d9;border:1px solid #7fe0ff40;border-radius:2px;flex-direction:column;align-items:center;gap:.5rem;width:fit-content;margin:.75rem auto 0;padding:.5rem .75rem;animation:1s ease-out rise;display:flex}.music-label{letter-spacing:.12em;color:#7fe0ffe6;text-shadow:none;margin:0;font-family:Helvetica,Arial,sans-serif;font-size:.6rem;font-weight:700}.music-slider{appearance:none;cursor:pointer;background:#8f97a64d;border-radius:3px;outline:none;width:160px;height:6px;position:relative}.music-slider::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;z-index:2;border-radius:50%;width:14px;height:14px;transition:all .2s;position:relative}.music-slider::-webkit-slider-thumb:hover{background:var(--accent-warm);transform:scale(1.1)}.music-slider::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px;transition:all .2s}.music-slider::-moz-range-thumb:hover{background:var(--accent-warm);transform:scale(1.1)}.music-slider::-moz-range-track{background:0 0;border-radius:3px;height:6px}.music-slider::-moz-range-progress{background:var(--accent);border-radius:3px;height:6px}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scene-enter{0%{opacity:0;filter:blur(3px);transform:scale(1.03)}to{opacity:1;filter:blur();transform:scale(1)}}@keyframes grain-pan{0%{transform:translate(0,0)}to{transform:translateY(-12px)}}@media (width<=700px){.hud{grid-template-rows:auto auto 1fr auto auto;grid-template-columns:1fr;padding:.8rem}.brand{grid-area:1/1}.controls{grid-area:2/1;justify-self:start}}#tutorial-overlay{z-index:10000;pointer-events:all;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.tutorial-box{background:#081018f2;border:2px solid #7fe0ffcc;border-radius:4px;flex-direction:column;align-items:center;gap:2rem;max-width:640px;padding:3rem 4rem;display:flex;position:relative}.tutorial-box.goodbye{cursor:pointer}.tutorial-text{color:#e8f4ff;text-align:center;font-family:Courier New,monospace;font-size:20px;line-height:1.6}.tutorial-text strong{color:#7fe0ff;font-size:22px;font-weight:700}.tutorial-continue{color:#7fd3ff;opacity:.9;margin-top:1.5rem;font-size:18px}.tutorial-skip{color:#7fe0ff;cursor:pointer;background:#7fe0ff26;border:1px solid #7fe0ff99;border-radius:2px;padding:.7rem 1.5rem;font-family:Courier New,monospace;font-size:16px;transition:all .2s}.tutorial-skip:hover{background:#7fe0ff40;border-color:#7fe0ffe6;transform:translateY(-1px)}.tutorial-skip:active{transform:translateY(0)}
