Monorepo for Aesthetic.Computer
aesthetic.computer
recap/audience: jeffrey-24h cut for 2026-04-30
Sibling to jeffrey-24h.mjs (yesterday's cut) so the previous run stays
intact for reference. New this cut:
- Per-slide CSS color-name "address" drawn from `cssColors` in
lib/num.mjs — the AC color dictionary. Each content slide carries
one named entry that drives the chapter tint, an on-screen swatch,
and the rgb caption. Across the recap series these become a slow
lesson in the palette.
- 11 content chapters covering the actual day: menuband 0.6 → 0.7 →
0.8 → 0.9 (the YWFT title arc, with 0.9 framed honestly as the
recovery from a misdiagnosed 0.8 fix), the slab polygon icon, the
claude-stop / lid-ambient state work, the fedac/native piano amp
bump, the HP 7585B plotter bring-up, the notepat-keymap slide for
casey, and the recap pipeline maturing (jeffrey-photos prebake).
- Color picks: aliceblue → cornflowerblue → mediumvioletred →
goldenrod → chartreuse → darkorchid → slategray → coral →
seagreen → hotpink → darkturquoise → peachpuff.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+421
+421
recap/audience/jeffrey-24h-2026-04-30.mjs
+421
recap/audience/jeffrey-24h-2026-04-30.mjs
···
1
+
// Audience config: jeffrey-24h, 2026-04-30 cut.
2
+
// Voice: jeffrey-pvc. Style: lowercase, calm, descriptive.
3
+
//
4
+
// New this cut: each content slide carries a CSS color-name "address"
5
+
// drawn from `cssColors` in lib/num.mjs — the AC color dictionary.
6
+
// The chapter tint, the on-screen swatch, and the rgb caption all
7
+
// derive from one named entry, so the slide doubles as a teachable
8
+
// color-vocabulary card. Future cuts can rotate through the rest of
9
+
// the dictionary; over time the recap series becomes a slow lesson
10
+
// in AC's color words.
11
+
//
12
+
// Content slides remain full-bleed gpt-image-2 photos (jeffrey at a
13
+
// real home desk, using the imagined feature on his laptop) with a
14
+
// top gradient overlay. Photos pre-baked by `bin/jeffrey-photos.mjs`
15
+
// into recap/out/jeffrey-photos/<segment>.png and loaded via the
16
+
// standard scout `glob:` query.
17
+
18
+
import { cssColors } from "../../system/public/aesthetic.computer/lib/num.mjs";
19
+
20
+
export const PALETTE = {
21
+
bg: "#0c1430",
22
+
off: "#ffffffcc",
23
+
dim: "#7886b0",
24
+
cream: "#fcf7c5",
25
+
cyan: "#70f0e0",
26
+
};
27
+
28
+
// Helper: pull an [r,g,b] from cssColors and turn it into the strings
29
+
// the slide needs (hex for css, "rgb(r, g, b)" caption, name).
30
+
function colorAddress(name) {
31
+
const rgb = cssColors[name];
32
+
if (!rgb) throw new Error(`colorAddress: unknown css color '${name}'`);
33
+
const [r, g, b] = rgb;
34
+
const hex = "#" + [r, g, b].map((c) => c.toString(16).padStart(2, "0")).join("");
35
+
return { name, rgb, hex, caption: `rgb(${r}, ${g}, ${b})` };
36
+
}
37
+
38
+
// Shared identity + tone preamble. Real iphone-snapshot energy, NOT cinematic.
39
+
const REAL = `\
40
+
Photographic candid lifestyle photo of the man in the reference photos. Real \
41
+
photograph, photo-realistic, the kind of casual iPhone snapshot a friend would \
42
+
take of him at home — NOT illustrated, NOT painted, NOT cinematic, NOT \
43
+
magazine-glossy, NOT AI-poster-glossy. Slight film grain, slightly off-center \
44
+
framing, real natural room light. Identity: same face, same medium-length brown \
45
+
hair, same actual features as the references — recognizably him across the \
46
+
various refs. Keep real skin texture; do NOT smooth or prettify. He is at a \
47
+
real home desk in normal everyday clothes (t-shirt or hoodie, slightly bedheaded). \
48
+
Real, deadpan, very "him". Vertical 1024x1536 portrait orientation.`;
49
+
50
+
export const audience = {
51
+
name: "jeffrey-24h",
52
+
handle: "@jeffrey",
53
+
voice: { provider: "jeffrey", voice: "neutral:0" },
54
+
55
+
narration: `hey everybody, here's the last twenty-four hours at aesthetic computer. the headline this round is menuband — three releases yesterday and one today, all chasing the same title font. zero-six landed the voice palette LCD with a bundled YWFT processing typeface, a qwerty key map, and a proper dark mode. zero-seven swapped the title to a sharp risograph drop shadow — max-contrast text, one-pixel family-color misregister, no soft halo — and gave the LED visualizer a light mode where the hot zone darkens at peak instead of brightening to white. zero-eight thought it caught a bug — both bundled YWFT files share a postscript name, so the bold cut was being silently overwritten — and switched to a font-descriptor family lookup. zero-nine, today, found that fix was wrong. NSFont's descriptor lookup never returns nil on a miss, it just substitutes the system font, so the title was rendering in system black with no error. the real fix loads the dot-ttf descriptor straight from the bundle URL and asserts the family name before drawing. on the menubar side, the polygon status icon got smarter — N sessions equals an N-sided shape, all edges share one hue, and that hue tracks how many sessions are awaiting input. the claude-stop hook now flips active to awaiting instead of clearing, and lid-ambient detects all three shapes of "claude is running." over in fedac native, the piano sample amp went from one-point-eight to three so it sits level with the sine and square voices through notepat. on the hardware bench, the HP seventy-five eighty-five B drafting plotter came up over RS-two-thirty-two — hardware-flow serial sender, a live-limits probe that reads the sheet geometry off the machine, and a native HP-GL composer that renders SVG paths as faceted polylines, with the PALS mark as the first real test. for casey's social-software meeting, a sixteen-by-nine notepat keymap slide — piano plus qwerty with hand-split tints, fading dashed connectors, and QR codes to notepat-dot-com and prompt-dot-ac slash menuband. underneath all of it, the recap pipeline grew up — a new jeffrey twenty-four-hour audience, plus a jeffrey-photos script that pre-bakes full-bleed gpt-image-two portraits with the platter shoot and selfie refs for identity grounding. that's the day. thanks for watching, and i'll be back tomorrow with the next twenty-four.`,
56
+
57
+
// Whisper renders these dictionary-style; rewrite the displayed subtitles.
58
+
// Order matters: longer/multi-word fixes first.
59
+
transcriptFixes: {
60
+
"a static computer": "aesthetic computer",
61
+
"static computer": "aesthetic computer",
62
+
"Menu Band": "menuband",
63
+
"menu band": "menuband",
64
+
"Menuband": "menuband",
65
+
"Menu Bar": "menubar",
66
+
"menu bar": "menubar",
67
+
"YWFT Processing": "ywft processing",
68
+
"YWFT": "ywft",
69
+
"Y W F T": "ywft",
70
+
"PostScript": "postscript",
71
+
"Post Script": "postscript",
72
+
"NS Font": "nsfont",
73
+
"NSFont": "nsfont",
74
+
"dot-TTF": "dot-ttf",
75
+
"dot TTF": "dot-ttf",
76
+
".TTF": ".ttf",
77
+
"Riso": "riso",
78
+
"Risograph": "risograph",
79
+
"LED": "led",
80
+
"LCD": "lcd",
81
+
"QWERTY": "qwerty",
82
+
"Qwerty": "qwerty",
83
+
"Mac OS": "macos",
84
+
"macOS": "macos",
85
+
"MIDI": "midi",
86
+
"GPT-Image-2": "gpt-image-2",
87
+
"GPT Image 2": "gpt-image-2",
88
+
"Fed AC": "fedac",
89
+
"FedAC": "fedac",
90
+
"Note Pat": "notepat",
91
+
"Notepat": "notepat",
92
+
"HP-GL": "hp-gl",
93
+
"HPGL": "hp-gl",
94
+
"RS-232": "rs-232",
95
+
"RS 232": "rs-232",
96
+
"PALS": "pals",
97
+
"Casey": "casey",
98
+
"Claude": "claude",
99
+
"Mac": "mac",
100
+
"MacBook": "macbook",
101
+
"Jeffrey": "jeffrey",
102
+
},
103
+
104
+
segments: [
105
+
{ name: "01_title", marker: "hey everybody" },
106
+
{ name: "02_menuband_06", marker: "zero-six landed" },
107
+
{ name: "03_menuband_07", marker: "zero-seven swapped" },
108
+
{ name: "04_menuband_08", marker: "zero-eight thought" },
109
+
{ name: "05_menuband_09", marker: "zero-nine, today" },
110
+
{ name: "06_polygon", marker: "the polygon status" },
111
+
{ name: "07_stop_ambient", marker: "the claude-stop hook" },
112
+
{ name: "08_piano", marker: "over in fedac native" },
113
+
{ name: "09_plotter", marker: "on the hardware bench" },
114
+
{ name: "10_keymap", marker: "for casey's social-software" },
115
+
{ name: "11_recap", marker: "underneath all of it" },
116
+
{ name: "12_outro", marker: "thanks for watching" },
117
+
{ name: "13_end", marker: "__END__", trailingSilenceSec: 3 },
118
+
],
119
+
120
+
slides: {
121
+
"01_title": {
122
+
colorAddress: colorAddress("aliceblue"),
123
+
metaphor: `${REAL}
124
+
125
+
Scene: he is sitting at a wooden home desk in a wrinkled t-shirt, holding up a \
126
+
single sheet of plain white printer paper next to his face. The paper has \
127
+
"24 HRS" hand-drawn on it in thick black sharpie, slightly crooked letters. He \
128
+
is giving a deadpan grin with one slightly raised eyebrow, mid-laugh, eye-contact \
129
+
with the camera. An open silver MacBook on the desk in the background shows a \
130
+
calendar app with a single highlighted day. Soft afternoon light from a window \
131
+
on the right, warm white balance. A pale-blue (#f0f8ff) ceramic mug sits on \
132
+
the desk — the only pop of accent color, very gentle. Wide shot, his whole \
133
+
upper body and the desk visible. Vertical, 1024x1536.`,
134
+
queries: { photo: { glob: "recap/out/jeffrey-photos/01_title.png" } },
135
+
body: ({ photo }) => photoSlide({
136
+
photo,
137
+
chapter: "00 / 11 · the last 24 hours",
138
+
title: "aesthetic computer",
139
+
cap: "2026·04·30",
140
+
color: colorAddress("aliceblue"),
141
+
}),
142
+
},
143
+
144
+
"02_menuband_06": {
145
+
colorAddress: colorAddress("cornflowerblue"),
146
+
metaphor: `${REAL}
147
+
148
+
Scene: he is hunched over a silver MacBook on a kitchen table, leaning very \
149
+
close to the screen with one finger pointing at a small popover window in the \
150
+
upper-right of the screen. The popover clearly shows: a horizontal LCD-style \
151
+
voice-name strip in the top with "GRAND PIANO" in pixel-style letters, a \
152
+
qwerty keyboard map below it tinted in two halves, and a thin LED visualizer \
153
+
at the bottom in a cool cornflower-blue (#6495ed) tone. The room is in dark \
154
+
mode — the popover is dark with bright highlights, matching the system. He \
155
+
is wearing a hoodie, slightly bedheaded, deadpan focus. Evening light through \
156
+
a window. A coffee mug on the table. Real candid energy.`,
157
+
queries: { photo: { glob: "recap/out/jeffrey-photos/02_menuband_06.png" } },
158
+
body: ({ photo }) => photoSlide({
159
+
photo,
160
+
chapter: "01 / 11 · menuband 0.6",
161
+
title: "voice lcd,\nqwerty map,\ndark mode",
162
+
cap: "ywft processing bundled · slab/menuband",
163
+
color: colorAddress("cornflowerblue"),
164
+
}),
165
+
},
166
+
167
+
"03_menuband_07": {
168
+
colorAddress: colorAddress("mediumvioletred"),
169
+
metaphor: `${REAL}
170
+
171
+
Scene: he is leaning over a silver MacBook on a wooden home desk, peering \
172
+
intently at a small popover at the top of the screen. The popover shows a \
173
+
voice title rendered in crisp high-contrast black text on a light substrate \
174
+
with a single hard 1-pixel medium-violet-red (#c71585) drop shadow offset \
175
+
down-right — clearly a Risograph misregister, NOT a soft halo. Below the \
176
+
title, an LED visualizer in light-mode ink-on-paper styling, with the hot \
177
+
zone darkening at peak. He is in a t-shirt, posture relaxed, holding a print \
178
+
proof sheet of risograph swatches in his free hand for visual rhyme. Bright \
179
+
midday window light. Real candid, deadpan focus.`,
180
+
queries: { photo: { glob: "recap/out/jeffrey-photos/03_menuband_07.png" } },
181
+
body: ({ photo }) => photoSlide({
182
+
photo,
183
+
chapter: "02 / 11 · menuband 0.7",
184
+
title: "riso shadow,\nlight-mode led",
185
+
cap: "1px misregister · ink-on-paper visualizer",
186
+
color: colorAddress("mediumvioletred"),
187
+
}),
188
+
},
189
+
190
+
"04_menuband_08": {
191
+
colorAddress: colorAddress("goldenrod"),
192
+
metaphor: `${REAL}
193
+
194
+
Scene: he is at a home desk holding two printed pages of code side by side, \
195
+
squinting at them with mock-serious detective focus. Both pages show the same \
196
+
font name "YWFT-Processing" in goldenrod-yellow (#daa520) highlighter on the \
197
+
text — a visual nod to "two files, same name." The silver MacBook on the desk \
198
+
shows a code editor with one specific line highlighted. He has a goldenrod \
199
+
yellow sticky-note stuck to his forehead with "BOLD?" written on it in black \
200
+
sharpie, deadpan absurd energy. Soft afternoon window light. Real, slightly \
201
+
goofy, very "him".`,
202
+
queries: { photo: { glob: "recap/out/jeffrey-photos/04_menuband_08.png" } },
203
+
body: ({ photo }) => photoSlide({
204
+
photo,
205
+
chapter: "03 / 11 · menuband 0.8",
206
+
title: "thought we\ncaught it",
207
+
cap: "shared postscript name · descriptor lookup",
208
+
color: colorAddress("goldenrod"),
209
+
}),
210
+
},
211
+
212
+
"05_menuband_09": {
213
+
colorAddress: colorAddress("chartreuse"),
214
+
metaphor: `${REAL}
215
+
216
+
Scene: he is at a home desk in front of a silver MacBook, leaning forward with \
217
+
both hands raised in a small mock-celebratory pose, eyes wide, mouth slightly \
218
+
open. The laptop screen shows the menuband popover with the voice title now \
219
+
rendered in CRISP bold YWFT Processing — clearly a custom typeface, hand-cut \
220
+
geometric letterforms, sitting in a frame highlighted with chartreuse-green \
221
+
(#7fff00) marker. A chartreuse highlighter pen lies on the desk next to a \
222
+
printed page of Swift code with one line circled. Bright morning window light. \
223
+
Real candid, deadpan-but-pleased.`,
224
+
queries: { photo: { glob: "recap/out/jeffrey-photos/05_menuband_09.png" } },
225
+
body: ({ photo }) => photoSlide({
226
+
photo,
227
+
chapter: "04 / 11 · menuband 0.9",
228
+
title: "actual fix:\nload by url,\nassert family",
229
+
cap: "AppDelegate.ywftBoldDescriptor · familyName check",
230
+
color: colorAddress("chartreuse"),
231
+
}),
232
+
},
233
+
234
+
"06_polygon": {
235
+
colorAddress: colorAddress("darkorchid"),
236
+
metaphor: `${REAL}
237
+
238
+
Scene: he is at a home desk in front of a silver MacBook. In the upper-right \
239
+
corner of the laptop's menu bar, several geometric polygon icons are visible \
240
+
side by side — a triangle, a square, and a pentagon — each rendered in a single \
241
+
solid dark-orchid (#9932cc) tone with all edges the same hue. He is holding a \
242
+
small piece of paper showing his hand-sketch of the same shape progression: \
243
+
"1=line, 2=line, 3=triangle, 4=square…" annotated in pen. Deadpan focused, \
244
+
slight nod. Soft window light. Real candid, very "him".`,
245
+
queries: { photo: { glob: "recap/out/jeffrey-photos/06_polygon.png" } },
246
+
body: ({ photo }) => photoSlide({
247
+
photo,
248
+
chapter: "05 / 11 · slab polygon icon",
249
+
title: "n sessions,\nn-sided shape",
250
+
cap: "shared hue · tracks awaiting ratio",
251
+
color: colorAddress("darkorchid"),
252
+
}),
253
+
},
254
+
255
+
"07_stop_ambient": {
256
+
colorAddress: colorAddress("slategray"),
257
+
metaphor: `${REAL}
258
+
259
+
Scene: he is sitting cross-legged on the floor in front of a closed silver \
260
+
MacBook, lid down. A faint slate-gray (#708090) glow comes from the closed \
261
+
laptop's edge — the menubar visible because the lid-ambient mode is awake. He \
262
+
is holding a small handwritten sign that reads "AWAITING" in bold marker, \
263
+
deadpan-tired expression like a parent waiting outside a kid's bedroom. The \
264
+
room is dim evening light, lamp in the background. Real candid, slightly \
265
+
absurd, very deadpan.`,
266
+
queries: { photo: { glob: "recap/out/jeffrey-photos/07_stop_ambient.png" } },
267
+
body: ({ photo }) => photoSlide({
268
+
photo,
269
+
chapter: "06 / 11 · claude-stop · lid-ambient",
270
+
title: "active →\nawaiting",
271
+
cap: "three shapes of 'claude is running'",
272
+
color: colorAddress("slategray"),
273
+
}),
274
+
},
275
+
276
+
"08_piano": {
277
+
colorAddress: colorAddress("coral"),
278
+
metaphor: `${REAL}
279
+
280
+
Scene: he is at a home desk leaning into the laptop's built-in microphone with \
281
+
a pair of cheap coral-orange (#ff7f50) over-ear headphones around his neck. \
282
+
The silver MacBook screen shows a waveform editor with two stacked tracks: a \
283
+
small flat sine wave on top, a much taller piano-sample wave below. He is \
284
+
turning an imaginary knob in the air with one hand, mock-audio-engineer \
285
+
gesture. The desk has a small toy upright piano sitting on it as a visual \
286
+
gag. Warm afternoon light. Real, deadpan focus, mildly absurd.`,
287
+
queries: { photo: { glob: "recap/out/jeffrey-photos/08_piano.png" } },
288
+
body: ({ photo }) => photoSlide({
289
+
photo,
290
+
chapter: "07 / 11 · fedac/native audio",
291
+
title: "piano amp\n1.8 → 3.0",
292
+
cap: "level with sine + square through notepat",
293
+
color: colorAddress("coral"),
294
+
}),
295
+
},
296
+
297
+
"09_plotter": {
298
+
colorAddress: colorAddress("seagreen"),
299
+
metaphor: `${REAL}
300
+
301
+
Scene: he is crouched next to a real, large 1980s-era HP 7585B drafting \
302
+
plotter — a wide white pen-plotter the size of a kitchen table, with multiple \
303
+
plotter pens visible in a carousel and a sheet of paper loaded. A thick \
304
+
serial cable in sea-green (#2e8b57) runs from the plotter to a silver \
305
+
MacBook on the floor next to it. He is holding the laptop on his lap, \
306
+
deadpan-grinning at the camera while the plotter behind him is mid-stroke \
307
+
drawing the PALS mark — a small purple geometric symbol — onto the paper. \
308
+
Garage / studio setting, real working space, slight clutter. Bright \
309
+
overhead light. Real candid, very "him", a little proud.`,
310
+
queries: { photo: { glob: "recap/out/jeffrey-photos/09_plotter.png" } },
311
+
body: ({ photo }) => photoSlide({
312
+
photo,
313
+
chapter: "08 / 11 · plotters/hp7585b",
314
+
title: "hp 7585b,\nover rs-232",
315
+
cap: "live-limits probe · hp-gl composer · pals test",
316
+
color: colorAddress("seagreen"),
317
+
}),
318
+
},
319
+
320
+
"10_keymap": {
321
+
colorAddress: colorAddress("hotpink"),
322
+
metaphor: `${REAL}
323
+
324
+
Scene: he is in a casual home setting holding a printed 16:9 sheet of paper \
325
+
in landscape orientation up to the camera. The sheet shows a piano keyboard \
326
+
on top with hot-pink (#ff69b4) and cyan tinted halves, a qwerty keyboard map \
327
+
below, dashed connector lines linking C·D·E·F·G keys to their qwerty twins, \
328
+
and two QR codes in opposite bottom corners. The hot-pink half of the piano \
329
+
on the sheet visibly stands out. He is presenting it deadpan, slight smile, \
330
+
eye contact with the camera, like a teacher holding up an answer key. \
331
+
Bright window light. Real candid energy.`,
332
+
queries: { photo: { glob: "recap/out/jeffrey-photos/10_keymap.png" } },
333
+
body: ({ photo }) => photoSlide({
334
+
photo,
335
+
chapter: "09 / 11 · slides/notepat-keymap",
336
+
title: "16:9 keymap\nfor casey",
337
+
cap: "social-software meeting · piano + qwerty",
338
+
color: colorAddress("hotpink"),
339
+
}),
340
+
},
341
+
342
+
"11_recap": {
343
+
colorAddress: colorAddress("darkturquoise"),
344
+
metaphor: `${REAL}
345
+
346
+
Scene: he is at a home desk holding a small stack of fresh polaroid-style \
347
+
prints, fanning them out toward the camera. Each printed photo in his hand \
348
+
is clearly a different staged candid of HIM — same face, different scenes — \
349
+
a recursion gag. The silver MacBook on the desk shows a terminal with a \
350
+
build pipeline log, with one line in dark-turquoise (#00ced1) text reading \
351
+
"jeffrey-photos: 11 segments cached." Behind him on a wall, a few of the \
352
+
same prints are tacked up with pins. Soft afternoon light. Real candid, \
353
+
slightly absurd, deadpan.`,
354
+
queries: { photo: { glob: "recap/out/jeffrey-photos/11_recap.png" } },
355
+
body: ({ photo }) => photoSlide({
356
+
photo,
357
+
chapter: "10 / 11 · recap pipeline",
358
+
title: "jeffrey-24h\naudience,\npre-baked\nportraits",
359
+
cap: "gpt-image-2 · platter shoot + selfie refs",
360
+
color: colorAddress("darkturquoise"),
361
+
}),
362
+
},
363
+
364
+
"12_outro": {
365
+
colorAddress: colorAddress("peachpuff"),
366
+
metaphor: `${REAL}
367
+
368
+
Scene: he is leaning back in a desk chair holding a coffee mug, giving a \
369
+
small exaggerated wave to the camera with his free hand. The silver laptop \
370
+
in front of him on the desk shows a screen reading "thanks for watching" in \
371
+
calm cream-on-dark text with a thin peach-puff (#ffdab9) underline. He is \
372
+
giving a small relaxed smile, real eye contact with the camera. Comfortable \
373
+
home setting — desk lamp on, evening softness, warm white balance. Wood \
374
+
desk, a houseplant or two visible. Real iPhone candid snapshot energy.`,
375
+
queries: { photo: { glob: "recap/out/jeffrey-photos/12_outro.png" } },
376
+
body: ({ photo }) => photoSlide({
377
+
photo,
378
+
chapter: "11 / 11 · outro",
379
+
title: "thanks for\nwatching",
380
+
cap: "aesthetic.computer · @jeffrey",
381
+
color: colorAddress("peachpuff"),
382
+
}),
383
+
},
384
+
385
+
"13_end": `
386
+
<div class="frame">
387
+
<div class="pals med"></div>
388
+
<div class="endline" style="color:${PALETTE.cream}">aesthetic·computer</div>
389
+
<div class="endsub" style="color:${PALETTE.dim}">narrated by jeffrey-pvc · @jeffrey</div>
390
+
<div class="endsub" style="color:${PALETTE.dim}">2026·04·30</div>
391
+
</div>`,
392
+
},
393
+
};
394
+
395
+
// Renders a full-bleed photo slide with a TOP gradient overlay carrying the
396
+
// chapter / title / caption text + a small color-address chip in the
397
+
// bottom-right corner. The chip names a CSS color from the AC dictionary —
398
+
// over the recap series these chips become a slow lesson in the palette.
399
+
function photoSlide({ photo, chapter, title, cap, color }) {
400
+
const titleHtml = title.split("\n").map((l) => `<div>${l}</div>`).join("");
401
+
return `
402
+
<div style="position: fixed; inset: 0; padding: 0; overflow: hidden;">
403
+
${photo
404
+
? `<img src="${photo}" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;" />`
405
+
: `<div style="position: absolute; inset: 0; background: ${PALETTE.bg};"></div>`}
406
+
<div style="position: absolute; top: 0; left: 0; right: 0; padding: 180px 70px 110px; background: linear-gradient(to bottom, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0) 100%);">
407
+
<div style="font-family: 'ProcessingR'; font-size: 30px; letter-spacing: 6px; text-transform: uppercase; color: ${color.hex};">${chapter}</div>
408
+
<div style="font-family: 'ProcessingB'; font-size: 110px; line-height: 1.0; letter-spacing: -2px; color: ${color.hex}; margin-top: 18px;">${titleHtml}</div>
409
+
<div style="font-family: 'ProcessingR'; font-size: 38px; color: ${PALETTE.off}; margin-top: 26px; letter-spacing: 1px;">${cap}</div>
410
+
</div>
411
+
<div style="position: absolute; bottom: 110px; right: 70px; display: flex; align-items: center; gap: 22px; padding: 18px 26px 18px 22px; background: rgba(0,0,0,0.72); border: 1px solid rgba(255,255,255,0.18); border-radius: 6px;">
412
+
<div style="width: 56px; height: 56px; background: ${color.hex}; border: 1px solid rgba(255,255,255,0.35); border-radius: 4px;"></div>
413
+
<div style="display: flex; flex-direction: column; gap: 4px;">
414
+
<div style="font-family: 'ProcessingB'; font-size: 30px; letter-spacing: 1px; color: ${PALETTE.cream};">${color.name}</div>
415
+
<div style="font-family: 'ProcessingR'; font-size: 22px; letter-spacing: 1px; color: ${PALETTE.dim};">${color.caption}</div>
416
+
</div>
417
+
</div>
418
+
</div>`;
419
+
}
420
+
421
+
export default audience;