:root{--bg: #f6f6f3;--surface: #ffffff;--text: #1c1c1a;--muted: #6b6b66;--border: #e2e2dc;--accent: #1f7a4d;--accent-soft: #e3f2ea;--warn: #9a5b00;--warn-soft: #fbf0dc;--pane: #e9e9e4;color-scheme:light}@media (prefers-color-scheme: dark){:root{--bg: #161615;--surface: #1f1f1d;--text: #ecece7;--muted: #9d9d96;--border: #33332f;--accent: #4cc38a;--accent-soft: #183526;--warn: #f0b860;--warn-soft: #3a2c13;--pane: #2a2a27;color-scheme:dark}}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}header,main{max-width:1100px;margin:0 auto;padding:0 16px}header{padding-top:32px}h1{margin:0 0 4px;font-size:28px;letter-spacing:-.02em}header{padding-bottom:16px}h2{font-size:15px;margin:0 0 12px}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:16px}.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:150px;margin-bottom:16px;border:2px dashed var(--border);border-radius:12px;background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}.drop-title{font-size:18px;font-weight:600}.drop-sub{color:var(--muted)}.drop.loaded .drop-title{overflow-wrap:anywhere;text-align:center;padding:0 16px}.drop.loaded .drop-sub{font-size:13px;margin-top:6px}.drop.loaded .drop-hint{display:none}.drop-meta{font-variant-numeric:tabular-nums}.drop-extra{color:var(--muted);font-size:13px;text-align:center;padding:0 16px;overflow-wrap:anywhere}.drop-hint{color:var(--muted);font-size:13px;text-align:center;max-width:560px;margin-top:10px;padding:0 16px}.drop-hint strong{color:var(--text);font-weight:600}details summary{cursor:pointer;font-weight:600}.panel-intro{margin:8px 0 0;color:var(--muted);font-size:13px}.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.preset{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px;border-radius:10px}.preset strong{font-size:15px}.preset small{font-size:12px}.preset[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}.preset[aria-pressed=true] strong{color:var(--accent)}.subpanel{border-top:1px solid var(--border);margin-top:14px;padding-top:12px}.subpanel .subpanel{margin-top:16px}#target:disabled{opacity:.5}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}fieldset{border:1px solid var(--border);border-radius:8px;margin:0;padding:10px 14px}legend{color:var(--muted);font-size:13px;padding:0 4px}.row{display:flex;align-items:center;gap:10px;margin:6px 0;flex-wrap:wrap}.row input[type=range]{flex:1;min-width:120px;accent-color:var(--accent)}.check{display:block;margin:6px 0}.check input{accent-color:var(--accent);margin-right:6px}small{color:var(--muted)}select,button{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:4px 10px}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;padding:8px 16px}@media (prefers-color-scheme: dark){button.primary{color:#0d2318}}.status{color:var(--muted);margin:0 0 16px}.sig-warn{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn);border-radius:12px;padding:12px 16px;margin-bottom:16px}.sig-warn strong{display:block;margin-bottom:4px}.sig-warn ul{margin:6px 0 0;padding-left:20px}.status.error{color:var(--warn);background:var(--warn-soft);padding:10px 14px;border-radius:8px}.summary{display:grid;grid-template-columns:auto auto auto 1fr auto;align-items:center;gap:8px 24px}.size,.saving{display:flex;flex-direction:column}.label{color:var(--muted);font-size:13px}.num{font-size:26px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.01em}.accent{color:var(--accent)}.arrow{color:var(--muted);font-size:22px}.bar{grid-column:1 / -1;height:8px;border-radius:4px;background:var(--pane);overflow:hidden}.bar div{height:100%;background:var(--accent);border-radius:4px;transition:width .4s}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}.two-col .card{margin-bottom:16px;min-width:0}.changes{list-style:none;margin:0;padding:0}.changes li{display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:8px 0;border-top:1px solid var(--border)}.changes li:first-child{border-top:0;padding-top:0}.changes .detail{color:var(--muted);font-size:13px;grid-column:1}.changes .bytes{grid-row:1 / span 2;grid-column:2;align-self:center;font-variant-numeric:tabular-nums;color:var(--accent);white-space:nowrap}.changes li.text-ok .bytes{font-weight:700}.changes li.text-warn .what,.changes li.text-warn .bytes{color:var(--warn)}.empty{color:var(--muted)}.table-wrap{max-height:320px;overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}td{padding:6px 8px 6px 0;border-top:1px solid var(--border);vertical-align:top;overflow-wrap:anywhere}tr:first-child td{border-top:0}td.where{color:var(--muted);white-space:nowrap}td.key{font-weight:600;white-space:nowrap}.preview-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px}.preview-bar h2{margin:0}.compare>summary{margin:-2px 0 0}.compare[open]>summary{margin-bottom:12px}.compare .seg{margin-left:0}button.link{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;font-size:13px;cursor:pointer;align-self:flex-start}.dialog{border:0;border-radius:14px;padding:0;width:min(1000px,calc(100vw - 32px));max-height:calc(100vh - 48px);background:var(--bg);color:var(--text);box-shadow:0 10px 40px #0000004d}.dialog::backdrop{background:#00000073}.dialog-inner{padding:16px 18px 4px}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.dialog-head h2{margin:0;font-size:18px}.dialog-close{font-size:22px;line-height:1;padding:2px 10px}.seg{display:flex;margin-right:auto;margin-left:12px}.seg button{border-radius:0}.seg button:first-child{border-radius:6px 0 0 6px}.seg button:last-child{border-radius:0 6px 6px 0;border-left:0}.seg button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent);font-weight:600}.img-info{margin:-4px 0 12px;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}.controls{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}.zoom-label{min-width:3.5em;text-align:right;white-space:nowrap;color:var(--muted);font-size:13px}.panes{display:grid;grid-template-columns:1fr 1fr;gap:12px}figure{margin:0;min-width:0}figcaption{color:var(--muted);font-size:13px;margin-bottom:6px}.pane{position:relative;background:var(--pane);border-radius:8px;overflow:auto;max-height:max(320px,calc(100vh - 200px));cursor:grab;user-select:none;overscroll-behavior:contain}.pane.dragging{cursor:grabbing}.pane canvas{display:block;margin:0 auto;box-shadow:0 1px 4px #00000026}.pane canvas.pixelated{image-rendering:pixelated}@media (max-width: 720px){.settings-grid,.two-col,.presets{grid-template-columns:1fr}.summary{grid-template-columns:auto auto auto}.summary button{grid-column:1 / -1}.saving{grid-column:1 / -1;flex-direction:row;align-items:baseline;gap:8px}.saving .link{align-self:baseline;margin-left:4px}.panes{grid-template-columns:1fr}}#all[aria-pressed=true]{background:var(--accent-soft);color:var(--accent);font-weight:600}.list{max-height:max(320px,calc(100vh - 200px));overflow:auto;border:1px solid var(--border);border-radius:8px}.results-table{width:100%;border-collapse:collapse;font-size:13px}.results-table th{position:sticky;top:0;z-index:1;background:var(--surface);color:var(--muted);text-align:left;font-weight:600;padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap}.results-table td{padding:6px 10px;border-top:1px solid var(--border);vertical-align:middle;overflow-wrap:normal}.results-table tbody tr:first-child td{border-top:0}.results-table tbody tr{cursor:pointer}.results-table tbody tr:hover{background:var(--accent-soft)}.results-table .n{white-space:nowrap;font-variant-numeric:tabular-nums}.results-table .gain{color:var(--accent);font-weight:600}.results-table .warn{color:var(--warn)}.results-table .result{min-width:140px}.results-table .result.kept{color:var(--muted);max-width:320px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.pane-note{margin:0;padding:48px 16px;text-align:center;color:var(--muted)}.img-info strong{color:var(--text)}
