/* Before/after media with a white divider and the shared large magnetic control. */
html body#top.case-page :is(#content,.gallery) .case-compare{grid-column:1/-1;min-width:0;width:100%}
html body#top.case-page :is(#content,.gallery) .case-compare-stage{
 --compare-position:50%;position:relative;width:100%;aspect-ratio:var(--compare-aspect,16/9);
 border-radius:var(--media-radius,12px);overflow:hidden;isolation:isolate;cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
html body#top.case-page :is(#content,.gallery) .case-compare-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none;transform:none!important;scale:1!important;border-radius:0!important}
html body#top.case-page :is(#content,.gallery) .case-compare-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--compare-position)) 0 0);pointer-events:none}
html body#top.case-page :is(#content,.gallery) .case-compare-rule{position:absolute;z-index:1;top:0;bottom:0;left:var(--compare-position);width:3px;background:#fff;transform:translateX(-50%);mix-blend-mode:normal;pointer-events:none}
html body#top.case-page :is(#content,.gallery) .case-compare-handle{
 position:absolute;z-index:2;left:var(--compare-position);top:var(--compare-handle-y,50%);translate:calc(-50% + var(--magnet-x,0px)) calc(-50% + var(--magnet-y,0px));
 display:flex;align-items:center;justify-content:center;width:56px;min-width:56px;height:56px;min-height:56px;
 margin:0;padding:0;border:0;border-radius:12px!important;box-shadow:none!important;outline:none!important;
 --hover-base:#fff;--hover-fill:#1a1a1a;--hover-ink:#fff;--button-ink:#1a1a1a;background:var(--hover-base)!important;color:var(--button-ink)!important;cursor:grab;touch-action:none;
 font:500 18px/1 'Helvetica Now Display',Helvetica,Arial,sans-serif!important;
 transform:none!important;scale:1!important;opacity:1!important;filter:none!important;transition:translate .16s cubic-bezier(.22,1,.36,1)!important;
}
html body#top.case-page[data-case-theme="dark"] :is(#content,.gallery) .case-compare-handle{--hover-base:#fff;--hover-fill:#1a1a1a;--hover-ink:#fff;--button-ink:#1a1a1a;}
html body#top.case-page :is(#content,.gallery) .case-compare-handle::after{content:none!important;display:none!important}
html body#top.case-page :is(#content,.gallery) .case-compare-handle span{font:inherit!important;pointer-events:none}
html body#top.case-page :is(#content,.gallery) .case-compare-handle.fill-control::before{background:var(--hover-fill)!important}
html body#top.case-page :is(#content,.gallery) .case-compare-handle:is(:hover,:focus-visible),
html body#top.case-page :is(#content,.gallery) .case-compare-handle:is(:hover,:focus-visible) .control-label{color:var(--hover-ink)!important}
html body#top.case-page :is(#content,.gallery) .case-compare-handle:is(:focus,:focus-visible,:active){outline:0!important;box-shadow:none!important;border:0!important}
html body#top.case-page :is(#content,.gallery) .case-compare-stage.is-dragging .case-compare-handle{translate:-50% -50%;transition:none!important}
@media(prefers-reduced-motion:reduce){html body#top.case-page :is(#content,.gallery) .case-compare-handle{transition:none!important}}
html body#top.case-page:has(.case-compare-handle:hover,.case-compare-grab-zone:hover)>.site-cursor{visibility:hidden!important}
html body#top.case-page :is(#content,.gallery) .case-compare-gallery-sources{display:none!important}

html body#top.case-page .gallery .gallery-media>.case-compare-stage{width:100%;height:100%;aspect-ratio:auto}
html body#top.case-page .gallery .case-compare-stage{cursor:default}

/* Ten CSS pixels on each side of the divider, along its entire height. */
html body#top.case-page :is(#content,.gallery) .case-compare-grab-zone{position:absolute;z-index:1;top:0;bottom:0;left:var(--compare-position);width:20px;translate:-50% 0;background:transparent;cursor:grab;touch-action:none}

/* Native drag feedback stays active even when pointer capture leaves the grip. */
html body#top.case-page:has(.case-compare-stage.is-dragging),
html body#top.case-page:has(.case-compare-stage.is-dragging) *,
html body#top.case-page:has(.case-compare-stage.is-dragging) .gallery *{cursor:grabbing!important}
html body#top.case-page:has(.case-compare-stage.is-dragging) .site-cursor,
html body#top.case-page:has(.case-compare-stage.is-dragging) .gallery-cursor{visibility:hidden!important;opacity:0!important}

/* The shared comparison grip follows the pointer along its full-height hit zone. */
@layer version-four {
 body#top.version-five.case-page :is(#content,.gallery) .case-compare-handle {border:0!important;outline:0!important;box-shadow:none!important;transition:border-radius .25s ease,translate .16s ease!important;}
 body#top.version-five.case-page :is(#content,.gallery) .case-compare-handle:is(:hover,:focus-visible),
 body#top.version-five.case-page :is(#content,.gallery) .case-compare-stage:is(.is-dragging,:has(.case-compare-grab-zone:hover)) .case-compare-handle {border-radius:50%!important;}
 body#top.version-five.case-page:has(.case-compare-stage.is-dragging,.case-compare-handle:hover,.case-compare-grab-zone:hover) .v5-cursor {opacity:0!important;scale:0!important;}
}