:root { color-scheme: light dark; }

body {
  margin: 0;
  padding: 40px 20px;
  font: 16px/1.6 system-ui, sans-serif;
  background: #f2f5fb;
  color: #1a2b4b;
}

main {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e2e8f3;
  border-radius: 12px;
  padding: 28px 32px;
}

h1 { margin: 0 0 8px; font-size: 24px; }
h2 { margin: 24px 0 8px; font-size: 16px; color: #5b6b8a; }
code { font-family: ui-monospace, monospace; background: #f2f5fb; padding: 1px 5px; border-radius: 4px; }
a { color: #2b73f4; }

.check {
  border: 2px solid #2b73f4;
  border-radius: 8px;
  padding: 10px 14px;
  background: #eef3ff;
}

@media (prefers-color-scheme: dark) {
  body { background: #10151f; color: #e6edf3; }
  main { background: #161b26; border-color: #2a3140; }
  code { background: #0d1117; }
  .check { background: #101c33; }
}