:root{color-scheme:dark;font-family:Inter,"Segoe UI",sans-serif;background:#0b101b;color:#e8ecf3}*{box-sizing:border-box}body{margin:0}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #283042;padding:22px 5vw}.brand{font-weight:800;letter-spacing:.2em;color:#e4c27c}a{color:#e4c27c;text-underline-offset:4px}main{max-width:1500px;margin:auto;padding:36px 5vw}.eyebrow{font-size:11px;letter-spacing:.15em;color:#c8ad74}h1{font-size:clamp(30px,4vw,48px);letter-spacing:-.04em;margin:12px 0}.intro,.note{color:#a9b3c5;line-height:1.6}.intro{max-width:760px}.controls{display:flex;gap:20px;align-items:end;flex-wrap:wrap;margin:26px 0 16px}label{font-size:12px;color:#a9b3c5}select{display:block;margin-top:7px;min-width:210px}select,button{font:inherit;color:#e8ecf3;background:#172133;border:1px solid #3b485f;border-radius:6px;padding:10px 14px}button{cursor:pointer}button.active{background:#e4c27c;color:#101827;border-color:#e4c27c}.modes{display:flex;gap:5px;margin-left:auto}.viewer{position:relative;aspect-ratio:16/9;overflow:hidden;background:#172133;border:1px solid #3b485f;border-radius:8px;--split:50%}.viewer img{display:block;width:100%;height:100%;object-fit:contain}.viewer #after{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split)) 0 0)}.tag{position:absolute;top:14px;background:#0b101bdc;padding:6px 10px;font-size:11px;letter-spacing:.1em;pointer-events:none}.left{left:14px}.right{right:14px}#divider{position:absolute;left:var(--split);top:0;bottom:0;width:2px;background:#e4c27c;pointer-events:none}#divider:after{content:'↔';position:absolute;top:50%;left:0;transform:translate(-50%,-50%);border:1px solid #e4c27c;background:#101827;border-radius:50%;padding:10px;color:#e4c27c}#slider{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}.viewer:focus-within{outline:3px solid #e4c27c;outline-offset:4px}.caption,footer{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;font-size:12px;color:#b6c0cf;margin-top:14px}.note{font-size:12px;max-width:1050px}footer{border-top:1px solid #283042;padding-top:20px;margin-top:28px}kbd{border:1px solid #4b5870;padding:3px 6px;border-radius:4px;color:#e4c27c}[hidden]{display:none!important}@media(max-width:600px){main{padding-top:20px}.modes{margin-left:0}select{min-width:180px}.tag{font-size:9px;top:6px}.left{left:6px}.right{right:6px}header{font-size:12px}}