:root{color:#f7f7fb;background:#090a14;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none}*{box-sizing:border-box}html{min-width:320px;min-height:100%;background:#090a14}body{min-width:320px;min-height:100vh;min-height:100dvh;margin:0;background:radial-gradient(circle at 50% -10%,#322077 0,transparent 34rem),#090a14}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}.web-shell{width:min(100% - 28px,760px);min-height:100vh;min-height:100dvh;margin:auto;padding:max(18px,env(safe-area-inset-top)) 0 max(26px,env(safe-area-inset-bottom))}.web-shell.in-room{padding-bottom:calc(102px + env(safe-area-inset-bottom))}.topbar,.section-heading,.room-summary,.stream-card>header,.chat-sheet>header{display:flex;align-items:center;justify-content:space-between;gap:14px}.topbar{margin-bottom:30px}.brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;letter-spacing:.13em}.brand img{width:38px;height:38px;border-radius:11px}.connection-dot{display:flex;align-items:center;gap:7px;color:#8f94a6;font-size:11px}.connection-dot:before{width:7px;height:7px;content:"";border-radius:50%;background:#646879}.connection-dot.is-connected:before{background:#76ec91;box-shadow:0 0 12px #76ec916e}.connection-dot.is-connecting:before,.connection-dot.is-reconnecting:before{background:#e9bd69}.join-card,.participants-card,.stream-card,.room-summary{border:1px solid #292c3c;border-radius:22px;background:#11131ed9;box-shadow:0 28px 80px #0005}.join-card{max-width:520px;margin:8vh auto 0;padding:clamp(24px,7vw,42px)}.eyebrow{margin:0 0 8px;color:#8c79ff;font-size:10px;font-weight:800;letter-spacing:.14em}h1,h2,p{margin-top:0}h1{margin-bottom:12px;font-size:clamp(28px,8vw,42px);line-height:1.05}h2{margin-bottom:0;font-size:17px}.intro,.secure-note,.empty-state{color:#858a9c;line-height:1.6}.join-card form{margin-top:28px}label{display:block;margin:15px 0 7px;color:#b8bbc7;font-size:12px}input,select{width:100%;min-height:48px;padding:0 14px;color:#fff;border:1px solid #313442;border-radius:12px;outline:none;background:#090b13}input:focus,select:focus{border-color:#8068ff;box-shadow:0 0 0 3px #8068ff20}.room-code{text-transform:uppercase;letter-spacing:.22em;font-weight:800}button.primary,button.secondary{width:100%;min-height:50px;margin-top:20px;color:#fff;border:0;border-radius:12px;background:linear-gradient(135deg,#865dff,#526fff);font-weight:700}button.secondary{border:1px solid #494d61;background:#1b1e2c}.join-divider{display:flex;align-items:center;gap:12px;margin:24px 0 6px;color:#686d80;font-size:11px;text-transform:uppercase}.join-divider:before,.join-divider:after{height:1px;content:"";flex:1;background:#292c3c}.secure-note{margin:22px 0 0;font-size:10px}.room-summary{align-items:flex-start;margin-bottom:14px;padding:18px}.room-summary h1{margin:0;font-size:27px;letter-spacing:.14em}.status-grid{display:grid;gap:5px;color:#777c8e;font-size:10px;text-align:right}.status-grid strong{color:#c8cad4}.participants-card,.stream-card{margin-top:14px;padding:18px}.section-heading button,.stream-card header button,.stream-audio-control button,.leave-button,.remote-broadcast>button{min-height:40px;padding:0 13px;color:#d9d7e6;border:1px solid #36394a;border-radius:10px;background:#1a1d29}.participants-card ul{margin:16px 0 0;padding:0;list-style:none}.participants-card li{padding:13px 0;border-top:1px solid #242735}.participant-main{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:11px}.participant-main .avatar{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;color:#d9d2ff;background:#30275f;font-weight:800}.participant-main strong,.participant-main small{display:block}.participant-main small{margin-top:3px;color:#747a8c;font-size:10px}.participant-main b{padding:4px 7px;color:#a6efb3;border-radius:6px;background:#1d3825;font-size:9px}.is-speaking .avatar{color:#08100a;background:#86eb98;box-shadow:0 0 20px #86eb9852}.participant-volume,.stream-audio-control{display:grid;grid-template-columns:auto 1fr 38px;align-items:center;gap:9px}.participant-volume{margin:10px 0 0 51px}input[type=range]{min-height:28px;padding:0;accent-color:#8269ff;border:0;box-shadow:none;background:transparent}output{color:#a7aab7;font-size:10px;text-align:right}.stream-player{position:relative;width:100%;margin-top:14px;overflow:hidden;border-radius:14px;background:#020306;aspect-ratio:16 / 9}.stream-player video,.stream-placeholder{width:100%;height:100%}.stream-player video{display:block;object-fit:contain}.stream-placeholder{display:grid;place-items:center;color:#6e7383;font-size:12px}.stream-player>button{position:absolute;right:10px;bottom:10px;min-height:38px;padding:0 12px;color:#fff;border:1px solid #ffffff24;border-radius:9px;background:#070910c9}.stream-player:fullscreen{width:100vw;height:100vh;border-radius:0}.stream-audio-control{grid-template-columns:minmax(105px,auto) 1fr 38px;margin-top:14px}.stream-audio-control strong,.stream-audio-control small{display:block}.stream-audio-control small{margin-top:3px;color:#777d8d;font-size:9px}.stream-audio-control button{grid-column:1 / -1;justify-self:start}.audio-settings{margin-top:14px;padding:13px;border-radius:12px;background:#090b13}.audio-settings small{display:block;margin-top:9px;color:#73798a;line-height:1.5}.audio-unlock{width:100%;min-height:48px;margin-bottom:14px;color:#18120a;border:0;border-radius:12px;background:#f2c978;font-weight:800}.leave-button{width:100%;margin-top:18px;color:#ec909d}.mobile-controls{position:fixed;z-index:20;right:0;bottom:0;left:0;display:flex;justify-content:center;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #2b2e3b;background:#090b12ed;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.mobile-controls button{min-width:66px;min-height:52px;padding:0 12px;color:#c7cad5;border:1px solid #303341;border-radius:14px;background:#181b25;font-size:11px;font-weight:700;touch-action:manipulation}.mobile-controls button.is-active{color:#fff;border-color:#765dea;background:#3a2d70}.sheet-backdrop{position:fixed;z-index:40;inset:0;display:flex;align-items:flex-end;justify-content:center;background:#0009}.chat-sheet{width:min(100%,620px);height:min(76dvh,720px);display:grid;grid-template-rows:auto 1fr auto;padding-bottom:env(safe-area-inset-bottom);overflow:hidden;border:1px solid #343748;border-bottom:0;border-radius:22px 22px 0 0;background:#10121c}.chat-sheet>header{padding:16px;border-bottom:1px solid #292c39}.chat-sheet>header h2{text-transform:uppercase;letter-spacing:.1em}.chat-sheet>header button{width:42px;height:42px;color:#fff;border:0;border-radius:12px;background:#20232e;font-size:24px}.chat-messages{padding:14px;overflow-y:auto;overscroll-behavior:contain}.chat-messages article{width:fit-content;max-width:86%;margin-bottom:11px;padding:10px 12px;border-radius:5px 14px 14px;background:#1b1e2a}.chat-messages article.is-own{margin-left:auto;border-radius:14px 5px 14px 14px;background:#342a68}.chat-messages strong,.chat-messages time{color:#9e91ec;font-size:9px}.chat-messages p{margin:4px 0;overflow-wrap:anywhere;font-size:13px;line-height:1.45;white-space:pre-wrap}.chat-messages a{color:#aebdff}.chat-messages time{display:block;color:#656b7c;text-align:right}.chat-compose{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 12px;border-top:1px solid #292c39;background:#0c0e16}.chat-compose button{min-width:72px;color:#fff;border:0;border-radius:11px;background:#6954d8}.toast{position:fixed;z-index:60;top:max(16px,env(safe-area-inset-top));left:50%;width:min(calc(100% - 28px),520px);padding:13px 15px;transform:translate(-50%);color:#ffd4d8;border:1px solid #773b49;border-radius:12px;background:#331923ed;font-size:12px}@media(orientation:landscape)and (max-height:600px){.web-shell.in-room{width:min(100% - 28px,980px)}.stream-player{max-height:calc(100dvh - 190px)}.chat-sheet{height:92dvh}}@media(min-width:720px){.web-shell{padding-top:28px}.sheet-backdrop{align-items:stretch;justify-content:flex-end}.chat-sheet{width:420px;height:100%;border-radius:0}}@media(max-width:420px){.web-shell{width:min(100% - 20px,760px)}.room-summary{display:block}.status-grid{grid-template-columns:repeat(3,1fr);margin-top:15px;text-align:left}.status-grid span,.status-grid strong{display:block}.mobile-controls button{min-width:58px;padding:0 8px}}