*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #000000;--text: #ffffff;--text-muted: rgba(255, 255, 255, .45);--text-faint: rgba(255, 255, 255, .5);--text-subtle: rgba(255, 255, 255, .6);--text-ghost: rgba(255, 255, 255, .3);--text-dim: rgba(255, 255, 255, .2);--bar-bg: rgba(0, 0, 0, .85);--bar-border: rgba(255, 255, 255, .08);--debug-bg: rgba(0, 0, 0, .92);--debug-border: rgba(255, 255, 255, .1)}@media(prefers-color-scheme:light){:root{--bg: #ffffff;--text: #111111;--text-muted: rgba(0, 0, 0, .4);--text-faint: rgba(0, 0, 0, .45);--text-subtle: rgba(0, 0, 0, .55);--text-ghost: rgba(0, 0, 0, .25);--text-dim: rgba(0, 0, 0, .15);--bar-bg: rgba(255, 255, 255, .85);--bar-border: rgba(0, 0, 0, .08);--debug-bg: rgba(255, 255, 255, .95);--debug-border: rgba(0, 0, 0, .1)}}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{display:flex;flex-direction:column}.caption-feed{flex:1;overflow-y:auto;padding:24px 24px 120px;display:flex;flex-direction:column;gap:20px;scroll-behavior:smooth}.caption-spacer{flex-shrink:0;height:50vh}.caption-block{font-size:22px;line-height:1.6;color:var(--text-muted);font-weight:300;transition:color .3s ease,font-weight .3s ease;margin:0}.caption-block.active{color:var(--text);font-weight:700}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:60vh}.empty-icon{font-size:48px}.empty-text{font-size:18px;color:var(--text-faint);text-align:center}.empty-pulse{width:40px;height:4px;background:var(--text-dim);border-radius:2px;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.3}50%{opacity:1}}@media(min-width:768px){.caption-feed{padding:48px 64px 120px}.caption-block{font-size:28px}}.bottom-bar{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:var(--bar-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--bar-border);z-index:100}.bottom-left{display:flex;align-items:center;gap:12px}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-dot.connected{background:#22c55e}.status-dot.connecting,.status-dot.waiting{background:#f59e0b;animation:dot-pulse 1.5s ease-in-out infinite}.status-dot.disconnected,.status-dot.error{background:#ef4444}.status-dot.ended{background:#6b7280}@keyframes dot-pulse{0%,to{opacity:1}50%{opacity:.3}}.bottom-info{display:flex;flex-direction:column;gap:2px}.bottom-label{font-size:14px;font-weight:600;color:var(--text)}.bottom-duration{font-size:12px;color:var(--text-faint)}.audio-toggle{width:40px;height:40px;border-radius:50%;border:none;background:transparent;color:var(--text-subtle);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s;padding:0}.audio-toggle:hover{color:var(--text)}.debug-panel{position:fixed;bottom:73px;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--debug-bg);border-top:1px solid var(--debug-border);padding:8px 16px;font-family:SF Mono,Fira Code,Consolas,monospace;font-size:11px;color:var(--text-faint);z-index:99}.debug-header{color:var(--text-ghost);margin-bottom:4px;font-size:10px;text-transform:uppercase;letter-spacing:.5px}.debug-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.6}