@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";
.color-bends-container{width:100%;height:100%;position:relative;overflow:hidden}
.pacman-wrapper,.pacman-wrapper *{box-sizing:border-box;font-family:"Press Start 2P",monospace}.pacman-wrapper:after{content:"";pointer-events:none;z-index:100;background:repeating-linear-gradient(0deg,#0000,#0000 2px,#00000014 2px 4px);position:absolute;inset:0}.stage{--pac-size:72px;--ghost-size:50px;--dot-size:9px;--letter-w:42px;--font-size:2.2rem}#pacman{width:var(--pac-size);height:var(--pac-size);z-index:10;position:absolute;top:50%;transform:translateY(-50%)}#pacman:before,#pacman:after{content:"";width:var(--pac-size);height:calc(var(--pac-size)/2);border-radius:calc(var(--pac-size)/2)calc(var(--pac-size)/2)0 0;transform-origin:bottom;background:#ffee07;animation:.22s infinite jaw-up;position:absolute;left:0}#pacman:after{top:calc(var(--pac-size)/2);border-radius:0 0 calc(var(--pac-size)/2)calc(var(--pac-size)/2);transform-origin:top;animation:.22s infinite jaw-down}#pacman .eye{width:calc(var(--pac-size)*.097);height:calc(var(--pac-size)*.097);top:calc(var(--pac-size)*.167);right:calc(var(--pac-size)*.222);z-index:2;background:#000;border-radius:50%;animation:3.2s ease-in-out infinite eye-glint;position:absolute;box-shadow:0 0 #fff0}#pacman .eye:after{content:"";background:#ffffffd9;border-radius:50%;width:35%;height:35%;animation:3.2s ease-in-out infinite eye-shine;position:absolute;top:15%;left:15%}@keyframes eye-glint{0%,to{transform:scale(1);box-shadow:0 0 #fff0}48%{transform:scale(1);box-shadow:0 0 #fff0}50%{transform:scaleY(.05);box-shadow:0 0 #fff0}52%{transform:scale(1);box-shadow:0 0 2px 1px #fff6}56%{transform:scale(1);box-shadow:0 0 #fff0}}@keyframes eye-shine{0%,47%{opacity:.85;transform:translate(0)}50%{opacity:0}52%{opacity:.85}60%{opacity:0;transform:translate(60%,-20%)}61%{opacity:0}62%{opacity:.85;transform:translate(0)}to{opacity:.85;transform:translate(0)}}@keyframes jaw-up{0%,to{transform:rotate(0)}50%{transform:rotate(-35deg)}}@keyframes jaw-down{0%,to{transform:rotate(0)}50%{transform:rotate(35deg)}}#pacman.slow:before,#pacman.slow:after{animation-duration:.45s}.letter{color:#ffee07;font-size:var(--font-size);width:var(--letter-w);text-align:center;text-shadow:0 0 8px #ffee07,0 0 20px #ffee0766;opacity:1;line-height:1;position:absolute;top:50%;transform:translateY(-50%)}.letter.eaten{opacity:0}.dot{width:var(--dot-size);height:var(--dot-size);opacity:0;background:#ffee07;border-radius:50%;position:absolute;top:50%;transform:translateY(-50%)scale(0);box-shadow:0 0 6px #ffee07,0 0 14px #ffee0759}.dot.pop{animation:.38s cubic-bezier(.17,.67,.35,1.55) forwards dot-pop}.dot.eaten{opacity:0!important;transition:none!important;animation:none!important;transform:translateY(-50%)scale(0)!important}@keyframes dot-pop{0%{opacity:0;transform:translateY(-50%)scale(0)}55%{opacity:1;transform:translateY(-50%)scale(1.45)}to{opacity:1;transform:translateY(-50%)scale(1)}}.ghost{width:var(--ghost-size);height:var(--ghost-size);z-index:9;transition:opacity .4s;position:absolute;top:50%;transform:translateY(-50%)}.ghost svg{width:100%;height:100%}.blast-particle{z-index:20;pointer-events:none;background:#ffee07;border-radius:50%;animation:.45s cubic-bezier(.2,.8,.4,1) forwards blast-fly;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 4px #ffee07,0 0 8px #ffee0799}@keyframes blast-fly{0%{opacity:1;transform:translate(-50%,-50%)translate(0)scale(1)}70%{opacity:1}to{transform:translate(-50%,-50%)translate(var(--tx),var(--ty))scale(0);opacity:0}}.blast-ring{z-index:19;pointer-events:none;border:2px solid #ffee07;border-radius:50%;animation:.38s ease-out forwards blast-ring;position:absolute;box-shadow:0 0 6px #ffee07}@keyframes blast-ring{0%{opacity:1;transform:scale(.2)}to{opacity:0;transform:scale(2.2)}}