:root{--bg: #ffffff;--bg-2: #e8f0fe;--surface: rgba(255, 255, 255, .78);--surface-solid: #ffffff;--border: rgba(15, 52, 96, .09);--border-strong: rgba(15, 52, 96, .16);--text: #0f172a;--text-dim: #475569;--text-faint: #94a3b8;--accent: #1e3a8a;--accent-2: #2563eb;--accent-glow: rgba(37, 99, 235, .3);--ok: #059669;--warn: #d97706;--danger: #dc2626;--radius: 22px;--radius-sm: 12px;--shadow: 0 32px 80px -20px rgba(30, 58, 138, .18), 0 8px 24px -8px rgba(30, 58, 138, .08);--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}code{font-family:SF Mono,ui-monospace,Menlo,Consolas,monospace;font-size:.85em;padding:1px 6px;border-radius:6px;background:#2563eb12;color:var(--accent-2)}.app{position:relative;min-height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(16px,3vw,32px);isolation:isolate}.app__backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background:radial-gradient(ellipse 70% 55% at 8% -8%,rgba(99,148,255,.22),transparent 62%),radial-gradient(ellipse 55% 45% at 95% 105%,rgba(30,58,138,.14),transparent 58%),radial-gradient(ellipse 45% 35% at 55% 48%,rgba(147,197,253,.12),transparent 65%),radial-gradient(ellipse 60% 40% at 0% 100%,rgba(99,148,255,.08),transparent 60%),linear-gradient(160deg,#fff,#f5f9ff 45%,#e8f0fe)}.app__header{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}.brand{display:flex;align-items:center;gap:10px}.brand__logo{height:26px;width:26px;border-radius:7px;object-fit:cover}.brand__name{font-weight:700;letter-spacing:-.03em;font-size:1.625rem;line-height:1}.brand__tag{font-size:.78rem;color:var(--text-faint);letter-spacing:.02em}.app__main{display:grid;place-items:center;padding:clamp(16px,4vh,48px) 0}.app__footer{text-align:center;font-size:.74rem;color:var(--text-faint);letter-spacing:.03em}.stage{position:relative;width:min(92vw,460px);aspect-ratio:3 / 4;border-radius:var(--radius);overflow:hidden;background:linear-gradient(160deg,#0d1f4a,#1a3670 45%,#0f2957);box-shadow:var(--shadow);transform:translateZ(0);transition:box-shadow .4s ease,transform .4s ease}.stage.is-speaking{box-shadow:0 0 0 2px var(--accent-glow),0 0 70px -8px var(--accent-glow),var(--shadow)}.stage__video{position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:0!important}.stage__video :is(video){width:100%!important;height:100%!important;object-fit:cover;display:block}.stage__scrim{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,transparent 22%,transparent 62%,rgba(0,0,0,.5) 100%)}.overlay{position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:28px;border-radius:calc(var(--radius) + 1px);background:#ffffffe0;backdrop-filter:blur(32px) saturate(180%);-webkit-backdrop-filter:blur(32px) saturate(180%);animation:fade-in .35s ease both}.overlay--connecting{background:#ffffffe0}.overlay__glow{position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.15),transparent 65%);filter:blur(32px);opacity:.8;z-index:-1}.overlay__title{margin:0;font-size:1.35rem;font-weight:640;letter-spacing:-.02em;color:var(--text)}.overlay__subtitle{margin:0;max-width:30ch;font-size:.92rem;line-height:1.5;color:var(--text-dim)}.overlay__hint{display:inline-flex;align-items:center;gap:6px;margin:4px 0 0;font-size:.78rem;color:var(--text-faint)}.start__avatar-ring{position:relative;display:grid;place-items:center;width:92px;height:92px;border-radius:50%;margin-bottom:6px;background:conic-gradient(from 0deg,var(--accent),var(--accent-2),#60a5fa,var(--accent));animation:spin 6s linear infinite;box-shadow:0 0 32px #2563eb4d}.start__avatar-core{width:78px;height:78px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#eff6ff,#dbeafe);box-shadow:inset 0 0 20px #2563eb1f}.error__icon{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;color:var(--danger);background:#dc262614;border:1px solid rgba(220,38,38,.2)}.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 24px;border-radius:999px;font-size:.95rem;font-weight:600;letter-spacing:.01em;transition:transform .15s ease,box-shadow .25s ease,filter .2s ease}.btn--primary{color:#fff;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);box-shadow:0 12px 32px -8px #2563eb73,0 2px 8px #1e3a8a33,inset 0 1px #ffffff26}.btn--primary:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 18px 40px -8px #2563eb80,0 4px 12px #1e3a8a40,inset 0 1px #ffffff26}.btn--primary:active{transform:translateY(0)}.controls{position:absolute;z-index:3;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:14px;padding:10px;border-radius:999px;background:#fffc;border:1px solid rgba(255,255,255,.95);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);box-shadow:0 8px 24px #1e3a8a1f,inset 0 1px #fff;animation:rise .4s ease both}.controls__btn{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:var(--text);background:#0f34600d;border:1px solid rgba(15,52,96,.08);transition:transform .15s ease,background .2s ease,color .2s ease,box-shadow .2s ease}.controls__btn:hover{transform:translateY(-2px);background:#2563eb14;box-shadow:0 4px 12px #2563eb1f}.controls__btn--toggle.is-active{color:var(--warn);background:#d977061a;border-color:#d9770640}.controls__btn--end{color:#fff;background:var(--danger);border-color:transparent;box-shadow:0 4px 12px #dc26264d}.controls__btn--end:hover{background:#ef4444;box-shadow:0 6px 16px #dc262666}.status-pill{position:absolute;z-index:3;top:16px;left:16px;display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 11px;border-radius:999px;font-size:.78rem;font-weight:550;letter-spacing:.02em;color:var(--text);background:#fffc;border:1px solid rgba(255,255,255,.95);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:0 4px 12px #1e3a8a14,inset 0 1px #fff;animation:fade-in .3s ease both}.status-pill__dot{width:9px;height:9px;border-radius:50%;background:var(--text-faint);box-shadow:0 0 0 0 transparent}.status-pill--listening .status-pill__dot{background:var(--ok);color:var(--ok);animation:pulse 1.6s ease-in-out infinite}.status-pill--thinking .status-pill__dot{background:var(--warn);color:var(--warn);animation:blink 1s steps(2,start) infinite}.status-pill--speaking .status-pill__dot{background:var(--accent-2);color:var(--accent-2);animation:pulse .9s ease-in-out infinite}.spinner{color:var(--accent-2);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{box-shadow:0 0 0 0 currentColor;opacity:1}50%{box-shadow:0 0 0 5px transparent;opacity:.6}}@keyframes blink{50%{opacity:.25}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes rise{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}