.article-page{min-height:100vh;padding:var(--space-24) 0;padding-top:calc(80px + var(--space-16));background:var(--color-bg-primary)}.article-page__container{max-width:800px;margin:0 auto;padding:0 var(--container-padding)}.article-page--not-found{display:flex;align-items:center;justify-content:center;text-align:center}.article-page--not-found h1{font-size:var(--text-3xl);color:var(--color-text-primary);margin-bottom:var(--space-4)}.article-page--not-found p{color:var(--color-text-secondary);margin-bottom:var(--space-8)}.article-page__back-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);background:var(--gradient-primary);color:var(--color-text-primary);font-weight:var(--font-semibold);text-decoration:none;border-radius:var(--radius-full)}.article-page__header{margin-bottom:var(--space-12);animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.article-page__back{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-tertiary);text-decoration:none;margin-bottom:var(--space-8);transition:color var(--duration-fast) var(--ease-out)}.article-page__back:hover{color:var(--color-accent-cyan)}.article-page__back svg{width:16px;height:16px}.article-page__meta{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;margin-bottom:var(--space-6)}.article-page__category{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-accent-cyan);text-transform:uppercase;letter-spacing:.1em;padding:var(--space-1) var(--space-3);background:rgba(255,71,87,.1);border-radius:var(--radius-md)}.article-page__date,.article-page__read-time{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-tertiary)}.article-page__title{font-size:var(--text-4xl);font-weight:var(--font-extrabold);color:var(--color-text-primary);line-height:1.2;margin-bottom:var(--space-6)}.article-page__description{font-size:var(--text-xl);color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--space-8)}.article-page__author{display:flex;align-items:center;gap:var(--space-4);padding-top:var(--space-6);border-top:1px solid var(--color-border-subtle)}.article-page__author-info{display:flex;flex-direction:column}.article-page__author-name{font-weight:var(--font-semibold);color:var(--color-text-primary)}.article-page__author-role{font-size:var(--text-sm);color:var(--color-text-tertiary)}.article-page__content{font-size:var(--text-lg);color:var(--color-text-secondary);line-height:1.8;animation:fadeIn .5s ease-out .1s both}.article-page__content h2{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-text-primary);margin:var(--space-12) 0 var(--space-6) 0;padding-top:var(--space-6);border-top:1px solid var(--color-border-subtle)}.article-page__content h2:first-child{margin-top:0;padding-top:0;border-top:none}.article-page__content h3{font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--color-text-primary);margin:var(--space-8) 0 var(--space-4) 0}.article-page__content p{margin-bottom:var(--space-6)}.article-page__content strong{color:var(--color-text-primary);font-weight:var(--font-semibold)}.article-page__content em{font-style:italic}.article-page__content a{color:var(--color-accent-cyan);text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--duration-fast) var(--ease-out)}.article-page__content a:hover{border-bottom-color:var(--color-accent-cyan)}.article-page__content code{font-family:var(--font-mono);font-size:.9em;background:var(--color-bg-tertiary);padding:.2em .5em;border-radius:var(--radius-sm);color:var(--color-accent-cyan)}.article-page__content pre{background:var(--color-bg-tertiary);padding:var(--space-6);border-radius:var(--radius-lg);overflow-x:auto;margin:var(--space-6) 0;border:1px solid var(--color-border-subtle)}.article-page__content pre code{background:none;padding:0;font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.6}.article-page__content .table-wrapper{overflow-x:auto;margin:var(--space-8) 0;border-radius:var(--radius-lg);border:1px solid var(--color-border-subtle)}.article-page__content table{width:100%;border-collapse:collapse;font-size:var(--text-base)}.article-page__content td,.article-page__content th{padding:var(--space-4) var(--space-5);text-align:left;border-bottom:1px solid var(--color-border-subtle)}.article-page__content th{font-weight:var(--font-semibold);color:var(--color-text-primary);background:var(--color-bg-secondary);white-space:nowrap}.article-page__content tr:last-child td{border-bottom:none}.article-page__content tr:hover td{background:var(--color-bg-secondary)}.article-page__content ol,.article-page__content ul{margin:var(--space-6) 0;padding-left:var(--space-8)}.article-page__content li{margin-bottom:var(--space-3);padding-left:var(--space-2)}.article-page__content ul li::marker{color:var(--color-accent-cyan)}.article-page__content ol li::marker{color:var(--color-accent-cyan);font-weight:var(--font-semibold)}.article-page__cta{margin-top:var(--space-16);padding:var(--space-10);background:var(--color-bg-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-2xl);text-align:center}.article-page__cta h3{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-text-primary);margin-bottom:var(--space-3)}.article-page__cta p{color:var(--color-text-secondary);margin-bottom:var(--space-6);max-width:500px;margin-left:auto;margin-right:auto}.article-page__cta-button{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-8);background:var(--gradient-primary);color:var(--color-text-primary);font-family:var(--font-display);font-size:var(--text-base);font-weight:var(--font-semibold);text-decoration:none;border-radius:var(--radius-full);transition:all var(--duration-normal) var(--ease-bounce);box-shadow:var(--shadow-glow-cyan)}.article-page__cta-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow-cyan),0 10px 30px rgba(255,71,87,.3)}.article-page__nav{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--space-6);gap:var(--space-6);margin-top:var(--space-16);padding-top:var(--space-10);border-top:1px solid var(--color-border-subtle)}.article-page__nav-link{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6);background:var(--color-bg-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl);text-decoration:none;transition:all var(--duration-normal) var(--ease-out)}.article-page__nav-link:hover{border-color:var(--color-border-accent);transform:translateY(-4px)}.article-page__nav-link--next{text-align:right}.article-page__nav-label{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.1em}.article-page__nav-title{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--color-text-primary);line-height:1.4}@media (max-width:768px){.article-page{padding:var(--space-16) 0;padding-top:calc(80px + var(--space-8))}.article-page__title{font-size:var(--text-3xl)}.article-page__description{font-size:var(--text-lg)}.article-page__content{font-size:var(--text-base)}.article-page__content h2{font-size:var(--text-xl)}.article-page__content h3{font-size:var(--text-lg)}.article-page__nav{grid-template-columns:1fr}.article-page__nav-link--next{text-align:left}.article-page__cta{padding:var(--space-8)}}