mdeck 3.7.1 → 3.8.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 3.8.0 — 2026-10-11
+
+- Hotspots: with `hotspots: auto` in the deck's settings, the presenter view puts a numbered key on each picture, code block, table, formula, video, callout, column and poll of the slide, and **1**–**9** zoom smoothly until that part fills the screen, keeping the slide around a part of another shape in view. The audience window, a paired iPad and phones zoom along; only the presenter view shows the keys, which can also be tapped. The same number, **0**, **Escape**, a tap on the slide or the next point or slide show the whole slide again. `hotspots: marked` keys only parts marked `data-hotspot`; a slide can set its own (`hotspots: false`), and **H** or the presenter view's new button turns hotspots on or off during the talk. Without hotspots, the default, **1**–**9** still go to slides 1–9. The editor has a **Hotspots** choice in the deck's settings and in each slide's details, and the tour deck a slide to try it on.
+- A talk in several languages is one file per language, side by side and named for it: `talk.en.md`, `talk.de.md`, `talk.hi.md`. `mdeck run` finds them and the presenter view gets a **Language** switch (**L** for the next language): the slides, the notes and mdeck's own words change in every window, the audience window, a paired iPad and phones following the talk, at the same slide and step. A file named this way needs no `lang`. A deck in one language shows no switch.
+- A deck in a language written from right to left (`lang: fa`, `ar`, `he` …) runs its slides and notes from right to left in every theme; code, maths and mdeck's controls stay left to right. The Python example comes in German, Hindi and Farsi too.
+- The presenter view calls the light and dark switch **Mode**.
+- The presenter view's next-slide preview keeps the language shown after the last slide or a reload, instead of going back to the file's.
+- The presenter view shows a palette as the theme gallery does: one chip of its background and two accents, in front of its name.
+
 ## 3.7.1 — 2026-10-09
 
 - A video file on a slide (`<videoplayer src="…" />`) follows the presenter view, on the laptop or a paired iPad: play, pause and a jump there do the same in the audience window, which plays the sound while the presenter view's copy stays silent. This works without a server too, in a built folder. An audience window that nobody has clicked yet plays silently and offers **Click for sound** (German: **Klicken für Ton**). Online videos from YouTube, Vimeo or SwitchTube still play only where they are started; the iPad guide says so.

package/README.md

@@ -160,7 +160,7 @@ mdeck send talk.md           # one file to email, with a PDF inside
 - **Layouts:** title, chapter, big statement, image and text, split, full-bleed image, and plain content slides, with points that appear one at a time.
 - **Looks:** six built-in themes and six colour palettes, each light or dark, changeable without touching the slides. Install more from the [theme repository](https://gh.tschieber.de/mdeck-themes/) with `mdeck themes install`, or make your own as small `extension.toml` folders beside the deck.
 - **One launch page:** `mdeck run` opens a page with a live preview, the presenter and audience views, the deck and reader views, the editor, the guides, one-click builds and PDF, the deck's check results, and for decks with a server its health and the presenter code.
-- **Presenting:** a presenter view with notes and timer, and an audience window that stays in sync.
+- **Presenting:** a presenter view with notes and timer, and an audience window that stays in sync. With `hotspots: auto`, the number keys zoom smoothly into a slide's pictures, code and tables, and the audience window zooms along.
 - **Drawing on slides:** pen with pressure, highlighter and a laser pointer, with a mouse, a finger or an iPad pencil (`D`). Drawings are saved in `<deck>.drawings.json` beside the deck and appear in every view, build and PDF. An iPad can present on its own, or pair with the laptop through a QR code on the launch page while the laptop's audience window follows it.
 - **Audience questions:** `<poll room="lunch" options="A|B|C" />` shows live results and a QR code; people vote on their phones. `<scale>`, `<wordcloud>` and `<question>` ask for a rating, words or open answers, and `<qrcode join />` shows the join code once for all of them. Rooms run inside `mdeck run --network` or on a small server (`mdeck server`).
 - **Sharing:** a reader view with an outline, a phone-friendly Read mode and a PDF download; speaker notes are stripped from shared builds, and interactive slides appear in their finished state.
@@ -188,8 +188,8 @@ complete folder.
 
 | Example | Theme | What it demonstrates |
 |---|---|---|
-| [Tour](examples/showcase/slides.md) | Glass | Start here: each slide shows the Markdown beside what it becomes, from headings to layouts, live code, notes, drawing, a poll and sharing |
-| [Python](examples/python/slides.md) | Academic | A real lesson: live code to try out, points revealed step by step, notes on every slide, a poll to check understanding |
+| [Tour](examples/showcase/slides.md) | Glass | Start here: each slide shows the Markdown beside what it becomes, from headings to layouts, live code, notes, drawing, zooming into a part, a poll and sharing |
+| [Python](examples/python/slides.en.md) | Academic | A real lesson: live code to try out, points revealed step by step, notes on every slide, a poll to check understanding; in English, [German](examples/python/slides.de.md), [Hindi](examples/python/slides.hi.md) and [Farsi](examples/python/slides.fa.md), switched in the presenter view |
 | [Poll](examples/poll/slides.md) | Neue | A join slide, then a poll, a scale, a word cloud and open questions; start it with `mdeck run slides.md --network` |
 | [Custom layouts](examples/custom-layouts/slides.md) | Neue | A deck-local comparison design and named regions |
 

package/assets/base.css

@@ -160,7 +160,7 @@ deck-stage[data-ink-hidden] .slide-ink { display: none; }
   padding-top: 20px;
   margin-top: auto;
 }
