:root {
    --gray-0: #ffffff;
    --gray-1: #fcfcfc;
    --gray-2: #f9f9f9;
    --gray-3: #f0f0f0;
    --gray-4: #e8e8e8;
    --gray-5: #e0e0e0;
    --gray-6: #d9d9d9;
    --gray-7: #cecece;
    --gray-8: #bbbbbb;
    --gray-9: #8d8d8d;
    --gray-10: #838383;
    --gray-11: #4b4b4b;
    /* change to darker gray for legibility */
    --gray-12: #202020;

    --gray-alpha-3: #0000000e;

    --red-10: #e3325e;
    --blue-10: #0588f0;
    --green-10: #2b9a66;
    --orange-10: #ef5f00;
    --yellow-10: #f1a600;
    --sky-10: #32c6f6;
    --amber-2: #fefbe9;
    --amber-6: #f3d673;
    --amber-12: #4f3422;

    --highlight-active: #ffffff4d;
    --visited-link: #a144af;

    --primary-1: #0080ff04;
    --primary-2: #008cff0b;
    --primary-3: #008ff519;
    --primary-4: #009eff2a;
    --primary-5: #0093ff3d;
    --primary-6: #0088f653;
    --primary-7: #0083eb71;
    --primary-8: #0084e6a1;
    --primary-9: #0090ffff;
    --primary-10: #0086f0fa;
    --primary-11: #006dcbf2;
    --primary-12: #002359ee;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --gray-0: #000000;
        --gray-1: #111111;
        --gray-2: #191919;
        --gray-3: #222222;
        --gray-4: #2a2a2a;
        --gray-5: #313131;
        --gray-6: #3a3a3a;
        --gray-7: #484848;
        --gray-8: #606060;
        --gray-9: #6e6e6e;
        --gray-10: #7b7b7b;
        /* change to lighter gray for legibility */
        --gray-11: #cccccc;
        --gray-12: #eeeeee;

        --gray-alpha-3: #ffffff21;

        --red-10: #ec5d5e;
        --blue-10: #3b9eff;
        --green-10: #33b074;
        --orange-10: #ff801f;
        --yellow-10: #ffef5c;
        --sky-10: #a8eeff;
        --amber-2: #1d180f;
        --amber-6: #5c3d05;
        --amber-12: #ffe7b3;

        --highlight-active: #ffffffb2;
        --visited-link: #ffa51f;

        --primary-1: #d1510004;
        --primary-2: #f9b4000b;
        --primary-3: #ffaa001e;
        --primary-4: #fdb70028;
        --primary-5: #febb0036;
        --primary-6: #fec40046;
        --primary-7: #fdcb225c;
        --primary-8: #fdca327b;
        --primary-9: #ffe629ff;
        --primary-10: #ffff57ff;
        --primary-11: #fee949f5;
        --primary-12: #fef6baf6;
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--gray-0);
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica,
        Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-wrap-style: pretty;
}

.docs-landing {
    --landing-bg: #fafafa;
    --landing-text: #1a1a1a;
    --landing-muted: #5a6472;
    --landing-card: #ffffff;
    --landing-border: #e7e7e7;
    --landing-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    --landing-accent: #4f46e5;
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
    color: var(--landing-text);
}

.docs-landing .hero {
    background: var(--landing-bg);
    border-radius: 24px;
    padding: 48px 0;
    margin: 12px 0 32px;
}

.docs-landing .hero-container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 32px;
}

.docs-landing .hero h2 {
    font-size: clamp(30px, 3vw, 44px);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.docs-landing .hero p {
    color: var(--landing-muted);
    font-size: 16px;
    max-width: 640px;
}

.docs-landing .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}

.docs-landing .hero-button {
    background: var(--landing-accent);
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.docs-landing .hero-link {
    color: var(--landing-accent);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.docs-landing .section {
    margin: 36px 0;
}

.docs-landing .section-header {
    margin-bottom: 20px;
}

.docs-landing .section-title {
    font-size: 22px;
    margin-bottom: 8px;
}

.docs-landing .section-subtitle {
    color: var(--landing-muted);
}

.docs-landing .card-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.docs-landing .doc-card,
.docs-landing .feature-card,
.docs-landing .quick-links {
    background: var(--landing-card);
    border: 1px solid var(--landing-border);
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--landing-shadow);
}

.docs-landing .doc-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.docs-landing .doc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.12);
}

