/*   Keep the same classnames used in the embed snippet. */
*{box-sizing:border-box}
.curtain{position:relative;overflow:hidden;border-radius:6px;background:transparent;touch-action:none;user-select:none;max-height:70vh}
.curtain img{display:block;max-width:none}
.curtain__img{position:absolute;top:0;left:0;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center}
.curtain__img--before{z-index:1}
.curtain__after-wrap{position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;z-index:3}
.curtain__after-wrap .curtain__img--after{position:absolute;top:0;left:0;width:100%!important;height:100%!important;object-fit:contain!important}
.curtain__handle{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:28px;display:flex;align-items:center;justify-content:center;z-index:6;pointer-events:none}
.curtain__handle *{pointer-events:auto}
.curtain__handle:focus{outline:2px solid #337ab7;outline-offset:2px}

/* Labels for left/right (after/before) */
.curtain__label{position:absolute;top:10px;padding:6px 10px;background:rgba(255,255,255,0.9);color:#222;border-radius:999px;font-size:12px;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,0.06);pointer-events:none}
.curtain__label--left{left:12px;z-index:5}
.curtain__label--right{right:12px;z-index:2}
@media (max-width:480px){.curtain__label{font-size:11px;padding:5px 8px}}

/* Locked state styling - cursor changes to indicate click-to-toggle behavior */
.curtain{cursor:ew-resize}
.curtain--locked{cursor:pointer}
.curtain--locked .curtain__handle::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;background:rgba(51,122,183,0.8);border-radius:50%;animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}50%{opacity:0.6;transform:translate(-50%,-50%) scale(1.2)}}