:root {
  --article-bg: #151518;
  --article-panel: #202023;
  --article-line: rgba(255, 255, 255, .12);
  --article-text: #f5f5f2;
  --article-muted: #b2b2b8;
  --article-green: #69d38c;
  --article-ink: #102217;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--article-bg); color: var(--article-text); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; line-height: 1.65; }
a { color: inherit; }
.article-skip { position: fixed; z-index: 10; top: 8px; left: 8px; padding: 8px 12px; transform: translateY(-150%); border-radius: 6px; background: var(--article-green); color: var(--article-ink); font-weight: 700; }
.article-skip:focus { transform: translateY(0); }
.article-nav { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 24px; padding: 12px max(24px, calc((100% - 1120px) / 2)); border-bottom: 1px solid var(--article-line); background: rgba(21, 21, 24, .92); backdrop-filter: blur(14px); }
.article-brand, .article-nav-links { display: flex; align-items: center; gap: 12px; }
.article-brand { font-family: Georgia, serif; font-size: 20px; font-style: italic; text-decoration: none; }
.article-brand img { border-radius: 6px; }
.article-nav-links { gap: 20px; color: var(--article-muted); font-size: 14px; }
.article-nav-links a { text-decoration: none; }
.article-nav-links a:hover { color: var(--article-text); }
.article-download { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 7px; background: var(--article-green); color: var(--article-ink); font-weight: 750; text-decoration: none; }
.article-hero, .article-body, .article-footer { width: min(860px, calc(100% - 48px)); margin: 0 auto; }
.article-hero { padding: 86px 0 68px; }
.article-kicker { margin: 0 0 14px; color: var(--article-green); font-size: 12px; font-weight: 750; letter-spacing: .12em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: Georgia, "Songti SC", serif; font-weight: 500; letter-spacing: -.015em; }
h1 { max-width: 790px; margin-bottom: 22px; font-size: clamp(42px, 7vw, 68px); line-height: 1.08; }
h2 { margin-bottom: 18px; font-size: clamp(30px, 4vw, 40px); line-height: 1.2; }
h3 { margin-bottom: 8px; font-size: 17px; }
p, li { color: var(--article-muted); }
.article-lead { max-width: 720px; margin-bottom: 28px; font-size: 19px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 9px 18px; margin: 0; color: #85858c; font-size: 13px; }
.article-meta span { color: inherit; }
.article-section { padding: 58px 0; border-top: 1px solid var(--article-line); }
.article-section > p, .article-section > ul { max-width: 740px; }
.article-section ul { padding-left: 21px; }
.article-section li + li { margin-top: 8px; }
.article-steps { display: grid; gap: 0; margin: 30px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--article-line); }
.article-steps li { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 25px 0; border-bottom: 1px solid var(--article-line); }
.article-step-number { color: var(--article-green); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.article-steps p { margin-bottom: 0; }
.article-shot { margin: 34px 0 0; overflow: hidden; border: 1px solid var(--article-line); border-radius: 9px; background: #070708; }
.article-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.article-shot figcaption { padding: 10px 13px; color: #8b8b91; font-size: 13px; }
.article-callout { padding: 26px 28px; border: 1px solid rgba(105, 211, 140, .42); border-radius: 9px; background: rgba(105, 211, 140, .07); }
.article-callout p { margin-bottom: 0; color: #d2d2d5; }
.article-faq { border-top: 1px solid var(--article-line); }
.article-faq details { padding: 19px 0; border-bottom: 1px solid var(--article-line); }
.article-faq summary { cursor: pointer; color: var(--article-text); font-weight: 700; }
.article-faq p { margin: 12px 0 0; }
.article-cta { text-align: center; }
.article-cta p { max-width: 660px; margin: 0 auto 24px; }
.article-cta .article-download { padding: 12px 20px; }
.article-footer { display: flex; flex-wrap: wrap; gap: 12px 26px; padding: 30px 0 45px; border-top: 1px solid var(--article-line); color: var(--article-muted); font-size: 14px; }
.article-footer a:hover { color: var(--article-text); }

@media (max-width: 680px) {
  .article-nav { min-height: 58px; padding: 10px 18px; }
  .article-nav-links { gap: 13px; font-size: 12px; }
  .article-nav-links a:not(.article-download) { display: none; }
  .article-hero, .article-body, .article-footer { width: min(100% - 36px, 860px); }
  .article-hero { padding: 62px 0 50px; }
  .article-section { padding: 46px 0; }
  .article-steps li { grid-template-columns: 42px 1fr; gap: 12px; }
  .article-callout { padding: 22px; }
}