rshow 0.0.6 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rshow",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Publish static artifacts to rshow",
   "license": "MIT",
   "homepage": "https://rslib.github.io/rshow",
@@ -44,6 +44,7 @@
   "devDependencies": {
     "@types/node": "^26.6.6",
     "esbuild": "0.28.2",
+    "katex": "0.19.1",
     "rshow-shared": "*",
     "typescript": "^5.9.3"
   }

package/skills/rshow/SKILL.md

@@ -62,6 +62,11 @@ Copy this checklist into the reply and tick it as you go.
   Never write `latest`.
 - A report links `report.css` and `report.js` in place of `page.css`, and `mode.js` still goes in the head.
   Read [reports](reference/reports.md) before you write one.
+- Math is LaTeX in the text of an element with the class `math`, and the page links `math.css` and `math.js` for it.
+  Math needs theme version 8 or newer, so a page on an older version moves up with `rshow config <dir>`.
+  A `div.math` is display math and any other element is inline.
+  A `$` in the prose is a price and is never read as math, so `$5` stays text.
+  Read [reports](reference/reports.md) for the markup an equation takes.
 - The page reads at 360px wide.
   Tables go inside `<div class="table">`.
 - Nothing secret in a page, because anyone who holds the link can read the HTML source.
@@ -145,6 +150,8 @@ The short list above is a hard rule.
 - Never publish a folder that holds `.env`, a key, a credential or customer data.
 - Never publish a source tree, `node_modules` or a `dist` folder that still holds a draft.
 - Never write the token into a page, a script, a log line, a commit or a chat message.
+- Never fake math with Unicode subscripts, Greek letters in mono or an HTML `<sub>`.
+  Write the LaTeX in an element with the class `math` and link `math.css` and `math.js`.
 - Never create a second artifact with a `-v2` slug.
   Publish the same slug again.
 - Never delete an artifact or drop a share without a yes from the person.

package/skills/rshow/reference/reports.md

@@ -109,7 +109,11 @@ Numbering is generated, so never type a number into a heading.
 
 `report.js` puts `Figure 1.` or `Table 1.` in front of the caption and counts in document order, so give every one an `id`.
 Draw the figure as inline `<svg>` with the colours from tokens, and give it a `viewBox` so it scales.
-An equation is `<div class="equation" id="eq-bytes">` with the formula inside, and `report.js` adds `(1)` at the end of the line.
+An equation is `<div class="equation" id="eq-bytes">` with a `<div class="math">` of LaTeX inside it, and `report.js` adds `(1)` at the end of the line.
+The report links `math.css` in the head and `math.js` before `report.js`, and `rshow check` reports bad LaTeX as an error.
+Inline math is a `<span class="math">` inside the sentence, and a wide equation scrolls inside its own box on a phone.
+Write `<` as `&lt;` and `&` as `&amp;` inside the LaTeX, and `&amp;` where lines align in a LaTeX alignment.
+A `$...$` in the prose is not math: it is text, so a price such as `$5` stays a price.
 Mark example data as example data in the caption, and never present a number you did not measure.
 
 ## Cross-references

package/skills/rshow-slides/SKILL.md

@@ -33,6 +33,7 @@ A topic on its own is not a slide.
 ## 2. Skeleton
 
 Replace `<name>@<n>` with the `theme` value that `rshow config <dir>` prints, which the server resolves to the current version. Use `default@3` only when `rshow config` warns that it cannot resolve the theme.
+Math needs theme version 8 or newer, so a page on an older version moves up with `rshow config <dir>`.
 
 ```html
 <!doctype html>
@@ -44,6 +45,9 @@ Replace `<name>@<n>` with the `theme` value that `rshow config <dir>` prints, wh
 <link rel="stylesheet" href="/_themes/default@3/fonts.css">
 <link rel="stylesheet" href="/_themes/default@3/tokens.css">
 <link rel="stylesheet" href="/_themes/default@3/deck.css">
+<!-- a deck that writes math links these two, and math.js goes before deck.js -->
+<link rel="stylesheet" href="/_themes/default@3/math.css">
+<script defer src="/_themes/default@3/math.js"></script>
 </head>
 <body>
 <main class="deck">
@@ -71,6 +75,7 @@ Replace `<name>@<n>` with the `theme` value that `rshow config <dir>` prints, wh
 ```
 
 The three stylesheet links and the script carry the same `<n>` on purpose, because a mixed version renders somewhere between two designs.
+A fallback to `default@3` keeps the page readable but has no math, so a deck on that version links neither `math.css` nor `math.js`, and the `math.js` warning of `rshow check` is the sign to move up.
 The deck needs no `mode.js`, because `deck.js` reads the same key and `t` does the same work.
 Override a token in one `:root` block after the theme links when the deck needs its own accent, with no limit on the declarations.
 An inline `<style>` block after the theme links may also carry a layout of the deck's own, as section 3 says.
@@ -85,6 +90,7 @@ Every slide is a `<section class="slide ...">`, and the second class is one of t
   One series is drawn in the accent blue and two or more take `--chart-1`, `--chart-2` and so on in order.
 - `table` for a clean data table and `code` for one command.
 - `two-col` for two blocks of text, `quote` for one sentence and `big-number` for one number.
+- A slide with an equation is a `bullets` slide with one `<div class="math">` of LaTeX under the title, and the deck links `math.css` and `math.js` for it.
 
 A sparse slide is centred a little above the middle of the canvas, so the air sits under the block.
 A bullets slide puts its points under the title at 28px with a 1.4 line, five at most.
@@ -102,6 +108,7 @@ Vary the rhythm: do not run more than three text slides (`two-col` or `bullets`)
 - Every slide gets one `<aside class="notes">`, including the title slide, because a slide without one shows nothing in the notes window.
 - Keep a note under 60 words.
   It is what you say, not what the room reads.
+- A note holds no math: an equation inside an `aside.notes` stays as its LaTeX, because the notes window loads no math stylesheet.
 - Press `n` for the notes window, which also names the next slide.
 - Press `p` for the presenter view: the current slide, the next slide, the notes and an elapsed timer, kept in step with the deck.
 - Put `class="step"` on any element inside a slide to reveal it one press later, because `deck.js` selects every `.step` in the slide.

package/skills/rshow-slides/reference/layouts.md

@@ -14,6 +14,7 @@
 - two-col
 - quote
 - big-number
+- math (an equation on a bullets slide)
 - your own layout
 
 One markup example per layout, all inside `<main class="deck">`.
@@ -252,6 +253,20 @@ The unit belongs in the statement and the source goes under it.
 
 A number you cannot measure is `[PLACEHOLDER]` until it is real, and a number that stands for an example says so in the source line.
 
+## math
+
+An equation takes a `bullets` slide: a takeaway title and one `div.math`.
+The LaTeX is the text of the element, and the deck links `math.css` and `math.js` for it.
+A note holds words, not math.
+
+```html
+<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>The sum drops every file the host already holds.</p></aside>
+</section>
+```
+
 ## your own layout
 
 A layout of your own takes a short class name and sits second on the slide, in the same slot as the twelve.

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,10 +186,27 @@
     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) {
     var h = slides[n].querySelector('h1, h2, h3');
     var text = h ? h.textContent : '';
@@ -635,14 +653,78 @@
     }
   });
 
+  // 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 {

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);
+}