.color-field{gap:var(--space-2);grid-template-columns:2.5rem minmax(0,1fr);align-items:center;display:grid}.color-field__swatch{background-color:var(--sheet);background-image:conic-gradient(var(--line-strong) 25%, transparent 0 50%, var(--line-strong) 0 75%, transparent 0);border:1px solid var(--line-strong);border-radius:var(--radius);cursor:pointer;background-size:10px 10px;block-size:2.5rem;inline-size:2.5rem;display:block;position:relative;overflow:hidden}.color-field__swatch:after{content:"";background:var(--swatch,transparent);position:absolute;inset:0;box-shadow:inset 0 0 0 1px #00000014}.color-field__swatch:focus-within{outline:2px solid var(--focus);outline-offset:2px}.color-field__swatch input{opacity:0;cursor:pointer;block-size:100%;inline-size:100%;position:absolute;inset:0}.color-field__text{min-inline-size:0}.swatch-chip{background-color:var(--sheet);background-image:conic-gradient(var(--line-strong) 25%, transparent 0 50%, var(--line-strong) 0 75%, transparent 0);background-size:10px 10px;position:relative;overflow:hidden}.swatch-chip:after{content:"";background:var(--swatch,transparent);position:absolute;inset:0}.copy-btn .icon:last-of-type{display:none}.copy-btn.is-copied{color:var(--accent)}.copy-btn.is-copied .icon:first-of-type{display:none}.copy-btn.is-copied .icon:last-of-type{display:inline-block}.code-out{padding:var(--space-3) var(--space-4);border:1px solid var(--sheet-rule);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--font-mono);white-space:pre;tab-size:2;text-align:start;direction:ltr;max-block-size:24rem;margin:0;font-size:.8125rem;line-height:1.6;overflow:auto}.code-out:empty:before{content:attr(data-empty);color:var(--ink-3);font-family:var(--font-sans);white-space:normal}.meter{gap:var(--space-1);display:grid}.meter__track{border-radius:var(--radius-sm);background:var(--sheet-rule);block-size:4px;overflow:hidden}.meter__bar{background:var(--accent);transform-origin:0;block-size:100%;transition:transform var(--duration) var(--ease-out)}.meter.is-over .meter__bar{background:var(--danger)}.meter__text{color:var(--ink-3);font-size:var(--text-sm)}.meter.is-over .meter__text{color:var(--danger);font-weight:600}[dir=rtl] .meter__bar{transform-origin:100%}.notice[hidden],.result[hidden],.preview[hidden],.figures[hidden],.sheet[hidden],.sheet__bar[hidden],.field[hidden],.options[hidden],.segmented[hidden],.code-out[hidden],.meter[hidden],.color-field[hidden]{display:none}.sheet__body>.figures{padding:0}@media (min-width:64rem){.contrast-checker{grid-template-columns:22rem minmax(0,1fr)}}.contrast-checker__controls{align-self:start}.contrast-checker__right{gap:var(--space-3);align-content:start;display:grid}@media (min-width:64rem){.contrast-checker__right{gap:var(--space-4)}}.contrast-checker__pair{gap:var(--space-2);display:grid}.contrast-checker__swap{margin-block:calc(var(--space-2) * -1) calc(var(--space-1) * -1);justify-self:end}.contrast-checker__figures{grid-template-columns:1fr;margin:0}.contrast-checker__ratio{padding-block-start:0}.contrast-checker__group{padding-block:var(--space-3) var(--space-2);border-block-end:1px dotted var(--line-strong);display:grid}.contrast-checker__group-name{color:var(--ink);margin-block-end:var(--space-1);font-size:.875rem;font-weight:600}.contrast-checker__check{justify-content:space-between;gap:var(--space-3);padding-block:var(--space-1);color:var(--ink-2);font-size:.875rem;display:flex}.contrast-checker__verdict{align-items:center;gap:var(--space-1);font-weight:650;display:inline-flex}.contrast-checker__verdict .icon{block-size:1rem;inline-size:1rem}.contrast-checker__check.is-pass .contrast-checker__verdict{color:var(--accent)}.contrast-checker__check.is-fail .contrast-checker__verdict{color:var(--danger)}.contrast-checker__check.is-pass .contrast-checker__icon-fail,.contrast-checker__check.is-fail .contrast-checker__icon-pass{display:none}.contrast-checker__preview{gap:var(--space-4);padding:var(--space-6) var(--space-5);border:1px solid var(--sheet-rule);border-radius:var(--radius);background:var(--ct-bg,#fff);color:var(--ct-fg,#000);display:grid}@media (min-width:52rem){.contrast-checker__preview{padding:var(--space-8)}}.contrast-checker__preview p{margin:0}.contrast-checker__large{font-family:var(--font-display);font-size:1.5rem;font-weight:500;line-height:1.25}.contrast-checker__body{max-inline-size:60ch;font-size:var(--text-base);line-height:1.6}.contrast-checker__small{font-size:var(--text-sm)}.contrast-checker__ui{align-items:center;gap:var(--space-4);display:flex}.contrast-checker__fake-button{align-items:center;gap:var(--space-2);min-block-size:2.5rem;padding-inline:var(--space-4);border-radius:var(--radius);border:1.5px solid;font-weight:600;display:inline-flex}.contrast-checker__fake-icon{block-size:1.75rem;inline-size:1.75rem}.contrast-checker__ok{color:var(--ink-2)}.contrast-checker__fix{gap:var(--space-2);display:grid}.contrast-checker__fix+.contrast-checker__fix{border-block-start:1px solid var(--sheet-rule);padding-block-start:var(--space-4)}.contrast-checker__fix-intro{color:var(--ink-2);font-size:.875rem}.contrast-checker__fix-row{gap:var(--space-2);display:grid}@media (min-width:40rem){.contrast-checker__fix-row{grid-template-columns:1fr 1fr}}.contrast-checker__fix-button{gap:var(--space-3);padding:var(--space-2);border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--sheet);color:var(--ink);text-align:start;cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);grid-template-columns:2.5rem minmax(0,1fr) auto;align-items:center;padding-inline-end:var(--space-3);display:grid}.contrast-checker__fix-button:hover{border-color:var(--accent)}.contrast-checker__fix-button:active{transform:scale(.98)}.contrast-checker__fix-chip{border-radius:var(--radius-sm);block-size:2.5rem;inline-size:2.5rem}.contrast-checker__fix-text{display:grid}.contrast-checker__fix-label{color:var(--ink-3);font-size:var(--text-xs)}.contrast-checker__fix-hex{font-family:var(--font-mono);font-size:.875rem}.contrast-checker__fix-use{color:var(--accent);font-size:.875rem;font-weight:600}