.docs-landing .card-title,
.docs-landing .feature-title,
.docs-landing .quick-links-title {
    font-size: 16px;
    margin: 0;
}

.docs-landing .card-description,
.docs-landing .feature-description {
    color: var(--landing-muted);
    font-size: 14px;
}

.docs-landing .card-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--landing-muted);
}

.docs-landing .link-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: grid;
    gap: 10px;
}

.docs-landing .link-item a {
    display: flex;
    justify-content: space-between;
    text-decoration: none;
    color: inherit;
    font-size: 14px;
}

.docs-landing .link-arrow {
  color: var(--landing-accent);
}

.docs-landing .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.docs-landing .tag {
  border: 1px solid var(--landing-border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--landing-muted);
  background: #f3f4f6;
}

@media (max-width: 700px) {
  .docs-landing .hero {
    padding: 36px 0;
  }

    .docs-landing .hero-container {
        padding: 0 20px;
    }
}

code {
    font-family:
        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
    font-size: 85%;
}

.highlight {
    background-color: var(--primary-6);
    color: var(--primary-12);

    &.active {
        background-color: var(--primary-11);
        color: var(--gray-0);
    }
}

summary {
    list-style: none;

    &::-webkit-details-marker {
        display: none;
    }
}

summary::before {
    content: url('data:image/svg+xml,<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 4.5 10 8 6.5 11.5" stroke="black" stroke-width="1.2" stroke-linejoin="round" stroke-linecap="round" /></svg>');
    text-align: center;
    flex-shrink: 0;
    /* color: var(--gray-11); */
    filter: invert(30%);
    display: block;
    width: 16px;
    height: 16px;
}

@media (prefers-color-scheme: dark) {
    summary::before {
        filter: invert(80%);
    }
}

details[open] > summary::before {
    transform: rotate(90deg);
}

nav.left-pane {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    width: 310px;

    > .top-wrapper {
        position: sticky;
        top: 0;
        z-index: 1;

        > .top {
            backdrop-filter: blur(10px);
            background: linear-gradient(
                var(--gray-0),
                color-mix(in srgb, var(--gray-0), transparent 50%)
            );
            display: flex;
            flex-direction: column;
            padding: 16px 16px 12px 16px;
            gap: 4px;
        }

        &::after {
            content: "";
            display: block;
            height: 1px;
            backdrop-filter: blur(20px);
        }
    }

    header {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--gray-12);
        font-size: 15px;
        line-height: 20px;
        container-type: inline-size;

        .logo {
            a {
                --landing-accent: #4f46e5;
                display: block;
                color: var(--gray-1);
                background-color: var(--landing-accent);
                padding: 8px 12px;
                border-radius: 6px;

                svg,
                img {
                    display: block;
                    height: 40px;
                    width: auto;
                }
            }
        }

        @container (max-width: 224px) {
            .logo {
                width: 28px;
                overflow: hidden;
            }
        }

        a {
            color: var(--gray-11);
            text-decoration: none;

            &:hover {
                color: var(--gray-12);
            }
        }

        .line {
            width: 1px;
            height: 20px;
            background-color: var(--gray-6);
        }

        .spacer {
            flex: 1;
        }

        .menu-button {
            color: var(--gray-8);
            cursor: pointer;
            display: none;
            width: 24px;
            height: 24px;
        }

        .collapse-button {
            color: var(--gray-8);
            cursor: pointer;
            display: block;
            width: 16px;
            height: 16px;
        }
    }

    .search-box {
        @media (scripting: none) {
            display: none;
        }

        position: relative;
        overflow: hidden;
        margin-top: 16px;

        .search-icon {
            position: absolute;
            left: 8px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray-10);
        }

        input[type="search"]:focus ~ .search-icon {
            color: var(--gray-12);
        }

        .hotkey {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            display: block;
            width: 16px;
            height: 16px;
            border: 1px solid var(--gray-7);
            border-radius: 3px;

            svg {
                display: block;
            }
        }

        .clear-button {
            display: none;
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray-11);
            cursor: pointer;

            &:hover {
                color: var(--gray-12);
            }
        }

        input[type="search"] {
            appearance: none;
            width: 100%;
            height: 34px;
            padding: 12px 31px;
            background-color: color-mix(
                in srgb,
                var(--gray-2),
                transparent 35%
            );
            border: 1px solid var(--gray-4);
            border-radius: 6px;
            outline: none;
            font-size: 14px;
            line-height: 16px;
            color: var(--gray-10);

            &::placeholder {
                color: var(--gray-10);
            }

            &:focus {
                padding-left: 30px;
                border-width: 2px;
                border-color: var(--primary-11);
                color: var(--gray-12);
            }

            &::-webkit-search-cancel-button {
                display: none;
            }

            &::-moz-search-cancel-button {
                display: none;
            }
        }
    }

    .search-stats {
        display: none;
        color: var(--gray-10);
        font-size: 12px;
        line-height: 20px;
        padding-left: 32px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    &.search-active {
        .search-box {
            .hotkey {
                display: none;
            }

            .clear-button {
                display: block;
            }
        }

        .search-stats {
            display: block;
        }

        .search-results {
            display: block;
        }

        nav.side {
            display: none;
        }
    }

    ol {
        list-style: none;
    }

    summary:has(a.target)::before,
    summary.selected::before {
        /* color: var(--gray-0); */
        filter: invert(100%);
    }

    @media (prefers-color-scheme: dark) {
        summary:has(a.target)::before,
        summary.selected::before {
            filter: none;
        }
    }
}

