.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{background:#0009;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)}.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-primary)}.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-primary)}.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-primary)}.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-primary)}.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}.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-primary)}.contrast-cards{display:flex;gap:1rem;flex-wrap:wrap}.contrast-card{flex:1;min-width:240px;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.contrast-preview{padding:2rem 1.5rem;text-align:center;font-weight:700;font-size:1rem}.contrast-info{padding:.75rem 1rem;background:var(--color-bg-alt);display:flex;flex-direction:column;gap:.25rem}.contrast-ratio{font-family:JetBrains Mono,monospace;font-size:.8125rem;font-weight:600;color:var(--color-text)}.contrast-pass{font-size:.75rem;font-weight:600}.contrast-pass.pass{color:#22c55e}.contrast-pass.fail{color:#ef4444}.related-colors{max-width:720px;margin:0 auto;padding:2rem 0}.related-colors h2{font-size:1.5rem;margin-bottom:1rem;color:var(--color-text-primary)}.related-colors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.75rem}.related-color-card{text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:.375rem;padding:.75rem;border:1px solid var(--color-border);border-radius:var(--radius-md);transition:border-color .2s,box-shadow .2s}.related-color-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}.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-secondary);text-align:center;line-height:1.2}.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-primary)}.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:#6366f1;text-decoration:none;font-weight:600}.related-tools a:hover{text-decoration:underline}