.orb-wrap{position:relative;width:150px;height:150px;display:grid;place-items:center}
.bo{--gx:0;--gy:0;--lvl:0;position:relative;width:116px;height:116px;line-height:0}
.bo-float,.bo-move,.bo-tilt,.bo-face{position:absolute;inset:0;display:block}
.bo-float{animation:boFloat 3.2s ease-in-out infinite}
@keyframes boFloat{50%{transform:translateY(-8px)}}
.bo-halo{position:absolute;inset:-26%;border-radius:50%;background:radial-gradient(circle,rgba(130,165,255,.55) 0,rgba(130,165,255,.35) 38%,rgba(130,165,255,0) 70%);opacity:.35;transform:scale(.9);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(130,165,255,.6);opacity:0;pointer-events:none}
.bo[data-state=listening] .ring{animation:ring 1.5s ease-out infinite}
.bo[data-state=listening] .r2{animation-delay:.5s}
.bo[data-state=listening] .r3{animation-delay:1s}
.bo[data-state=speaking] .ring{animation:ring 2.2s ease-out infinite;border-color:rgba(255,138,76,.45)}
.bo[data-state=speaking] .r2{animation-delay:1.1s}
@keyframes ring{from{transform:scale(.9);opacity:.9}to{transform:scale(1.75);opacity:0}}
.bo-move,.bo-tilt{transform-origin:50% 60%}
.bo-move{transition:transform .3s cubic-bezier(.34,1.3,.5,1)}
.bo-tilt{transition:transform .45s cubic-bezier(.45,0,.25,1)}
.bo-svg{display:block;width:100%;height:100%;overflow:visible;filter:var(--bo-shadow,drop-shadow(0 10px 26px rgba(91,140,255,.45)))}
.bo-face .bo-svg{filter:none}
.bo-shine{fill:#fff;opacity:.32}
.bo-ink{fill:#0a1028}
.bo-glint{fill:#fff;opacity:.9}
.bo-happy{fill:none;stroke:#0a1028;stroke-width:5.5;stroke-linecap:round;opacity:0;transition:opacity .15s ease;transform-box:fill-box;transform-origin:50% 100%}
.bo-mouth{fill:#0a1028;opacity:0;transform-box:fill-box;transform-origin:50% 50%;transform:scale(.3);transition:opacity .25s ease,transform .3s ease}
.bo-face{transform:translate(calc(var(--gx)*12%),calc(var(--gy)*10%));transition:transform .4s cubic-bezier(.45,0,.25,1)}
.bo-eye,.bo-lid{transform-box:fill-box;transform-origin:50% 50%}
.bo-eye{transition:transform .3s cubic-bezier(.34,1.3,.5,1),opacity .2s ease}
.bo-lid{transition:transform .06s ease-in-out}
.bo.blink .bo-lid{transform:scaleY(.08)}
.bo[data-act=tilt] .bo-tilt{transform:rotate(-11deg)}
.bo[data-act=tilt-r] .bo-tilt{transform:rotate(11deg)}
.bo[data-act=hop-squash] .bo-move{transform:translateY(4%) scale(1.08,.9)}
.bo[data-act=hop-up] .bo-move{transform:translateY(-22%) scale(.95,1.06)}
.bo[data-act=hop-land] .bo-move{transform:translateY(3%) scale(1.06,.93)}
.bo[data-act^=hop] .bo-move{transition-duration:.14s;transition-timing-function:ease-out}
.bo[data-act=wiggle-l] .bo-tilt{transform:rotate(-12deg) translateX(-4%);transition-duration:.18s}
.bo[data-act=wiggle-r] .bo-tilt{transform:rotate(12deg) translateX(4%);transition-duration:.18s}
.bo[data-act=spin] .bo-move{animation:boSpin .9s cubic-bezier(.45,0,.25,1) both}
.bo[data-act=yawn] .bo-eye{transition-duration:.5s;transform-origin:50% 70%;transform:scale(1.05,.16)}
.bo[data-act=yawn] .bo-mouth{opacity:1;transform:scale(1,1.15)}
.bo[data-act=stretch] .bo-move{transform:translateY(-6%) scale(.92,1.12);transition-duration:.5s}
.bo[data-act=stretch] .bo-eye{transform:scale(1.05,.35)}
.bo[data-state=listening] .bo-tilt{transform:rotate(-8deg)}
.bo[data-state=listening] .bo-eye{transform:scale(1.14,1.18)}
.bo[data-state=listening] .bo-halo{opacity:calc(.35 + var(--lvl)*.65);transform:scale(calc(.9 + var(--lvl)*.35));transition-duration:.12s}
.bo[data-state=thinking] .bo-tilt{transform:rotate(6deg)}
.bo[data-state=thinking] .bo-eye{transform:scale(.95,.5)}
.bo[data-state=thinking] .bo-face{transform:translate(3%,-4%)}
.bo[data-state=thinking][data-act=ponder] .bo-face{transform:translate(-3%,-5%)}
.bo[data-state=speaking] .bo-eye{opacity:0}
.bo[data-state=speaking] .bo-happy{opacity:1}
.bo[data-state=speaking] .bo-tilt{transform:rotate(-5deg) translateY(1%);transition-duration:.5s}
.bo[data-state=speaking][data-act=sway-r] .bo-tilt{transform:rotate(5deg) translateY(-1%)}
.bo[data-state=speaking] .bo-move{transform:scale(calc(1 + var(--lvl)*.08));transition:transform .1s linear}
.bo[data-state=speaking] .bo-halo{opacity:calc(.25 + var(--lvl)*.6);transition-duration:.1s}
.bo[data-state=done] .bo-eye{opacity:0}
.bo[data-state=done] .bo-happy{opacity:1;animation:boSquint .5s ease-in-out .1s both}
.bo[data-state=done] .bo-move{animation:boNod .6s ease-out both}
@keyframes boSpin{0%{transform:none}20%{transform:translateY(-8%) scale(1.04,.96)}80%{transform:translateY(-8%) rotate(360deg)}100%{transform:rotate(360deg)}}
@keyframes boNod{35%{transform:translateY(7%) scale(1.04,.95)}70%{transform:translateY(-5%)}}
@keyframes boSquint{50%{transform:scaleY(.45)}}