.article-page-container{margin-top:var(--space-2xl)}.article-panel{padding:var(--space-xl);border-radius:var(--radius-lg);background:var(--glass-surface);-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);overflow:hidden}.article-hero-wrapper{margin-bottom:var(--space-xl);position:relative}.article-hero{border-radius:var(--radius-md);aspect-ratio:21/9;overflow:hidden}.article-hero img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.article-hero__bookmark{top:var(--space-md);z-index:10;position:absolute;inset-inline-end:var(--space-md)}.article-header{margin-bottom:var(--space-xl);padding-bottom:var(--space-lg);border-bottom:1px solid var(--color-border)}.article-source{align-items:baseline;gap:var(--space-sm);margin-top:var(--space-2xl);color:var(--color-text-muted);font-size:var(--text-sm);text-align:start;line-height:1.5;display:flex}.article-source__icon{flex-shrink:0}.article-source__label{flex-shrink:0;font-weight:600}.article-source a{overflow-wrap:anywhere}.article-tags{align-items:center;gap:var(--space-md);margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--color-border);flex-wrap:wrap;display:flex}.article-tags__icon{color:var(--color-text-muted);font-size:var(--text-lg)}.article-tags__list{gap:var(--space-sm);flex-wrap:wrap;display:flex}.article-tags__tag{padding:var(--space-xs) var(--space-md);background:var(--glass-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--text-sm);color:var(--color-accent-primary);transition:all var(--transition-fast);text-decoration:none;display:inline-block}.article-tags__tag:hover{border-color:var(--color-accent-primary);text-underline-offset:2px;background:#7c3aed1a;text-decoration:underline;transform:translateY(-2px)}.article-title{color:var(--color-text-primary);margin-bottom:16px;font-size:2.5rem}.article-meta{color:var(--color-text-muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;font-size:.9rem;display:flex}.article-meta-info{align-items:center;gap:10px;display:flex}.article-layout{text-align:justify}@media (min-width:1024px){.article-layout{grid-template-columns:1fr 250px}}.article-content,.markdown-content{color:var(--color-text-secondary);font-size:1.1rem;line-height:1.8}.article-content h2,.markdown-content h2{font-size:var(--text-2xl);color:var(--color-text-primary);margin-top:var(--space-2xl);margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:2px solid var(--color-border)}.article-content h3,.markdown-content h3{font-size:var(--text-xl);color:var(--color-text-primary);margin-top:var(--space-xl);margin-bottom:var(--space-md)}.article-content p,.markdown-content p{margin-bottom:var(--space-lg);color:var(--color-text-secondary)}.article-content a,.markdown-content a{color:var(--color-accent-primary);text-underline-offset:2px;text-decoration:underline}.article-content a:hover,.markdown-content a:hover{color:var(--color-accent-secondary)}.article-content img,.markdown-content img{border-radius:var(--radius-lg);max-width:100%;height:auto;margin:var(--space-xl) 0;box-shadow:var(--shadow-md)}.article-content blockquote,.markdown-content blockquote{margin:var(--space-xl) 0;padding:var(--space-lg);border-inline-start:4px solid var(--color-accent-primary);border-radius:var(--radius-md);color:var(--color-text-secondary);background:#ffffff80;padding-inline-start:var(--space-xl);font-style:italic}.article-content ul,.article-content ol,.markdown-content ul,.markdown-content ol{margin-bottom:var(--space-lg);padding-inline-start:var(--space-xl)}.article-content li,.markdown-content li{margin-bottom:var(--space-sm)}.article-content pre,.markdown-content pre{margin:var(--space-xl) 0;padding:var(--space-lg);border:1px solid var(--color-border);border-radius:var(--radius-lg);font-family:var(--font-ui);font-size:var(--text-sm);background:#ffffff80;line-height:1.6;overflow-x:auto}.article-content code,.markdown-content code{font-family:var(--font-ui);padding:var(--space-3xs) var(--space-xs);border-radius:var(--radius-sm);color:var(--color-accent-tertiary);background:#ffffff80;font-size:.9em}.article-content pre code,.markdown-content pre code{color:inherit;background:0 0;padding:0}.code-block{margin:var(--space-lg) 0;background:var(--color-bg-elevated);border:1px solid var(--color-border-light);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden}.code-block__header{background:var(--color-bg-soft);padding:var(--space-xs) var(--space-md);border-bottom:1px solid var(--color-border-light);justify-content:space-between;align-items:center;display:flex}.code-block__language{color:var(--color-text-muted);font-size:var(--text-xs);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em}.code-block pre{padding:var(--space-md);background:0 0;border:none;margin:0;overflow-x:auto}.code-block code{font-family:var(--font-mono);font-size:var(--text-sm);background:0 0;padding:0;line-height:1.5;color:var(--color-text-primary)!important}.article-hr{border:none;border-top:1px solid var(--color-border-light);margin:var(--space-xl) 0;opacity:.5}.article-content table{width:100%;margin:var(--space-xl) 0;border-collapse:collapse}.article-content th,.article-content td{padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);text-align:start}.article-content th{color:var(--color-text-primary);background:#ffffff80;font-weight:600}.article-navigation{gap:var(--space-md);margin-top:var(--space-3xl);padding-top:var(--space-2xl);border-top:1px solid var(--color-border);grid-template-columns:1fr;display:grid}@media (min-width:768px){.article-navigation{grid-template-columns:1fr 1fr}}.article-nav-link{padding:var(--space-md);border-radius:var(--radius-md);border:1px solid var(--color-border);transition:all var(--transition-fast);color:var(--color-text-primary);align-items:center;text-decoration:none;display:flex}.article-nav-link:hover{border-color:var(--color-accent-primary);background:var(--glass-surface-hover)}.article-nav-link--prev{flex-direction:row}.article-nav-link--next{text-align:end;flex-direction:row-reverse}.article-nav-icon{color:var(--color-text-muted);transition:color var(--transition-fast)}.article-nav-link:hover .article-nav-icon{color:var(--color-accent-primary)}.article-nav-content{flex-direction:column;display:flex}.article-nav-label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}.article-nav-title{font-size:var(--text-sm);color:var(--color-text-primary);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-weight:600;display:-webkit-box;overflow:hidden}.article-nav-link:hover .article-nav-title{color:var(--color-accent-primary)}.article-suggestions{margin-top:var(--space-3xl);padding-top:var(--space-2xl);border-top:1px solid var(--color-border)}.article-suggestions__title{font-size:var(--text-xl);margin-bottom:var(--space-xl);color:var(--color-text-primary);font-weight:700}.article-suggestions__grid{gap:var(--space-lg);grid-template-columns:1fr;display:grid}@media (min-width:768px){.article-suggestions__grid{grid-template-columns:repeat(3,1fr)}}.article-suggestion-card{border:1px solid var(--color-border);border-radius:var(--radius-md);height:100%;transition:all var(--transition-fast);color:var(--color-text-primary);text-decoration:none;display:block;overflow:hidden}.article-suggestion-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}.article-suggestion-image{aspect-ratio:16/9;background:var(--glass-surface);overflow:hidden}.article-suggestion-image img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;transition:transform .3s}.article-suggestion-card:hover .article-suggestion-image img{transform:scale(1.05)}.article-suggestion-placeholder{background:linear-gradient(135deg, var(--glass-surface) 0%, #7c3aed1a 100%);width:100%;height:100%;color:var(--color-text-muted);justify-content:center;align-items:center;font-size:2rem;display:flex}.article-suggestion-card:hover .article-suggestion-placeholder{color:var(--color-accent-primary)}.article-suggestion-content{padding:var(--space-md)}.article-suggestion-title{color:var(--color-text-primary);-webkit-line-clamp:2;margin-bottom:var(--space-sm);-webkit-box-orient:vertical;font-weight:700;display:-webkit-box;overflow:hidden}.article-suggestion-card:hover .article-suggestion-title{color:var(--color-accent-primary)}.article-suggestion-summary{font-size:var(--text-sm);color:var(--color-text-secondary);-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.article-comments-section{margin-top:var(--space-3xl);padding-top:var(--space-2xl);border-top:1px solid var(--color-border)}.article-footer{margin-top:var(--space-3xl);padding-top:var(--space-xl);border-top:1px solid var(--color-border)}.btn--secondary{padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-weight:500;font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast);border:1px solid var(--color-border);background:var(--glass-surface);color:var(--color-text-primary);align-items:center;gap:8px;text-decoration:none;display:inline-flex}.btn--secondary:hover{background:var(--glass-surface-hover);border-color:var(--color-accent-primary);color:var(--color-accent-primary)}.article-sidebar{gap:var(--space-lg);top:calc(var(--header-height) + var(--space-lg));flex-direction:column;height:fit-content;display:flex;position:sticky}.share-widget{padding:var(--space-lg)}.share-widget__title{font-size:var(--text-sm);font-weight:var(--font-semibold);margin-bottom:var(--space-md);align-items:center;gap:var(--space-xs);color:var(--color-text-secondary);display:flex}.share-widget__buttons{gap:var(--space-xs);display:flex}.share-btn{border-radius:var(--radius-md);background:var(--color-bg-elevated);width:44px;height:44px;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;text-decoration:none;display:flex}.share-btn:hover{transform:translateY(-2px)}.share-btn--twitter:hover{color:#fff;background:#1da1f2}.share-btn--linkedin:hover{color:#fff;background:#0a66c2}.share-btn--facebook:hover{color:#fff;background:#1877f2}.share-btn--copy:hover{background:var(--color-accent-primary);color:#fff}.toc-widget{padding:var(--space-lg);border-radius:var(--radius-lg);background:var(--glass-surface);-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border)}.toc-widget__title{font-size:var(--text-sm);font-weight:var(--font-semibold);margin-bottom:var(--space-md);align-items:center;gap:var(--space-xs);color:var(--color-text-secondary);display:flex}.toc-widget__list{margin:0;padding:0;list-style:none}.toc-item{margin-bottom:var(--space-xs)}.toc-item a{padding:var(--space-xs) 0;font-size:var(--text-sm);color:var(--color-text-secondary);transition:color var(--transition-fast);text-decoration:none;display:block}.toc-item a:hover{color:var(--color-accent-primary)}.toc-item--nested{padding-inline-start:var(--space-md)}.toc-item--nested a{font-size:var(--text-xs)}.tags-widget{padding:var(--space-lg);border-radius:var(--radius-lg);background:var(--glass-surface);-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border)}.tags-widget__title{font-size:var(--text-sm);font-weight:var(--font-semibold);margin-bottom:var(--space-md);align-items:center;gap:var(--space-xs);color:var(--color-text-secondary);display:flex}.article-content h1,.markdown-content h1{font-size:var(--text-2xl);color:var(--color-text-primary);margin-top:var(--space-2xl);margin-bottom:var(--space-lg);font-weight:700;line-height:1.3}html[data-theme=dark] .article-content blockquote,html[data-theme=dark] .markdown-content blockquote{border-inline-start-color:var(--color-accent-primary);background:#0000004d}html[data-theme=dark] .article-content pre,html[data-theme=dark] .markdown-content pre{border-color:var(--color-border);background:#0006}html[data-theme=dark] .article-content code,html[data-theme=dark] .markdown-content code{background:#0000004d}html[data-theme=dark] .article-content pre code,html[data-theme=dark] .markdown-content pre code{background:0 0}html[data-theme=dark] .article-content th,html[data-theme=dark] .markdown-content th{background:#0000004d}html[data-theme=dark] .article-content td,html[data-theme=dark] .markdown-content td{background:#0000001a}html[data-theme=dark] .code-block{background:#0006}html[data-theme=dark] .code-block__header{background:#00000080}