.mascot{border:2px solid var(--line);width:min(100%,22rem);box-shadow:6px 6px 0 var(--shadow);background:#dfe9ff;margin-inline:auto;padding:1.25rem 1.25rem .75rem;position:relative}.mascot__sprite{transform-origin:50% 100%;width:100%;height:auto;display:block}.mascot__alert{color:#fff;width:2rem;height:2rem;font-family:var(--font-display);opacity:0;background:#d5430f;border:2px solid #3a0d04;place-items:center;font-size:1.25rem;font-weight:700;line-height:1;transition:opacity .12s ease-out,transform .12s ease-out;display:grid;position:absolute;top:.75rem;right:.75rem;transform:translateY(4px)}@media (hover:hover) and (pointer:fine){.mascot:hover .mascot__sprite{animation:.28s ease-out mascot-hop}.mascot:hover .mascot__alert{opacity:1;transform:none}}.mascot:active .mascot__alert{opacity:1;transform:none}@keyframes mascot-hop{40%{transform:translateY(-.75rem)}}@media (prefers-reduced-motion:reduce){.mascot:hover .mascot__sprite{animation:none}.mascot__alert{transition:none;transform:none}}