:root {
  color-scheme: light dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
}

body {
  margin: 0;
  background: #f5f7fb;
  color: #172033;
}

main {
  box-sizing: border-box;
  max-width: 860px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 48px 28px 72px;
  background: #ffffff;
}

h1, h2 { line-height: 1.25; }
h1 { margin-top: 0; }
h2 { margin-top: 2rem; }
a { color: #2457d6; }
.meta, .note { color: #59657a; }
.note {
  border-left: 4px solid #6b82c5;
  padding: 0.75rem 1rem;
  background: #f0f4ff;
}
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.button {
  display: inline-block;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: #2457d6;
  color: #fff;
  text-decoration: none;
}
.guide { max-width: 980px; }
.toc { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.5rem 0; }
.toc a { padding: .5rem .75rem; border-radius: 999px; background: #eef3ff; text-decoration: none; }
.steps { padding-left: 1.4rem; }
.steps > li { margin: 1.4rem 0 2rem; }
.steps h3 { margin-bottom: .35rem; }
.steps.compact > li { margin: .55rem 0; }
figure { margin: 1rem 0; }
figure img { display: block; width: 100%; height: auto; border: 1px solid #d9dfeb; border-radius: 14px; box-shadow: 0 8px 24px rgba(30,55,95,.10); }
figcaption { margin-top: .45rem; color: #667085; font-size: .9rem; }
.warning { padding: 1rem; border-radius: 12px; background: #fff4df; border: 1px solid #f2c46d; color: #6a4300; }
.faq dt { margin-top: 1rem; font-weight: 700; }
.faq dd { margin-left: 0; color: #59657a; }

@media (prefers-color-scheme: dark) {
  body, main { background: #101522; color: #edf1fb; }
  a { color: #9db9ff; }
  .meta, .note { color: #bdc7dc; }
  .note { background: #19233a; }
  .toc a { background: #19233a; }
  .warning { background: #3a2b12; color: #ffe2a9; border-color: #806020; }
  .faq dd, figcaption { color: #bdc7dc; }
}