:root{
  --sba-radius:16px; --sba-ratio:16/9; --sba-width:100%;
  --sba-line:#ffffff; --sba-line-w:2px; --sba-knob:#0ea5e9; --sba-knob-s:46px;
  --sba-fit:cover; --sba-pos-x:50%; --sba-pos-y:50%;
}
.sba-wrapper{ margin: 1.25rem auto; }
.sba-wrapper.align-center{ text-align:center; }
.sba-wrapper.align-left{ text-align:left; }
.sba-wrapper.align-right{ text-align:right; }

.sba{ --pos:50%; position:relative; width:var(--sba-width); max-width:100%;
  aspect-ratio:var(--sba-ratio); border-radius:0;
  overflow:hidden; background:#0b1324; box-shadow:0 12px 30px rgba(0,0,0,.15);
  user-select:none; touch-action:none; margin-inline:auto;
}
.sba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:var(--sba-fit);
  object-position: var(--sba-pos-x) var(--sba-pos-y); filter:brightness(.92);
  pointer-events:none;
}
.sba .sba-after{ z-index:1; }
.sba .sba-before{ z-index:2; clip-path:polygon(0 0, var(--pos) 0, var(--pos) 100%, 0 100%); }
.sba-dir--vertical .sba-before{ clip-path:polygon(0 0, 100% 0, 100% var(--pos), 0 var(--pos)); }

.sba .sba-handle{ position:absolute; inset:0 auto 0 var(--pos); transform:translateX(-50%); width:0; z-index:3; }
.sba-dir--vertical .sba-handle{ inset:var(--pos) 0 auto 0; transform:translateY(-50%); }
.sba .sba-handle::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:var(--sba-line-w); background:var(--sba-line);
  box-shadow:0 0 0 1px rgba(0,0,0,.18) inset;
}
.sba-dir--vertical .sba-handle::before{ left:0; right:0; top:50%; height:var(--sba-line-w); width:auto; }

.sba .sba-knob{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:var(--sba-knob-s); height:var(--sba-knob-s); border-radius:999px; border:3px solid #fff;
  background:var(--sba-knob); color:#fff; display:grid; place-items:center; font-weight:700;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.sba .sba-range{ position:absolute; inset:0; opacity:0; z-index:4; cursor:ew-resize; }
.sba-dir--vertical .sba-range{ cursor:ns-resize; }

/* Labels hover-only */
.sba .sba-chip{ position:absolute; top:12px; padding:6px 10px; border-radius:999px;
  font:600 12px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:rgba(255,255,255,.85); color:#0b1220; box-shadow:0 2px 10px rgba(0,0,0,.12);
  z-index:5; opacity:0; transition:opacity .25s ease;
}
.sba:hover .sba-chip{ opacity:1; }
.sba .sba-chip--before{ left:12px; }
.sba .sba-chip--after{ right:12px; }

.sba.sba--gradient .sba-knob{ background:linear-gradient(135deg,#0ea5e9,#6366f1,#22c55e); }
.sba.sba--minimal .sba-knob{ width:34px;height:34px;border-width:2px;background:#111;color:#fff; box-shadow:none; }
.sba.sba--split .sba-handle::before{ box-shadow:0 0 16px rgba(255,255,255,.8); }
.sba.sba--split .sba-knob{ background:#111;color:#fff;border-color:#fff; }

/* Meta below */
.sba-meta{ margin-top:14px; display:inline-block; max-width: 900px; }
.sba-title{ margin:0 0 6px; font:700 22px/1.3 Poppins, system-ui, sans-serif; color:#111; }
.sba-desc{ margin:0 0 12px; color:#444; line-height:1.6; }
.sba-btn{ display:inline-block; padding:10px 18px; border-radius:999px; background:#0ea5e9; color:#fff; text-decoration:none; font-weight:600; }
.sba-btn:hover{ filter:brightness(1.05); box-shadow:0 6px 18px rgba(14,165,233,.35); }

@media (max-width: 768px){
  .sba{ --sba-width:100%; }
  .sba-title{ font-size:20px; }
}