-.slide-footnotes ol { margin: 0; padding-left: 1.5em; display: flex; flex-direction: column; gap: 4px; }
+.slide-footnotes ol { margin: 0; padding-inline-start: 1.5em; display: flex; flex-direction: column; gap: 4px; }
 .slide-footnotes li { line-height: 1.4; }
 .slide-footnotes p { margin: 0; }
 .slide-footnotes .footnote-backref { display: none; }
@@ -171,8 +171,8 @@ deck-stage[data-ink-hidden] .slide-ink { display: none; }
 :where(.slide) a { color: var(--accent); text-underline-offset: 0.15em; text-decoration-thickness: 0.06em; }
 :where(.slide) blockquote {
   margin: 0 0 var(--gap-item);
-  padding-left: 0.9em;
-  border-left: 4px solid var(--accent);
+  padding-inline-start: 0.9em;
+  border-inline-start: 4px solid var(--accent);
   color: var(--ink-soft);
 }
 :where(.slide) blockquote > p:last-child { margin-bottom: 0; }
@@ -182,10 +182,14 @@ deck-stage[data-ink-hidden] .slide-ink { display: none; }
 
 /* ── Code blocks ─────────────────────────────────────────────────────────── */
 .code-block { white-space: pre-wrap; overflow-x: hidden; }
+/* Code and maths read from left to right, also on a right-to-left slide. */
+.slide[dir="rtl"] :is(pre, code, kbd, samp, .katex, .code-block-wrapper) { direction: ltr; unicode-bidi: isolate; }
+/* A bullet that points along the line points the other way. */
+.slide[dir="rtl"] .slide-body ul > li::before { scale: -1 1; }
 
 /* ── Pictures written in the text ───────────────────────────────────────── */
 /* A paragraph of nothing but pictures (marked in markedSetup.js) fits into
-   the room the slide has left: a large picture shrinks, keeping its
+   the room the slide has inset-inline-start: a large picture shrinks, keeping its
    proportions, and never runs off the slide; a small one keeps its size.
    Several sit side by side. Themes may set them differently (a grid, cropped
    to fill); a picture in a sentence is left alone. */
@@ -215,7 +219,7 @@ deck-stage[data-ink-hidden] .slide-ink { display: none; }
 }
 .slide-body th,
 .slide-body td {
-  text-align: left;
+  text-align: start;
   padding: 12px 16px;
   border-bottom: 1px solid var(--rule);
 }

package/assets/extensions/themes/academic/styles.css

