*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:Inter,SF Pro,system-ui,-apple-system,sans-serif;background:#0a0a0f;color:#e4e4e7;overflow:hidden;-webkit-font-smoothing:antialiased}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:2rem;gap:1.5rem}#loading{position:fixed;inset:0;z-index:100;background:#0a0a0f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:2rem}#loading h2{font-size:1.5rem;font-weight:600;color:#e4e4e7}.loading-note{font-size:.85rem;color:#71717a;text-align:center;line-height:1.5}.progress-item{width:min(90vw,420px);display:flex;flex-direction:column;gap:.35rem}.progress-label-row{display:flex;align-items:center;gap:.5rem}.progress-label{font-size:.8rem;font-weight:500;color:#a1a1aa}.device-badge{font-size:.65rem;font-weight:600;letter-spacing:.04em;padding:.1em .45em;border-radius:3px;display:none}.device-badge[data-backend=gpu]{display:inline-block;background:#06b6d426;color:#06b6d4;border:1px solid rgba(6,182,212,.3)}.device-badge[data-backend=cpu]{display:inline-block;background:#71717a26;color:#a1a1aa;border:1px solid rgba(113,113,122,.3)}.progress-bar{height:6px;background:#27272a;border-radius:3px;overflow:hidden}.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#6366f1,#06b6d4);border-radius:3px;transition:width .3s ease}.progress-text{font-size:.75rem;color:#71717a;min-height:1.1em;word-break:break-all}#waveform{width:min(90vw,600px);height:160px;border-radius:16px}#transcript{width:min(90vw,600px);min-height:3rem;max-height:40vh;overflow-y:auto;padding:.75rem 1rem;font-size:1.05rem;line-height:1.6;text-align:center;color:#d4d4d8;scrollbar-width:thin;scrollbar-color:#3f3f46 transparent;opacity:0;transition:opacity .3s ease}[data-state=listening] #transcript,[data-state=processing] #transcript,[data-state=speaking] #transcript{opacity:1}#transcript .interim{color:#71717a;font-style:italic}#transcript .user-msg{color:#a1a1aa}.sentence-processing{animation:sentence-pulse 1s ease-in-out infinite alternate}@keyframes sentence-pulse{0%{color:#a855f773}to{color:#a855f7e6}}.sentence-playing{color:#06b6d4f2;text-shadow:0 0 14px rgba(6,182,212,.45);transition:color .2s ease,text-shadow .2s ease}.sentence-done{color:#06b6d438;transition:color .5s ease,text-shadow .5s ease}#transcript-current{color:#a855f7e0}#transcript-current:not(:empty):after{content:"▋";font-size:.75em;vertical-align:middle;opacity:.7;animation:blink .9s step-end infinite}@keyframes blink{0%,to{opacity:.7}50%{opacity:0}}#mic-btn{width:80px;height:80px;border-radius:50%;border:2px solid #3f3f46;background:#18181b;color:#a1a1aa;cursor:pointer;display:grid;place-items:center;transition:all .25s ease}#mic-btn:disabled{opacity:.3;cursor:not-allowed}#mic-btn svg{width:32px;height:32px}#mic-btn:hover:not(:disabled){border-color:#6366f1;color:#e4e4e7}#status{font-size:.9rem;color:#71717a;transition:color .3s}#device-info{font-size:.75rem;color:#52525b;display:flex;align-items:center;gap:.4rem}#device-info .badge{font-size:.65rem;font-weight:600;letter-spacing:.04em;padding:.1em .45em;border-radius:3px}#device-info .badge.gpu{background:#06b6d41f;color:#06b6d4;border:1px solid rgba(6,182,212,.25)}#device-info .badge.cpu{background:#71717a1f;color:#71717a;border:1px solid rgba(113,113,122,.25)}[data-state=idle] #mic-btn{border-color:#3f3f46;color:#a1a1aa}[data-state=listening] #mic-btn{border-color:#6366f1;color:#6366f1;box-shadow:0 0 #6366f166;animation:pulse-ring 2s ease-out infinite}[data-state=listening] #status{color:#6366f1}@keyframes pulse-ring{0%{box-shadow:0 0 #6366f180}70%{box-shadow:0 0 0 18px #6366f100}to{box-shadow:0 0 #6366f100}}[data-state=processing] #mic-btn{border-color:#a855f7;color:#a855f7;animation:spin-border 1.5s linear infinite}[data-state=processing] #status{color:#a855f7}@keyframes spin-border{0%{box-shadow:3px 0 #a855f7}25%{box-shadow:0 3px #a855f7}50%{box-shadow:-3px 0 #a855f7}75%{box-shadow:0 -3px #a855f7}to{box-shadow:3px 0 #a855f7}}[data-state=speaking] #mic-btn{border-color:#06b6d4;color:#06b6d4;box-shadow:0 0 20px #06b6d426}[data-state=speaking] #status{color:#06b6d4}[data-state=speaking] #transcript{color:#cffafe}