/* ===================== ARTICLE READER ===================== */
.reader{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;padding:28px 0 60px;align-items:start}
.art-main{min-width:0}
.art-head h1{font-size:clamp(26px,3.2vw,36px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.art-tags{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.a-pill{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:100px;padding:5px 11px}
.a-pg{background:var(--tint);color:var(--green-d)}
.a-pb{background:var(--blue-bg);color:var(--blue)}
.a-pv{background:var(--violet-bg);color:var(--violet)}
.art-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted2);padding-bottom:20px;border-bottom:1px solid var(--line)}
.art-meta i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.art-meta svg{width:14px;height:14px}
.steps{counter-reset:s;list-style:none;margin:0 0 20px 0}
.steps li{position:relative;padding:12px 0 12px 44px;border-top:1px solid var(--line2);counter-increment:s}
.steps li:first-child{border-top:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:11px;width:28px;height:28px;border-radius:9px;background:var(--green);color:#fff;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}
.code-block{background:#151321;color:#e8efec;border-radius:12px;padding:16px 18px;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.7;overflow-x:auto;margin:18px 0}
.code-block .c-g{color:#7ee2ae}.code-block .c-m{color:#8a8399}
.art-foot{margin-top:40px;border-top:1px solid var(--line);padding-top:24px}
/* sidebar TOC */
.art-side{position:sticky;top:86px}
.related{margin-top:16px}
.related h2{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);margin-bottom:10px}
.related a{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;font-weight:600;padding:9px 0;border-top:1px solid var(--line2);color:var(--ink);transition:color .15s}
.related a:first-of-type{border-top:0}
.related a:hover{color:var(--green-d)}
.related svg{width:14px;height:14px;color:var(--muted2);flex:none;margin-top:2px}
@media(max-width:920px){.reader{grid-template-columns:minmax(0,1fr)}.art-side{position:static}}
@media(max-width:600px){
  .reader{gap:28px;padding:22px 0 40px}
  .art-head h1{font-size:24px}
  .art-tags{gap:6px;margin:12px 0}
  .a-pill{font-size:9.5px;padding:4px 9px}
  .art-meta{gap:10px;font-size:12px;padding-bottom:16px}
  .art-frame{margin-top:18px}
  .art-foot{margin-top:30px;padding-top:18px}
}

.art-frame{display:block;width:100%;min-height:100vh;border:0;margin-top:24px}
.art-none{padding-top:24px;color:var(--muted)}