: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: rgba(0, 0, 0, .6);--rule: rgba(0, 0, 0, .12);--hair: rgba(0, 0, 0, .07);--accent: #2d60a5;--accent-hover: #133380;--gutter: clamp(20px, 4vw, 40px);--max: 72rem}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--surface);color:var(--text);font-family:var(--font-sans);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}::selection{background:var(--accent);color:var(--surface)}html{scrollbar-color:rgba(0,0,0,.28) var(--surface)}html::-webkit-scrollbar{width:12px;height:12px}html::-webkit-scrollbar-track{background:var(--surface)}html::-webkit-scrollbar-thumb{background:#00000038;border:3px solid var(--surface);border-radius:8px}html::-webkit-scrollbar-thumb:hover{background:var(--accent)}html::-webkit-scrollbar-corner{background:var(--surface)}a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}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);font-weight:400;letter-spacing:-.015em;margin:0}.top{display:flex;justify-content:space-between;align-items:center;padding:24px var(--gutter);max-width:var(--max);margin:0 auto}.top-mark{font-family:var(--font-display);font-size:20px;color:var(--text);text-decoration:none;letter-spacing:-.01em}.top-nav{display:flex;gap:22px;font-size:15px}.top-nav a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px}.top-nav a:hover,.top-nav a[aria-current=page]{color:var(--accent);border-color:var(--accent)}.hero{max-width:var(--max);margin:0 auto;padding:clamp(40px,8vw,90px) var(--gutter) clamp(40px,6vw,70px);display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,4vw,56px);align-items:center}.hero-illustration{position:relative;aspect-ratio:1 / 1;width:100%}.hero-illustration svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}.hi-ring{transform-origin:0 0;animation:hi-spin 60s linear infinite}@keyframes hi-spin{to{transform:rotate(360deg)}}.hi-ring .hi-dot{transition:r .22s ease,stroke-width .22s ease}.hi-ring .hi-dot.is-winner{stroke:var(--text);stroke-width:2}.hi-ring .hi-curve{fill:none;stroke:var(--text);stroke-width:1.5;stroke-dasharray:4 4;opacity:.55}.hi-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--rule);cursor:pointer;z-index:1}.hi-center::part(trigger){width:100%;height:100%;padding:0;border:none;border-radius:0}.hi-center::part(chip){width:100%;height:100%;border-radius:0}.hi-center::part(output){display:none}.hi-pill{position:absolute;left:50%;top:50%;transform:translate(-50%,24px);display:flex;align-items:center;pointer-events:auto}.hi-fn{font-family:var(--font-mono);font-size:13px;letter-spacing:.01em;background:var(--surface);color:var(--text);border:1px solid var(--rule);border-radius:999px;padding:6px 28px 6px 12px;cursor:pointer;appearance:none;-webkit-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) 50%,calc(100% - 10px) 50%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}.hi-fn:hover{border-color:var(--text)}.hi-fn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(max-width:899px){.hero{grid-template-columns:1fr}.hero-illustration{max-width:420px;margin:0 auto}}@media(prefers-reduced-motion:reduce){.hi-ring{animation:none}}.kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 1.5em}.hero h1{font-size:clamp(44px,6.5vw,80px);line-height:.9;letter-spacing:-.02em;max-width:16ch;margin-bottom:.6em}.hero .deck{max-width:60ch;font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--text)}.hero .deck em{color:var(--accent);font-style:italic}.install{margin-top:36px;display:inline-flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--rule);border-radius:8px;background:#ffffff80;font-family:var(--font-mono);font-size:16px}.install.big{margin-top:28px;font-size:18px;padding:14px 16px}.install code{color:var(--text)}.install .prompt{color:var(--accent);margin-right:6px}.copy{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;background:var(--text);color:var(--surface);border:none;padding:6px 10px;border-radius:4px;cursor:pointer;transition:background .15s}.copy:hover{background:var(--accent)}.copy.copied{background:#2c7a3f}.install-note{margin-top:12px;font-size:14px;color:var(--muted)}.install-note a{color:inherit}.graph{max-width:var(--max);margin:0 auto;padding:clamp(48px,7vw,90px) var(--gutter);border-top:1px solid var(--rule);display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4vw,56px);align-items:start}.graph-text h2{font-size:clamp(28px,3.4vw,40px);line-height:1.12;margin-bottom:.7em}.graph-text p{font-size:17px;line-height:1.6;max-width:48ch}.graph-text code{font-size:.9em;background:var(--surface-2);padding:1px 6px;border-radius:3px}.graph-controls{display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:22px;padding-top:18px;border-top:1px solid var(--hair)}.graph-controls label{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;color:var(--muted)}.graph-controls input[type=color]{width:36px;height:36px;border:1px solid var(--rule);border-radius:4px;padding:0;background:none;cursor:pointer}.graph-controls color-input{display:inline-flex;cursor:pointer}.graph-controls label{align-items:center}.graph-controls button{font-family:var(--font-mono);font-size:12px;background:none;border:1px solid var(--rule);padding:8px 14px;border-radius:4px;cursor:pointer;color:var(--text)}.graph-controls button:hover{background:var(--text);color:var(--surface);border-color:var(--text)}.graph-viz{padding:18px;min-height:420px;overflow:auto}.graph-viz svg{width:100%;height:auto;max-width:100%}@media(max-width:899px){.graph{grid-template-columns:1fr}}.sections-head{max-width:var(--max);margin:0 auto;padding:clamp(60px,8vw,100px) var(--gutter) 0;border-top:1px solid var(--rule)}.sections-head h2{font-size:clamp(28px,3.4vw,40px);line-height:1.12;margin-bottom:.4em}.sections-head p{font-size:17px;color:var(--muted);max-width:56ch;margin:0}.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;display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 14px}.fn-head h3{font-size:clamp(30px,3.8vw,44px);line-height:1.1;margin:0}.fn-head .sig{display:inline-block;font-size:10px;letter-spacing:.01em;color:var(--muted);background:var(--surface-2);border:1px solid var(--rule);padding:2px 9px;border-radius:999px;white-space:nowrap;position:relative;top:-.6em}.fn-body{display:grid;gap:clamp(20px,2.4vw,32px)}@media(min-width:900px){.fn-body{grid-template-columns:5fr 7fr;grid-template-areas:"pitch demo" "code  demo";align-items:start}.fn-pitch{grid-area:pitch}.code{grid-area:code;align-self:start}.demo{grid-area:demo;align-self:start}}.fn-pitch{max-width:50ch}.fn-pitch .fn-claim{font-family:var(--font-display);font-size:clamp(22px,2.4vw,30px);line-height:1.18;letter-spacing:-.01em;margin:0 0 18px;color:var(--text)}.fn-pitch .fn-claim em{color:var(--accent);font-style:italic}.fn-pitch .fn-detail{font-size:16px;line-height:1.6;color:var(--muted);margin:0}.fn-pitch .fn-detail code{font-family:var(--font-mono);font-size:.9em;background:var(--surface-2);padding:1px 5px;border-radius:3px;color:var(--text)}.ramp-feature-text h2,.mix-feature-text h2,.typo-feature-text h2,.extends-feature-text h2,.renderers-head h2{font-family:var(--font-display);font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-.01em;margin:0 0 18px;color:var(--text)}.ramp-feature-text h2 em,.mix-feature-text h2 em,.typo-feature-text h2 em,.extends-feature-text h2 em,.renderers-head h2 em{color:var(--accent);font-style:italic}.ramp-feature-text>p,.mix-feature-text>p,.typo-feature-text>p,.extends-feature-text>p,.renderers-head>p{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 24px}.code{margin:0;font-family:var(--font-mono);font-size:13.5px;line-height:1.6;background:#1d1c1c;color:#f0e9da;padding:18px 20px;border-radius:6px;white-space:pre;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:rgba(240,233,218,.28) #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:6px}.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);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}.contrast-row{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:6px;overflow:hidden}.contrast-tile{aspect-ratio:3 / 4;display:flex;flex-direction:column;justify-content:space-between;padding:12px;font-family:var(--font-display)}.contrast-tile .ctop{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;opacity:.75;word-break:break-all}.contrast-tile .cbig{font-size:clamp(24px,3vw,40px);line-height:1}.contrast-tile .cbottom{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;opacity:.85;word-break:break-all}.contrast-tile .cbadge{align-self:flex-start;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;padding:2px 7px;border-radius:999px;border:1px solid currentColor;color:currentColor;background:transparent;line-height:1.4}.contrast-tile .cbadge.is-aalg{opacity:.7}.contrast-tile .cbadge.is-fail{opacity:.5;text-decoration:line-through}.contrast-palette{margin-top:8px;display:grid;grid-template-columns:repeat(8,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:6px;overflow:hidden}.contrast-palette>span{aspect-ratio:4 / 1;display:block}.closest-stage{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:18px;padding:20px;background:var(--surface-2);border:1px solid var(--rule);border-radius:8px}.closest-target{display:flex;align-items:center;gap:12px}.closest-target .swatch{width:64px;height:64px;border:1px solid var(--rule);border-radius:4px}.closest-picker{display:inline-flex;cursor:pointer}.closest-arrow{font-family:var(--font-display);font-size:28px;color:var(--accent)}.closest-ranked{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.closest-ranked .rank{position:relative;aspect-ratio:1 / 1.4;display:flex;flex-direction:column;justify-content:flex-end;padding:6px;border-radius:4px;font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;color:#ffffffd9;text-shadow:0 1px 1px rgba(0,0,0,.5)}.closest-ranked .rank.winner{outline:2px solid var(--accent);outline-offset:-2px;transform:translateY(-3px);transition:transform .25s}.closest-ranked .rank .num{font-family:var(--font-display);font-size:18px;line-height:.9;color:#fffffff2}.furthest-stage{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:6px;overflow:hidden}.furthest-stage .swatch-fr{aspect-ratio:3 / 5;position:relative;cursor:pointer;padding:8px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s}.furthest-stage .swatch-fr:hover{transform:scale(1.04);z-index:2}.furthest-stage .swatch-fr.anchor:after,.furthest-stage .swatch-fr.furthest:before{position:absolute;top:6px;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;padding:2px 6px;border-radius:2px}.furthest-stage .swatch-fr.anchor:after{content:"anchor";right:6px;background:#ffffffd9;color:var(--text)}.furthest-stage .swatch-fr.furthest:before{content:"furthest";left:6px;background:var(--accent);color:var(--surface)}.furthest-stage .swatch-fr .hex{font-family:var(--font-mono);font-size:10px;color:#ffffffd9;text-shadow:0 1px 2px rgba(0,0,0,.5);align-self:flex-end}.furthest-readout{margin-top:12px;display:flex;gap:24px;flex-wrap:wrap;font-family:var(--font-mono);font-size:12px;color:var(--muted)}.furthest-readout b{font-family:var(--font-mono);font-weight:400;color:var(--text)}.min-stage{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.min-card{border:1px solid var(--rule);border-radius:6px;overflow:hidden}.min-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;padding:8px 12px;border-bottom:1px solid var(--rule);background:var(--surface-2);color:var(--muted)}.min-sample{aspect-ratio:3 / 2.4;display:flex;align-items:center;justify-content:center;padding:14px;text-align:center;font-family:var(--font-display);font-size:clamp(15px,1.3vw,18px);line-height:1.4}.min-sample .min-text{display:inline-block}.step-stage{padding:20px;background:var(--surface-2);border:1px solid var(--rule);border-radius:8px;display:flex;flex-direction:column;gap:18px}.step-scale{display:flex;align-items:flex-end;gap:8px;height:80px}.step-scale .bar{flex:1;background:var(--rule);border-radius:2px;position:relative;transition:background .15s,transform .15s;cursor:pointer}.step-scale .bar .lbl{position:absolute;top:-18px;left:50%;transform:translate(-50%);font-family:var(--font-mono);font-size:10px;color:var(--muted);white-space:nowrap}.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{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}.step-controls label{display:grid;grid-template-columns:90px 1fr 60px;align-items:center;gap:10px}.step-lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}.step-val{font-family:var(--font-mono);font-size:12px;color:var(--text);text-align:right}.step-controls input[type=range]{width:100%;accent-color:var(--accent)}.step-readout{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:6px;overflow:hidden}.step-cell{background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:4px}.step-cell:nth-child(2){background:var(--surface-2)}.step-key{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--muted)}.step-result{font-family:var(--font-display);font-size:20px;line-height:1.1;color:var(--text)}.step-cell.error .step-result{font-family:var(--font-mono);font-size:13px;color:var(--muted);font-style:italic}@media(max-width:899px){.step-controls{grid-template-columns:1fr}.step-controls label{grid-template-columns:80px 1fr 50px}}.vivid-stage{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:6px;overflow:hidden}.vivid-stage .vtile{aspect-ratio:3 / 5;position:relative;padding:8px;display:flex;flex-direction:column;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:#ffffffd9;text-shadow:0 1px 1px rgba(0,0,0,.4)}.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{position:absolute;top:6px;left:6px;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;color:var(--surface);padding:2px 6px;border-radius:2px}.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);font-size:16px;line-height:1;color:#fffffff2}.random-caption{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.random-seed-lbl{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.08em}.random-seed-input{font-family:var(--font-mono);font-size:12px;padding:4px 8px;border:1px solid var(--rule);background:var(--surface);color:var(--text);border-radius:3px;width:14ch;letter-spacing:0;text-transform:none}.random-seed-input:focus{outline:1px solid var(--accent);outline-offset:1px}.random-shuffle{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border:1px solid var(--rule);background:transparent;color:var(--text);border-radius:3px;cursor:pointer}.random-shuffle:hover{background:var(--text);color:var(--surface)}.random-stage{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:6px;overflow:hidden}.random-stage .rtile{aspect-ratio:3 / 5;position:relative;padding:8px;display:flex;flex-direction:column;justify-content:flex-end;font-family:var(--font-mono);font-size:10px;color:#ffffffd9;text-shadow:0 1px 1px rgba(0,0,0,.4);transition:outline-color .18s ease}.random-stage .rtile.picked{outline:2px solid var(--accent);outline-offset:-2px;z-index:2}.random-stage .rtile.picked:before{content:"picked";position:absolute;top:6px;left:6px;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;color:var(--surface);padding:2px 6px;border-radius:2px;background:var(--accent)}@media(max-width:899px){.random-stage{grid-template-columns:repeat(4,1fr)}}.nth-caption{display:flex;align-items:center;gap:10px;margin-bottom:10px}.nth-index-lbl{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;color:var(--fg-dim)}.nth-index-input{width:60px;font-family:var(--font-mono);font-size:13px;padding:4px 8px;border:1px solid var(--rule);border-radius:4px;background:var(--surface);color:var(--fg);text-align:center}.nth-index-input:focus{outline:2px solid var(--accent);outline-offset:-1px}.nth-stage{display:grid;grid-template-columns:repeat(var(--nth-cols, 9),1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:6px;overflow:hidden}.nth-stage .ntile{aspect-ratio:3 / 5;position:relative;padding:8px;display:flex;flex-direction:column;justify-content:flex-end;font-family:var(--font-mono);font-size:10px;color:#ffffffd9;text-shadow:0 1px 1px rgba(0,0,0,.4);transition:outline-color .18s ease}.nth-stage .ntile.picked{outline:2px solid var(--accent);outline-offset:-2px;z-index:2}.nth-stage .ntile.picked:before{content:attr(data-label);position:absolute;top:6px;left:6px;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;color:var(--surface);padding:2px 6px;border-radius:2px;background:var(--accent)}.nth-presets{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}.nth-presets button{font-family:var(--font-mono);font-size:12px;padding:4px 12px;border:1px solid var(--rule);border-radius:4px;background:var(--surface);color:var(--fg);cursor:pointer;transition:background .15s ease,border-color .15s ease}.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(max-width:899px){.nth-stage{grid-template-columns:repeat(5,1fr)}}.ramp-feature,.mix-feature{max-width:var(--max);margin:0 auto;padding:clamp(60px,8vw,100px) var(--gutter);border-top:1px solid var(--rule)}.mix-feature-body{display:grid;gap:clamp(20px,2.4vw,32px);align-items:start}@media(min-width:900px){.mix-feature-body{grid-template-columns:5fr 7fr}}.mix-feature-text{max-width:56ch}.mix-feature-text h2{font-size:clamp(28px,3.4vw,40px);line-height:1.12;margin:0 0 .5em}.mix-feature-text>p{font-size:17px;line-height:1.6;color:var(--text);margin:0 0 24px}.mix-feature-text code:not(.code code){font-family:var(--font-mono);font-size:.9em;background:var(--surface-2);padding:1px 6px;border-radius:3px}.mix-stage{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);padding:clamp(20px,3vw,32px);background:var(--surface-2);border:1px solid var(--rule);border-radius:12px}.mix-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(12px,2vw,20px)}.mix-row hdr-color-input{--hdr-color-input-size: 64px;width:64px;height:64px;border-radius:50%;overflow:hidden;border:1px solid var(--rule);cursor:pointer;display:block}.mix-strip{display:flex;gap:6px;height:64px;min-width:0}.mix-strip span{flex:1 1 0;border-radius:8px;border:1px solid var(--rule)}.mix-space{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:.04em}.mix-space select{font-family:var(--font-mono);font-size:13px;background:var(--surface);color:var(--text);border:1px solid var(--rule);border-radius:6px;padding:6px 28px 6px 10px;cursor:pointer;appearance:none;-webkit-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) 50%,calc(100% - 10px) 50%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}.mix-space select:hover{border-color:var(--text)}.mix-space select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.ramp-feature-body{display:grid;gap:clamp(20px,2.4vw,32px);align-items:start}@media(min-width:900px){.ramp-feature-body{grid-template-columns:5fr 7fr}.ramp-stage{align-self:start}}.ramp-feature-text{max-width:56ch}.ramp-feature-text h2{font-size:clamp(28px,3.4vw,40px);line-height:1.12;margin:0 0 .5em}.ramp-feature-text>p{font-size:17px;line-height:1.6;color:var(--text);margin:0 0 24px}.ramp-feature-text code:not(.code code){font-family:var(--font-mono);font-size:.9em;background:var(--surface-2);padding:1px 6px;border-radius:3px}.ramp-stage{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:clamp(20px,3vw,36px);padding:clamp(20px,3vw,32px);background:var(--surface-2);border:1px solid var(--rule);border-radius:12px}.ramp-seed{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:120px}.ramp-seed hdr-color-input{--hdr-color-input-size: 96px;width:96px;height:96px;border-radius:50%;overflow:hidden;border:1px solid var(--rule);cursor:pointer;display:block}.ramp-seed code{font-family:var(--font-mono);font-size:13px;color:var(--text)}.ramp-seed-lbl{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:.04em}.ramp-arrow{font-family:var(--font-display);font-size:28px;line-height:1;color:var(--muted);-webkit-user-select:none;user-select:none}.ramp-bars{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;border:1px solid var(--rule);min-width:0}.ramp-bar{height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;transition:background-color .2s ease}.ramp-bar .shade{opacity:.75}.ramp-bar .hex{opacity:.9}.ramp-code{margin:0;font-size:13px}@media(max-width:720px){.ramp-stage{grid-template-columns:1fr;justify-items:center}.ramp-arrow{transform:rotate(90deg)}.ramp-bars{width:100%;max-width:320px}}.typo-feature{max-width:var(--max);margin:0 auto;padding:clamp(60px,8vw,100px) var(--gutter);border-top:1px solid var(--rule)}.typo-feature-body{display:grid;gap:clamp(20px,2.4vw,32px);align-items:start}@media(min-width:900px){.typo-feature-body{grid-template-columns:5fr 7fr}.typo-stage{align-self:start}}.typo-feature-text{max-width:56ch}.typo-feature-text h2{font-size:clamp(28px,3.4vw,40px);line-height:1.12;margin:0 0 .5em}.typo-feature-text>p{font-size:17px;line-height:1.6;color:var(--text);margin:0 0 24px}.typo-feature-text code:not(.code code){font-family:var(--font-mono);font-size:.9em;background:var(--surface-2);padding:1px 6px;border-radius:3px}.typo-stage{display:grid;gap:clamp(12px,1.6vw,20px);padding:clamp(28px,4vw,44px);background:var(--surface-2);border:1px solid var(--rule);border-radius:12px}.typo-stage figcaption{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:8px}.typo-sample{font-family:var(--font-display);color:var(--text);margin:0}.typo-sample--heading{font-size:clamp(28px,4vw,44px);font-weight:700;line-height:1;letter-spacing:-.02em}.typo-sample--hero{font-size:clamp(44px,6.5vw,72px);font-weight:700;line-height:1;letter-spacing:-.02em}.extends-feature{max-width:var(--max);margin:0 auto;padding:clamp(60px,8vw,100px) var(--gutter);border-top:1px solid var(--rule)}.extends-feature-body{display:grid;gap:clamp(20px,2.4vw,32px);align-items:start}@media(min-width:900px){.extends-feature-body{grid-template-columns:5fr 7fr}.extends-stage{align-self:start}}.extends-feature-text{max-width:56ch}.extends-feature-text h2{font-size:clamp(28px,3.4vw,40px);line-height:1.12;margin:0 0 .5em}.extends-feature-text>p{font-size:17px;line-height:1.6;color:var(--text);margin:0 0 24px}.extends-feature-text code:not(.code code){font-family:var(--font-mono);font-size:.9em;background:var(--surface-2);padding:1px 6px;border-radius:3px}.extends-stage{display:grid;gap:12px}.extends-stage figcaption{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.extends-pane{background:var(--surface);border:1px solid var(--rule);border-radius:8px;overflow:hidden;font-family:var(--font-mono);font-size:13px;box-shadow:0 1px 0 var(--rule)}.extends-pane-head{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--surface-2);border-bottom:1px solid var(--rule);font-size:12px;letter-spacing:.04em}.extends-pane-name{font-weight:500;color:var(--text)}.extends-pane-meta{color:var(--muted);font-size:11px}.extends-pane-meta code{background:transparent;padding:0;color:var(--text)}.extends-rows{padding:4px 0}.ext-row{display:grid;grid-template-columns:9ch 22px 1fr;align-items:center;gap:12px;padding:6px 16px}.ext-row--override{opacity:1}.ext-row--inherited{opacity:.4}.ext-key{color:var(--text)}.ext-swatch{width:18px;height:18px;border-radius:3px;border:1px solid var(--rule);justify-self:center}.ext-val{color:var(--text)}.ext-resolved{font-style:italic;margin-left:6px;color:var(--muted)}.renderers{max-width:var(--max);margin:0 auto;padding:clamp(60px,8vw,100px) var(--gutter);border-top:1px solid var(--rule)}.renderers-head{margin-bottom:32px}.renderers-head h2{font-size:clamp(28px,3.4vw,40px);line-height:1.12;margin-bottom:.5em}.renderers-head p{font-size:17px;line-height:1.6;max-width:64ch;color:var(--text)}.renderer-tabs{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:6px 6px 0 0;overflow:hidden}.r-tab{flex:1;min-width:120px;background:var(--surface-2);border:none;padding:12px 16px;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--muted);cursor:pointer;text-align:center;transition:background .15s,color .15s}.r-tab em{font-style:italic;opacity:.7}.r-tab:hover{color:var(--text)}.r-tab.is-active{background:#1d1c1c;color:#f0e9da}.renderer-panes{position:relative}.r-pane{display:none;margin:0;background:#1d1c1c;color:#f0e9da;font-family:var(--font-mono);font-size:13px;line-height:1.55;padding:22px 24px;border-radius:0 0 6px 6px;max-height:480px;overflow:auto;white-space:pre}.r-pane.is-active{display:block}.renderer-source{margin-top:24px;border-top:1px solid var(--hair);padding-top:18px}.renderer-source summary{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);cursor:pointer;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);margin:0 auto;padding:clamp(60px,8vw,100px) var(--gutter);border-top:1px solid var(--rule)}.extend-head{margin-bottom:32px}.extend-head h2{font-size:clamp(28px,3.4vw,40px);line-height:1.12;margin-bottom:.5em}.extend-head p{font-size:17px;line-height:1.6;max-width:64ch}.extend-head code{font-size:.9em;background:var(--surface-2);padding:1px 6px;border-radius:3px}.extend-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,36px)}.extend-card{border:1px solid var(--rule);border-radius:8px;background:var(--surface-2);padding:24px;display:flex;flex-direction:column;gap:14px}.extend-card h3{font-size:22px;line-height:1.2;margin:0}.extend-card>p{font-size:15px;line-height:1.55;margin:0;color:var(--text)}.extend-card .code{font-size:12.5px;padding:14px 16px}.extend-result{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--font-mono);font-size:12px;margin:0;padding-top:8px}.extend-result-label{color:var(--muted);font-family:var(--font-mono);font-size:12px}.extend-result-swatch{display:inline-block;width:28px;height:28px;border-radius:4px;border:1px solid var(--rule)}.extend-result code{font-size:13px}.extend-result.poline{flex-direction:column;align-items:stretch;gap:10px}.extend-result-line{display:flex;align-items:center;gap:10px;margin:0}.poline-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:0;border-radius:4px;overflow:hidden;border:1px solid var(--rule);height:48px}.poline-strip>span{display:block;width:100%;height:100%}@media(max-width:899px){.extend-grid{grid-template-columns:1fr}}.reactivity{max-width:var(--max);margin:0 auto;padding:clamp(48px,6vw,80px) var(--gutter);border-top:1px solid var(--rule)}.reactivity h2{font-size:clamp(24px,2.8vw,32px);line-height:1.12;margin-bottom:.5em}.reactivity p{font-size:17px;line-height:1.65;max-width:64ch}.reactivity code{font-size:.9em;background:var(--surface-2);padding:1px 6px;border-radius:3px}.coda{max-width:var(--max);margin:0 auto;padding:clamp(48px,6vw,80px) var(--gutter);border-top:1px solid var(--rule)}.coda h2{font-size:clamp(28px,3.4vw,36px);margin-bottom:.6em}.coda p{max-width:64ch;color:var(--muted);font-size:17px;margin-bottom:28px}.coda-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:6px;overflow:hidden}.coda-list li{background:var(--surface);padding:16px 18px;display:flex;align-items:center;gap:14px}.coda-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.coda-list b{font-family:var(--font-mono);font-weight:400;font-size:14px;color:var(--text)}.coda-text span{font-size:14px;color:var(--muted);line-height:1.4}.coda-icon{flex:0 0 auto;color:var(--text);opacity:.85;display:inline-flex;align-items:center}.coda-icon svg{display:block}.outro{max-width:var(--max);margin:0 auto;padding:clamp(60px,8vw,100px) var(--gutter);border-top:1px solid var(--rule)}.outro h2{font-size:clamp(32px,4.5vw,56px);line-height:1.1;max-width:20ch;margin-bottom:.7em}.outro-links{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:18px 28px;font-size:15px}.outro-links a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px}.outro-links a:hover{color:var(--accent);border-color:var(--accent)}.foot{max-width:var(--max);margin:0 auto;padding:24px var(--gutter) 36px;display:flex;justify-content:space-between;border-top:1px solid var(--rule);font-size:13px;color:var(--muted)}@media(max-width:899px){.top-nav{gap:14px;font-size:14px}.closest-stage{grid-template-columns:1fr}.closest-arrow{transform:rotate(90deg);justify-self:start}.closest-ranked{grid-template-columns:repeat(4,1fr)}.min-stage{grid-template-columns: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)}}