:root{--bg:#f6f7fb;--surface:#fff;--text:#1b1d24;--muted:#646a7a;--border:#dde0ea;--accent:#4f5bd5;--accent-text:#fff;--error:#c62828;--radius:14px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#111318;--surface:#1a1d24;--text:#e9ebf2;--muted:#9aa0b0;--border:#2c303b;--accent:#7d87f0;--accent-text:#0e1020;--error:#ff7b7b;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,-apple-system,Segoe UI,Malgun Gothic,Apple SD Gothic Neo,sans-serif;line-height:1.5}.wrap{max-width:880px;margin:0 auto;padding:32px 16px 48px}.muted{color:var(--muted);font-size:.9rem}a{color:var(--accent)}.hero{text-align:center;margin-bottom:24px}.hero h1{margin:0 0 4px;font-size:clamp(1.6rem,4vw,2.2rem)}.hero p{color:var(--muted);margin:0}.badges{flex-wrap:wrap;justify-content:center;gap:8px;margin:14px 0 0;padding:0;list-style:none;display:flex}.badges li{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:4px 10px;font-size:.82rem}.dropzone{border:2px dashed var(--border);border-radius:var(--radius);background:var(--surface);text-align:center;cursor:pointer;justify-content:center;align-items:center;min-height:220px;padding:16px;transition:border-color .15s,background .15s;display:flex}.dropzone:hover,.dropzone.over,.dropzone:focus-visible{border-color:var(--accent);outline:none}.dropzone.disabled{cursor:default;opacity:.7}.dropzone span{flex-direction:column;gap:4px;display:flex}.dropzone small{color:var(--muted)}.dropzone img{border-radius:8px;max-width:100%;max-height:320px}.options{flex-wrap:wrap;align-items:center;gap:12px 24px;margin:20px 0 8px;display:flex}fieldset{border:0;flex-wrap:wrap;align-items:center;gap:14px;margin:0;padding:0;display:flex}legend{float:left;margin-right:6px;font-weight:600}fieldset label{cursor:pointer;align-items:center;gap:6px;display:inline-flex}#size-info{flex-basis:100%;margin:0}.actions{gap:10px;margin:16px 0;display:flex}button,.button{font:inherit;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:10px;padding:10px 20px;text-decoration:none;display:inline-block}.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600}button:disabled{opacity:.5;cursor:not-allowed}.progress .bar{background:var(--border);border-radius:999px;height:8px;overflow:hidden}#bar-fill{background:var(--accent);width:0;height:100%;transition:width .2s}.progress p{flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 0;display:flex}.chip{border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:2px 8px;font-size:.78rem}.error{color:var(--error)}#result{margin-top:20px}.compare{border-radius:var(--radius);background:repeating-conic-gradient(var(--border) 0 25%, var(--surface) 0 50%) 0 0 / 20px 20px;cursor:ew-resize;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;max-height:75vh;margin:0 auto;position:relative;overflow:hidden}.compare:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.compare img{object-fit:contain;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.compare-handle{pointer-events:none;background:#fff;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0;box-shadow:0 0 0 1px #0000004d}.compare-handle:after{content:"⇔";color:#222;background:#fff;border-radius:50%;place-items:center;width:34px;height:34px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 1px 4px #00000059}.tag{color:#fff;pointer-events:none;background:#0000008c;border-radius:6px;padding:2px 8px;font-size:.78rem;position:absolute;top:10px}.tag.left{left:10px}.tag.right{right:10px}.result-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;display:flex}.result-bar p{margin:0}footer{text-align:center;margin-top:40px}