/* + before-after comparions slider styles: */

.compare {--slider-value:50%; --compare-handle-size:32px; position:relative; border:1px solid var(--border-color)}
.compare:has(.compare__input:focus-visible) {outline:2px solid var(--theme-color); outline-offset:2px}
.compare__bottom-image {width:100%; height:auto; display:block}
.compare__mask {position:absolute; top:0; left:0; height:100%; z-index:1; background:#fff; overflow:hidden; width:var(--slider-value)}
.compare__top-image {height:100%; width:auto}
.compare__input {appearance:none; -webkit-appearance:none; -webkit-tap-highlight-color:rgba(0,0,0,0); position:absolute; top:0; left:calc(var(--compare-handle-size)/-2); width:calc(100% + var(--compare-handle-size)); height:100%; opacity:0; z-index:2; cursor:col-resize; background-color:rgba(0,0,0,0)}
.compare__input::-moz-range-track {height:100%}
.compare__input::-moz-range-thumb {height:100%; border-radius:0; width:var(--compare-handle-size); border:none}
.compare__input::-webkit-slider-runnable-track {height:100%}
.compare__input::-webkit-slider-thumb {-webkit-appearance:none; appearance:none; height:100%; border-radius:0; width:var(--compare-handle-size); border:none}
.compare__separator {color:#333; position:absolute; top:0; height:100%; left:var(--slider-value); width:2px; margin-left:-1px; background:currentColor; z-index:1; pointer-events:none}
.compare__icon {position:absolute; z-index:2; width:var(--compare-handle-size); height:var(--compare-handle-size); top:50%; left:var(--slider-value); transform:translate(-50%, -50%); padding:6px; border:2px solid currentColor; border-radius:50%; background:#fff}
.compare__icon path {stroke-linecap:round; stroke-linejoin:round; stroke-width:2px}
.compare {transform-style:preserve-3d; --demo-green:#2ecc71; --demo-blue:#3498db; --demo-red:#e74c3c; --demo-blue-rgb:52 152 219} @media(min-width: 960px) {.compare {max-width:700px; width:700px}}
.compare--letters {aspect-ratio:20/13}
.compare--tiny-book {aspect-ratio:1456/816}
.compare__icon, .compare__top-image {max-width:none}
.compare .compare__top-image, .compare .compare__bottom-image {border-radius:0}
.compare {will-change:transform;transition:transform 1000ms, margin 1000ms}
.compare__mask, .compare__input, .compare__bottom-image, .compare__separator {will-change:transform; transition:transform 1000ms,outline 1000ms,box-shadow 1000ms,opacity 1000ms,margin 1000ms; transition-timing-function:ease-out; outline:2px solid rgba(0,0,0,0)}
.compare__input::-moz-range-thumb {transition-timing-function:ease-out; transition:outline 1000ms,background-color 1000ms; outline:2px solid rgba(0,0,0,0)}
.compare__input::-webkit-slider-thumb {transition-timing-function:ease-out; transition:outline 1000ms,background-color 1000ms; outline:2px solid rgba(0,0,0,0)}
.unstyled {aspect-ratio:20/13}
.unstyled__mask {width:var(--slider-value); border:1px solid var(--border-color); height:100%; display:inline-block; overflow:hidden; clear:both; margin:1rem 0}
img.unstyled__image {max-width:none; width:auto; height:100%; border-radius:0}
.unstyled__input {accent-color:var(--theme-color); width:100%; margin-top:-100px; position:relative}