.toc-bar {
  position: sticky;
  top: -1px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 0 -1rem;
  padding: .75rem 1rem;
  background: color-mix(in srgb, var(--background, #fff) 92%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid transparent;
  transition: border-color .15s, box-shadow .15s;
}
.toc-bar.is-stuck { border-bottom-color: var(--border, #e2e8f0); box-shadow: 0 6px 12px -10px rgba(15, 23, 42, .25); }
.toc-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: .4rem .9rem;
  border: 1px solid #94a3b8;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #334155;
  background: transparent;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.toc-pill:hover { border-color: #2563eb; color: #2563eb; }
.toc-pill.is-active { background: #0f172a; border-color: #0f172a; color: #fff; }
.article-body h2[id] { scroll-margin-top: 5.5rem; }

@media (max-width: 767px) {
  .toc-bar { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .toc-bar::-webkit-scrollbar { display: none; }
}