.film-switch{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.film-switch button{font:inherit;font-size:15px;font-weight:600;padding:10px 18px;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;cursor:pointer}
.film-switch button[aria-pressed=true]{background:var(--ink,#202422);color:var(--bg,#fff)}
.film-original,.film-pane{margin:0;min-width:0}.film-original[hidden],.film-pane[hidden]{display:none!important}
.film-stage{position:relative;width:100%;aspect-ratio:3/2;isolation:isolate;--film-split:50%;touch-action:pan-y}
.film-pictures{position:absolute;inset:0;mix-blend-mode:multiply;mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.film-pictures img{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;filter:none;mask:none!important;-webkit-mask:none!important}
.film-paint{position:absolute;inset:0;mask:var(--film-mask) center/contain no-repeat;-webkit-mask:var(--film-mask) center/contain no-repeat}
.film-paint-before img{filter:contrast(.83) saturate(.9) brightness(1.03)}
.film-paint-after{clip-path:inset(0 0 0 var(--film-split))}.film-paint-after img{filter:contrast(1.07) saturate(1.03) brightness(.99)}
.film-stage[data-dark] .film-pictures{mix-blend-mode:normal}
.film-line{position:absolute;left:var(--film-split);top:7%;bottom:7%;width:2px;transform:translateX(-50%);background:var(--ink,#222);box-shadow:0 0 0 1px #fff8;pointer-events:none}
.film-line span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border:1px solid var(--ink,#222);border-radius:50%;display:grid;place-items:center;background:var(--bg,#fff);color:var(--ink,#222);font:26px Arial;box-shadow:0 2px 8px #0002}
.film-labels{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;gap:8px;pointer-events:none}.film-labels span{background:var(--bg,#fff);color:var(--ink,#222);padding:9px 12px;border:1px solid #8885;border-radius:6px;font-size:14px;font-weight:600}
.film-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;touch-action:pan-y;margin:0;z-index:3}
.film-stage:focus-within .film-line span{outline:3px solid currentColor;outline-offset:3px}
.film-pane figcaption{display:block;text-align:center;font-size:16px;line-height:1.5;margin-top:12px}.film-pane figcaption small{display:block;font-size:12px;opacity:.7;margin-top:6px}
@media(max-width:760px){.film-labels span{font-size:11px;padding:7px}.film-switch button{font-size:13px;padding:8px 12px}.film-line span{width:40px;height:40px}.film-pane figcaption{font-size:14px}}

.film-stage{background:var(--bg,#f1f0eb)}.film-pictures{mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 92%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 92%,transparent)}.film-stage:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg,#f1f0eb),transparent 4%,transparent 96%,var(--bg,#f1f0eb));pointer-events:none;z-index:0}.film-line,.film-labels{z-index:1}