:root{--bg:#0b0d12;--bg-elev:#14171f;--bg-elev-2:#1c212c;--panel:#14171fd1;--panel-solid:#14171f;--text:#e7e9ee;--text-dim:#9aa1ad;--text-faint:#6b7280;--accent:#4f8cff;--accent-press:#3a78f0;--good:#37d67a;--warn:#f5b042;--bad:#ff5a5f;--stroke:#ffffff14;--stroke-strong:#ffffff29;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--hud-h:56px;--tap:48px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);width:100%;height:100%;color:var(--text);overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:16px;line-height:1.4}#app{width:100%;height:100dvh;position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}.screen,.stage{width:100%;height:100dvh;position:fixed;top:0;bottom:0;left:0;right:0}[hidden]{display:none!important}button{color:inherit;cursor:pointer;background:0 0;border:none;font-family:inherit}.connect-screen{padding:calc(24px + var(--safe-top)) calc(24px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(24px + var(--safe-left));background:radial-gradient(120% 80% at 50% 0%, #4f8cff1f, transparent 60%), var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:28px;display:flex;overflow-y:auto}.brand{text-align:center;flex-direction:column;align-items:center;gap:10px;display:flex}.brand-mark{background:linear-gradient(145deg, var(--accent), #7a5cff);color:#fff;border-radius:18px;place-items:center;width:72px;height:72px;font-size:38px;font-weight:800;display:grid;box-shadow:0 12px 36px #4f8cff59}.brand h1{letter-spacing:-.02em;margin:0;font-size:26px;font-weight:700}.connect-status{color:var(--text-dim);max-width:320px;margin:0;font-size:15px}.btn-connect{background:linear-gradient(145deg, var(--accent), var(--accent-press));color:#fff;letter-spacing:.01em;border-radius:999px;min-width:220px;min-height:64px;padding:0 40px;font-size:20px;font-weight:700;transition:transform 80ms,filter .15s;box-shadow:0 10px 30px #4f8cff66}.btn-connect:active{filter:brightness(1.08);transform:scale(.97)}.btn-connect:disabled{opacity:.55;filter:grayscale(.3)}.connect-error{min-height:1.4em;color:var(--bad);text-align:center;max-width:320px;margin:0;font-size:14px}.pin-pad{flex-direction:column;align-items:center;gap:12px;width:100%;max-width:320px;display:flex}.pin-row{justify-content:center;width:100%;display:flex}.pin-display{letter-spacing:14px;align-items:center;gap:10px;min-height:44px;padding-left:14px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:30px;font-weight:700;display:inline-flex}.pin-error{min-height:1.2em;color:var(--bad);text-align:center;margin:0;font-size:13px}.pin-hint{color:var(--text-faint);margin:0;font-size:12px}.pin-keys{grid-template-columns:repeat(3,1fr);gap:10px;width:100%;display:grid}.pin-key{background:var(--bg-elev);border:1px solid var(--stroke);min-height:60px;color:var(--text);border-radius:16px;font-size:22px;font-weight:600;transition:transform 60ms,background .12s}.pin-key:active{background:var(--bg-elev-2);transform:scale(.95)}.pin-key--action{color:var(--text-dim);font-size:18px}.stage{background:#000}.video-wrap{touch-action:none;background:#000;width:100%;height:100dvh;position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}.video{object-fit:contain;transform-origin:0 0;touch-action:none;background:#000;width:100%;height:100%;display:block;position:absolute;top:0;left:0}.hud{pointer-events:none;padding:calc(8px + var(--safe-top)) calc(8px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(8px + var(--safe-left));grid-template:"top status""handle."1fr"controls controls"/1fr auto;gap:8px;transition:opacity .25s;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}.hud.hud--hidden{opacity:0;pointer-events:none}.hud>*{pointer-events:auto}.hud-handle{width:var(--tap);height:var(--tap);background:var(--panel);-webkit-backdrop-filter:blur(10px);border:1px solid var(--stroke);color:var(--text);border-radius:12px;grid-area:handle;place-self:start;place-items:center;font-size:20px;display:grid}.status-pill{background:var(--panel);-webkit-backdrop-filter:blur(10px);border:1px solid var(--stroke);height:32px;color:var(--text);white-space:nowrap;border-radius:999px;grid-area:status;place-self:start end;align-items:center;gap:8px;padding:0 14px;font-size:13px;font-weight:600;display:inline-flex}.status-dot{background:var(--text-faint);border-radius:50%;width:9px;height:9px;box-shadow:0 0}.status-pill--connecting .status-dot{background:var(--warn);animation:1.1s ease-in-out infinite pulse}.status-pill--connecting .status-text{color:var(--warn)}.status-pill--connected .status-dot{background:var(--good)}.status-pill--connected .status-text{color:var(--good)}.status-pill--reconnecting .status-dot{background:var(--warn);animation:.9s ease-in-out infinite pulse}.status-pill--reconnecting .status-text{color:var(--warn)}.status-pill--failed .status-dot{background:var(--bad)}.status-pill--failed .status-text{color:var(--bad)}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.35)}to{opacity:1;transform:scale(1)}}.hud-controls{background:var(--panel);-webkit-backdrop-filter:blur(10px);border:1px solid var(--stroke);-webkit-overflow-scrolling:touch;border-radius:18px;grid-area:controls;place-self:end center;gap:8px;max-width:100%;padding:6px;transition:opacity .18s,transform .18s;display:flex;overflow-x:auto}.hud-controls--hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(16px)}.hud-btn{min-width:var(--tap);min-height:var(--tap);background:var(--bg-elev);border:1px solid var(--stroke);color:var(--text);border-radius:12px;justify-content:center;align-items:center;padding:0 14px;font-size:15px;font-weight:600;transition:transform 60ms,background .12s;display:inline-flex}.hud-btn:active{background:var(--bg-elev-2);transform:scale(.94)}.hud-btn--danger{color:var(--bad)}.hud-icon{fill:currentColor;width:24px;height:24px}.hud-icon--stroke{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.hud-btn--active{color:#fff;background:var(--accent);border-color:#0000;box-shadow:inset 3px 0 #ffffffa6}.zoom-bar{border:1px solid var(--stroke);background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:14px;grid-area:controls;place-self:end center;align-items:center;gap:6px;margin-bottom:64px;padding:6px;display:flex}.zoom-btn{background:var(--bg-elev);border:1px solid var(--stroke);border-radius:10px;min-width:48px;min-height:48px;font-size:20px;font-weight:700}.zoom-btn--fit{font-size:14px}.zoom-level{text-align:center;font-variant-numeric:tabular-nums;min-width:64px;font-weight:700}.navigation-hint{left:50%;bottom:calc(132px + var(--safe-bottom));max-width:min(320px,100% - 32px);color:var(--text);background:var(--panel-solid);border:1px solid var(--stroke-strong);text-align:center;z-index:60;border-radius:12px;padding:10px 14px;font-size:13px;position:fixed;transform:translate(-50%)}.hud-btn:focus-visible{outline-offset:2px;outline:3px solid #fff}.zoom-btn:focus-visible{outline-offset:2px;outline:3px solid #fff}.q-btn:focus-visible{outline-offset:2px;outline:3px solid #fff}.key-bar__key:focus-visible{outline-offset:2px;outline:3px solid #fff}.quality-bar{background:var(--panel);-webkit-backdrop-filter:blur(10px);border:1px solid var(--stroke);border-radius:14px;grid-area:controls;place-self:end center;align-items:center;gap:10px;margin-bottom:64px;padding:6px 8px;display:flex}.quality-buttons{gap:6px;display:flex}.q-btn{background:var(--bg-elev);border:1px solid var(--stroke);min-width:48px;min-height:38px;color:var(--text-dim);border-radius:10px;padding:0 12px;font-size:13px;font-weight:600}.q-btn:active{transform:scale(.95)}.q-btn--active{background:var(--accent);color:#fff;border-color:#0000}.stats{text-align:right;min-width:90px;color:var(--text-dim);padding-right:6px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:12px}.key-bar{background:var(--panel);-webkit-backdrop-filter:blur(10px);border:1px solid var(--stroke);-webkit-overflow-scrolling:touch;scrollbar-width:thin;border-radius:14px;grid-area:controls;place-self:end center;gap:6px;max-width:calc(100% - 16px);margin-bottom:120px;padding:6px;display:flex;overflow-x:auto}.key-bar__key{background:var(--bg-elev);border:1px solid var(--stroke);min-width:44px;min-height:40px;color:var(--text);border-radius:9px;flex:none;padding:0 10px;font-size:13px;font-weight:600}.key-bar__key:active{background:var(--bg-elev-2);transform:scale(.93)}.key-bar__key--toggle--on{background:var(--accent);color:#fff;border-color:#0000}.hidden-input{opacity:0;color:#0000;caret-color:#0000;resize:none;background:0 0;border:none;width:1px;height:1px;font-size:16px;position:fixed;top:0;left:-9999px}@media (prefers-reduced-motion:reduce){.hud,.hud-controls,.hud-btn,.zoom-btn,.status-dot{transition:none!important;animation:none!important}}@media (min-width:640px){.connect-screen{gap:24px}}