@layer components{.mascot{z-index:10;pointer-events:none;-webkit-user-select:none;user-select:none;rotate:var(--mascot-tilt,0deg);transform-origin:50% 100%;animation:5.5s ease-in-out infinite alternate mascot-sway;display:block;position:absolute}.mascot--perch{translate:0 calc((1 - var(--mascot-edge,.95)) * 100%);bottom:100%}.mascot img{width:auto;max-width:none;height:100%;display:block}.mascot--flip img{scale:-1 1}@supports (animation-timeline:view()){.mascot img{animation:linear both mascot-peek;animation-timeline:view();animation-range:entry}}@media (prefers-color-scheme:dark){.mascot img{filter:drop-shadow(2px 0 #f5f0e6)drop-shadow(-2px 0 #f5f0e6)drop-shadow(0 2px #f5f0e6)drop-shadow(0 -2px #f5f0e6)}}.dark .mascot img{filter:drop-shadow(2px 0 #f5f0e6)drop-shadow(-2px 0 #f5f0e6)drop-shadow(0 2px #f5f0e6)drop-shadow(0 -2px #f5f0e6)}@media (prefers-reduced-motion:reduce){.mascot,.mascot img{animation:none}}@media print{.mascot{display:none}}}@keyframes mascot-sway{0%{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)translateY(-3px)}}@keyframes mascot-peek{0%{opacity:0;transform:translateY(14%)rotate(-7deg)scale(.92)}to{opacity:1;transform:none}}