@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-dark: #030014;--bg-card: rgba(255, 255, 255, .03);--border-light: rgba(255, 255, 255, .08);--accent-purple: #8B5CF6;--accent-blue: #3B82F6;--accent-cyan: #06B6D4;--accent-pink: #EC4899;--green: #22C55E;--yellow: #EAB308;--red: #EF4444;--text-primary: #FAFAFA;--text-secondary: rgba(255, 255, 255, .6);--text-muted: rgba(255, 255, 255, .4)}html,body{height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-dark);color:var(--text-primary);overflow:hidden;-webkit-user-select:none;user-select:none}.bg-gradient{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(120,119,198,.3),transparent),radial-gradient(ellipse 60% 40% at 100% 100%,rgba(139,92,246,.15),transparent),radial-gradient(ellipse 60% 40% at 0% 100%,rgba(6,182,212,.15),transparent);pointer-events:none}.bg-orbs{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;animation:float 20s ease-in-out infinite}.orb-1{width:400px;height:400px;background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));top:-10%;right:-5%;animation-delay:0s}.orb-2{width:300px;height:300px;background:linear-gradient(135deg,var(--accent-cyan),var(--accent-blue));bottom:-5%;left:-5%;animation-delay:-7s}.orb-3{width:250px;height:250px;background:linear-gradient(135deg,var(--accent-pink),var(--accent-purple));top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-14s}@keyframes float{0%,to{transform:translate(0) scale(1)}25%{transform:translate(30px,-30px) scale(1.05)}50%{transform:translate(-20px,20px) scale(.95)}75%{transform:translate(20px,30px) scale(1.02)}}.main{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:40px 20px;gap:32px}.header{text-align:center}.logo{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}.logo-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent-purple),var(--accent-cyan));border-radius:14px;color:#fff}.logo-icon svg{width:28px;height:28px}.logo h1{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#fff,#ffffffb3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.subtitle{font-size:1rem;color:var(--text-secondary);font-weight:500}.status-card{background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-light);border-radius:24px;padding:32px 48px;display:flex;flex-direction:column;align-items:center;gap:24px;min-width:360px}.led-row{display:flex;gap:32px}.led-item{display:flex;flex-direction:column;align-items:center;gap:8px}.led-item span{font-size:.75rem;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.05em}.led{width:16px;height:16px;border-radius:50%;background:#ffffff1a;transition:all .3s ease}.led-green.active{background:var(--green);box-shadow:0 0 20px var(--green),0 0 40px #22c55e66;animation:pulse 1.5s ease-in-out infinite}.led-yellow.active{background:var(--yellow);box-shadow:0 0 20px var(--yellow),0 0 40px #eab30866}.led-yellow.active.blinking{animation:blink .6s ease-in-out infinite}.led-red.active{background:var(--red);box-shadow:0 0 20px var(--red),0 0 40px #ef444466}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.8}}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.visualizer{height:60px;display:flex;align-items:center;justify-content:center}.wave-container{display:flex;gap:4px;align-items:center;height:40px}.wave{width:4px;height:8px;background:linear-gradient(180deg,var(--accent-purple),var(--accent-cyan));border-radius:4px;animation:wave 1.2s ease-in-out infinite}.wave:nth-child(1){animation-delay:0s}.wave:nth-child(2){animation-delay:.15s}.wave:nth-child(3){animation-delay:.3s}@keyframes wave{0%,to{height:8px}50%{height:32px}}.wave-container .wave{animation-play-state:paused}body.listening .wave-container .wave{animation-play-state:running}.status{font-size:.95rem;color:var(--text-secondary);text-align:center}.status kbd{display:inline-block;padding:4px 10px;background:#ffffff1a;border:1px solid var(--border-light);border-radius:6px;font-family:inherit;font-size:.85rem;font-weight:600;color:var(--text-primary);margin:0 4px}.talk-btn{display:none;flex-direction:column;align-items:center;gap:12px;background:transparent;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative}.talk-btn-glow{position:absolute;width:140px;height:140px;background:radial-gradient(circle,rgba(139,92,246,.3),transparent 70%);border-radius:50%;opacity:0;transition:opacity .3s ease}.talk-btn:active .talk-btn-glow,.talk-btn.active .talk-btn-glow{opacity:1}.talk-btn-inner{width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));display:flex;align-items:center;justify-content:center;color:#fff;transition:all .3s ease;box-shadow:0 8px 32px #8b5cf64d}.talk-btn-inner svg{width:36px;height:36px}.talk-btn:active .talk-btn-inner,.talk-btn.active .talk-btn-inner{transform:scale(.95);background:linear-gradient(135deg,var(--green),#16a34a);box-shadow:0 8px 32px #22c55e66}.talk-btn-label{font-size:.85rem;color:var(--text-secondary);font-weight:500}.connection-badge{position:fixed;top:20px;right:20px;display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-light);border-radius:100px;font-size:.8rem;color:var(--text-secondary);z-index:10}.connection-dot{width:8px;height:8px;border-radius:50%;background:var(--yellow);animation:blink 1s ease-in-out infinite}.connection-badge.connected .connection-dot{background:var(--green);animation:none}.connection-badge.error .connection-dot{background:var(--red);animation:none}.export-btn{position:fixed;bottom:20px;right:20px;padding:8px 16px;background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-light);border-radius:8px;color:var(--text-muted);font-size:.8rem;font-family:inherit;cursor:pointer;transition:all .2s ease;z-index:10}.export-btn:hover{color:var(--text-primary);border-color:#ffffff26}.reset-btn{position:fixed;top:20px;left:20px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#ffffff1a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);border-radius:50%;color:var(--text-secondary);cursor:pointer;transition:all .2s ease;z-index:10;box-shadow:0 4px 12px #0003}.reset-btn svg{width:20px;height:20px}.reset-btn:hover{color:#fff;background:#ffffff26;border-color:var(--accent-purple);box-shadow:0 0 15px #8b5cf64d;transform:rotate(90deg)}.modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100}.modal-content{background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-light);border-radius:20px;padding:32px 40px;text-align:center;max-width:400px}.modal-content p{font-size:1rem;color:var(--text-primary);margin-bottom:24px;line-height:1.5}.modal-content button{padding:12px 28px;background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));border:none;border-radius:10px;color:#fff;font-size:.95rem;font-weight:600;font-family:inherit;cursor:pointer;transition:all .2s ease}.modal-content button:hover{transform:scale(1.02);box-shadow:0 8px 24px #8b5cf666}.input-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.input-group input[type=text]{flex-grow:1;min-width:150px;margin-bottom:10px}.input-group .add-input-btn{padding:8px 12px;background:var(--accent-purple);border:none;border-radius:8px;color:#fff;font-size:1.2rem;cursor:pointer;transition:background-color .2s ease;height:40px;width:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.input-group .add-input-btn:hover{background:var(--accent-blue)}@media (max-width: 768px){.status-card{min-width:auto;width:calc(100% - 40px);padding:24px}.logo h1{font-size:2rem}.status kbd{display:none}.status:after{content:"Hold to talk"}.status{font-size:0}.talk-btn{display:flex}.orb-1,.orb-2,.orb-3{opacity:.3}}@media (pointer: coarse){.talk-btn{display:flex}.status kbd{display:none}.status:after{content:"Hold to talk"}.status{font-size:0}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}[hidden]{display:none!important}.onboarding-content{max-width:500px;width:90%;padding:40px;max-height:90vh;overflow-y:auto}.onboarding-content h2{font-size:1.8rem;margin-bottom:8px;background:linear-gradient(135deg,white,var(--accent-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.onboarding-content p{color:var(--text-secondary);margin-bottom:30px}.logo-icon.large{width:64px;height:64px;margin:0 auto 20px;font-size:1.5rem}.logo-icon.large svg{width:36px;height:36px}.form-group{margin-bottom:20px;text-align:left}.form-group label{display:block;font-size:.85rem;color:var(--text-secondary);margin-bottom:8px;padding-left:4px}.form-group input,.form-group select{width:100%;padding:12px 16px;background:#ffffff0d;border:1px solid var(--border-light);border-radius:12px;color:#fff;font-size:1rem;font-family:inherit;transition:all .2s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-group select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px}.form-group select option{background-color:var(--bg-dark);color:#fff}.form-group input:focus,.form-group select:focus{outline:none;background:#ffffff1a;border-color:var(--accent-purple);box-shadow:0 0 0 3px #8b5cf633}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.start-btn{width:100%;padding:14px;margin-top:10px;background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));border:none;border-radius:12px;color:#fff;font-size:1.1rem;font-weight:600;cursor:pointer;box-shadow:0 4px 15px #8b5cf666;transition:all .2s ease}.start-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #8b5cf680}.onboarding-content::-webkit-scrollbar{width:6px}.onboarding-content::-webkit-scrollbar-track{background:transparent}.onboarding-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}@media (max-width: 480px){.onboarding-content{padding:30px 20px}.form-grid{grid-template-columns:1fr;gap:0}}.refresh-loader{position:fixed;top:-60px;left:0;width:100%;height:60px;display:flex;align-items:center;justify-content:center;z-index:1000;color:var(--accent-cyan);opacity:0;transition:opacity .2s ease;pointer-events:none}.refresh-loader svg{width:28px;height:28px;animation:spin 1s linear infinite paused}.refresh-loader.visible{opacity:1}.refresh-loader.refreshing svg{animation-play-state:running}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.feedback-content{max-width:450px!important;position:relative}.modal-close{position:absolute;top:16px;right:16px;background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:8px;border-radius:50%;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.modal-close:hover{color:#fff;background:#ffffff1a}.modal-close svg{width:20px;height:20px}.logo-icon.small{width:40px;height:40px;margin:0 auto 16px}.logo-icon.small svg{width:20px;height:20px}.feedback-content textarea{width:100%;padding:12px 16px;background:#ffffff0d;border:1px solid var(--border-light);border-radius:12px;color:#fff;font-size:1rem;font-family:inherit;transition:all .2s ease;resize:none}.feedback-content textarea:focus{outline:none;background:#ffffff1a;border-color:var(--accent-purple);box-shadow:0 0 0 3px #8b5cf633}.success-icon{width:64px;height:64px;background:#22c55e1a;color:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}.success-icon svg{width:32px;height:32px}