.clr{--clr-gap:clamp(14px, 1.6vw, 20px);--clr-radius:12px;--clr-check:linear-gradient(45deg, rgba(15, 23, 42, .10) 25%, transparent 25%, transparent 75%, rgba(15, 23, 42, .10) 75%),linear-gradient(45deg, rgba(15, 23, 42, .10) 25%, transparent 25%, transparent 75%, rgba(15, 23, 42, .10) 75%);display:flex;flex-direction:column;gap:var(--clr-gap)}.clr-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}.clr-bar__swatch{display:flex;align-items:center;gap:14px;flex:1 1 320px;min-width:0}.clr-bar__read{flex:1 1 auto;min-width:0}.clr-bar__hint{margin:5px 0 0;font-size:11.5px;line-height:1.45;color:var(--soft-ink)}.clr-swatch{display:block;border-radius:10px;background-color:var(--clr-swatch,#2563eb);background-image:var(--clr-check);background-size:12px 12px;background-position:0 0,6px 6px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.14)}.clr-swatch--lg{width:62px;height:62px;flex:none;background-image:linear-gradient(var(--clr-swatch,#2563eb),var(--clr-swatch,#2563eb)),var(--clr-check)}.clr-input{width:100%;min-width:0;padding:9px 11px;font-size:13.5px;font-family:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:9px;min-height:38px}.clr-input:focus-visible{outline:2px solid var(--link);outline-offset:-1px;border-color:var(--link)}.clr-input[aria-invalid=true]{border-color:var(--bad)}.clr-input--value{font-family:var(--tl-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:15px;letter-spacing:.01em}.clr-bar__side{display:flex;flex-direction:column;gap:8px;align-items:flex-end;flex:0 1 auto}.clr-name{margin:0;font-size:12.5px;color:var(--soft-ink);text-align:right}.clr-recent{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.clr-recent.is-empty{display:none}.clr-recent__label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--soft-ink)}.clr-recent__row{display:flex;gap:4px;flex-wrap:wrap}.clr-chip{width:24px;height:24px;padding:0;border:1px solid rgba(15,23,42,.16);border-radius:6px;cursor:pointer;background-color:var(--clr-swatch);background-image:linear-gradient(var(--clr-swatch),var(--clr-swatch)),var(--clr-check);background-size:auto,8px 8px;background-position:0 0,0 0,4px 4px}.clr-chip:focus-visible{outline:2px solid var(--link);outline-offset:2px}.clr-tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:thin}.clr-tab{flex:none;padding:10px 14px;border:0;border-bottom:2px solid transparent;background:0 0;font-size:13.5px;color:var(--muted);cursor:pointer;white-space:nowrap}.clr-tab:hover{color:var(--ink)}.clr-tab.is-active{color:var(--ink);font-weight:600;border-bottom-color:var(--link)}.clr-tab:focus-visible{outline:2px solid var(--link);outline-offset:-2px;border-radius:6px}.clr-panel{display:flex;flex-direction:column;gap:var(--clr-gap)}.clr-panel:focus-visible{outline:2px solid var(--link);outline-offset:4px;border-radius:10px}.clr-pick{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--clr-gap)}@media (min-width:900px){.clr-pick{grid-template-columns:minmax(280px,1fr) minmax(0,1fr)}}.clr-pick__area{display:flex;flex-direction:column;gap:12px;min-width:0}.clr-field{position:relative;width:100%;aspect-ratio:1.55;border-radius:10px;cursor:crosshair;touch-action:none;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,var(--clr-field-hue,hsl(217 100% 50%)));box-shadow:inset 0 0 0 1px rgba(15,23,42,.14)}.clr-field:focus-visible{outline:2px solid var(--link);outline-offset:3px}.clr-field__thumb{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--clr-thumb,#2563eb);box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(15,23,42,.45);pointer-events:none}.clr-sliders{display:flex;flex-direction:column;gap:10px}.clr-slider{display:grid;grid-template-columns:64px minmax(0,1fr) 48px;align-items:center;gap:10px}.clr-slider__label{font-size:12px;font-weight:500;color:var(--soft-ink)}.clr-slider__value{font-family:var(--tl-mono, ui-monospace, monospace);font-size:12px;color:var(--muted);text-align:right}.clr-range{width:100%;height:22px;accent-color:var(--link)}.clr-range:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:6px}.clr-range--hue{appearance:none;-webkit-appearance:none;background:linear-gradient(to right,hsl(0 100% 50%),hsl(60 100% 50%),hsl(120 100% 50%),hsl(180 100% 50%),hsl(240 100% 50%),hsl(300 100% 50%),hsl(360 100% 50%));border-radius:999px;height:14px}.clr-range--alpha{appearance:none;-webkit-appearance:none;background:linear-gradient(to right,transparent,var(--clr-swatch,#2563eb)),var(--clr-check);background-size:auto,10px 10px;background-position:0 0,0 0,5px 5px;border-radius:999px;height:14px}.clr-range--alpha::-webkit-slider-thumb,.clr-range--hue::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(15,23,42,.4),0 1px 3px rgba(15,23,42,.3);cursor:pointer}.clr-range--alpha::-moz-range-thumb,.clr-range--hue::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(15,23,42,.4),0 1px 3px rgba(15,23,42,.3);cursor:pointer}.clr-pick__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.clr-native{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);cursor:pointer}.clr-native input,.clr-swatchpick{width:38px;height:32px;padding:2px;border:1px solid var(--line);border-radius:7px;background:var(--surface);cursor:pointer;flex:none}.clr-pick__out{min-width:0}.clr-values{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}.clr-value{display:grid;grid-template-columns:84px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 12px;border:0;background:var(--surface);text-align:left;font:inherit;cursor:pointer}.clr-value:hover{background:var(--surface2)}.clr-value:focus-visible{outline:2px solid var(--link);outline-offset:-2px}.clr-value__label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--soft-ink)}.clr-value__text{font-family:var(--tl-mono, ui-monospace, monospace);font-size:12.5px;color:var(--ink);overflow-wrap:anywhere}.clr-value__copy{font-size:11.5px;color:var(--soft-ink);opacity:0;transition:opacity .12s}.clr-value:focus-visible .clr-value__copy,.clr-value:hover .clr-value__copy{opacity:1}.clr-value.is-copied .clr-value__copy{opacity:1;color:var(--good)}.clr-value.is-failed .clr-value__copy{opacity:1;color:var(--bad)}.clr-details{margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}.clr-details__head{padding:10px 13px;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;list-style:none}.clr-details__head::-webkit-details-marker{display:none}.clr-details__head::after{content:'';float:right;width:8px;height:8px;margin-top:4px;border-right:1.6px solid var(--soft);border-bottom:1.6px solid var(--soft);transform:rotate(45deg)}.clr-details[open]>.clr-details__head::after{transform:rotate(225deg)}.clr-details>:not(.clr-details__head){padding:0 13px 13px}.clr-facts{display:grid;gap:6px}.clr-fact{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding-bottom:5px;border-bottom:1px solid var(--line2)}.clr-fact__label{color:var(--soft-ink)}.clr-fact__value{font-family:var(--tl-mono, ui-monospace, monospace);color:var(--ink);text-align:right}.clr-swatches{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}.clr-swatches--scale{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:6px}.clr-swatch-card{display:flex;flex-direction:column;gap:2px;min-width:82px;padding:12px 10px 10px;border:0;border-radius:10px;background:var(--clr-swatch);color:var(--clr-swatch-ink);font:inherit;text-align:left;cursor:default;box-shadow:inset 0 0 0 1px rgba(15,23,42,.12)}button.clr-swatch-card{cursor:pointer}button.clr-swatch-card:focus-visible{outline:2px solid var(--link);outline-offset:2px}.clr-swatch-card.is-anchor{box-shadow:inset 0 0 0 2px var(--ink)}.clr-swatch-card--xs{min-width:0;width:34px;height:34px;padding:0;flex:none}.clr-swatch-card--xs .clr-swatch-card__hex{display:none}.clr-swatch-card__label{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.8}.clr-swatch-card__hex{font-family:var(--tl-mono, ui-monospace, monospace);font-size:12px;font-weight:600}.clr-swatch-card__sub{font-size:10.5px;opacity:.82}.clr-swatch-item{display:flex;flex-direction:column;gap:4px}.clr-swatch-item__tools{display:flex;gap:2px;justify-content:center}.clr-icon-btn{width:26px;height:26px;padding:5px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--muted);cursor:pointer}.clr-icon-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.clr-icon-btn:hover:not(:disabled){color:var(--ink);border-color:var(--soft)}.clr-icon-btn.is-on{color:var(--link);border-color:var(--link)}.clr-icon-btn--danger:hover:not(:disabled){color:var(--bad);border-color:var(--bad)}.clr-icon-btn:disabled{opacity:.35;cursor:not-allowed}.clr-icon-btn:focus-visible{outline:2px solid var(--link);outline-offset:1px}.clr-contrast{display:flex;flex-direction:column;gap:var(--clr-gap)}.clr-contrast__inputs{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}.clr-field-wrap{flex:1 1 190px;min-width:0;display:flex;flex-direction:column;gap:5px}.clr-label{font-size:12px;font-weight:500;color:var(--soft-ink)}.clr-pair{display:flex;gap:6px;align-items:center}.clr-btn{font-size:13px;padding:8px 13px}.clr-btn--xs{font-size:12.5px;padding:6px 10px}.clr-btn--icon{width:38px;height:38px;padding:8px;display:inline-flex;align-items:center;justify-content:center;flex:none}.clr-btn--icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.clr-ratio{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:14px 16px;background:var(--surface2);border:1px solid var(--line);border-radius:var(--clr-radius)}.clr-ratio__value{font-family:var(--tl-mono, ui-monospace, monospace);font-size:clamp(26px, 3.4vw, 36px);font-weight:700;color:var(--ink);line-height:1}.clr-ratio__label{font-size:12.5px;color:var(--soft-ink)}.clr-verdicts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}.clr-verdict{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}.clr-verdict__mark{flex:none;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:11px;font-weight:700}.clr-verdict[data-pass=yes] .clr-verdict__mark{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}.clr-verdict[data-pass=no] .clr-verdict__mark{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}.clr-verdict__text{display:flex;flex-direction:column;font-size:12.5px;color:var(--ink);min-width:0}.clr-verdict__req{font-family:var(--tl-mono, ui-monospace, monospace);font-size:11px;color:var(--soft-ink)}.clr-apca__value{margin:0 0 2px;font-family:var(--tl-mono, ui-monospace, monospace);font-size:14px;color:var(--ink)}.clr-apca__band{margin:0 0 10px;font-size:12.5px;color:var(--soft-ink)}.clr-apca__list{list-style:none;margin:0;padding:0;display:grid;gap:4px}.clr-apca__row{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-family:var(--tl-mono, ui-monospace, monospace);color:var(--muted)}.clr-apca__row[data-pass=yes]{color:var(--good)}.clr-apca__row[data-pass=no]{color:var(--muted)}.clr-apca__row[data-pass=na]{color:var(--soft-ink)}.clr-sample{padding:22px;border-radius:var(--clr-radius);box-shadow:inset 0 0 0 1px rgba(15,23,42,.12)}.clr-sample__normal{margin:0 0 12px;font-size:16px;line-height:1.55;max-width:62ch;color:inherit}.clr-sample__large{margin:0 0 16px;font-size:24px;font-weight:600;color:inherit}.clr-sample__row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.clr-sample__button{padding:9px 16px;border-radius:8px;font-size:14px;font-weight:600}.clr-sample__link{font-size:15px;text-decoration:underline;color:inherit}.clr-sample__ui{padding:8px 12px;border:2px solid;border-radius:8px;font-size:13px;color:inherit}.clr-suggest{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.clr-matrix-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px}.clr-matrix{width:100%;border-collapse:collapse;font-size:12px}.clr-matrix__corner{padding:8px 10px;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--soft-ink);text-align:left;white-space:nowrap}.clr-matrix__head{padding:8px 10px;font-family:var(--tl-mono, ui-monospace, monospace);font-size:11px;font-weight:600;white-space:nowrap;background:var(--clr-swatch);color:var(--clr-swatch-ink)}.clr-matrix__cell{padding:8px 10px;text-align:center;border-left:1px solid var(--line2);border-top:1px solid var(--line2);white-space:nowrap}.clr-matrix__ratio{display:block;font-family:var(--tl-mono, ui-monospace, monospace);font-weight:600;color:var(--ink)}.clr-matrix__tag{display:block;font-size:10px;letter-spacing:.04em;text-transform:uppercase}.clr-matrix__cell[data-level=aa]{background:color-mix(in srgb,var(--good) 10%,transparent)}.clr-matrix__cell[data-level=aa] .clr-matrix__tag{color:var(--good)}.clr-matrix__cell[data-level=large]{background:color-mix(in srgb,var(--warn) 10%,transparent)}.clr-matrix__cell[data-level=large] .clr-matrix__tag{color:var(--warn)}.clr-matrix__cell[data-level=no] .clr-matrix__tag{color:var(--soft-ink)}.clr-matrix__cell[data-level=same]{background:var(--surface2)}.clr-confusable__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.clr-confusable__row{display:flex;align-items:flex-start;gap:8px}.clr-confusable__text{font-size:12.5px;line-height:1.5;color:var(--muted)}.clr-confusable__text strong{color:var(--ink)}.clr-export{display:flex;flex-direction:column;gap:8px}.clr-export:empty{display:none}.clr-export__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.clr-export__tabs{display:flex;gap:2px;flex-wrap:wrap}.clr-export__tab{padding:5px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-size:12px;color:var(--muted);cursor:pointer}.clr-export__tab.is-active{background:var(--ink);border-color:var(--ink);color:var(--surface)}.clr-export__tab:focus-visible{outline:2px solid var(--link);outline-offset:1px}.clr-export__code{margin:0;padding:12px 14px;max-height:300px;overflow:auto;background:var(--surface2);border:1px solid var(--line);border-radius:10px;font-family:var(--tl-mono, ui-monospace, monospace);font-size:12px;line-height:1.6;color:var(--ink);white-space:pre}.clr-gradient__preview{height:clamp(150px,22vw,240px);border-radius:var(--clr-radius);box-shadow:inset 0 0 0 1px rgba(15,23,42,.12)}.clr-stops{display:flex;flex-direction:column;gap:8px}.clr-stop{display:grid;grid-template-columns:auto minmax(0,1fr) 48px auto;align-items:center;gap:10px}.clr-stop__value{font-family:var(--tl-mono, ui-monospace, monospace);font-size:12px;color:var(--muted);text-align:right}.clr-intake{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 20px;text-align:center;background:var(--surface2);border:1.5px dashed var(--line);border-radius:var(--clr-radius)}.clr-intake.is-over{border-color:var(--link);background:var(--surface)}.clr-intake.is-loaded{padding:14px 18px}.clr-intake.is-loaded .clr-intake__sub{display:none}.clr-intake__title{margin:0;font-size:14px;font-weight:600;color:var(--ink)}.clr-intake__sub{margin:0 0 8px;font-size:12.5px;line-height:1.5;color:var(--soft-ink);max-width:52ch}.clr-canvas-wrap{position:relative;display:inline-block;max-width:100%;line-height:0;overflow:hidden;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.14)}.clr-canvas{max-width:100%;height:auto;display:block;cursor:crosshair}.clr-canvas:focus-visible{outline:2px solid var(--link);outline-offset:-2px}.clr-loupe{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--clr-swatch,transparent);box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(15,23,42,.55);pointer-events:none;display:none}.clr-loupe.is-on{display:block}.clr-vision__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}.clr-controls{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}.clr-hint{margin:0;font-size:12.5px;line-height:1.55;color:var(--soft-ink);max-width:78ch}.clr-privacy{margin:0;padding-top:12px;border-top:1px solid var(--line2);font-size:12.5px;line-height:1.55;color:var(--soft-ink)}body.dark-mode .clr-swatch-card,html.pp-dark .clr-swatch-card{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}body.dark-mode .clr-swatch-card span,html.pp-dark .clr-swatch-card span{color:var(--clr-swatch-ink)!important}body.dark-mode .clr-matrix__head,html.pp-dark .clr-matrix__head{color:var(--clr-swatch-ink)!important}body.dark-mode .clr-chip,body.dark-mode .clr-swatch,html.pp-dark .clr-chip,html.pp-dark .clr-swatch{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}body.dark-mode .clr-sample span,html.pp-dark .clr-sample span{color:inherit!important}@media (max-width:599px){.clr-bar{flex-direction:column}.clr-bar__side{align-items:flex-start}.clr-name{text-align:left}.clr-recent{justify-content:flex-start}.clr-slider{grid-template-columns:56px minmax(0,1fr) 42px}.clr-value{grid-template-columns:62px minmax(0,1fr)}.clr-value__copy{display:none}.clr-contrast__inputs{flex-direction:column;align-items:stretch}.clr-btn--icon{align-self:center}.clr-sample{padding:16px}.clr-sample__normal{font-size:15px}}.clr-gradient,.clr-image,.clr-palette,.clr-scale,.clr-vision{display:flex;flex-direction:column;gap:var(--clr-gap)}.clr-gradient>.clr-btn,.clr-image>.clr-btn,.clr-palette>.clr-btn,.clr-scale>.clr-btn,.clr-vision>.clr-btn{align-self:flex-start}.clr-contrast>.tool-section-head:not(:first-child),.clr-gradient>.tool-section-head:not(:first-child),.clr-image>.tool-section-head:not(:first-child),.clr-palette>.tool-section-head:not(:first-child),.clr-pick__out>.tool-section-head:not(:first-child),.clr-scale>.tool-section-head:not(:first-child),.clr-vision>.tool-section-head:not(:first-child){margin-top:6px;padding-top:var(--clr-gap);border-top:1px solid var(--line2)}.clr-confusable:empty,.clr-matrix-wrap:empty,.clr-swatches:empty{display:none}.tool-section-head:has(+ .clr-export:empty){display:none}.clr-empty{margin:0;padding:18px;border:1px dashed var(--line);border-radius:10px;background:var(--surface2);font-size:13px;line-height:1.55;color:var(--soft-ink);text-align:center}.clr-controls .clr-field-wrap .clr-range{min-height:38px;margin:0}.clr-controls .clr-btn{min-height:38px}.clr-swatches--scale{grid-auto-rows:1fr}.clr-swatch-card{justify-content:flex-start}.clr-vision__card{display:flex}.clr-vision__card>.clr-swatch-card{flex:1 1 auto}.clr-value{color:var(--ink)}body.dark-mode .clr-value__label,html.pp-dark .clr-value__label{color:var(--soft-ink)!important}body.dark-mode .clr-value__text,html.pp-dark .clr-value__text{color:var(--ink)!important}body.dark-mode .clr-value__copy,html.pp-dark .clr-value__copy{color:var(--soft-ink)!important}.clr-gradient .clr-stops{gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface2)}.clr-gradient .clr-stops:empty{display:none}.clr-stop{padding:2px 0}.clr-gradient .clr-hint[data-clr-grad-support]{margin-top:-6px}.clr{--clr-good-text:#15723F;--clr-bad-text:#A81F1C;--clr-warn-text:#9A4E0B}body.dark-mode .clr,html.pp-dark .clr{--clr-good-text:var(--good);--clr-bad-text:var(--bad);--clr-warn-text:var(--warn)}.clr-apca__row[data-pass=yes]{color:var(--clr-good-text)}.clr-verdict[data-pass=yes] .clr-verdict__mark{color:var(--clr-good-text)}.clr-verdict[data-pass=no] .clr-verdict__mark{color:var(--clr-bad-text)}.clr-matrix__cell[data-level=aa] .clr-matrix__tag{color:var(--clr-good-text)}.clr-matrix__cell[data-level=large] .clr-matrix__tag{color:var(--clr-warn-text)}body.dark-mode .clr-sample p,body.dark-mode .clr-sample span,html.pp-dark .clr-sample p,html.pp-dark .clr-sample span{color:inherit!important}