@font-face{font-family:Paper Mono;src:url(https://cdn.jsdelivr.net/gh/paper-design/paper-mono@0.300/fonts/webfonts/PaperMono%5Bwght%5D.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap}:root{--live: oklch(.72 .16 142);--bg: color-mix(in oklch, oklch(from var(--live) l c calc(h + 180) ) 10%, oklch(.1 0 0));--line: #fff;--onBg: #fff;--mono: "Paper Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;--sans: "Newsreader", Georgia, "Times New Roman", serif;--fs-small: 1rem;--fs-body: 1.2rem;color-scheme:dark}@media(prefers-color-scheme:light){:root{--bg: color-mix(in oklch, oklch(from var(--live) l c calc(h + 180) ) 7%, oklch(1 0 0));--line: #202126;--onBg: oklch(0 0 0);color-scheme:light}}::selection{background:var(--live);color:var(--live-ink, var(--bg))}html{scrollbar-color:var(--live) transparent;scrollbar-width:thin}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--live);border:3px solid var(--bg);border-radius:0}::-webkit-scrollbar-thumb:hover{background:var(--onBg)}html,body{margin:0;min-height:100%;overflow-x:clip}body{background:var(--bg);color:var(--onBg);font-family:var(--sans);font-size:var(--fs-body);font-weight:200;line-height:1.6;-webkit-font-smoothing:antialiased}#app{max-width:65rem;padding:2rem;margin:0 auto}.masthead{position:relative;text-align:center;margin:0}.version{position:absolute;top:5vw;left:50%;z-index:1;font-family:var(--mono);font-size:1.1vw;transform:translate(35vw) translate(-50%);font-weight:900;color:var(--bg);display:none}.wordmark{--y-inset: calc(clamp(1.5rem, 4vw, 4rem)*-1) ;width:100vw;margin:var(--y-inset) 0 0 calc(50% - 50vw);line-height:0;color:var(--live)}.wordmark--footer{margin:0 0 var(--y-inset) calc(50% - 50vw)}.wordmark--footer .wordmark-svg{transform:scaleY(-1)}.wordmark--footer .wordmark-svg .wm-text{transform:scaleY(-1) translateY(.25rem);transform-origin:center}.wordmark-svg{display:block;width:100%;height:auto}.wm-text{font-family:var(--sans);font-weight:900;font-size:252px;letter-spacing:-.05em}.tagline{font-size:min(2em,2vw);line-height:1.3;margin:.1em 0 5rem;font-weight:200}.stage{display:grid;grid-template-columns:minmax(3rem,1fr) minmax(0,1.8fr);gap:3vw;align-items:start}@media(max-width:760px){.stage{grid-template-columns:1fr}}.stage__viz{padding:.4rem}.explain{margin:.8rem 0 0;max-width:55ch;color:var(--onBg)}.explain code{font-family:var(--mono);font-size:.85em;color:var(--onBg);font-weight:400}.brag{list-style:none;margin:3rem 0 0;padding:0;max-width:55ch;display:grid;grid-template-columns:repeat(2,1fr);gap:3rem}.brag li{display:flex;flex-direction:column;gap:.15rem}.brag b{font-family:var(--sans);font-size:3em;font-weight:500;font-variant-numeric:tabular-nums;line-height:1;color:var(--live)}.brag span{color:var(--onBg);line-height:1.35;max-width:24ch}.explain a{color:var(--onBg);text-decoration-thickness:1px;text-underline-offset:2px}.code{display:block;margin:.6rem 0 0;border-radius:0;font-family:var(--mono);font-size:.6em;line-height:1.55;color:var(--onBg);white-space:pre;overflow-x:auto;-moz-tab-size:2;tab-size:2}.slice-host{display:block;margin-bottom:3rem}.slice{display:block;width:100%;height:auto;max-height:76vh;border-radius:0;overflow:visible}.grid{stroke:var(--line);stroke-width:1}.env{fill:none;stroke-linejoin:round;stroke-linecap:round}.env--lut{stroke:var(--onBg);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.9}.cusp-mark{fill:none;stroke:var(--onBg);stroke-width:1.5}.cusp text{font-family:var(--mono);font-size:10px;fill:var(--onBg);paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round}.guide{stroke:var(--line);stroke-width:1;stroke-dasharray:2 2}.ray{stroke:var(--onBg);stroke-width:1.25;stroke-dasharray:5 3;opacity:.5}.dot-halo{fill:var(--line)}.dot{fill:var(--onBg);stroke:var(--bg);stroke-width:1.5}.dot-pct{fill:none;stroke:var(--onBg);stroke-width:1.5}.dot-label,.dot-pct-label,.dot-okhsl-label{font-family:var(--mono);font-size:9px;fill:var(--onBg);paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round}.dot-okhsl{fill:none;stroke:var(--onBg);stroke-width:1.5}.panel{display:flex;flex-direction:column;gap:1.4rem}.swatch{display:flex;gap:1px;margin-block:1rem 2rem}.swatch__item{flex:1;display:flex;flex-direction:column}.swatch__cell{position:relative;aspect-ratio:2.5;background:var(--live)}.swatch__flag{position:absolute;top:0;right:0;display:grid;place-items:center;width:1.2rem;height:1.2rem;font-family:var(--mono);font-size:var(--fs-small);font-weight:700;line-height:1;background:var(--live);color:var(--live-ink);cursor:help}.swatch__label{display:flex;flex-direction:column;gap:.1rem;padding-top:.4rem}.swatch__label b{font-family:var(--mono);font-size:var(--fs-small);font-weight:500;letter-spacing:.08em;color:var(--onBg)}.readout{padding:0}.readout__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:0 0 .8rem}.readout__grid div{display:flex;gap:.35rem}.readout__grid dt{color:var(--onBg);font-size:var(--fs-small);letter-spacing:.1em}.readout__grid dd{margin:.1rem 0 0;font-family:var(--mono);font-size:var(--fs-body);font-weight:500;font-variant-numeric:tabular-nums}.readout__map{font-size:var(--fs-small);color:var(--onBg);display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .6rem;padding-top:.6rem;border-top:1px solid var(--line)}.readout__map b{color:var(--onBg);font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}.readout__cusp{color:var(--onBg)}.readout__map.is-over b{color:#ffac97;color:oklch(.82 .18 35)}.controls{display:flex;flex-direction:column;gap:1.05rem}.ctrl{display:block}.ctrl__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem}.ctrl__name{color:var(--onBg);font-size:var(--fs-small);letter-spacing:.1em}.ctrl__val{font-family:var(--mono);font-size:var(--fs-body);font-weight:500;font-variant-numeric:tabular-nums}.ctrl--range input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1px;border-radius:0;background:linear-gradient(to right,var(--live) calc(var(--rel, 0) * 100%),var(--line) calc(var(--rel, 0) * 100%));outline:none;cursor:pointer;transition:background-color .2s ease}.ctrl--range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;background:var(--onBg);border:3px solid var(--bg);box-shadow:0 0 0 1.5px var(--live);cursor:grab;transition:transform .12s ease;transform:rotate(-45deg)}.ctrl--range input[type=range]::-webkit-slider-thumb:active{transform:scale(1.2);cursor:grabbing}.ctrl--range input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--onBg);border:3px solid var(--bg);box-shadow:0 0 0 1.5px var(--live);cursor:grab}.ctrl--select{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem}.ctrl--select .ctrl__name{white-space:nowrap}.ctrl--select:after{content:"▾";position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--onBg);font-size:.8em;pointer-events:none}.ctrl--select select{flex:1;max-width:60%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;color:var(--onBg);border:none;border-bottom:1px solid var(--line);border-radius:0;padding:.3rem 1.2rem .3rem 0;font-family:var(--mono);font-size:var(--fs-small);text-align:right;cursor:pointer}.ctrl--select select:focus-visible,.ctrl--range input:focus-visible{outline:2px solid var(--live);outline-offset:2px}.footer{margin-top:8rem}