body{margin:0}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--fg:#1f2430;--muted:#667;--bg:#f4f5f8;--panel:#fff;--border:#d5d8e0;--accent:#3b5bdb;--accent-fg:#fff;--disabled:#aab;--badge:#e7ebf5;--ok-bg:#dff5e3;--ok-fg:#1d5b2a;--warn-bg:#fff3cd;--warn-fg:#5c4400;--err-bg:#fde2e2;--err-fg:#8a1c1c;--check-a:#eee;--check-b:#fff;color:var(--fg);background:var(--bg);font-family:system-ui,Segoe UI,Yu Gothic UI,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--fg:#e4e6ec;--muted:#9aa0ad;--bg:#15171c;--panel:#1f2229;--border:#3a3f4b;--accent:#5c7cfa;--disabled:#4a4f5c;--badge:#2a2f3a;--ok-bg:#1d3b25;--ok-fg:#b5e8c0;--warn-bg:#3d3214;--warn-fg:#f1d98a;--err-bg:#43201f;--err-fg:#f4b4b4;--check-a:#2b2e36;--check-b:#383c46}}.app{flex-direction:column;gap:16px;max-width:1100px;margin:0 auto;padding:16px;display:flex}h1{margin:0 0 8px;font-size:1.6rem}h2{margin:0 0 12px;font-size:1.1rem}h2 small{color:var(--muted);font-weight:400}header{flex-direction:column;gap:8px;display:flex}header p{margin:0}.mode-row{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.mode-note{color:var(--muted)}.pill{background:var(--badge);border-radius:999px;padding:2px 10px;font-size:.85rem}.panel{background:var(--panel);border-radius:10px;padding:16px;box-shadow:0 1px 3px #0000001a}.panel-head{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;display:flex}.panel-head h2{margin:0 auto 0 0}.controls{flex-wrap:wrap;align-items:flex-end;gap:16px;display:flex}.field{flex-direction:column;gap:4px;font-size:.9rem;display:flex}.file-picker{align-items:center;gap:8px;display:flex}.file-name{color:var(--muted);overflow-wrap:anywhere}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.check{align-items:center;gap:6px;padding-bottom:6px;display:flex}.palette{flex-wrap:wrap;gap:8px 16px;margin:0 0 12px;padding:0;list-style:none;display:flex}.palette .check{padding-bottom:0}.swatch{border:1px solid #888;border-radius:3px;width:1.6em;height:1.6em;display:inline-block}.share{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.85rem}select,button,.file-button{font:inherit;padding:6px 12px}select{color:inherit;background:var(--panel);border:1px solid var(--border);border-radius:6px}button,.file-button{background:var(--accent);color:var(--accent-fg);cursor:pointer;border:1px solid #0000;border-radius:6px}button.secondary,.file-button{background:var(--panel);color:var(--fg);border-color:var(--border)}button:disabled{background:var(--disabled);color:var(--accent-fg);cursor:not-allowed;border-color:#0000}button.secondary:disabled{background:var(--panel);color:var(--muted);border-color:var(--border);opacity:.6}button:focus-visible,select:focus-visible,.file-button:focus-within,.zoom-frame:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.badge{background:var(--badge);border-radius:6px;margin:0;padding:8px 12px}.engine-ready{background:var(--ok-bg);color:var(--ok-fg)}.notice,.busy,.warn{background:var(--warn-bg);color:var(--warn-fg)}.engine-failed,.error{background:var(--err-bg);color:var(--err-fg)}.hint{color:var(--muted);margin:8px 0 0;font-size:.85rem}.result-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.segmented{display:inline-flex}.segmented button{background:var(--panel);color:var(--fg);border-color:var(--border);border-radius:0}.segmented button:first-child{border-radius:6px 0 0 6px}.segmented button:last-child{border-radius:0 6px 6px 0;margin-left:-1px}.segmented button[aria-pressed=true]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.grid+.hint{margin-top:-8px}.frame,.compare{background:repeating-conic-gradient(var(--check-a) 0 25%, var(--check-b) 0 50%) 0 0 / 16px 16px;border-radius:6px}.zoom-frame{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-x pan-y;height:60vh;overflow:hidden}.zoom-frame.zoomed{touch-action:none}.zoom-frame:active{cursor:grabbing}.zoom-frame img{object-fit:contain;transform-origin:0 0;width:100%;height:100%;display:block}.zoom-bar{align-items:center;gap:6px;margin-top:8px;display:flex}.zoom-bar button{padding:2px 10px}.zoom-level{text-align:center;font-variant-numeric:tabular-nums;min-width:4em;font-size:.85rem}.placeholder{color:var(--muted);text-align:center;margin:0;padding:40px 0}.dropzone{width:100%;color:var(--muted);border:2px dashed var(--border);background:0 0;padding:48px 16px}.dropzone:hover{border-color:var(--accent);color:var(--fg)}.drop-overlay{z-index:10;color:var(--accent);border:4px dashed var(--accent);pointer-events:none;background:#3b5bdb1f;place-items:center;font-size:1.3rem;font-weight:700;display:grid;position:fixed;inset:0}.compare{cursor:ew-resize;-webkit-user-select:none;user-select:none;touch-action:pan-y;margin-bottom:12px;position:relative;overflow:hidden}.compare img{object-fit:contain;width:100%;max-height:70vh;display:block}.compare .over{height:100%;position:absolute;inset:0}.compare .handle{background:var(--accent);pointer-events:none;width:2px;position:absolute;top:0;bottom:0}.compare .tag{color:#fff;pointer-events:none;background:#0000008c;border-radius:4px;padding:2px 8px;font-size:.8rem;position:absolute;top:8px}.compare .tag.left{left:8px}.compare .tag.right{right:8px}.slider{flex-direction:column;gap:4px;font-size:.9rem;display:flex}@media (width<=720px){.grid{grid-template-columns:1fr}.zoom-frame{height:45vh}.controls{flex-direction:column;align-items:stretch}}