@@ -41,7 +41,7 @@
 .slide-logo {
   position: absolute;
   top: calc(var(--pad-y) - 20px);
-  right: var(--pad-x);
+  inset-inline-end: var(--pad-x);
   height: 72px;
   width: auto;
   max-width: 320px;
@@ -183,12 +183,12 @@ strong { color: var(--ink); font-weight: 700; }
 .slide-body ul > li,
 .slide-body ol > li {
   line-height: 1.45;
-  padding-left: 44px;
+  padding-inline-start: 44px;
 }
 .slide-body ul > li::before {
   content: '';
   position: absolute;
-  left: 4px;
+  inset-inline-start: 4px;
   top: 0.5em;
   width: 0.42em;
   height: 0.5em;
@@ -198,7 +198,7 @@ strong { color: var(--ink); font-weight: 700; }
 .slide-body ol > li::before {
   content: counter(slide-ol) '.';
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 0;
   font-weight: 700;
   color: var(--accent);
@@ -259,11 +259,11 @@ strong { color: var(--ink); font-weight: 700; }
   grid-template-columns: 1.2fr 1fr;
   column-gap: 96px;
   align-items: center;
-  text-align: left;
+  text-align: start;
 }
 .slide--title.has-image .title-text { align-items: flex-start; }
 .slide--title.has-image .display { font-size: calc(var(--fs-display) * 0.82); }
-.slide--title.has-image .display::after { margin-left: 0; }
+.slide--title.has-image .display::after { margin-inline-start: 0; }
 .slide--title.has-image .title-image { width: 100%; height: 100%; max-height: 720px; object-fit: contain; }
 .slide--title.has-image .slide-footer { justify-content: flex-start; }
 
@@ -291,8 +291,8 @@ strong { color: var(--ink); font-weight: 700; }
   line-height: 0.9;
   letter-spacing: -0.04em;
   color: var(--accent);
-  padding-right: 56px;
-  border-right: 4px solid var(--accent);
+  padding-inline-end: 56px;
+  border-inline-end: 4px solid var(--accent);
   font-variant-numeric: lining-nums;
   user-select: none;
 }
@@ -349,9 +349,9 @@ strong { color: var(--ink); font-weight: 700; }
 }
 .slide--focus .slide-body > * {
   background: var(--accent-soft);
-  border-left: 8px solid var(--accent);
-  padding-left: 64px;
-  padding-right: 80px;
+  border-inline-start: 8px solid var(--accent);
+  padding-inline-start: 64px;
+  padding-inline-end: 80px;
 }
 .slide--focus .slide-body > :first-child { padding-top: 48px; }
 .slide--focus .slide-body > :last-child { padding-bottom: 48px; }
@@ -384,7 +384,7 @@ strong { color: var(--ink); font-weight: 700; }
   font-size: var(--fs-small);
   font-weight: 600;
   color: var(--muted);
-  text-align: right;
+  text-align: end;
   padding-top: 28px;
 }
 
@@ -452,7 +452,7 @@ strong { color: var(--ink); font-weight: 700; }
   --block: var(--muted);
   background: color-mix(in oklab, var(--block) 7%, var(--bg));
   border: 0;
-  border-left: 6px solid var(--block);
+  border-inline-start: 6px solid var(--block);
   border-radius: 0 4px 4px 0;
   padding: 0;
   margin: var(--gap-item) 0;
@@ -488,7 +488,7 @@ strong { color: var(--ink); font-weight: 700; }
 /* Examples and remarks: no fill, the label in small capitals */
 .slide-body :is(.callout-example, .callout-remark) {
   background: none;
-  border-left-width: 3px;
+  border-inline-start-width: 3px;
 }
 .slide-body :is(.callout-example, .callout-remark) .callout-title {
   background: none;
@@ -509,10 +509,10 @@ strong { color: var(--ink); font-weight: 700; }
 }
 .slide-body .callout.callout-proof > * { padding: 0; }
 .slide-body .callout.callout-proof .callout-title {
-  float: left;
+  float: inline-start;
   background: none;
   padding: 0;
-  margin-right: 0.35em;
+  margin-inline-end: 0.35em;
   font-family: var(--font-body);
   font-size: var(--fs-body);
   font-style: italic;
@@ -522,11 +522,11 @@ strong { color: var(--ink); font-weight: 700; }
 }
 .slide-body .callout.callout-proof .callout-title::after { content: '.'; }
 .slide-body .callout.callout-proof > .callout-title + * { margin-top: 0; }
