:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--bg-raised:#fafafa;--border:#e5e4e7;--accent:#aa3bff;--accent-hover:#9420f0;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--danger:#d1364a;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;--radius:10px;font:16px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--bg-raised:#1c1d25;--border:#2e303a;--accent:#c084fc;--accent-hover:#d1a3fd;--accent-bg:#c084fc26;--accent-border:#c084fc80;--danger:#f4788c;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}}*{box-sizing:border-box}body{background:var(--bg);min-height:100svh;margin:0}#root{min-height:100svh}h1,h2{font-family:var(--sans);color:var(--text-h);font-weight:600}h1{letter-spacing:-.02em;margin:0;font-size:2rem}h2{margin:0;font-size:.95rem;line-height:118%}p{margin:0}button,input{font:inherit}.yt-aspect{aspect-ratio:16/9;border-radius:var(--radius);width:100%;position:relative;overflow:hidden}.yt-aspect iframe{position:absolute;inset:0;width:100%!important;height:100%!important}.yt-locked iframe{pointer-events:none}.yt-placeholder{border:1px dashed var(--border);color:var(--text);background:var(--bg);justify-content:center;align-items:center;display:flex}.room-player{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);box-shadow:var(--shadow);flex-direction:column;gap:.75rem;padding:1.25rem;display:flex}.room-player h2{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0}.load-row{gap:.5rem;display:flex}.load-row input{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);min-width:0;color:var(--text-h);flex:1;padding:.6rem .75rem}.load-row input:focus{border-color:var(--accent-border);outline:none}.room-player button{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);cursor:pointer;padding:.6rem 1.1rem;transition:border-color .15s,color .15s}.room-player button:hover{border-color:var(--accent);color:var(--text-h)}.room-player .error{color:var(--danger);margin:0;font-size:.875rem}@media (width<=480px){.load-row{flex-direction:column}}.room-picker{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);max-width:480px;box-shadow:var(--shadow);margin:0 auto;padding:1.25rem}.room-picker h2{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0 0 .75rem}.room-picker-row{gap:.5rem;display:flex}.room-picker input{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);min-width:0;color:var(--text-h);flex:1;padding:.6rem .75rem}.room-picker input:focus{border-color:var(--accent-border);outline:none}.room-picker button{border-radius:var(--radius);background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;border:none;padding:.6rem 1.1rem;font-weight:600;transition:background-color .15s}.room-picker button:hover{background:var(--accent-hover)}.room-picker-empty{color:var(--text);margin:0}.room-picker-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.room-picker-list li{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text-h);justify-content:space-between;align-items:center;gap:.5rem;padding:.6rem .9rem;display:flex}.room-picker-count{color:var(--text);font-size:.85rem;font-weight:400}.room-picker .error{color:var(--danger);margin:.5rem 0 0;font-size:.875rem}@media (width<=480px){.room-picker-row{flex-direction:column}}.chat{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);box-shadow:var(--shadow);flex-direction:column;gap:.75rem;height:480px;padding:1.25rem;display:flex}.chat h2{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0}.chat-messages{flex-direction:column;flex:1;gap:.4rem;min-height:0;display:flex;overflow-y:auto}.chat-message{word-break:break-word;color:var(--text);font-size:.9rem;line-height:1.4}.chat-author{color:var(--accent);font-weight:600}.chat-nickname-row,.chat-input-row{gap:.5rem;display:flex}.chat input{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);min-width:0;color:var(--text-h);flex:1;padding:.6rem .75rem}.chat input:focus{border-color:var(--accent-border);outline:none}.chat button{border-radius:var(--radius);background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;border:none;padding:.6rem 1.1rem;font-weight:600;transition:background-color .15s}.chat button:hover{background:var(--accent-hover)}@media (width<=480px){.chat{height:320px;padding:1rem}.chat-nickname-row,.chat-input-row{flex-direction:column}}.page{background:radial-gradient(ellipse 900px 500px at 50% -10%, var(--accent-bg), transparent);min-height:100svh}.room{max-width:1200px;margin:0 auto;padding:2.5rem 1.25rem}.room h1{text-align:center;background:linear-gradient(135deg, var(--text-h), var(--accent));color:#0000;-webkit-background-clip:text;background-clip:text;margin-bottom:2rem;font-size:1.75rem}.notice{border:1px solid var(--accent-border);background:var(--accent-bg);border-radius:var(--radius);max-width:480px;color:var(--text-h);justify-content:space-between;align-items:center;gap:1rem;margin:0 auto 1.5rem;padding:.75rem 1rem;font-size:.9rem;display:flex}.notice button{color:var(--accent);cursor:pointer;white-space:nowrap;background:0 0;border:none;font-weight:600}.role-picker{justify-content:center;gap:1rem;display:flex}.btn-primary{border-radius:var(--radius);background:var(--accent);color:#fff;cursor:pointer;box-shadow:var(--shadow);border:none;padding:.75rem 1.75rem;font-weight:600;transition:background-color .15s,transform .1s}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}.btn-ghost{border:1px solid var(--border);border-radius:var(--radius);color:var(--text);cursor:pointer;background:0 0;padding:.5rem 1rem;transition:border-color .15s,color .15s}.btn-ghost:hover{border-color:var(--accent);color:var(--text-h)}.room-header{justify-content:center;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex;position:relative}.room-name{color:var(--text-h);font-weight:600}.room-count{color:var(--text);font-size:.85rem;font-weight:400}.room-header .btn-ghost{position:absolute;right:0}.room-layout{grid-template-columns:2fr 1fr;gap:1.5rem;display:grid}@media (width<=720px){.room-header{flex-direction:column}.room-header .btn-ghost{position:static}.room-layout{grid-template-columns:1fr}}