:root {
    --bg: #f5f2ed;
    --ink: #1a1714;
    --accent: #00E4FF;
    --muted: #7a7469;
    --rule: #d6d0c8;
    --toc-bg: #1a1714;
    --toc-fg: #f5f2ed;
    --toc-accent: #00E4FF;
    --radius: 2px;
}

/* ── TOC TRIGGER BUTTON ───────────────────────── */

 #toc-trigger {
   position: fixed;
   bottom: 36px;
   right: 36px;
   z-index: 900;

   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: var(--ink);
   border: none;
   cursor: pointer;

   display: flex;
   align-items: center;
   justify-content: center;

   box-shadow: 0 4px 24px rgba(0,0,0,.22), 0 1px 4px rgba(0,0,0,.12);
   transition: transform .2s ease, box-shadow .2s ease, background .2s;
 }
 #toc-trigger:hover {
   background: var(--accent);
   transform: scale(1.08);
   box-shadow: 0 6px 32px rgba(0,0,0,.28);
 }
 #toc-trigger:active { transform: scale(.96); }

 /* Hamburger → X icon */
 .toc-icon {
   width: 20px;
   height: 14px;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 .toc-icon span {
   display: block;
   height: 1.5px;
   background: var(--toc-fg);
   border-radius: 2px;
   transition: transform .28s ease, opacity .2s ease, width .2s ease;
   transform-origin: center;
 }
 .toc-icon span:nth-child(2) { width: 70%; }

 /* open state */
 #toc-trigger.open .toc-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
 #toc-trigger.open .toc-icon span:nth-child(2) { opacity: 0; width: 0; }
 #toc-trigger.open .toc-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

 /* ── TOC PANEL ────────────────────────────────── */

#toc-panel {
    position: fixed;
    bottom: 104px;
    right: 36px;
    z-index: 899;

    width: fit-content;
    background: var(--toc-bg);
    color: var(--toc-fg);
    border-radius: 4px;
    padding: 0;
    overflow: hidden;

    /* hidden state */
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px) scale(.97);
    transform-origin: bottom right;
    transition: opacity .25s ease, transform .25s ease;

    box-shadow: 0 8px 40px rgba(0,0,0,.35);

    .toc-header {
       padding: 16px 20px 12px;
       border-bottom: 1px solid rgba(255,255,255,.1);
       display: flex;
       align-items: baseline;
       gap: 10px;

       font-size: clamp(14px, calc(11.757px + 0.561vw), 20px);
       font-size: clamp(13px, calc(11.113px + 0.472vw), 18px);

       strong {
           letter-spacing: 0.0625em;
           text-transform: uppercase;
           color: var(--toc-accent);
       }

       em {
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: 0.032em;
           font-style: normal;
           color: rgba(255,255,255,.35);
       }
     }


}

#toc-panel.open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0) scale(1);
}


.toc-list::-webkit-scrollbar { width: 3px; }
.toc-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

.toc-list {
    list-style: none;
    padding: 8px 0 12px;
    max-height: 60vh;
    overflow-y: auto;

    li {
        position: relative;

        a {
            /* font-size: clamp(16px, calc(13.757px + 0.561vw), 22px);
            font-size: clamp(15px, calc(12.757px + 0.561vw), 21px); */
            font-size: clamp(14px, calc(11.757px + 0.561vw), 20px);
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: .0625em;

            display: flex;
            align-items: baseline;
            gap: 10px;
            /* padding: 7px 20px; */
            padding: 7px 30px 7px 15px;
            text-decoration: none;
            color: rgba(255,255,255,.8);
            line-height: 1.3;
            transition: color .15s, background .15s;

            &:hover {
              color: var(--toc-fg);
              background: rgba(255,255,255,.06);
            }

            &.active {
              color: var(--toc-fg);

              &::before {
                content: '';
                position: absolute;
                left: 0; top: 4px; bottom: 4px;
                width: 2px;
                background: var(--toc-accent);
                border-radius: 2px;
              }
            }
        }


        &.toc-level-2 a {
            /* padding-left: 16px; */
            font-weight: normal;
            text-transform: none;
            letter-spacing: 0;
            font-size: clamp(14px, calc(11.757px + 0.561vw), 20px);
            color: rgba(255,255,255,.5);

            &:hover {
              color: var(--toc-fg);
              background: rgba(255,255,255,.06);
            }
        }
    }
 }


 /* sub-label */
 .toc-sub {
   /* font-family: 'DM Mono', monospace; */
   font-size: .62rem;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: rgba(255,255,255,.3);
   white-space: nowrap;
   flex-shrink: 0;
 }

 /* section group divider */
 .toc-list .group-label {
   /* font-family: 'DM Mono', monospace; */
   font-size: .58rem;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: rgba(255,255,255,.25);
   padding: 12px 20px 4px;
   pointer-events: none;
 }

 /* progress bar at bottom */
 .toc-progress {
   height: 2px;
   background: rgba(255,255,255,.08);
   position: relative;
 }
 .toc-progress-bar {
   height: 100%;
   background: var(--toc-accent);
   width: 0%;
   transition: width .1s linear;
 }

 /* scroll-to-top pill inside panel */
 .toc-top {
   padding: 10px 20px 14px;
   border-top: 1px solid rgba(255,255,255,.08);
 }
 .toc-top button {
   width: 100%;
   background: rgba(255,255,255,.07);
   border: 1px solid rgba(255,255,255,.12);
   color: rgba(255,255,255,.5);
   /* font-family: 'DM Mono', monospace; */
   font-size: .65rem;
   letter-spacing: .15em;
   text-transform: uppercase;
   padding: 7px 12px;
   border-radius: 2px;
   cursor: pointer;
   transition: background .15s, color .15s;
 }
 .toc-top button:hover {
   background: rgba(255,255,255,.13);
   color: rgba(255,255,255,.85);
 }

 /* click outside overlay */
 #toc-overlay {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 898;
 }
 #toc-overlay.open { display: block; }


 .toc-level-2 a:hover { color: rgba(255,255,255,.8); }
 .toc-level-2 a.active { color: var(--toc-fg); }