:root{--bg: #e9edf1;--panel: #ffffff;--ink: #17212b;--muted: #566373;--line: #c9d2db;--accent: #0b63ce;--accent-ink: #ffffff;--checker-a: #f4f6f8;--checker-b: #d9dfe5;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0;line-height:1.5}.app{max-width:56rem;margin:0 auto;padding:2rem 1rem 3rem;display:grid;gap:1.25rem}h1{margin:0;font-size:2rem;letter-spacing:-.02em}header p{margin:.25rem 0 0;color:var(--muted);max-width:60ch}.controls{display:grid;gap:.5rem;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:1rem}.controls label{display:grid;gap:.25rem;font-weight:600}select{font:inherit;padding:.5rem;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:inherit}#status{margin:0;color:var(--muted)}progress{width:100%;accent-color:var(--accent)}.drop{display:grid;place-items:center;min-height:9rem;padding:1.5rem;text-align:center;border:2px dashed var(--line);border-radius:8px;background:var(--panel);cursor:pointer;color:var(--muted)}.drop:hover,.drop.over,.drop:focus-within{border-color:var(--accent);color:var(--ink)}.stage{--split: 50%;position:relative;margin-top:1rem;width:100%;max-height:80vh;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:repeating-conic-gradient(var(--checker-a) 0% 25%,var(--checker-b) 0% 50%) 0 0 / 20px 20px}.stage[hidden]{display:none}.stage img,.stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.stage img{clip-path:inset(0 calc(100% - var(--split)) 0 0)}.stage canvas{clip-path:inset(0 0 0 var(--split))}.stage input[type=range]{position:absolute;left:0;right:0;bottom:.5rem;width:calc(100% - 2rem);margin:0 1rem;accent-color:var(--accent)}.actions{display:flex;gap:.75rem}button{font:inherit;font-weight:600;padding:.7rem 1.25rem;border:0;border-radius:6px;background:var(--accent);color:var(--accent-ink);cursor:pointer}button:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.hint{margin:0;color:var(--muted);font-size:.9rem}.controls .secondary{justify-self:start;background:transparent;color:var(--accent);border:2px solid var(--accent)}.controls .secondary[hidden]{display:none}