.article-page .site-main { width: min(100%, var(--reading-width)); padding-top: var(--space-16); }
.article-header { margin-top: var(--space-8); padding-bottom: var(--space-10); border-bottom: 1px solid var(--color-border); }
.article-header__kicker { margin-bottom: var(--space-4); color: var(--color-brand-emphasis); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.article-header h1 { color: var(--color-text); font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 650; letter-spacing: -.05em; line-height: 1.08; text-wrap: wrap; }
.article-header__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); color: var(--color-text-subtle); font-size: var(--font-size-sm); }
.article-content { padding-top: var(--space-10); color: var(--color-text); font-size: 1.0625rem; line-height: 1.75; }
.article-content :is(h2, h3, p) { text-wrap: wrap; }
.article-content > * + * { margin-top: var(--space-5); }
.article-content h2 { margin-top: var(--space-16); color: var(--color-text); font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -.035em; line-height: 1.2; }
.article-content h3 { margin-top: var(--space-10); color: var(--color-text); font-size: var(--font-size-xl); }
.article-content ol, .article-content ul { padding-left: var(--space-6); }
.article-content li + li { margin-top: .375rem; }
.article-content a { color: var(--color-brand-emphasis); text-decoration: underline; text-underline-offset: .18em; }
.article-content code:not(pre code) { padding: .12em .35em; border: 1px solid var(--color-border); border-radius: .35rem; background: var(--color-surface); color: var(--color-text); font-family: var(--font-mono); font-size: .88em; }
.article-content blockquote { padding: var(--space-5) var(--space-6); border-left: .2rem solid var(--color-brand); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--color-surface); color: var(--color-text); font-weight: 500; }
.code-block { overflow: hidden; margin-top: var(--space-6); border: 1px solid var(--color-border); border-radius: 1.5rem; background: #202123; }
[data-theme="light"] .code-block { background: #f4f4f5; }
.code-block__header { display: flex; min-height: 2.75rem; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4) 0; color: var(--color-text); font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: 500; }
.copy-button { display: inline-grid; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; cursor: pointer; place-items: center; padding: 0; border: 0; border-radius: .625rem; background: transparent; color: var(--color-text); }
.copy-button svg { width: 1.25rem; height: 1.25rem; }
.code-block pre { max-height: 38rem; overflow: auto; padding: var(--space-4) var(--space-5) var(--space-5); color: var(--syntax-foreground); font-family: var(--font-mono); font-size: .875rem; line-height: 1.65; tab-size: 2; font-variant-ligatures: none; }
.code-block code { display: block; min-width: max-content; }
.code-block code:is(.language-text, .language-markdown, .language-md) { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-sans); white-space: pre-wrap; }
.hljs-comment, .hljs-quote { color: var(--syntax-comment); }
.hljs-keyword, .hljs-selector-tag, .hljs-bullet { color: var(--syntax-keyword); }
.hljs-title, .hljs-section { color: var(--syntax-title); font-weight: 600; }
.hljs-string, .hljs-attr { color: var(--syntax-string); }
.hljs-number, .hljs-literal { color: var(--syntax-number); }
.hljs-type, .hljs-built_in { color: var(--syntax-type); }
.hljs-meta { color: var(--syntax-meta); }
.article-cta { margin-top: var(--space-12) !important; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-card), var(--color-brand-soft)); }
.article-cta strong { display: block; margin-bottom: var(--space-2); color: var(--color-text); }
.article-back-link { display: inline-flex; align-items: center; color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 500; }
@media (hover:hover) { .article-back-link:hover { color: var(--color-text); } .copy-button:hover { background: rgb(255 255 255 / 8%); } [data-theme="light"] .copy-button:hover { background: rgb(24 24 27 / 7%); } }
@media (max-width:43rem) { .article-page .site-main { padding-top: var(--space-10); } .article-content { font-size: var(--font-size-base); line-height: 1.7; } }
@media (max-width:30rem) { .article-page .site-main.container { padding-inline: var(--space-4); } .article-content blockquote { padding: var(--space-4); } .code-block pre { padding: var(--space-3) var(--space-4) var(--space-4); } .code-block__header { padding-inline: var(--space-4); } }