:root {
  --text: #1a1a1a;
  --bg: #ffffff;
  --muted: #666;
  --link: #06c;
  --border: #ddd;
  --table-head: #f5f5f5;
  --code-bg: #f3f3f3;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  max-width: 64rem;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

h1, h2, h3, h4 { line-height: 1.25; margin-top: 1.5em; }
h1 { font-size: 1.8rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; font-style: italic; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; margin: 1em 0; }

table { border-collapse: collapse; margin: 1em 0; }
th, td { border: 1px solid var(--border); padding: 0.4em 0.7em; text-align: left; vertical-align: top; }
th { background: var(--table-head); }

code { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--code-bg); padding: 0.1em 0.3em; border-radius: 3px; }
pre { background: var(--code-bg); padding: 0.8em 1em; overflow-x: auto; border-radius: 4px; }
pre code { background: none; padding: 0; }

blockquote { border-left: 3px solid var(--border); margin: 0; padding: 0.2em 1em; color: var(--muted); }

@media (max-width: 40rem) {
  body { margin: 1rem auto; }
}