-.slide-body .callout.callout-proof p { padding-left: 0; color: var(--ink-soft); }
+.slide-body .callout.callout-proof p { padding-inline-start: 0; color: var(--ink-soft); }
 .slide-body .callout.callout-proof > :last-child { margin-bottom: 0; }
 .slide-body .callout.callout-proof > :last-child::after {
   content: '\220E';
-  margin-left: 0.6em;
+  margin-inline-start: 0.6em;
   color: var(--ink);
 }
 
@@ -545,7 +545,7 @@ strong { color: var(--ink); font-weight: 700; }
 }
 .slide-body th,
 .slide-body td {
-  padding: 10px 28px 10px 0;
+  padding-block: 10px; padding-inline: 0 28px;
   border: 0;
 }
 .slide-body th {
@@ -570,7 +570,7 @@ strong { color: var(--ink); font-weight: 700; }
   content: '';
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   width: 280px;
   height: 1px;
   background: var(--ink-soft);
@@ -587,7 +587,7 @@ strong { color: var(--ink); font-weight: 700; }
   content: '';
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   width: 280px;
   height: 1px;
   background: var(--ink-soft);
@@ -602,7 +602,7 @@ strong { color: var(--ink); font-weight: 700; }
   --code-size: 24px;
   background: var(--code-bg);
   border-radius: 4px;
-  border-left: 4px solid var(--hairline);
+  border-inline-start: 4px solid var(--hairline);
   padding: 24px 32px;
   margin: 0;
   overflow: hidden;

package/assets/extensions/themes/glass/styles.css

@@ -152,7 +152,7 @@
 .slide-logo {
   position: absolute;
   top: var(--pad-y);
-  right: var(--pad-x);
+  inset-inline-end: var(--pad-x);
   height: 80px;
   width: auto;
   max-width: 320px;
@@ -221,7 +221,7 @@ em { font-style: normal; font-weight: 600; color: var(--em); }
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: var(--accent);
-  padding-right: 0.04em;
+  padding-inline-end: 0.04em;
 }
 strong { font-weight: 650; color: var(--ink); }
 
@@ -284,28 +284,28 @@ strong { font-weight: 650; color: var(--ink); }
     inset 0 0 0 1px color-mix(in oklab, var(--tint) 42%, transparent),
     0 3px 8px -3px color-mix(in oklab, var(--lo) 45%, transparent);
 }
-.slide-body ul > li { line-height: 1.38; padding-left: 48px; }
+.slide-body ul > li { line-height: 1.38; padding-inline-start: 48px; }
 .slide-body ul > li::before {
   content: '';
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: calc(0.69em - 11px);
   width: 22px;
   height: 22px;
 }
 /* A point inside a point: a smaller bead in the second accent. */
-.slide-body li ul > li { padding-left: 38px; }
+.slide-body li ul > li { padding-inline-start: 38px; }
 .slide-body li ul > li::before {
   --tint: var(--accent-2);
   width: 14px;
   height: 14px;
   top: calc(0.69em - 7px);
 }
-.slide-body ol > li { line-height: 1.38; padding-left: 66px; }
+.slide-body ol > li { line-height: 1.38; padding-inline-start: 66px; }
 .slide-body ol > li::before {
   content: counter(slide-ol);
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: calc(0.69em - 20px);
   width: 44px;
   height: 44px;
@@ -351,7 +351,7 @@ strong { font-weight: 650; color: var(--ink); }
   grid-template-columns: 1.05fr 1fr;
   column-gap: 72px;
   align-items: center;
-  text-align: left;
+  text-align: start;
   padding: 13px;
 }
 .slide--title.has-image .title-text {
@@ -395,7 +395,7 @@ strong { font-weight: 650; color: var(--ink); }
   content: '';
   position: absolute;
   z-index: -1;
-  left: calc(var(--disc) * 0.3);
+  inset-inline-start: calc(var(--disc) * 0.3);
   top: calc(50% - var(--disc) * 0.95);
   width: calc(var(--disc) * 1.3);
   aspect-ratio: 1;
@@ -457,7 +457,7 @@ strong { font-weight: 650; color: var(--ink); }
 }
 .slide--chapter.has-image .chapter-content { --disc: 210px; align-self: center; }
 .slide--chapter.has-image .chapter-content:has(> .chapter-num) { display: flex; flex-direction: column; align-items: flex-start; }
