:root{--bg-0:#06070d;--bg-1:#0b0e1a;--text:oklch(97% 0.01 270);--muted:oklch(66% 0.02 270);--c-listen:oklch(82% 0.15 230);--c-speak:oklch(80% 0.15 300);--c-think:oklch(72% 0.12 285);--c-connect:oklch(72% 0.04 270);--c-error:oklch(72% 0.16 25);--ctl-bg:oklch(100% 0 0/0.07);--ctl-bg-hover:oklch(100% 0 0/0.12);--ctl-border:oklch(100% 0 0/0.14);--orb-area:min(76vw,48vh,31rem);--dur-fast:160ms;--dur:320ms;--ease:cubic-bezier(0.16,1,0.3,1)}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%}body{background:radial-gradient(130% 90% at 50% 16%,var(--bg-1) 0,var(--bg-0) 70%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.stage,body{min-height:100dvh}.stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(2rem,env(safe-area-inset-top)) 1.5rem max(2rem,env(safe-area-inset-bottom));text-align:center}.orb-wrap{width:var(--orb-area);height:var(--orb-area);display:grid;place-items:center;cursor:pointer;outline:none;transition:transform var(--dur) var(--ease)}.orb-wrap[aria-disabled=true]{cursor:default}.orb-wrap:not([aria-disabled=true]):active{transform:scale(.98)}.orb-canvas{display:block}.status{margin-top:clamp(1.75rem,4.5vh,3rem);height:1.5em;display:inline-flex;align-items:center;gap:.15rem;font-size:.95rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);opacity:0;transform:translateY(4px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),color var(--dur) var(--ease)}.status.show{opacity:1;transform:translateY(0)}.status.mode-listening{color:var(--c-listen)}.status.mode-speaking{color:var(--c-speak)}.status.mode-thinking{color:var(--c-think)}.status.mode-connecting{color:var(--c-connect)}.status.mode-error{color:var(--c-error)}.dots{width:1.1em;height:.4em;display:inline-block;background:currentColor;mask:radial-gradient(circle 2px at 2px 50%,#000 96%,transparent) 0 /.4em 100% no-repeat;-webkit-mask:radial-gradient(circle 2px at 2px 50%,#000 96%,transparent) 0 /.4em 100% no-repeat;animation:dots 1s steps(4) infinite}@keyframes dots{to{mask-position:1.2em;-webkit-mask-position:1.2em}}.hint{margin-top:.6rem;font-size:.92rem;color:var(--muted);animation:fade-in .6s var(--ease) .8s both}@keyframes fade-in{0%{opacity:0;transform:translateY(4px)}}.recover{position:absolute;bottom:max(3rem,calc(env(safe-area-inset-bottom) + 2rem));display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:22rem;padding:0 1.5rem}.recover .error{font-size:.98rem;line-height:1.4;color:oklch(80% .04 270)}.retry{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--ctl-border);background:var(--ctl-bg);color:var(--text);font-size:.95rem;font-weight:500;letter-spacing:.02em;padding:.7rem 1.6rem;border-radius:999px;cursor:pointer;transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}.retry:hover{background:var(--ctl-bg-hover)}.retry:active{transform:scale(.96)}.controls{position:absolute;bottom:max(2.75rem,calc(env(safe-area-inset-bottom) + 1.5rem));display:flex;gap:2rem;align-items:center;animation:fade-in .4s var(--ease) both}.ctl{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:4.25rem;height:4.25rem;border-radius:50%;border:1px solid var(--ctl-border);background:var(--ctl-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}@supports not (((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) or (-webkit-backdrop-filter:blur(1px))){.ctl{background:oklch(28% .02 270/.92)}}.ctl:hover{background:var(--ctl-bg-hover)}.ctl:active{transform:scale(.92)}.ctl.muted{color:var(--c-error);border-color:oklch(72% .16 25/.5);background:oklch(72% .16 25/.12)}.ctl.end:active,.ctl.end:hover{background:oklch(60% .21 22/.95);border-color:transparent;color:oklch(98% 0 0)}