.blog-breadcrumb { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; font-size:12px; line-height:1.6; color:var(--text-muted,#626b75); }
.blog-breadcrumb a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.blog-article-page .blog-article-panel > .panel__body { padding:clamp(18px,3vw,36px); }
.blog-article { min-width:0; }
.blog-article__content .blog-video { margin:28px 0; }
.blog-article__content .blog-video h3 { margin:0 0 10px; }
.blog-article__content .blog-video p { font-size:14px; }
.blog-article figure { margin:0 0 24px; }
.blog-article figure img { display:block; height:auto; aspect-ratio:3/2; border-radius:10px; }
.blog-article figcaption { font-size:11px; line-height:1.5; text-align:left; color:var(--text-muted,#697481); }
.blog-article header h1 { font-size:clamp(25px,2.8vw,36px); line-height:1.2; color:var(--text,#2f3540); }
.blog-article .article-time { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12px; line-height:1.6; color:var(--text-muted,#626b75); }
.blog-article__content { max-width:74ch; margin:auto; color:var(--text,#333); font-size:16px; line-height:1.8; overflow-wrap:break-word; }
.blog-article__content p { color:inherit; font-size:inherit; line-height:inherit; margin:0 0 1.2em; }
.blog-article__content .blog-lead { font-size:18px; line-height:1.7; font-weight:500; }
.blog-article__content h2 { font-size:24px; line-height:1.3; margin:2em 0 .7em; color:var(--text,#303c43); scroll-margin-top:110px; }
.blog-article__content h3 { font-size:18px; line-height:1.5; margin:1.5em 0 .5em; color:var(--text,#303c43); }
.blog-article__content li { margin:0 0 .7em; padding-left:4px; }
.blog-article__content a,.blog-toc a { color:#426d23; text-decoration:underline; text-underline-offset:3px; }
.blog-article__content a:hover,.blog-toc a:hover { text-decoration-thickness:2px; }
.blog-article a:focus-visible { outline:3px solid #77b636; outline-offset:4px; }
.blog-toc { margin:24px 0 30px; padding:20px 24px; background:var(--surface-muted,#f3f6ef); border:1px solid var(--border-soft,#dee7d4); border-left:4px solid #77b636; border-radius:8px; font-size:14px; line-height:1.65; }
.blog-toc strong { display:block; margin-bottom:10px; color:var(--text,#303c43); }
.blog-toc ol { columns:2; column-gap:28px; margin:0; padding-left:20px; }
.blog-toc li { break-inside:avoid; padding:3px 0; }
.blog-table-wrap { max-width:100%; overflow-x:auto; margin:24px 0; border:1px solid var(--border-soft,#dce3e7); border-radius:8px; }
.blog-table-wrap table { width:100%; border-collapse:collapse; font-size:14px; line-height:1.65; }
.blog-table-wrap caption { padding:12px 16px; text-align:left; font-weight:700; color:var(--text,#303c43); }
.blog-table-wrap th,.blog-table-wrap td { text-align:left; vertical-align:top; padding:14px; border-bottom:1px solid var(--border-soft,#e0e5e8); min-width:125px; }
.blog-table-wrap thead { background:var(--surface-muted,#eef3e9); }
.blog-table-wrap tr:last-child td,.blog-table-wrap tr:last-child th { border-bottom:0; }
.blog-note,.blog-next,.blog-article blockquote { padding:20px; border-left:4px solid #77b636; border-radius:0 8px 8px 0; background:var(--surface-muted,#f4f6f1); margin:24px 0; }
.blog-article blockquote p:last-child { margin-bottom:0; }
.blog-article code { font-size:.9em; overflow-wrap:anywhere; }
.blog-article pre { max-width:100%; overflow-x:auto; padding:18px 20px; border:1px solid var(--border-soft,#dce3e7); border-radius:8px; background:var(--surface-muted,#f3f6ef); color:var(--text,#303c43); line-height:1.65; font-size:14px; }
.blog-article pre code { white-space:pre; overflow-wrap:normal; }
.blog-callout { padding:20px; border-left:4px solid #77b636; border-radius:0 8px 8px 0; background:var(--surface-muted,#f4f6f1); margin:24px 0; }
.blog-card__header h2 { margin:0; font-size:17px; line-height:1.4; font-weight:800; color:var(--text,#303c43); }
html[data-theme="dark"] .blog-article__content a,html[data-theme="dark"] .blog-toc a,html.theme-dark .blog-article__content a,html.theme-dark .blog-toc a { color:#a3d47d; }
html[data-theme="dark"] .blog-article-page,html[data-theme="dark"] .blog-page,html.theme-dark .blog-article-page,html.theme-dark .blog-page { --text-muted:#b5bcc7; }
.blog-article header { border-bottom-color:var(--border-soft,#e0e5e8); }
@media(max-width:600px) { .blog-toc ol { columns:1; } .blog-toc { padding:16px 18px; } .blog-article__content { font-size:15px; } .blog-article__content h2 { font-size:21px; } .blog-article__content .blog-lead { font-size:17px; } .blog-table-wrap th,.blog-table-wrap td { padding:10px; min-width:110px; } }