@font-face{font-family:Luckiest Guy;src:url(/fonts/luckiest.ttf);font-display:swap}@font-face{font-family:Anton;src:url(/fonts/anton.ttf);font-display:swap}@font-face{font-family:Fredoka;src:url(/fonts/fredoka.ttf);font-weight:300 700;font-display:swap}:root{--blue:#2f6bff;--frog:#5b8cf2;--deep:#0a3fd6;--ink:#111;--sky:#bfe0ff;--cream:#fffaf0;--yel:#ffd400;--pink:#ff9ecf;--w:1160px;--pad:20px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--cream);color:var(--ink);margin:0;font:500 18px/1.45 Fredoka,system-ui,sans-serif}img{max-width:100%;display:block}.wrap{max-width:var(--w);padding:0 var(--pad);margin:0 auto}h1,h2,h3{letter-spacing:.5px;margin:0;font-family:Luckiest Guy,sans-serif;font-weight:400;line-height:.95}h2{color:var(--ink);text-transform:lowercase;font-size:clamp(44px,7vw,84px)}.sub{max-width:560px;margin:10px 0 28px;font-size:20px}.small{opacity:.8;margin:6px 0;font-size:15px}.btn{background:var(--yel);color:var(--ink);border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink);cursor:pointer;border-radius:16px;align-items:center;gap:8px;padding:12px 20px 8px;font:400 20px Luckiest Guy,sans-serif;text-decoration:none;transition:transform 80ms,box-shadow 80ms;display:inline-flex}.btn:hover{box-shadow:0 7px 0 var(--ink);transform:translateY(-2px)}.btn:active{box-shadow:0 1px 0 var(--ink);transform:translateY(4px)}.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:0 5px 0 var(--ink);transform:none}.btn.dark{background:var(--ink);color:#fff;box-shadow:0 5px 0 var(--blue)}.btn.ghost{background:#fff;padding:9px 14px 5px;font-size:17px}.btn.sm{padding:9px 14px 5px;font-size:17px}.nav{z-index:20;background:var(--cream);border-bottom:4px solid var(--ink);position:sticky;top:0}.navin{align-items:center;gap:24px;height:72px;display:flex}.brand{color:var(--ink);align-items:center;gap:10px;padding-top:6px;font:400 30px Luckiest Guy;text-decoration:none;display:flex}.brand img{height:52px}.links{gap:22px;margin-left:auto;display:flex}.links a{color:var(--ink);padding-top:4px;font:400 20px Luckiest Guy;text-decoration:none}.links a:hover{color:var(--blue)}.hero{background:var(--sky);border-bottom:4px solid var(--ink);padding:48px 0 56px;overflow:hidden}.herogrid{grid-template-columns:1fr 1.25fr;align-items:center;gap:36px;display:grid}.hero h1{color:var(--blue);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:6px 6px 0 var(--ink);transform-origin:0;font-size:clamp(52px,7.2vw,100px);transform:rotate(-3deg)}.lead{max-width:440px;margin:26px 0 8px;font-size:24px}.count{border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:#fff;border-radius:20px;flex-direction:column;padding:12px 20px 10px;display:inline-flex;transform:rotate(1.5deg)}.count b{color:var(--deep);padding-top:6px;font:400 54px/1 Luckiest Guy}.pond{aspect-ratio:5/4;border:5px solid var(--ink);box-shadow:8px 10px 0 var(--ink),inset 0 -26px 0 #2a5fe0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:#3c7bff;border-radius:46% 54% 50% 50%/40% 44% 56% 60%;position:relative;overflow:hidden}.lily{aspect-ratio:1.3;border:4px solid var(--ink);clip-path:polygon(0 0,100% 0,100% 100%,52% 100%,50% 50%,48% 100%,0 100%);background:#4cd16a;border-radius:50%;width:20%;position:absolute}.l1{top:14%;left:8%;rotate:20deg}.l2{width:15%;top:22%;right:10%;rotate:-40deg}.l3{width:13%;bottom:20%;left:16%;rotate:110deg}.pfrog{width:46%;filter:drop-shadow(0 0 0 var(--ink));pointer-events:none;transition:left .25s;position:absolute;bottom:-10%;translate:-50%}.pfrog.jump{animation:.55s cubic-bezier(.3,.7,.4,1) jump}@keyframes jump{0%{transform:translateY(0)scale(1.08,.9)}35%{transform:translateY(-38%)scale(.94,1.08)rotate(-5deg)}70%{transform:translateY(-6%)rotate(3deg)}85%{transform:scale(1.06,.94)}to{transform:none}}.pop{pointer-events:none;position:absolute}.ring{border:4px solid #fff;border-radius:50%;width:20px;height:20px;animation:.8s ease-out forwards ring;position:absolute;top:0;left:0;translate:-50% -50%}@keyframes ring{to{opacity:0;width:150px;height:70px}}.pop em{color:var(--yel);-webkit-text-stroke:2px var(--ink);paint-order:stroke;white-space:nowrap;font:400 34px Luckiest Guy;animation:.9s ease-out forwards up;position:absolute;translate:-50% -50%}@keyframes up{0%{transform:translateY(0)scale(.5)rotate(-8deg)}30%{transform:translateY(-30px)scale(1.15)}to{opacity:0;transform:translateY(-90px)rotate(6deg)}}.tap{color:#fff;opacity:.85;font:400 20px Luckiest Guy;position:absolute;bottom:6%;left:5%;rotate:-4deg}.sec{border-bottom:4px solid var(--ink);padding:72px 0}.yellow{background:var(--yel)}.pink{background:var(--pink)}.blue{background:var(--blue);color:#fff}.blue h2{color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke;text-shadow:5px 5px 0 var(--ink)}.tool{grid-template-columns:1.2fr 1fr;align-items:start;gap:28px;display:grid}.canvasbox{border:5px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:#fff;border-radius:22px;overflow:hidden}.canvasbox canvas{touch-action:none;cursor:grab;width:100%;height:auto;display:block}.panel{border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:#fff;border-radius:22px;flex-direction:column;gap:14px;padding:22px;display:flex}.panel label{flex-direction:column;gap:6px;font:400 18px Luckiest Guy;display:flex}.panel input:not([type=file]){border:3px solid var(--ink);border-radius:12px;outline:none;padding:12px 14px;font:600 18px Fredoka}.panel input:focus{box-shadow:0 0 0 4px var(--frog)}.lbl{font:400 18px Luckiest Guy}.poses{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:10px;display:grid}.poses button{aspect-ratio:1;background:var(--sky);border:3px solid var(--ink);cursor:pointer;border-radius:14px;place-items:center;padding:6px;display:grid}.poses button img{object-fit:contain;max-height:100%}.poses button.on{background:var(--yel);box-shadow:0 0 0 3px var(--ink)}.row{flex-wrap:wrap;gap:12px;display:flex}.row.tight{gap:8px}.file{justify-content:center;position:relative;flex-direction:row!important}.file input{opacity:0;cursor:pointer;position:absolute;inset:0}.steps{grid-template-columns:repeat(3,1fr);gap:22px;margin:36px 0;display:grid}.step{color:var(--ink);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:#fff;border-radius:22px;padding:24px}.step:nth-child(2){rotate:1deg}.step:first-child{rotate:-1deg}.step b{background:var(--yel);border:4px solid var(--ink);border-radius:50%;place-items:center;width:52px;height:52px;padding-top:6px;font:400 30px Luckiest Guy;display:inline-grid}.step h3{margin:14px 0 8px;font-size:28px}.step p{margin:0}.ca{color:var(--ink);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:#fff;border-radius:20px;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 12px 12px 18px;display:flex}.calbl{padding-top:4px;font:400 24px Luckiest Guy}.ca code{overflow-wrap:anywhere;flex:1;min-width:0;font:600 18px ui-monospace,monospace}.gal{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:24px;margin-top:32px;display:grid}.gal figure{border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:#fff;border-radius:20px;margin:0;padding:14px;transition:rotate .15s}.gal figure:hover{rotate:0deg!important}.gal img{aspect-ratio:1;object-fit:contain;background:var(--sky);border-radius:12px;width:100%}.gal figcaption{margin-top:10px;font:400 18px Luckiest Guy}.foot{background:var(--ink);color:#fff;padding:26px 0}.footin{align-items:center;gap:20px;display:flex}.foot .brand img{background:#fff;border-radius:12px;padding:4px 8px}.foot .small{margin-right:auto}@media (width<=860px){.herogrid,.tool,.steps{grid-template-columns:1fr}.links{display:none}.navin .btn{margin-left:auto}.hide-s{display:none}.sec{padding:56px 0}.footin{flex-wrap:wrap}}.rel{position:relative}.herocta{flex-wrap:wrap;gap:14px;margin-top:22px;display:flex}.btn.big{border-radius:18px;padding:15px 24px 10px;font-size:24px}.herocta .btn:first-child{rotate:-2deg}.herocta .btn:last-child{rotate:1.5deg}.btn:hover{animation:.4s wig}@keyframes wig{0%,to{rotate:0deg}25%{rotate:-3deg}75%{rotate:3deg}}.hero{padding-bottom:90px;position:relative}.hero h1{animation:.7s cubic-bezier(.3,1.6,.5,1) both h1in}@keyframes h1in{0%{opacity:0;transform:rotate(-12deg)scale(.6)}}.count{animation:3.2s ease-in-out infinite bob}.pond{animation:6s ease-in-out infinite pondbob}@keyframes pondbob{50%{transform:translateY(-6px)rotate(.6deg)}}.pfrog:not(.jump){animation:2.6s ease-in-out infinite bob}@keyframes bob{50%{transform:translateY(-7px)}}.lily{animation:7s ease-in-out infinite float}.l2{animation-duration:9s;animation-delay:-2s}.l3{animation-duration:6s;animation-delay:-4s}.l4{width:11%;animation-duration:8s;top:8%;left:58%;rotate:200deg}@keyframes float{50%{transform:translate(10px,6px)rotate(14deg)}}.idle{pointer-events:none;border:3px solid #ffffffbf;border-radius:50%;width:30px;height:12px;animation:3.6s ease-out infinite idle;position:absolute;translate:-50% -50%}.r1{top:40%;left:30%}.r2{animation-delay:-1.2s;top:55%;left:72%}.r3{animation-delay:-2.4s;top:22%;left:48%}@keyframes idle{0%{opacity:1;width:10px;height:4px}to{opacity:0;width:120px;height:44px}}.cue{background:var(--yel);width:54px;height:54px;color:var(--ink);border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink);border-radius:50%;place-items:center;animation:1.4s ease-in-out infinite cue;display:grid;position:absolute;bottom:22px;left:50%;translate:-50%}@keyframes cue{50%{transform:translateY(10px)}}.sec{border-bottom:0;margin-top:-28px;padding-top:96px;position:relative}.zig:before,.wave:before{content:"";background:inherit;height:30px;position:absolute;top:-1px;left:0;right:0}.zig{clip-path:polygon(0 28px,2.5% 0,5% 28px,7.5% 0,10% 28px,12.5% 0,15% 28px,17.5% 0,20% 28px,22.5% 0,25% 28px,27.5% 0,30% 28px,32.5% 0,35% 28px,37.5% 0,40% 28px,42.5% 0,45% 28px,47.5% 0,50% 28px,52.5% 0,55% 28px,57.5% 0,60% 28px,62.5% 0,65% 28px,67.5% 0,70% 28px,72.5% 0,75% 28px,77.5% 0,80% 28px,82.5% 0,85% 28px,87.5% 0,90% 28px,92.5% 0,95% 28px,97.5% 0,100% 28px,100% 100%,0 100%)}.zig:before,.wave:before{display:none}.wave{clip-path:polygon(0% 28px,.5% 27px,1% 24.2px,1.5% 20px,2% 14.9px,2.5% 9.7px,3% 5.1px,3.5% 1.7px,4% .1px,4.5% .4px,5% 2.7px,5.5% 6.5px,6% 11.4px,6.5% 16.6px,7% 21.5px,7.5% 25.3px,8% 27.6px,8.5% 27.9px,9% 26.3px,9.5% 22.9px,10% 18.3px,10.5% 13.1px,11% 8px,11.5% 3.8px,12% 1px,12.5% 0,13% 1px,13.5% 3.8px,14% 8px,14.5% 13.1px,15% 18.3px,15.5% 22.9px,16% 26.3px,16.5% 27.9px,17% 27.6px,17.5% 25.3px,18% 21.5px,18.5% 16.6px,19% 11.4px,19.5% 6.5px,20% 2.7px,20.5% .4px,21% .1px,21.5% 1.7px,22% 5.1px,22.5% 9.7px,23% 14.9px,23.5% 20px,24% 24.2px,24.5% 27px,25% 28px,25.5% 27px,26% 24.2px,26.5% 20px,27% 14.9px,27.5% 9.7px,28% 5.1px,28.5% 1.7px,29% .1px,29.5% .4px,30% 2.7px,30.5% 6.5px,31% 11.4px,31.5% 16.6px,32% 21.5px,32.5% 25.3px,33% 27.6px,33.5% 27.9px,34% 26.3px,34.5% 22.9px,35% 18.3px,35.5% 13.1px,36% 8px,36.5% 3.8px,37% 1px,37.5% 0,38% 1px,38.5% 3.8px,39% 8px,39.5% 13.1px,40% 18.3px,40.5% 22.9px,41% 26.3px,41.5% 27.9px,42% 27.6px,42.5% 25.3px,43% 21.5px,43.5% 16.6px,44% 11.4px,44.5% 6.5px,45% 2.7px,45.5% .4px,46% .1px,46.5% 1.7px,47% 5.1px,47.5% 9.7px,48% 14.9px,48.5% 20px,49% 24.2px,49.5% 27px,50% 28px,50.5% 27px,51% 24.2px,51.5% 20px,52% 14.9px,52.5% 9.7px,53% 5.1px,53.5% 1.7px,54% .1px,54.5% .4px,55% 2.7px,55.5% 6.5px,56% 11.4px,56.5% 16.6px,57% 21.5px,57.5% 25.3px,58% 27.6px,58.5% 27.9px,59% 26.3px,59.5% 22.9px,60% 18.3px,60.5% 13.1px,61% 8px,61.5% 3.8px,62% 1px,62.5% 0,63% 1px,63.5% 3.8px,64% 8px,64.5% 13.1px,65% 18.3px,65.5% 22.9px,66% 26.3px,66.5% 27.9px,67% 27.6px,67.5% 25.3px,68% 21.5px,68.5% 16.6px,69% 11.4px,69.5% 6.5px,70% 2.7px,70.5% .4px,71% .1px,71.5% 1.7px,72% 5.1px,72.5% 9.7px,73% 14.9px,73.5% 20px,74% 24.2px,74.5% 27px,75% 28px,75.5% 27px,76% 24.2px,76.5% 20px,77% 14.9px,77.5% 9.7px,78% 5.1px,78.5% 1.7px,79% .1px,79.5% .4px,80% 2.7px,80.5% 6.5px,81% 11.4px,81.5% 16.6px,82% 21.5px,82.5% 25.3px,83% 27.6px,83.5% 27.9px,84% 26.3px,84.5% 22.9px,85% 18.3px,85.5% 13.1px,86% 8px,86.5% 3.8px,87% 1px,87.5% 0,88% 1px,88.5% 3.8px,89% 8px,89.5% 13.1px,90% 18.3px,90.5% 22.9px,91% 26.3px,91.5% 27.9px,92% 27.6px,92.5% 25.3px,93% 21.5px,93.5% 16.6px,94% 11.4px,94.5% 6.5px,95% 2.7px,95.5% .4px,96% .1px,96.5% 1.7px,97% 5.1px,97.5% 9.7px,98% 14.9px,98.5% 20px,99% 24.2px,99.5% 27px,100% 28px,100% 100%,0 100%)}.yellow{padding-bottom:110px}.pink{padding-bottom:80px}.blue{padding-bottom:120px}.gal-sec{background:var(--cream)}.canvasbox{rotate:-1.2deg}.panel{margin-top:24px;rotate:1.4deg}#bfrongify .canvasbox{rotate:1deg}#bfrongify .panel{rotate:-1.6deg}.tool{position:relative}.step:nth-child(3){translate:0 14px;rotate:-.6deg}.step:nth-child(2){translate:0 -10px}.step:hover,.panel:hover{animation:.45s wig}.ca{margin-top:12px;rotate:-.5deg}.peek{pointer-events:none;z-index:2;filter:drop-shadow(5px 5px #0000002e);animation:3s ease-in-out infinite bob;position:absolute}.pk1{right:var(--pad);width:140px;top:-74px;rotate:8deg}.pk2{right:calc(var(--pad) + 10px);width:130px;animation-delay:-1s;top:-70px;rotate:-8deg}.pk3{right:var(--pad);width:160px;animation-delay:-.5s;top:-60px;rotate:6deg}.pk4{right:var(--pad);border:4px solid var(--ink);border-radius:16px;width:230px;animation-delay:-1.5s;top:-40px;rotate:-6deg}.gal{gap:30px 22px}.gal figure:nth-child(2n){translate:0 18px}.gal figure img{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}.gal figure:hover{transform:scale(1.05)rotate(-3deg);rotate:0deg!important}.gal figure:hover img{transform:rotate(6deg)scale(1.06)}.gal figure{transition:transform .25s cubic-bezier(.3,1.6,.5,1),rotate .25s}.rv{opacity:0;transition:opacity .5s,transform .55s cubic-bezier(.3,1.6,.5,1);transform:translateY(30px)scale(.94)}.rv.in{opacity:1;transform:none}.steps .rv:nth-child(2),.panel.rv{transition-delay:80ms}.steps .rv:nth-child(3){transition-delay:.16s}.gal .rv:nth-child(2){transition-delay:60ms}.gal .rv:nth-child(3){transition-delay:.12s}.gal .rv:nth-child(4){transition-delay:.18s}.gal .rv:nth-child(5){transition-delay:.24s}.foot{position:relative}@media (width<=860px){.sec h2{padding-right:90px}.peek{top:-62px;width:84px!important}.pk4{width:140px!important}.panel{margin-top:0}.step:nth-child(n),.gal figure:nth-child(2n){translate:none}.cue{display:none}.hero{padding-bottom:64px}.btn.big{font-size:20px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.rv{opacity:1;transform:none}}.brand img.pfp{border:3px solid var(--ink);background:0 0;border-radius:50%;width:48px;height:48px;margin:0;padding:0}.brand:hover img.pfp{animation:.4s wig}
