@import "https://fonts.googleapis.com/css2?family=Bangers&family=Nunito:wght@400;600;700;800&family=Permanent+Marker&display=swap";
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial}}}.absolute{position:absolute}.relative{position:relative}.col-span-2{grid-column:span 2/span 2}.mx-auto{margin-inline:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1}.h-\[4px\]{height:4px}.h-full{height:100%}.min-h-full{min-height:100%}.min-h-screen{min-height:100vh}.w-full{width:100%}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.-rotate-6{rotate:-6deg}.rotate-12{rotate:12deg}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-\[2px\]{gap:2px}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:3.40282e38px}.rounded-none{border-radius:0}.border-2,.border-\[2px\]{border-style:var(--tw-border-style);border-width:2px}.border-t-\[3px\]{border-top-style:var(--tw-border-style);border-top-width:3px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-b-\[3px\]{border-bottom-style:var(--tw-border-style);border-bottom-width:3px}.border-\[var\(--cream\)\]{border-color:var(--cream)}.border-\[var\(--ink\)\]{border-color:var(--ink)}.bg-\[var\(--cream\)\]{background-color:var(--cream)}.bg-\[var\(--ink\)\]{background-color:var(--ink)}.bg-\[var\(--red\)\]{background-color:var(--red)}.bg-\[var\(--yellow\)\]{background-color:var(--yellow)}.object-cover{object-fit:cover}.p-\[2px\]{padding:2px}.text-center{text-align:center}.leading-none{--tw-leading:1;line-height:1}.text-\[var\(--yellow\)\]{color:var(--yellow)}.opacity-10{opacity:.1}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.opacity-100{opacity:1}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}@media (hover:hover){.hover\:opacity-80:hover{opacity:.8}}:root{--ink:#0d0d0d;--paper:#f7f2e8;--cream:#ede8da;--yellow:#ffe500;--red:#e8292a;--blue:#1b4fd8;--panel-border:3px solid #0d0d0d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background-color:var(--paper);color:var(--ink);font-family:Nunito,sans-serif;overflow-x:hidden}body:before{content:"";opacity:.025;pointer-events:none;z-index:9999;background-image:radial-gradient(circle,#0d0d0d 1px,#0000 1px);background-size:20px 20px;position:fixed;inset:0}.font-comic{letter-spacing:.05em;font-family:Bangers,cursive}.font-marker{font-family:Permanent Marker,cursive}.panel{border:var(--panel-border);position:relative}.panel-shadow{box-shadow:5px 5px 0 var(--ink)}.panel-shadow-lg{box-shadow:8px 8px 0 var(--ink)}.speech-bubble{border:var(--panel-border);background:#fff;border-radius:20px;position:relative}.speech-bubble:after{content:"";border-top:18px solid #0d0d0d;border-left:12px solid #0000;border-right:6px solid #0000;width:0;height:0;position:absolute;bottom:-18px;left:30px}.speech-bubble:before{content:"";z-index:1;border-top:16px solid #fff;border-left:11px solid #0000;border-right:5px solid #0000;width:0;height:0;position:absolute;bottom:-13px;left:31px}.step-badge{background:var(--yellow);border:var(--panel-border);width:52px;height:52px;box-shadow:3px 3px 0 var(--ink);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-family:Bangers,cursive;font-size:1.5rem;display:flex}.btn-primary{background:var(--yellow);color:var(--ink);border:var(--panel-border);letter-spacing:.08em;box-shadow:5px 5px 0 var(--ink);cursor:pointer;padding:14px 36px;font-family:Bangers,cursive;font-size:1.2rem;text-decoration:none;transition:transform .1s,box-shadow .1s;display:inline-block}.btn-primary:hover{box-shadow:7px 7px 0 var(--ink);transform:translate(-2px,-2px)}.btn-primary:active{box-shadow:2px 2px 0 var(--ink);transform:translate(3px,3px)}.btn-secondary{color:var(--ink);border:var(--panel-border);box-shadow:3px 3px 0 var(--ink);cursor:pointer;background:#fff;padding:10px 24px;font-family:Nunito,sans-serif;font-size:1rem;font-weight:700;transition:transform .1s,box-shadow .1s}.btn-secondary:hover{box-shadow:4px 4px 0 var(--ink);transform:translate(-1px,-1px)}.ink-input{border:var(--panel-border);background:#fff;outline:none;width:100%;padding:12px 16px;font-family:Nunito,sans-serif;font-size:1rem;transition:box-shadow .15s}.ink-input:focus{box-shadow:4px 4px 0 var(--ink)}.progress-track{background:var(--cream);border:2px solid var(--ink);height:8px;overflow:hidden}.progress-fill{background:var(--yellow);border-right:2px solid var(--ink);height:100%;transition:width .4s cubic-bezier(.34,1.56,.64,1)}.style-card{cursor:pointer;transition:transform .1s,box-shadow .1s}.style-card:hover{box-shadow:8px 8px 0 var(--ink);transform:translate(-2px,-2px)}.style-card.selected{box-shadow:8px 8px 0 var(--ink);transform:translate(-2px,-2px);background:var(--yellow)!important}.upload-zone{border:3px dashed var(--ink);background:var(--cream);cursor:pointer;transition:background .15s}.upload-zone:hover{background:#e8e3d5}@keyframes float{0%,to{transform:translateY(0)rotate(-2deg)}50%{transform:translateY(-10px)rotate(2deg)}}@keyframes pop-in{0%{opacity:0;transform:scale(.8)}70%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes slide-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.animate-float{animation:4s ease-in-out infinite float}.animate-pop-in{animation:.5s cubic-bezier(.34,1.56,.64,1) forwards pop-in}.animate-slide-up{animation:.6s ease-out forwards slide-up}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}