*{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(135deg,#0a0a0a,#111,#0a0a0a,#0f0f0f,#0a0a0a);background-size:400% 400%;animation:gradientShift 20s ease infinite;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.hint{font-size:.8rem;opacity:.5;margin-top:-.5rem;text-align:center;animation:hintPulse 2s ease-in-out infinite}@keyframes hintPulse{0%,to{opacity:.4}50%{opacity:.7}}.hint.hidden{display:none}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;padding:2rem;max-width:600px;width:100%;min-height:100vh}.status{display:flex;align-items:center;gap:.75rem;font-size:.875rem;text-transform:uppercase;letter-spacing:.15em;transition:all .3s ease}.pulse{width:12px;height:12px;border-radius:50%;background:#333;transition:all .3s ease}.status.idle .pulse{background:#444}.status.idle{opacity:.5}.status.listening{opacity:1;color:#4ade80}.status.listening .pulse{background:#4ade80;box-shadow:0 0 20px #4ade80,0 0 40px #4ade8050;animation:listeningPulse 1.5s ease-in-out infinite}.status.thinking{opacity:1;color:#fbbf24}.status.thinking .pulse{background:#fbbf24;box-shadow:0 0 15px #fbbf24;animation:thinkingPulse .6s ease-in-out infinite}.status.speaking{opacity:1;color:#60a5fa}.status.speaking .pulse{background:#60a5fa;box-shadow:0 0 20px #60a5fa,0 0 40px #60a5fa50;animation:speakingPulse .4s ease-in-out infinite}@keyframes listeningPulse{0%,to{transform:scale(1);opacity:.7}50%{transform:scale(1.4);opacity:1}}@keyframes thinkingPulse{0%,to{transform:scale(1)}50%{transform:scale(1.2);opacity:.6}}@keyframes speakingPulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.waveform{display:flex;align-items:center;justify-content:center;gap:4px;height:40px;opacity:0;transition:opacity .3s ease}.waveform.active{opacity:1}.waveform .bar{width:4px;background:#fff;border-radius:2px;animation:wave 1s ease-in-out infinite}.waveform .bar:nth-child(1){animation-delay:0s}.waveform .bar:nth-child(2){animation-delay:.1s}.waveform .bar:nth-child(3){animation-delay:.2s}.waveform .bar:nth-child(4){animation-delay:.3s}.waveform .bar:nth-child(5){animation-delay:.4s}@keyframes wave{0%,to{height:8px}50%{height:32px}}.transcript{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;min-height:180px}.message-container{display:flex;flex-direction:column;gap:1.5rem}.user-text{font-size:1rem;opacity:.5;font-style:italic;transition:opacity .3s ease}.ai-text{font-size:1.4rem;font-weight:300;line-height:1.6;opacity:0;transform:translateY(10px);transition:all .4s ease}.ai-text:not(:empty){opacity:1;transform:translateY(0)}.user-text:empty,.ai-text:empty{display:none}.voice-btn{width:90px;height:90px;border-radius:50%;border:2px solid #333;background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;position:relative}.voice-btn:before{content:"";position:absolute;inset:-4px;border-radius:50%;background:transparent;transition:all .3s ease}.voice-btn:hover{border-color:#fff;background:#ffffff14;transform:scale(1.05)}.voice-btn.listening{border-color:#4ade80;background:#4ade801a;box-shadow:0 0 30px #4ade8040;animation:btnPulse 2s ease-in-out infinite}.voice-btn.speaking{border-color:#60a5fa;background:#60a5fa1a;box-shadow:0 0 30px #60a5fa40}.voice-btn.thinking{border-color:#fbbf24;background:#fbbf241a}@keyframes btnPulse{0%,to{box-shadow:0 0 20px #4ade8030}50%{box-shadow:0 0 40px #4ade8060}}.voice-btn:disabled{opacity:.3;cursor:not-allowed}.loading{position:fixed;inset:0;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;z-index:100}.loading.hidden{display:none}.progress-bar{width:250px;height:4px;background:#222;border-radius:2px;overflow:hidden}.progress{height:100%;background:linear-gradient(90deg,#4ade80,#60a5fa);width:0%;transition:width .3s ease}#progress-text{font-size:.75rem;opacity:.5}#loading-label{font-size:.9rem;opacity:.8}.loading-fact{font-size:.875rem;opacity:.7;max-width:400px;text-align:center;line-height:1.5;margin-top:.5rem;animation:factFade 3s ease-in-out infinite}@keyframes factFade{0%,to{opacity:.5}50%{opacity:.9}}