.gradient-generator{*{transition-duration:.15s;transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.gradient-type-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))}.gradient-type-btn.active:is(.dark *){--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:2px solid #e5e7eb;border-radius:.5rem}.color-input::-moz-color-swatch{border:2px solid #e5e7eb;border-radius:.5rem}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#3b82f6;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);cursor:pointer;height:20px;width:20px}input[type=range]::-moz-range-thumb{background:#3b82f6;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);cursor:pointer;height:20px;width:20px}input[type=range]::-webkit-slider-thumb:hover{background:#2563eb}input[type=range]::-moz-range-thumb:hover{background:#2563eb}.font-mono{font-family:Monaco,Menlo,Ubuntu Mono,Consolas,source-code-pro,monospace}#gradient-history{scrollbar-color:#9ca3af transparent;scrollbar-width:thin}#gradient-history::-webkit-scrollbar{height:6px;width:6px}#gradient-history::-webkit-scrollbar-track{background-color:transparent}#gradient-history::-webkit-scrollbar-thumb{border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity,1))}#gradient-history:is(.dark *)::-webkit-scrollbar-thumb{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}#gradient-history::-webkit-scrollbar-thumb:hover{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity,1))}#gradient-history:is(.dark *)::-webkit-scrollbar-thumb:hover{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity,1))}button{transition-duration:.15s;transition-duration:.2s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}button:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}button:active{--tw-scale-x:0.98;--tw-scale-y:0.98;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.history-btn:hover,.preset-btn:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#css-output{line-height:1.6;white-space:pre-wrap;word-break:break-word}#preview-container{transition-duration:.15s;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tab-content{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}input:focus,select:focus{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}input:focus:is(.dark *),select:focus:is(.dark *){--tw-ring-offset-color:#1f2937}#color-stops-container{max-height:400px;overflow-y:auto;scrollbar-color:#9ca3af transparent;scrollbar-width:thin}#color-stops-container::-webkit-scrollbar{width:6px}#color-stops-container::-webkit-scrollbar-track{background-color:transparent}#color-stops-container::-webkit-scrollbar-thumb{border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity,1))}#color-stops-container:is(.dark *)::-webkit-scrollbar-thumb{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}@media (max-width:1024px){.grid.lg\\:grid-cols-2{grid-template-columns:repeat(1,minmax(0,1fr))}}@media (max-width:640px){.grid.grid-cols-3,.grid.grid-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}.px-6{padding-left:1rem;padding-right:1rem}.text-6xl{font-size:2.25rem;line-height:2.5rem}}@media print{.gradient-generator{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}button,select{display:none}#css-output,#preview-container{display:block}}@media (prefers-contrast:high){.gradient-generator{border-width:2px;--tw-border-opacity:1;border-color:rgb(17 24 39/var(--tw-border-opacity,1))}.gradient-generator:is(.dark *){--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}button{border-width:2px}}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-property:none}}button.loading{cursor:wait;opacity:.75;position:relative}button.loading:after{animation:spin .6s linear infinite;border:2px solid transparent;border-radius:50%;border-top-color:currentcolor;content:"";height:16px;left:50%;margin-left:-8px;margin-top:-8px;position:absolute;top:50%;width:16px}@keyframes spin{to{transform:rotate(1turn)}}.bg-clip-text{-webkit-background-clip:text;background-clip:text}@media (pointer:coarse){button{min-width:44px}.gradient-type-btn,button{min-height:44px}}}.gradient-generator button:focus-visible,.gradient-generator input:focus-visible,.gradient-generator 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}.gradient-generator button:focus-visible:is(.dark *),.gradient-generator input:focus-visible:is(.dark *),.gradient-generator select:focus-visible:is(.dark *){--tw-ring-offset-color:#1f2937}