*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:#fbf7ef;color:#2b2823;font-family:ui-rounded,SF Pro Rounded,Nunito,system-ui,-apple-system,sans-serif;overscroll-behavior:none}.page{position:relative;height:100%;overflow:hidden}.sheet{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.row{display:flex}.row--odd{margin-left:calc(var(--cell) / -2)}.cell{flex:none;width:var(--cell);height:var(--cell);padding:6px}.face{width:100%;height:100%;overflow:visible;rotate:var(--tilt, 0deg);animation:drop var(--drop, .4s) cubic-bezier(.32,1.5,.5,1) var(--in, 0s) both}.bob{transform-origin:50px 62px;animation:bob var(--bob, 4.5s) ease-in-out var(--phase, 0s) infinite}.ink path{stroke-dasharray:220;stroke-dashoffset:220;animation:ink var(--ink, .55s) ease-out var(--in, 0s) forwards}.hair{animation-delay:calc(var(--in, 0s) + var(--ink, .55s) * .08)}.mouth{animation-delay:calc(var(--in, 0s) + var(--ink, .55s) * .34)}.eyes{transform-origin:50px 46px;animation:ink var(--ink, .55s) ease-out calc(var(--in, 0s) + var(--ink, .55s) * .2) forwards,blink var(--blink, 6s) ease-in-out var(--phase, 0s) infinite}.head{transform-origin:50px 50px;animation:wobble var(--wobble, 7s) ease-in-out var(--phase, 0s) infinite}.page:not(.is-drawing) .cell{cursor:crosshair}.sheet[data-dense=true] .bob,.sheet[data-dense=true] .head{animation:none}.sheet[data-dense=true] .eyes{animation:ink var(--ink, .55s) ease-out calc(var(--in, 0s) + var(--ink, .55s) * .2) forwards}@keyframes drop{0%{opacity:0;scale:.86;translate:0 14px}to{opacity:1;scale:1;translate:0 0}}@keyframes ink{to{stroke-dashoffset:0}}@keyframes bob{0%,to{translate:0 0}50%{translate:0 -2.5px}}@keyframes wobble{0%,to{scale:1 1}50%{scale:1.02 .985}}@keyframes blink{0%,92%,to{scale:1 1}95%{scale:1 .08}}@media(prefers-reduced-motion:reduce){.face,.bob,.head,.eyes,.ink path{animation:none}.ink path{stroke-dashoffset:0}}