.df-ba-slider:not(.rendered)>[slot=handle],.df-ba-slider:not(.rendered)>[slot=second],.df-ba-slider:not(.rendered)~.df-ba-control{display:none}.df-ba-pane{display:block;isolation:isolate;margin:0;position:relative}.df-ba-img{display:block;width:100%}.df-ba-label{background-color:var(--df-ba-label-background,rgba(0,0,0,.6));color:var(--df-ba-label-color,#fff);margin:0;pointer-events:none;position:absolute;z-index:1}.df-ba-slider:focus{outline:none}.df-ba-focus .df-ba-slider{outline:2px solid var(--df-ba-focus-color,highlight);outline-offset:2px}.df-ba-framed .df-ba-slider{--divider-width:0;--divider-shadow:none}:where(.df-ba){margin:0;position:relative}:where(.df-ba-slider){--divider-width:var(--df-ba-divider-width,2px);--divider-color:var(--df-ba-divider-color,#fff);--divider-shadow:var(--df-ba-divider-shadow,0 0 4px rgba(0,0,0,.5));display:block;line-height:0;width:100%}:where(.df-ba-picture){display:block;line-height:0}:where(.df-ba-img){height:auto;object-fit:cover}:where(.df-ba-label){line-height:1.2;max-width:calc(100% - var(--df-ba-label-gap, 12px)*2)}:where(.df-ba-slider:not([direction=vertical]) .df-ba-label-before){left:var(--df-ba-label-gap,12px)}:where(.df-ba-slider:not([direction=vertical]) .df-ba-label-after){right:var(--df-ba-label-gap,12px)}:where(.df-ba-labels-start .df-ba-slider:not([direction=vertical]) .df-ba-label){top:var(--df-ba-label-gap,12px)}:where(.df-ba-labels-center .df-ba-slider:not([direction=vertical]) .df-ba-label){top:50%;translate:0 -50%}:where(.df-ba-labels-end .df-ba-slider:not([direction=vertical]) .df-ba-label){bottom:var(--df-ba-label-gap,12px)}:where(.df-ba-slider[direction=vertical] .df-ba-label-before){top:var(--df-ba-label-gap,12px)}:where(.df-ba-slider[direction=vertical] .df-ba-label-after){bottom:var(--df-ba-label-gap,12px)}:where(.df-ba-labels-start .df-ba-slider[direction=vertical] .df-ba-label){left:var(--df-ba-label-gap,12px)}:where(.df-ba-labels-center .df-ba-slider[direction=vertical] .df-ba-label){left:50%;translate:-50% 0}:where(.df-ba-labels-end .df-ba-slider[direction=vertical] .df-ba-label){right:var(--df-ba-label-gap,12px)}:where(.df-ba-handle){color:#fff;display:block;isolation:isolate;position:relative}:where(.df-ba-knob){--_size:var(--df-ba-handle-size,50px);align-items:center;box-sizing:border-box;display:flex;filter:drop-shadow(var(--df-ba-handle-shadow,0 0 5px rgba(0,0,0,.5)));font-size:calc(var(--_size)/2);justify-content:center;line-height:1;width:var(--_size)}:where(.df-ba-knob>svg){height:auto;width:100%}:where(.df-ba-slider:hover .df-ba-knob,.df-ba-focus .df-ba-knob){scale:var(--df-ba-handle-hover-scale,1)}@media(prefers-reduced-motion:no-preference){:where(.df-ba-knob){transition:scale .2s ease}}:where(.df-ba-framed .df-ba-knob){aspect-ratio:1;backdrop-filter:blur(var(--df-ba-frame-blur));border:var(--df-ba-divider-width,2px) solid var(--df-ba-divider-color,#fff);border-radius:50%;padding:calc(var(--_size)*.22)}:where(.df-ba-framed .df-ba-handle):after,:where(.df-ba-framed .df-ba-handle):before{background-color:var(--df-ba-divider-color,#fff);box-shadow:var(--df-ba-divider-shadow,0 0 4px rgba(0,0,0,.5));content:"";height:200vmax;left:50%;position:absolute;translate:-50% 0;width:var(--df-ba-divider-width,2px);z-index:-1}:where(.df-ba-framed .df-ba-handle):before{bottom:100%}:where(.df-ba-framed .df-ba-handle):after{top:100%}.df-ba-sr{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}@layer df-before-after{.df-ba:not(.df-ba-unstyled) .df-ba-label{border-radius:4px;font-size:.875em;font-weight:500;padding:.25em .75em}.df-ba:not(.df-ba-unstyled) .df-ba-caption{color:inherit;font-size:.875em;margin:.75em 0 0}}