/* AI 编程最佳实践 · 两张图共用的底色与零件 */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --bg: #080c16;
  --ink: #e8ecf4;
  --ink-2: #9aa6ba;
  --ink-3: #6b7790;
  --line: rgba(148, 163, 184, .16);
  --line-2: rgba(148, 163, 184, .30);
  --gold: #d4af5e;
  --cyan: #38d3e8;
  --emerald: #3ddc97;
  --rose: #fb7185;
  --sky: #7cc4fb;
  --panel: rgba(148, 163, 184, .055);
}
html { background: var(--bg); }
body {
  margin: 0;
  padding: 26px 30px 30px;
  background:
    radial-gradient(1100px 380px at 46% -140px, rgba(212, 175, 94, .10), transparent 70%),
    radial-gradient(900px 320px at 92% 118%, rgba(56, 211, 232, .07), transparent 70%),
    var(--bg);
  color: var(--ink);
  font: 13.5px/1.55 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.fig { max-width: 1180px; margin: 0 auto; }
.fig-kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 8px;
}
.fig-kicker i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.fig-title { margin: 0 0 4px; font-size: 19px; font-weight: 750; letter-spacing: -0.01em; color: var(--ink); }
.fig-sub { margin: 0 0 22px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.stage svg { display: block; width: 100%; height: auto; }
.stage text { font-family: inherit; }
.narrow { display: none; }
@media (max-width: 640px) {
  body { padding: 20px 18px 24px; }
  .stage { display: none; }
  .narrow { display: block; }
}