/*  ============= TOC =============  */
.toc {
  display: none;
  position: fixed;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1; }
  .toc a {
    display: block;
    padding: 12px 0;
    position: relative;
    color: #999;
    text-decoration: none;
    transition: color .3s;
    max-height: 3rem;
    display: flex;
    align-items: center; }
  .toc a.active {
    color: white; }
  .toc svg {
    width: 4rem; }

.active-bg {
  position: absolute;
  inset: 0;
  background: #ffffff22;
  border-radius: 8px;
  z-index: -1; }

.toc-marker {
  position: absolute;
  left: 0;
  width: 4px;
  border-radius: 99px;
  background: currentColor; }

@media (min-width: 375px) {
  	.toc {
    	display: block;
    	left: -10px;
	}
	/* body:has(.main-body .main-content .aside:not(:empty)) .toc { */
	body:has(.main-body .main-content .content .richContent) .toc {
		display: none;
	}
}

@media (min-width: 900px) {
	.toc {
    	left: 40px;
	}
}
@media (min-width: 1080px) {
	/* body:has(.main-body .main-content .aside:not(:empty)) .toc { */
	body:has(.main-body .main-content .content .richContent) .toc {
		display: block;
    	left: -10px;
	}
}
@media (min-width: 1700px) {
	.toc {
    	left: 40px !important;
	}
}