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

  html {
    container-type: inline-size;

    /* uncomment below to see width change */
    /*     scrollbar-width: thin; */

    /* scrollbar thumb color (first) and track color */
    scrollbar-color: lightsalmon var(--bg-dark);
  }

  /*   
   scrollbar width = viewport - HTML width 
  */
  body {
    --scrollbar: calc(100vw - 100cqw);
  }

  header:after {
    counter-reset: val tan(atan2(var(--scrollbar), 1px));
  }
}

/* demo styles */

@layer presentation {
  html {
    --color: lch(85 19 21);
    --bg: lch(30 21 314);
    --bg-dark: lch(from var(--bg) calc(l - 10) c h);

    background-color: var(--bg);
    color: #FFFFFF;
    font-size: calc(0.9em + 0.5vw);
    font-family: "Lusitana", serif;
    font-weight: 400;
    line-height: 1.3;
  }

  body {
    margin: 0;
  }

  main,
  header {
    padding-inline: 2rem;
  }

  header {
    background-color: var(--bg-dark);
    color: lch(from var(--color) calc(l + 10) c h);
    font-size: calc(1.3rem + 1vw);
    position: sticky;
    top: 0;

    &:after {
      font-size: calc(2rem + 1vw);
      font-weight: 700;
    }
  }

  :any-link {
    color: lch(from var(--color) l c 100);

    &:hover,
    &:focus {
      color: lch(from var(--color) l c 200);
    }
  }
}