.before-after{position:relative;aspect-ratio:4 / 3;border-radius:var(--radius-16);overflow:hidden;cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none;background:var(--ph-base);font-family:var(--font-body)}.before-after__side{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;padding:0 8%}.before-after__side--before{background:repeating-linear-gradient(135deg,var(--ph-before-1) 0 14px,var(--ph-before-2) 14px 28px);justify-content:flex-start}.before-after__side--after{background:repeating-linear-gradient(135deg,var(--ph-after-1) 0 14px,var(--ph-after-2) 14px 28px);justify-content:flex-end}.before-after--photo .before-after__side{padding:0;background:none}.before-after__caption{font-family:var(--font-mono);font-size:var(--fs-13);line-height:1.4;color:var(--note-text);background:rgb(var(--white-rgb) / .85);padding:6px 10px;border-radius:var(--radius-6);max-width:42%}.before-after__side--after .before-after--photo .before-after__side{padding:0;background:none}.before-after__img{width:100%;height:100%;object-fit:cover;pointer-events:none}.before-after__caption{color:var(--ph-after-ink);text-align:right}.before-after__divider{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--white);box-shadow:var(--shadow-hairline)}.before-after__knob{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:var(--radius-round);background:var(--white);box-shadow:var(--shadow-knob);display:flex;align-items:center;justify-content:center;color:var(--action)}.before-after__badge{position:absolute;top:12px;font-size:var(--fs-14);font-weight:600;padding:4px 10px;border-radius:var(--radius-8);color:var(--white)}.before-after__badge--before{left:12px;background:var(--form-ink)}.before-after__badge--after{right:12px;background:var(--action)}.before-after__note{position:absolute;bottom:12px;left:12px;font-size:var(--fs-13);font-weight:600;padding:3px 8px;border-radius:var(--radius-6);background:var(--white);color:var(--note-text);border:1px dashed var(--note-border)}.before-after__note--credit{max-width:calc(100% - 24px);font-size:var(--fs-12);font-weight:500;line-height:1.25;text-decoration:none;background:rgb(var(--white-rgb) / .88);cursor:pointer}.before-after__note--credit:hover{background:var(--white);color:var(--ink)}