:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0d1117;--panel:#101820;--line:#262d38;--text:#e6edf3;--muted:#8b949e;--accent:#4aa8ff;--ok:#4ade80;--warn:#fbbf24;--bad:#f87171;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{height:100%}body{background:radial-gradient(circle at 20% 0%, #142033 0%, var(--bg) 55%);min-height:100vh;color:var(--text);grid-template-rows:auto minmax(0,1fr) auto;margin:0;display:grid}.bar{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0a0f16d9;flex-wrap:wrap;align-items:center;gap:16px;padding:12px 20px;display:flex}.brand{align-items:baseline;gap:8px;display:flex}.logo{letter-spacing:-.02em;color:var(--accent);font-size:20px;font-weight:700}.tag{color:var(--muted);font-size:12px}.join{align-items:flex-end;gap:10px;margin-left:auto;display:flex}.join label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);flex-direction:column;gap:4px;font-size:11px;display:flex}input{border:1px solid var(--line);width:140px;color:var(--text);font:inherit;background:#0b1017;border-radius:8px;padding:8px 10px;font-size:14px}input:focus{outline-offset:1px;border-color:var(--accent);outline:2px solid #4aa8ff73}input:disabled{opacity:.55}button{border:1px solid var(--line);color:var(--text);font:inherit;cursor:pointer;background:#1b2330;border-radius:8px;padding:8px 16px;font-size:14px}button:hover{background:#222c3b;border-color:#3a4554}button:disabled{opacity:.6;cursor:default}button.primary{border-color:var(--accent);background:var(--accent);color:#04111f;font-weight:600}.status{border:1px solid var(--line);color:var(--muted);white-space:nowrap;border-radius:999px;padding:6px 12px;font-size:13px}.status.connected{color:var(--ok);background:#4ade8014;border-color:#4ade8059}.status.connecting{color:var(--warn);background:#fbbf2414;border-color:#fbbf2459}.status.error{color:var(--bad);background:#f8717114;border-color:#f8717159}.stage{background:#05080d;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:hidden}.remote{object-fit:contain;background:#000;width:100%;height:100%}.empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:24px;display:flex;position:absolute;inset:0}.empty h1{margin:0;font-size:24px}.empty p{max-width:420px;color:var(--muted);margin:0}.tile{aspect-ratio:4/3;background:#0b1017;border:1px solid #ffffff1f;border-radius:12px;width:clamp(150px,22vw,280px);position:absolute;bottom:16px;right:16px;overflow:hidden;box-shadow:0 10px 30px #00000073}.tile video{object-fit:cover;width:100%;height:100%;display:block}.tile.off video{visibility:hidden}.tile-label{color:var(--muted);justify-content:center;align-items:center;font-size:12px;display:flex;position:absolute;inset:0}.tile-label[hidden]{display:none}.controls{border-top:1px solid var(--line);border-bottom:none;justify-content:flex-start}.toggle.active{color:#cfe6ff;background:#4aa8ff24;border-color:#4aa8ff80}.toggle[aria-pressed=false]{color:var(--muted)}.hint{color:var(--muted);margin-left:auto;font-size:12px}.notice{color:#ffe1a8;background:#2a1d10;border:1px solid #fbbf2473;border-radius:10px;max-width:min(560px,100vw - 32px);padding:10px 16px;font-size:13px;position:fixed;bottom:76px;left:50%;transform:translate(-50%);box-shadow:0 12px 30px #00000080}.notice[hidden]{display:none}@media (width<=720px){.bar{gap:10px;padding:10px 12px}.join{flex-wrap:wrap;width:100%;margin-left:0}.join label{flex:120px}.join input{width:100%}.tile{width:clamp(110px,34vw,180px);bottom:10px;right:10px}.hint{display:none}}