.docs-landing .hero-logo {
    display: block;
    width: min(320px, 70%);
    height: auto;
    margin-bottom: 16px;
}

.search-results {
    color: var(--gray-10);
    padding: 0 16px 16px 16px;
    font-size: 12px;
    line-height: 16px;
    -webkit-user-select: none;
    user-select: none;
    display: none;

    summary {
        display: flex;
        align-items: center;
        padding: 6px 8px;
        border-radius: 6px;
        gap: 8px;
        font-size: 12px;
        line-height: 20px;
        font-weight: 400;
        cursor: pointer;

        &::before {
            /* color: var(--gray-10); */
            filter: invert(51%);

            @media (prefers-color-scheme: dark) {
                filter: invert(48%);
            }
        }

        p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &:hover {
            background-color: var(--gray-3);
            color: var(--gray-12);

            &::before {
                /* color: var(--gray-12); */
                filter: invert(12%);

                @media (prefers-color-scheme: dark) {
                    filter: invert(93%);
                }
            }
        }

        &.selected {
            background-color: var(--primary-9);
            color: var(--gray-1);

            .highlight {
                background-color: var(--highlight-active);
                color: var(--gray-0);
            }
        }
    }

    a {
        display: block;
        color: var(--gray-11);
        text-decoration: none;
        padding: 6px 8px 6px 32px;
        border-radius: 6px;

        h3 {
            color: var(--gray-12);
            font-size: 13px;
            line-height: 16px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        p {
            overflow: hidden;
            text-overflow: ellipsis;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }

        &:hover {
            background-color: var(--gray-3);
        }

        &.selected {
            background-color: var(--primary-9);
            color: var(--gray-1);

            h3 {
                color: var(--gray-0);
            }

            .highlight {
                background-color: var(--highlight-active);
                color: var(--gray-0);
            }
        }
    }
}

.search-notfound {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: var(--gray-10);

    a {
        color: var(--gray-11);
        text-underline-offset: 2px;
    }
}

nav.side {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0 16px 16px 16px;
    font-size: 14px;
    line-height: 20px;
    color: var(--gray-11);
    -webkit-user-select: none;
    user-select: none;

    .item {
        display: flex;
        gap: 8px;
        align-items: center;
        border-radius: 6px;
        padding: 6px 8px;

        &:hover {
            cursor: pointer;
            background-color: var(--gray-3);
        }

        &:has(a.target) {
            background-color: var(--primary-9);
        }

        a {
            color: var(--gray-11);
            text-decoration: none;
            display: block;
            width: 100%;
            margin: -6px -8px -6px -4px;
            padding: 6px 8px 6px 4px;
            box-sizing: content-box;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;

            &:hover {
                color: var(--gray-12);
            }

            &.target {
                font-weight: 500;
                color: var(--gray-0);
            }
        }
    }

    /* indentation */
    ol {
        flex-grow: 1;
        background-repeat: repeat-y;

        li.item {
            padding-left: 32px;
        }

        ol {
            background-image: url('data:image/svg+xml,<svg width="64" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 0V16" stroke="%23E8E8E8" /></svg>');

            summary.item {
                padding-left: 24px;
            }

            li.item {
                padding-left: 48px;
            }

            ol {
                background-image: url('data:image/svg+xml,<svg width="64" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M31.5 0V16" stroke="%23E8E8E8" /></svg>');

                summary.item {
                    padding-left: 40px;
                }

                li.item {
                    padding-left: 64px;
                }
            }
        }
    }

    @media (prefers-color-scheme: dark) {
        ol {
            ol {
                background-image: url('data:image/svg+xml,<svg width="64" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 0V16" stroke="%232A2A2A" /></svg>');

                ol {
                    background-image: url('data:image/svg+xml,<svg width="64" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M31.5 0V16" stroke="%232A2A2A" /></svg>');
                }
            }
        }
    }
}

body > .resizer {
    width: 8px;
    cursor: col-resize;

    &.resizing,
    &:hover {
        border-left: 1px solid var(--gray-4);
    }
}

body > .expand-button {
    display: none;
    padding: 16px 8px 0 16px;
    cursor: pointer;

    .tick {
        color: var(--gray-8);
    }

    > div {
        display: flex;
        align-items: center;
    }

    &:hover {
        border-right: 1px solid var(--gray-3);
        padding-right: 7px;

        .tick {
            color: var(--gray-12);
        }
    }
}

body.sidenav-collapsed {
    nav.left-pane {
        display: none;
    }

    > .expand-button {
        display: block;
    }
}

#github-link {
    display: flex;
    align-items: center;
    gap: 4px;
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    text-decoration: none;
    color: var(--gray-11);

    &:hover {
        color: var(--gray-12);
    }
}

