/* Base: design tokens, page, 3D stage, glass panels, buttons, loader. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0}

/* Layout: full-bleed 3D canvas with the live controller panel floating top-right (bottom on phones). */
:root{
  --ink:#eef1f0;
  --mute:#9ca5a8;
  --panel:rgba(17,20,22,.78);
  --panel-solid:#15181a;
  --line:rgba(255,255,255,.11);
  --hazard:#f2c230;
  --cold:#93d4f5;
  --ok:#5fd38a;
  --alarm:#ff6a55;
  --heat:#ff7a3d;
  --stage:#c3c6c8;
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --gl:max(16px, env(safe-area-inset-left, 0px));
  --gr:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:dark;
}
html,body{height:100%}
[hidden]{display:none!important}
body{background:var(--stage);color:var(--ink);font-family:var(--body);overflow:hidden;padding-left:var(--gl);padding-right:var(--gr);-webkit-font-smoothing:antialiased}
#stage{position:fixed;inset:0;touch-action:none}
#stage canvas{display:block;width:100%;height:100%;outline:none}

.glass{background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
button{font:600 14px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid transparent;border-radius:7px;padding:9px 12px;cursor:pointer;white-space:nowrap;flex:none;transition:background .15s,border-color .15s,color .15s}
button:hover{background:rgba(255,255,255,.07)}
button:focus-visible{outline:2px solid var(--hazard);outline-offset:1px}
button[aria-pressed="true"]{background:rgba(242,194,48,.14);border-color:rgba(242,194,48,.55);color:var(--hazard)}
button.act{border-color:var(--line)}
#loader{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#07121d;transition:opacity .6s}
#ldbg{position:absolute;inset:0;width:100%;height:100%;display:block}
#loader.done{opacity:0;pointer-events:none}
#loader .box{position:relative;text-align:center;padding:0 24px}
#loader .ld-logo{display:block;width:min(260px,62vw);height:auto;margin:0 auto 22px;filter:drop-shadow(0 2px 14px rgba(0,0,0,.35))}
#loader .lt{font:600 18px/1.2 var(--display);letter-spacing:.06em;color:#eaf6ff;text-transform:uppercase}
#loader .ls{font:500 12px/1 var(--mono);color:#eaf6ff;opacity:.72;margin-top:12px;letter-spacing:.06em;text-transform:uppercase}
#loader .ld-bar{position:relative;width:min(240px,60vw);height:3px;margin:20px auto 0;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
#loader .ld-bar i{position:absolute;inset:0 auto 0 0;width:35%;border-radius:3px;background:linear-gradient(90deg,transparent,#3fd0ff,transparent);animation:ldsweep 1.4s ease-in-out infinite}
@keyframes ldsweep{from{transform:translateX(-100%)}to{transform:translateX(290%)}}
@media (prefers-reduced-motion:reduce){#loader .ld-bar i{animation:none;width:100%;opacity:.5}}
@keyframes tape{to{background-position:28px 0}}
#err{color:var(--alarm);font:500 13px/1.4 var(--mono);margin-top:14px;max-width:80vw}