.color-spreads{gap:24px;margin-top:28px;display:grid}.spread-heading{align-items:baseline;gap:12px;margin-bottom:12px;display:flex}.spread-heading h3{font-size:14px;font-weight:600}.spread-heading p{color:var(--muted);font-size:10px}.color-ramp{grid-template-columns:repeat(11,minmax(0,1fr));gap:5px;display:grid}.shade-button{text-align:center;border-radius:6px;min-width:0}.shade-chip{border:1px solid color-mix(in srgb, var(--foreground) 8%, transparent);border-radius:6px;height:62px;display:block}.shade-label{font:9px var(--font-geist-mono);color:var(--muted);padding-top:8px;display:block}@media (max-width:640px){.color-ramp{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 6px}.shade-chip{height:52px}.spread-heading{flex-wrap:wrap;gap:5px 12px}}