:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0f1115;--panel:#171a21;--border:#2a2f3a;--text:#e8eaf0;--muted:#8a91a3;--accent:#6c8cff;--danger:#e5484d;--host:#f5b84b;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}body{height:100dvh;margin:0}[hidden]{display:none!important}button{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--border);cursor:pointer;border-radius:8px;padding:6px 12px}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--accent);border-color:var(--accent)}button.danger:hover{border-color:var(--danger);color:var(--danger)}.muted{color:var(--muted)}.join{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;height:100%;padding:24px;display:flex}.join button{padding:10px 32px;font-size:1.1rem}.name-form{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.name-form input{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:8px;width:min(260px,80vw);padding:10px 14px;font-size:1.1rem}.app{background:var(--bg);grid-template:"top top""stage side"1fr/1fr 320px;height:100%;display:grid}.app.chat-hidden{grid-template-columns:1fr 0}.app.chat-hidden .sidebar{display:none}.topbar{border-bottom:1px solid var(--border);flex-wrap:wrap;grid-area:top;align-items:center;gap:12px;padding:8px 12px;display:flex}.status{color:var(--host)}.controls{flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto;display:flex}.volume{align-items:center;gap:4px;display:flex}.stage{background:#000;grid-area:stage;min-height:0;position:relative;overflow:hidden}.stage video{object-fit:contain;width:100%;height:100%}.placeholder{color:var(--muted);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.sharer{background:#0009;border-radius:6px;padding:2px 8px;font-size:.85rem;position:absolute;top:8px;left:8px}.reactions{pointer-events:none;position:absolute;inset:0}.reaction{font-size:2.2rem;animation:2.5s ease-out forwards float-up;position:absolute;bottom:0}@keyframes float-up{0%{opacity:1;transform:translateY(0)scale(.8)}to{opacity:0;transform:translateY(-70vh)scale(1.3)}}.sidebar{border-left:1px solid var(--border);background:var(--panel);flex-direction:column;grid-area:side;min-height:0;display:flex}.people{border-bottom:1px solid var(--border);padding:8px 12px}.people ul{max-height:160px;margin:8px 0 0;padding:0;list-style:none;overflow-y:auto}.people li{padding:2px 0}.people li.host:after,.messages .host{color:var(--host)}.people li.host:after{content:" ★ host";font-size:.8rem}.people li.speaking{color:var(--accent)}.messages{overflow-wrap:anywhere;flex-direction:column;flex:1;gap:6px;margin:0;padding:8px 12px;list-style:none;display:flex;overflow-y:auto}.messages .system{color:var(--muted);font-size:.85rem;font-style:italic}.messages time{color:var(--muted);margin-right:6px;font-size:.75rem}.messages strong{margin-right:6px}.messages .self strong{color:var(--accent)}.reaction-bar{border-top:1px solid var(--border);justify-content:space-around;padding:4px 8px;display:flex}.reaction-bar button{background:0 0;border:none;padding:2px 6px;font-size:1.4rem}.reaction-bar button:hover{transform:scale(1.2)}.chat-form{border-top:1px solid var(--border);gap:6px;padding:8px;display:flex}.chat-form input{min-width:0;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:8px;flex:1;padding:6px 10px}@media (width<=800px){.app,.app.chat-hidden{grid-template:"top""stage""side"1fr/1fr}.stage{aspect-ratio:16/9}.sidebar{border-left:none}}