:root{--bg: #07070c;--bg-2: #0d0d16;--surface: rgba(22, 22, 34, .72);--surface-solid: #14141f;--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .14);--text: #f4f4f8;--text-dim: #a6a6b8;--text-faint: #6f6f85;--accent: #7c6cff;--accent-2: #b06cff;--accent-glow: rgba(124, 108, 255, .55);--ok: #3ad29f;--warn: #ffb454;--danger: #ff5c72;--radius: 22px;--radius-sm: 12px;--shadow: 0 24px 70px -20px rgba(0, 0, 0, .7);--ring: 0 0 0 1px var(--border);--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:#ffffff14;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(900px 600px at 20% -10%,rgba(124,108,255,.18),transparent 60%),radial-gradient(800px 700px at 100% 110%,rgba(176,108,255,.14),transparent 55%),linear-gradient(180deg,var(--bg),var(--bg-2))}.app__header{display:flex;align-items:center;justify-content:space-between;max-width:1100px;width:100%;margin:0 auto}.brand{display:flex;align-items:center;gap:10px}.brand__mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 8px 24px -8px var(--accent-glow)}.brand__name{font-weight:650;letter-spacing:-.01em;font-size:1.05rem}.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:#000;box-shadow:var(--shadow),var(--ring);transition:box-shadow .4s ease,transform .4s ease}.stage:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,#7c6cff66,#b06cff1a);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.6;transition:opacity .4s ease;pointer-events:none}.stage.is-speaking{box-shadow:0 0 0 1px var(--accent-glow),0 0 60px -10px var(--accent-glow),var(--shadow)}.stage.is-speaking:after{opacity:1}.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,.35) 0%,transparent 22%,transparent 62%,rgba(0,0,0,.55) 100%)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:28px;background:#07070cc7;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:fade-in .35s ease both}.overlay--connecting{background:#07070c8c}.overlay__glow{position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--accent-glow),transparent 65%);filter:blur(30px);opacity:.5;z-index:-1}.overlay__title{margin:0;font-size:1.35rem;font-weight:640;letter-spacing:-.02em}.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),var(--accent));animation:spin 6s linear infinite}.start__avatar-core{width:78px;height:78px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#20203a,#0c0c16);box-shadow:inset 0 0 24px #7c6cff59}.error__icon{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;color:var(--danger);background:#ff5c721f;border:1px solid rgba(255,92,114,.3)}.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;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),var(--accent-2));box-shadow:0 12px 30px -10px var(--accent-glow)}.btn--primary:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 16px 40px -10px var(--accent-glow)}.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:#0a0a108c;border:1px solid var(--border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:rise .4s ease both}.controls__btn{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:var(--text);background:#ffffff14;border:1px solid var(--border);transition:transform .15s ease,background .2s ease,color .2s ease}.controls__btn:hover{transform:translateY(-2px);background:#ffffff24}.controls__btn--toggle.is-active{color:var(--warn);background:#ffb45429;border-color:#ffb45459}.controls__btn--end{color:#fff;background:var(--danger);border-color:transparent}.controls__btn--end:hover{background:#ff7184}.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:#0a0a108c;border:1px solid var(--border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);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);color:var(--accent);animation:pulse .9s ease-in-out infinite}.spinner{color:var(--accent);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}}