.cfc-page-header{text-align:center;max-width:860px;margin:0 auto;padding:24px 16px 8px}.cfc-wrapper{max-width:860px;margin:0 auto;padding:0 16px 48px}.cfc-layout{grid-template-columns:280px 1fr;align-items:start;gap:24px;display:grid}.cfc-section{background:var(--swp-surface,#fff);border:1px solid var(--swp-border,#e5e7eb);border-radius:12px;flex-direction:column;gap:10px;margin-bottom:12px;padding:14px;display:flex}.cfc-section:last-child{margin-bottom:0}.cfc-section-title{color:var(--swp-ink);margin:0;font-size:13px;font-weight:800}.cfc-picker-row{align-items:stretch;gap:10px;display:flex}.cfc-color-picker{border:1px solid var(--swp-border,#e5e7eb);cursor:pointer;border-radius:8px;flex-shrink:0;width:48px;height:48px;padding:2px}.cfc-swatch{border:1px solid #00000014;border-radius:10px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;min-height:80px;transition:background .2s;display:flex}.cfc-swatch-text{letter-spacing:.02em;font-family:Courier New,Courier,monospace;font-size:14px;font-weight:700}.cfc-contrast-label{opacity:.8;font-size:11px}.cfc-alpha-row{align-items:center;gap:10px;display:flex}.cfc-alpha-slider{cursor:pointer;height:36px;accent-color:var(--color-primary,#0d9488);flex:1}.cfc-alpha-value{color:var(--swp-ink);text-align:right;min-width:36px;font-size:13px;font-weight:700}.cfc-presets{flex-direction:column;gap:6px;display:flex}.cfc-preset-btn{border:1px solid var(--swp-border,#e5e7eb);background:var(--swp-surface,#fff);cursor:pointer;min-height:44px;color:var(--swp-ink);text-align:left;border-radius:8px;align-items:center;gap:8px;padding:8px 12px;font-size:13px;transition:background .15s;display:flex}.cfc-preset-btn:before{content:"";background:var(--preset-color,#ccc);border:1px solid #00000026;border-radius:50%;flex-shrink:0;width:16px;height:16px;display:inline-block}.cfc-preset-btn:hover{background:var(--swp-bg,#f9fafb)}.cfc-preset-btn--active{border-color:var(--color-primary,#0d9488);background:color-mix(in srgb, var(--color-primary,#0d9488) 6%, transparent);font-weight:700}.cfc-format-list{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.cfc-format-item{grid-template-columns:56px 1fr 44px;align-items:center;gap:6px;display:grid}.cfc-format-label{color:var(--swp-ink-muted);font-family:Courier New,Courier,monospace;font-size:12px;font-weight:800}.cfc-format-input{border:1px solid var(--swp-border,#e5e7eb);color:var(--swp-ink);background:var(--swp-bg,#f9fafb);border-radius:6px;min-width:0;padding:8px 10px;font-family:Courier New,Courier,monospace;font-size:13px;transition:border-color .15s}.cfc-format-input:focus{border-color:var(--color-primary,#0d9488);outline:none}.cfc-format-input--error{border-color:#ef4444}.cfc-format-error{color:#dc2626;grid-column:2/-1;margin:0;font-size:12px}.cfc-copy-btn{border:1px solid var(--swp-border,#e5e7eb);background:var(--swp-surface,#fff);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;min-width:44px;min-height:44px;font-size:14px;transition:background .15s;display:flex}.cfc-copy-btn:hover{background:var(--swp-bg,#f9fafb)}.cfc-copy-btn--copied{background:#d1fae5;border-color:#059669}.cfc-css-usage{margin-top:0}.cfc-usage-grid{flex-direction:column;gap:6px;display:flex}.cfc-usage-item{flex-wrap:wrap;align-items:baseline;gap:8px;display:flex}.cfc-usage-label{color:var(--swp-ink-muted);white-space:nowrap;font-size:12px}.cfc-usage-code{color:var(--swp-ink);background:var(--swp-bg,#f9fafb);word-break:break-all;border-radius:4px;padding:2px 6px;font-family:Courier New,Courier,monospace;font-size:12px}.cfc-how-to{max-width:860px;margin:48px auto 0;padding:0 16px}.cfc-section-heading{color:var(--swp-ink);margin:0 0 16px;font-size:20px;font-weight:800}.cfc-steps{color:var(--swp-ink);flex-direction:column;gap:8px;padding-left:20px;font-size:15px;line-height:1.7;display:flex}.cfc-related-section{max-width:860px;margin:32px auto 0;padding:0 16px}.cfc-related-tools{flex-direction:column;gap:8px;display:flex}.cfc-related-link{color:var(--color-primary,#0d9488);font-size:15px;text-decoration:none}.cfc-related-link:hover{text-decoration:underline}@media (width<=639px){.cfc-layout{flex-direction:column;gap:16px;display:flex;overflow-x:hidden}.cfc-control-col,.cfc-formats-col{min-width:0;max-width:100%}.cfc-control-col{order:1}.cfc-formats-col{order:2}.cfc-swatch{height:80px}.cfc-format-item{grid-template-columns:52px 1fr 44px}}