main.learn {
  > nav {
    --nav-offset: calc(var(--offset) + 2rem);
    --line-gap: 0.5rem;
    --line-gutter: 1.25rem;
    --line-inset: 0.5rem;
    --line-step: 1rem;

    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;
    scroll-snap-type: y proximity;
    color: var(--gray);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
    text-transform: uppercase;

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

    summary {
      display: block;
      list-style: none;

      &::-webkit-details-marker {
        display: none;
      }
    }

    a {
      --line-width: calc(var(--line-indent) + var(--line-gutter));

      position: relative;
      display: block;
      scroll-snap-align: center;
      scroll-margin-block: var(--offset);
      color: inherit;
      text-decoration: none;
      border-radius: 0.25rem;
      margin-inline: 0 1rem;
      padding: 0.25rem;
      padding-inline-start: calc(var(--line-width) + var(--line-gap));

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: var(--line-inset);
        width: calc(var(--line-width) - var(--line-inset));
        translate: 0 -50%;
        border-block-start: 1px solid currentColor;
        opacity: 0.5;
        pointer-events: none;
      }

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

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

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

    ol ol {
      --line-indent: var(--line-step);
    }

    ol ol ol {
      --line-indent: calc(var(--line-step) * 2);
    }

    ol ol ol ol {
      --line-indent: calc(var(--line-step) * 3);
    }

    > ol {
      --line-indent: 0rem;
    }
  }
}