mdeck 3.6.2 → 3.7.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 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.
+
+## 3.7.0 — 2026-10-09
+
+- Palettes have a third accent, `--accent-3`, and the three accents mean something: `--accent` is emphasis, `--accent-2` its companion (gradients, a contrast to the accent), `--accent-3` attention, used sparingly. `--accent-3` marks things and need not be readable as text, so it may be a yellow; `mdeck check` asks only that it can be seen (1.5:1 against the background). A palette without `--accent-3` keeps working and gets an amber (`#d99a00`, at night `#f5c542`); `mdeck check` suggests giving it its own. All built-in palettes and those in the theme repository set it (the repository requires it); `mdeck palettes update` brings installed ones up to date.
+- Callouts take their colours from the palette: note, tip and important the accent, warning and caution the third accent. The five callout colours (`--callout-note` … `--callout-caution`) are gone, and with them the green, purple and blue that matched no palette. The built-in themes follow.
+
 ## 3.6.2 — 2026-10-09
 
 - The docs home page and the README start with what mdeck does: drawing from an iPad, polls from phones, citations, themes, running code and sending one file, each with a picture (`npm run feature-images` renders them). The docs' example deck is now a short tour of mdeck, with its own control bar and drawing, and a picker of every built-in theme as a picture, with light or dark.

package/README.md

@@ -96,7 +96,7 @@ layout: title
 # Rate depends on substrate
 
 - Michaelis–Menten describes saturation
-- *K*<sub>m</sub> is the half-saturation point
+- $K_m$ is the half-saturation point
 
 :::notes
 Ask who has seen the curve before.

package/assets/extensions/palettes/cobalt/extension.toml

@@ -16,6 +16,7 @@ license = "MIT"
 "--rule" = "#d5dbf0"
 "--accent" = "#1f3fd1"
 "--accent-2" = "#e8590c"
+"--accent-3" = "#e8a400"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -27,4 +28,5 @@ license = "MIT"
 "--rule" = "#212b5e"
 "--accent" = "#6f8cff"
 "--accent-2" = "#ff922b"
+"--accent-3" = "#ffd43b"
 "--on-accent" = "#0a1030"

package/assets/extensions/palettes/greyscale/extension.toml

@@ -8,8 +8,8 @@ author = "Tilman Schieber"
 license = "MIT"
 
 # No colour anywhere: emphasis is black against the softer body text, the
-# second accent a mid grey; code and callouts use greys instead of their
-# usual colours.
+# second accent a mid grey, the third (warnings) a lighter grey; code uses
+# greys instead of its usual colours.
 [light]
 "--bg" = "#ffffff"
 "--surface" = "#f0f0f0"
@@ -19,6 +19,7 @@ license = "MIT"
 "--rule" = "#d4d4d4"
 "--accent" = "#000000"
 "--accent-2" = "#6e6e6e"
+"--accent-3" = "#9a9a9a"
 "--on-accent" = "#ffffff"
 "--token-default" = "#141414"
 "--token-comment" = "#6b6b6b"
@@ -27,11 +28,6 @@ license = "MIT"
 "--token-keyword" = "#000000"
 "--token-function" = "#2a2a2a"
 "--token-operator" = "#555555"
-"--callout-note" = "#4a4a4a"
-"--callout-tip" = "#4a4a4a"
-"--callout-important" = "#000000"
-"--callout-warning" = "#7a7a7a"
-"--callout-caution" = "#000000"
 
 [dark]
 "--bg" = "#121212"
@@ -42,6 +38,7 @@ license = "MIT"
 "--rule" = "#303030"
 "--accent" = "#ffffff"
 "--accent-2" = "#a6a6a6"
+"--accent-3" = "#6e6e6e"
 "--on-accent" = "#121212"
 "--token-default" = "#f2f2f2"
 "--token-comment" = "#9a9a9a"
@@ -50,8 +47,3 @@ license = "MIT"
 "--token-keyword" = "#ffffff"
 "--token-function" = "#e0e0e0"
 "--token-operator" = "#b0b0b0"
-"--callout-note" = "#b8b8b8"
-"--callout-tip" = "#b8b8b8"
-"--callout-important" = "#ffffff"
-"--callout-warning" = "#8c8c8c"
-"--callout-caution" = "#ffffff"

package/assets/extensions/palettes/lagoon/extension.toml

@@ -16,6 +16,7 @@ license = "MIT"
 "--rule" = "#e0deda"
 "--accent" = "#0d9488"
 "--accent-2" = "#c2410c"
+"--accent-3" = "#ca8a04"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -27,4 +28,5 @@ license = "MIT"
 "--rule" = "#23332f"
 "--accent" = "#2dd4bf"
 "--accent-2" = "#fb923c"
+"--accent-3" = "#facc15"
 "--on-accent" = "#062b26"

package/assets/extensions/palettes/nordic/extension.toml

@@ -16,6 +16,7 @@ license = "MIT"
 "--rule" = "#cdd8e1"
 "--accent" = "#1f6f9f"
 "--accent-2" = "#7a5c9e"
+"--accent-3" = "#c08a1e"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -27,4 +28,5 @@ license = "MIT"
 "--rule" = "#22343f"
 "--accent" = "#7cc4ea"
 "--accent-2" = "#c3a8e6"
+"--accent-3" = "#e8c170"
 "--on-accent" = "#0e1a24"

package/assets/extensions/palettes/paper/extension.toml

@@ -16,6 +16,7 @@ license = "MIT"
 "--rule" = "#e0ddd6"
 "--accent" = "#c2410c"
 "--accent-2" = "#1f2937"
+"--accent-3" = "#c99700"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -27,4 +28,5 @@ license = "MIT"
 "--rule" = "#2e2e2c"
 "--accent" = "#fb8c4a"
 "--accent-2" = "#e7e5e0"
+"--accent-3" = "#f2c94c"
 "--on-accent" = "#151515"

package/assets/extensions/palettes/swiss/extension.toml

@@ -16,6 +16,7 @@ license = "MIT"
 "--rule" = "#dadada"
 "--accent" = "#e30613"
 "--accent-2" = "#0047bb"
