.icon[data-astro-cid-ccg5yoga]{flex:none;display:block}.oklch-picker{--okp-gap:10px;--okp-radius:6px;--okp-track-height:12px;--okp-chart-height:34px;--okp-chart-large-height:180px;--okp-side-by-side-width:560px;--okp-rail-width:152px;--okp-thumb-size:16px;--okp-inset:calc(var(--okp-thumb-size) / 2);color-scheme:light dark;--okp-text:light-dark(#1a1a1a,#f2f1ef);--okp-text-muted:light-dark(#6b6b6b,#a0a0a0);--okp-line:light-dark(#d8d8d8,#3a3a3d);--okp-border:light-dark(#949494,#6a6a6e);--okp-surface:light-dark(#fff,#141416);--okp-warn:light-dark(#9a6b00,#e0b050);--okp-focus:light-dark(#2f6fd0,#7fb0ff);--okp-thumb:#fff;--okp-thumb-line:#0000008c;--okp-alpha-check-light:light-dark(#fff,#1c1c1f);--okp-alpha-check-dark:light-dark(#ededed,#2a2a2e);--okp-alpha-check-size:6px;gap:var(--okp-gap);color:var(--okp-text);flex-direction:column;font-family:inherit;display:flex}.oklch-picker[data-theme=light]{color-scheme:light}.oklch-picker[data-theme=dark]{color-scheme:dark}.oklch-picker__presets{flex-wrap:wrap;order:1;align-items:center;gap:8px;display:flex}.oklch-picker__preset{border-radius:var(--okp-radius);cursor:pointer;border:2px solid #0000;width:24px;height:24px;padding:0}.oklch-picker__preset--selected{border-color:var(--okp-text)}.oklch-picker__preset:focus-visible,.oklch-picker__slider:focus-visible,.oklch-picker__hex:focus-visible{outline:2px solid var(--okp-focus);outline-offset:2px}.oklch-picker__recents{flex-wrap:wrap;order:2;align-items:center;gap:6px;display:flex}.oklch-picker__recent{cursor:pointer;border:2px solid #0000;border-radius:4px;width:24px;height:24px;padding:0}.oklch-picker__recent--selected{border-color:var(--okp-text)}.oklch-picker__recent:focus-visible{outline:2px solid var(--okp-focus);outline-offset:2px}.oklch-picker__swatch-label{color:var(--okp-text-muted);flex:0 0 100%;margin:0;font-size:11.5px}.oklch-picker__axes{gap:var(--okp-gap);flex-direction:column;display:flex}.oklch-picker__axis{flex-direction:column;gap:4px;display:flex}.oklch-picker__axis-head{justify-content:space-between;align-items:baseline;display:flex}.oklch-picker__axis-label{color:var(--okp-text-muted);font-size:11.5px}.oklch-picker__axis-value{color:var(--okp-text-muted);font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.oklch-picker__chart{width:calc(100% - var(--okp-thumb-size));margin-inline:var(--okp-inset);height:var(--okp-chart-height);background:var(--okp-line);border-radius:4px;display:block}.oklch-picker__chart-line{stroke:#0000008c;stroke-width:.6px;vector-effect:non-scaling-stroke}.oklch-picker__gamut-label{fill:#ffffffe6;stroke:#0009;stroke-width:3px;paint-order:stroke;pointer-events:none;font-family:inherit;font-size:10px;font-weight:500}.oklch-picker__gamut-boundary{fill:none;stroke:rgb(255 255 255/var(--okp-boundary-opacity,.6));stroke-width:1px;stroke-dasharray:3 2;vector-effect:non-scaling-stroke}.oklch-picker__gamut-boundary--srgb{--okp-boundary-opacity:.85}.oklch-picker__gamut-boundary--p3{--okp-boundary-opacity:.75}.oklch-picker__gamut-boundary--rec2020{--okp-boundary-opacity:.45}.oklch-picker__crosshair{stroke:#fff;stroke-width:1px;mix-blend-mode:difference;vector-effect:non-scaling-stroke}.oklch-picker__chart--interactive{cursor:crosshair;touch-action:none}.oklch-picker__chart--interactive:focus-visible{outline:2px solid var(--okp-text);outline-offset:2px}.oklch-picker__track{height:var(--okp-track-height);display:block;position:relative}.oklch-picker__track-fill{inset:0 var(--okp-inset);box-shadow:inset 0 0 0 1px var(--okp-line);border-radius:999px;position:absolute;overflow:hidden}.oklch-picker__alpha{order:0}.oklch-picker__alpha-check{background-color:var(--okp-alpha-check-light);background-image:conic-gradient(var(--okp-alpha-check-dark) 0deg 90deg, transparent 90deg 180deg, var(--okp-alpha-check-dark) 180deg 270deg, transparent 270deg 360deg);background-size:var(--okp-alpha-check-size) var(--okp-alpha-check-size);position:absolute;inset:0}.oklch-picker__alpha-ramp{position:absolute;inset:0}.oklch-picker__out-of-gamut{pointer-events:none;background-image:repeating-linear-gradient(-45deg,#00000080 0 2px,#ffffff59 2px 4px);position:absolute;top:0;bottom:0}.oklch-picker__slider{--okp-slider-target:24px;-webkit-appearance:none;appearance:none;width:100%;height:var(--okp-slider-target);margin:calc((var(--okp-track-height) - var(--okp-slider-target)) / 2) 0;cursor:pointer;background:0 0;border:none;display:block;position:relative}.oklch-picker__slider::-webkit-slider-runnable-track,.oklch-picker__slider::-moz-range-track{height:var(--okp-track-height);background:0 0}.oklch-picker__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--okp-thumb-size);height:var(--okp-thumb-size);background:var(--okp-thumb);border:2px solid var(--okp-thumb-line);cursor:grab;border-radius:999px}.oklch-picker__slider::-moz-range-thumb{width:var(--okp-thumb-size);height:var(--okp-thumb-size);background:var(--okp-thumb);border:2px solid var(--okp-thumb-line);cursor:grab;border-radius:999px}.oklch-picker__gamut-switch{--okp-segment-selected:light-dark(#ededed,#2a2a2e);border:1px solid var(--okp-border);border-radius:var(--okp-radius);background:var(--okp-surface);align-self:start;display:flex;overflow:hidden}.oklch-picker__gamut-choice{border:none;border-left:1px solid var(--okp-border);height:24px;color:var(--okp-text-muted);cursor:pointer;white-space:nowrap;background:0 0;padding:0 10px;font-family:inherit;font-size:11.5px}.oklch-picker__gamut-choice:first-child{border-left:none}.oklch-picker__gamut-choice[aria-pressed=true]{background:var(--okp-segment-selected);color:var(--okp-text)}.oklch-picker__gamut-choice:focus-visible{outline:2px solid var(--okp-focus);outline-offset:-2px}.oklch-picker__footer{order:3;grid-template-columns:auto minmax(0,max-content);justify-content:start;align-items:center;gap:6px 8px;display:grid}.oklch-picker__footer>.oklch-picker__name{order:-1;grid-column:1/-1}.oklch-picker__field{border-radius:var(--okp-radius);border:1px solid var(--okp-border);background:var(--okp-surface);height:26px;color:var(--okp-text);field-sizing:content;width:auto;min-width:8ch;max-width:100%;padding:0 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}.oklch-picker__field:focus-visible{outline:2px solid var(--okp-focus);outline-offset:2px}.oklch-picker__preview{border-radius:var(--okp-radius);border:1px solid var(--okp-border);flex-shrink:0;width:26px;height:26px}.oklch-picker__hex{border-radius:var(--okp-radius);border:1px solid var(--okp-border);background:var(--okp-surface);width:92px;height:26px;color:var(--okp-text);padding:0 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}.oklch-picker__name{color:var(--okp-text-muted);font-size:11.5px}.oklch-picker__notice{color:var(--okp-warn);margin:0;font-size:11px;line-height:1.35}.oklch-picker__notice:empty{height:0;overflow:hidden}.oklch-picker--compact{--okp-gap:6px}.oklch-picker--compact .oklch-picker__axis{grid-template-columns:auto 1fr auto;align-items:center;column-gap:8px;display:grid}.oklch-picker--compact .oklch-picker__axis-head{display:contents}.oklch-picker--compact .oklch-picker__axis-label{min-width:1.2em}.oklch-picker--compact .oklch-picker__track{grid-area:1/2}.oklch-picker--compact .oklch-picker__axis-value{grid-area:1/3}.oklch-picker--side-by-side{max-width:var(--okp-side-by-side-width);grid-template-columns:minmax(0, 1fr) var(--okp-rail-width);align-items:start;column-gap:calc(var(--okp-gap) * 1.6);row-gap:var(--okp-gap);grid-template-rows:min-content min-content min-content auto;grid-template-areas:"chart footer""axes presets""switch switch""notice notice";display:grid}.oklch-picker--side-by-side .oklch-picker__chart{grid-area:chart}.oklch-picker--side-by-side .oklch-picker__axes{grid-area:axes;align-self:start}.oklch-picker--side-by-side .oklch-picker__footer{justify-content:stretch;align-self:start;align-items:stretch;gap:var(--okp-gap);grid-area:footer;grid-template-columns:minmax(0,1fr)}.oklch-picker--side-by-side .oklch-picker__field{field-sizing:fixed;width:100%}.oklch-picker--side-by-side .oklch-picker__preview{width:44px;height:44px}.oklch-picker--side-by-side .oklch-picker__hex{width:auto}.oklch-picker--side-by-side .oklch-picker__presets{grid-area:presets;grid-template-columns:repeat(auto-fill,24px);justify-content:start;align-self:start;gap:8px;display:grid}.oklch-picker--side-by-side .oklch-picker__gamut-switch{grid-area:switch}.oklch-picker--side-by-side .oklch-picker__notice{grid-area:notice}.oklch-picker--chart .oklch-picker__chart,.oklch-picker--side-by-side .oklch-picker__chart{height:var(--okp-chart-large-height);border-radius:var(--okp-radius)}.oklch-picker--chart .oklch-picker__axis{gap:var(--okp-gap)}:root{color-scheme:light dark;--site-text:light-dark(#1a1a1a,#f2f1ef);--site-text-muted:light-dark(#6b6b6b,#a0a0a0);--site-line:light-dark(#e4e2df,#2c2c30);--site-bg:light-dark(#fff,#0e0e10);--site-surface:light-dark(#faf9f7,#17171a);--site-link:light-dark(#1f5fb8,#7fb0ee);--site-focus:light-dark(#2f6fd0,#7fb0ee);--site-sidebar-width:15rem;--site-measure:46rem;--site-sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--site-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}:root[data-theme=light],:root[data-theme=light] .oklch-picker{color-scheme:light}:root[data-theme=dark],:root[data-theme=dark] .oklch-picker{color-scheme:dark}*,:before,:after{box-sizing:border-box}html{scroll-padding-top:5rem}body{font-family:var(--site-sans);color:var(--site-text);background:var(--site-bg);-webkit-font-smoothing:antialiased;margin:0;line-height:1.6}a{color:var(--site-link);text-underline-offset:.2em}:where(a,button,input,summary):focus-visible{outline:2px solid var(--site-focus);outline-offset:2px;border-radius:3px}code{font-family:var(--site-mono);font-size:.9em}kbd{font-family:var(--site-mono);white-space:nowrap;color:var(--site-text);background:var(--site-surface);border:1px solid var(--site-line);border-bottom-width:2px;border-radius:.3rem;padding:.1em .4em;font-size:.8em;line-height:1}.skip{background:var(--site-bg);border:1px solid var(--site-line);z-index:10;border-radius:0 0 .5rem;padding:.6rem 1rem;position:absolute;top:0;left:-9999px}.skip:focus{left:0}.header{z-index:5;border-bottom:1px solid var(--site-line);background:color-mix(in srgb, var(--site-bg) 88%, transparent);backdrop-filter:blur(8px);align-items:center;gap:1rem;padding:.75rem 1.5rem;display:flex;position:sticky;top:0}.header__brand{letter-spacing:-.01em;color:inherit;align-items:center;gap:.6rem;font-weight:600;text-decoration:none;display:flex}.header__mark{border-radius:.4rem;width:1.75rem;height:1.75rem}.header__mark--dark{display:none}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .header__mark--light{display:none}:root:not([data-theme=light]) .header__mark--dark{display:inline}}:root[data-theme=dark] .header__mark--light{display:none}:root[data-theme=dark] .header__mark--dark,:root[data-theme=light] .header__mark--light{display:inline}:root[data-theme=light] .header__mark--dark{display:none}.header__spacer{flex:1}.header__link{color:var(--site-text-muted);font-size:.9rem;text-decoration:none}.header__link:hover{color:var(--site-text)}.theme{font:inherit;color:inherit;border:1px solid var(--site-line);cursor:pointer;background:0 0;border-radius:.4rem;align-items:center;gap:.4rem;padding:.35rem .6rem;font-size:.85rem;display:inline-flex}.theme:hover{background:var(--site-surface)}.theme__icon{line-height:0;display:none}:root:not([data-theme]) .theme__icon--light,:root[data-theme=light] .theme__icon--light,:root[data-theme=dark] .theme__icon--dark{display:inline-flex}@media (prefers-color-scheme:dark){:root:not([data-theme]) .theme__icon--light{display:none}:root:not([data-theme]) .theme__icon--dark{display:inline-flex}}.layout{grid-template-columns:var(--site-sidebar-width) minmax(0, 1fr);gap:2.5rem;max-width:78rem;margin:0 auto;padding:2rem 1.5rem 5rem;display:grid}.sidebar{align-self:start;max-height:calc(100vh - 7rem);font-size:.9rem;position:sticky;top:5rem;overflow-y:auto}.sidebar__section+.sidebar__section{margin-top:1.5rem}.sidebar__title{text-transform:uppercase;letter-spacing:.06em;color:var(--site-text-muted);margin:0 0 .5rem;font-size:.75rem;font-weight:600}.sidebar__list{gap:.15rem;margin:0;padding:0;list-style:none;display:grid}.sidebar__link{color:var(--site-text-muted);border-radius:.35rem;margin-left:-.6rem;padding:.3rem .6rem;text-decoration:none;display:block}.sidebar__link:hover{color:var(--site-text);background:var(--site-surface)}.sidebar__link[aria-current=page]{color:var(--site-text);background:var(--site-surface);font-weight:600}.content{min-width:0}.content>p,.content>ul,.content>ol,.content>h1,.content>h2,.content>h3,.content>.lede{max-width:var(--site-measure)}.content h1{letter-spacing:-.025em;margin:0 0 .5rem;font-size:clamp(1.9rem,1.4rem + 1.6vw,2.6rem);line-height:1.15}.content h2{letter-spacing:-.015em;margin:2.5rem 0 .75rem;font-size:1.35rem}.content h3{margin:2rem 0 .5rem;font-size:1.05rem}.content .lede{color:var(--site-text-muted);margin:0 0 2rem;font-size:1.1rem}.demo{gap:.75rem;margin:1.5rem 0 2rem;display:grid}.demo__caption{color:var(--site-text-muted);font-size:.85rem}.demo__frame{border:1px solid var(--site-line);background:var(--site-surface);border-radius:.75rem;padding:1.5rem}.demo__frame oklch-picker{min-height:479px;display:block}.demo__frame oklch-picker[layout=side-by-side]{min-height:394px}.demo__frame oklch-picker[layout=stacked]{min-height:379px}.demo__frame oklch-picker[layout=compact]{min-height:176px}.tabs{border:1px solid var(--site-line);border-radius:.6rem;margin:1.5rem 0;overflow:hidden}.tabs__radio{opacity:0;pointer-events:none;position:absolute}.tabs__list{border-bottom:1px solid var(--site-line);background:var(--site-surface);flex-wrap:wrap;gap:.15rem;padding:.35rem;display:flex}.tabs__tab{color:var(--site-text-muted);cursor:pointer;user-select:none;border-radius:.35rem;align-items:center;gap:.4rem;padding:.3rem .7rem;font-size:.85rem;display:inline-flex;box-shadow:inset 0 0 0 1px #0000}.tabs__tab:hover{color:var(--site-text);background:var(--site-bg)}.tabs__copy{font:inherit;color:var(--site-text-muted);border:1px solid var(--site-line);cursor:pointer;white-space:nowrap;background:0 0;border-radius:.35rem;margin-left:auto;padding:.3rem .7rem;font-size:.8rem}.tabs__copy:hover{color:var(--site-text);background:var(--site-bg)}.tabs__panel{display:none;overflow-x:auto}.tabs__panel pre{margin:0;padding:1rem;font-size:.85rem;line-height:1.55}.tabs__tab--on{color:var(--site-text);background:var(--site-bg);box-shadow:inset 0 0 0 1px var(--site-line);font-weight:600}.tabs__radio:focus-visible~.tabs__list .tabs__tab{outline:2px solid var(--site-focus);outline-offset:-2px}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .astro-code,:root:not([data-theme=light]) .astro-code span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;text-decoration:var(--shiki-dark-text-decoration)!important}}:root[data-theme=dark] .astro-code,:root[data-theme=dark] .astro-code span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;text-decoration:var(--shiki-dark-text-decoration)!important}.content p,.content ul,.content ol{margin:0 0 1rem}.content li+li{margin-top:.35rem}.content :not(pre)>code{background:var(--site-surface);border:1px solid var(--site-line);border-radius:.25rem;padding:.1em .35em}.content pre{border:1px solid var(--site-line);border-radius:.6rem;padding:1rem;font-size:.85rem;line-height:1.55;overflow-x:auto}.codeblock{position:relative}.codeblock__copy{font:inherit;color:var(--site-text-muted);background:var(--site-bg);border:1px solid var(--site-line);cursor:pointer;opacity:0;border-radius:.35rem;padding:.25rem .6rem;font-size:.75rem;transition:opacity .12s;position:absolute;top:.5rem;right:.5rem}.codeblock:hover .codeblock__copy,.codeblock__copy:focus-visible{opacity:1}.codeblock__copy:hover{color:var(--site-text)}@media (hover:none){.codeblock__copy{opacity:1}}.content .table-scroll{margin:1rem 0 1.5rem;overflow-x:auto}.content table{border-collapse:collapse;width:100%;margin:1rem 0 1.5rem;font-size:.9rem}.content table.props col:first-child{width:12rem}.content table.props col:nth-child(2){width:17rem}.content table.props col:nth-child(3){width:6rem}.content .table-scroll table{min-width:38rem;margin:0}.content th,.content td{text-align:left;border-bottom:1px solid var(--site-line);vertical-align:top;padding:.5rem .75rem}.content th{text-transform:uppercase;letter-spacing:.04em;color:var(--site-text-muted);white-space:nowrap;font-size:.8rem}.content td code{white-space:nowrap}.note{border-left:3px solid var(--site-link);background:var(--site-surface);border-radius:0 .4rem .4rem 0;margin:1.5rem 0;padding:.9rem 1.1rem;font-size:.92rem}.note>:last-child{margin-bottom:0}.pager{border-top:1px solid var(--site-line);justify-content:space-between;gap:1rem;margin-top:3.5rem;padding-top:1.5rem;font-size:.9rem;display:flex}.pager__link{color:var(--site-text);gap:.15rem;text-decoration:none;display:grid}.pager__link--next{text-align:right;margin-left:auto}.pager__label{text-transform:uppercase;letter-spacing:.05em;color:var(--site-text-muted);font-size:.75rem}.pager__link:hover .pager__title{color:var(--site-link)}.footer{border-top:1px solid var(--site-line);color:var(--site-text-muted);padding:2rem 1.5rem;font-size:.85rem}.footer__inner{flex-wrap:wrap;align-items:center;gap:1.25rem;max-width:78rem;margin:0 auto;display:flex}.footer__link{align-items:center;gap:.4rem;text-decoration:none;display:inline-flex}.footer__link:hover span{text-decoration:underline}@media (width<=60rem){.layout{grid-template-columns:minmax(0,1fr);gap:1.5rem}.sidebar{border-bottom:1px solid var(--site-line);max-height:none;padding-bottom:1.5rem;position:static}}