:root{--bg-deep:#060a10;--bg:#0a0f17;--panel:#0e1621c7;--panel-border:#506e9638;--text:#cfd8e3;--text-dim:#6b7a8f;--accent:#2bd4ff;--accent-warm:#ffdc50;--accent-bug:#ff9020;--magenta:#ff3cdc}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg-deep);width:100%;height:100%;color:var(--text);-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,sans-serif;overflow:hidden}#app{width:100vw;height:100vh;position:relative;overflow:hidden}canvas#scene{cursor:grab;width:100%;height:100%;display:block}canvas#scene:active{cursor:grabbing}.topbar{pointer-events:none;z-index:5;justify-content:space-between;align-items:flex-start;display:flex;position:absolute;top:18px;left:18px;right:18px}.topbar>*{pointer-events:auto}.brand{align-items:center;gap:12px;display:flex}.brand-logo{background:linear-gradient(135deg, var(--accent) 0%, #4e7bff 100%);border-radius:11px;flex-shrink:0;place-items:center;width:40px;height:40px;display:grid;box-shadow:0 8px 22px #2bd4ff59,inset 0 1px #ffffff4d}.brand-logo svg{width:22px;height:22px}.brand-text{line-height:1.15}.brand-title{letter-spacing:.18em;color:#fff;text-shadow:0 2px 8px #000c;font-size:16px;font-weight:800}.brand-text small{letter-spacing:.06em;color:var(--text-dim);margin-top:3px;font-size:10px;font-weight:500;display:block}.brand-text small a{color:var(--accent);text-decoration:none}.brand-text small a:hover{text-decoration:underline}.top-actions{gap:10px;display:flex}.icon-btn{background:var(--panel);border:1px solid var(--panel-border);width:42px;height:42px;color:var(--text);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;place-items:center;transition:all .15s;display:grid}.icon-btn:hover{color:var(--accent);background:#2bd4ff24;border-color:#2bd4ff80;transform:translateY(-1px)}.icon-btn:active{transform:translateY(0)}.icon-btn svg{width:18px;height:18px}.panel{background:var(--panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--panel-border);z-index:5;border-radius:14px;padding:14px 16px;font-size:11px;position:absolute}.panel h4{letter-spacing:.22em;color:var(--text-dim);margin-bottom:10px;font-size:10px;font-weight:700}.telemetry{min-width:210px;top:80px;left:18px}.telemetry .row{font-variant-numeric:tabular-nums;justify-content:space-between;margin:5px 0;font-family:JetBrains Mono,monospace;display:flex}.telemetry .label{color:var(--text-dim);font-size:10.5px}.telemetry .val{color:var(--accent);font-size:11px;font-weight:700}.telemetry .val.warn{color:var(--accent-warm)}.mini-hsi-wrap{top:80px;right:18px}.mini-hsi-wrap canvas{display:block}.help-hint{min-width:210px;max-width:230px;top:280px;right:18px}.help-hint .line{color:var(--text-dim);flex-wrap:wrap;align-items:center;gap:4px;margin:6px 0;font-size:11px;display:flex}.help-hint kbd{color:var(--accent);background:#2bd4ff1a;border:1px solid #2bd4ff52;border-radius:5px;margin-right:2px;padding:1px 7px;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:600;display:inline-block}.instruments{z-index:5;align-items:flex-end;gap:32px;display:flex;position:absolute;bottom:28px;left:50%;transform:translate(-50%)}.gauge{position:relative}.gauge canvas{cursor:grab;filter:drop-shadow(0 12px 30px #0009);display:block}.gauge canvas:active{cursor:grabbing}.gauge-label{letter-spacing:.32em;color:var(--text-dim);background:var(--bg-deep);white-space:nowrap;padding:0 8px;font-size:10px;font-weight:700;position:absolute;top:-13px;left:50%;transform:translate(-50%)}.play-control{z-index:5;position:absolute;bottom:32px;left:32px}.speed-control{z-index:5;flex-direction:column;gap:5px;width:230px;display:flex;position:absolute;bottom:36px;left:110px}.speed-label{letter-spacing:.28em;color:var(--text-dim);font-size:9px;font-weight:700}.speed-readout{color:var(--accent);font-variant-numeric:tabular-nums;align-items:baseline;gap:6px;font-family:JetBrains Mono,monospace;font-size:12px;font-weight:700;display:flex}.speed-readout .sep{color:var(--text-dim);font-weight:500}.speed-slider{appearance:none;cursor:pointer;background:linear-gradient(90deg,#2bd4ff26,#2bd4ff73);border-radius:3px;outline:none;width:100%;height:6px}.speed-slider::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border:2px solid #06121c;border-radius:50%;width:16px;height:16px;box-shadow:0 0 10px #2bd4ffb3}.speed-slider::-moz-range-thumb{background:var(--accent);cursor:pointer;border:2px solid #06121c;border-radius:50%;width:16px;height:16px;box-shadow:0 0 10px #2bd4ffb3}.play-btn{background:linear-gradient(135deg, var(--accent) 0%, #4e7bff 100%);color:#06121c;cursor:pointer;border:none;border-radius:50%;place-items:center;width:64px;height:64px;transition:transform .15s,box-shadow .15s;display:grid;box-shadow:0 10px 28px #2bd4ff80,inset 0 1px #ffffff59}.play-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px #2bd4ff99}.play-btn:active{transform:translateY(0)}.play-btn svg{width:26px;height:26px}.fullscreen-btn{z-index:5;position:absolute;bottom:32px;right:32px}.toast{background:var(--panel);color:var(--accent);letter-spacing:.22em;opacity:0;pointer-events:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:50;border:1px solid #2bd4ff80;border-radius:10px;padding:10px 20px;font-size:11px;font-weight:700;transition:all .3s;position:absolute;top:80px;left:50%;transform:translate(-50%)translateY(-20px)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}@media (width<=900px){.help-hint{display:none}.telemetry{min-width:180px;font-size:10px}}@media (width<=720px){.instruments{gap:14px}.gauge canvas{width:170px!important;height:170px!important}.mini-hsi-wrap{display:none}.telemetry{min-width:160px}}