.cc{width:min(960px,calc(100% - 32px));margin:0 auto;padding:88px 0 64px}.cc-crumb{font-size:13px;color:var(--color-text-muted);margin-bottom:18px}.cc-crumb a{color:var(--color-text-muted);text-decoration:none}.cc-crumb a:hover{color:var(--color-gold, #a87b1f)}.cc-kicker{margin:0 0 8px;color:var(--color-text-muted);font-family:var(--font-mono, "Courier New", monospace);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.cc-hero h1{margin:0 0 12px;color:var(--color-text);font-family:var(--font-mono, "Courier New", monospace);font-weight:900;font-size:clamp(30px,5vw,52px);line-height:1.05}.cc-lede{margin:0 0 28px;max-width:60ch;color:var(--color-text-muted);font-size:clamp(15px,1.6vw,18px);line-height:1.55}.cc-app{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);grid-template-areas:"controls result" "preview preview";gap:18px;margin-bottom:48px;align-items:start}.cc-controls{grid-area:controls}.cc-result{grid-area:result}.cc-preview{grid-area:preview}.cc-controls{display:flex;align-items:flex-end;gap:14px;padding:20px;border:1px solid var(--color-border);border-radius:14px;background:var(--color-bg-card)}.cc-input{flex:1;min-width:0}.cc-input>label{display:block;margin-bottom:8px;font-size:13px;font-weight:800;color:var(--color-text)}.cc-input__row{display:flex;align-items:center;gap:8px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-bg);padding:6px 8px}.cc-input__row input[type=color]{width:40px;height:40px;padding:0;border:none;border-radius:8px;background:none;cursor:pointer;flex:none}.cc-input__row input[type=text]{flex:1;min-width:0;border:none;background:none;color:var(--color-text);font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.cc-input__row input[type=text]:focus{outline:none}.cc-input__row:focus-within{border-color:var(--color-gold, #c89b3c);outline:2px solid var(--color-gold, #c89b3c);outline-offset:2px}.cc-swap{flex:none;align-self:center;margin-bottom:6px;width:40px;height:40px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text);font-size:18px;cursor:pointer}.cc-swap:hover{border-color:var(--color-gold, #c89b3c);color:var(--color-gold, #a87b1f)}.cc-result{display:flex;flex-direction:column;gap:14px;padding:20px;border:1px solid var(--color-border);border-radius:14px;background:var(--color-bg-card)}.cc-ratio{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 10px;border-bottom:1px solid var(--color-border)}.cc-ratio__num{font-family:var(--font-mono, monospace);font-weight:900;font-size:clamp(34px,6vw,48px);line-height:1;color:var(--color-text)}.cc-ratio__label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)}.cc-grades{display:grid;gap:8px}.cc-grade{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:700;color:var(--color-text)}.cc-badge{min-width:58px;text-align:center;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:900;border:1px solid var(--color-border);color:var(--color-text-muted)}.cc-badge.is-pass{border-color:#16a34a66;color:var(--cc-pass-ink, #15803d);background:#16a34a14}.cc-badge.is-fail{border-color:#b91c1c66;color:var(--cc-fail-ink, #b91c1c);background:#b91c1c12}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--cc-pass-ink: #4ade80;--cc-fail-ink: #fca5a5}}:root[data-theme=dark],body.dark-mode{--cc-pass-ink: #4ade80;--cc-fail-ink: #fca5a5}.cc-fix{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.cc-btn{appearance:none;border:1px solid var(--color-border);border-radius:9px;background:var(--color-bg);color:var(--color-text);padding:9px 14px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}.cc-btn:hover{border-color:var(--color-gold, #c89b3c)}.cc-btn--primary{border-color:var(--color-gold, #c89b3c);background:var(--color-gold, #c89b3c);color:var(--color-gold-ink, #1a1400)}.cc-fix__msg{font-size:12px;color:var(--color-text-muted);font-weight:700}.cc-preview{display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding:28px;border-radius:14px;border:1px solid var(--color-border);background:var(--cc-bg, #f7f3e6);color:var(--cc-fg, #1a1400);transition:background .12s,color .12s}.cc-preview__lg{margin:0;font-size:24px;font-weight:800}.cc-preview__sm{margin:0;font-size:16px;line-height:1.55;max-width:64ch}.cc-preview .cc-preview__lg,.cc-preview .cc-preview__sm,.cc-preview .cc-preview__ui{color:inherit}.cc-preview__ui{display:inline-block;padding:9px 16px;border-radius:8px;font-weight:800;font-size:14px;border:2px solid var(--cc-fg, #1a1400)}.cc-prose{max-width:70ch}.cc-prose h2{font-family:var(--font-mono, monospace);font-weight:900;color:var(--color-text);margin:36px 0 14px;font-size:clamp(20px,2.6vw,26px)}.cc-rules{margin:0;padding-left:20px;color:var(--color-text);line-height:1.7}.cc-rules strong{color:var(--color-text)}.cc-faq{display:grid;gap:8px}.cc-faq details{border:1px solid var(--color-border);border-radius:10px;background:var(--color-bg-card);padding:4px 16px}.cc-faq summary{cursor:pointer;padding:12px 0;font-weight:800;color:var(--color-text)}.cc-faq p{margin:0 0 14px;color:var(--color-text-muted);line-height:1.6}.cc-next__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.cc-card{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-bg-card);text-decoration:none;color:var(--color-text);transition:border-color .12s,transform .12s}.cc-card:hover{border-color:var(--color-gold, #c89b3c);transform:translateY(-2px)}.cc-card strong{color:var(--color-text)}.cc-card span{font-size:13px;color:var(--color-text-muted);line-height:1.5}@media(max-width:720px){.cc-app{grid-template-columns:1fr;grid-template-areas:"controls" "result" "preview"}.cc-controls{flex-direction:column;align-items:stretch}.cc-swap{align-self:center;transform:rotate(90deg)}.cc-next__grid{grid-template-columns:1fr}}