.ba{--ba-pos:50;--ba-ease:var(--t-panel) var(--ease-out);margin:0}.ba__frame{isolation:isolate;aspect-ratio:4/3;border-radius:var(--radius-xl);background:var(--c-mist);box-shadow:var(--shadow-2);touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;position:relative;overflow:clip;container-type:inline-size}.ba.is-ready .ba__frame{cursor:ew-resize}.ba__img{object-fit:cover;pointer-events:none;width:100%;max-width:none;height:100%;position:absolute;inset:0}.ba__clean,.ba__clean-inner{pointer-events:none;transition:transform var(--ba-ease);position:absolute;inset:0}.ba__clean{z-index:1;transform:translate3d(calc((var(--ba-pos) - 100) * 1%), 0, 0);overflow:hidden}.ba__clean-inner{transform:translate3d(calc((100 - var(--ba-pos)) * 1%), 0, 0)}.ba__frame>.fx-vignette,.ba__frame>.fx-grain{z-index:2}.ba__frame>.fx-vignette{--vignette:.26}.ba__range{z-index:4;opacity:0;pointer-events:none;-webkit-appearance:none;appearance:none;width:100%;height:100%;margin:0;position:absolute;inset:0}.ba__divider{z-index:3;pointer-events:none;transform:translate3d(calc(var(--ba-pos) * 1%), 0, 0);transition:transform var(--ba-ease);position:absolute;inset:0}.ba__wet{background:linear-gradient(90deg,#fff0 0%,#ffffff1a 55%,#ffffff57 88%,#ffffff9e 100%);width:28px;margin-right:-2px;position:absolute;top:0;bottom:0;right:100%}.ba__bar{backdrop-filter:blur(6px)saturate(150%);background:linear-gradient(90deg,#ffffffd9,#ffffff6b 55%,#9fd3dcbf);width:5px;position:absolute;top:0;bottom:0;left:-2.5px;box-shadow:0 0 0 .5px #ffffff80,1px 0 #0e1d222e,0 0 22px #0e1d2247}.ba__handle{backdrop-filter:blur(12px)saturate(160%);width:48px;height:92px;translate:clamp(calc(32px - var(--ba-pos) * 1cqw), 0px, calc((100 - var(--ba-pos)) * 1cqw - 32px)) 0;transition:translate var(--ba-ease), box-shadow var(--t-hover) var(--ease-out);background:linear-gradient(160deg,#ffffff9e,#ffffff1f 55%),#f3f5f294;border:1px solid #ffffffb3;border-radius:24px;place-items:center;margin-top:-46px;display:grid;position:absolute;top:50%;left:-24px;box-shadow:inset 0 1px #fffc,inset 0 -1px #9fd3dc80,0 1px 2px #0e1d221f,0 14px 32px -12px #0e1d228c}.ba__squeegee{width:48px;height:88px;display:block;overflow:visible}.ba__grip{fill:var(--c-teal)}.ba__channel{fill:var(--c-night)}.ba__glint{fill:var(--c-sky);opacity:.9}.ba__rubber{fill:#26363b}.ba__chevron{fill:none;stroke:var(--c-night);stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;opacity:.55}.ba__range:focus-visible~.ba__divider .ba__handle{box-shadow:inset 0 1px 0 #fffc, 0 0 0 2px var(--c-day), 0 0 0 4px var(--c-teal), 0 14px 32px -12px #0e1d228c}.ba.is-dragging .ba__clean,.ba.is-dragging .ba__clean-inner,.ba.is-dragging .ba__divider,.ba.is-dragging .ba__handle{transition:none}.ba.is-dragging .ba__frame{cursor:grabbing}.ba__label{margin-top:var(--s-4);font-size:var(--fs-small);color:var(--text-muted);text-align:center}@media (width<=860px),(height<=500px){.ba__frame{border-radius:var(--radius-l)}}@media (prefers-reduced-transparency:reduce){.ba__bar,.ba__handle{backdrop-filter:none;background:var(--c-day);border-color:var(--c-mist)}}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.ba__handle{background:var(--c-day);border-color:var(--c-mist)}}@media (prefers-contrast:more){.ba__handle{backdrop-filter:none;background:var(--c-day);border:1px solid var(--c-night)}.ba__bar{background:var(--c-day);box-shadow:0 0 0 1px var(--c-night)}.ba__wet{display:none}}@media (forced-colors:active){.ba__handle{backdrop-filter:none;background:canvas;border:1px solid canvastext}.ba__bar{backdrop-filter:none;background:canvastext}.ba__wet{display:none}.ba__grip,.ba__channel,.ba__rubber,.ba__glint{fill:canvastext}.ba__chevron{stroke:canvastext}.ba__range:focus-visible~.ba__divider .ba__handle{outline-offset:2px;outline:2px solid highlight}}@media print{.ba__divider{display:none}}