body {
    counter-reset: section -1 subsection -1 subsubsection -1;
}

h2::before {
    content: counter(section) ". ";
}

h2 {
    counter-increment: section;
    counter-set: subsection -1 subsubsection -1;
    --attr(id): counter(section);
}

h3::before {
    content: counter(section) "." counter(subsection) ". ";
}

h3 {
    counter-increment: subsection;
    counter-set: subsubsection -1;
}

h4::before {
    content: counter(section) "." counter(subsection) "." counter(subsubsection) ". ";
}

h4 {
    counter-increment: subsubsection;
}

.appendix {
    counter-set: section 0 subsection 0 subsubsection 0;
}

.appendix {
    counter-set: section 0 subsection 0 subsubsection 0;

    h2::before {
        content: counter(section, upper-alpha) ". ";
    }

    h3::before {
        content: counter(section, upper-alpha) "." counter(subsection, upper-alpha) ". ";
    }

    h4::before {
        content: counter(section, upper-alpha) "." counter(subsection, upper-alpha) "." counter(subsubsection, upper-alpha) ". ";
    }
}