.aoi{--arm-l:4deg;--arm-r:4deg;display:block;overflow:visible}.aoi *{transform-box:view-box}.aoi-char{transform-origin:80px 150px}.aoi-body{transform-origin:80px 148px}.aoi-head{transform-origin:80px 100px}.aoi-eyes{transform-origin:80px 72px}.aoi-arm{transform-origin:56px 109px}.aoi-arm-l{transform:rotate(var(--arm-l))}.aoi-arm-r{transform:rotate(var(--arm-r))}.aoi-ahoge{transform-origin:79px 25px}.aoi[data-state=happy]{--arm-r:145deg}.aoi[data-state=thinking]{--arm-r:-122deg}.aoi[data-state=thinking] .aoi-head{transform:rotate(-3deg)}.aoi[data-state=sad]{--arm-l:2deg;--arm-r:2deg}.aoi[data-state=sad] .aoi-head{transform:translateY(2px)rotate(2deg)}.aoi[data-state=sad] .aoi-char{transform:translateY(2px)}.aoi[data-state=celebrate]{--arm-l:142deg;--arm-r:142deg}.aoi[data-state=empty]{--arm-l:-17deg;--arm-r:-17deg}.aoi[data-state=empty] .aoi-head{transform:rotate(2deg)}.aoi-confetti-piece{transform:translate(var(--tx), var(--ty)) rotate(var(--rot))}@media (prefers-reduced-motion:no-preference){.aoi-body{animation:3.4s ease-in-out infinite aoi-breathe}.aoi-char{animation:3.4s ease-in-out infinite aoi-bob}.aoi-eyes--open,.aoi-eyes--look-up{animation:4.2s ease-in-out infinite aoi-blink}.aoi-ahoge{animation:3s ease-in-out infinite aoi-sway}.aoi-sparkle{animation:1.6s ease-in-out infinite aoi-twinkle}.aoi[data-state=happy] .aoi-char{animation:1.8s ease-out infinite aoi-hop}.aoi[data-state=happy] .aoi-arm-r{animation:.55s ease-in-out infinite alternate aoi-wave}.aoi[data-state=thinking] .aoi-head{animation:3.2s ease-in-out infinite alternate aoi-tilt}.aoi[data-state=thinking] .aoi-dots circle{animation:1.4s ease-in-out infinite aoi-dot}.aoi[data-state=thinking] .aoi-dots circle:nth-child(2){animation-delay:.25s}.aoi[data-state=thinking] .aoi-dots circle:nth-child(3){animation-delay:.5s}.aoi[data-state=sad] .aoi-char{animation:4s ease-in-out infinite aoi-droop}.aoi[data-state=sad] .aoi-tear{animation:2.6s ease-in infinite aoi-tear}.aoi[data-state=sad] .aoi-tear--r{animation-delay:1.1s}.aoi[data-state=sad] .aoi-gloom{animation:2.4s ease-in-out infinite aoi-twinkle}.aoi[data-state=celebrate] .aoi-char{animation:.9s ease-in-out infinite aoi-jump}.aoi[data-state=celebrate] .aoi-arm-l,.aoi[data-state=celebrate] .aoi-arm-r{animation:.45s ease-in-out infinite alternate aoi-cheer}.aoi[data-state=celebrate] .aoi-confetti-piece{animation:1.8s ease-out infinite aoi-confetti}.aoi[data-state=empty] .aoi-char{animation:3.8s ease-in-out infinite aoi-rock}.aoi[data-state=empty] .aoi-z{animation:3s ease-in-out infinite aoi-float}.aoi[data-state=empty] .aoi-z--2{animation-delay:.7s}.aoi[data-state=empty] .aoi-z--3{animation-delay:1.4s}}:root[data-mascot-paused] .aoi *,:root[data-mascot-paused] .mascot-img{animation-play-state:paused!important}@keyframes aoi-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.015,1.025)}}@keyframes aoi-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-1.6px)}}@keyframes aoi-blink{0%,92%,to{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}@keyframes aoi-sway{0%,to{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}@keyframes aoi-twinkle{0%,to{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}@keyframes aoi-hop{0%,22%,44%,to{transform:translateY(0)scale(1)}11%,33%{transform:translateY(-9px)scale(.98,1.03)}21%,43%{transform:translateY(0)scale(1.04,.95)}}@keyframes aoi-wave{0%{transform:rotate(128deg)}to{transform:rotate(160deg)}}@keyframes aoi-tilt{0%{transform:rotate(-4deg)}to{transform:rotate(4deg)}}@keyframes aoi-dot{0%,to{opacity:.2}40%{opacity:1}}@keyframes aoi-droop{0%,to{transform:translateY(2px)}50%{transform:translateY(4px)}}@keyframes aoi-tear{0%{opacity:0;transform:translateY(-2px)}15%{opacity:1}85%{opacity:.9;transform:translateY(13px)}to{opacity:0;transform:translateY(16px)}}@keyframes aoi-jump{0%,to{transform:translateY(0)scale(1.03,.96)}45%{transform:translateY(-14px)scale(.97,1.04)}}@keyframes aoi-cheer{0%{transform:rotate(125deg)}to{transform:rotate(158deg)}}@keyframes aoi-confetti{0%{opacity:0;transform:translate(0)rotate(0)scale(.4)}15%{opacity:1}80%{opacity:1}to{transform:translate(var(--tx), calc(var(--ty) + 22px)) rotate(var(--rot)) scale(1);opacity:0}}@keyframes aoi-rock{0%,to{transform:rotate(-1.8deg)}50%{transform:rotate(1.8deg)}}@keyframes aoi-float{0%{opacity:0;transform:translateY(6px)}30%{opacity:1}to{opacity:0;transform:translate(4px,-8px)}}.mascot-img{object-fit:contain;display:block}