.mascot{position:relative;z-index:0;display:block;width:230px;max-width:100%;aspect-ratio:1;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;flex-shrink:0;border-radius:24px;touch-action:manipulation}
.mascot--sm{width:120px}.mascot--lg{width:300px}
.mascot:focus-visible{outline:3px solid var(--ink,currentColor);outline-offset:4px}
.mascot img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .4s ease;pointer-events:none;transform-origin:50% 90%}
.mascot img.is-visible{opacity:1}
.mascot[data-animated="false"] img{transition:none}
.mascot[data-animated="true"] img.is-visible[data-pose="default"],
.mascot[data-animated="true"] img.is-visible[data-pose="break"]{animation:mascot-breathe 6s ease-in-out infinite}
.mascot[data-animated="true"] img.is-visible[data-pose="focus"]{animation:mascot-breathe 8s ease-in-out infinite}
.mascot[data-animated="true"] img.is-visible[data-pose="radio"]{animation:mascot-sway 3.6s ease-in-out infinite}
.mascot[data-animated="true"] img.is-visible[data-pose="completed"]{animation:mascot-celebrate .9s ease-out 1}
.mascot[data-animated="true"] img.is-visible[data-pose="rabugenta"]{animation:mascot-grumble .5s ease-in-out 2}
@keyframes mascot-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.004)}}
@keyframes mascot-sway{0%,100%{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
@keyframes mascot-celebrate{0%,100%{transform:translateY(0) scale(1) rotate(0)}35%{transform:translateY(-10px) rotate(-3deg)}65%{transform:translateY(0) scale(1.015,.985) rotate(2deg)}80%{transform:scale(.995,1.005)}}
@keyframes mascot-grumble{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-4px) rotate(-1.5deg)}40%{transform:translateX(4px) rotate(1.5deg)}60%{transform:translateX(-3px) rotate(-1deg)}80%{transform:translateX(2px) rotate(.5deg)}}
@media(prefers-reduced-motion:reduce){.mascot img{animation:none!important;transition:none!important}}