@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--ink:#20211c;--yellow:#f6dc62;--paper:#fcfcf7}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px 'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{outline-offset:5px}button{cursor:pointer}header,main,footer{max-width:1240px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:25px 32px;border-bottom:1px solid #d9dad1}.brand{display:flex;align-items:center;font:700 30px 'Space Grotesk',sans-serif;letter-spacing:-1.5px}.brand img{width:42px;height:42px;mix-blend-mode:multiply;margin-right:8px}.brand span{font:12px sans-serif;align-self:flex-start;margin:5px}nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:700}.pill{background:var(--yellow);border:1.5px solid var(--ink);border-radius:30px;padding:12px 20px}.intro{text-align:center;padding:54px 24px 0}.eyebrow,.section-label{font:600 12px 'Space Grotesk',sans-serif;letter-spacing:1.6px}h1{font:500 clamp(44px,6.5vw,84px)/1.05 'Space Grotesk',sans-serif;letter-spacing:-5px;margin:20px 0}h1 em{font-style:normal;background:var(--yellow);border-radius:50%;padding:0 14px}p{line-height:1.6}.intro p{color:#68695f;margin:18px auto 26px}.family{width:650px;max-width:90%;display:block;margin:auto;mix-blend-mode:multiply}.studio{display:grid;grid-template-columns:1.1fr 1fr;border:1.5px solid var(--ink);border-radius:22px;overflow:hidden;margin:20px 32px 64px;background:white;box-shadow:7px 7px 0 #e7e8de}.preview-side{padding:26px;background:#f0f1e9;border-right:1.5px solid var(--ink)}.section-label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:1px}.section-label span{color:#74776b}.canvas-wrap{margin:25px auto 20px;max-width:375px;aspect-ratio:1;border:1.5px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:5px 5px 0 #d5d8c9}canvas{display:block;width:100%;height:100%}.preview-meta{display:flex;justify-content:space-between;font-size:12px;color:#64675b}.controls{padding:34px 40px}h2{font:600 30px/1.2 'Space Grotesk',sans-serif;letter-spacing:-1.2px;margin:0}.muted{color:#77796e;font-size:14px;margin:8px 0 24px}fieldset{border:0;padding:0;margin:0 0 21px}legend,label{font-size:14px;font-weight:600;margin-bottom:12px;display:block}.swatches,.choices{display:flex;gap:9px}.swatch{height:34px;width:34px;border-radius:50%;border:1px solid #b4b6ac;position:relative}.swatch[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:3px}.choices button{background:white;border:1px solid #d4d6cc;padding:9px 15px;border-radius:8px;font-size:14px}.choices button[aria-pressed=true]{background:var(--yellow);border-color:var(--ink)}.range-label{display:flex;justify-content:space-between}output{font-size:12px;color:#777}input[type=range]{width:100%;accent-color:var(--ink);margin:0 0 20px}input[type=text]{width:100%;padding:12px;border:1px solid #d4d6cc;border-radius:8px;background:#fafbf7}.optional{color:#888;font-size:12px;font-weight:400}.actions{display:flex;gap:10px;margin-top:24px}.download{flex:1;background:var(--ink);color:white;padding:14px;border:0;border-radius:9px;font-weight:600}.download:hover{background:#424637}.shuffle{width:49px;border:1px solid var(--ink);border-radius:9px;background:var(--yellow);font-size:25px}.note{font-size:12px;color:#7b7d73;text-align:center;margin:10px 0 0}.community{display:flex;align-items:center;justify-content:space-between;padding:0 48px 42px}.community h2{margin-top:13px}.community a{border-bottom:1px solid;padding-bottom:8px;font-weight:600}.token{border-top:1px solid #d9dad1;padding:23px 32px;display:flex;align-items:center;justify-content:space-between;font:12px 'Space Grotesk',sans-serif;gap:20px}.token button{border:0;background:none;font-family:monospace;font-size:12px;overflow-wrap:anywhere;text-align:left}.token b{margin-left:15px;font:600 12px 'DM Sans',sans-serif}footer{border-top:1px solid #d9dad1;padding:25px 32px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#72756b}footer .brand{font-size:24px;color:var(--ink)}@media(max-width:760px){header{padding:18px 20px}nav{gap:14px}nav a:first-child{display:none}.brand{font-size:26px}h1{letter-spacing:-2px}.intro{padding-top:40px}.studio{grid-template-columns:1fr;margin:15px 18px 45px}.preview-side{border-right:0;border-bottom:1.5px solid}.controls{padding:28px}.canvas-wrap{max-width:300px}.community{padding:0 25px 30px;display:block}.community a{display:inline-block;margin-top:25px}.token{display:block;padding:20px}.token button{display:block;margin-top:12px;padding:0;line-height:1.8}footer{padding:22px 20px;flex-wrap:wrap;gap:15px}footer span{display:none}}@media(prefers-reduced-motion:no-preference){button,a{transition:background .2s,transform .2s}.shuffle:hover{transform:rotate(15deg)}}
/* Character wardrobe */
.studio{grid-template-columns:1fr 1.2fr;background:#fffef9;box-shadow:none;border-radius:28px;margin-top:28px}.preview-side{background:#f7df72;padding:30px;display:flex;flex-direction:column;justify-content:center}.canvas-wrap{width:100%;max-width:400px;box-shadow:none;border:0;border-radius:20px;overflow:visible;margin:32px auto}canvas{border-radius:20px}.controls{padding:32px}.characters{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.character{padding:3px 2px 9px;border:1.5px solid #e1e2d8;background:#f5f6ee;border-radius:12px;min-width:0}.character img{display:block;width:100%;aspect-ratio:1;object-fit:contain}.character span{font-size:12px;font-weight:600}.character[aria-pressed=true]{background:#f6dc62;border-color:#20211c;box-shadow:0 3px 0 #20211c;transform:translateY(-2px)}.character:hover{border-color:#20211c}.controls h2{font-size:32px}.character-field{margin-bottom:26px}.preview-meta{gap:12px;color:#494c37}.section-label span{color:#494c37}
@media(max-width:1000px){.characters{grid-template-columns:repeat(3,1fr)}.character img{max-height:100px}.studio{grid-template-columns:1fr 1.1fr}}@media(max-width:760px){.studio{grid-template-columns:1fr}.canvas-wrap{max-width:310px;margin:20px auto}.preview-side{padding:24px}.characters{grid-template-columns:repeat(3,1fr)}.character img{max-height:120px}.controls{padding:25px}}