rshow 0.0.5 → 0.0.7

package/themes/default/deck.js

@@ -4,7 +4,8 @@
  * Markup: <main class="deck"><section class="slide">...</section>...</main>
  * Keys: arrows, space, PageUp/PageDown, Home/End, f = fullscreen, n = notes,
  * p = presenter view, t = mode (system, light, dark).
- * Mouse: click advances, shift-click goes back, swipe left/right navigates.
+ * Mouse: a click on empty space advances, shift-click goes back, a click or a
+ * drag on text selects it, swipe left/right navigates.
  * URL hash #N keeps the slide. Steps reveal one per advance.
  *
  * Mode. The deck and a page share one storage key, "rshow-mode", holding
@@ -177,7 +178,7 @@
     deck.style.transform = 'translate(' + x + 'px, ' + y + 'px) scale(' + scale + ')';
   }
 
-  function writeHash() {
+  function writeHashNow() {
     var want = '#' + (current + 1);
     if (window.location.hash === want) {
       return;
@@ -185,8 +186,25 @@
     try {
       window.history.replaceState(null, '', want);
     } catch (err) {
-      window.location.hash = want;
+      // Assigning the hash here fires hashchange, and that listener would send
+      // the deck back to an old slide, so the address is left as it is.
+    }
+  }
+
+  // A browser counts the replaceState calls it honours and drops the rest: in
+  // Chrome a burst of keys leaves the address on an old slide, and in Safari the
+  // call throws. One write, 300 ms after the deck comes to rest, keeps the
+  // address current without touching that limit.
+  var hashTimer = null;
+
+  function writeHash() {
+    if (hashTimer) {
+      window.clearTimeout(hashTimer);
     }
+    hashTimer = window.setTimeout(function () {
+      hashTimer = null;
+      writeHashNow();
+    }, 300);
   }
 
   function slideTitle(n) {
@@ -309,6 +327,9 @@
     writeHash();
     syncNotes();
     syncPresenter();
+    if (reading) {
+      scrollToCurrent();
+    }
   }
 
   function go(n) {
@@ -619,19 +640,91 @@
         cycleMode();
         event.preventDefault();
         break;
+      case 'Escape':
+        // Out of one slide at a time, back to the stack the phone reads.
+        if (reading || forced !== null) {
+          forced = null;
+          setReading(wantsReading());
+          event.preventDefault();
+        }
+        break;
       default:
         break;
     }
   });
 
