/* ----- Global settings ----------------------------------------------- {{{ */

    :root {
        /* --- Colors --- */
      
        --background-color: #fff;
      
        --color-text: #1b2733;
        --color-text-secondary: #637282;
        --color-link: #0070e0;
        --color-sidenote: #616970;
      
        --highlight-red: #ea9999;
        --highlight-yellow: #ffe599;
        --highlight-green: #b6d7a8;
        --highlight-blue: #a4c2f4;
        --highlight-purple: #b4a7d6;
      
        --color-inline-code: #1b2733;
        --color-inline-code-bg: #f3f3f8;
      
        --color-border: #dfdfd0;
        --color-border-heavy: #ccccd4;
      
        --color-table-heading: #f3f3fb;
      
        /* --- Text --- */
      
        --font-family-prose: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
        --font-family-heading: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
        --font-family-code: Menlo, monospace;
        --side-note-number-font-family: var(--font-family-prose);
      
        --line-height: 26px;
        --font-size: 17px;
      
        --inline-code-font-size: 15px;
        --code-block-font-size: 14px;
        --code-block-side-padding: 8px;
        --line-numbers-font-size: 12px;
      
        --tight-code-line-height: 18px;
        --tight-code-padding-top: 5px;
      
        --side-note-line-height: 20px;
        --side-note-font-size: 13px;
        --side-note-code-font-size: 13px;
        --side-note-baseline-offset: 4px;
        --side-note-sup-offset: -6px;
        --side-note-number-hang-left: -6px;
        --side-note-text-indent: -9px;
      
        --heading-font-weight: 500;
      
        --title-font-size: 42px;
        --title-code-font-size: 40px;
        --title-line-height: 48px;
        --title-margin-top: 92px;
      
        --h1-font-size: 32px;
        --h1-code-font-size: 29px;
        --h1-line-height: 36px;
        --h1-word-spacing: 1px;
        --h1-margin-top: 30px;
        --h1-margin-bottom: 12px;
      
        --h2-font-size: 22px;
        --h2-code-font-size: 20px;
        --h2-line-height: 28px;
        --h2-word-spacing: 0.5px;
        --h2-margin-top: 18px;
        --h2-margin-bottom: 6px;
      
        --ul-indent-size: 23px;
        --ol-indent-size: 19px;
        --ol-li-padding-left: 4px;
      
        --hr-margin-top: 18px;
        --hr-margin-bottom: calc(var(--line-height) - var(--hr-margin-top) - 1px);
      
        --extra-wide-scale-factor: 1.5;
      
        --figcaption-line-height: 21px;
        --figcaption-font-size: 14px;
        --figcaption-code-font-size: 13px;
        --figcaption-gap: 6px;
        --captioned-figure-gap: 10px;
      
        --table-line-height: 21px;
        --table-font-size: 14px;
        --table-code-font-size: 13px;
      
        --nav-toc-font-size: 12px;
        --nav-toc-code-font-size: 12px;
        --nav-toc-indent: 15px;
        --nav-toc-baseline-offset: 2px;
      
        /* --- Layout --- */
      
        --main-width: 745px;
        /* The name doesn't indicate it, but this variable actually specifies an
         * effective minimum width. (It didn't previously behave this way, but the
         * change to do so was made in a backwards-compatible way, so the variable
         * was not renamed.)
         **/
        --main-width-narrow: 550px;
        --side-note-max-width: 300px;
      
      }
      
      @media (prefers-color-scheme: dark) {
        :root {
          --background-color: #161313;
      
          --color-text: #f7f5f2;
          --color-text-secondary: #9d9b99;
          --color-link: #2994ff;
          --color-sidenote: #b4b2af;
      
          --highlight-red: #660000;
          --highlight-yellow: #7f6000;
          --highlight-green: #274e13;
          --highlight-blue: #1c4587;
          --highlight-purple: #351c75;
      
          --color-inline-code: #f7f5f2;
          --color-inline-code-bg: #242121;
      
          --color-border: #393635;
          --color-border-heavy: #524f4d;
      
          --color-table-heading: #242121;
        }
      }
      
      *, *:after, *:before {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      
      html {
        /* https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */
        -webkit-text-size-adjust: 100%;
      }
      
      body {
        font-family: var(--font-family-prose);
        color: var(--color-text);
        font-size: var(--font-size);
        line-height: var(--line-height);
        -webkit-font-variant-ligatures: no-common-ligatures;
        font-variant-ligatures: no-common-ligatures;
      
        /* Safari-only right now (macOS, iOS) but looks so good. */
        hanging-punctuation: first;
      
        margin: 0;
        padding: 0;
        padding-top: var(--title-margin-top);
        width: 100%;
      
        background-color: var(--background-color);
      }
      
      @media print {
        body {
          background-color: initial;
        }
      }
      
      /* }}} */
      /* ----- Utility classes -----------------------------------------------  {{{ */
      .only-light-mode {
        display: inherit;
      }
      .only-dark-mode {
        display: none;
      }
      
      @media (prefers-color-scheme: dark) {
        .only-light-mode {
          display: none;
        }
        .only-dark-mode {
          display: inherit;
        }
      }
      /* }}} */
      /* ----- Side notes and margin notes ----------------------------------- {{{ */
      /* --- Side note text and numbering --- {{{ */
      
      .sidenote,
      .marginnote {
        color: var(--color-sidenote);
      
        font-size: var(--side-note-font-size);
        line-height: var(--side-note-line-height);
        vertical-align: baseline;
      
        /* Align first baseline to body. */
        margin-top: var(--side-note-baseline-offset);
      }
      
      .sidenote code,
      .marginnote code {
        color: var(--color-sidenote);
      }
      
      main {
        counter-reset: sidenote-counter;
      }
      
      .sidenote-number {
        counter-increment: sidenote-counter;
      }
      
      .sidenote-number:after,
      .sidenote:before {
        content: counter(sidenote-counter);
        position: relative;
      }
      
      nav#TOC label,
      label.margin-toggle:not(.sidenote-number),
      .sidenote-number:after,
      .sidenote:before,
      .footnote-ref sup,
      sup {
        font-size: var(--side-note-font-size);
        font-weight: 700;
        font-family: var(--side-note-number-font-family);
        -webkit-font-feature-settings: "tnum" 1;
        font-feature-settings: "tnum" 1;
      
        /* Mimic 'vertical-align: super' (browser style for sup tag)
         * without causing a gap in our text's implicit grid. */
        vertical-align: baseline;
        position: relative;
        top: var(--side-note-sup-offset);
      }
      
      sup {
        font-weight: inherit;
      }
      
      /* Make the superscript hang. */
      .sidenote:before { left: var(--side-note-number-hang-left); }
      /* Get first first column of first row to line up with other rows. */
      .sidenote { text-indent: var(--side-note-text-indent); }
      
      /*}}} */
      /* --- Side note input controls --- {{{ */
      
      input.margin-toggle {
          display: none;
      }
      label.margin-toggle:not(.sidenote-number) {
          display: none;
      }
      label.sidenote-number {
          display: inline;
      }
      
      /* Unfortunately, variables aren't in scope here.
       * See calculations in Horizontal layouting.
       */
      @media screen and (max-width: calc(26px + 550px + 26px + 169px + 26px - 1px)) {
        .margin-toggle:checked + .sidenote,
        .margin-toggle:checked + .marginnote {
          margin-top: var(--side-note-line-height);
          vertical-align: baseline;
        }
      
        label.margin-toggle {
          color: var(--color-link);
        }
      
        label.margin-toggle:not(.sidenote-number) {
          display: inline;
        }
      
        label {
          cursor: pointer;
        }
      }
      
      /* }}} */
      /* }}} */
      /* ----- Headings ------------------------------------------------------ {{{ */
      
      h1, h2 {
        font-family: var(--font-family-heading);
        font-weight: var(--heading-font-weight);
      }
      
      h4, h5, h6 {
        font-weight: normal;
      }
      
      h1.title {
        margin-top: var(--line-height);
        margin-bottom: var(--line-height);
        font-size: var(--title-font-size);
        line-height: var(--title-line-height);
      }
      
      h1.title code {
        font-size: var(--title-code-font-size);
      }
      
      h1:not(.title) {
        font-size: var(--h1-font-size);
        line-height: var(--h1-line-height);
        word-spacing: var(--h1-word-spacing);
      
        margin-top: var(--h1-margin-top);
        margin-bottom: var(--h1-margin-bottom);
      }
      
      h1:not(.title) code {
        font-size: var(--h1-code-font-size);
      }
      
      h2 {
        font-size: var(--h2-font-size);
        line-height: var(--h2-line-height);
        word-spacing: var(--h2-word-spacing);
      
        margin-top: var(--h2-margin-top);
        margin-bottom: var(--h2-margin-bottom);
      }
      
      h2 code {
        font-size: var(--h2-code-font-size);
      }
      
      h3 {
        font-size: var(--font-size);
        line-height: var(--line-height);
        font-weight: bold;
      }
      
      h1:not(.title) + *, h1:not(.title) + p { margin-top: var(--h1-margin-bottom); }
      h2 + *, h2 + p                         { margin-top: var(--h2-margin-bottom); }
      h3 + *, h3 + p                         { margin-top: 0; }
      
      /* }}} */
      /* ----- Prose --------------------------------------------------------- {{{ */
      
      p, main > ul, main > ol, div.sourceCode, main > pre, img, table {
        margin-top: var(--line-height);
        margin-bottom: var(--line-height)
      }
      
      ul:not(.task-list) {
        margin-left: var(--ul-indent-size);
      }
      ol {
        margin-left: var(--ol-indent-size);
      }
      
      ul.task-list {
        list-style: none;
        margin-left: var(--ul-indent-size);
      }
      
      ul.task-list > li {
        position: relative;
      }
      
      ul.task-list > li > input[type="checkbox"] {
        position: absolute;
        left: calc(-1 * var(--ul-indent-size));
        height: var(--line-height);
      }
      
      ol > li {
        padding-left: var(--ol-li-padding-left);
      }
      
      ol                         { list-style-type: decimal; }
      ol ol                      { list-style-type: lower-alpha; }
      ol ol ol                   { list-style-type: lower-roman; }
      ol ol ol ol                { list-style-type: decimal; }
      ol ol ol ol ol             { list-style-type: lower-alpha; }
      ol ol ol ol ol ol          { list-style-type: lower-roman; }
      ol ol ol ol ol ol ol       { list-style-type: decimal; }
      ol ol ol ol ol ol ol ol    { list-style-type: lower-alpha; }
      ol ol ol ol ol ol ol ol ol { list-style-type: lower-roman; }
      
      ul                         { list-style-type: disc; }
      ul ul                      { list-style-type: circle; }
      ul ul ul                   { list-style-type: square; }
      ul ul ul ul                { list-style-type: disc; }
      ul ul ul ul ul             { list-style-type: circle; }
      ul ul ul ul ul ul          { list-style-type: square; }
      ul ul ul ul ul ul ul       { list-style-type: disc; }
      ul ul ul ul ul ul ul ul    { list-style-type: circle; }
      ul ul ul ul ul ul ul ul ul { list-style-type: square; }
      
      blockquote {
        border-left: 1px solid var(--color-text-secondary);
        padding-left: 1.5rem;
      
        font-style: italic;
      }
      
      blockquote > p {
        margin-top: 0;
      }
      
      blockquote em, blockquote i, blockquote .sidenote-wrapper {
        font-style: normal;
      }
      
      hr {
        margin-top: var(--hr-margin-top);
        margin-bottom: var(--hr-margin-bottom);
        border-style: solid;
        color: var(--color-border-heavy);
        border-width: 1px 0 0;
      }
      
      a code, a:link code, a:visited code,
      a, a:link, a:visited {
        color: var(--color-link);
        text-decoration: none;
      }
      
      a:hover {
        text-decoration: underline;
      }
      
      span.mark, mark {
        /* Reset browser styles */
        color: inherit;
      
        padding: 2px 0 1px;
      }
      span.mark.red,    mark.red    { background-color: var(--highlight-red);    }
      span.mark.yellow, mark.yellow { background-color: var(--highlight-yellow); }
      span.mark.green,  mark.green  { background-color: var(--highlight-green);  }
      span.mark.blue,   mark.blue   { background-color: var(--highlight-blue);   }
      span.mark.purple, mark.purple { background-color: var(--highlight-purple); }
      
      .subtitle {
        margin-top: 0;
      }
      .author, .date {
        margin-top: 0;
        margin-bottom: 0;
      }
      .signoff {
        margin-top: calc(4 * var(--line-height));
        margin-bottom: calc(4 * var(--line-height));
      }
      
      /* Pandoc utility classes */
      span.smallcaps{ font-variant: small-caps; }
      span.underline{ text-decoration: underline; }
      
      .katex-display {
        background: var(--background-color);
        transform: translateZ(0px);
      }
      
      @media print {
        .katex-display {
          background-color: initial;
        }
      }
      
      /* }}} */
      /* ----- Code ---------------------------------------------------------- {{{ */
      
      /* Pandoc code blocks with a language look like div.sourceCode > pre.sourceCode
       * Otherwise, it's just a pre (without .sourceCode)
       *
       * The 'code' element is tricky because it's used for inline code and code in a
       * pre.
       */
      
      code {
        font-family: var(--font-family-code);
      
        word-spacing: normal;
      
        /* Only for inline code */
        color: var(--color-inline-code);
        background-color: var(--color-inline-code-bg);
        font-size: var(--inline-code-font-size);
        margin: 0;
        padding: 2px 0 1px;
        border: 1px solid var(--color-border);
        border-radius: 1px;
      }
      
      .sidenote code,
      .marginnote code {
        font-size: var(--side-note-code-font-size);
      }
      
      pre code {
        /* Reset some changes meant to be inline-only */
        color: inherit;
        background-color: inherit;
        font-size: var(--code-block-font-size);
        line-height: var(--line-height);
        margin: initial;
        padding: initial;
        border: initial;
        border-radius: initial;
      }
      
      pre > code {
        position: relative; /* For line highlights */
        display: inline-block;
        min-width: 100%;
        z-index: 1;
      
        white-space: pre-wrap;
      
        padding: 0 var(--code-block-side-padding);
      }
      
      code.sourceCode::selection {
        /* Prevent bug where far right edge of text box shows as selected. */
        background: transparent;
      }
      
      .wide > pre, .wide > div.sourceCode {
        /* Put this in front of the table of contents */
        transform: translateZ(0px);
      }
      
      .wide pre > code {
        white-space: pre;
      }
      
      pre.numberSource code {
        counter-reset: source-line 0;
      }
      
      pre > code.sourceCode > span {
        line-height: var(--line-height);
      
        display: inline-block;
        min-width: 100%;
      }
      
      div.sourceCode {
        /* Need to make room for line numbers (even if they're not going to be used).
         * Width doesn't matter, just needs to be big enough to hold the largest line
         * number. */
        --line-numbers-width: calc(4 * var(--line-numbers-font-size));
        --line-numbers-negative-width: calc(-1 * var(--line-numbers-width));
        margin-left: var(--line-numbers-negative-width);
      }
      div.sourceCode > pre {
        margin-left: var(--line-numbers-width);
      }
      pre.numberSource > code.sourceCode > span {
        counter-increment: source-line;
        padding-left: var(--line-numbers-width);
        text-indent: var(--line-numbers-negative-width);
        position: relative;
        left: var(--line-numbers-negative-width);
      }
      pre.numberSource > code.sourceCode > span > a:first-child::before {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      
        content: counter(source-line);
        font-size: var(--line-numbers-font-size);
        text-decoration: none;
      
        position: relative;
        text-align: right;
        display: inline-block;
      
        padding: 0 calc(2 * var(--code-block-side-padding));
        width: var(--line-numbers-width);
      }
      pre > code.sourceCode > span > a:first-child::before:hover {
        text-decoration: underline;
      }
      
      /* Utility class for code blocks that contain things like box drawing characters, where it's nice for things to touch. */
      .tight-code pre,
      pre.tight-code {
        padding-top: var(--tight-code-padding-top);
      }
      
      pre.tight-code code,
      .tight-code pre code,
      .tight-code pre > code.sourceCode > span,
      pre.tight-code > code.sourceCode > span {
        line-height: var(--tight-code-line-height);
      }
      
      /* --- Code line highlights --- {{{ */
      /* I used some code I contributed to owickstrom's pandoc-emphasize-code[1] as
       * inspiration for these changes.
       *
       * The novel part is using :nth-of-type(...) selectors and CSS classes, instead
       * of needing a pandoc filter. This means that we can stick with pandoc's
       * default syntax highlighter, and not need to requirer JavaScript for syntax
       * highlighting. It has the obvious limitation that it places a fixed limit on
       * lines that can be highlighted, but these additional CSS styles are easy
       * enough to write, so anyone who needs more lines can write their own
       * stylesheet and include it to add more after the fact.
       *
       * [1] https://github.com/owickstrom/pandoc-emphasize-code/pull/3
       */
      
      pre > code.sourceCode > span::after {
        position: absolute;
        background-color: var(--color-code-highlight-bg);
        z-index: -1;
        left: calc(var(--line-numbers-width) - var(--code-block-side-padding));
        right: calc(var(--line-numbers-negative-width) - var(--code-block-side-padding));
        top: 0;
        height: 100%;
      }
      
      pre.hl-1  > code.sourceCode > span:nth-of-type(1)::after  { content: ""; }
      pre.hl-2  > code.sourceCode > span:nth-of-type(2)::after  { content: ""; }
      pre.hl-3  > code.sourceCode > span:nth-of-type(3)::after  { content: ""; }
      pre.hl-4  > code.sourceCode > span:nth-of-type(4)::after  { content: ""; }
      pre.hl-5  > code.sourceCode > span:nth-of-type(5)::after  { content: ""; }
      pre.hl-6  > code.sourceCode > span:nth-of-type(6)::after  { content: ""; }
      pre.hl-7  > code.sourceCode > span:nth-of-type(7)::after  { content: ""; }
      pre.hl-8  > code.sourceCode > span:nth-of-type(8)::after  { content: ""; }
      pre.hl-9  > code.sourceCode > span:nth-of-type(9)::after  { content: ""; }
      pre.hl-10 > code.sourceCode > span:nth-of-type(10)::after { content: ""; }
      pre.hl-11 > code.sourceCode > span:nth-of-type(11)::after { content: ""; }
      pre.hl-12 > code.sourceCode > span:nth-of-type(12)::after { content: ""; }
      pre.hl-13 > code.sourceCode > span:nth-of-type(13)::after { content: ""; }
      pre.hl-14 > code.sourceCode > span:nth-of-type(14)::after { content: ""; }
      pre.hl-15 > code.sourceCode > span:nth-of-type(15)::after { content: ""; }
      pre.hl-16 > code.sourceCode > span:nth-of-type(16)::after { content: ""; }
      pre.hl-17 > code.sourceCode > span:nth-of-type(17)::after { content: ""; }
      pre.hl-18 > code.sourceCode > span:nth-of-type(18)::after { content: ""; }
      pre.hl-19 > code.sourceCode > span:nth-of-type(19)::after { content: ""; }
      pre.hl-20 > code.sourceCode > span:nth-of-type(20)::after { content: ""; }
      pre.hl-21 > code.sourceCode > span:nth-of-type(21)::after { content: ""; }
      pre.hl-22 > code.sourceCode > span:nth-of-type(22)::after { content: ""; }
      pre.hl-23 > code.sourceCode > span:nth-of-type(23)::after { content: ""; }
      pre.hl-24 > code.sourceCode > span:nth-of-type(24)::after { content: ""; }
      pre.hl-25 > code.sourceCode > span:nth-of-type(25)::after { content: ""; }
      pre.hl-26 > code.sourceCode > span:nth-of-type(26)::after { content: ""; }
      pre.hl-27 > code.sourceCode > span:nth-of-type(27)::after { content: ""; }
      pre.hl-28 > code.sourceCode > span:nth-of-type(28)::after { content: ""; }
      pre.hl-29 > code.sourceCode > span:nth-of-type(29)::after { content: ""; }
      pre.hl-30 > code.sourceCode > span:nth-of-type(30)::after { content: ""; }
      pre.hl-31 > code.sourceCode > span:nth-of-type(31)::after { content: ""; }
      pre.hl-32 > code.sourceCode > span:nth-of-type(32)::after { content: ""; }
      pre.hl-33 > code.sourceCode > span:nth-of-type(33)::after { content: ""; }
      pre.hl-34 > code.sourceCode > span:nth-of-type(34)::after { content: ""; }
      pre.hl-35 > code.sourceCode > span:nth-of-type(35)::after { content: ""; }
      pre.hl-36 > code.sourceCode > span:nth-of-type(36)::after { content: ""; }
      pre.hl-37 > code.sourceCode > span:nth-of-type(37)::after { content: ""; }
      pre.hl-38 > code.sourceCode > span:nth-of-type(38)::after { content: ""; }
      pre.hl-39 > code.sourceCode > span:nth-of-type(39)::after { content: ""; }
      pre.hl-40 > code.sourceCode > span:nth-of-type(40)::after { content: ""; }
      
      /* }}} */
      
      /* }}} */
      /* ----- Images and figures -------------------------------------------- {{{ */
      
      /* There's only a figure if there's a caption. Tighten things up. */
      figure {
        margin-bottom: var(--captioned-figure-gap);
      }
      
      figure + p {
        margin-top: var(--captioned-figure-gap);
      }
      
      figure > img, figure > pre, figure > div.sourceCode {
        margin-bottom: var(--figcaption-gap);
      }
      
      img {
        width: 100%;
        display: block;
      }
      
      .wide img {
        /* Put this in front of the table of contents */
        transform: translateZ(0px);
      }
      
      figcaption {
        font-size: var(--figcaption-font-size);
        line-height: var(--figcaption-line-height);
        font-style: italic;
        text-align: center;
        color: var(--color-text-secondary);
      }
      
      .left-align-caption figcaption {
        text-align: left;
      }
      
      figcaption code {
        font-size: var(--figcaption-code-font-size);
      }
      
      /* }}} */
      /* ----- Tables -------------------------------------------------------- {{{ */
      
      table {
        -webkit-font-feature-settings: "tnum" 1;
        font-feature-settings: "tnum" 1;
      
        font-size: var(--table-font-size);
        line-height: var(--table-line-height);
      
        border-spacing: 0;
        border-collapse: collapse;
        border: 1px solid var(--color-border-heavy);
      
        width: 100%;
      
        /* Solid background to occlude table of contents */
        background-color: var(--background-color);
      }
      
      @media print {
        table {
          background-color: initial;
        }
      }
      
      table code {
        font-size: var(--table-code-font-size);
      }
      
      table pre code {
        font-size: inherit;
      }
      
      .wide table {
        /* Put this in front of the table of contents */
        transform: translateZ(0px);
      }
      
      table td, table th {
        border: 1px solid var(--color-border-heavy);
        padding: 5px 8px;
        min-width: 100px;
      }
      table th {
        background-color: var(--color-table-heading);
      }
      
      table > caption {
        caption-side: bottom;
        margin-top: var(--figcaption-gap);
        margin-bottom: calc(var(--captioned-figure-gap) - var(--line-height));
        font-size: var(--figcaption-font-size);
        line-height: var(--figcaption-line-height);
        font-style: italic;
        text-align: center;
        color: var(--color-text-secondary);
      }
      
      .left-align-caption table > caption {
        text-align: left;
      }
      
      table > caption code {
        font-size: var(--figcaption-code-font-size);
      }
      
      /* --- Notes are just single cell tables --- */
      
      .note table {
        font-size: inherit;
        line-height: inherit;
      }
      .note table, .note td {
        border: none;
      }
      
      .note.red    td { background: var(--highlight-red); }
      .note.yellow td { background: var(--highlight-yellow); }
      .note.green  td { background: var(--highlight-green); }
      .note.blue   td { background: var(--highlight-blue); }
      .note.purple td { background: var(--highlight-purple); }
      
      /* }}} */
      /* ----- Table of contents --------------------------------------------- {{{ */
      
      .date.before-toc {
        padding-bottom: var(--line-height);
      }
      
      nav#TOC {
        margin-bottom: var(--line-height);
        border-left: 1px solid var(--color-text-secondary);
        padding-left: 1.5rem;
      }
      
      nav#TOC input {
        display: none;
      }
      
      nav#TOC label {
        color: var(--color-link);
        cursor: pointer;
      }
      
      nav#TOC > ul {
        display: none;
      }
      
      nav#TOC > input:checked + ul {
        display: block;
      }
      
      @media print {
        nav#TOC > input + ul {
          display: block;
        }
      }
      
      /* Unfortunately, variables aren't in scope here.
       * 745px = --main-width
       * 52px = 2 * --line-height
       * 206px = side note min width
       */
      @media screen and (min-width: calc(745px + 2 * (52px + 206px + 52px) - 1px)) {
        header {
          margin-bottom: var(--line-height);
        }
      
        .date.before-toc {
          padding-bottom: initial;
        }
      
        nav#TOC {
          /* Unset some styles for small screen width */
          margin-bottom: initial;
          border-left: initial;
          padding-left: initial;
      
          position: sticky;
          margin-top: calc(var(--nav-toc-baseline-offset));
          float: left;
          top: var(--line-height);
      
          font-size: var(--nav-toc-font-size);
          color: var(--color-text-secondary);
      
          margin-left: var(--line-height);
      
          max-width: calc((100vw - var(--main-width)) / 2 - 2 * var(--line-height));
          max-height: calc(100vh - 2 * var(--line-height));
          overflow-y: auto;
        }
      
        nav#TOC label {
          display: none;
        }
      
        nav#TOC ul {
          display: block;
          list-style: none;
          margin-left: var(--nav-toc-indent);
        }
        nav#TOC > ul {
          margin-left: 0;
        }
      
        nav#TOC li {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      
        nav#TOC code {
          font-size: var(--nav-toc-code-font-size);
        }
      
        nav#TOC code,
        nav#TOC a,
        nav#TOD a:link,
        nav#TOD a:visited {
          color: var(--color-text-secondary);
        }
      
        nav#TOC a:hover,
        nav#TOC a:hover code {
          text-decoration: none;
          color: var(--color-link);
        }
      }
      
      /* }}} */
      /* ----- Horizontal layouting (main, side notes, extra-wide) ----------- {{{ */
      
      .sidenote,
      .marginnote {
        float: right;
        clear: right;
        position: relative;
      
        width: var(--computed-width);
        max-width: var(--side-note-max-width);
        margin-right: calc(-1 * min(var(--computed-width), var(--side-note-max-width)) - var(--margin-left));
      }
      
      /* --- Side notes and table of contents always visible --- {{{ */
      
      /* Unfortunately, variables aren't in scope here.
       * 745px = --main-width
       * 52px = 2 * --line-height
       * 206px = side note min width
       */
      @media screen and (min-width: calc(745px + 2 * (52px + 206px + 52px))) {
        header,
        main,
        footer {
          max-width: var(--main-width);
        }
      
        header,
        main,
        footer {
          margin-left: auto;
          margin-right: auto;
        }
      
        .sidenote,
        .marginnote {
          --margin-left: calc(2 * var(--line-height));
          --margin-right: var(--margin-left);
          --computed-width: calc((100vw - 100%) / 2 - var(--margin-right) - var(--margin-left));
        }
      
        .wide {
          width: 100%;
          overflow-x: auto;
        }
      
        .wide.extra-wide {
          margin-left: calc((1 - var(--extra-wide-scale-factor)) / 2 * 100%);
          width: calc(var(--extra-wide-scale-factor) * 100%);
        }
      
        .wide.full-width {
          margin-left: calc(var(--line-height) - ((100vw - var(--main-width)) / 2));
          width: calc(100vw - 2 * var(--line-height));
        }
      
        .wide.extra-wide figcaption,
        .wide.extra-wide table > caption {
          margin-left: calc(((var(--extra-wide-scale-factor) - 1) / 2) * var(--main-width));
          max-width: var(--main-width);
          margin-right: calc(100% - var(--main-width) - (((var(--extra-wide-scale-factor) - 1) / 2) * var(--main-width)));
        }
      
        .wide.full-width figcaption,
        .wide.full-width table > caption {
          margin-left: calc((100vw - var(--main-width)) / 2 - var(--line-height));
          max-width: var(--main-width);
          margin-right: calc(100% - var(--main-width) - ((100vw - var(--main-width)) / 2 - var(--line-height)));
        }
      }
      
      /* }}} */
      /* --- Side notes visibile, table of contents collapsed, double-wide margins --- {{{ */
      
      /* Unfortunately, variables aren't in scope here.
       * 745px = --main-width
       * 52px = 2 * --line-height
       * 206px = side note min width
       */
      @media screen and (min-width: calc(52px + 745px + 52px + 206px + 52px)) and (max-width: calc(745px + 2 * (52px + 206px + 52px) - 1px)) {
        header,
        nav#TOC,
        main,
        footer {
          margin-left: calc(2 * var(--line-height));
          max-width: var(--main-width);
          margin-right: auto;
        }
      
        .sidenote,
        .marginnote {
          --margin-left: calc(2 * var(--line-height));
          --margin-right: var(--margin-left);
          --computed-width: calc(100vw - var(--main-width) - calc(2 * var(--line-height)) - var(--margin-right) - var(--margin-left));
        }
      
        .wide {
          width: 100%;
          overflow-x: auto;
          overflow-y: hidden;
        }
      
        .wide.extra-wide {
          margin-left: calc(-1 * var(--line-height));
          width: calc(100vw - 2 * var(--line-height));
          max-width: calc(var(--extra-wide-scale-factor) * var(--main-width));
        }
      
        .wide.full-width {
          margin-left: calc(-1 * var(--line-height));
          width: calc(100vw - 2 * var(--line-height));
          max-width: calc(100vw - 2 * var(--line-height));
        }
      
        .wide.extra-wide .katex-display,
        .wide.full-width .katex-display {
          padding-left: var(--line-height);
          padding-right: var(--line-height);
        }
      
        .wide.extra-wide .katex-display,
        .wide.extra-wide .katex-display > .katex,
        .wide.full-width .katex-display,
        .wide.full-width .katex-display > .katex {
          text-align: left;
        }
      
        .wide.extra-wide figcaption,
        .wide.extra-wide table > caption,
        .wide.full-width figcaption,
        .wide.full-width table > caption {
          text-align: left;
          margin-left: var(--line-height);
          max-width: var(--main-width);
        }
      }
      
      /* }}} */
      /* --- Side notes visibile, table of contents collapsed --- {{{ */
      
      /* Unfortunately, variables aren't in scope here.
       * 550px = --main-width-narrow
       * 26px = --line-height
       * 169px = side note min width narrow
       */
      @media screen and (min-width: calc(26px + 550px + 26px + 169px + 26px)) and (max-width: calc(52px + 745px + 52px + 206px + 52px - 1px)) {
        header,
        nav#TOC,
        main,
        footer {
          margin-left: var(--line-height);
          max-width: calc(max(var(--main-width-narrow), 100vw - (3 * var(--line-height)) - var(--side-note-max-width)));
          margin-right: auto;
        }
      
        .sidenote,
        .marginnote {
          --margin-left: var(--line-height);
          --margin-right: var(--line-height);
          --computed-width: calc(100vw - var(--main-width-narrow) - var(--line-height) - var(--margin-right) - var(--margin-left));
        }
      
        .wide {
          width: var(--main-width);
          overflow-x: auto;
          overflow-y: hidden;
        }
      
        .wide .katex-display,
        .wide .katex-display > .katex {
          text-align: left;
        }
      
        .wide figcaption,
        .wide table > caption {
          text-align: left;
          max-width: var(--main-width-narrow);
        }
      
        .wide.extra-wide,
        .wide.full-width {
          width: calc(100vw - 2 * var(--line-height));
        }
      }
      
      /* }}} */
      /* --- Side notes and table of contents collapsed --- {{{ */
      
      /* Unfortunately, variables aren't in scope here.
       * See calculations above.
       */
      @media screen and (max-width: calc(26px + 550px + 26px + 169px + 26px - 1px)) {
        header,
        nav#TOC,
        main,
        footer {
          margin-left: var(--line-height);
          margin-right: var(--line-height);
        }
      
        .sidenote,
        .marginnote {
          display: none;
        }
      
        .margin-toggle:checked + .sidenote,
        .margin-toggle:checked + .marginnote {
          display: block;
          float: left;
          clear: both;
          width: 100%;
          max-width: 100%;
        }
      
        .wide {
          width: 100%;
          overflow-x: auto;
          overflow-y: hidden;
        }
      
        .wide .katex-display,
        .wide .katex-display > .katex {
          text-align: left;
        }
      
        .wide figcaption,
        .wide table > caption {
          text-align: left;
          max-width: calc(100vw - 2 * var(--line-height));
        }
      }
      
      /* }}} */
      /* --- Paged media (print styles) --- {{{ */
      @page {
        size: letter;
        margin: 0.5in;
        /* To make room for line numbers in left margin. */
        margin-left: 0.25in;
      }
      
      @media print {
        :root {
          --line-height: 18px;
          --font-size: 12px;
      
          --inline-code-font-size: 11px;
          --code-block-font-size: 10px;
          --code-block-side-padding: 6px;
          --line-numbers-font-size: 8.5px;
      
          --tight-code-line-height: 12.5px;
          --tight-code-padding-top: 2px;
      
          --side-note-line-height: 14px;
          --side-note-font-size: 9px;
          --side-note-code-font-size: 9px;
          --side-note-baseline-offset: 3px;
          --side-note-sup-offset: -4px;
          --side-note-number-hang-left: -4px;
          --side-note-text-indent: -6.5px;
      
          --title-font-size: 30px;
          --title-code-font-size: 29px;
          --title-line-height: 37px;
          --title-margin-top: 71px;
      
          --h1-font-size: 22px;
          --h1-code-font-size: 20px;
          --h1-line-height: 28px;
          --h1-word-spacing: 0.5px;
          --h1-margin-top: 18px;
          --h1-margin-bottom: 6px;
      
          --h2-font-size: 16.5px;
          --h2-code-font-size: 15px;
          --h2-line-height: 22px;
          --h2-word-spacing: 0px;
          --h2-margin-top: 14px;
          --h2-margin-bottom: 4.5px;
      
          --ul-indent-size: 18px;
          --ol-indent-size: 14px;
      
          --hr-margin-top: 14px;
      
          --figcaption-line-height: 16px;
          --figcaption-font-size: 10px;
          --figcaption-code-font-size: 9.5px;
          --figcaption-gap: 4.5px;
          --captioned-figure-gap: 7.5px;
      
          --table-line-height: 16px;
          --table-font-size: 10px;
          --table-code-font-size: 9.5px;
      
          --nav-toc-font-size: 8.5px;
          --nav-toc-code-font-size: 8.5px;
        }
      
        body {
          padding-top: 0;
          /* To make room for line numbers in left margin. */
          padding-left: 0.25in;
        }
      
        header,
        nav#TOC,
        main,
        footer {
          width: 5.25in;
          margin-right: auto;
        }
      
        .sidenote,
        .marginnote {
          width: 2in;
          margin-right: -2.25in;
        }
      
        .wide {
          width: 7.5in;
          overflow-x: hidden;
          overflow-y: hidden;
        }
      
        .wide .katex-display,
        .wide .katex-display > .katex {
          text-align: left;
        }
      
        .wide figcaption,
        .wide table > caption {
          text-align: left;
          width: 5.25in;
        }
      
        .wide pre > code {
          white-space: pre-wrap;
        }
      }
      
      h1, h2, h3 {
        page-break-after: avoid;
      }
      
      table, figure, pre, img {
        page-break-inside: avoid;
      }
      /* }}} */
      /* }}} */
      
      /* vim:fdm=marker
       */