:root{--bg:#0a1628;--panel:#081224d1;--border:#78b4dc47;--text:#e8f1fa;--muted:#8aa4bc;--accent:#3db8ff;--danger:#ff6b4a;--ok:#5ddea8;font-family:Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);margin:0;overflow:hidden}#app{width:100%;height:100%;position:relative}#c{width:100%;height:100%;display:block}#hud{pointer-events:none;flex-direction:column;justify-content:flex-start;gap:12px;padding:16px;display:flex;position:absolute;inset:0}.bar,.panel,.hint{pointer-events:auto}.bar h1{letter-spacing:.04em;text-shadow:0 2px 12px #00000080;margin:0;font-size:1.35rem;font-weight:700}.bar .tag{color:var(--muted);margin:4px 0 0;font-size:.85rem}.panel{background:var(--panel);border:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;flex-direction:column;align-self:flex-start;gap:12px;width:min(320px,100vw - 32px);padding:14px;display:flex;box-shadow:0 12px 40px #00000059}.panel.hidden{display:none}label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);flex-direction:column;gap:6px;font-size:.75rem;display:flex}select,button{font:inherit;border:1px solid var(--border);color:var(--text);cursor:pointer;background:#142846e6;border-radius:8px;padding:10px 12px}select{text-transform:none;letter-spacing:normal;font-size:.95rem}button{background:linear-gradient(#2a7fbf,#1b5f95);border-color:#64b4ff66;font-weight:600;transition:filter .15s,transform .1s}button:hover{filter:brightness(1.1)}button:active{transform:translateY(1px)}#reset-btn{background:linear-gradient(#4a5568,#2d3748)}.status{font-size:.95rem;font-weight:600}.status .sep{color:var(--muted);margin:0 6px}.speed-label{gap:8px}.speed-label input[type=range]{width:100%;accent-color:var(--accent)}#speed-readout{font-variant-numeric:tabular-nums;color:var(--accent);text-transform:none;letter-spacing:normal;font-size:.95rem;font-weight:700}.btn-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.alert{color:#f6e7c1;letter-spacing:.05em;text-align:center;pointer-events:none;text-shadow:0 1px 2px #00000080;background:#0c1018d1;border:1px solid #f2c14e80;border-radius:999px;max-width:min(560px,100vw - 32px);padding:8px 16px;font-size:.82rem;position:absolute;top:78px;left:50%;transform:translate(-50%)}.alert.hidden{display:none}.dash{pointer-events:none;gap:8px;display:flex;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.dash.hidden{display:none}.bubble{text-align:center;background:#10141cc7;border:1px solid #ffffff24;border-radius:14px;min-width:86px;padding:8px 12px 7px;box-shadow:0 10px 28px #00000059}.bubble .k{letter-spacing:.08em;text-transform:uppercase;color:#9aa4b2;font-size:10px;display:block}.bubble .v{color:#f2c14e;font-variant-numeric:tabular-nums;margin-top:2px;font-size:15px;font-weight:700;display:block}.keys{text-align:right;color:#d2dce6b8;pointer-events:none;text-shadow:0 1px 2px #000000a6;font-size:12px;line-height:1.55;position:absolute;bottom:18px;right:16px}.keys .key{color:#f4f7fb;font-weight:600}.build-info{color:#d2dce699;letter-spacing:.04em;pointer-events:none;text-shadow:0 1px 2px #000000a6;font-size:11px;position:absolute;bottom:16px;left:16px}@media (width<=720px){#hud{padding:10px}.panel{width:min(280px,100vw - 20px)}.dash{flex-wrap:wrap;justify-content:center;gap:6px;bottom:10px;left:8px;right:8px;transform:none}.bubble{min-width:64px;padding:6px 8px 5px}.bubble .v{font-size:13px}.keys{text-align:right;font-size:11px;inset:58px 8px auto auto}.build-info{bottom:96px;left:8px}.alert{max-width:calc(100vw - 24px);top:96px}}