:root{--font-display:"Sora","Noto Sans Thai","Segoe UI",sans-serif;--font-sans:"Manrope","Noto Sans Thai","Segoe UI",sans-serif;--color-bg:#f6f7f9;--color-surface:#fff;--color-surface-2:#eef2f4;--color-text:#14161a;--color-muted:#5b626b;--color-border:#dee3e7;--color-accent:#ff6b5c;--color-accent-strong:#e95a4d;--color-accent-contrast:#fff;--color-focus:rgba(255,107,92,.35);--color-overlay:hsla(0,0%,100%,.82);--color-header:rgba(246,247,249,.9);--glow-1:rgba(255,107,92,.18);--glow-2:rgba(20,22,26,.06);--shadow-soft:0 18px 40px rgba(26,23,20,.08);--shadow-card:0 12px 30px rgba(26,23,20,.08);--shadow-accent:0 12px 24px rgba(255,107,92,.24);--radius-sm:10px;--radius-md:16px;--radius-lg:24px;--space-xxs:4px;--space-xs:8px;--space-sm:12px;--space-md:20px;--space-lg:32px;--space-xl:48px;--space-2xl:72px;--max-width:1120px;--transition-fast:180ms ease;--transition-slow:320ms ease}[data-theme=dark]{--color-bg:#0c1114;--color-surface:#13191d;--color-surface-2:#1a2227;--color-text:#f2f4f6;--color-muted:#aeb5bc;--color-border:#273038;--color-accent:#ff8a7d;--color-accent-strong:#ff6b5c;--color-accent-contrast:#2a120f;--color-focus:hsla(6,100%,75%,.35);--color-overlay:rgba(4,8,10,.82);--color-header:rgba(12,17,20,.9);--glow-1:hsla(6,100%,75%,.22);--glow-2:rgba(0,0,0,.4);--shadow-soft:0 18px 40px rgba(0,0,0,.35);--shadow-card:0 14px 36px rgba(0,0,0,.35);--shadow-accent:0 12px 24px hsla(6,100%,75%,.28)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font-sans);color:var(--color-text);background:radial-gradient(900px 600px at 8% -10%,var(--glow-1),transparent 60%),radial-gradient(900px 600px at 108% 12%,var(--glow-2),transparent 55%),var(--color-bg);min-height:100vh;display:flex;flex-direction:column}a{color:inherit;text-decoration:none}a:hover{color:var(--color-accent-strong)}img{max-width:100%;display:block}button,input,select,textarea{font:inherit}.page{display:flex;flex-direction:column;gap:var(--space-2xl);flex:1 1}.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--space-lg)}.site-header{position:-webkit-sticky;position:sticky;top:0;z-index:30;background:var(--color-header);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border)}.navbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-sm) 0}.logo-link{display:inline-flex;align-items:center;gap:var(--space-sm)}.logo-wordmark{height:28px;width:auto;transition:filter var(--transition-fast)}[data-theme=dark] .logo-wordmark{filter:invert(1)}.nav-links{display:flex;align-items:center;gap:var(--space-md);list-style:none;margin:0;padding:0;font-weight:500}.nav-links a{color:var(--color-muted);font-size:.95rem}.nav-actions{display:flex;align-items:center;gap:var(--space-sm)}.nav-user{display:inline-flex;align-items:center;gap:10px;padding:6px 10px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font-size:.9rem}.nav-user:hover{color:var(--color-text);border-color:rgba(255,107,92,.4);box-shadow:0 0 0 3px rgba(255,107,92,.12)}.nav-avatar{width:30px;height:30px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,107,92,.15);color:var(--color-accent);font-weight:600;font-size:.75rem}.nav-avatar img{width:100%;height:100%;object-fit:cover}.nav-user-name{max-width:160px;overflow:hidden;text-overflow:ellipsis}.nav-login,.nav-user-name{white-space:nowrap}.nav-mobile-toggle{display:none;background:transparent;border:none;padding:8px;cursor:pointer;z-index:50}.hamburger{display:flex;flex-direction:column;gap:5px;width:24px;height:18px;position:relative}.hamburger span{display:block;width:100%;height:2px;background:var(--color-text);border-radius:2px;transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:center}.hamburger.is-open span:first-child{transform:translateY(7px) rotate(45deg)}.hamburger.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}.hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.nav-mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:40;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.nav-mobile{display:none;position:fixed;top:0;right:0;bottom:0;width:min(320px,85vw);background:var(--color-surface);border-left:1px solid var(--color-border);box-shadow:-4px 0 24px rgba(0,0,0,.15);z-index:50;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto}.nav-mobile.is-open{transform:translateX(0)}.nav-mobile-links{list-style:none;margin:0;padding:var(--space-lg);display:flex;flex-direction:column;gap:4px}.nav-mobile-links li{width:100%}.nav-mobile-links a{display:block;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);color:var(--color-text);font-weight:500;font-size:1.05rem;transition:all var(--transition-fast)}.nav-mobile-links a:hover{background:var(--color-surface-2);color:var(--color-accent)}@media (max-width:1024px){.nav-desktop,.nav-lang-toggle,.nav-theme-toggle{display:none!important}.nav-mobile,.nav-mobile-overlay,.nav-mobile-toggle{display:block}.nav-user-name{display:none}.nav-user{padding:6px}}@media (max-width:640px){.nav-login{font-size:.85rem;padding:8px 12px}}.hero{padding:var(--space-2xl) 0 var(--space-xl)}.hero-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:var(--space-xl);gap:var(--space-xl);align-items:start}.hero-copy{display:flex;flex-direction:column;gap:var(--space-md)}.hero-demo{width:100%}.hero-logo{width:200px}.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:var(--color-muted);font-weight:600}.hero-copy h1{font-family:var(--font-display);font-size:clamp(2.6rem,4vw,4rem);margin:0;line-height:1.05}.accent{color:var(--color-accent)}.hero-subtext{font-size:1.1rem;color:var(--color-muted);max-width:32rem}.hero-actions,.trust-row{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.trust-row{list-style:none;padding:0;margin:0}.trust-pill{padding:6px 12px;border-radius:999px;background:var(--color-surface-2);border:1px solid var(--color-border);font-size:.85rem;color:var(--color-muted)}.section{padding:var(--space-xl) 0}.section-header{display:flex;flex-direction:column;gap:var(--space-xs);margin-bottom:var(--space-lg)}.section-header h2{font-size:clamp(1.8rem,2.6vw,2.4rem);margin:0;font-family:var(--font-display)}.section-header p{max-width:36rem}.section-header p,.section-note{color:var(--color-muted);margin:0}.section-note{font-size:.95rem}.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:var(--space-md);gap:var(--space-md)}.card{padding:var(--space-md);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--space-xs)}.card h3{margin:0;font-size:1.1rem}.card p{margin:0;color:var(--color-muted);font-size:.95rem}.shop-layout{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);grid-gap:var(--space-lg);gap:var(--space-lg);align-items:start}.shop-products{display:flex;flex-direction:column;gap:var(--space-md)}.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:var(--space-md);gap:var(--space-md)}.shop-card{padding:var(--space-md);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--shadow-card);gap:var(--space-sm);height:100%}.shop-card,.shop-cta{display:flex;flex-direction:column}.shop-cta{margin-top:var(--space-sm);align-items:flex-start;gap:6px}.shop-cta-note{color:var(--color-muted);font-size:.9rem}.shop-cta-alert{color:var(--color-accent);font-weight:600}.shop-media{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));grid-gap:var(--space-xs);gap:var(--space-xs);height:clamp(220px,28vw,320px)}.shop-media-main{grid-row:1/span 2}.shop-media-link{display:block;width:100%;height:100%;cursor:zoom-in;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface-2);overflow:hidden}.shop-media-link:hover{border-color:var(--color-accent)}.shop-media img{width:100%;height:100%;object-fit:cover}.shop-card[data-product=sticker] .shop-media img{transform:scale(1.15);transform-origin:center}.shop-card[data-product=sticker] .shop-media-main img{transform:scale(1.28)}.shop-card-body{display:flex;flex-direction:column;gap:var(--space-xs);flex:1 1}.shop-card-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-sm)}.shop-card h2{margin:0;font-size:1.1rem}.shop-price-stack{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.shop-fit{margin:4px 0 0;color:var(--color-muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em}.shop-description{margin:0;color:var(--color-muted);font-size:.95rem}.shop-price-usd{font-weight:700;color:var(--color-accent-strong);font-size:1.1rem}.shop-note,.shop-price-thb{font-size:.85rem;color:var(--color-muted)}.shop-note{margin:0}.shop-size-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);flex-wrap:wrap}.shop-size-label{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600}.shop-size-select{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:8px 12px;background:var(--color-surface);color:var(--color-text)}.shop-size-hint{color:var(--color-muted);font-size:.85rem}.shop-actions{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}.shop-badge{padding:4px 10px;border-radius:999px;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;background:rgba(239,68,68,.12);color:#dc2626;border:1px solid rgba(239,68,68,.4)}.shop-cart{position:-webkit-sticky;position:sticky;top:120px;padding:var(--space-md);border-radius:var(--radius-lg);border:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--shadow-card);flex-direction:column}.shop-cart,.shop-cart-header{display:flex;gap:var(--space-sm)}.shop-cart-header{align-items:center;justify-content:space-between}.shop-cart-header h2{margin:0;font-size:1.1rem}.shop-cart-clear{background:transparent;border:none;color:var(--color-muted);cursor:pointer;font-size:.85rem}.shop-cart-empty{margin:0;color:var(--color-muted)}.shop-cart-list{flex-direction:column}.shop-cart-item,.shop-cart-list{display:flex;gap:var(--space-sm)}.shop-cart-item{align-items:flex-start;justify-content:space-between;padding:var(--space-xs);border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface-2)}.shop-cart-title{margin:0;font-weight:600;font-size:.95rem}.shop-cart-meta{margin:4px 0 0;color:var(--color-muted);font-size:.85rem}.shop-cart-controls{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.qty-control{display:inline-flex;align-items:center;gap:8px;padding:4px 8px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface)}.qty-control button{font-size:1rem;color:var(--color-text)}.qty-control button,.shop-cart-remove{border:none;background:transparent;cursor:pointer}.shop-cart-remove{color:var(--color-muted);font-size:.8rem}.shop-cart-summary{border-top:1px solid var(--color-border);padding-top:var(--space-sm);display:flex;flex-direction:column;gap:6px}.shop-cart-row{display:flex;align-items:center;justify-content:space-between;font-size:.95rem}.shop-cart-note{color:var(--color-muted)}.shop-cart-message,.shop-cart-note{margin:0;font-size:.85rem}.shop-cart-message.is-success{color:#15803d}.shop-cart-message.is-error{color:#dc2626}.shop-checkout{width:100%}.shop-footnote{margin-top:var(--space-md);color:var(--color-muted);font-size:.9rem}.credits-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:var(--space-md);gap:var(--space-md)}.credit-card{padding:var(--space-md);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--space-xs)}.credit-card.is-highlight{border-color:rgba(255,107,92,.5);box-shadow:0 16px 30px rgba(255,107,92,.15)}.credit-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}.credit-header h2{margin:0;font-size:1.1rem}.credit-badge{padding:4px 10px;border-radius:999px;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;background:rgba(255,107,92,.15);color:var(--color-accent)}.credit-amount{margin:0;font-size:1.5rem;font-weight:700}.credit-price{margin:0;color:var(--color-accent-strong);font-weight:600;font-size:1.1rem}.credit-note{margin:0 0 var(--space-sm);font-size:.9rem}.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:var(--space-md);gap:var(--space-md)}.step{padding:var(--space-md);border-radius:var(--radius-md);background:var(--color-surface-2);border:1px solid var(--color-border)}.step strong{display:block;font-size:1rem;margin-bottom:var(--space-xs)}.gallery-grid,.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:var(--space-md);gap:var(--space-md)}.credits-ladder{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:var(--space-md);gap:var(--space-md);padding:var(--space-sm) 0}.credits-ladder:before{content:"";position:absolute;top:18px;left:10px;right:10px;height:1px;background:var(--color-border)}.credit-step{position:relative;padding-top:var(--space-sm);display:flex;flex-direction:column;gap:6px}.credit-dot{width:12px;height:12px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 6px rgba(255,107,92,.12);position:relative;z-index:1}.credit-step.is-free .credit-dot{background:var(--color-text);box-shadow:0 0 0 6px rgba(15,23,42,.08)}.credit-label{display:flex;flex-direction:column;gap:2px}.credit-label strong{font-size:1rem}.credit-label span{color:var(--color-muted);font-size:.9rem}.credit-note{font-size:.85rem;color:var(--color-muted)}.credits-note{margin-top:var(--space-sm);color:var(--color-muted);font-size:.9rem}.showcase-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);grid-gap:var(--space-lg);gap:var(--space-lg);align-items:start}.showcase-grid-equal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;grid-gap:var(--space-md);gap:var(--space-md);align-items:start}.showcase-grid-equal .mockup-card:first-child{grid-column:1/3;grid-row:1}.showcase-grid-equal .mockup-card:nth-child(2){grid-column:3;grid-row:1}.showcase-grid-equal .mockup-card:nth-child(3){grid-column:2/4;grid-row:2}.showcase-grid-equal .mockup-card:nth-child(4){grid-column:1;grid-row:2}.mockup-card{padding:var(--space-md);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--space-sm)}.mockup-compare{position:relative;border-radius:var(--radius-md);overflow:hidden;min-height:420px;border:1px dashed var(--color-border);background:linear-gradient(135deg,var(--color-surface-2),var(--color-surface));--compare:50%;--label-width:clamp(120px,28vw,180px)}.mockup-compare-compact{min-height:280px;--label-width:clamp(110px,32vw,160px)}.mockup-compare-compact .mockup-text{background:rgba(8,8,8,.6)}.mockup-half{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;padding:var(--space-md);text-align:left}.mockup-before{z-index:1;background:linear-gradient(135deg,rgba(9,9,9,.35),transparent)}.mockup-after{left:0;width:100%;z-index:2;-webkit-clip-path:inset(0 calc(100% - var(--compare)) 0 0);clip-path:inset(0 calc(100% - var(--compare)) 0 0);background-color:#f3efe8;background-image:linear-gradient(45deg,rgba(0,0,0,.08) 25%,transparent 0),linear-gradient(-45deg,rgba(0,0,0,.08) 25%,transparent 0),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.08) 0),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.08) 0);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}.mockup-handle{position:absolute;left:var(--compare);top:0;bottom:0;width:2px;background:var(--color-accent);z-index:4}.mockup-handle span{position:absolute;top:50%;left:50%;width:34px;height:34px;border-radius:999px;background:var(--color-surface);border:2px solid var(--color-accent);transform:translate(-50%,-50%);box-shadow:var(--shadow-card)}.mockup-text{display:flex;flex-direction:column;gap:6px;color:var(--color-muted);font-size:.9rem}.mockup-text strong{color:var(--color-text);font-size:1rem}.mockup-compare .mockup-text{position:relative;z-index:3;padding:10px 12px;border-radius:12px;background:hsla(0,0%,4%,.55);color:#f2ede7;box-shadow:0 12px 30px rgba(0,0,0,.28);width:var(--label-width)}.mockup-compare .mockup-text strong{color:#fff7ee}.mockup-image{object-fit:cover;z-index:0}.compare-input,.mockup-image{position:absolute;inset:0;width:100%;height:100%}.compare-input{opacity:0;cursor:ew-resize;z-index:5}.mockup-caption{margin:0;color:var(--color-muted);font-size:.95rem}.mockup-links{display:flex;flex-wrap:wrap;gap:10px;font-size:.85rem}.mockup-link{color:var(--color-accent);text-decoration:none;border-bottom:1px solid rgba(255,107,92,.4);padding-bottom:2px}.mockup-link:hover{color:var(--color-accent-strong);border-bottom-color:rgba(255,107,92,.7)}.compare-shell{min-height:100vh;background:var(--color-surface-2);padding:var(--space-lg) 0}.compare-header{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-lg);margin-bottom:var(--space-lg)}.compare-subtext{color:var(--color-muted);margin:6px 0 0}.compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:var(--space-lg);gap:var(--space-lg)}.compare-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-sm)}.compare-label{font-weight:600}.compare-frame{min-height:420px;border-radius:var(--radius-md);border:1px dashed var(--color-border);background:linear-gradient(135deg,var(--color-surface-2),transparent);display:flex;align-items:center;justify-content:center;overflow:hidden}.compare-frame img{width:100%;height:100%;max-height:70vh;object-fit:contain}.compare-frame-checker{background-color:#f3efe8;background-image:linear-gradient(45deg,rgba(0,0,0,.08) 25%,transparent 0),linear-gradient(-45deg,rgba(0,0,0,.08) 25%,transparent 0),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.08) 0),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.08) 0);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}.compare-placeholder{color:var(--color-muted)}.compare-empty{grid-column:1/-1;text-align:center;padding:var(--space-lg);border:1px dashed var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.mockup-stack{display:flex;flex-direction:column;gap:var(--space-md)}.mockup-stack .mockup-card:nth-child(2){margin-left:var(--space-md)}.mockup-stack .mockup-card:nth-child(3){margin-left:calc(var(--space-md) * .4)}.mockup-frame{border-radius:var(--radius-md);border:1px dashed var(--color-border);background:linear-gradient(145deg,var(--color-surface-2),transparent);align-items:center;justify-content:center;text-align:center}.gallery-card,.mockup-frame{min-height:180px;display:flex;padding:var(--space-md)}.gallery-card{border-radius:var(--radius-md);border:1px solid var(--color-border);background:linear-gradient(135deg,var(--color-surface-2),var(--color-surface));flex-direction:column;gap:var(--space-xs)}.legal{padding:var(--space-2xl) 0}.legal-hero{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap;margin-bottom:var(--space-lg)}.legal-logo{height:42px;width:auto}.legal-intro{color:var(--color-muted);max-width:42rem;margin:0}.legal-updated{margin:0 0 var(--space-xs);font-size:.85rem;color:var(--color-muted);text-transform:uppercase;letter-spacing:.08em}.legal-card{padding:var(--space-lg);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--space-md)}.legal-section h2{margin:0 0 var(--space-xs);font-size:1.2rem}.legal-section p{margin:0;color:var(--color-muted)}.legal-contact{margin-top:var(--space-md);color:var(--color-muted)}.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:var(--space-md);gap:var(--space-md)}.contact-card{padding:var(--space-lg);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--space-sm)}.contact-email{font-weight:600;font-size:1.05rem;color:var(--color-accent)}.contact-note{margin:0;color:var(--color-muted)}.contact-side{display:flex;gap:var(--space-md);align-items:flex-start}.contact-side img{width:40px;height:40px}.pricing-card{padding:var(--space-md);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--space-xs)}.pricing-card span{color:var(--color-muted);font-size:.95rem}.auth-section{padding-top:0}.auth-card{padding:var(--space-lg);border-radius:var(--radius-md);border:1px solid var(--color-border);background:linear-gradient(135deg,var(--color-surface),var(--color-surface-2));box-shadow:var(--shadow-card);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-gap:var(--space-lg);gap:var(--space-lg);align-items:center}.auth-copy h2{margin:0 0 var(--space-xs);font-family:var(--font-display)}.auth-copy p{margin:0;color:var(--color-muted)}.auth-note{margin-top:var(--space-sm);font-size:.9rem}.auth-actions{display:flex;flex-direction:column;gap:var(--space-sm)}.auth-button{justify-content:flex-start;gap:12px}.auth-icon{width:22px;height:22px;border-radius:999px;background:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(15,23,42,.08)}.btn-ghost .auth-icon{background:var(--color-surface)}.auth-icon svg{width:16px;height:16px;display:block}.app-shell{padding-top:var(--space-lg)}.app-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.35fr);grid-gap:var(--space-lg);gap:var(--space-lg);align-items:start}.app-panel{background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);box-shadow:var(--shadow-soft);padding:var(--space-md);flex-direction:column}.app-panel,.app-panel-header{display:flex;gap:var(--space-md)}.app-panel-header{align-items:flex-start;justify-content:space-between}.app-title{margin:0;font-weight:600}.app-subtitle{margin:6px 0 0;color:var(--color-muted);font-size:.95rem}.app-auth-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.account-card,.app-account-card,.app-auth-card{padding:var(--space-md)}.account-card{border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-2);display:flex;flex-direction:column;gap:var(--space-xs)}.account-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);font-size:.95rem}.account-label{color:var(--color-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}.account-pill{padding:4px 10px;border-radius:999px;font-size:.75rem;background:rgba(255,107,92,.15);color:var(--color-accent)}.account-actions{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-top:var(--space-xs)}.account-note{color:var(--color-muted);font-size:.85rem}.account-buy{box-shadow:0 10px 20px rgba(255,107,92,.2)}.mode-toggle{display:flex;gap:var(--space-xs);flex-wrap:wrap;justify-content:flex-end}.mode-pill{border:1px solid var(--color-border);background:transparent;color:var(--color-text);padding:8px 14px;border-radius:999px;font-size:.85rem;cursor:pointer}.mode-pill.is-active{border-color:var(--color-accent);color:var(--color-accent);box-shadow:0 0 0 3px rgba(255,107,92,.15)}.app-file-input{border-style:solid}.app-tool-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}.app-tool-control{display:flex;align-items:center;gap:var(--space-xs);flex:1 1;justify-content:flex-end}.app-tool-select{flex:1 1;min-width:0;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:10px 12px;background:var(--color-surface);color:var(--color-text)}.app-tool-badge{padding:4px 10px;border-radius:999px;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-accent);border:1px solid rgba(255,107,92,.4);background:rgba(255,107,92,.12);white-space:nowrap}.app-note{display:flex;flex-direction:column;gap:6px;color:var(--color-muted);font-size:.9rem}.app-note-warning{color:var(--color-accent)}.app-error{margin:0;color:#ff6b5c;font-size:.9rem}.status-card{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-md);background:var(--color-surface-2);display:flex;flex-direction:column;gap:var(--space-xs)}.status-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);font-size:.95rem}.progress-bar{height:6px;background:rgba(0,0,0,.12);border-radius:999px;overflow:hidden}.progress-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--color-accent),#ff9d91);transition:width .2s ease}.demo-widget{background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);box-shadow:var(--shadow-soft);padding:var(--space-md)}.demo-body,.demo-widget{display:flex;flex-direction:column;gap:var(--space-md)}.demo-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}.demo-title{font-weight:600;margin:0}.demo-subtext{margin:0;color:var(--color-muted);font-size:.95rem}.demo-icon{width:52px;height:52px}.file-input{position:relative;border:1px dashed var(--color-border);border-radius:var(--radius-md);padding:var(--space-md);display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-sm);cursor:pointer;background:var(--color-surface-2);transition:border var(--transition-fast),transform var(--transition-fast);min-height:84px}.file-input:hover{border-color:var(--color-accent);transform:translateY(-1px)}#demo:target .file-input{animation:upload-glow 1.4s ease-out 1}@keyframes upload-glow{0%{border-color:var(--color-accent);box-shadow:0 0 0 0 var(--glow-1)}45%{border-color:var(--color-accent);box-shadow:0 0 0 10px var(--glow-1)}to{border-color:var(--color-border);box-shadow:0 0 0 0 transparent}}.file-input input{position:absolute;inset:0;opacity:0;cursor:pointer}.file-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--color-accent-strong)}.file-icon,.file-thumb{width:44px;height:44px;border-radius:14px;background:var(--color-surface);border:1px solid var(--color-border);flex:0 0 auto}.file-thumb{overflow:hidden}.file-thumb img{width:100%;height:100%;object-fit:cover;display:block}.file-icon svg{width:22px;height:22px}.file-copy{display:flex;flex-direction:column;gap:4px;flex:1 1;min-width:0}.file-title{font-weight:600}.file-meta{color:var(--color-muted);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-chip{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;padding:6px 10px;border-radius:999px;background:rgba(255,107,92,.15);color:var(--color-accent-strong);border:1px solid rgba(255,107,92,.35);margin-left:auto}.tool-select{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-xs)}.tool-select legend{font-weight:600;margin-bottom:var(--space-xs)}.tool-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:var(--space-xs);gap:var(--space-xs)}.tool-option{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-xs);display:flex;align-items:center;gap:var(--space-xs);font-size:.9rem;background:var(--color-surface)}.tool-option input{accent-color:var(--color-accent)}.mask-panel{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-sm);background:linear-gradient(150deg,var(--color-surface),var(--color-surface-2));flex-direction:column}.mask-header,.mask-panel{display:flex;gap:var(--space-sm)}.mask-header{align-items:center;justify-content:space-between}.mask-title{margin:0;font-weight:600;font-size:.95rem}.mask-subtext{margin:0;color:var(--color-muted);font-size:.85rem}.mask-badge{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--color-border);color:var(--color-muted);background:var(--color-surface)}.mask-toolbar{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-gap:var(--space-sm);gap:var(--space-sm);align-items:center}.mask-tools{display:flex;flex-wrap:wrap;gap:var(--space-xs);align-items:center}.mask-tool{border:1px solid var(--color-border);border-radius:999px;padding:6px 12px;display:inline-flex;align-items:center;gap:6px;font-size:.85rem;background:var(--color-surface);color:var(--color-text);cursor:pointer;transition:border var(--transition-fast),color var(--transition-fast),background var(--transition-fast)}.mask-tool.is-active{border-color:var(--color-accent);color:var(--color-accent-strong);background:var(--color-surface-2)}.mask-tool:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}.mask-icon{display:inline-flex;color:currentColor}.mask-icon svg{width:16px;height:16px;display:block}.mask-slider{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--color-muted)}.mask-slider-label{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs)}.mask-size-preview{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface);flex:0 0 auto}.mask-size-preview.is-erase{border-style:dashed;border-color:var(--color-muted)}.mask-size-dot{width:24px;height:24px;border-radius:999px;border:1px solid var(--color-accent);background:rgba(255,107,92,.2);box-shadow:0 0 0 6px var(--glow-1);transition:width var(--transition-fast),height var(--transition-fast)}.mask-size-preview.is-erase .mask-size-dot{background:transparent;border-style:dashed;border-color:var(--color-muted);box-shadow:none}.mask-slider input{width:100%;accent-color:var(--color-accent)}.mask-preview{display:flex;flex-direction:column;gap:var(--space-xs)}.mask-canvas{position:relative;border-radius:var(--radius-sm);border:1px dashed var(--color-border);background:linear-gradient(135deg,rgba(0,0,0,.05),transparent);min-height:86px;overflow:hidden;cursor:crosshair}.mask-label{position:absolute;top:8px;left:10px;font-size:.7rem;color:var(--color-muted);text-transform:uppercase;letter-spacing:.12em}.mask-stroke{position:absolute;height:18px;border-radius:999px;background:var(--color-accent);opacity:.35}.stroke-one{width:70px;top:34px;left:18px;transform:rotate(-8deg)}.stroke-two{width:90px;top:50px;right:18px;transform:rotate(12deg)}.mask-hint{margin:0;font-size:.85rem;color:var(--color-muted)}.mask-cursor{position:absolute;border-radius:999px;border:2px solid var(--color-accent);background:rgba(255,107,92,.12);transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 8px var(--glow-1)}.mask-cursor.is-erase{border-color:var(--color-muted);border-style:dashed;background:transparent;box-shadow:none}.demo-actions{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.demo-note{color:var(--color-muted)}.demo-error,.demo-note{margin:0;font-size:.85rem}.demo-error{color:#ff6b5c}.demo-preview{position:relative;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-2);min-height:220px;padding:var(--space-md);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--color-muted)}.preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:var(--space-sm);gap:var(--space-sm);width:100%}.preview-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-xs);display:flex;flex-direction:column;gap:var(--space-xs)}.preview-card span{font-size:.85rem;color:var(--color-muted)}.preview-card img{width:100%;height:100%;border-radius:var(--radius-sm);object-fit:cover}.preview-placeholder{min-height:140px;border-radius:var(--radius-sm);background:linear-gradient(145deg,rgba(0,0,0,.06),transparent);display:grid;place-items:center;color:var(--color-muted);font-size:.85rem}.demo-overlay{position:absolute;inset:0;background:var(--color-overlay);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm);border-radius:var(--radius-md);text-align:center}.demo-overlay img{width:54px;height:54px}.demo-progress{font-size:.85rem;color:var(--color-muted)}.btn{border:1px solid transparent;border-radius:999px;padding:10px 18px;font-weight:600;font-size:.95rem;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast),color var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs)}.btn:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}.btn-primary{background:var(--color-accent);color:var(--color-accent-contrast);box-shadow:var(--shadow-accent)}.btn-primary:hover{background:var(--color-accent-strong);transform:translateY(-1px)}.btn-ghost{background:transparent;border-color:var(--color-border);color:var(--color-text)}.btn-ghost:hover{border-color:var(--color-accent);color:var(--color-accent-strong)}.btn[disabled]{cursor:not-allowed;opacity:.6;box-shadow:none;transform:none}.site-footer{border-top:1px solid var(--color-border);padding:var(--space-xl) 0;background:var(--color-surface)}.footer-grid{align-items:center;justify-content:space-between;flex-wrap:wrap}.footer-grid,.footer-links{display:flex;gap:var(--space-md)}.footer-links{font-size:.95rem;color:var(--color-muted)}.footer-company{color:var(--color-muted);font-size:.9rem}.footer-brand{display:flex;align-items:center;gap:var(--space-sm);font-weight:600}.footer-brand img{width:34px;height:34px}@media (max-width:1024px){.card-grid,.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-layout{grid-template-columns:1fr}.shop-cart{position:static}.credits-grid,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:900px){.app-grid,.hero-grid{grid-template-columns:1fr}.nav-links{display:none}.credits-ladder,.gallery-grid,.pricing-grid,.shop-grid{grid-template-columns:1fr}.credits-ladder:before{display:none}.credits-grid,.showcase-grid{grid-template-columns:1fr}.mockup-stack .mockup-card:nth-child(2),.mockup-stack .mockup-card:nth-child(3){margin-left:0}.auth-card,.compare-grid,.contact-grid{grid-template-columns:1fr}.tool-options{grid-template-columns:repeat(2,minmax(0,1fr))}.mask-toolbar{grid-template-columns:1fr}}@media (max-width:720px){.container{padding:0 var(--space-md)}.card-grid,.preview-grid,.steps,.tool-options{grid-template-columns:1fr}.mockup-compare{min-height:260px}.mockup-compare-compact{min-height:200px}.btn,.hero-actions{width:100%}.app-tool-row,.demo-actions{flex-direction:column}.app-tool-row{align-items:flex-start}.app-tool-control{width:100%}}