/* Siri Orb adaptation, SmoothUI / Eduardo Calvo (MIT). See notices/smoothui.txt. */
.intro{display:flex;align-items:center;justify-content:space-between;gap:32px}.intro-caption{color:var(--muted)}
.orb-stage{position:relative;display:grid;place-items:center;width:280px;height:240px;flex:0 0 280px;--energy:0;--low:0;--mid:0;--high:0;--angle:20deg;--glow:#c5c6ee;--speed:1}
.orb-bloom{position:absolute;width:220px;height:220px;background:radial-gradient(circle,var(--glow),transparent 68%);filter:blur(22px);opacity:calc(.3 + var(--energy)*.35);transition:background .5s}
.voice-orb{width:170px;height:170px;display:grid;grid-template-areas:"stack";position:relative;isolation:isolate;overflow:hidden;border-radius:50%;background:#eaeaf2;transform:scale(calc(1 + var(--energy)*.13));transition:filter .4s;box-shadow:0 14px 40px #62658e19;--c1:#f1b39c;--c2:#989ad7;--c3:#e5e9ff;--c4:#b4d5c8}
.voice-orb::before,.voice-orb::after,.voice-orb>span{content:"";display:block;grid-area:stack;width:100%;height:100%;border-radius:50%}
.voice-orb::before{background:conic-gradient(from calc(var(--angle)*2) at 25% 70%,var(--c3),transparent 20% 80%,var(--c3)),conic-gradient(from calc(var(--angle)*2) at 45% calc(75% - var(--low)*18%),var(--c2),transparent 30% 60%,var(--c2)),conic-gradient(from calc(var(--angle)*-3) at calc(80% - var(--mid)*22%) 20%,var(--c1),transparent 40% 60%,var(--c1)),conic-gradient(from calc(var(--angle)*1.5) at 60% calc(35% + var(--high)*25%),var(--c4),transparent 25% 75%,var(--c4)),conic-gradient(from var(--angle) at 20% 80%,var(--c1),transparent 10% 90%,var(--c1));filter:blur(calc(9px - var(--energy)*4px)) contrast(1.35) saturate(1.2);transform:scale(1.12)}
.voice-orb::after{background:radial-gradient(circle at center,#fafaff .6px,transparent .7px);background-size:2px 2px;mix-blend-mode:soft-light;opacity:.32;mask-image:radial-gradient(black 20%,transparent 75%)}
.orb-sheen{background:radial-gradient(circle at 30% 24%,#ffffff90,transparent 36%),radial-gradient(circle at 72% 80%,#ffffff24,transparent 48%);mix-blend-mode:screen;transform:translate(calc(var(--mid)*6%),calc(var(--high)*5%))}
.orb-rim{box-shadow:inset 0 0 0 1px #ffffff50,inset 0 8px 15px #ffffff60,inset 0 -12px 24px #56577d45;pointer-events:none}
#orb-label{position:absolute;bottom:5px;color:var(--muted);font-size:11px;letter-spacing:.2px}
.orb-stage[data-state=listening]{--glow:#b6c9ea}.orb-stage[data-state=speaking]{--glow:#f1bfaa}.orb-stage[data-state=search]{--glow:#bed9cc}.orb-stage[data-state=paused]{--glow:#d6d3cb}.orb-stage[data-state=error]{--glow:#e8ada6}
.orb-stage[data-state=paused] .voice-orb{filter:saturate(.35)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(max-width:800px){.orb-stage{width:190px;height:200px;flex-basis:190px}.voice-orb{width:140px;height:140px}.orb-bloom{width:180px;height:180px}}
@media(max-width:520px){.intro{gap:12px}h1{font-size:32px}.orb-stage{width:120px;height:175px;flex-basis:120px}.voice-orb{width:105px;height:105px}.orb-bloom{width:130px;height:130px}.eyebrow{font-size:9px;letter-spacing:1px}#orb-label{bottom:8px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.voice-orb{transform:none}.voice-orb,.orb-bloom{transition:none}}