:root {
  color-scheme: light;
  --canvas: #f4f8f7;
  --surface: #ffffff;
  --surface-soft: #e4efed;
  --ink: #102a2e;
  --ink-soft: #29484b;
  --muted: #536f70;
  --line: #b5ceca;
  --accent: #0f766e;
  --accent-deep: #0b514c;
  --indigo: #4657a6;
  --highlight: #bfe9df;
  --measure: 76ch;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    linear-gradient(90deg, rgb(15 118 110 / 0.035) 1px, transparent 1px),
    linear-gradient(rgb(15 118 110 / 0.035) 1px, transparent 1px),
    var(--canvas);
  background-size: 32px 32px;
  color: var(--ink);
  font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.72;
}
body > header, body > main, body > nav, body > footer {
  width: min(calc(100% - 2.5rem), 78rem);
  margin-inline: auto;
}
body > header { padding: 5rem 0 2.25rem; border-bottom: 1px solid var(--line); }
body > main { max-width: var(--measure); padding: 3rem 0 5rem; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; letter-spacing: -0.025em; }
h1 { margin: 0; font-size: clamp(2.8rem, 8vw, 5.8rem); font-weight: 750; }
h2 { margin-top: 2.8em; padding-top: .65em; border-top: 1px solid var(--line); font-size: 2rem; }
h3 { margin-top: 2.2em; font-size: 1.35rem; }
a { color: var(--accent-deep); text-underline-offset: .18em; }
a:hover { color: var(--indigo); }
code, pre { font-family: "JetBrains Mono", ui-monospace, monospace; }
code { padding: .08em .32em; border-radius: .25rem; background: var(--surface-soft); font-size: .86em; }
pre { overflow-x: auto; padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: .5rem; background: var(--surface); font-size: .84rem; line-height: 1.6; }
pre code { padding: 0; background: transparent; }
blockquote { margin: 2rem 0; padding: 1rem 1.35rem; border-left: 4px solid var(--indigo); background: rgb(70 87 166 / .07); color: var(--ink-soft); }
table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 2rem; font-size: .93rem; }
th, td { padding: .65rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--accent-deep); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }
.web-nav { position: sticky; top: 0; z-index: 10; width: 100%; padding: .8rem max(1.25rem, calc((100vw - 78rem) / 2)); border-bottom: 1px solid var(--line); background: rgb(244 248 247 / .93); backdrop-filter: blur(12px); font-size: .82rem; font-weight: 700; letter-spacing: .04em; }
.web-nav a { margin-right: 1rem; text-decoration: none; }
.web-kicker { color: var(--accent); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.web-footer { padding: 2rem 0 4rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
@media (max-width: 640px) {
  body { font-size: 16px; }
  body > header { padding-top: 3.5rem; }
  table { display: block; overflow-x: auto; }
  .web-nav a { margin-right: .6rem; }
}