:root{--bg:#f7f8fa;--panel:#fff;--border:#e5e7eb;--border-strong:#d1d5db;--text:#111827;--muted:#6b7280;--accent:#4f46e5;--accent-hover:#4338ca;--accent-soft:#eef2ff;--error:#dc2626;--success:#16a34a;--radius:14px;--shadow:0 1px 2px #1018280a, 0 1px 3px #1018280f;--shadow-md:0 4px 8px #1018280a, 0 2px 4px #1018280f}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,sans-serif}header.topbar{border-bottom:1px solid var(--border);background:var(--panel)}.topbar-inner{align-items:center;gap:.6rem;max-width:760px;margin:0 auto;padding:1.1rem 1.5rem;display:flex}.brand-mark{background:var(--accent);border-radius:7px;flex-shrink:0;width:26px;height:26px}.brand-name{letter-spacing:-.01em;font-size:1.05rem;font-weight:700}main{max-width:760px;margin:0 auto;padding:3.5rem 1.5rem 5rem}h1{letter-spacing:-.02em;margin:0 0 .4rem;font-size:2rem;font-weight:700}p.subtitle{color:var(--muted);margin:0 0 2.25rem;font-size:1.05rem}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.75rem}.dropzone{border:1.5px dashed var(--border-strong);border-radius:var(--radius);text-align:center;cursor:pointer;background:var(--bg);padding:3rem 1.5rem;transition:border-color .15s,background .15s}.dropzone:hover,.dropzone.dragging{border-color:var(--accent);background:var(--accent-soft)}.dropzone input{display:none}.dropzone .hint{color:var(--muted);margin-top:.4rem;font-size:.85rem;display:block}.mode-choice{gap:.75rem;margin:1.5rem 0;display:flex}.mode-option{border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;text-align:left;background:var(--panel);color:var(--text);font:inherit;flex:1;padding:1rem 1.1rem;transition:border-color .15s,background .15s}.mode-option:hover{border-color:var(--border-strong)}.mode-option.selected{border-color:var(--accent);background:var(--accent-soft)}.mode-option strong{margin-bottom:.2rem;font-size:.95rem;display:block}.mode-option span{color:var(--muted);font-size:.83rem}button.primary{background:var(--accent);color:#fff;border-radius:var(--radius);cursor:pointer;width:100%;box-shadow:var(--shadow-md);border:none;padding:.85rem;font-size:.98rem;font-weight:600;transition:background .15s}button.primary:hover:not(:disabled){background:var(--accent-hover)}button.primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.error-msg{color:var(--error);margin-top:1rem;font-size:.9rem}.preview-frame{margin-bottom:1.5rem}.status-line{color:var(--muted);align-items:center;gap:.6rem;margin-bottom:1rem;font-size:.95rem;display:flex}.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:15px;height:15px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}a.download-link{text-align:center;background:var(--success);color:#fff;border-radius:var(--radius);box-shadow:var(--shadow-md);padding:.85rem;font-weight:600;text-decoration:none;display:block}.compare-slider{border-radius:var(--radius);border:1px solid var(--border);cursor:ew-resize;-webkit-user-select:none;user-select:none;background:#fff;position:relative;overflow:hidden}.compare-img{width:100%;height:auto;display:block}.compare-before{width:100%;height:100%;position:absolute;inset:0}.compare-handle{pointer-events:none;background:#fff;width:2px;position:absolute;top:0;bottom:0;transform:translate(-1px);box-shadow:0 0 0 1px #00000026}.compare-handle:after{content:"";border:1px solid var(--border);width:34px;height:34px;box-shadow:var(--shadow-md);background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.compare-label{color:#fff;pointer-events:none;background:#111827a6;border-radius:999px;padding:.25rem .6rem;font-size:.75rem;font-weight:600;transition:opacity .15s;position:absolute;bottom:.75rem}.compare-label-left{left:.75rem}.compare-label-right{right:.75rem}.loupe-container{border-radius:var(--radius);border:1px solid var(--border);cursor:crosshair;background:#fff;position:relative;overflow:hidden}.loupe-base{pointer-events:none;width:100%;height:auto;display:block}.loupe-lens{box-shadow:var(--shadow-md), 0 0 0 1px var(--border);pointer-events:none;border:3px solid #fff;border-radius:50%;position:absolute;overflow:hidden}.loupe-zoomed{position:absolute}.loupe-layer{width:100%;height:100%;display:block;position:absolute;inset:0}.loupe-hint{text-align:center;color:var(--muted);margin:.6rem 0 0;font-size:.82rem}