.article-page{max-width:820px;margin:0 auto;padding:var(--space-7) var(--container-padding) var(--space-9)}.article-header{text-align:center;margin-bottom:var(--space-7)}.article-header .blog-category,.article-header .article-cat{display:inline-flex;align-items:center;gap:var(--space-2);padding:6px 16px;border-radius:var(--radius-full);background:var(--accent-50);border:1px solid var(--accent-200);color:var(--accent-700);font-size:var(--text-xs);font-weight:var(--font-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;margin-bottom:var(--space-4);text-decoration:none}.article-header h1{font-family:var(--font-display);font-size:var(--text-4xl);line-height:var(--leading-tight);color:var(--primary-color);margin:0 0 var(--space-4)}.article-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4);color:var(--text-secondary);font-size:var(--text-sm)}.article-meta span{display:inline-flex;align-items:center;gap:6px}.article-meta i{color:var(--accent-color)}.article-hero{margin:0 0 var(--space-7);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg)}.article-hero img{width:100%;height:auto;display:block;aspect-ratio:16 / 9;object-fit:cover}.article-content{font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text-primary)}.article-content>*{max-width:100%}.article-content>p:first-of-type::first-letter{float:left;font-family:var(--font-display);font-size:3.4rem;line-height:0.8;font-weight:var(--font-bold);color:var(--accent-color);padding:6px 12px 0 0}.article-content p{margin:0 0 var(--space-4)}.article-content a{color:var(--text-link);text-decoration:underline;text-decoration-color:var(--accent-300);text-underline-offset:3px;transition:var(--transition-fast)}.article-content a:hover{color:var(--text-link-hover)}.article-content h2{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--primary-color);line-height:var(--leading-tight);margin:var(--space-8) 0 var(--space-3);padding-left:var(--space-4);border-left:4px solid var(--accent-color)}.article-content h3{font-family:var(--font-display);font-size:var(--text-xl);color:var(--primary-color);margin:var(--space-6) 0 var(--space-2)}.article-content h4{font-size:var(--text-lg);color:var(--primary-700);margin:var(--space-5) 0 var(--space-2)}.article-content ul,.article-content ol{margin:0 0 var(--space-4);padding-left:var(--space-5)}.article-content ul li,.article-content ol li{margin-bottom:var(--space-2)}.article-content ul li::marker{color:var(--accent-color)}.article-content ol li::marker{color:var(--accent-color);font-weight:var(--font-bold)}.article-content strong{color:var(--primary-color);font-weight:var(--font-semibold)}.article-content blockquote{margin:var(--space-6) 0;padding:var(--space-4) var(--space-6);border-left:4px solid var(--accent-color);background:var(--bg-sunken);border-radius:0 var(--radius-md) var(--radius-md) 0;font-family:var(--font-display);font-size:var(--text-xl);font-style:italic;color:var(--primary-700);line-height:var(--leading-snug)}.article-content blockquote p{margin:0}.article-content blockquote cite{display:block;margin-top:var(--space-2);font-family:var(--font-body);font-size:var(--text-sm);font-style:normal;color:var(--text-secondary)}.article-content img{width:100%;height:auto;border-radius:var(--radius-md);margin:var(--space-5) 0;box-shadow:var(--shadow-sm)}.article-content figure{margin:var(--space-6) 0}.article-content figcaption{text-align:center;font-size:var(--text-sm);color:var(--text-tertiary);margin-top:var(--space-2);font-style:italic}.article-content table{width:100%;border-collapse:collapse;margin:var(--space-6) 0;font-size:var(--text-sm);box-shadow:var(--shadow-sm);border-radius:var(--radius-md);overflow:hidden}.article-content thead{background:var(--primary-800);color:var(--white)}.article-content th,.article-content td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--border-default)}.article-content tbody tr:nth-child(even){background:var(--bg-sunken)}.article-content tbody tr:last-child td{border-bottom:none}.article-callout,.article-tip,.article-info,.article-warning,.article-key{display:flex;gap:var(--space-3);align-items:flex-start;margin:var(--space-6) 0;padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--bg-sunken)}.article-callout i,.article-tip i,.article-info i,.article-warning i,.article-key i{flex-shrink:0;font-size:1.25rem;margin-top:2px}.article-callout>div,.article-tip>div,.article-info>div,.article-warning>div,.article-key>div{flex:1}.article-callout p,.article-tip p,.article-info p,.article-warning p,.article-key p{margin:0}.article-callout strong,.article-tip strong,.article-info strong,.article-warning strong,.article-key strong{display:block;margin-bottom:4px;font-family:var(--font-display)}.article-tip,.article-callout{background:var(--color-success-light);border-color:rgba(45,125,70,0.25)}.article-tip i,.article-callout i{color:var(--color-success)}.article-info{background:var(--color-info-light);border-color:rgba(43,108,176,0.25)}.article-info i{color:var(--color-info)}.article-warning{background:var(--color-warning-light);border-color:rgba(138,94,8,0.25)}.article-warning i{color:var(--color-warning)}.article-key{background:var(--accent-50);border-color:var(--accent-200)}.article-key i{color:var(--accent-color)}.article-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-3);margin:var(--space-6) 0;text-align:center}.article-stat{padding:var(--space-4);background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.article-stat__num{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--accent-color)}.article-stat__label{display:block;font-size:var(--text-xs);color:var(--text-secondary);margin-top:4px}.article-share{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-6) 0;padding-top:var(--space-4);border-top:1px solid var(--border-default)}.article-share__label{font-size:var(--text-sm);color:var(--text-secondary);margin-right:var(--space-2);font-weight:var(--font-semibold)}.article-share a,.article-share button{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);border:1px solid var(--border-default);background:var(--bg-elevated);color:var(--primary-color);cursor:pointer;text-decoration:none;transition:var(--transition-fast)}.article-share a:hover,.article-share button:hover{background:var(--accent-color);color:var(--white);border-color:var(--accent-color);transform:translateY(-2px)}.article-cta{margin:var(--space-8) 0;padding:var(--space-6);text-align:center;border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--primary-800),var(--primary-900));color:var(--white);box-shadow:var(--shadow-xl)}.article-cta h3{font-family:var(--font-display);font-size:var(--text-2xl);margin:0 0 var(--space-2);color:var(--white)}.article-cta p{color:rgba(255,255,255,0.85);margin:0 0 var(--space-4)}.article-cta .btn{min-width:220px}.article-footer{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--border-default)}.article-author{display:flex;gap:var(--space-4);align-items:center;padding:var(--space-5);background:var(--bg-sunken);border-radius:var(--radius-lg);margin-bottom:var(--space-5)}.article-author__avatar{width:56px;height:56px;flex-shrink:0;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--primary-700),var(--accent-600));display:flex;align-items:center;justify-content:center;color:var(--white);font-family:var(--font-display);font-weight:var(--font-bold);font-size:var(--text-lg)}.article-author__name{font-family:var(--font-display);color:var(--primary-color);margin:0;font-size:var(--text-lg)}.article-author__role{font-size:var(--text-sm);color:var(--text-secondary);margin:0}.article-tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}.article-tag{font-size:var(--text-xs);padding:4px 12px;border-radius:var(--radius-full);background:var(--primary-50);color:var(--primary-700);border:1px solid var(--border-default)}.article-related{margin-top:var(--space-9)}.article-related h2{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--primary-color);text-align:center;margin:0 0 var(--space-6)}.article-related__grid{display:grid;gap:var(--space-5);grid-template-columns:1fr}@media (min-width:768px){.article-related__grid{grid-template-columns:repeat(3,1fr)}}@media (prefers-reduced-motion:reduce){.article-content>p:first-of-type::first-letter,.article-share a,.article-share button{transition:none}}