@layer component{.KPVoba_PaletteExtractor{gap:var(--space-4);display:grid}.KPVoba_PaletteExtractor .KPVoba_controls{align-items:start;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));display:grid}.KPVoba_PaletteExtractor .KPVoba_result{gap:var(--space-4);display:grid}.KPVoba_PaletteExtractor .KPVoba_note{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.KPVoba_PaletteExtractor .KPVoba_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;justify-self:start;max-block-size:16rem;max-inline-size:100%}.KPVoba_PaletteExtractor .KPVoba_palette{gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));padding:0;list-style:none;display:grid}.KPVoba_PaletteExtractor li{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-3);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background:var(--color-bg-surface);grid-template-columns:auto minmax(0,1fr) auto;display:grid}.KPVoba_PaletteExtractor .KPVoba_swatch{inline-size:var(--size-control);min-block-size:var(--size-control);border:1px solid var(--color-border-default);border-radius:var(--radius-sm);background:var(--swatch);align-self:stretch}.KPVoba_PaletteExtractor .KPVoba_values{min-inline-size:0;display:grid}.KPVoba_PaletteExtractor .KPVoba_value{justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.KPVoba_PaletteExtractor .KPVoba_value code{min-inline-size:0;font-size:var(--font-size-sm);overflow-wrap:anywhere}.KPVoba_PaletteExtractor .KPVoba_share{color:var(--color-text-secondary);font-size:var(--font-size-xs);font-variant-numeric:tabular-nums;align-self:start;padding-block-start:var(--space-1)}}