a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}.card{padding:2em}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}body{font-family:Segoe UI,system-ui,sans-serif;line-height:1.6;padding:20px;max-width:800px;margin:20px auto;background-color:#121212;color:#e0e0e0;display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 40px);background:linear-gradient(135deg,#121212,#1a1a1a)}.container{background:#1e1e1e;padding:25px 35px;border-radius:16px;box-shadow:0 8px 32px #00000080;display:flex;flex-direction:column;align-items:center;width:100%;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .3s ease,box-shadow .3s ease}.container:hover{transform:translateY(-5px);box-shadow:0 12px 40px #0009}h1,h2{text-align:center;color:#eee;font-weight:500;position:relative;overflow:hidden}h1{margin-bottom:25px;background:linear-gradient(90deg,#03a9f4,#00bcd4,#03a9f4);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 3s linear infinite}h2{font-size:1.1em;margin-bottom:8px;color:#bbb}.section{margin-bottom:25px;padding-bottom:20px;border-bottom:1px solid #333;width:100%;transition:all .3s ease}.section:hover{border-bottom-color:#03a9f4}.section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}textarea{width:100%;box-sizing:border-box;min-height:100px;margin-top:5px;padding:12px;border:1px solid #444;border-radius:8px;font-size:1em;background-color:#282828;color:#e0e0e0;resize:vertical;transition:border-color .3s ease,box-shadow .3s ease}textarea:focus{border-color:#03a9f4;box-shadow:0 0 0 2px #03a9f433;outline:none}audio{display:block;margin:15px auto;max-width:100%;border-radius:25px;box-shadow:0 4px 12px #0000004d;transition:transform .2s ease}audio:hover{transform:scale(1.02)}#ttsStatus{text-align:center;margin:10px 0 0;min-height:1.2em;color:#999;font-size:.9em}.button{background:linear-gradient(135deg,#03a9f4,#0288d1);color:#fff;border:none;padding:12px 28px;border-radius:8px;font-size:1em;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;box-shadow:0 4px 15px #03a9f44d}.button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:.5s}.button:hover{transform:translateY(-3px);box-shadow:0 7px 20px #03a9f466}.button:hover:before{left:100%}.button:active{background:#0277bd;transform:translateY(1px);box-shadow:0 2px 10px #03a9f44d}.status-visualizer{width:180px;height:180px;border-radius:50%;background-color:#2a2a2a;display:flex;justify-content:center;align-items:center;margin-bottom:20px;position:relative;overflow:hidden;border:4px solid #444;transition:all .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 20px #00000080 inset,0 5px 15px #0000004d}.status-visualizer:before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#03a9f40d,#0064961a 60%,#0a0a1433);opacity:.7;transition:all .5s ease;transform:scale(1);z-index:1}.status-visualizer span{position:relative;z-index:2;font-size:.9em;color:#ddd;background:#0006;padding:6px 12px;border-radius:12px;box-shadow:0 2px 10px #0000004d;transition:all .3s ease;transform:translateY(0)}.status-visualizer:hover span{transform:translateY(-3px);background:#03a9f433}.status-text{margin-top:-5px;margin-bottom:20px;font-weight:500;color:#aaa;min-height:1.5em;text-align:center;transition:all .4s ease;padding:6px 14px;border-radius:20px;background:#0003}.status-visualizer.listening,.status-visualizer.speaking{border-color:#03a9f4;box-shadow:0 0 25px #03a9f4b3,0 0 10px #03a9f44d inset;transform:scale(1.03)}.status-visualizer.listening:before{animation:ripple-effect 2.5s infinite ease-out,subtle-pulse 2.5s infinite ease-in-out;opacity:.9}.status-visualizer.speaking:before{animation:wave-effect 1.2s infinite ease-in-out,active-pulse 1.2s infinite ease-in-out;opacity:1}.status-text.listening,.status-text.speaking{color:#03a9f4;background:#03a9f41a;box-shadow:0 0 10px #03a9f433}.status-visualizer.processing{border-color:#ab47bc;box-shadow:0 0 25px #ab47bc99,0 0 10px #ab47bc33 inset}.status-visualizer.processing:before{animation:spin 1.8s linear infinite,pulse-glow 2s infinite alternate;opacity:.8}.status-text.processing{color:#ab47bc;background:#ab47bc1a;box-shadow:0 0 10px #ab47bc33}.status-visualizer.ai-speaking{border-color:#4caf50;box-shadow:0 0 25px #4caf5099,0 0 10px #4caf5033 inset;transform:scale(1.03)}.status-visualizer.ai-speaking:before{animation:energy-waves 2s infinite alternate,gentle-glow 2s infinite alternate;opacity:.9}.status-text.ai-speaking{color:#4caf50;background:#4caf501a;box-shadow:0 0 10px #4caf5033}.status-visualizer.error{border-color:#f44336;box-shadow:0 0 25px #f44336b3,0 0 10px #f443364d inset}.status-text.error{color:#f44336;background:#f443361a;box-shadow:0 0 10px #f4433633}@keyframes subtle-pulse{0%,to{transform:scale(1);opacity:.7}50%{transform:scale(1.03);opacity:.9}}@keyframes active-pulse{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.05);opacity:1}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gentle-glow{0%{opacity:.7;box-shadow:0 0 5px #4caf504d inset}to{opacity:.9;box-shadow:0 0 20px #4caf5080 inset}}@keyframes ripple-effect{0%{box-shadow:0 0 #03a9f466}70%{box-shadow:0 0 0 20px #03a9f400}to{box-shadow:0 0 #03a9f400}}@keyframes wave-effect{0%{transform:scale(.9);opacity:.8}25%{transform:scale(1.05);opacity:1}50%{transform:scale(.95);opacity:.9}75%{transform:scale(1.02);opacity:1}to{transform:scale(.9);opacity:.8}}@keyframes pulse-glow{0%,to{box-shadow:0 0 10px #ab47bc4d inset}50%{box-shadow:0 0 20px #ab47bc99 inset}}@keyframes energy-waves{0%{transform:scale(.95) rotate(0)}to{transform:scale(1.05) rotate(5deg)}}@keyframes shine{to{background-position:200% center}}#recordedAudioPlayback{display:none}@media (max-width: 600px){.status-visualizer{width:150px;height:150px}.button{padding:10px 20px}}