:root{color-scheme:light;--paper:#faf8f2;--ink:#583c2a;--copper:#ba4c1b;--muted:#927e6e;--border:#e2d7c9}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,sans-serif}header{max-width:1080px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:26px 30px 10px}.brand{text-decoration:none;color:var(--ink);font-size:23px;font-weight:500;letter-spacing:.1em}.brand span{display:inline-block;vertical-align:middle;margin-left:22px;padding-left:22px;border-left:1px solid var(--border);color:var(--muted);font-size:11px;letter-spacing:.04em}.edition{color:var(--muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase}main{max-width:820px;margin:0 auto;padding:12px 22px 26px}nav{display:flex;justify-content:center;gap:3px;margin:6px auto 8px;background:#eee7dc;width:fit-content;padding:4px;border-radius:24px}button{font:inherit;font-size:12px;line-height:1.5;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}nav button{padding:8px 17px;background:transparent;border:0;border-radius:20px;color:var(--muted)}nav button.selected{background:var(--paper);color:var(--copper);box-shadow:0 1px 4px #76502d0c}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--copper);outline-offset:4px}.portrait{position:relative;aspect-ratio:1;max-width:min(100%,72svh);margin:auto;touch-action:none;user-select:none}canvas{width:100%;height:100%;display:block;cursor:grab}canvas:active{cursor:grabbing}#reference{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}#split{display:none;position:absolute;top:0;bottom:0;left:50%;width:1px;background:#b44f2c77;pointer-events:none}.compare-labels{display:none;position:absolute;left:8px;right:8px;bottom:3px;justify-content:space-between;color:var(--muted);font-size:10px}.portrait.compare #reference,.portrait.source #reference{display:block}.portrait.compare #reference{clip-path:inset(0 50% 0 0)}.portrait.compare #split{display:block}.portrait.compare .compare-labels{display:flex}.portrait.source canvas{visibility:hidden}#gesture{text-align:center;color:var(--muted);font-size:11px;margin:5px 0 16px;min-height:17px}.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.actions button{padding:9px 18px;background:transparent;border:1px solid var(--border);border-radius:25px;color:var(--ink);min-height:40px}.actions button[aria-pressed=true]{color:var(--copper);border-color:#c18159}.actions button:disabled{opacity:.35;cursor:default}#compare-control{text-align:center;color:var(--muted);font-size:11px;max-width:320px;margin:12px auto}#compare-control:not([hidden]){display:block}input[type=range]{display:block;width:100%;accent-color:var(--copper);margin:10px 0 0;min-height:28px}footer{display:flex;justify-content:space-between;gap:18px;max-width:550px;margin:27px auto 0;border-top:1px solid var(--border);padding-top:15px;color:var(--muted);font-size:11px}footer a{color:var(--copper);text-decoration:none}@media(min-width:1000px){.portrait{max-width:min(100%,70svh)}}@media(max-width:540px){header{padding:19px 21px 8px}.brand{font-size:20px}.brand span{font-size:10px;margin-left:13px;padding-left:13px}.edition{font-size:9px}main{padding:10px 12px calc(18px + env(safe-area-inset-bottom))}nav{margin-top:3px;margin-bottom:16px}nav button{padding:8px 14px}.portrait{max-width:100%}.actions{gap:6px}.actions button{padding:9px 15px;font-size:12px}footer{margin-top:24px;padding:15px 8px 0}#gesture{margin-top:13px}}