#single-page-link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    text-decoration: none;
    color: var(--gray-11);
    border: 1px solid var(--gray-4);
    border-radius: 6px;
    padding: 5px 7px;
    margin-top: 16px;

    &:hover {
        color: var(--gray-12);
        background-color: var(--gray-4);
    }
}

#note-nested-css {
    color: var(--amber-12);
    background-color: var(--amber-2);
    border: 1px solid var(--amber-6);
    border-radius: 6px;
    margin: 20px;
    padding: 12px 16px;
    max-width: 850px;
    font-size: 16px;
    line-height: 24px;

    & {
        /* Hide this note in supported browsers. */
        display: none;
    }
}

article {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    outline: none;

    > .content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 950px;
        padding: 48px 64px;
        padding-bottom: 50vh;
        overflow-x: clip;

        color: var(--gray-11);
        font-size: 16px;
        line-height: 24px;

        p {
            text-wrap: pretty;
        }

        strong {
            font-weight: 500;
            color: var(--gray-12);
        }

        a {
            color: var(--primary-10);
            text-decoration: none;

            &:hover {
                text-decoration: underline;
                text-underline-offset: 0.2em;
                text-decoration-thickness: 1px;
                text-decoration-color: var(--primary-8);
            }

            &:visited {
                color: var(--visited-link);
                text-decoration-color: var(--visited-link);
            }
        }

        a > code,
        a > strong {
            color: var(--primary-10);
        }

        a:visited > code,
        a:visited > strong {
            color: var(--visited-link);
        }

        h1 {
            font-weight: 600;
            font-size: 48px;
            line-height: 54px;
        }

        h2 {
            font-weight: 600;
            font-size: 32px;
            line-height: 36px;
        }

        h3 {
            font-weight: 600;
            font-size: 24px;
            line-height: 32px;
        }

        h4 {
            font-weight: 600;
            font-size: 18px;
            line-height: 24px;
        }

        h1,
        h2,
        h3,
        h4,
        h5 {
            scroll-margin-top: 24px;
            margin-top: 16px;

            a {
                color: var(--gray-12);

                &:visited {
                    color: var(--gray-12);
                }

                &:hover {
                    text-decoration: none;
                }

                code {
                    color: var(--gray-12);
                    word-break: break-all;
                }
            }

            a:visited > code {
                color: var(--gray-12);
            }
        }

        h2 {
            margin-top: 40px;
        }

        h1,
        h1 + h2,
        h2 + h3,
        h3 + h4,
        h4 + h5,
        h5 + h6 {
            margin-top: 0;
        }

        .anchor::after {
            content: "";
            display: inline-block;
            background-image: url('data:image/svg+xml,<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m6.56 9.43c-1.07-1.07-1.07-2.81 0-3.88l2-2c2.36-2.29 6 0.71 4.23 3.45m-3.36-0.43c1.07 1.07 1.07 2.81 0 3.88l-2 2c-2.36 2.29-6-0.71-4.23-3.45" stroke="black" stroke-linecap="round" stroke-width="1.5"/></svg>');
            background-position-y: 2px;
            width: 16px;
            height: 16px;
            margin-left: 4px;
            opacity: 0;
            transform-origin: bottom left;
        }

        .anchor:hover::after {
            opacity: 0.25;
        }

        .target .anchor::after,
        :target .anchor::after {
            background-image: url('data:image/svg+xml,<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m6.56 9.43c-1.07-1.07-1.07-2.81 0-3.88l2-2c2.36-2.29 6 0.71 4.23 3.45m-3.36-0.43c1.07 1.07 1.07 2.81 0 3.88l-2 2c-2.36 2.29-6-0.71-4.23-3.45" stroke="%230090FF" stroke-linecap="round" stroke-width="1.5"/></svg>');
            opacity: 1;
        }

        h1 .anchor::after {
            scale: 1.5;
        }

        h2 .anchor::after {
            scale: 1.25;
        }

        @media (prefers-color-scheme: dark) {
            .anchor::after {
                background-image: url('data:image/svg+xml,<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m6.56 9.43c-1.07-1.07-1.07-2.81 0-3.88l2-2c2.36-2.29 6 0.71 4.23 3.45m-3.36-0.43c1.07 1.07 1.07 2.81 0 3.88l-2 2c-2.36 2.29-6-0.71-4.23-3.45" stroke="white" stroke-linecap="round" stroke-width="1.5"/></svg>');
            }

            .target .anchor::after,
            :target .anchor::after {
                background-image: url('data:image/svg+xml,<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m6.56 9.43c-1.07-1.07-1.07-2.81 0-3.88l2-2c2.36-2.29 6 0.71 4.23 3.45m-3.36-0.43c1.07 1.07 1.07 2.81 0 3.88l-2 2c-2.36 2.29-6-0.71-4.23-3.45" stroke="%23FFE629" stroke-linecap="round" stroke-width="1.5"/></svg>');
            }
        }

        code {
            color: var(--gray-12);
            background-color: var(--gray-alpha-3);
            border-radius: 4px;
            padding: 4px;
        }

        .code-wrapper {
            position: relative;

            button {
                position: absolute;
                top: 8px;
                right: 8px;
                background-color: var(--gray-1);
                color: var(--gray-10);
                border: none;
                border-radius: 4px;
                padding: 8px;

                svg {
                    display: block;
                }

                &:hover {
                    background-color: var(--gray-3);
                    cursor: pointer;
                }
            }
        }

        blockquote {
            font-style: italic;
            padding: 0 0 0 24px;
            position: relative;
        }

        blockquote::before {
            background-color: var(--primary-10);
            border-radius: 2px;
            content: "";
            display: block;
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 4px;
        }

        img {
            max-width: 100%;
        }

        ul,
        ol {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        li {
            margin-left: 32px;
        }

        div.table {
            overflow: auto;
        }

        table {
            width: 100%;
            overflow-x: auto;
            border-collapse: separate;
            border-spacing: 0;

            th {
                text-align: left;
                font-weight: 600;
                background-color: var(--gray-2);
                border-top: 1px solid var(--gray-5);
                font-size: 14px;
                line-height: 20px;
            }

            th:first-child {
                border-top-left-radius: 8px;
            }

            th:last-child {
                border-top-right-radius: 8px;
            }

            th,
            td {
                padding: 8px 16px;
                border-bottom: 1px solid var(--gray-5);
            }

            th:first-child,
            td:first-child {
                border-left: 1px solid var(--gray-5);
            }

            th:last-child,
            td:last-child {
                border-right: 1px solid var(--gray-5);
            }

            tr:last-child {
                td:first-child {
                    border-bottom-left-radius: 8px;
                }

                td:last-child {
                    border-bottom-right-radius: 8px;
                }
            }
        }

        details {
            background-color: var(--gray-0);
            border: 1px solid var(--gray-4);
            border-radius: 8px;
            padding: 16px 12px;

            > summary {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 14px;
                line-height: 24px;
                font-weight: 600;
                background-color: var(--gray-1);
                border-radius: 8px;
                padding: 8px 12px;
                margin: -16px -12px;
                cursor: pointer;

                &:hover {
                    background-color: var(--gray-3);
                }
            }

            &[open] > summary {
                border-bottom: 1px solid var(--gray-4);
                border-radius: 8px 8px 0px 0px;
                margin-bottom: 16px;
            }
        }

        .footnotes {
            margin-top: 24px;
            font-size: 13px;
            line-height: 20px;

            > hr {
                border: none;
                border-top: 1px solid var(--gray-4);
            }

            > ol {
                padding: 12px 0;

                > li {
                    margin-left: 20px;

                    > p {
                        color: var(--gray-11);

                        > a {
                            color: var(--gray-9);

                            &:hover {
                                text-decoration: none;
                            }
                        }
                    }
                }
            }
        }

        .edit-link {
            margin: 24px 0 48px 0;
            padding: 12px 0;
            display: flex;
            align-items: center;
            gap: 4px;
            width: fit-content;
            font-size: 13px;
            line-height: 20px;
            font-weight: 400;
            text-decoration: none;
            color: var(--gray-9);

            &:visited {
                color: var(--gray-9);
            }

            &:hover {
                color: var(--gray-11);
                text-decoration: none;
            }
        }
    }
}

