.blog-layout{ display:grid; grid-template-columns:280px 1fr; gap:2.5rem;}.blog-main{ min-width:0;}.blog-sidebar{ align-self:start;}@media (max-width:768px){ .blog-layout{ grid-template-columns:1fr;} .blog-sidebar{ order:2;}}.blog-post{ padding-top:1.5rem;}.blog-post-layout{ display:grid; grid-template-columns:1fr 320px; gap:2.5rem;}.blog-post-main{ min-width:0; max-width:720px;}@media (max-width:768px){ .blog-post-layout{ grid-template-columns:1fr;}}.blog-page-header{ margin-top:1.5rem; margin-bottom:2rem;} .blog-page-header h1{ margin:0 0 .5rem; font-size:2rem; font-weight:700;} .blog-page-header p{ margin:0; color:var(--clr-muted); font-size:.9375rem;} .active-tag{ margin-top:.75rem; font-size:.875rem; color:var(--clr-muted);}.post-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1.5rem;}.post-card{ display:flex; flex-direction:column; border:1px solid var(--clr-border); border-radius:var(--radius-md); padding:1.5rem; background:var(--clr-bg); transition:border-color .15s;} .post-card:hover{ border-color:var(--clr-accent);} .post-card-img{ width:100%; height:180px; object-fit:cover; border-radius:var(--radius-sm); margin-bottom:1rem;} .post-card-body{ flex:1; display:flex; flex-direction:column;} .post-cats{ display:flex; gap:.375rem; flex-wrap:wrap; margin-bottom:.5rem;} .post-cat{ font-size:.6875rem; font-weight:600; background:var(--clr-surface); color:var(--clr-muted); padding:.125rem .5rem; border-radius:999px; text-decoration:none;} .post-card-title{ font-size:1.125rem; font-weight:700; margin:0 0 .5rem; line-height:1.3;} .post-card-title a{ color:var(--clr-text); text-decoration:none;} .post-card-title a:hover{ color:var(--clr-accent);} .post-card-meta{ font-size:.75rem; color:var(--clr-faint); display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin-bottom:.75rem;} .meta-view-count{ display:inline-flex; align-items:center; gap:.25rem;} .post-excerpt{ color:var(--clr-muted); margin:0 0 1rem; font-size:.9375rem; line-height:1.6; flex:1;} .read-more{ font-size:.875rem; font-weight:600; color:var(--clr-accent); text-decoration:none; margin-top:auto;} .read-more:hover{ text-decoration:underline;}.blog-widget{ background:var(--clr-surface); border:1px solid var(--clr-border); border-radius:var(--radius-md); padding:1.25rem; margin-bottom:1.5rem;} .blog-widget h3{ font-size:.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--clr-accent); margin:0 0 1rem;} .category-list{ list-style:none; padding:0; margin:0;} .category-list li{ display:flex; justify-content:space-between; align-items:center; padding:.25rem 0; border-bottom:1px solid var(--clr-border);} .category-list li:last-child{ border-bottom:none;} .category-list a{ font-size:.875rem; color:var(--clr-muted); text-decoration:none;} .category-list a:hover{ color:var(--clr-accent);} .cat-count{ font-size:.75rem; color:var(--clr-faint); background:var(--clr-bg); padding:.125rem .5rem; border-radius:999px;} .tag-cloud{ display:flex; flex-wrap:wrap; gap:.375rem; align-content:flex-start;} .tag-cloud-link{ display:inline-block; background:var(--clr-bg); color:var(--clr-muted); text-decoration:none; padding:.1875rem .625rem; border-radius:999px; border:1px solid var(--clr-border); transition:background-color .15s, color .15s;} .tag-cloud-link:hover{ background:var(--clr-accent-fill); color:#fff;} .tag-size-1{ font-size:.7rem;} .tag-size-2{ font-size:.76rem;} .tag-size-3{ font-size:.83rem;} .tag-size-4{ font-size:.9rem;} .tag-size-5{ font-size:1rem;} .tag-size-6{ font-size:1.1rem;} .tag-size-7{ font-size:1.3rem;} .trending-list{ list-style:none; padding:0; margin:0;} .trending-list li{ display:flex; gap:.5rem; align-items:baseline; padding:.375rem 0; border-bottom:1px solid var(--clr-border);} .trending-list li:last-child{ border-bottom:none;} .trending-list a{ font-size:.875rem; color:var(--clr-muted); text-decoration:none; flex:1;} .trending-list a:hover{ color:var(--clr-accent);} .trending-list .view-count{ font-size:.75rem; color:var(--clr-accent); display:inline-flex; align-items:center; gap:.25rem;}.newsletter-form{ display:grid; gap:.625rem;} .newsletter-form input[type="email"]{ width:100%; padding:.5rem .75rem; border:1px solid var(--clr-border); border-radius:var(--radius-sm); font-size:.875rem; font-family:inherit; box-sizing:border-box; background:var(--clr-bg); color:var(--clr-text);} .newsletter-form .btn{ width:100%;}.social-share{ display:flex; align-items:center; gap:.75rem; margin:2rem 0; padding:1.25rem; background:var(--clr-surface); border:1px solid var(--clr-border); border-radius:var(--radius-md);} .social-share-top{ margin-top:0;} .social-share-bottom{ margin-bottom:2rem;} .share-label{ font-size:.8125rem; font-weight:600; color:var(--clr-muted); white-space:nowrap;} .share-buttons{ display:inline-flex; flex-wrap:wrap; gap:.375rem;} .social-btn{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--clr-border); border-radius:var(--radius-sm); background:var(--clr-bg); color:var(--clr-muted); cursor:pointer; transition:color .15s, border-color .15s, background-color .15s; text-decoration:none;} .social-btn:hover{ background:var(--clr-accent-fill); color:#fff; border-color:var(--clr-accent-fill);}.back-to-top{ position:fixed; bottom:1.5rem; right:1.5rem; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--clr-border); border-radius:999px; background:var(--clr-bg); color:var(--clr-text); cursor:pointer; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; z-index:200;} .back-to-top.show{ opacity:1; visibility:visible;} .back-to-top:hover{ background:var(--clr-accent-fill); color:#fff; border-color:var(--clr-accent-fill);}.post-breadcrumb{ font-size:.875rem; margin-bottom:1.5rem; color:var(--clr-muted); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;} .post-breadcrumb .crumbs{ display:inline-flex; align-items:center; gap:.4rem; flex-wrap:wrap; min-width:0;} .post-breadcrumb a{ color:var(--clr-muted); text-decoration:none; white-space:nowrap;} .post-breadcrumb a:hover{ color:var(--clr-accent);} .post-breadcrumb .sep{ margin:0;} .post-breadcrumb .pi{ width:.875rem; height:.875rem; flex-shrink:0;} .post-header{ margin-bottom:2rem;} .post-header h1{ font-size:2rem; font-weight:800; line-height:1.25; margin:0 0 .875rem;} .meta{ font-size:.8125rem; color:var(--clr-faint); display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1rem;} .view-count{ display:inline-flex; align-items:center; gap:.25rem;} .post-lang-switch{ margin-top:.5rem; font-size:.875rem; color:var(--clr-muted);} .recently-updated{ font-size:.75rem; color:var(--clr-faint); display:inline-block; margin-top:.25rem;} .featured-img{ width:100%; max-height:400px; object-fit:cover; border-radius:var(--radius-sm); margin-bottom:2rem;}.post-body{ font-size:1.0625rem; line-height:1.7;} .post-body h1, .post-body h2, .post-body h3, .post-body h4{ font-weight:700; margin:2rem 0 .75rem; line-height:1.3;} .post-body h1{ font-size:1.75rem;} .post-body h2{ font-size:1.5rem;} .post-body h3{ font-size:1.25rem;} .post-body p{ margin:0 0 1.25rem;} .post-body pre{ background:var(--clr-surface); padding:1rem; border-radius:var(--radius-sm); overflow-x:auto; font-size:.875rem; border:1px solid var(--clr-border);} .post-body blockquote{ border-left:3px solid var(--clr-border); margin:1.5rem 0; padding:.5rem 1.25rem; color:var(--clr-muted);} .post-body img{ max-width:100%; border-radius:var(--radius-sm);} .post-body a{ color:var(--clr-accent);} .post-tags{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--clr-border);} .tag{ font-size:.75rem; background:var(--clr-surface); color:var(--clr-muted); padding:.25rem .625rem; border-radius:999px; text-decoration:none;} .tag:hover{ background:var(--clr-border);} .post-sources{ margin-top:2rem; padding:1rem 1.25rem; background:var(--clr-surface); border:1px solid var(--clr-border); border-radius:var(--radius-sm); font-size:.875rem;} .post-sources p{ margin:0 0 .5rem;}.blog-toc{ list-style:none; padding:0; margin:0;} .blog-toc ol{ padding-left:1rem; margin:0;} ul{ list-style:auto !important; padding:0 !important; margin-left:2rem !important;} ol{ list-style:auto !important; padding:0 !important; margin-left:2rem !important; margin-bottom:1rem !important;} .blog-toc li{ padding:.125rem 0;} .blog-toc a{ font-size:.8125rem; color:var(--clr-muted); text-decoration:none; display:block; padding-left:.5rem; border-left:2px solid transparent;} .blog-toc a:hover{ color:var(--clr-accent); border-left-color:var(--clr-accent);} .blog-toc .toc-dot{ color:var(--clr-faint); margin-right:.375rem;}.series-box{ background:var(--clr-surface); border:1px solid var(--clr-border); border-radius:var(--radius-md); padding:1.25rem 1.5rem; margin-bottom:2rem;} .series-box-label{ font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--clr-accent); margin-bottom:.5rem;} .series-box-title{ font-size:1rem; font-weight:700; margin-bottom:.75rem;} .series-posts{ list-style:none; margin:0 0 1rem; padding:0;} .series-posts li{ font-size:.875rem; padding:.25rem 0; display:flex; align-items:center; gap:.5rem;} .series-posts li.current{ font-weight:700; color:var(--clr-accent);} .series-posts li.current::before{ content:"\25B6"; font-size:.625rem;} .series-posts li:not(.current)::before{ content:""; display:inline-block; width:.75rem;} .series-posts a{ color:var(--clr-muted); text-decoration:none;} .series-posts a:hover{ color:var(--clr-accent);} .series-nav{ display:flex; gap:.75rem; flex-wrap:wrap;} .series-nav a{ font-size:.8125rem; padding:.375rem .875rem; border:1px solid var(--clr-border); border-radius:var(--radius-sm); color:var(--clr-accent); text-decoration:none; display:inline-flex; align-items:center; gap:.375rem; background:var(--clr-bg);} .series-nav a:hover{ background:var(--clr-surface);} .series-nav .pi{ width:.875rem; height:.875rem; flex-shrink:0;}.reading-list-btn{ display:inline-flex; align-items:center; gap:.375rem; font-size:.8125rem; padding:.375rem .75rem; border:1px solid var(--clr-border); border-radius:var(--radius-sm); background:var(--clr-bg); cursor:pointer; color:var(--clr-text); font-weight:500; transition:all .15s;} .reading-list-btn:hover{ border-color:var(--clr-accent); color:var(--clr-accent);} .reading-list-btn.saved{ background:var(--clr-surface); border-color:var(--clr-accent); color:var(--clr-accent);}.comments{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--clr-border);} .comments-count{ font-size:1.25rem; margin-bottom:1.25rem;} .comment{ padding:1rem 0; border-bottom:1px solid var(--clr-border);} .comment-author{ font-weight:600; font-size:.875rem;} .comment-date{ font-size:.75rem; color:var(--clr-faint); margin-left:.5rem;} .comment-body{ margin-top:.25rem; color:var(--clr-muted);} .comment-reply-btn{ font-size:.75rem; color:var(--clr-muted); background:none; border:0; cursor:pointer; padding:0; margin-top:.375rem;} .comment-reply-btn:hover{ color:var(--clr-accent);} .comment-replies{ padding-left:1.5rem; border-left:2px solid var(--clr-border); margin-top:.5rem;} .reply-form{ margin-top:.75rem; padding:1rem; background:var(--clr-surface); border-radius:var(--radius-sm); display:none;} .reply-form.open{ display:block;} .comment-form{ margin-top:2rem;} .comment-form h3{ font-size:1.125rem; margin-bottom:1rem;} .field{ margin-bottom:1rem;} .field label{ display:block; font-size:.875rem; font-weight:600; margin-bottom:.375rem;} .field input, .field textarea{ width:100%; padding:.5rem .75rem; border:1px solid var(--clr-border); border-radius:var(--radius-sm); font-size:.9375rem; font-family:inherit; box-sizing:border-box; background:var(--clr-bg); color:var(--clr-text);} .field textarea{ resize:vertical; min-height:100px;} .btn{ padding:.5rem 1.25rem; background:var(--clr-accent-fill); color:#fff; border:0; border-radius:var(--radius-sm); cursor:pointer; font-size:.9375rem; font-weight:600;} .btn:hover{ opacity:.85;} .btn-cancel{ background:var(--clr-muted); margin-left:.5rem;} .btn-sm{ padding:.35rem .875rem; font-size:.8125rem;} .notice{ padding:.75rem 1rem; border-radius:var(--radius-sm); font-size:.875rem; margin-bottom:1rem;} .notice.success{ background:#d1fae5; color:#065f46;} .notice.error{ background:#fee2e2; color:#991b1b;} [data-theme="dark"] .notice.success{ background:rgba(16, 185, 129, .15); color:#6ee7b7;} [data-theme="dark"] .notice.error{ background:rgba(239, 68, 68, .15); color:#fca5a5;}.related{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--clr-border);} .related h2{ font-size:1.125rem; font-weight:700; margin-bottom:1.25rem;} .related-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1.25rem;} .related-card{ border:1px solid var(--clr-border); border-radius:var(--radius-md); overflow:hidden; text-decoration:none; color:inherit; display:block; background:var(--clr-bg);} .related-card:hover{ border-color:var(--clr-accent);} .related-card-img{ width:100%; height:140px; object-fit:cover; display:block; background:var(--clr-surface);} .related-card-body{ padding:.875rem 1rem;} .related-card-title{ font-size:.9375rem; font-weight:600; line-height:1.35; margin:0 0 .375rem;} .related-card-meta{ font-size:.75rem; color:var(--clr-faint);}.pagination{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; padding:2.5rem 0;} .pagination a, .pagination span{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--radius-sm); font-size:.875rem; border:1px solid var(--clr-border);} .pagination .current{ background:var(--clr-accent-fill); color:#fff; border-color:var(--clr-accent-fill);}.empty{ text-align:center; padding:4rem 1rem; color:var(--clr-faint);}.cat-breadcrumb{ font-size:.875rem; margin-bottom:2rem; color:var(--clr-muted); display:flex; align-items:center; flex-wrap:wrap; gap:0 .4rem;} .cat-breadcrumb a{ color:var(--clr-muted); text-decoration:none; white-space:nowrap;} .cat-breadcrumb a:hover{ color:var(--clr-accent);} .cat-breadcrumb .sep{ margin:0;} .cat-breadcrumb .pi{ width:.875rem; height:.875rem; flex-shrink:0;} .cat-header{ margin-bottom:2.5rem;} .cat-header h1{ margin:0 0 .375rem;} .cat-header p{ color:var(--clr-muted); margin:0;}@media (max-width:768px){ .post-grid{ grid-template-columns:1fr;} .related-grid{ grid-template-columns:1fr;} .blog-toc{ font-size:.8125rem;}}@media (min-width:641px) and (max-width:768px){ .post-grid{ grid-template-columns:repeat(2, 1fr);}}@media (prefers-reduced-motion:reduce){ .post-card, .related-card, .social-btn, .back-to-top, .reading-list-btn, .series-posts a, .series-nav a, .tag-cloud-link, .comment-reply-btn, .header-icon-btn{ transition:none;}}