:root{--ink:#1a1720;--paper:#f8f5fe;--card:#fffdf8;--mauve:#dcd0e6;--plum:#6f4f6b;--rose:#e8a3ae;--sage:#a9b89c;--sand:#e3d0a8;--muted:#5e5866;--shadow-sm:3px 3px 0 0 var(--ink);--shadow:5px 5px 0 0 var(--ink);--radius:18px;--display:"Fraunces", ui-serif, Georgia, serif;--sans:"DM Sans", ui-sans-serif, system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--paper);background-image:radial-gradient(color-mix(in oklab, var(--mauve) 70%, transparent) 1px, transparent 1px);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;background-size:22px 22px;margin:0;overflow-x:clip}h1,h2,h3{font-family:var(--display);margin:0;line-height:1.1}code{background:color-mix(in oklab, var(--mauve) 55%, white);border-radius:6px;padding:.1em .35em;font:500 .9em/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}button{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--plum);outline-offset:2px}.top{z-index:50;background:color-mix(in oklab, var(--paper) 88%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:2px solid var(--ink);justify-content:space-between;align-items:center;gap:1rem;padding:.8rem clamp(1rem,4vw,2.5rem);display:flex;position:sticky;top:0}.logo{font:700 1.5rem/1 var(--display);color:var(--ink);text-decoration:none}.logo span{color:var(--plum)}.top nav{gap:clamp(.6rem,2.5vw,1.6rem);font-size:.92rem;font-weight:700;display:flex}.top nav a{color:var(--ink);text-decoration:none}.top nav a:hover{color:var(--plum);text-underline-offset:4px;text-decoration:underline}main{max-width:1240px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}.intro{max-width:760px;padding:clamp(2rem,6vw,4rem) 0 clamp(1.5rem,4vw,2.5rem)}.intro h1{letter-spacing:-.02em;font-size:clamp(2.1rem,5.5vw,3.7rem)}.intro h1 em{color:var(--plum)}.intro p{color:var(--muted);max-width:620px;margin:1rem 0 0;font-size:clamp(1rem,2vw,1.15rem)}.intro .credit{color:var(--ink);margin-top:.9rem;font-size:1rem;font-weight:700}.credit a,.foot a{color:var(--plum);font-size:1.15em;font-weight:400;text-decoration:none}.credit a:hover,.foot a:hover{text-underline-offset:4px;text-decoration:underline}.builder{grid-template-columns:minmax(300px,420px) minmax(0,1fr);align-items:start;gap:clamp(1rem,3vw,2rem);display:grid}.stage-card,.editor,.code-card{background:var(--card);border:2.5px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow)}.stage-card{padding:1rem;position:sticky;top:5rem}.stage{border:2px solid var(--ink);background:radial-gradient(ellipse 60% 14% at 50% 94%, color-mix(in oklab, var(--sage) 45%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in oklab, var(--mauve) 60%, white) 0%, #fff 78%);border-radius:14px;place-items:end center;height:390px;padding-bottom:6px;display:grid;overflow:visible}.plays{flex-wrap:wrap;gap:.4rem;margin-top:.9rem;display:flex}.plays button{border:2px solid var(--ink);cursor:pointer;background:#fff;border-radius:999px;padding:.35rem .65rem;font-size:.84rem;font-weight:700;transition:transform .12s,box-shadow .12s}.plays button:hover{box-shadow:2px 2px 0 0 var(--ink);background:color-mix(in oklab, var(--rose) 30%, white);transform:translate(-1px,-1px)}.plays button:active{box-shadow:none;transform:none}.stage-actions{flex-wrap:wrap;gap:.6rem;margin-top:.9rem;display:flex}.btn{border:2.5px solid var(--ink);background:var(--plum);color:#fff;cursor:pointer;box-shadow:var(--shadow-sm);border-radius:12px;justify-content:center;align-items:center;gap:.4rem;padding:.6rem 1rem;font-size:.95rem;font-weight:700;text-decoration:none;transition:transform .12s,box-shadow .12s;display:inline-flex}.btn:hover{box-shadow:5px 5px 0 0 var(--ink);transform:translate(-2px,-2px)}.btn:active{box-shadow:1px 1px 0 0 var(--ink);transform:translate(1px,1px)}.btn-ghost{color:var(--ink);background:#fff}.btn-ghost[aria-pressed=true]{background:var(--sand)}.creator{border:2.5px solid var(--ink);background:linear-gradient(135deg, color-mix(in oklab, var(--rose) 35%, white), color-mix(in oklab, var(--mauve) 60%, white));box-shadow:var(--shadow-sm);color:var(--ink);border-radius:14px;align-items:center;gap:.8rem;margin-top:1.1rem;padding:.55rem .8rem .55rem .55rem;text-decoration:none;transition:transform .12s,box-shadow .12s;display:flex}.creator:hover{box-shadow:5px 5px 0 0 var(--ink);transform:translate(-2px,-2px)}.creator-art{aspect-ratio:76/82;border:2px solid var(--ink);background:#fff;border-radius:12px;flex:none;width:68px;overflow:hidden}.creator-text{gap:.05rem;min-width:0;display:grid}.creator-name{font:700 1.2rem/1.1 var(--display)}.creator-by{font-size:.95rem}.creator-tag{letter-spacing:.06em;text-transform:uppercase;color:var(--plum);margin-top:.2rem;font-size:.74rem;font-weight:700}.warn{border:2px solid var(--ink);background:color-mix(in oklab, var(--rose) 40%, white);border-radius:10px;margin:.5rem 0 0;padding:.5rem .75rem;font-size:.88rem;font-weight:700}.warn[hidden]{display:none}.presets{border-top:2px dashed color-mix(in oklab, var(--ink) 25%, transparent);margin-top:1.1rem;padding-top:.9rem}.label{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem;font-size:.78rem;font-weight:700}.preset-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;display:grid}.preset{border:2px solid var(--ink);cursor:pointer;background:#fff;border-radius:12px;justify-items:center;gap:.1rem;padding:.3rem .2rem .35rem;font-size:.76rem;font-weight:700;display:grid}.preset .still{aspect-ratio:76/72;width:100%;height:auto}.preset:hover,.preset[aria-pressed=true]{background:color-mix(in oklab, var(--mauve) 55%, white)}.editor{min-width:0;overflow:hidden}.tabs{border-bottom:2.5px solid var(--ink);background:color-mix(in oklab, var(--mauve) 45%, white);scrollbar-width:none;gap:.3rem;padding:.6rem .6rem 0;display:flex;overflow-x:auto}.tabs::-webkit-scrollbar{display:none}.tabs button{border:2.5px solid var(--ink);cursor:pointer;background:0 0;border-color:#0000;border-bottom-style:none;border-bottom-width:0;border-radius:12px 12px 0 0;flex:none;margin-bottom:-2.5px;padding:.55rem 1rem;font-size:.92rem;font-weight:700}.tabs button:hover{color:var(--plum)}.tabs button[aria-selected=true]{background:var(--card);border-color:var(--ink);padding-bottom:calc(.55rem + 2.5px)}.panel{padding:1.1rem clamp(.9rem,2.5vw,1.5rem) 1.5rem}.group+.group{margin-top:1.5rem}.group-head{flex-wrap:wrap;align-items:baseline;gap:.2rem .8rem;margin-bottom:.65rem;display:flex}.group h3{font-size:1.2rem}.hint{color:var(--muted);margin:0;font-size:.86rem}.opts{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.55rem;display:grid}.opts.is-dimmed .opt:not([aria-pressed=true]){opacity:.6}.opts.is-dimmed .opt:hover{opacity:1}.opt{border:2px solid var(--ink);cursor:pointer;background:#fff;border-radius:12px;justify-items:center;gap:.2rem;padding:.35rem .3rem .45rem;transition:transform .12s,box-shadow .12s,background .12s;display:grid}.opt:hover:not(:disabled){box-shadow:var(--shadow-sm);transform:translate(-1px,-1px)}.opt[aria-pressed=true]{background:color-mix(in oklab, var(--rose) 28%, white);box-shadow:var(--shadow-sm);outline:2.5px solid var(--plum);outline-offset:-5px}.opt:disabled{opacity:.35;cursor:not-allowed}.opt-label{text-align:center;font-size:.76rem;font-weight:700;line-height:1.15}.thumb{width:100%;display:block}.thumb-head{aspect-ratio:76/82}.thumb-body{aspect-ratio:96/156;max-height:150px}.thumb-torso{aspect-ratio:80/72}.thumb-feet{aspect-ratio:76/40}.still{width:100%;height:100%;display:block}.swatches{flex-wrap:wrap;gap:.45rem;margin-top:.75rem;display:flex}.sw{border:2px solid var(--ink);background:var(--c);cursor:pointer;border-radius:50%;width:32px;height:32px;padding:0;transition:transform .12s;position:relative}.sw:hover{transform:scale(1.1)}.sw[aria-pressed=true],.sw-custom.is-on{box-shadow:0 0 0 3px #fff, 0 0 0 5.5px var(--ink)}.sw-custom{background:conic-gradient(#e8a3ae,#e3d0a8,#a9b89c,#a7c4e0,#dcd0e6,#e8a3ae);place-items:center;display:grid;overflow:hidden}.sw-custom.is-on{background:var(--c)}.sw-custom span{color:var(--ink);text-shadow:0 0 3px #fff;pointer-events:none;font-size:1.1rem;font-weight:700;line-height:1}.sw-custom input{opacity:0;cursor:pointer;border:0;width:100%;height:100%;padding:0;position:absolute;inset:0}.toggle{cursor:pointer;align-items:center;gap:.55rem;font-weight:700;display:inline-flex}.toggle input{width:20px;height:20px;accent-color:var(--plum)}.text{border:2px solid var(--ink);width:100%;font:500 1rem/1.45 var(--sans);color:var(--ink);resize:vertical;background:#fff;border-radius:12px;padding:.65rem .8rem}.text:focus{box-shadow:var(--shadow-sm);outline:none}.seg{border:2px solid var(--ink);border-radius:12px;flex-wrap:wrap;display:inline-flex;overflow:hidden}.seg button{cursor:pointer;background:#fff;border:0;padding:.5rem .9rem;font-size:.88rem;font-weight:700}.seg button+button{border-left:2px solid var(--ink)}.seg button[aria-checked=true]{background:var(--plum);color:#fff}.range{align-items:center;gap:.8rem;max-width:360px;display:flex}.range input{accent-color:var(--plum);flex:1}.range output{min-width:3ch;font-weight:700}.get{padding:clamp(3rem,7vw,5rem) 0 0}.get-head{max-width:720px;margin-bottom:1.2rem}.get h2,.how h2{font-size:clamp(1.8rem,4vw,2.6rem)}.get-head p{color:var(--muted);margin:.7rem 0 0}.code-card{padding:clamp(.9rem,2.5vw,1.4rem)}.code-tabs{flex-wrap:wrap;gap:.4rem;display:flex}.code-tabs button{border:2px solid var(--ink);cursor:pointer;background:#fff;border-radius:999px;padding:.45rem .9rem;font-size:.88rem;font-weight:700}.code-tabs button[aria-selected=true]{background:var(--ink);color:#fff}.code-note{color:var(--muted);margin:.8rem 0;font-size:.9rem}.code-wrap{position:relative}.code-wrap pre{border:2px solid var(--ink);color:#f3eefa;background:#1f1b26;border-radius:12px;max-height:440px;margin:0;padding:1rem 8.5rem 1rem 1.1rem;overflow:auto}.code-wrap code{white-space:pre;background:0 0;padding:0;font-size:.84rem;line-height:1.6}.copy{background:var(--rose);color:var(--ink);position:absolute;top:.7rem;right:.7rem}.code-extras{flex-wrap:wrap;gap:.6rem;margin-top:1rem;display:flex}.tip{border:2px dashed color-mix(in oklab, var(--ink) 35%, transparent);border-radius:12px;margin:1rem 0 0;padding:.8rem 1rem;font-size:.92rem}.how{padding:clamp(3rem,7vw,5rem) 0 2rem}.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.4rem 0 0;padding:0;list-style:none;display:grid}.steps li{background:var(--card);border:2.5px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.1rem 1.2rem}.steps li span{border:2px solid var(--ink);background:var(--sand);border-radius:50%;place-items:center;width:2rem;height:2rem;font-weight:700;display:inline-grid}.steps h3{margin-top:.6rem;font-size:1.25rem}.steps p{color:var(--muted);margin:.35rem 0 0;font-size:.95rem}.faq{gap:.6rem;max-width:820px;margin-top:2rem;display:grid}.faq details{border:2px solid var(--ink);background:#fff;border-radius:12px;padding:.8rem 1rem}.faq summary{cursor:pointer;font-weight:700}.faq p{color:var(--muted);margin:.6rem 0 .1rem}.foot{text-align:center;color:var(--muted);padding:2rem 1rem 3rem;font-size:.86rem}.toast{z-index:60;border:2.5px solid var(--ink);background:var(--sand);max-width:calc(100vw - 2rem);box-shadow:var(--shadow-sm);visibility:hidden;pointer-events:none;border-radius:12px;padding:.7rem 1.1rem;font-weight:700;transition:transform .3s cubic-bezier(.34,1.56,.64,1),visibility 0s .3s;position:fixed;bottom:1.4rem;left:50%;transform:translate(-50%,160%)}.toast.is-on{visibility:visible;transition:transform .3s cubic-bezier(.34,1.56,.64,1);transform:translate(-50%)}@media (width<=900px){.builder{grid-template-columns:minmax(0,1fr)}.stage-card{position:static}.stage{height:320px}.steps{grid-template-columns:minmax(0,1fr)}}@media (width<=520px){.top nav a:not(#demo-link){display:none}.stage{height:280px}.opts{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}.preset-row{grid-template-columns:repeat(4,minmax(0,1fr))}.code-wrap pre{padding-top:3.6rem;padding-right:1.1rem}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.opt,.sw,.plays button,.creator,.toast{transition:none}}