.ba-stage{position:relative;isolation:isolate;overflow:hidden;background:#f3f5f7;border:1px solid var(--line);border-radius:12px;--split:50%;touch-action:pan-y;cursor:ew-resize}

.ba-stage img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;pointer-events:none;user-select:none;transition:none!important;transform:none!important}

.ba-stage .ba-before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}

.ba-line{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#2540ff;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 0 1px #fff9}

.ba-handle{position:absolute;left:clamp(24px,var(--split),calc(100% - 24px));top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border:2px solid #fff;border-radius:50%;background:#2540ff;color:#fff;font:28px/1 var(--fb);display:grid;place-items:center;cursor:ew-resize;touch-action:none;padding:0;box-shadow:0 2px 12px #0003}

.ba-handle:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.ba-stage:has(.ba-handle:focus-visible){outline:3px solid var(--accent);outline-offset:3px}

.ba-label{position:absolute;top:12px;padding:7px 12px;font:600 12px var(--fb);border-radius:5px;pointer-events:none;box-shadow:0 1px 8px #0002}
.ba-old{left:12px;color:#15171b;background:#fff}
.ba-new{right:12px;background:#2540ff;color:#fff}

.ba-preview{aspect-ratio:2/1}
.portfolio-card-comparison .portfolio-card-heading a{color:inherit;text-decoration:none}
.portfolio-card-comparison .portfolio-card-heading a:hover{text-decoration:underline;text-underline-offset:4px}
.portfolio-status{display:inline-block;font:12px var(--fm);color:var(--muted);margin:10px 18px 0 0}
.portfolio-card-comparison .portfolio-card-link{color:var(--accent);text-decoration:none}
.portfolio-card-comparison a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}

.ba-error{position:absolute;z-index:2;left:12px;right:12px;bottom:12px;padding:12px;margin:0;background:var(--surface);color:var(--ink);font:14px/1.5 var(--fb);border:1px solid var(--line);border-radius:8px;cursor:default}
.ba-error[hidden]{display:none}
.ba-error button{color:var(--accent);background:none;border:0;text-decoration:underline;font:inherit;cursor:pointer}
.ba-stage.is-loading{background:repeating-linear-gradient(135deg,#f3f5f7,#f3f5f7 12px,#e9edf1 12px,#e9edf1 24px)}