@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600&display=swap";:root{--bg: #0b1021;--bg-muted: #0f162e;--card: rgba(255, 255, 255, .04);--card-strong: rgba(255, 255, 255, .08);--border: rgba(255, 255, 255, .18);--text: #e7ecff;--text-muted: #b8c2e1;--accent: #7ad7f0;--accent-strong: #5ab5f5;--shadow: 0 25px 80px rgba(5, 8, 25, .45);--radius: 16px;--radius-sm: 10px;--max-width: 900px;--font-size-small: .95rem;--font-size-medium: 1.1rem;--font-size-large: 1.3rem;--font-size-content: var(--font-size-medium)}[data-font-size=small]{--font-size-content: var(--font-size-small)}[data-font-size=medium]{--font-size-content: var(--font-size-medium)}[data-font-size=large]{--font-size-content: var(--font-size-large)}[data-theme=light]{--bg: #f8f9fc;--bg-muted: #eef0f5;--card: rgba(0, 0, 0, .03);--card-strong: rgba(0, 0, 0, .06);--border: rgba(0, 0, 0, .12);--text: #1a1d29;--text-muted: #5a6178;--accent: #2d7dd2;--accent-strong: #1a5fa8;--shadow: 0 25px 80px rgba(0, 0, 0, .08)}[data-theme=light] body{background:linear-gradient(160deg,#f8f9fc,#eef2f7,#e8ecf4)}*{box-sizing:border-box}body{margin:0;font-family:Manrope,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:radial-gradient(160% 120% at 20% 20%,#13204a,#0c1229,#070b1a 70%),radial-gradient(80% 60% at 80% 0%,rgba(90,181,245,.25) 0%,transparent 50%),var(--bg);color:var(--text);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}::selection{background:#5ab5f540}.app{display:flex;flex-direction:column;min-height:100vh;max-width:var(--max-width);margin:0 auto;padding:0 20px}.app-header{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:16px}.header-left{display:flex;align-items:center;gap:16px}.header-right{display:flex;align-items:center;gap:12px}.app-title{margin:0;font-family:Space Grotesk,sans-serif;font-size:1.5rem;font-weight:600;color:var(--text)}.content-area{flex:1;overflow-y:auto;padding:24px 0}.transcript{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;font-size:var(--font-size-content);line-height:1.8}.chunk{margin-bottom:16px;animation:chunk-enter .3s ease-out forwards}.chunk:last-child{margin-bottom:0}.chunk.playing{background:#7ad7f01a;border-left:3px solid var(--accent);padding-left:16px;margin-left:-16px}@keyframes chunk-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.chunk{animation:none;opacity:1;transform:none}}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card-strong);color:var(--text);font-weight:600;font-size:.9rem;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease}.button:hover{transform:translateY(-1px);border-color:#7ad7f080;background:#ffffff14}.button:active{transform:translateY(0) scale(.98);transition-duration:60ms}.button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.button.primary{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#0b1021;border:none;box-shadow:0 12px 30px #5ab5f566}.button.primary:active{box-shadow:0 6px 15px #5ab5f54d}.button.ghost{background:transparent}.connection-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.connection-dot.connected{background:#4ade80}.connection-dot.connecting{background:#60a5fa;animation:pulse 1.5s ease-in-out infinite}.connection-dot.reconnecting{background:#fbbf24;animation:pulse 1s ease-in-out infinite}.connection-dot.disconnected{background:#f87171}@keyframes pulse{0%,to{box-shadow:0 0 0 4px #60a5fa4d;transform:scale(1)}50%{box-shadow:0 0 0 8px #60a5fa26;transform:scale(1.1)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:768px){.app{padding:0 16px}.app-header{padding:16px 0}.app-title{font-size:1.25rem}.header-right{flex-wrap:wrap}.transcript{padding:16px;border-radius:12px}.button{padding:10px 14px;min-height:44px}}@media(max-width:480px){.app-header{flex-direction:column;align-items:flex-start}.header-right{width:100%;justify-content:space-between}}@supports (padding: env(safe-area-inset-bottom)){.content-area{padding-bottom:calc(24px + env(safe-area-inset-bottom))}}