.article-container{max-width:1400px;margin:0 auto;padding:var(--spacing-xl, 48px) var(--spacing-md, 16px)}.article-header{margin-bottom:var(--spacing-xl, 48px);text-align:center}.article-hero-image{width:100%;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--border-radius, 16px);margin-bottom:var(--spacing-lg, 32px)}.hero-image{width:100%;height:100%;object-fit:cover}.article-meta{display:flex;justify-content:center;align-items:center;gap:var(--spacing-md, 16px);flex-wrap:wrap;margin-bottom:var(--spacing-md, 16px)}.article-date,.article-updated{font-size:.875rem;color:var(--accent-light, #0071E3);font-weight:500}.article-updated{opacity:.8}.article-title{font-size:clamp(2rem,5vw,3rem);font-weight:700;line-height:1.2;margin-bottom:var(--spacing-md, 16px);color:var(--text-primary)}.article-description{font-size:1.25rem;color:var(--text-primary);opacity:.8;line-height:1.6;margin-bottom:var(--spacing-lg, 32px)}.article-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--spacing-sm, 8px)}.article-tag{background:var(--accent-light, #0071E3);color:#fff;padding:6px 16px;border-radius:16px;font-size:.875rem;font-weight:500}.prose{font-size:1.125rem;line-height:1.8;color:var(--text-light, #1D1D1F)}.prose h2{font-size:2rem;font-weight:700;margin-top:var(--spacing-xl, 48px);margin-bottom:var(--spacing-md, 16px);line-height:1.3}.prose h3{font-size:1.5rem;font-weight:600;margin-top:var(--spacing-lg, 32px);margin-bottom:var(--spacing-md, 16px);line-height:1.4}.prose h4{font-size:1.25rem;font-weight:600;margin-top:var(--spacing-md, 16px);margin-bottom:var(--spacing-sm, 8px)}.prose p{margin-bottom:var(--spacing-md, 16px)}.prose a{color:var(--accent-light, #0071E3);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px;transition:opacity var(--transition, .3s ease)}.prose a:hover{opacity:.8}.prose strong{font-weight:600;color:var(--text-light, #1D1D1F)}.prose em{font-style:italic}.prose ul,.prose ol{margin-bottom:var(--spacing-md, 16px);padding-left:var(--spacing-lg, 32px)}.prose li{margin-bottom:var(--spacing-sm, 8px)}.prose code{background:#0071e31a;padding:2px 8px;border-radius:4px;font-family:Courier New,monospace;font-size:.9em}.prose pre{position:relative;background:linear-gradient(180deg,#2d2d30,#1e1e1e);color:#d4d4d4;padding:0;border-radius:12px;overflow:hidden;margin-bottom:var(--spacing-lg, 32px);font-family:Fira Code,SF Mono,Consolas,Monaco,monospace;font-size:.875rem;line-height:1.7;border:1px solid #3C3C3C;box-shadow:0 25px 50px -12px #00000080,0 0 0 1px #ffffff0d,inset 0 1px #ffffff1a}.code-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:linear-gradient(180deg,#3c3c3c,#323232);border-bottom:1px solid #252525}.code-dots{display:flex;gap:8px}.code-dots span{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 -1px 1px #0003}.code-dots span:nth-child(1){background:linear-gradient(180deg,#ff5f57,#e33e32);border:1px solid #E33E32}.code-dots span:nth-child(2){background:linear-gradient(180deg,#febc2e,#e09e1a);border:1px solid #E09E1A}.code-dots span:nth-child(3){background:linear-gradient(180deg,#28c840,#1aab29);border:1px solid #1AAB29}.code-title{font-size:12px;color:#8e8e93;font-weight:500}.code-copy-btn{background:#ffffff14;border:1px solid rgba(255,255,255,.1);color:#a0a0a0;padding:5px 12px;border-radius:6px;font-size:11px;font-weight:500;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px}.code-copy-btn:hover{background:#ffffff26;color:#fff;border-color:#fff3}.code-copy-btn.copied{background:linear-gradient(180deg,#28c840,#1aab29);color:#fff;border-color:#1aab29}.prose pre code{display:block;padding:20px 24px;background:#1e1e1e;color:#d4d4d4;overflow-x:auto;overflow-y:auto;max-height:450px;tab-size:2}.prose pre code::-webkit-scrollbar{width:10px;height:10px}.prose pre code::-webkit-scrollbar-track{background:#1e1e1e}.prose pre code::-webkit-scrollbar-thumb{background:#424242;border-radius:5px;border:2px solid #1E1E1E}.prose pre code::-webkit-scrollbar-thumb:hover{background:#555}.prose pre code::-webkit-scrollbar-corner{background:#1e1e1e}.prose blockquote{border-left:4px solid var(--accent-light, #0071E3);padding-left:var(--spacing-md, 16px);margin:var(--spacing-lg, 32px) 0;font-style:italic;opacity:.9}.prose img{max-width:100%;height:auto;border-radius:var(--border-radius, 16px);margin:var(--spacing-lg, 32px) 0;display:block}.prose hr{border:none;border-top:2px solid var(--accent-light, #0071E3);margin:var(--spacing-xl, 48px) 0;opacity:.3}.article-footer{margin-top:var(--spacing-xl, 48px);padding-top:var(--spacing-lg, 32px);border-top:1px solid rgba(0,0,0,.1);display:flex;flex-direction:column;gap:var(--spacing-lg, 32px)}.back-link{color:var(--accent-light, #0071E3);text-decoration:none;font-weight:500;transition:opacity var(--transition, .3s ease);align-self:flex-start}.back-link:hover{opacity:.8}.article-banner{text-align:center}@media(prefers-color-scheme:dark){.article-date,.article-updated{color:var(--accent)}.article-tag{background:var(--accent)}.prose a{color:var(--accent)}.prose code{background:#0a84ff26}.prose blockquote{border-left-color:var(--accent)}.back-link{color:var(--accent)}.article-footer{border-top-color:#ffffff1a}}@media(max-width:768px){.article-container{padding:var(--spacing-lg, 32px) var(--spacing-md, 16px)}.prose{font-size:1rem}.prose h2{font-size:1.5rem}.prose h3{font-size:1.25rem}}