-.slide--chapter.has-image .chapter-content:has(> .chapter-num)::before { top: calc(var(--disc) * -0.45); left: calc(var(--disc) * 0.3); }
+.slide--chapter.has-image .chapter-content:has(> .chapter-num)::before { top: calc(var(--disc) * -0.45); inset-inline-start: calc(var(--disc) * 0.3); }
 .slide--chapter.has-image .chapter-num { align-self: flex-start; margin-bottom: 44px; }
 .slide--chapter.has-image .chapter-title { font-size: calc(var(--fs-title) * 0.78); }
 .slide--chapter.has-image .chapter-image {
@@ -482,7 +482,7 @@ strong { font-weight: 650; color: var(--ink); }
   display: inline-flex;
   align-items: center;
   gap: 12px;
-  padding: 11px 28px 11px 22px;
+  padding-block: 11px; padding-inline: 22px 28px;
   border-radius: 999px;
   font-family: var(--font-body);
   font-size: var(--fs-eyebrow);
@@ -639,7 +639,7 @@ deck-stage[data-deck-static] .slide { animation: none; }
   background: currentColor;
   box-shadow: 0 0 10px currentColor;
 }
-.slide-body .callout p { padding-left: 0; margin: 0; color: var(--ink); }
+.slide-body .callout p { padding-inline-start: 0; margin: 0; color: var(--ink); }
 .slide-body :is(.callout-note, .callout-tip, .callout-important) { --tint: var(--accent); }
 .slide-body :is(.callout-warning, .callout-caution) { --tint: var(--accent-3); }
 .slide-body .callout-definition { --tint: var(--accent-2); }
@@ -676,8 +676,8 @@ deck-stage[data-deck-static] .slide { animation: none; }
   border-bottom: 1.5px solid color-mix(in oklab, var(--ink) 40%, transparent);
   background: color-mix(in oklab, var(--hi) 7%, transparent);
 }
-.slide-body th:first-child { border-top-left-radius: 16px; }
-.slide-body th:last-child { border-top-right-radius: 16px; }
+.slide-body th:first-child { border-start-start-radius: 16px; }
+.slide-body th:last-child { border-start-end-radius: 16px; }
 .slide-body td { border-bottom: 1px solid var(--hairline); }
 .slide-body tr:last-child td { border-bottom: 0; }
 
