:root {
  --toc-padding: 10px;
  --toc-margin: 20px;
  --toc-border: 1px solid #ddd;
  --toc-border-radius: 5px;
  --toc-bg-color: #f9f9f9;
  --toc-text-color: #444;
  --toc-hover-color: #005177;
  --toc-font-size: 1rem;
}
.toc-bound {
  margin: var(--toc-margin) 0;
  padding: var(--toc-padding);
  border: var(--toc-border);
  border-radius: var(--toc-border-radius);
  background-color: var(--toc-bg-color);
  max-width: 500px;
}
.toc-ctr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 1.15em;
}
.toc-toggle {
  background-color: transparent;
  color: #000;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 3px;
}
.toc {
  list-style-type: none;
  padding-left: 0;
  display: block;
  font-size: var(--toc-font-size);
}
.toc-hidden {
  display: none;
}
.toc > li {
  margin: 5px 0;
}
.toc-3,
.toc-4,
.toc-5,
.toc-6 {
  list-style-type: none;
  padding-left: calc(20px + (var(--level) - 3) * 20px);
}
.toc-3 {
  --level: 3;
}
.toc-4 {
  --level: 4;
}
.toc-5 {
  --level: 5;
}
.toc-6 {
  --level: 6;
}
.toc-sub > li a,
.toc > li a {
  text-decoration: none;
  color: var(--toc-text-color);
  font-size: 1em;
}
.toc-sub > li a:hover,
.toc > li a:hover {
  text-decoration: underline;
  color: var(--toc-hover-color);
}
@media (max-width: 768px) {
  .toc-bound {
    padding: 5px;
    margin: 10px 0;
  }
  .toc-sub > li a,
  .toc-toggle,
  .toc > li a {
    font-size: 0.9em;
  }
  .toc-toggle {
    padding: 8px 5px;
  }
  .toc {
    font-size: 0.9rem;
  }
  .toc > li {
    margin: 3px 0;
  }
  .toc-3,
  .toc-4,
  .toc-5,
  .toc-6 {
    padding-left: calc(20px + (var(--level) - 3) * 20px);
  }
}