@property --num {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

.question-1 {
  timeline-scope: --question-1;
}

.scroller {
  padding: 2rem;
  height: 100px;
  border: 10px solid black;
  overflow: auto;
  scroll-timeline: --question-1 block;
  margin-block-end: 1rem;
  > span {
    display: block;
    height: 2000px;
  }
  > div {
    position: sticky;
    top: 40px;
    text-align: center;
  }
}

.number {
  position: sticky;
  top: 0;
  font-size: 72px;
  text-align: center;

  animation: counter linear both;
  animation-timeline: --question-1;

  span {
    display: grid;
  }

  @container style(--num: 88) {
    span::before {
      content: "Correct!";
      display: block;
      color: green;
      font-size: 36px;
    }
  }

  span::after {
    counter-set: num var(--num);
    content: counter(num);
  }
}

@supports not (scroll-timeline: --x) {
  .number::after {
    font-size: 20px;
    color: red;
    content: "No support.";
  }
}

@keyframes counter {
  from {
    --num: 0;
  }
  to {
    --num: 100;
  }
}

html {
  font-family: system-ui;
  font-variation-settings: "wght" 900, "wdth" 700;
}
body {
  margin: 0;
  padding: 2rem;
}