:root{--primary-color:#667eea;--primary-hover:#5a6fd8;--secondary-color:#764ba2;--accent-color:#f093fb;--text-primary:#2d3748;--text-secondary:#4a5568;--text-muted:#718096;--background:#fff;--surface:#f7fafc;--border:#e2e8f0;--shadow:#0000001a;--shadow-lg:#00000026;--border-radius:8px;--border-radius-lg:12px;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--font-family-base:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-family-mono:"JetBrains Mono", Monaco, "Cascadia Code", monospace;--transition:all .2s cubic-bezier(.4, 0, .2, 1)}@media (prefers-color-scheme:dark){:root{--text-primary:#f7fafc;--text-secondary:#e2e8f0;--text-muted:#a0aec0;--background:#1a202c;--surface:#2d3748;--border:#4a5568;--shadow:#0000004d;--shadow-lg:#0006}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px;line-height:1.6}body{font-family:var(--font-family-base);color:var(--text-primary);background:var(--background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#container{max-width:1200px;padding:var(--spacing-lg);margin:0 auto}header{text-align:center;margin-bottom:var(--spacing-2xl);padding:var(--spacing-2xl) 0;background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));border-radius:var(--border-radius-lg);-webkit-background-clip:text;background-clip:text}.header-content{max-width:800px;margin:0 auto}.main-title{margin-bottom:var(--spacing-md);color:#fff;font-size:clamp(2.5rem,5vw,4rem);font-weight:700}.subtitle{color:var(--text-secondary);margin-bottom:var(--spacing-lg);font-size:1.25rem;font-weight:300}.description{color:var(--text-muted);margin-bottom:var(--spacing-lg);line-height:1.7}.links{gap:var(--spacing-md);flex-wrap:wrap;justify-content:center;display:flex}.github-link,.blog-link{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--surface);color:var(--text-primary);border-radius:var(--border-radius);border:1px solid var(--border);transition:var(--transition);box-shadow:0 2px 4px var(--shadow);font-weight:500;text-decoration:none;display:inline-flex}.github-link:hover,.blog-link:hover{box-shadow:0 4px 12px var(--shadow-lg);border-color:var(--primary-color);transform:translateY(-2px)}main{margin-bottom:var(--spacing-2xl)}.upload-section{background:var(--surface);border:2px dashed var(--border);border-radius:var(--border-radius-lg);padding:var(--spacing-2xl);text-align:center;transition:var(--transition);margin-bottom:var(--spacing-xl)}.upload-section.drag-over{border-color:var(--primary-color);background:linear-gradient(135deg,#667eea1a,#764ba21a);transform:scale(1.02)}#uploadImage{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.upload-label{padding:var(--spacing-lg) var(--spacing-xl);background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));color:#fff;border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);box-shadow:0 4px 12px var(--shadow);font-weight:600;display:inline-block}.upload-label:hover{box-shadow:0 6px 20px var(--shadow-lg);transform:translateY(-2px)}.imageSection{background:var(--surface);border-radius:var(--border-radius-lg);padding:var(--spacing-xl);box-shadow:0 4px 12px var(--shadow);margin-bottom:var(--spacing-xl)}.imageWrap{text-align:center;margin-bottom:var(--spacing-xl)}.targetImage{border-radius:var(--border-radius);max-width:100%;height:auto;max-height:400px;box-shadow:0 4px 20px var(--shadow-lg)}.colors{gap:var(--spacing-xl);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));display:grid}.function{background:var(--surface);border-radius:var(--border-radius);padding:var(--spacing-lg);box-shadow:0 2px 8px var(--shadow);border:1px solid var(--border)}.function h3{color:var(--text-primary);margin-bottom:var(--spacing-md);font-size:1.125rem;font-weight:600}@media (prefers-color-scheme:dark){.function h3{color:#f7fafc;font-weight:700}}.swatches{gap:var(--spacing-sm);flex-wrap:wrap;align-items:center;min-height:60px;display:flex}.swatch{border-radius:var(--border-radius);cursor:pointer;width:50px;height:50px;transition:var(--transition);box-shadow:0 2px 8px var(--shadow);border:2px solid #fff;position:relative}.swatch:after{content:attr(title);background:var(--text-primary);color:var(--background);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius);white-space:nowrap;opacity:0;pointer-events:none;transition:var(--transition);z-index:10;font-size:.75rem;position:absolute;bottom:-30px;left:50%;transform:translate(-50%)}.swatch:hover{box-shadow:0 4px 16px var(--shadow-lg);z-index:5;transform:scale(1.1)translateY(-2px)}.swatch:hover:after{opacity:1}.features{margin:var(--spacing-2xl) 0;padding:var(--spacing-2xl) 0;background:var(--surface);border-radius:var(--border-radius-lg)}.features-grid{gap:var(--spacing-xl);padding:0 var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));display:grid}.feature{text-align:center;padding:var(--spacing-lg)}.feature h3{margin-bottom:var(--spacing-sm);color:var(--text-primary);font-size:1.125rem;font-weight:600}.feature p{color:var(--text-muted);line-height:1.6}.api-example{margin:var(--spacing-2xl) 0;text-align:center}.api-example h2{margin-bottom:var(--spacing-lg);background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));-webkit-text-fill-color:transparent;color:#0000;-webkit-background-clip:text;background-clip:text;font-size:2rem;font-weight:600}.code-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--border-radius);padding:var(--spacing-lg);max-width:600px;box-shadow:0 4px 12px var(--shadow);margin:0 auto}.code-block pre{font-family:var(--font-family-mono);color:var(--text-primary);text-align:left;font-size:.875rem;line-height:1.6;overflow-x:auto}.code-block code{white-space:pre;display:block}.notification{background:var(--primary-color);color:#fff;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--border-radius);box-shadow:0 4px 12px var(--shadow-lg);transition:var(--transition);z-index:1000;font-weight:500;position:fixed;top:20px;right:20px;transform:translate(100%)}.notification.show{transform:translate(0)}@media (max-width:768px){#container{padding:var(--spacing-md)}.main-title{font-size:2.5rem}.colors{grid-template-columns:1fr}.features-grid{gap:var(--spacing-lg);grid-template-columns:1fr}.links{flex-direction:column;align-items:center}.upload-section{padding:var(--spacing-lg)}}@media (max-width:480px){.swatches{justify-content:center}.swatch{width:40px;height:40px}.imageSection{padding:var(--spacing-md)}}@media print{.upload-section,.links,.notification{display:none}body{color:#000;background:#fff}}@media (prefers-contrast:high){:root{--border:#000;--shadow:#00000080}.swatch{border:2px solid #000}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.animated-title span{animation:none}}