:root {
  color-scheme: light dark;
  --guide-bg: #f1f3f7;
  --guide-surface: #fff;
  --guide-subtle: #f5f6fa;
  --guide-text: #171a2b;
  --guide-muted: #596177;
  --guide-border: #d4d8e2;
  --guide-accent: #5546dc;
  --guide-accent-strong: #4434c6;
  --guide-accent-soft: #f1efff;
  --guide-button-text: #fff;
  font-family: "Noto Sans SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--guide-text);
  background: var(--guide-bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
@media (prefers-color-scheme: dark) {
  :root {
    --guide-bg: #101722;
    --guide-surface: #1b2636;
    --guide-subtle: #202e40;
    --guide-text: #e7edf5;
    --guide-muted: #bac7d8;
    --guide-border: #495d77;
    --guide-accent: #cfb878;
    --guide-accent-strong: #ebd697;
    --guide-accent-soft: #39372f;
    --guide-button-text: #171a2b;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.75; }
a { color: var(--guide-accent); text-underline-offset: .22em; }
a:hover { color: var(--guide-accent-strong); }
a:focus-visible { outline: 3px solid var(--guide-accent); outline-offset: 4px; border-radius: 4px; }
.guide-content { width: min(984px, calc(100% - 48px)); margin: 32px auto; padding: 32px; border: 1px solid var(--guide-border); border-radius: 8px; background: var(--guide-surface); }
.intro { padding: 0 0 32px; }
h1, h2, h3 { color: var(--guide-text); line-height: 1.4; }
h1 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 32px); letter-spacing: -.025em; }
.intro-text { margin: 0; max-width: 760px; color: var(--guide-muted); font-size: 16px; }
.primary-link { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 46px; margin-top: 20px; padding: 10px 18px; border-radius: 8px; text-decoration: none; font-weight: 700; background: var(--guide-accent); color: var(--guide-button-text); }
.primary-link:hover { background: var(--guide-accent-strong); color: var(--guide-button-text); }
.section { padding: 32px 0; border-top: 1px solid var(--guide-border); }
.section h2 { margin: 0 0 20px; font-size: 22px; letter-spacing: -.02em; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.steps li { padding: 16px; border-radius: 8px; background: var(--guide-subtle); }
.step-index { display: block; margin-bottom: 8px; color: var(--guide-accent); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.steps h3 { margin: 0 0 8px; font-size: 16px; }
.steps p { margin: 0; color: var(--guide-muted); font-size: 14px; }
.section-note { margin: 20px 0 0; padding: 12px 16px; border-left: 3px solid var(--guide-accent); border-radius: 0 6px 6px 0; background: var(--guide-accent-soft); color: var(--guide-muted); font-size: 14px; }
.site-footer { padding-top: 20px; border-top: 1px solid var(--guide-border); font-size: 13px; color: var(--guide-muted); }
.site-footer p { margin: 0; }
@media (max-width: 720px) {
  .guide-content { width: calc(100% - 40px); margin-block: 20px; padding: 24px 20px; }
  .intro { padding-bottom: 24px; }
  .section { padding: 24px 0; }
  .section h2 { font-size: 20px; margin-bottom: 16px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step-index { margin-bottom: 6px; }
  .section-note { padding: 12px 14px; }
}
@media (max-width: 360px) {
  .guide-content { width: calc(100% - 32px); padding-inline: 16px; }
  .primary-link { padding-inline: 12px; font-size: 14px; }
}