:root{color-scheme:light dark;--bg: #ffffff;--fg: #16181d;--muted: #5c6370;--line: #dcdfe5;--accent: #2f6feb;--ok: #1a7f4b;--warn: #9a6700;--bad: #b42318;--surface: #f6f7f9}@media(prefers-color-scheme:dark){:root{--bg: #14161a;--fg: #e7e9ee;--muted: #9aa1ad;--line: #2b2f37;--accent: #6da2ff;--ok: #4ac07f;--warn: #d9a441;--bad: #f2837a;--surface: #1b1e24}}*{box-sizing:border-box}body{margin:0;font:14px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--fg)}header{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line)}h1{font-size:16px;margin:0;letter-spacing:-.01em}h2{font-size:12px;margin:20px 0 8px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.pill{font-size:12px;padding:2px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted)}.pill.ok{color:var(--ok);border-color:currentColor}.pill.warn{color:var(--warn);border-color:currentColor}.pill.bad{color:var(--bad);border-color:currentColor}main{display:grid;grid-template-columns:minmax(280px,340px) 1fr;gap:24px;padding:20px;align-items:start}@media(max-width:800px){main{grid-template-columns:1fr}}label{display:block;font-size:12px;color:var(--muted);margin-bottom:10px}input{display:block;width:100%;margin-top:4px;padding:8px 10px;font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:6px}.row{display:flex;gap:8px;flex-wrap:wrap}button{padding:7px 14px;font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:6px;cursor:pointer}button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}button:disabled{opacity:.45;cursor:not-allowed}.devices{list-style:none;margin:0;padding:0;display:grid;gap:6px}.devices li{padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);cursor:pointer}.devices li.empty{color:var(--muted);cursor:default;background:none;border-style:dashed}.devices li.selected{border-color:var(--accent)}.devices .id{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:12px}.devices .meta{font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}.devices .meta .node{color:var(--accent);font-weight:600}#node{font:inherit;font-size:12px;padding:6px 8px;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:6px}#stage{display:grid;gap:12px;justify-items:center}#video{user-select:none;-webkit-user-select:none;-webkit-user-drag:none;touch-action:none;max-width:100%;max-height:72vh;border:1px solid var(--line);border-radius:10px;background:#000;cursor:crosshair}#placeholder{color:var(--muted)}#host{margin-top:20px;font-size:12px;color:var(--muted);display:grid;gap:3px}#host .bad{color:var(--bad)}#host .warn{color:var(--warn)}.fix{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:11px;padding:6px 8px;border-radius:5px;background:var(--surface);border:1px solid var(--line);overflow-x:auto;white-space:pre}.row.display{align-items:center;gap:10px;margin-top:2px}.row.display #rotate{min-width:118px}.row.display #rotateView{min-width:132px}.row.display button.active{border-color:var(--accent);color:var(--accent)}.row.display label.inline{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:12px;color:var(--muted)}.row.display select{font:inherit;font-size:12px;padding:6px 8px;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:6px}.row.display select:disabled{opacity:.45}#encoded{font-family:ui-monospace,SF Mono,Menlo,monospace}#viewport{display:grid;place-items:center;width:100%}#stage.streaming #viewport{height:72vh}#video{transform-origin:center center;transition:transform .12s ease}