:root{--bg-base: #090d16;--bg-surface: #0f172a;--bg-surface-elevated: #1e293b;--bg-surface-glass: rgba(15, 23, 42, .85);--bg-input: #0b1120;--bg-chip: #1e293b;--bg-chip-hover: #334155;--bg-chip-active: rgba(99, 102, 241, .15);--border-subtle: #1e293b;--border-card: #283548;--border-focus: #6366f1;--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--text-inverse: #090d16;--brand-primary: #6366f1;--brand-primary-hover: #4f46e5;--brand-secondary: #10b981;--brand-secondary-hover: #059669;--brand-gradient: linear-gradient(135deg, #6366f1 0%, #10b981 100%);--brand-glow: 0 0 24px rgba(99, 102, 241, .25);--emerald-glow: 0 0 20px rgba(16, 185, 129, .2);--success-bg: rgba(16, 185, 129, .12);--success-border: rgba(16, 185, 129, .35);--success-text: #34d399;--warning-bg: rgba(245, 158, 11, .12);--warning-border: rgba(245, 158, 11, .3);--warning-text: #fbbf24;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);--shadow-glow: 0 0 40px rgba(99, 102, 241, .15);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--font-heading: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--transition-bounce: .35s cubic-bezier(.34, 1.56, .64, 1)}[data-theme=light]{--bg-base: #f8fafc;--bg-surface: #ffffff;--bg-surface-elevated: #f1f5f9;--bg-surface-glass: rgba(255, 255, 255, .9);--bg-input: #f8fafc;--bg-chip: #f1f5f9;--bg-chip-hover: #e2e8f0;--bg-chip-active: rgba(99, 102, 241, .1);--border-subtle: #e2e8f0;--border-card: #cbd5e1;--border-focus: #4f46e5;--text-primary: #0f172a;--text-secondary: #475569;--text-muted: #94a3b8;--text-inverse: #ffffff;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);--shadow-md: 0 4px 14px rgba(0, 0, 0, .08);--shadow-lg: 0 12px 30px rgba(0, 0, 0, .1);--shadow-glow: 0 0 35px rgba(99, 102, 241, .12)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);background-color:var(--bg-base);color:var(--text-primary);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}.app-root{display:flex;flex-direction:column;min-height:100vh}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1.5rem}a{color:inherit;text-decoration:none}button,input,select{font-family:inherit;font-size:inherit}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.text-gradient{background:var(--brand-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}.highlight-green{color:var(--brand-secondary)!important}.top-privacy-bar{background:linear-gradient(90deg,#6366f11a,#10b9811a);border-bottom:1px solid var(--border-subtle);font-size:.8125rem;padding:.5rem 0}.top-privacy-content{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;text-align:center}.privacy-pulse{width:8px;height:8px;border-radius:50%;background-color:var(--brand-secondary);box-shadow:0 0 8px var(--brand-secondary);animation:pulse-ring 2s infinite}@keyframes pulse-ring{0%{transform:scale(.95);box-shadow:0 0 #10b981b3}70%{transform:scale(1);box-shadow:0 0 0 8px #10b98100}to{transform:scale(.95);box-shadow:0 0 #10b98100}}.privacy-badge{background:var(--success-bg);color:var(--success-text);border:1px solid var(--success-border);border-radius:var(--radius-full);padding:.15rem .6rem;font-weight:600;font-size:.75rem}.site-header{position:sticky;top:0;z-index:50;background:var(--bg-surface-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle);transition:background-color var(--transition-normal)}.header-container{display:flex;align-items:center;justify-content:space-between;height:4.25rem}.brand-logo{display:flex;align-items:center;gap:.75rem;font-family:var(--font-heading)}.logo-icon-wrap{width:36px;height:36px;display:flex;align-items:center;justify-content:center}.logo-svg{width:100%;height:100%}.brand-text{display:flex;align-items:baseline;font-weight:800;font-size:1.25rem;letter-spacing:-.02em}.brand-tld{font-size:.875rem;color:var(--text-muted);font-weight:600}.site-nav{display:none}@media(min-width:768px){.site-nav{display:block}}.nav-links{display:flex;list-style:none;gap:1.75rem}.nav-link{color:var(--text-secondary);font-size:.9375rem;font-weight:500;transition:color var(--transition-fast)}.nav-link:hover{color:var(--text-primary)}.header-actions{display:flex;align-items:center;gap:.875rem}.icon-btn{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-secondary);width:36px;height:36px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast)}.icon-btn:hover{color:var(--text-primary);border-color:var(--border-card);transform:translateY(-1px)}.theme-icon{width:18px;height:18px}.btn-primary-sm{background:var(--brand-primary);color:#fff;padding:.5rem 1rem;border-radius:var(--radius-md);font-weight:600;font-size:.875rem;transition:all var(--transition-fast);box-shadow:0 2px 8px #6366f140}.btn-primary-sm:hover{background:var(--brand-primary-hover);transform:translateY(-1px);box-shadow:0 4px 14px #6366f159}.hero-section{padding:3.5rem 0 2rem;text-align:center;position:relative;overflow:hidden}.hero-section:before{content:"";position:absolute;top:-100px;left:50%;transform:translate(-50%);width:600px;height:300px;background:radial-gradient(circle,rgba(99,102,241,.15) 0%,rgba(16,185,129,.05) 50%,transparent 70%);pointer-events:none;z-index:0}.hero-container{position:relative;z-index:1;max-width:860px}.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--bg-surface-elevated);border:1px solid var(--border-card);padding:.35rem .95rem;border-radius:var(--radius-full);font-size:.8125rem;font-weight:600;color:var(--text-secondary);margin-bottom:1.5rem;box-shadow:var(--shadow-sm)}.hero-title{font-family:var(--font-heading);font-size:2.5rem;line-height:1.15;font-weight:800;letter-spacing:-.03em;margin-bottom:1.25rem}@media(min-width:768px){.hero-title{font-size:3.5rem}}.hero-subtitle{font-size:1.125rem;color:var(--text-secondary);line-height:1.6;max-width:680px;margin:0 auto 2rem}.hero-quick-pills{display:flex;align-items:center;justify-content:center;gap:.625rem;flex-wrap:wrap}.pill-label{font-size:.8125rem;color:var(--text-muted);font-weight:600}.pill-btn{background:var(--bg-chip);border:1px solid var(--border-subtle);color:var(--text-secondary);padding:.375rem .875rem;border-radius:var(--radius-full);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.pill-btn:hover{background:var(--bg-chip-hover);color:var(--text-primary);border-color:var(--border-card);transform:translateY(-1px)}.workspace-section{padding:1.5rem 0 4rem}.workspace-container{max-width:960px}.dropzone-card{background:var(--bg-surface);border:1px solid var(--border-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg),var(--shadow-glow);padding:.75rem;transition:border-color var(--transition-normal),box-shadow var(--transition-normal)}.dropzone-inner{border:2px dashed var(--border-card);border-radius:calc(var(--radius-xl) - 4px);padding:3.5rem 2rem;text-align:center;background:radial-gradient(circle at 50% 30%,rgba(99,102,241,.03) 0%,transparent 70%);cursor:pointer;transition:all var(--transition-fast);outline:none}.dropzone-inner:hover,.dropzone-inner.drag-over{border-color:var(--brand-primary);background:radial-gradient(circle at 50% 30%,rgba(99,102,241,.08) 0%,transparent 70%);transform:scale(.995)}.dropzone-inner:focus-visible{border-color:var(--border-focus);box-shadow:0 0 0 4px #6366f133}.file-input-hidden{display:none}.dropzone-icon-circle{width:64px;height:64px;margin:0 auto 1.25rem;background:var(--bg-surface-elevated);border:1px solid var(--border-card);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--brand-primary);box-shadow:var(--shadow-sm);transition:transform var(--transition-fast)}.dropzone-inner:hover .dropzone-icon-circle{transform:translateY(-3px) scale(1.05);color:var(--brand-secondary)}.dropzone-svg{width:30px;height:30px}.dropzone-heading{font-family:var(--font-heading);font-size:1.35rem;font-weight:700;margin-bottom:.5rem}.accent-link{color:var(--brand-primary);text-decoration:underline;text-underline-offset:4px}.dropzone-hint{font-size:.875rem;color:var(--text-muted);margin-bottom:1.75rem}kbd{background:var(--bg-surface-elevated);border:1px solid var(--border-card);padding:.15rem .4rem;border-radius:var(--radius-sm);font-size:.75rem;font-family:monospace;color:var(--text-secondary)}.dropzone-actions{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:var(--radius-md);font-weight:600;font-size:.9375rem;cursor:pointer;border:none;transition:all var(--transition-fast)}.btn-primary{background:var(--brand-gradient);color:#fff;box-shadow:0 4px 14px #6366f159}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #6366f173}.btn-secondary{background:var(--bg-surface-elevated);border:1px solid var(--border-card);color:var(--text-primary)}.btn-secondary:hover{background:var(--bg-chip-hover);border-color:var(--border-focus);transform:translateY(-1px)}.btn-icon{width:18px;height:18px}.btn-icon-sm{width:14px;height:14px}.dropzone-features-bar{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;padding:1.25rem 1.5rem .75rem;border-top:1px solid var(--border-subtle);margin-top:.75rem}@media(min-width:640px){.dropzone-features-bar{grid-template-columns:repeat(4,1fr)}}.feature-item{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--text-secondary);font-weight:500}.feature-icon{font-size:1rem}.active-workspace-panel{display:flex;flex-direction:column;gap:2rem;animation:fadeIn .3s ease forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.controls-card{background:var(--bg-surface);border:1px solid var(--border-card);border-radius:var(--radius-xl);padding:1.75rem;box-shadow:var(--shadow-md)}.controls-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.controls-title-group{display:flex;align-items:center;gap:.875rem;flex-wrap:wrap}.controls-title{font-family:var(--font-heading);font-size:1.25rem;font-weight:700}.active-file-pill{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-secondary);font-size:.75rem;padding:.25rem .75rem;border-radius:var(--radius-full);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-ghost-sm{background:transparent;border:1px solid var(--border-subtle);color:var(--text-muted);padding:.35rem .75rem;border-radius:var(--radius-md);font-size:.8125rem;font-weight:500;display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;transition:all var(--transition-fast)}.btn-ghost-sm:hover{background:var(--bg-surface-elevated);color:var(--text-primary);border-color:var(--border-card)}.tabs-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;background:var(--bg-input);padding:.375rem;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);margin-bottom:1.5rem}.tab-btn{background:transparent;border:none;color:var(--text-secondary);padding:.75rem .5rem;border-radius:var(--radius-md);font-weight:600;font-size:.875rem;display:flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;position:relative;transition:all var(--transition-fast)}.tab-btn:hover{color:var(--text-primary)}.tab-btn.active{background:var(--bg-surface-elevated);color:var(--text-primary);box-shadow:var(--shadow-sm)}.tab-badge{background:var(--brand-secondary);color:#000;font-size:.625rem;font-weight:700;text-transform:uppercase;padding:.1rem .4rem;border-radius:var(--radius-full);display:none}@media(min-width:640px){.tab-badge{display:inline-block}}.tab-panel{display:none}.tab-panel.active{display:block;animation:tabFadeIn .2s ease forwards}@keyframes tabFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.target-presets-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1.25rem}@media(min-width:640px){.target-presets-grid{grid-template-columns:repeat(3,1fr)}@media(min-width:860px){.target-presets-grid{grid-template-columns:repeat(6,1fr)}}}.preset-card-btn{background:var(--bg-surface-elevated);border:1px solid var(--border-card);border-radius:var(--radius-md);padding:.875rem .5rem;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.25rem;transition:all var(--transition-fast)}.preset-card-btn:hover{border-color:var(--brand-primary);background:var(--bg-chip-hover);transform:translateY(-2px)}.preset-card-btn.active{border-color:var(--brand-primary);background:var(--bg-chip-active);box-shadow:var(--brand-glow)}.preset-size{font-size:1.125rem;font-weight:700;color:var(--text-primary)}.preset-card-btn.active .preset-size{color:var(--brand-primary)}.preset-label{font-size:.6875rem;color:var(--text-muted);font-weight:500}.custom-target-row{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:1rem;margin-bottom:1.25rem;display:flex;flex-direction:column;gap:.75rem}@media(min-width:640px){.custom-target-row{flex-direction:row;align-items:center;justify-content:space-between}}.input-with-unit{display:flex;align-items:center;gap:.5rem}.form-label{font-size:.875rem;font-weight:600;color:var(--text-secondary)}.form-input{background:var(--bg-surface);border:1px solid var(--border-card);color:var(--text-primary);padding:.5rem .75rem;border-radius:var(--radius-md);width:100px;font-weight:600;outline:none}.form-input:focus{border-color:var(--border-focus)}.form-select{background:var(--bg-surface);border:1px solid var(--border-card);color:var(--text-primary);padding:.5rem .75rem;border-radius:var(--radius-md);cursor:pointer;outline:none}.btn-secondary-sm{background:var(--bg-surface-elevated);border:1px solid var(--border-card);color:var(--text-primary);padding:.5rem .875rem;border-radius:var(--radius-md);font-size:.8125rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.btn-secondary-sm:hover{background:var(--brand-primary);color:#fff;border-color:var(--brand-primary)}.mode-explainer{font-size:.8125rem;color:var(--text-secondary);line-height:1.5}.slider-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.slider-value-pill{background:var(--bg-chip-active);border:1px solid var(--brand-primary);color:var(--brand-primary);font-size:.875rem;font-weight:700;padding:.2rem .6rem;border-radius:var(--radius-full)}.slider-wrapper{margin-bottom:1.25rem}.custom-range{-webkit-appearance:none;width:100%;height:8px;border-radius:var(--radius-full);background:var(--bg-surface-elevated);outline:none;border:1px solid var(--border-card);cursor:pointer}.custom-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--brand-primary);box-shadow:0 0 10px #6366f180;cursor:pointer;transition:transform var(--transition-fast)}.custom-range::-webkit-slider-thumb:hover{transform:scale(1.15)}.slider-ticks{display:flex;justify-content:space-between;font-size:.6875rem;color:var(--text-muted);margin-top:.5rem}.quality-shortcuts{display:flex;gap:.5rem;flex-wrap:wrap}.btn-chip{background:var(--bg-surface-elevated);border:1px solid var(--border-card);color:var(--text-secondary);padding:.4rem .8rem;border-radius:var(--radius-full);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.btn-chip:hover{background:var(--bg-chip-hover);color:var(--text-primary)}.btn-chip.active{background:var(--brand-primary);color:#fff;border-color:var(--brand-primary)}.resize-mode-content{display:flex;flex-direction:column;gap:1.25rem}.resize-scale-group{display:flex;flex-direction:column;gap:.5rem}.scale-chips{display:flex;gap:.5rem;flex-wrap:wrap}.dimension-inputs-row{display:flex;align-items:flex-end;gap:.75rem}.form-group{display:flex;flex-direction:column;gap:.35rem}.dimension-inputs-row .form-input{width:120px}.icon-toggle-btn{background:var(--bg-surface-elevated);border:1px solid var(--border-card);color:var(--text-muted);width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast)}.icon-toggle-btn.active{color:var(--brand-primary);border-color:var(--brand-primary);background:var(--bg-chip-active)}.icon-svg{width:18px;height:18px}.controls-footer-row{display:flex;flex-direction:column;gap:1rem;padding-top:1.25rem;border-top:1px solid var(--border-subtle);margin-top:1.25rem}@media(min-width:640px){.controls-footer-row{flex-direction:row;align-items:center;justify-content:space-between}}.format-selection{display:flex;align-items:center;gap:.75rem}.form-label-inline{font-size:.875rem;font-weight:600;color:var(--text-secondary)}.toggle-checkbox{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;font-size:.8125rem;color:var(--text-secondary)}.toggle-checkbox input{display:none}.checkbox-custom{width:18px;height:18px;border:1px solid var(--border-card);border-radius:var(--radius-sm);background:var(--bg-input);display:inline-block;position:relative;transition:all var(--transition-fast)}.toggle-checkbox input:checked+.checkbox-custom{background:var(--brand-secondary);border-color:var(--brand-secondary)}.toggle-checkbox input:checked+.checkbox-custom:after{content:"";position:absolute;top:2px;left:6px;width:4px;height:9px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg)}.results-card{background:var(--bg-surface);border:1px solid var(--border-card);border-radius:var(--radius-xl);padding:1.5rem;box-shadow:var(--shadow-lg)}.metrics-bar{display:flex;align-items:center;justify-content:space-between;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:1rem 1.25rem;margin-bottom:1.25rem;flex-wrap:wrap;gap:1rem}.metric-item{display:flex;flex-direction:column}.metric-title{font-size:.75rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.2rem}.metric-value-wrap{display:flex;align-items:baseline;gap:.5rem}.metric-number{font-family:var(--font-heading);font-size:1.35rem;font-weight:800}.accent-text{color:var(--brand-secondary)}.metric-sub{font-size:.75rem;color:var(--text-muted)}.metric-arrow{font-size:1.25rem;color:var(--text-muted);display:none}@media(min-width:480px){.metric-arrow{display:block}}.savings-badge-wrap{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.savings-pill{background:var(--success-bg);border:1px solid var(--success-border);color:var(--success-text);padding:.4rem .85rem;border-radius:var(--radius-full);display:flex;align-items:baseline;gap:.4rem;font-weight:800;font-size:1.125rem}.savings-diff{font-size:.75rem;font-weight:500;opacity:.85}.target-status-pill{background:#6366f126;border:1px solid var(--brand-primary);color:var(--brand-primary);font-size:.75rem;font-weight:700;padding:.35rem .75rem;border-radius:var(--radius-full)}.comparison-container-outer{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-card);background:#000;margin-bottom:1.5rem}.comparison-toolbar{display:flex;align-items:center;justify-content:space-between;background:var(--bg-surface-elevated);padding:.6rem 1rem;border-bottom:1px solid var(--border-subtle);font-size:.8125rem}.toolbar-side-label{display:flex;gap:.75rem}.badge-orig{background:#ffffff1a;padding:.15rem .5rem;border-radius:var(--radius-sm);font-weight:600;color:#e2e8f0}.badge-comp{background:var(--success-bg);color:var(--success-text);padding:.15rem .5rem;border-radius:var(--radius-sm);font-weight:600}.toolbar-controls{display:flex;align-items:center;gap:.5rem}.toolbar-hint{color:var(--text-muted);font-size:.75rem;display:none}@media(min-width:640px){.toolbar-hint{display:inline-block}}.tool-btn{background:var(--bg-surface);border:1px solid var(--border-card);color:var(--text-secondary);padding:.2rem .5rem;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;cursor:pointer}.tool-btn:hover{color:var(--text-primary);border-color:var(--brand-primary)}.comparison-viewport{position:relative;width:100%;height:480px;overflow:hidden;user-select:none;touch-action:none;cursor:ew-resize;background:radial-gradient(circle at center,#1e293b,#0a0f1d)}.comparison-image-layer{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.comparison-image-layer img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none;transition:transform .1s ease}.original-layer{width:50%;border-right:none;z-index:2;overflow:hidden}.original-layer img{position:absolute;top:0;left:0;width:100%;height:100%}.compressed-layer{z-index:1}.image-watermark-label{position:absolute;background:#000000a6;backdrop-filter:blur(4px);color:#fff;font-size:.6875rem;font-weight:600;padding:.25rem .6rem;border-radius:var(--radius-sm);pointer-events:none;z-index:3}.image-watermark-label.bottom-left{bottom:12px;left:12px}.image-watermark-label.bottom-right{bottom:12px;right:12px}.comparison-divider{position:absolute;top:0;bottom:0;width:40px;margin-left:-20px;z-index:10;display:flex;align-items:center;justify-content:center;cursor:ew-resize;pointer-events:auto}.divider-line{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 10px #000c}.divider-handle{width:36px;height:36px;border-radius:50%;background:#fff;color:#0f172a;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px #00000080,0 0 0 3px #6366f166;z-index:11;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.comparison-divider:hover .divider-handle,.comparison-divider:active .divider-handle{transform:scale(1.15);box-shadow:0 4px 16px #0009,0 0 0 4px #6366f199}.handle-icon{width:20px;height:20px}.processing-overlay{position:absolute;inset:0;background:#0f172ab3;backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;z-index:20}.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--brand-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.spinner-text{font-size:.875rem;font-weight:600;color:#fff}.results-actions-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}.actions-left{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.btn-lg{padding:.875rem 1.75rem;font-size:1rem;font-weight:700}.btn-success{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:var(--emerald-glow)}.btn-success:hover{background:linear-gradient(135deg,#059669,#047857);transform:translateY(-1px)}.btn-ghost{background:transparent;border:1px solid var(--border-card);color:var(--text-secondary);padding:.75rem 1.25rem;border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.btn-ghost:hover{background:var(--bg-surface-elevated);color:var(--text-primary);border-color:var(--border-focus)}.batch-section{display:flex;flex-direction:column;gap:1.5rem;margin-top:1rem}.batch-header-card{background:var(--bg-surface);border:1px solid var(--border-card);border-radius:var(--radius-xl);padding:1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.25rem}.batch-title{font-family:var(--font-heading);font-size:1.25rem;font-weight:700;margin-bottom:.5rem}.batch-summary-chips{display:flex;gap:.75rem;flex-wrap:wrap}.summary-chip{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);padding:.25rem .75rem;border-radius:var(--radius-full);font-size:.8125rem;color:var(--text-secondary)}.summary-chip.highlight{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}.batch-grid{display:grid;grid-template-columns:1fr;gap:1rem}@media(min-width:640px){.batch-grid{grid-template-columns:repeat(2,1fr)}}.batch-item-card{background:var(--bg-surface);border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:1rem;display:flex;align-items:center;gap:1rem;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast)}.batch-item-card:hover{transform:translateY(-2px);border-color:var(--border-focus)}.batch-thumb{width:60px;height:60px;border-radius:var(--radius-md);object-fit:cover;background:#000;border:1px solid var(--border-subtle);flex-shrink:0}.batch-info{flex-grow:1;min-width:0}.batch-filename{font-size:.875rem;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.25rem}.batch-sizes{font-size:.75rem;color:var(--text-muted);display:flex;gap:.5rem;align-items:center}.batch-saved-pill{background:var(--success-bg);color:var(--success-text);font-weight:700;font-size:.6875rem;padding:.1rem .4rem;border-radius:var(--radius-full)}.batch-btn-download{background:var(--bg-surface-elevated);border:1px solid var(--border-card);color:var(--text-primary);padding:.45rem .8rem;border-radius:var(--radius-md);font-size:.75rem;font-weight:600;cursor:pointer;flex-shrink:0;transition:all var(--transition-fast)}.batch-btn-download:hover{background:var(--brand-secondary);color:#000;border-color:var(--brand-secondary)}.presets-section{padding:5rem 0;background:var(--bg-surface);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}.section-header{max-width:680px;margin:0 auto 3rem}.text-center{text-align:center}.sub-badge{color:var(--brand-primary);font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;display:inline-block;margin-bottom:.5rem}.section-title{font-family:var(--font-heading);font-size:2rem;font-weight:800;line-height:1.2;margin-bottom:.75rem}@media(min-width:768px){.section-title{font-size:2.5rem}}.section-subtitle{font-size:1.0625rem;color:var(--text-secondary)}.presets-cards-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}@media(min-width:640px){.presets-cards-grid{grid-template-columns:repeat(2,1fr)}@media(min-width:1024px){.presets-cards-grid{grid-template-columns:repeat(4,1fr)}}}.preset-showcase-card{background:var(--bg-base);border:1px solid var(--border-card);border-radius:var(--radius-xl);padding:1.75rem;display:flex;flex-direction:column;position:relative;transition:all var(--transition-normal)}.preset-showcase-card:hover{transform:translateY(-4px);border-color:var(--brand-primary);box-shadow:var(--shadow-md)}.highlight-card{border-color:var(--brand-primary);background:radial-gradient(circle at top right,rgba(99,102,241,.08) 0%,var(--bg-base) 70%)}.popular-ribbon{position:absolute;top:12px;right:12px;background:var(--brand-gradient);color:#fff;font-size:.6875rem;font-weight:700;padding:.2rem .6rem;border-radius:var(--radius-full)}.card-icon-wrap{font-size:2rem;margin-bottom:1rem}.card-title{font-family:var(--font-heading);font-size:1.25rem;font-weight:700;margin-bottom:.5rem}.card-desc{font-size:.875rem;color:var(--text-secondary);line-height:1.5;margin-bottom:1.25rem;flex-grow:1}.card-specs{list-style:none;font-size:.8125rem;color:var(--text-muted);display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.5rem;padding-top:1rem;border-top:1px solid var(--border-subtle)}.card-specs li:before{content:"✓";color:var(--brand-secondary);font-weight:700;margin-right:.4rem}.btn-apply-preset{background:var(--bg-surface-elevated);border:1px solid var(--border-card);color:var(--text-primary);padding:.6rem;border-radius:var(--radius-md);font-weight:600;font-size:.875rem;cursor:pointer;transition:all var(--transition-fast)}.btn-apply-preset:hover{background:var(--brand-primary);color:#fff;border-color:var(--brand-primary)}.trust-section{padding:5rem 0}.trust-grid{display:grid;grid-template-columns:1fr;gap:3rem}@media(min-width:992px){.trust-grid{grid-template-columns:1.1fr 1fr;align-items:center}}.trust-lead{font-size:1.125rem;color:var(--text-secondary);line-height:1.6;margin-bottom:1rem}.trust-body{font-size:1rem;color:var(--text-secondary);line-height:1.6;margin-bottom:2rem}.trust-points-list{display:flex;flex-direction:column;gap:1.25rem}.trust-point{display:flex;gap:1rem}.point-icon{font-size:1.5rem;background:var(--bg-surface);border:1px solid var(--border-card);width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}.point-info h4{font-size:1rem;font-weight:700;margin-bottom:.2rem}.point-info p{font-size:.875rem;color:var(--text-muted)}.trust-comparison-card{background:var(--bg-surface);border:1px solid var(--border-card);border-radius:var(--radius-xl);padding:1.75rem;box-shadow:var(--shadow-md)}.comparison-table-title{font-family:var(--font-heading);font-size:1.25rem;font-weight:700;margin-bottom:1.25rem}.comparison-table-wrap{overflow-x:auto}.styled-table{width:100%;border-collapse:collapse;text-align:left;font-size:.875rem}.styled-table th,.styled-table td{padding:.875rem .75rem;border-bottom:1px solid var(--border-subtle)}.styled-table th{color:var(--text-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.styled-table .table-brand{background:#6366f10d;font-weight:600}.steps-section{padding:5rem 0;background:var(--bg-surface);border-top:1px solid var(--border-subtle)}.steps-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}@media(min-width:768px){.steps-grid{grid-template-columns:repeat(3,1fr)}}.step-card{background:var(--bg-base);border:1px solid var(--border-card);border-radius:var(--radius-xl);padding:2rem 1.5rem;position:relative;transition:transform var(--transition-fast)}.step-card:hover{transform:translateY(-3px);border-color:var(--brand-primary)}.step-number{font-family:var(--font-heading);font-size:2.5rem;font-weight:800;color:#6366f140;line-height:1;margin-bottom:1rem}.step-title{font-family:var(--font-heading);font-size:1.25rem;font-weight:700;margin-bottom:.5rem}.step-desc{font-size:.875rem;color:var(--text-secondary);line-height:1.5}.guide-section{padding:5rem 0}.guide-article{max-width:900px;margin:0 auto}.guide-title{font-family:var(--font-heading);font-size:2rem;font-weight:800;margin-bottom:1rem}.guide-paragraph{font-size:1.0625rem;color:var(--text-secondary);line-height:1.6;margin-bottom:2rem}.format-cards-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-bottom:2rem}@media(min-width:768px){.format-cards-grid{grid-template-columns:repeat(3,1fr)}}.format-card{background:var(--bg-surface);border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:1.5rem}.format-badge{display:inline-block;padding:.2rem .6rem;border-radius:var(--radius-full);font-size:.75rem;font-weight:700;margin-bottom:.75rem}.format-badge.webp{background:var(--success-bg);color:var(--success-text);border:1px solid var(--success-border)}.format-badge.jpeg{background:#6366f126;color:var(--brand-primary);border:1px solid rgba(99,102,241,.3)}.format-badge.png{background:#f59e0b26;color:var(--warning-text);border:1px solid var(--warning-border)}.format-card h4{font-size:1.0625rem;font-weight:700;margin-bottom:.5rem}.format-card p{font-size:.875rem;color:var(--text-secondary);line-height:1.5}.guide-callout{background:var(--bg-surface);border-left:4px solid var(--brand-primary);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:1.25rem 1.5rem;display:flex;gap:1rem;align-items:flex-start}.callout-icon{font-size:1.5rem;flex-shrink:0}.callout-text{font-size:.9375rem;color:var(--text-secondary);line-height:1.5}.faq-section{padding:5rem 0;background:var(--bg-surface);border-top:1px solid var(--border-subtle)}.faq-container{max-width:800px}.faq-accordion{display:flex;flex-direction:column;gap:1rem}.faq-item{background:var(--bg-base);border:1px solid var(--border-card);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--transition-fast)}.faq-item[open]{border-color:var(--brand-primary)}.faq-question{padding:1.25rem 1.5rem;font-size:1.0625rem;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;list-style:none;user-select:none}.faq-question::-webkit-details-marker{display:none}.faq-toggle-icon{font-size:1.25rem;font-weight:400;color:var(--brand-primary);transition:transform var(--transition-fast)}.faq-item[open] .faq-toggle-icon{transform:rotate(45deg)}.faq-answer{padding:0 1.5rem 1.25rem;color:var(--text-secondary);font-size:.9375rem;line-height:1.6}.cta-section{padding:4rem 0 5rem}.cta-card{background:radial-gradient(circle at top,rgba(99,102,241,.25) 0%,var(--bg-surface) 70%);border:1px solid var(--border-card);border-radius:var(--radius-xl);padding:3.5rem 2rem;text-align:center;box-shadow:var(--shadow-lg),var(--shadow-glow);max-width:860px;margin:0 auto}.cta-title{font-family:var(--font-heading);font-size:2.25rem;font-weight:800;margin-bottom:1rem}.cta-desc{font-size:1.0625rem;color:var(--text-secondary);max-width:600px;margin:0 auto 2rem}.cta-btn-wrap{display:flex;justify-content:center}.site-footer{background:var(--bg-base);border-top:1px solid var(--border-subtle);padding:4.5rem 0 2.5rem;font-size:.875rem;color:var(--text-secondary)}.footer-top{display:grid;grid-template-columns:1fr;gap:2.5rem;margin-bottom:3.5rem}@media(min-width:640px){.footer-top{grid-template-columns:1.4fr repeat(3,1fr)}}.footer-logo{margin-bottom:1rem}.footer-tagline{font-size:.875rem;color:var(--text-muted);line-height:1.5;margin-bottom:1.25rem;max-width:300px}.footer-privacy-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:600;background:var(--bg-surface);border:1px solid var(--border-card);padding:.25rem .6rem;border-radius:var(--radius-full);color:var(--brand-secondary)}.footer-heading{font-family:var(--font-heading);font-size:.9375rem;font-weight:700;color:var(--text-primary);margin-bottom:1.25rem}.footer-list{list-style:none;display:flex;flex-direction:column;gap:.75rem}.footer-link{color:var(--text-secondary);transition:color var(--transition-fast)}.footer-link:hover{color:var(--brand-primary)}.footer-plain-text{color:var(--text-muted)}.footer-bottom{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem;padding-top:2rem;border-top:1px solid var(--border-subtle);text-align:center;font-size:.8125rem;color:var(--text-muted)}@media(min-width:640px){.footer-bottom{flex-direction:row;text-align:left}}.toast-container{position:fixed;bottom:24px;right:24px;z-index:100;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}.toast{background:var(--bg-surface-elevated);border:1px solid var(--border-card);color:var(--text-primary);padding:.75rem 1.25rem;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:.5rem;pointer-events:auto;animation:slideToast .25s ease forwards}@keyframes slideToast{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.toast.toast-success{border-color:var(--brand-secondary);background:#10b98126;color:#34d399}.toast.toast-error{border-color:#ef4444;background:#ef444426;color:#f87171}.about-section{padding:5rem 0;background:var(--bg-surface);border-top:1px solid var(--border-subtle)}.about-grid{display:grid;grid-template-columns:1fr;gap:2rem}@media(min-width:992px){.about-grid{grid-template-columns:1.1fr 1fr;align-items:stretch}}.about-card{background:var(--bg-base);border:1px solid var(--border-card);border-radius:var(--radius-xl);padding:2.25rem 2rem;display:flex;flex-direction:column;position:relative;box-shadow:var(--shadow-sm);transition:border-color var(--transition-fast)}.about-card:hover{border-color:var(--brand-primary)}.about-card-badge{display:inline-block;align-self:flex-start;background:var(--bg-chip);border:1px solid var(--border-subtle);color:var(--brand-primary);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.25rem .65rem;border-radius:var(--radius-full);margin-bottom:1rem}.about-heading{font-family:var(--font-heading);font-size:1.4rem;font-weight:800;line-height:1.3;margin-bottom:1.25rem;color:var(--text-primary)}.about-text{font-size:.9375rem;color:var(--text-secondary);line-height:1.65;margin-bottom:1rem}.about-text:last-of-type{margin-bottom:0}.about-features-list{list-style:none;display:flex;flex-direction:column;gap:1.25rem;margin-top:.5rem}.about-features-list li{display:flex;align-items:flex-start;gap:.875rem;font-size:.875rem;color:var(--text-secondary);line-height:1.5}.about-features-list strong{display:block;color:var(--text-primary);margin-bottom:.15rem}.feature-bullet-icon{width:36px;height:36px;border-radius:var(--radius-md);background:var(--bg-surface-elevated);border:1px solid var(--border-card);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}.contact-section{padding:5rem 0;background:var(--bg-surface);border-top:1px solid var(--border-subtle)}.contact-grid{display:grid;grid-template-columns:1fr;gap:2rem}@media(min-width:992px){.contact-grid{grid-template-columns:1fr 1.2fr;align-items:stretch}}.contact-info-card{background:var(--bg-base);border:1px solid var(--border-card);border-radius:var(--radius-xl);padding:2.25rem 2rem;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}.contact-card-title{font-family:var(--font-heading);font-size:1.35rem;font-weight:800;margin-bottom:.75rem}.contact-card-desc{font-size:.9375rem;color:var(--text-secondary);line-height:1.6;margin-bottom:2rem}.contact-methods-list{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:2rem}.contact-method-item{display:flex;align-items:center;gap:1rem}.method-icon{width:42px;height:42px;border-radius:var(--radius-md);background:var(--bg-surface-elevated);border:1px solid var(--border-card);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}.method-details{display:flex;flex-direction:column}.method-label{font-size:.75rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.15rem}.method-value{font-size:.9375rem;font-weight:600;color:var(--brand-primary)}.method-value.text-secondary{color:var(--text-secondary);font-weight:500;font-size:.875rem}.contact-privacy-pledge{margin-top:auto;background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:1rem;display:flex;align-items:flex-start;gap:.75rem;font-size:.8125rem;color:var(--text-secondary);line-height:1.5}.pledge-icon{font-size:1.2rem;flex-shrink:0}.contact-form-card{background:var(--bg-base);border:1px solid var(--border-card);border-radius:var(--radius-xl);padding:2.25rem 2rem;box-shadow:var(--shadow-md)}.contact-form{display:flex;flex-direction:column;gap:1.25rem;margin-top:1rem}.form-row{display:grid;grid-template-columns:1fr;gap:1rem}@media(min-width:640px){.form-row{grid-template-columns:repeat(2,1fr)}}.form-field{display:flex;flex-direction:column;gap:.4rem}.required-star{color:#f87171}.form-input-full,.form-select-full,.form-textarea-full{width:100%;background:var(--bg-surface-elevated);border:1px solid var(--border-card);border-radius:var(--radius-md);padding:.75rem 1rem;color:var(--text-primary);font-size:.9375rem;font-family:var(--font-body);transition:all var(--transition-fast);outline:none}.form-input-full:focus,.form-select-full:focus,.form-textarea-full:focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px #6366f133}.form-textarea-full{resize:vertical;min-height:110px}.btn-full{width:100%;padding:.875rem 1.5rem;font-size:1rem;font-weight:700;margin-top:.5rem}.form-status-message{padding:.85rem 1rem;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;line-height:1.5;animation:fadeIn .25s ease forwards}.form-status-message.success{background:var(--success-bg);border:1px solid var(--success-border);color:var(--success-text)}.form-status-message.error{background:#ef444426;border:1px solid #ef4444;color:#f87171}