*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f5f5f0;--surface:#fff;--sunken:#eaeae4;--text:#1a1a1a;--text2:#6b6b6b;--text3:#a0a09a;--border:#d8d8d0;--border-s:#b8b8b0;--green:#1a7f37;--green-bg:#dafbe1;--red:#dc2626;--red-bg:#fee2e2;--orange:#ea580c;--orange-bg:#fff7ed;--mono:"JetBrains Mono",monospace;--sans:"DM Sans",system-ui,sans-serif;--r:8px;--r2:12px}body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh}.wrap{margin:0 auto;max-width:888px;padding:48px 20px 40px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden}.drop{cursor:pointer;padding:52px 32px;text-align:center;transition:background .15s}.drop:hover{background:#fafaf6}.drop.over{background:var(--accent-bg)}.drop.mini{border-top:1px solid var(--border);padding:18px 24px}.drop-ring{align-items:center;border:2px dashed var(--border-s);border-radius:50%;display:flex;height:56px;justify-content:center;margin:0 auto 16px;transition:all .15s;width:56px}.drop:hover .drop-ring{border-color:var(--accent);transform:scale(1.05)}.drop.over .drop-ring{border-color:var(--accent);border-style:solid;transform:scale(1.1)}.drop.mini .drop-ring{display:none}.drop-ring svg{fill:none;height:22px;stroke:var(--text2);stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:22px}.drop-text{font-size:15px;margin-bottom:6px}.drop.mini .drop-text{color:var(--text2);font-size:13px;margin:0}.drop-text strong{color:var(--accent);cursor:pointer;font-weight:600;text-decoration:underline;text-underline-offset:3px}.drop-hint{color:var(--text3);font-family:var(--mono);font-size:11px}.drop.mini .drop-hint{display:none}.drop-hint kbd{background:var(--sunken);border:1px solid var(--border);border-radius:3px;font-family:var(--mono);font-size:10px;padding:1px 5px}.drop-fmts{color:var(--text3);font-size:11px;margin-top:4px}.btn,.drop-fmts{font-family:var(--mono)}.btn{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);color:var(--text2);cursor:pointer;font-size:12px;font-weight:600;padding:7px 16px;transition:all .12s;white-space:nowrap}.btn:hover{border-color:var(--border-s);color:var(--text)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-h);border-color:var(--accent-h)}.btn-primary.done{background:var(--green);border-color:var(--green)}.btn-primary:disabled{cursor:not-allowed;opacity:.6}.xbtn{background:var(--accent);border:none;border-radius:var(--r);color:#fff;cursor:pointer;font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:-.2px;margin-top:6px;padding:14px;transition:all .12s;width:100%}.xbtn:hover{background:var(--accent-h);transform:translateY(-1px)}.xbtn:active{transform:translateY(0)}.xbtn.ok{background:var(--green)}.toggle{display:flex;gap:6px}.toggle button{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);color:var(--text2);cursor:pointer;flex:1;font-family:var(--mono);font-size:13px;font-weight:600;padding:10px 0;text-align:center;transition:all .12s}.toggle button:hover{border-color:var(--text3);color:var(--text)}.toggle button.on{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}.toggle button .sub{color:var(--text3);display:block;font-size:10px;font-weight:400;margin-top:1px}.toggle button.on .sub{color:var(--accent);opacity:.7}.sgrid{display:grid;gap:6px;grid-template-columns:repeat(4,1fr)}.sgrid button{padding:8px 4px}.og{margin-bottom:18px}.ol{color:var(--text2);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.8px;margin-bottom:8px;text-transform:uppercase}.qrow{align-items:center;display:flex;gap:12px}.qrow input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--sunken);border-radius:3px;flex:1;height:6px;outline:none}.qrow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);border:3px solid var(--surface);border-radius:50%;box-shadow:0 1px 3px #00000026;cursor:pointer;height:18px;width:18px}.qval{color:var(--accent);font-size:13px;font-weight:600;min-width:36px;text-align:right}.qval,.tag{font-family:var(--mono)}.tag{border-radius:3px;font-size:9px;font-weight:700;letter-spacing:.3px;padding:2px 6px;text-transform:uppercase}.tag-png{background:var(--green-bg);color:var(--green)}.tag-jpeg,.tag-jpg{background:#eff4ff;color:#2563eb}.tag-webp{background:var(--orange-bg);color:var(--orange)}.tag-avif{background:#f0f9ff;color:#0891b2}.tag-gif{color:#a21caf}.tag-gif,.tag-jxl{background:#fdf4ff}.tag-jxl{color:#7c3aed}.tag-bmp,.tag-ico,.tag-svg,.tag-tif,.tag-tiff{background:var(--sunken);color:var(--text2)}.toolbar{background:#fafaf8;border-bottom:1px solid var(--border);flex-wrap:wrap;padding:14px 20px}.toolbar,.toolbar-left{align-items:center;display:flex;gap:8px}.toolbar-left{flex:1;min-width:200px}.toolbar .label{color:var(--text3);font-family:var(--mono);font-size:11px;letter-spacing:.8px;text-transform:uppercase}.toolbar select{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);color:var(--text);cursor:pointer;font-family:var(--mono);font-size:12px;font-weight:500;outline:none;padding:5px 10px}.toolbar select:hover{border-color:var(--accent)}.toolbar-right{display:flex;gap:6px}.qbar{align-items:center;background:#fafaf8;border-bottom:1px solid var(--border);display:none;gap:10px;padding:10px 20px}.qbar.on{display:flex}.qbar .label{color:var(--text3);font-family:var(--mono);font-size:11px;letter-spacing:.8px;text-transform:uppercase;white-space:nowrap}.qbar input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--sunken);border-radius:3px;flex:1;height:5px;outline:none}.qbar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);border:2.5px solid var(--surface);border-radius:50%;box-shadow:0 1px 3px #00000026;cursor:pointer;height:16px;width:16px}.qbar .qval{color:var(--accent);font-family:var(--mono);font-size:12px;font-weight:600;min-width:32px;text-align:right}.flist{max-height:420px;overflow-y:auto}.fitem{align-items:center;animation:fadeIn .25s ease both;border-bottom:1px solid var(--sunken);display:grid;gap:12px;grid-template-columns:48px 1fr auto auto;padding:10px 20px;transition:background .1s}.fitem:last-child{border-bottom:none}.fitem:hover{background:#fafaf8}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.fthumb{align-items:center;background:repeating-conic-gradient(#e8e8e3 0 25%,#f3f3ee 0 50%) 50% /8px 8px;border:1px solid var(--border);border-radius:4px;display:flex;height:38px;justify-content:center;overflow:hidden;width:48px}.fthumb img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.finfo{min-width:0}.fname{font-family:var(--mono);font-size:12px;font-weight:500;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fmeta{align-items:center;display:flex;flex-wrap:wrap;gap:6px}.fmeta span{font-size:10px}.fmeta span,.fstatus{color:var(--text3);font-family:var(--mono)}.fstatus{font-size:11px;white-space:nowrap}.fstatus.ok{color:var(--green);font-weight:600}.fstatus.err{color:var(--red)}.fstatus.working{color:var(--accent)}.fmeta .arrow{color:var(--text3);font-size:11px;margin:0 2px}.fmeta .sz-smaller{color:var(--green);font-weight:600}.fmeta .sz-larger{color:var(--red);font-weight:600}.savings{border-radius:3px;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.2px;padding:1px 5px}.savings-good{background:var(--green-bg);color:var(--green)}.savings-bad{background:var(--red-bg);color:var(--red)}.fremove{align-items:center;background:none;border:none;border-radius:4px;color:var(--text3);cursor:pointer;display:flex;font-size:15px;height:26px;justify-content:center;transition:all .12s;width:26px}.fremove:hover{background:var(--red-bg);color:var(--red)}.preview{align-items:center;background:repeating-conic-gradient(#e8e8e3 0 25%,#f3f3ee 0 50%) 50% /16px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:center;max-height:300px;min-height:180px;overflow:hidden;position:relative}.preview :deep(svg),.preview img{display:block;max-height:260px;max-width:88%}.preview .badge{border:1px solid var(--border);border-radius:4px;font-family:var(--mono);font-size:10px;font-weight:600;left:10px;padding:3px 8px}.preview .badge,.preview .close{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffffeb;color:var(--text2);position:absolute;top:10px}.preview .close{align-items:center;border:1px solid var(--border);border-radius:6px;cursor:pointer;display:flex;font-size:15px;height:28px;justify-content:center;right:10px;transition:all .15s;width:28px}.preview .close:hover{background:#fee2e2;border-color:#fca5a5;color:#dc2626}.csz{align-items:center;display:none;gap:6px;margin-top:8px}.csz.on{display:flex}.csz input{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);color:var(--text);font-family:var(--mono);font-size:13px;outline:none;padding:7px 10px;text-align:center;transition:border-color .15s;width:90px}.csz input:focus{border-color:var(--accent)}.csz .x{color:var(--text3);font-family:var(--mono);font-size:12px}.csz .lock{align-items:center;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);color:var(--text3);cursor:pointer;display:flex;height:32px;justify-content:center;transition:all .12s;width:32px}.csz .lock.on{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}.csz .lock svg{fill:none;height:14px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:14px}.config{padding:20px 24px 24px}.fname-bar{align-items:center;color:var(--text2);display:flex;font-family:var(--mono);font-size:12px;gap:8px;margin-bottom:20px}.fname-bar .n{color:var(--text);font-weight:500}.wasm-badge{align-items:center;background:var(--accent-bg);border-radius:4px;color:var(--accent);display:none;font-family:var(--mono);font-size:10px;gap:4px;margin:10px auto 0;padding:3px 8px;width:-moz-fit-content;width:fit-content}.wasm-badge.on{display:flex}.wasm-badge .dot{animation:pulse 1.5s infinite;background:var(--accent);border-radius:50%;height:6px;width:6px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.loading{color:var(--text3);font-family:var(--mono);font-size:13px;padding:48px;text-align:center}.content{margin:48px auto 0;max-width:888px;padding:0 20px}.content h2{color:var(--text);font-family:var(--mono);font-size:17px;font-weight:700;letter-spacing:-.3px;margin:36px 0 12px}.content h2:first-child{margin-top:0}.content p{color:var(--text2);font-size:15px;line-height:1.7;margin-bottom:12px}.content strong{color:var(--text);font-weight:600}.steps{counter-reset:step;margin:12px 0 16px}.step{align-items:flex-start;counter-increment:step;display:flex;gap:14px;margin-bottom:14px}.step:before{align-items:center;background:var(--accent-bg);border-radius:50%;color:var(--accent);content:counter(step);display:flex;flex-shrink:0;font-family:var(--mono);font-size:13px;font-weight:700;height:28px;justify-content:center;width:28px}.step p{color:var(--text2);font-size:14px;line-height:1.6;margin:0}.step p strong{color:var(--text)}.cmp{border-collapse:collapse;font-family:var(--mono);font-size:13px;margin:12px 0 16px;width:100%}.cmp th{border-bottom:2px solid var(--border);color:var(--text);font-size:11px;font-weight:600;letter-spacing:.5px;text-align:left;text-transform:uppercase}.cmp td,.cmp th{padding:8px 10px}.cmp td{border-bottom:1px solid var(--sunken);color:var(--text2)}.cmp tr:last-child td{border-bottom:none}.cmp .y{color:var(--green);font-weight:600}.cmp .n{color:#dc2626;font-weight:600}.faq{margin-top:12px}.faq details{border-bottom:1px solid var(--border);padding:14px 0}.faq summary{align-items:center;color:var(--text);cursor:pointer;display:flex;font-size:15px;font-weight:600;justify-content:space-between;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary:after{color:var(--text3);content:"+";font-family:var(--mono);font-size:18px}.faq details[open] summary:after{content:"−"}.faq details p{color:var(--text2);font-size:14px;line-height:1.7;margin-top:10px}.code-block{background:#1a1a1a;border-radius:var(--r);color:#e0e0e0;font-family:var(--mono);font-size:12px;line-height:1.7;margin:12px 0 16px;overflow-x:auto;padding:16px 20px;white-space:pre}.content code{background:var(--sunken);border-radius:3px;color:var(--text);font-family:var(--mono);font-size:13px;padding:2px 6px}.app-footer{border-top:1px solid var(--border);color:var(--text3);font-family:var(--mono);font-size:11px;margin:48px auto 0;max-width:888px;padding:20px;text-align:center}.app-footer a{color:var(--accent);text-decoration:none}.hidden{display:none}@media(max-width:520px){.fitem{gap:8px;grid-template-columns:40px 1fr auto}.fstatus{display:none}.toolbar{align-items:stretch;flex-direction:column}.toolbar-right{justify-content:flex-end}.sgrid{grid-template-columns:repeat(3,1fr)}.wrap{padding:32px 16px 40px}}