:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (width<=1024px){:root{font-size:16px}}#root{text-align:center;box-sizing:border-box;flex-direction:column;width:100%;max-width:1920px;height:100svh;min-height:100svh;margin:0 auto;display:flex}body{margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}.app-loading{text-align:center;max-width:420px;color:var(--muted,#888);margin:64px auto;padding:0 16px}.lobby{text-align:left;max-width:420px;margin:64px auto;padding:0 16px}.lobby-subtitle{margin-bottom:24px}.lobby-tabs{border:1px solid var(--border);border-radius:8px;margin-bottom:20px;display:flex;overflow:hidden}.lobby-tabs button{color:var(--text);cursor:pointer;font:inherit;background:0 0;border:none;flex:1;padding:10px 12px}.lobby-tabs button.active{background:var(--accent-bg);color:var(--text-h);font-weight:600}.lobby-form{flex-direction:column;gap:14px;display:flex}.lobby-form label{color:var(--text);flex-direction:column;gap:6px;font-size:14px;display:flex}.lobby-form input{font:inherit;border:1px solid var(--border);background:var(--bg);color:var(--text-h);border-radius:6px;padding:10px 12px}.lobby-error{color:#e5484d;font-size:14px}button.primary,.lobby-form button[type=submit]{border:1px solid var(--accent-border);background:var(--accent);color:#fff;font:inherit;cursor:pointer;border-radius:6px;padding:10px 16px;font-weight:600}.room{text-align:left;flex-direction:column;flex:1;min-height:0;display:flex}.room-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;display:flex}.room-header h1{margin:0;font-size:22px}.status-badge{border-radius:999px;margin-top:4px;padding:2px 8px;font-size:13px;display:inline-block}.status-connecting{background:var(--code-bg);color:var(--text)}.status-connected{color:#2a9d63;background:#30a46c26}.status-error{color:#e5484d;background:#e5484d26}.reconnect-banner{color:#e5484d;background:#e5484d26;border:1px solid #e5484d66;border-radius:8px;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;font-size:14px;display:flex}.reconnect-banner button{color:#e5484d;cursor:pointer;background:0 0;border:1px solid #e5484d80;border-radius:6px;flex-shrink:0;padding:6px 10px;font-size:13px}.reconnect-banner button:hover{background:#e5484d26}.update-banner{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border);border-radius:8px;justify-content:space-between;align-items:center;gap:12px;margin:12px 16px 0;padding:10px 14px;font-size:14px;display:flex}.update-banner button{border:1px solid var(--accent-border);color:var(--accent);font:inherit;cursor:pointer;background:0 0;border-radius:6px;flex-shrink:0;padding:6px 10px;font-size:13px}.update-banner button:hover{background:var(--accent-bg)}.room-header-actions{gap:8px;display:flex}.room-header-actions button{font:inherit;border:1px solid var(--border);background:var(--bg);color:var(--text-h);cursor:pointer;border-radius:6px;padding:8px 12px}.dialog-backdrop{background:#00000080;transition:opacity .15s;position:fixed;inset:0}.dialog-backdrop[data-starting-style],.dialog-backdrop[data-ending-style]{opacity:0}.dialog-backdrop[data-closed]{pointer-events:none}.dialog-popup{border:1px solid var(--border);background:var(--bg);width:min(360px,100vw - 32px);box-shadow:var(--shadow);border-radius:10px;padding:20px;transition:transform .15s,opacity .15s;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)scale(1)}.dialog-popup[data-starting-style],.dialog-popup[data-ending-style]{opacity:0;transform:translate(-50%,-50%)scale(.96)}.dialog-popup[data-closed]{pointer-events:none}.dialog-title{color:var(--text-h);margin:0 0 8px;font-size:18px}.dialog-description{color:var(--text);margin:0 0 20px;font-size:14px}.dialog-actions{justify-content:flex-end;gap:8px;display:flex}.dialog-cancel{font:inherit;border:1px solid var(--border);color:var(--text-h);cursor:pointer;background:0 0;border-radius:6px;padding:8px 14px}.dialog-confirm{font:inherit;border:1px solid var(--accent-border);background:var(--accent);color:#fff;cursor:pointer;border-radius:6px;padding:8px 14px}.room-body{flex:1;gap:16px;min-height:0;padding:16px 20px;display:flex}.room-main{flex-direction:column;flex:1;gap:12px;min-width:0;display:flex}.video-form{gap:8px;display:flex}.video-form input{font:inherit;border:1px solid var(--border);background:var(--bg);color:var(--text-h);border-radius:6px;flex:1;padding:10px 12px}.video-form button{font:inherit;border:1px solid var(--accent-border);background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;border-radius:6px;padding:10px 16px}.video-form button[type=button]{color:var(--text-h);border-color:var(--border);background:0 0}.custom-controls{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.custom-controls button{font:inherit;border:1px solid var(--border);color:var(--text);cursor:pointer;white-space:nowrap;background:0 0;border-radius:6px;align-items:center;gap:4px;padding:6px 12px;line-height:1;display:inline-flex}.custom-controls button[data-pressed]{background:var(--accent-bg);color:var(--text-h);border-color:var(--accent-border)}.custom-controls button:disabled{opacity:.4;cursor:default}.volume-control{align-items:center;gap:11px;padding:0 8px;display:flex}.custom-controls .volume-icon-button{color:var(--text-h);cursor:pointer;appearance:none;background:0 0;border:none;border-radius:0;outline:none;align-items:center;margin:0;padding:0;line-height:1;display:inline-flex}.custom-controls .volume-icon-button:disabled{opacity:.4;cursor:default}.volume-slider{align-items:center;width:90px;display:inline-flex}.volume-slider-control{touch-action:none;cursor:pointer;align-items:center;width:100%;height:16px;display:flex;position:relative}.volume-slider[data-disabled] .volume-slider-control{cursor:default;opacity:.5}.volume-slider-track{background:var(--border);border-radius:999px;width:100%;height:4px;position:relative}.volume-slider-indicator{border-radius:inherit;background:var(--accent);height:100%;position:absolute}.volume-slider-thumb{background:var(--accent);width:14px;height:14px;box-shadow:0 0 0 2px var(--bg);border-radius:50%}.volume-slider-thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.link-scope{border:1px solid var(--border);border-radius:6px;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:8px;padding:8px 10px;font-size:13px;display:flex}.link-scope-title{color:var(--text-h)}.link-scope label{cursor:pointer;align-items:center;gap:5px;display:flex}.link-scope label:has(input:disabled){opacity:.5;cursor:default}.link-scope-note{color:var(--text);flex-basis:100%;margin:0;font-size:12px}.queue{border:1px solid var(--border);border-radius:8px;padding:12px}.queue li.queue-group{flex-direction:column;align-items:stretch;gap:6px}.queue-group-header{align-items:center;gap:8px;display:flex}.queue-group-toggle{color:var(--text-h);cursor:pointer;background:0 0;border:none;flex-shrink:0;align-items:center;padding:0 4px;font-size:12px;line-height:1;display:inline-flex}.queue-group-items{flex-direction:column;gap:4px;max-height:180px;margin:0;padding:0 0 0 16px;list-style:none;display:flex;overflow-y:auto}.queue-group-items li{padding:4px 6px;font-size:12px}.queue ul{flex-direction:column;gap:6px;max-height:220px;margin:8px 0 0;padding:0;list-style:none;display:flex;overflow-y:auto}.queue li{border:1px solid var(--border);border-radius:6px;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;font-size:13px;display:flex}.queue-item-info{flex-direction:column;min-width:0;display:flex;overflow:hidden}.queue-video-id{color:var(--text-h);text-overflow:ellipsis;white-space:nowrap;text-decoration:none;overflow:hidden}a.queue-video-id:hover{text-decoration:underline}.queue-added-by{color:var(--text);font-size:11px}.queue-item-actions{flex-shrink:0;gap:4px;display:flex}.queue-item-actions button{border:1px solid var(--border);color:var(--text-h);cursor:pointer;background:0 0;border-radius:4px;align-items:center;padding:2px 8px;display:inline-flex}.queue-empty{color:var(--text);margin-top:8px;font-size:13px;font-style:italic}.queue-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.auto-advance-switch{color:var(--text);cursor:pointer;align-items:center;gap:6px;font-size:13px;display:flex}.switch-root{background:var(--border);border-radius:999px;flex-shrink:0;align-items:center;width:34px;height:20px;transition:background .15s;display:inline-flex;position:relative}.switch-root[data-checked]{background:var(--accent)}.switch-thumb{background:var(--text-h);border-radius:50%;width:16px;height:16px;transition:transform .15s;position:absolute;left:2px}.switch-root[data-checked] .switch-thumb{transform:translate(14px)}.player-container{background:#000;border-radius:8px;flex:1;min-height:320px;position:relative;overflow:hidden}.player-error-overlay{z-index:2;text-align:center;color:#e5e5e5;background:#0a0a0ceb;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;display:flex;position:absolute;inset:0}.player-error-overlay p{max-width:480px}.player-error-overlay a{color:var(--accent);font-weight:600}.player-error-overlay button{font:inherit;border:1px solid var(--accent-border);background:var(--accent);color:#fff;cursor:pointer;border-radius:6px;padding:8px 16px}.external-hint{color:#a3a3a3;max-width:480px;font-size:13px}.ready-overlay{z-index:2;color:#e5e5e5;white-space:nowrap;background:#0a0a0cd9;border-radius:999px;padding:6px 14px;font-size:13px;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.youtube-player-wrap{width:100%;height:100%;min-height:320px;position:relative}.youtube-player-wrap iframe{width:100%;height:100%;position:absolute;inset:0}.youtube-player-overlay{color:#cfcfcf;text-align:center;background:#111;justify-content:center;align-items:center;padding:0 24px;display:flex;position:absolute;inset:0}.room-sidebar{flex-direction:column;flex-shrink:0;gap:16px;width:300px;min-height:0;display:flex}.participants ul{flex-direction:column;gap:4px;margin:0;padding:0;font-size:14px;list-style:none;display:flex}.chat{border:1px solid var(--border);border-radius:8px;flex-direction:column;flex:1;min-height:0;padding:12px;display:flex}.chat-messages{flex-direction:column;flex:1;gap:6px;margin:8px 0;font-size:14px;display:flex;overflow-y:auto}.chat-empty{color:var(--text);font-style:italic}.chat-system{color:var(--text);font-size:13px;font-style:italic}.chat-author{color:var(--text-h);font-weight:600}.chat-form{gap:6px;display:flex}.chat-form input{font:inherit;border:1px solid var(--border);background:var(--bg);color:var(--text-h);border-radius:6px;flex:1;padding:8px 10px}.chat-form button{border:1px solid var(--accent-border);background:var(--accent);color:#fff;cursor:pointer;border-radius:6px;align-items:center;padding:8px 12px;display:inline-flex}@media (width<=800px){.room-body{flex-direction:column}.room-sidebar{width:auto}}