.app{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2)}.container{background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;overflow:hidden;max-width:600px;width:90%}.header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:30px;text-align:center}.header h1{font-size:2rem;margin-bottom:10px}.header p{opacity:.9;font-size:1.1rem}.voice-container{padding:40px 20px;min-height:500px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px}.voice-visualizer{display:flex;justify-content:center;align-items:center}.voice-circle{width:200px;height:200px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:4rem;background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 10px 30px #667eea4d;position:relative;transition:all .3s ease}.voice-circle.listening{background:linear-gradient(135deg,#4caf50,#45a049);animation:pulse-listening 1.5s ease-in-out infinite}.voice-circle.speaking{background:linear-gradient(135deg,#2196f3,#1976d2);animation:pulse-speaking .8s ease-in-out infinite}.voice-circle.processing{background:linear-gradient(135deg,#ff9800,#f57c00);animation:spin 2s linear infinite}@keyframes pulse-listening{0%,to{transform:scale(1);box-shadow:0 10px 30px #4caf504d}50%{transform:scale(1.05);box-shadow:0 15px 40px #4caf5099}}@keyframes pulse-speaking{0%,to{transform:scale(1);box-shadow:0 10px 30px #2196f34d}50%{transform:scale(1.08);box-shadow:0 15px 40px #2196f399}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pulse{position:absolute;width:220px;height:220px;border-radius:50%;border:3px solid rgba(76,175,80,.6);animation:pulse-ring 1.5s ease-out infinite}@keyframes pulse-ring{0%{transform:scale(.9);opacity:1}to{transform:scale(1.3);opacity:0}}.status-display{text-align:center;min-height:60px;display:flex;align-items:center;justify-content:center}.status-display p{font-size:1.2rem;color:#333;margin:0;font-weight:500}.controls{display:flex;justify-content:center;gap:10px}.start-button,.stop-button{border:none;padding:20px 40px;font-size:1.2rem;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003;font-weight:600}.start-button{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}.start-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #4caf5066}.start-button:active:not(:disabled){transform:translateY(0)}.start-button:disabled{opacity:.6;cursor:not-allowed}.stop-button{background:linear-gradient(135deg,#f44336,#d32f2f);color:#fff}.stop-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #f4433666}.stop-button:active{transform:translateY(0)}.footer{background:#f8f9fa;padding:20px;text-align:center;border-top:1px solid #e0e0e0}.footer p{margin:5px 0;color:#666;font-size:.9rem}.tech-info{font-size:.8rem;color:#999;margin-top:10px}@media (max-width: 768px){.header h1{font-size:1.5rem}.header p{font-size:.95rem}.voice-circle{width:150px;height:150px;font-size:3rem}.pulse{width:170px;height:170px}.status-display p{font-size:1rem;padding:0 20px}.start-button,.stop-button{padding:15px 30px;font-size:1rem}.voice-container{padding:30px 20px;min-height:400px}}@media (max-width: 480px){.voice-circle{width:120px;height:120px;font-size:2.5rem}.pulse{width:140px;height:140px}.start-button,.stop-button{padding:12px 25px;font-size:.95rem}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;align-items:center;justify-content:center}#root{width:100%;max-width:800px;margin:0 auto;padding:20px}