.color-converter-tool .h-slider-hue [data-orientation=horizontal]{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)!important}.color-converter-tool .h-slider-hue [data-orientation=horizontal] .data-\[orientation\=horizontal\]\:h-1\.5{height:1.5rem!important}.color-converter-tool .copy-icon-transition{position:relative;overflow:visible}.color-converter-tool .color-swatch{position:relative;height:2.5rem;border-radius:.375rem;transition:transform .2s ease}.color-converter-tool .color-swatch:hover{transform:scale(1.05)}.color-converter-tool .color-swatch-copy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease;border-radius:.375rem;background:rgba(0,0,0,.1);backdrop-filter:blur(2px)}.color-converter-tool .color-swatch:hover .color-swatch-copy{opacity:1}.color-converter-tool .color-variations{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}.color-converter-tool .color-formats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.color-converter-tool .color-format{display:flex;flex-direction:column;gap:.25rem}.color-converter-tool .color-format-value{display:flex;align-items:center;padding:.5rem;border-radius:.375rem;background-color:hsl(var(--muted));font-family:monospace;font-size:.875rem;position:relative}.color-converter-tool .color-format-value:hover{background-color:hsl(var(--muted)/.8)}.color-converter-tool .color-format-value button{position:absolute;right:.5rem;opacity:0;transition:opacity .2s ease}.color-converter-tool .color-format-value:hover button{opacity:1}@keyframes copied{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.color-converter-tool .copied{animation:copied .3s ease}.color-converter-tool .react-colorful{width:100%!important;height:280px!important;border-radius:.5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.color-converter-tool .react-colorful__saturation{border-radius:.375rem .375rem 0 0}.color-converter-tool .react-colorful__hue{height:24px!important;margin-top:.5rem;border-radius:.375rem}.color-converter-tool .react-colorful__pointer{width:20px!important;height:20px!important;border-width:2px!important}.color-converter-tool .react-colorful .react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}