:root{--bg:#0f0f0f;--panel:#141414d9;--text:#f5f3ef;--muted:#a8a29e;--accent:#b08d6e;--accent-dark:#8b5a2b;--danger:#ef4444;--success:#22c55e}*{box-sizing:border-box}html,body,#app{background:var(--bg);width:100%;height:100%;color:var(--text);margin:0;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}#app{position:relative}.hud-header{z-index:10;pointer-events:none;background:linear-gradient(#000000b3,#0000);justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex;position:absolute;top:0;left:0;right:0}.brand{letter-spacing:.05em;align-items:center;gap:.75rem;font-weight:700;display:flex}.brand-mark{color:var(--accent);font-size:1.25rem}.brand-name{font-size:.95rem}.status{color:var(--muted);align-items:center;gap:.5rem;font-size:.8rem;font-weight:500;display:flex}.dot{background:var(--success);width:8px;height:8px;box-shadow:0 0 8px var(--success);border-radius:50%}.dot.paused{background:#f59e0b;box-shadow:0 0 8px #f59e0b}.telemetry{z-index:10;background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #ffffff14;border-radius:12px;width:220px;padding:1rem;position:absolute;top:5rem}.telemetry-left{left:1.5rem}.telemetry-right{right:1.5rem}.telemetry h3{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0 0 .75rem;font-size:.8rem}.panel{flex-direction:column;gap:.6rem;display:flex}.readout{justify-content:space-between;font-size:.85rem;display:flex}.readout .label{color:var(--muted)}.readout .value{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace}.controls-help .key{align-items:center;gap:.75rem;font-size:.85rem;display:flex}.controls-help kbd{text-align:center;background:#ffffff0d;border:1px solid #ffffff26;border-radius:6px;min-width:3.5rem;padding:.25rem .4rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;font-size:.75rem}.controls-help span{color:var(--muted)}.event-log{z-index:10;max-width:320px;max-height:160px;color:var(--muted);pointer-events:none;flex-direction:column;gap:.4rem;font-size:.75rem;display:flex;position:absolute;bottom:1.5rem;left:1.5rem;overflow-y:auto}.event{border-left:2px solid var(--accent);background:#00000080;border-radius:6px;padding:.35rem .6rem}.loading{z-index:50;background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:1rem;transition:opacity .3s;display:flex;position:absolute;inset:0}.loading.hidden{opacity:0;pointer-events:none}.spinner{border:3px solid #ffffff1a;border-top-color:var(--accent);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}canvas{display:block}@media (width<=900px){.telemetry{width:160px;padding:.75rem;font-size:.8rem}.telemetry-right{display:none}}