/* Both layers share one 2:1 frame; revealing a layer never resizes it. */
.render-compare { display:flex; align-items:center; justify-content:center; background:#b3b3b3; isolation:isolate; container-type:size; }
.render-compare-stage { position:relative; width:min(100cqw,200cqh); height:min(100cqh,50cqw); aspect-ratio:2/1; overflow:hidden; flex:none; background:#b3b3b3; --render-reveal:50%; }
.render-compare-layer { position:absolute; inset:0; pointer-events:none; }
.render-compare-layer img,.render-compare-layer svg { display:block; width:100%; height:100%; opacity:1!important; object-fit:fill; transform:none!important; scale:1!important; }
.render-compare-before { clip-path:inset(0 calc(100% - var(--render-reveal)) 0 0); }
.render-compare-label { position:absolute; top:clamp(8px,.7vw,24px); z-index:2; padding:5px 9px; border:1px solid #ffffff70; border-radius:6px; background:#2228; backdrop-filter:blur(10px); color:#fff; font-size:clamp(10px,.63vw,22px); line-height:1.4; pointer-events:none; }
.render-compare-label.before { left:clamp(8px,.7vw,24px); }
.render-compare-label.after { right:clamp(8px,.7vw,24px); }
.render-compare-divider { position:absolute; top:0; bottom:0; left:var(--render-reveal); width:2px; transform:translateX(-50%); background:#fff; box-shadow:0 0 5px #0005; pointer-events:none; z-index:2; }
.render-compare-handle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:clamp(38px,2.1vw,66px); height:clamp(38px,2.1vw,66px); display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid #ffffffb3; border-radius:50%; background:#f4f4f4; color:#222; box-shadow:0 3px 16px #0003; }
.render-compare-handle svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; }
.render-compare-range { position:absolute; z-index:3; inset:0; margin:0; width:100%; height:100%; opacity:0; cursor:ew-resize; touch-action:pan-y; }
.render-compare-stage:focus-within { outline:2px solid #fff; outline-offset:-3px; }
.render-compare-stage:focus-within .render-compare-handle { outline:2px solid #222; outline-offset:3px; }
.render-compare.is-dragging { cursor:ew-resize; user-select:none; }
.render-compare-hint { color:var(--muted); font-size:clamp(10px,.55vw,20px); }
.mini-render-compare .render-compare-divider { width:1px; }
.mini-render-compare .render-compare-label { top:5px; padding:2px 5px; font-size:clamp(8px,.42vw,15px); border-radius:4px; }
.mini-render-compare .render-compare-label.before { left:5px; }
.mini-render-compare .render-compare-label.after { right:5px; }
@media(max-width:760px) {
  .render-compare-handle { width:38px; height:38px; }
  .render-compare-hint { font-size:10px; }
  .mini-render-compare .render-compare-label { display:none; }
}