.mf-playground{position:fixed;inset:0;pointer-events:none;z-index:87;--toy-size:54px;--hand-x:calc(100vw - 81px);--hand-y:calc(100dvh - 100px);overflow:hidden}
.mf-toy-wheel{position:absolute;left:calc(var(--hand-x) - var(--toy-size)/2);top:calc(var(--hand-y) - var(--toy-size)/2);width:var(--toy-size);height:var(--toy-size);filter:drop-shadow(0 5px 3px #0003);animation:mf-throw-roll-catch 24s linear 2s infinite both;z-index:1}
.mf-toy-wheel>svg{width:100%;height:100%;display:block}
.mf-toy-hand{position:absolute;top:calc(var(--hand-y) + 4px);width:20px;height:24px;animation:mf-catch-hands 24s ease-in-out 2s infinite both;z-index:2}.mf-toy-hand>svg{width:100%;height:100%}.mf-toy-hand-left{left:calc(var(--hand-x) - 32px)}.mf-toy-hand-right{left:calc(var(--hand-x) + 12px);scale:-1 1}
.mf-toy-player .mf-mascot{animation:mf-toss-body 24s ease-in-out 2s infinite}
@keyframes mf-throw-roll-catch{
 0%,7%{transform:translate(0,0) rotate(0);animation-timing-function:cubic-bezier(.16,.75,.3,1)}
 17%{transform:translate(-12vw,-48vh) rotate(-250deg);animation-timing-function:ease-in}
 29%{transform:translate(calc(36px - var(--hand-x)),-14px) rotate(-660deg);animation-timing-function:ease-out}
 34%{transform:translate(calc(65px - var(--hand-x)),-65px) rotate(-760deg);animation-timing-function:ease-in}
 39%{transform:translate(calc(92px - var(--hand-x)),34px) rotate(-860deg);animation-timing-function:linear}
 58%{transform:translate(-18vw,34px) rotate(280deg);animation-timing-function:ease-in-out}
 71%{transform:translate(-62vw,34px) rotate(-420deg);animation-timing-function:cubic-bezier(.16,.75,.3,1)}
 80%{transform:translate(-35vw,-30vh) rotate(-760deg);animation-timing-function:ease-in}
 89%,100%{transform:translate(0,0) rotate(-1080deg)}
}
@keyframes mf-catch-hands{0%,7%,89%,100%{opacity:1;translate:0 0}12%{opacity:1;translate:0 -17px}15%,83%{opacity:0;translate:0 0}87%{opacity:1;translate:0 -9px}}
@keyframes mf-toss-body{0%,6%,17%,84%,100%{transform:rotate(0) translateY(0)}10%{transform:rotate(-7deg) translateY(4px)}13%{transform:rotate(5deg) translateY(-8px)}86%{transform:rotate(-5deg) translateY(-4px)}90%{transform:rotate(3deg) translateY(3px)}94%{transform:rotate(0) translateY(0)}}
body:has(dialog[open]) .mf-playground{visibility:hidden}body:has(dialog[open]) .mf-playground *{animation-play-state:paused!important}
@media(max-width:700px){.mf-playground{--toy-size:43px;--hand-x:calc(100vw - 59px);--hand-y:calc(100dvh - 80px)}.mf-toy-hand{width:16px;height:20px}.mf-toy-hand-left{left:calc(var(--hand-x) - 25px)}.mf-toy-hand-right{left:calc(var(--hand-x) + 9px)}}
@media(prefers-reduced-motion:reduce){.mf-playground{display:none}.mf-toy-player .mf-mascot{animation:none!important}}