sagadeck 1.8.0 → 1.9.0

package/src/studio/tour.js

@@ -2,15 +2,17 @@
 // sozinha dos exemplos de layout (layout-samples.js): layout novo entra aqui sem ninguém lembrar (engine.test.js
 // confere). Cada slide diz o nome do recurso e a frase para pedir à IA. Abre em prévia, como os modelos da vitrine.
 import { LAYOUT_INFO, LAYOUT_SAMPLES, LAYOUT_ASK } from "./layout-samples.js";
+import { circle, lineBuffer } from "../map-analysis.js";
 
 export const TOUR_TITLE = "Conheça o SagaDeck";
 
 // os grupos na ordem em que fazem sentido para quem está conhecendo; layout que não estiver em nenhum entra em "Mais"
 const GROUPS = [
   ["Abrir e fechar", "capa, seções, agenda e encerramento", ["cover", "section", "agenda", "end", "references"]],
-  ["Uma ideia por vez", "frases, números e palavras que ocupam o palco", ["statement", "headline", "quote", "definition", "number", "kinetic", "scenography"]],
+  ["Uma ideia por vez", "frases, números e palavras que ocupam o palco", ["statement", "headline", "quote", "definition", "number"]],
   ["Organizar o conteúdo", "listas, cartões, etapas, comparações e linhas do tempo", ["list", "cards", "mosaic", "ribbon", "bento", "split", "compare", "matrix", "steps", "timeline", "calendar", "hub", "infographic", "pyramid", "funnel"]],
-  ["Números e dados", "indicadores, gráficos, tabelas e painéis", ["stats", "chart", "table", "map", "onepage", "status", "poster"]],
+  ["Números e dados", "indicadores, gráficos, tabelas e painéis", ["stats", "chart", "table", "onepage", "status", "poster"]],
+  ["Mapas", "pontos, linhas e áreas sobre o mapa ao vivo, com a IA buscando dados e fazendo as contas", ["map"], () => mapDemos()],
   ["Imagem e vídeo", "fotos, vídeos e foco guiado", ["image", "full", "spotlight", "carousel", "video"]],
   ["Com a plateia", "perguntas, enquetes e experiências interativas", ["question", "poll", "decisionlab", "playground", "portal"]],
   ["Código e tecnologia", "código, APIs ao vivo, Git e diagramas", ["code", "codewalk", "codelab", "api", "duel", "terminals", "turns", "diagram", "graphlab", "algo", "dossier"]],
@@ -23,6 +25,9 @@ const EXTRAS = [
   ["sparkles", "Criar com IA", "De um tema, de um arquivo (PDF, Word, planilha, PowerPoint) ou de um link: a IA monta a apresentação inteira."],
   ["message-circle", "Conversar com a IA", "No chat, peça mudanças no slide ou no deck todo; cada mudança vira uma versão que dá para desfazer."],
   ["search-check", "Leitura crítica", "A IA revisa a apresentação e aponta o que melhorar, slide a slide, com Aplicar e Ignorar."],
+  ["globe", "Pesquisa na web", "Quando o assunto é recente ou de nicho, a IA pesquisa, lê as fontes e cita de onde veio cada dado."],
+  ["history", "Versões e desfazer", "Cada mudança, sua ou da IA, vira uma versão: compare e volte quando quiser."],
+  ["book-open", "Material de consulta", "Transforme a apresentação de palco em material para a plateia guardar e ler depois."],
   ["file-up", "Importar PowerPoint", "Traga um .pptx e continue editando aqui, com as imagens e a ordem do original."],
   ["table", "Gráfico da planilha", "Cole do Excel ou use a planilha do projeto: o Studio sugere gráficos e atualiza quando o arquivo muda."],
   ["palette", "Temas e paletas", "Troque o visual inteiro com um clique; o conteúdo se rearruma sozinho."],
@@ -39,7 +44,7 @@ const asked = (ask) => `Peça à IA: “${ask}”`;
 export function tourDeck() {
   const all = Object.keys(LAYOUT_SAMPLES);
   const used = new Set(GROUPS.flatMap(([, , names]) => names));
-  const groups = [...GROUPS.map(([title, sub, names]) => [title, sub, names.filter((n) => LAYOUT_SAMPLES[n])])];
+  const groups = [...GROUPS.map(([title, sub, names, demos]) => [title, sub, names.filter((n) => LAYOUT_SAMPLES[n]), demos])];
   const rest = all.filter((n) => !used.has(n));
   if (rest.length) groups.push(["Mais recursos", "os layouts mais novos", rest]);
 
@@ -49,9 +54,11 @@ export function tourDeck() {
     figure: { icon: "compass", size: 320 },
     notes: "Navegue à vontade: nada aqui cria arquivo. Embaixo de cada slide (nestas notas) está o nome do recurso e a frase para pedir à IA na sua apresentação.",
   }];
-  groups.forEach(([title, sub, names], i) => {
+  groups.forEach(([title, sub, names, demos], i) => {
     if (!names.length) return;
-    slides.push({ layout: "section", number: i + 1, kicker: `${names.length} recurso${names.length === 1 ? "" : "s"}`, title, subtitle: sub });
+    const extra = demos ? demos() : [];
+    const n = names.length + extra.length;
+    slides.push({ layout: "section", number: i + 1, kicker: `${n} recurso${n === 1 ? "" : "s"}`, title, subtitle: sub });
     for (const name of names) {
       const sample = semLinks(structuredClone(LAYOUT_SAMPLES[name]));
       const [label, desc] = LAYOUT_INFO[name] || [name, ""];
@@ -66,11 +73,86 @@ export function tourDeck() {
         notes: [`${label}: ${desc}.`, asked(ask), sample.notes].filter(Boolean).join("\n\n"),
       });
     }
+    slides.push(...extra);
   });
   slides.push({ layout: "section", number: groups.length + 1, kicker: "Além dos slides", title: "O que mais o SagaDeck faz", subtitle: "IA, importação, exportação e apresentação" });
   slides.push({ layout: "cards", title: "Com a IA", cols: 3, items: EXTRAS.slice(0, 3).map(([icon, title, text]) => ({ icon, title, text })) });
-  slides.push({ layout: "cards", title: "Com os seus arquivos", cols: 3, items: EXTRAS.slice(3, 6).map(([icon, title, text]) => ({ icon, title, text })) });
-  slides.push({ layout: "cards", title: "Na hora de apresentar", cols: 3, items: EXTRAS.slice(6).map(([icon, title, text]) => ({ icon, title, text })) });
+  slides.push({ layout: "cards", title: "A IA pesquisa e guarda", cols: 3, items: EXTRAS.slice(3, 6).map(([icon, title, text]) => ({ icon, title, text })) });
+  slides.push({ layout: "cards", title: "Com os seus arquivos", cols: 3, items: EXTRAS.slice(6, 9).map(([icon, title, text]) => ({ icon, title, text })) });
+  slides.push({ layout: "cards", title: "Na hora de apresentar", cols: 3, items: EXTRAS.slice(9).map(([icon, title, text]) => ({ icon, title, text })) });
   slides.push({ layout: "end", title: "Agora é a sua vez.", subtitle: "Crie uma apresentação e peça à IA o que você viu aqui." });
   return { title: TOUR_TITLE, theme: "sinal", duration: 30, maxWords: 140, slides };
 }
+
+// ---- a demonstração dos mapas (além do exemplo do layout): estados por valor com câmera, linhas e áreas, cobertura
+// com raios calculados pelo código e o que a IA e o Studio fazem. Valores ilustrativos e traçados aproximados, ditos
+// na própria tela; os dados de verdade vêm da planilha, de arquivos ou das buscas da IA.
+const demo = (slide, label, desc, ask) => ({ ...slide, layout: "map", demo: "mapa", source: `**${label}**: ${desc}. ${asked(ask)}`, notes: [`${label}: ${desc}.`, asked(ask)].join("\n\n") });
+const ESTACOES = [
+  { nome: "Centro", lat: -23.5489, lon: -46.6388 }, { nome: "Pinheiros", lat: -23.5614, lon: -46.702 },
+  { nome: "Ibirapuera", lat: -23.5874, lon: -46.6576 }, { nome: "Mooca", lat: -23.5596, lon: -46.5996 }, { nome: "Santana", lat: -23.5027, lon: -46.6252 },
+];
+// calculadas uma vez pelo serviço de rotas (OpenRouteService, dados do OpenStreetMap), em 10/10/2026, e gravadas aqui:
+// a rota a pé do MASP ao Parque Ibirapuera e a área alcançável em 15 minutos a pé do MASP. Nada desenhado à mão.
+const ROTA = [[-46.65582,-23.56144],[-46.65663,-23.56304],[-46.65731,-23.56503],[-46.65747,-23.56534],[-46.65836,-23.56627],[-46.65844,-23.5662],[-46.65849,-23.56624],[-46.65847,-23.5663],[-46.65908,-23.56693],[-46.65888,-23.56709],[-46.65891,-23.56717],[-46.66039,-23.56866],[-46.66049,-23.56883],[-46.66022,-23.56911],[-46.66029,-23.56923],[-46.65977,-23.56985],[-46.66047,-23.57058],[-46.6604,-23.57064],[-46.66044,-23.57077],[-46.65929,-23.57188],[-46.65928,-23.57211],[-46.66009,-23.57294],[-46.6601,-23.57307],[-46.65897,-23.57415],[-46.65902,-23.57428],[-46.65957,-23.57482],[-46.65923,-23.57522],[-46.65931,-23.57529],[-46.65833,-23.57626],[-46.65837,-23.57631],[-46.6583,-23.57645],[-46.65882,-23.57697],[-46.65953,-23.57755],[-46.65954,-23.57765],[-46.65966,-23.57768],[-46.66046,-23.57843],[-46.66149,-23.57921],[-46.66151,-23.57933],[-46.6614,-23.57948],[-46.66136,-23.57974],[-46.66108,-23.58011],[-46.66121,-23.58034],[-46.66105,-23.58041],[-46.661,-23.5805],[-46.66124,-23.58067],[-46.66175,-23.58087],[-46.66215,-23.58119],[-46.66237,-23.58158],[-46.66246,-23.58195],[-46.66237,-23.58289],[-46.66228,-23.58305],[-46.6619,-23.58328],[-46.6614,-23.5833],[-46.66122,-23.58341],[-46.66114,-23.58356],[-46.66115,-23.58377],[-46.66147,-23.58427],[-46.66154,-23.58531],[-46.66071,-23.58577],[-46.66056,-23.58616],[-46.66028,-23.58644],[-46.66002,-23.58654],[-46.65852,-23.5868],[-46.65757,-23.58736]];
+const ALCANCE = [[-46.66431,-23.5613],[-46.66432,-23.56766],[-46.66418,-23.5698],[-46.66378,-23.57178],[-46.66291,-23.57199],[-46.66122,-23.57207],[-46.65645,-23.57178],[-46.65422,-23.56956],[-46.64949,-23.56588],[-46.64924,-23.56436],[-46.64736,-23.55976],[-46.64561,-23.55634],[-46.64587,-23.55489],[-46.64616,-23.5541],[-46.64761,-23.55261],[-46.65241,-23.55134],[-46.65448,-23.55097],[-46.65624,-23.55082],[-46.65696,-23.55115],[-46.66012,-23.55392],[-46.66234,-23.55606],[-46.66431,-23.5613]];
+const ROTA_KM = "4,0 km", ROTA_MIN = "48 min";
+const MASP = { nome: "MASP", lat: -23.5614, lon: -46.6559 }, IBIRAPUERA = { nome: "Parque Ibirapuera", lat: -23.5874, lon: -46.6576 };
+// o público de cada região (ilustrativo) dá o tamanho da bolha
+const PUBLICO = [{ nome: "Centro", lat: -23.5489, lon: -46.6388, publico: 42 }, { nome: "Pinheiros", lat: -23.5614, lon: -46.702, publico: 28 },
+  { nome: "Mooca", lat: -23.5596, lon: -46.5996, publico: 12 }, { nome: "Santana", lat: -23.5027, lon: -46.6252, publico: 18 }, { nome: "Santo Amaro", lat: -23.6536, lon: -46.7095, publico: 9 }];
+
+export function mapDemos() {
+  return [
+    demo({ kicker: "Bolhas", title: "Onde o público ==está==", basemap: "claro", build: true, caption: "Valores ilustrativos. O tamanho de cada bolha vem da coluna público da planilha.", layers: [
+      { name: "Público (mil pessoas)", points: PUBLICO, size: "publico", label: "nome", color: "em" },
+    ] }, "Pontos por tamanho", "Uma coluna de números vira o tamanho do ponto; outra coluna vira a cor, com a legenda clicável", "Faça as bolhas do tamanho do público de cada região"),
+    demo({ kicker: "Valores por estado", title: "Geração solar por ==estado==", basemap: "claro", build: true, caption: "Valores ilustrativos. Uma região por clique; a câmera vai até ela.", layers: [
+      { name: "Sudeste", areas: { SP: 4200, MG: 5100, RJ: 1100, ES: 600 }, legend: "MW", view: "fit" },
+      { name: "Nordeste", areas: { BA: 2900, PE: 1200, CE: 1500, RN: 900, PI: 1300 }, legend: "MW", view: "fit" },
+    ] }, "Regiões por valor", "Estados ou países pintados pelo número, uma camada por clique, com a câmera indo até cada uma", "Pinte os estados pela potência instalada da planilha e mostre uma região por clique"),
+    demo({ kicker: "Linhas e áreas", title: "O trajeto e a ==área== do evento", basemap: "ruas", build: true, caption: "Traçados aproximados, desenhados para a demonstração.", layers: [
+      { name: "Trajeto da corrida", color: "em", geojson: { type: "Feature", properties: { nome: "Avenida Paulista" }, geometry: { type: "LineString", coordinates: [[-46.6611, -23.5578], [-46.6559, -23.5613], [-46.6496, -23.5655], [-46.6422, -23.5707]] } } },
+      { name: "Área do evento", color: "c3", geojson: { type: "Feature", properties: { nome: "Parque Ibirapuera" }, geometry: { type: "Polygon", coordinates: [[[-46.6618, -23.5833], [-46.6531, -23.5826], [-46.6497, -23.5913], [-46.6586, -23.5952], [-46.6618, -23.5833]]] } } },
+    ] }, "Linhas e áreas", "Trajetos, redes e áreas de GeoJSON, GPX ou KML, ou desenhados no Editar mapa", "Desenhe o trajeto da corrida pelas ruas e a área do evento"),
+    demo({ kicker: "Rota e alcance", title: "15 minutos a pé do ==MASP==", basemap: "claro", build: true, caption: `Calculados pelo serviço de rotas (OpenRouteService, dados do OpenStreetMap). A pé até o parque: ${ROTA_KM}, cerca de ${ROTA_MIN}.`, layers: [
+      { name: "Pontos", points: [MASP, IBIRAPUERA], label: "nome", color: "fg" },
+      { name: "Alcance a pé em 15 min", color: "c4", geojson: { type: "Feature", properties: { nome: "15 minutos a pé" }, geometry: { type: "Polygon", coordinates: [ALCANCE] } }, view: "fit" },
+      { name: `Rota a pé (${ROTA_KM})`, color: "em", geojson: { type: "Feature", properties: { nome: `Do MASP ao Ibirapuera: ${ROTA_KM}, ${ROTA_MIN}` }, geometry: { type: "LineString", coordinates: ROTA } }, view: "fit" },
+    ] }, "Rota pelas ruas e área alcançável", "O caminho de verdade pelas ruas, com a distância e o tempo, e tudo o que se alcança em X minutos a pé, de carro ou de bicicleta", "Mostre o que dá para alcançar em 15 minutos a pé do MASP e a rota até o Ibirapuera"),
+    demo({ kicker: "Cobertura", title: "Quem fica a até ==1 km== de uma estação?", basemap: "claro", build: true, caption: "Os raios são calculados pelo sagadeck, não desenhados à mão.", layers: [
+      { name: "Estações", points: ESTACOES, label: "nome", color: "em" },
+      { name: "Raio de 1 km", color: "c4", geojson: { type: "FeatureCollection", features: ESTACOES.map((e) => ({ type: "Feature", properties: { nome: `${e.nome}: 1 km` }, geometry: circle([e.lat, e.lon], 1000) })) } },
+    ] }, "Raio em volta de pontos", "Raio, mais próximo e onde instalar o próximo: o código calcula e a IA explica", "Mostre a área a 1 km de cada estação e quantas escolas ficam fora"),
+    demo({ kicker: "Faixa", title: "Quem mora a até ==200 m== da rota?", basemap: "claro", build: true, caption: "A faixa em volta da linha é calculada pelo sagadeck.", layers: [
+      { name: "Faixa de 200 m", color: "hi", geojson: { type: "Feature", properties: { nome: "200 m de cada lado", _faixa: true }, geometry: lineBuffer({ type: "LineString", coordinates: ROTA }, 200) } },
+      { name: "Rota a pé", color: "em", geojson: { type: "Feature", properties: { nome: "Do MASP ao Ibirapuera" }, geometry: { type: "LineString", coordinates: ROTA } } },
+    ] }, "Faixa em volta de uma linha", "Uma rua, uma rede ou um rio com a faixa de X metros dos dois lados; a IA conta o que fica dentro", "Mostre a faixa de 200 metros em volta da rota e quantas escolas ficam nela"),
+    { layout: "cards", demo: "mapa", title: "Mapas com a IA", cols: 3, notes: "A IA pede os dados que faltam e o Studio busca, grava na pasta da apresentação com a fonte de cada linha e faz as contas.", items: [
+      { icon: "search", title: "Buscar lugares", text: "Cinemas, escolas, unidades de saúde: vêm do OpenStreetMap, com a fonte de cada um." },
+      { icon: "map", title: "Contornos e linhas", text: "O bairro, o parque, as ciclovias, o rio: o contorno de verdade, nunca inventado." },
+      { icon: "globe", title: "Lista da web", text: "Uma lista com endereços na web vira pontos no mapa, com o link de onde veio." },
+      { icon: "map-pin", title: "Coordenadas da planilha", text: "Endereços da sua planilha viram pontos; a IA pergunta antes de enviar." },
+      { icon: "ruler", title: "Contas de verdade", text: "O mais próximo, quantos no raio, a faixa em volta de uma linha, onde instalar o próximo." },
+      { icon: "route", title: "Rotas e alcance", text: "Tempo a pé, de carro ou de bicicleta, e a área alcançável em X minutos." },
+    ] },
+    { layout: "spotlight", demo: "mapa", kicker: "No Studio", title: "Onde se ==edita== o mapa", image: "imagens/tour-mapa-botao.jpg",
+      caption: "Selecione o slide do mapa: o botão Editar mapa fica no canto do slide. Dois cliques no mapa também abrem.",
+      notes: "Editar mapa: o botão no canto do slide de mapa, ou dois cliques no mapa. Abre uma tela só do mapa.",
+      hotspots: [{ x: 71.4, y: 29.7, width: 9.8, height: 5.9, title: "Editar mapa", text: "Abre a tela do mapa: camadas, ferramentas e as propriedades de cada item." },
+        { x: 24, y: 46, width: 45.5, height: 26, title: "O mapa no slide", text: "Aqui ele só mostra (o slide fica pequeno). Para mexer, Editar mapa ou dois cliques." }] },
+    { layout: "spotlight", demo: "mapa", kicker: "No Studio", title: "A tela do ==mapa==", image: "imagens/tour-mapa-editor.jpg",
+      caption: "Clique em cada parte para ver o que ela faz.",
+      notes: "Editar mapa: camadas à esquerda, ferramentas e o mapa no meio, propriedades à direita, dica embaixo e Concluir no alto.",
+      hotspots: [{ x: 0, y: 5.9, width: 15, height: 36, title: "Camadas", text: "Cada camada com o tipo e quantos itens tem; o olho esconde só aqui. Nova camada: pontos, linhas e áreas ou regiões por valor." },
+        { x: 15.9, y: 36.7, width: 4.8, height: 32.6, title: "Ferramentas", text: "Selecionar, Ponto, Linha (pode seguir as ruas), Área e Régua." },
+        { x: 80, y: 5.9, width: 20, height: 40, title: "Propriedades", text: "Do item clicado: os campos, com o que cada um faz no mapa. Sem nada clicado: a cor, o tamanho, o rótulo e o cartão da camada, e o fundo do mapa." },
+        { x: 15, y: 95.1, width: 65, height: 4.9, title: "A dica", text: "Diz o que fazer com a ferramenta escolhida." },
+        { x: 92.6, y: 1.1, width: 6.4, height: 3.6, title: "Concluir", text: "Volta ao slide. Tudo já foi gravado." }] },
+    { layout: "cards", demo: "mapa", title: "Mapas no Studio", cols: 3, notes: "O mapa funciona sem configurar nada. A chave gratuita do OpenRouteService (Configurar mapa) só acrescenta rotas e área alcançável.", items: [
+      { icon: "pencil", title: "Editar mapa", text: "Uma tela só do mapa: camadas à esquerda, o mapa grande no meio e, à direita, o que cada ponto, linha ou área tem." },
+      { icon: "table", title: "Planilha ligada", text: "Pôr no mapa a partir da planilha; clicar no ponto mostra a linha, e vice-versa." },
+      { icon: "settings", title: "Configurar mapa", text: "Opcional: o servidor de mapas da empresa ou a chave de rotas, como a da IA." },
+    ] },
+  ];
+}

package/src/themes.js

@@ -16,6 +16,15 @@
 const SYS_SANS = "'Segoe UI', 'Helvetica Neue', Arial, sans-serif";
 const SYS_MONO = "'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace";
 
+const MUSGO_FACES = {
+  display: { css: "font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-weight: 600; font-optical-sizing: auto; letter-spacing: -0.02em; line-height: 1.04;", pptx: { face: "Georgia", bold: true } },
+  heading: { css: "font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-optical-sizing: auto; letter-spacing: -0.015em; line-height: 1.08;", pptx: { face: "Georgia", bold: true } },
+  body: { css: "font-family: 'Space Grotesk', 'Segoe UI', sans-serif; font-weight: 400; line-height: 1.42;", pptx: { face: "Segoe UI" }, pptxBold: { face: "Segoe UI Semibold" } },
+  label: { css: `font-family: 'IBM Plex Mono', ${SYS_MONO}; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; line-height: 1.2;`, pptx: { face: "Cascadia Mono" } },
+  mono: { css: `font-family: 'IBM Plex Mono', ${SYS_MONO}; font-weight: 400; line-height: 1.5;`, pptx: { face: "Cascadia Mono" }, pptxBold: { face: "Cascadia Mono SemiBold" } },
+  quote: { css: "font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; line-height: 1.14;", pptx: { face: "Georgia", italic: true } },
+};
+
 export const THEMES = {
   sinal: {
     label: "Sinal — sinalização/segurança: DIN condensada, amarelo de aviso, pictogramas",
@@ -373,6 +382,151 @@ export const THEMES = {
     },
     radius: 6, deco: "none",
   },
+  // Musgo: verde quase preto, âmbar e sálvia, Fraunces + Space Grotesk + IBM Plex Mono (fontes OFL embutidas em
+  // runtime/fonts; no PowerPoint, as faces equivalentes do Office). ticker: a capa ganha a faixa que corre;
+  // coverAmbient: a rede de nós à deriva atrás da capa. O tom accent
+  // (o da seção) continua escuro, com o detalhe em âmbar: o tema não tem página chapada de cor.
+  musgo: {
+    label: "Musgo — laboratório noturno: verde-musgo quase preto, âmbar e sálvia, serifada Fraunces, chapéu com fio, grade de pontos e faixa correndo na capa",
+    colors: {
+      paper: "0C0F0B", ink: "ECE8DB", accent: "F0B24A", alert: "E07A55",
+      muted: "9FA89A", line: "2B352C", surface: "181F16", surfaceDark: "12160F",
+      c1: "F0B24A", c2: "A9C79B", c3: "E07A55", c4: "F6F3E7", c5: "6E8F66",
+    },
+    tones: {
+      light: { bg: "paper", fg: "ink", muted: "muted", line: "line", surface: "surface", hi: "accent", em: "accent", onHi: "0C0F0B" },
+      dark: { bg: "070906", fg: "F6F3E7", muted: "muted", line: "line", surface: "surfaceDark", hi: "accent", em: "accent", onHi: "0C0F0B" },
+      accent: { bg: "12160F", fg: "F6F3E7", muted: "muted", line: "line", surface: "1F2820", hi: "accent", em: "accent", onHi: "0C0F0B" },
+      alert: { bg: "12160F", fg: "F6F3E7", muted: "muted", line: "B5502F", surface: "1F2820", hi: "E07A55", em: "E07A55", onHi: "0C0F0B" },
+    },
+    fontFaces: [],
+    faces: MUSGO_FACES,
+    radius: 12, deco: "grain", ticker: true, coverAmbient: "rede",
+  },
+  // Wine: o musgo em vinho — fundo vinho quase preto, vermelho-rosado no destaque e o vermelho forte só no detalhe
+  // (tom alert, bolinha da janela). Mesma pele do musgo (skin), mesmas fontes, faixa e rede na capa.
+  wine: {
+    label: "Wine — o musgo em vinho: fundo vinho quase preto, vermelho-rosado e rosé, serifada Fraunces, faixa correndo e rede na capa",
+    skin: "musgo",
+    colors: {
+      paper: "170A10", ink: "F4EAEC", accent: "F2506A", alert: "CC092F",
+      muted: "B59AA4", line: "3D1E2B", surface: "24101A", surfaceDark: "1D0C14",
+      c1: "F2506A", c2: "F3A6B5", c3: "CC092F", c4: "FFF5F6", c5: "8C2140",
+    },
+    tones: {
+      light: { bg: "paper", fg: "ink", muted: "muted", line: "line", surface: "surface", hi: "accent", em: "accent", onHi: "170A10" },
+      dark: { bg: "0F060A", fg: "FFF5F6", muted: "muted", line: "line", surface: "surfaceDark", hi: "accent", em: "accent", onHi: "170A10" },
+      accent: { bg: "1D0C14", fg: "FFF5F6", muted: "muted", line: "line", surface: "2E1521", hi: "accent", em: "accent", onHi: "170A10" },
+      alert: { bg: "CC092F", fg: "FFFFFF", muted: "FFD0D9", line: "E0475F", surface: "A80726", hi: "FFFFFF", em: "FFFFFF", onHi: "CC092F" },
+    },
+    fontFaces: [],
+    faces: MUSGO_FACES,
+    radius: 12, deco: "grain", ticker: true, coverAmbient: "rede",
+  },
+  // Caderno: visual thinking — papel claro, letra de mão alta (Amatic SC), serifada de leitura (Gelasio), cartões
+  // brancos com moldura grossa em tons pastel (menta, lilás, amarelo, coral) e rabiscos de ícones nos cantos.
+  caderno: {
+    label: "Caderno — visual thinking: papel claro, letra de mão alta, cartões com moldura pastel e rabiscos de ícones",
+    colors: {
+      paper: "F5F3EE", ink: "2B2A33", accent: "8E7896", alert: "DE8178",
+      muted: "6E6A73", line: "D9D5CC", surface: "FFFFFF", surfaceDark: "2B2A33",
+      c1: "B5E3C3", c2: "8E7896", c3: "F0D488", c4: "DE8178", c5: "9CC9E8",
+    },
+    tones: {
+      light: { bg: "paper", fg: "ink", muted: "muted", line: "line", surface: "surface", hi: "F0D488", em: "alert", onHi: "ink" },
+      dark: { bg: "2B2A33", fg: "F5F3EE", muted: "B7B3BC", line: "4A4853", surface: "37353F", hi: "F0D488", em: "F0D488", onHi: "ink" },
+      accent: { bg: "EFEADF", fg: "ink", muted: "muted", line: "D3CCBD", surface: "FFFFFF", hi: "B5E3C3", em: "alert", onHi: "ink" },
+      alert: { bg: "DE8178", fg: "FFFFFF", muted: "FBE3E0", line: "E9A39C", surface: "C96C63", hi: "F0D488", em: "2B2A33", onHi: "ink" },
+    },
+    fontFaces: [],
+    faces: {
+      display: { css: "font-family: 'Amatic SC', 'Segoe Print', cursive; font-weight: 700; letter-spacing: 0.01em; line-height: 0.95;", pptx: { face: "Ink Free", bold: true } },
+      heading: { css: "font-family: 'Amatic SC', 'Segoe Print', cursive; font-weight: 700; letter-spacing: 0.02em; line-height: 1;", pptx: { face: "Ink Free", bold: true } },
+      body: { css: "font-family: 'Gelasio', Georgia, serif; font-weight: 400; line-height: 1.45;", pptx: { face: "Georgia" } },
+      label: { css: "font-family: 'Gelasio', Georgia, serif; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2;", pptx: { face: "Georgia", bold: true } },
+      mono: { css: `font-family: ${SYS_MONO}; line-height: 1.4;`, pptx: { face: "Cascadia Mono" } },
+      quote: { css: "font-family: 'Gelasio', Georgia, serif; font-style: italic; font-weight: 500; line-height: 1.2;", pptx: { face: "Georgia", italic: true } },
+    },
+    radius: 26, deco: "grain",
+  },
+  // Lousa: quadro-negro verde com giz — título em giz amarelo (Cabin Sketch), texto em letra redonda (Itim), traços de
+  // giz laranja e amarelo, cartões contornados a giz.
+  lousa: {
+    label: "Lousa — quadro verde com giz: títulos em giz amarelo, traços laranja, cartões contornados a giz",
+    colors: {
+      paper: "2E4A3E", ink: "F1F0E8", accent: "E9DE7A", alert: "E58A5C",
+      muted: "B8C4BB", line: "5E7A6C", surface: "36574A", surfaceDark: "263E34",
+      c1: "E9DE7A", c2: "E58A5C", c3: "9FD3E0", c4: "F1F0E8", c5: "C7A6D9",
+    },
+    tones: {
+      light: { bg: "paper", fg: "ink", muted: "muted", line: "line", surface: "surface", hi: "accent", em: "accent", onHi: "2E4A3E" },
+      dark: { bg: "1F3329", fg: "ink", muted: "muted", line: "line", surface: "surfaceDark", hi: "accent", em: "accent", onHi: "2E4A3E" },
+      accent: { bg: "paper", fg: "ink", muted: "muted", line: "line", surface: "surface", hi: "alert", em: "accent", onHi: "2E4A3E" },
+      alert: { bg: "4A3A2C", fg: "F1F0E8", muted: "D8C9B4", line: "6E5A46", surface: "5A4735", hi: "E9DE7A", em: "E58A5C", onHi: "2E4A3E" },
+    },
+    fontFaces: [],
+    faces: {
+      display: { css: "font-family: 'Cabin Sketch', 'Segoe Print', cursive; font-weight: 700; letter-spacing: 0.01em; line-height: 1;", pptx: { face: "Ink Free", bold: true } },
+      heading: { css: "font-family: 'Cabin Sketch', 'Segoe Print', cursive; font-weight: 700; letter-spacing: 0.01em; line-height: 1.05;", pptx: { face: "Ink Free", bold: true } },
+      body: { css: "font-family: 'Itim', 'Segoe UI', sans-serif; font-weight: 400; line-height: 1.4;", pptx: { face: "Segoe UI" } },
+      label: { css: "font-family: 'Itim', 'Segoe UI', sans-serif; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.2;", pptx: { face: "Segoe UI" } },
+      mono: { css: `font-family: ${SYS_MONO}; line-height: 1.4;`, pptx: { face: "Cascadia Mono" } },
+      quote: { css: "font-family: 'Itim', 'Segoe UI', sans-serif; font-weight: 400; line-height: 1.25;", pptx: { face: "Segoe UI" } },
+    },
+    radius: 14, deco: "none",
+  },
+  // Cartaz: cartaz de protesto — papel cinza com grão, condensada pesada (Bebas Neue) em faixas vermelhas tortas,
+  // etiquetas amarelas, cartões brancos levemente girados como fotos coladas, moldura preta grossa na capa.
+  cartaz: {
+    label: "Cartaz — cartaz de protesto: condensada em faixas vermelhas tortas, etiquetas amarelas, cartões como fotos coladas",
+    colors: {
+      paper: "E8E6E1", ink: "232323", accent: "D9565B", alert: "F2BE4E",
+      muted: "5E5B57", line: "C9C5BE", surface: "FFFFFF", surfaceDark: "2B2B2B",
+      c1: "D9565B", c2: "8CC8BF", c3: "F2BE4E", c4: "C3C7F0", c5: "232323",
+    },
+    tones: {
+      light: { bg: "paper", fg: "ink", muted: "muted", line: "line", surface: "surface", hi: "accent", em: "accent", onHi: "FFFFFF" },
+      dark: { bg: "232323", fg: "E8E6E1", muted: "A9A49C", line: "3D3D3D", surface: "surfaceDark", hi: "accent", em: "alert", onHi: "FFFFFF" },
+      accent: { bg: "paper", fg: "ink", muted: "muted", line: "line", surface: "surface", hi: "accent", em: "accent", onHi: "FFFFFF" },
+      alert: { bg: "F2BE4E", fg: "232323", muted: "6B5420", line: "D9A43A", surface: "F6CF77", hi: "232323", em: "D9565B", onHi: "F2BE4E" },
+    },
+    fontFaces: [],
+    faces: {
+      display: { css: "font-family: 'Bebas Neue', 'Bahnschrift Condensed', 'Arial Narrow', sans-serif; font-weight: 400; letter-spacing: 0.01em; line-height: 0.9;", pptx: { face: "Bahnschrift Condensed", bold: true } },
+      heading: { css: "font-family: 'Bebas Neue', 'Bahnschrift Condensed', 'Arial Narrow', sans-serif; font-weight: 400; letter-spacing: 0.015em; line-height: 0.95;", pptx: { face: "Bahnschrift Condensed", bold: true } },
+      body: { css: `font-family: ${SYS_SANS}; font-weight: 400; line-height: 1.38;`, pptx: { face: "Segoe UI" }, pptxBold: { face: "Segoe UI Semibold" } },
+      label: { css: "font-family: 'Bebas Neue', 'Bahnschrift Condensed', sans-serif; font-weight: 400; letter-spacing: 0.06em; line-height: 1.1;", pptx: { face: "Bahnschrift Condensed" } },
+      mono: { css: `font-family: ${SYS_MONO}; line-height: 1.4;`, pptx: { face: "Cascadia Mono" } },
+      quote: { css: "font-family: 'Bebas Neue', 'Bahnschrift Condensed', sans-serif; font-style: italic; font-weight: 400; letter-spacing: 0.01em; line-height: 1.02;", pptx: { face: "Bahnschrift Condensed", italic: true } },
+    },
+    radius: 0, deco: "grain",
+  },
+  // Infográfico: cartaz de dados chapado — azul, verde, laranja e amarelo sem degradê, números enormes em condensada
+  // (Bebas Neue), títulos em Montserrat pesada, faixas de cor, números em círculos coloridos.
+  infografico: {
+    label: "Infográfico — dados chapados: azul, verde, laranja e amarelo, números enormes, faixas de cor e marcadores em círculo",
+    colors: {
+      paper: "FFFFFF", ink: "2E3138", accent: "3F86C9", alert: "EB6C35",
+      muted: "6B7280", line: "E3E6EA", surface: "F2F4F6", surfaceDark: "2E3138",
+      c1: "3F86C9", c2: "8DC63F", c3: "EB6C35", c4: "F5C02F", c5: "3AAFC1",
+    },
+    tones: {
+      light: { bg: "paper", fg: "ink", muted: "muted", line: "line", surface: "surface", hi: "F5C02F", em: "accent", onHi: "ink" },
+      dark: { bg: "2E3138", fg: "FFFFFF", muted: "B9BEC7", line: "454953", surface: "3A3E46", hi: "8DC63F", em: "8DC63F", onHi: "2E3138" },
+      accent: { bg: "accent", fg: "FFFFFF", muted: "D6E6F5", line: "6AA3D8", surface: "3577B5", hi: "8DC63F", em: "F5C02F", onHi: "2E3138" },
+      alert: { bg: "8DC63F", fg: "FFFFFF", muted: "EEF7E2", line: "A7D46C", surface: "7DB234", hi: "2E3138", em: "2E3138", onHi: "FFFFFF" },
+    },
+    fontFaces: [],
+    faces: {
+      display: { css: "font-family: 'Bebas Neue', 'Bahnschrift Condensed', 'Arial Narrow', sans-serif; font-weight: 400; letter-spacing: 0.01em; line-height: 0.9;", pptx: { face: "Bahnschrift Condensed", bold: true } },
+      heading: { css: "font-family: 'Montserrat', 'Segoe UI', sans-serif; font-weight: 800; letter-spacing: -0.01em; line-height: 1.05;", pptx: { face: "Segoe UI Black" } },
+      body: { css: "font-family: 'Montserrat', 'Segoe UI', sans-serif; font-weight: 500; line-height: 1.4;", pptx: { face: "Segoe UI" }, pptxBold: { face: "Segoe UI Semibold" } },
+      label: { css: "font-family: 'Montserrat', 'Segoe UI', sans-serif; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.2;", pptx: { face: "Segoe UI Semibold" } },
+      mono: { css: `font-family: ${SYS_MONO}; line-height: 1.4;`, pptx: { face: "Cascadia Mono" } },
+      quote: { css: "font-family: 'Montserrat', 'Segoe UI', sans-serif; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;", pptx: { face: "Segoe UI Semibold" } },
+    },
+    radius: 10, deco: "none",
+  },
   // Par técnico (material de consulta, tutorial, apostila): o claro imprime bem, o escuro descansa a vista.
   // pair: o Studio alterna entre os dois (Design › Claro/Escuro) e o PDF pode sair no claro (Preferências).
   manual: {

package/templates/cenario-e-ciencia.yaml

@@ -1,28 +1,8 @@
-title: Texto no cenário e matemática
+title: Matemática interativa
 id: cenario-e-ciencia
 theme: aurora
 motion: none
 slides:
-  - layout: scenography
-    scene: stage
-    kicker: IDEIAS QUE OCUPAM ESPAÇO
-    title: "ALÉM DO\nÓBVIO"
-    subtitle: O texto também faz parte da história.
-    caption: SAGADECK / ESTUDO 01
-    deco: none
-  - layout: scenography
-    scene: floor
-    kicker: UMA NOVA PERSPECTIVA
-    title: "NOVOS\nCAMINHOS"
-    caption: SAGADECK / ESTUDO 02
-    deco: none
-  - layout: scenography
-    scene: signs
-    kicker: PRÓXIMA PARADA
-    title: "IDEIAS\nEM CENA"
-    subtitle: Mensagens que pertencem ao lugar.
-    caption: SAGADECK / ESTUDO 03
-    deco: none
   - layout: science
     title: A onda e sua derivada
     equations:

package/templates/ensaio-api.yaml

@@ -1,5 +1,5 @@
 # Ensaio de aula de APIs de IA: roda contra a API de mentira, no ambiente embutido ENSAIO do Studio
-# (biblioteca → Nova → "Exemplo: aula de APIs ao vivo", ou `sagadeck ensaio-api`).
+# (`sagadeck ensaio-api`; no Studio, a demo "APIs com curl" mostra as chamadas mais comuns).
 # Serve de modelo: troque as URLs e os caminhos $.… pelos do seu serviço e cadastre os seus ambientes
 # no Studio (Inserir → Ambientes), que grava em ~/.sagadeck/ambientes.yaml. Veja "Slide api" em docs/REFERENCIA.md.
 title: "Ensaio: APIs de IA ao vivo"
@@ -125,8 +125,8 @@ slides:
     title: Qual frase fica ==mais perto==?
     request: { url: "{{base}}/embeddings", body: { model: emb, input: "{{text}}" } }
     similarity:
-      reference: Quero abrir uma conta no banco
-      texts: [ "Vai chover amanhã em São Paulo?", "Como faço para abrir uma conta?", "Abrir conta no banco hoje" ]
+      reference: Quero reservar uma mesa no restaurante
+      texts: [ "Vai chover amanhã em São Paulo?", "Como faço para reservar uma mesa?", "Mesa para dois esta noite" ]
     notes: "Peça frases para a plateia e escreva na aba Frases."
 
   - layout: api

package/templates/cenario/Texto no cen/303/241rio.yaml"

@@ -1,171 +0,0 @@
-# Demonstração do "Texto no cenário" (layout scenography): todas as composições e tudo o que dá para ajustar.
-# Biblioteca: Nova, "Exemplo: texto no cenário". As imagens de exemplo estão em imagens/ (troque pelas suas).
-title: Texto no cenário
-theme: aurora
-motion: none
-author: Seu nome
-duration: 15
-slides:
-  - layout: scenography
-    scene: stage
-    kicker: DEMONSTRAÇÃO
-    title: "TEXTO NO\nCENÁRIO"
-    subtitle: Treze composições e tudo o que dá para ajustar.
-    caption: SAGADECK / TEXTO NO CENÁRIO
-    notes: Cada slide deste deck mostra uma composição (campo scene) ou uma opção. Abra o painel Formatar para ver os campos.
-
-  - layout: section
-    title: As composições
-    subtitle: Campo "Composição" (scene). O texto continua editável em todas.
-
-  - layout: scenography
-    scene: stage
-    kicker: "scene: stage"
-    title: "ALÉM DO\nÓBVIO"
-    subtitle: Palco e profundidade. Letras monumentais atrás de uma escultura.
-    caption: PALCO E PROFUNDIDADE
-
-  - layout: scenography
-    scene: floor
-    kicker: "scene: floor"
-    title: "NOVOS\nCAMINHOS"
-    caption: CHÃO EM PERSPECTIVA
-
-  - layout: scenography
-    scene: signs
-    kicker: "scene: signs"
-    title: "IDEIAS\nEM CENA"
-    subtitle: Uma placa na cidade.
-    caption: PLACAS NA CIDADE
-
-  - layout: scenography
-    scene: terminal
-    kicker: ./acesso --scene terminal
-    title: "acesso\nconcedido"
-    subtitle: Segurança começa pela curiosidade.
-    caption: TERMINAL HACKER
-
-  - layout: scenography
-    scene: cafe
-    kicker: "Hoje no cardápio (scene: cafe)"
-    title: "Ideias coadas\nna hora"
-    subtitle: Com calma, açúcar a gosto.
-    caption: LOUSA DE CAFÉ
-
-  - layout: scenography
-    scene: travel
-    kicker: "EMBARQUE IMEDIATO / scene: travel"
-    title: "PRÓXIMO\nDESTINO"
-    subtitle: O plano para os próximos 12 meses.
-    caption: CARTÃO DE EMBARQUE
-
-  - layout: scenography
-    scene: ticker
-    kicker: "Q3 2026 / scene: ticker"
-    title: "RESULTADO\nRECORDE"
-    subtitle: Receita 38% acima do ano passado.
-    caption: PREGÃO FINANCEIRO
-
-  - layout: scenography
-    scene: marquee
-    kicker: "EM CARTAZ / scene: marquee"
-    title: "HOJE:\nA ESTREIA"
-    subtitle: Sessão única, entrada franca.
-    caption: LETREIRO DE CINEMA
-
-  - layout: scenography
-    scene: blueprint
-    kicker: "scene: blueprint"
-    title: "PROJETO\nDO FUTURO"
-    subtitle: medidas em ideias, escala 1:1
-    caption: PLANTA TÉCNICA
-
-  - layout: scenography
-    scene: magazine
-    kicker: "CAPA / scene: magazine"
-    title: "O ANO DA\nVIRADA"
-    subtitle: Como uma equipe pequena mudou o jogo.
-    caption: CAPA DE REVISTA
-
-  - layout: scenography
-    scene: orbit
-    kicker: "scene: orbit"
-    title: "MISSÃO\nCUMPRIDA"
-    subtitle: Da ideia à órbita em seis meses.
-    caption: ÓRBITA
-
-  - layout: scenography
-    scene: synthwave
-    kicker: "scene: synthwave"
-    title: "DE VOLTA\nAO FUTURO"
-    subtitle: As ideias que voltaram com tudo.
-    caption: NEON ANOS 80
-
-  - layout: scenography
-    scene: gallery
-    kicker: "scene: gallery"
-    title: "Menos\né mais"
-    subtitle: Uma ideia por parede.
-    caption: PAREDE DE GALERIA
-
-  - layout: section
-    title: E dá para ajustar
-    subtitle: Imagem de fundo, transparência, recorte na frente das letras e tamanho do texto.
-
-  - layout: scenography
-    scene: stage
-    image: imagens/cidade.svg
-    imageOpacity: 1
-    kicker: "image: imagens/cidade.svg"
-    title: "IMAGEM DE\nFUNDO"
-    subtitle: "Imagem de fundo (image), sem transparência: imageOpacity: 1"
-    caption: IMAGEM DE FUNDO
-    notes: Troque imagens/cidade.svg por uma foto sua (arquivo ao lado do deck ou link).
-
-  - layout: scenography
-    scene: stage
-    image: imagens/cidade.svg
-    imageOpacity: 0.3
-    kicker: "imageOpacity: 0.3"
-    title: "MAIS\nTRANSPARENTE"
-    subtitle: De 0 (some) a 1 (inteira). Sem o campo, fica em 0.85.
-    caption: TRANSPARÊNCIA DO FUNDO
-
-  - layout: scenography
-    scene: floor
-    foreground: imagens/pessoa.svg
-    kicker: "foreground: imagens/pessoa.svg"
-    title: "NA FRENTE\nDAS LETRAS"
-    caption: RECORTE EM PRIMEIRO PLANO
-    notes: O recorte (PNG ou SVG com fundo transparente, do tamanho do slide) fica por cima do texto. O fundo não é recortado sozinho; recorte a pessoa num editor.
-
-  - layout: scenography
-    scene: gallery
-    foreground: imagens/pessoa.svg
-    kicker: "foreground + gallery"
-    title: "Olhe de\nperto"
-    subtitle: Alguém parado diante da parede.
-    caption: RECORTE NA GALERIA
-
-  - layout: scenography
-    scene: stage
-    image: imagens/cidade.svg
-    imageOpacity: 0.6
-    foreground: imagens/pessoa.svg
-    titleSize: 300
-    kicker: "titleSize: 300"
-    title: "TUDO\nJUNTO"
-    subtitle: Fundo, transparência, recorte e texto maior.
-    caption: TUDO JUNTO
-
-  - layout: scenography
-    scene: orbit
-    titleSize: 110
-    kicker: "titleSize: 110"
-    title: "Texto menor, mais respiro"
-    subtitle: Sem titleSize, cada composição usa o seu tamanho padrão.
-    caption: TAMANHO DO TEXTO
-
-  - layout: end
-    title: Agora é com você
-    subtitle: Inserir, Texto no cenário. Depois é só escolher a composição.

package/templates/cenario/imagens/cidade.svg

@@ -1,30 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
-  <!-- fundo de exemplo do deck "Texto no cenário": uma cidade ao entardecer (troque por uma foto sua) -->
-  <defs>
-    <linearGradient id="ceu" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#241a4f"/>
-      <stop offset=".55" stop-color="#b8517a"/>
-      <stop offset=".8" stop-color="#ffb070"/>
-    </linearGradient>
-    <pattern id="janelas" width="36" height="44" patternUnits="userSpaceOnUse">
-      <rect x="8" y="10" width="14" height="18" fill="#ffd98a" opacity=".75"/>
-    </pattern>
-  </defs>
-  <rect width="1920" height="1080" fill="url(#ceu)"/>
-  <circle cx="1380" cy="700" r="170" fill="#ffe2a6" opacity=".9"/>
-  <g fill="#3a2350">
-    <rect x="0" y="640" width="220" height="440"/><rect x="240" y="520" width="170" height="560"/>
-    <rect x="430" y="700" width="260" height="380"/><rect x="700" y="430" width="150" height="650"/>
-    <rect x="870" y="610" width="230" height="470"/><rect x="1120" y="540" width="190" height="540"/>
-    <rect x="1330" y="760" width="210" height="320"/><rect x="1560" y="480" width="160" height="600"/>
-    <rect x="1740" y="660" width="180" height="420"/>
-  </g>
-  <g fill="#1d1230">
-    <rect x="100" y="780" width="260" height="300"/><rect x="560" y="820" width="210" height="260"/>
-    <rect x="980" y="760" width="240" height="320"/><rect x="1450" y="840" width="300" height="240"/>
-  </g>
-  <g fill="url(#janelas)">
-    <rect x="240" y="520" width="170" height="560"/><rect x="700" y="430" width="150" height="650"/>
-    <rect x="1120" y="540" width="190" height="540"/><rect x="1560" y="480" width="160" height="600"/>
-  </g>
-</svg>

package/templates/cenario/imagens/pessoa.svg

@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
-  <!-- recorte de exemplo (fundo transparente): uma pessoa em pé, à direita. Fica na frente das letras (foreground).
-       Para uma foto sua, recorte a pessoa num editor e salve como PNG transparente do mesmo tamanho do slide. -->
-  <defs>
-    <linearGradient id="luz" x1="0" y1="0" x2="1" y2="0">
-      <stop offset="0" stop-color="#2a2238"/>
-      <stop offset=".75" stop-color="#1a1424"/>
-      <stop offset="1" stop-color="#ff9a6b"/>
-    </linearGradient>
-  </defs>
-  <g fill="url(#luz)">
-    <ellipse cx="1470" cy="455" rx="62" ry="74"/>
-    <path d="M1452 520h40l10 30c70 10 118 40 130 110l40 250c6 40-40 50-52 12l-40-190-10 398h-68l-20-300-20 300h-68l-12-398-40 190c-12 38-58 28-52-12l40-250c12-70 60-100 122-110z"/>
-  </g>
-</svg>