@layer component{.dE6Ywq_ColorConverter{gap:var(--space-5);display:grid}.dE6Ywq_ColorConverter .dE6Ywq_input{align-items:start;gap:var(--space-3);grid-template-columns:minmax(0,1fr) auto auto;display:grid}.dE6Ywq_ColorConverter .dE6Ywq_picker,.dE6Ywq_ColorConverter .dE6Ywq_swatch{inline-size:var(--size-control);block-size:var(--size-control);border:1px solid var(--color-border-default);border-radius:var(--radius-md);margin-block-start:calc(var(--size-control-sm) + var(--space-2))}.dE6Ywq_ColorConverter .dE6Ywq_picker{padding:var(--space-1);background:var(--color-bg-raised);cursor:pointer}.dE6Ywq_ColorConverter .dE6Ywq_picker::-webkit-color-swatch-wrapper{padding:0}.dE6Ywq_ColorConverter .dE6Ywq_picker::-webkit-color-swatch{border-radius:var(--radius-sm);border:0}.dE6Ywq_ColorConverter .dE6Ywq_swatch{inline-size:calc(var(--size-control) * 2);background:linear-gradient(var(--swatch), var(--swatch)), repeating-conic-gradient(var(--color-bg-hover) 0 25%, var(--color-bg-raised) 0 50%) 0 0 / .75rem .75rem}.dE6Ywq_ColorConverter .dE6Ywq_formats{gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));padding:0;list-style:none;display:grid}.dE6Ywq_ColorConverter .dE6Ywq_formats 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);display:flex}.dE6Ywq_ColorConverter .dE6Ywq_label{inline-size:3.5rem;color:var(--color-text-secondary);font-size:var(--font-size-xs)}.dE6Ywq_ColorConverter .dE6Ywq_formats code{min-inline-size:0;font-size:var(--font-size-sm);overflow-wrap:anywhere;flex:1}.dE6Ywq_ColorConverter .dE6Ywq_contrast{gap:var(--space-4);border-block-start:1px solid var(--color-border-subtle);padding-block-start:var(--space-5);display:grid}.dE6Ywq_ColorConverter .dE6Ywq_contrastInputs{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));display:grid}}