@hypersocial/decks-cli 0.9.6 → 0.9.8

package/templates/layouts/_deck.html

@@ -56,12 +56,17 @@
     /* 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;
     --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); }
   .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); }
   .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; }
   .lead { font-size: var(--t-lead); line-height: 1.3; max-width: 28em; text-wrap: pretty; }
@@ -71,6 +76,12 @@
   .narration-slot { position: absolute; right: 56px; bottom: 64px; }
   .slot-left .narration-slot { right: auto; left: 56px; }
   .slot-top .narration-slot { top: 96px; bottom: auto; }
+  /* No presenter (no face AND no captions, e.g. presenter none on a
+     data-silent deck; or forced off by setPresenterOff): the player puts
+     .hd-no-presenter on the root and hides the slot, each layout's
+     no-presenter variant (:root.hd-no-presenter .l-…) uses the corner, and on
+     phones the slide drops its 170px bottom padding (below). Keep custom slides
+     compatible: leave the corner to .narration-slot, no hard-coded right gutter. */
   .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s; }
   .reveal.is-revealed { opacity: 1; transform: none; }
   /* The phone card (product's .frame.card, the phones row): a frameless phone,
@@ -97,17 +108,57 @@
   .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%); }
   .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%); }
+  /* 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. */
+  .sticker { --tilt: -3deg; display: inline-grid; place-items: center; flex: none; width: 96px; height: 96px; padding: 18px; border: 4px solid var(--ink); border-radius: 26px; background: var(--card); color: var(--ink); box-shadow: 6px 6px 0 var(--ink); transform: rotate(var(--tilt)); }
+  .sticker > :is(img, svg) { width: 100%; height: 100%; object-fit: contain; }
+  .sticker.photo { padding: 0; overflow: hidden; }
+  .sticker.photo > img { object-fit: cover; }
+  .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); }
+  .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); }
+  /* 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::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
      the corner, so keep the bottom 170px clear. */
   @media (max-width: 650px) {
     :root { --t-display: 54px; --t-title: 38px; --t-sub: 28px; --t-lead: 17px; --t-body: 15px; --t-label: 12px; }
     .slide { padding: 28px 20px 170px; gap: 14px; }
     .narration-slot { right: 12px; left: 12px; bottom: 64px; }
+    :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%); }
     .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; }
+    .ticks li::before { width: 9px; height: 9px; border-radius: 3px; }
+    .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; }
   }
 </style>
 <!-- LAYOUT STYLES -->

package/templates/layouts/chart.html

@@ -4,6 +4,7 @@ summary: A chart of real numbers with its takeaway in one line; the presenter be
 use: a trend or a comparison in numbers. Its svg is a placeholder of made-up numbers check fails on: draw the real data with `hyperdecks chart` (render_chart; never a generated picture of a chart) as <img class="chart"> and name the data's source.
 slot: bottom-right
 presenter: stage