+"--accent-3" = "#f2b700"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -27,4 +28,5 @@ license = "MIT"
 "--rule" = "#2e2e2e"
 "--accent" = "#ff3b30"
 "--accent-2" = "#6f9bff"
+"--accent-3" = "#ffd60a"
 "--on-accent" = "#0d0d0d"

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

@@ -476,11 +476,9 @@ strong { color: var(--ink); font-weight: 700; }
 .slide-body .callout p { color: var(--ink); }
 .slide-body .callout :is(ul, ol) { gap: 8px; }
 
-.slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary, .callout-proposition, .callout-tip, .callout-important) { --block: var(--accent); }
+.slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary, .callout-proposition, .callout-note, .callout-tip, .callout-important) { --block: var(--accent); }
 .slide-body :is(.callout-definition) { --block: var(--accent-2); }
-.slide-body .callout-note { --block: var(--callout-note); }
-.slide-body .callout-warning { --block: var(--callout-warning); }
-.slide-body .callout-caution { --block: var(--callout-caution); }
+.slide-body :is(.callout-warning, .callout-caution) { --block: var(--accent-3); }
 .slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary, .callout-proposition) > :not(.callout-title) {
   font-family: var(--font-serif);
   font-style: italic;

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

@@ -640,13 +640,9 @@ deck-stage[data-deck-static] .slide { animation: none; }
   box-shadow: 0 0 10px currentColor;
 }
 .slide-body .callout p { padding-left: 0; margin: 0; color: var(--ink); }
-.slide-body .callout-note { --tint: var(--callout-note); }
-.slide-body .callout-tip { --tint: var(--callout-tip); }
-.slide-body .callout-important { --tint: var(--callout-important); }
-.slide-body .callout-warning { --tint: var(--callout-warning); }
-.slide-body .callout-caution { --tint: var(--callout-caution); }
+.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); }
-.slide-body .callout-tip .callout-title { color: color-mix(in oklab, var(--callout-tip) 60%, var(--ink)); }
 .slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary) .callout-title { color: var(--em); }
 .slide-body .callout-definition .callout-title { color: light-dark(color-mix(in oklab, var(--accent-2) 80%, var(--ink)), var(--accent-2)); }
 

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

@@ -297,11 +297,8 @@ strong { color: var(--ink); font-weight: 600; }
   margin: 32px 0 0;
   max-width: 1200px;
 }
-.slide-body .callout-tip { border-left-color: var(--accent); }
-.slide-body .callout-note { border-left-color: var(--callout-note); }
-.slide-body .callout-important { border-left-color: var(--callout-important); }
-.slide-body .callout-warning { border-left-color: var(--callout-warning); }
-.slide-body .callout-caution { border-left-color: var(--callout-caution); }
+.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 .callout-title { margin-bottom: 8px; }
 .slide-body .callout p { padding-left: 0; color: var(--ink); font-size: var(--fs-body); }
 /* Lecture blocks: theorems in the accent, definitions in the second */

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

@@ -434,12 +434,9 @@ strong { color: var(--ink); font-weight: 600; }
   margin: 40px 0 0;
   max-width: 1200px;
 }
-.slide-body .callout-tip { border-top-color: var(--accent); }
+.slide-body :is(.callout-note, .callout-tip, .callout-important) { border-top-color: var(--accent); }
 .slide-body .callout-tip .callout-title { color: var(--accent); }
-.slide-body .callout-note { border-top-color: var(--callout-note); }
-.slide-body .callout-important { border-top-color: var(--callout-important); }
-.slide-body .callout-warning { border-top-color: var(--callout-warning); }
-.slide-body .callout-caution { border-top-color: var(--callout-caution); }
+.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); }
 /* Lecture blocks: theorems under a rule in the accent, definitions in the second */

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

@@ -418,8 +418,7 @@ strong { font-weight: 600; color: var(--ink); }
 }
 .slide-body .callout p { padding-left: 0; margin: 0; color: var(--ink-soft); }
 .slide-body .callout :is(.callout-title) { color: var(--ink); }
