:root{color-scheme:dark light;font-family:Inter,ui-sans-serif,system-ui,sans-serif;--canvas:#080b12;--surface:#111827;--ink:#f4f7fb;--muted:#aeb9c9;--accent:#76c7ff;--danger:#ff9191;--focus:#fff}@media(prefers-color-scheme:light){:root{--canvas:#f4f7fb;--surface:#fff;--ink:#101827;--muted:#4b5563;--accent:#045ea8;--danger:#a80000}}@media(prefers-contrast:more){:root{--accent:#00c8ff;--focus:#ffe600}}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink)}button,select{font:inherit}button{min-height:48px;border:1px solid transparent;border-radius:.7rem;padding:.65rem .9rem;background:var(--surface);color:var(--ink);cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.viewer-shell{min-height:100dvh;max-width:1200px;margin:auto;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));display:grid;gap:1rem;align-content:center}.eyebrow{color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0}h1{font-size:clamp(1.7rem,6vw,3.25rem);margin:.25rem 0}.connection-status{color:var(--muted);margin:0}.connection-status[data-state=blocked],.connection-status[data-state=kicked],.connection-status[data-state=ended]{color:var(--danger)}.player-wrap{position:relative;border-radius:1rem;overflow:hidden;background:#000;box-shadow:0 1.5rem 4rem #0005}.player-surface{display:block;width:100%;aspect-ratio:16/9;background:#000;object-fit:contain}.watch-sound{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--accent);color:#001525;font-weight:700}.player-controls{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.player-controls label{display:flex;gap:.45rem;align-items:center;color:var(--muted)}.player-controls select{min-height:48px;border-radius:.7rem;padding:.4rem;background:var(--surface);color:var(--ink)}.stream-quality-note{flex-basis:100%;color:var(--muted);font-size:.875rem}.leave{margin-left:auto;color:var(--danger)}.troubleshoot-trigger{justify-self:start}.troubleshooting{border:1px solid var(--muted);border-radius:1rem;padding:1rem;background:var(--surface)}@media(min-width:800px){.viewer-shell{grid-template-columns:minmax(0,1fr) 15rem}.viewer-shell>header,.player-wrap{grid-column:1}.player-controls,.troubleshoot-trigger,.troubleshooting{grid-column:2}.player-controls{align-content:start}.leave{margin-left:0}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.stream-info{display:block;padding:.7rem .9rem;border-radius:.7rem;background:var(--surface);color:var(--ink);font-size:.875rem;line-height:1.5}.player-controls button,.player-controls select{transition:background-color .16s ease,border-color .16s ease}.player-controls button:not(:disabled):hover,.player-controls select:not(:disabled):hover{border-color:var(--accent);background:color-mix(in srgb,var(--surface) 85%,var(--accent))}.player-controls button:disabled,.player-controls select:disabled{opacity:.55;cursor:not-allowed}.player-controls button[aria-pressed=true]{background:var(--accent);color:#001525}.stream-placeholder{position:absolute;inset:0;display:grid;place-items:center;padding:1.5rem;background:#111a2b;color:#f1f5fb;text-align:center;line-height:1.5;pointer-events:none}.recovery-action{margin-top:1rem;background:var(--accent);color:#001525;font-weight:700}.invitation-entry{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem;margin-top:1rem}.invitation-entry label{flex-basis:100%;font-weight:600}.invitation-entry input{min-width:min(100%,18rem);min-height:48px;flex:1;border:1px solid var(--muted);border-radius:.7rem;padding:.65rem .8rem;font:inherit}.invitation-entry input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.invitation-entry button{background:var(--accent);color:#001525;font-weight:700}.invitation-entry [role=alert]{flex-basis:100%;color:var(--danger)}@media(max-width:799px){.viewer-shell{align-content:start}}@media(min-width:800px){.stream-info{grid-column:2}.viewer-shell--empty{max-width:960px;grid-template-columns:minmax(0,1fr)}.viewer-shell--empty .troubleshoot-trigger,.viewer-shell--empty .troubleshooting{grid-column:1;justify-self:start;align-self:start}}