@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;
    }
  }