/* Before / after slider (used by the app and the customer page) */
.bas{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#121212;user-select:none;-webkit-user-select:none;touch-action:pan-y;border:2px solid #121212}
.bas img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;pointer-events:none}
.bas-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0);will-change:clip-path}
.bas-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);pointer-events:none}
.bas-knob{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff;border:3px solid #121212;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform .12s}
.bas.dragging .bas-knob{transform:scale(1.08)}
.bas-knob svg{width:26px;height:26px;fill:none;stroke:#121212;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.bas-tag{position:absolute;top:12px;font:600 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;padding:6px 8px;background:#121212;color:#fff;pointer-events:none}
.bas-tag-b{left:12px}.bas-tag-a{right:12px;background:var(--bas-accent,#FF5B14);color:var(--bas-accent-ink,#121212)}
.bas-hit{position:absolute;inset:0;cursor:ew-resize;touch-action:pan-y;outline:none}
.bas-hit:focus-visible{box-shadow:inset 0 0 0 4px var(--bas-accent,#FF5B14)}