/* A quiet reading column, with the same navigation and spacing as the archive. */
html.article-document { scrollbar-gutter: stable; scroll-padding-top: 96px; background-image: none; }
body.blog-viewer-page { --reader-muted: #6b7274; --reader-line: #cbd2cf; background-image: none; }
.blog-viewer-page [hidden] { display: none !important; }
.blog-viewer-page .reader-skip-link { position: fixed; top: 12px; left: 16px; z-index: 1100; padding: 8px 16px; border: 2px solid var(--reader-line); background: #fff; color: var(--site-ink); transform: translateY(-180%); }
.blog-viewer-page .reader-skip-link:focus { transform: none; }
.blog-viewer-page #main-content:focus { outline: none; }
.blog-viewer-page .container, .blog-viewer-page.has-article-toc .container { width: min(1000px, calc(100% - 64px)); margin: 122px auto 64px; padding: 0; display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 224px); column-gap: 56px; row-gap: 0; align-items: start; }
.blog-viewer-page .main-content { display: contents; }
.blog-viewer-page .reader-back { grid-column: 1; grid-row: 1; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 14px; color: var(--site-accent); font-size: 14px; text-decoration: none; }
.blog-viewer-page .reader-back:hover { color: var(--site-accent-dark); }
.blog-viewer-page .article-header { grid-column: 1; grid-row: 2; padding: 0; border: 0; }
.blog-viewer-page .article-title { margin: 0 0 20px; text-wrap: pretty; }
.blog-viewer-page .article-meta { gap: 6px 16px; margin: 0; color: var(--reader-muted); }
.blog-viewer-page .article-tags { margin-top: 14px; gap: 8px 16px; }
.blog-viewer-page .article-tags .tag { padding: 0; border: 0; color: var(--reader-muted); font-size: 13px; }
.blog-viewer-page .article-content { grid-column: 1; grid-row: 5; min-width: 0; }
.blog-viewer-page .article-load-notice { margin-bottom: 20px; color: var(--reader-muted); font-size: 14px; }
.blog-viewer-page .markdown-body p { margin: 0 0 22px; }
.blog-viewer-page .markdown-body :is(h1, h2, h3, h4, h5, h6) { margin: 44px 0 18px; padding: 0; border: 0; scroll-margin-top: 100px; letter-spacing: -.015em; }
.blog-viewer-page .markdown-body > :first-child { margin-top: 0; }
.blog-viewer-page .markdown-body :is(ul, ol) { padding-left: 1.5em; margin: 0 0 22px; }
.blog-viewer-page .markdown-body li + li { margin-top: 5px; }
.blog-viewer-page .markdown-body li p { margin-bottom: 10px; }
.blog-viewer-page .markdown-body strong { color: inherit; }
.blog-viewer-page .markdown-body a { color: var(--site-accent); text-decoration: none; }
.blog-viewer-page .markdown-body a:hover { color: var(--site-accent-dark); }
.blog-viewer-page .markdown-body blockquote { margin: 24px 0; padding: 2px 0 2px 20px; border-left-width: 2px; color: var(--reader-muted); }
.blog-viewer-page .markdown-body blockquote > :last-child { margin-bottom: 0; }
.blog-viewer-page .markdown-body img { max-width: min(100%, 520px); max-height: none; height: auto; margin: 24px auto; border-radius: 0; }
.blog-viewer-page .markdown-body pre { max-width: 100%; margin: 24px 0; padding: 18px 20px; border: 0; font-size: 14px; line-height: 1.7; overflow: auto; }
.blog-viewer-page .markdown-body code { border-radius: 3px; }
.blog-viewer-page .markdown-body pre code { background: transparent; padding: 0; }
.blog-viewer-page .table-wrapper { max-width: 100%; margin: 24px 0; overflow-x: auto; }
.blog-viewer-page .markdown-body table { margin: 0; }
.blog-viewer-page .markdown-body table :is(th, td) { padding: 10px 14px; border: 0; border-bottom: 1px solid #dfe4e1; white-space: nowrap; word-break: normal; max-width: none; font-size: 15px; }
.blog-viewer-page .markdown-body table th { background: #f3f5f4; text-align: left; }
.blog-viewer-page .math-block { max-width: 100%; margin: 24px 0; padding: 4px 0; }
.blog-viewer-page .markdown-body > .katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.blog-viewer-page .tikz-preview { padding: 12px 0; }
.blog-viewer-page .tikz-controls { padding: 0; border: 0; background: transparent; }
.blog-viewer-page .tikz-btn, .blog-viewer-page .copy-btn { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 4px; background: #f3f5f4; color: var(--site-accent); font-size: 13px; }
.blog-viewer-page .tikz-source { border: 0; margin-top: 12px; background: #f3f5f4; }
.blog-viewer-page .tikz-source-header { padding: 8px 14px; border: 0; background: transparent; }
.blog-viewer-page .markdown-body .tikz-source-code { margin: 0; }
.blog-viewer-page .toc-sidebar { grid-column: 2; grid-row: 2 / 8; align-self: start; position: sticky; top: 104px; right: auto; width: 100%; max-height: calc(100dvh - 136px); overflow-y: auto; padding: 0 0 0 12px; margin: 0; border: 0; background: transparent; box-shadow: none; }
.blog-viewer-page .toc-title { margin: 0 0 16px; padding: 0 10px; border: 0; color: var(--reader-muted); }
.blog-viewer-page .toc-item a { border: 0; border-radius: 3px; padding: 8px 10px; color: var(--reader-muted); line-height: 1.7; text-decoration: none; overflow-wrap: anywhere; }
.blog-viewer-page .toc-item a:hover, .blog-viewer-page .toc-item a.active { color: var(--site-accent); background: #edf5f4; }
.blog-viewer-page .toc-item.level-3 a { padding-left: 22px; }
.blog-viewer-page .toc-item.level-4 a { padding-left: 34px; }
.blog-viewer-page .toc-item.level-5 a, .blog-viewer-page .toc-item.level-6 a { padding-left: 42px; }
.blog-viewer-page .toc-toggle-btn { grid-column: 1; grid-row: 3; }
.blog-viewer-page .article-extras { grid-column: 1; grid-row: 6; margin-top: 32px; gap: 24px; min-width: 0; }
.blog-viewer-page .article-extra-card { padding: 24px; }
.blog-viewer-page .article-extra-card h2 { font-size: 22px; line-height: 1.6; }
.blog-viewer-page .poll-choice { min-height: 44px; }
.blog-viewer-page .poll-submit, .blog-viewer-page .poll-result-toggle { min-height: 44px; }
.blog-viewer-page .comments-section { grid-column: 1; grid-row: 7; margin-top: 56px; padding-top: 28px; border-top: 2px solid var(--reader-line); }
.blog-viewer-page .comments-title { margin: 0 0 26px; font-size: 26px; line-height: 1.6; letter-spacing: -.015em; text-transform: none; color: var(--site-ink); }
.blog-viewer-page .comment-form { padding-bottom: 12px; margin-bottom: 16px; border: 0; }
.blog-viewer-page .comment-form-header { margin-bottom: 20px; gap: 12px 24px; flex-wrap: wrap; }
.blog-viewer-page .comment-form h3 { font-size: 18px; }
.blog-viewer-page .comment-privacy { font-size: 13px; color: var(--reader-muted); }
.blog-viewer-page .comment-identity { gap: 20px; margin-bottom: 18px; }
.blog-viewer-page .form-group label { font-size: 14px; line-height: 1.8; letter-spacing: 0; }
.blog-viewer-page .form-group input { min-height: 48px; padding: 10px 12px; }
.blog-viewer-page .form-group textarea { min-height: 144px; padding: 12px; margin: 0; }
.blog-viewer-page .form-hint { color: var(--reader-muted); font-size: 13px; line-height: 1.8; }
.blog-viewer-page .comment-actions { gap: 12px 20px; flex-wrap: wrap; }
.blog-viewer-page .submit-btn { min-height: 44px; padding: 9px 20px; }
.blog-viewer-page .submit-btn:hover, .blog-viewer-page .submit-btn:active { transform: none; }
.blog-viewer-page .comment-item { padding: 22px 0; border: 0; }
.blog-viewer-page .comment-avatar { width: 36px; height: 36px; border: 0; border-radius: 4px; background: #edf5f4; }
.blog-viewer-page .comment-content { margin-left: 46px; overflow-wrap: anywhere; }
.blog-viewer-page .comment-time { font-size: 13px; }
.blog-viewer-page .message.success { color: #28735d; border-left-color: #28735d; }
.blog-viewer-page .message.error { color: #a13636; border-left-color: #a13636; }
.blog-viewer-page .footer { display: block !important; width: min(1000px, calc(100% - 64px)); margin-inline: auto; padding: 24px 0 32px; border-top: 2px solid var(--reader-line); }
.blog-viewer-page .site-footer-main { font-size: 14px; }
.blog-viewer-page .site-footer-main a, .blog-viewer-page .site-footer-legal a { display: inline-flex; align-items: center; min-height: 36px; }
.blog-viewer-page .reader-fallback-nav { width: min(1000px, calc(100% - 40px)); margin: 24px auto 0; display: flex; gap: 24px; }

@layer site-theme {
    /* TOC destinations keep focus for screen readers without framing the title. */
    .blog-viewer-page.reader-flat .markdown-body :is(h2, h3, h4, h5, h6)[tabindex="-1"]:focus { outline: none !important; box-shadow: none !important; }
    .blog-viewer-page .landing-nav { padding-inline: max(32px, calc((100% - 1000px) / 2)) !important; border-bottom: 0 !important; }
    .blog-viewer-page .landing-nav-links { gap: 22px !important; }
    .blog-viewer-page .landing-nav-links a::after { display: none !important; }
    .blog-viewer-page .container, .blog-viewer-page.has-article-toc .container { margin-top: 122px !important; }
    .blog-viewer-page .article-title { font-size: 38px !important; line-height: 1.45 !important; }
    .blog-viewer-page .article-header { margin-bottom: 36px !important; }
    .blog-viewer-page .article-meta { font-size: 13px !important; }
    .blog-viewer-page .article-tags .tag { background: transparent !important; }
    .blog-viewer-page .markdown-body { font-size: 18px !important; line-height: 1.9 !important; }
    .blog-viewer-page .markdown-body pre, .blog-viewer-page .tikz-source { background: #f3f5f4 !important; }
    .blog-viewer-page .markdown-body h1 { font-size: 30px !important; }
    .blog-viewer-page .markdown-body h2 { font-size: 27px !important; }
    .blog-viewer-page .markdown-body h3 { font-size: 23px !important; }
    .blog-viewer-page .markdown-body :is(h4, h5, h6) { font-size: 19px !important; }
    .blog-viewer-page .toc-sidebar, .blog-viewer-page .toc-title { font-size: 13px !important; }
    .blog-viewer-page .article-extra-card { background: #f3f5f4 !important; border: 0 !important; }
    .blog-viewer-page .comments-section :is(#commentNickname, #commentEmail, #commentContent) { border: 0 !important; background: #f3f5f4 !important; border-radius: 4px !important; }
    @media (max-width: 1100px) {
        /* Own the reader surfaces explicitly; shared legacy panels must not win. */
        body.blog-viewer-page.reader-flat :is(.container, .main-content, .article-header, .article-content, .markdown-body, .toc-sidebar, .toc-toggle-btn, .comments-section, .comment-form, .comment-item, .article-extra-card) {
            background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important;
        }
        .blog-viewer-page .toc-toggle-btn, .blog-viewer-page .toc-sidebar.expanded { background: transparent !important; border-radius: 0 !important; }
        .blog-viewer-page .toc-item a { background: transparent !important; border-radius: 0 !important; }
        .blog-viewer-page .toc-item a.active { font-weight: 600; }
        .blog-viewer-page #chatjwt-widget { --chatjwt-peek-display: none; }
    }
    @media (min-width: 821px) and (max-width: 1100px) { .blog-viewer-page .landing-nav-links { gap: 15px !important; } }
    @media (max-width: 820px) {
        .blog-viewer-page .landing-nav { padding-inline: 24px !important; }
        .blog-viewer-page .landing-nav-links { gap: 0 !important; }
        .blog-viewer-page .landing-nav-toggle { width: 44px !important; height: 44px !important; flex-basis: 44px !important; }
        .blog-viewer-page .landing-nav-toggle span:not(.visually-hidden) { height: 2px !important; }
        .blog-viewer-page .landing-nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg) !important; }
        .blog-viewer-page .landing-nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg) !important; }
        .blog-viewer-page .container, .blog-viewer-page.has-article-toc .container { margin-top: 94px !important; }
        .blog-viewer-page .comment-form, .blog-viewer-page .comment-item, .blog-viewer-page .article-extra-card { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
        .blog-viewer-page .comments-section :is(#commentNickname, #commentEmail, #commentContent) { background: #f4f6f5 !important; border-radius: 10px !important; }
        .blog-viewer-page .submit-btn { border-radius: 12px !important; }
        .blog-viewer-page .comment-avatar { border-radius: 50% !important; background: #e7f0ee !important; color: var(--site-accent) !important; }
        .blog-viewer-page .markdown-body pre { border-radius: 12px !important; }
    }
    @media (max-width: 580px) {
        .blog-viewer-page .landing-nav { padding-inline: 20px !important; }
        .blog-viewer-page .container, .blog-viewer-page.has-article-toc .container { margin-top: 80px !important; }
        .blog-viewer-page .article-title { font-size: 28px !important; line-height: 1.5 !important; }
        .blog-viewer-page .article-header { margin-bottom: 28px !important; }
        .blog-viewer-page .markdown-body { font-size: 17px !important; }
        .blog-viewer-page .markdown-body h1 { font-size: 27px !important; }
        .blog-viewer-page .markdown-body h2 { font-size: 24px !important; }
        .blog-viewer-page .markdown-body h3 { font-size: 21px !important; }
    }
}
@media (min-width: 1101px) {
    .blog-viewer-page .toc-sidebar.expanded { max-height: calc(100dvh - 136px); padding: 0 0 0 12px; margin: 0; border: 0; }
    .blog-viewer-page .toc-title { display: block; }
    .blog-viewer-page .toc-toggle-btn { display: none; }
}
@media (max-width: 1100px) {
    .blog-viewer-page .container, .blog-viewer-page.has-article-toc .container { width: min(720px, calc(100% - 48px)); grid-template-columns: minmax(0, 1fr); gap: 0; }
    .blog-viewer-page .toc-toggle-btn { display: flex; align-items: center; justify-content: space-between; min-height: 52px; width: 100%; margin: 0 0 28px; padding: 12px 0; border: 0; background: transparent; color: var(--reader-muted); font-size: 14px; text-align: left; }
    .blog-viewer-page .toc-toggle-btn[aria-expanded="true"] { margin-bottom: 0; }
    .blog-viewer-page .toc-state { color: var(--site-accent); font-size: 13px; }
    .blog-viewer-page .toc-sidebar, .blog-viewer-page .toc-sidebar.expanded { grid-column: 1; grid-row: 4; position: static; width: 100%; max-height: 42dvh; margin: 0 0 28px; padding: 0 0 8px; overflow-y: auto; border: 0; background: transparent; }
    .blog-viewer-page .toc-title { display: none; }
    .blog-viewer-page .toc-item a { min-height: 44px; padding: 10px 0; }
    .blog-viewer-page .toc-item a:focus-visible { outline-offset: -2px !important; }
}
@media (max-width: 580px) {
    .blog-viewer-page .container, .blog-viewer-page.has-article-toc .container { width: calc(100% - 40px); margin-bottom: 44px; }
    .blog-viewer-page .reader-back { margin-bottom: 10px; }
    .blog-viewer-page .article-title { margin-bottom: 14px; }
    .blog-viewer-page .article-meta { gap: 4px 12px; }
    .blog-viewer-page .markdown-body :is(h1, h2, h3, h4, h5, h6) { margin-top: 34px; margin-bottom: 16px; }
    .blog-viewer-page .markdown-body pre { padding: 14px 16px; }
    .blog-viewer-page .markdown-body img { max-width: 92%; margin-block: 20px; }
    .blog-viewer-page .article-extra-card { padding: 20px 16px; }
    .blog-viewer-page .comments-section { margin-top: 40px; padding-top: 24px; }
    .blog-viewer-page .comment-identity { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .blog-viewer-page .comment-actions { flex-direction: column; align-items: stretch; }
    .blog-viewer-page .submit-btn { width: 100%; }
    .blog-viewer-page .footer { width: calc(100% - 40px); padding-bottom: 96px; }
}
@media (max-width: 820px) {
    .blog-viewer-page .comments-section { margin-top: 44px; padding-top: 0; border-top: 0; }
    .blog-viewer-page .comments-title { margin-bottom: 20px; font-size: 25px; }
    .blog-viewer-page .comment-form { padding: 0; margin-bottom: 20px; }
    .blog-viewer-page .article-extra-card { padding: 0; }
    .blog-viewer-page .comment-form-header { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 20px; }
    .blog-viewer-page .comment-privacy { margin: 0; line-height: 1.8; }
    .blog-viewer-page .comment-identity { gap: 16px; }
    .blog-viewer-page .form-group textarea { height: 144px; min-height: 144px; }
    .blog-viewer-page .comment-actions { flex-direction: column; align-items: stretch; gap: 14px; }
    .blog-viewer-page .submit-btn { width: 100%; min-height: 48px; font-size: 15px; }
    .blog-viewer-page .comments-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; }
    .blog-viewer-page .comment-item { min-width: 0; padding: 18px 0; }
    .blog-viewer-page .comment-header { margin-bottom: 12px; }
    .blog-viewer-page .comment-header > div { min-width: 0; }
    .blog-viewer-page .comment-avatar { flex-shrink: 0; width: 32px; height: 32px; }
    .blog-viewer-page .comment-author { overflow-wrap: anywhere; }
    .blog-viewer-page .comment-content { margin-left: 0; font-size: 15px; line-height: 1.85; }
    .blog-viewer-page .message { border-radius: 10px; }
    .blog-viewer-page .no-comments { padding: 16px 8px; text-align: center; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { html.article-document, .blog-viewer-page *, .blog-viewer-page *::before, .blog-viewer-page *::after { scroll-behavior: auto !important; transition: none !important; } }