@import url(https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap);body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-feature-settings:normal;font-variation-settings:normal;scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0f0f14;background-color:var(--bg-primary);color:#e4e4e7;color:var(--text-primary);font-family:Lexend,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-optical-sizing:auto;font-weight:400;line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:Lexend,sans-serif;font-weight:600;letter-spacing:-.01em;line-height:1.2}h1{font-size:2.75rem;font-weight:700;letter-spacing:-.02em}h2{font-size:2.25rem;letter-spacing:-.015em}h2,h3{font-weight:600}h3{font-size:1.75rem;letter-spacing:-.01em}h4{font-size:1.375rem}h4,h5{font-weight:500}h5{font-size:1.25rem}h6{font-size:1.125rem;font-weight:500}p{font-weight:400;line-height:1.7}button,p{font-family:Lexend,sans-serif;letter-spacing:0}button{font-weight:500}input,select,textarea{font-weight:400;line-height:1.5}a,input,select,textarea{font-family:Lexend,sans-serif}a,code{font-weight:500}code{font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,Consolas,Courier New,monospace;font-size:.875em;letter-spacing:0}:root{--primary:#6366f1;--primary-light:#818cf8;--primary-dark:#4f46e5;--secondary:#8b5cf6;--accent:#f59e0b;--success:#10b981;--warning:#f59e0b;--error:#ef4444;--bg-primary:#0f0f14;--bg-secondary:#1a1a23;--bg-tertiary:#232337;--bg-hover:#2a2a3e;--text-primary:#e4e4e7;--text-secondary:#a1a1aa;--text-muted:#71717a;--border-color:#27272a;--border-light:#3f3f46;--gradient-primary:linear-gradient(135deg,#6366f1,#8b5cf6);--gradient-secondary:linear-gradient(135deg,#f59e0b,#ef4444);--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;--shadow-xl:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;--shadow-glow:0 0 20px #6366f14d;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-size-5xl:3rem;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--line-height-tight:1.25;--line-height-snug:1.375;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:2;--letter-spacing-tighter:-0.05em;--letter-spacing-tight:-0.025em;--letter-spacing-normal:0em;--letter-spacing-wide:0.025em;--letter-spacing-wider:0.05em;--letter-spacing-widest:0.1em}.font-light{font-weight:300;font-weight:var(--font-weight-light)}.font-normal{font-weight:400;font-weight:var(--font-weight-normal)}.font-medium{font-weight:500;font-weight:var(--font-weight-medium)}.font-semibold{font-weight:600;font-weight:var(--font-weight-semibold)}.font-bold{font-weight:700;font-weight:var(--font-weight-bold)}.font-extrabold{font-weight:800;font-weight:var(--font-weight-extrabold)}.font-black{font-weight:900;font-weight:var(--font-weight-black)}.text-xs{font-size:.75rem;font-size:var(--font-size-xs)}.text-sm{font-size:.875rem;font-size:var(--font-size-sm)}.text-base{font-size:1rem;font-size:var(--font-size-base)}.text-lg{font-size:1.125rem;font-size:var(--font-size-lg)}.text-xl{font-size:1.25rem;font-size:var(--font-size-xl)}.text-2xl{font-size:1.5rem;font-size:var(--font-size-2xl)}.text-3xl{font-size:1.875rem;font-size:var(--font-size-3xl)}.text-4xl{font-size:2.25rem;font-size:var(--font-size-4xl)}.text-5xl{font-size:3rem;font-size:var(--font-size-5xl)}.leading-tight{line-height:1.25;line-height:var(--line-height-tight)}.leading-snug{line-height:1.375;line-height:var(--line-height-snug)}.leading-normal{line-height:1.5;line-height:var(--line-height-normal)}.leading-relaxed{line-height:1.625;line-height:var(--line-height-relaxed)}.leading-loose{line-height:2;line-height:var(--line-height-loose)}.tracking-tighter{letter-spacing:-.05em;letter-spacing:var(--letter-spacing-tighter)}.tracking-tight{letter-spacing:-.025em;letter-spacing:var(--letter-spacing-tight)}.tracking-normal{letter-spacing:0;letter-spacing:var(--letter-spacing-normal)}.tracking-wide{letter-spacing:.025em;letter-spacing:var(--letter-spacing-wide)}.tracking-wider{letter-spacing:.05em;letter-spacing:var(--letter-spacing-wider)}.tracking-widest{letter-spacing:.1em;letter-spacing:var(--letter-spacing-widest)}:focus-visible{outline:2px solid #6366f1;outline:2px solid var(--primary);outline-offset:2px}.app{background:#0f0f14;background:var(--bg-primary);color:#e4e4e7;color:var(--text-primary);font-family:Inter,sans-serif;min-height:100vh}@media (max-width:768px){html{font-size:14px}h1{font-size:2rem;letter-spacing:-.035em}h2{font-size:1.75rem;letter-spacing:-.025em}h3{font-size:1.375rem;letter-spacing:-.02em}}@media (max-width:480px){html{font-size:13px}.container{padding:0 1rem}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.reading-optimized{line-height:1.8;word-spacing:.1em}.reading-optimized,.text-content{font-family:Lexend,sans-serif;font-weight:400}.text-content{line-height:1.75;max-width:65ch}.ui-text{font-family:Lexend,sans-serif;font-weight:500;line-height:1.4}.header{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:#0a0a0bcc;border-bottom:1px solid #0000;left:0;position:fixed;right:0;top:0;transition:var(--transition-smooth);z-index:1000}.header.scrolled{background:#0a0a0bf2;border-bottom-color:var(--border);box-shadow:var(--shadow-lg)}.nav{height:4rem;justify-content:space-between}.logo,.nav{align-items:center;display:flex}.logo{cursor:pointer;gap:.75rem;transition:var(--transition-base)}.logo:hover{transform:translateY(-2px)}.logo-text{-webkit-text-fill-color:#0000;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;font-size:1.25rem;font-weight:700}.nav-links{align-items:center;display:flex;gap:2rem}.nav-link{color:var(--text-secondary);font-size:.95rem;font-weight:500;padding:.5rem 0;position:relative;text-decoration:none;transition:var(--transition-base)}.nav-link:after{background:var(--gradient-primary);bottom:0;content:"";height:2px;left:0;position:absolute;transition:width .3s ease;width:0}.nav-link:hover{color:var(--text-primary)}.nav-link:hover:after{width:100%}.nav-link svg{transition:var(--transition-base);vertical-align:middle}.nav-link:hover svg{transform:scale(1.1)}.mobile-menu-btn{align-items:center;background:#0000;border:none;cursor:pointer;display:none;flex-direction:column;gap:4px;justify-content:center;padding:.5rem}.menu-bar{background:var(--text-primary);border-radius:var(--radius-full);height:2px;transition:var(--transition-bounce);width:24px}.menu-bar.open:first-child{transform:rotate(45deg) translate(5px,5px)}.menu-bar.open:nth-child(2){opacity:0;transform:scale(0)}.menu-bar.open:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}@media (max-width:768px){.mobile-menu-btn{display:flex}.nav-links{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0a0a0bfa;border-bottom:1px solid var(--border);flex-direction:column;gap:1rem;left:0;padding:2rem;position:fixed;right:0;top:4rem;transform:translateY(-150%);transition:transform .3s ease}.nav-links.mobile-open{transform:translateY(0)}.nav-link{border-radius:var(--radius-lg);padding:1rem;text-align:center;width:100%}.nav-link:hover{background:var(--surface)}.nav-link:after{display:none}}.hero{align-items:center;display:flex;justify-content:center;min-height:100vh;overflow:hidden;padding-top:4rem;position:relative}.hero-canvas{height:100%;left:0;opacity:.6;position:absolute;top:0;width:100%;z-index:1}.hero-content{animation:fadeIn 1s ease-out;margin:0 auto;max-width:800px;padding:2rem;z-index:2}.hero-badge{animation:slideInLeft .8s ease-out;display:inline-block;margin-bottom:1.5rem}.badge-text{background:#6366f11a;border:1px solid #6366f14d;border-radius:var(--radius-full);color:var(--primary-light);display:inline-block;font-size:.875rem;font-weight:500;padding:.5rem 1rem}.hero-title{animation:slideInRight .8s ease-out;font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900}.title-gradient{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#6366f1,#8b5cf6 50%,#f59e0b);-webkit-background-clip:text;background-clip:text;display:block;margin-bottom:.5rem}.title-regular{color:var(--text-primary);display:block}.hero-description{animation:fadeIn 1s ease-out .2s both;font-size:1.125rem;line-height:1.7;margin:0 auto 2rem;max-width:600px}.hero-features{animation:fadeIn 1s ease-out .4s both;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-bottom:2rem}.feature-item{align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--text-secondary);display:flex;font-size:.875rem;gap:.5rem;padding:.5rem 1rem;transition:var(--transition-base)}.feature-item:hover{border-color:var(--primary);color:var(--text-primary);transform:translateY(-2px)}.feature-item svg{color:var(--success);flex-shrink:0}.hero-cta{align-items:center;animation:fadeIn 1s ease-out .6s both;background:var(--gradient-primary);border:none;border-radius:var(--radius-full);box-shadow:var(--shadow-lg),var(--shadow-glow);color:#fff;cursor:pointer;display:inline-flex;font-size:1.125rem;font-weight:600;gap:.75rem;padding:1rem 2rem;transition:var(--transition-bounce)}.hero-cta:hover{box-shadow:var(--shadow-xl),0 0 30px #6366f180;transform:translateY(-3px)}.hero-cta svg{transition:var(--transition-base)}.hero-cta:hover svg{transform:translateX(4px)}.hero-stats{animation:fadeIn 1s ease-out .8s both;display:flex;gap:3rem;justify-content:center;margin-top:3rem}.stat-number{-webkit-text-fill-color:#0000;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;font-weight:800;margin-bottom:.25rem}.stat-label,.stat-number{display:block}.hero-scroll{align-items:center;animation:float 3s ease-in-out infinite;bottom:2rem;color:var(--text-muted);display:flex;flex-direction:column;font-size:.875rem;gap:.5rem;left:50%;position:absolute;transform:translateX(-50%)}.scroll-arrow{animation:pulse 2s ease-in-out infinite;border-bottom:2px solid var(--text-muted);border-right:2px solid var(--text-muted);height:20px;transform:rotate(45deg);width:20px}@media (max-width:768px){.hero-features{flex-direction:column}.feature-item{justify-content:center;width:100%}.hero-stats{gap:1.5rem}.stat-number{font-size:1.5rem}.hero-scroll{display:none}}.hero-actions{align-items:center;display:flex;flex-direction:column;gap:1.5rem;margin:2.5rem 0}.cta-primary{align-items:center;background:var(--gradient-primary);border:none;border-radius:12px;box-shadow:var(--shadow-lg);color:#fff;cursor:pointer;display:inline-flex;font-family:Lexend,sans-serif;font-size:1.125rem;font-weight:600;gap:.75rem;justify-content:center;min-width:220px;padding:1.25rem 2.5rem;text-decoration:none;transition:all .3s ease}.cta-primary:hover{box-shadow:var(--shadow-xl),var(--shadow-glow);color:#fff;text-decoration:none;transform:translateY(-3px)}.cta-primary:active{transform:translateY(-1px)}.cta-secondary{align-items:center;background:#0000;border:2px solid var(--border-color);border-radius:12px;color:var(--text-primary);cursor:pointer;display:inline-flex;font-family:Lexend,sans-serif;font-size:1rem;font-weight:500;gap:.5rem;justify-content:center;min-width:180px;padding:1rem 2rem;text-decoration:none;transition:all .3s ease}.cta-secondary:hover{background:#6366f11a;border-color:var(--primary);color:var(--primary-light);text-decoration:none;transform:translateY(-2px)}.cta-secondary svg{transition:transform .3s ease}.cta-secondary:hover svg{transform:translateX(4px)}.hero-subtext{color:var(--text-secondary);font-size:.9rem;margin:0;opacity:.8;text-align:center}.hero-stats{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1a1a2380;border:1px solid var(--border-color);border-radius:16px;margin:2rem auto 0;padding:2rem}.stat-item{display:flex;flex-direction:column;gap:.5rem}.stat-number{font-family:Lexend,sans-serif;font-size:1.75rem;line-height:1}.stat-label{font-weight:500;line-height:1.2}@media (max-width:768px){.hero-actions{gap:1rem;margin:2rem 0}.cta-primary,.cta-secondary{max-width:280px;width:100%}.cta-primary{font-size:1rem;padding:1.125rem 2rem}.cta-secondary{font-size:.95rem;padding:1rem 1.75rem}.hero-stats{gap:1.5rem;grid-template-columns:1fr;margin:1.5rem auto 0;padding:1.5rem}.stat-number{font-size:1.5rem}.stat-label{font-size:.8rem}}@media (max-width:480px){.hero-actions{gap:.875rem}.cta-primary,.cta-secondary{min-width:0;min-width:auto}.hero-stats{gap:1.25rem;padding:1.25rem}}.paint-matcher{background:var(--bg-primary);min-height:100vh;padding:6rem 0}.section-header{margin-bottom:4rem;text-align:center}.section-title{-webkit-text-fill-color:#0000;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;font-weight:800;margin-bottom:1rem}.section-subtitle{margin:0 auto}.matcher-grid{grid-gap:3rem;align-items:start;display:grid;gap:3rem;grid-template-columns:450px 1fr}.upload-section{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;box-shadow:var(--shadow-lg);padding:2rem;position:-webkit-sticky;position:sticky;top:5rem}.controls{font-size:13px;gap:1.5rem;margin-top:2rem}.control-group,.controls{display:flex;flex-direction:column}.control-group{gap:.75rem}.control-label{color:var(--text-secondary);font-size:.875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.range-input{-webkit-appearance:none;appearance:none;background:var(--bg-tertiary);border-radius:4px;height:8px;outline:none;width:100%}.range-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--gradient-primary);border-radius:50%;box-shadow:var(--shadow-md);cursor:pointer;height:24px;-webkit-transition:transform .2s ease;transition:transform .2s ease;width:24px}.range-input::-webkit-slider-thumb:hover{box-shadow:var(--shadow-glow);transform:scale(1.1)}.range-input::-moz-range-thumb{background:var(--gradient-primary);border:none;border-radius:50%;box-shadow:var(--shadow-md);cursor:pointer;height:24px;width:24px}.range-value{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;color:var(--primary);display:inline-block;font-weight:700;margin-left:1rem;min-width:50px;padding:.5rem 1rem;text-align:center}.match-button{align-items:center;background:var(--gradient-primary);border:none;border-radius:12px;box-shadow:var(--shadow-md);color:#fff;cursor:pointer;display:flex;font-size:1rem;font-weight:600;gap:.75rem;justify-content:center;margin-top:.5rem;padding:1rem 1.5rem;transition:all .3s ease;width:100%}.match-button:hover:not(:disabled){box-shadow:var(--shadow-xl),var(--shadow-glow);transform:translateY(-2px)}.match-button:disabled{background:linear-gradient(135deg,#4a4a5e,#5a5a6e);cursor:not-allowed;opacity:.5}.spinner{animation:spin .8s linear infinite;border:3px solid #ffffff4d;border-radius:50%;border-top-color:#fff;height:20px;width:20px}.error-message{align-items:center;background:#ef44441a;border:1px solid #ef44444d;border-radius:8px;color:#ef4444;display:flex;font-size:.875rem;font-weight:500;gap:.75rem;padding:1rem}.results-section{display:flex;flex-direction:column;gap:2rem}select{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);cursor:pointer;font-size:.95rem;padding:.75rem 1rem;transition:all .2s ease;width:100%}select:hover{background:var(--bg-hover);border-color:var(--border-light)}select:focus{border-color:var(--primary);box-shadow:0 0 0 3px #6366f11a}@media (max-width:1024px){.matcher-grid{gap:2rem;grid-template-columns:1fr}.upload-section{position:static}}@media (max-width:768px){.section-title{font-size:2rem}.upload-section{padding:1.5rem}}.image-uploader{width:100%}.file-input{display:none}.upload-area{align-items:center;background:var(--bg-tertiary);border:2px dashed var(--border-color);border-radius:12px;cursor:pointer;display:flex;justify-content:center;min-height:280px;overflow:hidden;position:relative;transition:all .3s ease;width:100%}.upload-area:hover{background:var(--bg-hover);border-color:var(--primary);box-shadow:0 0 20px #6366f11a}.upload-area.dragging{background:#6366f10d;border-color:var(--primary);box-shadow:inset 0 0 20px #6366f11a}.upload-area.has-image{background:var(--bg-primary);border-style:solid}.preview-container{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}.preview-image{border-radius:8px;display:block;max-height:260px;max-width:100%;object-fit:contain}.preview-overlay{align-items:center;background:#000c;border-radius:12px;bottom:0;color:#fff;display:flex;flex-direction:column;gap:.5rem;justify-content:center;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}.preview-container:hover .preview-overlay{opacity:1}.preview-overlay svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.upload-placeholder{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:3rem 2rem;text-align:center}.upload-icon{color:var(--primary);margin-bottom:1rem;opacity:.7}.upload-icon svg{filter:drop-shadow(0 4px 8px rgba(99,102,241,.2))}.upload-title{color:var(--text-primary);font-size:1.25rem;font-weight:600;margin-bottom:.5rem}.upload-subtitle{color:var(--text-secondary);font-size:.95rem;margin-bottom:1.5rem}.upload-formats{display:flex;gap:.5rem;justify-content:center}.format-badge{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:20px;color:var(--text-secondary);font-size:.75rem;font-weight:600;letter-spacing:.05em;padding:.375rem .875rem;text-transform:uppercase}.palette-display{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;box-shadow:var(--shadow-md);padding:1.5rem}.palette-header{align-items:center;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;margin-bottom:1.25rem;padding-bottom:.75rem}.palette-title{color:var(--text-primary);font-size:1.125rem;font-weight:700}.palette-count{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:20px;color:var(--primary);font-size:.8rem;font-weight:600;padding:.25rem .75rem}.palette-loading{align-items:center;color:var(--text-secondary);display:flex;flex-direction:column;gap:1rem;justify-content:center;padding:2.5rem 1.5rem}.loading-spinner{animation:spin .8s linear infinite;border:3px solid var(--bg-tertiary);border-radius:50%;border-top-color:var(--primary);height:36px;width:36px}.palette-grid{grid-gap:.875rem;display:grid;gap:.875rem;grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.palette-item{display:flex;flex-direction:column;gap:.5rem}.palette-color{aspect-ratio:1;border:1px solid var(--border-color);border-radius:8px;box-shadow:var(--shadow-sm);cursor:pointer;overflow:hidden;position:relative;transition:all .2s ease;width:100%}.palette-color:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-2px) scale(1.03)}.palette-hex{background:linear-gradient(0deg,#000000e6,#0000);bottom:0;color:#fff;font-family:Courier New,monospace;font-size:.65rem;font-weight:600;left:0;letter-spacing:.025em;padding:.5rem .25rem;position:absolute;right:0;text-align:center;text-transform:uppercase;transform:translateY(100%);transition:transform .2s ease}.palette-color:hover .palette-hex{transform:translateY(0)}.palette-index{color:var(--text-secondary);font-size:.75rem;font-weight:500;text-align:center}@media (min-width:768px){.palette-grid{gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}}@media (max-width:768px){.palette-display{padding:1.25rem}.palette-grid{gap:.625rem;grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}.palette-hex{font-size:.6rem;padding:.375rem .125rem}.palette-index{font-size:.7rem}}@media (max-width:480px){.palette-grid{gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(50px,1fr))}.palette-color{border-radius:6px}.palette-hex{font-size:.55rem;padding:.25rem .125rem}.palette-index{font-size:.65rem}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.match-results{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;box-shadow:var(--shadow-md);padding:1.25rem}.results-title{border-bottom:1px solid var(--border-color);color:var(--text-primary);font-size:1rem;font-weight:700;margin-bottom:1rem;padding-bottom:.625rem}.matches-grid{grid-gap:.75rem;display:grid;gap:.75rem}.match-card{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;padding:.875rem;transition:all .3s ease}.match-card:hover{background:var(--bg-hover);border-color:var(--primary);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.match-header{border-bottom:1px solid var(--border-color);margin-bottom:.75rem;padding-bottom:.625rem}.match-target{align-items:center;display:flex;gap:.75rem}.target-color{border:2px solid var(--border-color);border-radius:8px;box-shadow:var(--shadow-sm);flex-shrink:0;height:42px;width:42px}.target-info{display:flex;flex-direction:column;gap:.25rem}.target-label{color:var(--text-muted);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}.target-hex{color:var(--text-primary);font-size:.9rem;font-weight:700}.match-paints{grid-gap:.375rem;display:grid;gap:.375rem}.paint-item{grid-gap:.625rem;align-items:center;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;display:grid;gap:.625rem;grid-template-columns:36px 1fr auto;padding:.625rem;transition:all .2s ease}.paint-item:hover{background:var(--bg-secondary);border-color:var(--border-light);transform:translateX(4px)}.paint-swatch{border:2px solid var(--border-color);border-radius:6px;box-shadow:var(--shadow-sm);height:36px;width:36px}.paint-info{display:flex;flex-direction:column;gap:.1875rem}.paint-name{color:var(--text-primary);font-size:.825rem;font-weight:600;line-height:1.2}.paint-details{align-items:center;display:flex;font-size:.75rem;gap:.375rem}.paint-brand{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:3px;color:var(--primary);font-size:.625rem;font-weight:600;letter-spacing:.025em;padding:.0625rem .25rem;text-transform:uppercase}.paint-range{color:var(--primary-light);font-weight:500}.paint-finish{color:var(--text-secondary)}.paint-meta{display:flex;font-size:.625rem;gap:.5rem}.paint-hex{color:var(--text-muted);font-size:13px;text-transform:uppercase}.paint-delta{color:var(--accent);font-size:12px;font-weight:600}.paint-accuracy{align-items:flex-end;display:flex;flex-direction:column;gap:.1875rem;min-width:75px}.accuracy-bar{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:2px;height:4px;overflow:hidden;width:70px}.accuracy-fill{border-radius:2px;height:100%;transition:width .5s ease}.accuracy-label{color:var(--text-secondary);font-size:.625rem;font-weight:600;text-align:right}@media (max-width:768px){.match-results{padding:.875rem}.paint-item{gap:.5rem;grid-template-columns:32px 1fr;padding:.5rem}.paint-accuracy{display:none}.paint-swatch{height:32px;width:32px}.target-color{height:36px;width:36px}.paint-name{font-size:.8rem}.paint-details{font-size:.7rem}.paint-brand{font-size:.6rem;padding:.0625rem .1875rem}.matches-grid{gap:.625rem}}.shopping-list{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;box-shadow:var(--shadow-md);margin-top:1rem;padding:1.5rem}.list-header{border-bottom:1px solid var(--border-color);justify-content:space-between;margin-bottom:1.25rem;padding-bottom:.75rem}.list-header,.list-title{align-items:center;display:flex}.list-title{color:var(--text-primary);font-size:1.25rem;font-weight:700;gap:.75rem}.list-title:before{content:"🛒";font-size:1.125rem}.list-actions{align-items:center;display:flex;gap:1rem}.list-count{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:20px;color:var(--primary);font-size:.8rem;font-weight:600;letter-spacing:.025em;padding:.375rem .875rem;text-transform:uppercase}.export-button{align-items:center;background:var(--gradient-primary);border:none;border-radius:10px;box-shadow:var(--shadow-sm);color:#fff;cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;padding:.625rem 1.125rem;transition:all .3s ease}.export-button:hover{box-shadow:var(--shadow-lg),var(--shadow-glow);transform:translateY(-2px)}.export-button:active{transform:translateY(0)}.list-items{grid-gap:.625rem;display:grid;gap:.625rem}.list-item{grid-gap:1rem;align-items:center;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;display:grid;gap:1rem;grid-template-columns:40px 1fr auto;padding:1rem;position:relative;transition:all .2s ease}.list-item:hover{background:var(--bg-hover);border-color:var(--border-light);box-shadow:var(--shadow-sm);transform:translateX(4px)}.list-item:before{background:var(--gradient-primary);border-radius:0 2px 2px 0;content:"";height:60%;left:0;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:opacity .2s ease;width:3px}.list-item:hover:before{opacity:1}.item-color{border:2px solid var(--border-color);border-radius:8px;box-shadow:var(--shadow-sm);height:40px;position:relative;width:40px}.item-color:after{background:inherit;border-radius:inherit;content:"";filter:blur(8px);inset:-2px;opacity:.3;position:absolute;z-index:-1}.item-info{display:flex;flex-direction:column;gap:.25rem}.item-name{color:var(--text-primary);font-size:1rem;font-weight:600;line-height:1.2}.item-details{align-items:center;color:var(--text-secondary);display:flex;font-size:.875rem;gap:.5rem}.item-details:after{background:var(--text-muted);border-radius:50%;content:"";height:3px;margin:0 .25rem;width:3px}.copy-button{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);cursor:pointer;padding:.625rem;position:relative;transition:all .2s ease}.copy-button:hover{background:var(--bg-secondary);border-color:var(--primary);color:var(--primary);transform:scale(1.05)}.copy-button:active{transform:scale(.95)}.copy-button svg{display:block;height:16px;width:16px}.copy-button.copied{background:var(--success);border-color:var(--success);color:#fff}.shopping-list-empty{color:var(--text-muted);padding:3rem 1rem;text-align:center}.shopping-list-empty:before{content:"🛍️";display:block;font-size:2rem;margin-bottom:1rem;opacity:.5}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.list-item{animation:fadeInUp .3s ease-out}@media (max-width:768px){.shopping-list{margin:1rem .5rem 0;padding:1.25rem}.list-header{align-items:flex-start;flex-direction:column;gap:1rem;margin-bottom:1rem}.list-title{font-size:1.125rem}.list-actions{justify-content:space-between;width:100%}.export-button{font-size:.8rem;padding:.75rem 1.25rem}.list-item{gap:.875rem;grid-template-columns:36px 1fr auto;padding:.875rem}.item-color{height:36px;width:36px}.item-name{font-size:.925rem}.item-details{font-size:.8rem}.copy-button{padding:.5rem}.copy-button svg{height:14px;width:14px}}@media (max-width:480px){.list-item{gap:.75rem;grid-template-columns:32px 1fr auto;padding:.75rem}.item-color{height:32px;width:32px}.list-actions{align-items:stretch;flex-direction:column;gap:.75rem}.export-button{justify-content:center;width:100%}}.brand-filter{display:flex;flex-direction:column;gap:1rem}.filter-header{align-items:center;display:flex;gap:1rem;justify-content:space-between}.filter-label{color:var(--text-secondary);font-size:.875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.select-all-btn{background:none;border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);cursor:pointer;font-size:.75rem;font-weight:500;padding:.375rem .75rem;transition:all .2s ease}.select-all-btn:hover{background:#6366f11a;border-color:var(--primary);color:var(--primary)}.brand-options{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;display:flex;flex-direction:column;gap:.75rem;padding:1rem}.brand-option{align-items:center;border-radius:6px;cursor:pointer;display:flex;gap:.75rem;padding:.5rem;transition:background-color .2s ease}.brand-option:hover{background:var(--bg-hover)}.brand-checkbox{background:var(--bg-primary);border:2px solid var(--border-color);border-radius:4px;cursor:pointer;height:18px;margin:0;position:relative;transition:all .2s ease;width:18px}.brand-checkbox:checked{background:var(--primary);border-color:var(--primary)}.brand-checkbox:checked:after{border:solid #fff;border-width:0 2px 2px 0;content:"";height:10px;left:4px;position:absolute;top:1px;transform:rotate(45deg);width:6px}.brand-checkbox:hover{border-color:var(--primary);box-shadow:0 0 0 3px #6366f11a}.brand-label{align-items:center;color:var(--text-primary);display:flex;flex:1 1;font-weight:500;gap:.5rem}.brand-count{color:var(--text-muted);font-size:.75rem;font-weight:400}.filter-warning{align-items:center;background:#ef44441a;border:1px solid #ef444433;border-radius:6px;color:var(--error);display:flex;font-size:.875rem;gap:.5rem;padding:.75rem}.filter-warning svg{flex-shrink:0}@media (max-width:768px){.filter-header{align-items:flex-start;flex-direction:column;gap:.5rem}.select-all-btn{align-self:flex-end}.brand-options{padding:.75rem}.brand-option{padding:.75rem .5rem}}.footer{background:var(--bg-tertiary);border-top:1px solid var(--border-color);margin-top:4rem;padding:3rem 0 2rem}.footer-content{grid-gap:3rem;display:grid;gap:3rem;grid-template-columns:2fr 1fr 1fr;margin-bottom:2rem}.footer-section{display:flex;flex-direction:column}.footer-title{-webkit-text-fill-color:#0000;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:var(--text-primary);font-size:1.5rem;font-weight:700;margin-bottom:1rem}.footer-description{color:var(--text-secondary);line-height:1.6;margin-bottom:1.5rem;max-width:300px}.footer-badges{display:flex;flex-wrap:wrap;gap:.5rem}.tech-badge{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:20px;color:var(--primary);font-size:.75rem;font-weight:600;letter-spacing:.025em;padding:.25rem .75rem;text-transform:uppercase}.footer-subtitle{color:var(--text-primary);font-size:1.125rem;font-weight:600;margin-bottom:1rem}.footer-links{list-style:none;margin:0;padding:0}.footer-links li{margin-bottom:.75rem}.footer-links a{color:var(--text-secondary);font-size:.9rem;text-decoration:none;transition:color .2s ease}.footer-links a:hover{color:var(--primary)}.footer-bottom{align-items:center;border-top:1px solid var(--border-color);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;padding-top:2rem}.copyright-section{display:flex;flex-direction:column;gap:.5rem}.copyright{color:var(--text-muted)}.copyright,.made-with{font-size:.875rem;margin:0}.made-with{align-items:center;color:var(--text-secondary);display:flex;gap:.25rem}.heart{animation:heartbeat 2s ease-in-out infinite;color:#ef4444;font-size:1rem}@keyframes heartbeat{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.creator-credit{text-align:right}.created-by{color:var(--text-secondary);font-size:.875rem;margin:0}.creator-link{color:var(--primary);font-weight:600;position:relative;text-decoration:none;transition:all .2s ease}.creator-link:hover{color:var(--primary-light);text-decoration:none}.creator-link:after{background:var(--gradient-primary);bottom:-2px;content:"";height:1px;left:0;position:absolute;right:0;transform:scaleX(0);transition:transform .2s ease}.creator-link:hover:after{transform:scaleX(1)}@media (max-width:1024px){.footer-content{gap:2rem;grid-template-columns:1fr 1fr}.footer-section:first-child{grid-column:1/-1;margin-bottom:1rem}}@media (max-width:768px){.footer{padding:2rem 0 1.5rem}.container{padding:0 1rem}.footer-content{gap:1.5rem;grid-template-columns:1fr}.footer-section:first-child{grid-column:1;margin-bottom:0}.footer-description{max-width:none}.footer-bottom{flex-direction:column;gap:1rem}.creator-credit,.footer-bottom{text-align:center}.copyright-section{align-items:center}}@media (max-width:480px){.tech-badge{font-size:.7rem;padding:.2rem .6rem}.footer-badges{justify-content:flex-start}}.how-it-works-page{background:var(--bg-primary);min-height:100vh}.main-content{padding-top:100px}.container{margin:0 auto;max-width:1200px;padding:0 2rem}.hero-section{background:linear-gradient(135deg,var(--bg-primary) 0,var(--bg-secondary) 100%);overflow:hidden;padding:5rem 0 4rem;position:relative}.hero-section:before{background:radial-gradient(circle at 20% 30%,#6366f11a 0,#0000 50%),radial-gradient(circle at 80% 70%,#8b5cf61a 0,#0000 50%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.hero-content{position:relative;text-align:center;z-index:1}.hero-title{-webkit-text-fill-color:#0000;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;font-size:3.5rem;font-weight:800;line-height:1.1;margin-bottom:1.5rem}.hero-description{color:var(--text-secondary);font-size:1.25rem;line-height:1.6;margin:0 auto 3rem;max-width:700px}.hero-stats{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(3,1fr);margin:0 auto;max-width:600px}.stat-item{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;text-align:center;transition:all .3s ease}.stat-item:hover{border-color:var(--primary);box-shadow:var(--shadow-lg);transform:translateY(-4px)}.stat-number{color:var(--primary);font-size:2rem;font-weight:700;margin-bottom:.5rem}.stat-label{color:var(--text-secondary);font-size:.875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.steps-section{background:var(--bg-primary);padding:5rem 0}.section-title{color:var(--text-primary);font-size:2.5rem;font-weight:700;margin-bottom:3rem;text-align:center}.section-subtitle{color:var(--text-secondary);font-size:1.125rem;line-height:1.6;margin:0 auto 3rem;max-width:600px;text-align:center}.steps-container{margin:0 auto;max-width:900px}.step-item{align-items:center;flex-direction:column;margin-bottom:3rem}.step-content,.step-item{display:flex;position:relative}.step-content{align-items:flex-start;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;box-shadow:var(--shadow-md);gap:2rem;padding:2.5rem;transition:all .3s ease;width:100%;z-index:2}.step-content:hover{border-color:var(--primary);box-shadow:var(--shadow-xl);transform:translateY(-4px)}.step-icon{align-items:center;background:var(--gradient-primary);border-radius:50%;box-shadow:var(--shadow-lg);color:#fff;display:flex;flex-shrink:0;height:80px;justify-content:center;width:80px}.step-info{flex:1 1}.step-number{color:var(--primary);font-size:.875rem;font-weight:600;letter-spacing:.1em;margin-bottom:.75rem;text-transform:uppercase}.step-title{color:var(--text-primary);font-size:1.75rem;font-weight:700;line-height:1.3;margin-bottom:1rem}.step-description{color:var(--text-secondary);font-size:1.1rem;line-height:1.6;margin-bottom:1.5rem}.step-tips{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;padding:1.5rem}.step-tips h4{align-items:center;color:var(--text-primary);display:flex;font-size:1rem;font-weight:600;gap:.5rem;margin-bottom:.75rem}.step-tips h4:before{content:"💡";font-size:1.2rem}.step-tips ul{list-style:none;margin:0;padding:0}.step-tips li{color:var(--text-secondary);padding:.5rem 0 .5rem 1.5rem;position:relative}.step-tips li:before{color:var(--success);content:"✓";font-weight:600;left:0;position:absolute}.step-connector{background:linear-gradient(to bottom,var(--primary),var(--primary-light));height:3rem;margin:1rem 0;opacity:.6;position:relative;width:2px}.step-connector:after{background:var(--primary);border-radius:50%;bottom:-6px;content:"";height:10px;left:50%;position:absolute;transform:translateX(-50%);width:10px}.features-section{background:var(--bg-secondary);padding:5rem 0}.features-header{margin-bottom:4rem;text-align:center}.features-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.feature-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:16px;overflow:hidden;padding:2.5rem;position:relative;text-align:center;transition:all .3s ease}.feature-card:before{background:var(--gradient-primary);content:"";height:3px;left:0;position:absolute;right:0;top:0;transform:scaleX(0);transition:transform .3s ease}.feature-card:hover:before{transform:scaleX(1)}.feature-card:hover{border-color:var(--border-light);box-shadow:var(--shadow-xl);transform:translateY(-6px)}.feature-icon{display:block;font-size:3rem;margin-bottom:1.5rem}.feature-title{color:var(--text-primary);font-size:1.5rem;font-weight:600;margin-bottom:1rem}.feature-description{color:var(--text-secondary);line-height:1.6;margin-bottom:1.5rem}.feature-details{list-style:none;margin:0;padding:0;text-align:left}.feature-details li{color:var(--text-secondary);font-size:.9rem;padding:.5rem 0 .5rem 1.5rem;position:relative}.feature-details li:before{color:var(--primary);content:"→";font-weight:600;left:0;position:absolute}.faq-section{background:var(--bg-primary);padding:5rem 0}.faq-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));margin:0 auto;max-width:900px}.faq-item{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:2rem;transition:all .3s ease}.faq-item:hover{border-color:var(--primary);box-shadow:var(--shadow-md)}.faq-question{color:var(--text-primary);font-size:1.25rem;font-weight:600;line-height:1.4;margin-bottom:1rem}.faq-answer{color:var(--text-secondary);line-height:1.6;margin:0}.cta-section{background:linear-gradient(135deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%);overflow:hidden;padding:5rem 0;position:relative;text-align:center}.cta-section:before{background:radial-gradient(circle at center,#6366f11a 0,#0000 70%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.cta-content{position:relative;z-index:1}.cta-title{color:var(--text-primary);font-size:2.5rem;font-weight:700;line-height:1.3;margin-bottom:1.5rem}.cta-description{color:var(--text-secondary);font-size:1.25rem;line-height:1.6;margin-bottom:2.5rem;margin-left:auto;margin-right:auto;max-width:600px}.cta-button{align-items:center;background:var(--gradient-primary);border:none;border-radius:12px;box-shadow:var(--shadow-lg);cursor:pointer;display:inline-flex;font-size:1.25rem;font-weight:600;gap:.75rem;padding:1.5rem 2.5rem;transition:all .3s ease}.cta-button,.cta-button:hover{color:#fff;text-decoration:none}.cta-button:hover{box-shadow:var(--shadow-xl),var(--shadow-glow);transform:translateY(-3px)}.cta-button svg{transition:transform .3s ease}.cta-button:hover svg{transform:translateX(4px)}@media (max-width:1024px){.container{padding:0 1.5rem}.hero-title{font-size:2.5rem}.step-content{gap:1.5rem;padding:2rem}.step-icon{height:70px;width:70px}.hero-stats{gap:1rem;grid-template-columns:1fr;max-width:400px}}@media (max-width:768px){.main-content{padding-top:80px}.hero-section{padding:4rem 0 3rem}.container{padding:0 1rem}.hero-title{font-size:2rem}.hero-description{font-size:1.1rem}.section-title{font-size:2rem}.cta-section,.faq-section,.features-section,.steps-section{padding:3rem 0}.step-content{flex-direction:column;gap:1.5rem;padding:2rem 1.5rem;text-align:center}.step-title{font-size:1.5rem}.step-description{font-size:1rem}.features-grid{gap:1.5rem}.faq-grid,.features-grid{grid-template-columns:1fr}.cta-title{font-size:2rem}.cta-button,.cta-description{font-size:1.1rem}.cta-button{justify-content:center;padding:1.25rem 2rem;width:100%}}@media (max-width:480px){.step-icon{height:60px;width:60px}.step-icon svg{height:32px;width:32px}.faq-item,.feature-card{padding:1.5rem}.step-tips{padding:1rem}}
/*# sourceMappingURL=main.e80cc690.css.map*/