-.slide-body .callout:is(.callout-warning, .callout-caution) { border-left-color: var(--callout-warning); }
-.slide-body .callout.callout-caution { border-left-color: var(--callout-caution); }
+.slide-body .callout:is(.callout-warning, .callout-caution) { border-left-color: var(--accent-3); }
 .slide-body .callout.callout-proof { background: none; border: 0; padding: 0; }
 
 /* ─────────────────────────────────────────────

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

@@ -448,11 +448,8 @@ strong { font-weight: 600; color: var(--ink); }
   margin: 0 0 8px 0;
 }
 .slide-body .callout p { padding-left: 0; margin: 0; color: var(--ink); }
-.slide-body .callout-note { --bar: var(--callout-note); }
-.slide-body .callout-tip { --bar: var(--callout-tip); }
-.slide-body .callout-important { --bar: var(--callout-important); }
-.slide-body .callout-warning { --bar: var(--callout-warning); }
-.slide-body .callout-caution { --bar: var(--callout-caution); }
+.slide-body :is(.callout-note, .callout-tip, .callout-important) { --bar: var(--accent); }
+.slide-body :is(.callout-warning, .callout-caution) { --bar: var(--accent-3); }
 .slide-body .callout-definition { --bar: var(--accent-2); }
 
 /* ─────────────────────────────────────────────

package/docs/reference/authoring.md

@@ -686,7 +686,7 @@ A local SVG whose source contains `var(--…)` is drawn inline instead of as an
 layout's `image` (`title`, `chapter`, `image-text`, `full-bleed-image`, and
 local layouts that render it with `Picture` from `mdeck/layout`). It can use the
 palette's custom properties (`--bg`, `--surface`, `--ink`, `--ink-soft`,
-`--muted`, `--rule`, `--accent`, `--accent-2`, `--on-accent`) and follows the
+`--muted`, `--rule`, `--accent`, `--accent-2`, `--accent-3`, `--on-accent`) and follows the
 theme, palette and appearance. Give each a fallback (`var(--accent, #1f3fd1)`)
 for places that show the file on its own, set `fit: contain` to keep the whole
 drawing, prefix class names in its `<style>` because inline styles apply to the

package/docs/reference/extensions.md

@@ -83,6 +83,7 @@ description = "Deep blue with a warm highlight."
 "--rule" = "#c9d7e2"
 "--accent" = "#0a6aa8"
 "--accent-2" = "#b45309"
+"--accent-3" = "#c99700"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -94,6 +95,7 @@ description = "Deep blue with a warm highlight."
 "--rule" = "#24384b"
 "--accent" = "#ffbd69"
 "--accent-2" = "#7cc4ff"
+"--accent-3" = "#f2c94c"
 "--on-accent" = "#102030"
 ```
 

package/docs/reference/palettes.md

@@ -23,7 +23,7 @@ The presenter view and the reader view switch palette and light or dark without
 | `swiss` | white, black and signal red | black, white and red |
 | `nordic` | ice grey, deep navy and a cool steel blue | polar night with ice blue |
 | `cobalt` | strong ultramarine on white, vivid orange | midnight blue, bright blue and orange |
-| `greyscale` | black, white and greys only, code and callouts too | the same, inverted |
+| `greyscale` | black, white and greys only, code too | the same, inverted |
 | `lagoon` | teal on warm stone, orange second accent | deep teal-black, bright teal |
 | `paper` | off-white paper and near-black ink with one orange accent | charcoal with a softer orange |
 
@@ -35,7 +35,7 @@ More palettes are in the [theme repository](https://github.com/tilman-schieber/m
 
 ## Colours
 
-Every variant sets all nine:
+Every variant sets all ten (a palette without `--accent-3` gets an amber, and `mdeck check` suggests setting one):
 
 | Colour | Role |
 |---|---|
@@ -45,8 +45,9 @@ Every variant sets all nine:
 | `--ink-soft` | Body text |
 | `--muted` | Small labels: headers, footers, captions |
 | `--rule` | Lines and dividers |
-| `--accent` | The highlight: emphasis, markers, chapter slides |
-| `--accent-2` | A second highlight for themes that pair two |
+| `--accent` | Emphasis: highlighted words, markers, chapter slides; notes, tips and important callouts |
+| `--accent-2` | The accent's companion: gradients, a contrast to the accent, definitions |
+| `--accent-3` | Attention: warnings and cautions, and a colour that pops, used sparingly. It marks things (bars, shapes) and need not be readable as text, so it may be a yellow |
 | `--on-accent` | Text set on the accent, such as a chapter slide's title |
 
 Themes may mix them (for example a light tint of the accent), and read the other variant as `--inverse-bg`, `--inverse-ink`, `--inverse-accent` and so on.
@@ -71,6 +72,7 @@ description = "Sea blue and rust on chalk white."
 "--rule" = "#c9d7e2"
 "--accent" = "#0a6aa8"
 "--accent-2" = "#b45309"
+"--accent-3" = "#c99700"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -82,6 +84,7 @@ description = "Sea blue and rust on chalk white."
 "--rule" = "#24384b"
 "--accent" = "#5fb3f0"
 "--accent-2" = "#f59e5b"
+"--accent-3" = "#f2c94c"
 "--on-accent" = "#0d1a24"
 ```
 

package/docs/site/content/drawing.md

@@ -48,7 +48,11 @@ There are two ways.
 
 1. Start `mdeck run my-talk.md --network`, so the iPad in the same network can reach your laptop.
 2. On the launch page, under **Present from an iPad**, choose **Show pairing code** and scan it with the iPad's camera. The presenter view opens on the iPad, paired with your laptop, so it may save drawings and steer the phones of a poll. It is the same presenter view as on the laptop; pairing only gives it these rights. Once it is open, the launch page says so.
-3. On the laptop, open the **audience window** from the same place and move it to the projector. It follows the iPad: slides, revealed points, and drawings as you draw them. Navigation in the audience window also updates the iPad's slide, notes and next-slide preview.
+3. On the laptop, open the **audience window** from the same place and move it to the projector. It follows the iPad: slides, revealed points, drawings as you draw them, and videos. Navigation in the audience window also updates the iPad's slide, notes and next-slide preview.
+
+**Videos.** A video file on a slide (`<videoplayer src="…" />`) plays, pauses and jumps on the projector as you tap it on the iPad. The sound comes from the projector: while the audience window is open, the iPad's copy plays silently. Browsers start sound only on a page someone has clicked, so click the audience window once before the talk (going full screen counts); otherwise the video plays there without sound and shows **Click for sound**.
+
+Online videos (`<videoplayer url="…" />` from YouTube, Vimeo or SwitchTube) do not follow the iPad. They run inside the video service's own player, which mdeck cannot start or stop, so they play only on the screen where you start them. For a talk from the iPad, start them in the audience window on the laptop, or download the video and use a video file.
 
 A pairing code works once, for ten minutes. **Unpair** on the launch page ends every pairing; so does stopping `mdeck run`. Scan a new code afterwards.
 

package/docs/site/content/media.md

@@ -86,6 +86,8 @@ To start a video when its slide appears, add `play="auto"`:
 
 Automatic playback is muted. Leaving the slide stops the local video; automatic videos also return to the beginning.
 
+Presenting from an iPad paired with your laptop? Play, pause or jump in the video on the iPad, and the audience window on the projector does the same, with the sound; see [Present from an iPad](drawing.html#present-from-an-ipad).
+
 ## Show an online video
 
 Use `url` instead of `src` for a YouTube, Vimeo, or SwitchTube address:
@@ -94,7 +96,7 @@ Use `url` instead of `src` for a YouTube, Vimeo, or SwitchTube address:
 <videoplayer url="https://www.youtube.com/watch?v=YOUR_VIDEO_ID" />
 ```
 
-Replace the example address with your video's address. Online videos need an internet connection and permission from the video service to appear in another page. Test them before your talk.
+Replace the example address with your video's address. Online videos need an internet connection and permission from the video service to appear in another page. Test them before your talk. They play only where you start them: a paired iPad cannot start one on the projector, as it can a video file.
 
 ## If a picture does not appear
 

package/docs/site/content/presenting.md

@@ -40,6 +40,8 @@ Use its audience-window button to open a separate view of the slides. If you hav
 
 The two windows follow the same slide and reveal position: navigate in either window and the other follows. This works between windows in the same browser and between your laptop and a paired iPad. To connect the iPad, see [Draw on your slides](drawing.html#present-from-an-ipad).
 
+A video file you play, pause or move in the presenter view does the same in the audience window, which plays the sound; the presenter view's copy stays silent while the audience window is open. Click the audience window once before the talk, so the browser lets it play sound.
+
 Small icons next to **Speaker View** show what is connected to the deck: presenter views, audience windows and, for decks with polls, how many phones. Point at them to see on which devices, such as "Presenter view on an iPad". The launch page shows the same under **Present**, and marks each view that is open.
 
 For a single screen, switch the presenter view to its slide-only layout. **F** or the fullscreen button fills the screen in either the presenter view or the audience window; fullscreen does not select another view.

package/docs/site/content/theme-authoring.md

@@ -48,6 +48,7 @@ title = "Blue notebook"
 "--rule" = "#dbe3ee"
 "--accent" = "#2455c7"
 "--accent-2" = "#17625c"
+"--accent-3" = "#c99700"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -59,6 +60,7 @@ title = "Blue notebook"
 "--rule" = "#24354d"
 "--accent" = "#7aa2ff"
 "--accent-2" = "#5ec4b6"
+"--accent-3" = "#f2c94c"
 "--on-accent" = "#0f1a2b"
 ```
 
@@ -76,11 +78,12 @@ The folder must be called `notebook` to match `id`. Use it with `palette: notebo
 | `--ink-soft` | Body text |
 | `--muted` | Secondary labels |
 | `--rule` | Borders |
-| `--accent` | Main highlight |
-| `--accent-2` | Secondary highlight |
+| `--accent` | Emphasis; notes, tips and important callouts |
+| `--accent-2` | The accent's companion: gradients, a contrast to the accent |
+| `--accent-3` | Attention: warnings and cautions. Use it sparingly, for bars and shapes, never as text: it may be a yellow |
 | `--on-accent` | Text placed on an accent background |
 
-A theme has no colours of its own: it uses these, and mixes of them, so every palette repaints it. For an inverted slide it uses the palette's other version, as `--inverse-bg`, `--inverse-ink`, `--inverse-accent` and so on:
+A theme has no colours of its own: it uses these, and mixes of them, so every palette repaints it. Give each accent the job its name says: a theme that colours callouts colours note, tip and important with `--accent` and warning and caution with `--accent-3`. For an inverted slide it uses the palette's other version, as `--inverse-bg`, `--inverse-ink`, `--inverse-accent` and so on:
 
 ```css
 .slide--focus {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdeck",
-  "version": "3.6.2",
+  "version": "3.7.1",
   "type": "module",
   "description": "Write slides as a plain text file, present them in the browser, share them as one HTML file or PDF.",
   "license": "MIT",

package/skills/write-slides/SKILL.md

@@ -142,7 +142,7 @@ To see slides yourself, if you can read pictures, run `mdeck snapshot <deck>.md
 
 When the user wants a look the built-in themes and palettes do not give (their institute's colours, a font, the style of a poster or picture), first run `mdeck themes search` or `mdeck palettes search` (with a word or two): someone may have shared it, and `mdeck themes install <theme> <deck>.md` (with its palette) or `mdeck palettes install <palette> <deck>.md` puts it beside the deck, so the slide folder carries it. Otherwise make it as an extension in `extensions/` beside the deck, never as styling on single slides. Read `extensions.md` from the reference folder first; it lists every setting.
 
-- **Colours only: a palette.** `extensions/<id>/extension.toml` with `kind = "palette"`, and every colour role (`--bg`, `--surface`, `--ink`, `--ink-soft`, `--muted`, `--rule`, `--accent`, `--accent-2`, `--on-accent`) in both `[light]` and `[dark]`. Text colours must stay readable on `--bg` and `--surface` in both variants, because themes use the other variant for inverted slides.
+- **Colours only: a palette.** `extensions/<id>/extension.toml` with `kind = "palette"`, and every colour role (`--bg`, `--surface`, `--ink`, `--ink-soft`, `--muted`, `--rule`, `--accent`, `--accent-2`, `--accent-3`, `--on-accent`) in both `[light]` and `[dark]`: `--accent` is emphasis, `--accent-2` its companion, `--accent-3` attention (warnings; it may be too light for text, such as a yellow). Set all of them. Text colours must stay readable on `--bg` and `--surface` in both variants, because themes use the other variant for inverted slides.
 - **Fonts, sizes, spacing or arrangement: a theme.** Copy the folder of the closest built-in theme (`assets/extensions/themes/<id>/` in the mdeck repository or in `$(npm root -g)/mdeck/`) to `extensions/<new-id>/`, change `id` and `title`, then its tokens and `styles.css`. A theme takes no colours of its own: it names its default `palette`, and the colours come from palettes.
 - **Use it:** set `theme:` and `palette:` in the deck settings. `mdeck list <deck>.md` must show it as local, and `mdeck check <deck>.md` reports any mistake in its `extension.toml`.
 - **Hand over:** tell the user to run `mdeck design <deck>.md` (or `mdeck design <folder>` when there is no deck yet). It shows the look on a sample deck with every kind of slide, light and dark, and lets them fine-tune colours, fonts and sizes there.

package/src/build/check.js

@@ -26,6 +26,7 @@ export function checkDeck(slidesPath, registry, source = readFileSync(slidesPath
   for (const record of Object.values(registry.palettes)) {
     if (record.source !== 'local') continue
     for (const problem of paletteProblems(record.manifest)) diagnostics.push({ severity: 'warning', code: 'palette-contrast', message: `Palette "${record.id}", ${problem}`, line: 1, column: 1 })
+    for (const role of record.manifest.fallbacks ?? []) diagnostics.push({ severity: 'warning', code: 'palette-fallback', message: `Palette "${record.id}" sets no ${role}, so it gets mdeck's amber; give it a colour of its own in [light] and [dark]`, line: 1, column: 1 })
   }
   // The deck's drawings file: readable, and only for slides that still exist.
   const inkPath = inkFileFor(resolve(slidesPath))

package/src/cli/themes.js

@@ -27,7 +27,7 @@ function looksOf(registry, catalogue) {
   const palettes = manifestsOf(registry, 'palette')
   // Each theme's icon for the gallery's list (see renderPreviews).
   const icons = new Map(catalogue.themes.map(entry => [entry.id, entry.icon]))
-  const colours = tokens => Object.fromEntries(['--bg', '--surface', '--ink', '--accent', '--accent-2'].map(key => [key, tokens?.[key] ?? null]))
+  const colours = tokens => Object.fromEntries(['--bg', '--surface', '--ink', '--accent', '--accent-2', '--accent-3'].map(key => [key, tokens?.[key] ?? null]))
   return {
     mdeck: VERSION,
     themes: Object.values(manifestsOf(registry, 'theme')).map(theme => ({ id: theme.id, title: theme.title, description: theme.description ?? '', builtIn: builtIn.has(theme.id + ':t'),

package/src/components/VideoPlayer.jsx

@@ -1,5 +1,6 @@
 import { h } from 'preact'
 import { useEffect, useRef, useState } from 'preact/hooks'
+import { t } from '../core/labels.js'
 import './video-player.css'
 
 function getEmbedUrl(rawUrl, autoplay = false) {
@@ -58,6 +59,66 @@ export default function VideoPlayer({ src, url, play = 'click', aspect, muted })
     return () => stage.removeEventListener('slidechange', onSlideChange)
   }, [play, src])
 
+  // Local video between the screens of a talk: play, pause or a jump on one
+  // (an iPad presenting) does the same on the others (the projector),
+  // through the stage event `mediacontrol`, which the ink bus carries
+  // (src/runtime/ink/bus.js). A video is known by its slide and its place on
+  // it. Only the slide on screen follows, and a phone following the talk
+  // does not. The presenter view's own copy goes silent while another
+  // screen shows the deck, so the sound comes from there. A screen that may
+  // not start sound yet (nobody clicked it) plays silently and offers sound.
+  const [offerSound, setOfferSound] = useState(false)
+  useEffect(() => {
+    const video = videoRef.current
+    const stage = containerRef.current?.closest('deck-stage')
+    if (!src || !video || !stage || new URLSearchParams(location.search).get('view') === 'follow') return
+    const slide = () => containerRef.current?.closest('deck-stage > *')
+    const key = () => {
+      const own = slide()
+      if (!own) return null
+      return `${[...stage.children].indexOf(own)}:${[...own.querySelectorAll('.video-player-container')].indexOf(containerRef.current)}`
+    }
+    // Changes made to follow another screen are not sent back.
+    let following = 0
+    const tell = action => {
+      if (Date.now() < following || !slide()?.hasAttribute('data-deck-active')) return
+      if (action === 'play' && stage.hasAttribute('data-others-watching')) video.muted = true
+      stage.dispatchEvent(new CustomEvent('mediacontrol', { detail: { video: key(), action, time: video.currentTime, local: true } }))
+    }
+    const onPlay = () => tell('play')
+    const onPause = () => tell('pause')
+    const onSeeked = () => tell(video.paused ? 'pause' : 'play')
+    const follow = ({ detail }) => {
+      if (!detail || detail.local || detail.video !== key() || !slide()?.hasAttribute('data-deck-active')) return
+      following = Date.now() + 600
+      if (Number.isFinite(detail.time) && Math.abs(video.currentTime - detail.time) > 0.4) video.currentTime = detail.time
+      if (detail.action === 'pause') { video.pause(); return }
+      // Only a refusal to start sound is retried silently; a pause that came
+      // in while it was starting cancels it (AbortError) and stays.
+      video.play().catch(error => {
+        if (error?.name !== 'NotAllowedError') return
+        following = Date.now() + 600
+        video.muted = true
+        setOfferSound(true)
+        return video.play()
+      }).catch(() => {})
+    }
+    video.addEventListener('play', onPlay)
+    video.addEventListener('pause', onPause)
+    video.addEventListener('seeked', onSeeked)
+    stage.addEventListener('mediacontrol', follow)
+    return () => {
+      video.removeEventListener('play', onPlay)
+      video.removeEventListener('pause', onPause)
+      video.removeEventListener('seeked', onSeeked)
+      stage.removeEventListener('mediacontrol', follow)
+    }
+  }, [src])
+  const turnSoundOn = () => {
+    if (videoRef.current) videoRef.current.muted = false
+    setOfferSound(false)
+  }
+
   // Web video auto mode: clear/restore src on slide change to stop/start playback
   useEffect(() => {
     if (play !== 'auto' || !url) return
@@ -112,12 +173,15 @@ export default function VideoPlayer({ src, url, play = 'click', aspect, muted })
               style={{ width: '100%', height: fixedAspect ? '100%' : 'auto', aspectRatio: fixedAspect ? undefined : '16 / 9', border: '0', display: 'block' }} />
           : <div class="video-player-placeholder" />
       ) : (
-        <video
-          ref={videoRef}
-          src={src}
-          controls
-          style={{ width: '100%', height: fixedAspect ? '100%' : 'auto', display: 'block' }}
-        />
+        <>
+          <video
+            ref={videoRef}
+            src={src}
+            controls
+            style={{ width: '100%', height: fixedAspect ? '100%' : 'auto', display: 'block' }}
+          />
+          {offerSound && <button type="button" class="video-player-sound" onClick={turnSoundOn}>{t('video.sound')}</button>}
+        </>
       )}
     </div>
   )

package/src/components/callout.css

@@ -1,11 +1,6 @@
-:root {
-  --callout-note:      #0969da;
-  --callout-tip:       #1a7f37;
-  --callout-important: #8250df;
-  --callout-warning:   #eab308;
-  --callout-caution:   #cf222e;
-}
-
+/* Callouts take the palette's accents by what they mean: a note, a tip and
+   something important are emphasis, in the accent; a warning and a caution
+   call for attention, in the third accent. */
 .callout {
   border-left: 4px solid var(--rule);
   padding: 20px 28px;
@@ -21,20 +16,15 @@
 }
 .callout p { margin: 0; color: var(--ink-soft); padding-left: 28px; }
 
