body.article-page {
    --zen-article-width: 900px;
    --zen-wide-article-width: 1300px;
    --reading-control-off-color: #767676;
    --reading-control-on-color: #1d4ed8;
}

html[data-scheme="dark"] body.article-page {
    --reading-control-off-color: #aab1bb;
    --reading-control-on-color: #7dd3fc;
}

body.article-page .reading-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--reading-control-off-color);
    cursor: pointer;
    transition: color 0.2s ease;
}

body.article-page .reading-control svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.33;
}

body.article-page .reading-control:hover {
    color: var(--reading-control-on-color);
}

body.article-page .reading-control:focus-visible {
    outline: 2px solid var(--reading-control-on-color);
    outline-offset: 2px;
}

body.article-page .reading-control[aria-pressed="true"],
html.zen-mode body.article-page .zen-mode-toggle {
    color: var(--reading-control-on-color);
}

html.toc-hidden body.article-page .toc-mode-toggle {
    color: var(--reading-control-off-color);
}

html.zen-mode body.article-page .main-container {
    max-width: calc(var(--zen-article-width) + 2 * var(--container-padding));
}

html.zen-mode body.article-page .main-container > .left-sidebar {
    display: none;
}

html.zen-mode body.article-page .main-container > main.main {
    max-width: var(--zen-article-width);
    margin-inline: auto;
}

html.zen-mode body.article-page:not(.has-toc) .main-container {
    max-width: calc(var(--zen-wide-article-width) + 2 * var(--container-padding));
}

html.zen-mode body.article-page:not(.has-toc) .main-container > main.main {
    max-width: var(--zen-wide-article-width);
}

html.zen-mode body.article-page.has-toc .main-container {
    max-width: calc(var(--zen-article-width) + var(--zen-toc-width, 360px) + var(--section-separation) + 2 * var(--container-padding));
}

html.zen-mode.toc-hidden body.article-page.has-toc .main-container > main.main {
    max-width: calc(var(--zen-article-width) + var(--zen-toc-width, 360px) + var(--section-separation));
}

@media (min-width: 768px) {
    html.zen-mode body.article-page:not(.has-toc) .main-container {
        max-width: min(calc(var(--zen-wide-article-width) + 2 * var(--container-padding)), 86vw);
    }

    html.zen-mode.toc-hidden body.article-page.has-toc .main-container {
        max-width: min(
            calc(var(--zen-article-width) + var(--zen-toc-width, 360px) + var(--section-separation) + 2 * var(--container-padding)),
            86vw
        );
    }
}

html.zen-mode body.article-page.has-toc .main-container > .right-sidebar {
    flex: 0 0 var(--zen-toc-width, 360px);
    width: var(--zen-toc-width, 360px);
    max-width: var(--zen-toc-width, 360px);
}

html.toc-hidden body.article-page .main-container > .right-sidebar,
html.toc-hidden body.article-page .article-toc {
    display: none;
}