html{font-family:freight-sans-pro,Helvetica Neue,Helvetica,Arial,sans-serif;--brand-blue: hsl(195, 52%, 31%);--brand-orange: hsl(24, 100%, 62%);--brand-pink: hsl(330, 100%, 45%);--text: hsl(230, 25%, 20%);--bg: white;--bg-messages: rgb(241.97664, 245.67618, 246.90936);--border: rgb(146.625, 148.75, 159.375);--border-light: rgb(179.0304, 200.61105, 207.8046);--warning: rgb(218.025, 0, 109.0125);--action: rgb(195.075, 0, 97.5375);--active: hsl(195, 52%, 31%);--success: oklab(51.527% -.099 .0131);--action-light: hsl(195, 7%, 41%);--root: 16px;--line-height: 1.4;--page: 60rem;--sm-column-break: 30em;--sm-page-break: 42em;--lg-page-break: 80em;--page-margin: calc(.09375rem + 4vw) ;--gutter: .75rem;--gutter-plus: 1.125rem;--double-gutter: 1.5rem;--triple-gutter: 2.25rem;--shim: .375rem;--shim-plus: .5625rem;--half-shim: .1875rem;--quarter-shim: .09375rem;--spacer: calc(1.5rem + 3vw) ;--rem: calc(1rem + .125vw) ;--small: calc(.875rem + .125vw) ;--medium: calc(1.25rem + .125vw) ;--large: calc(2.75rem + .8vw) ;--label-size: calc(.815rem + .125vw) ;--warning-size: calc(.875rem + .125vw) ;--input-small: calc(1rem + .25vw) ;--input-large: calc(1.25rem + .35vw) ;--border-width: 1px;--border-width-md: 2px;--border-width-lg: 4px;--border-radius: var(--shim);--logo: 12rem;--swatch: 3.25rem;--icon-size-default: 1.125em;--icon-small: .65em;--icon-medium: 1.5em;--range-thumb-size: 1.35rem;--range-input: .85rem;--triangle-width: var(--shim);--triangle-height: var(--shim-plus);--switch-space: var(--double-gutter);--fast: .3s;--slow: 1s;--springy: cubic-bezier(.175, .885, .32, 1.275);font-size:calc(1rem + .125vw)}html::selection{--brand-blue: hsl(195, 52%, 31%);--brand-orange: hsl(24, 100%, 62%);--brand-pink: hsl(330, 100%, 45%);--text: hsl(230, 25%, 20%);--bg: white;--bg-messages: rgb(241.97664, 245.67618, 246.90936);--border: rgb(146.625, 148.75, 159.375);--border-light: rgb(179.0304, 200.61105, 207.8046);--warning: rgb(218.025, 0, 109.0125);--action: rgb(195.075, 0, 97.5375);--active: hsl(195, 52%, 31%);--success: oklab(51.527% -.099 .0131);--action-light: hsl(195, 7%, 41%)}html,body{margin:0;min-height:100vh;overflow-x:hidden}*,:before,:after{box-sizing:border-box}[data-layout~=app]{display:grid;grid-template:"header" auto "results" auto "main" 1fr "footer" auto/100%;min-height:100vh}@media (min-width: 80em){[data-layout~=app]{grid-template:"header results" auto "main  results" 1fr "footer results" auto/1fr minmax(300px,30%)}}[data-layout~=app]>[data-layout]{padding:var(--layout-pad-block, var(--gutter-plus)) var(--layout-pad-inline, var(--double-gutter))}[data-layout~=header]{display:grid;gap:var(--shim) var(--double-gutter);grid-area:header;grid-template:"logo" auto "settings" auto/1fr}@media (min-width: 42em){[data-layout~=header]{--justify-settings: safe end;gap:var(--double-gutter);grid-template:"logo settings" auto/auto 1fr}}[data-layout~=results]{grid-area:results;container:results/inline-size}[data-layout~=main]{--layout-pad-block: 0;--layout-pad-inline: 0;grid-area:main}[data-layout~=main]>*{padding-inline:var(--double-gutter)}[data-layout~=footer]{display:grid;gap:var(--gutter-plus);grid-area:footer;grid-template-columns:auto 1fr}[data-layout~=color-formats]{display:grid}@media (min-width: 42em){[data-layout~=color-formats]{grid-template-columns:1fr var(--switch-space) 1fr}}@media (min-width: 42em){[data-content=formats]:last-of-type{grid-column:3}}@media (min-width: 42em){[data-layout=color-form]{display:grid;grid-template:"bginput switch fginput" auto "bgslide . fgslide" auto/1fr var(--switch-space) 1fr}}[data-group="header bg"]{grid-area:bginput}[data-group="sliders bg"]{grid-area:bgslide}[data-group="header fg"]{grid-area:fginput}[data-group="sliders fg"]{grid-area:fgslide}[data-column~=tool]{container:tool/inline-size}:focus:not(:focus-visible){outline:none}:focus-visible{outline-color:var(--focus-ring, currentColor);outline-offset:var(--outline-offset, 0);outline-style:var(--outline-style, solid);outline-width:var(--outline-width, var(--border-width-md))}a:link,a:visited{color:var(--link, var(--action));text-decoration:solid underline;text-decoration-thickness:var(--line-thickness, var(--border-width));transition:color var(--fast),text-decoration-thickness var(--fast) transform var(--fast);transform:scale(1)}a:hover,a:focus{color:var(--link-focus, var(--active));--line-thickness: var(--border-width-lg)}::selection{background-color:var(--text);color:var(--bg)}.wf-loading{clip:rect(1px,1px,1px,1px);clip-path:inset(1px 1px 1px 1px);height:1px;overflow:hidden;pointer-events:none;position:absolute;width:1px}h1,h2,h3{font-weight:400;margin:0}[data-heading]{font-size:var(--heading-size, var(--medium))}[data-heading~=large]{--heading-size: var(--large);line-height:1.1}.section-heading{display:block;font-size:var(--heading-size, var(--label-size));letter-spacing:var(--heading-letterspacing, .05rem);margin-block-end:var(--label-margin-block-end, 0);text-transform:var(--heading-transform, uppercase)}@media (max-width: 41.99em){.section-heading{--heading-size: var(--medium)}}p{margin:0}strong{font-weight:700}[data-color-info]{display:block;color:var(--color-info-color)}[data-color-info~=warning]{--color-info-color: var(--warning);background:var(--warning-bg, transparent);font-size:var(--color-info-size, var(--warning-size));margin-bottom:var(--warning-margin-bottom);padding-block:var(--warning-padding-block);padding-inline:var(--warning-padding-inline);text-align:var(--warning-align, left)}main>[data-color-info~=warning]{--warning-bg: var(--bg-messages);--warning-margin-bottom: var(--double-gutter);--warning-padding-block: var(--gutter);--warning-align: center}[data-color-info~=value],[data-input=color]{font-size:var(--tool-font-size, var(--small))}@container tool (min-width: 15rem){[data-color-info~=value],[data-input=color]{--tool-font-size: 5cqi}}@container tool (min-width: 21rem){[data-color-info~=value],[data-input=color]{--tool-font-size: var(--input-small)}}@container tool (min-width: 25rem){[data-color-info~=value],[data-input=color]{--tool-font-size: var(--medium)}}@container tool (min-width: 30rem){[data-input=color]{--tool-font-size: var(--input-large)}}[hidden]{display:none!important}.sr-only:not(:focus,:active){clip:rect(1px,1px,1px,1px);clip-path:inset(1px 1px 1px 1px);height:1px;overflow:hidden;pointer-events:none;position:absolute;width:1px}@media (min-width: 42em){.small-only{clip:rect(1px,1px,1px,1px);clip-path:inset(1px 1px 1px 1px);height:1px;overflow:hidden;pointer-events:none;position:absolute;width:1px}}@keyframes grow-in{0%{transform:scale(0)}25%{transform:scale(1)}}.label,label{display:block;font-size:var(--heading-size, var(--label-size));letter-spacing:var(--heading-letterspacing, .05rem);margin-block-end:var(--label-margin-block-end, 0);text-transform:var(--heading-transform, uppercase)}input,select{font-family:inherit;font-size:inherit;width:100%}input{border-color:var(--input-border-color, var(--border));border-width:0 0 var(--border-width) 0;font-family:inherit;font-size:inherit;padding:var(--shim) .25ch}input:focus-visible{box-shadow:0 3px 2px -2px var(--input-shadow-color, currentColor);outline:none}[data-needs-changes~=true] input{--input-border-color: var(--warning);--input-shadow-color: var(--warning)}select{border:0;box-shadow:1px 1px var(--half-shim) var(--border-light);padding:var(--half-shim) var(--shim)}input[type=range]{border:var(--border-width) solid var(--border);border-radius:var(--range-input);box-shadow:1px 1px var(--border-width-md) 0 var(--border-light);height:var(--range-input)}input[type=range]:focus{outline:none}input[type=range]::-moz-range-thumb{background-color:var(--text);border:var(--border-width) solid var(--bg);border-radius:var(--range-thumb-size);cursor:pointer;height:var(--range-thumb-size);outline:var(--thumb-outline-color, transparent) solid var(--border-width-md);transition:outline var(--fast);width:var(--range-thumb-size)}input[type=range]:active::-moz-range-thumb,input[type=range]:focus::-moz-range-thumb{--thumb-outline-color: var(--action)}input[type=range]::-webkit-slider-thumb{background-color:var(--text);border:var(--border-width) solid var(--bg);border-radius:var(--range-thumb-size);cursor:pointer;height:var(--range-thumb-size);outline:var(--thumb-outline-color, transparent) solid var(--border-width-md);transition:outline var(--fast);width:var(--range-thumb-size);appearance:none}input[type=range]:active::-webkit-slider-thumb,input[type=range]:focus::-webkit-slider-thumb{--thumb-outline-color: var(--action)}button{font-family:inherit;font-size:inherit}[data-btn]{appearance:none;align-items:center;background-color:var(--btn-bg-color, var(--bg));border:var(--btn-border-width, var(--border-width, 0)) solid var(--btn-border-color-active, var(--btn-border-color, var(--text)));border-radius:var(--border-radius);color:var(--btn-color, var(--text));cursor:pointer;display:inline-flex;padding:var(--btn-padding-block, var(--half-shim)) var(--btn-padding-inline, var(--gutter));transition:color var(--fast),background-color var(--fast),transform var(--fast)}[data-btn]:hover,[data-btn]:focus{background-color:var(--btn-bg-color-active, var(--text));color:var(--btn-color-active, var(--action))}[data-btn~=icon]{--btn-bg-color-active: transparent;--btn-border-width: 0;--btn-padding-inline: var(--half-shim);--btn-color-active: var(--action);--btn-color: var(--action-light)}[data-btn~=icon]:focus-visible{--outline-width: 0;transform:scale(1.15)}[data-btn~=switch]{--icon-size: var(--icon-medium);block-size:fit-content;margin-block-end:var(--spacer)}@media (max-width: 41.99em){[data-btn~=switch] [data-icon]{transform:rotate(90deg)}}[data-btn~=switch]:hover,[data-btn~=switch]:focus{--outline-width: thin;transform:var(--transform, rotate(180deg))}@media (prefers-reduced-motion: reduce){[data-btn~=switch]:hover,[data-btn~=switch]:focus{--transform: scale(1.1)}}[data-icon]{fill:var(--icon-color, currentcolor);display:inline-block;height:var(--icon-height, var(--icon-size, var(--icon-size-default)));overflow:visible;width:var(--icon-width, var(--icon-size, var(--icon-size-default)))}[data-icon-size=small]{--icon-size: var(--icon-small)}[data-icon-size=medium]{--icon-size: var(--icon-medium)}[data-icon-theme=success]{animation:grow-in var(--slow) var(--springy);--icon-color: var(--success)}ul{list-style:none;margin:0;padding-left:0}li{padding-bottom:var(--li-padding-bottom, var(--gutter))}[data-list=inline]{align-items:center;display:flex;gap:var(--shim)}dl{display:grid;grid-template-columns:auto 1fr;margin-block:var(--half-shim) var(--double-gutter)}dl:last-child{margin-block-end:0}dd{margin-inline-start:var(--description-margin-inline, var(--gutter))}[data-list-item-heading]{font-size:var(--small);font-weight:700;transition:color var(--fast),opacity var(--fast)}[data-list-item-heading~=target]{--icon-size: var(--small);display:flex;gap:var(--shim)}[data-list-item-heading~=target] [data-icon]{margin-block-start:var(--quarter-shim);opacity:var(--target-icon-opacity, 0)}[data-pass=false]{--link: var(--status-result-fg);--link-focus: var(--status-result-fg);--status-result-bg: var(--text);--status-result-fg: var(--bg)}[data-setting]{align-items:center;column-gap:var(--gutter);display:grid;grid-template:"format-label" auto "format-input" auto/1fr;justify-content:end}@media (min-width: 42em){[data-setting]{grid-template:"format-label format-input" auto/1fr auto}}[data-setting] label{grid-area:format-label}[data-setting] select{grid-area:format-input}[data-nav=social]{--li-padding-bottom: 0;--link: var(--action-light);--link-focus: var(--action)}[data-nav=social] a:link,[data-nav=social] a:visited{--outline-width: 0;display:block}[data-nav=social] a:link:focus-visible,[data-nav=social] a:visited:focus-visible{transform:scale(1.15)}