:root{color-scheme:light;background:#f7f6f0}
*{box-sizing:border-box}
html,body{margin:0;min-width:240px;min-height:100%;overflow-x:hidden}
body{background:#f7f6f0}
main{min-height:100svh;min-height:100dvh;display:grid;place-items:center;overflow:hidden;padding:36px 20px}
.mascot-stage{position:relative;width:min(480px,78vw,calc((100svh - 100px)*.714286));aspect-ratio:5/7;isolation:isolate}
.mascot{position:relative;display:block;appearance:none;border:0;background:none;margin:0;padding:0;width:100%;height:100%;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transform-origin:50% 92%;outline:none;user-select:none}
.mascot:focus-visible{outline:2px solid #6c7955;outline-offset:16px;border-radius:45%}
.mascot-crop{display:block;position:relative;width:100%;height:100%;overflow:hidden;transform-origin:50% 92%;animation:breathe 4.8s ease-in-out infinite}
.mascot-crop img{position:absolute;display:block;width:170.666667%;height:182.857143%;max-width:none;left:-33.333333%;top:-40.47619%;pointer-events:none;user-select:none}
canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.rendered canvas{opacity:1}
.rendered img{visibility:hidden}
.rendered .mascot-crop{animation:none}
.ground-shadow{position:absolute;z-index:-1;left:35%;right:25%;height:2.8%;bottom:4.7%;border-radius:50%;background:#50391e;filter:blur(12px);opacity:.13;transform-origin:center;transition:opacity .15s}
.paused .mascot-crop{animation-play-state:paused}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.004,1.009)}}
@media(max-width:600px){main{padding:28px 20px}.mascot-stage{width:min(400px,87vw,calc((100svh - 100px)*.714286))}}
@media(prefers-reduced-motion:reduce){.mascot-crop{animation:none}}