.milo svg *{transform-box:fill-box;transform-origin:50%}.milo [data-pivot]{transform-box:view-box}.milo .t{transition:transform .55s cubic-bezier(.34,1.56,.64,1),opacity .35s}.milo[data-paused=true] svg *,.milo[data-paused=true] .bubble{animation-play-state:paused!important}.milo .body{transform-origin:160px 320px;transform-box:view-box;animation:3.2s ease-in-out infinite m-breathe}.milo[data-e=joyful] .body{animation:.9s cubic-bezier(.3,0,.3,1) infinite m-hop}.milo[data-e=worried] .body{animation:.14s linear infinite m-shiver}.milo[data-e=sorrow] .body{animation:4s ease-in-out infinite m-slump}.milo[data-e=confused] .body{animation:2.6s ease-in-out infinite m-sway}@keyframes m-breathe{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-4px)scale(1.012,.994)}}@keyframes m-hop{0%,to{transform:translateY(0)scale(1.05,.93)}35%{transform:translateY(-26px)scale(.96,1.05)}60%{transform:translateY(-26px)scale(.97,1.04)rotate(3deg)}}@keyframes m-shiver{0%,to{transform:translate(-1.6px)}50%{transform:translate(1.6px)}}@keyframes m-slump{0%,to{transform:translateY(8px)scale(1.02,.95)}50%{transform:translateY(11px)scale(1.02,.94)}}@keyframes m-sway{0%,to{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}.milo .head{transform-origin:160px 200px;transform-box:view-box}.milo[data-e=happy] .head{animation:3.6s ease-in-out infinite m-nod}.milo[data-e=joyful] .head{animation:.45s ease-in-out infinite m-wiggle}.milo[data-e=worried] .head{animation:1.4s ease-in-out infinite m-glance}.milo[data-e=sorrow] .head{transform:translateY(10px)rotate(4deg)}.milo[data-e=confused] .head{animation:2.4s ease-in-out infinite m-tilt}@keyframes m-nod{0%,to{transform:rotate(-2deg)}50%{transform:rotate(3deg)translateY(2px)}}@keyframes m-wiggle{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}@keyframes m-glance{0%,to{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}@keyframes m-tilt{0%,to{transform:rotate(-10deg)}50%{transform:rotate(-14deg)translateY(2px)}}.milo .ear-l,.milo .ear-r{transform-origin:50% 100%}.milo[data-e=joyful] .ear-l{animation:.45s ease-in-out infinite m-ear-l}.milo[data-e=joyful] .ear-r{animation:.45s ease-in-out infinite m-ear-r}.milo[data-e=sorrow] .ear-l{transform:rotate(-26deg)translateY(6px)}.milo[data-e=sorrow] .ear-r{transform:rotate(26deg)translateY(6px)}.milo[data-e=worried] .ear-l{transform:rotate(-12deg)}.milo[data-e=worried] .ear-r{transform:rotate(12deg)}.milo[data-e=confused] .ear-l{transform:rotate(-14deg)translateY(-3px)}@keyframes m-ear-l{50%{transform:rotate(-12deg)translateY(-4px)}}@keyframes m-ear-r{50%{transform:rotate(12deg)translateY(-4px)}}.milo .lid{--lid:-62px;transform:translateY(var(--lid));transition:transform .45s cubic-bezier(.34,1.4,.64,1)}.milo[data-e=sorrow] .lid{--lid:-14px}.milo[data-e=worried] .lid{--lid:-50px}.milo[data-e=confused] .lid-r{--lid:-34px}.milo[data-e=joyful] .lid{--lid:-52px}.milo .lid-low{transition:transform .4s cubic-bezier(.34,1.56,.64,1);transform:translateY(58px)}.milo[data-e=happy] .lid-low{transform:translateY(-8px)}.milo[data-e=joyful] .lid-low{transform:translateY(-38px)}.milo .blink{animation:4.2s infinite m-blink;transform:translateY(-80px)}.milo .blink-r{animation-delay:0s}.milo[data-e=worried] .blink{animation-duration:1.7s}.milo[data-e=joyful] .blink{animation-duration:2.6s}@keyframes m-blink{0%,90%,to{transform:translateY(-80px)}94%{transform:translateY(54px)}}.milo .pupil{animation:5s infinite m-look-happy}.milo[data-e=joyful] .pupil{animation:.9s ease-in-out infinite m-look-joy}.milo[data-e=worried] .pupil{animation:1.1s step-end infinite m-look-worry}.milo[data-e=sorrow] .pupil{animation:5s ease-in-out infinite m-look-sad}.milo[data-e=confused] .pupil{animation:2.4s step-end infinite m-look-conf}@keyframes m-look-happy{0%,18%{transform:translate(0)}20%,42%{transform:translate(8px,-4px)}44%,66%{transform:translate(-7px,2px)}68%,to{transform:translate(4px,5px)}}@keyframes m-look-joy{0%,to{transform:translateY(-2px)scale(1.12)}50%{transform:translateY(-7px)scale(1.18)}}@keyframes m-look-worry{0%{transform:translate(-9px,-3px)scale(.82)}20%{transform:translate(9px,-2px)scale(.82)}40%{transform:translate(-6px,5px)scale(.82)}60%{transform:translate(10px,3px)scale(.82)}80%{transform:translate(-2px,-7px)scale(.82)}}@keyframes m-look-sad{0%,to{transform:translate(-3px,10px)}50%{transform:translate(3px,12px)}}@keyframes m-look-conf{0%{transform:translate(-9px,-6px)}25%{transform:translate(9px,-7px)}50%{transform:translateY(-8px)}75%{transform:translate(8px,3px)}}.milo .brow{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}.milo[data-e=happy] .brow-l{transform:translateY(-3px)rotate(-5deg)}.milo[data-e=happy] .brow-r{transform:translateY(-3px)rotate(5deg)}.milo[data-e=joyful] .brow-l{transform:translateY(-11px)rotate(-8deg)}.milo[data-e=joyful] .brow-r{transform:translateY(-11px)rotate(8deg)}.milo[data-e=worried] .brow-l{transform:translateY(-4px)rotate(-18deg)}.milo[data-e=worried] .brow-r{transform:translateY(-4px)rotate(18deg)}.milo[data-e=sorrow] .brow-l{transform:translateY(2px)rotate(-26deg)}.milo[data-e=sorrow] .brow-r{transform:translateY(2px)rotate(26deg)}.milo[data-e=confused] .brow-l{animation:1.6s ease-in-out infinite m-brow-up;transform:translateY(-13px)rotate(-6deg)}.milo[data-e=confused] .brow-r{transform:translateY(4px)rotate(10deg)}@keyframes m-brow-up{50%{transform:translateY(-17px)rotate(-10deg)}}.milo .beak{transform-origin:160px 150px;transform-box:view-box}.milo[data-e=joyful] .beak{animation:.45s ease-in-out infinite m-chirp}.milo[data-e=worried] .beak{animation:.12s linear infinite m-quiver}.milo[data-e=sorrow] .beak{transform:translateY(5px)scale(.92)}.milo[data-e=confused] .beak{transform:rotate(14deg)}@keyframes m-chirp{50%{transform:scale(1.18,.8)}}@keyframes m-quiver{50%{transform:translate(1.5px)}}.milo .blush{opacity:0}.milo[data-e=happy] .blush{opacity:.3}.milo[data-e=joyful] .blush{opacity:.7}.milo .wing-l{transform-origin:96px 196px;transform-box:view-box}.milo .wing-r{transform-origin:226px 196px;transform-box:view-box}.milo[data-e=happy] .wing-l{animation:1.5s ease-in-out infinite m-wave}.milo[data-e=joyful] .wing-l{animation:.45s ease-in-out infinite m-flap-l}.milo[data-e=joyful] .wing-r{animation:.45s ease-in-out infinite m-flap-r}.milo[data-e=worried] .wing-l{animation:.3s ease-in-out infinite m-wring;transform:rotate(150deg)}.milo[data-e=sorrow] .wing-l{transform:rotate(-4deg)}.milo[data-e=sorrow] .wing-r{transform:rotate(4deg)}.milo[data-e=confused] .wing-l{animation:.7s ease-in-out infinite m-scratch;transform:rotate(158deg)}@keyframes m-wave{0%,to{transform:rotate(120deg)}50%{transform:rotate(152deg)}}@keyframes m-flap-l{0%,to{transform:rotate(60deg)}50%{transform:rotate(150deg)}}@keyframes m-flap-r{0%,to{transform:rotate(-30deg)}50%{transform:rotate(-70deg)}}@keyframes m-wring{0%,to{transform:rotate(146deg)}50%{transform:rotate(154deg)}}@keyframes m-scratch{0%,to{transform:rotate(154deg)}50%{transform:rotate(164deg)}}.milo .phone{transform-origin:205px 262px;transform-box:view-box}.milo[data-e=joyful] .phone{animation:.9s ease-in-out infinite m-phone-up}.milo[data-e=sorrow] .phone{transform:rotate(10deg)translateY(6px)}@keyframes m-phone-up{0%,to{transform:translateY(0)rotate(-4deg)}35%{transform:translateY(-14px)rotate(6deg)}}.milo .chart-up,.milo .chart-down{transition:opacity .3s}.milo .chart-down,.milo[data-e=worried] .chart-up,.milo[data-e=sorrow] .chart-up{opacity:0}.milo[data-e=worried] .chart-down,.milo[data-e=sorrow] .chart-down{opacity:1}.milo .fx{opacity:0;transition:opacity .3s}.milo[data-e=joyful] .fx-joy,.milo[data-e=worried] .fx-worry,.milo[data-e=sorrow] .fx-sorrow,.milo[data-e=confused] .fx-confused{opacity:1}.milo .spark{animation:.9s ease-in-out infinite m-spark}.milo .spark:nth-child(2){animation-delay:.3s}.milo .spark:nth-child(3){animation-delay:.6s}@keyframes m-spark{0%,to{opacity:.2;transform:scale(.4)rotate(0)}50%{opacity:1;transform:scale(1.15)rotate(25deg)}}.milo .sweat{animation:1.2s ease-in infinite m-sweat}@keyframes m-sweat{0%{opacity:0;transform:translateY(-6px)scale(.6)}30%{opacity:1}to{opacity:0;transform:translateY(26px)scale(1)}}.milo .tear{animation:2.2s ease-in infinite m-tear}.milo .tear-2{animation-delay:1.1s}@keyframes m-tear{0%{opacity:0;transform:translateY(-4px)scale(.5)}25%{opacity:1}to{opacity:0;transform:translateY(70px)scale(1)}}.milo .qmark{animation:1.6s ease-in-out infinite m-qmark}@keyframes m-qmark{0%,to{transform:translateY(0)rotate(-12deg)scale(1)}50%{transform:translateY(-8px)rotate(12deg)scale(1.12)}}.milo .bubble{transform-origin:20% 100%;animation:.5s cubic-bezier(.34,1.56,.64,1) both m-pop}@keyframes m-pop{0%{opacity:0;transform:scale(.6)translateY(8px)}to{opacity:1;transform:scale(1)translateY(0)}}@media (prefers-reduced-motion:reduce){.milo svg *,.milo .bubble{transition:none!important;animation:none!important}}