main.learn {
  > nav {
    --nav-offset: calc(var(--offset) + 2rem);

    counter-reset: content-theme;
    position: sticky;
    top: 0;
    max-height: 100dvh;
    margin-left: -1rem;
    padding-block: var(--nav-offset) var(--offset);
    padding-left: 0.5rem;
    overflow: auto;
    overscroll-behavior: contain;
    color: var(--gray);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
    text-transform: uppercase;

    ol {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    li + li {
      margin-block-start: 0.25rem;
    }

    a {
      display: block;
      scroll-margin-block: var(--offset);
      color: inherit;
      text-decoration: none;
      margin-block: -0.25rem;
      margin-inline: -0.5rem 1rem;
      padding: 0.25rem;
      padding-inline-start: 0.5rem;

      &::before {
        opacity: 0.5;
        text-transform: none;
      }

      &:is(:hover, :active) {
        border-radius: 0.25rem;
      }

      &[aria-current="location"] {
        color: var(--white);
      }

      &:hover {
        color: var(--black);
        background-color: var(--white);
      }

      &:active {
        color: var(--black);
        background-color: var(--orange);
      }
    }

    ol ol {
      margin-block-start: 0.25rem;
      margin-inline-start: 1rem;
    }

    ol ol ol ol {
      margin-inline-start: 0.5rem;
    }

    > ol {
      > li {
        counter-reset: content-topic;

        &:not([data-numbered="false"]) {
          counter-increment: content-theme;
        }

        > a::before {
          content: counter(content-theme, upper-roman) ". ";
        }

        &[data-numbered="false"] > a::before {
          content: "I. ";
          visibility: hidden;
        }

        > ol {
          > li {
            counter-increment: content-topic;
            counter-reset: content-detail;

            > a::before {
              content: counter(content-topic) ". ";
            }

            > ol {
              > li {
                counter-increment: content-detail;
                counter-reset: content-subtopic;

                > a::before {
                  content: counter(content-detail, lower-alpha) ". ";
                }

                > ol {
                  > li {
                    counter-increment: content-subtopic;

                    > a::before {
                      content: counter(content-subtopic, lower-alpha) ". ";
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}