:root{--z-ink:#2b2140;--z-ink-soft:#5d5470;--z-paper:#fff6e5;--z-sun:#ffd56b;--z-rose:#ff7a8a;--z-mint:#bdeccb;--z-pink:#ffd1e0;--z-butter:#ffe7a8;--z-sky:#c9ddff;--z-peach:#ffc9b8;--z-lilac:#e2d4ff;--z-shadow:5px 5px 0 var(--z-ink);--z-heading:"Baloo 2", sans-serif}*{box-sizing:border-box;margin:0}body{background:var(--z-paper);color:var(--z-ink);font:1.15rem/1.5 Nunito,sans-serif}h1,h2,h3{font-family:var(--z-heading);font-weight:800;line-height:1.05}h2{margin-bottom:1rem;font-size:2.2rem}h3{margin-bottom:.8rem;font-size:1.5rem}h2:has(+.subtitle){margin-bottom:.2rem}.subtitle{color:var(--z-ink-soft);margin-bottom:1.6rem;font-size:1.3rem;font-weight:700}a{color:inherit}.sparkle{vertical-align:-.15em;fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:1.1em;height:1.1em}.layout{grid-template-columns:17rem 1fr;min-height:100vh;display:grid}aside{background:var(--z-sun);border-right:4px solid var(--z-ink);flex-direction:column;height:100vh;padding:1.2rem 1rem;display:flex;position:sticky;top:0;overflow-y:auto}aside .brand{text-decoration:none}aside h1{margin-bottom:1rem;font-size:2.2rem}aside .grp{text-transform:uppercase;letter-spacing:.08em;color:var(--z-ink-soft);margin:1.2rem 0 .3rem;font-size:.8rem;font-weight:800}aside nav a{border:2px solid #0000;border-radius:.8rem;align-items:center;gap:.55rem;padding:.45rem .7rem;font-weight:700;text-decoration:none;display:flex}aside nav a[aria-current]{border-color:var(--z-ink);box-shadow:3px 3px 0 var(--z-ink);background:#fff}aside .extra{margin-top:auto}aside .extra a{border:2px dashed var(--z-ink);background:#fff8;border-radius:.8rem;gap:.55rem;margin-top:.4rem;padding:.45rem .7rem;font-weight:700;text-decoration:none;display:flex}aside .extra small{color:var(--z-ink-soft);margin-left:auto}main{padding:2.5rem 2rem 1.5rem}.col{max-width:88rem}.burger{display:none}@media (width<=52rem){.layout{grid-template-columns:1fr}aside{z-index:20;width:85vw;max-width:20rem;box-shadow:8px 0 0 var(--z-ink);transition:transform .2s;position:fixed;inset:0 auto 0 0;transform:translate(-105%)}#menu:checked~.layout aside{transform:none}.burger{z-index:10;background:var(--z-sun);border-bottom:3px solid var(--z-ink);font:800 1.2rem var(--z-heading);cursor:pointer;align-items:center;gap:.7rem;padding:.7rem 1rem;display:flex;position:sticky;top:0}.burger-btn{border:3px solid var(--z-ink);background:#fff;border-radius:.7rem;padding:.1rem .6rem;font-size:1.4rem}main{padding:1.5rem 1.25rem 1rem}}.pager{pointer-events:none;justify-content:space-between;gap:.6rem;margin-top:2.5rem;display:flex;position:sticky;bottom:.8rem}.pager a{pointer-events:auto;border:2px solid var(--z-ink);box-shadow:3px 3px 0 var(--z-ink);background:#fff;border-radius:999px;padding:.3rem .9rem;font-size:.95rem;font-weight:700;text-decoration:none}.pager a.next{background:var(--z-sun);margin-left:auto}@media (width<=52rem){.pager{position:static}}@keyframes floaty{50%{transform:translateY(-10px)}}@keyframes spin{to{transform:rotate(1turn)}}.hero{background:var(--z-sun);flex-direction:column;justify-content:center;min-height:24rem;margin:-2.5rem -2rem 2rem;padding:2.5rem 26rem 3.5rem 2rem;display:flex;position:relative;overflow:hidden}.hero>:not([aria-hidden]){position:relative}.hero:after{content:"";background:radial-gradient(circle at 20px 0, var(--z-sun) 20px, var(--z-paper) 21px) 0 0 / 40px 28px repeat-x;height:28px;position:absolute;bottom:-1px;left:0;right:0}.hero h1{margin:.5rem 0 .2rem;font-size:clamp(3rem,9vw,5.5rem)}.hero p{font-size:1.4rem;font-weight:700}.sun-rays,.sun-face{width:20rem;height:20rem;margin-top:-11rem;position:absolute;top:50%;right:3rem}.sun-rays{background:repeating-conic-gradient(#fff6 0 10deg, transparent 10deg 20deg);border-radius:50%;animation:60s linear infinite spin}.sun-face{place-items:center;font-size:8rem;animation:4s ease-in-out infinite floaty;display:grid}.kicker{background:var(--z-ink);color:var(--z-sun);border-radius:999px;align-self:flex-start;padding:.25rem .9rem;font-size:.9rem;font-weight:700}.hero-actions{flex-wrap:wrap;align-items:stretch;gap:1rem;margin-top:1.6rem;display:flex}.hero-actions .note{box-shadow:4px 4px 0 var(--z-ink);margin:0;font-size:1.1rem;transform:rotate(-2deg)}.hero-actions .note span{font:700 .95rem/1.3 Nunito,sans-serif;display:block}.lov{border:3px solid var(--z-ink);color:#fff;box-shadow:4px 4px 0 var(--z-rose);background:#1c1c1c;border-radius:1rem;align-items:center;padding:.7rem 1.3rem;font-size:1.15rem;font-weight:800;text-decoration:none;display:inline-flex}@media (width<=60rem){.hero{min-height:0;padding-right:2rem}.sun-rays,.sun-face{width:16rem;height:16rem;margin-top:0;font-size:4rem;top:-6rem;right:-6rem}}@media (width<=52rem){.hero{margin:-1.5rem -1.25rem 1.5rem;padding:2rem 1.25rem 3rem}}.grp-title{border:3px solid var(--z-ink);font:800 1.3rem var(--z-heading);background:#fff;border-radius:999px;margin:3.2rem 0 .5rem;padding:.1rem .9rem;display:inline-block;transform:rotate(-2deg)}.col>.grp-title:first-child{margin-top:0}.stickers{flex-wrap:wrap;gap:1.4rem;display:flex}.stickers a{flex:0 15rem;text-decoration:none}.stickers .card{transition:transform .15s}.stickers a:nth-child(odd) .card{transform:rotate(-2.5deg)}.stickers a:nth-child(2n) .card{transform:rotate(2deg)}.stickers a:hover .card{transform:scale(1.05)}.grid-2,.grid-3,.road{gap:1.1rem;display:grid}.grid-2{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}.grid-3,.road{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}@media (width>=52rem){.grid-2.half{grid-template-columns:repeat(2,1fr)}}.card{border:3px solid var(--z-ink);background:var(--z-mint);box-shadow:var(--z-shadow);border-radius:1.1rem;flex-direction:column;gap:.15rem;padding:1rem 1.1rem;display:flex;position:relative}:nth-child(6n+2)>.card,.card:nth-child(6n+2){background:var(--z-pink)}:nth-child(6n+3)>.card,.card:nth-child(6n+3){background:var(--z-butter)}:nth-child(6n+4)>.card,.card:nth-child(6n+4){background:var(--z-sky)}:nth-child(6n+5)>.card,.card:nth-child(6n+5){background:var(--z-peach)}:nth-child(6n+6)>.card,.card:nth-child(6n+6){background:var(--z-lilac)}.card-icon{align-self:flex-start;font-size:2.2rem;line-height:1.1;text-decoration:none}.card b{font:800 1.3rem/1.1 var(--z-heading)}.card small{color:var(--z-ink-soft);font-size:1rem}.card-step{background:var(--z-ink);color:var(--z-sun);border-radius:999px;padding:0 .6rem;font-size:.85rem;font-weight:800;position:absolute;top:.7rem;right:.7rem}.card-hint{border:2px dashed var(--z-ink);background:#fff8;border-radius:.6rem;margin-top:.4rem;padding:.3rem .6rem;font-size:.9rem}.card-stamped{padding-right:7rem;position:relative}.card-stamp{border:4px double var(--z-rose);width:5.6rem;height:5.6rem;color:var(--z-rose);font:800 .75rem/1 var(--z-heading);text-align:center;text-transform:uppercase;letter-spacing:.04em;background:#fff8;border-radius:50%;place-items:center;margin-top:-2.8rem;display:grid;position:absolute;top:50%;right:.7rem;transform:rotate(-12deg)}.card-stamp strong{font-size:1.8rem;line-height:.9;display:block}.card-words{border:2px solid var(--z-ink);font:800 .9rem var(--z-heading);background:#fff;border-radius:.6rem;align-self:flex-start;margin-top:.35rem;padding:.05rem .6rem;transform:rotate(-2deg)}.card small{flex:1}.visit{border:2px solid var(--z-ink);background:var(--z-sun);box-shadow:3px 3px 0 var(--z-ink);border-radius:999px;align-self:flex-start;margin-top:.8rem;padding:.25rem .9rem;font-weight:800;text-decoration:none}.visit:hover{box-shadow:4px 4px 0 var(--z-ink);transform:translate(-1px,-1px)}.ideas{margin-top:2.5rem}.centered{text-align:center;margin-top:.3rem;display:block}.road{counter-reset:st}.road .card{padding-top:1.6rem;position:relative}.road .card:before{counter-increment:st;content:counter(st);background:var(--z-ink);width:1.8rem;height:1.8rem;color:var(--z-sun);border-radius:50%;place-items:center;font-weight:800;display:grid;position:absolute;top:-.9rem;left:1rem}.note{border:3px solid var(--z-ink);border-radius:.8rem;margin-top:.6rem;padding:.4rem .7rem;font-weight:800}.note.stop{background:var(--z-rose)}.note.ask{background:var(--z-butter)}.ribbon{border:3px solid var(--z-ink);background:var(--z-rose);color:#fff;box-shadow:var(--z-shadow);font:800 1.35rem var(--z-heading);border-radius:1rem;margin-top:1.4rem;padding:.7rem 1.1rem}.pill{border:2px solid var(--z-ink);color:var(--z-ink);background:#fff;border-radius:999px;padding:.1rem .7rem;font-weight:700;display:inline-block}.divider{align-items:center;gap:1rem;margin:2.8rem 0 2rem;display:flex}.divider:before,.divider:after{content:"";background:radial-gradient(circle at 7px -3px, transparent 6px, var(--z-ink) 7px 9px, transparent 10px) 0 0 / 14px 14px repeat-x;flex:1;height:14px}.divider span{font-size:1.8rem}.narrow{max-width:46rem}.chat{flex-direction:column;gap:.8rem;display:flex}.chat-row{align-items:center;gap:.6rem;display:flex}.chat-row.right{justify-content:flex-end}.chat-who{font-size:2.4rem}.bubble{border:3px solid var(--z-ink);box-shadow:var(--z-shadow);background:#fff;border-radius:1.2rem;padding:.6rem 1rem}.bubble.ask{background:var(--z-sun);font-weight:800}.postits{flex-wrap:wrap;gap:1.2rem;margin-top:1.4rem;display:flex}.postit{border:3px solid var(--z-ink);background:var(--z-sky);box-shadow:var(--z-shadow);flex:12rem;padding:1rem;transform:rotate(-2deg)}.postit+.postit{background:var(--z-pink);transform:rotate(2deg)}.postit b{font:800 1.4rem var(--z-heading);display:block}.lovable-btn{color:#fff;white-space:nowrap;background:#1c1c1c;border-radius:.45rem;align-items:center;gap:.35rem;padding:.3rem .7rem;font:600 .85rem/1 Inter,system-ui,sans-serif;display:inline-flex}.lovable-btn svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:.95rem;height:.95rem}.minis{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;margin-top:1.2rem;display:grid}.mini{border:3px solid var(--z-ink);background:var(--z-sky);box-shadow:3px 3px 0 var(--z-ink);border-radius:1rem;align-items:center;gap:.8rem;padding:.7rem .9rem;display:flex}.mini+.mini{background:var(--z-peach)}.oneshot{border:2px solid var(--z-ink);box-shadow:3px 3px 0 var(--z-ink);color:inherit;cursor:pointer;background:#fff;border-radius:999px;align-self:flex-start;margin-top:.8rem;padding:.25rem .9rem;font:800 1rem Nunito,sans-serif}.oneshot:hover{box-shadow:4px 4px 0 var(--z-ink);transform:translate(-1px,-1px)}.prompt-modal{border:3px solid var(--z-ink);background:var(--z-paper);width:min(46rem,100% - 2rem);max-height:85vh;color:var(--z-ink);box-shadow:8px 8px 0 var(--z-ink);border-radius:1.4rem;margin:auto;padding:0}.prompt-modal::backdrop{background:#2b214099}.prompt-modal .close{border:2px solid var(--z-ink);width:2.2rem;height:2.2rem;color:inherit;cursor:pointer;background:#fff;border-radius:50%;font:800 1.1rem Nunito,sans-serif;position:absolute;top:.7rem;right:.7rem}.prompt-head{background:var(--z-sun);border-bottom:3px solid var(--z-ink);align-items:center;gap:.8rem;padding:1.2rem 3.5rem 1rem 1.4rem;display:flex}.prompt-head h3{margin:0}.prompt-head small{color:var(--z-ink-soft);font-size:.9rem;font-weight:700}.prompt-body{padding:1.6rem 1.4rem 1.3rem}.prompt-text{border:3px dashed var(--z-ink);background:#fff;border-radius:1rem;padding:1.1rem 1.2rem;font-size:1.05rem;position:relative}.prompt-text p+p{margin-top:.7rem}.prompt-text .copy{border:2px solid var(--z-ink);color:inherit;cursor:pointer;background:#fff;border-radius:999px;padding:.2rem .8rem;font:800 .9rem Nunito,sans-serif;position:absolute;top:-.95rem;right:1rem}.prompt-foot{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.3rem;display:flex}.prompt-meta{flex-wrap:wrap;gap:.4rem;display:flex}.prompt-meta .pill{font-size:.9rem}.open-app{border:3px solid var(--z-ink);background:var(--z-sun);box-shadow:4px 4px 0 var(--z-ink);font:800 1.15rem var(--z-heading);border-radius:1rem;padding:.6rem 1.3rem;text-decoration:none}.steps{counter-reset:st;max-width:46rem;padding:0;list-style:none}.steps li{min-height:5.5rem;padding:0 0 1.2rem 4.2rem;position:relative}.steps li:before,.steps li:after{box-sizing:border-box}.steps li:before{counter-increment:st;content:counter(st);border:3px solid var(--z-ink);background:var(--z-sun);width:3rem;height:3rem;box-shadow:3px 3px 0 var(--z-ink);font:800 1.6rem var(--z-heading);border-radius:50%;place-items:center;display:grid;position:absolute;top:0;left:0}.steps li:after{content:"";border-left:4px dotted var(--z-ink);position:absolute;top:3.6rem;bottom:.4rem;left:calc(1.5rem - 2px)}.steps li:last-child:after{display:none}.steps h3{margin:0 0 .3rem;padding-top:calc(1.5rem - .5lh)}.steps p+p,.clicks+p{margin-top:.5rem}.clicks{border:3px dashed var(--z-ink);background:#fff;border-radius:.9rem;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.5rem;padding:.6rem .8rem;display:flex}.clicks .arrow{font-weight:800}.steps-start{max-width:46rem;margin-bottom:2rem}.steps-end{max-width:46rem}.github-btn{color:#fff;white-space:nowrap;background:#1f883d;border-radius:.4rem;align-items:center;padding:.3rem .7rem;font:600 .85rem/1 system-ui,sans-serif;display:inline-flex}