@@ -685,14 +685,14 @@ deck-stage[data-deck-static] .slide { animation: none; }
 .slide-body blockquote {
   position: relative;
   border: 0;
-  padding: 4px 0 4px 40px;
+  padding-block: 4px; padding-inline: 40px 0;
   margin: 0 0 var(--gap-item);
   color: var(--ink);
 }
 .slide-body blockquote::before {
   content: '';
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 0;
   bottom: 0;
   width: 6px;
@@ -721,7 +721,7 @@ deck-stage[data-deck-static] .slide { animation: none; }
 .slide .poll-track, .slide .scale-track { border-radius: 999px; background: color-mix(in oklab, var(--hi) 8%, transparent); box-shadow: inset 0 0 0 1px var(--edge); }
 .slide .poll-fill { border-radius: 999px; background: var(--shine); box-shadow: 0 0 18px color-mix(in oklab, var(--accent) 40%, transparent); }
 .slide .scale-fill { border-radius: 14px 14px 0 0; background: linear-gradient(to top, var(--accent), var(--accent-2)); }
-.slide .question-cards li { border-radius: 22px; border-left: 0; background: var(--glass-sheen), var(--glass-fill); box-shadow: var(--glass-rim); }
+.slide .question-cards li { border-radius: 22px; border-inline-start: 0; background: var(--glass-sheen), var(--glass-fill); box-shadow: var(--glass-rim); }
 .slide .poll-join { border-radius: 28px; }
 
 /* ─────────────────────────────────────────────

package/assets/extensions/themes/minimal/styles.css

@@ -18,7 +18,7 @@
 .slide-logo {
   position: absolute;
   top: var(--pad-y);
-  right: var(--pad-x);
+  inset-inline-end: var(--pad-x);
   height: 96px;
   width: auto;
   max-width: 420px;
@@ -215,21 +215,21 @@ strong { color: var(--ink); font-weight: 600; }
 /* ─────────────────────────────────────────────
    LISTS — a short dash, plain numbers
    ───────────────────────────────────────────── */
-.slide-body ul > li { line-height: 1.4; padding-left: 40px; position: relative; }
+.slide-body ul > li { line-height: 1.4; padding-inline-start: 40px; position: relative; }
 .slide-body ul > li::before {
   content: '';
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 0.72em;
   width: 16px;
   height: 2px;
   background: var(--muted);
 }
-.slide-body ol > li { padding-left: 52px; position: relative; }
+.slide-body ol > li { padding-inline-start: 52px; position: relative; }
 .slide-body ol > li::before {
   content: counter(slide-ol) '.';
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   color: var(--muted);
   font-variant-numeric: tabular-nums;
 }
@@ -291,19 +291,19 @@ strong { color: var(--ink); font-weight: 600; }
    ───────────────────────────────────────────── */
 .slide-body .callout {
   background: none;
-  border-left: 3px solid var(--rule);
+  border-inline-start: 3px solid var(--rule);
   border-radius: 0;
-  padding: 4px 0 4px 32px;
+  padding-block: 4px; padding-inline: 32px 0;
   margin: 32px 0 0;
   max-width: 1200px;
 }
-.slide-body :is(.callout-note, .callout-tip, .callout-important) { border-left-color: var(--accent); }
-.slide-body :is(.callout-warning, .callout-caution) { border-left-color: var(--accent-3); }
+.slide-body :is(.callout-note, .callout-tip, .callout-important) { border-inline-start-color: var(--accent); }
+.slide-body :is(.callout-warning, .callout-caution) { border-inline-start-color: var(--accent-3); }
 .slide-body .callout-title { margin-bottom: 8px; }
-.slide-body .callout p { padding-left: 0; color: var(--ink); font-size: var(--fs-body); }
+.slide-body .callout p { padding-inline-start: 0; color: var(--ink); font-size: var(--fs-body); }
 /* Lecture blocks: theorems in the accent, definitions in the second */
-.slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary) { border-left-color: var(--accent); }
-.slide-body .callout-definition { border-left-color: var(--accent-2); }
+.slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary) { border-inline-start-color: var(--accent); }
+.slide-body .callout-definition { border-inline-start-color: var(--accent-2); }
 
 /* ─────────────────────────────────────────────
    CODE — on the surface, no frame
@@ -344,8 +344,8 @@ strong { color: var(--ink); font-weight: 600; }
    ───────────────────────────────────────────── */
 .slide-body blockquote {
   margin: 0 0 var(--gap-item);
-  padding: 2px 0 2px 28px;
+  padding-block: 2px; padding-inline: 28px 0;
   border: 0;
-  border-left: 3px solid var(--muted);
+  border-inline-start: 3px solid var(--muted);
   color: var(--ink-soft);
 }

package/assets/extensions/themes/neue/styles.css

