/* Color palette from image */
.cp-editor { display: grid; gap: 16px; }
.cp-stage canvas { cursor: crosshair; }
.cp-hint { margin: 0; font: 400 12.5px/1.45 var(--sans); color: var(--muted); }
.cp-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.cp-swatches:empty { display: none; }
.cp-swatch { position: relative; display: grid; align-content: end; gap: 3px; min-height: 104px; padding: 12px; border: 0; border-radius: 14px; color: #fff; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.cp-swatch:hover { box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.cp-swatch b { font: 600 14px/1.2 var(--sans); letter-spacing: 0.01em; word-break: break-all; }
.cp-swatch span { font: 400 12px/1.2 var(--sans); opacity: 0.8; }
.cp-swatch.is-light { color: var(--ink); }
.cp-swatch.is-picked { box-shadow: inset 0 0 0 2px var(--ink); }
.cp-swatch.is-picked.is-light { box-shadow: inset 0 0 0 2px rgba(14, 8, 7, 0.5); }
.cp-swatch i { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); font: 600 14px/20px var(--sans); text-align: center; font-style: normal; }
.cp-swatch.is-copied b { letter-spacing: 0; }
@media (max-width: 640px) { .cp-swatches { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); } .cp-swatch { min-height: 88px; padding: 10px; } }