.blog-ui { overflow-wrap:anywhere; }
.blog-ui :is(a,button,textarea,[tabindex]):focus-visible { outline:2px solid #3b82f6; outline-offset:2px; }
.blog-card { min-width:0; border:1px solid #e5e7eb; border-radius:.75rem; background:#fff; box-shadow:0 1px 2px rgb(0 0 0 / 5%); overflow:hidden; }
.blog-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem 1.5rem; }
.blog-columns { display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem; }
.blog-post-header { padding:1.5rem 1.5rem 0; }
.blog-post-header h1,.blog-post-header h2 { line-height:1.4; }
.blog-post-header h2 a:hover { color:#2563eb; }
.blog-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.375rem .75rem; margin-top:.625rem; font-size:.8125rem; color:#6b7280; }
.blog-meta a:hover { text-decoration:underline; }
.blog-pinned { display:inline-flex; align-items:center; gap:.375rem; padding:.125rem .5rem; margin-bottom:.75rem; border-radius:9999px; background:#eff6ff; color:#2563eb; font-size:.75rem; font-weight:500; }
.blog-prose { padding:1rem 1.5rem 1.5rem; font-size:.9375rem; line-height:1.8; }
.blog-prose :is(pre,table) { max-width:100%; overflow-x:auto; }
.blog-prose pre { white-space:pre; }
.blog-prose table { display:block; }
.blog-prose img { max-width:100%; height:auto; border-radius:.5rem; }
.blog-prose iframe { max-width:100%; }
.blog-prose a,.blog-link,.blog-feed-links a { color:#2563eb; }
.blog-link:hover,.blog-feed-links a:hover { text-decoration:underline; }
.blog-post-footer { padding:1rem 1.5rem; border-top:1px solid #e5e7eb; font-size:.875rem; }
.blog-button { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.625rem .875rem; border:1px solid #d1d5db; border-radius:.5rem; background:#fff; font-size:.875rem; font-weight:500; }
.blog-button:hover { background:#f9fafb; }
.blog-section-title { display:flex; align-items:center; gap:.5rem; padding:1rem 1.25rem; border-bottom:1px solid #e5e7eb; font-size:.9375rem; font-weight:600; }
.blog-side-list { padding:0 1.25rem; font-size:.875rem; }
.blog-side-list > * { padding:1rem 0; }
.blog-side-list > * + * { border-top:1px solid #e5e7eb; }
.blog-side-scroll { max-height:24rem; overflow-y:auto; }
.blog-ellipsis { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.blog-avatar { flex-shrink:0; width:2.5rem; height:2.5rem; border-radius:50%; }
.blog-feed-links { display:flex; gap:.75rem; padding:.75rem 1.25rem; border-top:1px solid #e5e7eb; font-size:.75rem; }
.blog-muted { color:#6b7280; font-size:.875rem; }
.blog-empty { padding:3rem 1.5rem; text-align:center; }
.blog-pagination { max-width:100%; overflow-x:auto; padding:.25rem; }
.blog-mobile-nav { display:flex; gap:.5rem; }
.blog-mobile-nav a { padding:.625rem 1rem; background:#fff; border:1px solid #e5e7eb; border-radius:.5rem; font-size:.875rem; }
#blog-content,#blog-sidebar,#comments { scroll-margin-top:5rem; }
.blog-comments { padding:1.5rem; }
.blog-comments .ui.comments { width:100%; margin:0; color:inherit; }
.blog-comments .ui.comments > div:first-child { font-size:1.25rem; border-color:#e5e7eb; }
.blog-comments .ui.comments .comment .text { color:inherit; overflow-wrap:anywhere; }
.blog-comments .comment-body :is(pre,table) { max-width:100%; overflow-x:auto; }
.blog-comments .comment-body img { max-width:100%; height:auto; }
.blog-comments .ui.comments .comment .metadata,.blog-comments .ui.comments .comment .actions { display:flex; flex-wrap:wrap; gap:.375rem; color:#6b7280; }
.blog-comments .ui.comments .comments { margin-left:1rem; padding-left:.75rem; }
.blog-comments textarea { width:100%; max-width:100%; min-height:8rem; padding:.75rem; border:1px solid #d1d5db; border-radius:.5rem; }
.dark .blog-card,.dark .blog-button,.dark .blog-mobile-nav a { border-color:#404040; background:#262626; }
.dark .blog-button:hover { background:#404040; }
.dark .blog-section-title,.dark .blog-feed-links,.dark .blog-post-footer,.dark .blog-side-list > * + *,.dark .blog-comments .ui.comments > div:first-child { border-color:#404040; }
.dark .blog-meta,.dark .blog-muted,.dark .blog-comments .ui.comments .comment .metadata,.dark .blog-comments .ui.comments .comment .actions { color:#a3a3a3; }
.dark .blog-link,.dark .blog-prose a,.dark .blog-feed-links a { color:#60a5fa; }
.dark .blog-pinned { background:#172554; color:#93c5fd; }
.dark .blog-comments .text-black { color:#e5e5e5; }
.dark .blog-comments textarea { border-color:#404040; background:#171717; color:#e5e5e5; }
@media (min-width:1024px) { .blog-columns { grid-template-columns:minmax(0,3fr) minmax(0,1fr); } .blog-mobile-nav { display:none; } }
@media (max-width:480px) { .blog-heading,.blog-post-header,.blog-prose,.blog-comments { padding:1rem; } .blog-post-header { padding-bottom:0; } .blog-post-footer { padding:1rem; } }

.blog-ui .copy-clipboard { position:relative; }
.blog-ui .copy-clipboard .btn-clipboard { top:.5rem; right:.5rem; padding:.25rem .5rem; border:1px solid #d1d5db; border-radius:.375rem; background:#fff; color:#4b5563; font-size:.75rem; cursor:pointer; }
.dark .blog-ui .copy-clipboard .btn-clipboard { border-color:#525252; background:#262626; color:#e5e5e5; }

.blog-comments .ui.comments > .comment { position:relative; padding:1rem 0; }
.blog-comments .comment > .avatar { display:block; float:left; width:2.5rem; height:2.5rem; }
.blog-comments .comment > .avatar img { display:block; width:2.5rem; height:2.5rem; border-radius:50%; }
.blog-comments .comment > .content { margin-left:3.25rem; min-width:0; }
.blog-comments .comment .metadata { margin:.375rem 0; font-size:.8125rem; }
.blog-comments .comment .actions { margin-top:.5rem; font-size:.875rem; }
.blog-comments .new-comment-box { margin-top:1.25rem; padding:1rem; border:1px solid #e5e7eb; border-radius:.5rem; box-shadow:none; }
.blog-comments .new-comment-heading { margin:-1rem -1rem 0; padding:.75rem 1rem; border-bottom:1px solid #e5e7eb; border-radius:.5rem .5rem 0 0; background:#f9fafb; color:#374151; }
.blog-comments .new-comment-heading > div { font-size:1rem; font-weight:600; }
.dark .blog-comments .new-comment-box,.dark .blog-comments .new-comment-heading { border-color:#404040; }
.dark .blog-comments .new-comment-heading { background:#171717; color:#e5e5e5; }