.before-after-slider{position:relative;--before-after-pos:50%;margin:0 auto;width:100%}.before-after-figure{aspect-ratio:16/9;background:var(--surface-1);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);isolation:isolate;margin:0;overflow:hidden;position:relative}.before-after-image{height:100%;inset:0;object-fit:cover;position:absolute;width:100%;z-index:1}.before-after-image--before{clip-path:inset(0 calc(100% - var(--before-after-pos)) 0 0);z-index:2}.before-after-image--after{z-index:1}.before-after-handle{align-items:center;bottom:0;display:flex;justify-content:center;left:var(--before-after-pos);pointer-events:none;position:absolute;top:0;transform:translateX(-50%);z-index:3}.before-after-handle-line{background:var(--primary);bottom:0;mix-blend-mode:difference;position:absolute;top:0;width:4px;z-index:2}.before-after-handle-grip{background:var(--bg);background-image:url(/icons/favicon-96x96.png);background-position:50%;background-repeat:no-repeat;background-size:40px 40px;border:2px solid var(--bg);border-radius:50%;height:56px;width:56px;z-index:4}.before-after-range{cursor:col-resize;height:100%;inset:0;opacity:0;position:absolute;width:100%}.before-after-slider:focus-within .before-after-handle-grip{background:var(--bg);background-image:url(/icons/favicon-96x96.png);background-position:50%;background-repeat:no-repeat;background-size:40px 40px;border:3px solid var(--bg);border-radius:50%;box-shadow:0 6px 14px rgba(0,0,0,.18);height:56px;width:56px;z-index:4}