@layer demo {
  .highlighted-text-shadow {
    text-shadow:
      /* regular text-shadow */
      0 .15ch 15px var(--shadow),
      /* text-shadow highlight */
      0 -2px 0 var(--highlight);
  }
}

@layer demo.support {
  :root {
    --hue: 320; /* change me */
    --bg: oklch(35% .3 var(--hue));
    --text: oklch(85% .1 var(--hue));
    --shadow: oklch(25% .2 var(--hue));
    --highlight: oklch(98% .05 var(--hue));
  }
  
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    background-color: var(--bg);
    color: var(--text);
  }

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

    display: grid;
    place-content: center;
    gap: 10vh;
  }
  
  h1 {
    font-size: 15vi;
    letter-spacing: -.15ch;
    line-height: .75;
  }
  
  small {
    max-inline-size: 30ch;
  }
}