@hypersocial/decks-cli 0.9.9 → 0.9.11

package/templates/layouts/cover-poster.html

@@ -0,0 +1,42 @@
+<!--
+layout: cover-poster
+summary: A poster cover: the picture across the top, edge to edge, and the title below it on the slide's ground. The picture takes whatever height the title leaves, so a long title shortens the picture instead of covering it.
+use: the first slide when the picture is a scene or a landscape that crops well to a wide strip. Its .art is a placeholder check fails on: put in a wide picture of the real subject (gen-image / generate_image, 16:9 or wider) as <img class="art">; keep the subject in the middle band, the strip crops top and bottom. Never move the title up onto the picture. Without art the title fills the slide.
+slot: bottom-right
+presenter: stage
+nopresenter: The title and lead run the slide's full width instead of stopping short of the corner.
+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 is a flexible strip in the slide's flow; the text below it keeps its natural height. */
+  .l-cover-poster { gap: 0; }
+  /* A brand logo (applyBrand puts it first in the slide) sits on the picture's top-left, out of the flow, so the strip still starts at the top edge. */
+  .l-cover-poster:has(> .art) > .brand-logo { position: absolute; top: 28px; left: 72px; }
+  .l-cover-poster .art { display: block; flex: 1 1 0; min-height: 240px; width: auto; margin: -64px -72px 0; object-fit: cover; border-bottom: 4px solid var(--ink); }
+  .l-cover-poster div.art { position: relative; 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-poster div.art::after { content: "Art goes here"; position: absolute; left: 50%; top: 50%; 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-poster .content { flex: none; display: flex; flex-direction: column; gap: 18px; padding: 40px 400px 0 0; }
+  .l-cover-poster .tt { font-size: min(var(--t-display), 104px); line-height: .92; }
+  .l-cover-poster:not(:has(> .art)) .content { flex: 1; justify-content: center; padding-top: 0; }
+  @media (max-width: 650px) {
+    .l-cover-poster .art { flex: none; height: 196px; min-height: 0; margin: -28px -20px 0; border-bottom-width: 2px; }
+    .l-cover-poster div.art::after { padding: 8px 14px; border-width: 2px; font-size: 13px; }
+    .l-cover-poster .content { gap: 12px; padding: 18px 0 0; }
+    .l-cover-poster:has(> .art) > .brand-logo { top: 12px; left: 20px; }
+    .l-cover-poster .tt { font-size: var(--t-display); }
+  }
+  /* 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-poster .content { padding-right: 0; }
+  }
+</style>
+<section class="slide l-cover-poster" 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>

package/templates/layouts/cover-type.html

@@ -0,0 +1,31 @@
+<!--
+layout: cover-type
+summary: A type-only cover: the title, big, on the theme's own ground and texture, with the presenter large in the corner as the visual. No picture to fill.
+use: the first slide when there is no picture that shows the real subject yet, or the deck is about an idea more than a thing. Swap the ground (on-ink, on-accent, on-tint) and keep one signature texture (bg-corner or bg-mark) at most; the title stays clear of it. Nothing to fill: it passes check as scaffolded.
+slot: bottom-right
+presenter: stage
+nopresenter: The title widens 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>
+  .l-cover-type .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 30px; max-width: 980px; }
+  .l-cover-type .tt { font-size: calc(var(--t-display) * 1.12); line-height: .88; letter-spacing: -.05em; }
+  .l-cover-type .lead { max-width: 24em; }
+  @media (max-width: 650px) {
+    .l-cover-type .content { justify-content: flex-start; gap: 16px; padding-top: 24px; }
+    .l-cover-type .tt { font-size: calc(var(--t-display) * 1.08); }
+  }
+  /* 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-type .content { max-width: 1240px; }
+  }
+</style>
+<section class="slide on-ink l-cover-type bg-corner" id="__ID__" data-chapter="Hello" data-presenter-size="l" data-note="Title slide: no facts.">
+  <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>

package/templates/layouts/hero.html

@@ -1,29 +1,44 @@
 <!--
 layout: hero
-summary: The opening. One display-size line, a visual on the right, the presenter's hello.
-use: the first slide; a section opener. Its .art is a placeholder check fails on: put in a picture of the real subject (gen-image / generate_image) as <img class="art">, or delete the div and let the presenter be the visual.
+summary: The opening, as a split cover: the title on the slide's own ground on the left, the picture in a clean frame top-right, the presenter's hello. Text never sits on the picture.
+use: the first slide (the default cover); a section opener. Its .art is a placeholder check fails on: put in a picture of the real subject (gen-image / generate_image, landscape or near-square: the frame is about 7:6) as <img class="art">, or delete the div and the title takes the full frame with the presenter as the visual. Never lay the title over the picture or fade the picture behind it. Other covers: cover-band (the picture full bleed, the title on a solid panel), cover-poster (the picture on top, the title below) and cover-type (type only).
 slot: bottom-right
 presenter: stage
-nopresenter: With art (the placeholder div counts), unchanged: the art already fills the right. Delete the art and the line re-centres in the full frame.
+nopresenter: With art, the picture grows to the full height of its column. Delete the art and the line re-centres in the full frame.
 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>
-  .l-hero { overflow: hidden; }
-  .l-hero .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; max-width: 980px; position: relative; z-index: 1; }
+  /* The title and the picture are two columns: whatever the title's length, it never reaches the picture. */
+  .l-hero .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; max-width: 980px; }
   .l-hero .tt { font-size: var(--t-display); line-height: .9; }
-  /* Swap the div for an <img class="art"> of your file (gen-image, wide), or delete it for no art. */
-  .l-hero .art { position: absolute; top: 0; right: 0; width: 820px; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent, #000 32%); mask-image: linear-gradient(to right, transparent, #000 32%); }
+  /* With art: the title on the left on the slide's ground; the picture framed top-right, the presenter's corner below it. */
+  .l-hero:has(> .art) { display: grid; grid-template-columns: minmax(0, 1fr) 560px; grid-template-rows: minmax(0, 1fr); column-gap: 72px; }
+  .l-hero:has(> .art) .content { grid-column: 1; grid-row: 1; max-width: none; }
+  .l-hero:has(> .art) .tt { font-size: min(var(--t-display), 112px); }
+  /* A brand logo (applyBrand puts it first in the slide) heads the title column; the picture spans both rows. */
+  .l-hero:has(> .art):has(> .brand-logo) { grid-template-rows: auto minmax(0, 1fr); }
+  .l-hero:has(> .art) > .brand-logo { grid-column: 1; grid-row: 1; }
+  .l-hero:has(> .art):has(> .brand-logo) .content { grid-row: 2; }
+  .l-hero:has(> .art):has(> .brand-logo) .art { grid-row: 1 / -1; }
+  /* Swap the div for an <img class="art"> of your file (gen-image, landscape or square), or delete it for no art. */
+  .l-hero .art { grid-column: 2; grid-row: 1; align-self: start; display: block; width: 100%; height: 480px; margin-top: 8px; border: 4px solid var(--ink); border-radius: 28px; object-fit: cover; box-shadow: 14px 14px 0 var(--ink); }
+  .on-ink.l-hero .art { border-color: var(--paper); box-shadow: 14px 14px 0 var(--accent); }
   /* Until then a labelled, hatched stand-in, so it reads as a slot to fill; check fails while it is here. */
-  .l-hero div.art { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 10%, transparent) 0 2px, transparent 2px 22px); }
-  .l-hero div.art::after { content: "Art goes here"; position: absolute; left: 64%; top: 40%; 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-hero div.art { position: relative; background: var(--paper) repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 10%, transparent) 0 2px, transparent 2px 22px); }
+  .l-hero div.art::after { content: "Art goes here"; position: absolute; left: 50%; top: 50%; 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; }
   @media (max-width: 650px) {
-    .l-hero .content { justify-content: flex-start; gap: 16px; padding-top: 200px; }
-    .l-hero .art { width: 100%; height: 230px; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
-    .l-hero div.art::after { left: 50%; top: 45%; padding: 8px 14px; border-width: 2px; font-size: 13px; }
+    /* Phones: the picture above, the title below it on the ground. */
+    .l-hero:has(> .art) { display: flex; }
+    .l-hero:has(> .art) .tt { font-size: var(--t-display); }
+    .l-hero .content { flex: none; justify-content: flex-start; gap: 16px; }
+    .l-hero .art { flex: none; height: 176px; margin-top: 0; border-width: 2px; border-radius: 16px; box-shadow: 6px 6px 0 var(--ink); }
+    .on-ink.l-hero .art { box-shadow: 6px 6px 0 var(--accent); }
+    .l-hero div.art::after { padding: 8px 14px; border-width: 2px; font-size: 13px; }
   }
   /* 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-hero:has(> .art) .art { align-self: stretch; height: auto; margin-top: 0; }
     :root.hd-no-presenter .l-hero:not(:has(> .art)) .content { align-self: center; align-items: center; text-align: center; max-width: 1200px; }
   }
 </style>

package/templates/layouts/phones.html

@@ -1,6 +1,6 @@
 <!--
 layout: phones
-summary: A fanned row of two to four phone cards (the inner ones larger and in front, the outer ones tilted out), the point in the column beside it.
+summary: A fanned row of two to four phone cards (the inner ones larger and in front, the outer ones tilted out), the point in the column beside it. The row stands on a dot plate (bg-stage).
 use: a phone app's flow or its key screens. Each card's .shot is a placeholder check fails on: put in a phone-size screenshot (`hyperdecks screenshot <url> --width 390 --height 844`, capture_url) as <img class="shot">, or a screen recording as <video class="shot" autoplay muted loop playsinline>. Two to four cards: the row spaces and tilts them (on phones only the first three show); change one card's --tilt or --shadow on it. One phone only: use product with .frame.card.
 slot: bottom-left
 presenter: stage
@@ -18,7 +18,7 @@ script: Here is the app on a phone. [look: #__ID__-row] You start here, [go: #__
   .l-phones .row { grid-area: row; display: flex; justify-content: center; align-items: center; padding: 0 0 40px; }
   .l-phones .row > .frame.card { --tilt: 0deg; flex: none; width: 260px; margin: 0 -14px; }
   .l-phones .row > .frame.card:first-child { --tilt: -7deg; --shadow: var(--accent-2); translate: 0 36px; }
-  .l-phones .row > .frame.card:last-child { --tilt: 7deg; --shadow: var(--accent-3); translate: 0 36px; }
+  .l-phones .row > .frame.card:last-child { --tilt: 7deg; --shadow: var(--accent-3, var(--accent-2)); translate: 0 36px; }
   .l-phones .row > .frame.card:not(:first-child, :last-child) { width: 300px; z-index: 1; }
   .l-phones .row:has(> :nth-child(4)) > .frame.card { width: 220px; }
   .l-phones .row:has(> :nth-child(4)) > .frame.card:not(:first-child, :last-child) { width: 250px; }
@@ -31,14 +31,14 @@ script: Here is the app on a phone. [look: #__ID__-row] You start here, [go: #__
     .l-phones .row > .frame.card:is(:first-child, :last-child) { translate: 0 16px; }
     /* Four do not fit the phone card: the row keeps the first three, the third as its end. */
     .l-phones .row > .frame.card:nth-child(n + 4) { display: none; }
-    .l-phones .row:has(> :nth-child(4)) > .frame.card:nth-child(3) { --tilt: 7deg; --shadow: var(--accent-3); width: 108px; translate: 0 16px; }
+    .l-phones .row:has(> :nth-child(4)) > .frame.card:nth-child(3) { --tilt: 7deg; --shadow: var(--accent-3, var(--accent-2)); width: 108px; translate: 0 16px; }
   }
   /* 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-phones .text { align-self: center; }
   }
 </style>
-<section class="slide l-phones slot-left bg-dots" id="__ID__" data-chapter="On a phone" data-note="Phone screens: name the app build and the date they were captured.">
+<section class="slide l-phones slot-left bg-stage" id="__ID__" data-chapter="On a phone" data-note="Phone screens: name the app build and the date they were captured.">
   <div class="text">
     <div class="kicker">On a phone</div>
     <h2 class="tt" data-title-mobile="Three taps.">Three taps, start to finish.</h2>
@@ -53,7 +53,7 @@ script: Here is the app on a phone. [look: #__ID__-row] You start here, [go: #__
   <div class="deco" aria-hidden="true">
     <span style="left: 52%; top: 8%; background: var(--accent); rotate: -10deg;">★</span>
     <span style="left: 92%; top: 42%; background: var(--accent-2); rotate: 12deg;">♪</span>
-    <span style="left: 48%; top: 78%; background: var(--accent-3); rotate: 8deg;">☺</span>
+    <span style="left: 48%; top: 78%; background: var(--accent-3, var(--accent-2)); rotate: 8deg;">☺</span>
   </div> -->
   <div class="narration-slot"></div>
 </section>

package/templates/layouts/split.html

@@ -1,6 +1,6 @@
 <!--
 layout: split
-summary: Image plus copy: the copy on the left (a sticker for the logo or icon, kicker, title, one line, three ticks), a real picture on the right in a phone card, on speed lines.
+summary: Image plus copy: the copy on the left (a sticker for the logo or icon, kicker, title, one line, three ticks), a real picture on the right in a phone card (the picture is the background; add bg-pool to light it).
 use: the workhorse for a product, a feature or an app: most slides of a good deck are this one. The phone's .shot is a placeholder check fails on: put in a phone screenshot (capture_url at 390×844) or a screen recording (upload_deck_asset) as <img class="shot"> or <video class="shot" autoplay muted loop playsinline>. For a desktop app, replace the card with <div class="frame laptop" id="__ID__-frame"><img class="shot" src="…" alt="…"></div>; for a 16:9 clip or photo, <img class="shot wide" src="…" alt="…" id="__ID__-frame">. Swap the sticker's icon for the product's logo (<span class="sticker photo"><img src="…" alt=""></span>) or one icon from the deck's set.
 slot: bottom-left
 presenter: stage
@@ -9,13 +9,13 @@ cues: [look: #__ID__-frame] when the narration turns to the picture; [go: #__ID_
 script: Here it is, doing the job. [look: #__ID__-frame] It starts with [go: #__ID__-t1] the first thing. Then [go: #__ID__-t2] the second. And [go: #__ID__-t3] the third. [go: slot]
 -->
 <style>
-  .l-split { display: grid; grid-template-columns: 680px 1fr; column-gap: 64px; align-items: center; }
+  .l-split { display: grid; grid-template-columns: 680px minmax(0, 1fr); column-gap: 64px; align-items: center; }
   .l-split .text { align-self: start; display: flex; flex-direction: column; gap: 22px; padding-top: 24px; }
   .l-split .head { display: flex; align-items: center; gap: 22px; }
   .l-split .tt { font-size: var(--t-sub); line-height: 1.02; }
   .l-split .lead { font-size: var(--t-body); }
   .l-split .ticks { margin-top: 6px; }
-  .l-split .media { display: grid; place-items: center; height: 100%; }
+  .l-split .media { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; height: 100%; min-width: 0; }
   .l-split .frame.card { width: 300px; --tilt: 4deg; }
   .l-split .shot.wide { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; object-fit: cover; box-shadow: 14px 14px 0 var(--accent); }
   .on-accent.l-split .shot.wide { box-shadow: 14px 14px 0 var(--ink); }
@@ -32,7 +32,7 @@ script: Here it is, doing the job. [look: #__ID__-frame] It starts with [go: #__
     :root.hd-no-presenter .l-split .text { align-self: center; padding-top: 0; }
   }
 </style>
-<section class="slide l-split slot-left bg-lines" id="__ID__" data-chapter="The product" data-note="Picture: name the screen or clip and the date it was captured.">
+<section class="slide l-split slot-left" id="__ID__" data-chapter="The product" data-note="Picture: name the screen or clip and the date it was captured.">
   <div class="text">
     <div class="head">
       <span class="sticker" id="__ID__-logo"><svg class="lucide-smartphone" 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"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg></span>

package/templates/narrated-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">
@@ -54,7 +123,7 @@
   .slide { display: flex; flex-direction: column; gap: 28px; padding: 64px 72px 56px; background: var(--paper); }
   .slide.accent { background: var(--accent); }
   .kicker { font: 18px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
-  .tt { font-family: var(--display, var(--font)); font-size: 104px; line-height: .95; letter-spacing: -.045em; margin: 0; text-wrap: balance; }
+  .tt { font-family: var(--display, var(--font)); font-weight: var(--display-weight, 700); font-synthesis: none; font-size: 104px; line-height: .95; letter-spacing: var(--display-tracking, -.045em); margin: 0; text-wrap: balance; }
   .lead { font-size: 32px; line-height: 1.3; max-width: 30em; margin: 0; }
   .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-right: 500px; }
   /* The presenter glides to each slide's slot; slots alternate sides so the
@@ -156,6 +225,8 @@
 <!-- `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).
+     deck new, deck narrator and narrate write the narrator's face here
+     (data-presenter-from="narrator", so release follows a later narrator).
      data-presenter-style: stage (large head, lower-third captions), bubble,
      glass (frosted panel) or corner (small head, subtitles). -->
 <script type="module" src="https://hyperdecks.ai/player/v1/player.js"