.palette{display: flex;min-height: 260px;border-radius: var(--radius);overflow: hidden;border: 1px solid var(--border)}.pal-col{flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding: 12px 6px;min-width: 0;transition: flex 0.2s var(--ease)}.pal-col:hover{flex: 1.25}.pal-actions{display: flex;flex-direction: column;gap: 4px;align-items: center;opacity: 0;transition: opacity 0.15s}.pal-col:hover .pal-actions,.pal-col:focus-within .pal-actions,.pal-actions:has([aria-pressed="true"]){opacity: 1}@media (hover: none){.pal-actions{opacity: 1}}.pal-btn{width: 34px;height: 34px;border-radius: 8px;border: 0;background: rgba(255,255,255,0.2);color: inherit;display: inline-flex;align-items: center;justify-content: center;cursor: pointer}.pal-btn:hover{background: rgba(255,255,255,0.35);color: inherit}.pal-btn[aria-pressed="true"]{background: rgba(0,0,0,0.28)}.pal-btn .icon{width: 17px;height: 17px}.pal-info{text-align: center;font-family: var(--mono);overflow: hidden}.pal-info strong{display: block;font-size: 0.98rem}.pal-info small{opacity: 0.8;font-size: 0.7rem;white-space: nowrap}@media (max-width: 640px){.palette{flex-direction: column}.pal-col{flex-direction: row-reverse;align-items: center;min-height: 64px;padding: 8px 12px}.pal-actions{flex-direction: row;opacity: 1}.pal-info{text-align: left}}.pal-mini{display: flex;height: 36px;width: 100%;border: 1px solid var(--border);border-radius: 8px;overflow: hidden;cursor: pointer;padding: 0;background: none}.pal-mini span{flex: 1}