.cc-wrap{max-width:860px;margin:0 auto;padding:54px 22px 10px}.cc-wrap h1{letter-spacing:-.035em;font-size:clamp(1.9rem,5vw,2.9rem);font-weight:900;line-height:1.04}.cc-wrap h1 em{color:var(--lime);font-style:normal}.cc-lede{color:var(--dim);max-width:60ch;margin:14px 0 26px;font-size:.96rem;line-height:1.65}.cc-lede code,.ac-static code,.cc-fix code{color:var(--ink);background:#ffffff0f;border-radius:4px;padding:1px 5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em}.cc-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.cc-field label{letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:7px;font-size:.68rem;font-weight:800;display:block}.cc-input-row{gap:8px;display:flex}.cc-input-row input[type=text]{background:var(--card);border:1px solid var(--line);min-width:0;color:var(--ink);border-radius:10px;flex:1;padding:12px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95rem}.cc-input-row input[type=text]:focus-visible,.cc-input-row input[type=color]:focus-visible{outline:3px solid var(--lime);outline-offset:2px}.cc-input-row input[type=color]{background:var(--card);border:1px solid var(--line);cursor:pointer;border-radius:10px;flex:none;width:48px;height:46px;padding:3px}.cc-help{color:#7b8391;margin-top:6px;font-size:.74rem}.cc-result{margin-top:26px}.cc-bad-input{color:#ffb4a2;background:#ff5a3c14;border:1px solid #ff5a3c40;border-radius:12px;padding:16px 18px;font-size:.9rem;line-height:1.7}.cc-preview{border:1px solid var(--line);border-radius:14px;flex-direction:column;gap:12px;padding:30px 26px;display:flex}.cc-preview-lg{letter-spacing:-.02em;font-size:1.45rem;font-weight:800}.cc-preview-sm{font-size:.92rem;line-height:1.6}.cc-score{background:var(--line);border:1px solid var(--line);border-radius:12px;grid-template-columns:1fr 1fr;gap:1px;margin:16px 0;display:grid;overflow:hidden}.cc-ratio{background:var(--card);text-align:center;padding:18px 14px}.cc-ratio b{color:var(--lime);font-variant-numeric:tabular-nums;font-size:1.85rem;font-weight:900;display:block}.cc-ratio span{letter-spacing:.07em;text-transform:uppercase;color:var(--dim);font-size:.63rem;font-weight:700}.cc-levels{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.cc-levels li{background:var(--card);border:1px solid var(--line);border-radius:11px;align-items:flex-start;gap:12px;padding:13px 15px;display:flex}.cc-badge{letter-spacing:.07em;text-transform:uppercase;border-radius:100px;flex:none;padding:4px 9px;font-size:.63rem;font-weight:800}.cc-pass .cc-badge{color:var(--lime);background:#aaff0024;border:1px solid #af06}.cc-fail .cc-badge{color:#ff8a6a;background:#ff5a3c1f;border:1px solid #ff5a3c59}.cc-pass{border-color:#aaff0038}.cc-level-label strong{color:var(--ink);font-size:.9rem;font-weight:700;display:block}.cc-level-label small{color:var(--dim);margin-top:2px;font-size:.76rem;line-height:1.5;display:block}.cc-fix{background:var(--card);border:1px solid #aaff0047;border-radius:14px;margin-top:20px;padding:20px 22px}.cc-fix h2{margin-bottom:8px;font-size:1.05rem;font-weight:800}.cc-fix p{color:var(--dim);font-size:.9rem;line-height:1.65}.cc-fix-row{align-items:center;gap:12px;margin-top:14px;display:flex}.cc-swatch{border:1px solid var(--line);border-radius:9px;flex:none;width:40px;height:40px}.cc-ok{color:var(--dim);margin-top:18px;font-size:.9rem;line-height:1.65}.cc-presets{flex-wrap:wrap;align-items:center;gap:8px;margin:26px 0 4px;display:flex}.cc-presets>span{letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-size:.68rem;font-weight:800}.cc-presets button{border:1px solid var(--line);color:var(--dim);cursor:pointer;font-size:.78rem;font-weight:600;font:inherit;background:0 0;border-radius:100px;padding:7px 14px;font-size:.78rem;transition:border-color .2s,color .2s}.cc-presets button:hover{border-color:var(--lime);color:var(--lime)}.cc-presets button:focus-visible{outline:3px solid var(--lime);outline-offset:2px}@media (max-width:620px){.cc-grid,.cc-score{grid-template-columns:1fr}}