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

* { box-sizing: border-box; }
body { margin: 0; }

main {
  width: min(880px, calc(100% - 32px));
  margin: 40px auto;
  padding: clamp(24px, 5vw, 56px);
  background: #fff;
  border: 1px solid #e4e9f1;
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(23, 32, 51, 0.08);
}

h1, h2 { line-height: 1.25; }
h1 { margin-top: 0; color: #0088ff; }
h2 { margin-top: 2rem; }
a { color: #006dcc; }
.meta, .muted { color: #59657a; }

.notice {
  padding: 16px 18px;
  background: #eef7ff;
  border-left: 4px solid #0088ff;
  border-radius: 8px;
}

li + li { margin-top: 0.35rem; }

footer {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e4e9f1;
}

@media (prefers-color-scheme: dark) {
  :root { color: #e7edf7; background: #0d1320; }
  main { background: #151d2c; border-color: #283449; box-shadow: none; }
  h1, a { color: #56adff; }
  .meta, .muted { color: #aab5c8; }
  .notice { background: #102b45; border-left-color: #56adff; }
  footer { border-top-color: #283449; }
}