.color-picker *{transition:colors .2s}.color-picker .tab-btn.active{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.color-picker .tab-btn.active:is(.dark *){--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.color-picker input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:2px solid #d1d5db;border-radius:.5rem;cursor:pointer;overflow:hidden}.color-picker input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-picker input[type=color]::-webkit-color-swatch{border:none;border-radius:.5rem}.color-picker input[type=color]::-moz-color-swatch{border:none;border-radius:.5rem}.color-picker input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.5rem;cursor:pointer;height:.5rem;width:100%;--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.color-picker input[type=range]:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.color-picker input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#2563eb;border-radius:9999px;cursor:pointer;height:1.25rem;width:1.25rem}.color-picker input[type=range]::-webkit-slider-thumb:hover{background-color:#1d4ed8}.color-picker input[type=range]::-moz-range-thumb{background-color:#2563eb;border:0;border-radius:9999px;cursor:pointer;height:1.25rem;width:1.25rem}.color-picker input[type=range]::-moz-range-thumb:hover{background-color:#1d4ed8}.color-picker input[type=range]::-webkit-slider-runnable-track{border-radius:.5rem;height:.5rem;width:100%;--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.color-picker input[type=range]:is(.dark *)::-webkit-slider-runnable-track{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.color-picker input[type=range]::-moz-range-track{border-radius:.5rem;height:.5rem;width:100%;--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.color-picker input[type=range]:is(.dark *)::-moz-range-track{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.color-picker input[type=number]{-moz-appearance:textfield}.color-picker input[type=number]::-webkit-inner-spin-button,.color-picker input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.color-picker button:disabled{cursor:not-allowed;opacity:.5}.color-picker .tab-content{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.color-picker #color-preview{position:relative}.color-picker #color-preview:before{background-image:linear-gradient(45deg,#ccc 25%,transparent 0),linear-gradient(-45deg,#ccc 25%,transparent 0),linear-gradient(45deg,transparent 75%,#ccc 0),linear-gradient(-45deg,transparent 75%,#ccc 0);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;border-radius:.5rem;content:"";inset:0;position:absolute;z-index:-1}.color-picker #gradient-preview{--tw-shadow:inset 0 2px 4px 0 rgba(0,0,0,.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.color-picker .copy-btn:active{transform:scale(.95)}.color-picker .color-swatch{transition:transform .2s}.color-picker .color-swatch:hover{transform:scale(1.1)}.color-picker .wcag-badge{border-radius:9999px;font-size:.75rem;font-weight:600;line-height:1rem;padding:.25rem .75rem}.color-picker .wcag-pass{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.color-picker .wcag-pass:is(.dark *){--tw-bg-opacity:1;background-color:rgb(20 83 45/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(187 247 208/var(--tw-text-opacity,1))}.color-picker .wcag-fail{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.color-picker .wcag-fail:is(.dark *){--tw-bg-opacity:1;background-color:rgb(127 29 29/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity,1))}.color-picker button:focus-visible,.color-picker input:focus-visible,.color-picker select:focus-visible{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px}.color-picker button:focus-visible:is(.dark *),.color-picker input:focus-visible:is(.dark *),.color-picker select:focus-visible:is(.dark *){--tw-ring-offset-color:#1f2937}.color-picker textarea[readonly]{cursor:text;-webkit-user-select:all;-moz-user-select:all;user-select:all;--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.color-picker textarea[readonly]:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.color-picker #favorite-btn svg.fill-current{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.color-picker .harmony-card{border-radius:.5rem;--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));padding:1rem;transition-duration:.15s;transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.color-picker .harmony-card:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.color-picker .harmony-card:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}.color-picker #gradient-css{resize:none}@keyframes spin{to{transform:rotate(1turn)}}.color-picker .loading-spinner{animation:spin 1s linear infinite}.color-picker [title]{cursor:help}.color-picker .copy-success{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}@media (max-width:1024px){.color-picker #color-preview{height:8rem}}@media (max-width:640px){.color-picker .grid.grid-cols-3{grid-template-columns:repeat(1,minmax(0,1fr))}.color-picker .flex.flex-wrap{gap:.25rem}}@media print{.color-picker{box-shadow:none}.color-picker .copy-btn,.color-picker .tab-btn{display:none}.color-picker #color-preview{height:8rem}}@media (prefers-contrast:high){.color-picker{border:2px solid #111827}.dark .color-picker{border-color:#fff}.color-picker button{border-width:2px}}@media (prefers-reduced-motion:reduce){.color-picker *{animation:none!important;transition:none!important}}