:root { color-scheme:dark; --paper:#191919; --surface:#252525; --ink:#ededed; --muted:#a1a1a1; --line:#333; }
.article-layout-page { background:#191919; color:#ededed; }
.article-layout-page .topbar { height:64px; width:min(1440px,calc(100% - 48px)); border:0; }
.article-layout-page .topbar>a:last-child { font-size:13px; color:#aaa; text-decoration:none; }
.article-layout-page .article-body { width:min(1440px,calc(100% - 48px)); max-width:1440px; padding:16px; margin:0 auto 32px; border:1px solid #333; border-radius:16px; }
.article-layout-page .blog-engagement { display:grid; grid-template-columns:210px minmax(0,1fr) 210px; gap:24px; align-items:start; }
.article-layout-page .article-categories,.article-layout-page .article-sidebar { position:sticky; top:16px; width:auto; max-height:calc(100dvh - 32px); overflow-y:auto; transform:none; padding:16px; border:0; border-radius:12px; background:#141414; display:block; font-size:13px; }
.article-layout-page summary { font-size:15px; font-weight:650; cursor:pointer; margin-bottom:12px; }
.article-layout-page .article-category a,.article-layout-page .article-toc-list a { display:block; color:#aaa; text-decoration:none; padding:5px 0; line-height:1.65; }
.article-layout-page .article-category a:hover,.article-layout-page .article-toc-list a:hover { color:#fff; }
.article-layout-page .article-category .category-article { padding-left:10px; font-size:12px; }
.article-layout-page .is-current>.category-name,.article-layout-page a[aria-current] { color:#fff; font-weight:600; }
.article-layout-page .article-toc-list .toc-subheading { padding-left:12px; font-size:12px; }
.article-layout-page .article-main { padding:10px 0; }
.article-layout-page .article-main>h1 { font-family:var(--sans); font-size:clamp(23px,2.2vw,32px); line-height:1.45; margin:12px 0 24px; padding-bottom:24px; border-bottom:1px solid #333; }
.article-layout-page .article-main .post-meta { font-size:12px; color:#999; }
.article-layout-page .article-main article { line-height:1.85; }
.article-layout-page .article-main :is(h2,h3) { scroll-margin-top:28px; }
.article-layout-page .article-main pre { background:#252525; border-color:#333; border-radius:9px; }
.article-layout-page .article-like { display:flex; gap:20px; align-items:center; padding:24px 0 0; margin-top:30px; border-top:1px solid #333; }
.article-layout-page .article-like button { width:auto; min-width:120px; }
.article-layout-page .article-comment-link { font-size:14px; text-decoration:none; color:#aaa; }
.article-layout-page .comment-section { border-color:#333; margin-top:24px; }
.article-layout-page .blog-engagement input,.article-layout-page .blog-engagement textarea { background:#222; border-color:#383838; }
@media(min-width:761px) { .article-layout-page summary { list-style:none; } .article-layout-page summary::-webkit-details-marker { display:none; } .article-layout-page .article-categories { min-height:calc(100dvh - 132px); } }
@media(max-width:1100px) and (min-width:761px) { .article-layout-page .blog-engagement { grid-template-columns:170px minmax(0,1fr) 165px; gap:18px; } }
@media(max-width:760px) { .article-layout-page .topbar,.article-layout-page .article-body { width:calc(100% - 24px); } .article-layout-page .article-body { padding:12px; } .article-layout-page .blog-engagement { display:flex; flex-direction:column; gap:14px; } .article-layout-page .article-categories,.article-layout-page .article-sidebar { position:static; width:100%; max-height:none; padding:12px; } .article-layout-page .article-sidebar { order:1; } .article-layout-page .article-main { order:2; width:100%; padding:0 4px; } .article-layout-page summary { margin:0; } .article-layout-page details[open]>summary { margin-bottom:10px; } }

/* Article navigation: contents left, categories and likes right. */
@media(min-width:761px) {
 .article-layout-page .article-sidebar { grid-column:1; grid-row:1; }
 .article-layout-page .article-main { grid-column:2; grid-row:1; }
 .article-layout-page .article-categories { grid-column:3; grid-row:1; min-height:0; }
}
.article-layout-page .article-categories .article-like { flex-wrap:wrap; gap:12px; margin-top:20px; padding-top:20px; }
.article-layout-page .article-categories .article-like button { width:100%; }
@media(max-width:760px) {
 .article-layout-page .article-sidebar { order:0; }
 .article-layout-page .article-categories { order:1; }
 .article-layout-page .article-categories .article-like button { width:auto; }
}

.article-layout-page .comment-compose-heading { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.article-layout-page .comment-compose-heading h2 { margin:0; flex-shrink:0; }
.article-layout-page .comment-compose-heading input { width:180px; max-width:65%; margin:0; padding:6px 10px; font-size:14px; background:transparent; }
.article-layout-page .blog-engagement .comment-body-label { margin:0; }
.article-layout-page .comment-body-label textarea { margin-top:0; }