From c4ff73a883ce1ecf989d4d23e67955077d00423f Mon Sep 17 00:00:00 2001
From: David Aerne <meodai@gmail.com>
Date: Fri, 10 May 2024 21:38:15 +0200
Subject: [PATCH] better demo

---
 demo/index.html | 12 ++++++------
 src/demo.css    | 17 +++++++++++++++--
 src/demo.ts     |  6 ++++--
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index dbd612a..c8f7399 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -8,19 +8,19 @@
       href="https://fonts.cdnfonts.com/css/apple-garamond"
       rel="stylesheet"
     />
-    <script type="module" crossorigin>(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const s of e)if(s.type==="childList")for(const c of s.addedNodes)c.tagName==="LINK"&&c.rel==="modulepreload"&&n(c)}).observe(document,{childList:!0,subtree:!0});function o(e){const s={};return e.integrity&&(s.integrity=e.integrity),e.referrerPolicy&&(s.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?s.credentials="include":e.crossOrigin==="anonymous"?s.credentials="omit":s.credentials="same-origin",s}function n(e){if(e.ep)return;e.ep=!0;const s=o(e);fetch(e.href,s)}})();const X=[[253/255,246/255,237/255],[227/255,36/255,33/255],[243/255,230/255,0],[240/255,142/255,28/255],[22/255,153/255,218/255],[120/255,34/255,170/255],[0,142/255,91/255],[29/255,28/255,28/255]],U=[[253/255,246/255,237/255],[247/255,45/255,41/255],[253/255,203/255,0/255],[250/255,102/255,13/255],[17/255,97/255,170/255],[101/255,57/255,138/255],[70/255,139/255,73/255],[29/255,28/255,28/255]],K=[[1,1,1],[1,0,0],[1,1,0],[1,.5,0],[.163,.373,.6],[.5,0,.5],[0,.66,.2],[.2,.094,0]],W=[[245/255,238/255,226/255],[170/255,14/255,1/255],[224/255,178/255,0/255],[217/255,104/255,5/255],[18/255,107/255,145/255],[103/255,15/255,128/255],[88/255,133/255,30/255],[44/255,37/255,30/255]],Z=[[254/255,250/255,226/255],[237/255,55/255,58/255],[255/255,233/255,111/255],[250/255,102/255,13/255],[33/255,112/255,163/255],[238/255,131/255,154/255],[59/255,155/255,83/255],[24/255,10/255,1/255]],D=[[255/255,255/255,255/255],[218/255,105/255,104/255],[255/255,244/255,122/255],[232/255,154/255,113/255],[73/255,138/255,186/255],[97/255,96/255,178/255],[144/255,191/255,140/255],[8/255,8/255,8/255]],Q=[[240/255,234/255,214/255],[204/255,50/255,53/255],[253/255,222/255,20/255],[230/255,152/255,92/255],[1/255,88/255,140/255],[107/255,51/255,111/255],[51/255,138/255,92/255],[55/255,39/255,23/255]],ee=[[249/255,232/255,209/255],[216/255,43/255,59/255],[231/255,175/255,2/255],[224/255,89/255,31/255],[92/255,123/255,145/255],[77/255,58/255,78/255],[107/255,129/255,53/255],[14/255,8/255,7/255]],te=[[239/255,235/255,225/255],[182/255,53/255,55/255],[253/255,203/255,0/255],[222/255,69/255,20/255],[95/255,157/255,191/255],[83/255,70/255,98/255],[58/255,90/255,66/255],[8/255,9/255,13/255]],re=[[228/255,218/255,197/255],[181/255,65/255,60/255],[229/255,193/255,81/255],[220/255,137/255,61/255],[59/255,143/255,171/255],[121/255,97/255,134/255],[13/255,170/255,114/255],[46/255,44/255,38/255]],ne=[[237/255,213/255,177/255],[167/255,33/255,28/255],[245/255,181/255,18/255],[204/255,93/255,46/255],[71/255,122/255,141/255],[99/255,79/255,93/255],[109/255,143/255,118/255],[44/255,44/255,37/255]],oe=[[221/255,219/255,211/255],[196/255,82/255,69/255],[196/255,167/255,80/255],[200/255,123/255,70/255],[74/255,104/255,167/255],[94/255,89/255,161/255],[86/255,139/255,70/255],[38/255,38/255,38/255]],i=new Map;i.set("itten",{title:"Johannes Itten: Chromatic Circle",year:1961,reference:"farbkreis_extended.png",cube:X});i.set("itten-normalized",{title:"Johannes Itten: Chromatic Circle (Normalized)",year:1961,reference:"Johannes-Itten-The-chromatic-circle-some-exercises-on-the-contrast-of-pure-colors.webp",cube:U});i.set("itten-neutral",{title:"Johannes Itten: Nathan Gossett & Baoquan Chen",year:1961,reference:"itten-ryb.pdf",cube:K});i.set("bezold",{title:"Wilhelm von Bezold: Farbentafel",year:1874,reference:"Bezold_Farbentafel_1874.jpg",cube:W});i.set("boutet",{title:"Claude Boutet: Twelve-color color circles ",year:1708,reference:"Boutet_1708_color_circles.jpg",cube:Z});i.set("hett",{title:"J. A. H. Hett: RGV Color Wheel",year:1908,reference:"RGV_color_wheel_1908",cube:D});i.set("schiffermueller",{title:"Ignaz Schiffermüller: Versuch eines Farbensystems",year:1772,reference:"020_schiffermueller1.jpg",cube:Q});i.set("harris",{title:"Harris: The Natural System of Colours",year:1766,reference:"Moses_Harris_The_Natural_System_of_Colours.jpg",cube:ee});i.set("goethe",{title:"Goethe: Farbenkreis",year:1809,reference:"Goethe_Farbenkreis_zur_Symbolisierung_des_menschlichen_Geistes-_und_Seelenlebens_1809.jpg",cube:te});i.set("munsell",{title:"Munsell Color System",year:1905,reference:"munsell-atlas-11.jpg",cube:re});i.set("hayer",{title:"Charles Hayter:  New Practical Treatise on the Three Primitive Colours",year:1826,reference:"Color_diagram_Charles_Hayter.jpg",cube:ne});i.set("ippsketch",{title:"Ippsketch: Imposter Syndrome",year:2021,reference:"ippsketch.png",cube:oe});i.set("rgb",{title:"James Clerk Maxwell: Inverted RGB",year:1860,reference:"rgb-cube.png",cube:[[1,1,1],[1,0,0],[1,1,0],[1,.5,0],[0,0,1],[1,0,1],[0,1,0],[0,0,0]]});const F=t=>t*t*(3-2*t),_=(t,r,o)=>t+o*(r-t),z=(t,r,o,n,e,s)=>_(_(t,r,e),_(o,n,e),s),S=(t,r,o,n,e,s,c,u,m,a,f)=>_(z(t,r,o,n,m,a),z(e,s,c,u,m,a),f);function w(t,{cube:r=X,easingFn:o=F}={}){const n=o(t[0]),e=o(t[1]),s=o(t[2]),c=r.map(a=>a[0]),u=r.map(a=>a[1]),m=r.map(a=>a[2]);return[S(...c,n,e,s),S(...u,n,e,s),S(...m,n,e,s)]}function se(t){return(t%360+360)%360}function ce(t){let[r,o,n]=t;r=se(r||0);let e=n+o*(n<.5?n:1-n),s=e-(e-n)*2*Math.abs(r/60%2-1),c;switch(Math.floor(r/60)){case 0:c=[e,s,2*n-e];break;case 1:c=[s,e,2*n-e];break;case 2:c=[2*n-e,e,s];break;case 3:c=[2*n-e,s,e];break;case 4:c=[s,2*n-e,e];break;case 5:c=[e,2*n-e,s];break;default:c=[2*n-e,2*n-e,2*n-e]}return c}function E(t,{cube:r=X,easingFn:o=F,invertLightness:n=!0}={}){const e=n?1-t[2]:t[2],s=ce([t[0],t[1],e]);return w(s,{cube:r,easingFn:o})}let l=i.get("itten-normalized").cube;const le=t=>{console.log("Customized RYB_CUBE"),console.log(t.map(r=>r.map(o=>o*255+"/255")))},d=t=>`rgb(${Math.round(t[0]*255)} ${Math.round(t[1]*255)} ${Math.round(t[2]*255)})`,C=t=>{const r=parseInt(t.slice(1),16),o=r>>16&255,n=r>>8&255,e=r&255;return[o/255,n/255,e/255]},p=t=>`#${t.map(r=>Math.round(r*255).toString(16).padStart(2,"0")).join("")}`,h=(t=12,r=1,o=.5,n=s=>s,e=!1)=>new Array(t).fill(0).map((s,c)=>{const u=e?n(1-c/t)*360+120:n((c+1)/t)*360;return d(E([u,r,o],{cube:l}))}),ae=["Zero","I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII","XIII","XIV","XV","XVI","XVII","XVIII","XIX","XX","XXI","XXII","XXIII","XXIV","XXV","XXVI","XXVII","XXVIII","XXIX","XXX"],ue=async(t=18,r=9)=>{const o=new Array(t-1).fill(0).map((u,m)=>{const a=m/(t-1);return new Array(r).fill(0).map((g,$)=>{const k=($+1)/(r+1);return p(E([a*360,1,1-k],{cube:l}))})});o.push(new Array(r).fill(0).map((u,m)=>{const a=(m+1)/(r+1);return p(w([a,a,a],{cube:l}))}));const n=o.flat().map(u=>u.slice(1)),e=await fetch(`https://api.color.pizza/v1/?values=${n.join()}&list=bestOf&noduplicates=true`,{method:"GET"}).then(u=>u.json()).then(u=>u.colors),s=n.reduce((u,m)=>{const a=`#${m}`,f=e.find(g=>g.requestedHex===a);return u[a]=(f==null?void 0:f.name)||"unknown",u},{}),c=document.querySelector("[data-ramps]");c.innerHTML=o.map((u,m)=>`<div class="ramp">
+    <script type="module" crossorigin>(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const s of e)if(s.type==="childList")for(const c of s.addedNodes)c.tagName==="LINK"&&c.rel==="modulepreload"&&n(c)}).observe(document,{childList:!0,subtree:!0});function o(e){const s={};return e.integrity&&(s.integrity=e.integrity),e.referrerPolicy&&(s.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?s.credentials="include":e.crossOrigin==="anonymous"?s.credentials="omit":s.credentials="same-origin",s}function n(e){if(e.ep)return;e.ep=!0;const s=o(e);fetch(e.href,s)}})();const C=[[253/255,246/255,237/255],[227/255,36/255,33/255],[243/255,230/255,0],[240/255,142/255,28/255],[22/255,153/255,218/255],[120/255,34/255,170/255],[0,142/255,91/255],[29/255,28/255,28/255]],U=[[253/255,246/255,237/255],[247/255,45/255,41/255],[253/255,203/255,0/255],[250/255,102/255,13/255],[17/255,97/255,170/255],[101/255,57/255,138/255],[70/255,139/255,73/255],[29/255,28/255,28/255]],K=[[1,1,1],[1,0,0],[1,1,0],[1,.5,0],[.163,.373,.6],[.5,0,.5],[0,.66,.2],[.2,.094,0]],W=[[245/255,238/255,226/255],[170/255,14/255,1/255],[224/255,178/255,0/255],[217/255,104/255,5/255],[18/255,107/255,145/255],[103/255,15/255,128/255],[88/255,133/255,30/255],[44/255,37/255,30/255]],Z=[[254/255,250/255,226/255],[237/255,55/255,58/255],[255/255,233/255,111/255],[250/255,102/255,13/255],[33/255,112/255,163/255],[238/255,131/255,154/255],[59/255,155/255,83/255],[24/255,10/255,1/255]],D=[[255/255,255/255,255/255],[218/255,105/255,104/255],[255/255,244/255,122/255],[232/255,154/255,113/255],[73/255,138/255,186/255],[97/255,96/255,178/255],[144/255,191/255,140/255],[8/255,8/255,8/255]],Q=[[240/255,234/255,214/255],[204/255,50/255,53/255],[253/255,222/255,20/255],[230/255,152/255,92/255],[1/255,88/255,140/255],[107/255,51/255,111/255],[51/255,138/255,92/255],[55/255,39/255,23/255]],ee=[[249/255,232/255,209/255],[216/255,43/255,59/255],[231/255,175/255,2/255],[224/255,89/255,31/255],[92/255,123/255,145/255],[77/255,58/255,78/255],[107/255,129/255,53/255],[14/255,8/255,7/255]],te=[[239/255,235/255,225/255],[182/255,53/255,55/255],[253/255,203/255,0/255],[222/255,69/255,20/255],[95/255,157/255,191/255],[83/255,70/255,98/255],[58/255,90/255,66/255],[8/255,9/255,13/255]],re=[[228/255,218/255,197/255],[181/255,65/255,60/255],[229/255,193/255,81/255],[220/255,137/255,61/255],[59/255,143/255,171/255],[121/255,97/255,134/255],[13/255,170/255,114/255],[46/255,44/255,38/255]],ne=[[237/255,213/255,177/255],[167/255,33/255,28/255],[245/255,181/255,18/255],[204/255,93/255,46/255],[71/255,122/255,141/255],[99/255,79/255,93/255],[109/255,143/255,118/255],[44/255,44/255,37/255]],oe=[[221/255,219/255,211/255],[196/255,82/255,69/255],[196/255,167/255,80/255],[200/255,123/255,70/255],[74/255,104/255,167/255],[94/255,89/255,161/255],[86/255,139/255,70/255],[38/255,38/255,38/255]],i=new Map;i.set("itten",{title:"Johannes Itten: Chromatic Circle",year:1961,reference:"farbkreis_extended.png",cube:C});i.set("itten-normalized",{title:"Johannes Itten: Chromatic Circle (Normalized)",year:1961,reference:"Johannes-Itten-The-chromatic-circle-some-exercises-on-the-contrast-of-pure-colors.webp",cube:U});i.set("itten-neutral",{title:"Johannes Itten: Nathan Gossett & Baoquan Chen",year:1961,reference:"itten-ryb.pdf",cube:K});i.set("bezold",{title:"Wilhelm von Bezold: Farbentafel",year:1874,reference:"Bezold_Farbentafel_1874.jpg",cube:W});i.set("boutet",{title:"Claude Boutet: Twelve-color color circles ",year:1708,reference:"Boutet_1708_color_circles.jpg",cube:Z});i.set("hett",{title:"J. A. H. Hett: RGV Color Wheel",year:1908,reference:"RGV_color_wheel_1908",cube:D});i.set("schiffermueller",{title:"Ignaz Schiffermüller: Versuch eines Farbensystems",year:1772,reference:"020_schiffermueller1.jpg",cube:Q});i.set("harris",{title:"Harris: The Natural System of Colours",year:1766,reference:"Moses_Harris_The_Natural_System_of_Colours.jpg",cube:ee});i.set("goethe",{title:"Goethe: Farbenkreis",year:1809,reference:"Goethe_Farbenkreis_zur_Symbolisierung_des_menschlichen_Geistes-_und_Seelenlebens_1809.jpg",cube:te});i.set("munsell",{title:"Munsell Color System",year:1905,reference:"munsell-atlas-11.jpg",cube:re});i.set("hayer",{title:"Charles Hayter:  New Practical Treatise on the Three Primitive Colours",year:1826,reference:"Color_diagram_Charles_Hayter.jpg",cube:ne});i.set("ippsketch",{title:"Ippsketch: Imposter Syndrome",year:2021,reference:"ippsketch.png",cube:oe});i.set("rgb",{title:"James Clerk Maxwell: Inverted RGB",year:1860,reference:"rgb-cube.png",cube:[[1,1,1],[1,0,0],[1,1,0],[1,.5,0],[0,0,1],[1,0,1],[0,1,0],[0,0,0]]});const F=t=>t*t*(3-2*t),I=(t,r,o)=>t+o*(r-t),z=(t,r,o,n,e,s)=>I(I(t,r,e),I(o,n,e),s),S=(t,r,o,n,e,s,c,a,m,u,d)=>I(z(t,r,o,n,m,u),z(e,s,c,a,m,u),d);function X(t,{cube:r=C,easingFn:o=F}={}){const n=o(t[0]),e=o(t[1]),s=o(t[2]),c=r.map(u=>u[0]),a=r.map(u=>u[1]),m=r.map(u=>u[2]);return[S(...c,n,e,s),S(...a,n,e,s),S(...m,n,e,s)]}function se(t){return(t%360+360)%360}function ce(t){let[r,o,n]=t;r=se(r||0);let e=n+o*(n<.5?n:1-n),s=e-(e-n)*2*Math.abs(r/60%2-1),c;switch(Math.floor(r/60)){case 0:c=[e,s,2*n-e];break;case 1:c=[s,e,2*n-e];break;case 2:c=[2*n-e,e,s];break;case 3:c=[2*n-e,s,e];break;case 4:c=[s,2*n-e,e];break;case 5:c=[e,2*n-e,s];break;default:c=[2*n-e,2*n-e,2*n-e]}return c}function v(t,{cube:r=C,easingFn:o=F,invertLightness:n=!0}={}){const e=n?1-t[2]:t[2],s=ce([t[0],t[1],e]);return X(s,{cube:r,easingFn:o})}let l=i.get("itten-normalized").cube;const le=t=>{console.log("Customized RYB_CUBE"),console.log(t.map(r=>r.map(o=>o*255+"/255")))},p=t=>`rgb(${Math.round(t[0]*255)} ${Math.round(t[1]*255)} ${Math.round(t[2]*255)})`,w=t=>{const r=parseInt(t.slice(1),16),o=r>>16&255,n=r>>8&255,e=r&255;return[o/255,n/255,e/255]},y=t=>`#${t.map(r=>Math.round(r*255).toString(16).padStart(2,"0")).join("")}`,f=(t=12,r=1,o=.5,n=s=>s,e=!1)=>new Array(t).fill(0).map((s,c)=>{const a=e?n(1-c/t)*360+120:n((c+1)/t)*360;return p(v([a,r,o],{cube:l}))}),ae=["Zero","I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII","XIII","XIV","XV","XVI","XVII","XVIII","XIX","XX","XXI","XXII","XXIII","XXIV","XXV","XXVI","XXVII","XXVIII","XXIX","XXX"],ue=async(t=18,r=9)=>{const o=new Array(t-1).fill(0).map((a,m)=>{const u=m/(t-1);return new Array(r).fill(0).map((b,_)=>{const k=(_+1)/(r+1);return y(v([u*360,1,1-k],{cube:l}))})});o.push(new Array(r).fill(0).map((a,m)=>{const u=(m+1)/(r+1);return y(X([u,u,u],{cube:l}))}));const n=o.flat().map(a=>a.slice(1)),e=await fetch(`https://api.color.pizza/v1/?values=${n.join()}&list=bestOf&noduplicates=true`,{method:"GET"}).then(a=>a.json()).then(a=>a.colors),s=n.reduce((a,m)=>{const u=`#${m}`,d=e.find(b=>b.requestedHex===u);return a[u]=(d==null?void 0:d.name)||"unknown",a},{}),c=document.querySelector("[data-ramps]");c.innerHTML=o.map((a,m)=>{const u=1+Math.floor(Math.random()*(a.length-2));return`<div class="ramp">
       <h2>${ae[m+1]}</h2>
-      ${u.map(a=>`<div class="ramp__step" style="--c: ${a}; --rnd: ${-1+Math.random()*2}; --rnd2: ${Math.random()};">
+      ${a.map((d,b)=>`<div class="ramp__step ${b===u?"ramp__step--active":""}" style="--c: ${d}; --rnd: ${-1+Math.random()*2}; --rnd2: ${Math.random()};">
             <div class="ramp__inner">
               <div class="ramp__label">
-                <span>${s[a]}</span>
-                <span>${a}</span>
+                <span>${s[d]}</span>
+                <span>${d}</span>
               </div>
             </div>
           </div>`).join("")}
-    </div>`).join("")},ie=(t=4,r=10)=>[h(r,1,.5),...new Array(t-1).fill("").map((o,n)=>h(r*2*(n+1),1,.5+(n+1)/t*.5))],me=t=>t.reduce((o,n,e)=>o+=(o?",":"")+`linear-gradient(90deg, ${e?n.map((s,c)=>`${s} ${c/(n.length-1)*100}% ${(c+1)/(n.length-1)*100}%`).join():n.join()})`,"");function de(t,r){document.documentElement.style.setProperty("--g",r),document.documentElement.style.setProperty("--gs",`${t.length}`),document.documentElement.style.setProperty("--gp",t.map((o,n)=>`0% calc(${n*(100/(t.length-1))}% - 1px)`).join())}const b=t=>t.map((r,o)=>`${r} ${o/t.length*100}% ${(o+1)/t.length*100}%`).join(),H=document.querySelector('[data-c="w"]'),B=document.querySelector('[data-c="r"]'),R=document.querySelector('[data-c="y"]'),L=document.querySelector('[data-c="o"]'),M=document.querySelector('[data-c="b"]'),j=document.querySelector('[data-c="v"]'),q=document.querySelector('[data-c="g"]'),V=document.querySelector('[data-c="0"]');H.parentElement.style.setProperty("--c","var(--white)");B.parentElement.style.setProperty("--c","var(--red)");R.parentElement.style.setProperty("--c","var(--yellow)");L.parentElement.style.setProperty("--c","var(--orange)");M.parentElement.style.setProperty("--c","var(--blue)");j.parentElement.style.setProperty("--c","var(--pink)");q.parentElement.style.setProperty("--c","var(--green)");V.parentElement.style.setProperty("--c","var(--black)");const G=9;let N=null;const I=document.querySelector("[data-rgb]"),P=document.querySelector("[data-ryb]"),Y=I.querySelector("input");let T=null;function x(t,r=!1){const o=p(t),n=w(t,{cube:l}),e=p(n),s=d(t),c=d(n);I.style.setProperty("--c",s),Y.value=o,P.style.setProperty("--c",c);const[u,m,a]=t.map(y=>Math.round(y*255)),[f,g,$]=n.map(y=>Math.round(y*255));I.querySelector(".swatch__value").textContent=`${u} ${m} ${a}`,P.querySelector(".swatch__value").textContent=`${f} ${g} ${$}`,T&&clearTimeout(T),T=setTimeout(()=>{fetch(`https://api.color.pizza/v1/?values=${o.slice(1)}&list=bestOf`,{method:"GET"}).then(y=>y.json()).then(y=>{I.querySelector(".swatch__name").textContent=y.colors[0].name}),fetch(`https://api.color.pizza/v1/?values=${e.slice(1)}&list=bestOf`,{method:"GET"}).then(y=>y.json()).then(y=>{P.querySelector(".swatch__name").textContent=y.colors[0].name})},r?0:1e3)}let pe=[Math.random()*360,.2+Math.random()*.8,.85+Math.random()*.1];Y.addEventListener("input",t=>{const r=t.target;if(!(r instanceof HTMLInputElement))return;const o=r.value;x(C(o))});x(E(pe),!0);const A=()=>{x(C(Y.value));const t=h(36,1,.5,e=>e,!1),r=new Array(36).fill(0).map((e,s)=>`hsl(${s*10}, 100%, 50%)`);document.documentElement.style.setProperty("--gradientHSLHard",b(r)),document.documentElement.style.setProperty("--gradientHSL",r.join()),document.documentElement.style.setProperty("--gradientHard",b(t)),document.documentElement.style.setProperty("--gradient",t.join());for(let e=0;e<=G;e++){const s=h(36,.4,.2+e/G*.7);document.documentElement.style.setProperty(`--gradient-l${e}`,s.join())}for(let e=0;e<36;e++){const s=d(E([(e+1)/36*360,1,.5],{cube:l}));document.documentElement.style.setProperty(`--color-${e+1}`,s)}document.documentElement.style.setProperty("--stops-3",b(h(3,1,.5,e=>e,!0))),document.documentElement.style.setProperty("--stops-6",b(h(6,1,.5,e=>e,!0).filter((e,s)=>s%2))),document.documentElement.style.setProperty("--stops-12",b(h(12,1,.5,e=>e,!0))),document.documentElement.style.setProperty("--stops-24",b(h(24,1,.5,e=>e,!0))),document.documentElement.style.setProperty("--stops-48",b(h(48,1,.5,e=>e,!0))),document.documentElement.style.setProperty("--white",d(l[0])),document.documentElement.style.setProperty("--black",d(l[7])),document.documentElement.style.setProperty("--red",d(l[1])),document.documentElement.style.setProperty("--yellow",d(l[2])),document.documentElement.style.setProperty("--orange",d(l[3])),document.documentElement.style.setProperty("--blue",d(l[4])),document.documentElement.style.setProperty("--pink",d(l[5])),document.documentElement.style.setProperty("--green",d(l[6])),H.value=p(l[0]),B.value=p(l[1]),R.value=p(l[2]),L.value=p(l[3]),M.value=p(l[4]),j.value=p(l[5]),q.value=p(l[6]),V.value=p(l[7]),le(l);const o=ie(4,10),n=me(o);de(o,n),clearTimeout(N),N=setTimeout(()=>{ue()},1e3)};A();const O=[H,B,R,L,M,j,q,V];var J;(J=document.querySelector("[data-edges]"))==null||J.addEventListener("input",t=>{const r=t.target;if(!(r instanceof HTMLInputElement))return;const o=r.value,n=O.find(s=>s.isEqualNode(r));if(!n)return;const e=O.indexOf(n);e>-1&&(l[e]=C(o),A())});const v=document.createElement("select");for(const[t,r]of i){const o=document.createElement("option");o.value=t,o.textContent=r.title,v.appendChild(o)}v.classList.add("select");document.querySelector("body").appendChild(v);v.addEventListener("change",t=>{const r=t.target;if(!(r instanceof HTMLSelectElement))return;const o=r.value,n=i.get(o);n&&(l=n.cube,A())});
+    </div>`}).join("")},ie=(t=4,r=10)=>[f(r,1,.5),...new Array(t-1).fill("").map((o,n)=>f(r*2*(n+1),1,.5+(n+1)/t*.5))],me=t=>t.reduce((o,n,e)=>o+=(o?",":"")+`linear-gradient(90deg, ${e?n.map((s,c)=>`${s} ${c/(n.length-1)*100}% ${(c+1)/(n.length-1)*100}%`).join():n.join()})`,"");function de(t,r){document.documentElement.style.setProperty("--g",r),document.documentElement.style.setProperty("--gs",`${t.length}`),document.documentElement.style.setProperty("--gp",t.map((o,n)=>`0% calc(${n*(100/(t.length-1))}% - 1px)`).join())}const g=t=>t.map((r,o)=>`${r} ${o/t.length*100}% ${(o+1)/t.length*100}%`).join(),H=document.querySelector('[data-c="w"]'),B=document.querySelector('[data-c="r"]'),R=document.querySelector('[data-c="y"]'),M=document.querySelector('[data-c="o"]'),L=document.querySelector('[data-c="b"]'),j=document.querySelector('[data-c="v"]'),q=document.querySelector('[data-c="g"]'),V=document.querySelector('[data-c="0"]');H.parentElement.style.setProperty("--c","var(--white)");B.parentElement.style.setProperty("--c","var(--red)");R.parentElement.style.setProperty("--c","var(--yellow)");M.parentElement.style.setProperty("--c","var(--orange)");L.parentElement.style.setProperty("--c","var(--blue)");j.parentElement.style.setProperty("--c","var(--pink)");q.parentElement.style.setProperty("--c","var(--green)");V.parentElement.style.setProperty("--c","var(--black)");const G=9;let N=null;const E=document.querySelector("[data-rgb]"),P=document.querySelector("[data-ryb]"),x=E.querySelector("input");let T=null;function Y(t,r=!1){const o=y(t),n=X(t,{cube:l}),e=y(n),s=p(t),c=p(n);E.style.setProperty("--c",s),x.value=o,P.style.setProperty("--c",c);const[a,m,u]=t.map(h=>Math.round(h*255)),[d,b,_]=n.map(h=>Math.round(h*255));E.querySelector(".swatch__value").textContent=`${a} ${m} ${u}`,P.querySelector(".swatch__value").textContent=`${d} ${b} ${_}`,T&&clearTimeout(T),T=setTimeout(()=>{fetch(`https://api.color.pizza/v1/?values=${o.slice(1)}&list=bestOf`,{method:"GET"}).then(h=>h.json()).then(h=>{E.querySelector(".swatch__name").textContent=h.colors[0].name}),fetch(`https://api.color.pizza/v1/?values=${e.slice(1)}&list=bestOf`,{method:"GET"}).then(h=>h.json()).then(h=>{P.querySelector(".swatch__name").textContent=h.colors[0].name})},r?0:1e3)}let pe=[Math.random()*360,.2+Math.random()*.8,.85+Math.random()*.1];x.addEventListener("input",t=>{const r=t.target;if(!(r instanceof HTMLInputElement))return;const o=r.value;Y(w(o))});Y(v(pe),!0);const A=()=>{Y(w(x.value));const t=f(36,1,.5,e=>e,!1),r=new Array(36).fill(0).map((e,s)=>`hsl(${s*10}, 100%, 50%)`);document.documentElement.style.setProperty("--gradientHSLHard",g(r)),document.documentElement.style.setProperty("--gradientHSL",r.join()),document.documentElement.style.setProperty("--gradientHard",g(t)),document.documentElement.style.setProperty("--gradient",t.join());for(let e=0;e<=G;e++){const s=f(36,.4,.2+e/G*.7);document.documentElement.style.setProperty(`--gradient-l${e}`,s.join())}for(let e=0;e<36;e++){const s=p(v([(e+1)/36*360,1,.5],{cube:l}));document.documentElement.style.setProperty(`--color-${e+1}`,s)}document.documentElement.style.setProperty("--stops-3",g(f(3,1,.5,e=>e,!0))),document.documentElement.style.setProperty("--stops-6",g(f(6,1,.5,e=>e,!0).filter((e,s)=>s%2))),document.documentElement.style.setProperty("--stops-12",g(f(12,1,.5,e=>e,!0))),document.documentElement.style.setProperty("--stops-24",g(f(24,1,.5,e=>e,!0))),document.documentElement.style.setProperty("--stops-48",g(f(48,1,.5,e=>e,!0))),document.documentElement.style.setProperty("--white",p(l[0])),document.documentElement.style.setProperty("--black",p(l[7])),document.documentElement.style.setProperty("--red",p(l[1])),document.documentElement.style.setProperty("--yellow",p(l[2])),document.documentElement.style.setProperty("--orange",p(l[3])),document.documentElement.style.setProperty("--blue",p(l[4])),document.documentElement.style.setProperty("--pink",p(l[5])),document.documentElement.style.setProperty("--green",p(l[6])),H.value=y(l[0]),B.value=y(l[1]),R.value=y(l[2]),M.value=y(l[3]),L.value=y(l[4]),j.value=y(l[5]),q.value=y(l[6]),V.value=y(l[7]),le(l);const o=ie(4,10),n=me(o);de(o,n),clearTimeout(N),N=setTimeout(()=>{ue()},1e3)};A();const O=[H,B,R,M,L,j,q,V];var J;(J=document.querySelector("[data-edges]"))==null||J.addEventListener("input",t=>{const r=t.target;if(!(r instanceof HTMLInputElement))return;const o=r.value,n=O.find(s=>s.isEqualNode(r));if(!n)return;const e=O.indexOf(n);e>-1&&(l[e]=w(o),A())});const $=document.createElement("select");for(const[t,r]of i){const o=document.createElement("option");o.value=t,o.textContent=r.title,$.appendChild(o)}$.classList.add("select");document.querySelector("body").appendChild($);$.addEventListener("change",t=>{const r=t.target;if(!(r instanceof HTMLSelectElement))return;const o=r.value,n=i.get(o);n&&(l=n.cube,A())});
 </script>
-    <style rel="stylesheet" crossorigin>:root{--white: #fff;--black: #000;background:var(--white);color:var(--black);font-size:calc(.65em + 1vmin);--size-illu: 16em }body,html,:root{margin:0;padding:0;font-family:Apple Garamond Light,sans-serif;-webkit-font-smoothing:subpixel-antialiased}::selection{background:var(--yellow);color:color-mix(in lab,var(--black) 50%,var(--yellow))}a:link{color:var(--blue)}a:hover{text-decoration:none}a:visited{color:var(--pink)}.nav{position:fixed;width:5vw;top:0;bottom:0;right:0;background:linear-gradient(0deg,var(--gradient)),linear-gradient(0deg,var(--gradientHard));background-size:calc(1px + 50%) 100%,50% 100%;background-repeat:no-repeat;background-position:0 0,100% 0;box-shadow:0 0 0 .15em var(--white)}.main{position:relative}.block{display:flex;gap:4rem;padding:6vmin 6rem}.block--vertical{flex-direction:column;gap:0rem}.block--vertical .block__text p{max-width:70ch}.block__text{font-size:.8em;line-height:1.4}.block__text h1,.block__text h2{margin-left:-.1ex}.block__text h1+p,.block__text h2+p{margin-top:1.5em}.block__text p{max-width:50ch}.intro{flex-direction:column;width:max-content;margin-top:20vmin;margin-left:calc(var(--size-illu) + 4em);align-items:center}.intro p{max-width:35ch}.intro-text{font-size:.8em;line-height:1.4}.intro-text h1+p{margin-top:0;max-width:35ch}h1,h2,h3{font-family:Apple Garamond Light,sans-serif;font-weight:100;line-height:1}h1{font-size:5rem;margin:0;margin-bottom:.25ex}h2{font-size:2.5rem;margin:.5em 0 0;margin-bottom:.25ex}.c{position:relative;width:var(--size-illu);flex:0 0 var(--size-illu);aspect-ratio:1;background:conic-gradient(from -3.75deg at 50% 50%,var(--stops-48));border-radius:50%;box-shadow:0 0 0 .15em var(--white)}.c:before{content:"";position:absolute;background:var(--white);top:-.2em;right:-.2em;bottom:-.2em;left:-.2em;border-radius:50%;transition:.4s transform cubic-bezier(.3,.7,0,1);transform:scale(1)}.c:hover:before{transform:scale(.76)}.c .c{margin-left:0;position:absolute;top:1.5em;right:1.5em;bottom:1.5em;left:1.5em;width:auto;background:conic-gradient(from -7.5deg at 50% 50%,var(--stops-24))}.c .c .c{background:conic-gradient(from -15deg at 50% 50%,var(--stops-12))}.c .c .c:before{display:none;content:"";position:absolute;background:var(--w);top:1.5em;right:1.5em;bottom:1.5em;left:1.5em;border-radius:50%}.c .c .c .c{background:conic-gradient(var(--stops-6))}.c .c .c .c:before{display:none}.c .c .c .c .c{background:conic-gradient(from -60deg at 50% 50%,var(--stops-3));-webkit-clip-path:polygon(50% 0%,6% 75%,94% 75%);clip-path:polygon(50% 0%,6% 75%,94% 75%);top:0;right:0;bottom:0;left:0}.edges{--w: calc(var(--size-illu) - 4em);--padding-top: 3%;--padding-left: 33%;--padding-right: 7%;--height: 60%;--width: 60%;--padding-top-front: 30%;--padding-left-front: 6%;margin:2em;position:relative;width:var(--w);height:var(--w);flex:0 0 var(--w)}.edges input{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;opacity:0;cursor:pointer}.edges span{display:block;background:var(--c);background:var(--white);width:.5rem;height:.5rem;border-radius:50%;box-shadow:0 0 0 .05em var(--black),0 0 0 .1em var(--white),0 0 0 .2em var(--c),0 0 0 .3em var(--white);transition:.3s box-shadow cubic-bezier(.3,.7,0,1) .15s,.2s background linear}.edges label{position:absolute;transform:translate(-50%,-50%);cursor:pointer}.edges label:hover span{background:var(--c);box-shadow:0 0 0 .1em var(--black),0 0 0 .1em var(--white),0 0 0 .2em var(--white),0 0 0 .3em var(--c)}.edges b{position:absolute;left:100%;top:50%;transform:translate(.2rem,.2rem);line-height:1;font-size:.8em}.edges .g{left:var(--padding-left);top:var(--padding-top)}.edges .b{left:var(--padding-left);top:calc(var(--padding-top) + var(--height))}.edges .v{left:calc(var(--padding-left) + var(--width));top:calc(var(--padding-top) + var(--height))}.edges .black{left:calc(var(--padding-left) + var(--width));top:var(--padding-top)}.edges .y{left:var(--padding-left-front);top:var(--padding-top-front)}.edges .w{left:var(--padding-left-front);top:calc(var(--padding-top-front) + var(--height))}.edges .r{left:calc(var(--padding-left-front) + var(--width));top:calc(var(--padding-top-front) + var(--height))}.edges .o{left:calc(var(--padding-left-front) + var(--width));top:var(--padding-top-front)}.cube{display:block}.cube g{stroke:currentColor;stroke-width:.5;fill:none}.cube__front{fill:var(--white)}.cube__coverline{fill:none;stroke:var(--black);stroke-dasharray:1.5 1.5}.gradient{position:relative;width:var(--size-illu);flex:0 0 var(--size-illu);height:calc(var(--size-illu) / 2);background-image:var(--g);background-size:100% calc(100% / var(--gs) + 1px);background-position:var(--gp);background-repeat:no-repeat}.hsl-wheel{--w: calc(var(--size-illu) - 2em);margin-top:2em;margin-bottom:2em;margin-right:2em;position:relative;width:var(--w);height:var(--w);flex:0 0 var(--w)}.hsl-wheel:before{content:"";position:absolute;top:.37em;right:.37em;bottom:.37em;left:.37em;border-radius:50%;box-shadow:inset 0 0 0 .03em var(--black)}.hsl-wheel__rim{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;transform:scale(calc(.2 + var(--i) * .6))}.hsl-wheel__rim--0{background:conic-gradient(var(--gradient-l0))}.hsl-wheel__rim--0:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--white);border-radius:50%;transform:scale(.5)}.hsl-wheel__rim--1{background:conic-gradient(var(--gradient-l1))}.hsl-wheel__rim--2{background:conic-gradient(var(--gradient-l2))}.hsl-wheel__rim--3{background:conic-gradient(var(--gradient-l3))}.hsl-wheel__rim--4{background:conic-gradient(var(--gradient-l4))}.hsl-wheel__rim--5{background:conic-gradient(var(--gradient-l5))}.hsl-wheel__rim--6{background:conic-gradient(var(--gradient-l6))}.hsl-wheel__rim--7{background:conic-gradient(var(--gradient-l7))}.hsl-wheel__rim--8{background:conic-gradient(var(--gradient-l8))}.hsl-wheel__rim--9{background:conic-gradient(var(--gradient-l9))}.hsl-wheel__label{position:absolute;width:100%;top:50%;left:50%;transform:translate(-50%,-50%) rotate(calc(var(--i) * 360deg - 90deg));font-size:.6em;line-height:1}.hsl-wheel__label b{position:absolute;left:100%;top:50%;transform:translateY(-50%) translate(1em);font-style:normal}.hsl-wheel__label b:after{content:"";position:absolute;height:1px;width:.5em;background:var(--black);top:50%;right:100%;transform:translate(-.5em);display:none}.hsl-wheel__label b:before{content:"";position:absolute;width:.8em;height:.8em;background:var(--c);border-radius:50%;top:50%;right:100%;transform:translate(-1.25em) translateY(-50%);box-shadow:0 0 0 .05em var(--c),0 0 0 .2em var(--white),inset 0 0 0 .1em var(--white)}.ramp-list{display:flex;gap:10%;flex-wrap:wrap;max-width:40rem}.ramp{flex:0 0 15%}.ramp__step{position:relative;transform:rotate(calc(var(--rnd) * 5deg)) translate(calc(var(--rnd) * .5em));height:calc(.5rem + var(--rnd2) * 1.5rem);transition:.4s height cubic-bezier(.3,.7,0,1) .1s}.ramp__step+.ramp__step{margin-top:-.25em}.ramp__inner{position:absolute;height:min(100%,6.5rem);width:100%;background:var(--c);box-shadow:0 0 0 .05em var(--white);overflow:hidden;transform:rotate(0) scale(.8);transition:.4s transform cubic-bezier(.3,.7,0,1) .35s}.ramp__label{position:absolute;top:6.5rem;left:1px;right:1px;transform:translateY(0);font-size:.6em;background:var(--white);padding:.25em .5em;transition:.2s transform ease-out .4s}.ramp__label span{display:block}.ramp__label span+span{opacity:0;transition:.2s opacity ease-out .6s}.ramp__step:hover{height:7rem}.ramp__step:hover .ramp__label{transform:translateY(calc(-100% - 1px))}.ramp__step:hover .ramp__label span{opacity:1}.ramp__step:hover .ramp__inner{transform:rotate(calc(var(--rnd) * -5deg)) scale(1)}.ramp-list h2{text-align:center;margin-bottom:.5em;margin-top:1em}.select{position:fixed;bottom:2rem;right:5rem;background:var(--white);color:var(--black);font:inherit;padding:.5em 1em}.converter{--w: calc(var(--size-illu) - 4em);width:var(--w);margin:2em;position:relative;aspect-ratio:1}.swatch{position:absolute;display:block;box-shadow:0 0 0 .05rem var(--black);padding:.3rem;padding-bottom:0;width:6rem;background:var(--white)}label.swatch{cursor:pointer}.swatch--ryb{top:0;right:0}.swatch--rgb{left:2em;bottom:0;background:#fff}.swatch__color{width:100%;aspect-ratio:1;background:var(--c, var(--black))}.swatch__input{position:absolute;top:0;opacity:0}.swatch__value,.swatch__name{display:block;font-size:.8em;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.swatch__name{padding-bottom:.25rem}.swatch__value{font-size:1rem}.swatch__label{padding:.25em 0 0}.smoothwheel{width:60vw;aspect-ratio:1;background:radial-gradient(closest-side,var(--black),rgba(0,0,0,0),var(--white) 80%),conic-gradient(from 0deg,var(--gradient));display:none}
+    <style rel="stylesheet" crossorigin>:root{--white: #fff;--black: #000;background:var(--white);color:var(--black);font-size:calc(.65em + 1vmin);--size-illu: 16em }body,html,:root{margin:0;padding:0;font-family:Apple Garamond Light,sans-serif;-webkit-font-smoothing:subpixel-antialiased}::selection{background:var(--yellow);color:color-mix(in lab,var(--black) 50%,var(--yellow))}a:link{color:var(--blue)}a:hover{text-decoration:none}a:visited{color:var(--pink)}.nav{position:fixed;width:5vw;top:0;bottom:0;right:0;background:linear-gradient(0deg,var(--gradient)),linear-gradient(0deg,var(--gradientHard));background-size:calc(1px + 50%) 100%,50% 100%;background-repeat:no-repeat;background-position:0 0,100% 0;box-shadow:0 0 0 .15em var(--white)}.main{position:relative}.block{display:flex;gap:4rem;padding:6vmin 6rem}.block--vertical{flex-direction:column;gap:0rem}.block--vertical .block__text p{max-width:70ch}.block__text{font-size:.8em;line-height:1.4}.block__text h1,.block__text h2{margin-left:-.1ex}.block__text h1+p,.block__text h2+p{margin-top:1.5em}.block__text p{max-width:50ch}.intro{flex-direction:column;width:max-content;margin-top:20vmin;margin-left:calc(var(--size-illu) + 4em);align-items:center}.intro p{max-width:35ch}.intro-text{font-size:.8em;line-height:1.4}.intro-text h1+p{margin-top:0;max-width:35ch}h1,h2,h3{font-family:Apple Garamond Light,sans-serif;font-weight:100;line-height:1}h1{font-size:5rem;margin:0;margin-bottom:.25ex}h2{font-size:2.5rem;margin:.5em 0 0;margin-bottom:.25ex}.c{position:relative;width:var(--size-illu);flex:0 0 var(--size-illu);aspect-ratio:1;background:conic-gradient(from -3.75deg at 50% 50%,var(--stops-48));border-radius:50%;box-shadow:0 0 0 .15em var(--white)}.c:before{content:"";position:absolute;background:var(--white);top:-.2em;right:-.2em;bottom:-.2em;left:-.2em;border-radius:50%;transition:.4s transform cubic-bezier(.3,.7,0,1);transform:scale(1)}.c:hover:before{transform:scale(.76)}.c .c{margin-left:0;position:absolute;top:1.5em;right:1.5em;bottom:1.5em;left:1.5em;width:auto;background:conic-gradient(from -7.5deg at 50% 50%,var(--stops-24))}.c .c .c{background:conic-gradient(from -15deg at 50% 50%,var(--stops-12))}.c .c .c:before{display:none;content:"";position:absolute;background:var(--w);top:1.5em;right:1.5em;bottom:1.5em;left:1.5em;border-radius:50%}.c .c .c .c{background:conic-gradient(var(--stops-6))}.c .c .c .c:before{display:none}.c .c .c .c .c{background:conic-gradient(from -60deg at 50% 50%,var(--stops-3));-webkit-clip-path:polygon(50% 0%,6% 75%,94% 75%);clip-path:polygon(50% 0%,6% 75%,94% 75%);top:0;right:0;bottom:0;left:0}.edges{--w: calc(var(--size-illu) - 4em);--padding-top: 3%;--padding-left: 33%;--padding-right: 7%;--height: 60%;--width: 60%;--padding-top-front: 30%;--padding-left-front: 6%;margin:2em;position:relative;width:var(--w);height:var(--w);flex:0 0 var(--w)}.edges input{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;opacity:0;cursor:pointer}.edges span{display:block;background:var(--c);background:var(--white);width:.5rem;height:.5rem;border-radius:50%;box-shadow:0 0 0 .05em var(--black),0 0 0 .1em var(--white),0 0 0 .2em var(--c),0 0 0 .3em var(--white);transition:.3s box-shadow cubic-bezier(.3,.7,0,1) .15s,.2s background linear}.edges label{position:absolute;transform:translate(-50%,-50%);cursor:pointer}.edges label:hover span{background:var(--c);box-shadow:0 0 0 .1em var(--black),0 0 0 .1em var(--white),0 0 0 .2em var(--white),0 0 0 .3em var(--c)}.edges b{position:absolute;left:100%;top:50%;transform:translate(.2rem,.2rem);line-height:1;font-size:.8em}.edges .g{left:var(--padding-left);top:var(--padding-top)}.edges .b{left:var(--padding-left);top:calc(var(--padding-top) + var(--height))}.edges .v{left:calc(var(--padding-left) + var(--width));top:calc(var(--padding-top) + var(--height))}.edges .black{left:calc(var(--padding-left) + var(--width));top:var(--padding-top)}.edges .y{left:var(--padding-left-front);top:var(--padding-top-front)}.edges .w{left:var(--padding-left-front);top:calc(var(--padding-top-front) + var(--height))}.edges .r{left:calc(var(--padding-left-front) + var(--width));top:calc(var(--padding-top-front) + var(--height))}.edges .o{left:calc(var(--padding-left-front) + var(--width));top:var(--padding-top-front)}.cube{display:block}.cube g{stroke:currentColor;stroke-width:.5;fill:none}.cube__front{fill:var(--white)}.cube__coverline{fill:none;stroke:var(--black);stroke-dasharray:1.5 1.5}.gradient{position:relative;width:var(--size-illu);flex:0 0 var(--size-illu);height:calc(var(--size-illu) / 2);background-image:var(--g);background-size:100% calc(100% / var(--gs) + 1px);background-position:var(--gp);background-repeat:no-repeat}.hsl-wheel{--w: calc(var(--size-illu) - 2em);margin-top:2em;margin-bottom:2em;margin-right:2em;position:relative;width:var(--w);height:var(--w);flex:0 0 var(--w)}.hsl-wheel:before{content:"";position:absolute;top:.37em;right:.37em;bottom:.37em;left:.37em;border-radius:50%;box-shadow:inset 0 0 0 .03em var(--black)}.hsl-wheel__rim{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;transform:scale(calc(.2 + var(--i) * .6))}.hsl-wheel__rim--0{background:conic-gradient(var(--gradient-l0))}.hsl-wheel__rim--0:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--white);border-radius:50%;transform:scale(.5)}.hsl-wheel__rim--1{background:conic-gradient(var(--gradient-l1))}.hsl-wheel__rim--2{background:conic-gradient(var(--gradient-l2))}.hsl-wheel__rim--3{background:conic-gradient(var(--gradient-l3))}.hsl-wheel__rim--4{background:conic-gradient(var(--gradient-l4))}.hsl-wheel__rim--5{background:conic-gradient(var(--gradient-l5))}.hsl-wheel__rim--6{background:conic-gradient(var(--gradient-l6))}.hsl-wheel__rim--7{background:conic-gradient(var(--gradient-l7))}.hsl-wheel__rim--8{background:conic-gradient(var(--gradient-l8))}.hsl-wheel__rim--9{background:conic-gradient(var(--gradient-l9))}.hsl-wheel__label{position:absolute;width:100%;top:50%;left:50%;transform:translate(-50%,-50%) rotate(calc(var(--i) * 360deg - 90deg));font-size:.6em;line-height:1}.hsl-wheel__label b{position:absolute;left:100%;top:50%;transform:translateY(-50%) translate(1em);font-style:normal}.hsl-wheel__label b:after{content:"";position:absolute;height:1px;width:.5em;background:var(--black);top:50%;right:100%;transform:translate(-.5em);display:none}.hsl-wheel__label b:before{content:"";position:absolute;width:.8em;height:.8em;background:var(--c);border-radius:50%;top:50%;right:100%;transform:translate(-1.25em) translateY(-50%);box-shadow:0 0 0 .05em var(--c),0 0 0 .2em var(--white),inset 0 0 0 .1em var(--white)}.ramp-list{display:flex;gap:10%;flex-wrap:wrap;max-width:40rem}.ramp{flex:0 0 15%}.ramp__step{position:relative;transform:rotate(calc(var(--rnd) * 5deg)) translate(calc(var(--rnd) * .5em));height:calc(.5rem + var(--rnd2) * 1.5rem);transition:.4s height cubic-bezier(.3,.7,0,1) .1s}.ramp__step+.ramp__step{margin-top:-.25em}.ramp__inner{position:absolute;height:min(100%,6.5rem);width:100%;background:var(--c);box-shadow:0 0 0 .05em var(--white);overflow:hidden;transform:rotate(0) scale(.8);transition:.4s transform cubic-bezier(.3,.7,0,1) .35s}.ramp__label{position:absolute;top:6.5rem;left:1px;right:1px;transform:translateY(0);font-size:.6em;background:var(--white);padding:.25em .5em;transition:.2s transform ease-out .4s}.ramp__label span{display:block}.ramp__label span+span{opacity:0;transition:.2s opacity ease-out .6s}.ramp__step--active,.ramp__step:hover{height:7rem}.ramp__step--active .ramp__label,.ramp__step:hover .ramp__label{transform:translateY(calc(-100% - 1px))}.ramp__step--active .ramp__label span,.ramp__step:hover .ramp__label span{opacity:1}.ramp__step--active .ramp__inner,.ramp__step:hover .ramp__inner{transform:rotate(calc(var(--rnd) * -5deg)) scale(1)}.ramp:has(:hover) .ramp__step--active:not(:hover){height:calc(.5rem + var(--rnd2) * 1.5rem)}.ramp:has(:hover) .ramp__step--active:not(:hover) .ramp__label{transform:translateY(0)}.ramp:has(:hover) .ramp__step--active:not(:hover) .ramp__label span{opacity:0}.ramp:has(:hover) .ramp__step--active:not(:hover) .ramp__inner{transform:rotate(0) scale(.8)}.ramp-list h2{text-align:center;margin-bottom:.5em;margin-top:1em}.select{position:fixed;bottom:2rem;right:5rem;background:var(--white);color:var(--black);font:inherit;padding:.5em 1em}.converter{--w: calc(var(--size-illu) - 4em);width:var(--w);margin:2em;position:relative;aspect-ratio:1}.swatch{position:absolute;display:block;box-shadow:0 0 0 .05rem var(--black);padding:.3rem;padding-bottom:0;width:6rem;background:var(--white)}label.swatch{cursor:pointer}.swatch--ryb{top:0;right:0}.swatch--rgb{left:2em;bottom:0;background:#fff}.swatch__color{width:100%;aspect-ratio:1;background:var(--c, var(--black))}.swatch__input{position:absolute;top:0;opacity:0}.swatch__value,.swatch__name{display:block;font-size:.8em;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.swatch__name{padding-bottom:.25rem}.swatch__value{font-size:1rem}.swatch__label{padding:.25em 0 0}.smoothwheel{width:60vw;aspect-ratio:1;background:radial-gradient(closest-side,var(--black),rgba(0,0,0,0),var(--white) 80%),conic-gradient(from 0deg,var(--gradient));display:none}
 </style>
   </head>
   <body>
diff --git a/src/demo.css b/src/demo.css
index cbaae41..fc68993 100644
--- a/src/demo.css
+++ b/src/demo.css
@@ -473,9 +473,7 @@ h2 {
   position: relative;
   transform: rotate(calc(var(--rnd) * 5deg))
     translateX(calc(var(--rnd) * 0.5em));
-
   height: calc(0.5rem + var(--rnd2) * 1.5rem);
-
   transition: 400ms height cubic-bezier(0.3, 0.7, 0, 1) 100ms;
 }
 
@@ -515,6 +513,7 @@ h2 {
   }
 }
 
+.ramp__step--active,
 .ramp__step:hover {
   height: 7rem;
   .ramp__label {
@@ -528,6 +527,20 @@ h2 {
   }
 }
 
+.ramp:has(:hover) .ramp__step--active:not(:hover) {
+  height: calc(0.5rem + var(--rnd2) * 1.5rem);
+
+  .ramp__label {
+    transform: translateY(0);
+    span {
+      opacity: 0;
+    }
+  }
+  .ramp__inner {
+    transform: rotate(0) scale(0.8);
+  }
+}
+
 .ramp-list h2 {
   text-align: center;
   margin-bottom: 0.5em;
diff --git a/src/demo.ts b/src/demo.ts
index 834ce97..92f6a2a 100644
--- a/src/demo.ts
+++ b/src/demo.ts
@@ -140,11 +140,13 @@ const createRamps = async (amount = 18, stepsPerRamp = 9) => {
   const $wrapper = document.querySelector("[data-ramps]") as HTMLElement;
   $wrapper.innerHTML = ramps
     .map((ramp, i) => {
+      const activeIndex = 1 + Math.floor(Math.random() * (ramp.length - 2));
       return `<div class="ramp">
       <h2>${romanNumerals[i + 1]}</h2>
       ${ramp
-        .map((hex) => {
-          return `<div class="ramp__step" style="--c: ${hex}; --rnd: ${-1 + Math.random() * 2}; --rnd2: ${Math.random()};">
+        .map((hex, j) => {
+          const activeClass = j === activeIndex ? "ramp__step--active" : "";
+          return `<div class="ramp__step ${activeClass}" style="--c: ${hex}; --rnd: ${-1 + Math.random() * 2}; --rnd2: ${Math.random()};">
             <div class="ramp__inner">
               <div class="ramp__label">
                 <span>${namesForHexes[hex]}</span>