type: y mandatory;
  scroll-padding: 40px;
}

.scroller section {
  scroll-snap-align: start;
}</textarea
    >

    <textarea class="playable playable-html" style="height: 230px">
<article class="scroller">
  <h1>Sticky Heading</h1>
  <section>
    <h2>Section one</h2>
  </section>
  <section>
    <h2>Section two</h2>
  </section>
  <section>
    <h2>Section three</h2>
  </section>
</article></textarea
    >

    <div class="playable-buttons">
      <input id="reset" type="button" value="Reset" />
    </di