.blog-editor, .blog-article { max-width: 960px; margin: 0 auto; padding: 24px; color: #0e2234; }
.blog-editor label { display: block; font-weight: 600; margin: 16px 0 6px; }
.blog-editor input, .blog-editor textarea { width: 100%; border: 1px solid #94a3b8; border-radius: 6px; padding: 10px; color: #172033; }
.blog-editor textarea { min-height: 100px; }
.blog-editor .blog-body { min-height: 320px; font-family: monospace; }
.blog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.blog-actions button, .blog-actions a, .blog-toolbar button { padding: 8px 14px; border: 1px solid #64748b; border-radius: 6px; background: white; color: #0e2234; }
.blog-actions .primary { background: #0e2234; color: white; }
.blog-actions .danger { color: #b91c1c; }
.blog-actions button:disabled { opacity: .5; cursor: wait; }
.blog-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.blog-message { padding: 12px; margin: 16px 0; background: #f1f5f9; border-radius: 6px; }
.blog-error { color: #991b1b; background: #fef2f2; }
.blog-article h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; line-height: 1.2; margin: 20px 0; }
.blog-article .subtitle { font-size: 1.3rem; color: #475569; margin-bottom: 20px; }
.blog-article img { max-width: 100%; height: auto; border-radius: 12px; margin: 24px auto; }
.blog-markdown { font-size: 1.1rem; line-height: 1.8; overflow-wrap: anywhere; }
.blog-markdown p, .blog-markdown ul, .blog-markdown ol { margin: 16px 0; }
.blog-markdown h2 { font-size: 1.7rem; font-weight: 700; margin: 28px 0 12px; }
.blog-markdown h3 { font-size: 1.35rem; font-weight: 700; margin: 24px 0 12px; }
.blog-markdown ul { list-style: disc; padding-left: 28px; }
.blog-markdown ol { list-style: decimal; padding-left: 28px; }
.blog-markdown a { color: #1d4ed8; text-decoration: underline; }
.blog-markdown pre { overflow-x: auto; padding: 16px; background: #f1f5f9; }
.blog-markdown blockquote { border-left: 3px solid #94a3b8; padding-left: 16px; }
@media (max-width: 650px) { .blog-editor, .blog-article { padding: 12px; } .blog-editor { margin-top: 50px; } }
.public-blog { max-width: 1120px; margin: 0 auto; padding: 40px 24px 64px; color: #0e2234; min-height: 60vh; overflow-wrap: anywhere; }
.public-blog > header { margin-bottom: 32px; }
.public-blog > header h1, .public-blog .blog-message h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.2; font-weight: 700; margin-bottom: 16px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 24px; }
.blog-summary { min-width: 0; padding: 24px; border: 1px solid #cbd5e1; border-radius: 12px; }
.blog-summary img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; margin-bottom: 20px; }
.blog-summary h2 { font-size: 1.4rem; font-weight: 700; line-height: 1.4; }
.blog-summary h2 a, .blog-back { color: #1d4ed8; text-decoration: underline; text-underline-offset: 3px; }
.blog-byline { color: #475569; font-size: .9rem; margin: 12px 0; }
.blog-back { display: inline-block; padding: 12px 0; }
.public-blog a:focus-visible, .public-blog button:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 4px; }
.public-blog .blog-article { max-width: 800px; }
.blog-markdown h4, .blog-markdown h5, .blog-markdown h6 { font-size: 1.15rem; font-weight: 700; margin: 20px 0 8px; }
@media (max-width: 650px) { .public-blog { padding: 28px 16px 48px; } .public-blog .blog-article { padding: 16px 0; } }
.blog-document { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; background: #fff; }
.blog-document * { box-sizing: border-box; }
.blog-site-header { background: #0e2234; color: white; padding: 20px max(20px, calc((100vw - 1120px) / 2)); }
.blog-site-header a { color: white; text-decoration: none; display: inline-block; padding: 8px 12px; }
.blog-site-header nav { display: flex; flex-wrap: wrap; gap: 4px; }
.blog-brand { font-size: 1.35rem; font-weight: 700; }
.blog-site-footer { padding: 24px; text-align: center; background: #f1f5f9; }
.blog-site-footer a { color: #1d4ed8; }
.blog-skip { position: absolute; left: -9999px; }
.blog-skip:focus { left: 16px; top: 8px; padding: 12px; background: white; z-index: 10; }
.blog-document a:focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; }
.blog-document img[hidden] { display: none; }