#conv input:not([type="color"]), #hex2, #ctable td:nth-child(2) { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
#bg h2 { margin: 0; }
.cc-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: end; }
input[type="color"] { height: 46px; padding: 4px; cursor: pointer; }
.cc-swatch { height: 46px; border: 1px solid var(--line); border-radius: 8px; }
.cc-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.cc-line button { width: auto; padding: 10px 14px; }
.cc-sample { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; overflow-wrap: anywhere; }
.cc-sample-big { font-size: 1.5rem; font-weight: 600; }
#ctable td:first-child, #ctable th:first-child { text-align: left; }
.cc-pass { color: var(--accent); font-weight: 600; }
.cc-fail { color: var(--warn); }