.mascot{display:block;position:relative;width:100%;max-width:570px;aspect-ratio:760/660;background:none;border:0;padding:0;touch-action:pan-y}.face{width:100%;height:100%;overflow:visible}.face-motion{transform-origin:380px 355px}.eye-blink{transform-box:fill-box;transform-origin:center}.left-eye.blink,.right-eye.blink{animation:blink .32s ease-in-out}.mascot.is-excited .eye-blink{animation:happy-eyes 1.1s ease-in-out}.mascot.is-winking .left-eye{animation:none}.mascot.is-winking .right-eye{animation:wink 1.1s cubic-bezier(.4,0,.2,1)}.spark{position:absolute;color:var(--yellow);font-size:37px;opacity:0;pointer-events:none}.spark-one{top:15%;left:8%;--turn:-20deg}.spark-two{top:32%;right:1%;--turn:25deg;font-size:28px}.spark-three{bottom:17%;right:8%;--turn:-15deg;font-size:22px}.mascot.is-excited .spark{animation:spark 1s ease-out}.mascot.is-excited .spark-two{animation-delay:.1s}.mascot.is-excited .spark-three{animation-delay:.2s}.interaction-hint{font-size:11px;color:var(--muted);display:flex;gap:9px;align-items:center;margin-top:14px;min-height:30px}.interaction-hint>span:first-child{color:var(--yellow);font-size:24px}@keyframes blink{0%,100%{transform:scaleY(1)}45%,55%{transform:scaleY(.12)}}@keyframes wink{0%,100%{transform:scale(1,1) rotate(0)}25%,50%{transform:scale(1.04,.1) rotate(-7deg)}82%{transform:scale(1,1) rotate(0)}}@keyframes happy-eyes{0%,100%{transform:scale(1) rotate(0)}28%{transform:scale(1.07) rotate(9deg)}53%{transform:scale(.98) rotate(-4deg)}74%{transform:scale(1.03) rotate(3deg)}}@keyframes spark{0%{opacity:0;transform:scale(.2)}30%{opacity:1;transform:scale(1) rotate(var(--turn))}100%{opacity:0;transform:scale(.6) translateY(-35px) rotate(var(--turn))}}