:root{--ink:#3d304e;--purple:#7052b5;--paper:#fffaf2;--lavender:#eee5ff;--mint:#d4f1da;--peach:#ffd4b8;--yellow:#ffe988}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Trebuchet MS",Arial,sans-serif}button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--purple);outline-offset:4px}button{cursor:pointer}::selection{background:var(--yellow)}.wrap{width:min(1180px,calc(100% - 64px));margin:auto}header{height:96px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:2px solid var(--ink)}.brand{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:900;letter-spacing:-1px;text-decoration:none}.brand svg{width:35px;height:35px}.brand span{color:var(--purple)}.back{font-size:13px;font-weight:bold;text-underline-offset:6px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:37px}.eyebrow{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:bold;margin:0 0 12px}.eyebrow:before{content:"";display:inline-block;width:8px;height:8px;background:var(--purple);border-radius:50%;margin-right:9px}h1{font-size:52px;line-height:1.08;letter-spacing:-2px;margin:0}h1 span{color:var(--purple)}.heading-note{font-family:Georgia,serif;font-size:21px;font-style:italic;line-height:1.35;transform:rotate(5deg);color:var(--purple);margin:0 15px 0 0}.intro{font-size:15px;line-height:1.6;margin:18px 0 30px}.maker{display:grid;grid-template-columns:1.05fr 1fr;gap:42px;align-items:start}.preview-panel{position:sticky;top:20px;min-width:0}.stage{position:relative;overflow:hidden;border:2px solid var(--ink);border-radius:25px;background:#f7f1df;background-image:radial-gradient(#cbbbd155 1px,transparent 1px);background-size:19px 19px;box-shadow:6px 6px 0 #d9cde7}.stage-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:22px 23px 0;font-size:12px;font-weight:bold}.made-by{background:var(--mint);border:1.5px solid var(--ink);border-radius:7px;padding:6px 10px;font-size:10px;transform:rotate(4deg)}.boop{display:block;width:100%;border:0;background:none;padding:0 24px;margin:0;position:relative;z-index:1}.boop>span{display:block}.gloop{width:100%;display:block;overflow:visible}.boop-note{font-family:Georgia,serif;font-style:italic;text-align:center;font-size:15px;margin:-6px 15px 22px;color:#796b89}.stage-star{position:absolute;color:#9f83b9;font-size:35px}.star-one{left:8%;top:33%;transform:rotate(-9deg)}.star-two{right:9%;top:25%;color:#93b29c;font-size:44px}.star-three{right:8%;bottom:20%;color:#bfa365;font-size:25px}.message{text-align:center;font-size:13px;line-height:1.65;min-height:46px;margin:22px 15px 15px}.preview-actions{display:flex;gap:18px;align-items:center;justify-content:center}.button,.secondary{min-height:46px;border:2px solid var(--ink);border-radius:11px;padding:12px 18px;font-size:12px;font-weight:bold}.button{background:var(--yellow);box-shadow:3px 3px 0 var(--ink)}.secondary{background:var(--lavender);box-shadow:2px 2px 0 var(--ink)}.button:hover,.secondary:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}.button:disabled{opacity:.6;cursor:wait}.save-note{text-align:center;font-size:10px;color:#796b89;margin:17px 0 0}.customize{padding:24px 25px;border:2px solid var(--ink);border-radius:25px;background:white;box-shadow:5px 5px 0 #e4d9ef;min-width:0}.section+.section{border-top:1px dashed #d5c4e2;margin-top:20px;padding-top:20px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}.section-title h2{font-size:14px;letter-spacing:-.2px;margin:0;display:flex;align-items:center;gap:8px}.section-title>span{font-size:9px;color:#796b89}.number{display:grid;place-items:center;background:var(--lavender);width:26px;height:26px;border-radius:8px;font-size:10px;letter-spacing:0;color:var(--purple)}.colors{display:flex;gap:14px;align-items:center}.color-option{position:relative;background:white;border:2px solid transparent;border-radius:50%;width:52px;height:52px;padding:5px}.swatch{display:block;border:2px solid var(--ink);border-radius:50%;background:var(--swatch);width:100%;height:100%;box-shadow:inset 2px 4px 0 #ffffff60}.color-option[aria-pressed=true]{border-color:var(--purple);background:var(--lavender)}.selected-mark{position:absolute;font-size:14px;left:0;right:0;top:17px;font-weight:bold;display:none}.color-option[aria-pressed=true] .selected-mark{display:block}.faces,.extras{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.headwear{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.option{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;background:var(--paper);border:1.5px dashed #c5afd7;border-radius:12px;min-width:0;padding:5px 4px 8px;min-height:92px}.option>svg{display:block;width:100%;height:56px;overflow:visible}.face-option>svg{height:63px;transform:scale(1.2);margin-bottom:1px}.option>span:not(.item-check){font-size:9px;line-height:1.3;text-align:center}.option[aria-pressed=true]{border:2px solid var(--purple);background:var(--lavender);padding:4.5px 3.5px 7.5px}.option:hover{background:#f6f0ff}.item-check{position:absolute;right:4px;top:3px;background:var(--purple);color:white;width:15px;height:15px;border-radius:50%;font-size:9px;display:none}.option[aria-pressed=true] .item-check{display:grid;place-items:center}.toggle-note{font-size:10px;color:#796b89;margin:12px 0 0}.closet-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:23px}.text-button{background:none;border:none;font-size:11px;text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:5px}.effects{position:absolute;pointer-events:none;left:50%;top:57%;z-index:2}.particle{position:absolute;font-size:22px;opacity:0;animation:particle 1.7s ease-out var(--delay) both}.character{transform-box:fill-box;transform-origin:50% 88%;animation:idle 4s ease-in-out infinite}.gloop[data-reaction] .character{animation-duration:2s;animation-iteration-count:1;animation-timing-function:ease-in-out}.gloop[data-reaction=boop] .character{animation-name:boop}.gloop[data-reaction=cap] .character{animation-name:cool}.gloop[data-reaction=crown] .character{animation-name:royal}.gloop[data-reaction=sprout] .character{animation-name:grow}.gloop[data-reaction=party] .character{animation-name:dance}.gloop[data-reaction=ears] .character{animation-name:pounce}.gloop[data-reaction=bow] .character{animation-name:twirl;transform-origin:50% 55%}.gloop[data-reaction=glasses] .character{animation-name:peek}.gloop[data-reaction=backpack] .character{animation-name:march}.gloop[data-reaction=scarf] .character{animation-name:snuggle}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;border-top:2px solid var(--ink);margin-top:44px!important;padding-block:25px}footer strong{font-size:14px}footer p{margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes idle{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.015,.985)}}@keyframes boop{0%,100%{transform:scale(1)}20%{transform:scale(1.15,.8) translateY(9px)}45%{transform:scale(.91,1.12) translateY(-12px)}70%{transform:scale(1.04,.96)}}@keyframes cool{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg) translateX(-7px)}40%{transform:rotate(9deg) translateX(7px)}60%{transform:rotate(-7deg)}80%{transform:rotate(5deg)}}@keyframes royal{0%,100%{transform:translateY(0)}20%,65%{transform:translateY(-27px) scale(1.03)}45%{transform:translateY(-20px) rotate(-3deg)}80%{transform:translateY(-12px) rotate(3deg)}}@keyframes grow{0%,100%{transform:scale(1)}20%{transform:scale(1.1,.7)}55%{transform:scale(.87,1.2) translateY(-5px)}80%{transform:scale(1.05,.95)}}@keyframes dance{0%,100%{transform:rotate(0)}15%,55%{transform:translateY(-15px) rotate(-12deg)}35%,75%{transform:translateY(-15px) rotate(12deg)}90%{transform:scale(1.1,.88)}}@keyframes pounce{0%,100%{transform:translateX(0)}20%{transform:scale(1.1,.7) rotate(-5deg)}45%{transform:translate(25px,-45px) rotate(11deg)}70%{transform:translate(-15px,-10px) rotate(-8deg)}85%{transform:scale(1.08,.9)}}@keyframes twirl{0%{transform:rotate(0) scale(1)}35%{transform:rotate(180deg) scale(.8)}75%{transform:rotate(360deg) scale(1.05)}100%{transform:rotate(360deg) scale(1)}}@keyframes peek{0%,100%{transform:translateX(0)}25%{transform:translateX(-22px) rotate(-8deg)}50%{transform:translateX(22px) rotate(8deg)}75%{transform:translateY(-10px) scale(1.05)}}@keyframes march{0%,100%{transform:translate(0,0)}15%{transform:translate(-18px,-12px) rotate(-5deg)}30%{transform:translate(-30px,0)}45%{transform:translate(0,-12px) rotate(5deg)}60%{transform:translate(25px,0)}75%{transform:translate(18px,-12px) rotate(-5deg)}}@keyframes snuggle{0%,100%{transform:scale(1)}25%,70%{transform:scale(1.1,.88) rotate(-4deg)}45%{transform:scale(1.1,.88) rotate(4deg)}85%{transform:scale(.98,1.04)}}@keyframes particle{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1.2)}}
@media(max-width:950px){.wrap{width:calc(100% - 40px)}.maker{gap:24px}.customize{padding:20px 18px}.colors{gap:9px}.color-option{width:44px;height:44px}.selected-mark{top:13px}.section-title>span{font-size:8px}.section-title h2{font-size:12px}.headwear{gap:5px}.option>svg{height:47px}.option{min-height:85px}.option>span:not(.item-check){font-size:8px}.preview-actions{gap:12px}.button,.secondary{padding:11px 14px}.boop{padding:0 10px}}
@media(max-width:700px){header{height:80px}.brand{font-size:21px;gap:7px}.brand svg{width:29px}.back{font-size:11px}.page-heading{margin-top:28px}h1{font-size:39px;letter-spacing:-1.5px}.eyebrow{font-size:8px;letter-spacing:1px}.heading-note{font-size:14px;margin-right:0}.intro{font-size:12px;margin:16px 0 23px}.maker{display:flex;flex-direction:column;gap:25px}.preview-panel{position:static;width:100%;max-width:500px;margin:auto}.stage{max-height:460px}.stage-heading{padding:18px 18px 0;font-size:11px}.made-by{font-size:9px}.boop{width:min(100%,390px);margin:auto;padding:0 15px}.boop-note{font-size:13px;margin-top:-10px;margin-bottom:20px}.message{font-size:12px;margin-top:18px;min-height:40px}.preview-actions{gap:15px}.save-note{font-size:9px}.customize{width:100%;max-width:500px;margin:auto;padding:22px 19px}.section-title h2{font-size:14px}.section-title>span{font-size:9px}.colors{gap:13px;justify-content:flex-start}.color-option{width:46px;height:46px}.selected-mark{top:14px}.faces,.extras{gap:8px}.headwear{gap:5px}.option>svg{height:49px}.face-option>svg{height:57px}.option>span:not(.item-check){font-size:9px}.section+.section{margin-top:21px;padding-top:21px}footer{font-size:9px;gap:10px;margin-top:30px!important}footer strong{font-size:12px}footer p{text-align:right;max-width:180px}}
@media(max-width:700px){.preview-panel{position:sticky;top:8px;z-index:4;background:var(--paper);border-radius:22px;padding-bottom:10px}.stage{max-height:270px;border-radius:20px}.stage-heading{padding:12px 15px 0;font-size:10px}.made-by{font-size:8px;padding:4px 7px}.boop{width:235px;padding:0 10px}.boop-note{font-size:11px;margin-top:-10px;margin-bottom:13px}.message{font-size:11px;line-height:1.4;min-height:30px;margin:10px 6px}.preview-actions .button,.preview-actions .secondary{min-height:39px;padding:10px 14px;font-size:11px}.save-note{font-size:8px;margin-top:10px}.effects{top:55%}.particle{font-size:16px}}
@media(prefers-reduced-motion:reduce){.character,.gloop[data-reaction] .character,.particle{animation:none!important}.gloop[data-reaction] .character{transform:none!important}}