.auto-toc {
  margin: 20px 0 28px;
  padding: 18px 20px;
  border: 1px solid var(--border, rgba(127,127,127,.25));
  border-radius: 18px;
  background: var(--surface, var(--card-bg, rgba(127,127,127,.08)));
  color: var(--text-primary, inherit);
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
.auto-toc summary { display:flex; align-items:center; gap:9px; font-weight:900; cursor:pointer; list-style:none; }
.auto-toc summary::-webkit-details-marker { display:none; }
.auto-toc summary::after { content:'⌄'; margin-inline-start:auto; transition:transform .2s ease; }
.auto-toc[open] summary::after { transform:rotate(180deg); }
.auto-toc ol {
  margin:16px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.auto-toc li { margin:0; padding:0; }
.auto-toc a {
  min-height:42px;
  padding:8px 16px;
  border:1px solid var(--border, rgba(127,127,127,.25));
  border-radius:999px;
  background:var(--light, var(--tile, rgba(127,127,127,.10)));
  color:inherit;
  text-decoration:none;
  font-weight:750;
  line-height:1.45;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.auto-toc a:hover,
.auto-toc a:focus-visible {
  color:#fff;
  background:var(--primary, #2196f3);
  border-color:var(--primary, #2196f3);
  transform:translateY(-1px);
  outline:none;
}
.auto-toc-target { scroll-margin-top:96px; }
html.dark-theme .auto-toc,
body.dark-theme .auto-toc { box-shadow:0 8px 24px rgba(0,0,0,.22); }
@media (max-width:640px) {
  .auto-toc { padding:15px 16px; border-radius:14px; }
  .auto-toc ol {
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:5px;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .auto-toc ol::-webkit-scrollbar { display:none; }
  .auto-toc li { flex:0 0 auto; scroll-snap-align:start; }
  .auto-toc a { white-space:nowrap; min-height:40px; padding:7px 14px; }
}