:root{color-scheme:light dark;--bg: #f8f7f4;--panel: #ffffff;--text: #171717;--muted: #686762;--accent: #b83b2c;--border: #dfddd6}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg: #101111;--panel: #191a1a;--text: #f1efe8;--muted: #aaa69c;--border: #303131}}:root[data-theme=dark]{--bg: #101111;--panel: #191a1a;--text: #f1efe8;--muted: #aaa69c;--border: #303131}:root[data-theme=light]{--bg: #f8f7f4;--panel: #ffffff;--text: #171717;--muted: #686762;--border: #dfddd6}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.4 Inter,Arial,sans-serif}button,input,textarea,select{font:inherit}button{border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--text);padding:8px 12px;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input,textarea,select{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px}.primary{background:var(--accent);color:#fff;border:0;padding:13px 24px}.link{border:0;padding:0;background:transparent;text-decoration:underline}.lobby{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:28px}.lobby h1{font-size:64px;letter-spacing:-4px;margin:0}.lobby form{display:flex;gap:8px;align-items:center}.lobby footer{color:var(--muted);position:fixed;bottom:24px}.loading{display:grid;min-height:100vh;place-content:center}.topbar{height:58px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:20px;padding:0 24px}.topbar .brand{font-size:24px;font-weight:700;margin-right:auto;text-decoration:none}.banner{padding:6px 12px;border-radius:20px}.banner.reconnecting{background:#f2cd66;color:#281d02}.banner.disconnected{background:#d7263d;color:#fff}.watch-layout{display:grid;grid-template-columns:minmax(500px,1fr) 390px;gap:18px;padding:18px;height:calc(100vh - 58px)}.player-column{display:grid;grid-template-rows:minmax(380px,1fr) 110px;gap:18px}.player,.panel,.chat-compose{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px}.player h1{margin:0 0 14px;font-size:21px}.screen{display:grid;place-content:center;aspect-ratio:16/9;border-radius:10px;background:#080909;color:#bbb}.youtube-frame{display:block;overflow:hidden}.youtube-frame iframe{width:100%;height:100%;border:0}.controls{display:flex;justify-content:center;gap:12px;margin:16px 0}.enqueue{display:flex;gap:8px}.enqueue input{flex:1}.empty{aspect-ratio:16/9;display:grid;place-content:center;font-size:25px;color:var(--muted)}.chat-compose{display:flex;gap:10px}.chat-compose textarea{flex:1;resize:none}.side-panels{display:grid;grid-template-rows:auto minmax(180px,1fr) minmax(220px,1fr);gap:12px;overflow:hidden}.panel{overflow:auto}.panel h2{margin:0 0 12px;font-size:16px}.participant{display:flex;gap:8px;align-items:center;margin:8px 0}.participant .color{width:10px;height:10px;border-radius:50%}.participant .quiet{margin-left:auto;padding:3px 7px;font-size:12px}.badge{border:1px solid var(--border);border-radius:12px;padding:2px 6px;font-size:11px}.switch{display:flex;gap:8px;border-top:1px solid var(--border);padding-top:10px;margin-top:10px}.queue-item{width:100%;text-align:left;display:grid;gap:3px;margin-bottom:7px}.queue-item span,.queue-item small{color:var(--muted);font-size:12px}.queue-item.current{border-color:var(--accent)}.queue-item.played{opacity:.55}.queue-actions{display:flex;gap:6px;margin:-2px 0 9px}.queue-actions button{padding:3px 8px;font-size:12px}.messages p{margin:6px 0;word-break:break-word}.messages .system{color:var(--muted);font-style:italic}.messages a{color:var(--accent)}.toast{position:fixed;right:24px;top:72px;max-width:320px;background:var(--accent);color:#fff;border:0}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0008;display:grid;place-content:center}.modal{position:static;width:min(510px,calc(100vw - 32px));background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:16px;padding:22px}.modal header{display:flex;justify-content:space-between;align-items:center}.modal label{display:grid;gap:6px;margin:12px 0}@media (max-width: 880px){.watch-layout{grid-template-columns:1fr;height:auto}.player-column{display:block}.chat-compose{margin-top:12px}}