.article-hero{position:relative;background:var(--color-bg);padding:clamp(48px,6vw,72px) 0 var(--space-10);overflow:hidden}.article-hero-glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:700px;height:400px;background:radial-gradient(ellipse at center top,rgba(108,60,245,.06) 0,transparent 70%);pointer-events:none}.article-breadcrumb{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);margin-bottom:var(--space-6)}.article-breadcrumb a{color:var(--color-text-tertiary);text-decoration:none;transition:color var(--transition-fast)}.article-breadcrumb a:hover{color:var(--color-primary)}.article-breadcrumb svg{color:var(--color-text-tertiary);flex-shrink:0;opacity:.5}.article-breadcrumb span[aria-current]{color:var(--color-text-secondary);font-weight:500}.article-hero-title{font-size:var(--text-4xl);font-weight:700;letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);color:var(--color-text);margin-bottom:var(--space-4);max-width:720px}.article-hero-desc{font-size:var(--text-base);color:var(--color-text-secondary);line-height:var(--leading-normal);max-width:640px;margin-bottom:var(--space-4)}.article-hero-meta{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-4)}.article-hero-meta__sep{color:var(--color-text-tertiary);opacity:.5}.article-hero-meta__author{font-weight:500;color:var(--color-text)}.article-hero-meta__category{font-weight:600;color:var(--color-primary)}.article-hero-tags{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}.article-hero-tags-label{font-size:var(--text-sm);color:var(--color-text-tertiary);font-weight:500;margin-right:var(--space-1)}.article-tag{font-size:11px;font-weight:500;padding:3px 10px;border-radius:var(--radius-full);background:var(--color-primary-surface);color:var(--color-primary)}.article-body{padding:var(--space-12) 0;border-top:1px solid var(--color-border)}.article-layout{display:grid;grid-template-columns:220px 1fr;gap:var(--content-gap,3rem)}.article-content{min-width:0}.article-content a:not(.btn),.article-content a:not(.btn) b,.article-content a:not(.btn) strong{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}.article-content a:not(.btn):hover,.article-content a:not(.btn):hover b,.article-content a:not(.btn):hover strong{color:var(--color-primary-hover)}.article-content img{max-width:100%;width:100%;height:auto;border-radius:var(--radius-md);box-shadow:0 2px 12px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);margin:var(--space-6) 0}.article-content .img-centered{text-align:center;margin:var(--space-6) 0}.article-content .img-centered img{max-width:500px;width:100%;display:block;margin:0 auto}.article-content .img-centered--large img{max-width:720px}.article-content h2{font-size:var(--text-2xl);font-weight:700;letter-spacing:var(--tracking-tight);line-height:var(--leading-snug);color:var(--color-text);margin-top:var(--space-12);margin-bottom:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border);scroll-margin-top:calc(var(--header-height) + var(--space-6))}.article-content h2:first-child{margin-top:0;padding-top:0;border-top:none}.article-content h3{font-size:var(--text-lg);font-weight:600;line-height:var(--leading-snug);color:var(--color-text);margin-top:var(--space-8);margin-bottom:var(--space-3)}.article-content h4{font-size:var(--text-base);font-weight:700;line-height:var(--leading-snug);color:var(--color-text);margin-top:var(--space-6);margin-bottom:var(--space-3)}.article-content p{font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--color-text-secondary);margin-bottom:var(--space-4)}.article-content ul{list-style:disc;margin-bottom:var(--space-4);padding-left:var(--space-6)}.article-content ol{list-style:decimal;margin-bottom:var(--space-4);padding-left:var(--space-6)}.article-content li{font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--color-text-secondary);margin-bottom:var(--space-2)}.article-content ul li::marker{color:var(--color-primary)}.article-content li strong,.article-content strong{color:var(--color-text);font-weight:600}.article-content blockquote{border-left:3px solid var(--color-primary);padding:var(--space-4) var(--space-6);margin:var(--space-6) 0;background:var(--color-surface-1);border-radius:0 var(--radius-sm) var(--radius-sm) 0}.article-content blockquote p{color:var(--color-text-secondary);margin-bottom:0}.article-sidebar{min-width:0}.article-sidebar-inner{position:sticky;top:calc(var(--header-height) + var(--space-8));max-height:calc(100vh - var(--header-height) - var(--space-8) - var(--space-8));overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-6);scrollbar-width:none}.article-sidebar-inner::-webkit-scrollbar{display:none}.sidebar-cta{margin-top:var(--space-4);padding:var(--space-6);background:var(--color-bg);border:1px solid var(--color-border);border-top:3px solid var(--color-primary);border-radius:var(--radius-lg);text-align:center}.sidebar-cta__heading{font-size:var(--text-sm);font-weight:800;color:var(--color-text);margin-bottom:var(--space-3);line-height:var(--leading-tight)}.sidebar-cta__desc{font-size:var(--text-xs);font-weight:500;color:var(--color-text-secondary);line-height:var(--leading-normal);margin-bottom:var(--space-5)}.sidebar-cta__btn{width:100%;text-align:center;font-size:var(--text-xs);font-weight:600}.sidebar-post-info{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-6);box-shadow:var(--shadow-xs)}.sidebar-post-info__rows{display:flex;flex-direction:column;gap:10px}.sidebar-post-info__row{display:flex;align-items:center;gap:var(--space-3);font-size:12px}.sidebar-post-info__icon{width:16px;height:16px;color:var(--color-text-tertiary);flex-shrink:0}.sidebar-post-info__label{color:var(--color-text-tertiary);white-space:nowrap;min-width:52px}.sidebar-post-info__value{color:var(--color-text-secondary);font-weight:600}.sidebar-post-info__category{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:var(--radius-full);background:var(--color-primary-surface);color:var(--color-primary)}.sidebar-post-info__tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-border)}.sidebar-post-info__tag{font-size:10.5px;padding:2px 7px;border-radius:4px;font-weight:500;background:var(--color-surface-2);color:var(--color-text-tertiary)}.sidebar-toc-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-tertiary);margin-bottom:6px}.sidebar-toc{display:flex;flex-direction:column;gap:1px}.sidebar-toc ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1px}.sidebar-toc .toc-link{display:block;font-size:var(--text-sm);color:var(--color-text-secondary);text-decoration:none;padding:6px 10px;border-radius:var(--radius-sm);border-left:2px solid transparent;transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast);font-weight:500;line-height:1.3}.sidebar-toc .toc-link:hover{color:var(--color-text);background:var(--color-surface-2)}.sidebar-toc .toc-link.active{color:var(--color-primary);border-left-color:var(--color-primary);background:var(--color-primary-surface);font-weight:600}.article-section{padding:var(--space-8) 0;border-top:1px solid var(--color-border);scroll-margin-top:calc(var(--header-height) + var(--space-6))}.article-section h2{font-size:var(--text-2xl);font-weight:700;letter-spacing:var(--tracking-tight);color:var(--color-text);margin-bottom:var(--space-4)}.article-section:empty,.article-section:has(h2:only-child){display:none}.faq-list{display:flex;flex-direction:column}.faq-item{border-bottom:1px solid var(--color-border)}.faq-item:first-child{border-top:1px solid var(--color-border)}.faq-item__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) 0;background:0 0;border:none;cursor:pointer;font-size:var(--text-base);font-weight:600;color:var(--color-text);text-align:left;font-family:inherit;line-height:1.4;transition:color var(--transition-fast)}.faq-item__trigger:hover{color:var(--color-primary)}.faq-item__icon{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--color-surface-2);display:flex;align-items:center;justify-content:center;margin-left:var(--space-4);transition:transform .2s var(--ease-out),background .2s var(--ease-out)}.faq-item__trigger:hover .faq-item__icon{background:var(--color-surface-3)}.faq-item__icon svg{width:14px;height:14px;stroke:var(--color-text-secondary);fill:none;stroke-width:2.5;stroke-linecap:round;transition:stroke .2s var(--ease-out)}.faq-item.is-open .faq-item__trigger{color:var(--color-primary)}.faq-item.is-open .faq-item__icon{transform:rotate(45deg);background:var(--color-primary-surface)}.faq-item.is-open .faq-item__icon svg{stroke:var(--color-primary)}.faq-item__answer{max-height:0;overflow:hidden;transition:max-height .35s ease-out}.faq-item.is-open .faq-item__answer{max-height:300px}.faq-item__answer-inner{font-size:var(--text-base);color:var(--color-text-secondary);line-height:var(--leading-relaxed);padding-bottom:var(--space-5)}.faq-item__answer-inner strong{color:var(--color-text);font-weight:600}.article-author-box,.article-related{margin-left:calc(220px + var(--content-gap,3rem))}.article-author-box{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-6);margin-top:var(--space-10);background:var(--color-surface-1);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.article-author-box__avatar{width:52px;height:52px;border-radius:50%;background:var(--color-primary-surface);display:flex;align-items:center;justify-content:center;flex-shrink:0}.article-author-box__avatar svg{width:26px;height:26px;color:var(--color-primary)}.article-author-box__name{font-size:var(--text-base);font-weight:700;color:var(--color-text);margin-bottom:var(--space-1)}.article-author-box__bio{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-normal)}.article-related{margin-top:var(--space-10)}.article-related h2{font-size:var(--text-2xl);font-weight:700;margin-bottom:var(--space-6)}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}a.related-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);text-decoration:none;display:flex;flex-direction:column;gap:var(--space-2);transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out),transform .3s var(--ease-out)}a.related-card:hover{border-color:var(--color-border-hover);box-shadow:var(--shadow-sm);transform:translateY(-3px)}.related-card__category{font-size:10.5px;font-weight:600;color:var(--color-primary);background:var(--color-primary-surface);padding:2px 8px;border-radius:var(--radius-full);width:fit-content}.related-card__title{font-size:var(--text-sm);font-weight:600;color:var(--color-text);line-height:1.35}.related-card__meta{font-size:11px;color:var(--color-text-tertiary);display:flex;align-items:center;gap:4px;margin-top:2px}.article-disclaimer{font-size:var(--text-xs);color:var(--color-text-tertiary);line-height:var(--leading-normal);padding:var(--space-6) 0;border-top:1px solid var(--color-border);margin-top:var(--space-8)}@media (max-width:1023px){.article-layout{grid-template-columns:1fr}.article-sidebar{display:none}.article-author-box,.article-related{margin-left:0}}@media (max-width:767px){.article-hero{padding:clamp(40px,5vw,56px) 0 var(--space-8)}.article-hero-title{font-size:var(--text-3xl)}.article-body{padding:var(--space-8) 0}.article-content h2{font-size:var(--text-xl);margin-top:var(--space-8)}.article-content h3{font-size:var(--text-base);margin-top:var(--space-6)}.related-grid{grid-template-columns:1fr}}