.blog-page { width:100%; display:flex; flex-direction:column; gap:24px; }
.blog-detail { width:100%; }
.blog-page [hidden],.blog-detail [hidden] { display:none!important; }
.blog-page .page-header { margin-bottom:0; }
.blog-detail .page-header { margin-bottom:24px; }
.blog-list { display:flex; flex-direction:column; gap:16px; }
.blog-card { text-decoration:none; }
.blog-card-cover { position:relative; overflow:hidden; }
.blog-card-cover img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.blog-article-content { width:100%; max-width:768px; margin-inline:auto; }
.blog-post-cover { display:block; height:auto; }
.blog-preview-banner .draft { border-color:#6b72804d; background:#6b728033; color:#d1d5db; }
.blog-preview-banner .published { border-color:color-mix(in srgb,var(--color-success) 30.196%,transparent); background:color-mix(in srgb,var(--color-success) 20.000%,transparent); color:#86efac; }
.blog-preview-banner .archived { border-color:#f59e0b4d; background:#f59e0b33; color:#fcd34d; }
.blog-error { margin:0; color:var(--color-error); font-size:13px; text-align:center; }
.blog-body { color:#e5e7eb; font-size:16px; line-height:1.7; overflow-wrap:anywhere; }
.blog-body :is(h1,h2,h3,h4,h5,h6) { margin:32px 0 12px; color:#fff; font-weight:600; line-height:1.3; }
.blog-body h1 { font-size:30px; }
.blog-body h2 { font-size:24px; }
.blog-body h3 { font-size:20px; }
.blog-body p { margin:16px 0; }
.blog-body a { color:var(--color-brand-primary); text-decoration:underline; }
.blog-body a:hover { color:#93c5fd; }
.blog-body code { padding:2px 6px; border-radius:4px; background:#ffffff0f; font-size:.875em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.blog-body pre { overflow-x:auto; margin:16px 0; padding:16px; border:1px solid #ffffff14; border-radius:8px; background:#0006; }
.blog-body pre code { padding:0; background:transparent; }
.blog-body blockquote { margin:16px 0; padding-left:16px; border-left:3px solid #ffffff29; color:#9ca3af; }
.blog-body :is(ul,ol) { margin:16px 0; padding-left:24px; }
.blog-body li { margin:4px 0; }
.blog-body img { max-width:100%; height:auto; margin:16px 0; border-radius:8px; }
.blog-body hr { margin:32px 0; border:0; border-top:1px solid #ffffff14; }
.blog-body table { width:100%; margin:16px 0; border-collapse:collapse; font-size:14px; }
.blog-body :is(th,td) { padding:8px 12px; border:1px solid #ffffff14; text-align:left; }
.blog-body th { background:#ffffff0a; font-weight:600; }
.blog-comments-loading { margin:0; padding:32px 0; color:var(--color-gray-500); font-size:14px; font-style:italic; text-align:center; }