@media only screen and (min-width: 961px) {
  #toc-auto.reading-toc-left {
    border-left: 0;
    border-right: 1px solid var(--blog-border);
    padding: 0 1rem 0 0;
  }

  #toc-auto.reading-toc-left .toc-title {
    color: var(--blog-text);
    font-size: 0.95rem;
    letter-spacing: 0;
    margin-top: 0.25rem;
  }

  #toc-auto.reading-toc-left .toc-content {
    max-height: calc(100dvh - 7rem);
    overflow: auto;
    padding-right: 0.25rem;
  }

  #toc-auto.reading-toc-left .toc-content a {
    color: var(--blog-text-weak);
    line-height: 1.5;
  }

  #toc-auto.reading-toc-left .toc-content a.active {
    color: var(--blog-link);
  }
}

.reading-toc-toggle,
.reading-toc-backdrop {
  display: none;
}

.reading-toc-empty {
  display: none !important;
}

@media only screen and (max-width: 960px) {
  #toc-static {
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
    backdrop-filter: blur(14px) saturate(1.08);
    background: rgb(255 255 255 / 0.88);
    border: 1px solid rgb(216 221 216 / 0.82);
    border-left: 0;
    border-radius: 0 20px 20px 0;
    bottom: auto;
    box-shadow: 0 4px 14px rgb(24 31 26 / 0.12);
    display: block !important;
    left: 0;
    margin: 0;
    max-height: min(62dvh, 34rem);
    max-width: calc(100vw - 4.5rem);
    overflow: hidden;
    position: fixed;
    top: max(5.25rem, calc(env(safe-area-inset-top) + 5rem));
    transform: translateX(calc(-100% - 0.5rem));
    transition: transform 180ms ease-out;
    width: min(62vw, 15rem);
    z-index: var(--blog-z-modal);
  }

  body[theme='dark'] #toc-static {
    background: rgb(29 33 30 / 0.88);
    border-color: rgb(57 65 59 / 0.84);
    box-shadow: 0 5px 16px rgb(0 0 0 / 0.28);
  }

  body.reading-toc-open #toc-static {
    transform: translateX(0);
  }

  #toc-static .toc-title {
    display: none;
  }

  #toc-static .toc-content {
    max-height: min(62dvh, 34rem);
    overscroll-behavior: contain;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  #toc-static .toc-content > nav > ul {
    margin: 0;
    padding: 0.8rem 0.9rem 0.9rem 1.15rem;
  }

  #toc-static .toc-content a {
    color: var(--blog-text);
    display: block;
    font-size: 0.92rem;
    line-height: 1.45;
    padding: 0.18rem 0;
  }

  .reading-toc-toggle {
    align-items: center;
    -webkit-backdrop-filter: blur(12px) saturate(1.08);
    backdrop-filter: blur(12px) saturate(1.08);
    background: rgb(255 255 255 / 0.72);
    border: 1px solid rgb(216 221 216 / 0.78);
    border-left: 0;
    border-radius: 0 999px 999px 0;
    box-shadow: 0 3px 10px rgb(24 31 26 / 0.1);
    color: var(--blog-text);
    display: inline-flex;
    font-size: 0;
    height: 4.35rem;
    justify-content: center;
    left: 0;
    line-height: 1;
    padding: 0;
    position: fixed;
    top: max(45dvh, calc(env(safe-area-inset-top) + 9rem));
    transform: translateX(0);
    transition: transform 180ms ease-out, opacity 180ms ease-out;
    width: max(2.2rem, calc(env(safe-area-inset-left) + 2.2rem));
    z-index: var(--blog-z-tooltip);
  }

  body[theme='dark'] .reading-toc-toggle {
    background: rgb(29 33 30 / 0.72);
    border-color: rgb(57 65 59 / 0.78);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.24);
  }

  .reading-toc-toggle::before {
    background: currentColor;
    border-radius: 999px;
    box-shadow: 0 -0.45rem 0 currentColor, 0 0.45rem 0 currentColor;
    content: "";
    height: 2px;
    line-height: 1;
    opacity: 0.72;
    width: 0.9rem;
  }

  body.reading-toc-open .reading-toc-toggle {
    opacity: 0;
    pointer-events: none;
  }

  .reading-toc-backdrop {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #toc-static,
  .reading-toc-backdrop {
    transition: none;
  }
}