:root{color-scheme:dark;--bg:#222624;--ink:#eceee7;--muted:#b0b8ad;--line:#414842;--lime:#d9f88a}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif}a{color:inherit;text-underline-offset:5px}button,input{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:5px}.shell{width:min(1280px,90%);margin:auto}.intro{padding:58px 0 32px}.back{font-size:13px;color:var(--muted);text-decoration:none}.eyebrow{font:11px Menlo,monospace;letter-spacing:1.8px;color:var(--lime);margin-top:38px}h1{font-size:clamp(40px,6vw,80px);line-height:1.05;letter-spacing:-2px;font-weight:550;margin:22px 0}h1 span{display:block;color:var(--muted)}.intro p{max-width:750px;color:var(--muted);line-height:1.9;font-size:16px}.legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin:25px 0;font-size:12px;color:var(--muted)}.legend b{color:var(--ink);font-family:monospace;margin-right:7px}.scene-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:22px 0;border-block:1px solid var(--line);margin:0 0 46px}.scene-nav span{font-size:12px;color:var(--muted);margin-right:12px}.scene-nav a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);text-decoration:none;font:12px monospace}.scene-nav a:hover{color:var(--bg);background:var(--lime)}.scene{margin:0 0 70px}.scene-heading{display:flex;align-items:baseline;gap:20px;margin-bottom:25px}.scene-heading h2{font-weight:500;font-size:30px;margin:0}.scene-heading span{color:var(--muted);font-size:12px}.comparison{margin:0 0 36px}.caption{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.caption h3{font-size:16px;font-weight:500;margin:0}.caption small{font:11px monospace;color:var(--muted)}.stage{--split:50%;position:relative;aspect-ratio:16/9;overflow:hidden;background:#101212;cursor:ew-resize;touch-action:pan-y;user-select:none}.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.stage .before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}.divider{position:absolute;left:var(--split);top:0;bottom:0;width:2px;background:var(--lime);transform:translateX(-50%);pointer-events:none}.divider::after{content:'↔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--lime);color:#171c18;font-size:24px;box-shadow:0 2px 20px #0006}.image-label{position:absolute;top:14px;padding:7px 10px;background:#101212d9;color:white;font-size:11px;pointer-events:none}.image-label.left{left:14px}.image-label.right{right:14px;color:var(--lime)}.stage:focus-within{outline:2px solid var(--lime);outline-offset:3px}.controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}.controls label{font-size:12px;color:var(--muted)}input[type=range]{flex:1;min-width:100px;accent-color:var(--lime);height:30px;cursor:ew-resize}.buttons{display:flex;gap:6px}button{border:1px solid var(--line);background:transparent;color:var(--ink);padding:8px 11px;font-size:12px;cursor:pointer}button:hover{border-color:var(--lime);color:var(--lime)}.originals{display:flex;gap:18px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:8px}.foot{border-top:1px solid var(--line);padding:26px 0 36px;display:flex;justify-content:space-between;gap:20px;font:11px monospace;color:var(--muted)}
@media(max-width:600px){.intro{padding-top:30px}h1{letter-spacing:-1px}.eyebrow{margin-top:28px}.intro p{font-size:14px}.scene-nav{margin-bottom:32px}.scene-nav span{width:100%}.scene-heading h2{font-size:25px}.scene{margin-bottom:44px}.caption small{font-size:10px}.image-label{top:8px;font-size:9px;padding:5px 7px}.image-label.left{left:8px}.image-label.right{right:8px}.divider::after{width:34px;height:34px;font-size:20px}.controls{gap:8px}.buttons{width:100%;justify-content:flex-end}.foot{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
