:root{--color-bg:#161826;--color-surface:#1d1f2c;--color-surface-raised:#232532;--color-text:#e9e9ed;--color-text-muted:#b2b6ca;--color-divider:#e9e9ed29;--color-divider-strong:#e9e9ed47;--color-accent:#9184d9;--color-accent-100:#f5f4ff;--color-accent-300:#d2cefd;--color-accent-400:#b5abfc;--color-accent-500:#968ae0;--color-accent-700:#5d5294;--color-accent-800:#423a6a;--color-accent-900:#2b2741;--color-danger:#d98a84;--color-danger-900:#3a2422;--color-neutral-400:#b2b6ca;--color-neutral-600:#75798c;--color-neutral-700:#595d6c;--color-neutral-800:#3f424d;--color-neutral-900:#292b31;--font-heading:-apple-system, "Segoe UI", Roboto, system-ui, sans-serif;--font-body:-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-pill:999px;--shadow-sm:0 0 0 1px var(--color-neutral-800);--shadow-md:0 0 0 1px var(--color-neutral-700), 0 6px 18px #0000008c;--shadow-lg:0 0 0 1px var(--color-neutral-600), 0 16px 40px #000000a6;--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-body);-webkit-font-smoothing:antialiased;margin:0;font-size:16px;font-weight:400;line-height:1.55}h1,h2,h3,h4{font-family:var(--font-heading);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{outline:none}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}::selection{background:color-mix(in srgb, var(--color-accent) 30%, transparent)}header{padding:var(--space-5) var(--space-4) var(--space-4);border-bottom:1px solid var(--color-divider)}header h1{font-size:20px}header p{margin:0;font-size:13px}main{flex-direction:column;min-height:100vh;display:flex}.home-page,.watch-page{background:var(--color-bg)}.broadcast-form,.preview-stage,.ended-section,.failed-section,.unsupported-section,.connecting-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 color-mix(in srgb, var(--color-danger) 45%, transparent);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,.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-heading);font-weight:var(--weight-heading);cursor:pointer;border:1px solid var(--color-accent);color:var(--color-accent-300);background:0 0;justify-content:center;align-items:center;width:100%;font-size:15px;transition:background-color .12s;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:color-mix(in srgb, var(--color-accent) 14%, transparent)}button[type=submit]:active,.confirm-button:active,.stop-button:active,.enable-audio-button:active{background:color-mix(in srgb, var(--color-accent) 24%, transparent)}button:disabled{opacity:.5;cursor:not-allowed}.cancel-button{border-color:var(--color-divider-strong);color:var(--color-text-muted)}.cancel-button:hover{background:color-mix(in srgb, var(--color-text) 8%, transparent)}.home-page header{text-align:left}@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-divider-strong);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]{margin-top:var(--space-2);background:color-mix(in srgb, var(--color-accent) 12%, transparent)}.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-lg);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}.preview-actions .form-group{gap:var(--space-1);flex-direction:column;display:flex}.preview-actions .form-group label{color:var(--color-text-muted);font-size:12px}#host-passphrase{min-height:var(--tap-min);padding:0 var(--space-3);color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-md);font-size:15px}#host-passphrase:hover{border-color:var(--color-divider-strong)}#host-passphrase: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,.cancel-button{width:auto;padding:0 var(--space-6);flex:none}}.live-badge{z-index:10;align-items:center;gap:var(--space-4);background:var(--color-surface-raised);border-bottom:1px solid var(--color-divider);padding:var(--space-3) var(--space-4);flex-wrap:wrap;display:flex;position:sticky;top:0}.live-indicator{align-items:center;gap:var(--space-2);flex:none;display:flex}.live-dot{background:var(--color-danger);width:10px;height:10px;box-shadow:0 0 0 0 color-mix(in srgb, var(--color-danger) 60%, transparent);border-radius:50%;animation:1.8s ease-out infinite live-pulse}@keyframes live-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--color-danger) 55%, transparent)}70%{box-shadow:0 0 0 8px color-mix(in srgb, var(--color-danger) 0%, transparent)}to{box-shadow:0 0 0 0 color-mix(in srgb, var(--color-danger) 0%, transparent)}}.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);text-overflow:ellipsis;white-space:nowrap;flex:auto;margin:0;font-size:13px;overflow:hidden}.stop-button{width:auto;min-height:var(--tap-min);padding:0 var(--space-4);border-color:var(--color-danger);color:var(--color-danger);flex:none}.stop-button:hover{background:color-mix(in srgb, var(--color-danger) 14%, transparent)}.stop-button:active{background:color-mix(in srgb, var(--color-danger) 24%, transparent)}.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-divider);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-heading);font-weight:var(--weight-heading);cursor:pointer;border:1px solid var(--color-accent);background:color-mix(in srgb, var(--color-accent) 16%, transparent);color:var(--color-accent-100);font-size:15px}.share-input-group button:hover{background:color-mix(in srgb, var(--color-accent) 26%, transparent)}@media (width>=720px){.share-input-group{flex-direction:row;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}}.ended-section,.unsupported-section{text-align:left}.ended-section button,.failed-section button{margin-top:var(--space-3);width:auto}.watch-page{flex-direction:column;display:flex}.connecting-section,.room-ended-section,.decryption-failed-section,.unsupported-notice{text-align:left;padding-top:var(--space-8)}.connecting-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;justify-content:center;align-items:center;width:100%;display:flex}.video-stage video{object-fit:contain;background:#000;width:100%;max-height:82vh;display:block}.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:color-mix(in srgb, var(--color-accent) 16%, transparent);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:color-mix(in srgb, var(--color-accent) 12%, transparent)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.connecting-section h2:after{opacity:1}}