:root{color-scheme:light dark;--bg: #f3f5f8;--surface: #ffffff;--surface-2: #e8ecf2;--text: #121821;--muted: #4a5568;--border: #c5cdd9;--accent: #0b5cd5;--accent-text: #ffffff;--danger: #b42318;--ok: #17803d;--warn: #a15c00;--stage: #1b1f27;--shadow: 0 8px 28px rgb(15 23 42 / 18%);--toolbar-h: 44px}@media(prefers-color-scheme:dark){:root{--bg: #0e1218;--surface: #171d26;--surface-2: #232b37;--text: #e8edf5;--muted: #a7b2c3;--border: #364152;--accent: #6ea8ff;--accent-text: #08111f;--danger: #ff8a80;--ok: #5fd68a;--warn: #f5b14c;--stage: #05070a;--shadow: 0 8px 28px rgb(0 0 0 / 55%)}}*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}.app{position:relative;display:flex;flex-direction:column;height:100vh;height:100dvh;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.toolbar{flex:none;display:flex;align-items:center;gap:12px;min-height:var(--toolbar-h);padding:4px 10px;background:var(--surface);border-bottom:1px solid var(--border)}.brand{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28vw}.status{display:inline-flex;align-items:center;gap:7px;color:var(--muted);white-space:nowrap}.dot{width:10px;height:10px;border-radius:50%;background:var(--muted)}[data-phase=connected] .dot{background:var(--ok)}[data-phase=connecting] .dot,[data-phase=waiting] .dot,[data-phase=loading] .dot,[data-phase=unstable] .dot{background:var(--warn)}[data-phase=ended] .dot{background:var(--danger)}.spacer{flex:1 1 auto}.actions{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:thin;max-width:100%}button,.btn{font:inherit;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:5px 11px;min-height:32px;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}button:hover:not(:disabled),.btn:hover{border-color:var(--accent)}button[aria-pressed=true]{border-color:var(--accent)}button:disabled{opacity:.5;cursor:not-allowed}button.danger{color:var(--danger)}.btn.primary{background:var(--accent);color:var(--accent-text);border-color:var(--accent);font-weight:600;padding:9px 18px}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}[hidden]{display:none!important}.clip-panel{position:absolute;z-index:20;right:10px;left:auto;width:min(460px,calc(100vw - 20px));margin-top:var(--toolbar-h);padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow)}.clip-panel label{display:block;margin-bottom:6px;font-weight:600}.clip-panel textarea{width:100%;font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px;resize:vertical}.clip-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.hint{margin:8px 0 0;color:var(--muted);font-size:13px}.stage{position:relative;flex:1 1 auto;min-height:0;background:var(--stage);overflow:hidden}.display{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;outline-offset:-3px}.banner{position:absolute;z-index:10;top:10px;left:50%;transform:translate(-50%);max-width:min(640px,calc(100% - 20px));padding:8px 14px;background:var(--surface);color:var(--text);border:1px solid var(--warn);border-radius:8px;box-shadow:var(--shadow)}.overlay{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--bg) 92%,transparent)}.card{width:min(520px,100%);padding:28px 26px;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}.card h1{margin:0 0 8px;font-size:20px}.card p{margin:0;color:var(--muted)}.overlay-actions{margin-top:20px;display:flex;justify-content:center;gap:10px}.card .hint{margin-top:14px}.spinner{width:34px;height:34px;margin:0 auto 16px;border:4px solid var(--surface-2);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite}[data-phase=ended] .spinner{display:none}@keyframes spin{to{transform:rotate(360deg)}}.offscreen{position:fixed;top:0;left:-9999px;width:1px;height:1px;opacity:0}.noscript{position:fixed;inset:0;z-index:100;margin:0;padding:24px;background:var(--bg);color:var(--text)}@media(max-width:720px){.brand{display:none}.toolbar{gap:8px;padding:4px 6px}}@media(pointer:coarse){:root{--toolbar-h: 52px}button,.btn{min-height:44px;padding:8px 14px}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}