*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#fff;--bg-secondary:#f0f4f8;--text-primary:#1e293b;--text-secondary:#475569;--accent-blue:#3b82f6;--accent-purple:#8b5cf6;--accent-purple-glow:#8b5cf633;--accent-teal:#14b8a6;--accent-teal-glow:#14b8a633;--danger:#ef4444;--success:#10b981;--warning:#f59e0b;--glass-bg:#ffffffd9;--glass-border:#00000014;--font-main:"Outfit", sans-serif;--transition-smooth:all .3s cubic-bezier(.4, 0, .2, 1)}body{font-family:var(--font-main);background-color:var(--bg-primary);color:var(--text-primary);background-image:radial-gradient(at 0 0,#3b82f61a 0,#0000 50%),radial-gradient(at 100% 100%,#8b5cf61a 0,#0000 50%);min-height:100vh;margin:0;overflow-x:hidden}.page-view{z-index:1;width:100vw;height:100vh;transition:opacity .5s ease-in-out;display:flex;position:absolute;top:0;left:0}.page-view.hidden{opacity:0;pointer-events:none;z-index:-1}.page-view.active{opacity:1;pointer-events:auto;z-index:10}.back-btn{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-primary);cursor:pointer;z-index:20;transition:var(--transition-smooth);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:50px;padding:.75rem 1.5rem;font-family:inherit;font-size:1rem;font-weight:600;position:absolute;top:2rem;left:2rem;box-shadow:0 4px 6px #0000000d}.back-btn:hover{background:#fff;transform:translate(-5px);box-shadow:0 6px 12px #0000001a}.page-bg{z-index:0;filter:contrast(1.02)saturate(1.05);image-rendering:high-quality;background-color:#fff;background-position:50%;background-repeat:no-repeat;background-size:cover;position:absolute;inset:0}.overlay-btn{background:linear-gradient(135deg, var(--accent-blue), var(--accent-purple));color:#fff;cursor:pointer;z-index:10;border:none;border-radius:50px;padding:1rem 2.5rem;font-family:inherit;font-size:1.25rem;font-weight:700;transition:transform .2s,box-shadow .2s;position:absolute;box-shadow:0 4px 15px #3b82f666}.overlay-btn:hover{transform:translateY(-2px)scale(1.05);box-shadow:0 6px 20px #3b82f699}.btn-page1{bottom:15%;left:20%}.page2-content{z-index:10;color:#1a1a1a;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);direction:rtl;background:#ffffffe6;border-radius:20px;width:50%;padding:3rem;font-family:inherit;position:absolute;top:50%;left:5%;transform:translateY(-50%);box-shadow:0 10px 40px #0000001a}.page2-content h2{color:var(--accent-purple);margin-bottom:1.8rem;font-size:2.2rem;font-weight:800;line-height:1.4}.page2-content ul{margin-bottom:2rem;padding:0;list-style:none}.page2-content li{margin-bottom:1rem;padding-right:1.8rem;font-size:1.3rem;line-height:1.5;position:relative}.page2-content li:before{content:"•";color:var(--accent-blue);font-size:1.8rem;position:absolute;top:-2px;right:0}.btn-page2{width:100%;position:relative;bottom:auto;left:auto}#page3.page-app-bg{background-color:var(--bg-primary);background-image:radial-gradient(at 0 0,#3b82f61a 0,#0000 50%),radial-gradient(at 100% 100%,#8b5cf61a 0,#0000 50%);position:absolute;overflow-y:auto}.app-container{flex-direction:column;flex:1;gap:2rem;width:100%;max-width:1400px;margin:0 auto;padding:2rem;display:flex}.app-header{border-bottom:1px solid var(--glass-border);flex-direction:column;gap:.5rem;padding-bottom:1.5rem;display:flex}.logo{align-items:center;gap:.75rem;display:flex}.logo-icon{filter:drop-shadow(0 0 10px var(--accent-purple));font-size:2rem}.logo h1{letter-spacing:-.03em;background:linear-gradient(135deg, #fff 40%, var(--text-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:2.2rem;font-weight:800}.logo h1 span{background:linear-gradient(135deg, var(--accent-blue), var(--accent-purple));-webkit-text-fill-color:transparent;-webkit-background-clip:text}.subtitle{color:var(--text-secondary);font-size:1rem;font-weight:400}.app-main{flex:1;justify-content:center;align-items:center;gap:2rem;width:100%;display:flex}.config-panel,.transcript-box,.app-header,.app-footer{display:none!important}.avatar-section{flex-direction:column;width:95vw;max-width:1600px;height:85vh;margin:0 auto;display:flex}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);transition:var(--transition-smooth);border-radius:20px;padding:1.75rem;box-shadow:0 8px 32px #0000004d}.glass-card:hover{border-color:#ffffff1f;box-shadow:0 12px 40px #0006}.config-panel{flex-direction:column;gap:1.5rem;display:flex}.config-panel h2{background:linear-gradient(135deg, #fff, var(--text-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.25rem;font-size:1.4rem;font-weight:600}.section-desc{color:var(--text-secondary);margin-bottom:1.5rem;font-size:.85rem;line-height:1.4}.config-form{flex-direction:column;gap:1.25rem;display:flex}.input-group{flex-direction:column;gap:.5rem;display:flex}.input-group label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.85rem;font-weight:500}.input-group input{border:1px solid var(--glass-border);color:var(--text-primary);font-family:var(--font-main);transition:var(--transition-smooth);background:#0a0c10cc;border-radius:10px;padding:.75rem 1rem;font-size:.95rem}.input-group input:focus{border-color:var(--accent-blue);outline:none;box-shadow:0 0 0 3px #3b82f633}.input-group small{color:#64748b;font-size:.75rem;line-height:1.3}.btn{font-family:var(--font-main);cursor:pointer;transition:var(--transition-smooth);border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;padding:.85rem 1.5rem;font-size:.95rem;font-weight:600;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg, var(--accent-blue), var(--accent-purple));color:#fff;box-shadow:0 4px 15px #8b5cf64d}.btn-primary:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 20px #8b5cf680}.btn-primary:not(:disabled):active{transform:translateY(0)}.btn-secondary{border:1px solid var(--glass-border);color:var(--text-primary);background:#ffffff0d}.btn-secondary:hover{background:#ffffff1a;border-color:#fff3}.btn-start{width:100%;padding:1.1rem;font-size:1.1rem}.btn-stop{background:linear-gradient(135deg, var(--danger), #be123c);color:#fff;box-shadow:0 4px 15px #ef44444d}.btn-stop:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 20px #ef444480}.avatar-section{flex-direction:column;gap:1.5rem;display:flex}.avatar-container{border-radius:24px;flex:1;justify-content:center;align-items:center;min-height:400px;padding:0;display:flex;position:relative;overflow:hidden}.video-wrapper{justify-content:center;align-items:center;width:100%;height:100%;min-height:400px;display:flex;position:relative}.avatar-video{object-fit:cover;border-radius:24px;width:100%;height:100%}.hidden{display:none!important}.avatar-placeholder{color:var(--text-secondary);flex-direction:column;align-items:center;gap:1.5rem;display:flex}.placeholder-avatar-ring{background:radial-gradient(circle,#8b5cf61a 0%,#0000 70%);border:2px dashed #8b5cf64d;border-radius:50%;justify-content:center;align-items:center;width:120px;height:120px;animation:30s linear infinite spin;display:flex}.placeholder-icon{font-size:3rem;animation:2s ease-in-out infinite pulse}.status-ring{pointer-events:none;width:100%;height:100%;transition:var(--transition-smooth);z-index:10;border-radius:24px;position:absolute;top:0;left:0;box-shadow:inset 0 0 0 3px #0000}.state-idle{box-shadow:inset 0 0 0 2px #94a3b81a}.state-connecting{box-shadow:inset 0 0 0 3px var(--warning);filter:drop-shadow(0 0 10px var(--warning));animation:1.5s ease-in-out infinite border-pulse}.state-listening{box-shadow:inset 0 0 0 3px var(--success);filter:drop-shadow(0 0 12px var(--success));animation:1s ease-in-out infinite border-pulse}.state-speaking{box-shadow:inset 0 0 0 3px var(--accent-purple);filter:drop-shadow(0 0 15px var(--accent-purple));animation:1.2s ease-in-out infinite border-pulse}.state-error{box-shadow:inset 0 0 0 3px var(--danger);filter:drop-shadow(0 0 10px var(--danger))}.visualizer-overlay{pointer-events:none;z-index:15;justify-content:space-between;align-items:center;display:flex;position:absolute;bottom:1.5rem;left:1.5rem;right:1.5rem}.status-badge{display:none!important}.audio-waveforms{background:#0a0c10b3;border-radius:12px;align-items:flex-end;gap:4px;height:24px;padding:8px 12px;display:flex}.audio-waveforms span{background-color:var(--accent-teal);border-radius:3px;width:3px;animation:.8s infinite alternate bounce}.audio-waveforms span:first-child{height:6px;animation-delay:.1s}.audio-waveforms span:nth-child(2){height:14px;animation-delay:.3s}.audio-waveforms span:nth-child(3){height:20px;animation-delay:.5s}.audio-waveforms span:nth-child(4){height:10px;animation-delay:.2s}.audio-waveforms span:nth-child(5){height:4px;animation-delay:.4s}.state-speaking .audio-waveforms span{background-color:var(--accent-purple)}.controls-container{flex-direction:column;gap:1.5rem;display:flex}.transcript-box{flex-direction:column;gap:1rem;min-height:180px;display:flex}.transcript-box h3{border-bottom:1px solid var(--glass-border);padding-bottom:.5rem;font-size:1.1rem;font-weight:600}.transcript-content{flex-direction:column;flex:1;gap:.75rem;max-height:200px;padding-right:.5rem;font-size:.9rem;line-height:1.5;display:flex;overflow-y:auto}.transcript-content::-webkit-scrollbar{width:6px}.transcript-content::-webkit-scrollbar-track{background:0 0}.transcript-content::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:10px}.log-message{border-radius:8px;max-width:85%;padding:.5rem .75rem}.log-message.system{color:var(--text-secondary);border-left:3px solid var(--text-secondary);background:#94a3b81a;align-self:center;max-width:100%;font-family:monospace;font-size:.8rem}.log-message.user{color:var(--accent-teal);background:#14b8a61a;border-bottom-right-radius:2px;align-self:flex-end}.log-message.agent{color:#c084fc;background:#8b5cf61a;border-bottom-left-radius:2px;align-self:flex-start}.app-footer{text-align:center;color:#475569;border-top:1px solid var(--glass-border);padding-top:1.5rem;font-size:.8rem}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;filter:drop-shadow(0 0 15px var(--accent-purple));transform:scale(1.1)}}@keyframes bounce{to{transform:translateY(-12px)}}@keyframes border-pulse{0%,to{opacity:.9}50%{opacity:.4}}@media (width<=768px){.page-bg{background-position:top;background-size:contain}.overlay-btn{text-align:center;width:85%;padding:1rem;font-size:1.2rem;inset:60% auto auto 50%;transform:translate(-50%,-50%)}.page2-content{width:90%;max-height:85vh;padding:1.5rem;top:50%;left:5%;overflow-y:auto;transform:translateY(-50%)}.page2-content h2{margin-bottom:1rem;font-size:1.5rem}.page2-content li{margin-bottom:.6rem;font-size:1rem}.page2-content li:before{font-size:1.4rem}.btn-page2{bottom:5%;left:50%;right:auto;transform:translate(-50%)}.back-btn{padding:.5rem 1rem;font-size:.9rem;top:15px;left:15px}.avatar-section{border-radius:0;width:100vw;max-width:100%;height:100vh}.avatar-container{border-radius:0;min-height:50vh}.avatar-video{border-radius:0}.action-buttons{flex-direction:column;padding:0 1rem}.btn-start,.btn-stop{width:100%}}