.colors-intro{margin-bottom:.5rem}.colors-page .page-heading{color:var(--header-color);font-family:var(--font-family)}.color-palette{margin:0}.color-palette-header{display:flex;align-items:baseline;gap:.6rem;margin:0}.color-palette-name{flex:1;margin:0;color:var(--header-color)}.color-palette-credits{font-family:var(--font-family-mono);font-size:var(--font-mono-sm)}.color-swatch-list{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0;list-style:none;margin:0;padding:0}.color-swatch-list li{margin:0}.color-swatch{appearance:none;position:relative;display:flex;align-items:flex-end;width:100%;min-height:3.75rem;padding:0;overflow:hidden;border:1px solid var(--bg-color);border-radius:0;background:var(--swatch-color);color:var(--text-color);cursor:pointer;font:inherit;text-align:left}.color-swatch-label{width:100%;padding:.2rem .25rem;background:var(--bg-color);color:var(--text-color);font-family:var(--font-family-mono);font-size:.8rem;line-height:1.25;opacity:1;text-align:center;transform:none;transition:background-color .15s ease,color .15s ease}.color-swatch.is-copied .color-swatch-label,.color-swatch:focus-visible .color-swatch-label,.color-swatch:hover .color-swatch-label{background:var(--primary-color);color:var(--bg-color);opacity:1;transform:none}@media (max-width:520px){.color-swatch-list{grid-template-columns:repeat(5,minmax(0,1fr))}.color-swatch{min-height:3.25rem}}@media (prefers-reduced-motion:reduce){.color-swatch-label{transition:none}}