.blog-article-page{--blog-accent: #7dd3fc;--blog-line: #ffffff1a}.blog-article,.blog-article-reading,.blog-content{min-width:0}.blog-article .blog-content{overflow-wrap:break-word}.blog-article-tags{list-style:none;padding:0}.blog-article-tags li{margin:0}.blog-article-breadcrumbs :is(a,span),.blog-article-header h1{overflow-wrap:break-word}.blog-article-meta>span{color:var(--blog-accent)}.blog-article-meta>:not(:first-child):before{content:"•";margin-right:16px;color:#52647c}.blog-article-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.blog-article-emoji{display:grid;place-items:center;min-height:160px;font-size:4rem}.blog-article-toc{margin:0 0 32px;padding:20px 0;border-block:1px solid var(--blog-line)}.blog-article-toc summary{width:fit-content;cursor:pointer;color:var(--blog-accent);font-size:.8rem;font-weight:550}.blog-article-toc summary::marker{font-size:.7rem}.blog-article-toc nav{max-height:248px;overflow-y:auto;margin-top:16px;padding-right:8px;scrollbar-color:#67c9f340 transparent;scrollbar-width:thin}.blog-article-toc ol{margin:0;padding:0;list-style:none;display:grid;gap:4px;counter-reset:blog-contents}.blog-article-toc li{min-width:0;counter-increment:blog-contents}.blog-article-toc a{display:grid;grid-template-columns:21px minmax(0,1fr);gap:6px;padding:5px 0;color:#a1a1aa;text-decoration:none;font-size:.8rem;line-height:1.5;overflow-wrap:anywhere}.blog-article-toc a:before{content:counter(blog-contents,decimal-leading-zero);color:#527898;font-size:.68rem;line-height:1.8;font-variant-numeric:tabular-nums}.blog-article-toc a:hover,.blog-article-toc a:hover:before{color:var(--blog-accent)}.blog-article :is(a,summary):focus-visible{outline:2px solid var(--blog-accent);outline-offset:4px;border-radius:2px}.blog-article .blog-content :is(h2,h3,h4,[id]){scroll-margin-top:104px}.blog-article-back{margin-top:32px;padding-top:20px;border-top:1px solid var(--blog-line)}.blog-article-back a{display:inline-flex;align-items:center;gap:8px;color:#d4d4d8;font-size:.88rem;text-decoration:none}.blog-article-back a:hover{color:var(--blog-accent)}.blog-author{display:grid;grid-template-columns:36px minmax(0,1fr);gap:15px;margin-top:36px;padding-block:24px;border-top:1px solid var(--blog-line, #c5dafa24)}.blog-author-avatar{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--blog-line, #c5dafa1a);border-radius:50%;background:#0a1527;color:#cbd5e1;font-size:.9rem;font-weight:600}.blog-author h2{margin:0 0 7px;font-size:.95rem;line-height:1.4;font-weight:600}.blog-author p{margin:0;color:#a1a1aa;font-size:.85rem;line-height:1.7}.blog-author-links{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:12px}.blog-author-links a{color:#d4d4d8;font-size:.8rem;text-decoration:none}.blog-author-links a:hover{color:var(--blog-accent, #67c9f3)}.blog-author-links a:hover{text-decoration:underline;text-underline-offset:3px}.blog-author-compact{display:flex;align-items:center;gap:12px;padding-block:12px}.blog-author-compact strong{display:block;font-size:.85rem}.blog-author-compact span{color:#a1a1aa;font-size:.78rem}.blog-related{margin-top:24px;padding-top:26px;border-top:1px solid var(--blog-line, #c5dafa24)}.blog-related>h2{margin:0 0 20px;font-size:1.4rem;line-height:1.25;font-weight:600;letter-spacing:-.025em}.blog-related ul{display:grid;gap:20px;margin:0;padding:0;list-style:none}.blog-related a{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:start;gap:16px;color:#f5f5f4;text-decoration:none}.blog-related img{display:block;width:88px;height:64px;object-fit:cover;border-radius:6px;border:1px solid #c5dafa24}.blog-related h3{margin:0 0 6px;font-size:.95rem;font-weight:550;line-height:1.45}.blog-related p{margin:0;color:#a1a1aa;font-size:.82rem;line-height:1.6}.blog-related time{display:block;margin-top:7px;color:#85858f;font-size:.73rem}.blog-related a:hover h3{color:var(--blog-accent, #67c9f3)}@media(min-width:640px){.blog-article-page{padding:46px 32px 72px}.blog-article-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}.blog-related a{grid-template-columns:116px minmax(0,1fr);gap:20px}.blog-related img{width:116px;height:78px}}@media(min-width:900px){.blog-article-page{padding-left:40px;padding-right:40px}}@media(prefers-reduced-motion:reduce){.blog-article-page{scroll-behavior:auto}}
