.cc-section{padding:30px;max-width:640px;margin:0 auto 20px;background:var(--surface);border:1px solid var(--border-soft);border-radius:16px}.cc-controls{display:flex;gap:16px;margin-bottom:16px}.cc-color{flex:1 1}.cc-label{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);display:block;margin-bottom:6px}.cc-input-wrap{display:flex;gap:6px;align-items:center}.cc-picker{width:40px;height:40px;border:1px solid var(--border-soft);border-radius:8px;cursor:pointer;padding:2px}.cc-hex{background:var(--ink);border:1px solid var(--border-soft);border-radius:6px;padding:8px 10px;color:var(--cream);font-family:monospace;font-size:13px;width:90px}.cc-preview{padding:20px;border-radius:10px;margin-bottom:14px;border:1px solid var(--border-soft)}.cc-results{display:flex;align-items:center;gap:14px}.cc-ratio-num{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-family:var(--font-lexend),sans-serif;font-size:26px;font-weight:900;color:var(--text-strong)}.cc-badges{display:flex;flex-wrap:wrap;gap:4px}.cc-badge{padding:4px 8px;border-radius:6px;font-size:12px;font-weight:600}.cc-badge.pass{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok-text)}[data-theme=dark] .cc-badge.pass{color:#7FD6B0}.cc-badge.fail{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger-text)}.ctr-wrap{display:flex;flex-direction:column;gap:32px;max-width:820px;margin:0 auto}.ipad-frame--big .cc-badge.pass{color:var(--ok-text);background:transparent}.ipad-frame--big .cc-badge.fail{color:var(--danger-text);background:transparent}