@counter-style circled {
  system: fixed;
  symbols: "\2460" "\2461" "\2462" "\2463" "\2464" "\2465" "\2466" "\2467"
           "\2468" "\2469" "\246A" "\246B" "\246C" "\246D" "\246E" "\246F"
           "\2470" "\2471" "\2472" "\2473";
  speak-as: numbers;
  suffix: " ";
}

@counter-style inv-circled {
  system: fixed;
  symbols: "\278A" "\278B" "\278C" "\278D" "\278E" "\278F" "\2790" "\2791"
           "\2792" "\2793" "\24EB" "\24EC" "\24ED" "\24EE" "\24EF" "\24F0"
           "\24F1" "\24F2" "\24F3" "\24F4";
  speak-as: numbers;
  suffix: " ";
}

main h1 {
  &:not(.unnumbered) { counter-increment: h1; }

  &::before {
    font-family: PragmataPro;
    font-style: normal;
    content: counter(h1, inv-circled);
    padding-right: 1ex;
  }
  &.unnumbered::before { content: "\2B8A"; }
}