/* lifted from the original SVG, scoped under .g */
.g{--eye:#3FD9E6}
.g .float{transform-box:fill-box;transform-origin:50% 100%;animation:g-float 3.9s ease-in-out infinite}
@keyframes g-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.g .face{transition:opacity .2s}
.g .dot,.g .heart,.g .shades{fill:var(--eye)}
.g .arc,.g .xeye{fill:none;stroke:var(--eye);stroke-linecap:round}
.g .arc{stroke-width:5}.g .xeye{stroke-width:4.5}
.g .arc,.g .heart,.g .xeye,.g .shades{opacity:0;transition:opacity .15s}
.g .eyes{transform-box:fill-box;transform-origin:center;animation:g-blink 5.4s infinite}
@keyframes g-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}97.5%{transform:scaleY(1)}}
.g .gaze,.g .eye{transform-box:fill-box;transform-origin:center}
.g .mouth>*{transform-box:fill-box;transform-origin:center;fill:var(--eye);opacity:0;transition:opacity .15s}
.g .m-smile{opacity:1}
.g .m-smile,.g .m-frown,.g .m-squig,.g .m-spin{fill:none;stroke:var(--eye);stroke-linecap:round}
.g .m-smile,.g .m-frown{stroke-width:4.5}.g .m-squig{stroke-width:4}
.g .m-spin{stroke-width:4;stroke-dasharray:17 46}
.g .m-bars rect{transform-box:fill-box;transform-origin:center;fill:var(--eye)}
.g .scan,.g .alert{opacity:0}
.g .scan{fill:var(--eye);transform-box:fill-box;transform-origin:center}
.g .alert{fill:var(--eye)}
.g .ring,.g .dots,.g .zzz,.g .qmark,.g .spark{opacity:0}
.g .ring{transform-box:fill-box;transform-origin:center;fill:none;stroke:var(--eye);stroke-width:2}
.g .dots circle,.g .zzz text,.g .qmark text,.g .spark{fill:#8A9098}
.g .dots circle,.g .zzz text,.g .qmark,.g .spark{transform-box:fill-box;transform-origin:center}

/* core */
.s-listening .m-smile{opacity:0}
.s-listening .m-o{opacity:1;animation:g-pulse 1.7s ease-in-out infinite}
@keyframes g-pulse{0%,100%{transform:scale(.75)}50%{transform:scale(1.12)}}
.s-listening .ring{opacity:1;animation:g-ring 2.1s ease-out infinite}
.s-listening .ring.b{animation-delay:1.05s}
@keyframes g-ring{0%{opacity:.4;transform:scale(.78)}100%{opacity:0;transform:scale(1.08)}}

.s-talking .m-smile{opacity:0}.s-talking .m-bars{opacity:1}
.s-talking .m-bars rect{animation:g-bar .62s ease-in-out infinite}
.s-talking .m-bars rect:nth-child(2){animation-delay:.1s}
.s-talking .m-bars rect:nth-child(3){animation-delay:.22s}
.s-talking .m-bars rect:nth-child(4){animation-delay:.34s}
.s-talking .m-bars rect:nth-child(5){animation-delay:.46s}
@keyframes g-bar{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(1)}}
.s-talkingfast .m-smile{opacity:0}.s-talkingfast .m-bars{opacity:1}
.s-talkingfast .m-bars rect{animation:g-bar .26s steps(2,end) infinite}
.s-talkingfast .m-bars rect:nth-child(2){animation-delay:.07s}
.s-talkingfast .m-bars rect:nth-child(3){animation-delay:.13s}
.s-talkingfast .m-bars rect:nth-child(4){animation-delay:.19s}
.s-talkingfast .m-bars rect:nth-child(5){animation-delay:.04s}

.s-success .dot{opacity:0}.s-success .arc{opacity:1}
.s-success .m-smile{opacity:0}.s-success .m-big{opacity:1}
.s-success .eyes{animation:none}
.s-success .float{animation:g-nod 1.5s ease-in-out infinite}
@keyframes g-nod{0%,100%{transform:translateY(0) scaleY(1)}15%{transform:translateY(4px) scaleY(.95)}32%{transform:translateY(-2px) scaleY(1.02)}48%{transform:translateY(4px) scaleY(.95)}64%{transform:translateY(0) scaleY(1)}}

