.ba-wrapper {
      position: relative;
      width: 100%;
      max-width: 900px;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border-radius: 14px;
      background: #000;
      justify-self: center;
      touch-action: none;
      -webkit-user-select: none;
      user-select: none;
    }
    
    .ba-portrait {
        aspect-ratio: 9 / 10;
    }

    .ba-images {
      position: relative;
      width: 100%;
      height: 100%;
    }

    /* KEY: both images same size, absolutely aligned, object-fit: cover so no zooming on drag */
    .ba-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      -webkit-user-drag: none;
      user-select: none;
      pointer-events: none;
    }

    /* AFTER image is stacked on top and CROPPED via clip-path (not resized / moved) */
    .ba-img-before {
      clip-path: inset(0 50% 0 0); /* 50% split default */
    }

    .ba-slider {
      position: absolute;
      inset: 0;
      z-index: 5;
    }

    .ba-range {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 100%;
      background: transparent;
      margin: 0;
      cursor: col-resize;
      touch-action: none;
    }

    .ba-range::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 3px;
      height: 100%;
      background: transparent;
      cursor: col-resize;
    }

    .ba-range::-moz-range-thumb {
      width: 3px;
      height: 100%;
      background: transparent;
      border: none;
      cursor: col-resize;
    }

    /* HANDLE line is absolutely positioned relative to wrapper so it always aligns with clip edge */
    .ba-handle-line {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 3px;
      background: rgba(255, 255, 255, 0.9);
      pointer-events: none;
    }

    .ba-handle {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 44px;
      height: 44px;
      border-radius: 999px;
      border: 3px solid #ffffff;
      background: rgba(0, 0, 0, 0.45);
      transform: translate(-50%, -50%);
    }

    .ba-handle::before,
    .ba-handle::after {
      content: "";
      position: absolute;
      top: 50%;
      border: 7px solid transparent;
      transform: translateY(-50%);
    }

    .ba-handle::before {
      left: 26%;
      border-right-width: 0;
      border-left-color: #ffffff;
    }

    .ba-handle::after {
      right: 26%;
      border-left-width: 0;
      border-right-color: #ffffff;
    }

    .ba-before {
      position: absolute;
      top: 20px;
      left: 20px;
      padding: 8px;
      background-color: #fff;
      border-radius: 15px;
    }
    
    .ba-after {
        position: absolute;
        bottom: 20px;
        right: 20px;
        padding: 8px;
        background-color: #08003b;
        color: #fff;
        border-radius: 15px;
    }

    .ba-chip {
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.72);
      color: #e5e7eb;
      border: 1px solid rgba(148, 163, 184, 0.65);
      backdrop-filter: blur(10px);
    }