@property --x{ syntax:"<percentage>"; inherits:true; initial-value:50%; }
.cmp{
position:relative; overflow:hidden; isolation:isolate;
aspect-ratio:var(--cmp-ar, 4/5);
border-radius:var(--px-r-card); border:var(--px-hair) solid var(--px-rule);
background:var(--px-ink-3) var(--lqip) center/cover no-repeat;
touch-action:pan-y;
user-select:none; -webkit-user-select:none;
cursor:ew-resize;
contain:paint}
.cmp > *{ pointer-events:none; }
.cmp-line::after{ touch-action:none; }
.cmp img{ position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; object-position:50% 50%; display:block; }
.cmp .over{ clip-path:inset(0 calc(100% - var(--x,50%)) 0 0); }
.cmp-line{ position:absolute; top:0; bottom:0; left:var(--x,50%);
width:var(--px-hair); background:var(--px-seam);
box-shadow:0 0 0 .5px color-mix(in srgb, var(--px-ink) 45%, transparent); }
.cmp-line::after{
content:""; position:absolute; top:50%; left:50%;
transform:translate(-50%,-50%);
width:var(--cmp-handle,28px); height:var(--cmp-handle,28px);
border-radius:var(--px-r-pill);
background:var(--px-chalk) var(--px-icon-drag) center/15px no-repeat;
box-shadow:0 1px 6px color-mix(in srgb, var(--px-ink) 55%, transparent),
0 0 0 1px color-mix(in srgb, var(--px-ink) 12%, transparent)}
.cmp-tag{ position:absolute; top:var(--px-2);
font:600 var(--px-t-micro)/1 var(--px-font); letter-spacing:.04em;
padding:3px 7px; border-radius:var(--px-r-chip);
background:color-mix(in srgb, var(--px-ink) 62%, transparent);
color:var(--px-chalk);
-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.cmp-tag.before{ left:var(--px-2); } .cmp-tag.after{ right:var(--px-2); }
.cmp input[type=range]{ position:absolute; inset:0; width:100%; height:100%;
opacity:0; margin:0; }
.cmp:has(input:focus-visible){ outline:2px solid var(--px-focus); outline-offset:2px; }
.cmp.is-dragging{ cursor:grabbing; }
.cmp.static .cmp-line,.cmp.static .cmp-tag.before,.cmp.static input{ display:none; }
.cmp.static .over{ clip-path:none; }
.cmp.bare .cmp-line,.cmp.bare .cmp-tag,.cmp.bare input{ display:none; }
.cmp.bare .over{ clip-path:none; }
@keyframes cmp-teach{
0%{ --x:50%; } 35%{ --x:62%; } 70%{ --x:38%; } 100%{ --x:50%; }
}
.cmp.is-wiping{ animation:cmp-teach 520ms var(--px-e-wipe) both; }
@media (hover:hover) and (pointer:fine){
.cmp[data-hover="1"] .over{ transition:none; }
.cmp[data-hover="1"].is-returning .over{ transition:clip-path var(--px-t-enter) var(--px-e-enter); }
.cmp[data-hover="1"].is-returning .cmp-line{ transition:left var(--px-t-enter) var(--px-e-enter); }
}
@media (prefers-reduced-motion:reduce){
.cmp.is-wiping{ animation:none; }
.cmp .over,.cmp .cmp-line{ transition:none !important; }
}
.cmp[data-variant="card"]{ --cmp-ar:4/5; --cmp-handle:28px; }
.cmp[data-variant="card"] .cmp-tag.before{ display:none; }
.cmp[data-variant="hero-m"]{
--cmp-handle:44px;
aspect-ratio:auto; height:clamp(240px, calc(100svh - 264px), 434px);
border-radius:0; border-inline:0}
.cmp[data-variant="hero-d"]{ --cmp-ar:4/5; --cmp-handle:44px; }
.cmp[data-variant^="hero"] .cmp-tag{ font-size:12.5px; top:var(--px-3); }
.cmp[data-variant^="hero"] .cmp-tag.before{ left:var(--px-3); }
.cmp[data-variant^="hero"] .cmp-tag.after{ right:var(--px-3); }
.cmp.is-dragging{ animation:none !important; }
.cmp[data-variant="card"] .cmp-tag.after{ top:auto; bottom:var(--px-2); }