.color-hero{display:flex;justify-content:center;margin-bottom:2rem}.color-swatch{width:200px;height:200px;border-radius:var(--radius-lg);display:flex;align-items:flex-end;justify-content:center;padding-bottom:.75rem;border:2px solid var(--color-border);box-shadow:var(--shadow-md)}.color-hex-label{color:#fff;font-family:JetBrains Mono,monospace;font-size:.875rem;padding:.25rem .75rem;border-radius:var(--radius-sm);letter-spacing:.5px}.color-values{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}.value-card{background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.75rem 1.25rem;text-align:center;min-width:140px}.value-label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-muted);margin-bottom:.25rem}.value-code{font-family:JetBrains Mono,monospace;font-size:.9375rem;color:var(--color-text)}.copy-btn{display:inline-block;margin-top:.375rem;padding:.25rem .75rem;font-size:.75rem;font-weight:600;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;color:var(--color-text-secondary);transition:all .2s}.copy-btn:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-subtle)}.tool-ctas{max-width:720px;margin:0 auto;padding:1.5rem 0}.tool-ctas h2{font-size:1.5rem;margin-bottom:1rem;color:var(--color-text)}.tool-cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.75rem}.tool-cta-card{display:flex;align-items:center;gap:.625rem;padding:.75rem 1rem;background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--radius-md);text-decoration:none;transition:border-color .2s,transform .15s}.tool-cta-card:hover{border-color:var(--color-primary);transform:translateY(-1px)}.tool-cta-icon{font-size:1.25rem;flex-shrink:0}.tool-cta-label{font-size:.875rem;font-weight:500;color:var(--color-text)}.seo-content{max-width:720px;margin:0 auto;padding:2rem 0}.seo-content h2{font-size:1.5rem;margin-bottom:1rem;color:var(--color-text)}.seo-content p{margin-bottom:1rem;line-height:1.7;color:var(--color-text-secondary);font-size:1.05rem}.use-cases{max-width:720px;margin:0 auto;padding:1rem 0 2rem}.use-cases h2{font-size:1.5rem;margin-bottom:1rem;color:var(--color-text)}.use-cases-grid{display:flex;flex-wrap:wrap;gap:.5rem}.use-case-tag{background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:.375rem .875rem;font-size:.8125rem;color:var(--color-text-secondary)}.palette-section{max-width:720px;margin:0 auto;padding:1.5rem 0}.palette-section h2{font-size:1.5rem;margin-bottom:1rem;color:var(--color-text)}.palette-swatches{display:flex;gap:.25rem;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-border)}.palette-swatches.palette-compact{max-width:400px}.palette-swatch{flex:1;height:64px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.25rem;position:relative;transition:flex .2s}.palette-swatch:hover{flex:2}.palette-swatch-label{font-family:JetBrains Mono,monospace;font-size:.625rem;background:#00000080;color:#fff;padding:.125rem .375rem;border-radius:3px;opacity:0;transition:opacity .2s}.palette-swatch:hover .palette-swatch-label{opacity:1}.css-snippet-section{max-width:720px;margin:0 auto;padding:1.5rem 0}.css-snippet-section h2{font-size:1.5rem;margin-bottom:1rem;color:var(--color-text)}.css-snippet{background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1rem 1.25rem;overflow-x:auto;font-family:JetBrains Mono,monospace;font-size:.875rem;color:var(--color-text);line-height:1.6}.a11y-score-section{max-width:720px;margin:0 auto;padding:1.5rem 0}.a11y-score-section h2{font-size:1.5rem;margin-bottom:1rem;color:var(--color-text)}.a11y-score-card{display:flex;align-items:center;gap:1.5rem;padding:1.25rem;background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--radius-md);flex-wrap:wrap}.a11y-score-circle{position:relative;width:110px;height:110px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center}.a11y-score-inner{position:absolute;inset:8px;background:var(--color-bg);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}.a11y-score-number{font-size:2rem;font-weight:800}.a11y-score-of{font-size:.6875rem;color:var(--color-text-muted);margin-top:.125rem}.a11y-score-details{flex:1;min-width:200px}.a11y-grade-row{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.625rem;padding-bottom:.625rem;border-bottom:1px solid var(--color-border)}.a11y-grade-label{font-size:.875rem;color:var(--color-text-secondary)}.a11y-grade-value{font-size:1.25rem;font-weight:800}.a11y-breakdown{display:flex;flex-direction:column;gap:.375rem}.a11y-check{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--color-text-secondary)}.a11y-check-icon{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}.a11y-check.pass .a11y-check-icon{background:#22c55e26;color:#22c55e}.a11y-check.fail .a11y-check-icon{background:#ef444426;color:#ef4444}.a11y-explainer{font-size:.8125rem;color:var(--color-text-muted);margin-top:.75rem;line-height:1.5}.contrast-section{max-width:720px;margin:0 auto;padding:1.5rem 0}.contrast-section h2{font-size:1.5rem;margin-bottom:1rem;color:var(--color-text)}.contrast-cards{display:flex;gap:1rem;flex-wrap:wrap}.contrast-card{flex:1;min-width:280px;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.contrast-preview{padding:1.25rem;text-align:center;font-weight:600;font-size:.9375rem}.contrast-info{padding:.75rem 1rem;display:flex;flex-direction:column;gap:.25rem;background:var(--color-bg-alt)}.contrast-ratio{font-weight:700;font-size:.9375rem;color:var(--color-text)}.contrast-pass{font-size:.8125rem;font-weight:600}.contrast-pass.pass{color:#22c55e}.contrast-pass.fail{color:#ef4444}.related-colors{max-width:720px;margin:0 auto;padding:1.5rem 0}.related-colors h2{font-size:1.5rem;margin-bottom:1rem;color:var(--color-text)}.related-colors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem}.related-color-card{display:flex;flex-direction:column;align-items:center;gap:.375rem;text-decoration:none;padding:.625rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:border-color .2s}.related-color-card:hover{border-color:var(--color-primary)}.related-color-swatch{width:40px;height:40px;border-radius:var(--radius-sm);border:1px solid var(--color-border)}.related-color-name{font-size:.75rem;color:var(--color-text);font-weight:500;text-align:center}.related-tools{max-width:720px;margin:0 auto;padding:2rem 0}.related-tools h2{font-size:1.5rem;margin-bottom:1rem;color:var(--color-text)}.related-tools ul{list-style:none;padding:0;margin:0}.related-tools li{padding:.375rem 0;line-height:1.6;color:var(--color-text-secondary);font-size:1.05rem}.related-tools a{color:var(--color-primary);text-decoration:none;font-weight:600}.related-tools a:hover{text-decoration:underline}