Многоуровневый нумерованный список

HTML

<ol class="numbered">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    <ol>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        <ol>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    <ol>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    </ol>
  </li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    <ol>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    </ol>
  </li>
</ol>

CSS

@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');


* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 40px;
  font-family: 'Neucha', cursive;
}


.numbered,
.numbered ol {
  list-style: none;
  counter-reset: li;
  padding: 0;
}

.numbered>li {
  font-weight: bold;
}

.numbered li:before {
  counter-increment: li;
  content: counters(li, ".") ". ";
}

.numbered ol {
  font-weight: normal;
}