*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f0f13;--surface:#1a1a24;--border:#2a2a3a;--accent:#f5a623;--accent-hover:#fbbf24;--text:#e8e8ef;--text-muted:#889;--radius:12px;--max-width:900px}body{background:var(--bg);color:var(--text);flex-direction:column;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;display:flex}header{text-align:center;padding:2.5rem 1rem 1rem}header h1{letter-spacing:-.02em;font-size:1.8rem;font-weight:700}.tagline{color:var(--text-muted);margin-top:.4rem;font-size:.95rem}main{max-width:var(--max-width);flex:1;width:100%;margin:0 auto;padding:1.5rem 1.25rem}.drop-zone{border:2px dashed var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:.6rem;min-height:300px;padding:3rem 2rem;transition:border-color .2s,background .2s;display:flex}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent);background:#f5a6230f}.upload-icon{color:var(--text-muted);margin-bottom:.5rem}.drop-text{color:var(--text);font-size:1.1rem}.drop-or{color:var(--text-muted);font-size:.85rem}.formats{color:var(--text-muted);margin-top:.5rem;font-size:.8rem}button{cursor:pointer;border:none;font-family:inherit;font-size:.95rem}#choose-btn{background:var(--accent);color:#fff;border-radius:50px;padding:.65rem 1.8rem;font-weight:500;transition:background .2s,transform .1s}#choose-btn:hover{background:var(--accent-hover)}#choose-btn:active{transform:scale(.97)}#download-btn{background:var(--accent);color:#fff;border-radius:50px;padding:.75rem 2rem;font-weight:600;transition:background .2s,transform .1s}#download-btn:hover{background:var(--accent-hover)}#download-btn:active{transform:scale(.97)}.btn-outline{color:var(--text);border:1.5px solid var(--border);background:0 0;border-radius:50px;padding:.7rem 1.6rem;font-weight:500;transition:border-color .2s,background .2s}.btn-outline:hover{border-color:var(--text-muted);background:#ffffff0a}#progress-container{text-align:center;padding:3rem 0}#progress-bar-track{background:var(--surface);border-radius:50px;max-width:400px;height:8px;margin:0 auto;overflow:hidden}#progress-bar{background:var(--accent);border-radius:50px;width:0%;height:100%;transition:width .3s}#progress-text{color:var(--text-muted);margin-top:1rem;font-size:.9rem}#comparison-container{margin-top:1rem}#image-wrapper{border-radius:var(--radius);cursor:ew-resize;-webkit-user-select:none;user-select:none;background:#1a1a1a;position:relative;overflow:hidden}#original-image{width:100%;height:auto;display:block}#result-overlay{clip-path:inset(0 50% 0 0);background-color:#222;background-image:linear-gradient(45deg,#333 25%,#0000 25%),linear-gradient(-45deg,#333 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#333 75%),linear-gradient(-45deg,#0000 75%,#333 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:20px 20px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;width:100%;height:100%;position:absolute;top:0;left:0}#result-image{object-fit:cover;width:100%;height:100%;display:block}#slider-handle{pointer-events:none;z-index:10;flex-direction:column;justify-content:center;align-items:center;width:4px;height:100%;display:flex;position:absolute;top:0;left:50%;transform:translate(-50%)}.slider-line{opacity:.8;background:#fff;flex:1;width:2px}.slider-grip{pointer-events:auto;background:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex;box-shadow:0 2px 8px #0006}.slider-grip:before{content:"‹ ›";color:#333;font-size:1.1rem;font-weight:700}.labels{color:var(--text-muted);justify-content:space-between;padding:.6rem .2rem;font-size:.8rem;display:flex}#actions{flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1.5rem;display:flex}#error-container{text-align:center;padding:2rem 0}#error-text{color:#e74c3c;margin-bottom:1rem}footer{text-align:center;color:var(--text-muted);padding:2rem 1rem;font-size:.82rem}.footer-note{margin-top:.3rem}.copyright{margin-top:.5rem}footer a{color:var(--text-muted);text-underline-offset:2px;text-decoration:underline}footer a:hover{color:var(--text)}.hidden{display:none!important}@media (width<=640px){header{padding:1.5rem 1rem .5rem}header h1{font-size:1.4rem}.drop-zone{min-height:220px;padding:2rem 1.5rem}#actions{flex-direction:column;align-items:stretch}#actions button{width:100%}}
