:root{--paper:#f4ead7;--paper-2:#efe1c6;--ink:#2b2118;--tomato:#d8442b;--tomato-deep:#b8331f;--teal:#2f6b5e;--mustard:#e0a52e;--plum:#7a4a63;--line:#cdbb97}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:DM Mono,monospace;color:var(--ink);background-color:var(--paper);background-image:radial-gradient(circle at 18% 22%,rgba(216,68,43,.1),transparent 38%),radial-gradient(circle at 82% 78%,rgba(47,107,94,.12),transparent 42%),radial-gradient(rgba(43,33,24,.045) 1px,transparent 1px);background-size:auto,auto,4px 4px;min-height:100%;overflow-x:hidden}#root{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 20px}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E")}.card{position:relative;width:min(620px,100%);background:var(--paper-2);border:2px solid var(--ink);border-radius:6px;padding:clamp(28px,5vw,56px);z-index:1}.stamp{position:absolute;top:-18px;right:26px;transform:rotate(8deg);background:var(--tomato);color:var(--paper);font-family:DM Mono,monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:7px 12px;border:2px dashed var(--paper);box-shadow:0 0 0 2px var(--tomato);border-radius:3px}.kicker{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--tomato-deep);margin-bottom:14px}.kicker:before{content:"✦ "}h1{font-family:Fraunces,serif;font-optical-sizing:144;font-weight:600;font-size:clamp(38px,8vw,68px);line-height:.95;letter-spacing:-.01em;margin-bottom:6px}h1 em{font-style:italic;color:var(--tomato)}.sub{font-family:Caveat,cursive;font-size:clamp(22px,4vw,30px);color:var(--teal);line-height:1;margin:8px 0 28px;transform:rotate(-1.2deg)}.lede{font-size:14px;line-height:1.7;max-width:46ch;margin-bottom:30px;color:#2b2118d9}.big-btn{font-family:Fraunces,serif;font-weight:600;font-size:clamp(20px,4vw,26px);color:var(--paper);background:var(--ink);border:2px solid var(--ink);border-radius:50px;padding:18px 38px;cursor:pointer;display:inline-flex;align-items:center;gap:12px;box-shadow:5px 6px 0 var(--tomato);transition:transform .12s ease,box-shadow .12s ease,background .2s}.big-btn:hover{transform:translate(-2px,-2px);box-shadow:8px 10px 0 var(--tomato)}.big-btn:active{transform:translate(2px,3px);box-shadow:2px 2px 0 var(--tomato)}.big-btn .spark{display:inline-block;animation:spin 4s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.pin-wrap{display:inline-block}.pin-boxes{display:flex;gap:12px;margin:6px 0 14px}.pin-boxes.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}@keyframes shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-9px)}40%,60%{transform:translate(9px)}}.pin-box{width:clamp(52px,15vw,68px);height:clamp(60px,17vw,78px);text-align:center;font-family:Fraunces,serif;font-weight:600;font-size:clamp(28px,7vw,38px);color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:8px;box-shadow:3px 4px #2b211838;caret-color:var(--tomato);text-transform:uppercase;transition:transform .12s ease,box-shadow .12s ease,border-color .15s,background .2s}.pin-box:nth-child(odd){transform:rotate(-1.5deg)}.pin-box:nth-child(2n){transform:rotate(1.5deg)}.pin-box:focus{outline:none;border-color:var(--tomato);background:#fff6e6;transform:rotate(0) translateY(-3px);box-shadow:4px 7px 0 var(--tomato)}.pin-boxes.bad .pin-box{border-color:var(--tomato-deep);background:#f6dccf}.name-field{display:flex;gap:10px;align-items:center;margin:6px 0 14px}.name-field.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}.name-input{font-family:Fraunces,serif;font-weight:600;font-size:clamp(22px,5vw,30px);color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:10px;padding:12px 18px;width:min(320px,68vw);box-shadow:3px 4px #2b211838;caret-color:var(--tomato);text-transform:uppercase;transition:transform .12s ease,box-shadow .12s ease,border-color .15s,background .2s}.name-input::placeholder{color:#2b211859;font-style:italic;font-weight:400;text-transform:none}.name-input:focus{outline:none;border-color:var(--tomato);background:#fff6e6;transform:translateY(-2px);box-shadow:4px 7px 0 var(--tomato)}.name-field.bad .name-input{border-color:var(--tomato-deep);background:#f6dccf}.name-go{font-family:Fraunces,serif;font-weight:600;font-size:22px;color:var(--paper);background:var(--ink);border:2px solid var(--ink);border-radius:50%;width:52px;height:52px;flex:none;cursor:pointer;box-shadow:3px 4px 0 var(--tomato);transition:transform .12s ease,box-shadow .12s ease}.name-go:hover{transform:translate(-1px,-1px);box-shadow:5px 6px 0 var(--tomato)}.name-go:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--tomato)}.pin-error{font-family:Caveat,cursive;font-size:24px;color:var(--tomato-deep);min-height:30px;transform:rotate(-1.5deg);opacity:0;transition:opacity .15s}.pin-error.show{opacity:1}.stage{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}@keyframes rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}.ask{font-family:Fraunces,serif;font-style:italic;font-weight:500;font-size:clamp(20px,3.4vw,26px);margin-bottom:4px}.ask-note{font-size:12.5px;color:#2b2118a6;margin-bottom:22px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:28px}.sticker{position:relative;background:var(--paper);border:2px solid var(--ink);border-radius:8px;padding:20px 18px;cursor:pointer;text-align:left;overflow:hidden;transition:transform .14s ease,box-shadow .14s ease,background .2s;box-shadow:3px 4px #2b211838}.sticker:nth-child(1){transform:rotate(-1.5deg)}.sticker:nth-child(2){transform:rotate(1.2deg)}.sticker:nth-child(3){transform:rotate(1deg)}.sticker:nth-child(4){transform:rotate(-1.3deg)}.sticker:hover{transform:rotate(0) translateY(-3px);box-shadow:5px 8px #2b211840}.sticker .emoji{font-size:40px;line-height:1;display:block;margin-bottom:10px;filter:saturate(1.1)}.sticker .name{display:block;font-family:Fraunces,serif;font-weight:600;font-size:19px;line-height:1.15}.sticker .desc{display:block;font-size:11.5px;color:#2b2118b3;margin-top:7px;line-height:1.4}.sticker .tick{position:absolute;top:10px;right:12px;width:26px;height:26px;border:2px solid var(--ink);border-radius:50%;background:var(--paper-2);display:flex;align-items:center;justify-content:center;font-size:15px;color:transparent;transition:.15s}.sticker[aria-pressed=true]{background:var(--mustard);transform:rotate(0) translateY(-2px);box-shadow:5px 8px 0 var(--ink)}.sticker[aria-pressed=true] .tick{background:var(--tomato);color:var(--paper);border-color:var(--ink)}.sticker[aria-pressed=true]:after{content:"PICKED";position:absolute;bottom:12px;right:-6px;transform:rotate(-12deg);font-size:10px;letter-spacing:.18em;color:var(--tomato-deep);border:2px solid var(--tomato-deep);padding:2px 7px;border-radius:3px;opacity:.85}.extra-wrap{margin-bottom:24px}.extra-label{display:block;font-family:Caveat,cursive;font-size:21px;color:var(--teal);margin-bottom:7px;transform:rotate(-.8deg)}.extra-label span{font-size:14px;color:#2b211880}.extra-input{width:100%;font-family:DM Mono,monospace;font-size:13px;line-height:1.6;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:8px;padding:12px 14px;resize:vertical;box-shadow:3px 4px #2b21182e;transition:border-color .15s,box-shadow .12s ease,background .2s}.extra-input::placeholder{color:#2b211866;font-style:italic}.extra-input:focus{outline:none;border-color:var(--tomato);background:#fff6e6;box-shadow:4px 6px 0 var(--tomato)}.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.confirm-btn{font-family:Fraunces,serif;font-weight:600;font-size:18px;color:var(--paper);background:var(--tomato);border:2px solid var(--ink);border-radius:50px;padding:14px 30px;cursor:pointer;box-shadow:4px 5px 0 var(--ink);transition:transform .12s ease,box-shadow .12s ease,opacity .2s}.confirm-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 8px 0 var(--ink)}.confirm-btn:active{transform:translate(2px,3px);box-shadow:2px 2px 0 var(--ink)}.confirm-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:4px 5px 0 var(--ink);transform:none}.count{font-size:12.5px;color:var(--teal);font-weight:500}.done{text-align:center;animation:rise .5s cubic-bezier(.2,.8,.2,1) both}.done .big{font-family:Fraunces,serif;font-style:italic;font-weight:600;font-size:clamp(30px,6vw,50px);color:var(--teal);line-height:1;margin-bottom:14px}.done .hand{font-family:Caveat,cursive;font-size:26px;color:var(--tomato);transform:rotate(-2deg);display:inline-block}.done .recap{font-size:13px;margin:18px 0 24px;line-height:1.8}.done .recap b{color:var(--tomato-deep)}.link-btn{background:none;border:none;font-family:DM Mono,monospace;font-size:12px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5;overflow:hidden}.confetti i{position:absolute;top:-20px;width:9px;height:14px;opacity:.9;animation:fall linear forwards}@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:1}}.footer{margin-top:26px;padding-top:16px;border-top:1.5px dashed var(--line);font-size:11px;color:#2b211899;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}@media(max-width:430px){.grid{grid-template-columns:1fr}}