:root {
  --sky: #0b0e14;
  --ink: #e8edf5;
  --muted: #9aa6bb;
  --faint: #6b768c;
  --line: rgba(232, 237, 245, .10);
  --accent: #d7e0ee;
  --display: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif;
  --body: "Noto Sans SC", "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--sky); color: var(--ink); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
a:hover { color: #fff; }
code { font: 0.86em var(--mono); color: var(--ink); }

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
  padding: 22px 24px 0;
}
.mark { color: var(--ink); text-decoration: none; font: 500 18px/1 var(--display); letter-spacing: -.02em; }
.mark em { font-style: normal; color: var(--accent); }
nav { display: flex; gap: 16px; font: 13px var(--mono); }
nav a { color: var(--muted); text-decoration: none; }
nav a[aria-current="page"] { color: var(--ink); }

main { max-width: 820px; margin: 0 auto; padding: 48px 24px 80px; }
.eyebrow { margin: 0 0 8px; font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
h1 { margin: 0 0 12px; font: 500 36px/1.15 var(--display); letter-spacing: -.03em; }
.lede { margin: 0 0 36px; color: var(--muted); font-size: 18px; max-width: 62ch; }
h2 { margin: 40px 0 10px; font: 500 20px/1.3 var(--display); letter-spacing: -.02em; }
p { margin: 0 0 14px; color: var(--muted); max-width: 68ch; }
ul { margin: 0 0 14px; padding-left: 1.2em; color: var(--muted); max-width: 68ch; }
li { margin: 6px 0; }
strong { color: var(--ink); font-weight: 500; }

table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 14px; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
th { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
td { color: var(--muted); }
td:first-child { color: var(--ink); width: 34%; }

pre {
  margin: 0 0 16px;
  padding: 14px 16px;
  overflow-x: auto;
  background: rgba(232, 237, 245, .04);
  border: 1px solid var(--line);
  border-radius: 8px;
}
pre code { color: var(--muted); }

@media (max-width: 640px) {
  h1 { font-size: 28px; }
  td:first-child { width: auto; }
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  td { border: 0; padding: 2px 0; }
}