:root{--paper: #f6f1e5;--ink: #1f1d1a;--pencil: #5e594f;--marker: #ffe36b;--red: #d33f2a;--note: #fff2a8;--tape: rgb(222 210 180 / .75);--pen: #000;color-scheme:light}body{background:linear-gradient(rgb(70 110 160 / .09) 1px,transparent 1px) 0 0 / 100% 28px,linear-gradient(90deg,rgb(70 110 160 / .09) 1px,transparent 1px) 0 0 / 28px 100%,var(--paper)}.sheet{display:block;width:100%;height:100dvh;overflow:visible}.sheet path{fill:none;stroke:var(--pen);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .7s calc(var(--d) * .25s) ease-out forwards}.sheet text{font-family:Caveat Brush,cursive;fill:var(--pen);text-anchor:middle;opacity:0;animation:appear .6s .3s ease-out forwards}.name{font-size:80px}.btn text{font-size:36px}.sheet .concept{font-size:25px;text-anchor:start}.concept-title{font-size:40px}@keyframes appear{to{opacity:1}}.btn{cursor:pointer;outline:none}.btn>*{transition:transform .25s ease;transform-box:view-box;transform-origin:1246px 128px}.btn:hover>*{transform:translateY(-3px) rotate(-1deg)}.btn:active>*{transform:translateY(2px)}.btn:focus-visible path{stroke-width:4}.arm{transform-box:view-box;transform-origin:1100px 880px}.waving .arm{animation:wave .9s ease-in-out}@keyframes wave{20%,60%{transform:rotate(-6deg)}40%,80%{transform:rotate(4deg)}}.kit{color:var(--ink);font:20px/1.45 Patrick Hand,cursive}.kit main{max-width:960px;margin:0 auto;padding:64px 16px 96px}h1,h2{font-family:Caveat,cursive;font-weight:700;line-height:1;margin:0}h1{position:relative;display:inline-block;font-size:clamp(56px,12vw,104px)}h2{font-size:34px;margin-bottom:8px}p{margin:0;color:var(--pencil)}.intro{margin-bottom:64px}.intro p{max-width:32ch;margin:24px 0 32px;font-size:24px}.scribble{position:absolute;left:-2%;bottom:-14px;width:104%;height:24px;overflow:visible}.scribble path{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-dasharray:700;stroke-dashoffset:700;animation:draw 1.2s .3s ease-out forwards}@keyframes draw{to{stroke-dashoffset:0}}.sketch{position:relative;isolation:isolate;padding:28px 30px;transform:rotate(var(--tilt, -.6deg))}.sketch:before,.sketch:after{content:"";position:absolute;z-index:-1;pointer-events:none}.sketch:after{top:0;right:0;bottom:0;left:0;border:2.5px solid var(--ink);border-radius:255px 15px 225px/15px 225px 15px 255px;background:var(--fill, transparent);filter:url(#rough-a)}.sketch:before{top:4px;right:-3px;bottom:-3px;left:3px;border:1.5px solid var(--ink);border-radius:15px 225px 15px 255px/255px 15px 225px;opacity:.55;filter:url(#rough-b)}.sketch--hatch{--fill: var(--paper)}.sketch--hatch:before{top:12px;right:-12px;bottom:-12px;left:12px;border:0;opacity:.8;background:repeating-linear-gradient(-45deg,var(--ink) 0 1.5px,transparent 1.5px 8px)}.sketch--note{--fill: var(--note)}.sketch--note:after{border-color:transparent;box-shadow:4px 6px #00000014}.sketch--note:before{display:none}.tape{position:absolute;top:-14px;left:50%;width:96px;height:28px;translate:-50% 0;rotate:-4deg;background:var(--tape);clip-path:polygon(3% 0,97% 4%,100% 30%,96% 55%,100% 100%,2% 96%,0 70%,4% 40%)}.sketch--dashed:after{border-style:dashed}.sketch--dashed:before{display:none}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:56px 40px}.sketch-btn{--fill: var(--paper);font:inherit;font-size:22px;color:inherit;border:0;background:none;cursor:pointer;padding:10px 26px;transition:transform .15s ease}.sketch-btn:hover{transform:rotate(1.5deg) translateY(-2px)}.sketch-btn:active{transform:rotate(0) translate(2px,2px)}.sketch-btn[aria-pressed=true]{--fill: var(--marker)}.sketch-btn:focus-visible{outline:2px dashed var(--red);outline-offset:8px}.marker{padding:0 4px;margin:0 -2px;background:linear-gradient(transparent 45%,var(--marker) 45% 90%,transparent 90%)}.circled{position:relative;white-space:nowrap;color:var(--ink)}.circled:after{content:"";position:absolute;top:-6px;right:-12px;bottom:-4px;left:-10px;border:2px solid var(--red);border-radius:50% 45% 55% 40%/55% 40% 60% 45%;rotate:-3deg;filter:url(#rough-a);pointer-events:none}.arrow{position:absolute;right:-28px;bottom:-48px;width:110px;fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;filter:url(#rough-b)}body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 22 L24 4 L28 8 L10 26 Z' fill='%23d33f2a' stroke='%231f1d1a' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M2 30 L6 22 L10 26 Z' fill='%23d33f2a' stroke='%231f1d1a' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 11 L21 15 M20 8 L24 12' stroke='%231f1d1a' stroke-width='1.2'/%3E%3C/svg%3E") 2 30,crosshair}.crayon-layer{position:absolute;top:0;left:0;width:100%;z-index:50;pointer-events:none}.eraser{position:fixed;right:16px;bottom:16px;z-index:100;font:18px/1 Patrick Hand,cursive;padding:10px 20px}