.pingo{--look-x:0;--look-y:0;--pingo-ink:#1f1d3d;width:10em;height:11em;font-size:calc(var(--pingo-size,160px) / 10);position:relative}.pingo-body{border:.14em solid var(--pingo-ink);transform-origin:50% 100%;background:radial-gradient(circle at 30% 26%,#fff6c4 0 9%,#0000 30%),#ffd23f;border-radius:52% 48% 46% 54%/58% 56% 44% 42%;height:9em;animation:8s ease-in-out infinite pingo-blob,3.8s ease-in-out infinite pingo-breathe;position:absolute;bottom:.6em;left:0;right:0;box-shadow:inset -.55em -.7em #f2b10055}.pingo-shadow{background:#1f1d3d1f;border-radius:50%;width:7em;height:.9em;margin-left:-3.5em;animation:3.8s ease-in-out infinite pingo-shadow;position:absolute;bottom:0;left:50%}.pingo-drop{border:.14em solid var(--pingo-ink);background:#ffd23f;border-radius:0 50% 50%;width:1.05em;height:1.05em;margin-left:-.52em;animation:3.8s ease-in-out infinite pingo-drop;position:absolute;top:.1em;left:50%}.pingo-face{transform:translate(calc(var(--look-x) * .85em), calc(var(--look-y) * .55em));transition:transform .3s cubic-bezier(.2,.9,.3,1.1);position:absolute;inset:0}.pingo-eye{place-items:center;width:1.3em;height:1.6em;display:grid;position:absolute;top:3.15em}.pingo-eye--left{left:2.75em}.pingo-eye--right{right:2.75em}.pingo-eye i{background:var(--pingo-ink);border-radius:50%;width:.95em;height:1.35em;transition:width .25s,height .25s,border-radius .25s,transform .25s;animation:5.2s infinite pingo-blink;display:block;position:relative}.pingo-eye i:after{content:"";background:#fff;border-radius:50%;width:.3em;height:.3em;transition:opacity .2s;position:absolute;top:.22em;right:.18em}.pingo-cheek{opacity:.4;background:#ff7aa2;border-radius:50%;width:1.25em;height:.7em;transition:opacity .3s,transform .3s;position:absolute;top:5.05em}.pingo-cheek--left{left:1.75em}.pingo-cheek--right{right:1.75em}.pingo-mouth{width:0;height:0;position:absolute;top:5.35em;left:50%}.pingo-mouth b{background:var(--pingo-ink);width:.4em;height:.4em;transform:translate(var(--x,0), var(--y,0));border-radius:50%;transition:transform .4s cubic-bezier(.3,1.6,.5,1),opacity .2s;position:absolute;top:0;left:-.2em}.pingo-mouth b:first-child{--x:-1.05em;--y:0em}.pingo-mouth b:nth-child(2){--x:-.55em;--y:.34em}.pingo-mouth b:nth-child(3){--x:0em;--y:.46em}.pingo-mouth b:nth-child(4){--x:.55em;--y:.34em}.pingo-mouth b:nth-child(5){--x:1.05em;--y:0em}.pingo-orbit{opacity:0;width:12em;height:12em;transition:opacity .3s,transform .4s;position:absolute;top:-.4em;left:-1em;transform:scale(.8)}.pingo-orbit i{border:.12em solid var(--pingo-ink);border-radius:50%;width:.7em;height:.7em;position:absolute}.pingo-orbit i:first-child{background:#ff7aa2;top:0;left:50%}.pingo-orbit i:nth-child(2){background:#9fe7c9;bottom:1.2em;left:.6em}.pingo-orbit i:nth-child(3){background:#6c6ae8;bottom:1.2em;right:.6em}.pingo--listening .pingo-eye i{transform:scale(1.12)}.pingo--listening .pingo-body{animation:8s ease-in-out infinite pingo-blob,1.6s ease-in-out infinite pingo-lean}.pingo--listening .pingo-mouth b:first-child{--x:-.32em;--y:.12em}.pingo--listening .pingo-mouth b:nth-child(2){--x:-.2em;--y:.5em}.pingo--listening .pingo-mouth b:nth-child(3){--x:.2em;--y:.5em}.pingo--listening .pingo-mouth b:nth-child(4){--x:.32em;--y:.12em}.pingo--listening .pingo-mouth b:nth-child(5){--x:0em;--y:-.1em}.pingo--thinking .pingo-face{transform:translate(.55em,-.45em)}.pingo--thinking .pingo-eye i{height:1.1em}.pingo--thinking .pingo-mouth b{animation:.9s ease-in-out infinite pingo-wave}.pingo--thinking .pingo-mouth b:first-child{--x:-1em;--y:.3em;animation-delay:0s}.pingo--thinking .pingo-mouth b:nth-child(2){--x:-.5em;--y:.3em;animation-delay:.1s}.pingo--thinking .pingo-mouth b:nth-child(3){--x:0em;--y:.3em;animation-delay:.2s}.pingo--thinking .pingo-mouth b:nth-child(4){--x:.5em;--y:.3em;animation-delay:.3s}.pingo--thinking .pingo-mouth b:nth-child(5){--x:1em;--y:.3em;animation-delay:.4s}.pingo--thinking .pingo-orbit{opacity:1;animation:2.4s linear infinite pingo-spin;transform:scale(1)}.pingo--happy .pingo-eye i{border:.26em solid var(--pingo-ink);background:0 0;border-bottom:0;border-radius:1em 1em 0 0;width:1.1em;height:.62em;margin-top:-.3em;animation:none}.pingo--happy .pingo-eye i:after{opacity:0}.pingo--happy .pingo-cheek{opacity:.9;transform:scale(1.15)}.pingo--happy .pingo-body{animation:8s ease-in-out infinite pingo-blob,.7s cubic-bezier(.3,1.5,.5,1) 2 pingo-hop}.pingo--happy .pingo-shadow{animation:.7s cubic-bezier(.3,1.5,.5,1) 2 pingo-shadow-hop}.pingo--happy .pingo-mouth b:first-child{--x:-1.45em;--y:-.1em}.pingo--happy .pingo-mouth b:nth-child(2){--x:-.8em;--y:.48em}.pingo--happy .pingo-mouth b:nth-child(3){--x:0em;--y:.7em}.pingo--happy .pingo-mouth b:nth-child(4){--x:.8em;--y:.48em}.pingo--happy .pingo-mouth b:nth-child(5){--x:1.45em;--y:-.1em}.pingo--sorry .pingo-face{transform:translate(-.2em,.35em)}.pingo--sorry .pingo-eye i{height:1em}.pingo--sorry .pingo-cheek{opacity:.15}.pingo--sorry .pingo-body{animation:8s ease-in-out infinite pingo-blob,3.8s ease-in-out infinite pingo-sigh}.pingo--sorry .pingo-mouth b:first-child{--x:-.7em;--y:.55em}.pingo--sorry .pingo-mouth b:nth-child(2){--x:-.35em;--y:.38em}.pingo--sorry .pingo-mouth b:nth-child(3){--x:0em;--y:.32em}.pingo--sorry .pingo-mouth b:nth-child(4){--x:.35em;--y:.38em}.pingo--sorry .pingo-mouth b:nth-child(5){--x:.7em;--y:.55em}@keyframes pingo-in{0%{opacity:0;transform:translateY(-60px)scale(.5,.7)}55%{opacity:1;transform:translateY(6px)scale(1.12,.86)}75%{transform:translateY(-4px)scale(.96,1.05)}to{transform:none}}@keyframes pingo-blob{0%,to{border-radius:52% 48% 46% 54%/58% 56% 44% 42%}33%{border-radius:47% 53% 52% 48%/55% 60% 40% 45%}66%{border-radius:55% 45% 50% 50%/60% 52% 48% 40%}}@keyframes pingo-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.025,.975)}}@keyframes pingo-shadow{0%,to{transform:scaleX(1)}50%{transform:scaleX(1.04)}}@keyframes pingo-drop{0%,to{transform:translateY(0)rotate(45deg)}50%{transform:translateY(-.35em)rotate(45deg)}}@keyframes pingo-blink{0%,93%,to{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}@keyframes pingo-lean{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)scale(1.01,.99)}}@keyframes pingo-wave{0%,to{transform:translate(var(--x), var(--y))}50%{transform:translate(var(--x), calc(var(--y) - .4em))}}@keyframes pingo-spin{to{transform:rotate(360deg)}}@keyframes pingo-hop{0%,to{transform:none}30%{transform:translateY(-1.1em)scale(.95,1.06)}60%{transform:translateY(0)scale(1.08,.9)}}@keyframes pingo-shadow-hop{0%,to{transform:none}30%{opacity:.6;transform:scale(.7)}}@keyframes pingo-sigh{0%,to{transform:scale(1.02,.97)}50%{transform:scale(1.035,.955)}}@media (prefers-reduced-motion:reduce){.pingo,.pingo *,.pingo :before,.pingo :after{transition:none!important;animation:none!important}}
