.contrast-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-block:1rem}.contrast-fields label{display:block;font-weight:700;margin-block-end:.35rem}.contrast-fields input{width:100%;max-width:18rem;min-height:44px;padding:.6rem;border:1px solid #687b8c;border-radius:.4rem;background:#fff;color:#18364e;font:inherit}.contrast-fields input:focus-visible{outline:3px solid #285b86;outline-offset:3px}.contrast-checker button{min-height:44px;margin-block-end:1rem}.contrast-ratio{font-size:1.2rem}.contrast-preview{padding:1.25rem;margin-block:1rem;border:1px solid #687b8c;border-radius:.4rem}.contrast-preview span{font-size:1rem;font-weight:400}.contrast-checker [hidden]{display:none!important}@media(max-width:480px){.contrast-fields{grid-template-columns:1fr}}
.contrast-checker{margin-block:1.5rem;padding:clamp(16px,3vw,28px);border:1px solid #cdd9e3;border-inline-start:3px solid #285b86;border-radius:.75rem;background:#f5f8fb}.contrast-checker h2{font-size:1.5rem}
.contrast-swatch{direction:ltr}
.contrast-checker{min-width:0;color:#18364e}.contrast-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-block-end:1rem}.contrast-actions button{margin:0}.contrast-checker button:focus-visible,.contrast-checker [tabindex="-1"]:focus{outline:3px solid #285b86;outline-offset:4px}.contrast-checker [data-contrast-result]{padding:1rem;border:1px solid #b7c8d7;border-radius:.6rem;background:#fff;margin-block:1.25rem}.contrast-ratio{overflow-wrap:anywhere}.contrast-note{font-size:.92rem;line-height:1.65}.contrast-outcomes{list-style:none;padding:0;margin-block:1rem}.contrast-outcomes li{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;padding:.65rem 0;border-block-end:1px solid #d9e2ea}.contrast-outcomes strong{white-space:normal}.contrast-outcomes [data-outcome="pass"]{color:#16633b}.contrast-outcomes [data-outcome="fail"]{color:#8b3025}.contrast-preview-group{margin:1rem 0 0}.contrast-preview-group figcaption{font-size:.92rem}.contrast-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.contrast-preview-grid>div{min-width:0}.contrast-preview{margin:0;overflow-wrap:anywhere}.contrast-preview--regular span{font-size:16px;font-weight:400}.contrast-preview--large span{font-size:24px;font-weight:400}.contrast-preview-grid .contrast-note{margin-block:.8rem .35rem}.contrast-examples{margin-block-start:1.5rem;padding-block-start:1.25rem;border-block-start:1px solid #cdd9e3}.contrast-examples h3{font-size:1.25rem}.contrast-example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.contrast-example{min-width:0;display:flex;flex-direction:column;padding:1rem;border:1px solid #cdd9e3;border-radius:.6rem;background:#fff}.contrast-swatch{display:block;width:100%;height:auto;border:1px solid #d9e2ea;border-radius:.5rem}.contrast-pair{font-size:.85rem;overflow-wrap:anywhere;margin-block:.5rem .75rem}.contrast-example h4{font-size:1.08rem;line-height:1.4;margin-block:0 .75rem}.contrast-example p{font-size:.93rem;line-height:1.65}.contrast-example dl{margin-block:.25rem 1rem;font-size:.9rem}.contrast-example dt{font-weight:600;margin-block-start:.6rem}.contrast-example dd{margin:0}.contrast-example button{margin-block-start:auto;margin-block-end:0;white-space:normal}.contrast-checker .guide-path-note{overflow-wrap:anywhere}.contrast-checker input[aria-invalid="true"]{border:2px solid #8b3025}@media(max-width:991px){.contrast-example-grid{grid-template-columns:1fr}.contrast-swatch{max-width:240px}.contrast-example button{align-self:flex-start}}@media(max-width:600px){.contrast-preview-grid{grid-template-columns:1fr}.contrast-checker [data-contrast-result]{padding:.8rem}.contrast-actions{align-items:stretch}.contrast-actions button{flex:1 1 100%}}
