.tool.svelte-ys28h2{flex-direction:column;gap:0;width:100%;display:flex}.controls.svelte-ys28h2{gap:var(--space-4);padding:var(--space-4);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));display:grid}.control-group.svelte-ys28h2{gap:var(--space-1);flex-direction:column;display:flex}.control-group.wide.svelte-ys28h2{grid-column:1/-1}.control-group.svelte-ys28h2 label:where(.svelte-ys28h2){font-size:var(--text-xs);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-tertiary)}.control-group.svelte-ys28h2 input:where(.svelte-ys28h2){padding:var(--space-2);border:1px solid var(--border-default);border-radius:var(--radius);background:var(--bg-base);color:var(--text-primary);font-size:var(--text-sm);outline:none}.control-group.svelte-ys28h2 input:where(.svelte-ys28h2):focus{border-color:var(--accent)}.control-group.svelte-ys28h2 input[type=color]:where(.svelte-ys28h2){cursor:pointer;height:38px}.preview.svelte-ys28h2{align-items:center;gap:var(--space-4);padding:var(--space-6);flex-direction:column;display:flex}.preview.svelte-ys28h2 canvas:where(.svelte-ys28h2){border-radius:var(--radius);max-width:100%;height:auto;display:block}.error-message.svelte-ys28h2{padding:var(--space-3);background:var(--error-soft);border:1px solid var(--error);border-radius:var(--radius);color:var(--error-text);font-size:var(--text-sm)}@media (width<=768px){.controls.svelte-ys28h2{grid-template-columns:1fr}}