:root{--hand:"Nanum Pen Script", "Caveat", cursive;--hand-scale:1}:lang(en),:lang(ko){--hand:"Nanum Pen Script", "Caveat", cursive;font-size-adjust:none;--hand-scale:1}:lang(cs),:lang(da),:lang(de),:lang(es),:lang(fi),:lang(fr),:lang(hu),:lang(id),:lang(it),:lang(nb),:lang(nl),:lang(pl),:lang(pt),:lang(ro),:lang(ru),:lang(sv),:lang(tr),:lang(uk){--hand:"Caveat", "Nanum Pen Script", cursive;font-size-adjust:ex-height .33;--hand-scale:.92}:lang(ja){--hand:"Hachi Maru Pop", "Nanum Pen Script", "Caveat", cursive;font-size-adjust:ic-width .7;--hand-scale:.7}:lang(zh-CN){--hand:"Long Cang", "Nanum Pen Script", "Caveat", cursive;font-size-adjust:ic-width .85;--hand-scale:.85}:lang(zh-TW){--hand:"ChenYuluoyan", "Nanum Pen Script", "Caveat", cursive;font-size-adjust:ic-width 1;--hand-scale:1.15}:lang(th){--hand:"Sriracha", "Nanum Pen Script", "Caveat", cursive;font-size-adjust:ex-height .35;--hand-scale:.74}:lang(ru),:lang(uk){font-size-adjust:none;--hand-scale:1}:lang(vi){--hand:"Mynerve", "Nanum Pen Script", "Caveat", cursive;font-size-adjust:ex-height .36;--hand-scale:.82}:lang(ar){--hand:"Playpen Sans Arabic", "Nanum Pen Script", "Caveat", cursive;font-size-adjust:ex-height .4;--hand-scale:.74}:root{--keep:keep-all}:lang(zh){--keep:normal}:lang(ja){--keep:auto-phrase;word-break:auto-phrase}@font-face{font-family:Nanum Pen Script;src:url(/assets/nanum-pen-script-BWgGj5pC.ttf)format("truetype");font-display:swap}@font-face{font-family:Sniglet;src:url(/assets/sniglet-800-Cq37MzPP.woff)format("woff");font-weight:800;font-display:swap}@font-face{font-family:Caveat;src:url(/assets/caveat-CRSxXMEX.woff)format("woff");font-weight:400 700;font-display:swap}@font-face{font-family:Mynerve;src:url(/assets/mynerve-Bogezyrr.woff)format("woff");font-display:swap}@font-face{font-family:Sriracha;src:url(/assets/sriracha-CfdUaNz_.woff)format("woff");font-display:swap}@font-face{font-family:Hachi Maru Pop;src:url(/assets/hachi-maru-pop-BtGYkOR2.woff)format("woff");font-display:swap}@font-face{font-family:Playpen Sans Arabic;src:url(/assets/playpen-sans-arabic-CN-GigHj.woff)format("woff");font-weight:100 800;font-display:swap}@font-face{font-family:Long Cang;src:url(/assets/long-cang-BDqJcSgW.woff)format("woff");font-display:swap}@font-face{font-family:ChenYuluoyan;src:url(/assets/chenyuluoyan-thin-B4S-Qtms.ttf)format("truetype");font-display:swap}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--paper:#fdfcf6;--ink:#23252b;--blue:#2446b8;--red:#d3322b;--pencil:#6b6b72;--yellow:#ffe240bf;--rule:#6092d24d;--grass:#2f8a3c;--pink:#ff69aa80;--spring:#23954a;--thread:#e0761f;--jet:#15a396}*{box-sizing:border-box}html{background:var(--paper)}body{color:var(--ink);font:24px/1.35 var(--hand);word-break:var(--keep);background:linear-gradient(90deg, transparent 40px, #e25c6e66 40px 41px, transparent 41px), repeating-linear-gradient(transparent 0 33px, var(--rule) 33px 34px), var(--paper);margin:0}main,.hero,footer{width:min(1000px,100% - 32px);margin-inline:auto}a{color:var(--blue)}h2{font:48px/1.05 var(--hand);margin:0 0 6px}h3{font:32px/1.05 var(--hand);margin:10px 0 2px}p{margin:0}mark{color:inherit;background:linear-gradient(100deg, transparent 1%, var(--yellow) 3% 97%, transparent 99%) 0 62% / 100% 64% no-repeat;padding:0 3px}.lead{color:var(--pencil);margin-bottom:18px}.logo{font:800 clamp(44px, 12vw, 120px)/.95 "Sniglet", var(--hand);font-size-adjust:none;letter-spacing:.02em;white-space:nowrap;color:#0000;-webkit-text-stroke:3.5px var(--ink);filter:url(#rough);direction:ltr;margin:0;transform:rotate(-4deg)}.logo span{font-size-adjust:none;-webkit-background-clip:text;background-clip:text;display:inline-block}.logo .d{background-image:repeating-linear-gradient(-52deg,#2446b88c 0 2px,#0000 2px 10px)}.logo .g{background-image:repeating-linear-gradient(38deg,#d3322b99 0 2.5px,#0000 2.5px 8px);transform:rotate(7deg)translateY(.06em)}.logo-wrap{position:relative}.note{color:var(--pencil);white-space:nowrap;direction:ltr;margin:0;font-size:26px;position:absolute;bottom:-34px;right:-10px;transform:rotate(-6deg)}.hero{position:relative}.hero,.get{text-align:center;justify-items:center;gap:18px;padding-block:48px 24px;display:grid}.hero{padding-top:64px}.tagline{max-width:24em;font-size:34px}.hero .tagline{margin-top:26px}.soon{color:var(--pencil);font-size:22px}.btn{font:30px/1 var(--hand);color:var(--ink);background:var(--paper);padding:10px 26px 8px;text-decoration:none;transition:transform .1s;display:inline-block;position:relative}.edge{pointer-events:none;width:calc(100% + 8px);height:calc(100% + 8px);position:absolute;inset:-4px;overflow:visible}.edge path{fill:none;stroke:var(--ink);stroke-width:2.3px;stroke-linecap:round;vector-effect:non-scaling-stroke}.edge path+path{stroke-width:1.2px;opacity:.55}.btn:hover{transform:rotate(-1.5deg)scale(1.03)}.btn:focus-visible,a:focus-visible{outline:2px dashed var(--blue);outline-offset:6px}.btn.hot{background:linear-gradient(97deg, transparent 4%, var(--yellow) 6% 94%, transparent 96%) center / 100% 70% no-repeat, var(--paper)}.btn.big{padding:14px 34px 10px;font-size:38px}.frame{display:block;position:relative;rotate:-.6deg}.shot{background:var(--paper);width:100%;height:auto;display:block}.hero-shot{width:100%;max-width:900px;margin-top:12px}.demo{background:var(--paper);border:0;width:100%;height:max(560px,min(640px,100vh - 270px));display:block}.still{display:none}@media (width<=720px),(pointer:coarse){.live{display:none}.still{display:block}}section{padding-block:40px;position:relative}section+section{border-top:2px dashed color-mix(in srgb, var(--pencil) 35%, transparent)}.steps{counter-reset:step;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:18px 0 0;padding:0;list-style:none;display:grid}.steps li{counter-increment:step}.steps li:nth-child(2n) .frame{rotate:.8deg}.steps h3:before{content:counter(step) ". ";color:var(--red)}.steps p{font-size:21px}.pens ul,.chapters ol{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px 32px;margin:0;padding:0;list-style:none;display:grid}.pens li p,.chapters li p{color:var(--pencil);font-size:21px}.pens li{align-items:flex-start;gap:14px;display:flex}.pens h3{margin-top:0}.pen-icon{--pen:44px;zoom:.85;flex:none;display:block}.pen{width:var(--pen);height:calc(var(--pen) * 1.45);position:relative;overflow:hidden}.pen svg{width:100%;position:absolute;top:0;left:0;overflow:visible}.pen .barrel{fill:var(--paper);stroke:var(--ink);stroke-width:2.2px;stroke-linejoin:round}.pen .nib{fill:var(--c);stroke:var(--ink);stroke-width:1.4px;stroke-linejoin:round;stroke-linecap:round}.pen .line{fill:none;stroke:var(--ink);stroke-width:1.8px;stroke-linecap:round}.pen .thread{fill:none;stroke:var(--c);stroke-width:2.2px;stroke-linecap:round}.pen .spray{stroke-width:3.4px}.pen .swatch{left:25%;top:calc(var(--pen) * .8);width:50%;position:absolute}.pen-icon[data-tool=body]{--c:var(--ink)}.pen-icon[data-tool=leg]{--c:var(--blue)}.pen-icon[data-tool=wheel]{--c:var(--red)}.pen-icon[data-tool=balloon]{--c:var(--pink)}.pen-icon[data-tool=spring]{--c:var(--spring)}.pen-icon[data-tool=thread]{--c:var(--thread)}.pen-icon[data-tool=jet]{--c:var(--jet)}.swatch{border-radius:3px;width:46px;height:6px;transform:rotate(-3deg)}.swatch.body{background:var(--ink);height:7px}.swatch.leg{background:var(--blue);height:4px}.swatch.wheel{background:repeating-linear-gradient(90deg, var(--red) 0 9px, transparent 9px 15px);height:4px}.swatch.balloon{background:var(--pink);border-radius:1px;height:15px}.swatch.spring{background:linear-gradient(135deg, transparent 40%, var(--spring) 40% 60%, transparent 60%) 0 0 / 8px 12px, linear-gradient(45deg, transparent 40%, var(--spring) 40% 60%, transparent 60%) 4px 0 / 8px 12px;border-radius:0;height:12px}.swatch.thread{background:repeating-linear-gradient(90deg, var(--thread) 0 7px, transparent 7px 12px);height:3px}.swatch.jet{background:radial-gradient(circle, var(--jet) 0 1.5px, transparent 2px) right center / 6px 4px repeat-y, linear-gradient(var(--jet), var(--jet)) left center / 72% 5px no-repeat;border-radius:0;height:12px}.chapters ol{counter-reset:chapter}.chapters li{counter-increment:chapter}.chapters h3:before{content:counter(chapter) " ";color:var(--red)}.chapters ol{gap:30px 26px}.chapters li{padding:14px 18px 12px;position:relative}.chapters li:nth-child(2n){rotate:.7deg}.chapters li:nth-child(odd){rotate:-.5deg}.chapters li p{color:inherit;opacity:.85}.chapters .edge path{stroke:currentColor}.chapters .paper-chalk .edge path{stroke-dasharray:8 1.2}.chapters .paper-kraft .edge path,.chapters .paper-cardboard .edge path{stroke-width:3px;opacity:.8}.chapters .paper-brick .edge path{stroke-width:2.6px}.chapters .paper-napkin .edge path+path{stroke-width:4px;opacity:.15}.chapters :is(.paper-chalk,.paper-blueprint,.paper-brick,.paper-denim) h3:before{color:#ffb0a4}.chapters .paper-notebook{color:#23252b;background:repeating-linear-gradient(#0000 0 15px,#becfe7 15px 16px),#fdfcf6}.chapters .paper-chalk{color:#f4f0d9;background:repeating-linear-gradient(8deg,#0000 0 8px,#ffffff08 8px 10px),#1d3029;box-shadow:inset 0 0 0 4px #7d5f41}.chapters .paper-blueprint{color:#e6f4ff;background:repeating-linear-gradient(90deg,#0000 0 11px,#80b8e34d 11px 12px),repeating-linear-gradient(#0000 0 11px,#80b8e34d 11px 12px),#163a59}.chapters .paper-kraft{color:#493127;background:repeating-linear-gradient(32deg,#0000 0 3px,#a7723512 3px 4px),#d6b78d}.chapters .paper-bubble{color:#1d2733;background:radial-gradient(circle at 40% 40%,#ffffffb0 0 2px,#0000 3px) 0 0/14px 14px,radial-gradient(circle,#0000 0 5px,#78aac355 5px 6px,#0000 6px) 0 0/14px 14px,#dfeef3}.chapters .paper-cardboard{color:#1b1714;background:repeating-linear-gradient(90deg,#0000 0 9px,#5a3a1c14 9px 13px),#c79e6c}.chapters .paper-napkin{color:#262a33;background:radial-gradient(circle at 70% 60%,#0000 0 13px,#8c5a3240 13px 17px,#0000 17px),repeating-linear-gradient(45deg,#0000 0 11px,#96826414 11px 12px),#f8f5ef}.chapters .paper-sketchbook{color:#2b2b33;background:radial-gradient(at 30% 30%,#6eaae633 0 30%,#0000 32%),radial-gradient(circle,#8c7a5a14 0 1px,#0000 1.5px) 0 0/5px 5px,#fbf8f1;box-shadow:inset 0 4px 0 -1px #8d929b}.chapters .paper-brick{color:#f7f3ea;background:repeating-linear-gradient(0deg,#d6bea940 0 2px,#0000 2px 12px),#93473a;box-shadow:inset 0 0 0 3px #5e2a20}.chapters .paper-denim{color:#f4f1e8;background:repeating-linear-gradient(-60deg,#0000 0 3px,#d2e1f512 3px 4px),#3c5a86;box-shadow:inset 0 5px 0 -3px #ffa24a}.doodle{fill:none;width:76px;height:76px;stroke:var(--pencil);stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;opacity:.6;pointer-events:none;position:absolute;overflow:visible}.scrawl{color:var(--pencil);opacity:.75;pointer-events:none;font-size:24px;position:absolute}.ground{fill:none;stroke-linecap:round;stroke-linejoin:round;width:100%;height:70px;margin-top:24px;display:block}.ground .hill{stroke:var(--ink);stroke-width:3px}.ground .hatch{stroke:#2446b866;stroke-width:1.4px}.ground .grass{stroke:var(--grass);stroke-width:1.8px}footer{color:var(--pencil);text-align:center;padding-block:32px 48px;font-size:20px}.lang{top:16px;anchor-name:--lang;padding:6px 40px 4px 16px;font-size:24px;position:absolute;inset-inline-end:0}[dir=rtl] .lang{padding:6px 16px 4px 40px}.lang .caret{inset-inline-end:12px;background:currentColor;width:20px;height:14px;position:absolute;top:50%;translate:0 -45%;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.6 2.6 C7 2 13 2.3 18.4 1.8 L10.2 12.6 Z' stroke-width='2'/%3E%3Cpath d='M5 4.2 L15.2 3.9 L7.2 5.9 L13.4 5.8 L9 8 L11.8 7.9' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.6 2.6 C7 2 13 2.3 18.4 1.8 L10.2 12.6 Z' stroke-width='2'/%3E%3Cpath d='M5 4.2 L15.2 3.9 L7.2 5.9 L13.4 5.8 L9 8 L11.8 7.9' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E") 50%/contain no-repeat}.pick-pop{inset:70px auto auto;color:var(--ink);background:var(--paper);border:0;margin:0;padding:8px 6px;position:fixed;inset-inline-end:16px;overflow:visible;box-shadow:0 14px 30px -18px #00000080}@supports (anchor-name:--lang){.pick-pop{position-anchor:--lang;top:calc(anchor(bottom) + 8px);inset-inline-end:anchor(right)}}.pick-pop ul{columns:2;font-size-adjust:none;white-space:nowrap;column-gap:6px;margin:0;padding:0;font:25px/1.15 Caveat,system-ui,sans-serif;list-style:none}.pick-pop li{break-inside:avoid}@media (height<=560px){.pick-pop ul{columns:3}}.pick-pop a{color:var(--ink);padding:4px 18px 2px;text-decoration:none;display:block}.pick-pop a:hover{background:linear-gradient(97deg, transparent 1%, var(--yellow) 3% 96%, transparent 99%) center / 100% 70% no-repeat}.pick-pop a[aria-current]{color:var(--red)}@media (width<=1000px){.hero .doodle,.hero .scrawl{display:none}}@media (width<=720px){.doodle{display:none}body{background:repeating-linear-gradient(transparent 0 33px, var(--rule) 33px 34px), var(--paper);font-size:21px}h2{font-size:38px}.tagline{font-size:27px}.btn.big{padding-inline:24px;font-size:30px}.steps{grid-template-columns:minmax(0,1fr)}}@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}
