label.inline{display:inline-block;margin:0}
select{font:inherit;padding:8px;border-radius:8px;border:1px solid var(--line);background:transparent;color:inherit}
button[aria-pressed=true]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
button.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
#canvas{display:block;max-width:100%;height:auto;aspect-ratio:1;border:1px solid var(--line);border-radius:8px;image-rendering:pixelated;touch-action:none;cursor:crosshair;margin-bottom:12px;background:#fff}
#swatches button{width:36px;height:36px;padding:0;border-width:2px}
#swatches button[aria-pressed=true]{outline:3px solid var(--accent);outline-offset:2px}
#swatches button.erase{font-size:12px;width:auto;padding:0 8px}
input[type=color]{width:48px;height:36px;padding:2px;border:1px solid var(--line);border-radius:8px;background:transparent}
input[type=number]{font:inherit;width:72px;padding:8px;border-radius:8px;border:1px solid var(--line);background:transparent;color:inherit}
#preview{display:block;width:96px;height:96px;border:1px solid var(--line);border-radius:8px;image-rendering:pixelated;margin-bottom:12px;background:#fff}
.strip{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));margin-bottom:12px}
.strip li{padding:4px;display:block;text-align:center;font-size:12px;color:var(--muted)}
.strip canvas{display:block;width:100%;height:auto;image-rendering:pixelated;background:#fff;border-radius:4px;margin-bottom:2px}

#tile-preview{display:block;width:288px;max-width:100%;height:auto;aspect-ratio:1;border:1px solid var(--line);border-radius:8px;image-rendering:pixelated;margin-bottom:12px;background:repeating-conic-gradient(#e6eaeb 0 25%,#f7f9f9 0 50%) 0 0/16px 16px}
#tile-preview[hidden]{display:none}