.pms-ba{
  --pms-ba-accent:#DD343B;
  --pms-ba-handle:#DD343B;
  --pms-ba-border:#1F2C37;
  --pms-ba-radius:14px;
  --pms-ba-borderw:2px;
  --pms-ba-label-bg:rgba(31,44,55,0.85);
  --pms-ba-label-color:#fff;

  position:relative;
  width:100%;
  max-width:100%;
  border:var(--pms-ba-borderw) solid var(--pms-ba-border);
  border-radius:var(--pms-ba-radius);
  overflow:hidden;
  background:#000;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.pms-ba[data-width]{
  width:calc(var(--pms-ba-width,100) * 1%);
  margin-left:auto;
  margin-right:auto;
}

.pms-ba__viewport{
  position:relative;
  width:100%;
  height:100%;
  min-height:260px;
}

.pms-ba[data-heightmode="fixed"] .pms-ba__viewport{
  height:var(--pms-ba-height,420px);
  min-height:0;
}

.pms-ba__layer{
  position:absolute;
  inset:0;
}

.pms-ba__layer img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;

  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  mix-blend-mode:normal !important;

  -webkit-user-drag:none;
  user-drag:none;
  pointer-events:none;
}

.pms-ba__after{ will-change:clip-path; }

.pms-ba__divider{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.pms-ba__line{
  position:absolute;
  background:var(--pms-ba-accent);
  box-shadow:0 0 0 1px rgba(0,0,0,0.25);
}

.pms-ba[data-orientation="horizontal"] .pms-ba__line{
  top:0; bottom:0; width:3px;
  transform:translateX(-50%);
}
.pms-ba[data-orientation="vertical"] .pms-ba__line{
  left:0; right:0; height:3px;
  transform:translateY(-50%);
}

.pms-ba__handle{
  position:absolute;
  pointer-events:auto;
  display:grid;
  place-items:center;
  width:42px; height:42px;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.65), rgba(255,255,255,0.05) 55%),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,0.35), rgba(0,0,0,0.65) 65%),
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(0,0,0,0.25));
  border:2px solid rgba(255,255,255,0.35);
  box-shadow:0 12px 25px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(0,0,0,0.2);
  touch-action:none;
}

.pms-ba__handle::before{
  content:"PMS";
  font:700 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  letter-spacing:.12em;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
  transform:translateX(1px);
}

.pms-ba[data-glow="1"] .pms-ba__handle{
  box-shadow:
    0 12px 25px rgba(0,0,0,0.35),
    0 0 20px rgba(221,52,59,0.45),
    inset 0 0 0 2px rgba(0,0,0,0.2);
}

.pms-ba[data-orientation="horizontal"] .pms-ba__handle{
  top:50%;
  transform:translate(-50%,-50%);
}
.pms-ba[data-orientation="vertical"] .pms-ba__handle{
  left:50%;
  transform:translate(-50%,-50%);
}

.pms-ba__labels{ position:absolute; inset:0; pointer-events:none; }

.pms-ba__label{
  position:absolute;
  top:14px;
  padding:8px 10px;
  border-radius:999px;
  background:var(--pms-ba-label-bg);
  color:var(--pms-ba-label-color);
  font:700 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 10px 16px rgba(0,0,0,.25);
}
.pms-ba__label--before{ left:14px; }
.pms-ba__label--after{ right:14px; }

.pms-ba__reset{
  position:absolute;
  bottom:14px; right:14px;
  pointer-events:auto;
  appearance:none;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(31,44,55,.78);
  color:#fff;
  padding:9px 12px;
  border-radius:12px;
  font:700 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  letter-spacing:.08em;
  cursor:pointer;
  backdrop-filter:blur(10px);
}

.pms-ba__reset:focus-visible{
  outline:2px solid rgba(221,52,59,.9);
  outline-offset:2px;
}

.pms-ba[data-smooth="1"] .pms-ba__after,
.pms-ba[data-smooth="1"] .pms-ba__line,
.pms-ba[data-smooth="1"] .pms-ba__handle{
  transition:clip-path 260ms ease,left 260ms ease,top 260ms ease;
}
.pms-ba.is-dragging .pms-ba__after,
.pms-ba.is-dragging .pms-ba__line,
.pms-ba.is-dragging .pms-ba__handle{
  transition:none !important;
}

/* double safety against theme "white filter" */
.pms-ba:active img,
.pms-ba img:active,
.pms-ba:focus img,
.pms-ba:focus-within img{
  opacity:1 !important;
  filter:none !important;
}