.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.blog-card{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));display:flex;flex-direction:column;min-width:0;transition:border-color .2s}.blog-card:hover{border-color:var(--line2)}.blog-card-cover{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover}.blog-card-copy{padding:26px;display:flex;flex-direction:column;flex:1}.blog-card time,.blog-date{font-size:11px;color:var(--muted)}.blog-card h3{margin:18px 0 12px;font-size:23px;line-height:1.25;letter-spacing:-.6px;overflow-wrap:anywhere}.blog-card h3 a{text-decoration:none}.blog-card p{color:#aab3bf;line-height:1.75;font-size:14px;white-space:pre-line;overflow-wrap:anywhere}.blog-read{display:flex;justify-content:space-between;gap:18px;margin-top:auto;padding-top:28px;font-size:12px;color:var(--blue);text-decoration:none}.blog-empty{grid-column:1/-1;padding:35px;border:1px solid var(--line);border-radius:16px;color:var(--muted);line-height:1.7}.blog-page{min-height:70vh;padding-top:64px}.blog-back{display:inline-block;color:var(--muted);font-size:13px;text-decoration:none;margin-bottom:48px}.blog-back:hover{color:var(--text)}.blog-title{font-size:clamp(38px,5.2vw,65px);line-height:1.08;letter-spacing:-2px;overflow-wrap:anywhere}.blog-intro{color:var(--muted);line-height:1.8}.blog-pagination{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:48px;color:var(--muted)}.blog-article-header{max-width:800px;margin:0 auto 40px}.blog-article-header .blog-title{margin:20px 0 24px}.blog-lead{color:#aab3bf;font-size:19px;line-height:1.8;white-space:pre-line}.blog-article-cover{display:block;width:100%;max-width:800px;height:auto;border-radius:18px;margin:0 auto 48px}.blog-content{max-width:800px;margin:0 auto;font-size:17px;line-height:1.9;color:#c5cdd8;overflow-wrap:anywhere}.blog-block{margin:28px 0}.blog-content p,.blog-content ul,.blog-content ol{margin:18px 0}.blog-content ul,.blog-content ol{padding-left:28px}.blog-content h2,.blog-content h3{color:var(--text);line-height:1.3;margin:38px 0 18px;letter-spacing:-.5px}.blog-content h2{font-size:32px}.blog-content h3{font-size:26px}.blog-content a{color:var(--blue);text-underline-offset:4px}.blog-content img{display:block;max-width:100%;height:auto;border-radius:12px}.blog-content figcaption{color:var(--muted);font-size:12px;margin-top:12px}.blog-content blockquote{border-left:2px solid var(--blue);padding:12px 24px;color:var(--text);background:var(--panel);border-radius:0 12px 12px 0}.blog-related{margin-top:90px;padding-top:38px;border-top:1px solid var(--line)}a:focus-visible{outline:2px solid var(--blue);outline-offset:5px}@media(max-width:1000px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.blog-grid{grid-template-columns:1fr}.blog-page{padding-top:36px}.blog-back{margin-bottom:32px}.blog-title{letter-spacing:-1px}.blog-content{font-size:16px}.blog-card-copy{padding:22px}.blog-lead{font-size:17px}}
/* Rich text formatting follows the existing dark site palette. */
.blog-content code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.88em;background:rgba(117,167,255,.1);color:var(--cyan);padding:.15em .4em;border-radius:5px;white-space:pre-wrap}
.blog-content pre{max-width:100%;overflow-x:auto;padding:22px;border:1px solid var(--line2);border-radius:12px;background:var(--bg2);color:#dce6f4;font:14px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;overflow-wrap:normal;tab-size:4}
.blog-content pre code{padding:0;background:transparent;border-radius:0;color:inherit;white-space:pre;font-size:inherit}
.blog-content mark{background:#ffe08a;color:#17202a;padding:.1em .2em;border-radius:3px}
.blog-content u{text-underline-offset:3px}.blog-content hr{border:0;border-top:1px solid var(--line2);margin:32px 0}
.blog-content .richtext-image{max-width:100%;height:auto;margin:24px auto}.blog-content .richtext-image.left{float:left;max-width:45%;margin:8px 24px 16px 0}.blog-content .richtext-image.right{float:right;max-width:45%;margin:8px 0 16px 24px}.blog-block-text::after{content:"";display:block;clear:both}
@media(max-width:640px){.blog-content .richtext-image.left,.blog-content .richtext-image.right{float:none;max-width:100%;margin:24px auto}.blog-content pre{padding:16px;font-size:13px}}