:root{--color-primary-50: #eff6ff;--color-primary-100: #dbeafe;--color-primary-200: #bfdbfe;--color-primary-300: #93c5fd;--color-primary-400: #60a5fa;--color-primary-500: #3b82f6;--color-primary-600: #2563eb;--color-primary-700: #1d4ed8;--color-primary-800: #1e40af;--color-primary-900: #1e3a8a;--color-success-50: #ecfdf5;--color-success-100: #d1fae5;--color-success-200: #a7f3d0;--color-success-300: #6ee7b7;--color-success-400: #34d399;--color-success-500: #10b981;--color-success-600: #059669;--color-success-700: #047857;--color-error-50: #fef2f2;--color-error-100: #fee2e2;--color-error-500: #ef4444;--color-error-600: #dc2626;--color-warning-50: #fffbeb;--color-warning-500: #f59e0b;--color-warning-600: #d97706;--color-neutral-50: #fafafa;--color-neutral-100: #f5f5f5;--color-neutral-200: #e5e5e5;--color-neutral-300: #d4d4d4;--color-neutral-400: #a3a3a3;--color-neutral-500: #737373;--color-neutral-600: #525252;--color-neutral-700: #404040;--color-neutral-800: #262626;--color-neutral-900: #171717;--color-background: #ffffff;--color-surface: #ffffff;--color-surface-hover: #fafafa;--color-border: #e5e5e5;--color-border-hover: #d4d4d4;--color-text-primary: #171717;--color-text-secondary: #525252;--color-text-tertiary: #a3a3a3;--color-primary: var(--brand-primary, var(--color-primary-500));--color-primary-hover: var(--brand-primary-hover, var(--color-primary-600));--color-primary-active: var(--brand-primary-active, var(--color-primary-700));--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1), 0 4px 6px rgba(0, 0, 0, .05);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .3s cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--color-background: #0a0a0a;--color-surface: #171717;--color-surface-hover: #262626;--color-border: #404040;--color-border-hover: #525252;--color-text-primary: #fafafa;--color-text-secondary: #a3a3a3;--color-text-tertiary: #737373;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .5), 0 4px 6px rgba(0, 0, 0, .3)}@media (prefers-reduced-motion: reduce){:root{--transition-fast: 0ms;--transition-base: 0ms;--transition-slow: 0ms}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:var(--font-family-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--color-background);color:var(--color-text-primary);transition:background-color var(--transition-base),color var(--transition-base)}#root{width:100%;height:100vh}.theme-toggle{position:absolute;right:0;width:32px;height:32px;border-radius:var(--radius-full);background:transparent;border:none;color:var(--color-text-tertiary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;opacity:.3}.theme-toggle:hover{opacity:.7}.theme-toggle:active{opacity:1}.app{min-height:100vh;display:flex;flex-direction:column;background:var(--color-background);color:var(--color-text-primary);font-family:var(--font-family-base);position:relative;overflow-x:hidden}.app:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,var(--color-primary),transparent 70%);opacity:.02;pointer-events:none;transition:opacity var(--transition-base)}[data-theme=dark] .app:before{opacity:.08}.header{padding:0;position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:#ffffffb3;border-bottom:1px solid var(--color-border)}[data-theme=dark] .header{background:#0a0a0ab3}.header-content{max-width:1400px;margin:0 auto;padding:var(--space-4) var(--space-6);display:flex;align-items:center;justify-content:space-between}.btn-sign-in{padding:.5rem 1rem;border-radius:8px;border:none;background:var(--brand-primary);color:#fff;font-weight:500;cursor:pointer;transition:all .2s ease}.btn-sign-in:hover{background:var(--brand-primary-hover);transform:translateY(-1px)}.header-content h1{flex:0;align-items:center;justify-content:center;position:relative}.header-content h1{font-size:var(--font-size-xl);color:var(--color-text-primary);font-weight:var(--font-weight-semibold);letter-spacing:-.01em;margin:0}.main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px var(--space-6) var(--space-12);max-width:1100px;margin:0 auto;width:100%;position:relative;z-index:1}.connect-screen{text-align:center;animation:fadeIn .6s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.btn-primary{background:var(--color-primary);color:#fff;border:none;padding:var(--space-4) var(--space-10);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-sm);position:relative}.btn-primary:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0);box-shadow:var(--shadow-xs)}.btn-secondary{background:var(--color-surface);color:var(--color-text-secondary);border:1px solid var(--color-border);padding:var(--space-3) var(--space-6);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base)}.btn-secondary:hover{background:var(--color-surface-hover);border-color:var(--color-border-hover);transform:translateY(-1px);box-shadow:var(--shadow-xs)}.context-card{background:var(--color-surface);padding:var(--space-6);border-radius:var(--radius-xl);margin-bottom:var(--space-8);width:100%;max-width:650px;text-align:left;border:1px solid var(--color-border);box-shadow:var(--shadow-sm);animation:slideIn .5s ease-out}[data-theme=dark] .context-card{background:#17171799;border:1px solid var(--color-border)}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.context-card h3{margin-bottom:var(--space-4);font-size:var(--font-size-lg);color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.context-card p{margin-bottom:var(--space-3);font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.context-card p strong{color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.instructions{text-align:center;margin-bottom:var(--space-10);max-width:650px;animation:fadeIn .7s ease-out}.instructions h2{font-size:var(--font-size-3xl);margin-bottom:var(--space-3);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);letter-spacing:-.01em}.instructions p{font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.interaction-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-8);margin:var(--space-16) 0;max-width:600px;width:100%;animation:fadeIn .8s ease-out}.interaction-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:200px}.audio-wave{position:absolute;display:flex;align-items:center;justify-content:center;gap:12px;height:120px;width:200px;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}.wave-bar{width:8px;min-width:8px;background:#ffffffe6!important;border-radius:4px;animation:wave 1.2s ease-in-out infinite;box-shadow:0 0 15px #ffffff80;flex-shrink:0}.wave-bar:nth-child(1){height:30px;min-height:30px;animation-delay:0s}.wave-bar:nth-child(2){height:50px;min-height:50px;animation-delay:.1s}.wave-bar:nth-child(3){height:70px;min-height:70px;animation-delay:.2s}.wave-bar:nth-child(4){height:50px;min-height:50px;animation-delay:.3s}.wave-bar:nth-child(5){height:30px;min-height:30px;animation-delay:.4s}@keyframes wave{0%,to{transform:scaleY(1);opacity:.5}50%{transform:scaleY(2);opacity:1}}.mic-button{width:180px;height:180px;border-radius:var(--radius-full);background:var(--color-primary);border:none;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 24px #00000026;position:relative;z-index:1}[data-theme=dark] .mic-button{box-shadow:0 8px 32px #0009,0 0 0 1px #ffffff0d}.mic-icon-wrapper{display:flex;align-items:center;justify-content:center}.mic-button:hover:not(:disabled){background:var(--color-primary-hover);transform:scale(1.08);box-shadow:0 12px 32px #0003}[data-theme=dark] .mic-button:hover:not(:disabled){box-shadow:0 12px 40px #000000b3,0 0 0 1px #ffffff1a}.mic-button:active:not(:disabled){transform:scale(1.02)}.mic-button:disabled{opacity:.5;cursor:not-allowed;background:var(--color-neutral-400)}.mic-button.recording{background:var(--color-error-500);animation:pulse 2s ease-in-out infinite}.mic-button.ai-speaking{background:#5b7fe8;animation:aiPulse 2s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 8px 24px #ef44444d,0 0 #ef444466}50%{box-shadow:0 8px 24px #ef44444d,0 0 0 20px #ef444400}}@keyframes aiPulse{0%,to{transform:scale(1);box-shadow:0 8px 24px #00000026,0 0 0 0 var(--color-primary)}50%{transform:scale(1.05);box-shadow:0 12px 32px #0003,0 0 0 15px transparent}}.interaction-status{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);width:100%}.status-message{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-6);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);min-width:320px;box-shadow:var(--shadow-sm);transition:all .3s ease}[data-theme=dark] .status-message{background:#171717cc;border:1px solid var(--color-border)}.status-icon-large{flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background:var(--color-primary);color:#fff}.status-message.idle,.status-message.onboarding,.status-message.recording{display:none}.status-message.recording .status-icon-large{background:var(--color-error-500);animation:recordingPulse 1.5s ease-in-out infinite}.status-message.speaking{display:none}.status-message.speaking .status-icon-large{background:var(--color-primary);animation:speakingPulse 1.5s ease-in-out infinite}.status-message.waiting .status-icon-large{background:var(--color-neutral-400)}.status-message.error .status-icon-large{background:var(--color-error-500)}.status-message.idle .status-icon-large{background:var(--color-neutral-400)}.status-message.onboarding .status-icon-large{background:var(--color-primary)}@keyframes recordingPulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes speakingPulse{0%,to{opacity:1}50%{opacity:.8}}.status-text{flex:1;text-align:left}.status-text h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0 0 var(--space-1) 0;letter-spacing:-.01em}.status-text p{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}.status-icon.spinning{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:var(--color-error-50);border:1px solid var(--color-error-100);border-radius:var(--radius-lg);color:var(--color-error-600);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}[data-theme=dark] .error-message{background:#ef44441a;border-color:#ef444433;color:#fca5a5}.btn-reconnect{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);background:var(--color-warning-500);color:#fff;border:none;border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-sm)}.btn-reconnect:hover{background:var(--color-warning-600);transform:translateY(-1px);box-shadow:var(--shadow-md)}.error{color:var(--color-error-600);margin-top:var(--space-3);font-size:var(--font-size-sm);background:var(--color-error-50);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-error-100)}.feedback-section{width:100%;max-width:650px;margin-top:var(--space-10);animation:fadeIn .9s ease-out}.feedback-section h3{margin-bottom:var(--space-5);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.interventions{display:flex;flex-direction:column;gap:1.25rem;max-height:450px;overflow-y:auto;padding-right:.5rem}.interventions::-webkit-scrollbar{width:6px}.interventions::-webkit-scrollbar-track{background:var(--color-surface-hover);border-radius:var(--radius-md)}.interventions::-webkit-scrollbar-thumb{background:var(--color-border-hover);border-radius:var(--radius-md)}.interventions::-webkit-scrollbar-thumb:hover{background:var(--color-text-tertiary)}.intervention-card{background:var(--color-surface);padding:var(--space-5) var(--space-6);border-radius:var(--radius-lg);text-align:left;border:1px solid var(--color-border);box-shadow:var(--shadow-sm);transition:all var(--transition-base);animation:slideInRight .4s ease-out}[data-theme=dark] .intervention-card{background:#17171799;border:1px solid var(--color-border)}@keyframes slideInRight{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.intervention-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-border-hover)}.intervention-layer{font-size:var(--font-size-xs);text-transform:uppercase;font-weight:var(--font-weight-semibold);color:var(--color-primary);margin-bottom:var(--space-2);letter-spacing:.05em}.intervention-message{font-size:var(--font-size-sm);line-height:var(--line-height-normal);margin-bottom:var(--space-2);color:var(--color-text-primary)}.intervention-time{font-size:var(--font-size-xs);color:var(--color-text-tertiary)}.actions{margin-top:var(--space-12);display:flex;gap:var(--space-4);justify-content:center}.btn-disconnect{position:fixed;bottom:var(--space-8);left:50%;transform:translate(-50%);background:var(--color-surface);color:var(--color-text-secondary);border:1px solid var(--color-border);padding:var(--space-3) var(--space-6);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);z-index:50}.btn-disconnect:hover{background:var(--color-surface-hover);border-color:var(--color-border-hover);transform:translate(-50%) translateY(-2px);box-shadow:var(--shadow-sm)}@media (max-width: 768px){.header-content h1{font-size:var(--font-size-lg)}.subtitle{font-size:var(--font-size-sm)}.main{padding:var(--space-8) var(--space-4)}.instructions h2{font-size:1.6rem}.instructions p{font-size:1rem}.mic-button{width:150px;height:150px}.mic-button .mic-icon-wrapper svg{width:52px;height:52px}.btn-primary{padding:1rem 2.5rem;font-size:1.1rem}.status-bar{flex-direction:column;gap:.75rem;padding:1rem}.context-card{padding:1.5rem}.interventions{max-height:300px}}@media (max-width: 480px){.header-content h1{font-size:var(--font-size-base)}.main{padding:1.5rem 1rem}.instructions h2{font-size:1.4rem}.mic-button{width:150px;height:150px}.mic-button .mic-icon-wrapper svg{width:52px;height:52px}.btn-primary{padding:.875rem 2rem;font-size:1rem}}.connecting-overlay{position:fixed;inset:0;background:var(--color-background);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .4s ease-out;overflow:hidden}.overlay-gradient{display:none}.connecting-content{text-align:center;animation:slideUp .6s cubic-bezier(.16,1,.3,1);max-width:540px;padding:var(--space-10);position:relative;z-index:1}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.start-icon-wrapper{margin-bottom:var(--space-10);display:flex;justify-content:center}.start-icon{position:relative;width:136px;height:136px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-accent, #f59e0b) 100%);border-radius:32px;color:#fff;box-shadow:0 20px 60px -12px #00000040,0 8px 24px -8px #00000026,inset 0 2px #fff3;animation:iconFloat 3s ease-in-out infinite}[data-theme=dark] .start-icon{box-shadow:0 20px 60px -12px #00000080,0 8px 24px -8px #0000004d,inset 0 2px #ffffff1a}@keyframes iconFloat{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.02)}}.start-title{font-size:3.25rem;font-weight:800;color:var(--color-text-primary);margin-bottom:var(--space-5);letter-spacing:-.04em;line-height:1.05;text-shadow:0 2px 8px rgba(0,0,0,.05)}.start-description{font-size:1.25rem;line-height:1.6;color:var(--color-text-secondary);margin-bottom:var(--space-12);max-width:480px;margin-left:auto;margin-right:auto;font-weight:400}.btn-start{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);color:#fff;border:none;padding:18px 40px;font-size:1.125rem;font-weight:700;border-radius:16px;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:0 8px 24px #00000026,0 1px 2px #0000001a,inset 0 1px #fff3;display:inline-flex;align-items:center;gap:12px;letter-spacing:-.02em;position:relative;overflow:hidden}[data-theme=dark] .btn-start{box-shadow:0 8px 32px #0006,0 1px 2px #0003,inset 0 1px #ffffff26}.btn-start:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 32px #0003,0 2px 4px #0000001a,inset 0 1px #ffffff40}[data-theme=dark] .btn-start:hover{box-shadow:0 12px 40px #00000080,0 2px 4px #0003,inset 0 1px #fff3}.btn-start:active{transform:translateY(0) scale(1);box-shadow:0 4px 16px #00000026,inset 0 1px #ffffff26}.btn-start svg{transition:transform .3s cubic-bezier(.16,1,.3,1)}.btn-start:hover svg{transform:translate(4px)}.loading-spinner{margin-bottom:var(--space-6)}.loading-spinner .spinning{color:var(--color-primary);filter:drop-shadow(0 4px 12px var(--color-primary))}.loading-title{font-size:2rem;font-weight:700;color:var(--color-text-primary);margin-bottom:var(--space-3);letter-spacing:-.02em}.loading-description{font-size:1rem;color:var(--color-text-secondary);margin:0}@media (max-width: 768px){.connecting-content{max-width:90%;padding:var(--space-8) var(--space-6)}.start-icon{width:100px;height:100px;border-radius:28px}.start-icon svg{width:40px;height:40px}.start-title{font-size:2.25rem}.start-description{font-size:1rem}.btn-start{font-size:1rem;padding:16px 32px}}@media (max-width: 480px){.start-icon{width:88px;height:88px;border-radius:24px}.start-title{font-size:1.875rem}.start-description{font-size:.9375rem}.btn-start{padding:14px 28px;font-size:.9375rem}}.limit-card{position:relative;background:#fffffff2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(239,68,68,.15);border-radius:20px;padding:3rem 2.5rem;margin-top:2rem;max-width:420px;text-align:center;box-shadow:0 4px 24px #00000014,0 1px 2px #0000000a;animation:slideUp .5s cubic-bezier(.16,1,.3,1)}[data-theme=dark] .limit-card{background:#141418f2;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 24px #0006,0 1px 2px #0003}.limit-card-icon{width:72px;height:72px;margin:0 auto 2rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ef4444,#dc2626);border-radius:18px;color:#fff;box-shadow:0 4px 16px #ef44444d}.limit-card-title{color:var(--color-text-primary);margin-bottom:.75rem;font-size:1.75rem;font-weight:700;letter-spacing:-.03em}.limit-card-description{color:var(--color-text-secondary);margin-bottom:1.5rem;font-size:1.0625rem;line-height:1.6;font-weight:400}.limit-card-description strong{color:var(--color-text-primary);font-weight:700}.limit-card-button{background:linear-gradient(135deg,var(--brand-primary) 0%,var(--brand-primary-hover) 100%);color:#fff;border:none;border-radius:12px;padding:.875rem 2rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:0 4px 16px #00000026,inset 0 1px #fff3;letter-spacing:-.01em}.limit-card-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0003,inset 0 1px #fff3}.limit-card-button:active{transform:translateY(0)}.limit-card-footer{color:var(--color-text-secondary);font-size:.9375rem;margin-top:1.25rem;margin-bottom:0;font-weight:400}@media (max-width: 768px){.limit-card{padding:2rem 1.5rem;max-width:90%}.limit-card-icon{width:56px;height:56px}.limit-card-title{font-size:1.25rem}.limit-card-description{font-size:.9375rem}.limit-card-button{font-size:.9375rem;padding:.75rem 1.75rem}}