docs: link the launch film from kotiko.org and the README

README.md

@@ -19,6 +19,11 @@ whatever language you read them. Spanish, Japanese, Russian, Arabic: one at a ti
 of them mixed. Hover a swapped word to see what it means in your language and how it's
 said.
 
+<p align="center">
+  <a href="https://youtu.be/6hwIcTVvGK8"><img src="brand/demo/kotiko-film.webp" alt="Watch the one-minute Kotiko film on YouTube: a page where Kotiko swapped dog for perro, with the word's card open." width="800"></a>
+  <br><a href="https://youtu.be/6hwIcTVvGK8"><b>Watch the film (1 min, YouTube)</b></a>
+</p>
+
 <p align="center">
   <img src="brand/demo/kotiko-demo.gif" alt="An article about a morning walk, first as written; then the same page with a few words swapped for the reader's words: perro, agua, 猫, 本, дом, ありがとう; then the card for perro, with its pronunciation PEH-rro, Spanish, and its meaning, dog." width="800">
 </p>

brand/README.md

@@ -59,6 +59,7 @@ Every word in the store and social artwork was checked letter by letter on 2026-
 
 | File | Use |
 |---|---|
+| `kotiko-film.webp` | The film's thumbnail on kotiko.org and in the README, linking to the one-minute launch film on YouTube (https://youtu.be/6hwIcTVvGK8). A frame of the film (the word card open) with a play button. |
 | `kotiko-demo.gif` | The README demo: an article, then the same article with the reader's words swapped in, then a word's card. Made from the real extension by `node test/visual/readme-demo.mjs` (needs ImageMagick); run it again when the interface changes. |
 
 ## For the designer

site/scripts/import-docs.mjs

@@ -49,6 +49,7 @@ export const BRAND = [
   { from: "brand/illustrations/kitten-happy.png", to: "src/assets/brand/kitten-happy.png" },
   { from: "brand/illustrations/kitten-oops.png", to: "src/assets/brand/kitten-oops.png" },
   { from: "brand/demo/kotiko-demo.gif", to: "public/brand/kotiko-demo.gif" },
+  { from: "brand/demo/kotiko-film.webp", to: "public/brand/kotiko-film.webp" },
   { from: "brand/logo/icon-32.png", to: "public/brand/icon-32.png" },
   { from: "brand/logo/icon-128.png", to: "public/brand/icon-128.png" },
   { from: "brand/social/social-card-1200x630.jpg", to: "public/brand/social-card.jpg" },

site/src/content/docs/index.mdx

@@ -33,6 +33,18 @@ It works on pages in the languages you read, whichever they are. A reader in Mad
 "perro" become 犬 on Spanish pages; a reader in Toronto sees "dog" become 犬 on English pages.
 Kotiko never assumes you read English.
 
+<a class="kotiko-film" href="https://youtu.be/6hwIcTVvGK8" title="Watch the Kotiko film on YouTube (opens youtube.com)">
+  <img
+    src="/brand/kotiko-film.webp"
+    width="1280"
+    height="720"
+    alt="Watch the film, one minute, on YouTube: a page where Kotiko swapped dog for perro, with the word's card open showing Spanish and its meaning, dog."
+  />
+</a>
+
+The one-minute film opens on YouTube. This site loads nothing from YouTube until you choose
+to watch.
+
 <details open class="kotiko-demo-box">
   <summary>Demo: Kotiko on a page (select to hide)</summary>
   <img

site/src/styles/kotiko.css

@@ -60,6 +60,39 @@
   margin-inline: auto;
 }
 
+/* The film's thumbnail: a link to YouTube; the site itself loads nothing from there. */
+.kotiko-film {
+  display: block;
+  max-width: 800px;
+  margin-inline: auto;
+  border-radius: 12px;
+}
+.kotiko-film img {
+  display: block;
+  width: 100%;
+  height: auto;
+  box-shadow: 0 8px 28px rgb(22 16 42 / 0.14);
+  transition: transform 160ms ease, box-shadow 160ms ease;
+}
+.kotiko-film:hover img,
+.kotiko-film:focus-visible img {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 34px rgb(22 16 42 / 0.2);
+}
+.kotiko-film:focus-visible {
+  outline: 3px solid var(--sl-color-accent);
+  outline-offset: 4px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .kotiko-film img {
+    transition: none;
+  }
+  .kotiko-film:hover img,
+  .kotiko-film:focus-visible img {
+    transform: none;
+  }
+}
+
 /* Store buttons and "coming soon" lines on the install and home pages. */
 .store-list {
   display: grid;