.pip{--pip:var(--primary);--pip-glow:color-mix(in oklch,var(--pip) 20%,transparent);--pip-under:color-mix(in oklch,var(--pip) 78%,#073048);--ease-pop:cubic-bezier(0.2,1.4,0.4,1);--ease-settle:cubic-bezier(0.25,0.6,0.3,1);position:relative;display:inline-grid;place-items:center;width:var(--pip-size,96px);aspect-ratio:1}.pip svg{width:100%;height:100%;overflow:visible}.pip .pip-blob{filter:drop-shadow(0 3px 8px var(--pip-glow));transform-origin:50% 86%}.pip .pip-under{fill:var(--pip-under)}.pip .pip-body{fill:var(--pip)}.pip .pip-shine{fill:#fff;opacity:.32}.pip .pip-eye{fill:#fff;opacity:0}.pip .pip-pupil{fill:#0b1a22;opacity:0;transform-box:fill-box;transform-origin:center}.pip .pip-spark{fill:#fff;opacity:0}.pip .pip-calm{fill:#0b1a22;transform-box:fill-box;transform-origin:center}.pip .pip-arc,.pip .pip-lid{fill:none;stroke:#0b1a22;stroke-width:4.5;stroke-linecap:round;opacity:0}.pip .pip-ring{fill:none;stroke:var(--red);stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center}.pip .pip-dot{fill:var(--red);opacity:0}.pip .pip-baseline{stroke:#0b1a22;stroke-width:3;stroke-linecap:round;opacity:0}.pip .pip-tick{fill:none;stroke:var(--red);stroke-width:2.6;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:center}.pip[data-lane=azure]{--pip:var(--primary)}.pip[data-lane=red]{--pip:var(--red)}.pip[data-lane=yes]{--pip:var(--yes)}.pip[data-lane=no]{--pip:var(--no)}.pip[data-lane=muted]{--pip:var(--faint)}.pip[data-state=deadheat],.pip[data-state=float],.pip[data-state=settled],.pip[data-state=swing]{--pip:var(--primary)}.pip .pip-calm,.pip .pip-eye,.pip .pip-pupil{transition:opacity .18s ease}.pip[data-state=hello] :is(.pip-eye,.pip-pupil,.pip-spark),.pip[data-state=jump] :is(.pip-eye,.pip-pupil,.pip-spark),.pip[data-state=miss] :is(.pip-eye,.pip-pupil),.pip[data-state=settled] :is(.pip-eye,.pip-pupil,.pip-spark),.pip[data-state=swing] :is(.pip-eye,.pip-pupil,.pip-spark),.pip[data-state=thinking] :is(.pip-eye,.pip-pupil,.pip-spark){opacity:1}.pip:is([data-state=thinking],[data-state=hello],[data-state=jump],[data-state=swing],[data-state=miss],[data-state=won],[data-state=deadheat],[data-state=settled]) .pip-calm{opacity:0}.pip .pip-body-wrap{transform-origin:50% 86%}.pip[data-state=float] .pip-body-wrap,.pip[data-state=idle] .pip-body-wrap{animation:pip-bounce 2.4s var(--ease-pop) infinite}.pip:not([data-state=won]):not([data-state=deadheat]) .pip-eyes{animation:pip-blink 4.2s steps(1) infinite;transform-box:fill-box;transform-origin:center}.pip:not([data-state=thinking]):not([data-state=swing]):not([data-state=settled]):not([data-state=won]) :is(.pip-pupil,.pip-calm){animation:pip-look 5.5s ease-in-out infinite}@keyframes pip-look{0%,to{transform:translate(0)}18%{transform:translate(-1.6px,.4px)}42%{transform:translate(1.6px,-.4px)}64%{transform:translate(.6px,.9px)}84%{transform:translate(-.8px,-.3px)}}@keyframes pip-bounce{0%,to{transform:translateY(0) scaleY(1) scaleX(1)}30%{transform:translateY(-11%) scaleY(1.07) scaleX(.95)}55%{transform:translateY(0) scaleY(.9) scaleX(1.09)}72%{transform:translateY(-3%) scaleY(1.03) scaleX(.98)}}@keyframes pip-blink{0%,90%,to{transform:scaleY(1)}94%{transform:scaleY(.12)}}.pip[data-state=thinking] .pip-pupil{animation:pip-glance 2.2s ease-in-out infinite}.pip[data-state=thinking] .pip-blob{animation:pip-lean 2.2s ease-in-out infinite}@keyframes pip-glance{0%,to{transform:translateX(-2.5px)}50%{transform:translateX(2.5px)}}@keyframes pip-lean{0%,to{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}.pip[data-state=won] .pip-blob{animation:pip-won 1s var(--ease-pop)}.pip[data-state=won] .pip-arc{opacity:1}.pip[data-state=won] .pip-ring{animation:pip-ring .9s var(--ease-pop) forwards}@keyframes pip-won{0%{transform:translateY(-14%) scale(.86)}45%{transform:translateY(6%) scaleY(1.16) scaleX(.9)}70%{transform:translateY(0) scaleY(.94) scaleX(1.05)}to{transform:none}}@keyframes pip-ring{0%{opacity:.8;transform:scale(.5)}to{opacity:0;transform:scale(1.9)}}.pip[data-state=miss] .pip-blob{animation:pip-miss 1.1s var(--ease-settle)}.pip[data-state=miss] .pip-pupil{transform:translateY(1.6px);animation:none}@keyframes pip-miss{0%{transform:scaleY(1)}30%{transform:scaleY(.82) translateY(6%)}55%{transform:rotate(-3deg)}75%{transform:rotate(2deg)}to{transform:none}}.pip[data-state=climb] .pip-blob{animation:pip-hop .7s var(--ease-pop) infinite}@keyframes pip-hop{0%,to{transform:translateY(0) scaleY(1)}30%{transform:translateY(-22%) scaleY(1.1)}60%{transform:translateY(0) scaleY(.9)}}.pip[data-state=hello] .pip-blob{animation:pip-hello 1s var(--ease-pop)}@keyframes pip-hello{0%{transform:translateY(40%) scale(.6);opacity:.4}55%{transform:translateY(-8%) scaleY(1.14);opacity:1}to{transform:none}}.pip[data-state=jump] .pip-blob{animation:pip-jump 1.2s var(--ease-pop) infinite}@keyframes pip-jump{0%{transform:translateY(0) scaleY(1) scaleX(1)}12%{transform:translateY(7%) scaleY(.78) scaleX(1.18)}27%{transform:translateY(-6%) scaleY(1.12) scaleX(.9)}47%{transform:translateY(-44%) scaleY(1.08) scaleX(.93)}65%{transform:translateY(0) scaleY(.76) scaleX(1.2)}81%{transform:translateY(-7%) scaleY(1.05) scaleX(.97)}to{transform:translateY(0) scaleY(1) scaleX(1)}}.pip[data-state=float] .pip-dot{opacity:1;animation:pip-drift 3.6s ease-in-out infinite}@keyframes pip-drift{0%,to{transform:translate(0)}30%{transform:translate(3px,-2.5px)}60%{transform:translate(-3px,1.5px)}80%{transform:translate(1.5px,-1px)}}.pip[data-state=swing] .pip-dot{opacity:1;transform:translate(28px,2px);animation:pip-sway 2.6s ease-in-out infinite}@keyframes pip-sway{0%,to{transform:translate(28px,2px)}50%{transform:translate(20px,-2px)}}.pip[data-state=swing] .pip-blob{transform:rotate(7deg)}.pip[data-state=swing] .pip-pupil{transform:translate(2.6px,-1px);animation:none}.pip[data-state=deadheat] .pip-dot,.pip[data-state=deadheat] .pip-lid{opacity:1}.pip[data-state=settled] .pip-pupil{transform:translate(2px,2.6px);animation:none}.pip[data-state=settled] .pip-baseline{opacity:1}.pip[data-state=settled] .pip-dot{opacity:0;animation:pip-dot-settle 3.2s var(--ease-pop) infinite}.pip[data-state=settled] .pip-tick{animation:pip-tick 3.2s linear infinite}@keyframes pip-dot-settle{0%{transform:translate(42px,4px);opacity:0}7%{transform:translate(42px,4px);opacity:1;animation-timing-function:cubic-bezier(.45,0,.9,.35)}38%{transform:translate(42px,71.5px);opacity:1}46%{transform:translate(42px,61px)}54%{transform:translate(42px,71.5px)}60%{transform:translate(42px,67px)}66%{transform:translate(42px,71.5px)}90%{transform:translate(42px,71.5px);opacity:1}97%{transform:translate(42px,71.5px);opacity:0}to{transform:translate(42px,4px);opacity:0}}@keyframes pip-tick{0%,34%{opacity:0;transform:scale(.3)}40%{opacity:.9;transform:scale(1)}54%{opacity:0;transform:scale(1.4)}to{opacity:0}}@media (prefers-reduced-motion:reduce){.pip *{animation:none!important}.pip[data-state=settled] .pip-dot{opacity:1;transform:translate(42px,71.5px)}}