.reading-progress { position: fixed; top: 72px; left: 0; z-index: 120; width: 100%; height: 3px; background: transparent; }
.reading-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--blue), var(--aqua)); transition: width .08s linear; }

.article-hero { position: relative; margin-top: 72px; overflow: hidden; border-bottom: 1px solid var(--line); background: #f8faff; }
.article-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#cdd8e9 .7px, transparent .7px); background-size: 22px 22px; opacity: .42; mask-image: linear-gradient(to right, #000, transparent 78%); }
.article-hero::after { content: ''; position: absolute; top: -240px; right: -120px; width: 570px; height: 570px; border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,.13), transparent 68%); }
.article-hero-inner { position: relative; z-index: 1; width: min(1060px, calc(100% - 48px)); margin: 0 auto; padding: 66px 0 72px; }
.article-breadcrumb { display: flex; align-items: center; gap: .55rem; margin-bottom: 2.2rem; color: var(--muted); font: 600 .7rem 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
.article-breadcrumb a { color: var(--blue); text-decoration: none; }
.article-breadcrumb span { color: #bdc7d5; }
.article-label { display: inline-flex; margin-bottom: 1rem; color: var(--blue); font: 600 .72rem 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.article-hero h1 { max-width: 930px; color: var(--ink); font-size: clamp(2.6rem, 6.1vw, 5.2rem); line-height: .99; letter-spacing: -.065em; }
.article-deck { max-width: 790px; margin-top: 1.5rem; color: var(--sub); font-size: 1.12rem; line-height: 1.8; }
.article-byline { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1.1rem; margin-top: 2rem; color: var(--muted); font-size: .78rem; font-weight: 600; }
.article-byline strong { color: var(--ink); }
.article-byline span + span { position: relative; }
.article-byline span + span::before { content: ''; position: absolute; top: 50%; left: -.65rem; width: 3px; height: 3px; border-radius: 50%; background: #a8b4c5; }
.article-audience { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; max-width: 760px; margin-top: 2rem; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--line); }
.article-audience div { padding: .9rem 1rem; background: rgba(255,255,255,.85); }
.article-audience small { display: block; color: var(--muted); font: 600 .64rem 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.article-audience strong { display: block; margin-top: .2rem; color: var(--ink); font-size: .8rem; }

.article-shell { width: min(1060px, calc(100% - 48px)); margin: 0 auto; padding: 62px 0 88px; }
.article-layout { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: 70px; align-items: start; }
.article-toc { position: sticky; top: 104px; padding: 1rem 0; }
.article-toc summary { margin-bottom: 1rem; color: var(--ink); font: 700 .7rem 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; list-style: none; }
.article-toc summary::-webkit-details-marker { display: none; }
.article-toc ol { display: grid; gap: .2rem; list-style: none; counter-reset: toc; }
.article-toc li { counter-increment: toc; }
.article-toc a { display: grid; grid-template-columns: 24px 1fr; gap: .4rem; padding: .52rem .65rem; border-left: 2px solid transparent; color: #77859a; font-size: .75rem; line-height: 1.35; text-decoration: none; transition: .2s; }
.article-toc a::before { content: counter(toc, decimal-leading-zero); color: #b1bccb; font: 500 .62rem 'JetBrains Mono', monospace; }
.article-toc a:hover, .article-toc a.active { border-left-color: var(--blue); color: var(--blue-dark); background: #edf3ff; }

.article-body { min-width: 0; color: #273449; font-size: 1rem; line-height: 1.82; }
.article-body > p:first-child { color: #1e2c42; font-size: 1.12rem; line-height: 1.85; }
.article-body h2 { margin: 4.2rem 0 1.15rem; padding-top: .2rem; color: var(--ink); font-size: clamp(1.75rem, 3.2vw, 2.35rem); line-height: 1.18; letter-spacing: -.042em; }
.article-body h2:first-of-type { margin-top: 2.5rem; }
.article-body h3 { margin: 2.3rem 0 .8rem; color: var(--ink); font-size: 1.25rem; line-height: 1.35; letter-spacing: -.02em; }
.article-body p { margin: 1rem 0; }
.article-body ul, .article-body ol { display: grid; gap: .65rem; margin: 1rem 0 1.3rem 1.2rem; }
.article-body li { padding-left: .3rem; }
.article-body strong { color: #101b2e; }
.article-body a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-body code:not(pre code) { padding: .12rem .36rem; border: 1px solid #dce5f1; border-radius: 5px; color: #1746a2; background: #f1f5fb; font: 500 .86em 'JetBrains Mono', monospace; }

.section-number { display: block; margin-bottom: .45rem; color: var(--blue); font: 600 .68rem 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.learning-note { margin: 1.6rem 0; padding: 1.25rem 1.35rem; border-left: 4px solid var(--blue); border-radius: 0 10px 10px 0; background: #eef4ff; }
.learning-note strong { display: block; margin-bottom: .25rem; color: var(--blue-dark); }
.learning-note p { margin: 0; color: #425575; font-size: .92rem; }
.learning-note.warning { border-left-color: #d97706; background: #fffbeb; }
.learning-note.warning strong { color: #9a5305; }
.learning-note.success { border-left-color: #059669; background: #ecfdf5; }
.learning-note.success strong { color: #047857; }

.principle-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin: 1.6rem 0; }
.principle-card { padding: 1.15rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.principle-card span { display: block; margin-bottom: .45rem; color: var(--blue); font: 600 .68rem 'JetBrains Mono', monospace; }
.principle-card strong { display: block; margin-bottom: .3rem; }
.principle-card p { margin: 0; color: var(--sub); font-size: .85rem; line-height: 1.6; }

.code-block { position: relative; margin: 1.45rem 0 1.8rem; overflow: hidden; border: 1px solid #24385e; border-radius: 13px; background: #0b1739; box-shadow: 0 10px 28px rgba(11,23,57,.12); }
.code-block::before { content: attr(data-language); display: block; padding: .68rem 1rem; border-bottom: 1px solid rgba(255,255,255,.09); color: #8295b5; background: #101f43; font: 600 .63rem 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.code-block pre { overflow-x: auto; padding: 1.2rem 1.25rem 1.4rem; }
.code-block code { color: #d7e2f4; font: 500 .79rem/1.75 'JetBrains Mono', monospace; tab-size: 2; }
.copy-code { position: absolute; top: .44rem; right: .55rem; padding: .3rem .58rem; border: 1px solid rgba(255,255,255,.13); border-radius: 6px; color: #aebbd1; background: rgba(255,255,255,.06); font: 600 .62rem 'Inter', sans-serif; cursor: pointer; }
.copy-code:hover { color: #fff; border-color: rgba(69,212,196,.5); }

.structure-tree { color: #b9c9df !important; }
.comparison-table { width: 100%; margin: 1.5rem 0 1.8rem; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: .84rem; }
.comparison-table th, .comparison-table td { padding: .8rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.comparison-table th { color: #334155; background: #f3f6fb; font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; }
.comparison-table td { color: var(--sub); }
.comparison-table tr:last-child td { border-bottom: 0; }
.good { color: #047857; font-weight: 700; }
.avoid { color: #b45309; font-weight: 700; }

.steps-list { margin-left: 0 !important; list-style: none; counter-reset: steps; }
.steps-list li { position: relative; min-height: 40px; padding: .35rem 0 .9rem 3rem; counter-increment: steps; }
.steps-list li::before { content: counter(steps); position: absolute; top: .25rem; left: 0; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--blue); font: 700 .75rem 'JetBrains Mono', monospace; box-shadow: 0 5px 13px rgba(37,99,235,.2); }
.checklist { margin-left: 0 !important; list-style: none; }
.checklist li { position: relative; padding: .7rem .8rem .7rem 2.6rem; border-bottom: 1px solid #e7edf5; }
.checklist li::before { content: '✓'; position: absolute; left: .75rem; color: #059669; font-weight: 800; }

.article-divider { height: 1px; margin: 4rem 0; background: var(--line); }
.references { padding: 1.4rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.references h3 { margin-top: 0; }
.references ul { margin-bottom: 0; }
.references li { font-size: .88rem; }
.article-end-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 3rem; }
.article-end-nav a { display: inline-flex; padding: .65rem .9rem; border: 1px solid var(--line); border-radius: 8px; color: var(--blue-dark); background: #fff; font-size: .78rem; font-weight: 700; text-decoration: none; }
.article-end-nav a:hover { border-color: var(--blue); }

@media (max-width: 900px) {
    .article-layout { grid-template-columns: 1fr; gap: 24px; }
    .article-toc { position: static; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
    .article-toc summary { margin-bottom: 0; }
    .article-toc[open] summary { margin-bottom: .8rem; }
    .article-toc ol { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 650px) {
    .reading-progress { top: 72px; }
    .article-hero-inner, .article-shell { width: min(100% - 32px, 1060px); }
    .article-hero-inner { padding: 48px 0 52px; }
    .article-breadcrumb { margin-bottom: 1.6rem; font-size: .62rem; }
    .article-hero h1 { font-size: 2.65rem; }
    .article-deck { font-size: 1rem; }
    .article-byline { gap: .45rem .9rem; }
    .article-audience { grid-template-columns: 1fr; }
    .article-shell { padding: 36px 0 68px; }
    .article-toc ol { grid-template-columns: 1fr; }
    .article-body { font-size: .96rem; }
    .article-body h2 { margin-top: 3.4rem; }
    .principle-grid { grid-template-columns: 1fr; }
    .code-block { margin-right: -4px; margin-left: -4px; border-radius: 10px; }
    .code-block code { font-size: .72rem; }
    .table-scroll { overflow-x: auto; margin: 1.5rem -4px; }
    .comparison-table { min-width: 620px; margin: 0; }
    .article-end-nav { align-items: stretch; flex-direction: column; }
    .article-end-nav a { justify-content: center; }
}