@hypersocial/decks-cli 0.9.9 → 0.9.11

package/src/presenter.mjs

@@ -3,8 +3,10 @@
 // captions-only (data-presenter="none"); at release, when the owner has an
 // avatar, its player tag gets that face instead. Shared by both releases
 // (convex/deckSources.ts, release.mjs), `hyperdecks play` and the /p draft
-// preview, so all rewrite the tag the same way; only a release stores it. A tag that already names a presenter (D.A.S.H.
-// on a character-voice deck, or one set by hand) is left alone.
+// preview, so all rewrite the tag the same way; only a release stores it. A tag
+// that already names a presenter by hand is left alone. deck new, deck narrator
+// and narrate write the narrator's face into the file itself (writeNarratorFace),
+// marked, so a draft on disk shows its face and release still follows the narrator.
 
 // D.A.S.H.'s face: the head doc and still that ship with the player. A deck
 // narrated in its character voice gets this face at release, even when the
@@ -59,36 +61,98 @@ export function playsCaptionsOnly(html) {
   return !!found && !tagFace(found.tag);
 }
 
+// Who wrote the tag's face: data-presenter-from="narrator" is a face the CLI
+// (deck new, deck narrator, narrate) wrote from the deck's narrator,
+// so it follows the narrator at release and in play; "captions-only" is captions
+// only on purpose (deck new --captions-only, deck narrator none). No marker: the
+// tag is as its author wrote it, and a face there is hand-set. The player ignores it.
+export const PRESENTER_FROM = "data-presenter-from";
+const FACE_ATTRS = ["data-presenter", "data-avatar", "data-presenter-image", PRESENTER_FROM];
+const attrRe = (name) => new RegExp(`\\s${name}\\s*=\\s*(?:"[^"]*"|'[^']*'|[^\\s"'=<>\`]+)`);
+
+// The tag with its face attributes replaced by `face` (an ordered [name, value] list), in place of
+// the first one it had (else before the closing >), leaving every other attribute as written.
+function setFace(tag, face) {
+  const at = FACE_ATTRS.map((n) => attrRe(n).exec(tag)).filter(Boolean).sort((a, b) => a.index - b.index)[0];
+  let next = tag;
+  for (const n of FACE_ATTRS) next = next.replace(attrRe(n), at && attrRe(n).exec(tag)?.index === at.index ? "\u0000" : "");
+  const text = face.map(([n, v]) => ` ${n}="${attr(v)}"`).join("");
+  return next.includes("\u0000") ? next.replace("\u0000", text) : next.replace(/\s*\/?>$/, (end) => `${text}${end}`);
+}
+
+const replaceTag = (html, found, tag) => (tag === found.tag ? html : html.slice(0, found.index) + tag + html.slice(found.index + found.tag.length));
+
 // html with the player tag set to present `avatarUrl` (the /avatar/<token> doc
 // the player loads) and `imageUrl` (its still, for thumbnails and no-WebGL), or
 // html unchanged when there is no such tag, the tag already shows a face, or it
 // names a non-empty data-avatar of its own (set by hand: left alone even beside "none").
 // Anything else the player would play captions only (data-presenter none or
-// missing, head with no data-avatar, static with no still) gets the face.
+// missing, head with no data-avatar, static with no still) gets the face. A face
+// the CLI wrote from the narrator (data-presenter-from="narrator") is replaced by
+// this one, so a narrator changed since follows; captions only on purpose stays.
 export function withAvatar(html, { avatarUrl, imageUrl }) {
   const found = playerTag(html);
   if (!found) return html;
-  const { tag, index } = found;
+  const { tag } = found;
+  const from = value(tag, PRESENTER_FROM);
+  if (from === "captions-only") return html;
+  if (from === "narrator") return replaceTag(html, found, setFace(tag, narratorFace({ avatarUrl, imageUrl })));
   if (tagFace(tag) || value(tag, "data-avatar")) return html;
   const image = imageUrl && value(tag, "data-presenter-image") === null ? ` data-presenter-image="${attr(imageUrl)}"` : "";
   const face = ` data-presenter="head" data-avatar="${attr(avatarUrl)}"${image}`;
-  const named = /\sdata-presenter\s*=\s*(?:"[^"]*"|'[^']*'|[^\s"'=<>`]+)/;
+  const named = attrRe("data-presenter");
   const next = named.test(tag) ? tag.replace(named, face) : tag.replace(/\s*\/?>$/, (end) => `${face}${end}`);
-  return html.slice(0, index) + next + html.slice(index + tag.length);
+  return replaceTag(html, found, next);
+}
+
+// The page as its narrator presents it, for play, /p and both releases: the
+// resolved face put on (withAvatar), or, when the narration is on record and
+// resolves to no face (`who.face` null: narrator none, faces off, a face
+// removed), a face the CLI wrote from an earlier narrator taken off again, so
+// it never shows someone who no longer presents. A hand-set face is kept.
+export function withNarrator(html, presenter, who) {
+  if (presenter) return withAvatar(html, presenter);
+  const found = playerTag(html);
+  if (!who || who.face || !found || value(found.tag, PRESENTER_FROM) !== "narrator") return html;
+  return replaceTag(html, found, setFace(found.tag, [["data-presenter", "none"], [PRESENTER_FROM, "narrator"]]));
+}
+
+const narratorFace = ({ avatarUrl, imageUrl }) => [
+  ["data-presenter", "head"], ["data-avatar", avatarUrl], ...(imageUrl ? [["data-presenter-image", imageUrl]] : []), [PRESENTER_FROM, "narrator"],
+];
+
+// Write the narrator's face into the page as a file on disk plays it: `face`
+// ({ avatarUrl, imageUrl }) as a marked head, or null for captions only on
+// purpose. For deck new, deck narrator and narrate, so a draft opened with any
+// static server shows what play and release show. A face set by hand (a face or
+// data-avatar with no marker) is left alone. Returns { html, wrote }, and with
+// wrote false a `why`.
+export function writeNarratorFace(html, face) {
+  const found = playerTag(html);
+  if (!found) return { html, wrote: false, why: "the page has no live player tag" };
+  const { tag } = found;
+  if (!value(tag, PRESENTER_FROM) && (tagFace(tag) || value(tag, "data-avatar"))) {
+    return { html, wrote: false, why: "the player tag names a face of its own (set by hand), so it is left as written" };
+  }
+  const next = setFace(tag, face ? narratorFace(face) : [["data-presenter", "none"], [PRESENTER_FROM, "captions-only"]]);
+  return { html: replaceTag(html, found, next), wrote: true };
 }
 
 // What is wrong with the player tag's presenter as written, for check: null, or
 // { kind, presenter }. "unfilled": it asks for a face (head or static) but names
 // none, so it plays captions only until release fills it in. "kept": it has a
 // data-avatar the player ignores (data-presenter="none"), and release leaves it.
