.ro-ccac{--ro-accent:#1769AA;--ro-accent2:#17B8A6;--ro-card:#fff;--ro-page:#f6f8fb;--ro-text:#172033;--ro-muted:#64748b;--ro-border:#e2e8f0;box-sizing:border-box;color:var(--ro-text);background:var(--ro-page);border:1px solid var(--ro-border);border-radius:20px;padding:clamp(16px,3vw,30px);font:inherit;line-height:1.5;max-width:1200px;margin:20px auto;overflow:hidden}.ro-ccac *{box-sizing:border-box}.ro-ccac h2,.ro-ccac h3,.ro-ccac p{margin-top:0}.ro-ccac-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:24px}.ro-ccac-kicker{font-size:11px;letter-spacing:.14em;font-weight:800;color:var(--ro-accent);margin-bottom:7px}.ro-ccac-head h2{font-size:clamp(23px,3vw,34px);line-height:1.2;margin:0 0 8px;font-weight:750;background:linear-gradient(105deg,var(--ro-accent),var(--ro-accent2));background-clip:text;-webkit-background-clip:text;color:transparent}.ro-ccac-head p{color:var(--ro-muted);margin:0}.ro-ccac button{font:inherit;cursor:pointer;border:1px solid transparent;border-radius:10px;padding:10px 14px;background:var(--ro-accent);color:#fff;font-weight:650;transition:filter .15s,transform .15s,border-color .15s}.ro-ccac button:hover{filter:brightness(.9);transform:translateY(-1px)}.ro-ccac button:focus-visible,.ro-ccac input:focus-visible{outline:3px solid var(--ro-accent2);outline-offset:2px}.ro-ccac .ro-ccac-theme,.ro-ccac .ro-ccac-secondary,.ro-ccac .ro-ccac-small{background:transparent;color:var(--ro-text);border-color:var(--ro-border)}.ro-ccac-layout{display:grid;grid-template-columns:minmax(250px,.82fr) minmax(0,1.55fr);gap:18px}.ro-ccac-main{display:grid;gap:18px;min-width:0}.ro-ccac-panel{background:var(--ro-card);border:1px solid var(--ro-border);border-radius:16px;padding:20px;min-width:0;box-shadow:0 5px 20px #0f172a08}.ro-ccac-panel h3{font-size:17px;margin:0 0 16px;font-weight:750}.ro-ccac-controls label{display:block;font-weight:650;font-size:13px;margin:0 0 15px}.ro-ccac-colorrow{display:flex;gap:8px;margin-top:7px}.ro-ccac-colorrow input[type=color]{width:46px;height:42px;padding:3px;border:1px solid var(--ro-border);border-radius:9px;background:var(--ro-card);flex-shrink:0}.ro-ccac-colorrow input[type=text]{width:100%;min-width:0;border:1px solid var(--ro-border);border-radius:9px;background:var(--ro-page);color:var(--ro-text);padding:9px 11px;font:inherit;font-size:14px;text-transform:uppercase}.ro-ccac-presets{display:flex;gap:7px;flex-wrap:wrap}.ro-ccac .ro-ccac-presets button{font-size:12px;padding:8px 10px;background:var(--ro-page);color:var(--ro-text);border-color:var(--ro-border)}.ro-ccac hr{border:0;border-top:1px solid var(--ro-border);margin:22px 0}.ro-ccac-ratio{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.ro-ccac-ratio span{font-size:13px;color:var(--ro-muted)}.ro-ccac-ratio strong{font-size:25px;letter-spacing:-.03em}.ro-ccac-checks{display:grid;gap:8px}.ro-ccac-checks>div{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--ro-border);border-radius:9px;padding:9px 10px;font-size:12px}.ro-ccac-checks b{font-size:11px;padding:3px 7px;border-radius:6px;white-space:nowrap}.ro-ccac-checks .is-pass{color:#087443;background:#dcfce7}.ro-ccac-checks .is-fail{color:#b42318;background:#fee4e2}.ro-ccac-note{font-size:11px;color:var(--ro-muted);margin:13px 0 0}.ro-ccac-paneltop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.ro-ccac-paneltop h3{margin:0}.ro-ccac-chip{font-size:11px;font-weight:650;color:var(--ro-muted);border:1px solid var(--ro-border);border-radius:20px;padding:5px 8px}.ro-ccac-preview{padding:clamp(20px,4vw,34px);border-radius:12px;min-height:230px;transition:background-color .15s,color .15s}.ro-ccac-preview-label{font-size:10px;letter-spacing:.13em;font-weight:800;opacity:.8;margin-bottom:22px}.ro-ccac-preview h2{font-size:clamp(24px,3vw,36px);line-height:1.15;margin:0 0 14px;color:inherit}.ro-ccac-preview p{max-width:520px;margin:0 0 12px;color:inherit}.ro-ccac-preview a{font-weight:700;text-decoration:underline;text-underline-offset:3px}.ro-ccac-preview-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px}.ro-ccac-preview-actions button{border:0}.ro-ccac-preview-actions span{font-size:11px}.ro-ccac-small{font-size:12px;padding:7px 10px!important}.ro-ccac-palette{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.ro-ccac-empty{padding:20px;text-align:center;border:1px dashed var(--ro-border);border-radius:10px;color:var(--ro-muted);font-size:13px;grid-column:1/-1}.ro-ccac-swatch{border:1px solid var(--ro-border);border-radius:11px;overflow:hidden;min-width:0}.ro-ccac-swatch-preview{height:56px}.ro-ccac-swatch-meta{padding:10px;display:grid;gap:4px}.ro-ccac-swatch-meta b{font-size:11px;overflow-wrap:anywhere}.ro-ccac-swatch-meta span{font-size:11px;color:var(--ro-muted)}.ro-ccac .ro-ccac-swatch-meta button{justify-self:start;font-size:11px;padding:4px 8px;background:transparent;color:var(--ro-text);border-color:var(--ro-border);margin-top:3px}.ro-ccac-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.ro-ccac-actions button{font-size:12px;padding:9px 11px}.ro-ccac-code{width:100%;margin-top:13px;min-height:92px;resize:vertical;border:1px solid var(--ro-border);border-radius:9px;padding:11px;background:var(--ro-page);color:var(--ro-text);font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}.ro-ccac-status{font-size:12px;color:var(--ro-accent);margin-top:8px;min-height:18px}.ro-ccac-footer{font-size:11px;color:var(--ro-muted);margin-top:20px}.ro-ccac-footer a{color:inherit}.ro-ccac-dark{--ro-card:#171e2b;--ro-page:#0e1420;--ro-text:#edf2f7;--ro-muted:#a7b3c4;--ro-border:#303b4c;color:var(--ro-text)}.ro-ccac-dark .ro-ccac-head h2{color:#76d7cf;background-image:linear-gradient(105deg,#79b9ff,#54d6c7)}.ro-ccac-dark .ro-ccac-checks .is-pass{color:#a7f3d0;background:#064e3b}.ro-ccac-dark .ro-ccac-checks .is-fail{color:#fecaca;background:#7f1d1d}.ro-ccac-dark .ro-ccac-panel{box-shadow:none}.ro-ccac-dark .ro-ccac-colorrow input[type=color]{background:#222c3a}.ro-ccac-dark .ro-ccac-preview{border:1px solid #ffffff20}.ro-ccac-dark .ro-ccac-presets button:hover,.ro-ccac-dark .ro-ccac-secondary:hover,.ro-ccac-dark .ro-ccac-theme:hover{background:#263448;color:#fff}.ro-ccac-dark .ro-ccac-button{color:#fff}@media(max-width:760px){.ro-ccac-layout{grid-template-columns:1fr}.ro-ccac-head{flex-direction:column}.ro-ccac-theme{align-self:flex-start}.ro-ccac-panel{padding:16px}.ro-ccac-actions button{flex:1 1 130px}.ro-ccac-paneltop{align-items:flex-start;flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){.ro-ccac *{transition:none!important;scroll-behavior:auto!important}}