@layer demo {
  .compare {
	display: grid;

	> * {
	  grid-area: 1 / 1;
	}

	> section {
	  display: grid;
	  place-content: center;
	}

	.before {
	  mask: linear-gradient(to right, #000 0, var(--pos, 50%), #0000 0);
	}

	.after {
	  mask: linear-gradient(to right, #0000 0, var(--pos, 50%), #000 0);
	}

	> input[type="range"] {
	  z-index: 1;
	  appearance: none;
	  background: transparent;
	  cursor: pointer;
	  -webkit-tap-highlight-color: transparent;

	  &::-webkit-slider-thumb {
		appearance: none;
		inline-size: 4px;
		block-size: 100dvh;
		background-color: CanvasText;
	  } 

	  &::-moz-range-thumb {
		appearance: none;
		inline-size: 4px;
		block-size: 100dvh;
		background-color: CanvasText;
	  }
	}
  }

  img {
	max-block-size: 80dvh;
	max-inline-size: 100%;
  }
}

@layer demo.support {
  * {
	box-sizing: border-box;
	margin: 0;
  }

  html {
	block-size: 100%;
	color-scheme: dark light;
  }

  body {
	min-block-size: 100%;
	font-family: system-ui, sans-serif;
	display: grid;
  }
}