.s-error{--eye:#FF3B2F}
.s-error .m-smile{opacity:0}.s-error .m-line{opacity:1}
.s-error .alert{animation:g-alert 1.9s ease-in-out infinite}
@keyframes g-alert{0%,64%,100%{opacity:0}72%{opacity:.22}80%{opacity:0}88%{opacity:.18}}
.s-error .float{animation:g-shake 1.9s ease-in-out infinite}
@keyframes g-shake{0%,62%,100%{transform:translateX(0)}70%{transform:translateX(-6px)}77%{transform:translateX(6px)}84%{transform:translateX(-4px)}91%{transform:translateX(3px)}}

.s-sleeping .eyes{animation:none;transform:scaleY(.14)}
.s-sleeping .m-smile{opacity:0}
.s-sleeping .m-dot{opacity:1;animation:g-snore 4.4s ease-in-out infinite}
@keyframes g-snore{0%,100%{transform:scale(.7)}50%{transform:scale(1.2)}}
.s-sleeping .face{opacity:.5}
.s-sleeping .float{animation-duration:6.4s}
.s-sleeping .zzz{opacity:1}
.s-sleeping .zzz text{animation:g-zz 3s ease-in-out infinite}
.s-sleeping .zzz text:nth-child(2){animation-delay:1s}
.s-sleeping .zzz text:nth-child(3){animation-delay:2s}
@keyframes g-zz{0%{opacity:0;transform:translate(0,6px)}25%{opacity:1}100%{opacity:0;transform:translate(8px,-16px)}}

.s-wink .eyes{animation:none}
.s-wink .m-smile{opacity:0}.s-wink .m-big{opacity:1}
.s-wink .eye.r{animation:g-wink 3.1s ease-in-out infinite}
@keyframes g-wink{0%,58%,100%{transform:scaleY(1)}68%,80%{transform:scaleY(.1)}}
.s-wink .float{animation:g-tilt 3.1s ease-in-out infinite}
@keyframes g-tilt{0%,52%,100%{transform:rotate(0)}70%{transform:rotate(-5deg)}}

/* working */
.s-thinking .m-smile{opacity:0}.s-thinking .m-dot{opacity:1}
.s-thinking .gaze{animation:g-ponder 3.2s ease-in-out infinite}
@keyframes g-ponder{0%,100%{transform:translate(3px,-3px)}50%{transform:translate(-2.5px,-3.5px)}}
.s-thinking .dots{opacity:1}
.s-thinking .dots circle{animation:g-dotb 1.2s ease-in-out infinite}
.s-thinking .dots circle:nth-child(2){animation-delay:.15s}
.s-thinking .dots circle:nth-child(3){animation-delay:.3s}
@keyframes g-dotb{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-5px);opacity:1}}

.s-loading .m-smile{opacity:0}
.s-loading .m-spin{opacity:1;animation:g-spin 1.1s linear infinite}
@keyframes g-spin{to{transform:rotate(360deg)}}

.s-typing .m-smile{opacity:0}.s-typing .m-typing{opacity:1}
.s-typing .m-typing circle{transform-box:fill-box;transform-origin:center;animation:g-dotb 1.1s ease-in-out infinite}
.s-typing .m-typing circle:nth-child(2){animation-delay:.14s}
.s-typing .m-typing circle:nth-child(3){animation-delay:.28s}

.s-focus .eyes{animation:none;transform:scaleY(.4)}
.s-focus .m-smile{opacity:0}.s-focus .m-line{opacity:1}
.s-focus .float{animation:g-vibe .13s linear infinite}
@keyframes g-vibe{0%,100%{transform:translate(0,0)}25%{transform:translate(.7px,-.5px)}50%{transform:translate(-.6px,.4px)}75%{transform:translate(.4px,.6px)}}

.s-boot .m-smile{opacity:0}.s-boot .m-line{opacity:1}
.s-boot .eyes{animation:none}
.s-boot .face{animation:g-bootface 2.8s ease-out infinite}
@keyframes g-bootface{0%,40%{opacity:0}48%{opacity:.4}54%{opacity:.1}62%,100%{opacity:1}}
.s-boot .gaze{animation:g-bootin 2.8s ease-out infinite}
@keyframes g-bootin{0%,44%{transform:scale(.5)}60%{transform:scale(1.15)}72%,100%{transform:scale(1)}}
.s-boot .scan{opacity:1;animation:g-scan 2.8s ease-in-out infinite}
@keyframes g-scan{0%{transform:translateY(0);opacity:.9}42%{transform:translateY(38px);opacity:.9}52%,100%{opacity:0;transform:translateY(38px)}}

