<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
</ol>

@counter-style padded {
  system: extends decimal;
  pad: 3 "0";
}

li {
  list-style: padded;
}

@layer presentation {
  body {
    font-size: 1.5rem;
    place-items: center;
  }
  
  ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

@layer base {
  html {
    background-color: #262626;
    background-position: top center;
    background-repeat: no-repeat;
    background-image:
      radial-gradient(50% 50% at top center, rgb(0 0 0 / 0.66), #262626),
      linear-gradient(180deg, #fff, #262626);
    background-size: 120% 2000px, 100% 2000px;
  }
  
  body {
    color: #fff;
    display: grid;
    font-family: system-ui;
    margin: 0;
    overflow-x: hidden;
  }
}