+nopresenter: The chart spans both columns, under the takeaway.
 cues: [look: #__ID__-chart] when the narration turns to it; [reveal: #__ID__-takeaway] at the point.
 script: Here are the numbers. [look: #__ID__-chart] The last bar is the one to see. [reveal: #__ID__-takeaway]
 -->
@@ -23,6 +24,10 @@ script: Here are the numbers. [look: #__ID__-chart] The last bar is the one to s
     .l-chart .chart { height: 210px; flex: none; }
     .l-chart .takeaway { padding-left: 12px; border-left-width: 4px; }
   }
+  /* 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-chart .chart { grid-column: 1 / -1; }
+  }
 </style>
 <section class="slide l-chart" id="__ID__" data-chapter="The numbers" data-note="Data: name the source of the numbers and the period they cover.">
   <div class="kicker">The numbers</div>

package/templates/layouts/closer.html

@@ -4,6 +4,7 @@ summary: The last slide. One line, the one action to take (a command, a link) an
 use: the end. One call to action, never three. Label an ask that is not agreed as Proposed.
 slot: bottom-left
 presenter: stage
+nopresenter: The line and the action drop the left gutter and re-centre in the full frame.
 cues: [go: #__ID__-cta] at the action, [go: slot] and [wave] at the goodbye.
 script: That's it. [go: #__ID__-cta] Here is the one thing to do next. Thanks [go: slot] for watching! [wave]
 -->
@@ -16,6 +17,10 @@ script: That's it. [go: #__ID__-cta] Here is the one thing to do next. Thanks [g
     .l-closer .content { padding-left: 0; justify-content: flex-start; gap: 16px; }
     .l-closer .cta { padding: 12px 16px; border-radius: 14px; font-size: 15px; }
   }
+  /* 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-closer .content { padding-left: 0; align-self: center; align-items: center; text-align: center; }
+  }
 </style>
 <section class="slide on-ink l-closer slot-left" id="__ID__" data-chapter="Next" data-note="Closing slide: the link or command is the deck's own call to action.">
   <div class="content">

package/templates/layouts/compare.html

@@ -4,6 +4,7 @@ summary: Before and after (or them and us) side by side, three short lines each.
 use: the change your idea makes. Keep the rows parallel so each line has its counterpart.
 slot: bottom-right
 presenter: stage
+nopresenter: The two columns widen to the full frame.
 cues: [look: #__ID__-before] on the old way, [go: #__ID__-after] on the new; [go: slot] to come home.
 script: Today it looks like this. [look: #__ID__-before] With us, [go: #__ID__-after] it looks like this. [go: slot]
 -->
@@ -21,6 +22,10 @@ script: Today it looks like this. [look: #__ID__-before] With us, [go: #__ID__-a
     .l-compare .label { margin-bottom: 4px; }
     .l-compare li { padding: 5px 0; }
   }
+  /* 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-compare .cols { max-width: none; }
+  }
 </style>
 <section class="slide l-compare" id="__ID__" data-chapter="Before and after" data-note="Source: name where each side's facts come from.">
   <div class="kicker">Before and after</div>

package/templates/layouts/features.html

@@ -4,6 +4,7 @@ summary: Three features side by side, an icon, a name and one line each; the pre
 use: what it does, the three reasons, the three parts. Swap each icon for a real one: `hyperdecks icons search <word>` (search_icons) gives inline SVG in currentColor.
 slot: bottom-right
 presenter: stage
+nopresenter: The title and cards centre vertically and the cards grow a little, instead of leaving a strip below for the presenter.
 cues: [go: #__ID__-f1], [go: #__ID__-f2], [go: #__ID__-f3] at the word that starts each, then [go: slot].
 script: It does three things. First, [go: #__ID__-f1] it writes. Then [go: #__ID__-f2] it speaks. Last, [go: #__ID__-f3] it sends. [go: slot]
 -->
@@ -22,6 +23,11 @@ script: It does three things. First, [go: #__ID__-f1] it writes. Then [go: #__ID
     .l-features b { font-size: 18px; }
     .l-features p { 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-features { justify-content: center; }
+    :root.hd-no-presenter .l-features .card { padding: 36px 34px; }
+  }
 </style>
 <section class="slide l-features" id="__ID__" data-chapter="What it does" data-note="Source: name the spec, docs or repo each feature is described in.">
   <div class="kicker">What it does</div>

package/templates/layouts/hero.html

@@ -4,6 +4,7 @@ summary: The opening. One display-size line, a visual on the right, the presente
 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.
 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.
 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.
 -->
@@ -21,6 +22,10 @@ script: Hi, [wave] this is __TITLE__. [look: h1] One idea, in a few minutes.
     .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; }
   }
+  /* 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:not(:has(> .art)) .content { align-self: center; align-items: center; text-align: center; max-width: 1200px; }
+  }
 </style>
 <section class="slide on-accent l-hero" id="__ID__" data-chapter="Hello" data-note="Title slide: no facts.">
   <div class="art" role="presentation"></div>

package/templates/layouts/number.html

@@ -4,6 +4,7 @@ summary: One big number, what it measures and its source. The number is the slid
 use: proof, traction, a before/after delta. Never an estimate shown as fact: the source line is required.
 slot: bottom-right
 presenter: stage
+nopresenter: The figure, title and source re-centre in the full frame.
 cues: [look: #__ID__-figure] as the narration says the number; [reveal: #__ID__-source] optional.
 script: Here is the number that matters. [look: #__ID__-figure] Three times faster.
 -->
@@ -17,6 +18,10 @@ script: Here is the number that matters. [look: #__ID__-figure] Three times fast
     .l-number .content { justify-content: flex-start; gap: 12px; }
     .l-number .figure { font-size: 120px; }
   }
+  /* 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-number .content { align-self: center; align-items: center; text-align: center; max-width: 1200px; }
+  }
 </style>
 <section class="slide on-ink l-number" id="__ID__" data-chapter="The number" data-note="Source: name the dashboard, report or email the number comes from, with its date.">
   <div class="content">

package/templates/layouts/phones.html

@@ -4,6 +4,7 @@ summary: A fanned row of two to four phone cards (the inner ones larger and in f
 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
+nopresenter: The copy centres vertically beside the row instead of leaving the bottom-left free.
 cues: [look: #__ID__-row] when the narration turns to the app; [go: #__ID__-p1] … [go: #__ID__-p3] to walk the screens, then [go: slot].
 script: Here is the app on a phone. [look: #__ID__-row] You start here, [go: #__ID__-p1] you pick one, [go: #__ID__-p2] and it is done. [go: #__ID__-p3] [go: slot]
 -->
@@ -32,6 +33,10 @@ script: Here is the app on a phone. [look: #__ID__-row] You start here, [go: #__
     .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; }
   }
+  /* 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.">
   <div class="text">

package/templates/layouts/product.html

@@ -4,6 +4,7 @@ summary: A product screenshot in a browser frame (for a phone shot, .frame.card:
 use: a demo moment. Its .shot is a placeholder check fails on: put in `hyperdecks screenshot <url>` (capture_url) output as <img class="shot">; a callout chip names what to look at. For a phone app, make the frame `<div class="frame card" id="__ID__-frame">` holding only the shot (a phone screenshot or a `<video class="shot" autoplay muted loop playsinline>` clip) and the callout; tilt and shadow colour are `--tilt` and `--shadow` on it. `.frame.phone` (the black bezel) stays for older decks.
 slot: bottom-right
 presenter: stage
+nopresenter: The copy centres vertically beside the screenshot instead of leaving the bottom-right free.
 cues: [look: #__ID__-frame] when the narration turns to the product; [reveal: #__ID__-callout] for the detail.
 script: This is the product. [look: #__ID__-frame] Look at this part. [reveal: #__ID__-callout]
 -->
@@ -45,6 +46,10 @@ script: This is the product. [look: #__ID__-frame] Look at this part. [reveal: #
     .l-product .frame.card { align-self: center; }
     .l-product .callout { left: 10px; bottom: 10px; padding: 6px 12px; font-size: 12px; }
   }
+  /* 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-product .text { align-self: center; }
+  }
 </style>
 <section class="slide l-product" id="__ID__" data-chapter="The product" data-note="Screenshot: name the page and the date it was captured.">
   <div class="text">

package/templates/layouts/quote.html

@@ -4,6 +4,7 @@ summary: One quote, large, with who said it. The quote is the title.
 use: a customer or user in their own words. Quote them exactly and name the source in data-note.
 slot: bottom-left
 presenter: stage
+nopresenter: The quote drops its left gutter and re-centres in the full frame.
 cues: [look: #__ID__-quote] as the narration reads it.
 script: In their words. [look: #__ID__-quote] Here is what they told us.
 -->
@@ -20,6 +21,11 @@ script: In their words. [look: #__ID__-quote] Here is what they told us.
     .l-quote .quote { font-size: 32px; }
     .l-quote .avatar { width: 44px; height: 44px; font-size: 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-quote .content { padding-left: 0; align-self: center; align-items: center; text-align: center; max-width: 1240px; }
+    :root.hd-no-presenter .l-quote .quote { text-indent: 0; }
+  }
 </style>
 <section class="slide on-accent l-quote slot-left" id="__ID__" data-chapter="In their words" data-note="Quote: name who said it, where (email, call, review) and when.">
   <figure class="content">

package/templates/layouts/split.html

@@ -0,0 +1,53 @@
+<!--
+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.
+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
+nopresenter: The copy centres vertically beside the picture instead of leaving the bottom-left free.
+cues: [look: #__ID__-frame] when the narration turns to the picture; [go: #__ID__-t1], [go: #__ID__-t2], [go: #__ID__-t3] at the word that starts each tick, then [go: slot].
+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 .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 .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); }
+  @media (max-width: 650px) {
+    .l-split { display: flex; flex-direction: column; align-items: stretch; }
+    .l-split .text { gap: 10px; padding-top: 0; }
+    .l-split .head { gap: 12px; }
+    .l-split .media { height: auto; }
+    .l-split .frame.card { width: 128px; }
+    .l-split .shot.wide { border-radius: 10px; box-shadow: 6px 6px 0 var(--accent); }
+  }
+  /* 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-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.">
+  <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>
+      <div class="kicker">The product · Live</div>
+    </div>
+    <h2 class="tt" data-title-mobile="Here it is.">Here it is, doing the job.</h2>
+    <p class="lead">One line on what the picture shows.</p>
+    <ul class="ticks">
+      <li id="__ID__-t1">The first thing it does</li>
+      <li id="__ID__-t2">The second thing</li>
+      <li id="__ID__-t3">The third thing</li>
+    </ul>
+  </div>
+  <div class="media">
+    <div class="frame card" id="__ID__-frame"><div class="shot" role="img" aria-label="Phone screen placeholder"></div></div>
+  </div>
+  <div class="narration-slot"></div>
+</section>

package/templates/layouts/team.html

@@ -4,6 +4,7 @@ summary: Up to four people, a face, a name and a role each; the presenter flies
 use: who is behind it, who to talk to. Use real photos only with permission; initials otherwise.
 slot: bottom-right
 presenter: stage
+nopresenter: The title and people centre vertically and the cards grow a little, instead of leaving a strip below for the presenter.
 cues: [go: #__ID__-p1] … [go: #__ID__-p4] at each name, then [go: slot].
 script: Meet the team. [go: #__ID__-p1] Ana builds it. [go: #__ID__-p2] Sam sells it. [go: #__ID__-p3] Lee runs it. [go: #__ID__-p4] Kai designs it. [go: slot]
 -->
@@ -23,6 +24,11 @@ script: Meet the team. [go: #__ID__-p1] Ana builds it. [go: #__ID__-p2] Sam sell
     .l-team b { font-size: 16px; }
     .l-team small { font-size: 10px; }
   }
+  /* 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-team { justify-content: center; }
+    :root.hd-no-presenter .l-team .person { padding: 32px 30px; }
+  }
 </style>
 <section class="slide l-team" id="__ID__" data-chapter="The team" data-note="People: names and roles as they gave them; photos only with their permission.">
   <div class="kicker">The team</div>

package/templates/layouts/timeline.html

@@ -4,6 +4,7 @@ summary: Four milestones on a line, left to right, the presenter flying under ea
 use: history, a roadmap, a process over time. Label future steps "Proposed" if not agreed.
 slot: bottom-right
 presenter: stage
+nopresenter: The title and milestones centre vertically instead of leaving a strip below for the presenter.
 cues: [go: #__ID__-m1] … [go: #__ID__-m4] at the word that starts each milestone, then [go: slot].
 script: It started [go: #__ID__-m1] with a sketch. Then [go: #__ID__-m2] a first user. Then [go: #__ID__-m3] a launch. Next, [go: #__ID__-m4] the plan. [go: slot]
 -->
@@ -25,6 +26,10 @@ script: It started [go: #__ID__-m1] with a sketch. Then [go: #__ID__-m2] a first
     .l-timeline b { font-size: 18px; margin-bottom: 2px; }
     .l-timeline p { 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-timeline { justify-content: center; }
+  }
 </style>
 <section class="slide l-timeline" id="__ID__" data-chapter="How we got here" data-note="Source: name where each date comes from.">
   <div class="kicker">How we got here</div>