:root{--color-bg:#0b0a11;--color-surface:#1e1c23d1;--color-surface-raised:#2c2a32d1;--color-text:rgb(var(--color-text-rgb));--color-text-muted:#bcb2cc;--color-text-rgb:233 233 237;--color-accent-rgb:216 180 254;--color-violet-rgb:109 40 217;--color-danger-rgb:217 138 132;--color-divider:rgb(var(--color-text-rgb) / 16%);--color-control-border:rgb(var(--color-text-rgb) / 45%);--color-control-border-hover:rgb(var(--color-text-rgb) / 62%);--color-accent:rgb(var(--color-accent-rgb));--color-accent-100:#faf5ff;--color-accent-300:#e9d5ff;--color-danger:rgb(var(--color-danger-rgb));--color-danger-900:#3a2422;--color-neutral-700:#595d6c;--font-sans:-apple-system, "Segoe UI", Roboto, system-ui, sans-serif;--font-mono:ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;--weight-heading:500;--space-1:3px;--space-2:6px;--space-3:9px;--space-4:12px;--space-5:16px;--space-6:20px;--space-8:28px;--space-10:40px;--radius-sm:4px;--radius-md:8px;--radius-lg:14px;--radius-xl:20px;--radius-pill:999px;--shadow-md:0 0 0 1px var(--color-neutral-700), 0 6px 18px #0000008c;--shadow-glow:0 0 24px rgb(var(--color-accent-rgb) / 26%);--blur-glass:18px;--tap-min:44px;--container-narrow:520px;--container-wide:900px}*,:before,:after{box-sizing:border-box}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;margin:0;font-size:16px;font-weight:400;line-height:1.55}h1,h2,h3,h4{font-family:var(--font-sans);font-weight:var(--weight-heading);letter-spacing:-.01em;margin:0 0 var(--space-2);color:var(--color-text);line-height:1.15}h1{font-size:26px}h2{font-size:21px}h3{letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted);font-size:15px}p{margin:0 0 var(--space-3);color:var(--color-text-muted)}p:last-child{margin-bottom:0}ul{padding-left:var(--space-5);margin:0}li{margin-bottom:var(--space-2)}button{font:inherit}:focus:not(:focus-visible){outline:none}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}::selection{background:rgb(var(--color-accent-rgb) / 30%)}header{justify-content:space-between;align-items:center;gap:var(--space-4);height:60px;padding:0 var(--space-5);border-bottom:1px solid var(--color-divider);background:var(--color-surface);-webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));flex:none;display:flex}.brand{align-items:center;gap:var(--space-3);min-width:0;display:flex}.brand-logo{flex:none;display:block}header h1{letter-spacing:-.005em;white-space:nowrap;margin:0;font-size:16px}header p{margin:0;font-size:13px}.secure-chip{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);background:rgb(var(--color-accent-rgb) / 10%);border:1px solid rgb(var(--color-accent-rgb) / 28%);color:var(--color-accent-300);font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;flex:none;font-size:11px;display:inline-flex}@media (width<=480px){.secure-chip span{display:none}}.app-layout{flex-direction:column;min-height:100dvh;display:flex}.app-body{flex:1;display:flex;overflow:hidden}.app-main:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(50% 45% at 50% 22%, rgb(var(--color-violet-rgb) / 26%), transparent 72%), radial-gradient(45% 40% at 78% 82%, rgb(var(--color-accent-rgb) / 12%), transparent 72%), radial-gradient(40% 38% at 16% 76%, rgb(var(--color-violet-rgb) / 14%), transparent 72%);position:absolute;inset:0}@media (prefers-reduced-motion:no-preference){.app-main:before{transition:opacity .4s}}.app-main{isolation:isolate;flex-direction:column;flex:1;min-height:0;display:flex;position:relative;overflow-y:auto}:is(.app-main:has(>.video-stage),.app-main:has(>.watch-page-content>.video-stage)){overflow:hidden}.app-aside{border-left:1px solid var(--color-divider);background:var(--color-surface);width:320px;-webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));flex-direction:column;flex:none;min-height:0;display:flex}@media (width<=768px){.app-body{flex-direction:column}.app-aside{border-left:none;border-top:1px solid var(--color-divider);width:100%}}.broadcast-form,.preview-stage,.ended-section,.failed-section,.unsupported-section,.connecting-section,.reconnecting-section,.room-ended-section,.decryption-failed-section,.unsupported-notice{width:100%;max-width:var(--container-narrow);padding:var(--space-6) var(--space-4);margin:0 auto}.error-notice{background:var(--color-danger-900);border:1px solid rgb(var(--color-danger-rgb) / 45%);border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:var(--space-4)}.error-notice p{color:var(--color-danger);margin:0;font-size:14px}button[type=submit],.confirm-button,.switch-button,.cancel-button,.stop-button,.enable-audio-button,.copy-action button,.ended-section button,.failed-section button{min-height:var(--tap-min);padding:0 var(--space-5);border-radius:var(--radius-md);font-family:var(--font-sans);font-weight:var(--weight-heading);cursor:pointer;border:1px solid var(--color-accent);color:var(--color-accent-300);border-radius:var(--radius-pill);background:0 0;justify-content:center;align-items:center;width:100%;font-size:15px;transition:background-color .12s,box-shadow .16s;display:inline-flex}button[type=submit]:hover,.confirm-button:hover,.stop-button:hover,.enable-audio-button:hover,.copy-action button:hover,.ended-section button:hover,.failed-section button:hover{background:rgb(var(--color-accent-rgb) / 14%)}button[type=submit]:active,.confirm-button:active,.stop-button:active,.enable-audio-button:active{background:rgb(var(--color-accent-rgb) / 24%)}button:disabled{opacity:.5;cursor:not-allowed}.cancel-button{border-color:var(--color-control-border);color:var(--color-text-muted)}.cancel-button:hover{border-color:var(--color-control-border-hover);background:rgb(var(--color-text-rgb) / 8%)}@media (width>=720px){.broadcast-form,.preview-stage,.ended-section,.failed-section,.unsupported-section{max-width:var(--container-wide);padding:var(--space-10) var(--space-6)}}.broadcast-form fieldset{border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-5);margin:0 0 var(--space-6)}.broadcast-form legend{padding:0 var(--space-2);font-size:13px;font-weight:var(--weight-heading);color:var(--color-text-muted)}.broadcast-form label{align-items:center;gap:var(--space-3);min-height:var(--tap-min);padding:var(--space-2) var(--space-1);cursor:pointer;font-size:15px;display:flex}.broadcast-form input[type=radio]{appearance:none;border:1.5px solid var(--color-control-border);background:var(--color-surface);border-radius:50%;flex:none;place-content:center;width:18px;height:18px;margin:0;display:grid}.broadcast-form input[type=radio]:before{content:"";background:var(--color-accent);border-radius:50%;width:9px;height:9px;transition:transform .1s;transform:scale(0)}.broadcast-form input[type=radio]:checked{border-color:var(--color-accent)}.broadcast-form input[type=radio]:checked:before{transform:scale(1)}.broadcast-form input[type=radio]:focus-visible{outline-offset:3px}.broadcast-form label:hover input[type=radio]{border-color:var(--color-accent)}.broadcast-form button[type=submit],.password-form button[type=submit],.confirm-button{margin-top:var(--space-2);color:#fff;background:linear-gradient(135deg,#6d28d9 0%,#7c3aed 100%);border-color:#0000;box-shadow:0 4px 18px #6d28d973}.broadcast-form button[type=submit]:hover,.password-form button[type=submit]:hover,.confirm-button:hover{background:linear-gradient(135deg,#7c3aed 0%,#8b5cf6 100%);box-shadow:0 6px 26px #7c3aed8c}.broadcast-form button[type=submit]:active,.password-form button[type=submit]:active,.confirm-button:active{background:linear-gradient(135deg,#5b21b6 0%,#6d28d9 100%)}.broadcast-form button[type=submit]:disabled,.password-form button[type=submit]:disabled,.confirm-button:disabled{box-shadow:none}.preview-stage h2{margin-bottom:var(--space-2)}.preview-stage>p{margin-bottom:var(--space-5);font-size:14px}.preview-stage video{aspect-ratio:16/9;border-radius:var(--radius-xl);width:100%;box-shadow:var(--shadow-md);margin-bottom:var(--space-5);background:#000;display:block}.preview-actions{gap:var(--space-3);flex-direction:column;display:flex}.form-group{gap:var(--space-1);flex-direction:column;display:flex}.form-group label{color:var(--color-text-muted);font-size:12px}.form-group input{min-height:var(--tap-min);padding:0 var(--space-3);color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-control-border);border-radius:var(--radius-md);font-size:15px}.form-group input:hover{border-color:var(--color-control-border-hover)}.form-group input:focus-visible{border-color:var(--color-accent);outline-offset:0}@media (width>=720px){.preview-actions{flex-flow:wrap;align-items:flex-end}.preview-actions .form-group{flex:220px}.confirm-button,.switch-button,.cancel-button{width:auto;padding:0 var(--space-6);flex:none}}.live-badge{bottom:var(--space-5);z-index:20;align-items:center;gap:var(--space-4);max-width:calc(100% - var(--space-8));background:var(--color-surface-raised);-webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));border:1px solid var(--color-divider);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-3);flex-wrap:wrap;justify-content:center;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 10px 40px #0000008c}.app-main:has(.live-badge){padding-bottom:96px}.live-actions{align-items:center;gap:var(--space-2);flex:none;display:flex}.camera-button{width:var(--tap-min);height:var(--tap-min);background:rgb(var(--color-text-rgb) / 8%);border:1px solid var(--color-control-border);color:var(--color-text);cursor:pointer;border-radius:50%;flex:none;justify-content:center;align-items:center;padding:0;transition:background-color .12s,border-color .12s;display:inline-flex}.camera-button:hover{background:rgb(var(--color-text-rgb) / 14%);border-color:var(--color-control-border-hover)}@media (width<=560px){.live-badge{left:var(--space-4);right:var(--space-4);border-radius:var(--radius-xl);max-width:none;transform:none}.source-label{text-align:center;flex-basis:100%;order:3}}.live-indicator{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);background:rgb(var(--color-danger-rgb) / 12%);border:1px solid rgb(var(--color-danger-rgb) / 30%);flex:none;display:flex}.live-dot{background:var(--color-danger);width:10px;height:10px;box-shadow:0 0 0 0 rgb(var(--color-danger-rgb) / 60%);border-radius:50%;animation:1.8s ease-out infinite live-pulse}@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgb(var(--color-danger-rgb) / 55%)}70%{box-shadow:0 0 0 8px #0000}to{box-shadow:0 0 #0000}}.live-indicator strong{letter-spacing:.08em;font-size:12px;font-weight:var(--weight-heading);color:var(--color-danger)}.source-label{min-width:0;color:var(--color-text-muted);overflow-wrap:anywhere;flex:160px;margin:0;font-size:13px}.stop-button{width:auto;min-height:var(--tap-min);padding:0 var(--space-5);color:#fff;background:linear-gradient(135deg,#7f1d1d 0%,#b91c1c 100%);border-color:#0000;flex:none;box-shadow:0 0 20px #b91c1c59}.stop-button:hover{background:linear-gradient(135deg,#991b1b 0%,#dc2626 100%);box-shadow:0 0 28px #dc262673}.stop-button:active{background:linear-gradient(135deg,#7f1d1d 0%,#991b1b 100%)}.share-panel{width:100%;max-width:var(--container-wide);padding:var(--space-6) var(--space-4);margin:0 auto}@media (width>=720px){.share-panel{padding:var(--space-10) var(--space-6)}}.share-panel>p{margin-bottom:var(--space-5);font-size:14px}.share-input-group{gap:var(--space-2);flex-direction:column;display:flex}.share-input-group label{color:var(--color-text-muted);font-size:12px}.share-input-group input[readonly]{width:100%;min-height:var(--tap-min);padding:0 var(--space-3);font-family:var(--font-mono);color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-control-border);border-radius:var(--radius-md);white-space:nowrap;font-size:13px;overflow-x:auto}.share-input-group input[readonly]:focus-visible{border-color:var(--color-accent);outline-offset:0}.share-input-group button{min-height:var(--tap-min);padding:0 var(--space-5);border-radius:var(--radius-md);font-family:var(--font-sans);font-weight:var(--weight-heading);cursor:pointer;border:1px solid var(--color-accent);background:rgb(var(--color-accent-rgb) / 16%);color:var(--color-accent-100);font-size:15px}.share-input-group button:hover{background:rgb(var(--color-accent-rgb) / 26%)}@media (width>=720px){.share-input-group{flex-flow:wrap;align-items:center}.share-input-group label{flex:0 0 100%}.share-input-group input[readonly]{flex:1}.share-input-group button{flex:none;width:auto}}.share-panel img{margin-top:var(--space-5);border-radius:var(--radius-md);border:1px solid var(--color-divider);width:200px;height:200px;display:block}.ended-section button,.failed-section button{margin-top:var(--space-3);width:auto}.connecting-section,.reconnecting-section,.room-ended-section,.decryption-failed-section,.unsupported-notice{padding-top:var(--space-8)}.connecting-section h2:after,.reconnecting-section h2:after{content:"";width:8px;height:8px;margin-left:var(--space-2);background:var(--color-accent);vertical-align:middle;border-radius:50%;animation:1.2s ease-in-out infinite connect-blink;display:inline-block}@keyframes connect-blink{0%,to{opacity:.25}50%{opacity:1}}.video-stage{background:#000;flex:1;justify-content:center;align-items:center;width:100%;min-height:0;display:flex;position:relative}.video-stage video{object-fit:contain;background:#000;width:100%;height:100%;display:block}.video-stage:after{content:"";pointer-events:none;background:linear-gradient(#0000008c 0%,#0000 18% 62%,#000000b8 100%);position:absolute;inset:0}.stage-overlay{z-index:2;align-items:center;gap:var(--space-3);display:flex;position:absolute}.stage-overlay-top{top:var(--space-5);left:var(--space-5);right:var(--space-5);justify-content:space-between}.stage-overlay-bottom{bottom:var(--space-5);max-width:calc(100% - var(--space-8));left:50%;transform:translate(-50%)}.video-stage audio{display:none}.audio-blocked-notice{z-index:10;justify-content:space-between;align-items:center;gap:var(--space-3);background:var(--color-surface-raised);border-top:1px solid var(--color-divider);box-shadow:var(--shadow-md);padding:var(--space-3) var(--space-4);flex-wrap:wrap;display:flex;position:sticky;bottom:0}.audio-blocked-notice p{flex:180px;margin:0;font-size:13px}.enable-audio-button{width:auto;min-height:var(--tap-min);padding:0 var(--space-4);background:rgb(var(--color-accent-rgb) / 16%);flex:none}.stats-panel{padding:var(--space-4);border-top:1px solid var(--color-divider)}.stats-panel h3{margin-bottom:var(--space-3)}.stats-panel dl{gap:var(--space-4) var(--space-3);grid-template-columns:repeat(2,1fr);margin:0;display:grid}.stats-panel dl>div{flex-direction:column;gap:2px;display:flex}.stats-panel dt{letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted);font-size:11px}.stats-panel dd{font-family:var(--font-mono);color:var(--color-text);margin:0;font-size:15px}.stats-panel dd:empty:before{content:"—";color:var(--color-text-muted)}@media (width>=560px){.stats-panel dl{grid-template-columns:repeat(5,1fr)}}.unsupported-notice ul{margin:var(--space-3) 0 var(--space-5)}.unsupported-notice li{color:var(--color-text-muted);font-size:14px}.copy-action{margin-top:var(--space-4)}.copy-action button{width:auto;min-height:var(--tap-min);padding:0 var(--space-5);background:rgb(var(--color-accent-rgb) / 12%)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.connecting-section h2:after,.reconnecting-section h2:after{opacity:1}}.switch-button{border-color:var(--color-control-border);color:var(--color-text-muted)}.switch-button:hover{border-color:var(--color-control-border-hover);background:rgb(var(--color-text-rgb) / 8%)}.source-resolution-badge{margin:var(--space-2) 0 var(--space-4);font-family:var(--font-mono);color:var(--color-text-muted);font-size:13px}.password-section{gap:var(--space-3);margin-block:var(--space-4);flex-direction:column;display:flex}.custom-quality-fields{gap:var(--space-3);flex-direction:column;margin-block-start:var(--space-3);display:flex}.checkbox-label{align-items:center;gap:var(--space-3);min-height:var(--tap-min);color:var(--color-text);display:flex}.checkbox-label input[type=checkbox]{appearance:none;border-radius:var(--radius-sm);border:1.5px solid var(--color-control-border);background:var(--color-surface);flex:none;place-content:center;width:18px;height:18px;margin:0;display:grid}.checkbox-label input[type=checkbox]:before{content:"";background:var(--color-accent);border-radius:1px;width:10px;height:10px;transition:transform .1s;transform:scale(0)}.checkbox-label input[type=checkbox]:checked{border-color:var(--color-accent)}.checkbox-label input[type=checkbox]:checked:before{transform:scale(1)}.checkbox-label:hover input[type=checkbox]{border-color:var(--color-accent)}.viewer-count{font-family:var(--font-mono);color:var(--color-text-muted);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);background:rgb(var(--color-text-rgb) / 6%);border:1px solid var(--color-divider);font-size:13px}.self-view{padding:var(--space-4);border-top:1px solid var(--color-divider)}.self-view h3{margin-bottom:var(--space-3)}.self-view video{aspect-ratio:16/9;object-fit:contain;border:1px solid var(--color-divider);border-radius:var(--radius-lg);background:#000;width:100%;max-height:60dvh;display:block}.share-qr{width:160px;height:160px;margin-top:var(--space-4);padding:var(--space-2);border-radius:var(--radius-sm);background:#fff;display:block}.password-required-section{padding:var(--space-6) var(--space-4);max-width:var(--container-narrow);margin-inline:auto}.password-form{gap:var(--space-3);margin-top:var(--space-4);flex-direction:column;display:flex}.chat-panel{flex-direction:column;height:100%;min-height:0;display:flex;overflow:hidden}.chat-header{padding:var(--space-4);border-bottom:1px solid var(--color-divider)}.chat-header h3{margin:0}.chat-messages{min-height:0;padding:var(--space-4);gap:var(--space-4);flex-direction:column;flex:1;display:flex;overflow-y:auto}.chat-empty{color:var(--color-text-muted);text-align:center;margin:auto;font-size:14px}.chat-message{gap:var(--space-1);flex-direction:column;display:flex}.chat-author{font-weight:var(--weight-heading);color:var(--color-accent-300);font-size:13px}.chat-time{font-family:var(--font-mono);color:var(--color-text-muted);margin-left:var(--space-2);font-size:12px}.chat-content{color:var(--color-text);overflow-wrap:anywhere;margin:0;font-size:15px;line-height:1.4}.chat-form{padding:var(--space-4);border-top:1px solid var(--color-divider);gap:var(--space-2);display:flex}.chat-form input{min-width:0;min-height:var(--tap-min);padding:0 var(--space-3);color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-control-border);border-radius:var(--radius-pill);flex:1;font-size:15px}.chat-form input:hover{border-color:var(--color-control-border-hover)}.chat-form input:focus-visible{border-color:var(--color-accent);outline-offset:0}.chat-form button[type=submit]{aspect-ratio:1;flex:none;width:auto;padding:0}.broadcast-form,.preview-stage,.share-panel,.stats-panel,.self-view,.password-required-section,.ended-section,.failed-section,.unsupported-section,.connecting-section,.reconnecting-section,.room-ended-section,.decryption-failed-section,.unsupported-notice{background:var(--color-surface);-webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));border:1px solid var(--color-divider);border-radius:var(--radius-xl)}.share-panel,.stats-panel,.self-view{width:auto;max-width:none;margin:var(--space-5);border-top:1px solid var(--color-divider)}.self-view .self-view-container{width:100%;display:block;position:relative}.self-view .camera-video{right:var(--space-4);bottom:var(--space-4);border-radius:var(--radius-md);object-fit:cover;background:#000;border:2px solid #fff3;width:min(220px,22%);position:absolute;box-shadow:0 4px 12px #00000080}.share-panel{padding:var(--space-6)}.stats-panel{padding:var(--space-5)}.entry-brand{align-items:center;gap:var(--space-3);margin-bottom:var(--space-6);flex-direction:column;display:flex}.entry-brand h2{margin:0;font-size:24px}.entry-brand p{text-align:center;margin:0;font-size:14px}.home-page-content,.watch-page-content{flex-direction:column;flex:1;min-height:0;display:flex}.home-page-content>:not(.video-stage),.watch-page-content>:not(.video-stage){flex-shrink:0}:is(.home-page-content:has(>.broadcast-form),.watch-page-content:has(.password-required-section)){padding:var(--space-6) var(--space-4);justify-content:center;align-items:center}:is(.home-page-content:has(>.broadcast-form)>*,.watch-page-content:has(.password-required-section)>*){max-width:460px}.entry-brand{width:100%}.broadcast-form,.password-required-section{padding:var(--space-6)}.entry-note{justify-content:center;align-items:center;gap:var(--space-2);margin-top:var(--space-4);color:var(--color-text-muted);font-size:13px;display:flex}.entry-note svg{color:var(--color-accent-300);flex:none}.stage-pill{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);-webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));color:var(--color-text);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;background:#0000008c;border:1px solid #ffffff1f;font-size:12px;display:inline-flex}.stage-pill-live{border-color:rgb(var(--color-danger-rgb) / 45%)}@media (width<=560px){.stage-overlay-top{flex-wrap:wrap}}.camera-pip{z-index:2;right:var(--space-5);border-radius:var(--radius-md);object-fit:cover;background:#000;border:2px solid #fff3;width:min(240px,32vw);position:absolute;bottom:76px;box-shadow:0 8px 24px #0009}