.video-compare {
      position: relative;
      display: block;
      margin: 0 auto;
      width: 100%;
      max-width: 960px;
      overflow: hidden;
      border-radius: var(--radius-media);
      box-shadow: var(--shadow-media);
      touch-action: pan-y;
      user-select: none;
      -webkit-user-select: none;
      cursor: col-resize;
      background: #000;
    }

    .video-compare video {
      display: block;
      width: 100%;
      height: auto;
    }

    .video-compare-before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .video-compare-before video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .video-compare-after video {
      display: block;
      width: 100%;
      height: auto;
    }

    .video-compare-separator {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: rgba(255, 255, 255, 0.85);
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
      z-index: 10;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    .video-compare:hover .video-compare-separator,
    .video-compare.dragging .video-compare-separator {
      opacity: 0.2;
    }

    .video-compare-handle {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(255, 255, 255, 0.5);
      z-index: 11;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      pointer-events: none;
      transition: background 0.25s ease, box-shadow 0.2s ease, transform 0.15s ease;
    }

    .video-compare:hover .video-compare-handle,
    .video-compare.dragging .video-compare-handle {
      background: radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
      box-shadow: 0 2px 20px rgba(108, 71, 255, 0.45), 0 0 0 3px rgba(108, 71, 255, 0.0);
    }

    .video-compare.dragging .video-compare-handle {
      transform: translate(-50%, -50%) scale(1.1);
    }

    .video-compare-left-arrow,
    .video-compare-right-arrow {
      display: block;
      width: 0;
      height: 0;
      border-style: solid;
      transition: transform 0.25s ease;
    }

    .video-compare-left-arrow {
      border-width: 5px 7px 5px 0;
      border-color: transparent #fff transparent transparent;
    }

    .video-compare-right-arrow {
      border-width: 5px 0 5px 7px;
      border-color: transparent transparent transparent #fff;
    }

    .video-compare:hover .video-compare-left-arrow,
    .video-compare.dragging .video-compare-left-arrow {
      transform: translateX(-3px);
    }

    .video-compare:hover .video-compare-right-arrow,
    .video-compare.dragging .video-compare-right-arrow {
      transform: translateX(3px);
    }

    .video-compare-label {
      position: absolute;
      top: 14px;
      padding: 5px 16px;
      border-radius: 999px;
      font-family: var(--font-head);
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #fff;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 5;
      pointer-events: none;
      white-space: nowrap;
    }

    .video-compare-label-before {
      left: 14px;
    }

    .video-compare-label-after {
      right: 14px;
    }