@@ -26,7 +26,7 @@
 .slide-logo {
   position: absolute;
   top: var(--pad-y);
-  right: var(--pad-x);
+  inset-inline-end: var(--pad-x);
   height: 128px;
   width: auto;
   max-width: 480px;
@@ -35,7 +35,7 @@
   transform: translateY(calc(var(--fs-eyebrow) * 0.5 - 50%));
   /* The rule across the top stops before the logo instead of crossing it. */
   background: var(--bg);
-  padding-left: 32px;
+  padding-inline-start: 32px;
 }
 
 .slide-footer {
@@ -167,7 +167,7 @@ strong { color: var(--ink); font-weight: 600; }
 }
 .chapter-num {
   position: absolute;
-  right: var(--pad-x);
+  inset-inline-end: var(--pad-x);
   bottom: calc(var(--pad-y) + 120px);
   font-family: var(--font-display);
   font-size: 600px;
@@ -222,7 +222,7 @@ strong { color: var(--ink); font-weight: 600; }
   justify-content: flex-end;
   align-items: flex-start;
 }
-.slide--chapter.has-image .chapter-num { right: auto; left: calc(var(--pad-x) - 40px); }
+.slide--chapter.has-image .chapter-num { inset-inline-end: auto; inset-inline-start: calc(var(--pad-x) - 40px); }
 .slide--chapter.has-image .chapter-image {
   width: 100%;
   height: 100%;
@@ -256,7 +256,7 @@ strong { color: var(--ink); font-weight: 600; }
 .slide--focus .slide-body {
   justify-content: center;
   align-items: flex-start;
-  text-align: left;
+  text-align: start;
 }
 .focus-eyebrow {
   font-family: var(--font-body);
@@ -279,7 +279,7 @@ strong { color: var(--ink); font-weight: 600; }
   max-width: 1560px;
   margin: 0;
   text-wrap: balance;
-  text-align: left;
+  text-align: start;
 }
 .focus-content {
   display: flex;
@@ -339,13 +339,13 @@ strong { color: var(--ink); font-weight: 600; }
 .slide-body ul > li {
   font-weight: 400;
   line-height: 1.32;
-  padding-left: 44px;
+  padding-inline-start: 44px;
   position: relative;
 }
 .slide-body ul > li::before {
   content: '';
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 0.42em;
   width: 14px;
   height: 14px;
@@ -353,13 +353,13 @@ strong { color: var(--ink); font-weight: 600; }
 }
 .slide-body ol > li {
   counter-increment: slide-ol;
-  padding-left: 64px;
+  padding-inline-start: 64px;
   position: relative;
 }
 .slide-body ol > li::before {
   content: counter(slide-ol, decimal-leading-zero);
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 0.05em;
   font-family: var(--font-display);
   font-size: var(--fs-body);
@@ -428,7 +428,7 @@ strong { color: var(--ink); font-weight: 600; }
    ───────────────────────────────────────────── */
 .slide-body .callout {
   background: none;
-  border-left: 0;
+  border-inline-start: 0;
   border-top: 6px solid var(--rule);
   padding: 20px 0 0;
   margin: 40px 0 0;
@@ -438,7 +438,7 @@ strong { color: var(--ink); font-weight: 600; }
 .slide-body .callout-tip .callout-title { color: var(--accent); }
 .slide-body :is(.callout-warning, .callout-caution) { border-top-color: var(--accent-3); }
 .slide-body .callout-title { letter-spacing: 0.12em; margin-bottom: 10px; }
-.slide-body .callout p { padding-left: 0; color: var(--ink); font-size: var(--fs-body); }
+.slide-body .callout p { padding-inline-start: 0; color: var(--ink); font-size: var(--fs-body); }
 /* Lecture blocks: theorems under a rule in the accent, definitions in the second */
 .slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary) { border-top-color: var(--accent); }
 .slide-body .callout-definition { border-top-color: var(--accent-2); }
@@ -491,9 +491,9 @@ strong { color: var(--ink); font-weight: 600; }
    ───────────────────────────────────────────── */
 .slide-body blockquote {
   margin: 0 0 var(--gap-item);
-  padding: 2px 0 2px 32px;
+  padding-block: 2px; padding-inline: 32px 0;
   border: 0;
-  border-left: 6px solid var(--accent);
+  border-inline-start: 6px solid var(--accent);
   max-width: 1200px;
   color: var(--ink);
 }