.hc-tool{--hc-border:#dbe3ef;--hc-soft:#f5f8fc;--hc-accent:#3159a5;--hc-current:#601b7d;--hc-previous:#601b7d;--hc-opaque:#601b7d;--hc-checker:conic-gradient(#dbe3ef 25%, #fff 0 50%, #dbe3ef 0 75%, #fff 0) 0 0 / 12px 12px;--hc-space:calc(clamp(.85rem, 2vw, 1.65rem));margin-inline:auto;max-width:70rem}.hc-tool [hidden]{display:none!important}.hc-actions,.hc-heading{display:flex;align-items:center;flex-wrap:wrap;gap:.65rem}.hc-heading{justify-content:space-between;margin-bottom:.85rem}.hc-actions .btn,.hc-heading .btn{display:inline-flex;align-items:flex-start;justify-content:center;gap:.5em;max-width:100%;white-space:normal;overflow-wrap:anywhere}.hc-actions .btn svg{flex:0 0 1em;height:1em;margin-top:calc(.5lh - .5em)}.hc-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:var(--hc-space);align-items:start}.hc-card{min-width:0;padding:var(--hc-space);border:1px solid var(--hc-border);border-radius:1rem;background:#fff}.hc-comparison{--hc-result-action:1.875rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-bottom:.85rem}.hc-comparison-item{position:relative;display:grid;min-width:0}.hc-comparison-current,.hc-comparison-previous{display:grid;grid-template-columns:2rem minmax(0,1fr);align-items:center;gap:.55rem;min-width:0;padding:.55rem;border:1px solid var(--hc-border);border-radius:.65rem;background:var(--hc-soft);color:inherit;text-align:start}.hc-comparison-current{border-color:#adbfdf}.hc-comparison-previous:not(:disabled):hover,.hc-history-color:hover{border-color:var(--hc-accent)}.hc-comparison-previous:disabled{opacity:.72}.hc-comparison-label{display:grid;min-width:0;overflow-wrap:anywhere}.hc-comparison-label bdi{justify-self:start;font-variant-numeric:tabular-nums}.hc-swatch{display:block;flex:0 0 auto;width:2rem;height:2rem;border:1px solid #132c4930;border-radius:.35rem;background:linear-gradient(var(--hc-swatch),var(--hc-swatch)),var(--hc-checker)}#currentColorPreview{--hc-swatch:var(--hc-current)}#prevColorPreview{--hc-swatch:var(--hc-previous)}.hc-board{position:relative;aspect-ratio:1;overflow:hidden;border-radius:.6rem;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,hsl(var(--hc-hue,282) 100% 50%));touch-action:none;cursor:crosshair}.hc-pointer{position:absolute;top:clamp(.45rem,var(--hc-v,51%),100% - .45rem);left:clamp(.45rem,var(--hc-s,78%),100% - .45rem);width:.92rem;height:.92rem;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #233047;transform:translate(-50%,-50%);pointer-events:none}.hc-ranges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:.3rem;margin-top:.9rem}.hc-range{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:.35rem}.hc-range label{overflow-wrap:anywhere}.hc-range span{font-variant-numeric:tabular-nums}.hc-range input{grid-column:1/-1;min-width:0;height:2rem;margin:0;accent-color:var(--hc-accent)}.hc-range input:focus-visible,.hc-tool a:focus-visible,.hc-tool button:focus-visible{outline:2px solid var(--hc-accent);outline-offset:2px}.hc-hue{--hc-range-track:linear-gradient(90deg, red, #ff0, #0f0, #0ff, #00f, #f0f, red)}.hc-alpha{--hc-range-track:linear-gradient(to right, transparent, var(--hc-opaque)), var(--hc-checker)}.hc-alpha::-webkit-slider-runnable-track,.hc-hue::-webkit-slider-runnable-track{background:var(--hc-range-track)}.hc-alpha::-moz-range-track,.hc-hue::-moz-range-track{background:var(--hc-range-track)}.hc-formats{--hc-result-action:2.75rem;container:hc-formats/inline-size;display:grid;gap:.55rem}.hc-format{display:grid;grid-template-columns:3.9rem minmax(0,1fr) var(--hc-result-action);grid-template-areas:"format code copy";align-items:center;gap:.35rem .55rem}.hc-format label{grid-area:format}.hc-format .hc-code{grid-area:code;min-width:0;padding-inline:.55rem;border:1px solid #8e9cb0;border-radius:.5rem;background:#fff;color:#233553}.hc-format .hc-code:focus{border-color:var(--hc-accent)}.hc-format .hc-code[aria-invalid=true]{border-color:#b62d48}.hc-format input.hc-code{align-self:stretch}.hc-format textarea.hc-code{field-sizing:content;min-height:var(--hc-result-action);resize:none;overflow-wrap:anywhere}.hc-copy-icon-button{grid-area:copy;display:grid;place-items:center;width:var(--hc-result-action);min-height:var(--hc-result-action);padding:0;border:1px solid #dbe3ee;border-radius:.5rem;background:#f6f8fc;color:var(--hc-accent);box-shadow:none}.hc-copy-symbol{display:grid;place-items:center;width:1.1em;height:1lh}.hc-copy-symbol>*{grid-area:1/1}.hc-copy-symbol svg{width:1em;height:1em}.hc-copied .hc-copy-icon,.hc-copy-check{visibility:hidden}.hc-copied .hc-copy-check{visibility:visible}.hc-copy-icon-button:not(:disabled):hover{border-color:#b8c9e8}.hc-tool .hc-copy-icon-button:focus-visible{outline-offset:1px}.hc-tool .hc-copied{background:#eaf6ef;color:#176446}.hc-copy-icon-button.hc-copied{border-color:#529678}.hc-comparison .hc-comparison-copy{position:absolute;grid-area:auto;inset-inline-end:calc(.55rem + 1px);inset-block-start:50%;transform:translateY(-50%);display:none}.hc-comparison-copy .hc-copy-symbol{width:1.5rem;height:1.5rem}.hc-comparison-copy .hc-copy-symbol svg{width:100%;height:100%}@container hc-formats (max-width: 22rem){.hc-format{grid-template-columns:minmax(0,1fr) var(--hc-result-action);grid-template-areas:"format format" "code copy";row-gap:.15rem}}.hc-contrast{margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--hc-border)}.hc-contrast-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.hc-contrast-item{overflow:hidden;border:1px solid var(--hc-border);border-radius:.55rem}.hc-contrast-sample{display:grid;place-items:center;min-height:2.75rem;color:var(--hc-current);font-weight:700}.hc-contrast-white{background:#fff}.hc-contrast-black{background:#000}.hc-contrast-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.15rem .45rem;padding:.4rem .5rem;background:var(--hc-soft);overflow-wrap:anywhere}.hc-contrast-guide{margin-top:.75rem;padding:.7rem .8rem;border:1px solid var(--hc-border);border-radius:.65rem;background:var(--hc-soft)}.hc-contrast-guide-heading,.hc-contrast-thresholds>div{display:flex;align-items:baseline;flex-wrap:wrap;justify-content:space-between;gap:.2rem .5rem}.hc-contrast-thresholds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.hc-contrast-thresholds>div{padding:.5rem .65rem;border:1px solid var(--hc-border);border-radius:.45rem;background:#fff}.hc-contrast-thresholds dt{font-weight:500;overflow-wrap:anywhere}.hc-contrast-thresholds dd{margin:0;font-weight:700;color:#233553}.hc-history{margin-top:var(--hc-space)}.hc-history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(9.2rem,100%),1fr));gap:.55rem;padding:0;list-style:none}.hc-history-item{display:grid;grid-template-columns:minmax(0,1fr) 2rem;gap:.15rem}.hc-history-color,.hc-history-remove{min-width:0;min-height:2.5rem;border-radius:.4rem;color:inherit}.hc-history-color{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.3rem;padding:.35rem;border:1px solid var(--hc-border);background:var(--hc-soft);overflow-wrap:anywhere}.hc-history-color .hc-swatch{width:1.2rem;height:1.2rem}.hc-history-color[aria-pressed=true]{border-color:var(--hc-accent)}.hc-history-remove{border:1px solid transparent;background:transparent}.hc-history-remove:hover{border-color:var(--hc-border);background:var(--hc-soft)}.hc-status{min-height:1.5em;margin-top:.45rem}#hcComparisonStatus:empty,#hcShareStatus:empty,.hc-status:empty{position:absolute}#hcComparisonStatus{display:none}@media (width < 992px){.hc-workspace{grid-template-columns:minmax(0,1fr)}}@media (hover:none) and (pointer:coarse),(width < 992px){.hc-board{aspect-ratio:4/3}.hc-contrast-guide{display:none}.hc-comparison .hc-comparison-copy{display:grid}.hc-comparison-current,.hc-comparison-previous{padding-inline-end:calc(1.1rem + var(--hc-result-action))}#hcComparisonStatus{display:block}}@media (width < 576px){.hc-comparison-current,.hc-comparison-previous{grid-template-columns:minmax(0,1fr);padding-inline-end:.55rem}.hc-comparison .hc-comparison-copy{inset-block-start:calc(.55rem + 1px);transform:none}}