.cc-in,.cc-out{flex-direction:column;gap:12px;min-width:0;display:flex}.cc-pair{gap:8px;display:flex}.cc-pair .input{min-width:0}.cc-swatch{flex:0 0 56px;min-height:44px;padding:2px}.cc-sample{border:2px solid var(--ink);border-radius:var(--radius);flex-direction:column;gap:6px;padding:16px;display:flex}.cc-big{font-family:var(--f-display);font-size:24px}.cc-grades{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.cc-grades li{border-radius:var(--radius);border:2px solid var(--line);align-items:center;gap:10px;padding:8px 10px;display:flex}.cc-grades b{font-family:var(--f-mono);min-width:40px;font-size:12px}.cc-grades .pass{background:var(--good-tint);border-color:var(--good)}.cc-grades .fail{background:var(--bad-tint);border-color:var(--bad)}.cc-fix{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.cc-fix .h3{flex:1 0 100%;margin:0}.cc-chip{align-items:center;gap:8px;display:inline-flex}.cc-chip i{border:2px solid var(--ink);border-radius:4px;width:18px;height:18px;display:inline-block}