.contrast-tool{max-width:68rem}.cc-intro{max-width:68rem;padding-top:var(--rhythm-lg)}.cc-intro h1{margin-top:0;font-size:clamp(1.9rem,3.4vw,2.6rem)}.cc-intro .docs-lede{font-size:var(--text-md);max-width:62ch}.cc-label{display:block;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-5)}.cc-entry{display:flex;gap:var(--space-4);align-items:stretch}.cc-colour{flex:1;min-width:0;display:flex;align-items:center;background:var(--surface);border:1.5px solid color-mix(in srgb,var(--text) 30%,transparent);border-radius:10px}.cc-text{flex:1;min-width:0;padding:var(--space-5) var(--space-6);font-family:var(--font-mono);font-size:var(--text-md);color:var(--text);background:transparent;border:0;border-radius:10px}.cc-text:hover{border-color:var(--muted)}.cc-format{flex:none;align-self:stretch;padding:0 var(--space-5) 0 var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);background:transparent;border:0;border-radius:0 10px 10px 0;cursor:pointer}.cc-format:hover{color:var(--text)}.cc-picker{display:grid;place-items:center;width:3.1rem;border:1.5px solid color-mix(in srgb,var(--text) 30%,transparent);border-radius:10px;background:var(--surface);cursor:pointer}.cc-picker:hover{border-color:var(--muted)}.cc-picker input[type=color]{width:2.1rem;height:2.1rem;padding:0;border:none;border-radius:7px;background:none;cursor:pointer}.cc-picker input[type=color]::-webkit-color-swatch-wrapper{padding:0}.cc-picker input[type=color]::-webkit-color-swatch{border:1px solid var(--hairline-strong-color);border-radius:6px}.cc-status{min-height:1.4rem;margin:var(--space-3) 0 0;font-size:var(--text-sm);color:var(--muted)}.cc-status.is-error{color:var(--text);font-weight:560}.cc-swap{display:inline-flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-6);font-family:var(--font-display);font-weight:560;font-size:var(--text-sm);color:var(--text);background:transparent;border:1.5px solid var(--hairline-strong-color);border-radius:10px;cursor:pointer;transition:background-color .16s ease,color .16s ease,border-color .16s ease}.cc-copy:hover,.cc-swap:hover,.cc-apply:hover{background:var(--flip-bg);color:var(--flip-text)}.cc-swap:hover,.cc-apply:hover{border-color:var(--flip-bg)}.cc-tool-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:var(--gap-sm)}.cc-inputs,.cc-workbench{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.cc-workbench{align-items:start;padding-bottom:var(--rhythm-xs);border-bottom:var(--hairline)}.cc-workbench>.cc-stage{grid-column:1}.cc-workbench>.cc-verdicts{grid-column:3}.cc-stage,.cc-verdicts{min-width:0}.cc-ratio{margin:0 0 var(--space-7)!important;font-family:var(--font-display);font-size:clamp(2.8rem,6.5vw,4.4rem);font-weight:640;line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:inherit!important}.cc-ratio-sub{margin:-.7rem 0 var(--space-7)!important;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;color:inherit!important;opacity:.72}.cc-strip-title{margin:0 0 var(--space-4)!important;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)!important}.cc-criteria{display:grid;grid-template-columns:1fr;gap:0;margin:0;padding:0;list-style:none;border-top:var(--hairline)}.cc-criterion{display:grid;grid-template-columns:5.4rem 3.1rem 2rem minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-4) 0;border-bottom:var(--hairline);font-size:var(--text-sm);color:var(--muted)}.cc-criterion-applies{color:var(--text);white-space:nowrap}.cc-criterion-needs{font-family:var(--font-mono);font-size:var(--text-xs);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}.cc-verdict{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);padding:.2rem var(--space-4) .2rem var(--space-3);font-family:var(--font-display);font-size:var(--text-xs);font-weight:620;letter-spacing:.005em;border:1px solid transparent;border-radius:999px;white-space:nowrap}.cc-verdict:before{font-size:.95em;line-height:1}.cc-verdict.is-pass{color:var(--pass);background:color-mix(in srgb,var(--pass) 13%,transparent);border-color:color-mix(in srgb,var(--pass) 34%,transparent)}.cc-verdict.is-pass:before{content:"\2713"}.cc-verdict.is-fail{color:var(--fail);background:color-mix(in srgb,var(--fail) 13%,transparent);border-color:color-mix(in srgb,var(--fail) 34%,transparent)}.cc-verdict.is-fail:before{content:"\2715"}.cc-fix-cta{display:flex;width:100%;margin-top:var(--space-7);padding:var(--space-4) var(--space-7);font-size:var(--text-sm)}.cc-fix-cta .btn-icon{width:.95rem;height:.95rem;margin-right:var(--space-3)}.cc-panel-note{margin:0 0 var(--space-7)!important;font-size:var(--text-sm);color:var(--muted)}.cc-preview{padding:var(--space-9) var(--space-8);border-radius:14px;border:1px solid var(--hairline-strong-color);transition:background-color .2s ease,color .2s ease}.cc-sample{margin:0 0 var(--space-6)!important;color:inherit!important}.cc-sample:last-child{margin-bottom:0!important}.cc-sample-normal{font-size:16px;line-height:1.5}.cc-sample-large{font-size:24px;font-weight:500;letter-spacing:-.01em}.cc-sample-largebold{font-size:18.66px;font-weight:700}.cc-fix-section{padding-top:var(--rhythm-sm)}.cc-fix-section h3{margin:0 0 var(--space-3);font-size:var(--text-lg)}.cc-fixes{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));grid-template-rows:repeat(5,auto);gap:var(--gap-md)}.cc-fix{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:var(--space-4);padding-top:var(--space-7);border-top:1px solid var(--hairline-strong-color)}.cc-fix.is-blocked .cc-fix-none{grid-row:span 4;align-self:start}.cc-fix h4{margin:0;align-self:start;font-family:var(--font-display);font-size:var(--text-md);font-weight:620;color:var(--text)}.cc-fix-note{display:block;margin-top:.15rem;font-weight:420;font-size:var(--text-sm);color:var(--muted)}.cc-fix-visual{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:var(--space-5)}.cc-fix-half{display:grid;place-items:center;min-height:4.4rem;font-family:var(--font-display);font-size:var(--text-2xl);font-weight:620;border-radius:12px;border:1px solid var(--hairline-strong-color);transition:background-color .2s ease,color .2s ease}.cc-fix-arrow{align-self:center;color:var(--muted);font-size:var(--text-lg)}.cc-fix-move{display:grid;gap:.2rem;margin:0!important;align-self:start;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--muted);font-variant-numeric:tabular-nums}.cc-fix-values{display:flex;flex-wrap:wrap;align-content:start;gap:var(--space-1) var(--space-3)}.cc-fix-caveat{color:var(--text)}.cc-fix-values code{font-size:var(--text-sm);color:var(--muted);word-break:break-all}.cc-fix-none{margin:0!important;font-size:var(--text-sm)}.cc-apply{align-self:end;justify-self:stretch;width:100%;text-align:center;padding:var(--space-4) var(--space-7);font-family:var(--font-display);font-weight:590;font-size:var(--text-sm);color:var(--text);background:transparent;border:1.5px solid var(--hairline-strong-color);border-radius:10px;cursor:pointer;transition:background-color .16s ease,color .16s ease,border-color .16s ease}.cc-more{margin-top:var(--rhythm-xs);border-top:var(--hairline)}.cc-more>summary{padding:var(--space-6) 0;font-family:var(--font-display);font-weight:590;font-size:var(--text-md);color:var(--text);cursor:pointer;list-style-position:inside}.cc-more>summary:hover{color:var(--muted)}.cc-more[open]>summary{padding-bottom:var(--space-4)}.cc-more>*:last-child{padding-bottom:var(--space-8)}.cc-conversions{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--gap-md)}.cc-conversion h4{margin:0 0 var(--space-5);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.cc-conversion dl{margin:0}.cc-conv-row{display:grid;grid-template-columns:6.5rem 1fr;gap:var(--space-4);align-items:baseline;padding:var(--space-2) 0;border-bottom:var(--hairline)}.cc-conv-row dt{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted)}.cc-conv-row dd{margin:0;min-width:0}.cc-copy{width:100%;padding:.15rem var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);text-align:left;color:var(--text);background:transparent;border:1px solid transparent;border-radius:5px;cursor:copy;word-break:break-all;transition:background-color .14s ease,color .14s ease}.cc-sims{display:flex;flex-wrap:wrap;gap:var(--space-7);margin:0;padding:0;list-style:none}.cc-sim{display:grid;gap:var(--space-3);justify-items:center}.cc-sim-swatch{display:grid;place-items:center;width:4.6rem;height:3.4rem;font-family:var(--font-display);font-size:var(--text-lg);font-weight:620;border-radius:10px;border:1px solid var(--hairline-strong-color)}.cc-sim-label{font-size:var(--text-xs);color:var(--muted);text-align:center;max-width:6.5rem}@media(max-width:860px){.cc-tool-grid{grid-template-columns:1fr}.cc-workbench>.cc-stage,.cc-workbench>.cc-verdicts{grid-column:1}.cc-verdicts{padding-top:var(--space-8)}}@media(max-width:720px){.cc-conv-row{grid-template-columns:1fr;gap:.15rem}}@media(max-width:560px){.cc-criterion{grid-template-columns:auto auto auto 1fr;row-gap:var(--space-1)}.cc-criterion>.cc-verdict{width:auto;justify-self:start}.cc-criterion-applies{grid-column:1 / 4;grid-row:2}.cc-criterion-needs{grid-column:4;grid-row:2}}@media(prefers-reduced-motion:reduce){.cc-preview,.cc-fix-half,.cc-copy,.cc-apply,.cc-swap{transition:none}}.cc-criterion>.cc-verdict{width:100%}.cc-criterion-level{justify-self:start}.cc-inputs{grid-template-rows:auto auto auto;column-gap:var(--gap-sm);row-gap:0;align-items:stretch;padding-bottom:var(--rhythm-xs)}.cc-field{display:contents}.cc-field-bg>.cc-label{grid-area:1 / 1}.cc-field-bg>.cc-entry{grid-area:2 / 1}.cc-field-fg>.cc-label{grid-area:1 / 3}.cc-field-fg>.cc-entry{grid-area:2 / 3}.cc-swap{grid-area:2 / 2;align-self:center}.cc-status-bg{grid-area:3 / 1}.cc-status-fg{grid-area:3 / 3}@media(max-width:860px){.cc-inputs{grid-template-rows:none;row-gap:.2rem;padding-bottom:0}.cc-inputs>*,.cc-field>*{grid-area:auto!important;grid-column:1!important}.cc-swap{justify-self:center;margin-top:var(--space-4)}.cc-status{margin-top:0!important}}