:root{--primary-blue: #2563eb;--primary-blue-hover: #1d4ed8;--primary-blue-light: #eff6ff;--primary-pink: #ec4899;--primary-pink-hover: #db2777;--primary-pink-light: #fdf2f8;--gradient-primary: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-pink) 100%);--gradient-subtle: linear-gradient(135deg, rgba(37, 99, 235, .05) 0%, rgba(236, 72, 153, .05) 100%);--bg-color: #fafbff;--surface-color: #ffffff;--text-color: #0f172a;--text-secondary: #64748b;--text-muted: #94a3b8;--border-color: #e1e7f3;--border-light: #f1f5f9;--shadow-sm: 0 1px 3px 0 rgba(37, 99, 235, .08);--shadow-md: 0 4px 12px 0 rgba(37, 99, 235, .12);--shadow-lg: 0 8px 24px 0 rgba(37, 99, 235, .15);--shadow-xl: 0 16px 40px 0 rgba(37, 99, 235, .18);--radius-sm: 6px;--radius: 12px;--radius-lg: 16px;--radius-xl: 24px;--transition: all .3s cubic-bezier(.4, 0, .2, 1);--transition-fast: all .15s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg-color);background-image:radial-gradient(circle at 20% 50%,rgba(37,99,235,.03) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(236,72,153,.03) 0%,transparent 50%);color:var(--text-color);line-height:1.6;min-height:100vh;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container,.features-container{max-width:900px;margin:0 auto;padding:60px 24px}.features-container{padding:0 24px 60px}.background-banner{position:absolute;top:0;left:0;right:0;height:100%;z-index:-1;background:linear-gradient(180deg,#fff0,#ffffffb3 60%,#fafbff),linear-gradient(135deg,transparent 35%,rgba(37,99,235,.03) 35%,rgba(37,99,235,.03) 45%,transparent 45%),linear-gradient(45deg,transparent 35%,rgba(236,72,153,.02) 35%,rgba(236,72,153,.02) 45%,transparent 45%),radial-gradient(circle at 50% 50%,rgba(37,99,235,.04) 1px,transparent 1px),radial-gradient(circle at 25% 25%,rgba(236,72,153,.02) 2px,transparent 2px),radial-gradient(circle at 75% 75%,rgba(37,99,235,.02) 2px,transparent 2px),linear-gradient(135deg,#2563eb08,#8b5cf605,#ec489908,#2563eb05,#ec489903);background-size:100% 100%,60px 60px,60px 60px,40px 40px,80px 80px,80px 80px,100% 100%;background-position:0 0,0 0,30px 30px,0 0,0 0,40px 40px,0 0;border-radius:0 0 var(--radius-xl) var(--radius-xl);overflow:hidden}.background-banner:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 20%,rgba(37,99,235,.05) 0%,transparent 50%),radial-gradient(circle at 80% 60%,rgba(236,72,153,.04) 0%,transparent 50%),radial-gradient(circle at 40% 80%,rgba(139,92,246,.03) 0%,transparent 50%);pointer-events:none;z-index:0}header{position:relative;z-index:1}.background-banner:after{content:"";position:absolute;bottom:0;left:10%;right:10%;height:1px;z-index:1}@media (max-width: 768px){.background-banner{height:300px;background-size:100% 100%,40px 40px,40px 40px,30px 30px,60px 60px,60px 60px,100% 100%}}@media (max-width: 480px){.background-banner{height:250px;background-size:100% 100%,30px 30px,30px 30px,20px 20px,40px 40px,40px 40px,100% 100%}}header{text-align:center;margin-bottom:60px}h1{font-weight:700;font-size:clamp(2.5rem,5vw,3.5rem);margin-bottom:16px;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.025em}.logo-image{margin:0 auto -25px;max-width:125px;position:relative}.logo-image svg{position:relative;filter:drop-shadow(2px 4px 8px rgba(31,5,1,.15));transition:none}.logo-image svg *{fill:#2563eb;animation:colorShift 8s ease-in-out infinite}@keyframes colorShift{0%{fill:#2563eb}50%{fill:#ec4899}to{fill:#2563eb}}h1.logo{font-weight:700;font-size:clamp(2.5rem,5vw,3.8rem);background:linear-gradient(135deg,var(--primary-blue) 0%,rgba(139,92,246,1) 30%,var(--primary-pink) 70%,#ff6b9d 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.03em;position:relative;display:inline-block;font-family:Inter,sans-serif;font-variation-settings:"wght" 700,"slnt" 0;overflow:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1.logo:before{content:attr(data-text);position:absolute;top:0;left:0;background:linear-gradient(135deg,#2563eb4d,#8b5cf64d 30%,#ec48994d 70%,#ff6b9d4d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:blur(8px);z-index:-1;opacity:.6;transform:scale(1.05)}h1.logo{transition:var(--transition);cursor:default}h1.logo:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.1)}h1.logo:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);transform:skew(-20deg);pointer-events:none}@keyframes shimmer{0%{left:-100%;opacity:0}50%{opacity:1}to{left:100%;opacity:0}}h1.logo{text-shadow:0 1px 2px rgba(37,99,235,.1),0 2px 4px rgba(236,72,153,.1),0 4px 8px rgba(139,92,246,.05)}@media (max-width: 768px){h1.logo{font-size:clamp(2rem,6vw,3rem);letter-spacing:-.02em}h1.logo:after{animation-duration:4s}}@media (max-width: 480px){h1.logo{font-size:clamp(1.8rem,7vw,2.5rem)}}h1.logo[data-text]:before{content:attr(data-text)}.subtitle{color:#2563eba8;font-weight:400;font-size:16px;max-width:600px;margin:-25px auto 0;line-height:1.5}.upload-container{margin:50px 0;display:flex;justify-content:center}input[type=file]{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.upload-label{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--surface-color);color:var(--text-color);padding:24px 32px;border-radius:var(--radius-lg);font-weight:500;font-size:1.1rem;cursor:pointer;transition:var(--transition);border:2px dashed var(--border-color);position:relative;min-width:280px;box-shadow:var(--shadow-sm)}.upload-label:hover{background:var(--gradient-subtle);border-color:var(--primary-blue);transform:translateY(-2px);box-shadow:var(--shadow-md)}.upload-label svg{transition:var(--transition);color:var(--primary-blue)}.upload-label:hover svg{transform:scale(1.1);color:var(--primary-pink)}.upload-label.loading{pointer-events:none}.upload-label.loading:after{content:"";position:absolute;width:24px;height:24px;border:3px solid var(--border-light);border-top-color:var(--primary-blue);border-radius:50%;right:16px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.preview-container{width:100%;margin:40px auto;border-radius:var(--radius-lg);display:flex;justify-content:center}.image-container{border:1px solid var(--border-light);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--surface-color)}.image-container.image-active{padding:8px}img#preview{max-width:100%;max-height:500px;object-fit:contain;display:none;border-radius:var(--radius)}.error-message{background:linear-gradient(135deg,#fef2f2,#fdf2f8);color:#dc2626;padding:16px 20px;border-radius:var(--radius-lg);margin:30px 0;text-align:center;border:1px solid #fecaca;font-weight:500}.generate-button{display:block;margin:40px auto;background:var(--gradient-primary);color:#fff;border:none;padding:16px 32px;border-radius:var(--radius-lg);font-weight:600;cursor:pointer;transition:var(--transition);font-size:1.1rem;box-shadow:var(--shadow-md);position:relative;overflow:hidden}.generate-button:hover:before{left:100%}.generate-button:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.generate-button:disabled{background:var(--text-muted);cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}.palette-section-header{font-size:1.5rem;font-weight:700;margin:50px 0 24px;color:var(--text-color);position:relative;text-align:center}.palette-section-header:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:60px;height:3px;background:var(--gradient-primary);border-radius:2px}.accent-header{color:var(--text-secondary)}.accent-header:after{background:linear-gradient(135deg,var(--primary-pink) 0%,var(--primary-blue) 100%)}.palette-container{margin-top:50px}.swatches-container{display:flex;flex-wrap:wrap;gap:24px;justify-content:center}.color-swatch{background:var(--surface-color);border-radius:var(--radius-lg);flex:1 1 calc(33.333% - 16px);min-width:240px;max-width:280px;overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--transition);cursor:pointer;opacity:0;animation:fadeInUp .6s ease forwards;border:1px solid var(--border-light)}.color-swatch:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-xl)}.accent-swatches{margin-bottom:30px}.accent-swatch{position:relative;border:2px solid transparent;background:linear-gradient(var(--surface-color),var(--surface-color)) padding-box,var(--gradient-primary) border-box}.accent-swatch:before{content:"✨";position:absolute;top:12px;right:12px;font-size:16px;opacity:.8;z-index:1;background:#ffffffe6;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000001a}.accent-swatch:hover:before{opacity:1;transform:scale(1.1)}.color-display{height:140px;width:100%;position:relative;overflow:hidden}.color-display:after{content:"";position:absolute;bottom:0;left:0;right:0;height:30%;background:linear-gradient(transparent,#0000001a);pointer-events:none}.color-info{padding:20px;background:var(--surface-color)}.color-name{font-weight:600;margin-bottom:8px;font-size:1.1rem;color:var(--text-color)}.color-hex{font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.95rem;color:var(--text-secondary);margin-bottom:8px;background:var(--primary-blue-light);padding:6px 10px;border-radius:var(--radius-sm);display:inline-block;transition:var(--transition-fast)}.color-swatch:hover .color-hex{background:var(--primary-pink-light);color:var(--primary-pink)}.color-population{font-size:.85rem;color:var(--text-muted);font-weight:500}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.palette-refresh{animation:refreshPalette .6s ease}@keyframes refreshPalette{0%{opacity:.7;transform:scale(.96);filter:blur(2px)}50%{opacity:.8;transform:scale(.98);filter:blur(1px)}to{opacity:1;transform:scale(1);filter:blur(0)}}.copy-buttons-container{display:flex;gap:16px;justify-content:center;margin-top:32px;padding-top:24px;border-top:1px solid var(--border-light)}.copy-button{background:var(--surface-color);color:var(--text-color);border:2px solid var(--border-color);padding:12px 24px;border-radius:var(--radius-lg);font-weight:500;font-size:.95rem;cursor:pointer;transition:var(--transition);min-width:140px;position:relative;overflow:hidden}.copy-button:hover{background:var(--gradient-subtle);border-color:var(--primary-blue);transform:translateY(-2px);box-shadow:var(--shadow-md)}.copy-hex-button:hover{border-color:var(--primary-blue);color:var(--primary-blue)}.copy-rgb-button:hover{border-color:var(--primary-pink);color:var(--primary-pink)}.copy-button:active{transform:translateY(0);box-shadow:var(--shadow-sm)}@media (max-width: 480px){.copy-buttons-container{flex-direction:column;gap:12px}.copy-button{min-width:auto;width:100%}}@media (max-width: 768px){.container{padding:40px 16px}h1{font-size:2.5rem}h1.logo{font-size:35px}.logo-image{margin-bottom:-10px;max-width:75px}.subtitle{font-size:14px;margin-top:0}.upload-label{padding:20px 24px;min-width:250px;font-size:1rem}.swatches-container{gap:16px}.color-swatch{flex:1 1 45%;min-width:auto;max-width:none}.palette-section-header{font-size:1.3rem;margin:40px 0 20px}}@media (max-width: 480px){.container{padding:30px 12px}.color-swatch{min-width:auto}.color-info{padding:16px}.upload-label{min-width:200px;padding:16px 20px}}.upload-label:focus-visible,.generate-button:focus-visible,.color-swatch:focus-visible{outline:2px solid var(--primary-blue);outline-offset:2px}html{scroll-behavior:smooth}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--border-light)}::-webkit-scrollbar-thumb{background:var(--gradient-primary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--primary-blue)}.footer{padding:2rem;text-align:center;border-top:1px solid rgba(255,255,255,.1);color:var(--text-muted);font-size:.9rem}.footer p{margin:0}@media (max-width: 768px){.footer{margin:0 auto;max-width:70%;padding:1.5rem 0;font-size:.8rem}}.features-section{background:linear-gradient(135deg,#2563ebd9,#8b5cf6cc,#ec4899d9),linear-gradient(45deg,transparent 40%,rgba(255,255,255,.03) 40%,rgba(255,255,255,.03) 45%,transparent 45%),radial-gradient(circle at 30% 30%,rgba(255,255,255,.06) 2px,transparent 2px),radial-gradient(circle at 70% 70%,rgba(255,255,255,.04) 2px,transparent 2px);background-size:400% 400%,80px 80px,100px 100px,100px 100px;background-position:0% 50%,0 0,0 0,50px 50px;margin:4rem 0 0;padding:3rem 0;border-top:1px solid var(--border-light);position:relative;overflow:hidden;animation:optimizedColorShift 25s ease-in-out infinite;will-change:background-position;transform:translateZ(0);backface-visibility:hidden}.features-section:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.08) 0%,transparent 50%);animation:subtleGlow 20s ease-in-out infinite;pointer-events:none;z-index:0;will-change:opacity;transform:translateZ(0)}.features-section .features-container{position:relative;z-index:1}.features-section .features-container h2{text-align:center;font-size:2rem;font-weight:600;color:#fff;margin-bottom:4rem;text-shadow:0 2px 4px rgba(0,0,0,.2);position:relative}.features-section .features-container h2:after{content:"";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:80px;height:3px;background:#ffffffe6;border-radius:2px}.features-section .features-list{list-style:none;display:flex;flex-wrap:wrap;gap:1.5rem;margin:0;padding:0}.features-section .features-list li{display:flex;align-items:flex-start;gap:.75rem;padding:1.5rem;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);box-shadow:0 8px 32px #0000001a;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;flex:1 1 300px;min-width:300px;position:relative;will-change:transform;transform:translateZ(0)}.features-section .features-list li:hover{transform:translateY(-4px) translateZ(0);box-shadow:0 12px 48px #00000026;border-color:#2563eb4d}.features-section .features-list li svg{flex-shrink:0;margin-top:.125rem;color:var(--primary-blue);height:30px;width:30px;transition:color .2s ease,transform .2s ease;will-change:transform}.features-section .features-list li:hover svg{color:var(--primary-pink);transform:scale(1.1) translateZ(0)}.features-section .features-list li div{display:flex;flex-direction:column;gap:.25rem}.features-section .features-list li div strong{color:var(--primary-blue);font-weight:700;font-size:18px;transition:color .2s ease}.features-section .features-list li div p{font-size:.85rem;line-height:1.5;color:var(--text-secondary);margin:0}.features-section .features-list li:hover div strong{color:var(--primary-pink)}@keyframes optimizedColorShift{0%,to{background-position:0% 50%,0 0,0 0,50px 50px}50%{background-position:100% 50%,0 0,0 0,50px 50px}}@keyframes subtleGlow{0%,to{opacity:.6}50%{opacity:.8}}@media (max-width: 768px){.features-section{animation:none;background-size:100% 100%,60px 60px,80px 80px,80px 80px}.features-section:before{animation:none;opacity:.6}.features-section .features-list{flex-direction:column;gap:1rem;margin:50px auto 0;max-width:90%}.features-section .features-list li{padding:1.25rem;flex:1 1 auto;min-width:auto;transition:none}.features-section .features-list li:hover{transform:translateZ(0)}.features-section .features-list li svg{transition:none}.features-section .features-list li svg:hover{transform:translateZ(0)}.features-section .features-list li div strong{transition:none}.features-section .features-container h2{font-size:1.5rem;margin-bottom:1.5rem}}@media (max-width: 480px){.features-section{background-size:100% 100%,40px 40px,60px 60px,60px 60px}}@media (prefers-reduced-motion: reduce){.features-section{animation:none!important}.features-section:before{animation:none!important}.features-section .features-list li{transition:none!important}.features-section .features-list li:hover{transform:none!important}.features-section .features-list li svg{transition:none!important}.features-section .features-list li svg:hover{transform:none!important}.features-section .features-list li div strong{transition:none!important}}@media (max-width: 1024px){.features-section{background-size:300% 300%,60px 60px,80px 80px,80px 80px}}@media (min-resolution: 120dpi){.features-section{animation-duration:22s}.features-section:before{animation-duration:18s}}