/* Contrast sample, big ratio and colour chips. */
.cc-sample { display: grid; gap: 8px; padding: 16px; border: 2px solid; border-radius: var(--r-md); }
.cc-sample p { margin: 0; }
.cc-sample__normal { font-size: 16px; }
.cc-sample__large { font-size: 24px; }
.cc-sample__bold { font-size: 18.66px; font-weight: 700; }
.cc-sample__ui { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 10px; border: 2px solid currentColor; border-radius: var(--r-sm, 6px); }
.cc-ratio { display: flex; align-items: baseline; gap: 4px; font-weight: 700; }
.cc-ratio__value { font-size: 3rem; line-height: 1; }
.cc-chip { display: inline-grid; place-items: center; min-width: 2.2em; padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px; font-weight: 700; }
.cc-dot { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--border); border-radius: 50%; vertical-align: middle; }
.cc-fix { flex-wrap: wrap; gap: 8px; }
.input--color { width: 3rem; padding: 2px; flex: none; }