:root {
  --paper: #faf7f2;
  --surface: #ffffff;
  --border: #e4ddd1;
  --ink: #1b1a17;
  --ink-2: #5e5a52;
  --ink-3: #8c877d;
  --accent: #4338ca;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141311;
    --surface: #1d1c19;
    --border: #34312b;
    --ink: #f3efe7;
    --ink-2: #b5afa4;
    --ink-3: #857f74;
    --accent: #8b85f0;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 var(--sans);
  -webkit-text-size-adjust: 100%;
}
.page { max-width: 680px; margin: 0 auto; padding: 32px 16px 64px; }
header.masthead {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 16px; margin-bottom: 8px;
  border-bottom: 3px double var(--ink);
}
header.masthead img { width: 49px; height: 49px; image-rendering: pixelated; }
header.masthead a { color: inherit; text-decoration: none; }
.brand { font: 700 28px/1.1 var(--serif); letter-spacing: -0.01em; }
.tagline { font-size: 13px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
nav { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 0 28px; font-size: 15px; }
nav a { color: var(--ink-2); text-decoration: none; }
nav a:hover, nav a[aria-current='page'] { color: var(--accent); }
h1 { font: 700 34px/1.15 var(--serif); margin: 0 0 6px; letter-spacing: -0.01em; }
.updated { color: var(--ink-3); font-size: 14px; margin: 0 0 28px; }
h2 { font: 700 22px/1.25 var(--serif); margin: 36px 0 10px; }
h3 { font-size: 17px; margin: 24px 0 6px; }
p, ul { margin: 0 0 14px; }
ul { padding-left: 22px; }
li { margin-bottom: 6px; }
a { color: var(--accent); }
strong { font-weight: 650; }
.lede { font: 20px/1.5 var(--serif); color: var(--ink-2); margin-bottom: 24px; }
.box {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; margin: 18px 0;
}
.box p:last-child, .box ul:last-child { margin-bottom: 0; }
code, pre {
  font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
}
code { padding: 1px 5px; overflow-wrap: anywhere; }
pre { padding: 12px 14px; overflow-x: auto; }
pre code { border: 0; padding: 0; background: none; }
footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; color: var(--ink-3); }
footer a { color: var(--ink-3); }