@layer component{.YeP4jW_ImageConverter{gap:var(--space-4);display:grid}.YeP4jW_ImageConverter .YeP4jW_controls{align-items:start;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));display:grid}.YeP4jW_ImageConverter .YeP4jW_options{gap:var(--space-4);flex-wrap:wrap;display:flex}.YeP4jW_ImageConverter .YeP4jW_note{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.YeP4jW_ImageConverter .YeP4jW_result{gap:var(--space-4);justify-items:start;display:grid}.YeP4jW_ImageConverter dl{gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));inline-size:100%;display:grid}.YeP4jW_ImageConverter dl>div{gap:var(--space-1);padding:var(--space-3);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background:var(--color-bg-surface);display:grid}.YeP4jW_ImageConverter dt{color:var(--color-text-secondary);font-size:var(--font-size-xs)}.YeP4jW_ImageConverter .YeP4jW_preview{border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background:repeating-conic-gradient(var(--color-bg-hover) 0 25%, var(--color-bg-raised) 0 50%) 0 0 / 1rem 1rem;max-block-size:24rem;max-inline-size:100%}}