.toc-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #8ab89b;
  border-radius: 7px;
  background: transparent;
  color: #e9f6ed;
  font: 600 14px/1.5 system-ui, sans-serif;
  text-align: start;
  cursor: pointer;
}

.toc-toggle:focus-visible {
  outline: 3px solid #b9f7cb;
  outline-offset: 3px;
}

.course-navigation-panel[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .hero h1 {
    font-size: clamp(1.75rem, 1.25rem + 3vw, 2.375rem);
    line-height: 1.25;
  }

  .hero h1,
  .article h2,
  .chapter h2 {
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .sidebar.course-navigation {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 10px 20px;
  }

  .toc-toggle:not([hidden]) {
    display: inline-flex;
  }

  .course-navigation-panel {
    max-height: 70vh;
    max-height: 70svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block: 16px;
  }

  .sidebar .course-navigation-panel nav {
    display: block;
    overflow: visible;
  }

  .sidebar .course-navigation-panel nav > div {
    min-width: 0;
  }

  .main [id] {
    scroll-margin-top: 88px;
  }
}