:root{font-family:Arial,Helvetica,sans-serif;color:#282924;background:#f6f5f1;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1600px;margin:auto;padding:28px 48px 24px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d8d9d1;padding-bottom:23px}.brand{font-weight:800;font-size:29px;letter-spacing:-1.6px;text-decoration:none;color:inherit}.brand span{font-size:11px;vertical-align:top;letter-spacing:0;margin-left:3px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px}.intro{display:flex;align-items:flex-end;justify-content:space-between;padding:35px 0 27px}.intro .eyebrow{color:#7b806b;margin:0 0 12px}h1{font-size:clamp(34px,4vw,54px);letter-spacing:-2px;font-weight:400;line-height:1.05;margin:0}.subtitle{color:#72756b;font-size:14px;margin:14px 0 0}.sync{font-size:11px;color:#666b5e;margin-bottom:4px;display:flex;align-items:center;gap:8px}.sync i{width:6px;height:6px;background:#7f896c;border-radius:50%}nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:14px 0;border-top:1px solid #dedfd6}button{font:inherit;cursor:pointer;border:1px solid transparent;border-radius:5px;background:transparent;padding:10px 14px;font-size:12px;color:#6b7063;min-height:38px}button:hover{background:#e6e8dd}button:focus-visible{outline:2px solid #65734e;outline-offset:2px}button[aria-pressed=true]{background:#343d2e;color:white}.divider{height:20px;width:1px;background:#d9dbd0;margin:0 8px}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:2px;border:1px solid #dfe0d7;background:#dfe0d7;border-radius:9px;overflow:hidden}article{background:#ebece5;min-width:0;position:relative}.label{position:absolute;z-index:2;top:23px;left:25px;display:flex;gap:12px;align-items:center;pointer-events:none}.label span{font-size:10px;color:#929888}h2{font-size:10px;letter-spacing:1.7px;font-weight:600;margin:0}.viewport{height:clamp(340px,48vh,570px);width:100%;position:relative;overflow:hidden;touch-action:none}.viewport canvas{display:block;width:100%;height:100%}.still{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.interactive .still{display:none}.loading{position:absolute;bottom:25px;left:25px;font-size:12px;color:#6c7264}.tools{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0 20px;border-bottom:1px solid #dedfd6}.tools p{font-size:11px;color:#787e70;margin:0}.tools>div{display:flex;flex-shrink:0;gap:3px}.tools button{border-color:#d9dcd0;padding:6px 12px}footer{display:flex;justify-content:space-between;gap:24px;padding-top:12px;font-size:10px;color:#929787;line-height:1.6}footer strong{color:#646e57;font-weight:400}button:disabled{opacity:.4;cursor:not-allowed}@media(max-width:650px){main{padding:22px 16px}header{padding-bottom:19px}.intro{padding:28px 0 22px;align-items:flex-start}.subtitle{max-width:230px;font-size:12px;line-height:1.5}.sync{margin-top:4px;font-size:10px}.comparison{gap:1px}.viewport{height:340px}.label{top:16px;left:12px;gap:5px}.label span{display:none}h2{font-size:8px;letter-spacing:1px}nav{gap:2px}nav button{padding:9px 10px;font-size:11px}.divider{display:none}.tools{align-items:flex-start}.tools p{line-height:1.6;max-width:190px}.tools button{padding:6px 9px;font-size:11px}footer{display:block}footer p{margin:6px 0}.loading{left:12px;font-size:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}