body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.62;
  max-width: 48rem;
  margin: 4rem auto;
  padding: 0 1.25rem;
  color: hsl(0 0% 10%);
  background: hsl(60 14% 97%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}

h1 { font-size: 1.2rem;  margin: 0 0 0.5rem;     font-weight: 700; }
h2 { font-size: 1.05rem; margin: 1rem 0 0.5rem;  font-weight: 700; }

p  { margin: 0 0 0.75rem; }
ul { padding-left: 1.1rem; margin: 0 0 1rem; }
li { margin: 0.15rem 0; }
a  { color: inherit; }

strong { font-weight: 600; }
em     { font-style: italic; }

hr { border: 0; border-top: 1px solid hsl(0 0% 85%); margin: 1rem 0; }

.muted { color: hsl(0 0% 45%); font-size: 0.875rem; }

code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

code {
  background: hsl(60 8% 91%);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

pre {
  background: hsl(60 8% 91%);
  padding: 0.75rem 1rem;
  border-radius: 4px;
  overflow-x: auto;
  margin: 0 0 1.5rem;
}

pre code { background: none; padding: 0; }

@media (prefers-color-scheme: dark) {
  body      { color: hsl(0 0% 90%); background: hsl(0 0% 10%); }
  hr        { border-top-color: hsl(0 0% 20%); }
  .muted    { color: hsl(0 0% 55%); }
  code, pre { background: hsl(0 0% 15%); }
}