:root{color-scheme:light;--paper:#f5f4ef;--ink:#202b29;--muted:#67716b;--line:#dcded5;--accent:#335e4d;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.35}[hidden]{display:none!important}a{color:inherit;text-decoration:none}:focus-visible{outline:3px solid #a16a2c;outline-offset:5px}
.site-header{max-width:1440px;margin:auto;padding:28px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;font-size:18px;letter-spacing:-.5px}.brand strong{font-weight:400;color:var(--muted)}.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:37px;height:37px;background:var(--ink);color:var(--paper);font-size:23px;font-weight:600;letter-spacing:-5px;padding-right:5px}.brand-mark span{font-size:18px;font-weight:300}.showcase-tag{font-size:10px;letter-spacing:1.6px;color:var(--muted)}main{max-width:1200px;margin:auto;padding:0 36px}.intro{padding:42px 0 30px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--muted);margin:0 0 10px}h1{font-size:clamp(28px,4vw,44px);font-weight:500;letter-spacing:-1px;margin:0 0 14px;line-height:1.3}.description{color:var(--muted);font-size:14px;line-height:1.8;margin:0}.workspace{background:#fff;border:1px solid var(--line);border-radius:4px;padding:24px}.photo-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.photo-heading .eyebrow{font-size:9px;margin-bottom:7px}h2{margin:0;font-size:17px;font-weight:500;line-height:1.5}.counter{white-space:nowrap;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:2px}.status{font-size:14px;line-height:1.8;background:var(--paper);padding:32px 20px;text-align:center;border:1px dashed var(--line)}.retry{padding:10px 22px;background:var(--accent);color:#fff;border:0;border-radius:3px;margin-bottom:16px}.viewer{background:#202725;padding:22px;min-height:100px;display:flex;justify-content:center;align-items:center;overflow:hidden}.comparison{position:relative;width:100%;max-width:calc(65vh * var(--ratio,1.5));margin:auto;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;--split:50%}.comparison img{pointer-events:none;display:block;width:100%;height:auto}.comparison .overlay-image{position:absolute;inset:0;height:100%;clip-path:inset(0 calc(100% - var(--split)) 0 0);-webkit-clip-path:inset(0 calc(100% - var(--split)) 0 0)}.image-label{position:absolute;top:15px;background:rgba(20,29,26,.7);color:#fff;pointer-events:none;font-size:10px;letter-spacing:1px;padding:7px 10px;border:1px solid #ffffff40}.before-label{left:14px}.after-label{right:14px}.divider{position:absolute;left:var(--split);top:0;bottom:0;width:2px;background:#fff;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 5px #0005}.divider>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:45px;height:45px;border-radius:50%;background:#fff;color:var(--accent);box-shadow:0 2px 16px #0003;display:flex;justify-content:center;align-items:center;gap:6px;font-size:25px}.divider i{display:block;height:16px;width:1px;background:#c4cbc5}.slider-controls{max-width:540px;margin:20px auto 0}.slider-controls label{display:flex;align-items:center;justify-content:space-between;color:var(--ink);font-size:12px}.slider-controls output{font-variant-numeric:tabular-nums;color:var(--accent)}input[type=range]{width:100%;height:32px;margin:4px 0;accent-color:var(--accent);cursor:ew-resize;touch-action:pan-y}.slider-controls p{margin:0;font-size:10px;text-align:center;line-height:1.7;color:var(--muted)}.warning{margin:20px 0 0;background:#f9f4e8;border-left:3px solid #b48b40;padding:12px 14px;font-size:12px;color:#795e2a;line-height:1.8}.photo-navigation{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}.photo-navigation>button{border:1px solid var(--line);border-radius:3px;background:#fff;padding:10px 16px;white-space:nowrap;font-size:12px;color:var(--ink);min-height:44px}.photo-navigation>button:not(:disabled):hover{background:var(--paper);border-color:var(--accent)}.photo-navigation>button span{margin:0 5px}.photo-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}.photo-tabs button{min-width:38px;min-height:38px;background:var(--paper);border:1px solid transparent;border-radius:3px;font-size:11px;color:var(--muted)}.photo-tabs button[aria-pressed=true]{background:var(--accent);color:#fff}.mismatch-view{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}.mismatch-view figure{margin:0}.mismatch-view img{display:block;width:100%;height:auto}.mismatch-view figcaption{color:white;font-size:12px;margin-top:12px}.project-note{font-size:11px;color:var(--muted);line-height:1.8;text-align:center;margin:22px 0 35px}footer{display:flex;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto;padding:24px 5%;border-top:1px solid var(--line);font-size:9px;letter-spacing:1.5px;color:var(--muted)}.noscript{padding:20px;text-align:center}
@media(max-width:600px){.site-header{padding:20px}.brand{font-size:16px;gap:9px}.brand-mark{width:32px;height:32px}.showcase-tag{font-size:8px;letter-spacing:.5px}main{padding:0 16px}.intro{padding:30px 2px 24px}.description{font-size:13px}.workspace{padding:15px}.photo-heading{margin-bottom:15px}h2{font-size:15px}.viewer{padding:10px}.comparison{max-width:calc(62vh * var(--ratio,1.5))}.image-label{top:8px;font-size:8px;padding:5px 6px;letter-spacing:.5px}.before-label{left:7px}.after-label{right:7px}.divider>span{width:38px;height:38px}.photo-navigation{gap:7px;flex-wrap:wrap;margin-top:20px}.photo-navigation>button{padding:8px 10px}.photo-tabs{order:3;width:100%;margin-top:5px}.slider-controls p{font-size:9px}.mismatch-view{grid-template-columns:1fr;gap:20px}footer{padding:20px;font-size:8px;letter-spacing:.5px}.project-note{font-size:10px}}
/* --split is the visible after percentage; before occupies the remaining left side. */
.comparison .overlay-image{clip-path:inset(0 var(--split) 0 0);-webkit-clip-path:inset(0 var(--split) 0 0)}
.rotate-hint{display:none;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.rotate-hint button{border:1px solid var(--line);background:transparent;color:var(--muted);padding:5px 9px;border-radius:3px;font-size:11px}
@media (orientation:portrait) and (max-width:900px){.rotate-hint{display:flex}}
@media (orientation:landscape) and (max-height:600px){
  html,body{height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
  body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
  .site-header,footer{display:none}
  main{width:100%;max-width:none;height:100%;height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:4px max(12px,env(safe-area-inset-right)) 4px max(12px,env(safe-area-inset-left));}
  .intro{display:none}
  .workspace{height:100%;min-height:0;padding:6px 10px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:4px;overflow:hidden;border:0;border-radius:0;background:transparent}
  .photo-heading{margin:0;min-height:24px}
  .photo-heading .eyebrow{display:none}
  h2{font-size:13px;line-height:1.25}
  .counter{font-size:11px}
  .viewer{min-height:0;padding:0;overflow:hidden}
  .comparison{width:auto;height:100%;max-width:100%;max-height:100%;aspect-ratio:var(--ratio,1.5);touch-action:none}
  .comparison img{width:100%;height:100%;object-fit:contain}
  .comparison .overlay-image{height:100%}
  .image-label{top:5px;font-size:8px;padding:4px 6px}
  .before-label{left:5px}.after-label{right:5px}
  .divider>span{width:36px;height:36px}
  .slider-controls{width:min(100%,500px);margin:0 auto;}
  .slider-controls label{font-size:10px}
  input[type=range]{height:24px;margin:0;touch-action:pan-y}
  .slider-controls p{display:none}
  .warning{margin:0;padding:4px 8px;font-size:10px;line-height:1.35}
  .photo-navigation{min-height:40px;margin:0;padding:3px 0 0;gap:8px;border-top:1px solid var(--line);flex-wrap:nowrap}
  .photo-navigation>button{min-height:36px;padding:5px 10px;font-size:11px}
  .photo-tabs{order:0;width:auto;flex:1;flex-wrap:nowrap;overflow-x:auto;margin:0;gap:4px}
  .photo-tabs button{flex:0 0 34px;min-width:34px;min-height:32px}
  .status{margin:0;padding:8px;font-size:12px}
  .retry{margin:0;padding:6px 12px}
  .mismatch-view{height:100%;min-height:0;grid-template-columns:1fr 1fr;gap:8px;align-items:center;overflow:hidden}
  .mismatch-view figure{min-width:0;min-height:0}
  .mismatch-view img{width:100%;height:min(100%,calc(100dvh - 110px));object-fit:contain}
  .mismatch-view figcaption{font-size:10px;margin-top:3px}
}