:root{--color-primary: #f97316;--color-primary-hover: #ea580c;--color-primary-light: #ffedd5;--color-primary-glow: rgba(249, 115, 22, .15);--color-primary-subtle: rgba(249, 115, 22, .06);--color-primary-border: rgba(249, 115, 22, .18);--color-success: #22c55e;--color-info: #3b82f6;--color-warning: #eab308;--color-error: #ef4444;--color-text: #1e293b;--color-text-secondary: #64748b;--color-border: #e2e8f0;--color-background: #ffffff;--color-background-secondary: #f8fafc;--color-disabled: #e5e7eb;--color-disabled-text: #9ca3af;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .03);--shadow-md: 0 4px 16px rgba(0, 0, 0, .06), 0 1px 4px rgba(0, 0, 0, .04);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .04);--shadow-primary: 0 4px 16px rgba(249, 115, 22, .2), 0 1px 4px rgba(249, 115, 22, .1);--shadow-primary-lg: 0 8px 24px rgba(249, 115, 22, .25), 0 2px 8px rgba(0, 0, 0, .08);--border-radius: 12px;--border-radius-sm: 8px;--border-radius-lg: 16px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color:var(--color-text);background-color:var(--color-background);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{width:100%;max-width:720px;margin:0 auto;padding:var(--spacing-lg) var(--spacing-md)}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl)}h1{font-size:1.75rem;font-weight:700;letter-spacing:-.025em;background:linear-gradient(135deg,var(--color-text) 30%,var(--color-primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}h2{font-size:1.125rem;font-weight:700;letter-spacing:-.01em;color:var(--color-text)}.language-switcher{display:flex;gap:2px;background:var(--color-background-secondary);border-radius:var(--border-radius);padding:2px;border:1px solid var(--color-border)}.language-switcher a{background:transparent;border:none;border-radius:calc(var(--border-radius) - 2px);padding:6px 14px;font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .25s ease;color:var(--color-text-secondary);text-decoration:none}.language-switcher a.active{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);color:#fff;box-shadow:var(--shadow-primary);font-weight:600}.language-switcher a:not(.active):hover{color:var(--color-text);background:#0000000a}.sidepanel-layout{display:flex;flex-direction:column;gap:var(--spacing-lg)}@media(min-width:768px){.sidepanel-layout{flex-direction:row;align-items:flex-start}.sidepanel-layout .upload-container,.sidepanel-layout .settings-container{flex:1}.sidepanel-layout .settings-container{margin-bottom:0}}.step-indicator{display:flex;justify-content:space-between;margin-bottom:var(--spacing-xl);position:relative;padding:0 var(--spacing-sm)}.step-indicator:before{content:"";position:absolute;top:50%;left:var(--spacing-sm);right:var(--spacing-sm);height:3px;background:linear-gradient(90deg,var(--color-border) 0%,rgba(249,115,22,.1) 100%);transform:translateY(-50%);z-index:0;border-radius:2px}.step{position:relative;background:linear-gradient(135deg,#ffffff 0%,var(--color-background-secondary) 100%);border:2px solid var(--color-primary-border);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:0;font-weight:700;z-index:1;box-shadow:var(--shadow-sm)}.step.active{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);border-color:var(--color-primary);color:#fff;box-shadow:var(--shadow-primary),0 0 0 4px var(--color-primary-glow)}.step:after{content:attr(data-step);position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:6px;white-space:nowrap;font-size:.6875rem;font-weight:600;color:var(--color-text-secondary);letter-spacing:.02em}.step.active:after{color:var(--color-primary)}.upload-container{border:2px dashed var(--color-primary-border);border-radius:var(--border-radius-lg);padding:var(--spacing-xl) var(--spacing-lg);margin-bottom:var(--spacing-lg);text-align:center;transition:all .3s ease;background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,var(--color-background-secondary) 100%);box-shadow:var(--shadow-sm);position:relative}.upload-container:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,var(--color-primary-subtle) 0%,transparent 60%);border-radius:inherit;pointer-events:none}.upload-container.drag-over{border-color:var(--color-primary);background:linear-gradient(135deg,#ffedd580,#ffffffe6);box-shadow:var(--shadow-primary-lg),inset 0 0 0 1px var(--color-primary-glow);transform:scale(1.01)}.upload-icon{width:52px;height:52px;margin-bottom:var(--spacing-md);color:var(--color-primary);filter:drop-shadow(0 2px 4px rgba(249,115,22,.2))}.upload-prompt p{margin-bottom:var(--spacing-lg);color:var(--color-text-secondary);font-size:.9375rem}.upload-preview{width:100%}.preview-container{margin-bottom:var(--spacing-md)}.svg-container{max-width:100%;max-height:200px;margin-bottom:var(--spacing-md);overflow:hidden;display:flex;justify-content:center;align-items:center;background:repeating-conic-gradient(var(--color-background-secondary) 0% 25%,transparent 0% 50%) 50% / 16px 16px;border-radius:var(--border-radius-sm);padding:var(--spacing-sm)}.svg-container img{max-width:100%;max-height:200px}.file-info{margin-bottom:var(--spacing-md);font-size:.8125rem;color:var(--color-text-secondary);background:var(--color-background-secondary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);border:1px solid rgba(249,115,22,.06)}.file-info p{margin-bottom:2px}.file-info p:last-child{margin-bottom:0}.upload-buttons{display:flex;flex-direction:column;align-items:center;width:100%;gap:var(--spacing-sm)}.upload-buttons .btn{width:100%;max-width:200px}@media(min-width:720px){.upload-buttons{flex-direction:row;justify-content:center;gap:var(--spacing-md)}.upload-buttons .btn{flex:1;min-width:120px;max-width:200px}.upload-separator{width:auto;margin:0}.upload-separator:before,.upload-separator:after{display:none}}.upload-separator{display:flex;align-items:center;justify-content:center;margin:var(--spacing-md) 0;text-align:center;width:100%}.upload-separator:before,.upload-separator:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--color-border),transparent);margin:0 var(--spacing-md)}.upload-separator span{color:var(--color-text-secondary);font-size:.8125rem;font-weight:500;padding:0 var(--spacing-xs)}.paste-container{width:100%;margin-top:var(--spacing-md)}.svg-code-input{width:100%;min-height:120px;padding:var(--spacing-md);margin-bottom:var(--spacing-md);border:1.5px solid var(--color-primary-border);border-radius:var(--border-radius);font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:.8125rem;line-height:1.6;resize:vertical;background:var(--color-background);color:var(--color-text);transition:border-color .25s ease,box-shadow .25s ease}.svg-code-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow)}.paste-container .button-group{display:flex;justify-content:center;gap:var(--spacing-md);width:100%}.paste-container .button-group .btn{flex:1;min-width:120px;max-width:200px}.change-file-btn{width:100%;max-width:200px;margin:0 auto;display:block}.settings-container{margin-bottom:var(--spacing-xl);background:linear-gradient(135deg,rgba(255,255,255,.98) 0%,var(--color-background-secondary) 100%);padding:var(--spacing-lg);border-radius:var(--border-radius-lg);border:1px solid rgba(249,115,22,.08);box-shadow:var(--shadow-sm)}.settings-container h2,.setting-group{margin-bottom:var(--spacing-lg)}.setting-group label{display:block;margin-bottom:6px;font-weight:600;font-size:.8125rem;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em}.select-control{width:100%;padding:10px var(--spacing-md);border:1.5px solid var(--color-primary-border);border-radius:var(--border-radius-sm);background:linear-gradient(135deg,rgba(255,255,255,.9) 0%,var(--color-background-secondary) 100%);font-size:.9375rem;font-weight:500;color:var(--color-text);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;cursor:pointer;box-shadow:var(--shadow-sm);transition:all .25s ease}.select-control:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow),var(--shadow-md)}.select-control:hover{border-color:var(--color-primary)}.slider{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,var(--color-primary-light) 0%,var(--color-border) 100%);border-radius:3px;outline:none;margin-top:var(--spacing-sm)}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);cursor:pointer;border:2.5px solid white;box-shadow:0 2px 8px #f973164d;transition:transform .15s ease,box-shadow .15s ease}.slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 4px 12px #f9731666}.slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);cursor:pointer;border:2.5px solid white;box-shadow:0 2px 8px #f973164d}.quality-value{display:inline-block;margin-left:var(--spacing-sm);font-size:.875rem;font-weight:600;color:var(--color-primary);min-width:36px}.preview-area{margin-bottom:var(--spacing-xl);background:linear-gradient(135deg,rgba(255,255,255,.98) 0%,var(--color-background-secondary) 100%);padding:var(--spacing-lg);border-radius:var(--border-radius-lg);border:1px solid rgba(249,115,22,.08);box-shadow:var(--shadow-md)}.preview-area h2{margin-bottom:var(--spacing-lg)}.image-preview{border:1px solid rgba(249,115,22,.1);border-radius:var(--border-radius);padding:var(--spacing-md);margin-bottom:var(--spacing-lg);display:flex;flex-direction:column;align-items:center;background:repeating-conic-gradient(var(--color-background-secondary) 0% 25%,transparent 0% 50%) 50% / 16px 16px;box-shadow:inset 0 1px 3px #0000000a}.preview-image{max-width:100%;max-height:300px;margin-bottom:var(--spacing-md);border-radius:var(--border-radius-sm);box-shadow:var(--shadow-md)}.image-info{width:100%;font-size:.8125rem;color:var(--color-text-secondary);background:var(--color-background);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);border:1px solid var(--color-border)}.image-info p{margin-bottom:2px}.image-info p:last-child{margin-bottom:0}.button-group{display:flex;gap:var(--spacing-md);justify-content:center;width:100%}.btn{padding:10px var(--spacing-lg);border-radius:var(--border-radius);font-weight:600;font-size:.875rem;cursor:pointer;transition:all .25s ease;border:none;display:inline-flex;align-items:center;justify-content:center;min-width:120px;width:100%;max-width:200px;letter-spacing:.01em}.btn.primary{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);color:#fff;box-shadow:var(--shadow-primary)}.btn.primary:hover{background:linear-gradient(135deg,var(--color-primary-hover) 0%,#d9520a 100%);box-shadow:var(--shadow-primary-lg);transform:translateY(-1px)}.btn.primary:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.btn.primary:disabled{background:var(--color-disabled);color:var(--color-disabled-text);cursor:not-allowed;box-shadow:none;transform:none}.btn.secondary{background:linear-gradient(135deg,#f973160f,#f9731605);border:1.5px solid var(--color-primary-border);color:var(--color-primary);font-weight:600}.btn.secondary:hover{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);color:#fff;border-color:var(--color-primary);box-shadow:var(--shadow-primary);transform:translateY(-1px)}.btn.secondary:active{transform:translateY(0)}.btn.secondary:disabled{border-color:var(--color-disabled);color:var(--color-disabled-text);background:transparent;cursor:not-allowed;box-shadow:none;transform:none}.status-container{margin-top:var(--spacing-lg)}.status-message{font-size:.8125rem;font-weight:500;margin-bottom:var(--spacing-sm);color:var(--color-text-secondary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);border-left:3px solid transparent;min-height:0}.status-message:empty{padding:0;border-left:none}.status-message.success{color:#15803d;background:linear-gradient(135deg,#22c55e14,#22c55e05);border-left-color:var(--color-success)}.status-message.error{color:#b91c1c;background:linear-gradient(135deg,#ef444414,#ef444405);border-left-color:var(--color-error)}.status-message.info{color:#1d4ed8;background:linear-gradient(135deg,#3b82f614,#3b82f605);border-left-color:var(--color-info)}.loading-indicator{display:flex;align-items:center;gap:var(--spacing-sm);font-size:.875rem;font-weight:500;color:var(--color-text-secondary);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-background-secondary);border-radius:var(--border-radius-sm)}.spinner{width:16px;height:16px;border:2px solid var(--color-primary-light);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.faq-section{margin-top:var(--spacing-xl);padding:var(--spacing-lg);background:linear-gradient(135deg,rgba(255,255,255,.98) 0%,var(--color-background-secondary) 100%);border-radius:var(--border-radius-lg);border:1px solid rgba(249,115,22,.08)}.faq-section h2{margin-bottom:var(--spacing-lg)}.faq-section details{border-bottom:1px solid var(--color-border);padding:var(--spacing-md) 0}.faq-section details:last-of-type{border-bottom:none}.faq-section summary{cursor:pointer;font-weight:600;font-size:.9375rem;color:var(--color-text);list-style:none;display:flex;justify-content:space-between;align-items:center}.faq-section summary:after{content:"+";font-size:1.25rem;color:var(--color-primary);transition:transform .2s ease}.faq-section details[open] summary:after{content:"−"}.faq-section details p{margin-top:var(--spacing-sm);color:var(--color-text-secondary);font-size:.875rem;line-height:1.7}.site-footer{margin-top:var(--spacing-xl);padding:var(--spacing-lg) 0;text-align:center;font-size:.8125rem;color:var(--color-text-secondary);border-top:1px solid var(--color-border)}.site-footer a{color:var(--color-primary);text-decoration:none}.site-footer a:hover{text-decoration:underline}@media(max-width:480px){.container{padding:var(--spacing-md) var(--spacing-sm)}h1{font-size:1.375rem}.button-group{flex-direction:column;align-items:center}.button-group .btn{width:100%;max-width:200px}.settings-container,.preview-area{padding:var(--spacing-md)}}@media(min-width:992px){.container{max-width:1200px}.step-indicator{max-width:600px;margin-left:auto;margin-right:auto}.svg-container img,.preview-image{max-height:400px}.button-group{justify-content:flex-start}}@media(min-width:1200px){.container{padding:var(--spacing-xl) var(--spacing-xl)}.sidepanel-layout{gap:var(--spacing-xl)}.svg-container img,.preview-image{max-height:500px}}.header-controls{display:flex;align-items:center;gap:8px}.theme-toggle{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;width:44px;height:44px;background:var(--color-background-secondary);border:1px solid var(--color-border);border-radius:var(--border-radius);cursor:pointer;color:var(--color-text-secondary);transition:all .25s ease;padding:0;font-size:0}.theme-toggle:hover{color:var(--color-primary);border-color:var(--color-primary-border);background:var(--color-primary-subtle)}.theme-toggle svg{width:18px;height:18px;transition:transform .3s ease}.theme-toggle:hover svg{transform:rotate(15deg)}.theme-toggle .icon-sun{display:none}.theme-toggle .icon-moon,[data-theme=dark] .theme-toggle .icon-sun{display:block}[data-theme=dark] .theme-toggle .icon-moon{display:none}.github-link{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;width:44px;height:44px;background:var(--color-background-secondary);border:1px solid var(--color-border);border-radius:var(--border-radius);color:var(--color-text-secondary);text-decoration:none;transition:all .25s ease}.github-link:hover{color:var(--color-primary);border-color:var(--color-primary-border);background:var(--color-primary-subtle)}.github-link svg{width:18px;height:18px}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--color-text: #f1f5f9;--color-text-secondary: #94a3b8;--color-border: #334155;--color-background: #0f172a;--color-background-secondary: #1e293b;--color-disabled: #334155;--color-disabled-text: #64748b;--color-primary-border: rgba(249, 115, 22, .25);--color-primary-subtle: rgba(249, 115, 22, .08);--color-primary-glow: rgba(249, 115, 22, .2);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .1);--shadow-md: 0 4px 16px rgba(0, 0, 0, .2), 0 1px 4px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .25), 0 2px 8px rgba(0, 0, 0, .15)}}[data-theme=dark]{--color-text: #f1f5f9;--color-text-secondary: #94a3b8;--color-border: #334155;--color-background: #0f172a;--color-background-secondary: #1e293b;--color-disabled: #334155;--color-disabled-text: #64748b;--color-primary-border: rgba(249, 115, 22, .25);--color-primary-subtle: rgba(249, 115, 22, .08);--color-primary-glow: rgba(249, 115, 22, .2);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .1);--shadow-md: 0 4px 16px rgba(0, 0, 0, .2), 0 1px 4px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .25), 0 2px 8px rgba(0, 0, 0, .15)}:is([data-theme=dark],:root:not([data-theme=light])) h1{background:linear-gradient(135deg,#f1f5f9 30%,var(--color-primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}:is([data-theme=dark],:root:not([data-theme=light])) :is(.upload-container,.settings-container,.preview-area,.faq-section){background:linear-gradient(135deg,#1e293be6,#0f172af2)}:is([data-theme=dark],:root:not([data-theme=light])) .select-control{background:linear-gradient(135deg,#1e293bcc,#0f172ae6);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}:is([data-theme=dark],:root:not([data-theme=light])) :is(.file-info,.loading-indicator,.language-switcher,.theme-toggle,.github-link,.svg-code-input,.image-info){background:#1e293b99;border-color:var(--color-border)}:is([data-theme=dark],:root:not([data-theme=light])) .svg-code-input{color:var(--color-text)}:is([data-theme=dark],:root:not([data-theme=light])) :is(.image-preview,.svg-container){background:repeating-conic-gradient(rgba(30,41,59,.5) 0% 25%,transparent 0% 50%) 50% / 16px 16px}:is([data-theme=dark],:root:not([data-theme=light])) .language-switcher a:not(.active):hover{background:#ffffff0f}:is([data-theme=dark],:root:not([data-theme=light])) .status-message.success{color:#4ade80;background:linear-gradient(135deg,#22c55e1f,#22c55e0a)}:is([data-theme=dark],:root:not([data-theme=light])) .status-message.error{color:#f87171;background:linear-gradient(135deg,#ef44441f,#ef44440a)}:is([data-theme=dark],:root:not([data-theme=light])) .status-message.info{color:#60a5fa;background:linear-gradient(135deg,#3b82f61f,#3b82f60a)}:root{--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-out-back: cubic-bezier(.34, 1.3, .64, 1);--ease-smooth: cubic-bezier(.4, 0, .2, 1);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55)}.animate-entry{opacity:0;transform:translateY(24px);animation:entrySlideUp .6s var(--ease-out-back) forwards;animation-delay:calc(var(--entry-order, 0) * .1s + .15s)}@keyframes entrySlideUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.step{transition:all .35s var(--ease-spring)}.step.active{transform:scale(1.1)}.step.completed{background:linear-gradient(135deg,var(--color-success) 0%,#16a34a 100%);border-color:var(--color-success);color:#fff;box-shadow:0 2px 8px #22c55e40}.step.step-bounce{animation:stepBounce .5s var(--ease-spring)}@keyframes stepBounce{0%{transform:scale(1)}40%{transform:scale(1.3)}70%{transform:scale(1.05)}to{transform:scale(1.12)}}.step.completed:before{content:"✓";position:absolute;font-size:.75rem;font-weight:700;animation:checkDraw .3s var(--ease-smooth) forwards}@keyframes checkDraw{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.step-indicator:after{content:"";position:absolute;top:50%;left:var(--spacing-sm);width:var(--progress, 0%);height:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-primary-hover));transform:translateY(-50%);z-index:0;transition:width .5s var(--ease-smooth);border-radius:2px}.upload-container.drag-over{border-color:var(--color-primary);background:linear-gradient(135deg,#ffedd580,#ffffffe6);transform:scale(1.02);box-shadow:var(--shadow-primary-lg),inset 0 0 0 1px var(--color-primary-glow)}.upload-container.drop-ripple{animation:dropRipple .6s var(--ease-smooth)}@keyframes dropRipple{0%{box-shadow:0 0 #f9731666}70%{box-shadow:0 0 0 16px #f9731600}to{box-shadow:0 0 #f9731600}}.upload-icon{transition:transform .3s var(--ease-spring)}.upload-container:hover .upload-icon{transform:translateY(-4px) scale(1.08)}.paste-container.paste-slide-in{animation:pasteSlideIn .35s var(--ease-out-back) forwards}@keyframes pasteSlideIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.preview-container.reveal-active,.preview-area.reveal-active{animation:revealFadeIn .8s var(--ease-smooth) forwards}.preview-area.reveal-active .image-preview{animation:previewReveal .9s var(--ease-smooth) forwards}.preview-area.reveal-active .preview-image{animation:imageReveal 1s var(--ease-smooth) .1s both}@keyframes revealFadeIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes previewReveal{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes imageReveal{0%{filter:blur(12px) saturate(.3);opacity:0;clip-path:inset(0 0 100% 0)}40%{filter:blur(6px) saturate(.7);opacity:.7;clip-path:inset(0 0 40% 0)}to{filter:blur(0) saturate(1);opacity:1;clip-path:inset(0 0 0% 0)}}.btn{position:relative;overflow:hidden;transition:all .2s var(--ease-smooth)}.btn:active:not(:disabled){transform:scale(.96)}.btn.primary:hover:not(:disabled){box-shadow:var(--shadow-primary-lg)}.btn.secondary:hover:not(:disabled){box-shadow:var(--shadow-primary)}.btn:disabled{transition:all .3s var(--ease-smooth)}.btn-ripple{position:absolute;border-radius:50%;background:#ffffff59;transform:scale(0);animation:rippleExpand .5s ease-out forwards;pointer-events:none}@keyframes rippleExpand{to{transform:scale(2.5);opacity:0}}.btn.btn-success-flash{animation:successFlash 1.2s var(--ease-smooth)}@keyframes successFlash{0%{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%)}20%{background:linear-gradient(135deg,var(--color-success) 0%,#16a34a 100%);box-shadow:0 4px 16px #22c55e66}80%{background:linear-gradient(135deg,var(--color-success) 0%,#16a34a 100%)}to{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%)}}.btn.secondary.btn-success-flash{animation:successFlashSecondary 1.2s var(--ease-smooth)}@keyframes successFlashSecondary{0%{border-color:var(--color-primary-border);color:var(--color-primary)}20%{border-color:var(--color-success);color:#fff;background:linear-gradient(135deg,var(--color-success) 0%,#16a34a 100%);box-shadow:0 4px 16px #22c55e4d}80%{border-color:var(--color-success);color:#fff;background:linear-gradient(135deg,var(--color-success) 0%,#16a34a 100%)}to{border-color:var(--color-primary-border);color:var(--color-primary);background:linear-gradient(135deg,#f973160f,#f9731605)}}.select-control{transition:border-color .25s var(--ease-smooth),box-shadow .25s var(--ease-smooth)}.select-control:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #f9731626;outline:none}.slider{transition:opacity .2s}.slider::-webkit-slider-thumb{transition:transform .15s var(--ease-spring),box-shadow .15s}.slider:active::-webkit-slider-thumb{transform:scale(1.3);box-shadow:0 0 0 4px #f9731633}.quality-value{transition:transform .15s var(--ease-spring),color .2s}.slider:active~.quality-value{transform:scale(1.15);color:var(--color-primary);font-weight:600}.setting-group{transition:opacity .3s var(--ease-smooth),transform .3s var(--ease-smooth)}.quality-container:not([hidden]){animation:settingReveal .35s var(--ease-out-back) forwards}@keyframes settingReveal{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.status-message.status-slide-in{animation:statusSlideIn .35s var(--ease-out-back) forwards}.status-message.status-slide-out{animation:statusSlideOut .3s var(--ease-smooth) forwards}@keyframes statusSlideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes statusSlideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}.status-message.success.status-slide-in{animation:statusSuccess .5s var(--ease-spring) forwards}@keyframes statusSuccess{0%{opacity:0;transform:translateY(8px) scale(.95)}60%{transform:translateY(-2px) scale(1.02)}to{opacity:1;transform:translateY(0) scale(1)}}.status-message.error.status-slide-in{animation:statusError .5s var(--ease-smooth) forwards}@keyframes statusError{0%{opacity:0;transform:translate(0)}20%{opacity:1;transform:translate(-6px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}to{transform:translate(0)}}body{background:linear-gradient(135deg,#f9731608,#fff 40%,#3b82f605);background-size:200% 200%;animation:bgBreathe 12s ease-in-out 1 alternate}@keyframes bgBreathe{0%{background-position:0% 0%}to{background-position:100% 100%}}.mouse-glow{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0;transition:opacity .4s;background:radial-gradient(600px circle at var(--glow-x, 50%) var(--glow-y, 50%),rgba(249,115,22,.04) 0%,transparent 60%)}@media(hover:none){.mouse-glow{display:none}}.language-switcher a{transition:all .25s var(--ease-spring)}.language-switcher a.active{transform:scale(1.05);box-shadow:0 2px 8px #f973164d}.language-switcher a:active{transform:scale(.95)}.upload-container{transition:all .3s var(--ease-smooth)}.upload-container:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md),0 0 0 1px var(--color-primary-subtle)}.settings-container,.image-preview{transition:box-shadow .3s var(--ease-smooth)}.image-preview:hover{box-shadow:var(--shadow-lg)}.loading-indicator:not([hidden]){animation:loaderFadeIn .3s var(--ease-smooth) forwards}@keyframes loaderFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.mouse-glow{display:none}body{animation:none}}@media(prefers-color-scheme:dark){body:not([data-theme=light] body){background:linear-gradient(135deg,#f973160f,#0f172a 40%,#3b82f60a);background-size:200% 200%}:root:not([data-theme=light]) .mouse-glow{background:radial-gradient(600px circle at var(--glow-x, 50%) var(--glow-y, 50%),rgba(249,115,22,.07) 0%,transparent 60%)}:root:not([data-theme=light]) .btn-ripple{background:#ffffff1f}:root:not([data-theme=light]) .step.active{box-shadow:var(--shadow-primary),0 0 0 4px var(--color-primary-glow)}:root:not([data-theme=light]) .upload-container.drag-over{background:linear-gradient(135deg,#f973161a,#1e293be6)}:root:not([data-theme=light]) .upload-container:hover{box-shadow:var(--shadow-md),0 0 0 1px #f973161a}}[data-theme=dark] body{background:linear-gradient(135deg,#f973160f,#0f172a 40%,#3b82f60a);background-size:200% 200%}[data-theme=dark] .mouse-glow{background:radial-gradient(600px circle at var(--glow-x, 50%) var(--glow-y, 50%),rgba(249,115,22,.07) 0%,transparent 60%)}[data-theme=dark] .btn-ripple{background:#ffffff1f}[data-theme=dark] .step.active{box-shadow:var(--shadow-primary),0 0 0 4px var(--color-primary-glow)}[data-theme=dark] .upload-container.drag-over{background:linear-gradient(135deg,#f973161a,#1e293be6)}[data-theme=dark] .upload-container:hover{box-shadow:var(--shadow-md),0 0 0 1px #f973161a}