.chroma-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}.swatch{display:flex;flex-direction:column;border:1px solid var(--color-border);background:var(--color-bg);overflow:hidden;transition:border-color var(--duration-fast) var(--ease)}.swatch:hover{border-color:var(--color-border-strong)}.swatch-head{display:flex;justify-content:space-between;align-items:baseline;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border)}.swatch-num{font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-wider);color:var(--color-text-muted)}.swatch-name{font-size:var(--text-sm);font-weight:600;letter-spacing:var(--tracking-wide);color:var(--color-text)}.swatch-fill{height:140px;position:relative}.swatch-foot{padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);border-top:1px solid var(--color-border)}.swatch-row{display:flex;justify-content:space-between;font-size:var(--text-xs);letter-spacing:var(--tracking-wide)}.swatch-row .k{color:var(--color-text-muted)}.swatch-row .v{font-family:var(--font-mono);color:var(--color-text)}.swatch-role{font-size:var(--text-xs);color:var(--color-text-soft);letter-spacing:var(--tracking-wide);padding-top:var(--space-2);border-top:1px dashed var(--color-border)}.swatch-role b{color:var(--color-primary);font-weight:600}@media (max-width: 1024px){.chroma-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 768px){.chroma-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.chroma-grid{grid-template-columns:1fr}}