.blog-page .blog-article>.blog-section-heading{max-width:none;padding:25px;border:1px solid var(--line);border-radius:20px;background:radial-gradient(ellipse at 100% 0,#a997ff20,transparent 70%),url('knowledge-card-pattern.svg') right top/340px auto no-repeat,var(--panel)}
.blog-article-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:14px 0;color:var(--muted)}.blog-page .blog-article-breadcrumb button{padding:6px 9px;border:0;background:transparent;color:var(--muted);font-size:11px;text-align:left}.blog-article-breadcrumb svg{width:14px;height:14px}
.blog-reader-companion{margin:0 0 20px;padding:16px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(120deg,#a997ff0a,transparent 85%),var(--input)}.blog-companion-meta{display:flex;flex-wrap:wrap;gap:7px 17px;margin-bottom:12px;color:var(--muted);font-size:11px}.blog-companion-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.blog-page .blog-companion-actions button,.blog-page .blog-related-heading button,.blog-page .blog-resume-button{padding:9px 11px;min-height:40px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font-size:11px}.blog-companion-actions label{display:flex;align-items:center;gap:8px;margin-left:auto!important;font-size:11px}.blog-page .blog-companion-actions select{padding:8px;min-height:40px;font-size:12px;border-radius:9px}
.blog-resume-reading{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line);font-size:12px}.blog-resume-reading small{width:100%;color:var(--muted);font-size:10px}.blog-page .blog-resume-button{margin-left:auto;color:var(--accent)}.blog-mobile-outline{display:none}
.blog-page .blog-article-text[data-spacing=compact]{line-height:1.5}.blog-page .blog-article-text[data-spacing=normal]{line-height:1.65}.blog-page .blog-article-text[data-spacing=relaxed]{line-height:1.9}.blog-page .blog-article-text[data-spacing=relaxed] p{margin-bottom:18px}
.blog-related{margin:30px 0 12px;padding-top:23px;border-top:1px solid var(--line)}.blog-related-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:17px}.blog-related-heading small{color:var(--accent);font-size:8px;font-weight:700;letter-spacing:1.4px}.blog-related-heading h2{font-size:23px;line-height:1.3;margin:7px 0 0}.blog-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.blog-page a.blog-related-card{position:relative;isolation:isolate;display:flex;min-width:0;min-height:235px;overflow:hidden;text-decoration:none;color:var(--text);border:1px solid var(--line);border-radius:17px;background:radial-gradient(ellipse at 100% 0,#a997ff1a,transparent 75%),url('knowledge-card-pattern.svg') right top/260px auto no-repeat,var(--panel)}.blog-related-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.blog-related-card.has-image:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#1013238f,#101323e8 65%,#101323fa)}.blog-page a.blog-related-card.has-image{color:#fff}.blog-related-copy{display:flex;flex-direction:column;gap:12px;width:100%;min-width:0;padding:19px}.blog-related-access{display:flex;align-items:center;gap:6px;color:var(--accent);font-size:10px}.has-image .blog-related-access{color:#d3c7ff}.blog-related-access svg{width:14px;height:14px}.blog-related-copy h3{font-size:18px;line-height:1.4;margin:0;overflow-wrap:anywhere}.blog-related-copy>p{font-size:12px;line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;opacity:.8}.blog-related-copy footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;font-size:11px}.blog-related-copy footer .user-name{min-width:0;overflow-wrap:anywhere}.blog-related-copy footer svg{width:17px;height:17px;flex-shrink:0}.blog-related-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.blog-related-empty,.blog-related-loading{grid-column:1/-1;padding:17px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:12px}
@media(max-width:800px){.blog-mobile-outline{display:block;margin-top:13px;border-top:1px solid var(--line);padding-top:12px}.blog-mobile-outline summary{font-size:12px;cursor:pointer;color:var(--accent)}.blog-mobile-outline nav{display:grid;gap:5px;margin-top:10px}.blog-mobile-outline a{padding:9px 10px;border-left:2px solid var(--line);font-size:12px;line-height:1.5;text-decoration:none;overflow-wrap:anywhere}.blog-related-grid{grid-template-columns:1fr}.blog-page a.blog-related-card{min-height:185px}.blog-related-copy{padding:17px}.blog-related-heading h2{font-size:20px}}
@media(max-width:650px){
 .blog-page.blog-reading-active .blog-root{width:100%;max-width:none;padding:7px env(safe-area-inset-right) 22px env(safe-area-inset-left)}
 .blog-page .blog-article{width:100%;max-width:none;margin:0}
 .blog-page .blog-article>.blog-section-heading{padding:15px 12px;margin:0 0 9px;border-left:0;border-right:0;border-radius:0;background-size:auto,230px auto}
 .blog-page .blog-article>.blog-section-heading h1{font-size:25px;line-height:1.22;letter-spacing:-.6px;margin:7px 0 9px}
 .blog-page .blog-article>.blog-section-heading>p{font-size:12px;line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .blog-page .blog-article-meta{gap:6px;font-size:9px;margin:12px 0 0}.blog-page .blog-reading-time{font-size:8px;padding:4px 6px}.blog-page .blog-author-avatar{width:27px;height:27px;border-radius:8px}
 .blog-article-breadcrumb{gap:3px;margin:0 9px 7px}.blog-page .blog-article-breadcrumb button{font-size:10px;padding:6px}
 .blog-page .blog-article-tools{gap:7px;padding:0 10px;margin:0 0 9px}.blog-page .blog-article-tools button{min-height:36px;padding:8px 10px;font-size:10px}
 .blog-page .blog-reading-layout{display:block;margin:0;gap:0}.blog-page .blog-reading-main{width:100%;padding:11px 10px;border:0;border-radius:0;background:var(--panel)}.blog-page .blog-reading-aside{display:none}
 .blog-page .blog-feature-image{width:100%;max-width:100%;border-radius:10px;margin:0 0 13px}
 .blog-reader-companion{margin:0 0 11px;padding:11px;border-radius:11px}.blog-companion-meta{font-size:10px;gap:5px 10px;margin-bottom:8px}
 .blog-companion-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:stretch}
 .blog-page .blog-companion-actions button{min-width:0;min-height:46px;padding:7px 5px;font-size:10px;gap:5px}.blog-companion-actions button svg{width:15px;height:15px}
 .blog-page .blog-companion-actions label{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:2px;margin:0!important;font-size:9px;min-width:0}
 .blog-page .blog-companion-actions select{width:100%;max-width:none;min-width:0;min-height:32px;font-size:16px;padding:4px}
 .blog-resume-reading{margin-top:9px;padding-top:9px;gap:7px;font-size:11px}.blog-page .blog-resume-button{min-height:38px;padding:7px 9px;font-size:10px}
 .blog-mobile-outline{margin-top:9px;padding-top:9px}.blog-mobile-outline summary{font-size:11px}.blog-mobile-outline a{font-size:11px;padding:8px}
 .blog-page .blog-article-text[data-reader-size=normal]{font-size:16px}.blog-page .blog-article-text[data-spacing=normal]{line-height:1.6}.blog-page .blog-article-text[data-spacing=compact]{line-height:1.45}.blog-page .blog-article-text[data-spacing=relaxed]{line-height:1.85}.blog-page .blog-article-text p{margin-bottom:10px}.blog-page .blog-article-text h2{font-size:22px;margin:22px 0 10px}.blog-page .blog-article-text h3{font-size:20px;margin:19px 0 9px}
 .blog-page.blog-reading-active .blog-voice{padding:11px;margin-bottom:13px;border-radius:11px}.blog-voice-heading{margin-bottom:9px}.blog-voice-options{margin-top:10px}.blog-voice progress{margin:10px 0 8px}.blog-page .blog-voice-hint{font-size:10px}
 .blog-related{margin:18px 10px 8px;padding-top:16px}.blog-related-heading{align-items:flex-start;flex-wrap:wrap;gap:9px;margin-bottom:12px}.blog-related-heading h2{font-size:19px;margin-top:5px}.blog-page .blog-related-heading button{min-height:36px;padding:7px 9px;font-size:10px}.blog-related-grid{gap:10px}.blog-page a.blog-related-card{min-height:155px;border-radius:12px}.blog-related-copy{padding:14px;gap:9px}.blog-related-copy h3{font-size:16px}.blog-related-copy>p{font-size:11px;line-height:1.5}
}

/* The article image is mounted once, as the title card's background layer. */
.blog-page .blog-article>.blog-section-heading.blog-title-has-image{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:260px;color:#fff;background:#161b2c}
.blog-title-has-image>img.blog-title-cover{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0;object-fit:cover;object-position:center}
.blog-title-has-image:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(110deg,#101425cc 0%,#10142575 80%),linear-gradient(180deg,#10142515,#101425e8)}
.blog-title-has-image>:not(.blog-title-cover){position:relative;z-index:2}
.blog-page .blog-article>.blog-title-has-image h1{color:#fff;text-shadow:0 2px 15px #0007}.blog-page .blog-article>.blog-title-has-image>p{color:#e3e6f0}.blog-title-has-image .blog-eyebrow{color:#d7caff}.blog-title-has-image .blog-article-meta{color:#e0e4ef}.blog-title-has-image .blog-reading-time{color:#f1edff;background:#121729ba;border-color:#ffffff35}.blog-title-has-image .user-name{color:#fff!important;background:none!important;-webkit-text-fill-color:currentColor}
@media(max-width:650px){.blog-page .blog-article>.blog-section-heading.blog-title-has-image{min-height:195px;padding:17px 12px}.blog-title-has-image>img.blog-title-cover{object-position:center 40%}}