:root {
  --toc-bg-color: #fff;
  --toc-section-bg-color: rgba(0,0,0,0.04);
  --toc-h3-color: #555;
  --toc-h4-color: #666;
  --toc-border: #e6e6e6;
}

html.dark-mode {
  --toc-bg-color: #141414;
  --toc-section-bg-color: rgba(255,255,255,0.2);
  --toc-h3-color: #cfd8dc;
  --toc-h4-color: #b0bec5;
  --toc-border: #262626;
}

#my-toc, .section-nav {
  background: var(--toc-bg-color);
  border: 1px solid var(--toc-border);
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
}

.section-nav {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.section-nav .toc-entry {
  margin: 0.35rem 0;
}

.section-nav ul {
  margin: .3rem 0 0 1rem;
  padding-left: 0;
  list-style: none;
}

.section-nav a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
  padding: 2px 4px;
  border-radius: 3px;
}

.section-nav a:hover,
.section-nav a:focus {
  background: var(--toc-section-bg-color);
  outline: none;
}

.section-nav .toc-h2 a { font-size: 0.95em; }
.section-nav .toc-h3 a { font-size: 0.9em; color: var(--toc-h3-color); }
.section-nav .toc-h4 a { font-size: 0.88em; color: var(--toc-h4-color); }