:root {
  color-scheme: light dark;
  --accent: #6857d9;
  --surface: #f5f3ff;
  --text: #1c1b20;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  line-height: 1.65;
  color: var(--text);
  background: #fff;
}
header { padding: 28px 24px; background: #211a52; color: #fff; }
header div, main { max-width: 920px; margin: 0 auto; }
h1, h2, h3 { line-height: 1.25; }
h1 { margin: 0 0 6px; }
main { padding: 28px 20px 64px; }
section { margin: 28px 0; }
.meta { opacity: .8; }
.note { padding: 14px 16px; border-left: 4px solid var(--accent); background: var(--surface); border-radius: 8px; }
.language { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--surface); color: #211a52; font-size: .85rem; font-weight: 700; }
a { color: #5141bd; }
.action { display: inline-block; padding: 11px 16px; border-radius: 999px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 700; }
footer { margin-top: 44px; opacity: .75; font-size: .9rem; }
@media (prefers-color-scheme: dark) {
  :root { --surface: #292438; --text: #f4f0fa; }
  body { background: #121116; }
  a { color: #c9bfff; }
  .language { color: #f4f0fa; }
}