html:has(.site-toc:not([hidden])) {
    scroll-padding-top:112px;
}

.site-toc {
    position:fixed;
    top:116px;
    z-index:40;
    width:228px;
    max-height:calc(100vh - 136px);
    overflow:hidden;
    padding:12px 14px 14px;
    border:1px solid rgba(0,255,230,.14);
    border-radius:10px;
    background:rgba(6,16,24,.9);
    box-shadow:0 18px 40px rgba(0,0,0,.38);
    -webkit-backdrop-filter:blur(16px);
            backdrop-filter:blur(16px);
}

.site-toc[hidden],
.site-toc-backdrop[hidden] {
    display:none !important;
}

.site-toc--left {
    left:16px;
}

.site-toc--right {
    right:16px;
    left:auto;
}

.site-toc.is-collapsed {
    width:auto;
    max-height:none;
    padding:8px 12px;
}

.site-toc__head {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
}

.site-toc__title {
    margin:0;
    color:#f4fbfc;
    font-size:14px;
    font-weight:700;
    line-height:1.3;
}

.site-toc__hide {
    padding:0;
    border:0;
    background:transparent;
    color:#a8bdc7;
    font-family:inherit;
    font-size:12px;
    line-height:1.3;
    cursor:pointer;
}

.site-toc__hide:hover {
    color:#00ffe6;
}

.site-toc__body {
    margin-top:10px;
    max-height:calc(100vh - 190px);
    overflow-x:hidden;
    overflow-y:auto;
}

.site-toc.is-collapsed .site-toc__body {
    display:none;
}

.site-toc__list,
.site-toc__list ul {
    margin:0;
    padding:0;
    list-style:none;
}

.site-toc__list ul {
    padding-left:18px;
}

.site-toc__list>li {
    position:relative;
}

.site-toc__list a {
    display:block;
    padding:4px 0;
    color:#8fb0bc;
    font-size:13px;
    line-height:1.35;
    text-decoration:none;
    transition:color .2s;
}

.site-toc__list>li.has-children>a {
    padding-left:18px;
}

.site-toc__list a:hover {
    color:#00ffe6;
}

.site-toc__list a.is-active {
    color:#00ffe6;
    font-weight:700;
}

.site-toc__list ul a {
    color:#7a9aa6;
}

.site-toc__list ul a.is-active {
    color:#00ffe6;
}

.site-toc__expand {
    position:absolute;
    top:5px;
    left:0;
    display:flex;
    width:14px;
    height:14px;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    background:transparent;
    color:#a8bdc7;
    cursor:pointer;
}

.site-toc__expand svg {
    display:block;
    width:11px;
    height:11px;
    transition:transform .18s ease;
}

.site-toc__list>li.has-children:not(.is-open)>.site-toc__expand svg {
    transform:rotate(-90deg);
}

.site-toc__list>li.has-children:not(.is-open)>ul {
    display:none;
}

.site-toc__expand:hover {
    color:#00ffe6;
}

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

@media (max-width:1119px) {
    html.toc-sheet-open {
        overflow:hidden;
    }

    html:has(.site-toc:not([hidden])) {
        scroll-padding-top:88px;
    }

    .site-toc-backdrop.is-visible {
        display:block;
        position:fixed;
        inset:0;
        z-index:48;
        background:rgba(6,16,24,.42);
        -webkit-backdrop-filter:blur(2px);
                backdrop-filter:blur(2px);
    }

    .site-toc {
        top:auto;
        right:auto;
        bottom:max(148px, calc(env(safe-area-inset-bottom, 0px) + 132px));
        left:max(16px, env(safe-area-inset-left, 0px));
        z-index:49;
        width:auto;
        max-width:min(280px, calc(100vw - 32px));
        max-height:none;
        transform-origin:left bottom;
        cursor:pointer;
    }

    .site-toc.is-collapsed {
        width:auto;
        max-height:none;
        padding:10px 14px;
        border-radius:999px;
        box-shadow:0 10px 28px rgba(0,0,0,.4);
    }

    .site-toc.is-collapsed .site-toc__head {
        position:relative;
        gap:0;
    }

    .site-toc.is-collapsed .site-toc__title {
        display:flex;
        align-items:center;
        gap:8px;
        font-size:13px;
    }

    .site-toc.is-collapsed .site-toc__title:before {
        content:"";
        width:12px;
        height:10px;
        border-top:1.5px solid #00ffe6;
        border-bottom:1.5px solid #00ffe6;
        background:linear-gradient(#00ffe6,#00ffe6) center / 100% 1.5px no-repeat;
    }

    .site-toc.is-collapsed .site-toc__hide {
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        opacity:0;
        font-size:0;
    }

    .site-toc:not(.is-collapsed) {
        width:min(280px, calc(100vw - 32px));
        max-height:min(62vh, 440px);
        padding:12px 14px 14px;
        border-radius:16px;
        cursor:default;
    }

    .site-toc:not(.is-collapsed) .site-toc__body {
        margin-top:10px;
        max-height:min(48vh, 340px);
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }
}