main{max-width:960px;margin:0 auto;padding:var(--space-6)}
h1{font-family:var(--font-display);font-size:clamp(44px,9vw,72px);font-weight:400;margin:var(--space-2) 0}
.lede{color:var(--muted);max-width:56ch}
.stage{position:relative;margin-top:var(--space-6);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3}
canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
#overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);pointer-events:none;text-align:center;padding:var(--space-4)}
#overlay>*{pointer-events:auto}#overlay.clear{justify-content:flex-end}#overlay.clear #start{display:none}
#status{margin:0;background:var(--paper);padding:var(--space-2) var(--space-3);border-radius:var(--radius);font-size:14px}#status:empty{display:none}
.tools{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:end;margin-top:var(--space-4)}.tools[hidden]{display:none}
fieldset{border:0;padding:0;margin:0}legend,.tools label{font-family:var(--font-label);font-size:13px;color:var(--muted);display:block;margin-bottom:var(--space-2)}
.swatches{display:flex;gap:var(--space-2)}
.swatches input{position:absolute;opacity:0;width:44px;height:44px;margin:0}
.swatches label{position:relative;display:block;margin:0}
.swatches span{display:block;width:44px;height:44px;border-radius:50%;border:2px solid var(--paper);box-shadow:0 0 0 1px var(--line)}
.swatches input:checked+span{box-shadow:0 0 0 3px var(--ink)}.swatches input:focus-visible+span{outline:var(--focus);outline-offset:3px}
.actions{display:flex;gap:var(--space-3);margin-left:auto}
@media (prefers-reduced-motion:reduce){.button{transition:none}}