.ub-critter{container-type:inline-size}.ub-critter>.ub-face,.ub-critter>.ub-hat{font-size:3.84615cqw}.ub-face{pointer-events:none;--ink:#2c2952;width:15em;height:11em;position:absolute;top:.9em;right:1.9em}.ub-eye{background:#fff;border-radius:50%;width:4.3em;height:4.9em;transition:scale 70ms ease-out,top .2s,height .2s,border-radius .2s;position:absolute;top:1.2em;box-shadow:inset 0 -.6em #3c326e1f}.ub-eye.l{left:2.4em}.ub-eye.r{left:8.3em}.ub-pupil{background:var(--ink);width:2.5em;height:2.8em;translate:var(--lx,0) var(--ly,.2em);border-radius:50%;margin:-1.4em 0 0 -1.25em;transition:translate .22s cubic-bezier(.22,1,.36,1),scale .2s cubic-bezier(.3,1.5,.5,1);position:absolute;top:50%;left:50%}.ub-pupil:after{content:"";background:#fff;border-radius:50%;width:.9em;height:.9em;position:absolute;top:.4em;left:.45em}.ub-pupil:before{content:"";opacity:0;background:#fff;border-radius:50%;width:.5em;height:.5em;position:absolute;bottom:.45em;right:.4em}.ub-brow{background:var(--edge);opacity:0;border-radius:1em;width:3.8em;height:.95em;transition:opacity .2s,rotate .2s,translate .2s;position:absolute;top:-.5em}.ub-brow.l{left:2.6em}.ub-brow.r{left:8.3em}.ub-cheek{background:#ff6e9680;border-radius:50%;width:3em;height:1.7em;transition:opacity .2s;position:absolute;top:6.3em}.ub-cheek.l{left:.5em}.ub-cheek.r{left:11.5em}.ub-mouth{box-sizing:border-box;border:.55em solid var(--ink);border-top:0;border-radius:0 0 2em 2em;width:2.8em;height:1.4em;transition:width .15s,height .15s,border-radius .15s;position:absolute;top:6.6em;left:50%;translate:-50%}.ub-sweat{opacity:0;background:#9cc9f5;border-radius:50%/60% 60% 40% 40%;width:2.6em;height:3.4em;transition:opacity .25s,scale .3s cubic-bezier(.3,1.5,.5,1);position:absolute;top:-2.6em;right:-1.6em;rotate:18deg;scale:.4;box-shadow:inset -.5em -.5em #3c6ebe2e}.ub-bang{color:#2f9e7c;opacity:0;font-size:5.4em;font-weight:800;line-height:1;position:absolute;top:-5.4em;right:-3.4em;rotate:12deg}.ub-critter[data-mood=worried] .ub-brow{opacity:1}.ub-critter[data-mood=worried] .ub-brow.l{rotate:-13deg}.ub-critter[data-mood=worried] .ub-brow.r{rotate:13deg}.ub-critter[data-mood=worried] .ub-mouth{background:var(--ink);border:0;border-radius:50%;width:1.9em;height:2.2em;top:6.4em}.ub-critter[data-mood=worried] .ub-cheek{opacity:.7}.ub-critter[data-sweat] .ub-sweat{opacity:1;scale:1}.ub-critter[data-mood=excited] .ub-pupil{scale:1.12}.ub-critter[data-mood=excited] .ub-pupil:before{opacity:1}.ub-critter[data-mood=excited] .ub-mouth,.ub-critter[data-mood=happy] .ub-mouth{background:var(--ink);border:0;border-radius:.4em .4em 2.4em 2.4em;width:4.4em;height:2.7em;overflow:hidden}.ub-critter[data-mood=excited] .ub-mouth:after,.ub-critter[data-mood=happy] .ub-mouth:after{content:"";background:#ff9aa8;border-radius:1.2em 1.2em 0 0;width:2.4em;height:1.2em;position:absolute;bottom:0;left:50%;translate:-50%}.ub-critter[data-mood=excited] .ub-cheek,.ub-critter[data-mood=happy] .ub-cheek{background:#ff6e96b3}.ub-critter[data-mood=happy] .ub-bang{display:none}.ub-critter.cheer .ub-bang{animation:.9s cubic-bezier(.3,1.4,.5,1) both ub-bang}@keyframes ub-bang{0%{opacity:0;translate:0 1.5em;scale:.4}25%{opacity:1;translate:0;scale:1.1}75%{opacity:1;scale:1}to{opacity:0;translate:0 -.6em}}.ub-critter[data-mood=happy] .ub-eye{height:2.6em;box-shadow:none;border:.85em solid var(--ink);box-sizing:border-box;background:0 0;border-bottom:0;border-radius:3em 3em 0 0;top:2.4em}.ub-critter[data-mood=happy] .ub-pupil{display:none}.ub-critter[data-blink] .ub-eye,.ub-critter[data-bonk] .ub-eye{scale:1 .12}.ub-critter[data-bonk] .ub-mouth{background:var(--ink);border:0;border-radius:.35em;width:2.6em;height:.7em}.ub-piece.key:not(.dragging) .ub-critter[data-mood=excited]{transform-origin:50% 100%;animation:.95s cubic-bezier(.3,.7,.4,1) infinite ub-hop;rotate:-3deg}@keyframes ub-hop{0%,to{translate:0;scale:1}12%{scale:1.04 .93}38%{translate:0 -2cqw;scale:.98 1.04}62%{translate:0;scale:1.05 .92}76%{scale:.99 1.02}}.ub-streaks{opacity:0;pointer-events:none;background:linear-gradient(90deg, transparent, var(--fill)) 100% 12% / 70% 1.2cqw no-repeat, linear-gradient(90deg, transparent, var(--fill)) 100% 50% / 100% 1.2cqw no-repeat, linear-gradient(90deg, transparent, var(--fill)) 100% 88% / 55% 1.2cqw no-repeat;width:11cqw;height:9cqw;transition:opacity .15s;position:absolute;top:50%;right:92%;translate:0 -50%}.ub-piece.escaping .ub-streaks{opacity:.55}.ub-hat{pointer-events:none;width:0;height:0;position:absolute;bottom:calc(100% - .9em);right:8.8em}.ub-hat i{display:block;position:absolute}.ub-hat i:before,.ub-hat i:after{content:"";position:absolute}.ub-hat[data-hat=sprout] i{background:#3f9e64;border-radius:.4em;width:.7em;height:3em;bottom:0;left:-.35em}.ub-hat[data-hat=sprout] i:before{transform-origin:0 100%;background:#7fd69b;border-radius:0 100%;width:3.2em;height:2em;bottom:1.7em;left:.3em;rotate:-18deg}.ub-hat[data-hat=sprout] i:after{transform-origin:100% 100%;background:#66c588;border-radius:100% 0;width:2.4em;height:1.6em;bottom:1.2em;right:.3em;rotate:16deg}.ub-hat[data-hat=beanie] i{background:#5a8dee;border-radius:4em 4em .8em .8em;width:8em;height:4.3em;bottom:-1.1em;left:-4em;box-shadow:inset 0 -1.3em #4a78d4}.ub-hat[data-hat=beanie] i:before{background:#fff;border-radius:50%;width:2.3em;height:2.3em;top:-1.7em;left:2.9em;box-shadow:inset 0 -.4em #e3def0}.ub-hat[data-hat=bow] i{z-index:1;background:#f5b83d;border-radius:.6em;width:1.8em;height:1.8em;bottom:-.3em;left:-.9em}.ub-hat[data-hat=bow] i:before{background:#ffd166;border-radius:50% 40% 40% 50%;width:3em;height:2.3em;bottom:-.2em;right:1.3em;rotate:14deg}.ub-hat[data-hat=bow] i:after{background:#ffd166;border-radius:40% 50% 50% 40%;width:3em;height:2.3em;bottom:-.2em;left:1.3em;rotate:-14deg}.ub-hat[data-hat=flower] i{background:#ffd166;border-radius:50%;width:2em;height:2em;bottom:.6em;left:-1em;rotate:10deg;box-shadow:0 -1.7em 0 -.15em #fff,1.6em -.55em 0 -.15em #fff,1em 1.35em 0 -.15em #fff,-1em 1.35em 0 -.15em #fff,-1.6em -.55em 0 -.15em #fff}.ub-hat[data-hat=flower] i:before{z-index:-1;background:#3f9e64;border-radius:.3em;width:.55em;height:1.6em;top:1.6em;left:.8em}.ub-hat[data-hat=antenna] i{background:var(--ink,#2c2952);transform-origin:50% 100%;border-radius:.4em;width:.7em;height:3.8em;bottom:0;left:-.35em;rotate:14deg}.ub-hat[data-hat=antenna] i:before{background:#ffd166;border-radius:50%;width:2.7em;height:2.7em;top:-2.2em;left:-1em;box-shadow:inset -.45em -.45em #f0b43a}.ub-piece.key:not(.dragging) .ub-critter[data-mood=excited] .ub-hat{animation:.95s ease-in-out infinite ub-wobble}@keyframes ub-wobble{0%,to{rotate:0deg}40%{rotate:-9deg}70%{rotate:6deg}}