#dot{width:195px;flex-shrink:0;overflow:visible;--gx: -.35;--gy: .05;--sq: 1;--tr: .12s;--ease: ease-out;--gain: 1}@media(max-width:640px){#dot{width:158px;align-self:center}}#dot .stroke{stroke:var(--ink);stroke-width:1.25;fill:var(--paper)}#d-head,#d-plate,#d-eyes{transform-box:view-box;transform-origin:100px 78px;transition:transform var(--tr) var(--ease)}#d-eyes{transition-duration:calc(var(--tr) * .6)}#d-head{transform:translate(calc(var(--gx) * 6px * var(--gain)),calc(var(--gy) * 4px * var(--gain))) rotate(calc(var(--gx) * 4deg))}#d-plate{transform:translate(calc(var(--gx) * 10px * var(--gain)),calc(var(--gy) * 7px * var(--gain)))}#d-eyes{transform:translate(calc(var(--gx) * 16px * var(--gain)),calc(var(--gy) * 11px * var(--gain))) scaleY(var(--sq))}#d-eyes .pill{fill:var(--orange);transform-box:fill-box;transform-origin:center}#d-eyes .arc{stroke:var(--orange);stroke-width:4.5;stroke-linecap:round;fill:none;opacity:0}#dot.settle #d-eyes{transition:transform .15s cubic-bezier(.3,1.3,.5,1)}#dot.settle #d-plate{transition:transform .32s ease-out 70ms}#dot.settle #d-head{transition:transform .48s cubic-bezier(.2,0,.2,1) .16s}#dot.soften{--tr: .7s;--ease: cubic-bezier(.25, 0, .2, 1)}#dot.drift{--tr: .8s}#dot.shy{--tr: .42s;--ease: cubic-bezier(.3, 0, .15, 1)}#dot.composed{--tr: .26s;--gain: .65}#dot.wander{--tr: .45s;--ease: cubic-bezier(.25, 0, .2, 1)}#dot.swim #d-eyes{transition-duration:.48s}#dot.saccade #d-eyes{transition:transform 75ms cubic-bezier(.3,1.45,.55,1)}#dot.saccade #d-plate{transition-duration:.2s}#dot.saccade #d-head{transition:transform .38s cubic-bezier(.25,.6,.3,1)}#dot.joy #d-eyes .pill,#dot.joy2 #d-eyes .pill,#dot.dizzy #d-eyes .pill{opacity:0}#dot.joy #d-eyes .arc,#dot.joy2 #d-eyes .arc,#dot.dizzy #d-eyes .arc{opacity:1}#dot.joy #d-head{animation:d-bounce .45s cubic-bezier(.3,1.6,.5,1)}#dot.joy2 #d-head{animation:d-bounce2 .5s cubic-bezier(.3,1.7,.5,1)}#dot.dizzy #d-head{animation:d-dizzy .55s ease-out}@keyframes d-bounce{30%{transform:translate(calc(var(--gx) * 6px * var(--gain)),calc(var(--gy) * 4px * var(--gain) - 7px)) rotate(calc(var(--gx) * 4deg))}}@keyframes d-bounce2{30%{transform:translate(calc(var(--gx) * 6px * var(--gain)),calc(var(--gy) * 4px * var(--gain) - 10px)) rotate(calc(var(--gx) * 4deg + 1.5deg))}60%{transform:translate(calc(var(--gx) * 6px * var(--gain)),calc(var(--gy) * 4px * var(--gain) + 1px)) rotate(calc(var(--gx) * 4deg - 1deg))}}@keyframes d-dizzy{20%{transform:translate(calc(var(--gx) * 6px * var(--gain)),calc(var(--gy) * 4px * var(--gain))) rotate(calc(var(--gx) * 4deg + 4deg))}45%{transform:translate(calc(var(--gx) * 6px * var(--gain)),calc(var(--gy) * 4px * var(--gain))) rotate(calc(var(--gx) * 4deg - 4deg))}65%{transform:translate(calc(var(--gx) * 6px * var(--gain)),calc(var(--gy) * 4px * var(--gain))) rotate(calc(var(--gx) * 4deg + 2.5deg))}82%{transform:translate(calc(var(--gx) * 6px * var(--gain)),calc(var(--gy) * 4px * var(--gain))) rotate(calc(var(--gx) * 4deg - 1deg))}}#dot.startle #d-head{animation:d-startle .38s cubic-bezier(.2,.9,.3,1)}@keyframes d-startle{18%{transform:translate(calc(var(--gx) * 6px * var(--gain) - var(--gx) * 6px),calc(var(--gy) * 4px * var(--gain) - 2.5px)) rotate(calc(var(--gx) * 4deg - 1.5deg))}}#dot.wobble #d-head{animation:d-wobble .66s ease-out}@keyframes d-wobble{18%{transform:translate(calc(var(--gx) * 6px * var(--gain)),calc(var(--gy) * 4px * var(--gain))) rotate(calc(var(--gx) * 4deg - 3.2deg))}40%{transform:translate(calc(var(--gx) * 6px * var(--gain)),calc(var(--gy) * 4px * var(--gain))) rotate(calc(var(--gx) * 4deg + 2.6deg))}62%{transform:translate(calc(var(--gx) * 6px * var(--gain)),calc(var(--gy) * 4px * var(--gain))) rotate(calc(var(--gx) * 4deg - 1.5deg))}82%{transform:translate(calc(var(--gx) * 6px * var(--gain)),calc(var(--gy) * 4px * var(--gain))) rotate(calc(var(--gx) * 4deg + .7deg))}}#dot.shake #d-head{animation:d-shake .21s ease-in-out}@keyframes d-shake{33%{transform:translate(calc(var(--gx) * 6px * var(--gain)),calc(var(--gy) * 4px * var(--gain))) rotate(calc(var(--gx) * 4deg - 1.8deg))}66%{transform:translate(calc(var(--gx) * 6px * var(--gain)),calc(var(--gy) * 4px * var(--gain))) rotate(calc(var(--gx) * 4deg + 1.8deg))}}#dot.refuse #d-head{animation:d-refuse .26s ease-in-out}@keyframes d-refuse{33%{transform:translate(calc(var(--gx) * 6px * var(--gain)),calc(var(--gy) * 4px * var(--gain))) rotate(calc(var(--gx) * 4deg - 1.5deg))}66%{transform:translate(calc(var(--gx) * 6px * var(--gain)),calc(var(--gy) * 4px * var(--gain))) rotate(calc(var(--gx) * 4deg + 1.5deg))}}#dot.blink .pill.l{animation:d-blink .14s ease-in-out}#dot.blink .pill.r{animation:d-blink .14s ease-in-out 40ms}#dot.blink-slow .pill{animation:d-blink .26s ease-in-out}#dot.blink-heavy .pill{animation:d-heavy .85s ease-in-out}#dot.perk .pill{animation:d-perk .22s ease-out}@keyframes d-blink{50%{transform:scaleY(.08)}}@keyframes d-heavy{24%,65%{transform:scaleY(.08)}}@keyframes d-perk{30%{transform:scaleY(1.16) scaleX(1.05)}}@media(prefers-reduced-motion:reduce){#dot *{animation:none!important;transition:none!important}}