.mode-demo{height:6.8rem;position:relative;overflow:hidden;border-radius:1rem;background:linear-gradient(#d9eff5,#e9e0f5);max-width:24rem;margin:.55rem auto;color:#65547d;contain:layout paint}.mode-demo span{position:absolute;box-sizing:border-box}.demo-floor{left:5%;right:5%;bottom:1.45rem;height:.65rem;background:#94d8ca;border-bottom:.2rem solid #72b8b5;border-radius:.35rem}.demo-bean,.demo-other{width:1.15rem;height:1.6rem;bottom:2.05rem;left:13%;background:#ed82b1;border-radius:55% 55% 40% 40%;box-shadow:inset -.18rem -.12rem #cf6596;animation:demo-run 4.8s linear infinite;z-index:3}.demo-bean:before,.demo-other:before{content:'••';position:absolute;left:.24rem;top:.35rem;background:#fff4e9;color:#554867;font-size:.6rem;letter-spacing:.15rem;padding:.08rem;border-radius:50%}.demo-other{left:65%;background:#8d9edd;box-shadow:inset -.15rem -.1rem #7d80b5;animation:none;display:none}.demo-hazard{left:47%;width:.45rem;height:1.1rem;bottom:2.05rem;background:#f4c360;border-radius:.2rem}.demo-goal{right:9%;bottom:2.05rem;font-size:1.8rem;line-height:1.8rem}.demo-ball,.demo-water,.demo-tile{display:none}.demo-caption{bottom:.2rem;left:0;right:0;font-size:.68rem;font-weight:900;text-align:center;letter-spacing:.06em}.mode-demo[data-mode=survival] .demo-floor,.mode-demo[data-mode=memory] .demo-floor{background:transparent;border:0}.mode-demo[data-mode=survival] .demo-tile,.mode-demo[data-mode=memory] .demo-tile{display:block;left:calc(10% + var(--tile)*20%);bottom:1.6rem;width:18%;height:.7rem;background:#e9bf75;border-radius:.25rem;animation:demo-tile 4.8s linear infinite;animation-delay:calc(var(--tile)*.55s)}.mode-demo[data-mode=survival] .demo-hazard,.mode-demo[data-mode=memory] .demo-hazard{display:none}.mode-demo[data-mode=memory] .demo-tile{height:1.4rem;font-size:1rem;text-align:center;background:#e7b6da;animation:demo-memory 4.8s linear infinite}.mode-demo[data-mode=memory] .demo-bean{animation:demo-find 4.8s ease-in-out infinite}.mode-demo[data-mode=tag] .demo-other{display:block;animation:demo-tag-other 4.8s ease-in-out infinite}.mode-demo[data-mode=tag] .demo-bean{animation:demo-tag 4.8s ease-in-out infinite}.mode-demo[data-mode=tag] .demo-goal{left:65%;right:auto;bottom:3.8rem;animation:demo-token 4.8s ease-in-out infinite}.mode-demo[data-mode=tag] .demo-hazard,.mode-demo[data-mode=football] .demo-hazard,.mode-demo[data-mode=balloon] .demo-hazard,.mode-demo[data-mode=rings] .demo-hazard{display:none}.mode-demo[data-mode=football] .demo-ball,.mode-demo[data-mode=balloon] .demo-ball{display:block;font-size:1.3rem;left:33%;bottom:2rem;animation:demo-shot 4.8s ease-out infinite}.mode-demo[data-mode=football] .demo-bean{animation:demo-kick 4.8s ease-in-out infinite}.mode-demo[data-mode=balloon] .demo-other{display:block;animation:demo-immune 4.8s linear infinite}.mode-demo[data-mode=balloon] .demo-goal{right:20%;bottom:3.7rem;animation:demo-balloons 4.8s linear infinite}.mode-demo[data-mode=balloon] .demo-bean{animation:none}.mode-demo[data-mode=sweep] .demo-bean{left:45%;animation:demo-jump 2.4s ease-in-out infinite}.mode-demo[data-mode=sweep] .demo-hazard{width:70%;height:.25rem;left:15%;bottom:2.3rem;transform-origin:center;animation:demo-arm 2.4s linear infinite}.mode-demo[data-mode=walls] .demo-hazard{left:40%;height:2.4rem;width:25%;background:linear-gradient(90deg,#bc91dc 28%,transparent 28%,transparent 70%,#bc91dc 70%);animation:demo-wall 4.8s linear infinite}.mode-demo[data-mode=rings] .demo-goal{right:35%;font-size:2.8rem;bottom:2.6rem}.mode-demo[data-mode=honey] .demo-water{display:block;left:0;right:0;bottom:1.3rem;height:1rem;background:#efba51;opacity:.65;animation:demo-honey 4.8s linear infinite}.mode-demo[data-mode=honey] .demo-floor{height:2.4rem;background:linear-gradient(90deg,#a6d2dc 33%,#addab8 33%,#addab8 66%,#d6b5e6 66%);clip-path:polygon(0 70%,33% 70%,33% 40%,66% 40%,66% 0,100% 0,100% 100%,0 100%)}.mode-demo[data-mode=honey] .demo-hazard{display:none}.mode-demo[data-mode=honey] .demo-bean{animation:demo-climb 4.8s linear infinite}
@keyframes demo-run{0%,8%{left:13%;transform:translateY(0)}35%{left:39%;transform:translateY(0)}49%{left:48%;transform:translateY(-1.65rem)}65%{left:60%;transform:translateY(0)}85%,100%{left:80%;transform:translateY(0)}}@keyframes demo-tile{0%,25%{opacity:1;transform:translateY(0)}40%,85%{opacity:0;transform:translateY(1rem)}100%{opacity:1;transform:translateY(0)}}@keyframes demo-memory{0%,28%,100%{color:inherit;background:#e7b6da}35%,50%{color:transparent;background:#a896c8}60%,88%{color:inherit;background:#b2e5bc}}@keyframes demo-find{0%,45%{left:13%}70%,90%{left:51%}100%{left:13%}}@keyframes demo-tag{0%,10%{left:13%}40%{left:54%}60%,90%{left:22%}100%{left:13%}}@keyframes demo-tag-other{0%,40%{left:65%}70%,100%{left:77%}}@keyframes demo-token{0%,35%{left:65%}40%{left:54%}60%,90%{left:22%}100%{left:65%}}@keyframes demo-shot{0%,23%{left:33%;opacity:1}60%{left:82%;opacity:1}75%,100%{left:82%;opacity:0}}@keyframes demo-kick{0%,10%{left:13%}24%,75%{left:26%}100%{left:13%}}@keyframes demo-balloons{0%,45%{opacity:1;transform:scale(1)}52%{opacity:.2;transform:scale(.8)}70%,100%{opacity:1;transform:scale(1)}}@keyframes demo-immune{0%,50%,75%,100%{opacity:1}55%,65%{opacity:.35}}@keyframes demo-jump{0%,30%,80%,100%{transform:translateY(0)}50%{transform:translateY(-1.6rem)}}@keyframes demo-arm{to{transform:rotate(360deg)}}@keyframes demo-wall{0%{transform:translateX(80%);opacity:0}20%{opacity:1}80%{transform:translateX(-90%);opacity:1}100%{transform:translateX(-110%);opacity:0}}@keyframes demo-honey{0%{height:.2rem}85%,100%{height:2rem}}@keyframes demo-climb{0%,10%{left:13%;transform:translateY(0)}35%{left:40%;transform:translateY(-.9rem)}65%,90%{left:72%;transform:translateY(-1.7rem)}100%{left:13%;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.mode-demo *{animation:none!important}.mode-demo .demo-bean{left:42%;transform:translateY(-.4rem)}.mode-demo .demo-tile{opacity:1;transform:none}}@media(max-height:500px){.mode-demo{height:4.5rem;max-width:18rem}.demo-caption{font-size:.6rem}}

.mode-demo[data-mode=treasure] .demo-ball{display:block;left:15%;bottom:2.1rem;font-size:1rem;animation:demo-treasure 4.8s linear infinite;z-index:4}.mode-demo[data-mode=treasure] .demo-hazard{display:none}@keyframes demo-treasure{0%,12%{left:15%;bottom:2.1rem}72%,100%{left:79%;bottom:2.1rem}}@media(prefers-reduced-motion:reduce){.mode-demo[data-mode=treasure] .demo-ball{animation:none}}