@layer legacy{:root{--font-sans:"Libertinus Sans", ui-sans-serif, system-ui, sans-serif;--font-display:"Libertinus Serif", ui-serif, Georgia, serif;--font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--surface:#fcf6ee;--surface-2:#f6efe2;--text:#1d1c1c;--muted:#0009;--rule:#0000001f;--hair:#00000012;--accent:#2d60a5;--accent-hover:#133380;--gutter:clamp(20px, 4vw, 40px);--max:72rem}*{box-sizing:border-box}html,body{background:var(--surface);color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;padding:0;font-size:18px;line-height:1.6}::selection{background:var(--accent);color:var(--surface)}html{scrollbar-color:#00000047 var(--surface)}html::-webkit-scrollbar{width:12px;height:12px}html::-webkit-scrollbar-track{background:var(--surface)}html::-webkit-scrollbar-thumb{border:3px solid var(--surface);background:#00000038;border-radius:0}html::-webkit-scrollbar-thumb:hover{background:var(--accent)}html::-webkit-scrollbar-corner{background:var(--surface)}a{color:var(--accent);text-underline-offset:3px;text-decoration:underline 1px}a:hover{color:var(--accent-hover)}p{margin:0 0 1em}code,pre{font-family:var(--font-mono)}h1,h2,h3{font-family:var(--font-display);letter-spacing:-.015em;margin:0;font-weight:400}.top{padding:24px var(--gutter);max-width:var(--max);justify-content:space-between;align-items:center;margin:0 auto;display:flex}.top-mark{font-family:var(--font-display);color:var(--text);letter-spacing:-.01em;font-size:20px;text-decoration:none}.top-nav{gap:22px;font-size:15px;display:flex}.top-nav a{color:var(--text);border-bottom:1px solid var(--rule);padding-bottom:2px;text-decoration:none}.top-nav a:hover,.top-nav a[aria-current=page]{color:var(--accent);border-color:var(--accent)}.hero{max-width:var(--max);padding:clamp(40px, 8vw, 90px) var(--gutter) clamp(40px, 6vw, 70px);align-items:center;margin:0 auto;display:grid}.hero-illustration{aspect-ratio:1;width:100%;position:relative}.hero-illustration svg{width:100%;height:100%;display:block;position:absolute;inset:0;overflow:visible}.hi-ring{transform-origin:0 0;animation:60s linear infinite hi-spin}@keyframes hi-spin{to{transform:rotate(360deg)}}.hi-ring .hi-dot{transition:r .22s,stroke-width .22s}.hi-ring .hi-dot.is-winner{stroke:var(--text);stroke-width:2px}.hi-ring .hi-curve{fill:none;stroke:var(--text);stroke-width:1.5px;stroke-dasharray:4 4;opacity:.55}.hi-pill{pointer-events:auto;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,24px)}.hi-fn{font-family:var(--font-mono);letter-spacing:.01em;background:var(--surface);color:var(--text);border:1px solid var(--rule);cursor:pointer;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--text) 50%), linear-gradient(135deg, var(--text) 50%, transparent 50%);background-position:calc(100% - 14px),calc(100% - 10px);background-repeat:no-repeat;background-size:4px 4px,4px 4px;border-radius:0;padding:6px 28px 6px 12px;font-size:13px}.hi-fn:hover{border-color:var(--text)}.hi-fn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (width<=899px){.hero-illustration{max-width:420px;margin:0 auto}}@media (prefers-reduced-motion:reduce){.hi-ring{animation:none}}.kicker{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 1.5em;font-size:12px}.hero .deck{max-width:60ch;color:var(--text);font-size:clamp(18px,1.5vw,21px);line-height:1.55}.hero .deck em{color:var(--accent);font-style:italic}.install{border:1px solid var(--rule);font-family:var(--font-mono);background:#ffffff80;border-radius:0;align-items:center;gap:12px;margin-top:36px;padding:12px 14px;font-size:16px;display:inline-flex}.install.big{margin-top:28px;padding:14px 16px;font-size:18px}.install code{color:var(--text)}.install .prompt{color:var(--accent);margin-right:6px}.copy{font-family:var(--font-mono);letter-spacing:.04em;background:var(--text);color:var(--surface);cursor:pointer;border:none;border-radius:0;padding:6px 10px;font-size:12px;transition:background .15s}.copy:hover{background:var(--accent)}.copy.copied{background:#2c7a3f}.install-note{color:var(--muted);margin-top:12px;font-size:14px}.install-note a{color:inherit}.graph{max-width:var(--max);padding:clamp(48px, 7vw, 90px) var(--gutter);border-top:1px solid var(--rule);align-items:start;margin:0 auto;display:grid}.graph-text h2{margin-bottom:.7em;font-size:clamp(28px,3.4vw,40px);line-height:1.12}.graph-text p{max-width:48ch;font-size:17px;line-height:1.6}.graph-text code{background:var(--surface-2);border-radius:0;padding:1px 6px;font-size:.9em}.graph-controls{border-top:1px solid var(--hair);flex-wrap:wrap;gap:14px 18px;margin-top:22px;padding-top:18px;display:flex}.graph-controls label{font-family:var(--font-mono);color:var(--muted);align-items:center;gap:8px;font-size:12px;display:flex}.graph-controls input[type=color]{border:1px solid var(--rule);cursor:pointer;background:0 0;border-radius:0;width:36px;height:36px;padding:0}.graph-controls color-input{cursor:pointer;display:inline-flex}.graph-controls label{align-items:center}.graph-controls button{font-family:var(--font-mono);border:1px solid var(--rule);cursor:pointer;color:var(--text);background:0 0;border-radius:0;padding:8px 14px;font-size:12px}.graph-viz{min-height:420px;padding:18px;overflow:auto}.graph-viz svg{width:100%;max-width:100%;height:auto}.sections-head{max-width:var(--max);padding:clamp(60px, 8vw, 100px) var(--gutter) 0;border-top:1px solid var(--rule);margin:0 auto}.sections-head p{color:var(--muted);max-width:56ch;margin:0;font-size:17px}.sections{max-width:var(--max);margin:0 auto}.fn{padding:clamp(48px, 6vw, 80px) var(--gutter);border-top:1px solid var(--rule)}.fn:first-of-type{border-top:none}.fn-head{margin-bottom:28px}.fn-body{align-items:start}.fn-pitch{max-width:50ch}.fn-pitch .fn-claim{font-family:var(--font-display);letter-spacing:-.01em;color:var(--text);margin:0 0 18px;font-size:clamp(22px,2.4vw,30px);line-height:1.18}.fn-pitch .fn-claim em{color:var(--accent);font-style:italic}.fn-pitch .fn-detail{color:var(--muted);margin:0;font-size:16px;line-height:1.6}.fn-pitch .fn-detail code{font-family:var(--font-mono);background:var(--surface-2);color:var(--text);border-radius:0;padding:1px 5px;font-size:.9em}.ramp-feature-text :is(h2,h3),.mix-feature-text :is(h2,h3),.order-feature-text :is(h2,h3),.typo-feature-text :is(h2,h3),.extends-feature-text :is(h2,h3){font-family:var(--font-display);letter-spacing:-.01em;color:var(--text);margin:0 0 18px;font-size:clamp(26px,3vw,36px);line-height:1.15}.ramp-feature-text :is(h2,h3) em,.mix-feature-text :is(h2,h3) em,.order-feature-text :is(h2,h3) em,.typo-feature-text :is(h2,h3) em,.extends-feature-text :is(h2,h3) em,.renderers-head h2 em{color:var(--accent);font-style:italic}.ramp-feature-text>p,.mix-feature-text>p,.order-feature-text>p,.typo-feature-text>p,.extends-feature-text>p,.renderers-head>p{color:var(--muted);margin:0 0 24px;font-size:16px;line-height:1.6}.code{font-family:var(--font-mono);color:#f0e9da;white-space:pre;background:#1d1c1c;border-radius:0;margin:0;padding:18px 20px;font-size:13.5px;line-height:1.6;overflow-x:auto}.code .c-dim{color:#f0e9da73;font-style:italic}.code .c-str{color:#e8b96d}.code .c-fn{color:#88aee0}.code .c-key{color:#c5b3e0}.code .c-num{color:#e8b96d}.code,.r-pane{scrollbar-color:#f0e9da47 #1d1c1c;scrollbar-width:thin}.code::-webkit-scrollbar,.r-pane::-webkit-scrollbar{width:10px;height:10px}.code::-webkit-scrollbar-track,.r-pane::-webkit-scrollbar-track{background:#1d1c1c}.code::-webkit-scrollbar-thumb,.r-pane::-webkit-scrollbar-thumb{background:#f0e9da38;border:2px solid #1d1c1c;border-radius:0}.code::-webkit-scrollbar-thumb:hover,.r-pane::-webkit-scrollbar-thumb:hover{background:#f0e9da66}.code::-webkit-scrollbar-corner,.r-pane::-webkit-scrollbar-corner{background:#1d1c1c}.demo{margin:0}.demo figcaption{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-size:11px}.contrast-row{background:var(--rule);border:1px solid var(--rule);border-radius:0;grid-template-columns:repeat(6,1fr);gap:1px;display:grid;overflow:hidden}.contrast-tile{aspect-ratio:3/4;font-family:var(--font-display);flex-direction:column;justify-content:space-between;padding:12px;display:flex}.contrast-tile .ctop{font-family:var(--font-mono);letter-spacing:.06em;opacity:.75;word-break:break-all;font-size:10px}.contrast-tile .cbig{font-size:clamp(24px,3vw,40px);line-height:1}.contrast-tile .cbottom{font-family:var(--font-mono);letter-spacing:.04em;opacity:.85;word-break:break-all;font-size:10px}.contrast-tile .cbadge{font-family:var(--font-mono);letter-spacing:.08em;color:currentColor;background:0 0;border:1px solid;border-radius:0;align-self:flex-start;padding:2px 7px;font-size:10px;font-weight:700;line-height:1.4}.contrast-tile .cbadge.is-aalg{opacity:.7}.contrast-tile .cbadge.is-fail{opacity:.5;text-decoration:line-through}.contrast-palette{background:var(--rule);border:1px solid var(--rule);border-radius:0;grid-template-columns:repeat(8,1fr);gap:1px;margin-top:8px;display:grid;overflow:hidden}.contrast-palette>span{aspect-ratio:4;display:block}.closest-stage{background:var(--surface-2);border:1px solid var(--rule);border-radius:0;grid-template-columns:auto auto 1fr;align-items:center;gap:18px;padding:20px;display:grid}.closest-target{align-items:center;gap:12px;display:flex}.closest-target .swatch{border:1px solid var(--rule);border-radius:0;width:64px;height:64px}.closest-picker{cursor:pointer;display:inline-flex}.closest-arrow{font-family:var(--font-display);color:var(--accent);font-size:28px}.closest-ranked{grid-template-columns:repeat(7,1fr);gap:4px;display:grid}.closest-ranked .rank{aspect-ratio:1/1.4;font-family:var(--font-mono);letter-spacing:.04em;color:#ffffffd9;text-shadow:0 1px 1px #00000080;border-radius:0;flex-direction:column;justify-content:flex-end;padding:6px;font-size:9px;display:flex;position:relative}.closest-ranked .rank.winner{outline:2px solid var(--accent);outline-offset:-2px;transition:transform .25s;transform:translateY(-3px)}.closest-ranked .rank .num{font-family:var(--font-display);color:#fffffff2;font-size:18px;line-height:.9}.furthest-stage{background:var(--rule);border:1px solid var(--rule);border-radius:0;grid-template-columns:repeat(7,1fr);gap:1px;display:grid;overflow:hidden}.furthest-stage .swatch-fr{aspect-ratio:3/5;cursor:pointer;font:inherit;text-align:left;border:0;border-radius:0;flex-direction:column;justify-content:space-between;padding:8px;transition:transform .2s;display:flex;position:relative}.furthest-stage .swatch-fr:hover{z-index:2;transform:scale(1.04)}.furthest-stage .swatch-fr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;z-index:3}.furthest-stage .swatch-fr.excluded{background-image:repeating-linear-gradient(135deg,#fcf6eebf 0 2px,#0000 2px 7px)}.furthest-stage .swatch-fr.excluded .hex{text-decoration:line-through}.furthest-stage .swatch-fr.furthest{outline:2px solid var(--accent);outline-offset:-2px;z-index:2}.furthest-stage .swatch-fr.furthest:before{font-family:var(--font-mono);letter-spacing:.06em;content:"odd one out";background:var(--accent);color:var(--surface);border-radius:0;padding:2px 6px;font-size:9px;position:absolute;top:6px;left:6px}.furthest-stage .swatch-fr .hex{font-family:var(--font-mono);color:#ffffffd9;text-shadow:0 1px 2px #00000080;align-self:flex-end;font-size:10px}.furthest-readout{font-family:var(--font-mono);color:var(--muted);flex-wrap:wrap;gap:24px;margin-top:12px;font-size:12px;display:flex}.furthest-readout b{font-family:var(--font-mono);color:var(--text);font-weight:400}.min-stage{grid-template-columns:1fr 1fr 1fr;gap:12px;display:grid}.min-card{border:1px solid var(--rule);border-radius:0;overflow:hidden}.min-label{font-family:var(--font-mono);letter-spacing:.06em;border-bottom:1px solid var(--rule);background:var(--surface-2);color:var(--muted);padding:8px 12px;font-size:10px}.min-sample{aspect-ratio:3/2.4;text-align:center;font-family:var(--font-display);justify-content:center;align-items:center;padding:14px;font-size:clamp(15px,1.3vw,18px);line-height:1.4;display:flex}.min-sample .min-text{display:inline-block}.step-stage{background:var(--surface-2);border:1px solid var(--rule);border-radius:0;flex-direction:column;gap:18px;padding:20px;display:flex}.step-scale{align-items:flex-end;gap:8px;height:80px;display:flex}.step-scale .bar{background:var(--rule);cursor:pointer;border-radius:0;flex:1;transition:background .15s,transform .15s;position:relative}.step-scale .bar .lbl{font-family:var(--font-mono);color:var(--muted);white-space:nowrap;font-size:10px;position:absolute;top:-18px;left:50%;transform:translate(-50%)}.step-scale .bar.target{background:var(--text)}.step-scale .bar.target .lbl{color:var(--text);font-weight:700}.step-scale .bar.larger,.step-scale .bar.smaller{background:var(--accent)}.step-scale .bar.dim{opacity:.4}.step-controls{grid-template-columns:1fr 1fr;gap:12px 18px;display:grid}.step-controls label{grid-template-columns:90px 1fr 60px;align-items:center;gap:10px;display:grid}.step-lbl{font-family:var(--font-mono);letter-spacing:.06em;color:var(--muted);font-size:11px}.step-val{font-family:var(--font-mono);color:var(--text);text-align:right;font-size:12px}.step-controls input[type=range]{width:100%;accent-color:var(--accent)}.step-readout{background:var(--rule);border:1px solid var(--rule);border-radius:0;grid-template-columns:1fr 1fr 1fr;gap:1px;display:grid;overflow:hidden}.step-cell{background:var(--surface);flex-direction:column;gap:4px;padding:12px 14px;display:flex}.step-cell:nth-child(2){background:var(--surface-2)}.step-key{font-family:var(--font-mono);letter-spacing:.06em;color:var(--muted);font-size:10px}.step-result{font-family:var(--font-display);color:var(--text);font-size:20px;line-height:1.1}.step-cell.error .step-result{font-family:var(--font-mono);color:var(--muted);font-size:13px;font-style:italic}@media (width<=899px){.step-controls{grid-template-columns:minmax(0,1fr)}.step-controls label{grid-template-columns:80px 1fr 50px}}.vivid-stage{background:var(--rule);border:1px solid var(--rule);border-radius:0;grid-template-columns:repeat(8,1fr);gap:1px;display:grid;overflow:hidden}.vivid-stage .vtile{aspect-ratio:3/5;font-family:var(--font-mono);color:#ffffffd9;text-shadow:0 1px 1px #0006;flex-direction:column;justify-content:space-between;padding:8px;font-size:10px;display:flex;position:relative}.vivid-stage .vtile.crown,.vivid-stage .vtile.floor{outline:2px solid var(--accent);outline-offset:-2px;z-index:2}.vivid-stage .vtile.floor{outline-color:var(--text)}.vivid-stage .vtile.crown:before,.vivid-stage .vtile.floor:before{font-family:var(--font-mono);letter-spacing:.06em;color:var(--surface);border-radius:0;padding:2px 6px;font-size:9px;position:absolute;top:6px;left:6px}.vivid-stage .vtile.crown:before{content:"most vivid";background:var(--accent)}.vivid-stage .vtile.floor:before{content:"least vivid";background:var(--text)}.vivid-stage .vtile .chroma{font-family:var(--font-display);color:#fffffff2;font-size:16px;line-height:1}.demo .lightness-caption{text-transform:none;letter-spacing:0}.lightness-toggle,.sibling-wrap{font-family:var(--font-mono);color:var(--text);cursor:pointer;align-items:center;gap:8px;font-size:12px;display:inline-flex}.lightness-toggle input,.sibling-wrap input{accent-color:var(--accent);margin:0}.lightness-stage,.sibling-stage{background:var(--rule);border:1px solid var(--rule);border-radius:0;grid-template-columns:repeat(8,1fr);gap:1px;display:grid;overflow:hidden}.sibling-stage{grid-template-columns:repeat(7,1fr)}.ltile,.stile{aspect-ratio:3/5;font-family:var(--font-mono);flex-direction:column;justify-content:flex-end;gap:4px;padding:8px;font-size:10px;transition:opacity .2s;display:flex;position:relative}.ltile .lval,.stile .skey{font-family:var(--font-display);font-size:15px;line-height:1}.ltile.is-filtered{opacity:.28}.ltile.is-lightest,.ltile.is-darkest,.stile.is-anchor,.stile.is-pick{outline:2px solid var(--accent);outline-offset:-2px;z-index:2}.ltile.is-darkest,.stile.is-anchor{outline-color:var(--text)}.ltile.is-lightest:before,.ltile.is-darkest:before,.stile.is-anchor:before,.stile.is-pick:before{letter-spacing:.06em;color:var(--surface);border-radius:0;padding:2px 6px;font-size:9px;position:absolute;top:6px;left:6px}.ltile.is-lightest:before{content:"lightest";background:var(--accent)}.ltile.is-darkest:before{content:"darkest";background:var(--text)}.stile.is-anchor:before{content:"anchor";background:var(--text)}.stile.is-pick:before{content:"sibling";background:var(--accent)}.stile{cursor:pointer;text-align:left;border:0;border-radius:0}.stile:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;z-index:3}.sibling-controls{flex-wrap:wrap;align-items:center;gap:18px;margin-top:12px;display:flex}.sibling-offsets{gap:6px;display:inline-flex}.sibling-offsets button{font-family:var(--font-mono);border:1px solid var(--rule);min-width:40px;color:var(--text);cursor:pointer;background:0 0;border-radius:0;padding:5px 10px;font-size:12px}.sibling-offsets button:hover{border-color:var(--text)}.sibling-offsets button.is-active{background:var(--text);color:var(--surface);border-color:var(--text)}.random-caption{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.random-seed-lbl{text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:8px;display:inline-flex}.random-seed-input{font-family:var(--font-mono);border:1px solid var(--rule);background:var(--surface);color:var(--text);letter-spacing:0;text-transform:none;border-radius:0;width:14ch;padding:4px 8px;font-size:12px}.random-seed-input:focus{outline:1px solid var(--accent);outline-offset:1px}.random-shuffle{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--rule);color:var(--text);cursor:pointer;background:0 0;border-radius:0;padding:4px 10px;font-size:11px}.random-shuffle:hover{background:var(--text);color:var(--surface)}.random-stage{background:var(--rule);border:1px solid var(--rule);border-radius:0;grid-template-columns:repeat(8,1fr);gap:1px;display:grid;overflow:hidden}.random-stage .rtile{aspect-ratio:3/5;font-family:var(--font-mono);color:#ffffffd9;text-shadow:0 1px 1px #0006;flex-direction:column;justify-content:flex-end;padding:8px;font-size:10px;transition:outline-color .18s;display:flex;position:relative}.random-stage .rtile.picked{outline:2px solid var(--accent);outline-offset:-2px;z-index:2}.random-stage .rtile.picked:before{content:"picked";font-family:var(--font-mono);letter-spacing:.06em;color:var(--surface);background:var(--accent);border-radius:0;padding:2px 6px;font-size:9px;position:absolute;top:6px;left:6px}@media (width<=899px){.random-stage{grid-template-columns:repeat(4,1fr)}}.nth-caption{align-items:center;gap:10px;margin-bottom:10px;display:flex}.nth-index-lbl{font-family:var(--font-mono);color:var(--fg-dim);align-items:center;gap:8px;font-size:12px;display:flex}.nth-index-input{width:60px;font-family:var(--font-mono);border:1px solid var(--rule);background:var(--surface);color:var(--fg);text-align:center;border-radius:0;padding:4px 8px;font-size:13px}.nth-index-input:focus{outline:2px solid var(--accent);outline-offset:-1px}.nth-stage{grid-template-columns:repeat(var(--nth-cols,9), 1fr);background:var(--rule);border:1px solid var(--rule);border-radius:0;gap:1px;display:grid;overflow:hidden}.nth-stage .ntile{aspect-ratio:3/5;font-family:var(--font-mono);color:#ffffffd9;text-shadow:0 1px 1px #0006;flex-direction:column;justify-content:flex-end;padding:8px;font-size:10px;transition:outline-color .18s;display:flex;position:relative}.nth-stage .ntile.picked{outline:2px solid var(--accent);outline-offset:-2px;z-index:2}.nth-stage .ntile.picked:before{content:attr(data-label);font-family:var(--font-mono);letter-spacing:.06em;color:var(--surface);background:var(--accent);border-radius:0;padding:2px 6px;font-size:9px;position:absolute;top:6px;left:6px}.nth-presets{flex-wrap:wrap;gap:6px;margin-top:10px;display:flex}.nth-presets button{font-family:var(--font-mono);border:1px solid var(--rule);background:var(--surface);color:var(--fg);cursor:pointer;border-radius:0;padding:4px 12px;font-size:12px;transition:background .15s,border-color .15s}.nth-presets button:hover{border-color:var(--fg-dim)}.nth-presets button.is-active{background:var(--accent);color:var(--surface);border-color:var(--accent)}@media (width<=899px){.nth-stage{grid-template-columns:repeat(5,1fr)}}.ramp-feature{max-width:var(--max);padding:clamp(60px, 8vw, 100px) var(--gutter);border-top:1px solid var(--rule);margin:0 auto}.order-feature-body{align-items:start;display:grid}.order-feature-text{max-width:56ch}.order-feature-text code:not(.code code){font-family:var(--font-mono);background:var(--surface-2);border-radius:0;padding:1px 6px;font-size:.9em}.order-stage{background:var(--surface-2);border:1px solid var(--rule);border-radius:0;flex-direction:column;gap:clamp(16px,2vw,22px);padding:clamp(20px,3vw,32px);display:flex}.order-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.order-seed{font-family:var(--font-mono);color:var(--muted);letter-spacing:.04em;align-items:center;gap:12px;font-size:12px;display:flex}.order-seed color-input{cursor:pointer;display:inline-flex}.order-modes,.extends-modes{background:var(--surface);border:1px solid var(--rule);border-radius:0;flex-wrap:wrap;gap:4px;padding:3px;display:inline-flex}.order-modes button,.extends-modes button{font-family:var(--font-mono);letter-spacing:.02em;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:0;padding:5px 10px;font-size:12px;transition:background .15s,color .15s}.order-modes button:hover,.extends-modes button:hover{color:var(--text)}.order-modes button.is-active,.extends-modes button.is-active{background:var(--accent);color:#fff}.order-modes button:focus-visible,.extends-modes button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.order-swatches{flex-wrap:nowrap;gap:clamp(3px,.8vw,6px);display:flex}.order-swatch{aspect-ratio:1;border:1px solid var(--rule);will-change:transform;border-radius:0;flex:1 1 0;align-items:flex-end;min-width:0;padding:6px;display:flex;position:relative;overflow:hidden}.order-swatch span{font-family:var(--font-mono);white-space:nowrap;letter-spacing:.02em;color:#fff;mix-blend-mode:difference;opacity:0;font-size:10px;transition:opacity .15s}.order-swatch:hover span,.order-swatch:focus-within span{opacity:1}.order-caption{font-family:var(--font-mono);letter-spacing:.03em;color:var(--muted);font-size:11px;line-height:1.5}.mix-feature-body{align-items:start;display:grid}.mix-feature-text{max-width:56ch}.mix-feature-text :is(h2,h3){margin:0 0 .5em;font-size:clamp(28px,3.4vw,40px);line-height:1.12}.mix-feature-text>p{color:var(--text);margin:0 0 24px;font-size:17px;line-height:1.6}.mix-feature-text code:not(.code code){font-family:var(--font-mono);background:var(--surface-2);border-radius:0;padding:1px 6px;font-size:.9em}.mix-stage{background:var(--surface-2);border:1px solid var(--rule);border-radius:0;flex-direction:column;gap:clamp(16px,2vw,24px);padding:clamp(20px,3vw,32px);display:flex}.mix-row{grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(12px,2vw,20px);display:grid}.mix-row hdr-color-input{--hdr-color-input-size:64px;border:1px solid var(--rule);cursor:pointer;border-radius:50%;width:64px;height:64px;display:block;overflow:hidden}.mix-strip{gap:6px;min-width:0;height:64px;display:flex}.mix-strip span{border:1px solid var(--rule);border-radius:0;flex:1 1 0}.mix-space{font-family:var(--font-mono);color:var(--muted);letter-spacing:.04em;align-items:center;gap:10px;font-size:12px;display:flex}.mix-space select{font-family:var(--font-mono);background:var(--surface);color:var(--text);border:1px solid var(--rule);cursor:pointer;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--text) 50%), linear-gradient(135deg, var(--text) 50%, transparent 50%);background-position:calc(100% - 14px),calc(100% - 10px);background-repeat:no-repeat;background-size:4px 4px,4px 4px;border-radius:0;padding:6px 28px 6px 10px;font-size:13px}.mix-space select:hover{border-color:var(--text)}.mix-space select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.ramp-feature-body{align-items:start;display:grid}@media (width>=900px){.ramp-stage{align-self:start}}.ramp-feature-text{max-width:56ch}.ramp-feature-text :is(h2,h3){margin:0 0 .5em;font-size:clamp(28px,3.4vw,40px);line-height:1.12}.ramp-feature-text>p{color:var(--text);margin:0 0 24px;font-size:17px;line-height:1.6}.ramp-feature-text code:not(.code code){font-family:var(--font-mono);background:var(--surface-2);border-radius:0;padding:1px 6px;font-size:.9em}.ramp-stage{background:var(--surface-2);border:1px solid var(--rule);border-radius:0;grid-template-columns:auto auto 1fr;align-items:center;gap:clamp(20px,3vw,36px);padding:clamp(20px,3vw,32px);display:grid}.ramp-seed{flex-direction:column;align-items:center;gap:10px;min-width:120px;display:flex}.ramp-seed hdr-color-input{--hdr-color-input-size:96px;border:1px solid var(--rule);cursor:pointer;border-radius:50%;width:96px;height:96px;display:block;overflow:hidden}.ramp-seed code{font-family:var(--font-mono);color:var(--text);font-size:13px}.ramp-seed-lbl{font-family:var(--font-mono);color:var(--muted);letter-spacing:.04em;font-size:11px}.ramp-arrow{font-family:var(--font-display);color:var(--muted);user-select:none;font-size:28px;line-height:1}.ramp-bars{border:1px solid var(--rule);border-radius:0;flex-direction:column;min-width:0;display:flex;overflow:hidden}.ramp-bar{height:32px;font-family:var(--font-mono);letter-spacing:.02em;justify-content:space-between;align-items:center;padding:0 14px;font-size:12px;transition:background-color .2s;display:flex}.ramp-bar .shade{opacity:.75}.ramp-bar .hex{opacity:.9}.ramp-code{margin:0;font-size:13px}@media (width<=720px){.ramp-stage{grid-template-columns:minmax(0,1fr);justify-items:center}.ramp-arrow{transform:rotate(90deg)}.ramp-bars{width:100%;max-width:320px}}.typo-feature-body{align-items:start;display:grid}@media (width>=900px){.typo-stage{align-self:start}}.typo-feature-text{max-width:56ch}.typo-feature-text :is(h2,h3){margin:0 0 .5em;font-size:clamp(28px,3.4vw,40px);line-height:1.12}.typo-feature-text>p{color:var(--text);margin:0 0 24px;font-size:17px;line-height:1.6}.typo-feature-text code:not(.code code){font-family:var(--font-mono);background:var(--surface-2);border-radius:0;padding:1px 6px;font-size:.9em}.typo-stage{background:var(--surface-2);border:1px solid var(--rule);border-radius:0;gap:clamp(12px,1.6vw,20px);margin:0;padding:clamp(28px,4vw,44px);display:grid}.typo-stage figcaption{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:8px;font-size:11px}.typo-sample{font-family:var(--font-display);color:var(--text);margin:0}.typo-sample--heading{letter-spacing:-.02em;font-size:clamp(28px,4vw,44px);font-weight:700;line-height:1}.typo-sample--hero{letter-spacing:-.02em;font-size:clamp(44px,6.5vw,72px);font-weight:700;line-height:1}.extends-feature{max-width:var(--max);padding:clamp(60px, 8vw, 100px) var(--gutter);border-top:1px solid var(--rule);margin:0 auto}.extends-feature-body{align-items:start;display:grid}@media (width>=900px){.extends-stage{align-self:start}}.extends-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 24px;margin-bottom:clamp(20px,2.4vw,32px);display:flex}.extends-panels{grid-template-columns:minmax(0,1fr);display:grid}.extends-panels>[role=tabpanel]{grid-area:1/1;min-width:0}.extends-panels>[role=tabpanel]:not(.is-active){visibility:hidden}.extends-panels>[role=tabpanel]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.extends-feature-text strong{font-weight:600}.extends-feature-text{max-width:56ch}.extends-feature-text :is(h2,h3){margin:0 0 .5em;font-size:clamp(28px,3.4vw,40px);line-height:1.12}.extends-feature-text>p{color:var(--text);margin:0 0 24px;font-size:17px;line-height:1.6}.extends-feature-text code:not(.code code){font-family:var(--font-mono);background:var(--surface-2);border-radius:0;padding:1px 6px;font-size:.9em}.extends-stage{gap:12px;margin:0;display:grid}.extends-stage figcaption{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:11px}.extends-pane{background:var(--surface);border:1px solid var(--rule);font-family:var(--font-mono);box-shadow:0 1px 0 var(--rule);border-radius:0;font-size:13px;overflow:hidden}.extends-pane-head{background:var(--surface-2);border-bottom:1px solid var(--rule);letter-spacing:.04em;align-items:center;gap:10px;padding:10px 16px;font-size:12px;display:flex}.extends-pane-name{color:var(--text);font-weight:500}.extends-pane-meta{color:var(--muted);font-size:11px}.extends-pane-meta code{color:var(--text);background:0 0;padding:0}.extends-rows{padding:4px 0}.ext-row{grid-template-columns:9ch 22px 1fr;align-items:center;gap:12px;padding:6px 16px;display:grid}.ext-row--override{opacity:1}.ext-row--inherited{opacity:.4}.ext-key{color:var(--text)}.ext-swatch{border:1px solid var(--rule);border-radius:0;justify-self:center;width:18px;height:18px}.ext-val{color:var(--text)}.ext-resolved{color:var(--muted);margin-left:6px;font-style:italic}.extends-rows--keys .ext-row{grid-template-columns:15ch 22px minmax(0,1fr)}.ext-layer{border:1px solid var(--accent);color:var(--accent);letter-spacing:.08em;text-transform:uppercase;vertical-align:1px;border-radius:0;margin-left:6px;padding:0 5px;font-size:10px;display:inline-block}.renderers{max-width:var(--max);padding:clamp(60px, 8vw, 100px) var(--gutter);border-top:1px solid var(--rule);margin:0 auto}.renderers-head{margin-bottom:32px}.renderers-head p{max-width:64ch;color:var(--text);font-size:17px;line-height:1.6}.renderer-tabs{background:var(--rule);border:1px solid var(--rule);border-radius:0;flex-wrap:wrap;gap:1px;display:flex;overflow:hidden}.r-tab{background:var(--surface-2);min-width:120px;font-family:var(--font-mono);letter-spacing:.04em;color:var(--muted);cursor:pointer;text-align:center;border:none;flex:1;padding:12px 16px;font-size:12px;transition:background .15s,color .15s}.r-tab em{opacity:.7;font-style:italic}.r-tab:hover{color:var(--text)}.r-tab.is-active{color:#f0e9da;background:#1d1c1c}.renderer-panes{position:relative}.r-pane{color:#f0e9da;font-family:var(--font-mono);white-space:pre;background:#1d1c1c;border-radius:0;max-height:360px;margin:0;padding:22px 24px;font-size:13px;line-height:1.55;display:none;overflow:auto}.r-pane.is-active{display:block}.renderer-source{border-top:1px solid var(--hair);margin-top:24px;padding-top:18px}.renderer-source summary{font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);cursor:pointer;font-size:12px;list-style:none}.renderer-source summary:before{content:"▸ ";color:var(--accent)}.renderer-source[open] summary:before{content:"▾ "}.renderer-source pre{margin-top:16px}.extend{max-width:var(--max);padding:clamp(60px, 8vw, 100px) var(--gutter);border-top:1px solid var(--rule);margin:0 auto}.extend-head{margin-bottom:32px}.extend-head p{max-width:64ch;font-size:17px;line-height:1.6}.extend-head code{background:var(--surface-2);border-radius:0;padding:1px 6px;font-size:.9em}.extend-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,36px);display:grid}.extend-card{border:1px solid var(--rule);background:var(--surface-2);border-radius:0;flex-direction:column;gap:14px;padding:24px;display:flex}.extend-card h3{margin:0;font-size:22px;line-height:1.2}.extend-card>p{color:var(--text);margin:0;font-size:15px;line-height:1.55}.extend-card .code{padding:14px 16px;font-size:12.5px}.extend-result{font-family:var(--font-mono);flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding-top:8px;font-size:12px;display:flex}.extend-result-label{color:var(--muted);font-family:var(--font-mono);font-size:12px}.extend-result-swatch{border:1px solid var(--rule);border-radius:0;width:28px;height:28px;display:inline-block}.extend-result code{font-size:13px}.extend-result.poline{flex-direction:column;align-items:stretch;gap:10px}.extend-result-line{align-items:center;gap:10px;margin:0;display:flex}.poline-strip{border:1px solid var(--rule);border-radius:0;grid-template-columns:repeat(7,1fr);gap:0;height:48px;display:grid;overflow:hidden}.poline-strip>span{width:100%;height:100%;display:block}@media (width<=899px){.extend-grid{grid-template-columns:minmax(0,1fr)}}.coda{max-width:var(--max);padding:clamp(48px, 6vw, 80px) var(--gutter);border-top:1px solid var(--rule);margin:0 auto}.coda>p{max-width:64ch;color:var(--muted);margin-bottom:28px;font-size:17px}.coda-list{background:var(--rule);border:1px solid var(--rule);border-radius:0;grid-template-columns:repeat(4,1fr);gap:1px;margin:0;padding:0;list-style:none;display:grid;overflow:hidden}.coda-list li{background:var(--surface);align-items:center;gap:14px;padding:16px 18px;display:flex}.coda-text{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.coda-list b{font-family:var(--font-mono);color:var(--text);font-size:14px;font-weight:400}.coda-text span{color:var(--muted);font-size:14px;line-height:1.4}.coda-icon{color:var(--text);opacity:.85;flex:none;align-items:center;display:inline-flex}.coda-icon svg{display:block}.foot{max-width:var(--max);padding:24px var(--gutter) 36px;border-top:1px solid var(--rule);color:var(--muted);justify-content:space-between;margin:0 auto;font-size:13px;display:flex}@media (width<=899px){.top-nav{gap:14px;font-size:14px}.closest-stage{grid-template-columns:minmax(0,1fr)}.closest-arrow{justify-self:start;transform:rotate(90deg)}.closest-ranked{grid-template-columns:repeat(4,1fr)}.min-stage{grid-template-columns:minmax(0,1fr)}.contrast-row{grid-template-columns:repeat(3,1fr)}.vivid-stage,.furthest-stage{grid-template-columns:repeat(4,1fr)}.coda-list{grid-template-columns:repeat(2,1fr)}}.fn-tabs{max-width:var(--max);padding:28px var(--gutter) 0;flex-wrap:wrap;align-items:center;gap:8px;margin:0 auto;display:flex}.fn-tabs-set{flex-wrap:wrap;align-items:center;gap:8px;margin-right:14px;display:inline-flex}.fn-tabs-group{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:2px;font-size:11px}.fn-tabs [role=tab]{font-family:var(--font-mono);border:1px solid var(--rule);color:var(--text);cursor:pointer;background:0 0;border-radius:0;padding:6px 12px;font-size:13px;transition:border-color .15s,background .15s,color .15s}.fn-tabs [role=tab]:hover{border-color:var(--text)}.fn-tabs [role=tab][aria-selected=true]{background:var(--text);border-color:var(--text);color:var(--surface)}.fn-tabs [role=tab]:focus-visible,.fn-panels [role=tabpanel]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.fn-panels{grid-template-columns:minmax(0,1fr);display:grid}.fn-panels>.fn{border-top:none;grid-area:1/1;min-width:0;padding-top:clamp(28px,4vw,48px)}.fn-panels>.fn:not(.is-active){visibility:hidden}.fn-panels>.fn.is-active{animation:.25s ease-out fn-in}@keyframes fn-in{0%{opacity:0;transform:translateY(4px)}}@media (prefers-reduced-motion:reduce){.fn-panels>.fn.is-active{animation:none}}@media (width<=899px){.fn-tabs{scrollbar-width:none;flex-wrap:nowrap;padding-bottom:6px;overflow-x:auto}.fn-tabs::-webkit-scrollbar{display:none}.fn-tabs-set{flex-wrap:nowrap;flex:none}.fn-tabs [role=tab],.fn-tabs-group{flex:none}}.feature-sub{border-top:1px solid var(--hair);margin-top:clamp(48px,6vw,72px);padding-top:clamp(40px,5vw,60px)}.ref-feature{max-width:var(--max);padding:clamp(60px, 8vw, 100px) var(--gutter);border-top:1px solid var(--rule);margin:0 auto}.ref-feature-body{align-items:start;display:grid}.ref-feature-text{max-width:56ch}.ref-feature-text :is(h2,h3){margin:0 0 .5em;font-size:clamp(28px,3.4vw,40px);line-height:1.12}.ref-feature-text :is(h2,h3) em{color:var(--accent);font-style:italic}.ref-feature-text>p{margin:0 0 24px;font-size:17px;line-height:1.6}.ref-feature-text code:not(.code code){font-family:var(--font-mono);background:var(--surface-2);border-radius:0;padding:1px 6px;font-size:.9em}.ref-stage{gap:12px;min-width:0;margin:0;display:grid}.ref-stage figcaption{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:11px}.ref-control{font-family:var(--font-mono);color:var(--muted);justify-self:start;align-items:center;gap:10px;font-size:12px;display:inline-flex}.ref-css{grid-area:auto;margin:0}.ref-modes{flex-wrap:wrap;gap:6px;display:flex}.ref-modes button{font:inherit;font-family:var(--font-mono);border:1px solid var(--rule);color:var(--text);cursor:pointer;background:0 0;border-radius:0;padding:5px 10px;font-size:12px}.ref-modes button code{color:var(--muted);background:0 0;margin-right:4px;padding:0}.ref-modes button.is-active{background:var(--text);color:var(--surface);border-color:var(--text)}.ref-modes button.is-active code{color:inherit;opacity:.7}.ref-ramp{grid-template-columns:repeat(10,minmax(0,1fr));display:grid}.ref-ramp-step{aspect-ratio:1;font-family:var(--font-mono);flex-direction:column;justify-content:flex-end;padding:4px;font-size:10px;line-height:1.2;display:flex}.ref-ramp-step b{font-weight:600}.ref-buttons{border:1px solid var(--rule);grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:20px;display:grid}.ref-buttons>div{justify-items:start;gap:6px;display:grid}.ref-buttons span{font-family:var(--font-mono);font-size:11px}.ref-buttons button{font:inherit;cursor:default;border:0;border-radius:0;padding:10px 18px;font-weight:600}.ref-panes{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px;display:grid}.ref-panes .ext-row--inherited{opacity:.55}.ref-panes .ext-row{grid-template-columns:6ch 22px minmax(0,1fr)}.readable-feature{max-width:var(--max);padding:clamp(60px, 8vw, 100px) var(--gutter);border-top:1px solid var(--rule);margin:0 auto}.readable-feature-body{align-items:start;display:grid}.readable-feature-text{max-width:56ch}.readable-feature-text h2{margin:0 0 .5em;font-size:clamp(28px,3.4vw,40px);line-height:1.12}.readable-feature-text h2 em{color:var(--accent);font-style:italic}.readable-feature-text>p{margin:0 0 24px;font-size:17px;line-height:1.6}.readable-feature-text code:not(.code code){font-family:var(--font-mono);background:var(--surface-2);border-radius:0;padding:1px 6px;font-size:.9em}.readable-stage{margin:0}.readable-stage figcaption{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:12px;font-size:11px}.readable-controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 18px;margin-bottom:14px;display:flex}.readable-surface{font-family:var(--font-mono);color:var(--muted);align-items:center;gap:10px;font-size:12px;display:inline-flex}.readable-ratios{align-items:center;gap:6px;display:inline-flex}.readable-ratios:before{content:"readableContrast";font-family:var(--font-mono);color:var(--muted);margin-right:4px;font-size:12px}.readable-ratios button{font-family:var(--font-mono);border:1px solid var(--rule);min-width:40px;color:var(--text);cursor:pointer;background:0 0;border-radius:0;padding:5px 10px;font-size:12px}.readable-ratios button:hover{border-color:var(--text)}.readable-ratios button.is-active{background:var(--text);color:var(--surface);border-color:var(--text)}.readable-pool{border:1px solid var(--rule);border-radius:0;grid-template-columns:repeat(8,1fr);gap:6px;padding:14px;transition:background .2s;display:grid}.rd-tile{aspect-ratio:1;font-family:var(--font-mono);border-radius:0;justify-content:center;align-items:flex-end;padding-bottom:4px;font-size:10px;transition:opacity .2s,transform .2s;display:flex}.rd-tile.is-out{opacity:.22;transform:scale(.88)}.readable-results{grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;display:grid}.rd-result{border:1px solid var(--rule);border-radius:0;padding:14px 16px}.rd-result .rd-call{font-family:var(--font-mono);color:var(--muted);margin-bottom:10px;font-size:11px;display:block}.rd-result .rd-sample{font-family:var(--font-display);font-size:24px;line-height:1.1}.rd-result .rd-meta{font-family:var(--font-mono);opacity:.8;margin-top:8px;font-size:11px;display:block}.rd-result.is-fail .rd-sample{font-family:var(--font-mono);font-size:13px}@media (width<=560px){.readable-pool{grid-template-columns:repeat(4,1fr)}.readable-results{grid-template-columns:minmax(0,1fr)}}.ltile,.stile{min-width:0;overflow:hidden}@media (width<=599px){.lightness-stage,.sibling-stage{grid-template-columns:repeat(4,minmax(0,1fr))}.ltile,.stile{aspect-ratio:1}}color-input::part(trigger),color-input::part(chip),color-input::part(output),color-input::part(panel),color-input::part(area),color-input::part(controls),color-input::part(input),color-input::part(gamut){border-radius:0}.names-feature-body{align-items:start;display:grid}.names-feature-text{max-width:56ch}.names-feature-text :is(h2,h3){font-family:var(--font-display);letter-spacing:-.01em;margin:0 0 18px;font-size:clamp(24px,2.6vw,32px);line-height:1.15}.names-feature-text :is(h2,h3) em{color:var(--accent);font-style:italic}.names-feature-text>p{margin:0 0 24px;font-size:17px;line-height:1.6}.names-feature-text code:not(.code code){font-family:var(--font-mono);background:var(--surface-2);padding:1px 6px;font-size:.9em}.names-stage{border:1px solid var(--rule);background:var(--surface-2);gap:14px;padding:20px;display:grid}.names-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.names-seed,.names-count{font-family:var(--font-mono);color:var(--muted);align-items:center;gap:12px;font-size:12px;display:flex}.names-count input{accent-color:var(--accent);flex:1}.names-count b{color:var(--text);min-width:2ch;font-weight:400}.names-rows{display:grid}.names-row{font-family:var(--font-display);justify-content:space-between;align-items:baseline;padding:10px 14px;font-size:18px;display:flex}.names-row code{font-family:var(--font-mono);opacity:.8;font-size:12px}@media (width<=560px){.names-schemes{flex-wrap:wrap}}.names-more{margin:16px 0 0;font-size:16px}.names-schemes{border:1px solid var(--rule);background:var(--surface);display:inline-flex}.names-schemes button{font-family:var(--font-mono);color:var(--text);cursor:pointer;background:0 0;border:0;padding:6px 10px;font-size:12px}.names-schemes button.is-active{background:var(--accent);color:var(--surface)}}.hi-center{cursor:pointer;z-index:1;border-radius:50%;width:32px;height:32px;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #fff,0 0 0 2px #000}.hi-center::part(trigger){border:none;border-radius:0;width:100%;height:100%;padding:0}.hi-center::part(chip){border-radius:0;width:100%;height:100%}.hi-center::part(output),.hi-center::part(input){display:none}.hi-center::part(chip){block-size:100%;inline-size:100%;box-shadow:none;border:0}.hi-center::part(chip),.hi-center::part(trigger){border-radius:50%}.hi-center::part(chip):hover{box-shadow:inset 0 0 0 3px var(--paper)}.hero h1{letter-spacing:-.02em;max-width:16ch;margin-bottom:.6em;font-size:clamp(44px,6.5vw,80px);line-height:.9}.names-schemes button+button{border-left:1px solid var(--rule)}:root{--pp:var(--paper);--pp-text:var(--black);--font-sans:var(--font-text);--font-display:var(--font-text);--font-mono:var(--font-code);--surface:var(--paper);--surface-2:color-mix(in srgb, var(--paper) 92%, var(--black));--text:var(--black);--muted:color-mix(in srgb, var(--black) 62%, var(--pp,var(--paper)));--rule:color-mix(in srgb, var(--black) 16%, var(--pp,var(--paper)));--hair:color-mix(in srgb, var(--black) 8%, var(--pp,var(--paper)));--accent:var(--blue);--accent-hover:color-mix(in srgb, var(--blue) 80%, var(--black))}html,body{font-size:17px}::selection{background:var(--blue);color:var(--on-black)}h1,h2,h3{letter-spacing:-.01em;text-wrap:balance;font-weight:600}[class] :is(h1,h2,h3) em,:is(h1,h2,h3) em{font-style:normal;font-weight:inherit;color:inherit}p,li{text-wrap:pretty}.r-tab em{font-style:normal}.hero{min-height:100dvh;padding-top:calc(var(--row) * 5);align-content:end;position:relative}.top-mark{color:var(--blue);font-weight:600}.top-nav a{border-bottom:0}.top-nav a:hover,.top-nav a[aria-current=page]{color:var(--blue)}.code,.r-pane,.r-tab.is-active{background:var(--black);color:var(--on-black)}.code::-webkit-scrollbar-track,.r-pane::-webkit-scrollbar-track,.code::-webkit-scrollbar-corner,.r-pane::-webkit-scrollbar-corner{background:var(--black)}.sibling-offsets button.is-active,.ref-modes button.is-active,.readable-ratios button.is-active{background:var(--blue);border-color:var(--blue);color:var(--on-black)}:where(button,select,input,.code,.demo,figure){border-radius:0}.install{background:var(--blue);box-shadow:none;border:0}.install code{color:var(--on-black)}.install .prompt{color:color-mix(in srgb, var(--on-black) 50%, var(--pp,var(--paper)))}.copy{color:var(--on-black);border-left:1px solid color-mix(in srgb, var(--on-black) 45%, var(--pp,var(--paper)));background:0 0}.copy:hover{background:color-mix(in srgb, var(--on-black) 16%, var(--pp,var(--paper)))}.copy.copied{background:var(--green)}html{overflow-x:clip}body{padding:0 var(--rail);container-type:inline-size}body>section{border-top:0;position:relative}.fn{position:relative}.closest-stage,.extends-stage,.furthest-stage,.lightness-stage,.min-stage,.mix-stage,.names-stage,.nth-stage,.order-stage,.ramp-stage,.random-stage,.readable-stage,.ref-stage,.why-stage,.sibling-stage,.step-stage,.typo-stage,.vivid-stage,.fn .demo,.extend-card .demo,.extend-result,.graph-viz,.graph-controls{--pp:var(--blue);--pp-text:var(--on-black);--surface:var(--pp);--surface-2:color-mix(in srgb, var(--pp) 88%, var(--pp-text));--text:var(--pp-text);--muted:color-mix(in srgb, var(--pp-text) 66%, var(--pp,var(--paper)));--rule:color-mix(in srgb, var(--pp-text) 28%, var(--pp,var(--paper)));--hair:color-mix(in srgb, var(--pp-text) 14%, var(--pp,var(--paper)));--accent:var(--pp-text);--accent-hover:var(--pp-text);color:var(--text);background-color:var(--pp);background-image:repeating-linear-gradient(to bottom, transparent 0 calc(var(--row) - 1px), var(--hair) calc(var(--row) - 1px) var(--row));padding:var(--row);border:0}.readable-stage,.order-stage,.extend-card:nth-child(2) .extend-result{--pp:var(--red);--pp-text:var(--black)}.ramp-stage,.min-stage,.nth-stage{--pp:var(--blue);--pp-text:var(--on-black)}.names-stage,.typo-stage,.furthest-stage,.graph-viz{--pp:var(--yellow);--pp-text:var(--black)}.mix-stage,.extend-card:first-child .extend-result,.extend-card:first-child .demo{--pp:var(--green);--pp-text:var(--black)}.code,.r-pane{--pp:var(--black);--pp-text:var(--on-black);padding:var(--row) var(--row) var(--row) calc(var(--row) * 2);font-size:12px;line-height:var(--row);background-color:var(--pp);background-image:repeating-linear-gradient(to bottom, transparent 0 calc(var(--row) - 1px), color-mix(in srgb, var(--on-black) 12%, var(--pp,var(--paper))) calc(var(--row) - 1px) var(--row));background-position:0 var(--row)}.code .c-fn,.code .c-key{color:var(--on-black);font-weight:700}.code .c-str,.code .c-num{color:color-mix(in srgb, var(--on-black) 72%, var(--black))}.code .c-dim{color:color-mix(in srgb, var(--on-black) 45%, var(--black));font-style:normal}.fn-index{max-width:var(--max);padding:var(--row) var(--gutter) 0;gap:0 var(--row);grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;margin:0 auto;display:grid}.fn-index-group ul{border:0}.fn-index a{font-family:var(--font-mono);color:var(--text);font-size:12px;text-decoration:none}.fn-index a:hover{color:var(--blue);text-underline-offset:.2em;text-decoration:underline}.fn-panels{display:block}.fn-panels>.fn,.fn-panels>.fn:not(.is-active){visibility:visible;scroll-margin-top:var(--row);animation:none}@media (width<=899px){.fn-index{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=640px){.fn-index{gap:var(--row) 0;grid-template-columns:minmax(0,1fr)}.fn-index a{white-space:nowrap}}.hero h1 em,.graph-text em,p em{font-style:normal}.folder-sheet--result{--pp:var(--blue);--pp-text:var(--on-black);--tab-left:0px}.folder-sheet--code{--pp:var(--black);--pp-text:var(--on-black);--tab-left:calc(var(--row) * 4)}.folder-sheet--result:has(.readable-stage,.order-stage),.extend-card:nth-child(2) .folder-sheet--result{--pp:var(--red);--pp-text:var(--black)}.folder-sheet--result:has(.ramp-stage,.min-stage,.nth-stage,.lightness-stage,.random-stage){--pp:var(--blue);--pp-text:var(--on-black)}.folder-sheet--result:has(.names-stage,.typo-stage,.furthest-stage){--pp:var(--yellow);--pp-text:var(--black)}.folder-sheet--result:has(.mix-stage),.extend-card:first-child .folder-sheet--result{--pp:var(--green);--pp-text:var(--black)}.folder-body>*{margin:0}.folder-sheet--code .code{max-height:none}.extend-card{background:0 0;border:0;padding:0}.extend-card .folder{margin-top:auto}.extends-pane{box-shadow:none;background:0 0;border:0;font-size:12px;overflow:visible}.extends-pane-head{background:0 0}.extends-rows{--ledger-cols:calc(9ch + 28px) 10px minmax(0, 1fr);padding:0}.extends-rows--keys{--ledger-cols:calc(16ch + 28px) 10px minmax(0, 1fr)}.ext-row{gap:0;padding:0}.ext-row>.ext-swatch{border:0;border-left:1px solid var(--lg-rule);width:auto;height:auto;box-shadow:inset 0 0 0 1px var(--lg-rule);justify-self:stretch;padding:0}.ext-row>.ext-val{border-left:0}.ext-resolved{font-style:normal}.graph-viz{--c-surface:var(--pp);--c-surface-on:var(--pp-text);--c-surface-on-alt:color-mix(in srgb, var(--pp-text) 55%, var(--pp));--active-outline:var(--blue)}.ui-card{align-items:flex-start;gap:var(--card-breath,8px);width:min(70%, calc(var(--row) * 9));padding:var(--card-gap,16px);color:var(--card-text,var(--black));background:var(--card-surface,var(--paper));border:1px solid var(--pp-text);flex-direction:column;display:flex;position:relative}:has(>.ui-card){isolation:isolate}.ui-card:before{content:"";z-index:-1;border:1px solid var(--pp-text);background:repeating-linear-gradient(45deg, var(--pp-text) 0 1.2px, transparent 1.2px 4px);position:absolute;inset:-1px;translate:10px 10px}.ui-card-line{background:var(--card-subtle,currentColor);width:100%;height:6px;display:block}.ui-card-line--title{background:var(--card-text,currentColor);width:70%;height:12px;margin-bottom:4px}.ui-card-line--short{width:60%}.ui-card-button{margin-top:calc(var(--card-gap,16px) - var(--card-breath,8px));padding:11px calc(var(--row) / 2);background:var(--card-accent,var(--blue));cursor:pointer;display:block}.ui-card-button .ui-card-line{width:calc(var(--row) * 2);background:var(--card-on-accent,var(--on-black))}.ui-card-button:hover{background:var(--card-hover,var(--card-accent,var(--black)))}.graph-viz{overflow:visible}.graph-card{right:calc(var(--row) * -.5);bottom:calc(var(--row) * -2.5);margin:0;position:absolute}@media (width>=900px){.graph-card{right:calc(var(--row) * -1)}}.graph-controls{margin-top:var(--row);align-items:center}.graph-controls button,.folder-sheet--result .stub>button.stub-button,.folder-sheet--result .stub select.stub-select{font:12px/1 var(--font-code);cursor:pointer;min-height:var(--row);color:var(--black);background:var(--paper);border:1px solid var(--paper);border-radius:0;padding:3px 12px}.graph-controls button:hover,.folder-sheet--result .stub>button.stub-button:hover{color:var(--pp-text);border-color:var(--pp-text);background:0 0}.switch button[aria-selected=true]{color:var(--pp);background:var(--pp-text);border-color:var(--pp-text)}.names-schemes.switch,.order-modes.switch,.ref-modes.switch,.extends-modes.switch,.readable-ratios.switch,.sibling-offsets.switch,.nth-presets.switch{background:0 0;border:0;gap:0;padding:0}.contrast-row{background:0 0;border:0;grid-template-columns:repeat(6,minmax(0,1fr));gap:0}.contrast-tile{min-width:0;padding:10px 8px}.contrast-tile .cbig{font-size:clamp(22px,2.4vw,34px)}.fn{--fn-drop:calc(var(--row) * 2)}.fn-head{column-gap:var(--row);grid-template-columns:auto minmax(0,1fr);display:grid}.fn-head>.rule-title{grid-column:1;margin-bottom:0}.fn-kinds{font-family:var(--font-mono);flex-wrap:wrap;grid-area:1/2;align-self:end;align-items:flex-end;gap:4px;margin:0;padding:0;font-size:11px;list-style:none;display:flex}.fn-head>.fn-kinds{z-index:1;margin-left:0;position:relative}.fn-kinds li{padding:0 calc(var(--row) / 2);line-height:calc(var(--row) * .8);color:var(--kind-ink,var(--on-black));background:var(--kind)}.fn-kinds b{margin-right:4px;font-weight:700}.kind-color{--kind:var(--red)}.kind-size{--kind:var(--yellow);--kind-ink:var(--black)}.kind-text{--kind:var(--green)}.kind-any{--kind:var(--blue)}.fn-head>.sig{margin:var(--fn-drop) 0 0 var(--inset);padding:calc(var(--row) / 4) calc(var(--row) / 2);font-size:11px;line-height:calc(var(--row) / 2);white-space:normal;color:var(--on-black);background:var(--blue);border:0;grid-column:1/-1;justify-self:start}@media (width>=900px){.fn{column-gap:var(--split-gap);grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;display:grid}.fn>.fn-head,.fn>.fn-body.split,.fn>.fn-body{display:contents}.fn-head>.rule-title{grid-area:1/1}.fn-head>.fn-kinds{grid-area:1/2}.fn-head>.sig{grid-area:2/1}.fn-body>.fn-pitch{margin-top:calc(var(--row) * 2);grid-area:3/1}.fn-body>.folder{margin-top:var(--fn-drop);grid-area:2/2/span 2}}.coda-list{border:0;border-top:1px solid var(--lg-rule);--ledger-cols:minmax(0, 1fr) calc(var(--row) * 3);background:0 0;gap:0;display:block}.coda-list li{background:0 0}.coda-list .coda-text{justify-content:flex-start;align-items:center;gap:4px var(--row);text-align:left;flex-flow:wrap;display:flex}.coda-list .coda-text b{min-width:14ch;font-family:var(--font-mono);font-size:12px}.coda-list .coda-icon{text-align:center}.renderer-tabs{background:0 0;border:0;align-items:end;gap:2px;overflow:visible}.r-tab{min-width:0;height:var(--row);padding:0 var(--row);color:var(--text);background:var(--surface-2);flex:0 auto;font-size:12px}.r-tab:hover{background:color-mix(in srgb, var(--blue) 22%, var(--paper))}.r-tab.is-active{color:var(--on-black);background:var(--black)}.fn-pitch .fn-claim em{color:inherit;font-style:normal}pre.code.holes-left,.r-pane.holes-left{padding:var(--row) var(--row) var(--row) calc(var(--row) * 2);font-size:12px;line-height:var(--row)}[class] [class] :is(p,li) em,[class] :is(p,li) em{font-style:normal}.graph-viz{min-height:0;padding:var(--row)}.ref-panes{gap:var(--row);grid-template-columns:minmax(0,1fr)}.ref-panes .ext-row{grid-template-columns:calc(var(--row) * 2) var(--ledger-cols)}.extends-pane-head[data-ledger-head],.extends-pane-head[data-ledger-head] :is(.extends-pane-name,.extends-pane-meta){font-size:15px}.extends-pane-head[data-ledger-head] .extends-pane-meta{font-size:12px}.folder-sheet--result :is(button,select,color-input,input:not([type=range],[type=checkbox],[type=radio])){box-sizing:border-box;height:var(--row);min-height:0;line-height:calc(var(--row) - 2px);vertical-align:top;margin-block:0;padding-block:0}.folder-sheet--result input[type=range]{height:var(--row);margin-block:0}.folder-sheet--result .demo>:not([class*=-stage]){min-height:var(--row);line-height:var(--row);margin:0;padding-block:0}.folder-sheet--result .demo>[class*=-stage]{padding-block:var(--row);row-gap:var(--row);margin:0}.folder-sheet--result .folder-body>*{row-gap:var(--row)}.folder-sheet--result :is(figcaption,[class$=-caption],[class$=-readout],[class$=-note]){min-height:var(--row);line-height:var(--row);margin-block:0;padding-block:0}.folder-sheet--result :is(.ref-ramp-step,.contrast-tile,.cbadge,.rank,.min-label,.min-sample,.step-cell,.ltile,.ntile,.rd-tile,.rd-result,.ramp-bar,.names-row,.order-swatch,.mix-strip,.stile,.rtile,.swatch-fr){box-sizing:border-box;padding-block:0}.folder-sheet--result :is(.cbadge,.min-label,.ramp-bar,.names-row){height:var(--row);line-height:var(--row)}.folder-sheet--result :is(.ref-ramp-step,.rank,.rd-tile,.order-swatch,.mix-strip){height:calc(var(--row) * 2)}.folder-sheet--result .step-cell{height:calc(var(--row) * 3)}.folder-sheet--result :is(.ltile,.ntile,.stile,.rtile,.swatch-fr){height:calc(var(--row) * 4)}.folder-sheet--result :is(.min-sample,.rd-result){height:calc(var(--row) * 5)}.folder-sheet--result :is(.ref-buttons,.readable-pool,.ramp-bars,.contrast-palette,.step-readout){border-block:0;margin-block:0;padding-block:0}.folder-sheet--result :is(.names-stage,.ramp-stage,.readable-stage,.order-stage)>*{margin-block:0}.folder-sheet--result .ramp-stage{align-items:start}.folder-sheet--result .names-row{font-size:15px}.folder-sheet--result .ext-layer{vertical-align:middle;height:20px;line-height:20px}.folder-sheet--result .ref-buttons>div,.folder-sheet--result .names-head{row-gap:0}.folder-sheet--result .ref-buttons>div>:not(button){min-height:var(--row);line-height:var(--row)}.folder-sheet--result .contrast-tile{flex-direction:column;justify-content:flex-start}.folder-sheet--result .contrast-tile .cbadge{align-self:flex-start;margin-top:auto}.folder-sheet--result :is(.closest-stage,.closest-target,.closest-ranked){align-content:start;align-items:start}.folder-sheet--result .min-card{outline-offset:-1px;border:0;outline:1px solid}.folder-sheet--result .step-scale{height:calc(var(--row) * 3)}.folder-sheet--result .lightness-caption{height:var(--row);align-items:center;display:flex}.folder-sheet--result .readable-pool{grid-auto-rows:calc(var(--row) * 2);align-items:stretch;row-gap:0}.folder-sheet--result .readable-pool .rd-tile{height:auto}.folder-sheet--result .mix-strip{height:calc(var(--row) * 3)}.folder-sheet--result :is(.rank,.rd-tile){transform:none}.folder-sheet--result .rd-tile.is-out{opacity:.3}.folder-sheet--result .poline-strip{grid-template-rows:repeat(3, var(--row));border:0}.folder-sheet--result .extend-result-line{min-height:var(--row)}.folder-sheet--result .closest-ranked .rank.winner{transform:none}.folder-sheet--result .extend-result.poline{column-gap:var(--row)}.folder-sheet--result .extend-result-line{line-height:var(--row);align-items:start}.folder-sheet--result .folder-body>*{--pp:inherit;--pp-text:inherit}.folder-sheet--result .folder-body>* [class*=-stage]{--pp:inherit;--pp-text:inherit;background:0 0;border:0}.folder-sheet--result .contrast-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.folder-sheet--result .contrast-tile{height:calc(var(--row) * 5)}.folder-sheet--result :is(.contrast-tile,.swatch-fr,.contrast-palette>span,.ltile,.ntile,.stile,.rtile,.rd-tile,.order-swatch){aspect-ratio:auto;width:auto;min-width:0}.folder-sheet--result .swatch-fr,.folder-sheet--result .swatch-fr:hover{transform:none}.folder-sheet--result .contrast-tile{grid-template-rows:var(--row) calc(var(--row) * 2) var(--row) var(--row);align-items:center;padding:0 10px;display:grid}.folder-sheet--result .contrast-tile :is(.ctop,.cbottom){white-space:nowrap;text-overflow:ellipsis;word-break:normal;overflow:hidden}.folder-sheet--result .contrast-tile .cbadge{height:20px;margin:0;padding:0 6px;line-height:18px}.folder-sheet--result .contrast-palette{background:0 0;border:0;gap:0;margin:0}.folder-sheet--result .contrast-palette>span{height:var(--row)}.folder-sheet--result .furthest-stage button.swatch-fr{height:calc(var(--row) * 3);padding:6px;line-height:normal}.folder-sheet--result .furthest-stage .swatch-fr.furthest:before{content:"odd one";white-space:nowrap;top:auto;bottom:6px}.folder-sheet--result em,.folder-sheet--result i{font-style:normal}.folder-sheet--result :where([style*=background]):not(.folder-body,.folder-sheet){box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--pp-text) 28%, var(--pp,var(--paper)))}.folder-sheet--result button:is(.stile,.rtile,.ntile,.ltile,.rd-tile,.order-swatch){height:calc(var(--row) * 2);line-height:normal}.folder-sheet--result button:is(.is-active,[aria-pressed=true],[aria-selected=true]):not([class*=tile],.swatch-fr,.order-swatch,.folder-tab){background:var(--pp-text);color:var(--pp)}.extend-grid{grid-template-rows:auto auto auto;row-gap:0}.extend-card{grid-row:span 3;grid-template-rows:subgrid;align-content:start;display:grid}@media (width<=899px){.extend-card{grid-row:auto;grid-template-rows:none}}.extend-card>.folder{align-self:start;margin-top:0}.folder-sheet--result .folder-body>*{padding-inline:var(--row)}.folder-sheet--result .demo>[class*=-stage]{padding-inline:0}.folder-sheet--result :is(.extends-pane,.ref-ramp,.contrast-row,.contrast-palette,.readable-pool,.readable-results,.names-rows,.order-swatches,.furthest-stage,.vivid-stage,.lightness-stage,.random-stage,.nth-stage,.step-readout,.poline-strip,.ramp-bars){margin-inline:calc(var(--row) * -1);border-inline:0}.folder-sheet--result .ramp-stage{gap:var(--row);grid-template-columns:minmax(0,1fr)}.folder-sheet--result .ramp-arrow{display:none}.folder-sheet--result .ramp-seed{flex-direction:row;justify-self:start;align-items:center;gap:10px;min-width:0}.folder-sheet--result .readable-pool{grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:calc(var(--row) * 2);border:0;gap:0;padding:0}.folder-sheet--result .readable-pool .rd-tile{align-items:flex-end;padding:0 0 4px}.folder-sheet--result .readable-results{--ledger-cols:minmax(0, 1fr) auto calc(16ch + 28px);margin-top:0;display:block}.folder-sheet--result .readable-results>.rd-result{min-height:calc(var(--row) * 2);border:0;padding:0}.folder-sheet--result .rd-result>*{align-content:center;margin:0;display:block}.folder-sheet--result .rd-result .rd-call{font-size:11px;line-height:1.4}.folder-sheet--result .rd-result .rd-sample{font-size:20px;line-height:var(--row);white-space:nowrap}.folder-sheet--result .rd-result .rd-meta{font-size:11px}.folder-sheet--result .rd-result.is-fail .rd-sample{white-space:normal;grid-column:span 2;font-size:12px}.folder-sheet--result .rd-result>*+*{border-left-color:color-mix(in srgb, currentColor 25%, var(--pp,var(--paper)))}.folder-sheet--result .readable-results>.rd-result{height:auto}.renderer-folder .r-pane{max-height:none;color:var(--pp-text);background-color:var(--pp);margin:0;display:block;overflow:visible}.renderer-folder .folder-body{overflow:visible}.folder-sheet--r-css{--pp:var(--black);--pp-text:var(--on-black)}.folder-sheet--r-json{--pp:var(--blue);--pp-text:var(--on-black)}.folder-sheet--r-w3{--pp:var(--green);--pp-text:var(--black)}.folder-sheet--r-tailwind{--pp:var(--red);--pp-text:var(--black)}.renderer-folder .r-pane{--pp:inherit;--pp-text:inherit}.folder-sheet--result .poline-strip{grid-template-rows:none;grid-auto-rows:var(--row);height:auto}.folder-sheet--result .extend-result-line{grid-template-columns:auto minmax(0,1fr);grid-auto-rows:var(--row);align-items:center;gap:0 10px;display:grid}.folder-sheet--result .extend-result-line>:first-child{white-space:nowrap;grid-column:1/-1;overflow-x:auto}.folder-sheet--result .vtile{box-sizing:border-box;aspect-ratio:auto;height:calc(var(--row) * 4)}.folder-sheet--result{--strip-line:color-mix(in srgb, var(--pp-text) 30%, var(--pp,var(--paper)))}.folder-sheet--result :is(.ramp-bars,.names-rows,.readable-pool,.contrast-palette,.vivid-stage,.lightness-stage,.random-stage,.nth-stage,.furthest-stage,.order-swatches,.ref-ramp,.poline-strip,.contrast-row,.sibling-stage,.closest-ranked){background-image:none;border:0;outline:0;gap:0}.folder-sheet--result :is(.ramp-bars,.names-rows,.readable-pool,.contrast-palette,.vivid-stage,.lightness-stage,.random-stage,.nth-stage,.furthest-stage,.order-swatches,.ref-ramp,.poline-strip,.contrast-row,.sibling-stage,.closest-ranked)>*{box-shadow:none;outline-offset:-2px;border:0}.folder-sheet--result :is(.ramp-bars,.names-rows)>:not(:last-child){box-shadow:inset 0 -1px 0 var(--strip-line)}.folder-sheet--result :is(.readable-pool,.contrast-palette,.vivid-stage,.lightness-stage,.random-stage,.nth-stage,.furthest-stage,.order-swatches,.ref-ramp,.sibling-stage,.closest-ranked)>*+*,.folder-sheet--result .poline-strip>:not(:nth-child(7n+1)){box-shadow:inset 1px 0 0 var(--strip-line)}.folder-sheet--result .poline-strip>:nth-child(n+8){box-shadow:inset 0 1px 0 var(--strip-line)}.folder-sheet--result .poline-strip>:nth-child(n+8):not(:nth-child(7n+1)){box-shadow:inset 1px 1px 0 var(--strip-line)}.folder-sheet--result .contrast-row>:not(:nth-child(3n+1)){box-shadow:inset 1px 0 0 var(--strip-line)}.folder-sheet--result .contrast-row>:nth-child(n+4){box-shadow:inset 0 1px 0 var(--strip-line)}.folder-sheet--result .contrast-row>:nth-child(n+4):not(:nth-child(3n+1)){box-shadow:inset 1px 1px 0 var(--strip-line)}.folder-sheet--result .folder-body :is(.extends-pane,.ref-ramp,.contrast-row,.contrast-palette,.readable-pool,.readable-results,.names-rows,.order-swatches,.furthest-stage,.vivid-stage,.lightness-stage,.random-stage,.nth-stage,.step-readout,.poline-strip,.ramp-bars){margin-inline:calc(var(--row) * -1)}.folder-sheet--result .closest-stage{row-gap:var(--row);grid-template-columns:minmax(0,1fr)}.folder-sheet--result .closest-arrow{display:none}.folder-sheet--result .closest-target{justify-self:start}.folder-sheet--result .folder-body .closest-ranked{margin-inline:calc(var(--row) * -1);grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:0}.folder-sheet--result .closest-ranked .rank{border-radius:0;width:auto;margin:0}.folder-sheet--result .folder-body .closest-ranked{grid-template-columns:none;grid-auto-columns:minmax(0,1fr)}.folder-sheet--result .closest-ranked .rank{aspect-ratio:auto;min-width:0;max-width:none}.folder-sheet--result .folder-body :is(.ref-css,.ref-stage>pre,.ref-stage>code){margin-inline:calc(var(--row) * -1)}.folder-sheet--result .ref-stage:has(>.ref-css:last-child){padding-bottom:0}.folder-sheet--result .ref-ramp{grid-template-columns:minmax(0,1fr);grid-auto-rows:var(--row)}.folder-sheet--result .ref-ramp-step{aspect-ratio:auto;height:var(--row);padding:0 var(--row);font-size:12px;line-height:var(--row);flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:1ch}.folder-sheet--result .ref-ramp>*+*{box-shadow:inset 0 1px 0 var(--strip-line)}.folder-sheet--result .folder-body .ref-buttons{background:0 0;border:0;padding:0;display:block}.folder-sheet--result .folder-body .ref-themes{gap:0 var(--row);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.folder-sheet--result .ref-themes .ui-card{width:calc(100% - 10px)}.ui-card-buttons{gap:calc(var(--row) / 2);display:flex}.folder-sheet--result .ui-card [style*=background]{box-shadow:none}.folder-sheet--result .ref-buttons .ui-card{--card-gap:calc(var(--row) / 2);--card-breath:6px;box-sizing:border-box;width:min(calc(100% - 10px), calc(var(--row) * 12));height:calc(var(--row) * 4)}.folder-sheet--result .ref-ramp-step{flex-direction:row;justify-content:flex-start}.folder-sheet--result .ref-ramp-step>span{order:-1;margin-right:auto}.folder-sheet--result .folder-body .min-stage{margin-inline:calc(var(--row) * -1);grid-template-columns:1fr 1fr;gap:0}.folder-sheet--result .min-sample--lines{padding-bottom:calc(var(--row) / 4);background-size:100% calc(100% - var(--row));background-repeat:no-repeat;align-items:end;background-image:repeating-linear-gradient(to bottom, transparent 0 calc(var(--row) - 1px), var(--line) calc(var(--row) - 1px) var(--row))!important}.folder-sheet--result .min-card{border:0;outline:0}.folder-sheet--result .min-card:nth-child(2n){box-shadow:inset 1px 0 0 var(--strip-line)}.folder-sheet--result .min-card:nth-child(n+3){border-top:1px solid var(--strip-line)}.folder-sheet--result .min-label{height:var(--row);padding:0 var(--row);line-height:var(--row);color:inherit;box-shadow:inset 0 -1px 0 var(--strip-line);background:0 0;border:0}.folder-sheet--result .min-sample{aspect-ratio:auto;height:calc(var(--row) * 4);padding:0 var(--row)}.folder-sheet--result .folder-body .sibling-stage{margin-inline:calc(var(--row) * -1);grid-auto-columns:minmax(0,1fr);gap:0}.folder-sheet--result .sibling-stage>.stile{outline-offset:-2px;margin:0}.folder-sheet--result .sibling-stage>button.stile{height:calc(var(--row) * 4);padding:0}.folder-sheet--result .mix-row{grid-template-columns:minmax(0,1fr)}.folder-sheet--result .folder-body .mix-strip{height:calc(var(--row) * 4);margin:0 0 var(--row);grid-area:1/1/auto/-1;gap:0}.folder-sheet--result .mix-strip>span{box-shadow:none;border:0}.folder-sheet--result .mix-strip>span+span{box-shadow:inset 1px 0 0 var(--strip-line)}.renderer-folder .folder-sheet:not(.is-front) .folder-body{max-height:calc(var(--row) * 4);overflow:hidden}.coda-list[data-ledger]>*{min-height:calc(var(--row) * 2);margin:0;padding-block:0}.folder-sheet--result .folder-body :is(.ref-ramp,.ref-buttons,.contrast-row,.contrast-palette,.readable-pool,.readable-results,.names-rows,.order-swatches,.furthest-stage,.vivid-stage,.lightness-stage,.random-stage,.nth-stage,.sibling-stage,.closest-ranked,.step-readout,.poline-strip,.ramp-bars,.mix-strip,.min-stage){margin-inline:0}.folder-sheet--result .names-head{align-items:center;gap:var(--row);flex-wrap:nowrap}.folder-sheet--result .names-schemes{flex:1;min-width:0}.folder-sheet--result :is(.step-cell,.min-label){background-color:var(--pp)}.folder-sheet--result .rd-result>*{background-color:#0000}.folder-sheet--result .step-cell:nth-child(2){background-color:color-mix(in srgb, var(--pp-text) 14%, var(--pp))}.ramp-bar .hex,.names-row code,.folder-sheet--result :is(.vtile,.ltile,.rtile,.ntile,.stile,.rank)>span:not([class]),.folder-sheet--result .swatch-fr .hex{display:none}.folder-sheet--result :is(.vivid-stage,.lightness-stage,.random-stage,.nth-stage,.sibling-stage,.furthest-stage),.folder-sheet--result :is(.vtile,.ltile,.rtile,.ntile,.stile,.swatch-fr){overflow:visible}.folder-sheet--result :is(.vtile.crown,.vtile.floor,.ltile.is-lightest,.ltile.is-darkest,.stile.is-anchor,.stile.is-pick,.rtile.picked,.ntile.picked,.swatch-fr.furthest):before{height:var(--row);line-height:var(--row);font-family:var(--font-mono);letter-spacing:0;white-space:nowrap;color:var(--pp-text);background:0 0;margin:0;padding:0;font-size:11px;position:absolute;inset:100% auto auto 0}.folder-sheet--result .readable-pool{grid-template-columns:none;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column}.folder-sheet--result .rd-result .rd-call{overflow-wrap:normal;word-break:normal;line-height:18px}.folder-sheet--result .readable-results{--ledger-cols:minmax(0, 1fr) max-content calc(15ch + 28px)}.folder-sheet--result :is(.readable-pool,.readable-results){box-shadow:inset 1px 0 0 color-mix(in srgb, var(--pp-text) 35%, var(--pp,var(--paper))), inset -1px 0 0 color-mix(in srgb, var(--pp-text) 35%, var(--pp,var(--paper)))}.folder-sheet--result .readable-pool{box-shadow:inset 1px 0 0 color-mix(in srgb, var(--pp-text) 35%, var(--pp,var(--paper))), inset -1px 0 0 color-mix(in srgb, var(--pp-text) 35%, var(--pp,var(--paper))), inset 0 1px 0 color-mix(in srgb, var(--pp-text) 35%, var(--pp,var(--paper)));outline:1px solid color-mix(in srgb, var(--pp-text) 35%, var(--pp,var(--paper)));outline-offset:-1px}.folder-sheet--result :is(.vtile.crown,.vtile.floor,.ltile.is-lightest,.ltile.is-darkest,.stile.is-anchor,.stile.is-pick,.rtile.picked,.ntile.picked,.swatch-fr.furthest):before{height:auto;color:var(--black);background:var(--on-black);z-index:3;padding:0 6px;line-height:20px;top:calc(100% + 4px);left:50%;transform:translate(-50%)}.folder-sheet--result .furthest-stage .swatch-fr.furthest:before{top:calc(100% + 4px);bottom:auto;left:50%;transform:translate(-50%)}.folder-sheet--result :is(.vtile.crown,.vtile.floor,.ltile.is-lightest,.ltile.is-darkest,.stile.is-anchor,.stile.is-pick,.rtile.picked,.ntile.picked):before,.folder-sheet--result .furthest-stage .swatch-fr.furthest:before{width:auto;height:var(--row);line-height:var(--row);text-align:center;text-overflow:ellipsis;padding:0 4px;padding:0 2px;font-size:10px;top:100%;left:0;right:0;overflow:hidden;transform:none}.folder-sheet--result :is(.vtile,.ltile,.stile,.rtile,.ntile){padding-bottom:6px}.folder-sheet--result :is(.rd-tile.is-out,.ltile.is-filtered,.swatch-fr.excluded){opacity:1;background-image:repeating-linear-gradient(135deg, var(--pp) 0 3px, transparent 3px 7px);outline:1px dashed var(--pp-text);outline-offset:-1px}.folder-sheet--result .step-scale .bar.dim{opacity:1;outline:1px dashed var(--pp-text);outline-offset:-1px;background:0 0}.folder-sheet--result :is(.ext-row--inherited,.ref-panes .ext-row--inherited){opacity:1;color:color-mix(in srgb, var(--pp-text) 55%, var(--pp));box-shadow:none;background:repeating-linear-gradient(to right, color-mix(in srgb, var(--pp-text) 45%, var(--pp)) 0 3px, var(--pp) 3px 6px) bottom / 100% 1px no-repeat, var(--pp)}.folder-sheet--result .ext-row--inherited *{color:inherit}.folder-sheet--result .contrast-tile .cbadge.is-fail,.folder-sheet--result .contrast-tile .cbadge.is-aalg{opacity:1;border-style:dashed}.r-tab em,.ref-modes button.is-active code,.ramp-bar .shade,.rd-result .rd-meta{opacity:1}.folder-sheet--result :is(.vivid-stage,.lightness-stage,.random-stage,.nth-stage,.sibling-stage,.furthest-stage){margin-bottom:var(--row)}.folder-sheet--result button:is(.stile,.rtile,.ntile,.ltile,.vtile){padding-bottom:6px}.folder-sheet--result :is(.contrast-tile .ctop,.contrast-tile .cbottom,.min-text span){opacity:1}.folder-sheet--result .order-swatch span{opacity:1;visibility:hidden}.folder-sheet--result .order-swatch:is(:hover,:focus-within) span{visibility:visible}.folder-sheet--result .demo>:is(.vivid-stage,.lightness-stage,.random-stage,.nth-stage,.sibling-stage,.furthest-stage){margin-bottom:var(--row)}.folder-sheet--result :is(.rd-tile.is-out,.ltile.is-filtered,.swatch-fr.excluded){background-image:repeating-linear-gradient(135deg,currentColor 0 1.5px,#0000 1.5px 6px)!important}.folder-sheet--result .min-card .min-sample .min-text span{opacity:1}.hero{--first-inset:calc(max(0px, (100% - var(--max)) / 2) + var(--gutter))}@media (width<=640px){.folder-sheet--result .readable-results{--ledger-cols:minmax(0, 1fr)}.folder-sheet--result .readable-results>.rd-result>*{border-left:0;grid-column:2}.folder-sheet--result .rd-result .rd-sample{white-space:normal}.renderer-folder .folder-body,.renderer-folder .r-pane{overflow-x:auto}}body{--section-space:calc(var(--row) * 8);--sub-space:clamp(56px, 6vw, calc(var(--row) * 3))}.graph,.ref-feature,.readable-feature,.ramp-feature,.extends-feature,.renderers,.extend,.coda,.sections-head{padding-top:0;padding-bottom:var(--section-space);border-top:0}.sections-head{padding-bottom:0}.fn,.fn-panels>.fn{padding-top:var(--sub-space);padding-bottom:var(--sub-space)}main.sections{padding-bottom:calc(var(--section-space) - var(--sub-space))}.feature-sub{margin-top:calc(var(--sub-space) * 2);border-top:0;padding-top:0}.hero.first-screen{padding-bottom:var(--section-space)}@media (width<=640px){.folder-sheet--code{--tab-left:80px}}.folder-sheet--result .folder-body>*>.stub{--stub-ink:color-mix(in srgb, var(--pp-text) 50%, transparent);--perf:calc(var(--row) - 1px);width:auto;min-width:0;min-height:0;margin:0 calc(var(--row) * -1) calc(var(--row) * -1);padding:calc(var(--row) * 2) var(--row) var(--row);align-content:flex-start;place-self:stretch stretch;align-items:flex-start;gap:var(--row) calc(var(--row) / 2);font:12px/var(--row) var(--font-code);background:linear-gradient(to right, var(--stub-ink) 50%, transparent 0) left var(--perf) / 8px 1px repeat-x,  repeating-linear-gradient(to bottom, transparent 0 calc(var(--row) - 1px), var(--hair) calc(var(--row) - 1px) var(--row)) left var(--row) / 100% calc(100% - var(--row)) no-repeat,  linear-gradient(var(--pp), var(--pp)) left var(--perf) / 100% calc(100% - var(--perf)) no-repeat;flex-wrap:wrap;display:flex;position:relative}.folder-sheet--result .folder-body>:has(>.stub){--perf-y:-100px;--punch:transparent 7px, #000 7.5px;-webkit-mask:radial-gradient(circle at 0 var(--perf-y), var(--punch)), radial-gradient(circle at 100% var(--perf-y), var(--punch));-webkit-mask-composite:source-in;mask:radial-gradient(circle at 0 var(--perf-y), var(--punch)), radial-gradient(circle at 100% var(--perf-y), var(--punch));mask-composite:intersect}.stub :is(.names-head,.names-schemes){flex-wrap:wrap;align-items:flex-start}.folder-sheet--result .folder-body>:not(p){row-gap:0}.folder-sheet--result .folder-body>:not(p)>:not(.stub){margin-block:0}.folder-sheet--result .folder-body>.demo>[class*=-stage]{padding-block:0}.folder-sheet--result .folder-body>:not(p)>*+:not(.stub){margin-top:var(--row)}.folder-sheet--result .folder-body>*>.stub>*{margin-block:0}.folder-sheet--result .folder-body>.demo>:is(.nth-stage,.sibling-stage,.lightness-stage){padding-bottom:var(--row)}.folder-sheet--result .folder-body>.demo>.step-stage{padding-top:var(--row)}.step-controls.stub>label,.stub>.names-count{flex:100%}.folder-sheet--result .rd-result :is(.rd-call,.rd-meta){line-height:var(--row)}.why-stage{margin:0;display:grid}.why-sample{height:calc(var(--row) * 4);padding:0 var(--row);font:600 32px/1 var(--font-text);letter-spacing:-.02em;align-items:center;display:flex}.folder-sheet--result .folder-body>*>.contrast-inks{justify-content:space-between}.contrast-inks>label{align-items:center;gap:calc(var(--row) / 3);display:inline-flex}.contrast-inks>label:last-child,.contrast-inks>label:last-child color-input{flex-direction:row-reverse}.closest-ruler{height:calc(var(--row) * 2);border-bottom:1px solid var(--pp-text);font:11px/var(--row) var(--font-code);position:relative}.cr-mark{justify-items:center;display:grid;position:absolute;bottom:0;translate:-50%}.cr-mark b{opacity:.6;font-weight:400}.cr-mark i{padding:0 4px;font-style:normal;position:relative}.cr-mark i:after{content:"";background:currentColor;width:1px;height:6px;position:absolute;bottom:0;left:50%}.cr-mark.is-pick i{color:var(--pp);background:var(--pp-text)}.cr-mark.is-pick b{opacity:1}.cr-free{height:calc(var(--row) * 2);border-left:1px dashed color-mix(in srgb, var(--pp-text) 60%, transparent);position:absolute;bottom:0}.closest-readout{font:12px/var(--row) var(--font-code);margin:0}.closest-free>input[type=range]{flex:100%}.closest-colors,.closest-colors .demo{--pp:var(--red);--pp-text:var(--black)}.closest-colors{--tab-left:calc(var(--row) * 4)}.folder:has(>.closest-colors)>.folder-sheet--code{--tab-left:calc(var(--row) * 8.5)}@media (width<=640px){.closest-colors{--tab-left:80px}.folder:has(>.closest-colors)>.folder-sheet--code{--tab-left:176px}}.closest-swatches{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:calc(var(--row) * 2);display:grid}.cs-cell{font:11px/var(--row) var(--font-code);align-items:end;padding:0 6px;display:flex}.cs-cell.is-pick{outline:2px solid var(--pp-text);outline-offset:-2px}.closest-pick{align-items:center;gap:calc(var(--row) / 3);display:inline-flex}.ffr-ruler{height:calc(var(--row) * 4);border-bottom:1px solid var(--pp-text);font:11px/var(--row) var(--font-code);position:relative}.ffr-tick{opacity:.6;position:absolute;bottom:0;translate:-50%}.ffr-tick:after{content:"";background:currentColor;width:1px;height:6px;position:absolute;bottom:0;left:50%}.ffr-target,.ffr-swatch{border:1px solid var(--pp-text);width:18px;height:18px;position:absolute;translate:-50%}.ffr-target{bottom:calc(var(--row) * 3);width:12px;height:12px;rotate:45deg}.ffr-swatch.is-pick{outline:2px solid var(--pp-text);outline-offset:2px}.ffr-readout{font:12px/var(--row) var(--font-code);margin:0}.ffr-stub>label{align-items:center;gap:calc(var(--row) / 3);display:inline-flex}.min-sizes,.min-sizes .demo{--pp:var(--green);--pp-text:var(--black)}.min-sizes{--tab-left:calc(var(--row) * 4)}.folder:has(>.min-sizes)>.folder-sheet--code{--tab-left:calc(var(--row) * 8.5)}@media (width<=640px){.min-sizes{--tab-left:80px}.folder:has(>.min-sizes)>.folder-sheet--code{--tab-left:176px}}.ms-scale{font:11px/var(--row) var(--font-code);border-bottom:1px solid var(--pp-text);justify-content:space-between;display:flex}.ms-scale span{padding:0 4px}.ms-scale .is-body{text-decoration:underline}.ms-scale .is-pick{color:var(--pp);background:var(--pp-text)}.ms-sample{height:calc(var(--row) * 4);padding-top:calc(var(--row) / 2);overflow:hidden}.ms-heading{font-family:var(--font-display);margin:0;line-height:1.1}.ms-heading.is-none{opacity:.3;text-decoration:line-through}.ms-body{margin:calc(var(--row) / 3) 0 0;font-size:16px;line-height:1.4}.ms-readout{font:12px/var(--row) var(--font-code);margin:0}.ms-stub{font:11px/var(--row) var(--font-code)}.ms-stub>input[type=range]{flex:auto}.min-aa{font-size:2rem;line-height:1.1}.folder-sheet--result .step-cell{height:var(--row);justify-content:center;align-items:baseline;gap:calc(var(--row) / 3);font:12px/var(--row) var(--font-code);flex-direction:row;padding:0}.folder-sheet--result .step-key{font:inherit;letter-spacing:0;color:inherit;opacity:.7}.folder-sheet--result .step-result{font:inherit;color:inherit;font-weight:700}.folder-sheet--result .step-cell.error .step-result{font:inherit;opacity:.7;font-style:normal}.folder-sheet--result .vivid-stage{grid-template-columns:repeat(6,minmax(0,1fr))}.folder-sheet--result .folder-body .demo>.vivid-stage{margin-bottom:var(--row)}.range2{height:var(--row);min-width:0;position:relative}.range2>input[type=range]{pointer-events:none;width:100%;position:absolute;inset:0}.range2>input[type=range]+input[type=range],.range2>input[type=range]+input[type=range]:is(:active,:focus-visible){background:0 0}.range2>input[type=range]:first-of-type:is(:active,:focus-visible){background:linear-gradient(currentColor, currentColor) left var(--in) bottom 0 / 1px var(--lo-h) no-repeat, linear-gradient(currentColor, currentColor) right var(--in) bottom 0 / 1px var(--hi-h) no-repeat, var(--ticks-img) left var(--in) bottom 0 / var(--ruler) 7px no-repeat, linear-gradient(var(--track-ink), var(--track-ink)) left var(--in) bottom 0 / var(--ruler) 1px no-repeat}.range2>input[type=range]::-webkit-slider-thumb{pointer-events:auto}.range2>input[type=range]::-moz-range-thumb{pointer-events:auto}.range2-band{z-index:1;pointer-events:none;background:currentColor;height:3px;position:absolute;bottom:0}.vivid-stub{font:11px/var(--row) var(--font-code);flex-wrap:wrap}.vivid-stub .range2{flex:8rem}.vivid-val{min-width:9ch}.folder-sheet--result .vtile.is-out{opacity:.2}.folder-sheet--result .lightness-stage{grid-template-columns:repeat(6,minmax(0,1fr))}.folder-sheet--result .folder-body .demo>.lightness-stage{margin-bottom:var(--row)}.folder-sheet--result .ltile.is-out{opacity:.2}.lightness-stub{flex-wrap:wrap;justify-content:space-between}.folder-sheet--result .random-stage{grid-template-columns:repeat(6,minmax(0,1fr))}.folder-sheet--result .folder-body .demo>.random-stage{margin-bottom:var(--row)}.random-stub{font:11px/var(--row) var(--font-code);flex-wrap:wrap}.random-stub .random-seed-lbl{text-transform:none;letter-spacing:0}.folder-sheet--result .random-stub .random-seed-input{height:var(--row);padding:0 calc(var(--row) / 2);font:12px/var(--row) var(--font-code);color:var(--black);background:var(--paper);border:0;outline:0}.folder-sheet--result .random-stub .random-seed-input:focus-visible{box-shadow:inset 0 0 0 1px var(--black)}.nth-readout{font:12px/var(--row) var(--font-code);margin:0}.nth-stub{font:11px/var(--row) var(--font-code)}.nth-stub>input[type=range]{flex:auto}.folder-sheet--result .folder-body .demo>.nth-table{margin:0 calc(var(--row) * -1) var(--row);width:calc(100% + var(--row) * 2);max-width:none;font:12px/var(--row) var(--font-code)}.nth-table tr.is-pick td{color:var(--pp);background:var(--pp-text)}.nth-modes,.nth-modes .demo{--pp:var(--yellow);--pp-text:var(--black)}.nth-modes{--tab-left:calc(var(--row) * 4)}.folder:has(>.nth-modes)>.folder-sheet--code{--tab-left:calc(var(--row) * 8.5)}@media (width<=640px){.nth-modes{--tab-left:80px}.folder:has(>.nth-modes)>.folder-sheet--code{--tab-left:176px}}.folder-sheet--result .folder-body .demo>.nm-ramp{margin:0 calc(var(--row) * -1) var(--row);grid-template-columns:repeat(8,minmax(0,1fr));display:grid}.nm-ramp>span{height:var(--row);position:relative}.nm-ramp b{font:400 10px/var(--row) var(--font-code);text-align:center;white-space:nowrap;position:absolute;top:100%;left:0;right:0}.folder-sheet--result .folder-body .demo>.nm-card{box-sizing:border-box;height:calc(var(--row) * 3);padding:calc(var(--row) / 2) var(--row);background:var(--nm-bg);color:var(--nm-text);border:1px solid var(--nm-border);margin:0}.nm-card p{line-height:var(--row);margin:0}.nm-title{font-family:var(--font-display);font-size:1.2rem}.nm-body{font-size:.9rem}.nm-muted{font:11px/var(--row) var(--font-code);color:var(--nm-muted)}.nm-switch{flex:none}.sibling-colors,.sibling-colors .demo{--pp:var(--green);--pp-text:var(--black)}.sibling-colors{--tab-left:calc(var(--row) * 4)}.folder:has(>.sibling-colors)>.folder-sheet--code{--tab-left:calc(var(--row) * 8.5)}@media (width<=640px){.sibling-colors{--tab-left:80px}.folder:has(>.sibling-colors)>.folder-sheet--code{--tab-left:176px}}.folder-sheet--result .folder-body .demo>.sib-table{margin:0 calc(var(--row) * -1) var(--row);width:calc(100% + var(--row) * 2);max-width:none;font:12px/var(--row) var(--font-code)}.sib-table tbody tr{cursor:pointer}.sib-table tbody tr:hover td{background:color-mix(in srgb, var(--pp-text) 12%, var(--pp))}.sib-table tr:is(.is-anchor,.is-pick) td{color:var(--pp);background:var(--pp-text)}.sib-table tr.is-anchor td{background:color-mix(in srgb, var(--pp-text) 60%, var(--pp))}.sib-table tr:focus-visible{outline:2px solid var(--pp-text);outline-offset:-2px}.readable-stage .readable-pool{grid-auto-rows:calc(var(--row) * 4);grid-template-rows:none;height:auto}.readable-stage .readable-pool>.rd-tile{height:calc(var(--row) * 4)}.rdx{margin:var(--row) 0}.rdx-row+.rdx-row{margin-top:var(--row)}.rdx-call{height:var(--row);font:12px/var(--row) var(--font-code);color:inherit;white-space:nowrap;text-overflow:ellipsis;background:0 0;padding:0;display:block;overflow:hidden}.rdx-sample{justify-content:space-between;align-items:center;gap:var(--row);height:calc(var(--row) * 2);padding:0 var(--row);display:flex}.rdx-text{font-family:var(--font-display);font-size:1.25rem}.rdx-meta{font:11px/var(--row) var(--font-code);white-space:nowrap}.folder-sheet--result :is(.vtile.crown,.vtile.floor,.ltile.is-lightest,.ltile.is-darkest,.stile.is-anchor,.stile.is-pick,.rtile.picked,.ntile.picked){outline:2px solid var(--on-black);outline-offset:-2px}.folder-sheet--result .stub select.stub-select{appearance:none;padding-right:calc(var(--row) + 4px);background:linear-gradient(45deg, transparent 50%, var(--black) 50%) right 14px center / 5px 5px no-repeat, linear-gradient(-45deg, transparent 50%, var(--black) 50%) right 9px center / 5px 5px no-repeat, var(--paper);margin-left:auto}.folder-sheet--result .folder-body .order-stage>.order-table{margin:0 calc(var(--row) * -1) var(--row);width:calc(100% + var(--row) * 2);max-width:none;font:12px/var(--row) var(--font-code)}.order-table tr{position:relative}.coda-grid{--cell-line:color-mix(in srgb, currentColor 22%, transparent);margin:var(--row) 0 0 var(--inset);box-shadow:inset 1px 1px 0 var(--cell-line);grid-template-columns:repeat(4,minmax(0,1fr));padding:0;list-style:none;display:grid}.coda-grid li{box-sizing:border-box;height:calc(var(--row) * 5);padding:calc(var(--row) / 2) calc(var(--row) / 2);box-shadow:inset -1px -1px 0 var(--cell-line);flex-direction:column-reverse;justify-content:flex-end;display:flex}.coda-grid .coda-icon{height:var(--row);align-items:center;display:flex}.coda-grid .coda-icon svg{width:auto;height:var(--row);display:block}.coda-grid .coda-text{flex-direction:column;display:flex}.coda-grid .coda-text b{font:600 12px/var(--row) var(--font-code)}.coda-grid .coda-text span{font-size:13px;line-height:calc(var(--row) * .75);color:var(--muted)}@media (width<=900px){.coda-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.coda-grid li{cursor:default;position:relative}.coda-grid li:focus-visible{outline:2px solid var(--black);outline-offset:-2px}.coda-grid .coda-code{z-index:1;padding:calc(var(--row) / 4) calc(var(--row) / 2);font-size:11px;line-height:calc(var(--row) * .8);white-space:pre;background-position:0 calc(var(--row) / 2);opacity:0;pointer-events:none;margin:0;transition:opacity .15s;position:absolute;inset:0;overflow:hidden}.coda-grid li:is(:hover,:focus,:focus-within) .coda-code{opacity:1}@media (prefers-reduced-motion:reduce){.coda-grid .coda-code{transition:none}}.coda-grid pre.code.coda-code{padding:calc(var(--row) / 4) calc(var(--row) / 2);background-image:none;-webkit-mask:none;mask:none}.coda-grid pre.code.coda-code:before,.coda-grid pre.code.coda-code:after{content:none;display:none}.folder-sheet--result .folder-body>*>.mix-stub,.folder-sheet--result .mix-stage>.mix-stub{flex-wrap:nowrap;justify-content:space-between}.mix-stub color-input.mix-b{flex-direction:row-reverse}.mix-stub .mix-space{align-items:center;gap:calc(var(--row) / 3);white-space:nowrap;display:inline-flex}.mix-stub .mix-space select.stub-select{width:calc(11ch + var(--row));flex:none;min-width:0;margin-left:0}.mix-stub>*{flex:none}.extend-poline-picker{width:min(100%, calc(var(--row) * 8));margin:0 auto var(--row);cursor:grab;touch-action:none;--poline-picker-line-color:var(--pp-text);--poline-picker-bg-color:var(--pp);--poline-picker-line-width:.5;display:block}.extend-poline-picker:focus-visible{outline:2px solid var(--pp-text);outline-offset:4px}.folder-sheet--result .folder-body .fn-polar>.fn-polar-chart,.fn-polar-chart{width:min(100%, calc(var(--row) * 8));height:calc(var(--row) * 8);margin:0 auto var(--row);display:block;overflow:visible}.fn-polar-chart .ring{fill:none;stroke:var(--pp-text);stroke-width:1px;vector-effect:non-scaling-stroke}.fn-polar-chart .ring.faint{stroke-dasharray:2 3;opacity:.5}.fn-polar-chart .axis{stroke:var(--pp-text);stroke-width:1.5px;vector-effect:non-scaling-stroke}.fn-polar-chart .axis-end{fill:var(--pp-text)}.fn-polar-chart .drop{stroke:var(--pp-text);stroke-width:1px;stroke-dasharray:2 2;opacity:.7;vector-effect:non-scaling-stroke}.fn-polar-chart .dot{stroke:var(--pp-text);stroke-width:1px;vector-effect:non-scaling-stroke}.fn-polar-chart .win{fill:none;stroke:var(--pp-text);stroke-width:2px;vector-effect:non-scaling-stroke}.fn-polar-readout{align-items:center;gap:calc(var(--row) / 3);font:12px/var(--row) var(--font-code);margin:0;display:flex}.fn-polar-stub{font:11px/var(--row) var(--font-code)}.fn-polar-stub>input[type=range]{flex:auto}.fn-polar-stub b{text-align:right;min-width:4ch}@media (width<=899px){.fn-head{grid-template-columns:minmax(0,1fr)}.fn-head>.fn-kinds{margin:calc(var(--row) / 2) 0 0 var(--inset);grid-area:2/1;align-self:start}.fn-kinds li{white-space:nowrap}.fn-head>.sig{margin-top:var(--row);grid-row:3}}@media (width<=640px){.folder-sheet--result [data-ledger]>:not([data-ledger-skip]){grid-template-columns:calc(var(--row) * 1.25) var(--ledger-cols,minmax(0, 1fr))}.folder-sheet--result [data-ledger]>:not([data-ledger-skip]):before{padding:0 6px;font-size:10px}.folder-sheet--result :is([data-ledger],.ledger,.extends-rows){font-size:11px}.folder-sheet--result .extends-rows--keys{--ledger-cols:calc(12ch + 12px) 8px minmax(0, 1fr)}.folder-sheet--result .ledger :is(th,td){padding-inline:6px}.folder-sheet--result .folder-body .min-stage{grid-template-columns:minmax(0,1fr)}.folder-sheet--result .min-card:nth-child(2n){box-shadow:none}.folder-sheet--result .min-card+.min-card{border-top:1px solid var(--strip-line)}.folder-sheet--result .step-cell{height:calc(var(--row) * 2);flex-direction:column;align-items:center;gap:0}.folder-sheet--result :is(.vivid-stage,.lightness-stage,.random-stage){row-gap:var(--row);grid-template-columns:repeat(3,minmax(0,1fr))}.folder-sheet--result .folder-body .sibling-stage{row-gap:var(--row);grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row}.folder-sheet--result .sibling-stage>button.stile,.folder-sheet--result :is(.vtile,.ltile,.rtile){height:calc(var(--row) * 3)}.sib-table td:last-child{white-space:nowrap}.rdx-sample{flex-direction:column;justify-content:center;align-items:flex-start;gap:0}.rdx-text{font-size:1rem;line-height:var(--row);white-space:nowrap}.folder-sheet--result .folder-body :is(.ref-themes,.extends-cards){gap:var(--row) 0;grid-template-columns:minmax(0,1fr)}.folder-sheet--result :is(.ref-buttons,.ref-themes) span:not([class*=ui-card]){white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.folder-sheet--result .folder-body>*>.mix-stub,.folder-sheet--result .mix-stage>.mix-stub{flex-wrap:wrap}.mix-stub color-input.mix-b{margin-left:auto}.folder-sheet--result .extend-result-line{flex-wrap:wrap}.folder-sheet--result .extend-result .extend-result-line{height:auto;min-height:var(--row);flex-wrap:wrap;align-items:center;display:flex}.folder-sheet--result .extend-result .extend-result-line>.extend-result-label{white-space:normal;line-height:var(--row);flex:100%;overflow:visible}.cr-mark:not(.is-pick) b{visibility:hidden}.folder-sheet--result .contrast-row{grid-template-columns:repeat(2,minmax(0,1fr))}}.hc .hc-rule{fill:none;stroke:var(--text,var(--black));stroke-width:.8px}.hc .hc-thin{stroke-width:.4px}.hc .hc-pick{stroke:var(--text,var(--black));stroke-width:.8px}.hc .hc-mark{fill:var(--paper);stroke:var(--text,var(--black));stroke-width:1px}.hc .hc-band{stroke:var(--text,var(--black));stroke-width:.3px}.hc .hc-tick,.hc .hc-hub{fill:var(--paper);stroke:var(--text,var(--black));stroke-width:.8px}.hc .hc-label{font-family:var(--font-code);letter-spacing:.04em;fill:var(--text,var(--black));font-size:9.5px}.hc .hc-hit{fill:#0000;stroke:none;cursor:pointer;transition:fill .15s}.hc a:is(:hover,:focus-visible) .hc-hit:not(.hc-hit-label){fill:color-mix(in srgb, var(--text,var(--black)) 10%, transparent)}.hc a:focus-visible{outline:none}.hc a:focus-visible .hc-hit{stroke:var(--text,var(--black));stroke-width:1.5px}.hero.hero--centered{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.hero--centered .hero-illustration{width:min(100%,440px);max-width:none;margin:0 auto}.hero--centered .hero-text{max-width:40rem;margin-top:calc(var(--row) * 3)}.hero--centered .hero-text h1,.hero--centered .hero-text .deck{margin-left:auto;margin-right:auto}.hero-illustration>.hero-emblem{box-sizing:content-box;width:calc(var(--row) * 6);z-index:2;--logo-fill:var(--paper);height:auto;margin:0;padding:0;line-height:0;display:block;position:absolute;top:2%;left:50%;translate:calc(1px - 50%) calc(-50% - 3px)}.hero-illustration>.hero-emblem .logo{width:100%;height:auto;display:block;position:static;inset:auto}.hc .hc-pie{animation:12s linear infinite hc-pie-turn}.hc .hc-pie path{stroke:var(--text,var(--black));stroke-width:.6px}.hc .hc-pie-rim{fill:none;stroke:var(--text,var(--black));stroke-width:1px}@keyframes hc-pie-turn{to{rotate:360deg}}@media (prefers-reduced-motion:reduce){.hc .hc-pie{animation:none}}.hero-illustration .hi-center.is-hidden{opacity:0}.hc .hc-pie-eye{fill:var(--paper);stroke:var(--text,var(--black));stroke-width:.8px}.hero-glow-clip{z-index:-1;pointer-events:none;position:absolute;top:0;left:0;right:0;overflow:clip}.hero-glow{aspect-ratio:1;pointer-events:none;background:conic-gradient(var(--glow));width:260vmax;mask-image:radial-gradient(circle, transparent 0 var(--hole,180px), black calc(var(--hole,180px) + 1px));position:absolute;translate:-50% -50%}.hero.hero--centered{isolation:isolate}.hc .hc-label-band{fill:var(--paper)}.hc .hc-key{fill:var(--paper);stroke:var(--text,var(--black));stroke-width:.8px}.hc .hc-key-label{font-family:var(--font-code);fill:var(--text,var(--black));font-size:7px;font-weight:700}.hc .hc-mark-halo{fill:none;stroke:var(--paper);stroke-width:2.6px;stroke-linejoin:miter}.folder-sheet--result .nav-schema-stage{padding:var(--row) 0}.nav-schema{width:540px;max-width:100%;height:auto;color:var(--pp-text,var(--black));font-family:var(--font-code);margin-inline:auto;font-size:12px;display:block}.nav-schema rect{fill:var(--pp,var(--paper));stroke:currentColor;stroke-width:1.5px}.nav-schema text{fill:currentColor}.nav-schema path{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:square}.nav-schema .nav-schema-link{stroke-dasharray:2 3}.nav-schema .nav-schema-word{font-weight:700}.nav-schema .nav-schema-head{font-family:var(--font-text);font-size:13px;font-weight:700}.nav-schema .nav-schema-note{opacity:.6;font-size:11px}