:root{color-scheme:dark light;font-family:Inter,ui-sans-serif,system-ui,sans-serif;--canvas:#090d15;--surface:#141c2a;--surface-hover:#1d2b40;--control-surface:#1b2738;--selected-surface:#183757;--ink:#f4f7fb;--muted:#b8c7da;--accent:#77bbff;--on-accent:#081724;--danger:#ff9e9e;--focus:#ffe073;--border:#34445a;--border-strong:#6d8098;--disabled-ink:#b2bfd0;--disabled-surface:#263244}@media(prefers-color-scheme:light){:root{--canvas:#edf2f8;--surface:#fff;--surface-hover:#e5f0fb;--control-surface:#f1f5fa;--selected-surface:#dcecff;--ink:#12243a;--muted:#41536a;--accent:#075ea8;--on-accent:#fff;--danger:#a42020;--focus:#164a86;--border:#b8c7d8;--border-strong:#697e96;--disabled-ink:#53657b;--disabled-surface:#dfe6ed}}@media(prefers-contrast:more){:root{--focus:#ffe073;--border:#93acc7}}@media(prefers-contrast:more)and (prefers-color-scheme:light){:root{--focus:#143c78;--border:#405878}}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink)}button,select,input{font:inherit}button{min-height:44px;border:1px solid var(--border);border-radius:.65rem;padding:.65rem .9rem;background:var(--surface);color:var(--ink);cursor:pointer;transition:background-color .16s,border-color .16s,transform .16s}button:not(:disabled):hover{border-color:var(--accent);background:var(--surface-hover)}button:not(:disabled):active{transform:translateY(1px)}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}button:disabled,select:disabled{color:var(--disabled-ink);background:var(--disabled-surface);cursor:not-allowed}.viewer-shell{min-height:100dvh;width:100%;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:flex;flex-direction:column;gap:1rem}.viewer-header,.viewer-stage,.troubleshooting{width:min(100%,1600px);margin-inline:auto}.viewer-header{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}.viewer-brand{display:flex;align-items:center;gap:.65rem;margin-bottom:clamp(1.25rem,3vh,2.5rem);color:var(--muted);font-size:.9rem;font-weight:650;letter-spacing:.01em}.viewer-brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:.55rem;background:var(--accent);color:var(--on-accent);font-weight:850}.viewer-brand-divider{margin-inline:.2rem;color:var(--border-strong)}.eyebrow{margin:0;color:var(--accent);font-size:.78rem;font-weight:750;text-transform:uppercase;letter-spacing:.11em}h1{margin:.2rem 0;font-size:clamp(1.75rem,3.3vw,2.75rem);line-height:1.12;letter-spacing:-.035em}.connection-status{margin:.3rem 0 .75rem;color:var(--muted);line-height:1.5}.connection-status[data-state=blocked],.connection-status[data-state=kicked],.connection-status[data-state=ended]{color:var(--muted)}.viewer-stage{display:grid;gap:.75rem;align-content:start}.player-wrap{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:.85rem;background:#05080e;box-shadow:0 16px 48px #0003}.player-surface{display:block;width:100%;aspect-ratio:16/9;max-height:calc(100dvh - 13rem);min-height:min(52vw,240px);background:#05080e;object-fit:contain}.stream-placeholder{position:absolute;inset:0;display:grid;place-items:center;padding:1.5rem;color:#d9e4f1;text-align:center;line-height:1.5;pointer-events:none}.watch-sound{position:absolute;inset:auto auto 1.5rem 50%;transform:translate(-50%);background:var(--accent);color:var(--on-accent);font-weight:700}.player-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.65rem;border:1px solid var(--border);border-radius:.85rem;background:var(--surface)}.player-controls button{background:var(--control-surface)}.player-controls label{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.875rem}.player-controls select{min-height:44px;border:1px solid var(--border);border-radius:.6rem;padding:.4rem .65rem;background:var(--control-surface);color:var(--ink)}.player-controls button[aria-pressed=true]{border-color:var(--accent);background:var(--selected-surface);color:var(--ink)}.stream-quality-note{flex-basis:100%;padding-inline:.2rem;color:var(--muted);font-size:.8rem;line-height:1.4}.leave{margin-left:auto}.stream-info{display:block;padding:.8rem 1rem;border:1px solid var(--border);border-radius:.7rem;background:var(--surface);color:var(--ink);font-size:.875rem;line-height:1.5}.waiting-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem .8rem;border:1px solid var(--border);border-radius:.85rem;background:var(--surface);color:var(--muted);font-size:.875rem;line-height:1.4}.troubleshoot-trigger{align-self:center;margin-top:.25rem;background:transparent;color:var(--muted)}.troubleshooting{border:1px solid var(--border);border-radius:1rem;padding:1rem;background:var(--surface)}.viewer-shell--empty{justify-content:center}.viewer-shell--empty .viewer-header{width:min(100%,540px);padding:clamp(1.25rem,4vw,2.25rem);border:1px solid var(--border);border-radius:1.1rem;background:var(--surface);box-shadow:0 16px 48px #0002}.viewer-shell--empty .viewer-brand{margin-bottom:clamp(1.75rem,5vh,3.5rem)}.viewer-shell--empty .troubleshoot-trigger{margin-top:.5rem}.recovery-action,.invitation-entry button{margin-top:.75rem;border-color:var(--accent);background:var(--accent);color:var(--on-accent);font-weight:750}.invitation-entry{display:grid;width:100%;gap:.65rem;margin-top:.75rem}.invitation-entry label{font-weight:650}.invitation-entry input{width:100%;min-width:0;min-height:48px;border:1px solid var(--border-strong);border-radius:.65rem;padding:.7rem .8rem;background:var(--control-surface);color:var(--ink)}.invitation-entry [role=alert]{color:var(--danger);line-height:1.5}@media(max-width:599px){.viewer-shell{gap:.75rem}.viewer-brand{margin-bottom:.75rem}.player-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.player-controls button,.player-controls label{width:100%}.player-controls label{grid-column:span 2;justify-content:space-between}.player-controls select{min-width:42%}.player-controls .leave{margin:0}.stream-quality-note{grid-column:span 2}.viewer-shell--empty .viewer-brand{margin-bottom:2rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}