.color-palette-tool{max-width:720px}.color-palette-tool__controls{align-items:flex-end;gap:var(--space-md);margin-bottom:var(--space-xl);flex-wrap:wrap;display:flex}.color-palette-tool__mode{flex:1;min-width:180px}.color-palette-tool__buttons{gap:.5rem;display:flex}.color-palette-tool__hint{width:100%;color:var(--color-text-muted);font-size:.75rem}.color-palette-tool__hint kbd{background:#ffffff0f;border:1px solid #fff3;border-radius:4px;padding:.1rem .4rem;font-family:inherit;font-size:.6875rem;display:inline-block}.palette-slots{margin-bottom:var(--space-xl);gap:.75rem;display:flex}.palette-slot{transition:border-color var(--transition-fast);background:#ffffff0a;border:1px solid #ffffff1a;border-radius:12px;flex:1;overflow:hidden}.palette-slot.is-locked{border-color:#facc154d}.palette-slot__color{width:100%;height:100px;transition:background-color .15s}.palette-slot__info{flex-direction:column;gap:.125rem;padding:.625rem;display:flex}.palette-slot__hex{width:100%;color:var(--color-text);transition:border-color var(--transition-fast);background:0 0;border:none;border-bottom:1px solid #0000;padding:.125rem 0;font-family:Neue Montreal,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8125rem;font-weight:500}.palette-slot__hex:focus{border-bottom-color:var(--color-accent);outline:none}.palette-slot__hsl{color:var(--color-text-muted);font-family:Neue Montreal,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.625rem}.palette-slot__actions{align-items:center;gap:.375rem;padding:0 .625rem .625rem;display:flex}.palette-slot__lock{width:28px;height:28px;color:var(--color-text-muted);cursor:pointer;transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);background:0 0;border:1px solid #ffffff1a;border-radius:6px;justify-content:center;align-items:center;display:flex}.palette-slot__lock:hover{color:var(--color-text);background:#ffffff0f}.palette-slot.is-locked .palette-slot__lock{color:#facc15;border-color:#facc154d}.palette-slot__copy{padding:.25rem .5rem!important;font-size:.5625rem!important}.color-palette-tool__exports{gap:var(--space-md);flex-direction:column;display:flex}@media (width<=768px){.palette-slots{flex-direction:column}.palette-slot{grid-template-columns:80px 1fr auto;align-items:center;display:grid}.palette-slot__color{border-radius:12px 0 0 12px;height:100%;min-height:60px}.palette-slot__info{padding:.5rem .75rem}.palette-slot__actions{flex-direction:column;padding:.5rem .75rem .5rem 0}.color-palette-tool__controls{flex-direction:column;align-items:stretch}}