.tool[data-tool=color-contrast-matrix] .mx-wrap{margin-block-end:var(--space-2);overflow-x:auto}.tool[data-tool=color-contrast-matrix] .mx{border-collapse:separate;border-spacing:3px;font-size:var(--fs-sm)}.tool[data-tool=color-contrast-matrix] .mx th{font-family:var(--font-mono);font-weight:600;font-size:var(--fs-xs);text-align:start;white-space:nowrap;padding:var(--space-1) var(--space-2)}.tool[data-tool=color-contrast-matrix] .mx td{min-block-size:3rem;min-inline-size:5.5rem;padding:var(--space-2);text-align:center;border-radius:var(--r-sm);border:1px solid var(--c-border-strong)}.tool[data-tool=color-contrast-matrix] .mx td strong,.tool[data-tool=color-contrast-matrix] .mx td span{display:block}.tool[data-tool=color-contrast-matrix] .mx td .aa{border-radius:var(--r-sm);border:1px solid var(--c-border-strong);margin-block-end:var(--space-1);font-weight:700}.tool[data-tool=color-contrast-matrix] .mx td span:not(.aa){font-size:var(--fs-xs)}.tool[data-tool=color-contrast-matrix] .mx td.g-fail{background:var(--c-danger-soft)}.tool[data-tool=color-contrast-matrix] .mx td.g-large{background:var(--c-surface-2)}.tool[data-tool=color-contrast-matrix] .mx td.g-aa,.tool[data-tool=color-contrast-matrix] .mx td.g-aaa{background:var(--c-primary-soft)}.tool[data-tool=color-contrast-matrix] .chip{border:1px solid var(--c-border-strong);block-size:.9rem;inline-size:.9rem;vertical-align:-.1em;border-radius:50%;margin-inline-end:var(--space-1);display:inline-block}