.palette-picker { position: relative; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
.palette-tooltip { position: absolute; z-index: 2; top: calc(100% + 10px); right: 0; width: max-content; max-width: min(300px, calc(100vw - 44px)); padding: 10px 12px; border-radius: var(--r-sm); background: var(--fg); color: var(--bg); font-size: 12px; line-height: 1.5; text-align: center; visibility: hidden; }
.palette-tooltip::before { content: ''; position: absolute; bottom: 100%; left: 0; width: 100%; height: 10px; }
.palette-picker:hover .palette-tooltip, .palette-picker:has(.palette:focus-visible) .palette-tooltip { visibility: visible; }
.palette { width: 28px; height: 34px; padding: 6px; border: 0; background: transparent; cursor: pointer; border-radius: 50%; }
.palette::before { content: ''; display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 1px solid color-mix(in srgb, var(--fg) 35%, var(--bg)); }
.palette[aria-pressed="true"]::before { outline: 1px solid var(--fg); outline-offset: 3px; }
.palette:hover::before { transform: scale(1.12); }