-.callout-note      { border-left-color: var(--callout-note); }
-.callout-tip       { border-left-color: var(--callout-tip); }
-.callout-important { border-left-color: var(--callout-important); }
-.callout-warning   { border-left-color: var(--callout-warning); }
-.callout-caution   { border-left-color: var(--callout-caution); }
+.callout:is(.callout-note, .callout-tip, .callout-important) { border-left-color: var(--accent); }
+.callout:is(.callout-warning, .callout-caution)              { border-left-color: var(--accent-3); }
 
-/* Titles are text: the signal colour mixed with the text colour, darker on
-   light slides and lighter on dark ones, so they can be read on both. The
-   yellow of a warning needs more of the text colour. */
-.callout-note      .callout-title { color: color-mix(in oklab, var(--callout-note) 65%, var(--ink)); }
-.callout-tip       .callout-title { color: color-mix(in oklab, var(--callout-tip) 65%, var(--ink)); }
-.callout-important .callout-title { color: color-mix(in oklab, var(--callout-important) 65%, var(--ink)); }
-.callout-warning   .callout-title { color: color-mix(in oklab, var(--callout-warning) 45%, var(--ink)); }
-.callout-caution   .callout-title { color: color-mix(in oklab, var(--callout-caution) 65%, var(--ink)); }
+/* Titles are text: the accent mixed with the text colour, darker on light
+   slides and lighter on dark ones, so they can be read on both. The third
+   accent is a marker colour that need not be readable as text (a yellow, say),
+   so it gets more of the text colour. */
+.callout:is(.callout-note, .callout-tip, .callout-important) .callout-title { color: color-mix(in oklab, var(--accent) 65%, var(--ink)); }
+.callout:is(.callout-warning, .callout-caution) .callout-title              { color: color-mix(in oklab, var(--accent-3) 45%, var(--ink)); }
 
 /* Blocks for lectures, in every theme. Theorems, lemmas and corollaries in
    the accent with the statement in italics, definitions in the second

package/src/components/video-player.css

@@ -12,3 +12,18 @@
   height: 100%;
   background: #111;
 }
+
+/* A screen that followed another into playing, silently because nobody has
+   clicked it yet: one click turns the sound on. */
+.video-player-sound {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  padding: 8px 14px;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, .72);
+  color: #fff;
+  font: 600 15px/1.2 system-ui, sans-serif;
+  cursor: pointer;
+}