@media (min-width: 810px) {
    body {
        display: flex;
        height: 100vh;
    }

    main {
        flex: 1;
        overflow-x: hidden;
    }
}

@media (max-width: 809px) {
    nav.left-pane {
        width: 100% !important;
        overflow: visible;
        position: sticky;
        top: 0;
        z-index: 1;

        > .top-wrapper {
            .menu-button {
                display: block;

                > .icon-burger {
                    display: block;
                }

                > .icon-x {
                    display: none;
                }
            }

            .collapse-button {
                display: none;
            }

            .search-box {
                display: none;
            }
        }

        > .search-results {
            padding-right: 16px;
        }

        > nav.side {
            display: none;
            padding-right: 16px;
        }
    }

    .mobile-expanded {
        nav.left-pane {
            > .top-wrapper {
                .menu-button {
                    > .icon-burger {
                        display: none;
                    }

                    > .icon-x {
                        display: block;
                    }
                }

                .search-box {
                    display: block;
                }
            }

            > nav.side {
                display: block;
            }

            &.search-active {
                > nav.side {
                    display: none;
                }
            }
        }

        main {
            display: none;
        }
    }

    body > .resizer {
        display: none;
    }

    article {
        height: auto;
        overflow-y: visible;

        > .content {
            padding: 40px 16px;

            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                scroll-margin-top: 72px;
            }

            h1 {
                font-size: 36px;
                line-height: 40px;
            }

            h2 {
                font-size: 24px;
                line-height: 32px;
            }

            h3 {
                font-size: 18px;
                line-height: 24px;
            }

            h4 {
                font-size: 16px;
                line-height: 24px;
            }

            h5 {
                font-size: 14px;
                line-height: 20px;
            }
        }
    }
}