:root{
  --bg:#050609;
  --text:#f4f5f7;
  --muted:#7d828c;
  --line:rgba(255,255,255,.12);
  --accent:#ff6b1a;
  --accent-soft:rgba(255,107,26,.18);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,Arial,Helvetica,sans-serif;overflow:hidden}
body{min-height:100vh}
button{font:inherit}
#app{position:relative;width:100vw;height:100vh;min-height:620px;overflow:hidden;background:
 radial-gradient(circle at 62% 45%,rgba(255,107,26,.055),transparent 28%),
 radial-gradient(circle at 50% 50%,#0a0c11 0,#050609 58%,#020304 100%)}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.ambient-grid{position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(circle at 62% 48%,black,transparent 66%)}
.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 160px 50px #000}
.topbar{position:absolute;top:0;left:0;right:0;padding:28px 34px;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.2em;color:#9a9fa9;border-bottom:1px solid rgba(255,255,255,.06)}
.brand,.status{display:flex;align-items:center;gap:10px}
.brand-mark{width:8px;height:8px;border:1px solid var(--accent);transform:rotate(45deg)}
.status-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.hero{position:absolute;left:6.5vw;top:50%;transform:translateY(-57%);width:min(500px,38vw);pointer-events:none}
.eyebrow{margin:0 0 20px;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.28em}
h1{font-size:clamp(58px,7.2vw,126px);line-height:.78;letter-spacing:-.075em;margin:0;font-weight:700}
h1 span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.38)}
.lede{width:min(360px,90%);margin:30px 0 0;color:#858a94;font-size:13px;line-height:1.7;letter-spacing:.02em}
.data-panel{position:absolute;right:34px;top:100px;width:180px;border-left:1px solid var(--line);padding-left:18px}
.data-panel div{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;gap:14px}
.data-panel span{font-size:8px;color:#686d76;letter-spacing:.18em}
.data-panel strong{font-size:9px;font-weight:600;letter-spacing:.12em}
.hint{position:absolute;left:6.5vw;bottom:96px;display:flex;align-items:center;gap:12px;color:#666b75;font-size:8px;letter-spacing:.16em}
.mouse-icon{width:17px;height:25px;border:1px solid #555b65;border-radius:10px;position:relative}
.mouse-icon:after{content:"";position:absolute;left:7px;top:5px;width:1px;height:5px;background:var(--accent)}
.modes{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;border:1px solid rgba(255,255,255,.1);background:rgba(7,8,11,.7);backdrop-filter:blur(14px)}
.mode{min-width:120px;padding:13px 17px;border:0;border-right:1px solid rgba(255,255,255,.08);background:transparent;color:#70757e;cursor:pointer;text-align:left;text-transform:uppercase;font-size:9px;letter-spacing:.14em;transition:.25s}
.mode:last-child{border-right:0}
.mode span{color:#464b53;margin-right:12px}
.mode:hover,.mode.active{color:#fff;background:rgba(255,255,255,.045)}
.mode.active{box-shadow:inset 0 -2px var(--accent)}
.mode.active span{color:var(--accent)}
.soundless{position:absolute;right:34px;bottom:30px;border:0;background:none;color:#656a73;font-size:8px;letter-spacing:.16em;cursor:pointer;padding:10px}
.soundless:hover{color:#fff}
@media(max-width:800px){
  #app{min-height:600px}
  .topbar{padding:20px}.status{display:none}
  .hero{left:24px;top:28%;transform:none;width:75vw}
  h1{font-size:clamp(52px,17vw,88px)}
  .lede{font-size:12px;margin-top:20px}
  .data-panel{top:auto;bottom:145px;right:20px;width:150px}
  .hint{left:24px;bottom:150px;width:42%;line-height:1.7}
  .modes{left:16px;right:16px;bottom:20px;transform:none}
  .mode{min-width:0;flex:1;padding:13px 8px;text-align:center}
  .mode span{display:block;margin:0 0 4px}
  .soundless{display:none}
}
@media(prefers-reduced-motion:reduce){.status-dot{box-shadow:none}}