.demo-slider-container[data-v-827b6aae]{animation:fadeSlideUp-827b6aae .5s cubic-bezier(.4,0,.2,1);background:#fff;border-radius:20px;box-shadow:0 1px 3px #0000000a,0 4px 16px #0000000f;padding:24px}.demo-header[data-v-827b6aae]{margin-bottom:20px;margin-top:-3px;overflow:visible;padding-bottom:4px;text-align:center}.demo-title[data-v-827b6aae]{color:var(--color-text-primary);display:inline-block;font-family:var(--font-display);font-size:22px;font-weight:600;line-height:1.45;margin:0;overflow:visible;padding-bottom:.14em}.demo-subtitle[data-v-827b6aae]{color:var(--color-text-secondary);font-size:13px;margin:0}.comparison-wrapper[data-v-827b6aae]{margin-bottom:0}.comparison-container[data-v-827b6aae]{--slider-position:50;aspect-ratio:3/4;border-radius:16px;box-shadow:0 8px 32px #0000001f;cursor:ew-resize;margin:0 auto;max-width:324px;overflow:hidden;position:relative;touch-action:none;width:100%;-webkit-touch-callout:none}.image-layer[data-v-827b6aae]{backface-visibility:hidden;inset:0;position:absolute}.image-layer picture[data-v-827b6aae]{display:block;height:100%;width:100%}.image-layer img[data-v-827b6aae]{height:100%;-o-object-fit:cover;object-fit:cover;-moz-user-select:none;user-select:none;width:100%;-webkit-user-drag:none;image-rendering:-webkit-optimize-contrast;-o-object-position:center;object-position:center;-webkit-user-select:none}.image-before-mask[data-v-827b6aae]{inset:0;overflow:hidden;position:absolute;transform:translate3d(calc((var(--slider-position) - 100)*1%),0,0);will-change:transform;z-index:2}.image-before[data-v-827b6aae]{transform:translate3d(calc((100 - var(--slider-position))*1%),0,0);will-change:transform}.image-label[data-v-827b6aae]{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#0009;border-radius:6px;color:#fff;font-size:11px;font-weight:500;padding:6px 12px;pointer-events:none;position:absolute;top:16px}.label-before[data-v-827b6aae]{left:16px}.label-after[data-v-827b6aae]{right:16px}.slider-handle[data-v-827b6aae]{left:0;pointer-events:none;transform:translate3d(calc((var(--slider-position) - 50)*1%),0,0);width:100%;will-change:transform;z-index:3}.slider-handle[data-v-827b6aae],.slider-line[data-v-827b6aae]{bottom:0;position:absolute;top:0}.slider-line[data-v-827b6aae]{background:#fff;box-shadow:0 0 10px #0000004d;left:50%;transform:translate3d(-50%,0,0);width:2px}.slider-button[data-v-827b6aae]{align-items:center;background:#fff;border-radius:50%;box-shadow:0 4px 16px #0003;color:var(--color-accent);display:flex;font-size:16px;height:40px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:transform .2s cubic-bezier(.4,0,.2,1);width:40px}.comparison-container:active .slider-button[data-v-827b6aae]{transform:translate(-50%,-50%) scale(1.1)}@keyframes fadeSlideUp-827b6aae{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1024px){.demo-slider-container[data-v-827b6aae]{padding:20px 20px 18px}.demo-header[data-v-827b6aae]{margin-bottom:14px}}@media(max-width:768px){.demo-slider-container[data-v-827b6aae]{padding:20px}.demo-title[data-v-827b6aae]{font-size:20px}.demo-subtitle[data-v-827b6aae]{font-size:12px}.comparison-container[data-v-827b6aae]{cursor:grab}.comparison-container[data-v-827b6aae]:active{cursor:grabbing}.slider-button[data-v-827b6aae]{font-size:18px;height:44px;width:44px}.image-label[data-v-827b6aae]{backdrop-filter:none;-webkit-backdrop-filter:none}.demo-slider-container[data-v-827b6aae]{animation-duration:.3s}}@media(max-width:480px){.demo-slider-container[data-v-827b6aae]{padding:16px}.demo-title[data-v-827b6aae]{font-size:18px}.image-label[data-v-827b6aae]{font-size:10px;padding:4px 8px;top:12px}.label-before[data-v-827b6aae]{left:12px}.label-after[data-v-827b6aae]{right:12px}}