package/src/core/labels.js

@@ -33,6 +33,7 @@ export const LABELS = {
     'deck.reset': 'Reset',
     'deck.resetHint': 'Reset to first slide',
     'poll.scan': 'Scan to vote',
+    'video.sound': 'Click for sound',
     'poll.answer': '1 answer',
     'poll.answers': '{n} answers',
     'poll.reset': 'Reset',
@@ -105,6 +106,7 @@ export const LABELS = {
     'deck.reset': 'Neustart',
     'deck.resetHint': 'Zurück zur ersten Folie',
     'poll.scan': 'Scannen und abstimmen',
+    'video.sound': 'Klicken für Ton',
     'poll.answer': '1 Antwort',
     'poll.answers': '{n} Antworten',
     'poll.reset': 'Zurücksetzen',

package/src/editor/components/PalettePicker.jsx

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'preact/hooks'
 import { Icon } from '../../components/Icon.jsx'
 
 export function Swatches({ tokens = {} }) {
-  return <span class="swatches">{['--bg', '--surface', '--rule', '--accent', '--accent-2', '--ink'].map(key => tokens[key] ? <i key={key} style={{ background: tokens[key] }} /> : null)}</span>
+  return <span class="swatches">{['--bg', '--surface', '--rule', '--accent', '--accent-2', '--accent-3', '--ink'].map(key => tokens[key] ? <i key={key} style={{ background: tokens[key] }} /> : null)}</span>
 }
 
 // The palettes a theme offers, each with its colours in the light or dark

package/src/editor/extensions.js

@@ -7,8 +7,8 @@ export const ID_RE = /^[a-z][a-z0-9-]*$/
 export { COLOR_ROLES as CORE_TOKENS } from '../extensions/tokens.js'
 // Readable colours a new palette starts from.
 const STARTER_COLORS = {
-  light: { '--bg': '#ffffff', '--surface': '#f2f2f2', '--ink': '#111111', '--ink-soft': '#333333', '--muted': '#666666', '--rule': '#dadada', '--accent': '#0b6bcb', '--accent-2': '#c2410c', '--on-accent': '#ffffff' },
-  dark: { '--bg': '#111111', '--surface': '#1e1e1e', '--ink': '#f2f2f2', '--ink-soft': '#cfcfcf', '--muted': '#8f8f8f', '--rule': '#2e2e2e', '--accent': '#6aaeff', '--accent-2': '#fb923c', '--on-accent': '#111111' },
+  light: { '--bg': '#ffffff', '--surface': '#f2f2f2', '--ink': '#111111', '--ink-soft': '#333333', '--muted': '#666666', '--rule': '#dadada', '--accent': '#0b6bcb', '--accent-2': '#c2410c', '--accent-3': '#e0a100', '--on-accent': '#ffffff' },
+  dark: { '--bg': '#111111', '--surface': '#1e1e1e', '--ink': '#f2f2f2', '--ink-soft': '#cfcfcf', '--muted': '#8f8f8f', '--rule': '#2e2e2e', '--accent': '#6aaeff', '--accent-2': '#fb923c', '--accent-3': '#f5c542', '--on-accent': '#111111' },
 }
 
 const entries = table => Object.entries(table ?? {}).map(([name, value]) => ({ name, ...(value && typeof value === 'object' && !Array.isArray(value) ? value : { value }) }))

package/src/extensions/contrast.js

@@ -35,6 +35,8 @@ const RULES = [
   ['--muted', '--bg', 4.5, 'muted text'],
   ['--accent', '--bg', 3, 'the accent'],
   ['--accent-2', '--bg', 3, 'the second accent'],
+  // A marker (bars, shapes), not text: it has to be seen, not read.
+  ['--accent-3', '--bg', 1.5, 'the third accent'],
   ['--on-accent', '--accent', 3, 'text on the accent'],
 ]
 
@@ -48,7 +50,7 @@ export function paletteProblems(palette) {
   for (const appearance of ['light', 'dark']) {
     const tokens = palette[appearance] ?? {}
     for (const [fore, back, minimum, what] of RULES) {
-      if (palette.theme && (fore === '--accent' || fore === '--accent-2')) continue
+      if (palette.theme && (fore === '--accent' || fore === '--accent-2' || fore === '--accent-3')) continue
       const ratio = contrast(tokens[fore], tokens[back])
       if (ratio != null && ratio < minimum) problems.push(`${appearance}: ${what} (${fore} on ${back}) has a contrast of ${ratio.toFixed(1)}:1; at least ${minimum}:1 is needed`)
     }

package/src/extensions/manifest.js

@@ -4,7 +4,7 @@
 import { existsSync } from 'node:fs'
 import { resolve, relative, isAbsolute, sep } from 'node:path'
 import { parse as parseToml, TomlError } from 'smol-toml'
-import { TOKEN_NAME_RE, COLOR_ROLES, APPEARANCES } from './tokens.js'
+import { TOKEN_NAME_RE, COLOR_ROLES, COLOR_FALLBACKS, APPEARANCES } from './tokens.js'
 import { propertyErrors } from '../layouts/layoutProps.js'
 
 export const SCHEMA_VERSION = 1
@@ -247,12 +247,16 @@ function validateGuide(table, fail) {
 function validatePalette(raw, shared, fail) {
   if (raw.theme != null && (typeof raw.theme !== 'string' || !ID_RE.test(raw.theme))) fail('theme must be the id of the only theme that may use this palette', 'theme')
   const variants = {}
+  const fallbacks = new Set()
   for (const appearance of APPEARANCES) {
     if (!isPlainObject(raw[appearance])) fail(`a [${appearance}] table with the ${appearance} colours is required`, appearance)
     const tokens = validateTokens(raw[appearance], appearance, fail, { required: true })
-    const missing = COLOR_ROLES.filter(role => !Object.hasOwn(tokens, role))
+    const missing = COLOR_ROLES.filter(role => !Object.hasOwn(tokens, role) && !COLOR_FALLBACKS[role])
     if (missing.length) fail(`missing colours: ${missing.join(', ')}`, appearance)
+    for (const [role, values] of Object.entries(COLOR_FALLBACKS)) {
+      if (!Object.hasOwn(tokens, role)) { tokens[role] = values[appearance]; fallbacks.add(role) }
+    }
     variants[appearance] = tokens
   }
-  return { ...shared, ...(raw.theme ? { theme: raw.theme } : {}), light: variants.light, dark: variants.dark }
+  return { ...shared, ...(raw.theme ? { theme: raw.theme } : {}), light: variants.light, dark: variants.dark, ...(fallbacks.size ? { fallbacks: [...fallbacks] } : {}) }
 }

package/src/extensions/packages.js

@@ -74,6 +74,9 @@ export function checkPackage({ kind, id, files }, { published = false } = {}) {
   }
   if (record.kind !== kind) fail(`${id}/extension.toml says kind = "${record.kind}", but it is in the ${kind}s`)
   if (published) for (const key of ['version', 'author', 'license']) if (!record.package?.[key]) fail(`The ${kind} ${id}: ${key} is required in the theme repository`)
+  // Palettes made before a colour existed get mdeck's fallback; a new one in
+  // the repository sets every colour itself.
+  if (published && record.manifest.fallbacks?.length) fail(`The palette ${id}: ${record.manifest.fallbacks.join(', ')} is required in the theme repository`)
   if (kind === 'theme') {
     for (const url of record.manifest.fonts) if (!FONT_HOSTS.some(host => url.startsWith(host))) fail(`The theme ${id} loads fonts from ${url}; allowed are ${FONT_HOSTS.join(', ')}`)
     checkCss(files['styles.css'] ?? '', `The theme ${id}: styles.css`)

package/src/extensions/tokens.js

@@ -9,8 +9,16 @@ export function tokensToCss(tokens = {}, selector = ':root') {
 }
 
 // The colours every palette variant defines. Themes use only these (and
-// mixes of them), so any palette fits any theme.
-export const COLOR_ROLES = ['--bg', '--surface', '--ink', '--ink-soft', '--muted', '--rule', '--accent', '--accent-2', '--on-accent']
+// mixes of them), so any palette fits any theme. The three accents mean
+// something: --accent is emphasis (and notes, tips, important callouts),
+// --accent-2 its companion (gradients, a contrast to the accent), --accent-3
+// attention (warnings and cautions), used sparingly; it marks things and
+// need not be readable as text.
+export const COLOR_ROLES = ['--bg', '--surface', '--ink', '--ink-soft', '--muted', '--rule', '--accent', '--accent-2', '--accent-3', '--on-accent']
+// Colours a palette may leave out, and what it gets instead: palettes made
+// before the third accent get an amber that calls for attention in light and
+// dark alike (`mdeck check` suggests setting one's own).
+export const COLOR_FALLBACKS = { '--accent-3': { light: '#d99a00', dark: '#f5c542' } }
 export const APPEARANCES = ['light', 'dark']
 
 /**

package/src/live/client.js

@@ -237,7 +237,7 @@ export function latestByDevice(messages) {
 // The deck's look as the answer page needs it: theme variables, font
 // stylesheets and the style of a slide heading, read from the page that shows
 // the slides (the presenter's current-slide frame, or the deck itself).
-const LOOK_TOKENS = ['--bg', '--ink', '--ink-soft', '--muted', '--rule', '--surface', '--accent', '--accent-2', '--on-accent', '--font-body', '--font-display']
+const LOOK_TOKENS = ['--bg', '--ink', '--ink-soft', '--muted', '--rule', '--surface', '--accent', '--accent-2', '--accent-3', '--on-accent', '--font-body', '--font-display']
 let lookSource = () => document
 export function setLookSource(source) { lookSource = source }
 export function captureLook(doc = lookSource()) {

package/src/runtime/chrome.jsx

@@ -43,7 +43,7 @@ export const S = {
 }
 
 export function PaletteSwatches({ tokens }) {
-  const keys = ['--bg', '--surface', '--rule', '--accent', '--accent-2', '--ink']
+  const keys = ['--bg', '--surface', '--rule', '--accent', '--accent-2', '--accent-3', '--ink']
   return (
     <div style={{ display: 'flex', gap: '2px', alignItems: 'center', flexShrink: 0 }}>
       {keys.map(k => tokens[k]

package/src/runtime/ink/bus.js

@@ -14,6 +14,8 @@
 //       window shows (stage zoom), at most every ~50 ms
 //   { type: 'controls', key, room, controls }  an activity closed or opened,
 //       its right answer or results shown or hidden (components/activity.jsx)
+//   { type: 'media', key, video, action, time }  a video in the deck played,
+//       paused or moved to `time` (components/VideoPlayer.jsx)
 //   { type: 'op', op }                  a change of the saved ink (applyOp)
 // Keys start with the sending window's id, so strokes never mix.
 import { changeInk, renameSlide } from './store.js'
@@ -52,6 +54,8 @@ export function createInkBus(stage, transports) {
       stage.liveStroke(message.key, known)
     } else if (message.type === 'controls') {
       stage.dispatchEvent(new CustomEvent('pollcontrols', { detail: { room: message.room, controls: message.controls } }))
+    } else if (message.type === 'media') {
+      stage.dispatchEvent(new CustomEvent('mediacontrol', { detail: { video: message.video, action: message.action, time: message.time } }))
     } else if (message.type === 'zoom') {
       if (message.slideId && message.slideId === stage._inkSlideId()) stage.setZoom(message.scale > 1 ? message : null, 'remote', { announce: false })
     } else if (message.type === 'dot') {
@@ -105,6 +109,11 @@ export function createInkBus(stage, transports) {
     if (detail?.local) send({ type: 'controls', key: `${me}:controls`, room: detail.room, controls: detail.controls })
   })
 
+  // A video played, paused or moved here: the others do the same.
+  stage.addEventListener('mediacontrol', ({ detail }) => {
+    if (detail?.local && detail.video) send({ type: 'media', key: `${me}:media`, video: detail.video, action: detail.action, time: detail.time })
+  })
+
   // The zoom: the latest view, not every step of a pinch.
   let zoom = null, zoomTimer = null
   const sendZoom = () => { zoomTimer = null; if (zoom) send({ type: 'zoom', key: `${me}:zoom`, ...zoom }) }

package/src/runtime/main.jsx

@@ -50,6 +50,10 @@ if (requestedView(controlUrl) === 'presenter' && !controlUrl.searchParams.has('s
   history.replaceState(null, '', controlUrl)
 }
 const DECK_CHANNEL = `deck-control:${controlUrl.pathname}:${controlUrl.searchParams.get('session') ?? 'default'}`
+// An audience window says it is there this often, and counts as gone when
+// it has not said so for this long (or says so as it closes).
+const SCREEN_SAY_MS = 3000
+const SCREEN_GONE_MS = 8000
 
 function withConfigOverrides(deckConfig) {
   const url = new URL(window.location.href)
@@ -788,11 +792,33 @@ async function init() {
     followStageRoom(inkStage)
     announceStagePosition(inkStage)
   }
+  // Whether another screen shows the deck, so that a video played in the
+  // presenter view is silent there and its sound comes from that screen
+  // (components/VideoPlayer.jsx). The server says who is connected; an
+  // audience window also says so to the windows of its own browser, for a
+  // deck opened without a server (a built folder).
+  const screens = typeof BroadcastChannel !== 'undefined' ? new BroadcastChannel(`mdeck-screens:${inkStorageKey}`) : null
+  let watchedOnServer = false, audienceHere = 0
+  const markWatched = () => inkStage?.toggleAttribute('data-others-watching', watchedOnServer || Date.now() - audienceHere < SCREEN_GONE_MS)
+  if (screens && audienceMode) {
+    const say = message => screens.postMessage(message)
+    say('audience')
+    setInterval(() => say('audience'), SCREEN_SAY_MS)
+    window.addEventListener('pagehide', () => say('gone'))
+  } else if (screens && embedded && drawHere) {
+    screens.onmessage = ({ data }) => { audienceHere = data === 'audience' ? Date.now() : 0; markWatched() }
+    setInterval(markWatched, SCREEN_SAY_MS)
+  }
+
   if (inkStage && drawHere) {
     attachInk(inkStage, {
       storageKey: inkStorageKey,
       // The presenter's main frame tells the presenter view who is connected.
-      transports: [roomTransport({ receive: true, view: embedded ? 'presenter' : 'deck', onPresence: embedded ? presence => window.parent.postMessage({ presence }, window.location.origin) : null })],
+      transports: [roomTransport({ receive: true, view: embedded ? 'presenter' : 'deck', onPresence: embedded ? presence => {
+        watchedOnServer = (presence?.views ?? []).some(entry => entry.view === 'audience' || entry.view === 'deck')
+        markWatched()
+        window.parent.postMessage({ presence }, window.location.origin)
+      } : null })],
       onMode: inking => { if (embedded) window.parent.postMessage({ inkMode: inking }, window.location.origin) },
     })
     // Drawing turns itself on, with the laser and the toolbar folded into