.css-color-page{background:radial-gradient(circle at 16% 0%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 34%),var(--page-bg);color:var(--text-strong)}.cc-wrap{min-height:80vh;padding:42px 18px 64px}.cc-inner{max-width:1240px;margin:0 auto}.cc-heading{max-width:860px;margin:0 auto 30px;text-align:center}.cc-kicker{display:inline-flex;padding:7px 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent-strong);font-size:.82rem;font-weight:900;margin-bottom:14px}.cc-heading h1{font-family:var(--font-display);font-size:clamp(2.15rem,5.5vw,4rem);line-height:1;margin:0 0 14px;letter-spacing:0}.cc-heading h1 span{color:var(--accent-strong)}.cc-heading p{color:var(--text-soft);font-size:1.02rem;line-height:1.7;margin:0}.cc-hero-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}.cc-hero-actions a,.cc-palette-callout a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;border-radius:8px;padding:0 15px;font-weight:900;text-decoration:none}.cc-primary-link,.cc-palette-callout a{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#07110f!important}.cc-secondary-link{border:1px solid var(--header-border);background:var(--panel-soft);color:var(--text-strong)!important}.cc-card,.cc-picker-panel,.cc-side-panel,.cc-section{background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid var(--header-border);border-radius:8px;box-shadow:var(--shadow)}.cc-card{padding:clamp(14px,2.4vw,22px)}.cc-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px;align-items:start}.cc-picker-panel{position:sticky;top:86px;display:grid;gap:14px;max-height:calc(100vh - 104px);overflow:auto}.cc-picker-panel,.cc-side-panel,.cc-section{padding:16px}.cc-side-panel{display:grid;gap:16px;background:transparent;border:0;box-shadow:none;padding:0}.cc-current{height:154px;border-radius:8px;border:1px solid var(--header-border);background:#10b17c;margin-bottom:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 18px 44px color-mix(in srgb,#10b17c 18%,transparent)}.cc-picker-panel label,.cc-section label{display:grid;gap:7px;color:var(--text-soft);font-size:.9rem;font-weight:800;margin-bottom:12px}.cc-picker-panel input,.cc-section input{width:100%;border:1px solid var(--header-border);background:var(--panel-soft);color:var(--text-strong);border-radius:8px;padding:11px 12px;font:inherit}.cc-picker-panel input:focus,.cc-section input:focus{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}.cc-picker-panel input[type=color],.cc-section input[type=color]{height:46px;padding:5px}.cc-section input[type=range]{accent-color:var(--accent)}.cc-field-grid{display:grid;gap:10px}.cc-copy-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.cc-copy-row button,.cc-section-head button{border:1px solid var(--header-border);background:var(--panel-soft);color:var(--text-strong);border-radius:8px;padding:10px;font-weight:900;cursor:pointer}.cc-copy-row button:hover,.cc-section-head button:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--header-border));background:var(--accent-soft);color:var(--accent-strong)}.cc-status{color:var(--text-muted);font-size:.9rem;margin:0}.cc-section h2,.cc-section-head h2{font-family:var(--font-display);font-size:1.1rem;margin:0}.cc-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.cc-section-head p{margin:6px 0 0;color:var(--text-muted);font-size:.9rem}.cc-shades-section{padding:18px}.cc-shades{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:7px}.cc-shade{height:56px;border:1px solid rgba(255,255,255,.14);border-radius:8px;position:relative;overflow:hidden;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.cc-shade:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.22);z-index:2}.cc-shade b{position:absolute;top:5px;left:6px;color:rgba(255,255,255,.92);font:900 .68rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-shadow:0 1px 4px rgba(0,0,0,.45)}.cc-shade span{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.58);color:#fff;font:800 .63rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:4px 2px;text-align:center}.cc-two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cc-contrast-preview{border-radius:8px;border:1px solid var(--header-border);padding:18px;font-family:var(--font-display);font-size:1.15rem;font-weight:900;text-align:center;margin-top:8px}.cc-ratio{margin-top:10px;font-weight:900;color:var(--text-soft)}.cc-gradient-preview{height:92px;border-radius:8px;border:1px solid var(--header-border);margin:10px 0}.cc-code{display:block;background:var(--panel-soft);border:1px solid var(--header-border);color:var(--text-strong);border-radius:8px;padding:12px;white-space:normal;word-break:break-all}.cc-palette-callout{display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 13%,var(--panel)),var(--panel))}.cc-palette-callout p{margin:7px 0 0;color:var(--text-soft);font-size:.92rem;line-height:1.55}.is-hidden{display:none!important}@media(max-width:1100px){.cc-shades{grid-template-columns:repeat(8,minmax(0,1fr))}}@media(max-width:900px){.cc-grid{grid-template-columns:1fr}.cc-picker-panel{position:static;max-height:none}.cc-shades{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(max-width:560px){.cc-wrap{padding-inline:14px}.cc-copy-row,.cc-two-col{grid-template-columns:1fr}.cc-shades{grid-template-columns:repeat(2,1fr)}.cc-section-head,.cc-palette-callout{flex-direction:column;align-items:stretch}.cc-hero-actions a{width:100%}}