:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--accent:#6a3df5;--text:#f2f0fa;--muted:#9c93c2;--danger:#ff5c5c;--success:#6df58f}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@font-face{font-family:Familjen Grotesk;src:url(/fonts/FamiljenGrotesk-Variable.ttf)format("truetype-variations");font-weight:100 900;font-display:swap}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:var(--text);background:radial-gradient(circle at 50% 30%,#1b1530 0%,#0a0713 70%);font-family:-apple-system,system-ui,sans-serif}.app{flex-direction:column;justify-content:space-between;align-items:center;height:100%;display:flex;position:relative}.canvas-wrap{z-index:0;position:fixed;inset:0}.header,.bottom-area{z-index:1;flex-direction:column;align-items:center;width:100%;display:flex;position:relative}.bottom-area{background:linear-gradient(#0000 0%,#0a0713d9 35%,#0a0713 70%);padding-top:48px}.header{text-align:center;padding:20px 0 0}.header h1{margin:0;font-family:Familjen Grotesk,-apple-system,system-ui,sans-serif;font-size:2.5rem;font-weight:700}.header .tagline{color:#b7aee0;margin:4px 0 0;font-family:Familjen Grotesk,-apple-system,system-ui,sans-serif;font-size:1.5rem;font-weight:700}.controls{flex-direction:column;align-items:center;gap:10px;padding:16px 0 28px;display:flex}.controls-row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.talk-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:999px;padding:14px 32px;font-size:1.1rem;box-shadow:0 0 24px #6a3df599}.talk-btn.secondary{color:var(--accent);border:2px solid var(--accent);box-shadow:none;background:#0a071399}.talk-btn:disabled{opacity:.5;cursor:default;box-shadow:none}.state-badge{color:var(--muted);background:#ffffff1a;border-radius:999px;align-items:center;gap:8px;padding:6px 16px;font-size:.9rem;display:inline-flex}.state-dot{background:var(--muted);border-radius:50%;flex-shrink:0;width:8px;height:8px}.state-badge--listening .state-dot,.state-badge--processing .state-dot{background:var(--accent);animation:1.1s ease-in-out infinite state-pulse}.state-badge--speaking .state-dot{background:var(--success);animation:1.1s ease-in-out infinite state-pulse}.state-badge--error .state-dot{background:var(--danger)}@keyframes state-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.6)}}.panel{background:#ffffff0d;border-radius:12px;width:min(560px,90vw);max-height:30vh;margin-bottom:12px;padding:14px 18px;font-size:.9rem;overflow-y:auto}.panel .transcript-label{color:var(--muted);text-transform:uppercase;margin:0 0 4px;font-size:.8rem}.panel .transcript-text{margin:0}.error-text{color:var(--danger);margin:0}.notice-text{color:var(--muted);margin:0}