@property --okhst-eps{syntax:"<number>";inherits:true;initial-value:.05}@property --tone-lo{syntax:"<number>";inherits:true;initial-value:0}@property --tone-hi{syntax:"<number>";inherits:true;initial-value:100}@property --tone-flip{syntax:"<number>";inherits:true;initial-value:0}@property --okhst-space{syntax:"<number>";inherits:true;initial-value:0}@property --count{syntax:"<integer>";inherits:true;initial-value:11}@property --i{syntax:"<integer>";inherits:false;initial-value:0}@property --t{syntax:"<number>";inherits:false;initial-value:0}@property --t-label{syntax:"<integer>";inherits:false;initial-value:0}@property --c-surface{syntax:"<color>";inherits:true;initial-value:#fff}@property --c-elev{syntax:"<color>";inherits:true;initial-value:#fff}@property --c-border{syntax:"<color>";inherits:true;initial-value:gray}@property --c-track{syntax:"<color>";inherits:true;initial-value:gray}@property --c-text{syntax:"<color>";inherits:true;initial-value:#000}@property --c-muted{syntax:"<color>";inherits:true;initial-value:gray}@property --c-thumb{syntax:"<color>";inherits:true;initial-value:#fff}@property --c-accent{syntax:"<color>";inherits:true;initial-value:gray}@property --swatch-bg{syntax:"<color>";inherits:false;initial-value:#000}@function --ghst(--h <number>, --s <number>, --t <number>) returns <color>{--t-eff: calc(var(--tone-flip) * (100 - var(--t)) + (1 - var(--tone-flip)) * var(--t)); result: --okhst(var(--h), var(--s), calc(var(--tone-lo) + (var(--tone-hi) - var(--tone-lo)) * var(--t-eff) / 100));}@function --okhst(--h <number>, --s <number>, --t <number>) returns <color>{--a: cos(var(--h) * 1deg); --b: sin(var(--h) * 1deg); --scusp: --okhst-smax(var(--a), var(--b)); --lc: --okhst-lcusp(var(--a), var(--b), var(--scusp)); --cc: calc(var(--lc) * var(--scusp)); --sm: --okhst-smid(var(--a), var(--b)); --tm: --okhst-tmid(var(--a), var(--b)); --L-tone: --okhst-l(var(--t));  --L-lin: --okhsl-toe-inv(calc(var(--t) / 100));  --L: calc((1 - var(--okhst-space)) * var(--L-tone) + var(--okhst-space) * var(--L-lin)); --C: --okhst-c(var(--s), var(--L), var(--lc), var(--cc), var(--sm), var(--tm)); result: oklch(var(--L) var(--C) var(--h));}@function --okhsl-toe-inv(--x <number>) returns <number>{--k1: .206; --k2: .03; --k3: 1.17184;  result: calc((var(--x) * var(--x) + var(--k1) * var(--x)) / (var(--k3) * (var(--x) + var(--k2))));}@function --okhst-l(--t <number>) returns <number>{--y: calc(var(--okhst-eps) * (pow((1 + var(--okhst-eps)) / var(--okhst-eps), var(--t) / 100) - 1)); result: calc(pow(var(--y), 1/3));}@function --okhst-smax(--a <number>, --b <number>) returns <number>{--red: clamp(0, sign(-1.8817*var(--a) - .809365*var(--b) - 1), 1); --grw: clamp(0, sign(1.81444*var(--a) - 1.19445*var(--b) - 1), 1); --grn: calc((1 - var(--red)) * var(--grw)); --blu: calc((1 - var(--red)) * (1 - var(--grw))); --k0: calc(var(--red)*1.19086 + var(--grn)*.739565 + var(--blu)*1.35734); --k1: calc(var(--red)*1.76577 + var(--grn)*-.459544 + var(--blu)*-.00915799); --k2: calc(var(--red)*.596626 + var(--grn)*.0828543 + var(--blu)*-1.1513); --k3: calc(var(--red)*.755152 + var(--grn)*.125411 + var(--blu)*-.505596); --k4: calc(var(--red)*.567712 + var(--grn)*.145032 + var(--blu)*.00692167); --wl: calc(var(--red)*4.07674 + var(--grn)*-1.26844 + var(--blu)*-.00419609); --wm: calc(var(--red)*-3.30771 + var(--grn)*2.60976 + var(--blu)*-.703419); --ws: calc(var(--red)*.23097 + var(--grn)*-.341319 + var(--blu)*1.70761); --s0: calc(var(--k0) + var(--k1)*var(--a) + var(--k2)*var(--b) + var(--k3)*var(--a)*var(--a) + var(--k4)*var(--a)*var(--b)); --kl: calc(.396338*var(--a) + .215804*var(--b)); --km: calc(-.105561*var(--a) - .0638542*var(--b)); --ks: calc(-.0894842*var(--a) - 1.29149*var(--b)); --ll: calc(1 + var(--s0)*var(--kl)); --mm: calc(1 + var(--s0)*var(--km)); --ss: calc(1 + var(--s0)*var(--ks)); --f: calc(var(--wl)*var(--ll)*var(--ll)*var(--ll) + var(--wm)*var(--mm)*var(--mm)*var(--mm) + var(--ws)*var(--ss)*var(--ss)*var(--ss)); --f1: calc(var(--wl)*3*var(--kl)*var(--ll)*var(--ll) + var(--wm)*3*var(--km)*var(--mm)*var(--mm) + var(--ws)*3*var(--ks)*var(--ss)*var(--ss)); --f2: calc(var(--wl)*6*var(--kl)*var(--kl)*var(--ll) + var(--wm)*6*var(--km)*var(--km)*var(--mm) + var(--ws)*6*var(--ks)*var(--ks)*var(--ss)); result: calc(var(--s0) - var(--f)*var(--f1) / (var(--f1)*var(--f1) - .5*var(--f)*var(--f2)));}@function --okhst-lcusp(--a <number>, --b <number>, --scusp <number>) returns <number>{--kl: calc(.396338*var(--a) + .215804*var(--b)); --km: calc(-.105561*var(--a) - .0638542*var(--b)); --ks: calc(-.0894842*var(--a) - 1.29149*var(--b)); --ll: calc(1 + var(--scusp)*var(--kl)); --mm: calc(1 + var(--scusp)*var(--km)); --ss: calc(1 + var(--scusp)*var(--ks)); --r: calc(4.07674*var(--ll)*var(--ll)*var(--ll) - 3.30771*var(--mm)*var(--mm)*var(--mm) + .23097*var(--ss)*var(--ss)*var(--ss)); --g: calc(-1.26844*var(--ll)*var(--ll)*var(--ll) + 2.60976*var(--mm)*var(--mm)*var(--mm) - .341319*var(--ss)*var(--ss)*var(--ss)); --bl:calc(-.00419609*var(--ll)*var(--ll)*var(--ll) - .703419*var(--mm)*var(--mm)*var(--mm) + 1.70761*var(--ss)*var(--ss)*var(--ss)); result: calc(pow(1 / max(var(--r), var(--g), var(--bl)), 1/3));}@function --okhst-smid(--a <number>, --b <number>) returns <number>{result: calc(.11517 + 1 / ( 7.44779 + 4.15901*var(--b) + var(--a)*(-2.19557 + 1.75198*var(--b) + var(--a)*(-2.13705 - 10.023*var(--b) + var(--a)*(-4.24895 + 5.38771*var(--b) + 4.69891*var(--a))))));}@function --okhst-tmid(--a <number>, --b <number>) returns <number>{result: calc(.112396 + 1 / ( 1.6132 - .681244*var(--b) + var(--a)*(.403706 + .901481*var(--b) + var(--a)*(-.270879 + .61224*var(--b) + var(--a)*(.00299215 - .453996*var(--b) - .146619*var(--a))))));}@function --okhst-c(--s <number>, --l <number>, --lc <number>, --cc <number>, --sm <number>, --tm <number>) returns <number>{--smax: calc(var(--cc) / var(--lc)); --tmax: calc(var(--cc) / (1 - var(--lc)));  --below: clamp(0, sign(var(--lc) - var(--l)), 1); --cmax: calc(var(--below) * var(--cc) * var(--l) / var(--lc) + (1 - var(--below)) * var(--cc) * (1 - var(--l)) / (1 - var(--lc))); --k: calc(var(--cmax) / min(var(--l) * var(--smax), (1 - var(--l)) * var(--tmax))); --ca: calc(var(--l) * var(--sm)); --cb: calc((1 - var(--l)) * var(--tm)); --cmid: calc(.9 * var(--k) * pow(1 / (1/pow(var(--ca),4) + 1/pow(var(--cb),4)), .25)); --ca0: calc(var(--l) * .4); --cb0: calc((1 - var(--l)) * .8); --c0: calc(sqrt(1 / (1/pow(var(--ca0),2) + 1/pow(var(--cb0),2)))); --tl: calc(1.25 * var(--s)); --k1l: calc(.8 * var(--c0)); --k2l: calc(1 - var(--k1l) / var(--cmid)); --clow: calc(var(--tl) * var(--k1l) / (1 - var(--k2l) * var(--tl))); --th: calc((var(--s) - .8) / .2); --k1h: calc(.2 * pow(var(--cmid),2) * pow(1.25,2) / var(--c0)); --k2h: calc(1 - var(--k1h) / (var(--cmax) - var(--cmid))); --chigh: calc(var(--cmid) + var(--th) * var(--k1h) / (1 - var(--k2h) * var(--th))); --hi: clamp(0, sign(var(--s) - .8), 1); result: calc((1 - var(--hi)) * var(--clow) + var(--hi) * var(--chigh));}.playground{align-items:center;gap:var(--gap);flex-direction:column;width:100%;display:none}.no-support{width:100%;max-width:var(--maxw);text-align:center;color:#1a1a1a;padding:48px 20px}.no-support h1{justify-content:center;margin-bottom:16px}.no-support h1 span{color:#666}.no-support p{color:#444;margin:0 0 10px;font-size:15px;line-height:1.55}.no-support__hint{color:#666;font-size:14px}.no-support code{background-color:#e8e8e8;border-radius:5px;padding:1px 5px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:.92em}@supports (top:function(--my-fn() { result: 1px; })){.playground{display:flex}.no-support{display:none}}:root{--seed-h:250;--seed-s:.7;--tone-lo:10;--tone-hi:100;--tone-flip:0;--c-surface:--ghst(var(--seed-h), .04, 100);--c-elev:--ghst(var(--seed-h), .05, 96);--c-border:--ghst(var(--seed-h), .04, 86);--c-track:--ghst(var(--seed-h), .04, 88);--c-text:--ghst(var(--seed-h), .02, 6);--c-muted:--ghst(var(--seed-h), .02, 38);--c-thumb:--ghst(var(--seed-h), .02, 100);--c-accent:--ghst(var(--seed-h), var(--seed-s), 58);--radius:14px;--radius-sm:9px;--gap:16px;--maxw:980px;color:var(--c-text);background-color:var(--c-surface);background-image:radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in oklch, --ghst(var(--seed-h), var(--seed-s), 70) 14%, transparent), transparent);background-attachment:fixed;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.5}@supports not (top:function(--my-fn() { result: 1px; })){:root{color:#1a1a1a;background-color:#f5f5f5;background-image:none}}html.dark{--tone-lo:15;--tone-hi:95;--tone-flip:1}*{box-sizing:border-box}body{flex-direction:column;align-items:center;min-height:100vh;margin:0;padding:32px 20px 64px;display:flex}h1{letter-spacing:-.01em;align-items:baseline;gap:7px;margin:0;font-size:18px;font-weight:650;display:flex}h1 span{color:var(--c-muted);font-size:13px;font-weight:400}.topbar{width:100%;max-width:var(--maxw);justify-content:space-between;align-items:center;gap:var(--gap);flex-wrap:wrap;display:flex}.toggles{flex-wrap:wrap;gap:10px;display:flex}.seg{background-color:var(--c-elev);border:1px solid var(--c-border);border-radius:999px;gap:2px;padding:3px;display:inline-flex}.seg button{appearance:none;font:inherit;color:var(--c-muted);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:5px 13px;font-size:13px;transition:color .12s,background-color .12s}.seg button[aria-pressed=true]{--tone-flip:0;--tone-lo:0;--tone-hi:100;background-color:--ghst(var(--seed-h), var(--seed-s), 58);color:--ghst(var(--seed-h), calc(var(--seed-s) * .4), 100);font-weight:600}main{width:100%;max-width:var(--maxw);gap:var(--gap);flex-direction:column;display:flex}.card{background-color:var(--c-elev);border:1px solid var(--c-border);border-radius:var(--radius);padding:18px}.controls{grid-template-columns:1fr 1fr;gap:18px 24px;display:grid}.control{flex-direction:column;gap:8px;display:flex}.control--full{grid-column:1/-1}.control__head{color:var(--c-muted);justify-content:space-between;align-items:baseline;font-size:12.5px;display:flex}.control__head b{color:var(--c-text);font-variant-numeric:tabular-nums;font-weight:600}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:26px;margin:0}input[type=range]::-webkit-slider-runnable-track{border:1px solid var(--c-border);background-color:var(--c-track);border-radius:6px;height:8px}input[type=range]::-webkit-slider-thumb{appearance:none;background-color:var(--c-thumb);border:2px solid var(--c-accent);border-radius:50%;width:18px;height:18px;margin-top:-6px;box-shadow:0 1px 3px #00000040}.slider-hue::-webkit-slider-runnable-track{background:linear-gradient(90deg, --okhst(0, 1, 58), --okhst(60, 1, 58), --okhst(120, 1, 58), --okhst(180, 1, 58), --okhst(240, 1, 58), --okhst(300, 1, 58), --okhst(360, 1, 58));border-color:#0000}.slider-sat::-webkit-slider-runnable-track{background:linear-gradient(90deg, --okhst(var(--seed-h), 0, 58), --okhst(var(--seed-h), 1, 58));border-color:#0000}.range-dual{--lo:10;--hi:100;height:26px;position:relative}.range-dual:before,.range-dual:after{content:"";pointer-events:none;border-radius:6px;height:8px;position:absolute;top:50%;transform:translateY(-50%)}.range-dual:before{background-color:var(--c-track);border:1px solid var(--c-border);left:0;right:0}.range-dual:after{left:calc(var(--lo) * 1%);width:calc((var(--hi) - var(--lo)) * 1%);background-color:var(--c-accent);border-color:#0000}.range-dual input[type=range]{z-index:2;pointer-events:none;background:0 0;width:100%;position:absolute;inset:0}.range-dual input[type=range]::-webkit-slider-runnable-track{background:0 0;border:0;height:8px}.range-dual input[type=range]::-webkit-slider-thumb{appearance:none;pointer-events:auto;background-color:var(--c-thumb);border:2px solid var(--c-accent);border-radius:50%;width:18px;height:18px;margin-top:-5px;box-shadow:0 1px 3px #0000004d}.ramp{border-radius:var(--radius);border:1px solid var(--c-border);height:132px;display:flex;overflow:hidden}.swatch{--tone-flip:0;--t:calc(var(--i) / (var(--count) - 1) * 100);--t-label:calc(var(--i) / (var(--count) - 1) * 100);--show:clamp(0, var(--count) - var(--i), 1);--swatch-bg:--ghst(var(--seed-h), var(--seed-s), var(--t));flex:var(--show) 1 0;counter-reset:t var(--t-label);appearance:none;cursor:pointer;background-color:var(--swatch-bg);min-width:0;color:--ghst(var(--seed-h), calc(var(--seed-s) * .4), calc(100 - var(--t)));font-variant-numeric:tabular-nums;border:0;justify-content:center;align-items:flex-end;padding:0 0 8px;font:600 12px/1 ui-monospace,SF Mono,Menlo,Consolas,monospace;transition:filter .12s;display:flex;overflow:hidden}.swatch:first-child{border-radius:var(--radius) 0 0 var(--radius)}@supports (color:contrast-color(red)){.swatch{color:contrast-color(var(--swatch-bg))}}.swatch:hover{filter:brightness(1.06)}.swatch:before{content:counter(t)}.swatch[aria-pressed=true]{outline:2px solid --ghst(var(--seed-h), calc(var(--seed-s) * .5), 45);outline-offset:-2px}@supports (color:contrast-color(red)){.swatch[aria-pressed=true]{outline-color:contrast-color(var(--swatch-bg))}}.inspector{align-items:center;gap:16px;min-height:64px;display:flex}.inspector__chip{border-radius:var(--radius-sm);border:1px solid var(--c-border);background-color:var(--c-elev);flex-shrink:0;width:56px;height:56px}.inspector__body{flex-direction:column;gap:3px;min-width:0;display:flex}.inspector__tone{color:var(--c-muted);font-size:12.5px}.inspector__tone b{color:var(--c-text);font-variant-numeric:tabular-nums}.inspector__value{color:var(--c-text);word-break:break-all;-webkit-user-select:all;user-select:all;font:500 13.5px/1.4 ui-monospace,SF Mono,Menlo,Consolas,monospace}.inspector__hint{color:var(--c-muted);font-size:12px}.toast{opacity:0;pointer-events:none;background-color:var(--c-text);color:var(--c-surface);border:1px solid var(--c-muted);text-overflow:ellipsis;white-space:nowrap;border-radius:999px;max-width:min(90vw,560px);padding:9px 14px;font:500 12.5px/1.3 ui-monospace,SF Mono,Menlo,Consolas,monospace;transition:opacity .18s,transform .18s;position:fixed;bottom:28px;left:50%;overflow:hidden;transform:translate(-50%)translateY(16px);box-shadow:0 8px 24px #00000040}.toast--show{opacity:1;transform:translate(-50%)translateY(0)}footer{width:100%;max-width:var(--maxw);text-align:center;color:var(--c-muted);font-size:12px}footer div+div{margin-top:4px}footer a{color:inherit;text-underline-offset:2px;text-decoration:underline}footer a:hover{color:var(--c-text)}code{background-color:var(--c-track);border-radius:5px;padding:1px 5px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:.92em}@media (width<=620px){.controls{grid-template-columns:1fr}.topbar{justify-content:center}}