.chr{contain:layout style paint;--chr-jump:12%;width:100%;height:100%;display:inline-block;position:relative}.chr[data-cap]{--chr-jump:5%}.chr[data-interactive]{cursor:pointer}.chr-rig,.chr-eye,.chr-pose{display:block;position:absolute;inset:0}.chr-rig{transform-origin:50% 86%}.chr[data-act=flip] .chr-rig,.chr[data-act=wiggle] .chr-rig,.chr[data-state=thinking] .chr-rig,.chr[data-state=curious] .chr-rig,.chr[data-state=confused] .chr-rig,.chr[data-state=dizzy] .chr-rig,.chr[data-state=shy] .chr-rig,.chr[data-state=happy] .chr-rig{transform-origin:50%}.chr-layer{width:100%;height:100%;display:block;position:absolute;inset:0;overflow:visible}.chr-eye{--chr-travel-x:5%;--chr-travel-y:3.5%;transform:translate(calc(var(--chr-gx,0) * var(--chr-travel-x)), calc(var(--chr-gy,0) * var(--chr-travel-y)));transition:transform .18s ease-out}.chr-pose,.chr-eye .chr-layer{transform-origin:var(--chr-eye-origin)}.chr-pose{transition:transform .22s cubic-bezier(.3,0,.2,1.3)}.chr[data-eyes=round] .chr-eye{--chr-travel-x:1.4%;--chr-travel-y:1%}.chr-pupil{transform:translate(calc(var(--chr-gx,0) * 3.2px), calc(var(--chr-gy,0) * 3px));transition:transform .15s ease-out}.chr-lid{opacity:0;transform-box:fill-box;transform-origin:50%;transition:transform .22s ease-out,opacity .12s linear}.chr[data-state=sleeping] .chr-eye-l .chr-pose{transform:translate(2%)}.chr[data-state=sleeping] .chr-eye-r .chr-pose{transform:translate(-2%)}.chr-closed,.chr[data-state=sleeping] .chr-open{display:none}.chr[data-state=sleeping] .chr-closed{display:inline}.chr[data-blink=both] .chr-eye .chr-layer,.chr[data-blink=l] .chr-eye-l .chr-layer,.chr[data-blink=r] .chr-eye-r .chr-layer{animation:.17s ease-in-out chr-blink}.chr[data-state=surprised] .chr-pose{transform:scale(1.34)}.chr[data-state=excited] .chr-pose{transform:scale(1.14)}.chr[data-state=curious] .chr-eye-l .chr-pose{transform:scale(1.24)}.chr[data-state=confused] .chr-eye-l .chr-pose{transform:scale(1.3)}.chr[data-state=confused] .chr-eye-r .chr-pose{transform:scale(.7)rotate(14deg)}.chr[data-state=shy] .chr-pose{transform:scale(.84)}.chr[data-live][data-state=dizzy] .chr-eye-l .chr-pose{animation:.9s linear infinite chr-orbit}.chr[data-live][data-state=dizzy] .chr-eye-r .chr-pose{animation:.9s linear infinite reverse chr-orbit}.chr[data-state=angry] .chr-lid-top,.chr[data-state=sad] .chr-lid-top,.chr[data-state=shy] .chr-lid-top,.chr[data-state=curious] .chr-eye-r .chr-lid-top,.chr[data-state=thinking] .chr-eye-r .chr-lid-top,.chr[data-state=happy] .chr-lid-low,.chr[data-state=excited] .chr-lid-low{opacity:1}.chr[data-state=angry] .chr-eye-l .chr-lid-top{transform:translateY(4%)rotate(20deg)}.chr[data-state=angry] .chr-eye-r .chr-lid-top{transform:translateY(4%)rotate(-20deg)}.chr[data-groggy] .chr-eye-l .chr-lid-top{transform:translateY(14%)rotate(12deg)}.chr[data-groggy] .chr-eye-r .chr-lid-top{transform:translateY(14%)rotate(-12deg)}.chr[data-state=sad] .chr-eye-l .chr-lid-top{transform:translateY(4%)rotate(-18deg)}.chr[data-state=sad] .chr-eye-r .chr-lid-top{transform:translateY(4%)rotate(18deg)}.chr[data-state=shy] .chr-lid-top{transform:translateY(-16%)}.chr[data-state=curious] .chr-eye-r .chr-lid-top,.chr[data-state=thinking] .chr-eye-r .chr-lid-top{transform:translateY(-34%)}.chr-cap{transform-origin:var(--chr-cap-origin);transition:transform .26s cubic-bezier(.3,0,.2,1.4)}.chr-glasses{transform-origin:50% 46%;transition:transform .22s ease-out}.chr[data-state=surprised] .chr-cap{transform:translateY(-1.5%)rotate(-4deg)}.chr[data-state=excited] .chr-cap{transform:rotate(-5deg)}.chr[data-state=sad] .chr-cap{transform:translateY(3%)rotate(5deg)}.chr[data-state=shy] .chr-cap{transform:translateY(6%)}.chr[data-state=dizzy] .chr-cap{transform:translateY(-2%)rotate(-11deg)}.chr[data-state=surprised] .chr-glasses{transform:translateY(-2.5%)}.chr[data-state=sad] .chr-glasses{transform:translateY(2.5%)}.chr[data-state=dizzy] .chr-glasses{transform:rotate(8deg)}.chr[data-live][data-act=hop] .chr-cap{animation:.76s ease-out chr-cap-lag}.chr[data-live][data-act=tip] .chr-cap{animation:.9s ease-in-out chr-cap-tip}.chr[data-live][data-act=push] .chr-glasses{animation:.56s ease-in-out chr-glasses-push}.chr-cap-enter-active{transition:transform .42s cubic-bezier(.3,1.5,.5,1),opacity .12s linear}.chr-cap-leave-active{transition:transform .3s ease-in,opacity .24s ease-in}.chr-cap-enter-from{opacity:0;transform:translateY(-12%)rotate(-10deg)}.chr-cap-leave-to{opacity:0;transform:translateY(-12%)rotate(10deg)}.chr-glasses-enter-active,.chr-glasses-leave-active{transition:transform .32s cubic-bezier(.3,1.3,.5,1),opacity .16s linear}.chr-glasses-enter-from,.chr-glasses-leave-to{opacity:0;transform:translateY(12%)scale(.86)}.chr[data-state=sleeping]{z-index:1;contain:layout style}.rounded-full:has(.chr[data-state=sleeping]){overflow:visible}.chr-z{z-index:2;width:28%;height:28%;display:block;position:absolute;top:-4%;right:-6%}.chr-z-far{display:none}.chr[data-live] .chr-z{opacity:0;animation:3.2s ease-out infinite chr-z-rise}.chr[data-live] .chr-z-far{animation-delay:-1.6s;display:block}.chr[data-live] .chr-rig{animation:chr-breathe 3.8s ease-in-out var(--chr-breath-delay,0s) infinite}.chr[data-live][data-state=working] .chr-rig{animation:chr-work 1.05s cubic-bezier(.3, 0, .3, 1) var(--chr-breath-delay,0s) infinite}.chr[data-live][data-state=thinking] .chr-rig{animation:3.4s ease-in-out infinite chr-ponder}.chr[data-live][data-state=waiting] .chr-rig{animation:1.9s ease-in-out infinite chr-nudge}.chr[data-live][data-state=happy] .chr-rig{animation:1.1s ease-in-out infinite chr-bob}.chr[data-live][data-state=excited] .chr-rig{animation:.52s cubic-bezier(.3,0,.3,1) infinite chr-work}.chr[data-live][data-state=surprised] .chr-rig{animation:.52s cubic-bezier(.2,.8,.3,1.2) forwards chr-startle}.chr[data-live][data-state=curious] .chr-rig{animation:2.6s ease-in-out infinite chr-lean}.chr[data-live][data-state=confused] .chr-rig{animation:2.2s ease-in-out infinite chr-tilt}.chr[data-live][data-state=sad] .chr-rig{animation:4.6s ease-in-out infinite chr-droop}.chr[data-live][data-state=angry] .chr-rig{animation:.34s linear infinite chr-shake}.chr[data-live][data-state=shy] .chr-rig{animation:3.2s ease-in-out infinite chr-shrink}.chr[data-live][data-state=dizzy] .chr-rig{animation:1.3s ease-in-out infinite chr-sway}.chr[data-state=sleeping] .chr-rig{transform:rotate(-5deg)scale(1.02,.97)}.chr[data-live][data-state=sleeping] .chr-rig{animation:chr-sleep 5.2s ease-in-out var(--chr-breath-delay,0s) infinite}.chr[data-live][data-act=hop] .chr-rig{animation:.76s cubic-bezier(.3,0,.3,1) chr-hop}.chr[data-live][data-act=flip] .chr-rig{animation:.98s cubic-bezier(.3,0,.3,1) chr-flip}.chr[data-live][data-act=wiggle] .chr-rig{animation:.62s ease-in-out chr-wiggle}@keyframes chr-cap-lag{0%,34%,to{transform:translateY(0)rotate(0)}58%{transform:translateY(-2%)rotate(-3deg)}80%{transform:translateY(0)rotate(2deg)}}@keyframes chr-cap-tip{0%,to{transform:translateY(0)rotate(0)}35%,62%{transform:translateY(-2%)rotate(-8deg)}}@keyframes chr-glasses-push{0%,to{transform:translateY(0)}30%{transform:translateY(2.5%)}62%{transform:translateY(-1.5%)}}@keyframes chr-z-rise{0%{opacity:0;transform:translate(-30%,60%)scale(.5)}22%{opacity:1}72%{opacity:1}to{opacity:0;transform:translate(20%,-60%)scale(1)}}@keyframes chr-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.018,.98)}}@keyframes chr-sleep{0%,to{transform:rotate(-5deg)scale(1.02,.97)}50%{transform:rotate(-5deg)scale(1.045,.945)}}@keyframes chr-hop{0%,to{transform:translateY(0)scale(1)}16%{transform:translateY(0)scale(1.1,.86)}46%{transform:translateY(calc(var(--chr-jump) * -.9)) scale(.95, 1.05)}56%{transform:translateY(calc(var(--chr-jump) * -1)) scale(.98, 1.02)}78%{transform:translateY(0)scale(1.1,.86)}90%{transform:translateY(0)scale(.97,1.03)}}@keyframes chr-work{0%,to{transform:translateY(0)scale(1)}14%{transform:translateY(0)scale(1.08,.9)}44%{transform:translateY(calc(var(--chr-jump) * -.66)) rotate(-3deg) scale(.97, 1.03)}72%{transform:translateY(0)scale(1.08,.9)}86%{transform:translateY(0)scale(.98,1.02)}}@keyframes chr-flip{0%,to{transform:rotate(0)scale(1)}14%{transform:rotate(-16deg)scale(.94)}72%{transform:rotate(372deg)scale(.9)}88%{transform:rotate(356deg)scale(.98)}}@keyframes chr-wiggle{0%,to{transform:rotate(0)}20%{transform:rotate(-9deg)}50%{transform:rotate(8deg)}78%{transform:rotate(-4deg)}}@keyframes chr-ponder{0%,to{transform:rotate(-4deg)}50%{transform:rotate(5deg)translateY(-1.5%)}}@keyframes chr-nudge{0%,62%,to{transform:translateY(0)scale(1)}72%{transform:translateY(-7%)scale(.97,1.04)}84%{transform:translateY(0)scale(1.05,.95)}}@keyframes chr-bob{0%,to{transform:translateY(0)rotate(-2deg)}50%{transform:translateY(-5%)rotate(2deg)}}@keyframes chr-startle{0%{transform:translateY(0)scale(1)}30%{transform:translateY(calc(var(--chr-jump) * -.5)) scale(.94, 1.06)}to{transform:translateY(calc(var(--chr-jump) * -.15)) scale(.97, 1.03)}}@keyframes chr-lean{0%,to{transform:rotate(7deg)translate(1.5%)}50%{transform:rotate(10deg)translate(3%)}}@keyframes chr-tilt{0%,42%{transform:rotate(-9deg)}58%,to{transform:rotate(9deg)}}@keyframes chr-droop{0%,to{transform:translateY(3%)scale(1.05,.92)}50%{transform:translateY(4%)scale(1.07,.89)}}@keyframes chr-shake{0%,to{transform:translate(0)scale(1.03,.98)}25%{transform:translate(-2.2%)scale(1.03,.98)}75%{transform:translate(2.2%)scale(1.03,.98)}}@keyframes chr-shrink{0%,to{transform:scale(.92)rotate(-4deg)}50%{transform:scale(.89)rotate(-7deg)}}@keyframes chr-sway{0%,to{transform:rotate(-10deg)translate(-2%)}50%{transform:rotate(10deg)translate(2%)}}@keyframes chr-orbit{0%{transform:rotate(0)translate(3%)rotate(0)}to{transform:rotate(360deg)translate(3%)rotate(-360deg)}}@keyframes chr-blink{0%,to{transform:scaleY(1)}50%{transform:scaleY(.08)}}
