.d4-mascot{display:inline-block;line-height:0;transition:transform var(--spring-spatial-dur) var(--spring-spatial),opacity var(--spring-effects-dur) var(--spring-effects)}
.d4-mascot svg{display:block;overflow:visible}
.d4-mascot .arm,.d4-mascot .fx-think,.d4-mascot .fx-celebrate{transform:scale(0)}
.d4-mascot .m-root,.d4-mascot .arm,.d4-mascot .tails,.d4-mascot .eyes,.d4-mascot .pupils,.d4-mascot .fx-think,.d4-mascot .fx-celebrate{transform-box:fill-box}
.d4-mascot .m-root{transform-origin:50% 100%}
.d4-mascot .pupils{transition:transform 120ms var(--ease-standard)}
.d4-mascot .eyes{transform-origin:50% 50%;animation:d4-blink 5s infinite}
.d4-mascot[data-mascot=nova] .eyes{animation-duration:4.4s}.d4-mascot[data-mascot=pixel] .eyes{animation-duration:5.2s}.d4-mascot[data-mascot=spark] .eyes{animation-duration:4.8s}.d4-mascot[data-mascot=vera] .eyes{animation-duration:5.8s}
.d4-mascot .arm{transform-origin:50% 8%}
.d4-mascot .tails{transform-origin:0% 40%;transform:rotate(var(--flutter,0deg));transition:transform 200ms var(--ease-standard)}
.d4-mascot.is-hop .m-root{animation:d4-hop 600ms var(--ease-standard)}
.pose-wave .arm-r{opacity:1;transform:rotate(-150deg);animation:d4-wave .7s ease-in-out infinite alternate}
.pose-wave .tablet,.pose-celebrate .tablet{transform:scale(0);transform-box:fill-box}
.pose-think .arm-r{opacity:1;transform:translateY(34px) rotate(95deg)}
.pose-think .m-root{transform:rotate(4deg);animation:d4-sway 2.4s ease-in-out infinite alternate}
.pose-think .fx-think{opacity:1;animation:d4-float 2.4s ease-in-out infinite alternate}
.pose-think .pupils{transform:translate(3px,-6px)}
.pose-celebrate .arm-l{opacity:1;transform:rotate(150deg);animation:d4-cheer-l .5s ease-in-out infinite alternate}
.pose-celebrate .arm-r{opacity:1;transform:rotate(-150deg);animation:d4-cheer-r .5s ease-in-out infinite alternate}
.pose-celebrate .fx-celebrate{opacity:1;animation:d4-float 1.2s ease-in-out infinite alternate}
.pose-celebrate .m-root{animation:d4-hop 1s var(--ease-standard) infinite}
.pose-celebrate .tails,.pose-wave .tails{animation:d4-flutter .5s ease-in-out infinite alternate}
.peek-left{transform:translateX(-70%);opacity:0}.peek-right{transform:translateX(70%);opacity:0}.peek-bottom{transform:translateY(60%);opacity:0}
@keyframes d4-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes d4-hop{0%{transform:translateY(0) scale(1,1)}25%{transform:translateY(0) scale(1.05,.93)}50%{transform:translateY(-16px) scale(.97,1.05)}75%{transform:translateY(0) scale(1.05,.94)}100%{transform:translateY(0) scale(1,1)}}
@keyframes d4-wave{from{transform:rotate(-132deg)}to{transform:rotate(-168deg)}}
@keyframes d4-cheer-l{from{transform:rotate(138deg)}to{transform:rotate(166deg)}}
@keyframes d4-cheer-r{from{transform:rotate(-138deg)}to{transform:rotate(-166deg)}}
@keyframes d4-sway{from{transform:rotate(3deg)}to{transform:rotate(6deg)}}
@keyframes d4-float{from{transform:translateY(0)}to{transform:translateY(-4px)}}
@keyframes d4-flutter{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}
@media (prefers-reduced-motion:reduce){.d4-mascot,.d4-mascot *{animation:none!important;transition:none!important}.peek-left,.peek-right,.peek-bottom{transform:none;opacity:1}}