*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);min-height:100vh;color:#fff}.app{min-height:100vh;display:flex;flex-direction:column;padding:20px;max-width:600px;margin:0 auto}header{text-align:center;padding:30px 0}header h1{font-size:2rem;margin-bottom:10px;background:linear-gradient(90deg,#00d9ff,#0f8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:#8892b0;font-size:.95rem}main{flex:1;display:flex;flex-direction:column;gap:30px}.voice-section{display:flex;flex-direction:column;align-items:center;gap:10px}.voice-btn{width:150px;height:150px;border-radius:50%;border:3px solid #00d9ff;background:#00d9ff1a;color:#00d9ff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.voice-btn:hover:not(:disabled){background:#00d9ff33;transform:scale(1.05);box-shadow:0 0 30px #00d9ff4d}.voice-btn:disabled{opacity:.6;cursor:not-allowed}.voice-btn.listening{animation:pulse 1.5s infinite;border-color:#0f8;color:#0f8;background:#00ff8826}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 0 20px #00ff884d}50%{transform:scale(1.05);box-shadow:0 0 40px #00ff8880}}.mic-icon{font-size:2.5rem}.warning{color:#ff6b6b;font-size:.85rem;text-align:center}.safari-helper{display:flex;flex-direction:column;align-items:center;gap:12px;padding:15px;background:#ff6b6b1a;border-radius:12px;border:1px solid rgba(255,107,107,.3)}.safari-buttons{display:flex;gap:10px}.safari-btn{padding:12px 20px;border-radius:8px;border:none;background:#007aff;color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease}.safari-btn:hover{background:#0056b3}.safari-btn.secondary{background:transparent;border:2px solid #007aff;color:#007aff}.safari-btn.secondary:hover{background:#007aff1a}.safari-hint{color:#8892b0;font-size:.8rem;text-align:center;max-width:280px}.listening-hint{color:#0f8;font-size:.9rem;text-align:center;animation:fadeInOut 2s infinite}@keyframes fadeInOut{0%,to{opacity:.5}50%{opacity:1}}.buttons-section{text-align:center}.buttons-section h2{font-size:1rem;color:#8892b0;margin-bottom:15px;font-weight:400}.command-buttons{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}.cmd-btn{padding:15px 35px;border-radius:12px;border:2px solid #4a5568;background:#4a556833;color:#fff;font-size:1.1rem;font-weight:500;cursor:pointer;transition:all .2s ease}.cmd-btn:hover{background:#00d9ff26;border-color:#00d9ff;color:#00d9ff;transform:translateY(-2px)}.cmd-btn:active{transform:translateY(0)}.response-section{background:#ffffff0d;border-radius:16px;padding:25px;min-height:120px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px}.transcript{color:#8892b0;font-size:.9rem;font-style:italic}.response{text-align:center}.response p{font-size:1.5rem;font-weight:600;color:#0f8;line-height:1.4}footer{text-align:center;padding:20px 0;color:#4a5568;font-size:.85rem}@media (max-width: 480px){header h1{font-size:1.6rem}.voice-btn{width:130px;height:130px}.cmd-btn{padding:12px 25px;font-size:1rem}.response p{font-size:1.3rem}}