:root {
  color-scheme: light;
  font: 100%/1.55 system-ui, sans-serif;
  color: #272b22;
  background: #f8f8f6;
}
* { box-sizing: border-box; }
body { margin: 0; }
header { padding: .85rem max(1rem, calc((100% - 70rem) / 2)); background: #505649; }
header a { color: white; font-weight: 650; text-decoration: none; }
main { max-width: 72rem; padding: clamp(1rem, 4vw, 2.5rem); margin: auto; }
article { min-width: 0; }
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: clamp(1.75rem, 4vw, 2.4rem); margin: 0 0 1rem; }
h2 { margin-top: 2rem; }
h3 { margin-top: 1.5rem; }
a { color: #3b5632; text-underline-offset: .15em; }
code { background: #e9ece3; padding: .1em .25em; border-radius: .2em; overflow-wrap: anywhere; }
.article { display: grid; grid-template-columns: minmax(0, 1fr) 14rem; gap: 2rem; }
.toc { position: sticky; align-self: start; top: 1rem; font-size: .875rem; border-left: 1px solid #d7dacd; padding-left: 1rem; }
.toc h2 { margin-top: 0; font-size: 1rem; }
.toc ul { padding: 0; list-style: none; }
.toc .nested { padding-left: .75rem; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .925rem; background: white; }
th, td { padding: .55rem .65rem; border: 1px solid #d7dacd; text-align: left; vertical-align: top; }
th { background: #eceee7; }
.skip { position: absolute; left: 1rem; top: 1rem; padding: .5rem; background: white; transform: translateY(-200%); }
.skip:focus { transform: none; }
@media (max-width: 55rem) {
  .article { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .toc { position: static; grid-row: 1; }
}