@import"https://unpkg.com/open-props"layer(design.system);@import"https://unpkg.com/open-props/normalize.min.css"layer(design.base);body{display:grid}main:where(.astro-J7PV25F6){display:grid;grid-template-columns:[color-1] 1fr [color-2] 1fr;grid-template-rows:[colors-to-mix] 1fr auto [colors-mixed] 1fr}.color-1:where(.astro-J7PV25F6){background:var(--mix-color-1, #04ff00);grid-column:color-1;grid-row:colors-to-mix}.color-2:where(.astro-J7PV25F6){background:var(--mix-color-2, white);grid-column:color-2;grid-row:colors-to-mix}.colors-mixed:where(.astro-J7PV25F6){background:gray;grid-row:colors-mixed;grid-column:1 / -1;display:grid;gap:var(--size-3);place-content:center;place-items:center}#in-colorspace:where(.astro-J7PV25F6),#hue-interpolation:where(.astro-J7PV25F6){grid-row:1;grid-column:1 / -1;place-self:end center;z-index:var(--layer-1);margin-block-end:var(--size-10)}#hue-interpolation:where(.astro-J7PV25F6){margin-block-end:var(--size-5)}input:where(.astro-J7PV25F6)[type=range]{appearance:none;block-size:1rem;accent-color:white;grid-row:3;grid-column:1 / -1;z-index:var(--layer-1);padding:0;border-radius:0;box-shadow:var(--shadow-3)}section:where(.astro-J7PV25F6){display:grid}section:where(.astro-J7PV25F6)>color-input:where(.astro-J7PV25F6){&::part(trigger){inline-size:100%;block-size:100%;padding:0;border:none;appearance:none}&::part(input),&::part(chip){display:none}}section:where(.astro-J7PV25F6)>color-input:where(.astro-J7PV25F6):focus-visible{outline-offset:-5px}h4:where(.astro-J7PV25F6){--l-threshold: .67;text-shadow:0 1px 1px hsl(none none 50% / 25%);@supports (color: oklch(from red l c h)){--l: clamp(0, (l / var(--l-threshold) - 1) * -infinity, 1);color:oklch(from var(--mixed-colors) var(--l) 0 h)}}select:where(.astro-J7PV25F6)[disabled]{opacity:0;pointer-events:none}input:where(.astro-J7PV25F6)[type=range]::-webkit-slider-thumb{--_border-size: 4px;cursor:grab;appearance:none;border:4px solid white;height:calc(1rem + (var(--_border-size) * 2));aspect-ratio:1;border-radius:var(--radius-round);box-shadow:var(--shadow-2),var(--inner-shadow-2)}input:where(.astro-J7PV25F6)[type=range]:active::-webkit-slider-thumb{cursor:grabbing}.no-support:where(.astro-J7PV25F6){display:grid;place-items:center;place-content:center;gap:1ch}@supports (color: color-mix(in oklab,red,white)){.no-support:where(.astro-J7PV25F6){display:none}}@supports not (color: color-mix(in oklab,red,white)){main:where(.astro-J7PV25F6){display:none}}.colors-mixed:where(.astro-J7PV25F6){--mixed-colors: color-mix(in var(--colorspace, oklab) var(--interp, ), var(--mix-color-1, #04ff00), var(--mix-color-2, white) var(--mix-color-2-amount, 50%));background:var(--mixed-colors)}input:where(.astro-J7PV25F6)[type=range]{background:linear-gradient(to right in var(--colorspace, oklab) var(--interp, ),var(--mix-color-1, #04ff00),var(--mix-color-2, white))}