:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--fg:var(--lightningcss-light,#15151c)var(--lightningcss-dark,#f2f2f7);--fg-dim:var(--lightningcss-light,#5a5a6b)var(--lightningcss-dark,#a0a0b4);--paper:var(--lightningcss-light,#f7f7fb)var(--lightningcss-dark,#0d0d12);--panel:var(--lightningcss-light,#fff)var(--lightningcss-dark,#17171f);--line:var(--lightningcss-light,#e2e2ec)var(--lightningcss-dark,#2a2a36);--strong:var(--lightningcss-light,#15151c)var(--lightningcss-dark,#f2f2f7);--outline:var(--lightningcss-light,#000)var(--lightningcss-dark,#fff);--strong-fg:var(--lightningcss-light,#fff)var(--lightningcss-dark,#15151c);--focus:var(--lightningcss-light,#1b1bd6)var(--lightningcss-dark,#b7a8ff);--radius:14px;--shell:min(68rem, 100% - 2rem);--font:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono:ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}html{-webkit-text-size-adjust:100%}body{background:var(--paper);min-height:100dvh;color:var(--fg);font-family:var(--font);flex-direction:column;margin:0;font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.55;display:flex}a{color:inherit;text-underline-offset:.2em}:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip{position:absolute;inset-inline-start:-999px}.skip:focus{inset-inline-start:1rem;z-index:10;background:var(--panel);border-radius:8px;padding:.5rem .75rem;top:1rem}.site-header{width:var(--shell);flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin-inline:auto;padding-block:1rem;display:flex}.site-header nav{flex-wrap:wrap;gap:.25rem 1rem;margin-inline-end:auto;display:flex}@media not (min-width:34rem){.site-header{grid-template-columns:auto auto;row-gap:.5rem;display:grid}.site-header .wordmark{grid-column:1}.site-header .theme{grid-column:2;justify-self:end}.site-header nav{grid-column:1/-1}}.site-header nav a{color:var(--fg-dim);border-bottom:2px solid #0000;padding:.25rem 0;text-decoration:none}.site-header nav a:hover{color:var(--fg)}.site-header nav a[aria-current]{color:var(--fg);border-bottom-color:var(--fg)}.wordmark{letter-spacing:-.02em;align-items:center;gap:.6rem;font-size:1.15rem;font-weight:700;text-decoration:none;display:inline-flex}.wordmark-dots{grid-template-columns:repeat(5,6px);gap:2px;display:inline-grid}.wordmark-dots i{background:var(--tint);border-radius:2px;block-size:6px;display:block}.theme{margin-inline-start:auto}.theme fieldset{border:1px solid var(--line);border-radius:999px;gap:2px;margin:0;padding:2px;display:flex}.theme button{font:inherit;color:var(--fg-dim);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:.25rem .7rem;font-size:.8rem;font-weight:600}.theme button[aria-pressed=true]{background:var(--strong);color:var(--strong-fg)}main{width:var(--shell);flex-direction:column;flex:1;gap:clamp(1.25rem,3vw,2rem);margin-inline:auto;padding-block:.5rem 2.5rem;display:flex}.site-footer{border-top:1px solid var(--line);color:var(--fg-dim);font-size:.9rem}.site-footer p{width:var(--shell);margin-inline:auto;padding-block:1.25rem}h1{letter-spacing:-.03em;margin:0 0 .5rem;font-size:clamp(1.75rem,1.2rem + 2.4vw,2.75rem);line-height:1.1}h2{letter-spacing:-.01em;margin:0 0 .5rem;font-size:1.15rem}.hint,.picker-hint,.picker-note,.share-note{color:var(--fg-dim);margin:0;font-size:.9rem}.flash{color:var(--fg-dim);background:var(--lightningcss-light,#ececf2)var(--lightningcss-dark,#1e1e28);border-radius:999px;grid-column:1/-1;justify-self:center;margin:0;padding:.5rem .9rem;font-size:.9rem}.test{flex:1;grid-template-columns:minmax(0,1fr) minmax(0,20rem);align-content:center;align-items:center;gap:1rem clamp(1rem,4vw,3rem);display:grid}@media not (min-width:48rem){.test{grid-template-columns:minmax(0,1fr);justify-items:center}}.stage{text-align:center}.prompt{color:var(--fg-dim);text-transform:lowercase;letter-spacing:.08em;margin:0}.glyph,.number{-webkit-text-stroke:2px var(--line);paint-order:stroke fill}.glyph[data-empty],.number[data-empty]{color:#0000;-webkit-text-stroke-color:var(--outline)}.glyph[data-empty]{-webkit-text-stroke-width:4px}.glyph{--ink:var(--fg);letter-spacing:-.04em;color:var(--ink);view-transition-name:glyph;margin:0;font-size:clamp(8rem,30vw,17rem);font-weight:800;line-height:1;transition:color .12s ease-out}.picker{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);gap:.85rem;inline-size:100%;max-inline-size:22rem;padding:clamp(1rem,2.5vw,1.5rem);display:grid}.picker h2{margin:0}.picker[aria-busy=true]{opacity:.6}color-field{gap:.6rem;inline-size:100%;display:grid}.spectrum{gap:.55rem;display:grid}.slider{gap:.1rem;display:grid}.slider span{color:var(--fg-dim);font-size:.8rem}.slider input[type=range]{appearance:none;cursor:ew-resize;background:0 0;block-size:1.9rem;inline-size:100%;margin:0}.slider input[type=range]::-webkit-slider-runnable-track{border:1px solid var(--line);background:var(--track);border-radius:8px;block-size:1.5rem}.slider input[type=range]::-moz-range-track{border:1px solid var(--line);background:var(--track);border-radius:8px;block-size:1.5rem}.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:2px solid var(--fg);background:var(--paper);border-radius:6px;block-size:1.9rem;inline-size:.85rem;margin-block-start:-.25rem}.slider input[type=range]::-moz-range-thumb{border:2px solid var(--fg);background:var(--paper);border-radius:6px;block-size:1.9rem;inline-size:.85rem}color-field[data-unset] .range-sat,color-field[data-unset] .range-light{--track:transparent}color-field[data-unset] .color-value{color:var(--fg-dim)}.range-hue{--track:linear-gradient(to right, red, #ff0, #0f0, #0ff, #00f, #f0f, red)}.range-sat{--track:linear-gradient(to right, hsl(var(--h) 0% var(--l)), hsl(var(--h) 100% var(--l)))}.range-light{--track:linear-gradient(to right, hsl(var(--h) var(--s) 0%), hsl(var(--h) var(--s) 50%), hsl(var(--h) var(--s) 100%))}.color-value{font-family:var(--mono);border:1px solid var(--line);border-inline-start:6px solid var(--tint,transparent);border-radius:8px;padding:.25rem .55rem;font-size:.85rem}button,.button{font:inherit;border:1px solid var(--line);color:var(--fg);cursor:pointer;text-align:center;background:var(--lightningcss-light,#fff)var(--lightningcss-dark,#21212b);border-radius:10px;padding:.65rem 1rem;font-weight:600;text-decoration:none}:is(button,.button):hover:not(:disabled){border-color:var(--fg-dim)}:is(button,.button):disabled{opacity:.45;cursor:not-allowed}button.primary,.button{background:var(--strong);color:var(--strong-fg);border-color:#0000;font-size:1.05rem}.strip ol{flex-wrap:wrap;justify-content:center;gap:.25rem;margin:0;padding:0;list-style:none;display:flex}.strip a{border:1px solid #0000;border-radius:10px;align-items:center;gap:.4rem;padding:.35rem .55rem;text-decoration:none;display:flex}.strip a:hover{border-color:var(--line)}.strip a[aria-current]{border-color:var(--fg-dim)}.strip-digit{font-size:1.15rem;font-weight:800}.strip-box{border:1px dashed var(--line);background:var(--tint,transparent);border-radius:5px;block-size:1.15rem;inline-size:1.15rem}.strip-box.is-set{border-style:solid;border-color:color-mix(in oklab, var(--tint) 70%, var(--line))}.share{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);gap:.75rem;padding:clamp(1rem,2.5vw,1.5rem);display:grid}.copy{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.copy label{inline-size:100%;color:var(--fg-dim);font-size:.85rem}.copy input{font:inherit;font-family:var(--mono);border:1px solid var(--line);background:var(--paper);color:var(--fg);border-radius:10px;flex:18rem;padding:.55rem .7rem;font-size:.85rem}.share-links{flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.share-links a,.share-links button{border:1px solid var(--line);background:var(--paper);color:var(--fg);border-radius:999px;padding:.5rem .9rem;font-size:.9rem;font-weight:600;text-decoration:none;display:inline-block}.share-preview{border-radius:var(--radius);border:1px solid var(--line);block-size:auto;inline-size:100%}.danger{justify-self:start}.danger button{color:var(--fg-dim);background:0 0;border-style:dashed;padding:.4rem .8rem;font-size:.85rem}.numbers{grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem .5rem;margin:0;padding:0;list-style:none;display:grid}@media not (min-width:48rem){.numbers{grid-template-columns:repeat(2,minmax(0,1fr))}}.numbers li{text-align:center;justify-items:center;gap:.1rem;display:grid}.number{--ink:var(--fg);color:var(--ink);font-size:clamp(2.75rem,8vw,4.5rem);font-weight:800;line-height:1}.number-hex{font-family:var(--mono);color:var(--fg-dim);font-size:.8rem}.swatch{background:var(--tint);border:1px solid var(--line);border-radius:6px;block-size:1.4rem;inline-size:1.4rem;display:inline-block}.compare,.popular{gap:.6rem;display:grid}.agreement{margin:0}.agreement strong{font-size:2rem}.compare-grid,.popular-list{gap:.4rem;margin:0;padding:0;list-style:none;display:grid}:is(.compare-grid,.popular-list) li{align-items:center;gap:.35rem;display:flex}.compare-grid{grid-template-columns:repeat(auto-fit,minmax(6rem,1fr))}.compare-digit,.popular-digit{inline-size:1.25rem;font-weight:800}.cta{justify-self:start;margin:0}.prose{max-inline-size:60ch}.prose h2{margin-block-start:2rem}.prose li{margin-block-end:.35rem}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}::view-transition-old(glyph){animation-duration:.18s}::view-transition-new(glyph){animation-duration:.18s}