.article-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 120px 24px 88px;
}
.breadcrumbs { margin: 0 0 36px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; font: 12px/1.5 var(--ff-mono); color: var(--tx3); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--tx3); }
.breadcrumbs a, .article-body a, .article-toc a { color: var(--v300); text-underline-offset: 3px; }
.article-header { max-width: 840px; margin-bottom: 32px; }
.article-header h1 { font: 800 clamp(38px, 6vw, 64px)/1.02 var(--ff-display); letter-spacing: -2.2px; margin: 14px 0 18px; text-wrap: balance; }
.article-dek { max-width: 780px; margin: 0 0 18px; color: var(--tx2); font-size: clamp(18px, 2.4vw, 21px); line-height: 1.55; }
.article-meta { margin: 0; color: var(--tx3); font: 12px/1.6 var(--ff-mono); }
.article-toc { margin: 34px 0 46px; padding: 20px 22px; border: 1px solid var(--border-hi); border-radius: var(--r-lg); background: rgba(139,92,246,.055); }
.article-toc summary { cursor: pointer; color: var(--tx1); font: 700 15px/1.4 var(--ff-display); }
.article-toc ol { columns: 2; column-gap: 40px; margin: 16px 0 0; padding-left: 22px; }
.article-toc li { break-inside: avoid; margin: 7px 0; color: var(--tx3); font-size: 14px; }
.article-body { max-width: 820px; }
.article-body h2 { scroll-margin-top: 90px; margin: 58px 0 16px; color: var(--tx1); font: 800 clamp(27px, 4vw, 34px)/1.18 var(--ff-display); letter-spacing: -.7px; text-wrap: balance; }
.article-body h3 { scroll-margin-top: 90px; margin: 34px 0 10px; color: var(--tx1); font: 750 21px/1.3 var(--ff-display); }
.article-body h4 { scroll-margin-top: 90px; margin: 26px 0 8px; color: var(--tx1); font: 700 17px/1.4 var(--ff-display); }
.article-body p, .article-body li { color: var(--tx2); font-size: 16.5px; line-height: 1.72; }
.article-body p { margin: 0 0 18px; }
.article-body ul, .article-body ol { padding-left: 25px; margin: 0 0 22px; }
.article-body li { margin: 8px 0; padding-left: 3px; }
.article-body strong { color: var(--tx1); }
.article-body code { padding: 2px 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--tx1); font: .9em var(--ff-mono); }
.article-body blockquote { margin: 26px 0; padding: 20px 22px; border-left: 3px solid var(--v400); border-radius: 0 var(--r-md) var(--r-md) 0; background: rgba(139,92,246,.06); }
.article-body blockquote p { margin: 0; color: var(--tx1); font-size: 17px; }
.table-scroll { overflow-x: auto; margin: 26px 0 32px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline: 2px solid var(--v300); outline-offset: 3px; }
.article-body table { width: 100%; min-width: 620px; border-collapse: collapse; }
.article-body th, .article-body td { padding: 13px 15px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; color: var(--tx2); font-size: 14px; line-height: 1.55; }
.article-body th { color: var(--tx1); background: rgba(139,92,246,.07); font: 700 13px/1.45 var(--ff-display); }
.article-body tr:last-child td { border-bottom: 0; }
.article-cta { max-width: 820px; margin-top: 62px; padding: 32px; border: 1px solid var(--border-hi); border-radius: var(--r-xl); background: var(--surface); text-align: center; }
.article-cta h2 { margin: 0 0 10px; color: var(--tx1); font: 800 28px/1.2 var(--ff-display); letter-spacing: -.5px; }
.article-cta p { max-width: 650px; margin: 0 auto 22px; color: var(--tx2); }
@media (max-width: 700px) {
  .article-shell { padding: 104px 18px 68px; }
  .article-header h1 { letter-spacing: -1.4px; }
  .article-toc ol { columns: 1; }
  .article-body p, .article-body li { font-size: 16px; }
  .article-cta { padding: 26px 20px; }
}