.s-confused .m-smile{opacity:0}.s-confused .m-squig{opacity:1}
.s-confused .eye.l{transform:scale(.78)}
.s-confused .qmark{opacity:1;animation:g-qfloat 2.6s ease-in-out infinite}
@keyframes g-qfloat{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-6px);opacity:1}}
.s-confused .float{animation:g-wobble 3s ease-in-out infinite}
@keyframes g-wobble{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

.s-curious .m-smile{opacity:0}.s-curious .m-dot{opacity:1}
.s-curious .eye.l{transform:scale(1.22)}
.s-curious .float{animation:g-tiltloop 3.4s ease-in-out infinite}
@keyframes g-tiltloop{0%,100%{transform:rotate(0)}40%,62%{transform:rotate(7deg)}}

/* feeling */
.s-happy .dot{opacity:0}.s-happy .arc{opacity:1}
.s-happy .m-smile{opacity:0}.s-happy .m-big{opacity:1}
.s-happy .eyes{animation:none}
.s-happy .float{animation:g-hop .72s ease-in-out infinite}
@keyframes g-hop{0%,100%{transform:translateY(0) scaleY(1)}22%{transform:translateY(-10px) scaleY(1.02)}55%{transform:translateY(0) scaleY(.98)}75%{transform:translateY(-2px) scaleY(1)}}

.s-laugh .dot{opacity:0}.s-laugh .arc{opacity:1}
.s-laugh .eyes{animation:none}
.s-laugh .m-smile{opacity:0}
.s-laugh .m-big{opacity:1;animation:g-laughm .28s ease-in-out infinite}
@keyframes g-laughm{0%,100%{transform:scaleY(.82)}50%{transform:scaleY(1.18)}}
.s-laugh .float{animation:g-laughb .56s ease-in-out infinite}
@keyframes g-laughb{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}

.s-love{--eye:#FF6B8A}
.s-love .dot{opacity:0}.s-love .heart{opacity:1}
.s-love .eyes{animation:none}
.s-love .gaze{animation:g-beat 1s ease-in-out infinite}
@keyframes g-beat{0%,100%{transform:scale(1)}28%{transform:scale(1.2)}58%{transform:scale(1.02)}}
.s-love .m-smile{opacity:0}.s-love .m-big{opacity:1}
.s-love .float{animation-duration:2.4s}

.s-celebrate{--eye:#F2A31B}
.s-celebrate .dot{opacity:0}.s-celebrate .arc{opacity:1}
.s-celebrate .m-smile{opacity:0}.s-celebrate .m-big{opacity:1}
.s-celebrate .eyes{animation:none}
.s-celebrate .float{animation:g-hop .68s ease-in-out infinite}
.s-celebrate .spark{opacity:1;animation:g-spark 1.3s ease-out infinite}
.s-celebrate .spark:nth-child(2){animation-delay:.32s}
.s-celebrate .spark:nth-child(3){animation-delay:.64s}
.s-celebrate .spark:nth-child(4){animation-delay:.96s}
@keyframes g-spark{0%{opacity:0;transform:scale(.2) rotate(0)}40%{opacity:1;transform:scale(1.15) rotate(35deg)}100%{opacity:0;transform:scale(.4) rotate(80deg)}}

.s-surprised .m-smile{opacity:0}.s-surprised .m-o{opacity:1;animation:g-popm 2.8s ease-out infinite}
.s-surprised .eyes{animation:none}
.s-surprised .gaze{animation:g-pope 2.8s ease-out infinite}
@keyframes g-pope{0%,6%{transform:scale(1)}13%{transform:scale(1.35)}45%,100%{transform:scale(1.18)}}
@keyframes g-popm{0%,6%{transform:scale(.5)}15%{transform:scale(1.25)}48%,100%{transform:scale(1)}}
.s-surprised .float{animation:g-jolt 2.8s ease-out infinite}
@keyframes g-jolt{0%,6%{transform:translateY(0)}13%{transform:translateY(-7px)}34%,100%{transform:translateY(0)}}

.s-sad .m-smile{opacity:0}.s-sad .m-frown{opacity:1}
.s-sad .gaze{transform:translateY(4px)}
.s-sad .eye{transform:scaleY(.78)}
.s-sad .eyes{animation:g-blink 6.5s infinite}
.s-sad .face{opacity:.8}
.s-sad .float{animation:g-sink 4.6s ease-in-out infinite}
@keyframes g-sink{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

.s-cool .dot{opacity:0}.s-cool .shades{opacity:1}
.s-cool .eyes{animation:none}
.s-cool .m-smile{opacity:0}.s-cool .m-big{opacity:1}
.s-cool .float{animation:g-groove 1.7s ease-in-out infinite}
@keyframes g-groove{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-4px) rotate(2.5deg)}}

.s-dizzy .dot{opacity:0}.s-dizzy .xeye{opacity:1}
.s-dizzy .eyes{animation:none}
.s-dizzy .m-smile{opacity:0}.s-dizzy .m-squig{opacity:1}
.s-dizzy .float{animation:g-sway 1.9s ease-in-out infinite}
@keyframes g-sway{0%,100%{transform:translateX(-4px) rotate(-6deg)}50%{transform:translateX(4px) rotate(6deg)}}

@media (prefers-reduced-motion:reduce){.g *{animation:none!important}}