:root{color-scheme:dark;--bg: #07111f;--panel: rgba(8, 16, 31, .92);--line: rgba(121, 240, 255, .2);--text: #e9f6ff;--muted: #8fa9c1;--cyan: #48f2ff;--pink: #ff4aa2;--gold: #ffd166}*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;min-height:100dvh;overflow:hidden;background:radial-gradient(circle at 50% 0%,rgba(72,242,255,.18),transparent 34%),radial-gradient(circle at 50% 100%,rgba(255,74,162,.16),transparent 38%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-text-size-adjust:100%;touch-action:manipulation}button,input{font:inherit}.app-shell{width:100vw;height:100vh;height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) auto;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));gap:10px}.viewport-panel{position:relative;min-height:0;border:1px solid var(--line);background:#050b14;box-shadow:0 18px 60px #0000006b,inset 0 0 42px #48f2ff0d;overflow:hidden}canvas{display:block;width:100%;height:100%}.hud{position:absolute;left:10px;right:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;pointer-events:none}.hud--top{top:10px}.hud>div{min-width:0;padding:8px;background:#020810ad;border:1px solid rgba(255,255,255,.08)}.label{display:block;color:var(--muted);font-size:11px;line-height:1.2}.hud strong{display:block;margin-top:2px;color:var(--cyan);font-size:18px;line-height:1.15;text-shadow:0 0 18px rgba(72,242,255,.42)}.controls{display:grid;grid-template-columns:132px minmax(0,1fr);gap:10px;padding:10px;background:var(--panel);border:1px solid var(--line);box-shadow:0 -10px 40px #0000003d}.control-grid{display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(2,42px);gap:6px;align-content:center}#zoom-in{grid-column:2}#orbit-left{grid-column:1;grid-row:2}#orbit-right{grid-column:3;grid-row:2}#zoom-out{grid-column:2;grid-row:2}.pad-button,.action-button{border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,#1a2d48f5,#0a1424f5);color:var(--text);min-height:42px;border-radius:0;box-shadow:inset 0 1px #ffffff14,0 7px 18px #00000038;-webkit-tap-highlight-color:transparent}.pad-button{color:var(--cyan);font-size:21px;font-weight:800}.pad-button:active,.action-button:active,.action-button[aria-pressed=true]{transform:translateY(1px);border-color:#ff4aa29e;color:var(--pink);box-shadow:0 0 22px #ff4aa22e}.control-stack{min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:10px}.slider-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;color:var(--muted);font-size:13px}input[type=range]{width:100%;accent-color:var(--gold)}.button-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.action-button{min-width:0;padding:0 8px;color:var(--gold);font-size:12px;font-weight:700}.boot-error{margin:20px;white-space:pre-wrap;color:#ffd1d1}@media (orientation: landscape) and (max-width: 900px){body:before{content:"Rotate to portrait";position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-items:center;background:var(--bg);color:var(--text);font-size:20px;font-weight:800}}@media (min-width: 720px){.app-shell{width:min(430px,100vw);margin:0 auto}}