.toc {
  overflow: hidden;
  color: var(--accent);
  background-color: var(--accent-50);
  border-radius: 10px;
}
.toc:has(.toc_list:empty) {
  display: none;
}
.toc_title {
  display: grid;
  grid-auto-flow: column;
  column-gap: 20px;
  place-items: center start;
  justify-content: space-between;
  width: 100%;
  padding: var(--margin-block);
  transition: padding 250ms ease-in-out;
}
.toc_title::after {
  width: var(--size);
  height: var(--size);
  content: "";
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none'%3E%3Cpath fill='%232A43B9' d='M12.35 14.3 20 21.95l7.65-7.65L30 16.67l-10 10-10-10 2.35-2.37Z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 250ms ease-in-out;
}
@media (min-width: 740px) {
  .toc_title::after {
    --size: 40px;
  }
}
@media (max-width: 739.98px) {
  .toc_title::after {
    --size: 28px;
  }
}
.toc_title.active {
  padding-bottom: var(--margin-heading);
}
.toc_title.active::after {
  transform: scaleY(-1);
}
.toc_list {
  position: relative;
  display: grid;
  padding: 0 var(--margin-block) var(--margin-block);
  overflow: hidden;
  counter-reset: toc;
}
@media (min-width: 740px) {
  .toc_list {
    row-gap: 8px;
  }
}
@media (max-width: 739.98px) {
  .toc_list {
    row-gap: 4px;
  }
}
.toc_list::after {
  position: absolute;
  inset-inline-start: 0;
  aspect-ratio: 328/135;
  pointer-events: none;
  content: "";
  background-color: var(--accent);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='328' height='135' fill='none'%3E%3Cg fill='%232A43B9' opacity='.1'%3E%3Cpath d='M209.5 135h50.71L328 67.5 260.21 0H209.5l67.78 67.5L209.5 135Z'/%3E%3Cpath d='M139.66 135h50.72l67.79-67.5L190.38 0h-50.72l67.8 67.5-67.8 67.5Z'/%3E%3Cpath d='M69.83 135h50.72l67.79-67.5L120.54 0h-50.7l67.78 67.5L69.83 135Z'/%3E%3Cpath d='M0 135h50.72l67.78-67.5L50.72 0H0l67.79 67.5L0 135Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
}
@media (min-width: 1200px) {
  .toc_list::after {
    bottom: -30px;
    width: 328px;
  }
}
@media (max-width: 1199.98px) {
  .toc_list::after {
    bottom: 0;
  }
}
@media (min-width: 740px) and (max-width: 1199.98px) {
  .toc_list::after {
    width: 186px;
  }
}
@media (max-width: 739.98px) {
  .toc_list::after {
    width: 150px;
  }
}
.toc_link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: var(--margin-heading);
  align-items: center;
  font-family: Ubuntu, sans-serif;
  font-weight: 500;
  counter-increment: toc;
}
.toc_link:hover, .toc_link:focus-visible {
  opacity: 0.8;
}
.toc_link::before {
  order: 2;
  content: counter(toc);
}
.toc_link::after {
  width: 100%;
  min-width: 100px;
  height: 1px;
  content: "";
  background-color: var(--accent);
}
@media (min-width: 740px) {
  .toc_link {
    padding: 4px;
    font-size: 22px;
  }
}
@media (max-width: 739.98px) {
  .toc_link {
    padding: 2px;
    font-size: 16px;
  }
}