-// A plain "none" or no data-presenter is not an issue: release adds the face.
+// "captions": data-presenter none or missing, so a file opened as written (a
+// static server, the screenshot pass) plays captions only though release adds a
+// face. Captions only on purpose (data-presenter-from="captions-only") is not an issue.
 export function presenterTagIssue(html) {
   const found = playerTag(html);
   if (!found || tagFace(found.tag)) return null;
   const presenter = value(found.tag, "data-presenter");
   if (value(found.tag, "data-avatar")) return { kind: "kept", presenter };
   if (presenter === "head" || presenter === "static") return { kind: "unfilled", presenter };
-  return null;
+  if (value(found.tag, PRESENTER_FROM) === "captions-only") return null;
+  return { kind: "captions", presenter };
 }
 
 // Why a resolved face did not land on the page: withAvatar leaves a tag with
@@ -109,7 +173,7 @@ function keptOutReason(html) {
 // Both releases use it: release.mjs and convex/deckSources.ts.
 export const TAG_FACE = "the face set on the player tag";
 export function releasedPresenter(html, presenter, who, { lookupError } = {}) {
-  const page = presenter ? withAvatar(html, presenter) : html;
+  const page = withNarrator(html, presenter, who);
   const captions = (reason) => ({ page, line: `⚠ releasing captions only: ${reason}`, summary: who ? { ...who, face: null, reason } : null });
   const shown = presentedFace(page);
   if (shown) {

package/src/release.mjs

@@ -17,7 +17,7 @@ import { readFileSync } from "node:fs";
 import { join } from "node:path";
 import { zipSync } from "fflate";
 import * as ops from "./ops.mjs";
-import { releasedPresenter, withAvatar } from "./presenter.mjs";
+import { releasedPresenter, withNarrator } from "./presenter.mjs";
 import { linkBase } from "./runtime.mjs";
 import { checkDeck, deckFiles, deckFolder, deckPathResolver, resolveDeckDir } from "./check.mjs";
 import { mediaRefs, withMediaPreviews } from "./mediaPreviews.mjs";
@@ -56,15 +56,16 @@ export function deckCommit(deckDir) {
 // turn (deckFiles). `added` maps each bundled script or stylesheet to the files
 // it brought in, so release can say what came from where.
 // `presenter` (from avatars.presenterFor) puts the owner's avatar on the
-// uploaded page's player tag; the committed index.html is never changed.
+// uploaded page's player tag; the committed index.html is never changed. `who`
+// (narrate's presenter summary) takes a CLI-written face off when nobody presents now.
 // `media` (from mediaPreviewsFor) writes the blur previews onto the uploaded
 // page and adds the posters it made; like the avatar, never to the commit.
-export function releaseBundle(deckDir, presenter = null, media = null) {
+export function releaseBundle(deckDir, presenter = null, media = null, who = null) {
   const raw = readFileSync(join(deckDir, "index.html"));
-  const page = presenter ? withAvatar(raw.toString("utf8"), presenter) : raw.toString("utf8");
+  const page = withNarrator(raw.toString("utf8"), presenter, who);
   // check has already refused refs that leave the folder or do not resolve.
   const found = deckFiles(page, deckFolder(deckDir)).files.filter((f) => f.path !== "index.html");
-  const html = media ? Buffer.from(withMediaPreviews(page, media.previews).html) : presenter ? Buffer.from(page) : raw;
+  const html = media ? Buffer.from(withMediaPreviews(page, media.previews).html) : page !== raw.toString("utf8") ? Buffer.from(page) : raw;
   const made = Object.entries(media?.files ?? {});
   const added = {};
   for (const f of found) if (f.from !== "html") (added[f.from] ??= []).push(f.path);
@@ -174,7 +175,7 @@ export async function release(pos, opts = {}, io = {}) {
   const narrateOpts = { ...opts, slug };
   for (const k of ["slide", "json", "dry-run", "to", "email", "recipients"]) delete narrateOpts[k];
   if (narrateOpts.voice === undefined) delete narrateOpts.voice;
-  const job = await narrate([deckDir], narrateOpts, { log });
+  const job = await narrate([deckDir], narrateOpts, { log, writeFace: false });
   if (!job?.manifestUrl) throw new Error(`narration finished without a manifest (${job?.notice || "no manifest URL"}); fix it and release again`);
   const after = changes(deckDir);
   if (after) {
@@ -189,7 +190,7 @@ export async function release(pos, opts = {}, io = {}) {
   } catch (e) {
     lookupError = ops.errorText(e);
   }
-  const released = releaseBundle(deckDir, presenter, media);
+  const released = releaseBundle(deckDir, presenter, media, job.presenter);
   // Say who presents from the page that ships, never from the lookup alone: a
   // resolved face that did not land on the player tag must not be claimed, and
   // a failed lookup is captions only only when the tag names no face of its own.

package/src/runtime.mjs

@@ -8,7 +8,7 @@ import { fileURLToPath } from "node:url";
 import { ConvexHttpClient } from "convex/browser";
 import { makeFunctionReference } from "convex/server";
 
-export const VERSION = "0.9.9";
+export const VERSION = "0.9.11";
 const UPLOAD_TIMEOUT_MS = 125_000;
 
 // The app's home. HYPERDECKS_HOST points the prod target's broker and share

package/src/scaffold.mjs

@@ -1,21 +1,25 @@
-// hyperdecks deck new <slug> "<title>" --narrated [--layouts hero,product,…] [--presenter-style stage|bubble|glass|corner] [--dir <path>]
+// hyperdecks deck new <slug> "<title>" --narrated [--layouts hero,product,…] [--presenter-style stage|bubble|glass|corner] [--captions-only] [--dir <path>]
 //
 // Writes decks/<slug>/ (or --dir) from the packaged templates: index.html (eight
 // slides for the hosted player/v1, or one slide per --layouts entry from
 // templates/layouts/), script.md (the narration) and evidence.md (where each
 // fact comes from), then registers the deck as a draft you own so narrate can
-// render into it.
-import { existsSync, mkdirSync, rmSync, writeFileSync } from "node:fs";
+// render into it. The player tag gets the narrator's face (the account's default
+// narrator, else D.A.S.H.), so the file plays with a face however it is opened;
+// --captions-only writes data-presenter="none" on purpose instead.
+import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { join, resolve } from "node:path";
 import * as ops from "./ops.mjs";
 import { PRESENTER_STYLES } from "./checkRules.mjs";
 import { LAYOUTS, NARRATED_FILES, assembleLayoutDeck, fillTemplate, parseLayouts } from "./layouts.mjs";
 import { applyBrand, brandForNewDeck, brandSummary } from "./brand.mjs";
+import { writeDraftFace } from "./draftFace.mjs";
+import { DASH_PRESENTER, writeNarratorFace } from "./presenter.mjs";
 
 export { LAYOUTS, NARRATED_FILES, assembleLayoutDeck, fillTemplate, parseLayouts, readLayout } from "./layouts.mjs";
 
 const SLUG = /^[a-z0-9][a-z0-9-]{0,63}$/;
-const USAGE = 'usage: deck new <slug> "<title>" --narrated [--layouts hero,product,number,closer] [--presenter-style <stage|bubble|glass|corner>] [--no-brand] [--dir <path>]';
+const USAGE = 'usage: deck new <slug> "<title>" --narrated [--layouts hero,product,number,closer] [--presenter-style <stage|bubble|glass|corner>] [--captions-only] [--no-brand] [--dir <path>]';
 
 export async function deckNew(pos, opts = {}, { log = (line) => console.log(line), cwd = process.cwd() } = {}) {
   const [slug, title] = pos;
@@ -28,7 +32,7 @@ export async function deckNew(pos, opts = {}, { log = (line) => console.log(line
   if (!SLUG.test(slug)) throw new Error("slug must be lowercase letters, digits and dashes (max 64)");
   const dir = resolve(/*turbopackIgnore: true*/ cwd, typeof opts.dir === "string" ? opts.dir : join("decks", slug));
   if (existsSync(dir)) throw new Error(`${dir} already exists; pick another slug or --dir`);
-  if (opts.layouts === true) throw new Error(`--layouts needs a list, e.g. --layouts ${LAYOUTS.slice(0, 3).join(",")},closer`);
+  if (opts.layouts === true) throw new Error(`--layouts needs a list, e.g. --layouts hero,product,number,closer`);
   if (opts.layouts !== undefined) parseLayouts(opts.layouts);
   // The account's brand goes on the template (--no-brand: the template's look);
   // an explicit --presenter-style wins over the brand's.
@@ -46,7 +50,24 @@ export async function deckNew(pos, opts = {}, { log = (line) => console.log(line
     rmSync(dir, { recursive: true, force: true });
     throw new Error(`deck ${slug} is registered but its files could not be written (${e.message}); remove the draft with \`hyperdecks deck rm ${slug}\` and run deck new again`);
   }
+  // The face goes into the file now the deck is registered (the server answers whose).
+  const htmlPath = join(/*turbopackIgnore: true*/ dir, "index.html");
+  const lines = [];
+  let presenter;
+  if (opts["captions-only"]) {
+    writeFileSync(htmlPath, writeNarratorFace(readFileSync(htmlPath, "utf8"), null).html);
+    // The server too, so release, play and /p agree the deck has no face.
+    try {
+      await ops.setDeckNarrator(opts, slug, "none");
+      lines.push("  presenter: captions only (--captions-only), written to index.html and set on the deck");
+    } catch (e) {
+      lines.push(`⚠ presenter: captions only written to index.html, but the deck could not be set to none (${e.message}): run \`hyperdecks deck narrator ${slug} none\``);
+    }
+    presenter = { face: null };
+  } else {
+    presenter = await writeDraftFace(opts, slug, htmlPath, { log: (line) => lines.push(line), fallback: DASH_PRESENTER });
+  }
   const summary = brandSummary(brand, readError);
-  log(`✓ created deck "${slug}" → ${dir}\n  files: ${Object.keys(NARRATED_FILES).join(", ")}\n  brand: ${summary.error ? `could not read it (${summary.error}); template look` : summary.applied.length ? summary.applied.join(", ") : "none applied (hyperdecks brand set)"}\n  next:  hyperdecks narrate ${dir} --dry-run`);
-  return { slug, title, dir, files: Object.keys(NARRATED_FILES), brand: summary };
+  log(`✓ created deck "${slug}" → ${dir}\n  files: ${Object.keys(NARRATED_FILES).join(", ")}\n  brand: ${summary.error ? `could not read it (${summary.error}); template look` : summary.applied.length ? summary.applied.join(", ") : "none applied (hyperdecks brand set)"}\n${lines.map((l) => (l.startsWith(" ") ? l : `  ${l}`)).join("\n")}\n  next:  hyperdecks narrate ${dir} --dry-run`);
+  return { slug, title, dir, files: Object.keys(NARRATED_FILES), brand: summary, presenter: presenter.face ?? null };
 }

package/templates/layouts/_deck.html

@@ -7,7 +7,8 @@
 <!-- Loading state (keep verbatim; `hyperdecks check` requires it). Until the
      player marks body[data-hd-ready] the page shows only the slide card, at its
      final size, in the deck's --hd-ground (its first slide's colour) on the
-     page's brand colour, with a quiet loader in --hd-ground-ink; then the
+     page's brand colour, with the opening card over it (the title and the
+     presenter's still), or in a frame quiet dots in --hd-ground-ink; then the
      slides fade in. If the player never arrives, the slides show after 10 s
      rather than never. Put data-layout="overlay" on <html> for the overlay. -->
 <link rel="modulepreload" href="https://hyperdecks.ai/player/v1/player.js">
@@ -21,7 +22,7 @@
   /* The card as the player draws it (player.css, framed): 16:9, scaled to fit
      between the 64px masthead and the 56px dock, 24px in from the sides. */
   body::before { inset: 64px 24px 56px; margin: auto; width: min(100vw - 48px, (100dvh - 120px) * 16 / 9); height: min(100dvh - 120px, (100vw - 48px) * 9 / 16); border-radius: calc(min(100vw - 48px, (100dvh - 120px) * 16 / 9) * .01125); background: var(--hd-ground, #fff); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hd-ground-ink, #0b0b0f) 16%, transparent); }
-  body::after { left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; color: var(--hd-ground-ink, #0b0b0f); background: currentColor; box-shadow: -24px 0 currentColor, 24px 0 currentColor; opacity: 0; animation: hd-dots .7s ease-in-out .6s infinite alternate; }
+  [data-hd-frame] body::after { left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; color: var(--hd-ground-ink, #0b0b0f); background: currentColor; box-shadow: -24px 0 currentColor, 24px 0 currentColor; opacity: 0; animation: hd-dots .7s ease-in-out .6s infinite alternate; }
   body[data-hd-ready]::before, body[data-hd-ready]::after { opacity: 0; animation: none; }
   /* The overlay (embedded, ?thumb, or data-layout="overlay"): the stage fills the window. */
   :is([data-hd-frame], [data-layout="overlay"]) body::before { inset: 0; width: min(100vw, 100dvh * 16 / 9); height: min(100dvh, 100vw * 9 / 16); border-radius: calc(min(100vw, 100dvh * 16 / 9) * .01125); box-shadow: none; }
@@ -41,7 +42,75 @@
   @keyframes hd-in { from { opacity: 0; } }
   @keyframes hd-dots { from { opacity: .15; } to { opacity: .6; } }
   @keyframes hd-fail-open { to { visibility: visible; overflow: auto; } }
+#hd-open{position:fixed;inset:0;z-index:2147483000;pointer-events:none;visibility:visible!important;animation:none!important;opacity:0;font-family:var(--hd-ui-font,"Space Grotesk",system-ui,sans-serif);color:#0b0b0f}
+#hd-open.is-shown{opacity:1;transition:opacity .2s ease-out}
+#hd-open.is-gone{opacity:0;transition:opacity .45s ease-out}
+#hd-open .hdo-slide{position:absolute;inset:64px 24px 56px;margin:auto;width:min(100vw - 48px,(100dvh - 120px)*16/9);height:min(100dvh - 120px,(100vw - 48px)*9/16);border-radius:calc(min(100vw - 48px,(100dvh - 120px)*16/9)*.01125);overflow:hidden;container-type:inline-size;background:var(--hd-ground,#fff)}
+#hd-open .hdo-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:blur(2.2cqi) saturate(1.15);transform:scale(1.12);animation:hdo-breathe 2.4s ease-in-out infinite}
+#hd-open .hdo-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);background-size:250% 100%;animation:hdo-shim 1.8s ease-in-out infinite;mix-blend-mode:soft-light}
+#hd-open.is-done .hdo-slide img{animation:hdo-deblur .5s cubic-bezier(.2,.8,.2,1) .5s forwards}
+#hd-open.is-done .hdo-slide::after{opacity:0;transition:opacity .3s}
+.hdo-card{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(86vw,420px);display:grid;justify-items:center;gap:.6em;padding:1.3em 1.5em 1.2em;border-radius:22px;background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:4px 4px 0 #0b0b0f;border:1.5px solid #0b0b0f;text-align:center;box-sizing:border-box}
+#hd-open.is-done .hdo-card{opacity:0;transform:scale(.96);transition:opacity .25s .5s,transform .25s .5s}
+.hdo-buddy{position:relative;width:92px;height:96px;margin-top:-62px;display:grid;justify-items:center}
+.hdo-hop{width:86px;height:80px;transform-origin:50% 100%;animation:hdo-hop 1.15s cubic-bezier(.3,0,.4,1) infinite}
+.hdo-look{width:100%;height:100%;animation:hdo-look 4.6s ease-in-out infinite}
+.hdo-buddy img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 3px 0 rgba(11,11,15,.18))}
+.hdo-shadow{position:absolute;bottom:4px;width:46px;height:8px;border-radius:50%;background:rgba(11,11,15,.22);animation:hdo-shadow 1.15s cubic-bezier(.3,0,.4,1) infinite}
+.hdo-think{position:absolute;right:-30px;top:-6px;display:flex;gap:3px;padding:5px 8px;border-radius:14px;background:#fff;border:1.5px solid #0b0b0f;box-shadow:2px 2px 0 #0b0b0f}
+.hdo-think::after{content:"";position:absolute;left:4px;bottom:-7px;width:7px;height:7px;border-radius:50%;background:#fff;border:1.5px solid #0b0b0f}
+.hdo-think i{width:5px;height:5px;border-radius:50%;background:#0b0b0f;animation:hdo-tdot 1s ease-in-out infinite}
+.hdo-think i:nth-child(2){animation-delay:.15s}.hdo-think i:nth-child(3){animation-delay:.3s}
+.hdo-spark{position:absolute;left:50%;top:40%;width:8px;height:8px;margin:-4px;opacity:0}
+.hdo-spark::before{content:"";position:absolute;inset:0;background:#0b0b0f;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
+#hd-open.is-done .hdo-hop{animation:hdo-yay .55s cubic-bezier(.2,1.4,.4,1) forwards}
+#hd-open.is-done :is(.hdo-look,.hdo-shadow){animation:none}
+#hd-open.is-done .hdo-think{opacity:0;transition:opacity .15s}
+#hd-open.is-done .hdo-spark{animation:hdo-spark .6s ease-out forwards}
+.hdo-title{font-weight:700;font-size:18px;line-height:1.2;text-wrap:balance;overflow-wrap:anywhere}
+.hdo-by{font:12.5px/1.3 var(--hd-ui-mono,"JetBrains Mono",ui-monospace,monospace);color:#3d3b35}
+.hdo-bar{width:100%;height:5px;border-radius:999px;background:rgba(11,11,15,.12);overflow:hidden}
+.hdo-bar i{display:block;height:100%;width:8%;background:#0b0b0f;border-radius:999px;transition:width .35s ease-out}
+.hdo-step{font:12px/1.3 var(--hd-ui-mono,"JetBrains Mono",ui-monospace,monospace);color:#55534b;min-height:1.3em}
+@keyframes hdo-breathe{50%{filter:blur(2.6cqi) saturate(1.25) brightness(1.05)}}
+@keyframes hdo-shim{0%{background-position:120% 0}100%{background-position:-120% 0}}
+@keyframes hdo-deblur{to{filter:blur(0);transform:none}}
+@keyframes hdo-hop{0%,100%{transform:translateY(0) scale(1.06,.92)}12%{transform:translateY(0) scale(.95,1.06)}45%{transform:translateY(-14px) scale(1,1)}70%{transform:translateY(0) scale(1.04,.95)}82%{transform:translateY(0) scale(1,1)}}
+@keyframes hdo-shadow{0%,100%{transform:scale(1.05);opacity:.9}45%{transform:scale(.62);opacity:.45}70%{transform:scale(1);opacity:.85}}
+@keyframes hdo-look{0%,18%{transform:rotate(0)}24%,38%{transform:rotate(-9deg) translateX(-2px)}44%,58%{transform:rotate(8deg) translateX(2px)}64%,100%{transform:rotate(0)}}
+@keyframes hdo-tdot{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
+@keyframes hdo-yay{0%{transform:translateY(0) scale(1.08,.9)}40%{transform:translateY(-26px) scale(.94,1.08) rotate(-6deg)}100%{transform:translateY(-6px) scale(1) rotate(0)}}
+@keyframes hdo-spark{0%{opacity:0;transform:translate(0,0) scale(.4)}30%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.2) rotate(90deg)}}
+:is([data-hd-frame],[data-layout="overlay"]) #hd-open .hdo-slide{inset:0;width:min(100vw,100dvh*16/9);height:min(100dvh,100vw*9/16)}
+@media (max-width:650px){#hd-open .hdo-slide{inset:52px 8px calc(56px + env(safe-area-inset-bottom));width:auto;height:auto;border-radius:14px}.hdo-card{width:min(84vw,320px);padding:1em 1.1em .95em}.hdo-title{font-size:15.5px}.hdo-buddy{transform:scale(.85);margin-top:-58px}}
+@media (prefers-reduced-motion:reduce){#hd-open *,#hd-open *::before,#hd-open *::after{animation:none!important;transition:none!important}#hd-open .hdo-slide::after{display:none}#hd-open.is-done .hdo-card{opacity:1;transform:none}}
+@media print{#hd-open{display:none!important}}
 </style>
+<script data-hd-opening>(function(){var d=document;
+if(self!==top||/[?&](thumb|export)\b/.test(location.search))return;
+function go(){if(d.readyState==="loading")return;d.removeEventListener("readystatechange",go);
+var b=d.body,p=d.querySelector('script[src*="/player/v"][src*="/player.js"]');
+if(!b||!p||d.getElementById("hd-open")||b.hasAttribute("data-hd-ready")||d.documentElement.hasAttribute("data-hyperdecks-thumb"))return;
+var o=d.createElement("div"),img=p.getAttribute("data-presenter")!=="none"&&p.getAttribute("data-presenter-image");
+o.id="hd-open";o.setAttribute("aria-hidden","true");
+o.innerHTML='<div class="hdo-slide"></div><div class="hdo-card">'+(img?"<div class=\"hdo-buddy\"><div class=\"hdo-hop\"><div class=\"hdo-look\"><img src=\"\" alt=\"\"></div></div><div class=\"hdo-shadow\"></div><div class=\"hdo-think\"><i></i><i></i><i></i></div><span class=\"hdo-spark\" style=\"--x:-40px;--y:-30px\"></span><span class=\"hdo-spark\" style=\"--x:42px;--y:-34px\"></span><span class=\"hdo-spark\" style=\"--x:-30px;--y:10px\"></span><span class=\"hdo-spark\" style=\"--x:36px;--y:6px\"></span><span class=\"hdo-spark\" style=\"--x:0px;--y:-46px\"></span></div>":'')+'<div class="hdo-title"></div><div class="hdo-bar"><i></i></div><div class="hdo-step"></div></div>';
+if(img){var i=o.querySelector(".hdo-buddy img");i.addEventListener("error",function(){var y=o.querySelector(".hdo-buddy");if(y)y.remove()});i.src=img}
+o.querySelector(".hdo-title").textContent=(d.title||"").replace(/\s+/g," ").trim();
+b.insertBefore(o,b.firstChild);(function(o){var b=document.body,d=document.documentElement;if(!o||!b)return;
+if(self!==top||/[?&](thumb|export)\b/.test(location.search)||d.hasAttribute("data-hyperdecks-thumb")){o.remove();return}
+var S={"page":[10,"Opening the deck…"],"player":[38,"Loading the player…"],"presenter":[62,"Waking up {name}…"],"narration":[84,"Getting the narration…"]},bar=o.querySelector(".hdo-bar i"),step=o.querySelector(".hdo-step"),who=o.getAttribute("data-name")||"the presenter",at=0,shown=false,done=false,mo;
+var rm=window.matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches;
+function boot(){var s=S[b.getAttribute("data-hd-boot")];if(!s||s[0]<=at)return;at=s[0];bar.style.width=s[0]+"%";step.textContent=s[1].split("{name}").join(who)}
+function finish(){if(done)return;done=true;if(mo)mo.disconnect();clearTimeout(t1);clearTimeout(t2);
+if(!shown){o.remove();return}bar.style.width="100%";step.textContent="Ready";
+o.classList.add("is-done");setTimeout(function(){o.classList.add("is-gone")},rm?0:500);setTimeout(function(){o.remove()},rm?500:1000)}
+function check(){if(b.hasAttribute("data-hd-ready"))finish();else boot()}
+var t1=setTimeout(function(){if(!done){shown=true;o.classList.add("is-shown")}},150);
+var t2=setTimeout(finish,10000);
+step.textContent=S.page[1];
+if(window.MutationObserver){mo=new MutationObserver(check);mo.observe(b,{attributes:true,attributeFilter:["data-hd-ready","data-hd-boot"]})}
+check()})(o)}
+d.addEventListener("readystatechange",go);go()})();</script>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Space+Mono:wght@400;700&display=swap">
@@ -55,20 +124,26 @@
     --font: "Space Grotesk", system-ui, sans-serif; --mono: "Space Mono", ui-monospace, monospace;
     /* The type scale: one display size per slide at most, then title, sub (a title beside a visual), lead, body, label. */
     --t-display: 128px; --t-title: 84px; --t-sub: 56px; --t-lead: 30px; --t-body: 24px; --t-label: 17px;
+    /* The text colour on an accent ground. A brand with a dark accent sets it to its paper. */
+    --accent-ink: var(--ink);
     --hd-ground: var(--accent); --hd-ground-ink: var(--ink); /* the loading state: the first slide's colours */
     /* Soft grounds (on-tint, on-tint-2, on-tint-3): washes of the accents, so slide changes read without going loud. */
     --tint-1: color-mix(in srgb, var(--accent) 18%, var(--paper)); --tint-2: color-mix(in srgb, var(--accent-2) 20%, var(--paper)); --tint-3: color-mix(in srgb, var(--accent-3, var(--accent)) 24%, var(--paper));
   }
   * { box-sizing: border-box; margin: 0; padding: 0; }
   body { color: var(--ink); font-family: var(--font); font-weight: 500; -webkit-font-smoothing: antialiased; --hd-font: var(--font); --hd-mono: var(--mono); }
-  .slide { display: flex; flex-direction: column; gap: 24px; padding: 64px 72px 56px; background: var(--paper); color: var(--ink); --hd-speech: #f3c9dc; }
-  .slide.on-accent { background: var(--accent); --hd-speech: var(--card); }
+  /* The caption bubble is always a fixed light fill with dark ink, so it reads whatever the
+     brand's --card or --ink (a dark brand's card is dark). A slide can still set its own. */
+  .slide { display: flex; flex-direction: column; gap: 24px; padding: 64px 72px 56px; background: var(--paper); color: var(--ink); --hd-speech: #f3c9dc; --hd-speech-ink: #0b0b0f; }
+  .slide.on-accent { background: var(--accent); color: var(--accent-ink); --hd-speech: #ffffff; }
   .slide.on-ink { background: var(--ink); color: var(--paper); --hd-speech: #d9ccff; }
-  .slide.on-tint { background: var(--tint-1); --hd-speech: var(--card); }
-  .slide.on-tint-2 { background: var(--tint-2); --hd-speech: var(--card); }
-  .slide.on-tint-3 { background: var(--tint-3); --hd-speech: var(--card); }
+  .slide.on-tint { background: var(--tint-1); --hd-speech: #ffffff; }
+  .slide.on-tint-2 { background: var(--tint-2); --hd-speech: #ffffff; }
+  .slide.on-tint-3 { background: var(--tint-3); --hd-speech: #ffffff; }
   .kicker { font: var(--t-label) var(--mono); letter-spacing: .16em; text-transform: uppercase; }
-  .tt { font-family: var(--display, var(--font)); font-weight: 700; font-size: var(--t-title); line-height: .95; letter-spacing: -.045em; text-wrap: balance; }
+  /* Titles take the display face's weight and tracking (brand.mjs sets them for a face the
+     template was not tuned for) and never fake a weight the face lacks. */
+  .tt { font-family: var(--display, var(--font)); font-weight: var(--display-weight, 700); font-synthesis: none; font-size: var(--t-title); line-height: .95; letter-spacing: var(--display-tracking, -.045em); text-wrap: balance; }
   .lead { font-size: var(--t-lead); line-height: 1.3; max-width: 28em; text-wrap: pretty; }
   .muted { opacity: .65; }
   /* The presenter glides to each slide's slot: bottom-right by default,
@@ -98,26 +173,57 @@
       linear-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 0 0) 14% 67% / 44% 2.4% no-repeat,
       linear-gradient(var(--accent) 0 0) 50% 90% / 84% 6% no-repeat,
       var(--paper); }
-  /* Backgrounds, optional and for a few slides a deck. bg-dots on the section:
-     a dot grid in the slide's text colour, faded in from the side away from the text
-     (--dots-fade is the fade's direction: 90deg puts the dots on the right,
-     270deg on the left). A <div class="deco" aria-hidden="true"> in the slide
-     holds small inked tiles, each a <span> placed by its inline left/top (and
-     background, rotate). Both sit behind the slide's content. */
-  .slide.bg-dots, .slide:has(> .deco) { isolation: isolate; }
-  .slide.bg-dots::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(color-mix(in srgb, currentColor 24%, transparent) 3px, transparent 3.6px) 0 0 / 36px 36px; -webkit-mask-image: linear-gradient(var(--dots-fade, 90deg), transparent 40%, #000 80%); mask-image: linear-gradient(var(--dots-fade, 90deg), transparent 40%, #000 80%); }
+  /* Decorations: a <div class="deco" aria-hidden="true"> in the slide holds small
+     inked tiles, each a <span> placed by its inline left/top (and background, rotate),
+     behind the slide's content. */
+  .slide:has(> .deco) { isolation: isolate; }
   .slide > .deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
   .slide > .deco > span { position: absolute; display: grid; place-items: center; width: 80px; height: 80px; border: 3px solid var(--ink); border-radius: 20px; background: var(--card); box-shadow: 8px 8px 0 var(--ink); color: var(--ink); font: 700 34px var(--font); }
-  /* The look kit (deck_guide topic look): one texture per deck, one icon set, real pictures.
-     Textures go on the section, behind the content, on a few slides: bg-lines, diagonal
-     speed lines fading out towards the text (--fade-at: where they are strongest, default
-     the right); bg-halftone, a corner of halftone dots (--fade-at, default top right);
-     bg-rays, rays from a point (--rays-at), for an opener or a closer. */
-  .slide:is(.bg-lines, .bg-halftone, .bg-rays) { isolation: isolate; overflow: hidden; }
-  .slide:is(.bg-lines, .bg-halftone, .bg-rays)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
-  .slide.bg-lines::before { background: repeating-linear-gradient(-22deg, transparent 0 30px, color-mix(in srgb, currentColor 10%, transparent) 30px 32px); -webkit-mask-image: radial-gradient(1000px 780px at var(--fade-at, 82% 52%), #000 12%, transparent 70%); mask-image: radial-gradient(1000px 780px at var(--fade-at, 82% 52%), #000 12%, transparent 70%); }
-  .slide.bg-halftone::before { background: radial-gradient(color-mix(in srgb, currentColor 22%, transparent) 2.6px, transparent 3px) 0 0 / 22px 22px; -webkit-mask-image: radial-gradient(640px 640px at var(--fade-at, 88% 14%), #000 25%, transparent 70%); mask-image: radial-gradient(640px 640px at var(--fade-at, 88% 14%), #000 25%, transparent 70%); }
-  .slide.bg-rays::before { background: repeating-conic-gradient(from 0deg at var(--rays-at, 72% 50%), color-mix(in srgb, currentColor 9%, transparent) 0deg 2.2deg, transparent 2.2deg 9deg); -webkit-mask-image: radial-gradient(circle at var(--rays-at, 72% 50%), transparent 10%, #000 45%); mask-image: radial-gradient(circle at var(--rays-at, 72% 50%), transparent 10%, #000 45%); }
+  /* Backgrounds (deck_guide topic look). Four classes on the section, tokens only, each painted
+     behind the content (a ::before at z-index -1 in an isolated slide) and confined to the object
+     it backs, never under the text. Each carries its own per-layout rules (.l-<layout>.bg-<name>),
+     so on a layout with nothing to back it paints nothing. Plain grounds come first; one signature
+     (bg-corner or bg-mark) per deck on three slides at most; bg-pool and bg-stage only on a slide
+     with a picture. A deck may add its own in its <style> under the same contract. */
+  .slide:is(.bg-pool, .bg-corner, .bg-stage, .bg-mark) { isolation: isolate; overflow: hidden; }
+  .slide:is(.bg-pool, .bg-corner, .bg-stage, .bg-mark)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
+  /* bg-pool: one soft light of the next accent (accent-2 on paper, accent on a tint, a screened
+     accent-3 on an accent ground, accent on ink), placed per layout as the spotlight of the picture. */
+  .slide.bg-pool { --pool: color-mix(in srgb, var(--accent-2) 34%, transparent); }
+  .slide:is(.on-tint, .on-tint-2, .on-tint-3).bg-pool { --pool: color-mix(in srgb, var(--accent) 38%, transparent); }
+  .slide.on-accent.bg-pool { --pool: color-mix(in srgb, var(--accent-3, var(--accent-2)) 55%, transparent); }
+  .slide.on-accent.bg-pool::before { mix-blend-mode: screen; }
+  .slide.on-ink.bg-pool { --pool: color-mix(in srgb, var(--accent) 32%, transparent); }
+  .slide.bg-pool::before { background: radial-gradient(var(--pw, 760px) var(--ph, 600px) at var(--px, 82%) var(--py, 28%), var(--pool), transparent 70%); }
+  .l-hero.bg-pool { --px: 82%; --py: 28%; --pw: 760px; --ph: 600px; }
+  .l-split.bg-pool { --px: 73%; --py: 50%; --pw: 900px; --ph: 860px; }
+  .l-product.bg-pool { --px: 34%; --py: 50%; --pw: 1180px; --ph: 860px; }
+  .l-phones.bg-pool { --px: 68%; --py: 50%; --pw: 900px; --ph: 760px; }
+  .l-chart.bg-pool { --px: 84%; --py: 40%; --pw: 640px; --ph: 520px; }
+  .l-quote.bg-pool { --px: 10%; --py: 14%; --pw: 760px; --ph: 560px; }
+  .l-closer.bg-pool { --px: 90%; --py: 4%; --pw: 820px; --ph: 640px; }
+  /* bg-corner: a hard-edged quarter-disc of halftone, top-right, behind the stickers. A signature: cover, closer. */
+  .slide.bg-corner::before {
+    --corner-r: 580px; --corner-dot: color-mix(in srgb, currentColor var(--corner-a, 15%), transparent);
+    inset: auto; right: 0; top: 0; width: var(--corner-r); height: var(--corner-r); border-bottom-left-radius: 100%;
+    background: radial-gradient(var(--corner-dot) 2.8px, transparent 3.3px) 0 0 / 20px 20px;
+    -webkit-mask-image: radial-gradient(circle at 100% 0, #000 45%, rgba(0,0,0,.4) 100%); mask-image: radial-gradient(circle at 100% 0, #000 45%, rgba(0,0,0,.4) 100%); }
+  .l-closer.bg-corner::before { --corner-r: 460px; }
+  .on-ink.bg-corner::before { --corner-a: 22%; }
+  :is(.l-split, .l-product, .l-chart, .l-quote, .l-number, .l-features, .l-team, .l-timeline, .l-compare, .l-cover-band, .l-cover-poster).bg-corner::before { content: none; }
+  /* bg-stage: a rounded dot plate exactly the picture's column plus 32px, so the frame or the phones stand on it; on the hero a tile behind the stickers. */
+  .slide.bg-stage::before { inset: auto; background: radial-gradient(color-mix(in srgb, currentColor var(--stage-a, 24%), transparent) 2.4px, transparent 2.9px) 0 0 / 22px 22px; border-radius: 40px; }
+  .l-product.bg-stage::before { position: relative; grid-area: frame; align-self: stretch; margin: var(--stage-m, -32px -24px -32px -40px); }
+  .l-phones.bg-stage::before { position: relative; grid-area: row; align-self: stretch; margin: var(--stage-m, -32px); }
+  .l-hero.bg-stage::before { right: 110px; top: 110px; width: 410px; height: 350px; }
+  :is(.l-split, .l-chart, .l-quote, .l-closer, .l-number, .l-features, .l-team, .l-timeline, .l-compare, .l-cover-band, .l-cover-poster, .l-cover-type).bg-stage::before { content: none; }
+  /* bg-mark: the slide number, set as style="--mark:'04'" on the section, huge in --display, faint,
+     cropped by the top edge; right on the hero, in the indent on slot-left slides. A signature: cover, an opener, closer. */
+  .slide.bg-mark::before { content: var(--mark, ""); inset: auto; right: 24px; top: -.26em; font: var(--display-weight, 700) var(--mark-size, 560px)/1 var(--display, var(--font)); font-synthesis: none; letter-spacing: var(--display-tracking, -.05em); white-space: nowrap;
+    color: color-mix(in srgb, currentColor var(--mark-a, 8%), transparent); }
+  .slide.on-ink.bg-mark::before { --mark-a: 6%; }
+  .slide.slot-left.bg-mark::before { right: auto; left: -.08em; font-size: var(--mark-size, 440px); } /* ends inside the 500px indent, clear of the title */
+  :is(.l-split, .l-product, .l-chart, .l-phones, .l-number, .l-features, .l-team, .l-timeline, .l-compare, .l-cover-band, .l-cover-poster).bg-mark::before { content: none; }
   /* Pieces. .sticker: a logo or icon tile, tilted (--tilt), ink edge, hard offset
      shadow (.sticker.photo for a face or an app icon that fills it). .ticks: a short
      list with accent-square bullets. .panel: a quiet card. .pill: a small tag. */
@@ -128,12 +234,12 @@
   .ticks { list-style: none; display: flex; flex-direction: column; gap: 14px; }
   .ticks li { position: relative; padding-left: 34px; font-size: var(--t-body); line-height: 1.3; font-weight: 600; }
   .ticks li::before { content: ""; position: absolute; left: 0; top: .4em; width: 16px; height: 16px; border-radius: 5px; background: var(--accent); }
-  .on-accent .ticks li::before { background: var(--ink); }
+  .on-accent .ticks li::before { background: var(--accent-ink); }
   .panel { padding: 24px 28px; border-radius: 22px; background: color-mix(in srgb, currentColor 6%, transparent); }
   .pill { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 8px 16px; border-radius: 999px; background: var(--card); color: var(--ink); font: 700 var(--t-label) var(--mono); letter-spacing: .08em; text-transform: uppercase; box-shadow: 4px 4px 0 var(--accent); }
-  .on-accent .pill { box-shadow: 4px 4px 0 var(--ink); }
+  .on-accent .pill { box-shadow: 4px 4px 0 var(--accent-ink); }
   /* A laptop for a desktop screenshot or clip: a .frame.laptop holding an img.shot or video.shot. */
-  .slide .frame.laptop { position: relative; width: 860px; max-width: 100%; padding: 14px 14px 22px; border-radius: 20px 20px 6px 6px; background: #1a1a1d; box-shadow: 0 30px 70px color-mix(in srgb, var(--ink) 22%, transparent); }
+  .slide .frame.laptop { position: relative; width: min(860px, 100%); padding: 14px 14px 22px; border-radius: 20px 20px 6px 6px; background: #1a1a1d; box-shadow: 0 30px 70px color-mix(in srgb, var(--ink) 22%, transparent); }
   .slide .frame.laptop::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -16px; height: 16px; border-radius: 0 0 16px 16px; background: linear-gradient(#d9d9de, #a9a9b0); }
   .slide .frame.laptop > .shot { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 6px; object-fit: cover; object-position: top; background: var(--paper); }
   /* Phones: the slide is the 374×736 card; the presenter is a small head in
@@ -145,12 +251,12 @@
     :root.hd-no-presenter .slide { padding-bottom: 28px; }
     .slide .frame.card { width: 160px; padding: 5px; border-width: 2px; border-radius: 24px; box-shadow: 8px 8px 0 var(--shadow); }
     .slide .frame.card > .shot { border-radius: 19px; border-width: 1px; }
-    /* The text fills the card's width: the dots fade in towards the bottom, and the tiles stay off. */
-    .slide.bg-dots::before { background-size: 22px 22px; background-image: radial-gradient(color-mix(in srgb, currentColor 24%, transparent) 2px, transparent 2.5px); -webkit-mask-image: linear-gradient(180deg, transparent 45%, #000 85%); mask-image: linear-gradient(180deg, transparent 45%, #000 85%); }
+    /* The text fills the card's width, so the backgrounds keep off it: the corner fades in
+       towards the bottom, under the presenter, at a finer pitch; the stage and the mark hide;
+       the pool (a soft light) stays as it is; the tiles stay off. */
+    .slide.bg-corner::before { inset: 0; width: auto; height: auto; border-radius: 0; background-size: 14px 14px; background-image: radial-gradient(var(--corner-dot) 1.6px, transparent 2px); -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 90%); mask-image: linear-gradient(180deg, transparent 40%, #000 90%); }
+    .slide:is(.bg-stage, .bg-mark)::before { content: none; }
     .slide > .deco { display: none; }
-    /* Textures fade in towards the bottom, under the presenter, away from the text. */
-    .slide:is(.bg-lines, .bg-halftone)::before { -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 90%); mask-image: linear-gradient(180deg, transparent 40%, #000 90%); }
-    .slide.bg-halftone::before { background-size: 14px 14px; background-image: radial-gradient(color-mix(in srgb, currentColor 22%, transparent) 1.6px, transparent 2px); }
     .sticker { width: 48px; height: 48px; padding: 9px; border-width: 2px; border-radius: 13px; box-shadow: 3px 3px 0 var(--ink); }
     .ticks { gap: 6px; }
     .ticks li { padding-left: 18px; }
@@ -158,7 +264,7 @@
     .panel { padding: 10px 12px; border-radius: 12px; }
     .pill { padding: 4px 10px; box-shadow: 2px 2px 0 var(--accent); }
     .slide .frame.laptop { padding: 5px 5px 9px; border-radius: 10px 10px 3px 3px; }
-    .slide .frame.laptop::after { bottom: -7px; height: 7px; border-radius: 0 0 8px 8px; }
+    .slide .frame.laptop::after { left: -3%; right: -3%; bottom: -7px; height: 7px; border-radius: 0 0 8px 8px; }
   }
 </style>
 <!-- LAYOUT STYLES -->
@@ -175,7 +281,9 @@
 
 <!-- `hyperdecks narrate decks/__SLUG__` fills data-manifest with the manifest
      URL it writes. data-presenter: head (live Minimoji, needs data-avatar),
-     static (data-presenter-image) or none (captions only). -->
+     static (data-presenter-image) or none (captions only). deck new, deck
+     narrator and narrate write the narrator's face here
+     (data-presenter-from="narrator", so release follows a later narrator). -->
 <script type="module" src="https://hyperdecks.ai/player/v1/player.js"
         data-manifest="" data-stage="1600x900" data-presenter="none" data-presenter-style="__PRESENTER_STYLE__"></script>
 </body>

package/templates/layouts/closer.html

@@ -11,7 +11,9 @@ script: That's it. [go: #__ID__-cta] Here is the one thing to do next. Thanks [g
 <style>
   .l-closer .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 32px; padding-left: 500px; }
   .l-closer .tt { font-size: var(--t-display); line-height: .9; }
-  .l-closer .cta { display: inline-flex; align-items: center; gap: 16px; width: fit-content; max-width: 100%; padding: 22px 34px; border-radius: 22px; background: var(--accent); color: var(--ink); font: 700 34px var(--mono); letter-spacing: -.01em; text-decoration: none; }
+  .l-closer .cta { display: inline-flex; align-items: center; gap: 16px; width: fit-content; max-width: 100%; padding: 22px 34px; border-radius: 22px; background: var(--accent); color: var(--accent-ink); font: 700 34px var(--mono); letter-spacing: -.01em; text-decoration: none; }
+  /* The arrow is an SVG, not "→": Space Mono's (and Space Grotesk's) web subsets have no U+2192, so the glyph fell back to another face and read as malformed. */
+  .l-closer .cta svg { flex: none; width: 1em; height: 1em; }
   .l-closer .contact { font: var(--t-label) var(--mono); letter-spacing: .12em; text-transform: uppercase; }
   @media (max-width: 650px) {
     .l-closer .content { padding-left: 0; justify-content: flex-start; gap: 16px; }
@@ -26,7 +28,7 @@ script: That's it. [go: #__ID__-cta] Here is the one thing to do next. Thanks [g
   <div class="content">
     <h2 class="tt" data-title-mobile="Thanks.">Thanks.</h2>
     <p class="lead">One sentence on the one thing to do next.</p>
-    <a class="cta" id="__ID__-cta" href="https://example.com" target="_blank" rel="noopener">example.com →</a>
+    <a class="cta" id="__ID__-cta" href="https://example.com" target="_blank" rel="noopener">example.com <svg class="lucide-arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></a>
     <div class="contact muted">your@email · your.site</div>
   </div>
   <div class="narration-slot"></div>

package/templates/layouts/cover-band.html

@@ -0,0 +1,44 @@
+<!--
+layout: cover-band
+summary: A cover with the picture full bleed and the title on a solid, inked panel of the theme's paper in the bottom-left, so the title's contrast never depends on the picture.
+use: the first slide when the picture is the story (a place, an object, a crowd) and wants the whole frame. Its .art is a placeholder check fails on: put in a wide picture of the real subject (gen-image / generate_image, 16:9) as <img class="art">; keep the subject top or top-right: the panel covers the bottom-left and the presenter the bottom-right. The panel grows with the title; never move the title off the panel onto the picture. Without art the panel sits on the slide's ground.
+slot: bottom-right
+presenter: stage
+nopresenter: The panel may widen into the corner the presenter held.
+cues: [wave] at the hello, [look: h1] when the narration says the title.
+script: Hi, [wave] this is __TITLE__. [look: h1] One idea, in a few minutes.
+-->
+<style>
+  /* The picture fills the slide; the title sits on a solid panel of the theme's paper in the bottom-left, never on the picture. */
+  .l-cover-band { justify-content: flex-end; align-items: flex-start; overflow: hidden; }
+  /* A brand logo (applyBrand puts it first in the slide) sits top-left on the picture, not on the panel's edge. */
+  .l-cover-band:has(> .art) > .brand-logo { position: absolute; top: 28px; left: 72px; }
+  .l-cover-band .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+  .l-cover-band div.art { background: color-mix(in srgb, var(--ink) 6%, var(--paper)) repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 10%, transparent) 0 2px, transparent 2px 22px); }
+  .l-cover-band div.art::after { content: "Art goes here"; position: absolute; left: 70%; top: 34%; transform: translate(-50%, -50%); padding: 14px 26px; border: 3px dashed var(--ink); border-radius: 16px; background: var(--paper); color: var(--ink); font: 700 24px var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
+  .l-cover-band .content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; max-width: 980px; padding: 36px 44px 40px; border: 4px solid var(--ink); border-radius: 28px; background: var(--paper); color: var(--ink); box-shadow: 14px 14px 0 var(--ink); }
+  .l-cover-band .tt { font-size: min(var(--t-display), 96px); line-height: .92; }
+  .l-cover-band:not(:has(> .art)) { justify-content: center; }
+  @media (max-width: 650px) {
+    /* Phones: the picture across the top, the panel below it, down to the presenter's corner. */
+    .l-cover-band { justify-content: flex-start; align-items: stretch; gap: 0; }
+    .l-cover-band .art { position: relative; inset: auto; flex: none; width: auto; height: 210px; margin: -28px -20px 0; }
+    .l-cover-band div.art::after { left: 50%; top: 50%; padding: 8px 14px; border-width: 2px; font-size: 13px; }
+    .l-cover-band .content { gap: 12px; margin-top: -36px; padding: 18px 18px 20px; border-width: 2px; border-radius: 16px; box-shadow: 6px 6px 0 var(--ink); }
+    .l-cover-band .tt { font-size: var(--t-display); }
+    .l-cover-band:has(> .art) > .brand-logo { top: 12px; left: 20px; }
+  }
+  /* No presenter (:root.hd-no-presenter: no face and no captions, deck_guide look): the corner is free. Phones keep this layout's rules. */
+  @media (min-width: 651px) {
+    :root.hd-no-presenter .l-cover-band .content { max-width: 1200px; }
+  }
+</style>
+<section class="slide l-cover-band" id="__ID__" data-chapter="Hello" data-note="Title slide: no facts.">
+  <div class="art" role="presentation"></div>
+  <div class="content">
+    <div class="kicker">__SLUG__</div>
+    <h1 class="tt" data-title-mobile="__TITLE__">__TITLE__</h1>
+    <p class="lead">One sentence on what this deck is about.</p>
+  </div>
+  <div class="narration-slot"></div>
+</section>