.article-layout{display:grid;grid-template-columns:1fr 300px;gap:var(--spacing-xl);margin-top:var(--spacing-xl)}.article-main{background-color:var(--background-white);border-radius:var(--radius-lg);padding:var(--spacing-xxl);box-shadow:var(--shadow-sm)}.article-header{margin-bottom:var(--spacing-xxl);padding-bottom:var(--spacing-xl);border-bottom:1px solid var(--border-color)}.article-title{font-size:2.5rem;margin-bottom:var(--spacing-lg);color:var(--text-primary);line-height:1.2}.article-meta{display:flex;align-items:center;gap:var(--spacing-md);color:var(--text-light);font-size:.875rem}.article-meta-divider{color:var(--border-color)}.article-author{display:flex;align-items:center;gap:var(--spacing-sm)}.author-avatar{width:32px;height:32px;border-radius:50%;background-color:var(--primary-light);display:flex;align-items:center;justify-content:center;color:var(--primary-color);font-weight:600}.article-content{font-size:1.125rem;line-height:1.8;color:var(--text-primary)}.article-content h2{margin-top:var(--spacing-xxl);font-size:2rem;color:var(--text-primary)}.article-content h3{margin-top:var(--spacing-xl);margin-bottom:var(--spacing-md);font-size:1.5rem}.article-content h2,.article-content p,.article-content pre,.article-content table,.article-cta p{margin-bottom:var(--spacing-lg)}.article-content ol,.article-content ul{margin-bottom:var(--spacing-lg);padding-left:var(--spacing-xl)}.article-content li,.toc li{margin-bottom:var(--spacing-sm)}.article-content pre{background-color:#1e1e1e;color:#d4d4d4;padding:var(--spacing-lg);border-radius:var(--radius-md);overflow-x:auto;font-size:.875rem}.article-content code{background-color:var(--background-color);padding:.125rem .375rem;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.875em;color:var(--primary-color)}.article-content pre code{background-color:transparent;padding:0;color:inherit}.article-content blockquote{border-left:4px solid var(--primary-color);padding-left:var(--spacing-lg);margin:var(--spacing-lg)0;font-style:italic;color:var(--text-secondary)}.article-content table{width:100%;border-collapse:collapse}.article-content td,.article-content th{border:1px solid var(--border-color);padding:var(--spacing-md);text-align:left}.article-content th{background-color:var(--background-color);font-weight:600}.article-content img{max-width:100%;height:auto;border-radius:var(--radius-md);margin:var(--spacing-lg)0}.article-cta{background:linear-gradient(135deg,var(--primary-light) 0%,var(--background-color) 100%);border:1px solid var(--primary-color);border-radius:var(--radius-lg);padding:var(--spacing-xl);margin:var(--spacing-xxl)0;text-align:center}.article-cta h3,.sidebar-section h4{color:var(--primary-color);margin-bottom:var(--spacing-md)}.article-sidebar{position:sticky;top:calc(var(--spacing-xl) + 60px);height:fit-content}.sidebar-section{background-color:var(--background-white);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-sm)}.sidebar-section h4{font-size:1.125rem;color:var(--text-primary)}.related-articles,.toc{list-style:none;padding:0}.toc a{color:var(--text-secondary);display:block;padding:var(--spacing-xs)0;border-left:2px solid transparent;padding-left:var(--spacing-md);transition:all var(--transition-fast)}.toc a.active,.toc a:hover{color:var(--primary-color);border-left-color:var(--primary-color)}.toc a:hover{text-decoration:none}.toc a.active{font-weight:500}.related-article{margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--border-color)}.related-article:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.related-article a{color:var(--text-primary);font-weight:500;display:block;margin-bottom:var(--spacing-xs)}.breadcrumb-item a:hover,.related-article a:hover{color:var(--primary-color);text-decoration:none}.related-article-meta{font-size:.875rem;color:var(--text-light)}.breadcrumb{padding:var(--spacing-md)0;margin-bottom:var(--spacing-lg)}.breadcrumb-list{list-style:none;padding:0;font-size:.875rem}.breadcrumb-item,.breadcrumb-list{display:flex;align-items:center;gap:var(--spacing-sm)}.breadcrumb-item a{color:var(--text-secondary)}.breadcrumb-divider{color:var(--text-light)}.code-example{margin:var(--spacing-lg)0}.code-example-header{background-color:#2d2d2d;color:#fff;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md) var(--radius-md)0 0;font-size:.875rem;font-family:var(--font-mono)}.code-example pre{margin:0;border-radius:0 0 var(--radius-md) var(--radius-md)}@media (max-width:1024px){.article-layout{grid-template-columns:1fr}.article-sidebar{position:static;margin-top:var(--spacing-xl)}}@media (max-width:768px){.article-main{padding:var(--spacing-lg)}.article-title{font-size:2rem}.article-content{font-size:1rem}.article-content h2{font-size:1.5rem}.article-content h3{font-size:1.25rem}}