<h1 id="demo">@property</h1>

@import "https://unpkg.com/open-props/easings.min.css" layer(demo.support);

@property --size {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@layer demo {
  h1 {
    box-shadow: 0 0 0 var(--size) Highlight;
    transition: --size 1s var(--ease-spring-4);
    
    &:hover {
      --size: 100px;
    }
  }
}

@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;
    place-content: center;
    place-items: center;
    gap: 15vmin;
  }
}