+  // Text under a point, so a click on it can select instead of navigating. The
+  // deck canvas is scaled by a transform, but client rects are already in screen
+  // space, so the point needs no maths.
+  function onText(x, y) {
+    try {
+      var node = null;
+      if (document.caretRangeFromPoint) {
+        var caret = document.caretRangeFromPoint(x, y);
+        node = caret ? caret.startContainer : null;
+      } else if (document.caretPositionFromPoint) {
+        var position = document.caretPositionFromPoint(x, y);
+        node = position ? position.offsetNode : null;
+      }
+      if (!node || node.nodeType !== 3) {
+        return false;
+      }
+      var range = document.createRange();
+      range.selectNodeContents(node);
+      var rects = range.getClientRects();
+      for (var k = 0; k < rects.length; k += 1) {
+        if (x >= rects[k].left && x <= rects[k].right &&
+            y >= rects[k].top && y <= rects[k].bottom) {
+          return true;
+        }
+      }
+      return false;
+    } catch (err) {
+      return false;
+    }
+  }
+
+  var pressX = 0;
+  var pressY = 0;
+  var pressTracked = false;
+
+  deck.addEventListener('mousedown', function (event) {
+    if (event.button !== 0) {
+      return;
+    }
+    pressTracked = true;
+    pressX = event.clientX;
+    pressY = event.clientY;
+  });
+
+  // A drag that selects text ends in a click too, so a click counts as a key
+  // press only when the pointer stayed put, it was a single click, the selection
+  // is empty and there is no text under it.
   deck.addEventListener('click', function (event) {
+    var moved = pressTracked &&
+      (Math.abs(event.clientX - pressX) > 4 || Math.abs(event.clientY - pressY) > 4);
+    pressTracked = false;
     var node = event.target;
+    var tag;
     while (node && node !== deck) {
-      if (node.tagName === 'A' || node.tagName === 'BUTTON' || node.tagName === 'INPUT') {
+      tag = node.tagName;
+      if (tag === 'A' || tag === 'BUTTON' || tag === 'INPUT' || tag === 'SELECT' ||
+          tag === 'TEXTAREA' || tag === 'LABEL' || tag === 'SUMMARY' ||
+          node.isContentEditable) {
         return;
       }
       node = node.parentNode;
     }
+    if (event.detail > 1 || moved) {
+      return;
+    }
+    var sel = window.getSelection ? window.getSelection() : null;
+    if (sel && !sel.isCollapsed && String(sel) !== '') {
+      return;
+    }
+    if (onText(event.clientX, event.clientY)) {
+      return;
+    }
     if (event.shiftKey) {
       prev();
     } else {
@@ -673,6 +766,147 @@
     }
   }, { passive: true });
 
+  // ------------------------------------------------------------- reading --
+
+  // A phone held upright has no room for a 1280 x 720 canvas: the slide arrives
+  // as a 390 x 219 strip. deck.css stacks every slide down the page as a block
+  // at the width of the screen and reflows its type, so there is no scale to
+  // work out here; this is the part that decides when, and the small fixed
+  // button and Esc are how a reader switches.
+  var READING = window.matchMedia
+    ? window.matchMedia('(max-width: 699px) and (orientation: portrait)')
+    : null;
+  var reading = false;
+  var forced = null; // 'read', 'present', or null for whatever the device is
+  var toggleButton = null;
+
+  function wantsReading() {
+    if (forced === 'read') {
+      return true;
+    }
+    if (forced === 'present') {
+      return false;
+    }
+    return READING !== null && READING.matches;
+  }
+
+  function scrollToCurrent() {
+    if (!slides[current]) {
+      return;
+    }
+    var box = slides[current].getBoundingClientRect();
+    var top = (window.pageYOffset || document.documentElement.scrollTop || 0) + box.top;
+    window.scrollTo(0, top);
+  }
+
+  // Scrolling the stack is navigating it: the slide at the top of the window is
+  // the current one, so the counter and the URL follow the reader.
+  function followScroll() {
+    if (!reading) {
+      return;
+    }
+    var top = window.pageYOffset || document.documentElement.scrollTop || 0;
+    var at = 0;
+    var k;
+    var box;
+    for (k = 0; k < slides.length; k += 1) {
+      box = slides[k].getBoundingClientRect();
+      if (box.top <= 4) {
+        at = k;
+      }
+    }
+    if (top + window.innerHeight >= document.documentElement.scrollHeight - 4) {
+      at = slides.length - 1;
+    }
+    if (at === current) {
+      return;
+    }
+    current = at;
+    syncHud();
+    writeHash();
+    syncNotes();
+    syncPresenter();
+  }
+
+  function syncToggle() {
+    if (!toggleButton) {
+      return;
+    }
+    toggleButton.hidden = !reading && forced !== 'present';
+    toggleButton.textContent = reading ? 'Present' : 'Read';
+    toggleButton.setAttribute('aria-label', reading
+      ? 'Present: one slide at a time, Esc comes back to reading'
+      : 'Read: every slide down the page, Esc comes back to presenting');
+  }
+
+  function setReading(on) {
+    reading = on;
+    deck.classList.toggle('is-reading', on);
+    document.documentElement.classList.toggle('is-reading', on);
+    document.body.classList.toggle('is-reading', on);
+    syncToggle();
+    if (on) {
+      var k;
+      // The reader sees the whole deck, so no step waits for a key.
+      for (k = 0; k < slides.length; k += 1) {
+        revealed[k] = stepsOf(k).length;
+      }
+      render();
+      return;
+    }
+    fit();
+    render();
+  }
+
+  function flip(which) {
+    forced = which;
+    setReading(wantsReading());
+  }
+
+  function mountToggle() {
+    toggleButton = document.createElement('button');
+    toggleButton.type = 'button';
+    toggleButton.className = 'deck-present';
+    toggleButton.addEventListener('click', function () {
+      flip(reading ? 'present' : 'read');
+    });
+    document.body.appendChild(toggleButton);
+    syncToggle();
+  }
+
+  if (READING !== null) {
+    if (READING.addEventListener) {
+      READING.addEventListener('change', function () {
+        if (forced === null) {
+          setReading(wantsReading());
+        }
+      });
+    } else if (READING.addListener) {
+      READING.addListener(function () {
+        if (forced === null) {
+          setReading(wantsReading());
+        }
+      });
+    }
+  }
+
+  var followQueued = false;
+  window.addEventListener('scroll', function () {
+    if (!reading || followQueued) {
+      return;
+    }
+    followQueued = true;
+    var run = function () {
+      followQueued = false;
+      followScroll();
+    };
+    if (window.requestAnimationFrame) {
+      window.requestAnimationFrame(run);
+    } else {
+      run();
+    }
+  }, { passive: true });
+
   var resizeQueued = false;
   function onResize() {
     if (resizeQueued) {
@@ -681,7 +915,15 @@
     resizeQueued = true;
     var run = function () {
       resizeQueued = false;
-      fit();
+      // A turn of the phone crosses the reading query: follow it, then lay the
+      // deck out for the mode it landed in.
+      if (forced === null && wantsReading() !== reading) {
+        setReading(wantsReading());
+        return;
+      }
+      if (!reading) {
+        fit();
+      }
     };
     if (window.requestAnimationFrame) {
       window.requestAnimationFrame(run);
@@ -715,6 +957,11 @@
       deck.appendChild(hud);
     }
     hud.setAttribute('aria-hidden', 'true');
+    // Reading mode numbers each slide "n / total", and CSS cannot count the
+    // deck, so the count is a property the stack reads. content takes a string,
+    // so the value carries its quotes and the label prints 3 and not a bare
+    // number the counter cannot join.
+    deck.style.setProperty('--deck-total', '"' + slides.length + '"');
 
     var match = /^#(\d+)$/.exec(window.location.hash);
     current = match ? clamp(parseInt(match[1], 10) - 1) : 0;
@@ -723,6 +970,9 @@
 
     fit();
     render();
+
+    mountToggle();
+    setReading(wantsReading());
   }
 
   window.rshowDeck = {

package/themes/default/example/index.html

@@ -11,14 +11,20 @@
     <link rel="stylesheet" href="/_themes/<name>@<n>/fonts.css">
     <link rel="stylesheet" href="/_themes/<name>@<n>/tokens.css">
     <link rel="stylesheet" href="/_themes/<name>@<n>/deck.css">
+    <link rel="stylesheet" href="/_themes/<name>@<n>/math.css">
+    <script defer src="/_themes/<name>@<n>/math.js"></script>
     <script src="/_themes/<name>@<n>/deck.js"></script>
 
   This copy links the theme folder itself, so it previews from a local checkout
-  with `rshow preview .` from this folder, and no network.
+  with `rshow preview .` from this folder, and no network. math.css and math.js
+  are the math addon of the theme and are optional: a deck with an equation
+  links them, and math.js goes before deck.js. A $ in the prose of a slide is a
+  price, not a formula.
 
   Twelve slides, one per layout in deck.css, so every class the theme ships is
   shown here: title, statement, bullets, section, figure, chart, table,
-  two-col, code, figure-two, quote, big-number.
+  two-col, code, figure-two, quote, big-number. A thirteenth slide carries one
+  equation and shows the math addon.
 
   The numbers on the chart and the table are example data. They are round on
   purpose and the caption says so, because an example must never read as a
@@ -31,6 +37,8 @@
 <link rel="stylesheet" href="../fonts.css">
 <link rel="stylesheet" href="../tokens.css">
 <link rel="stylesheet" href="../deck.css">
+<link rel="stylesheet" href="../math.css">
+<script defer src="../math.js"></script>
 </head>
 <body>
 
@@ -294,6 +302,15 @@
     </aside>
   </section>
 
+  <section class="slide bullets">
+    <h2>A republish sends only the bytes that changed</h2>
+    <div class="math">\mathrm{sent}(n) = \sum_{f \in \mathrm{new}(n)} |f|</div>
+    <aside class="notes">
+      <p>Same folder, second publish: the sum drops every file the host already
+      holds, so what leaves the laptop is the edit and nothing else.</p>
+    </aside>
+  </section>
+
   <section class="slide big-number">
     <p class="value">5 versions, 1 link</p>
     <p class="caption">Five publishes of one folder, each at its own path, all reachable from the link the first publish printed.</p>

package/themes/default/example/report.html

@@ -12,25 +12,32 @@
     <link rel="stylesheet" href="/_themes/<name>@<n>/fonts.css">
     <link rel="stylesheet" href="/_themes/<name>@<n>/tokens.css">
     <link rel="stylesheet" href="/_themes/<name>@<n>/report.css">
+    <link rel="stylesheet" href="/_themes/<name>@<n>/math.css">
     <script src="/_themes/<name>@<n>/mode.js"></script>
+    <script defer src="/_themes/<name>@<n>/math.js"></script>
     <script defer src="/_themes/<name>@<n>/report.js"></script>
 
   This copy links the theme folder itself, so it previews from a local checkout
   and makes no remote request. mode.js runs in the head, before the body paints,
-  so a reader who chose dark never sees a white flash. report.js is deferred: it
-  numbers the sections, figures and tables, resolves the cross-references,
-  builds the contents and moves the notes into the margin. With JavaScript off
-  the document is still a readable paper, it just loses the generated labels.
+  so a reader who chose dark never sees a white flash. math.css and math.js are
+  the math addon of the theme and are optional: a report that writes LaTeX links
+  them, and the equation below is the one line that does. math.js is deferred and
+  goes before report.js. report.js is deferred: it numbers the sections, figures
+  and tables, resolves the cross-references, builds the contents and moves the
+  notes into the margin. With JavaScript off the document is still a readable
+  paper, it just loses the generated labels and the equation shows its LaTeX.
 
-  Six sections, two figures, one table, three notes, six references. The
-  authors, the affiliations, the date and the version line are placeholders:
-  fill them in when the report is real. Every number in figure 2 and in the
-  prose around it is example data and says so.
+  Six sections, two figures, one table, one equation, three notes and six
+  references. The authors, the affiliations, the date and the version line are
+  placeholders: fill them in when the report is real. Every number in figure 2
+  and in the prose around it is example data and says so.
 -->
 <link rel="stylesheet" href="../fonts.css">
 <link rel="stylesheet" href="../tokens.css">
 <link rel="stylesheet" href="../report.css">
+<link rel="stylesheet" href="../math.css">
 <script src="../mode.js"></script>
+<script defer src="../math.js"></script>
 <script defer src="../report.js"></script>
 </head>
 <body>
@@ -193,10 +200,10 @@
       <p>The cost of a publish follows the same rule. Let the files of a version
       be <code>files(n)</code> and let the host's store be the set of hashes it
       already holds. The bytes a publish must send are the size of every file
-      whose hash is missing from the store.</p>
+      <span class="math">f</span> whose hash is missing from the store.</p>
 
       <div class="equation" id="eq-bytes">
-        <span>bytes(n) = sum of |f| for f whose hash is new</span>
+        <div class="math">\mathrm{bytes}(n) = \sum_{f \in \mathrm{new}(n)} |f|</div>
       </div>
 
       <p>The equation is the whole reason a republish of a mostly unchanged deck

package/themes/default/fonts/katex/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2013-2020 Khan Academy and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/themes/default/math.css

@@ -0,0 +1,46 @@
+/*
+ * KaTeX 0.19.1, MIT licence, https://github.com/KaTeX/KaTeX
+ *
+ * Vendored by packages/cli/scripts/vendor-katex.mjs from the katex package:
+ * dist/katex.min.css with every @font-face cut down to its woff2 file under
+ * fonts/katex/, then scripts/math-runtime.css.
+ *
+ * Do not edit this file by hand; run the script after an upgrade.
+ */
+@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(fonts/katex/KaTeX_AMS-Regular.woff2) format("woff2")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(fonts/katex/KaTeX_Caligraphic-Bold.woff2) format("woff2")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(fonts/katex/KaTeX_Caligraphic-Regular.woff2) format("woff2")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(fonts/katex/KaTeX_Fraktur-Bold.woff2) format("woff2")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(fonts/katex/KaTeX_Fraktur-Regular.woff2) format("woff2")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(fonts/katex/KaTeX_Main-Bold.woff2) format("woff2")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(fonts/katex/KaTeX_Main-BoldItalic.woff2) format("woff2")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(fonts/katex/KaTeX_Main-Italic.woff2) format("woff2")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(fonts/katex/KaTeX_Main-Regular.woff2) format("woff2")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(fonts/katex/KaTeX_Math-BoldItalic.woff2) format("woff2")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(fonts/katex/KaTeX_Math-Italic.woff2) format("woff2")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(fonts/katex/KaTeX_SansSerif-Bold.woff2) format("woff2")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(fonts/katex/KaTeX_SansSerif-Italic.woff2) format("woff2")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(fonts/katex/KaTeX_SansSerif-Regular.woff2) format("woff2")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(fonts/katex/KaTeX_Script-Regular.woff2) format("woff2")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(fonts/katex/KaTeX_Size1-Regular.woff2) format("woff2")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(fonts/katex/KaTeX_Size2-Regular.woff2) format("woff2")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(fonts/katex/KaTeX_Size3-Regular.woff2) format("woff2")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(fonts/katex/KaTeX_Size4-Regular.woff2) format("woff2")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(fonts/katex/KaTeX_Typewriter-Regular.woff2) format("woff2")}.katex{font:normal 1.21em KaTeX_Main,math,Times New Roman,serif;line-height:1.2;position:relative;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.19.1"}.katex .katex-mathml{border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.katex-newline{display:block}.katex .katex-base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .katex-base,.katex .katex-strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .katex-vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .katex-thinbox{display:inline-flex;flex-direction:row;max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .katex-hdashline,.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-rule,.katex .katex-underline .underline-line,.katex .mfrac .frac-line{min-height:1px}.katex .mspace{display:inline-block}.katex .katex-smash{display:inline;line-height:0}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.katex-inner,.katex .llap>.katex-inner,.katex .rlap>.katex-inner{position:absolute}.katex .clap>.katex-fix,.katex .llap>.katex-fix,.katex .rlap>.katex-fix{display:inline-block}.katex .llap>.katex-inner{right:0}.katex .clap>.katex-inner,.katex .rlap>.katex-inner{left:0}.katex .clap>.katex-inner>span{margin-left:-50%;margin-right:50%}.katex .katex-rule{border:0 solid;display:inline-block;position:relative}.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .katex-hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.katex-root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .katex-sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .katex-sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .katex-sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .katex-sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .katex-sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .katex-sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .katex-sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .katex-sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .katex-sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .katex-sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .katex-sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .katex-sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .katex-sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .katex-sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .katex-sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .katex-sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .katex-sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .katex-sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .katex-sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .katex-sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .katex-sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .katex-sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .katex-sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .katex-sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .katex-sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .katex-sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .katex-sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .katex-sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .katex-sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .katex-sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .katex-sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .katex-sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .katex-sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .katex-sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .katex-sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .katex-sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .katex-sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .katex-sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .katex-sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .katex-sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .katex-sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .katex-sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .katex-sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .katex-sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .katex-sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .katex-sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .katex-sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .katex-sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .katex-sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .katex-sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .katex-sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .katex-sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .katex-sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .katex-sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .katex-sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .katex-sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .katex-sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .katex-sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .katex-sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .katex-sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .katex-sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .katex-sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .katex-sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .katex-sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .katex-sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .katex-sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .katex-sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .katex-sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .katex-sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .katex-sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .katex-sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .katex-sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .katex-sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .katex-sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .katex-sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .katex-sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .katex-sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .katex-sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .katex-sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .katex-sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .katex-sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .katex-sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .katex-sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .katex-sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .katex-sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .katex-sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .katex-sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .katex-sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .katex-sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .katex-sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .katex-sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .katex-sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .katex-sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .katex-sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .katex-sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .katex-sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .katex-sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .katex-sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .katex-sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .katex-sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .katex-sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .katex-sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .katex-sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .katex-sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .katex-sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .katex-sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .katex-sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .katex-sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .katex-sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .katex-sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .katex-sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .katex-sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .katex-sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .katex-sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .katex-sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .katex-sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .katex-sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .katex-sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .katex-sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .katex-sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .katex-sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .katex-accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .katex-accent .accent-body{position:relative}.katex .katex-accent .accent-body:not(.accent-full){width:0}.katex .katex-overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex svg{fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .katex-stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .katex-stretchy:after,.katex .katex-stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .katex-sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .reflectbox{display:inline-block;transform:scaleX(-1)}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.katex-tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.katex-tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}
+/* KaTeX sets 1.21em, which reads too large beside IBM Plex at body size. */
+.katex {
+  font-size: 1.1em;
+}
+
+/* A wide equation scrolls inside its own box on a phone, so it never widens the
+   page. The colour is inherited, which is what lets dark mode work.
+   The padding gives a tall equation, such as a root over a fraction, the room
+   its glyphs need, and the margin gives back what the padding takes, so the
+   space around the equation stays the space of one step. */
+div.math {
+  margin: calc(var(--space-05) - 0.2em) 0;
+  padding: 0.4em 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+div.math .katex-display {
+  margin: 0;
+}
+
+/* A deck sets an equation at the size of a heading, and flush left under the
+   title it belongs to, rather than in the middle of the slide. */
+.slide div.math {
+  font-size: var(--text-xl);
+}
+
+.slide .katex-display > .katex {
+  text-align: left;
+}
+
+/* Reading mode on a phone is a column of text, so the equation keeps the size
+   of the text it sits in and never widens the page. */
+main.deck.is-reading div.math {
+  font-size: var(--text-base);
+}