:root{--brand-green:#1cba56;--brand-blue:#3979e6;--live-red:#ff3b3b;--glass-bg:#12141a9e;--glass-border:#ffffff1f;--glass-blur:blur(14px) saturate(140%);--text:#fff;--text-muted:#ffffffb8;--radius-pill:999px;--ease:cubic-bezier(.22, .61, .36, 1);-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}*,:before,:after{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{color:var(--text);background:#000;overflow:hidden}button{font:inherit;color:inherit}.icon{fill:currentColor;flex-shrink:0;width:24px;height:24px}.app{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background-position:50%;background-repeat:no-repeat;background-size:contain;position:fixed;inset:0;overflow:hidden}.app.is-idle{cursor:none}.splash{z-index:1;background-color:#000;background-position:50%;background-repeat:no-repeat;background-size:contain;position:absolute;inset:0}.splash-default{background-size:min(44vw,440px)}.stream{position:absolute;inset:0}.stream-video{object-fit:contain;pointer-events:none;background:0 0;width:100%;height:100%;display:block}.stream-stats{z-index:9;background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:var(--glass-blur);border-radius:10px;gap:2px;padding:8px 12px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;display:grid;position:absolute;top:12px;left:12px}.stream-stats span{min-width:80px;color:var(--text-muted);display:inline-block}.status{z-index:5;pointer-events:none;justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}.status-connecting,.status-waiting{align-items:flex-end;padding-bottom:max(9vh,72px)}.status-pill{border-radius:var(--radius-pill);background:var(--glass-bg);border:1px solid var(--glass-border);max-width:min(92vw,520px);-webkit-backdrop-filter:var(--glass-blur);align-items:center;gap:14px;padding:12px 22px 12px 16px;display:flex;box-shadow:0 10px 40px #00000059}.status-pill-text{flex-direction:column;gap:1px;display:flex}.status-title{letter-spacing:.01em;margin:0;font-size:15px;font-weight:600}.status-title:empty{display:none}.status-hint{color:var(--text-muted);margin:0;font-size:13px}.status-spinner{border:2.5px solid #ffffff38;border-top-color:#fff;border-radius:50%;flex-shrink:0;width:22px;height:22px;animation:.9s linear infinite spin}.status-pulse{background:var(--brand-green);border-radius:50%;flex-shrink:0;width:12px;height:12px;margin:0 5px;position:relative}.status-pulse:after{content:"";border:2px solid var(--brand-green);animation:pulse 1.8s var(--ease) infinite;border-radius:50%;position:absolute;inset:-6px}.status-card{text-align:center;border:1px solid var(--glass-border);max-width:440px;-webkit-backdrop-filter:var(--glass-blur);background:#12141af0;border-radius:20px;flex-direction:column;align-items:center;gap:8px;padding:28px 32px;display:flex}.status-card .status-title{font-size:17px}.status-card .status-hint{font-size:14px;line-height:1.45}.status-card-icon{fill:#ffb020;width:36px;height:36px;margin-bottom:4px}.brand-loader{width:64px;height:20px;position:relative}.brand-loader span{background:var(--brand-green);width:16px;height:16px;animation:swap 1s var(--ease) infinite;border-radius:50%;position:absolute;top:2px}.brand-loader span:last-child{background:var(--brand-blue);animation-direction:reverse}.unmute-layer{z-index:6;cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;inset:0}.unmute-pill{border-radius:var(--radius-pill);background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:var(--glass-blur);transition:transform .2s var(--ease), background-color .2s;animation:invite 2.4s var(--ease) infinite;align-items:center;gap:10px;padding:13px 22px 13px 18px;font-size:16px;font-weight:600;display:inline-flex;box-shadow:0 10px 40px #00000059,0 0 #ffffff59}.unmute-layer:hover .unmute-pill,.unmute-layer:focus-visible .unmute-pill{background:#1e212ac7;transform:scale(1.04)}.unmute-layer:focus-visible{outline:none}.control-bar{z-index:7;padding:28px max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));transition:opacity .35s var(--ease), transform .35s var(--ease);background:linear-gradient(#0000,#0000009e);align-items:center;gap:4px;display:flex;position:absolute;bottom:0;left:0;right:0}.is-idle .control-bar{opacity:0;pointer-events:none;transform:translateY(8px)}.control-spacer{flex:1}.control-button{border-radius:var(--radius-pill);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;gap:6px;min-width:40px;height:40px;padding:0 8px;transition:background-color .2s;display:inline-flex}.control-button:hover,.control-button:focus-visible,.control-button[aria-expanded=true]{background:#ffffff29;outline:none}.live-badge{border-radius:var(--radius-pill);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--glass-border);background:#00000059;align-items:center;gap:7px;height:26px;margin-right:6px;padding:0 11px 0 9px;font-size:12px;font-weight:700;display:inline-flex}.live-dot{background:var(--live-red);width:8px;height:8px;animation:live 1.6s var(--ease) infinite;border-radius:50%;box-shadow:0 0 #ff3b3b99}.volume{align-items:center;display:flex}.volume-slider{--level:100%;opacity:0;appearance:none;background:linear-gradient(to right, #fff var(--level), #ffffff4d var(--level));cursor:pointer;width:0;height:4px;transition:width .25s var(--ease), opacity .25s, margin .25s;border-radius:2px;margin:0}.volume:hover .volume-slider,.volume:focus-within .volume-slider{opacity:1;width:84px;margin:0 10px 0 4px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 4px #0006}.volume-slider::-moz-range-thumb{background:#fff;border:0;border-radius:50%;width:14px;height:14px}.volume-slider:focus-visible{outline:none}@media (hover:none){.volume-slider{display:none}}.language{position:relative}.language-code{letter-spacing:.04em;text-transform:uppercase;font-size:13px;font-weight:700}.language-menu{background:var(--glass-bg);border:1px solid var(--glass-border);min-width:200px;max-height:calc(100vh - 90px);-webkit-backdrop-filter:var(--glass-blur);transform-origin:100% 100%;border-radius:16px;margin:0;padding:6px;list-style:none;position:absolute;bottom:50px;right:0;overflow-y:auto;box-shadow:0 16px 48px #00000073}.language-menu button{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:10px;align-items:center;gap:10px;width:100%;padding:9px 12px;font-size:14px;display:flex}.language-menu button:hover,.language-menu button:focus-visible{background:#ffffff1f;outline:none}.language-menu button.selected{font-weight:600}.language-menu button span{flex:1}.language-menu img{object-fit:cover;border-radius:3px;width:22px;height:16px}.language-menu .icon{width:18px;height:18px;fill:var(--brand-green)}.captions{z-index:4;text-align:center;pointer-events:none;flex-direction:column;align-items:center;gap:6px;width:min(90vw,1000px);display:flex;position:absolute;bottom:max(11vh,76px);left:50%;transform:translate(-50%)}.caption{margin:0;font-size:clamp(16px,2.4vw,32px);font-weight:500;line-height:1.4}.caption span{-webkit-box-decoration-break:clone;box-decoration-break:clone;background:#000000b8;border-radius:6px;padding:.12em .45em}.reactions{z-index:3;pointer-events:none;position:absolute;inset:0;overflow:hidden}.reaction{--size:44px;--drift:0px;width:var(--size);height:var(--size);object-fit:contain;opacity:0;will-change:transform, opacity;filter:drop-shadow(0 4px 10px #0000004d);animation:reaction-rise 2.6s var(--ease) forwards;position:absolute;bottom:-8px}.reaction.drift-left{--drift:-70px}.reaction.drift-right{--drift:70px}.clock-debug{z-index:9;background:#000000bf;border-radius:10px;padding:6px 12px;font:600 clamp(20px,3.5vw,44px)/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;position:absolute;top:12px;right:12px}.fade-enter-active,.fade-leave-active{transition:opacity .4s var(--ease)}.fade-enter-from,.fade-leave-to{opacity:0}.pop-enter-active,.pop-leave-active{transition:opacity .18s var(--ease), transform .18s var(--ease)}.pop-enter-from,.pop-leave-to{opacity:0;transform:translateY(6px)scale(.97)}.caption-enter-active,.caption-leave-active{transition:opacity .3s var(--ease), transform .3s var(--ease)}.caption-enter-from,.caption-leave-to{opacity:0;transform:translateY(6px)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1.6)}}@keyframes live{0%{box-shadow:0 0 #ff3b3b99}70%,to{box-shadow:0 0 0 7px #ff3b3b00}}@keyframes invite{0%{box-shadow:0 10px 40px #00000059,0 0 #ffffff4d}70%,to{box-shadow:0 10px 40px #00000059,0 0 0 14px #fff0}}@keyframes swap{0%,to{left:0;transform:scale(1)}50%{left:48px;transform:scale(.55)}}@keyframes reaction-rise{0%{opacity:0;transform:translate(-50%)scale(.4)}12%{opacity:1;transform:translate(-50%,-9vh)scale(1.1)}22%{transform:translate(calc(-50% + var(--drift) * .25), -18vh) scale(1)}78%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--drift)), -68vh) scale(.9)}}@media (prefers-reduced-motion:reduce){.unmute-pill,.live-dot,.status-pulse:after{animation:none}}