*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-top:0;margin-bottom:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}@font-face{font-family:Solway;src:url(/fonts/Solway-300.woff2)format("woff2");font-weight:300;font-display:swap;font-style:normal}@font-face{font-family:Solway;src:url(/fonts/Solway-400.woff2)format("woff2");font-weight:400;font-display:swap;font-style:normal}@font-face{font-family:Solway;src:url(/fonts/Solway-500.woff2)format("woff2");font-weight:500;font-display:swap;font-style:normal}@font-face{font-family:Solway;src:url(/fonts/Solway-700.woff2)format("woff2");font-weight:700;font-display:swap;font-style:normal}@font-face{font-family:Solway;src:url(/fonts/Solway-900.woff2)format("woff2");font-weight:900;font-display:swap;font-style:normal}:root{--color-black:#000;--color-darkest:#222;--color-darkest-contrast-3:#6e6e6e;--color-darkest-contrast-45:#8f8f8f;--color-dark:#444;--color-dark-contrast-3:#8f8f8f;--color-dark-contrast-45:#b3b3b3;--color-white:#fff;--color-lightest:#efefef;--color-lightest-contrast-3:#888;--color-lightest-contrast-45:#666;--color-light:#ccc;--color-light-contrast-3:#707070;--color-light-contrast-45:#555;--border-radius-sm:.3rem;--border-radius-md:.8rem;--border-radius-lg:1rem}[data-theme=light]{--color-bg-page:var(--color-white);--color-text:var(--color-light-contrast-45);--color-text-heading:var(--color-darkest);--color-ui:var(--color-lightest-contrast-3);--color-focus:var(--color-darkest);--button-bg-color:var(--color-light-contrast-3);--button-bg-color-hover:var(--color-light-contrast-45);--button-border-color:var(--color-light-contrast-3);--button-text-color:var(--color-lightest);--input-bg-color:var(--color-lightest);--input-text-color:var(--color-dark);--panel-color-bg:var(--color-light);--swatch-hex-text-color:var(--color-black);--swatch-hex-text-outline:var(--color-white);--swatch-name-text-color:var(--color-darkest);--swatch-name-bg:var(--color-lightest)}[data-theme=dark]{--color-bg-page:var(--color-black);--color-text:var(--color-dark-contrast-45);--color-text-heading:var(--color-lightest);--color-ui:var(--color-darkest-contrast-3);--color-focus:var(--color-lightest);--button-bg-color:var(--color-dark-contrast-45);--button-bg-color-hover:var(--color-dark-contrast-3);--button-border-color:var(--color-dark-contrast-45);--button-text-color:var(--color-darkest);--input-bg-color:var(--color-darkest);--input-text-color:var(--color-lightest);--panel-color-bg:var(--color-dark);--swatch-hex-text-color:var(--color-white);--swatch-hex-text-outline:var(--color-black);--swatch-name-text-color:var(--color-lightest);--swatch-name-bg:var(--color-dark)}.actions-panel{background:var(--panel-color-bg);grid-template-areas:"intro""search""toggle";justify-content:center;align-items:center;gap:1rem;margin-bottom:2rem;padding:2rem 1rem 1rem;display:grid}.actions-panel p{text-wrap:pretty;grid-area:intro;font-size:1.2rem;font-weight:500;line-height:1.4rem}@media not (max-width:25rem){.actions-panel{grid-template-columns:1fr auto;grid-template-areas:"intro intro""search toggle";column-gap:max(1rem,min(5vw,8rem))}}@media not (max-width:50rem){.actions-panel{grid-template-columns:repeat(3,auto);grid-template-areas:"intro search toggle";padding:3rem 1rem 1rem}}.theme-toggle{grid-area:"toggle";width:6rem;color:var(--color-text);border-radius:10rem;align-self:end;padding-top:.25rem;padding-bottom:.25rem;display:inline-block;position:relative}.theme-toggle:after{content:"";aspect-ratio:1;background-color:var(--button-border-color);border-radius:10rem;height:calc(100% - 4px);position:absolute;top:2px}[data-theme=dark] .theme-toggle{background-color:var(--color-dark)}[data-theme=dark] .theme-toggle:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:.25rem;padding-right:2rem}[data-theme=dark] .theme-toggle:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:2rem;padding-right:.25rem}[data-theme=dark] .theme-toggle:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:2rem;padding-right:.25rem}[data-theme=dark] .theme-toggle:after{right:2px}[data-theme=light] .theme-toggle{background-color:var(--color-light)}[data-theme=light] .theme-toggle:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:2rem;padding-right:.25rem}[data-theme=light] .theme-toggle:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:.25rem;padding-right:2rem}[data-theme=light] .theme-toggle:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:.25rem;padding-right:2rem}[data-theme=light] .theme-toggle:after{left:2px}.search{grid-area:search}.grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:0 auto;padding:0;list-style:"";display:grid}.swatch{border-radius:var(--border-radius-lg);aspect-ratio:1;text-align:center;flex-direction:column;justify-content:end;gap:.25rem;padding:1rem;transition:all .1s;display:flex;box-shadow:0 2px 8px #00000014}.swatch:hover{transform:scale(1.04);box-shadow:0 4px 16px #0000001f}.hex{z-index:0;color:var(--swatch-hex-text-color);font-size:2rem;font-weight:700;display:inline-block;position:relative}.hex:before{content:attr(data-text);z-index:-1;-webkit-text-stroke:5px var(--swatch-hex-text-outline,#000);position:absolute}.name{background-color:var(--swatch-name-bg);color:var(--swatch-name-text-color);border-radius:var(--border-radius-sm);opacity:0;padding:0 .2em;font-size:1.2rem;display:inline-block;translate:0 100%}.swatch:hover .name,.name:focus{opacity:1;transition:opacity 1s,translate .3s;translate:0}.color-list-empty{display:none}.grid:not(:has(li:not([style*="display: none"])))+div .color-list-empty{text-align:center;font-size:2rem;display:block}.modal{z-index:1000;background:#0006;justify-content:center;align-items:center;width:100vw;height:100vh;display:none;position:fixed;top:0;left:0}.modal.active{display:flex}.modal-content{background:var(--panel-color-bg);border-radius:var(--border-radius-md);width:100%;max-width:400px;box-shadow:0 4px 24px var(--color-darkest);padding:2rem 2.5rem;position:relative}.modal-content h2{margin-top:0;margin-bottom:1rem}.modal-content .close{color:var(--color-ui);background:0 0;border:none;font-size:2rem;position:absolute;top:.5rem;right:.5rem}.modal-content .close:hover{color:#222}.modal-footer{text-align:center;text-wrap:pretty;margin-top:1rem}footer{text-align:center;margin-top:3rem;margin-bottom:3rem}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:0;margin:0;padding:0;position:absolute;overflow:hidden}.skip-link{position:relative}.skip-link a{background:var(--button-bg-color);color:var(--button-text-color);padding:1rem;position:absolute;top:0;left:0;transform:translate(-800%)}.skip-link a:focus-visible{transform:translate(0%)}.stack-tight{flex-direction:column;gap:.3rem;display:flex}.stack-loose{flex-direction:column;gap:1rem;display:flex}.stack-wide{flex-direction:column;gap:2rem;display:flex}body{background:var(--color-bg-page);color:var(--color-text);margin:0;padding:max(1rem,min(5vw,3rem));font-family:Solway,serif}h1{color:var(--color-text-heading);text-align:center;letter-spacing:-.05em;text-shadow:0 .02em .15em var(--color-bg-page);margin-bottom:-.25em;font-size:max(3rem,min(10vw,10rem));font-weight:900;line-height:.8}button{background-color:var(--button-bg-color);color:var(--button-text-color);border:2px solid var(--button-border-color);text-wrap:balance;cursor:pointer;border-radius:8px;padding:.75rem 1.5rem;font-size:1.1rem;font-weight:500;line-height:1.1;transition:background .2s}button:hover{background-color:var(--button-bg-color-hover)}label{text-wrap:pretty}input{border-radius:var(--border-radius-sm);background-color:var(--input-bg-color);color:var(--input-text-color);border:none;width:100%;max-width:20rem;padding:.5rem 1rem}:focus{outline:none}:focus-visible{outline:3px dotted var(--color-focus);outline-offset:2px;box-shadow:0 0 0 5px var(--color-bg-page)}