.compare{display:grid}.compare>*{grid-area:1 / 1}.compare .before{background:linear-gradient(to right,#ff69b4,#639);mask:linear-gradient(to right,#000 0,var(--pos,50%),#0000 0)}.compare .after{background:linear-gradient(to right,#0ff,#0f0);mask:linear-gradient(to right,#0000 0,var(--pos,50%),#000 0)}.compare>input[type=range]{z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.compare>input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:4px;height:100dvh;background-color:#d2691e}.compare>input[type=range]::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none}.compare img{width:100%}html{block-size:100%;color-scheme:dark light}body{font-family:sans-serif;display:grid}