:root{--primary-color: #667eea;--primary-hover: #5a6fd8;--secondary-color: #764ba2;--accent-color: #f093fb;--text-primary: #2d3748;--text-secondary: #4a5568;--text-muted: #718096;--background: #ffffff;--surface: #f7fafc;--border: #e2e8f0;--shadow: rgba(0, 0, 0, .1);--shadow-lg: rgba(0, 0, 0, .15);--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: rgba(0, 0, 0, .3);--shadow-lg: rgba(0, 0, 0, .4)}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;line-height:1.6;scroll-behavior:smooth}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;margin:0 auto;padding:var(--spacing-lg)}header{text-align:center;margin-bottom:var(--spacing-2xl);padding:var(--spacing-2xl) 0;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));-webkit-background-clip:text;background-clip:text;border-radius:var(--border-radius-lg)}.header-content{max-width:800px;margin:0 auto}.main-title{font-size:clamp(2.5rem,5vw,4rem);font-weight:700;margin-bottom:var(--spacing-md);color:#fff}.subtitle{font-size:1.25rem;color:var(--text-secondary);margin-bottom:var(--spacing-lg);font-weight:300}.description{color:var(--text-muted);margin-bottom:var(--spacing-lg);line-height:1.7}.links{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap}.github-link,.blog-link{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--surface);color:var(--text-primary);text-decoration:none;border-radius:var(--border-radius);border:1px solid var(--border);font-weight:500;transition:var(--transition);box-shadow:0 2px 4px var(--shadow)}.github-link:hover,.blog-link:hover{transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow-lg);border-color:var(--primary-color)}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{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.upload-label{display:inline-block;padding:var(--spacing-lg) var(--spacing-xl);background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;font-weight:600;border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);box-shadow:0 4px 12px var(--shadow)}.upload-label:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--shadow-lg)}.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{max-width:100%;max-height:400px;height:auto;border-radius:var(--border-radius);box-shadow:0 4px 20px var(--shadow-lg)}.colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-xl)}.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-weight:600;font-size:1.125rem}@media(prefers-color-scheme:dark){.function h3{color:#f7fafc;font-weight:700}}.swatches{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);min-height:60px;align-items:center}.swatch{width:50px;height:50px;border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);box-shadow:0 2px 8px var(--shadow);border:2px solid white;position:relative}.swatch:after{content:attr(title);position:absolute;bottom:-30px;left:50%;transform:translate(-50%);background:var(--text-primary);color:var(--background);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius);font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:var(--transition);z-index:10}.swatch:hover{transform:scale(1.1) translateY(-2px);box-shadow:0 4px 16px var(--shadow-lg);z-index:5}.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{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-xl);padding:0 var(--spacing-lg)}.feature{text-align:center;padding:var(--spacing-lg)}.feature h3{font-size:1.125rem;font-weight:600;margin-bottom:var(--spacing-sm);color:var(--text-primary)}.feature p{color:var(--text-muted);line-height:1.6}.api-example{margin:var(--spacing-2xl) 0;text-align:center}.api-example h2{font-size:2rem;font-weight:600;margin-bottom:var(--spacing-lg);background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.code-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--border-radius);padding:var(--spacing-lg);margin:0 auto;max-width:600px;box-shadow:0 4px 12px var(--shadow)}.code-block pre{font-family:var(--font-family-mono);font-size:.875rem;line-height:1.6;color:var(--text-primary);text-align:left;overflow-x:auto}.code-block code{display:block;white-space:pre}.notification{position:fixed;top:20px;right:20px;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);transform:translate(100%);transition:var(--transition);z-index:1000;font-weight:500}.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{grid-template-columns:1fr;gap:var(--spacing-lg)}.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{background:#fff;color:#000}}@media(prefers-contrast:high){:root{--border: #000000;--shadow: rgba(0, 0, 0, .5)}.swatch{border:2px solid #000000}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.animated-title span{animation:none}}