*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;color:#333}.container{max-width:800px;margin:0 auto;padding:2rem;min-height:100vh;display:flex;flex-direction:column}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.nav-buttons{display:flex;gap:.5rem}.nav-btn{padding:.5rem 1rem;border:2px solid rgba(255,255,255,.3);border-radius:.5rem;background:#ffffff1a;color:#fff;text-decoration:none;font-weight:500;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.nav-btn:hover{background:#fff3;border-color:#ffffff80}.nav-btn.active{background:#ffffff40;border-color:#ffffff80}h1{color:#fff;font-size:2.5rem;font-weight:300;margin:0}.help-btn{background:#fff3;color:#fff;border:none;padding:.75rem 1rem;border-radius:25px;font-size:.9rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.help-btn:hover{background:#ffffff4d;transform:translateY(-1px)}.help-btn.active{background:#fff6}.instructions-panel{background:#fffffff2;border-radius:15px;padding:1.5rem;margin-bottom:2rem;box-shadow:0 8px 25px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;overflow:hidden}.instructions-panel.hidden{max-height:0;padding:0 1.5rem;margin-bottom:0;opacity:0}.instructions-panel:not(.hidden){max-height:800px;opacity:1}.instructions-content h3{margin-top:0;margin-bottom:1.5rem;color:#2c3e50;font-size:1.5rem;text-align:center}.instruction-section{margin-bottom:1.5rem}.instruction-section h4{margin-bottom:.75rem;color:#34495e;font-size:1.1rem;border-bottom:2px solid #e3f2fd;padding-bottom:.25rem}.instruction-section ol,.instruction-section ul{margin:0;padding-left:1.5rem;color:#555}.instruction-section li{margin-bottom:.5rem;line-height:1.4}.instruction-section p{margin:.5rem 0;color:#555;line-height:1.5}.mode-explanation{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}.mode{background:#f8f9fa;padding:1rem;border-radius:10px;border-left:4px solid #667eea}.mode strong{display:block;margin-bottom:.5rem;color:#2c3e50}.mode p{margin:0;font-size:.9rem;color:#666}@media (max-width: 768px){.header{flex-direction:column;gap:1rem;text-align:center}.mode-explanation{grid-template-columns:1fr}.instructions-panel{padding:1rem}h1{font-size:2rem}}.chat-container{flex:1;background:#fff;border-radius:20px;padding:1.5rem;margin-bottom:2rem;box-shadow:0 10px 30px #0000001a;overflow:hidden}.conversation{max-height:400px;overflow-y:auto;padding-right:10px}.message{margin-bottom:1rem;padding:1rem;border-radius:15px;animation:slideIn .3s ease-out}.message.user{background:#f0f2f5;margin-left:2rem}.message.assistant{background:#e3f2fd;margin-right:2rem}.message.system{background:#f5f5f5;font-style:italic;text-align:center}.message.real-time{background:#e8f5e8;border-left:4px solid #4caf50;opacity:.8;animation:pulse 2s infinite}.message .label{font-weight:700;display:block;margin-bottom:.5rem;font-size:.9rem;color:#666}.message .text{line-height:1.5}.controls{display:flex;flex-direction:column;align-items:center;gap:1rem;justify-content:center;margin-bottom:2rem}.control-buttons{display:flex;gap:1rem;align-items:center}.record-btn{background:#ff4757;color:#fff;border:none;padding:1rem 2rem;border-radius:50px;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .3s ease;box-shadow:0 4px 15px #ff47574d}.record-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff475766}.record-btn.recording{background:#ff3742;animation:pulse 1.5s infinite}.record-btn.processing{background:#ffa502}.listen-btn{background:#2ed573;color:#fff;border:none;padding:1rem 2rem;border-radius:50px;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .3s ease;box-shadow:0 4px 15px #2ed5734d}.listen-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2ed57366}.listen-btn.active{background:#20bf6b;animation:pulse 1.5s infinite}.listen-btn.disabled{background:#95a5a6;cursor:not-allowed}.voice-indicator{width:200px;height:8px;background:#fff3;border-radius:4px;overflow:hidden;margin-top:.5rem}.voice-level{height:100%;background:linear-gradient(90deg,#2ed573,#ffa502,#ff4757);width:0%;transition:width .1s ease;border-radius:4px}.voice-indicator.listening{background:#2ed57333}.status{padding:.5rem 1rem;background:#fff3;border-radius:20px;color:#fff;font-size:.9rem}.settings{display:flex;flex-direction:column;gap:1rem;align-items:center}.settings-row{display:flex;gap:1rem;align-items:center;justify-content:center}.settings-row.instructions-row{flex-direction:column;align-items:stretch;gap:.75rem}.instructions-input-container{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:600px;margin:0 auto}.settings textarea{padding:.75rem;border:1px solid #ddd;border-radius:10px;font-size:1rem;background:#ffffffe6;resize:vertical;min-height:80px;font-family:inherit}.settings textarea:focus{outline:none;border-color:#5352ed;box-shadow:0 0 0 2px #5352ed33}.preset-buttons{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.preset-btn{padding:.5rem 1rem;background:#fffc;color:#5352ed;border:1px solid #5352ed;border-radius:20px;cursor:pointer;font-size:.85rem;transition:all .3s ease}.preset-btn:hover{background:#5352ed;color:#fff;transform:translateY(-1px)}.preset-btn.active{background:#5352ed;color:#fff;box-shadow:0 2px 8px #5352ed4d}.settings input[type=text]{padding:.75rem 1rem;border:1px solid #ddd;border-radius:10px;font-size:1rem;width:300px;background:#ffffffe6}.settings input[type=range]{width:150px;height:6px;border-radius:3px;background:#ffffff4d;outline:none;-webkit-appearance:none}.settings input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#5352ed;cursor:pointer;box-shadow:0 2px 4px #0003}.settings input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#5352ed;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.settings span{color:#fff;font-weight:500;font-size:.9rem;min-width:40px;text-align:center}.settings select{padding:.75rem 1rem;border:1px solid #ddd;border-radius:10px;font-size:1rem;background:#ffffffe6;cursor:pointer;min-width:200px}.settings label{color:#fff;font-weight:500;font-size:1rem}.settings button{padding:.75rem 1.5rem;background:#5352ed;color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:1rem;transition:background .3s ease}.settings button:hover{background:#4c4ae8}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.conversation::-webkit-scrollbar{width:6px}.conversation::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.conversation::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:10px}.conversation::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.typing-indicator{display:inline-block;animation:blink 1.4s infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.connect-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:1rem 2rem;border-radius:25px;font-size:1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .3s ease;box-shadow:0 4px 15px #10b9814d}.connect-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #10b98166}.connect-btn.connected{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 15px #ef44444d}.connect-btn.connected:hover{box-shadow:0 6px 20px #ef444466}.talk-btn{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;padding:1rem 2rem;border-radius:25px;font-size:1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .3s ease;box-shadow:0 4px 15px #3b82f64d}.talk-btn:disabled{background:#9ca3af;cursor:not-allowed;box-shadow:none}.talk-btn:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 20px #3b82f666}.talk-btn.talking{background:linear-gradient(135deg,#f59e0b,#d97706);animation:pulse 1.5s infinite}.vad-btn{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border:none;padding:1rem 2rem;border-radius:25px;font-size:1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .3s ease;box-shadow:0 4px 15px #8b5cf64d}.vad-btn:disabled{background:#9ca3af;cursor:not-allowed;box-shadow:none}.vad-btn:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 20px #8b5cf666}.vad-btn.active{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 15px #10b9814d}.realtime-indicators{display:flex;gap:2rem;align-items:center;margin-top:1rem}.connection-status{display:flex;align-items:center;gap:.5rem;color:#fff;font-size:.9rem}.indicator{width:12px;height:12px;border-radius:50%;background:#ef4444;transition:all .3s ease}.indicator.connected{background:#10b981;animation:pulse 2s infinite}.indicator.disconnected{background:#6b7280}.audio-level{display:flex;align-items:center;gap:.5rem;color:#fff;font-size:.9rem}.level-bar{width:100px;height:4px;background:#fff3;border-radius:2px;position:relative;overflow:hidden}.level-bar:after{content:"";position:absolute;top:0;left:0;height:100%;width:0%;background:linear-gradient(90deg,#10b981,#3b82f6,#f59e0b,#ef4444);border-radius:2px;transition:width .1s ease}