html:has(.blog-page),html:has(.blog-post-page){scroll-snap-type:none}.blog-page,.blog-post-page{padding-top:var(--header-height);min-height:100vh;background:var(--color-bg-deep)}.blog-hero{padding:var(--space-20) 0 var(--space-12);text-align:center}.blog-hero__title{font-size:var(--text-4xl);font-weight:700;margin:var(--space-4) 0 var(--space-6);background:linear-gradient(135deg,var(--color-text-primary) 0%,var(--color-text-secondary) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.blog-hero__desc{font-size:var(--text-lg);color:var(--color-text-secondary);line-height:1.8}.blog-filters{padding-bottom:var(--space-8)}.blog-filters__bar{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}.blog-filters__btn{padding:var(--space-2) var(--space-5);font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);background:var(--color-bg-elevated);border:1px solid var(--color-bg-surface);border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-fast)}.blog-filters__btn:hover{color:var(--color-accent-primary);border-color:var(--color-accent-primary)}.blog-filters__btn.active{background:var(--color-text-primary);color:#fff;border-color:var(--color-text-primary)}.blog-draft-banner{padding:var(--space-3) 0;background:linear-gradient(90deg,#f59e0b,#f97316);text-align:center;font-size:var(--text-sm);font-weight:600;color:#fff;letter-spacing:.02em}.blog-draft-banner--article{margin-bottom:var(--space-6)}.blog-grid-section{padding-bottom:var(--space-20)}.blog-pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding-top:var(--space-12)}.blog-pagination__btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 var(--space-3);font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary);background:var(--color-bg-elevated);border:1px solid var(--color-bg-surface);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--duration-fast);-webkit-user-select:none;user-select:none}.blog-pagination__btn:hover:not(.disabled):not(.active){color:var(--color-accent-primary);border-color:var(--color-accent-primary);background:#4a90d90a}.blog-pagination__btn.active{background:var(--color-accent-primary);color:#fff;border-color:var(--color-accent-primary);font-weight:600}.blog-pagination__btn.disabled{opacity:.35;cursor:not-allowed}.blog-pagination__btn--arrow{background:transparent;border-color:transparent}.blog-pagination__btn--arrow:hover:not(.disabled){background:var(--color-bg-elevated);border-color:var(--color-bg-surface)}.blog-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;width:32px;height:40px;color:var(--color-text-muted);font-size:var(--text-sm);-webkit-user-select:none;user-select:none}@media(max-width:480px){.blog-pagination{gap:var(--space-1)}.blog-pagination__btn{min-width:36px;height:36px;font-size:13px}}.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--space-8)}@media(max-width:768px){.blog-grid{grid-template-columns:1fr}}.blog-card{display:flex;flex-direction:column;background:var(--color-bg-elevated);border:1px solid rgba(74,144,217,.08);border-radius:var(--radius-2xl);overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow-card);transition:all var(--duration-slow) var(--ease-out-quart)}.blog-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px #4a90d926;border-color:#4a90d933}.blog-card:hover .blog-card__image img{transform:scale(1.05)}.blog-card:hover .blog-card__image-overlay{opacity:0}.blog-card--draft{border-color:#f59e0b4d}.blog-card--draft:hover{border-color:#f59e0b80}.blog-card__image{position:relative;width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,var(--color-bg-surface),var(--color-bg-deep));overflow:hidden}.blog-card__image--fallback{background:linear-gradient(135deg,#e8f0f8,#d0dde8)}.blog-card__image img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-out-quart)}.blog-card__image-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.03) 100%);transition:opacity var(--duration-normal)}.blog-card__badge{position:absolute;top:var(--space-4);right:var(--space-4);padding:var(--space-1) var(--space-3);font-size:11px;font-weight:600;border-radius:var(--radius-full);z-index:1}.blog-card__badge--draft{background:#f59e0b;color:#fff}.blog-card__category{position:absolute;bottom:var(--space-4);left:var(--space-4);padding:var(--space-1) var(--space-3);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.05em;background:#ffffffeb;color:var(--color-accent-primary);border-radius:var(--radius-full);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1}.blog-card__body{display:flex;flex-direction:column;flex:1;padding:var(--space-6) var(--space-6) var(--space-8)}.blog-card__title{font-size:var(--text-xl);font-weight:600;color:var(--color-text-primary);line-height:1.4;margin-bottom:var(--space-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.blog-card__excerpt{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.7;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:var(--space-4)}.blog-card__meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);font-size:12px;color:var(--color-text-muted)}.blog-card__dot{opacity:.4}.blog-loading{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-20) 0;color:var(--color-text-muted)}.blog-loading__spinner{width:36px;height:36px;border:3px solid var(--color-bg-surface);border-top-color:var(--color-accent-primary);border-radius:50%;animation:spin .8s linear infinite}.blog-empty,.blog-error{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-20) 0;text-align:center;color:var(--color-text-muted)}.blog-empty svg,.blog-error svg{width:48px;height:48px;opacity:.4}.blog-empty h2,.blog-error h2{font-size:var(--text-2xl);color:var(--color-text-primary)}.blog-empty p,.blog-error p{font-size:var(--text-base)}.blog-empty .btn,.blog-error .btn{margin-top:var(--space-4)}.blog-breadcrumb{padding:var(--space-6) 0 var(--space-4)}.blog-breadcrumb__back{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted);transition:color var(--duration-fast)}.blog-breadcrumb__back svg{width:18px;height:18px}.blog-breadcrumb__back:hover{color:var(--color-accent-primary)}.article-header{padding:var(--space-4) 0 var(--space-12);text-align:center}.article-header__meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--space-6);font-size:var(--text-sm);color:var(--color-text-muted)}.article-header__category{padding:var(--space-1) var(--space-4);background:#4a90d91a;color:var(--color-accent-primary);border-radius:var(--radius-full);font-weight:500;font-size:13px}.article-header__title{font-size:var(--text-3xl);font-weight:700;line-height:1.3;max-width:800px;margin:0 auto var(--space-8);color:var(--color-text-primary)}.article-header__author{display:flex;align-items:center;justify-content:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--color-text-secondary)}.article-header__avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;border:2px solid var(--color-bg-surface)}.article-header__avatar img{width:100%;height:100%;object-fit:cover}.article-content{position:relative}.article-content .container{max-width:780px}.article-toc{position:fixed;top:50%;transform:translateY(-50%);right:max(var(--space-8),(100vw - 780px) / 2 - 240px);width:200px;max-height:55vh;overflow-y:auto;z-index:10;opacity:0;animation:tocFadeIn .5s ease .3s forwards;scrollbar-width:none}.article-toc::-webkit-scrollbar{display:none}.article-toc__header{font-family:var(--font-mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);padding-bottom:var(--space-3);margin-bottom:var(--space-2);border-bottom:1px solid var(--color-bg-surface)}.article-toc__list{list-style:none;padding:0;margin:0}.article-toc__link{display:block;padding:var(--space-2) 0 var(--space-2) var(--space-4);font-size:13px;line-height:1.5;color:var(--color-text-muted);text-decoration:none;border-left:2px solid var(--color-bg-surface);transition:all var(--duration-fast);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.article-toc__link:hover{color:var(--color-accent-primary);border-left-color:#4a90d94d}.article-toc__link.active{color:var(--color-accent-primary);border-left-color:var(--color-accent-primary);font-weight:500}@media(max-width:1280px){.article-toc{display:none!important}}@keyframes tocFadeIn{0%{opacity:0;transform:translateY(-50%) translate(10px)}to{opacity:1;transform:translateY(-50%) translate(0)}}.article-body{font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text-primary);line-height:1.9}.article-body h2{font-size:var(--text-2xl);font-weight:700;margin:var(--space-12) 0 var(--space-6);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-bg-surface);color:var(--color-text-primary)}.article-body h3{font-size:var(--text-xl);font-weight:600;margin:var(--space-10) 0 var(--space-4);color:var(--color-text-primary)}.article-body h4{font-size:var(--text-lg);font-weight:600;margin:var(--space-8) 0 var(--space-3)}.article-body p{margin-bottom:var(--space-6)}.article-body ul,.article-body ol{margin:var(--space-4) 0 var(--space-6);padding-left:var(--space-6)}.article-body ul li,.article-body ol li{margin-bottom:var(--space-2)}.article-body ul li{list-style:disc}.article-body ol li{list-style:decimal}.article-body a{color:var(--color-accent-primary);text-decoration:underline;text-underline-offset:3px;transition:opacity var(--duration-fast)}.article-body a:hover{opacity:.8}.article-body blockquote{margin:var(--space-6) 0;padding:var(--space-6) var(--space-8);border-left:4px solid var(--color-accent-primary);background:#4a90d90a;border-radius:0 var(--radius-lg) var(--radius-lg) 0;font-style:italic;color:var(--color-text-secondary)}.article-body blockquote p:last-child{margin-bottom:0}.article-body code{font-family:var(--font-mono);font-size:.9em;padding:.15em .4em;background:#4a90d914;color:var(--color-accent-primary);border-radius:var(--radius-sm)}.article-body pre{margin:var(--space-6) 0;padding:var(--space-6);background:#1e293b;border-radius:var(--radius-xl);overflow-x:auto;position:relative}.article-body pre code{display:block;padding:0;background:none;color:#e2e8f0;font-size:.875rem;line-height:1.7}.article-body .code-lang-label{position:absolute;top:var(--space-2);right:var(--space-4);font-family:var(--font-mono);font-size:11px;color:#ffffff59;text-transform:uppercase;letter-spacing:.05em}.article-body .article-figure{margin:var(--space-8) 0;text-align:center}.article-body .article-figure img{max-width:100%;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}.article-body .article-figure figcaption{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-text-muted);font-style:italic}.article-body .article-figure--video video{width:100%;max-width:100%;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);background:#000}.article-body .article-video-wrapper{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);background:#000}.article-body .article-video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:var(--radius-xl)}.article-body img{max-width:100%;height:auto;border-radius:var(--radius-lg)}.article-body hr{margin:var(--space-12) 0;border:none;height:1px;background:var(--color-bg-surface)}.article-body strong{font-weight:600;color:var(--color-text-primary)}.article-body em{font-style:italic}.article-body .table-wrapper{width:100%;margin:var(--space-6) 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg);border:1px solid var(--color-bg-surface)}.article-body table{width:100%;margin:var(--space-6) 0;border-collapse:collapse;font-size:.925em}.article-body table th,.article-body table td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--color-bg-surface);white-space:nowrap}@media(min-width:640px){.article-body table th,.article-body table td{white-space:normal}}.article-body table th{font-weight:600;background:var(--color-bg-surface);color:var(--color-text-primary);letter-spacing:.01em}.article-body table tr:last-child td{border-bottom:none}.article-body table tr:hover td{background:#4a90d908}.article-body table code{font-size:.85em}.article-footer{padding:var(--space-12) 0 var(--space-20)}.article-footer .container{max-width:780px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-6);padding-top:var(--space-8);border-top:1px solid var(--color-bg-surface)}.article-tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}.article-tag{padding:var(--space-1) var(--space-3);font-size:12px;font-family:var(--font-mono);color:var(--color-text-muted);background:var(--color-bg-surface);border-radius:var(--radius-full)}.article-share{display:flex;align-items:center;gap:var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted)}.article-share__links{display:flex;gap:var(--space-2)}.article-share__btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:13px;color:var(--color-text-secondary);background:var(--color-bg-elevated);border:1px solid var(--color-bg-surface);border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-fast)}.article-share__btn svg{width:16px;height:16px}.article-share__btn:hover{color:var(--color-accent-primary);border-color:var(--color-accent-primary)}.nav__link--active{color:var(--color-accent-primary)!important}.nav__link--active:after{width:100%!important}