:root{--dark-pine: #1B1D1D;--faded-pine: #27322A;--copper: #9A6B50;--aqua: #73DBB5;--aqua-light: #EEFAF6;--light-gray: #E6E6E6;--bg: #FAFAF8;--bg-card: #FFFFFF;--text-primary: #1B1D1D;--text-secondary: #5A5D5A;--text-muted: #8A8D8A;--border: #E0E0DC;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 20px;--radius-xl: 28px;--shadow-sm: 0 1px 3px rgba(27,29,29,.04), 0 1px 2px rgba(27,29,29,.06);--shadow-md: 0 4px 16px rgba(27,29,29,.06), 0 2px 4px rgba(27,29,29,.04);--shadow-lg: 0 12px 40px rgba(27,29,29,.08), 0 4px 12px rgba(27,29,29,.04);--transition: .25s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Raleway,sans-serif;color:var(--text-primary);background:var(--bg);line-height:1.6;min-height:100vh}.app{position:relative;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}.bg-accent{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(120px);opacity:.35}.bg-accent-1{width:600px;height:600px;background:var(--aqua-light);top:-200px;right:-200px}.bg-accent-2{width:500px;height:500px;background:linear-gradient(135deg,var(--aqua-light),rgba(154,107,80,.1));bottom:-100px;left:-200px}.header{position:sticky;top:0;z-index:100;background:#fafaf8d9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}.header-inner{max-width:1100px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;gap:16px}.logo{display:flex;align-items:flex-start}.logo-text{font-family:Red Hat Display,sans-serif;font-weight:900;font-size:1.35rem;letter-spacing:.18em;color:var(--dark-pine)}.logo-sup{font-size:.5rem;color:var(--text-muted);margin-top:2px}.header-divider{width:1px;height:20px;background:var(--border)}.header-tool-name{font-weight:400;font-size:.85rem;color:var(--text-secondary);letter-spacing:.02em}.main{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:0 32px;flex:1;width:100%}.hero{padding:72px 0 48px}.hero-title{font-family:Raleway,sans-serif;font-weight:300;font-size:3.5rem;line-height:1.15;letter-spacing:-.02em;color:var(--dark-pine)}.hero-accent{font-weight:600;background:linear-gradient(135deg,var(--copper),var(--faded-pine));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{margin-top:20px;font-size:1.05rem;color:var(--text-secondary);max-width:620px;line-height:1.7;font-weight:400}.palette-section{padding-bottom:40px}.palette-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--text-muted);margin-bottom:12px}.palette-row{display:flex;gap:12px;flex-wrap:wrap}.palette-chip{display:flex;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:8px 14px 8px 8px;box-shadow:var(--shadow-sm)}.palette-swatch{width:28px;height:28px;border-radius:var(--radius-sm);flex-shrink:0;border:1px solid rgba(0,0,0,.06)}.palette-name{font-size:.78rem;font-weight:500;color:var(--text-primary);white-space:nowrap}.palette-hex{font-size:.68rem;font-family:SF Mono,Fira Code,monospace;color:var(--text-muted)}.workspace{padding:24px 0 48px}.dropzone{border:2px dashed var(--border);border-radius:var(--radius-xl);padding:72px 40px;text-align:center;cursor:pointer;transition:all var(--transition);background:#fff9}.dropzone:hover{border-color:var(--copper);background:#ffffffe6;box-shadow:var(--shadow-md)}.dropzone-active{border-color:var(--aqua);background:var(--aqua-light);box-shadow:0 0 0 4px #73dbb526}.dropzone-icon{color:var(--copper);margin-bottom:16px}.dropzone-title{font-size:1.15rem;font-weight:500;color:var(--text-primary);margin-bottom:6px}.dropzone-hint{font-size:.85rem;color:var(--text-muted)}.dropzone-formats{font-size:.72rem;color:var(--text-muted);margin-top:12px;letter-spacing:.04em;opacity:.7}.option-toggle{display:inline-flex;align-items:center;gap:12px;margin-top:20px;cursor:pointer;-webkit-user-select:none;user-select:none}.option-toggle input{display:none}.toggle-track{width:40px;height:22px;background:var(--light-gray);border-radius:11px;position:relative;transition:background var(--transition)}.option-toggle input:checked+.toggle-track{background:var(--aqua)}.toggle-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #00000026;transition:transform var(--transition)}.option-toggle input:checked+.toggle-track .toggle-thumb{transform:translate(18px)}.toggle-label{font-size:.85rem;color:var(--text-secondary)}.processing{animation:fadeIn .3s ease}.processing-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}.processing-title{font-size:1.1rem;font-weight:600;color:var(--text-primary)}.processing-file{font-size:.82rem;color:var(--text-muted);margin-top:2px;display:flex;align-items:center;gap:8px}.file-type-badge{display:inline-block;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#fff;padding:2px 8px;border-radius:4px;line-height:1.4;white-space:nowrap}.file-type-badge-lg{font-size:.7rem;padding:4px 12px;border-radius:6px;margin-bottom:8px}.spinner{width:32px;height:32px;border:3px solid var(--light-gray);border-top-color:var(--copper);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.progress-bar{width:100%;height:6px;background:var(--light-gray);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--copper),var(--aqua));border-radius:3px;transition:width .3s ease}.progress-text{font-size:.75rem;color:var(--text-muted);margin-top:8px;font-variant-numeric:tabular-nums}.done{text-align:center;animation:fadeIn .4s ease}.done-icon{margin-bottom:20px}.done-title{font-family:Raleway,sans-serif;font-weight:600;font-size:1.6rem;color:var(--text-primary);margin-bottom:6px}.done-stats{font-size:.9rem;color:var(--text-secondary);margin-bottom:28px}.btn-download{display:inline-flex;align-items:center;gap:10px;background:var(--dark-pine);color:#fff;border:none;padding:14px 32px;border-radius:var(--radius-md);font-family:Raleway,sans-serif;font-size:.92rem;font-weight:600;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-md);letter-spacing:.01em}.btn-download:hover{background:var(--faded-pine);box-shadow:var(--shadow-lg);transform:translateY(-1px)}.btn-reset{display:block;margin:16px auto 0;background:none;border:none;color:var(--copper);font-family:Raleway,sans-serif;font-size:.85rem;font-weight:500;cursor:pointer;padding:8px 16px;border-radius:var(--radius-sm);transition:all var(--transition)}.btn-reset:hover{background:#9a6b5014}.error-state{text-align:center;padding:48px 0;animation:fadeIn .3s ease}.error-icon{margin-bottom:16px}.error-message{font-size:1rem;color:var(--copper);margin-bottom:24px;max-width:400px;margin-left:auto;margin-right:auto}.preview-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:28px}.final-previews{margin-top:40px;text-align:left}.preview-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;box-shadow:var(--shadow-sm)}.preview-label{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:10px}.preview-compare{display:flex;align-items:center;gap:8px}.preview-side{flex:1;min-width:0}.preview-side img{width:100%;height:auto;border-radius:var(--radius-sm);border:1px solid var(--border);display:block}.preview-tag{display:inline-block;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:4px}.tag-after{color:var(--aqua)}.preview-arrow{flex-shrink:0;color:var(--copper);opacity:.5}.how-it-works{padding:64px 0;border-top:1px solid var(--border);margin-top:32px}.section-heading{font-family:Raleway,sans-serif;font-weight:300;font-size:1.5rem;color:var(--text-primary);margin-bottom:32px;letter-spacing:-.01em}.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.step{padding:24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:all var(--transition)}.step:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.step-number{font-family:Red Hat Display,sans-serif;font-weight:900;font-size:2rem;color:var(--aqua);line-height:1;margin-bottom:12px}.step h4{font-weight:600;font-size:.95rem;color:var(--text-primary);margin-bottom:6px}.step p{font-size:.82rem;color:var(--text-secondary);line-height:1.55}.footer{position:relative;z-index:1;text-align:center;padding:32px;border-top:1px solid var(--border);font-size:.78rem;color:var(--text-muted)}.footer-note{margin-top:6px;font-size:.72rem;color:var(--text-muted);opacity:.7}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.main{padding:0 20px}.hero{padding:48px 0 32px}.hero-title{font-size:2.4rem}.palette-row{gap:8px}.palette-chip{padding:6px 10px 6px 6px}.palette-hex{display:none}.steps-grid{grid-template-columns:repeat(2,1fr);gap:16px}.dropzone{padding:48px 24px}.header-inner{padding:14px 20px}.btn-download{font-size:.82rem;padding:12px 24px;width:100%;justify-content:center}}@media (max-width: 480px){.hero-title{font-size:2rem}.steps-grid{grid-template-columns:1fr}.preview-compare{flex-direction:column}.preview-arrow{transform:rotate(90deg)}}