:root { --bg: #0b0e14; --bar: #10141c; --text: #e8e6df; --muted: #8b93a5; --line: #262b36; --link: #b9c4ff; }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
  /* Header bar, scrolling text and footer bar stack in the window; only the text scrolls. */
  body { display: flex; flex-direction: column; }
  .bar { flex: none; background: var(--bar); position: relative; z-index: 1; }
  .bar.top { border-bottom: 1px solid var(--line); padding: 10px max(20px, calc((100% - 760px) / 2 + 20px)); font-size: 14px; }
  .bar.bottom { border-top: 1px solid var(--line); padding: 10px 20px; text-align: center; font-size: 12px; color: var(--muted); }
  .bar a { color: var(--muted); }
  /* Light shadow under the header bar once the text has scrolled away from the top, and above the footer bar while there is
     more text below: the two "local" gradients cover the shadows at the ends, so a shadow only shows where text continues. */
  .scroll {
    flex: 1; min-height: 0; overflow-y: auto;
    background:
      linear-gradient(var(--bg) 30%, rgba(11, 14, 20, 0)) 0 0 / 100% 36px no-repeat local,
      linear-gradient(rgba(11, 14, 20, 0), var(--bg) 70%) 0 100% / 100% 36px no-repeat local,
      radial-gradient(farthest-side at 50% 0, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)) 0 0 / 100% 18px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)) 0 100% / 100% 18px no-repeat scroll;
    background-color: var(--bg);
  }
  main { max-width: 760px; margin: 0 auto; padding: 24px 20px 40px; line-height: 1.6; font-size: 16px; }
  h1 { font-size: 26px; margin: 0 0 6px; }
  h2 { font-size: 18px; margin: 32px 0 6px; }
  p, li { margin: 10px 0; }
  main a { color: var(--link); }
  hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
  code { background: #161a23; padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
  table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 15px; }
  th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
  th { background: #121620; }