:root {
    /* The logo's light blue thread on white, with the navy of its shadows for text. Colors the script sews with are r,g,b. */
    --paper-rgb: 255, 255, 255;
    --ink-rgb: 13, 39, 87;
    --thread-rgb: 143, 179, 225;
    --on-thread-rgb: 13, 39, 87;
    --paper: rgb(var(--paper-rgb));
    --ink: rgb(var(--ink-rgb));
    --muted: #586a8c;
    --hair: rgba(var(--ink-rgb), .16);
  }
  @media (prefers-color-scheme: dark) {
    /* The dark logo: the same thread on its navy cloth. */
    :root {
      --paper-rgb: 17, 23, 32;
      --ink-rgb: 220, 231, 247;
      --on-thread-rgb: 17, 23, 32;
      --muted: #8a9bb8;
      --hair: rgba(var(--ink-rgb), .22);
    }
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  img, canvas, video { display: block; max-width: 100%; }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: .02em; color: var(--muted); }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

  /* Header */
  .top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 18px; letter-spacing: -.01em; text-decoration: none; }
  .brand img { width: 34px; height: 34px; }
  .top nav a { font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--hair); padding-bottom: 2px; }
  .top nav a:hover { border-bottom-color: var(--ink); }
  #github-link { display: inline-flex; align-items: center; gap: .5em; }
  .repo-stars:not([hidden]) {
    display: inline-flex; align-items: center; gap: .25em; color: var(--muted);
    font-size: .9em; font-variant-numeric: tabular-nums;
  }