<ul>
  <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>
</ul>

@counter-style style-fourth-item {
  system: fixed 4;
  symbols: "💠";
  prefix: " ";
  suffix: " ";
}

li {
  list-style: style-fourth-item;
}

@layer presentation {
  body {
    font-size: 1.5rem;
  }
  
  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;
  }
}