.action-headline{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}.action-headline button{background:var(--surface-level-1);border:1px solid var(--surface-level-2);color:var(--text);font-size:var(--step--1);font-weight:400;display:inline-block;cursor:pointer;padding:var(--space-3xs-2xs) var(--space-2xs-xs);border-radius:.25rem;margin:0}.action-headline button:hover{background:var(--highlight);color:var(--surface-level-0)}.action-headline button:focus{outline:2px solid var(--highlight);outline-offset:5px}.add-color-button{padding:.5rem 1rem;display:flex;gap:.5rem;align-items:center;justify-content:center;background-color:var(--surface-level-1);color:var(--text-muted);border:1px dashed var(--text-muted);border-radius:.25rem;cursor:pointer;font-size:1em;font-weight:600}.add-color-button:hover{background-color:var(--surface-level-2)}.add-color-button:focus-visible{outline:2px solid var(--highlight);outline-offset:5px}.centerflex{--_centerflex-gap: var(--gs-gap, 1rem);--_centerflex-threshold: var(--centerflex--threshold, 50rem);--multiplier: calc(666 * (var(--_centerflex-threshold) - 100%));display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--centerflex-gap-vertical, var(--_centerflex-gap)) / 2) var(--_centerflex-gap)}.centerflex:before{content:"";flex-grow:666;margin:0;background:#f09;flex-basis:max(0px,var(--multiplier))}.centerflex>*{flex-grow:1}.centerflex>*:first-child{order:-1}.checkbox-group{display:flex;align-items:center;gap:var(--space-2xs);cursor:pointer;max-width:max-content;font-size:var(--step-0)}input[type=checkbox]{width:1.25em;height:1.25em;border-radius:.25rem;margin:0;flex-shrink:0}input[type=checkbox]:focus-visible{outline:2px solid var(--highlight);outline-offset:5px}.cluster{display:flex;flex-wrap:wrap;justify-content:var(--cluster-justification, flex-start);gap:var(--cluster-gap-vertical, var(--cluster-gap, 1rem)) var(--cluster-gap, 1rem);align-items:var(--cluster-alignment, stretch)}[data-variant=space-between]{--cluster-justification: space-between}.codeblock{background:var(--surface-level-1);padding:var(--space-xs-s);border-radius:.25rem;position:relative;flex-grow:1;flex-basis:22rem}.codeblock h3{font-size:var(--step-0)}.codeblock pre{margin:0;padding:0}.codeblock code{display:block;font-size:var(--step--1);line-height:1.5;margin-block-start:var(--space-xs);color:var(--text-muted)}.color-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--column-min-width),1fr));gap:.75rem clamp(1rem,.636rem + 1.82vw,2rem)}.color-inputs:focus-visible{border-radius:.25rem;outline:2px solid var(--highlight);outline-offset:5px}.color-inputs>*:focus-visible,.color-inputs>*:active{outline:1px solid var(--highlight);border-radius:.25rem}.dark-light-button{background:var(--surface-level-1);border:1px solid var(--surface-level-2);color:var(--text-full)}.dark-light-button svg{width:1em;height:auto;display:block;margin-inline:auto}.dark-light-button:hover{background:var(--highlight);color:var(--surface-level-0)}[data-theme=auto] .dark-light-button .moon{display:block}[data-theme=auto] .dark-light-button .sun{display:none}@media (prefers-color-scheme: dark){[data-theme=auto] .dark-light-button .moon{display:none}[data-theme=auto] .dark-light-button .sun{display:block}}[data-theme=dark] .dark-light-button .moon{display:none}[data-theme=dark] .dark-light-button .sun,[data-theme=light] .dark-light-button .moon{display:block}[data-theme=light] .dark-light-button .sun{display:none}details{padding:var(--space-xs);border:2px solid var(--surface-level-2);border-radius:.5rem;overflow:hidden}details:has(summary:hover){border-color:var(--highlight)}details::details-content{transition:block-size .3s ease-out,content-visibility .3s ease-out;block-size:0;transition-behavior:allow-discrete}details summary{font-size:var(--step-2);font-weight:800;cursor:pointer;list-style:none;display:flex;gap:var(--space-2xs);align-items:center}details summary::-webkit-details-marker{display:none}details summary:focus-visible{outline:2px solid var(--highlight);outline-offset:5px;border-radius:.25rem}details summary svg{width:1.6cap;height:auto;display:inline-block;transition:transform .3s ease-out}details .details-content{margin-block-start:var(--space-m)}details[open] summary svg{transform:rotateX(180deg)}details[open]::details-content{block-size:auto}footer{width:min(100% - 3rem,var(--content-max-width, 84rem));margin-inline:auto;text-align:center;border-top:1px solid color-mix(in srgb,var(--text) 20%,transparent);padding-block:var(--space-xl)}footer ul{list-style-type:none;display:flex;justify-content:center;gap:var(--space-s);padding:0}.hero{padding-block:clamp(1rem,.037rem + 3.95vw,3rem);border-bottom:1px solid color-mix(in srgb,var(--text) 20%,transparent)}.hero .hero__content{width:min(100% - 3rem,var(--content-max-width, 84rem));margin-inline:auto;display:flex;flex-direction:column;gap:var(--space-xs);align-items:center;justify-content:center;text-align:center}@media (width > 62em){.hero .hero__content{flex-direction:row;gap:var(--space-m)}}.hero .hero__text{display:flex;flex-direction:column;align-items:center;gap:var(--space-3xs)}@media (width > 62em){.hero .hero__text{align-items:flex-start;text-align:left}}.hero .hero__actions{display:flex;gap:.5rem;position:absolute;right:.5rem;top:.5rem}.hero .hero__logo{width:clamp(6rem,4.074rem + 7.9vw,12rem);height:auto}.hero .hero__title{font-size:clamp(2.75rem,1.606rem + 4.69vw,5.125rem);font-weight:200;line-height:1.1;display:flex;max-width:max-content;-webkit-mask-image:linear-gradient(90deg,var(--mask-transparency-color) 0%,#000 30%,70%,var(--mask-transparency-color));mask-image:linear-gradient(90deg,var(--mask-transparency-color) 0%,#000 30%,70%,var(--mask-transparency-color))}.hero .hero__title strong{font-weight:800}.hero .hero__intro{font-size:clamp(1.125rem,.944rem + .74vw,1.5rem);font-size:var(--step-1);line-height:1.3;max-width:40ch;font-weight:300}.hero-button{width:3rem;height:2.5rem;cursor:pointer;font-size:1.25rem;border-radius:.25rem;text-align:center;padding-inline:0}.hero-button:focus-visible{outline:2px solid var(--highlight);outline-offset:4px}.import-colors{display:flex;flex-direction:column;gap:var(--space-s);padding:var(--space-2xs-xs)}.import-colors .intro>*+*{margin-block-start:var(--space-3xs)}.import-colors h2{font-size:var(--step-2)}.import-colors p{font-size:var(--step-0)}.import-colors textarea{width:100%;height:min(40vh,18rem);font-family:monospace;font-size:max(1rem,var(--step--1));line-height:1.5;border:1px solid var(--surface-level-2);background:var(--surface-level-1);padding:.5rem;border-radius:.25rem}.import-colors textarea:focus-visible{outline:2px solid var(--highlight);outline-offset:4px}.import-colors button{align-self:flex-start;padding:.5rem 1rem;border-radius:.25rem;background:var(--highlight);color:var(--surface-level-0);border:none;cursor:pointer}.import-colors button:hover{background-color:color-mix(in srgb,var(--highlight) 80%,var(--surface-level-0) 20%)}.import-colors button:focus-visible{outline:2px solid var(--highlight);outline-offset:5px}.import-colors .error{color:var(--highlight);font-size:.9em;margin-top:5px}.import-dialog{width:min(100% - (2 * var(--space-2xs-xs)),70ch);border-radius:1rem;background:var(--surface-level-0);color:var(--text);margin-block:auto;border:none;box-shadow:0 2rem 4rem -2rem #000}.import-dialog::backdrop{background-color:color-mix(in srgb,var(--surface-level-0) 15%,var(--text-full) 60%);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.info-link{font-size:var(--step-0);display:inline-block;position:relative;text-decoration:none;width:1.25em;height:1.5em}.info-link:before{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px}.info-link:hover{color:var(--highlight)}.info-link svg{width:100%;height:100%}.plain-html{font-size:var(--step-0);color:var(--text-muted);max-width:60ch;margin-inline:auto;padding-block-start:var(--space-l);margin-block-start:var(--space-xl);border-top:1px solid color-mix(in srgb,var(--text-full) 20%,transparent)}.plain-html>*+*{margin-block-start:var(--space-s)}.plain-html>*+*:is(h2){margin-block-start:var(--space-xl)}.plain-html>*+*:is(h3){margin-block-start:var(--space-l)}.plain-html strong{color:var(--text)}.plain-html h2,.plain-html h3,.plain-html h4{color:var(--text-full);line-height:1.2}.plain-html h2{font-size:var(--step-3)}.plain-html h3{font-size:var(--step-1)}.plain-html ul,.plain-html ol{margin-inline:0;padding-inline:var(--space-m) 0}.plain-html ul>*+*,.plain-html ol>*+*{margin-block-start:var(--space-xs)}.plain-html a{color:var(--highlight)}.plain-html a:hover{text-decoration:none}.radio-group{font-size:var(--step-0);border:none;margin:0;padding:0}.radio-group label{display:flex;align-items:center;gap:var(--space-3xs);cursor:pointer}.radio-group label span{text-box-trim:trim-both;text-box-edge:cap alphabetic}.radio-group label:has(input:focus-visible){outline:2px solid var(--highlight);outline-offset:5px;border-radius:.25rem}.radio-group input{width:1.25em;height:1.25em;margin:0;flex-shrink:0}.radio-group input:focus-visible{outline:none}.radio-options{display:flex;flex-direction:column;gap:var(--space-xs)}@media (width > 30em){.radio-options{flex-direction:row}}.settings{display:flex;flex-direction:column;gap:var(--column-gap, 1rem)}.settings .settings__base>*{display:flex;gap:.5rem var(--column-gap, 1rem);flex-wrap:wrap;align-items:flex-start;gap:var(--space-s) var(--space-m-l)}*,*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}html,body{min-height:100%}html{scroll-behavior:smooth}body{text-rendering:optimizeSpeed;line-height:1.5}a{text-decoration-skip-ink:auto;color:inherit}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}svg{flex-shrink:0}input,button,textarea,select{font:inherit}p{word-wrap:break-word}ul:where([role=list]),ol:where([role=list]){list-style-type:none;padding:0}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important;scroll-behavior:auto!important}}:root{color-scheme:light dark;--highlight: light-dark(#cc0088, #ffbbee);--text-full: light-dark(#000, #fff);--text: light-dark(#333, #ccc);--text-muted: light-dark(#555, #aaa);--surface-level-0: light-dark(#fff, #111);--surface-level-1: light-dark(#f5f5f5, #202020);--surface-level-2: light-dark(#cccccc, #333);--mask-transparency-color: light-dark(#000, #000c);--column-min-width: min(22rem, 100%);--column-gap: clamp(1rem, .636rem + 1.82vw, 2rem);--content-max-width: 84rem}:root{--step--2: clamp(.7901rem, .7867rem + .0172vw, .8rem);--step--1: clamp(.8889rem, .8502rem + .1932vw, 1rem);--step-0: clamp(1rem, .913rem + .4348vw, 1.25rem);--step-1: clamp(1.125rem, .9728rem + .7609vw, 1.5625rem);--step-2: clamp(1.2656rem, 1.0265rem + 1.1957vw, 1.9531rem);--step-3: clamp(1.4238rem, 1.0699rem + 1.7697vw, 2.4414rem);--step-4: clamp(1.6018rem, 1.0975rem + 2.5217vw, 3.0518rem);--step-5: clamp(1.802rem, 1.102rem + 3.5003vw, 3.8147rem)}:root{--space-3xs: clamp(.3125rem, .3125rem + 0vw, .3125rem);--space-2xs: clamp(.5625rem, .5408rem + .1087vw, .625rem);--space-xs: clamp(.875rem, .8533rem + .1087vw, .9375rem);--space-s: clamp(1.125rem, 1.0815rem + .2174vw, 1.25rem);--space-m: clamp(1.6875rem, 1.6223rem + .3261vw, 1.875rem);--space-l: clamp(2.25rem, 2.163rem + .4348vw, 2.5rem);--space-xl: clamp(3.375rem, 3.2446rem + .6522vw, 3.75rem);--space-2xl: clamp(4.5rem, 4.3261rem + .8696vw, 5rem);--space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);--space-3xs-2xs: clamp(.3125rem, .2038rem + .5435vw, .625rem);--space-2xs-xs: clamp(.5625rem, .4321rem + .6522vw, .9375rem);--space-xs-s: clamp(.875rem, .7446rem + .6522vw, 1.25rem);--space-s-m: clamp(1.125rem, .8641rem + 1.3043vw, 1.875rem);--space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);--space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);--space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);--space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem)}*{box-sizing:border-box}h1,h2,h3,h4,p,ul,li{margin:0}html[data-theme=light]{color-scheme:light}html[data-theme=dark]{color-scheme:dark}html{font-family:system-ui,sans-serif;line-height:1.5;font-weight:400}body{margin-inline:0;accent-color:var(--highlight);background:var(--surface-level-0)}main{padding-block:2rem}.page-layout{width:min(100% - 3rem,var(--content-max-width, 84rem));margin-inline:auto}.page-layout>*+*{margin-block-start:var(--space-xl-2xl)}h2{margin:0;font-size:var(--step-2)}h2 a{font-weight:400;color:var(--highlight);white-space:nowrap;font-size:var(--step-0)}section>*+*{margin-block-start:.75rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.color-input.svelte-x90hub{background:var(--surface-level-1);width:100%;padding:.5rem;display:flex;gap:.5rem;align-items:center;border-radius:.25rem;border:1px solid var(--surface-level-2);position:relative}label.svelte-x90hub{position:absolute;opacity:0;pointer-events:none}input[type=color i].svelte-x90hub{border-radius:50%;inline-size:2rem;block-size:2rem;cursor:pointer;flex-shrink:0;padding:2px;border-width:1px;border-style:solid;border-color:var(--surface-level-2)}input[type=color i].svelte-x90hub:hover{border-color:var(--text)}input[type=color i].svelte-x90hub:focus-visible{outline:2px solid var(--highlight);outline-offset:0px}input[type=color i].svelte-x90hub::-webkit-color-swatch-wrapper{padding:1px}input[type=color i].svelte-x90hub::-webkit-color-swatch{border-radius:50%}input[type=color i].svelte-x90hub::-moz-color-swatch{border-radius:50%}input[type=text].svelte-x90hub{flex-basis:0;padding:.5rem;border:1px solid var(--surface-level-2);border-radius:.25rem;font-variant-numeric:tabular-nums;font-family:inherit}input[type=text].svelte-x90hub:focus-visible{outline:2px solid var(--highlight);outline-offset:2px}input[type=text].svelte-x90hub.hexvalue{width:10ch;padding-inline:1ch;font-family:ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace}input[type=text].svelte-x90hub.name{width:4rem;flex-grow:1;flex-shrink:1}button.svelte-x90hub{background:none;border:none;cursor:pointer;width:2rem;padding:.25rem;display:flex;border:1px solid transparent;color:var(--text-muted);border-radius:.25rem}button.svelte-x90hub svg:where(.svelte-x90hub){width:1.5rem;height:1.5rem}button.svelte-x90hub:hover{color:var(--highlight);border:1px solid #ccc}button.svelte-x90hub:focus-visible{outline:2px solid var(--highlight);outline-offset:2px}.drag-indicator.svelte-x90hub{background:none;border:none;cursor:grab;width:1.75rem;display:flex;border:1px solid transparent;color:var(--text-muted);border-radius:.25rem;padding:0;align-self:stretch;align-items:center;justify-content:center}.drag-indicator.svelte-x90hub:hover{color:var(--highlight);border:1px solid #ccc}._card_1yyee_1{border-radius:.75rem;min-width:14rem;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 15%,transparent);position:relative;padding-block-end:1rem;min-height:100%}div:has(._card_1yyee_1){min-height:12rem}._big_1yyee_14{font-size:1.5rem;font-weight:700}._normal_1yyee_19{font-size:1rem}._values_1yyee_23{display:grid;grid-template-columns:1fr auto;padding-inline:1rem;gap:.5rem;margin-block:.5rem}._values_1yyee_23>*{display:grid;grid-column:1 / -1;grid-template-columns:subgrid}._cardTitle_1yyee_37{font-size:1.375rem;padding:1rem;width:100%;line-height:1;margin:0}._cardValueTitle_1yyee_46{display:flex;gap:.5em;align-items:baseline;justify-content:space-between;padding-inline:calc(1rem - 5px);padding-block:.25rem;background:color-mix(in srgb,currentColor 15%,transparent);background:color-mix(in srgb,var(--surface-level-0) 80%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 15%,transparent);font-size:var(--step--1);font-weight:400;margin:0 5px;border-radius:.25rem;color:var(--text-full)}._cardValueTitle_1yyee_46>span{display:flex;align-items:center;gap:.5rem}._cardValueTitle_1yyee_46 svg{width:1.375em;height:auto}._cardValueTitle_1yyee_46 ._emoji_1yyee_73{font-size:1.25em}._values_1yyee_23+._cardValueTitle_1yyee_46{margin-block-start:1.25rem}._cardValueTitle_1yyee_46 a{text-decoration:none;color:var(--text)}._cardValueTitle_1yyee_46 a:hover{color:var(--highlight);text-decoration:underline}p{margin:0}hr{border:none;border-bottom:1px solid color-mix(in srgb,currentColor 30%,transparent)}dl{font-variant-numeric:tabular-nums}dl dd{text-align:right;display:flex;gap:.2ch;justify-content:flex-end}._tinyswatch_1yyee_112{display:inline-block;width:1cap;height:auto;aspect-ratio:1;background-color:var(--color);vertical-align:baseline}._sup_1yyee_121{display:inline-block;translate:0 -25%}.card-grid.svelte-2d36bu{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--column-min-width, 19rem),1fr));justify-content:start;margin-inline:auto;gap:var(--column-gap, clamp(1rem, .636rem + 1.82vw, 2rem));margin-block-start:.75rem}.copy-button.svelte-1jwqmqc{position:absolute;top:.5rem;right:.5rem;background:var(--surface-level-1);border:1px solid var(--surface-level-2);color:var(--text);font-weight:500;padding:.25rem .5rem;font-size:.875rem;cursor:pointer;border-radius:4px;transition:background .2s ease-in-out}.copy-button.svelte-1jwqmqc:hover{background:var(--highlight);color:var(--surface-level-0)}.copy-button.svelte-1jwqmqc:focus-visible{outline:2px solid var(--highlight)}