primocode 8.42.1 → 9.0.0

package/studio/web/js/render.js

@@ -1,1852 +0,0 @@
-/* ==========================================================================
-   render.js — desenha uma CENA (Prisma, Tela, Corte, Traço).
-   Uma cena é uma tela de largura x altura com elementos dentro.
-   Dois modos: layout nomeado (o estúdio posiciona) ou "livre" (x/y/l/a).
-   ========================================================================== */
-
-/* ── A QUEBRA DA LEGENDA ─────────────────────────────────────────────────
- * Legenda de vídeo tem regra de ofício, e ela não é opinião: linha curta o
- * bastante para o olho pegar de relance (~38 caracteres em 1080p), no máximo
- * três linhas, e a quebra caindo em espaço — nunca no meio da palavra.
- *
- * E as linhas saem EQUILIBRADAS. Encher a primeira até o talo e deixar duas
- * palavras na segunda é o que faz a legenda parecer torta mesmo estando
- * centralizada — foi essa a reclamação.
- */
-var LEGENDA_LARGURA = 38;
-
-/** Quebra gulosa numa largura dada: enche a linha até não caber mais. */
-function envolver(palavras, largura) {
-  var linhas = [];
-  var atual = "";
-  for (var i = 0; i < palavras.length; i++) {
-    var tenta = atual ? atual + " " + palavras[i] : palavras[i];
-    if (atual && tenta.length > largura) { linhas.push(atual); atual = palavras[i]; }
-    else atual = tenta;
-  }
-  if (atual) linhas.push(atual);
-  return linhas;
-}
-
-function quebrarLegenda(texto) {
-  var t = String(texto == null ? "" : texto).replace(/\s+/g, " ").trim();
-  if (!t) return "";
-  if (t.length <= LEGENDA_LARGURA) return t;
-
-  var palavras = t.split(" ");
-  var quantas = envolver(palavras, LEGENDA_LARGURA).length;
-
-  /* O EQUILÍBRIO.
-   *
-   * A quebra gulosa enche a primeira linha até o talo e larga duas palavras na
-   * última — é isso que faz a legenda parecer torta mesmo estando
-   * centralizada, e foi essa a reclamação.
-   *
-   * A primeira tentativa foi dividir o comprimento pelo número de linhas e
-   * cortar no alvo. Não serve: o resto se acumula na última, que estourava a
-   * largura (41 caracteres numa régua de 38).
-   *
-   * O que serve é apertar a régua: procurar a MENOR largura que ainda cabe no
-   * mesmo número de linhas. Aí nenhuma linha passa do teto — a régua só
-   * encolheu — e todas ficam parecidas, porque foi o aperto que as igualou.
-   */
-  var melhor = LEGENDA_LARGURA;
-  for (var w = LEGENDA_LARGURA - 1; w >= 12; w--) {
-    if (envolver(palavras, w).length > quantas) break;
-    melhor = w;
-  }
-  return envolver(palavras, melhor).join("\n");
-}
-
-var PAPEIS = {
-  chapeu:    { classe: "chapeu" },
-  titulo:    { tamanho: 84, peso: 660, altura: 1.06 },
-  subtitulo: { tamanho: 46, peso: 620, altura: 1.14 },
-  apoio:     { tamanho: 30, peso: 400, altura: 1.45, cor: "var(--c-fraco)" },
-  corpo:     { tamanho: 25, peso: 400, altura: 1.5, classe: "corpo" },
-  legenda:   { tamanho: 18, peso: 400, altura: 1.45, cor: "var(--c-fraco)", classe: "corpo" },
-  /* Legenda de FALA, para vídeo — outra coisa de `legenda`, que é a nota de
-     rodapé de um slide. 18px sobre 1080p é ilegível no celular, e legenda de
-     vídeo é lida em movimento, muitas vezes sem som. Grande, com peso, e com
-     chapa escura atrás para funcionar sobre qualquer imagem. */
-  fala:      { tamanho: 52, peso: 640, altura: 1.25, classe: "fala" },
-};
-
-var LAYOUTS = ["capa", "titulo", "secao", "duas-colunas", "tres-colunas",
-               "citacao", "numeros", "imagem-direita", "imagem-esquerda",
-               "centro", "livre"];
-
-function _fugir(s) {
-  return String(s == null ? "" : s)
-    .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-
-function _rico(s) {
-  return _fugir(s)
-    .replace(/\*\*([^*]+)\*\*/g, "<b>$1</b>")
-    .replace(/(^|[^*])\*([^*\n]+)\*/g, "$1<i>$2</i>")
-    .replace(/`([^`]+)`/g, "<code>$1</code>");
-}
-
-function _px(v) { return (typeof v === "number" ? v + "px" : v); }
-
-/* Envolve cada palavra em um span, sem tocar nas tags que já existem. */
-function _porPalavra(html) {
-  var p = 0;
-  return html.split(/(<[^>]*>)/).map(function (parte) {
-    if (parte.charAt(0) === "<") return parte;          // tag: passa direto
-    return parte.replace(/(\S+)/g, function (w) {
-      return '<span class="pal" style="--p:' + (p++) + '">' + w + "</span>";
-    });
-  }).join("");
-}
-
-/* ------------------------------------------------------------------ fundo */
-
-function aplicarFundo(no, fundo) {
-  if (!fundo) return;
-  if (typeof fundo === "string") {
-    // Os ONZE que o render.css define.
-    //
-    // A lista aqui tinha seis. Os outros cinco — aurora, raios, ondas,
-    // nevoa, xadrez — caíam no `else` e viravam `background: "aurora"`:
-    // CSS inválido, fundo NENHUM. E são justamente os que a spec recomenda
-    // para vídeo, então toda cena que pedia aurora ou raios saía chapada.
-    // Era metade do "os vídeos ficaram todos iguais".
-    if (/^(malha|brilho|grade|pontos|suave|vinheta|aurora|nevoa|ondas|raios|xadrez)$/.test(fundo)) {
-      no.setAttribute("data-fundo", fundo);
-    } else if (fundo === "marca") {
-      /* A cor da casa, chapada e sem efeito nenhum. Num anúncio de marca é o
-         fundo mais usado de todos — e escrevê-lo como `"#21C25E"` obrigaria a
-         repetir o hexadecimal em cada cena, que é como uma delas acaba com a
-         cor de ontem depois de a marca mudar de tom. */
-      no.style.background = "var(--c-tom)";
-      no.setAttribute("data-fundo", "marca");
-    } else no.style.background = fundo;
-    return;
-  }
-  if (fundo.tipo === "gradiente") {
-    no.style.background = "linear-gradient(" + (fundo.angulo != null ? fundo.angulo : 160) + "deg, " +
-      (fundo.de || "#111") + ", " + (fundo.para || "#333") + ")";
-  } else if (fundo.imagem) {
-    no.style.backgroundImage = "url('" + fundo.imagem + "')";
-    no.style.backgroundSize = "cover";
-    no.style.backgroundPosition = fundo.posicao || "center";
-    if (fundo.escurecer) {
-      var v = document.createElement("div");
-      v.className = "cobertura";
-      v.style.background = "rgba(4,6,10," + fundo.escurecer + ")";
-      no.appendChild(v);
-    }
-  }
-}
-
-/* --------------------------------------------------------------- gráficos */
-
-function svgGrafico(e, l, a) {
-  /* Os dados podem chegar como "dados" ou como "itens", e o tipo como
-     "grafico", "estilo" ou "tipo".
-
-     O nome certo é `dados` + `grafico`, e é o que a spec ensina. Mas quem
-     escreve um gráfico — a IA ou uma pessoa — chuta `itens`, porque é o
-     campo de TODOS os outros elementos da mesma spec (lista, cartoes,
-     numeros usam `itens`). Com o nome trocado esta função devolvia string
-     vazia: o gráfico simplesmente não existia na tela, sem erro nenhum.
-     Aceitar as duas grafias custa uma linha e evita a falha muda. */
-  var bruto = e.dados || e.itens || [];
-  var dados = bruto.map(function (d) {
-    return Array.isArray(d) ? { r: d[0], v: +d[1] || 0 } : { r: d.rotulo, v: +d.valor || 0 };
-  });
-  if (!dados.length) return "";
-  var cores = e.cores || ["var(--c-tom)", "var(--c-tom2)", "#7c9cff", "#2fbf7f", "#f472b6", "#facc15"];
-  var max = Math.max.apply(null, dados.map(function (d) { return d.v; })) || 1;
-  var tipo = e.grafico || e.estilo || e.tipoGrafico || "barras";
-  var pad = { e: 8, d: 8, t: 14, b: 42 };
-  var iw = l - pad.e - pad.d, ih = a - pad.t - pad.b;
-  var p = ['<svg viewBox="0 0 ' + l + " " + a + '" width="' + l + '" height="' + a + '">'];
-
-  if (tipo === "pizza" || tipo === "rosca") {
-    var total = dados.reduce(function (s, d) { return s + d.v; }, 0) || 1;
-    var cx = l / 2, cy = a / 2 - 8, r = Math.min(l, a) / 2 - 34, ang = -Math.PI / 2;
-    dados.forEach(function (d, i) {
-      var fim = ang + (d.v / total) * Math.PI * 2;
-      var x1 = cx + r * Math.cos(ang), y1 = cy + r * Math.sin(ang);
-      var x2 = cx + r * Math.cos(fim), y2 = cy + r * Math.sin(fim);
-      p.push('<path d="M' + cx + " " + cy + " L" + x1 + " " + y1 +
-             " A" + r + " " + r + " 0 " + (fim - ang > Math.PI ? 1 : 0) + " 1 " + x2 + " " + y2 +
-             ' Z" fill="' + cores[i % cores.length] + '"/>');
-      ang = fim;
-    });
-    if (tipo === "rosca") p.push('<circle cx="' + cx + '" cy="' + cy + '" r="' + (r * 0.58) + '" fill="var(--c-fundo)"/>');
-  } else if (tipo === "linha" || tipo === "area") {
-    var passo = dados.length > 1 ? iw / (dados.length - 1) : 0;
-    var pts = dados.map(function (d, i) {
-      return [pad.e + i * passo, pad.t + ih - (d.v / max) * ih];
-    });
-    var caminho = pts.map(function (q, i) { return (i ? "L" : "M") + q[0] + " " + q[1]; }).join(" ");
-    if (tipo === "area") {
-      p.push('<path d="' + caminho + " L" + pts[pts.length - 1][0] + " " + (pad.t + ih) +
-             " L" + pts[0][0] + " " + (pad.t + ih) + ' Z" fill="' + cores[0] + '" opacity=".18"/>');
-    }
-    p.push('<path d="' + caminho + '" fill="none" stroke="' + cores[0] + '" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>');
-    pts.forEach(function (q) { p.push('<circle cx="' + q[0] + '" cy="' + q[1] + '" r="6" fill="' + cores[0] + '"/>'); });
-  } else {
-    var larg = iw / dados.length;
-    var barra = Math.min(larg * 0.68, 130);          // barra larga demais vira bloco
-    dados.forEach(function (d, i) {
-      var h = (d.v / max) * ih;
-      var x = pad.e + i * larg + (larg - barra) / 2;
-      p.push('<rect x="' + x + '" y="' + (pad.t + ih - h) + '" width="' + barra +
-             '" height="' + Math.max(h, 2) + '" rx="7" fill="' + cores[i % cores.length] + '"/>');
-    });
-  }
-
-  if (tipo !== "pizza" && tipo !== "rosca") {
-    var larg2 = iw / dados.length;
-    dados.forEach(function (d, i) {
-      p.push('<text x="' + (pad.e + i * larg2 + larg2 / 2) + '" y="' + (a - 16) +
-             '" text-anchor="middle" fill="var(--c-fraco)" font-size="17" font-family="inherit">' +
-             _fugir(d.r) + "</text>");
-    });
-  } else {
-    dados.forEach(function (d, i) {
-      p.push('<rect x="' + (16 + i * 132) + '" y="' + (a - 26) + '" width="12" height="12" rx="3" fill="' + cores[i % cores.length] + '"/>');
-      p.push('<text x="' + (34 + i * 132) + '" y="' + (a - 15) +
-             '" fill="var(--c-fraco)" font-size="16" font-family="inherit">' + _fugir(d.r) + "</text>");
-    });
-  }
-  p.push("</svg>");
-  return p.join("");
-}
-
-/* -------------------------------------------------------------- elementos */
-
-/* O KIT DE ANÚNCIO — os quatro últimos da lista abaixo.
- *
- * Nasceram de um vídeo de referência mandado pelo dono — um comercial de
- * fintech — com uma frase só: "ainda não tá bom, tá genérico. Quero nesse
- * nível."
- *
- * Medindo a peça de hoje contra aquela, o que faltava não era tema nem cor:
- * tema claro e `marca.cor` já existiam e resolvem o mundo da marca. O que não
- * existia era o PRODUTO. Um anúncio de cartão mostra o cartão, mostra o app
- * funcionando dentro do celular, mostra a linha de produtos e assina no fim.
- * Com o vocabulário antigo, "o cartão" era um retângulo verde com a palavra
- * "cartão" escrita dentro — e é exatamente isso que se lê como genérico.
- *
- * ── A LISTA ABAIXO É LIDA POR UM TESTE, e por isso não tem comentário dentro.
- * O `vocabulario.test.js` recorta este objeto com uma expressão regular e
- * pega as palavras: qualquer texto entre as chaves vira "tipo que o servidor
- * precisa aceitar", e o teste passa a cobrar `fintech`, `genérico` e `dono`.
- * Comentário sobre os tipos mora AQUI FORA. */
-var TIPOS_CONHECIDOS = { texto: 1, lista: 1, cartoes: 1, numeros: 1, tabela: 1, codigo: 1,
-  citacao: 1, forma: 1, imagem: 1, icone: 1, grafico: 1, no: 1, conector: 1,
-  objeto3d: 1, clipe: 1,
-  selo: 1, progresso: 1, avatar: 1, dispositivo: 1, conversa: 1, passos: 1,
-  opcoes: 1,
-  cartao: 1, app: 1, vitrine: 1, assinatura: 1 };
-/* Os sete últimos são o vocabulário do vídeo de referência: pílula de estado,
-   trilha de progresso, foto de pessoa, celular/notebook com conteúdo dentro,
-   balões de conversa, etapas com uma acesa, e pergunta com alternativas.
-
-   O comentário mora AQUI FORA porque test/vocabulario.test.js lê esta lista
-   com expressão regular, comparando com a do servidor — e palavra de
-   comentário dentro das chaves entrava na lista como se fosse um tipo. */
-
-/* ── chaves de animação ──────────────────────────────────────────────────
-   Transforma a lista de instantes de um elemento numa regra @keyframes de
-   verdade e prende ela no elemento.
-
-   Os nomes precisam ser únicos por página: o mesmo documento aparece várias
-   vezes ao mesmo tempo (palco, miniaturas do painel, clipes da tira), e
-   dois @keyframes de mesmo nome com conteúdo diferente se atropelariam —
-   a última regra injetada venceria em TODAS as cópias. */
-var _nChave = 0;
-
-function _numero(v, padrao) {
-  return typeof v === "number" && isFinite(v) ? v : padrao;
-}
-
-function aplicarChaves(no, e, ctx) {
-  var chaves = e.chaves.slice().sort(function (a, b) {
-    return _numero(a.t, 0) - _numero(b.t, 0);
-  });
-
-  // Um campo OMITIDO numa chave herda o valor da chave anterior — não pula
-  // para um padrão fixo. Sem isto, uma chave que só mexe em `opacidade`
-  // zerava a `escala` implícita: o elemento nascia com scale(0) e sumia da
-  // tela, e a animação parecia "bugada e atrasada". Herdar é o que a pessoa
-  // espera: "o que eu não toquei, fica como estava". O primeiro valor de
-  // cada campo, quando nem a primeira chave o declara, é o neutro (escala e
-  // opacidade em 1, deslocamento e giro em 0) — nunca zero para escala.
-  // giroX/giroY/prof são o 3D: viram rotateX/rotateY/translateZ com uma
-  // perspectiva na frente. É o que faz um cartão virar de verdade em vez de
-  // só encolher — pedido do dono: "quero que a IA faça coisas 3D, mexa com
-  // keyframes". escalaX/escalaY esticam num eixo só (a "gota" que se
-  // achata ao pousar). `prof`, não `z`: `z` no elemento já é a ordem das
-  // camadas (zIndex), e o mesmo nome com dois sentidos é armadilha.
-  var NEUTRO = { x: 0, y: 0, escala: 1, escalaX: 1, escalaY: 1, giro: 0, giroX: 0, giroY: 0, prof: 0, opacidade: 1, desfoque: 0 };
-  var CAMPOS = ["x", "y", "escala", "escalaX", "escalaY", "giro", "giroX", "giroY", "prof", "opacidade", "desfoque"];
-  var herdado = {};
-  CAMPOS.forEach(function (c) {
-    // semente: primeiro valor declarado em qualquer chave, senão o neutro.
-    for (var i = 0; i < chaves.length; i++) {
-      if (typeof chaves[i][c] === "number" && isFinite(chaves[i][c])) { herdado[c] = chaves[i][c]; return; }
-    }
-    herdado[c] = NEUTRO[c];
-  });
-
-  // Quais campos esta animação USA. Decidido UMA vez, ANTES das chaves, e é
-  // o que faz o navegador interpolar: a lista de `transform` precisa ter as
-  // MESMAS funções, na mesma ordem, em toda chave. Emitir só o que é
-  // diferente de zero deixava a chave do meio de `giroY: -90 → 0 → 12` sem
-  // perspective/rotateY — listas incompatíveis, o navegador desiste da
-  // interpolação por função e cai na matriz, e a perspectiva se perde no meio
-  // do giro. Vale igual para `rotate(0deg)` e para o blur.
-  var usado = {};
-  CAMPOS.forEach(function (c) {
-    usado[c] = herdado[c] !== NEUTRO[c] || chaves.some(function (k) {
-      return typeof k[c] === "number" && isFinite(k[c]) && k[c] !== NEUTRO[c];
-    });
-  });
-  // O MESMO juiz que decide o preserve-3d (linha do `transformStyle`): se os
-  // dois discordarem, sobra elemento achatado com perspectiva ou o contrário.
-  var tem3d = tem3dEm(chaves);
-
-  var nome = "ch" + (++_nChave);
-  var passos = chaves.map(function (k) {
-    CAMPOS.forEach(function (c) {
-      if (typeof k[c] === "number" && isFinite(k[c])) herdado[c] = k[c];
-    });
-    var pct = Math.max(0, Math.min(1, _numero(k.t, 0))) * 100;
-    var mov = [];
-    // x e y de uma chave são DESLOCAMENTO a partir de onde o elemento está.
-    // Assim a chave continua valendo se a pessoa arrastar o elemento no
-    // palco depois — o contrário obrigaria a refazer todas as chaves.
-    var dx = herdado.x, dy = herdado.y;
-    // A perspectiva vai NA transformação, não no pai: o pai é a cena, e uma
-    // perspectiva lá mudaria todos os elementos.
-    if (tem3d) mov.push("perspective(1200px)");
-    if (usado.x || usado.y) mov.push("translate(" + dx + "px," + dy + "px)");
-    if (usado.prof) mov.push("translateZ(" + herdado.prof + "px)");
-    if (usado.escala) mov.push("scale(" + herdado.escala + ")");
-    if (usado.escalaX || usado.escalaY) mov.push("scale(" + herdado.escalaX + "," + herdado.escalaY + ")");
-    if (usado.giroX) mov.push("rotateX(" + herdado.giroX + "deg)");
-    if (usado.giroY) mov.push("rotateY(" + herdado.giroY + "deg)");
-    if (usado.giro) mov.push("rotate(" + herdado.giro + "deg)");
-
-    var linhas = ["transform:" + (mov.length ? mov.join(" ") : "none")];
-    linhas.push("opacity:" + herdado.opacidade);
-    if (usado.desfoque) {
-      linhas.push("filter:blur(" + Math.max(0, herdado.desfoque) + "px)");
-    }
-    return pct.toFixed(3) + "%{" + linhas.join(";") + "}";
-  }).join("");
-
-  // A regra vai na RAIZ da cena, não dentro do elemento.
-  //
-  // Presa no próprio elemento ela era apagada segundos depois: quem desenha
-  // o conteúdo (texto, lista, número) escreve o innerHTML e leva junto tudo
-  // que estivesse ali. O elemento continuava com `animation-name: ch1`
-  // apontando para uma regra que não existia mais — a animação simplesmente
-  // não acontecia, sem erro nenhum no console. A cena só recebe filhos, e
-  // por isso a regra sobrevive lá.
-  var folha = document.createElement("style");
-  folha.textContent = "@keyframes " + nome + "{" + passos + "}";
-  (ctx.raiz || no).appendChild(folha);
-
-  var dur = _numero(ctx.duracao, 4);
-  no.style.animationName = nome;
-  no.style.animationDuration = dur + "s";
-  no.style.animationTimingFunction = curvaDe(e.suavizar);
-  no.style.animationFillMode = "both";
-  no.style.animationIterationCount = e.repetir ? "infinite" : "1";
-  if (e.repetir && e.vaiEVolta) no.style.animationDirection = "alternate";
-  if (tem3dEm(chaves)) no.style.transformStyle = "preserve-3d";
-}
-
-function tem3dEm(chaves) {
-  for (var i = 0; i < chaves.length; i++) {
-    if (chaves[i].giroX || chaves[i].giroY || chaves[i].prof) return true;
-  }
-  return false;
-}
-
-/* As curvas com NOME. `suavizar: false` continua sendo linear; o padrão
-   continua sendo a curva suave. Os nomes existem porque "elástico" e "salto"
-   são o que separa motion de slide animado, e pedir cubic-bezier a quem
-   escreve JSON é pedir chute. */
-var CURVAS = {
-  suave:    "cubic-bezier(.4,0,.2,1)",
-  linear:   "linear",
-  entrada:  "cubic-bezier(.4,0,1,1)",       // acelera: sai devagar, chega rápido
-  saida:    "cubic-bezier(0,0,.2,1)",       // freia: chega devagar
-  elastico: "cubic-bezier(.34,1.56,.64,1)", // passa do ponto e volta
-  salto:    "cubic-bezier(.68,-.55,.27,1.55)", // recua, dispara, passa e assenta
-  degrau:   "steps(6, end)",                // quadro a quadro, para o "stop motion"
-};
-function curvaDe(suavizar) {
-  if (suavizar === false) return CURVAS.linear;
-  if (typeof suavizar === "string" && CURVAS[suavizar]) return CURVAS[suavizar];
-  if (typeof suavizar === "string" && /^(cubic-bezier|steps)\(/.test(suavizar)) return suavizar;
-  return CURVAS.suave;
-}
-
-/* ── identidade da marca ─────────────────────────────────────────────────
-   "Ele não escolhe as cores dos textos, não escolhe tema, não escolhe uma
-   imagem de fundo, não coloca uma logo. Ficou horrível."
-
-   O logo era o mais gritante: não havia NENHUM jeito de pôr um. Dava para
-   subir a imagem e posicionar à mão, cena por cena — o que ninguém faz num
-   vídeo de dez cenas, e a IA nunca fazia.
-
-   `doc.marca` resolve de uma vez: o logo aparece em todas as cenas, no
-   canto, no tamanho certo, sem entrar no fluxo do layout. E `marca.cor`
-   define a cor de destaque do documento inteiro, que é o que dá identidade
-   aos números, às barras do gráfico e aos detalhes.
-
-       "marca": { "logo": "/midia/logo.png", "cor": "#ff5a36",
-                  "canto": "inferior-direita", "opacidade": 0.85 }
-
-   `cena.semMarca: true` tira de uma cena específica — a capa costuma querer
-   o logo grande no meio, não pequeno no canto. */
-var CANTOS = {
-  "superior-esquerda": "top:5.2%;left:5%",
-  "superior-direita": "top:5.2%;right:5%",
-  "inferior-esquerda": "bottom:5.2%;left:5%",
-  "inferior-direita": "bottom:5.2%;right:5%",
-};
-
-function aplicarMarca(no, cena, doc, H) {
-  var m = doc && doc.marca;
-  if (!m || typeof m !== "object") return;
-  // A cor da marca vira a cor de destaque de tudo, a menos que a cena diga
-  // outra — é ela que pinta número, barra de gráfico e detalhe.
-  if (m.cor && !cena.tom) no.style.setProperty("--c-tom", m.cor);
-  if (!m.logo || cena.semMarca) return;
-
-  var caixa = document.createElement("div");
-  caixa.className = "marca-dagua";
-  caixa.style.cssText = "position:absolute;z-index:6;pointer-events:none;"
-    + (CANTOS[m.canto] || CANTOS["inferior-direita"])
-    + ";opacity:" + (m.opacidade != null ? m.opacidade : 0.85);
-  var img = document.createElement("img");
-  img.src = m.logo;
-  img.alt = "";
-  // Altura proporcional à tela, resolvida em PIXELS: a caixa é absoluta e
-  // sem altura própria, e porcentagem dentro dela não resolveria — o logo
-  // sairia no tamanho original, gigante num caso e sumido no outro.
-  var alturaPx = Math.round((H || 1080) * ((m.altura || 4.6) / 100));
-  img.style.cssText = "height:" + alturaPx + "px;width:auto;display:block";
-  caixa.appendChild(img);
-  no.appendChild(caixa);
-}
-
-/* ── objetos 3D ──────────────────────────────────────────────────────────
-   "Quero que tu coloque a função ali no vídeo, na apresentação de slides,
-   pra fazer objeto 3D com animação, tudo assim, bem top."
-
-   Isto é 3D de verdade — perspectiva, faces, profundidade — feito com
-   transform 3D do próprio navegador. Sem WebGL e sem biblioteca: o Studio
-   não tem dependência nenhuma e não vai passar a ter por causa disto. O que
-   dá para fazer assim cobre o que um vídeo institucional pede: um cubo
-   girando com o logo nas faces, um cartão com espessura, uma pilha de
-   camadas em profundidade.
-
-       { "tipo": "objeto3d", "forma": "cubo", "tamanho": 320,
-         "faces": ["Produto", "Dados", "IA"], "girar": 14 }
-
-   `girar` é a volta completa em segundos; 0 deixa parado no ângulo dado.
-   `faces` aceita texto ou URL de imagem. E como o elemento é um nó normal,
-   as chaves de animação valem aqui também: dá para o cubo atravessar a cena
-   girando. */
-var FORMAS_3D = { cubo: 1, caixa: 1, cartao: 1, prisma: 1, painel: 1 };
-
-function _face3d(conteudo, transform, cor) {
-  var f = document.createElement("div");
-  f.className = "face3d";
-  f.style.transform = transform;
-  if (cor) f.style.background = cor;
-  if (/^(https?:|\/)/.test(String(conteudo || ""))) {
-    var im = document.createElement("img");
-    im.src = conteudo;
-    im.alt = "";
-    f.appendChild(im);
-  } else if (conteudo) {
-    f.textContent = conteudo;
-  }
-  return f;
-}
-
-function montar3d(no, e) {
-  var forma = FORMAS_3D[e.forma] ? e.forma : "cubo";
-  var t = +e.tamanho || 320;
-  // A caixa e o prisma são o cubo achatado num eixo: uma medida só muda a
-  // silhueta inteira, e o autor não precisa pensar em seis faces.
-  var prof = forma === "cartao" || forma === "painel" ? Math.max(6, Math.round(t * 0.045))
-    : (forma === "caixa" ? Math.round(t * 0.62) : t);
-  var faces = Array.isArray(e.faces) ? e.faces : [];
-  var cores = Array.isArray(e.cores) ? e.cores : [];
-
-  no.classList.add("obj3d", "f-" + forma);
-  no.style.width = _px(t);
-  no.style.height = _px(forma === "cartao" ? Math.round(t * 0.62) : t);
-  no.style.perspective = _px(e.perspectiva || t * 3.4);
-
-  var corpo = document.createElement("div");
-  corpo.className = "corpo3d";
-  corpo.style.width = _px(t);
-  corpo.style.height = _px(forma === "cartao" ? Math.round(t * 0.62) : t);
-
-  var meia = prof / 2;
-  var h = forma === "cartao" ? Math.round(t * 0.62) : t;
-  var lados = [
-    ["translateZ(" + meia + "px)", 0],
-    ["rotateY(180deg) translateZ(" + meia + "px)", 1],
-    ["rotateY(90deg) translateZ(" + (t / 2) + "px)", 2],
-    ["rotateY(-90deg) translateZ(" + (t / 2) + "px)", 3],
-    ["rotateX(90deg) translateZ(" + (h / 2) + "px)", 4],
-    ["rotateX(-90deg) translateZ(" + (h / 2) + "px)", 5],
-  ];
-  // Cartão e painel têm só frente e verso: as bordas viram espessura, e
-  // desenhar seis faces num objeto de 6px de profundidade só faria sujeira.
-  var quantas = (forma === "cartao" || forma === "painel") ? 2 : 6;
-  for (var i = 0; i < quantas; i++) {
-    var lado = lados[i];
-    var f = _face3d(faces[lado[1]] != null ? faces[lado[1]] : (faces[0] || ""),
-                    lado[0], cores[lado[1] % (cores.length || 1)]);
-    // As laterais são estreitas (a profundidade) e o topo/base são baixos.
-    //
-    // Só mudar a medida não bastava: a face é `inset: 0`, então encostava na
-    // borda esquerda em vez de ficar no meio — e a rotação, que gira em
-    // torno do centro, abria o objeto. O cubo saía com as faces soltas, sem
-    // fechar. Reposicionar a face no centro antes de girar fecha a caixa.
-    if (i >= 2 && i < 4) {
-      f.style.width = _px(prof);
-      f.style.left = _px(Math.round((t - prof) / 2));
-    }
-    if (i >= 4) {
-      f.style.height = _px(prof);
-      f.style.top = _px(Math.round((h - prof) / 2));
-    }
-    corpo.appendChild(f);
-  }
-
-  var giro = e.girar == null ? 14 : +e.girar;
-  var inclina = e.inclinar == null ? -14 : +e.inclinar;
-  if (giro > 0) {
-    corpo.style.animation = "giro3d " + giro + "s linear infinite";
-    corpo.style.setProperty("--inc", inclina + "deg");
-  } else {
-    corpo.style.transform = "rotateX(" + inclina + "deg) rotateY(" + (e.angulo || -28) + "deg)";
-  }
-  no.appendChild(corpo);
-}
-
-function renderElemento(e, ctx) {
-  var no = document.createElement("div");
-  var tipo = e.tipo || "texto";
-  /* Qual elemento do documento é este nó.
-
-     O editor precisava saber, e antes deduzia pela ordem dos nós na tela.
-     A dedução estava errada: os layouts de fluxo separam cabeçalho de corpo
-     e desenham o cabeçalho primeiro, então a ordem na tela NÃO é a ordem do
-     documento. O efeito era clicar num texto e o editor selecionar outro —
-     e mexer no elemento errado. O índice vem carimbado daqui. */
-  if (ctx && ctx.ordem && ctx.ordem.has(e)) no.dataset.i = ctx.ordem.get(e);
-  /* Tipo inventado ("titulo", "subtitulo"...) caía num default sem estilo:
-     texto de 16px num canvas de 1920 — invisível — ou div vazio quando o
-     conteúdo estava noutro campo. O servidor novo recusa; documentos velhos
-     e outros clientes ganham a leitura generosa: vira texto de verdade. */
-  if (!TIPOS_CONHECIDOS[tipo]) {
-    e = { tipo: "texto", papel: /titulo|title/i.test(tipo) ? "titulo" : (e.papel || null),
-          texto: e.texto || e.conteudo || e.titulo || e.valor || e.legenda || "",
-          tamanho: e.tamanho, estilo: e.estilo, anim: e.anim, x: e.x, y: e.y, l: e.l, a: e.a };
-    tipo = "texto";
-  }
-  no.className = "el " + tipo;
-  no.dataset.tipo = tipo;
-
-  /* posição — absoluta só quando o elemento traz coordenadas */
-  var absoluto = e.x != null || e.y != null;
-  if (absoluto) {
-    no.style.position = "absolute";
-    no.style.left = _px(e.x || 0);
-    no.style.top = _px(e.y || 0);
-    if (e.l != null) no.style.width = _px(e.l);
-    if (e.a != null) {
-      // em texto a altura é piso, não gaiola: assim nada é cortado nem colide
-      var elastico = tipo === "texto" || tipo === "lista" || tipo === "citacao" || tipo === "cartoes";
-      no.style[elastico ? "minHeight" : "height"] = _px(e.a);
-    }
-  } else {
-    no.style.position = "relative";
-  }
-  if (e.rotacao) no.style.transform = "rotate(" + e.rotacao + "deg)";
-  if (e.opacidade != null) no.style.opacity = e.opacidade;
-  if (e.sombra) no.style.boxShadow = e.sombra === true ? "0 30px 70px -25px rgba(0,0,0,.6)" : e.sombra;
-  if (e.z != null) no.style.zIndex = e.z;
-  /* MATERIAL: "vidro" é o liquid glass — translúcido, desfocando o que está
-     atrás, com bisel de luz em cima e o reflexo diagonal. Vale em QUALQUER
-     elemento (texto, forma, ícone, imagem, lista, cartões), por isso mora
-     aqui e não num tipo. O CSS faz o resto por `data-material`. */
-  /* A profundidade do elemento na cena: quanto ele acompanha a câmera.
-     >1 vem à frente (anda mais), <1 fica ao fundo (anda menos). É o que
-     transforma um zoom num plano com camadas. */
-  if (e.paralaxe != null && isFinite(Number(e.paralaxe))) no.dataset.paralaxe = Number(e.paralaxe);
-
-  if (e.material) {
-    no.dataset.material = e.material;
-    if (e.raio != null) no.style.borderRadius = _px(e.raio);
-  }
-
-  /* animação */
-  var an = e.anim || ctx.animPadrao;
-  if (an && an !== "nenhuma" && !(e.chaves && e.chaves.length > 1)) {
-    no.setAttribute("data-an", typeof an === "string" ? an : (an.entrada || "subir"));
-    no.style.setProperty("--atraso", (typeof an === "object" && an.atraso != null ? an.atraso : ctx.i * 0.09 + 0.1));
-  }
-
-  /* ── chaves de animação ────────────────────────────────────────────────
-     Antes um elemento só sabia ENTRAR: escolhia-se um efeito de entrada e
-     acabava ali. Não dava para fazer nada percorrer a cena, crescer devagar
-     ou sumir no fim — que é o que separa animação de slide com efeito.
-
-     Uma chave é um instante: `{t: 0.5, x: 200, escala: 1.2}` diz onde o
-     elemento está na metade da cena. Duas ou mais viram uma animação CSS de
-     verdade, gerada aqui, com a duração da cena. O navegador interpola;
-     nós só descrevemos os pontos.
-
-     Quem tem chaves não recebe animação de entrada: as duas brigariam pelo
-     mesmo transform, e a chave é a mais específica das duas. */
-  if (ctx.animar && e.chaves && e.chaves.length > 1) {
-    aplicarChaves(no, e, ctx);
-  }
-
-  switch (tipo) {
-    case "texto": {
-      var papel = PAPEIS[e.papel] || PAPEIS.corpo;
-      no.classList.add("txt");
-      if (papel.classe) no.classList.add(papel.classe);
-      // tamanho explícito manda; sem ele, o padrão cresce no formato vertical
-      no.style.fontSize = _px(e.tamanho || Math.round((papel.tamanho || 25) * (ctx.escalaTipo || 1)));
-      if (e.peso || papel.peso) no.style.fontWeight = e.peso || papel.peso;
-      if (papel.altura) no.style.lineHeight = papel.altura;
-      no.style.color = e.cor || papel.cor || "";
-      /* LEGENDA DE FALA É SEMPRE CENTRALIZADA, e o `alinhar` do modelo não
-         manda nela. Legenda de vídeo alinhada à esquerda não existe em lugar
-         nenhum — ela é lida em movimento, e o olho volta para o meio da tela.
-         Bastava o modelo escrever `alinhar: "esquerda"` uma vez para a legenda
-         sair torta, e ele escrevia. */
-      if (e.alinhar && e.papel !== "fala") {
-        no.style.textAlign = e.alinhar;
-        no.style.alignItems = e.alinhar === "centro" ? "center" : (e.alinhar === "direita" ? "flex-end" : "flex-start");
-      }
-      if (e.fonte === "mono") no.style.fontFamily = "var(--f-mono)";
-      if (e.fonte === "display") no.style.fontFamily = "var(--f-display)";
-      if (e.maiusculas) no.style.textTransform = "uppercase";
-      if (e.espacamento != null) no.style.letterSpacing = e.espacamento + "em";
-      if (e.altura != null) no.style.lineHeight = e.altura;
-      if (e.estilo) no.setAttribute("data-estilo", e.estilo);
-
-      /* A LEGENDA SE QUEBRA SOZINHA.
-         "A IA não consegue formatar bem" — e não vai conseguir: ela escreve a
-         frase, não a diagramação. Quem sabe quantos caracteres cabem numa
-         linha de 1080p é este código, e é ele que quebra.
-
-         Sem isto a legenda saía como parágrafo: cinco linhas subindo pela
-         tela, tapando o rosto de quem fala. */
-      var corpoTexto = _rico(e.papel === "fala" ? quebrarLegenda(e.texto) : e.texto);
-      if (e.papel === "fala" && !e.tamanho) {
-        /* Legenda longa ENCOLHE em vez de crescer para cima. Três linhas com o
-           corpo de uma linha comem metade do quadro, e o rosto de quem fala
-           fica atrás delas.
-           
-           Não se corta palavra: perder o que foi dito é pior que letra menor.
-           O piso de 62% é onde a letra ainda se lê num celular. */
-        var nLinhas = String(quebrarLegenda(e.texto)).split("\n").length;
-        var base = (PAPEIS.fala.tamanho || 52) * (ctx.escalaTipo || 1);
-        var fator = Math.max(0.62, 1 - (nLinhas - 1) * 0.10);
-        if (nLinhas > 1) no.style.fontSize = _px(Math.round(base * fator));
-      }
-
-      // marcador e fita precisam envolver cada linha para o fundo acompanhar
-      if (e.estilo === "marcador" || e.estilo === "fita") {
-        corpoTexto = corpoTexto.split("\n").map(function (l) {
-          return l.trim() ? '<span class="linha">' + l + "</span>" : "";
-        }).join("\n");
-      }
-
-      // palavra a palavra: cada palavra vira um span com atraso próprio
-      var animAtual = e.anim || ctx.animPadrao;
-      if (animAtual === "palavra") corpoTexto = _porPalavra(corpoTexto);
-
-      no.innerHTML = corpoTexto;
-      break;
-    }
-
-    case "lista": {
-      if (e.numerada) no.classList.add("numerada");
-      if (e.marcador) no.setAttribute("data-marcador", e.marcador);
-      (e.itens || []).forEach(function (it, k) {
-        var d = document.createElement("div");
-        d.className = "item";
-        if (e.tamanho) d.style.fontSize = _px(e.tamanho);
-        d.innerHTML = _rico(it);
-        if (e.revelar) {
-          d.setAttribute("data-an", "subir");
-          d.style.setProperty("--atraso", (e.atrasoBase != null ? e.atrasoBase : 0.2) + k * (e.intervalo || 0.14));
-        }
-        no.appendChild(d);
-      });
-      break;
-    }
-
-    case "cartoes": {
-      var n = (e.itens || []).length;
-      no.style.gridTemplateColumns = "repeat(" + Math.min(n || 1, e.colunas || (n > 4 ? 3 : n)) + ", 1fr)";
-      (e.itens || []).forEach(function (it) {
-        var c = document.createElement("div");
-        c.className = "cartao";
-        var t = typeof it === "string" ? it.split("|") : [it.titulo, it.texto];
-        c.innerHTML = "<b>" + _rico((t[0] || "").trim()) + "</b>" +
-                      (t[1] ? "<span>" + _rico(String(t[1]).trim()) + "</span>" : "");
-        no.appendChild(c);
-      });
-      break;
-    }
-
-    /* ── selo ────────────────────────────────────────────────────────────
-       A pílula pequena, em versalete, que diz onde a cena está: "AVANÇADO",
-       "MÓDULO 2 DE 5", "RESULTADO 4". Custa quase nada e é o que separa uma
-       cena que parece produzida de uma cena que parece um slide.
-
-       Antes disso a saída era um `texto` com papel "chapeu", que é só letra
-       menor — sem a pílula, sem a marcação de estado. */
-    case "selo": {
-      no.textContent = "";
-      if (e.icone) {
-        var ic = document.createElement("span");
-        ic.className = "selo-icone";
-        ic.textContent = e.icone;
-        no.appendChild(ic);
-      }
-      var rot = document.createElement("span");
-      rot.textContent = e.texto || e.rotulo || "";
-      no.appendChild(rot);
-      if (e.estilo) no.setAttribute("data-estilo", e.estilo);   // "vivo" | "solto"
-      break;
-    }
-
-    /* ── progresso ───────────────────────────────────────────────────────
-       "4 de 15", com os pontinhos. Diz ao espectador que existe um caminho e
-       onde ele está nele — é o que faz um vídeo de dez cenas não parecer dez
-       cenas soltas. */
-    case "progresso": {
-      var total = Math.max(1, Math.min(40, Number(e.total) || 1));
-      var atual = Math.max(1, Math.min(total, Number(e.atual) || 1));
-      if (e.numero !== false) {
-        var num = document.createElement("b");
-        num.textContent = atual + "/" + total;
-        no.appendChild(num);
-      }
-      var pontos = document.createElement("span");
-      pontos.className = "pontos";
-      for (var pi = 1; pi <= total; pi++) {
-        var pt = document.createElement("i");
-        if (pi === atual) pt.className = "aqui";
-        else if (pi < atual) pt.className = "feito";
-        pontos.appendChild(pt);
-      }
-      no.appendChild(pontos);
-      break;
-    }
-
-    /* ── avatar ──────────────────────────────────────────────────────────
-       A foto redonda com o anel aceso. É como se apresenta uma PESSOA — e
-       vídeo com rosto retém mais que vídeo sem. Antes só existia `imagem`,
-       que é retângulo. */
-    case "avatar": {
-      var d = e.tamanho || 260;
-      no.style.width = _px(d);
-      no.style.height = _px(d);
-      if (e.src) {
-        var foto = document.createElement("img");
-        foto.src = e.src;
-        foto.alt = e.nome || "";
-        no.appendChild(foto);
-      } else {
-        // Sem foto, as iniciais — melhor que um buraco cinza.
-        var ini = document.createElement("b");
-        // Em px, calculado do diâmetro. Em `%` o navegador mede contra a
-        // fonte do PAI, não contra a caixa: as iniciais saíam com 8px dentro
-        // de um círculo de 280 — um pontinho no meio do nada.
-        ini.style.fontSize = _px(Math.round(d * 0.34));
-        ini.textContent = String(e.nome || "?").trim().split(/\s+/)
-          .slice(0, 2).map(function (w) { return w[0]; }).join("").toUpperCase();
-        no.appendChild(ini);
-      }
-      break;
-    }
-
-    /* ── dispositivo ─────────────────────────────────────────────────────
-       O celular, o notebook ou a janela de navegador com conteúdo DENTRO.
-       É o enquadramento que faz uma tela parecer uma tela em vez de um
-       retângulo de texto — e o vídeo de referência usa isso o tempo todo,
-       com a conversa acontecendo dentro do celular.
-
-       O conteúdo é `dentro`: uma lista de elementos comuns, renderizados
-       recursivamente. Assim qualquer coisa cabe ali — conversa, lista,
-       imagem — sem inventar um vocabulário só para o miolo. */
-    case "dispositivo": {
-      var forma = /^(celular|notebook|navegador|tablet)$/.test(e.forma || "")
-        ? e.forma : "celular";
-      no.setAttribute("data-forma", forma);
-      if (e.altura) no.style.height = _px(e.altura);
-      if (e.largura) no.style.width = _px(e.largura);
-
-      var moldura = document.createElement("div");
-      moldura.className = "moldura";
-
-      if (forma === "navegador") {
-        var barra = document.createElement("div");
-        barra.className = "barra-nav";
-        barra.innerHTML = "<i></i><i></i><i></i>"
-          + (e.endereco ? '<span class="url">' + _fugir(e.endereco) + "</span>" : "");
-        moldura.appendChild(barra);
-      }
-
-      var tela = document.createElement("div");
-      tela.className = "tela";
-      if (e.imagem) {
-        tela.style.backgroundImage = "url('" + e.imagem + "')";
-        tela.style.backgroundSize = "cover";
-        tela.style.backgroundPosition = "center";
-      }
-      (e.dentro || []).forEach(function (filho) {
-        if (!filho || !TIPOS_CONHECIDOS[filho.tipo]) return;
-        ctx.i++;
-        tela.appendChild(renderElemento(filho, ctx));
-      });
-      moldura.appendChild(tela);
-      no.appendChild(moldura);
-
-      if (forma === "notebook") {
-        var base = document.createElement("div");
-        base.className = "base";
-        no.appendChild(base);
-      }
-      break;
-    }
-
-    /* ── conversa ────────────────────────────────────────────────────────
-       Balões de pergunta e resposta. É a forma mais direta de mostrar como
-       se usa uma ferramenta de IA — e é o que o vídeo de referência faz
-       dentro do celular. `de: "eu"` alinha à direita; qualquer outra coisa
-       vai para a esquerda, com destaque. */
-    case "conversa": {
-      (e.itens || []).forEach(function (fala, iFala) {
-        var b = document.createElement("div");
-        var quem = typeof fala === "string" ? (iFala % 2 ? "ela" : "eu") : (fala.de || "eu");
-        b.className = "balao " + (quem === "eu" ? "meu" : "dela");
-        b.style.setProperty("--atraso", (0.12 + iFala * 0.28).toFixed(2));
-        b.textContent = typeof fala === "string" ? fala : (fala.texto || "");
-        no.appendChild(b);
-      });
-      break;
-    }
-
-    /* ── passos ──────────────────────────────────────────────────────────
-       Os cartões de etapa com UM aceso. Diferente de `cartoes`: aqui existe
-       ordem e existe "onde estamos agora", e é isso que se quer mostrar. */
-    case "passos": {
-      var itens = e.itens || [];
-      var vivo = Number(e.atual) || 0;                 // 1-based; 0 = nenhum
-      no.style.gridTemplateColumns = "repeat(" + Math.max(1, itens.length) + ", 1fr)";
-      itens.forEach(function (it, k) {
-        var p = document.createElement("div");
-        p.className = "passo" + (k + 1 === vivo ? " agora" : (k + 1 < vivo ? " feito" : ""));
-        var partes = typeof it === "string" ? it.split("|") : [it.titulo, it.texto];
-        var cab = document.createElement("b");
-        cab.textContent = (partes[0] || "").trim();
-        p.appendChild(cab);
-        if (partes[1]) {
-          var sub = document.createElement("span");
-          sub.textContent = String(partes[1]).trim();
-          p.appendChild(sub);
-        }
-        no.appendChild(p);
-      });
-      break;
-    }
-
-    /* ── opcoes ──────────────────────────────────────────────────────────
-       A pergunta com alternativas e uma certa. Faz o espectador PENSAR antes
-       de a resposta aparecer — e uma pausa de pensamento é o que segura
-       alguém num vídeo. `certa` é o índice (1-based) da alternativa boa. */
-    case "opcoes": {
-      if (e.pergunta) {
-        var q = document.createElement("b");
-        q.className = "pergunta";
-        q.textContent = e.pergunta;
-        no.appendChild(q);
-      }
-      var certa = Number(e.certa) || 0;
-      (e.itens || []).forEach(function (it, k) {
-        var o = document.createElement("div");
-        o.className = "opcao" + (k + 1 === certa ? " certa" : "");
-        o.textContent = typeof it === "string" ? it : (it.texto || "");
-        o.style.setProperty("--atraso", (0.1 + k * 0.18).toFixed(2));
-        no.appendChild(o);
-      });
-      break;
-    }
-
-    case "numeros": {
-      var m = (e.itens || []).length;
-      no.style.gridTemplateColumns = "repeat(" + Math.min(m || 1, e.colunas || m) + ", 1fr)";
-      if (e.tamanho) no.style.setProperty("--tam-num", _px(e.tamanho));
-      (e.itens || []).forEach(function (it) {
-        var c = document.createElement("div");
-        c.className = "num";
-        var t = typeof it === "string" ? it.split("|") : [it.valor, it.rotulo];
-        var valor = (t[0] || "").toString().trim();
-        var b = document.createElement("b");
-        b.textContent = valor;
-        // conta do zero até o número quando a cena entra (o player dispara)
-        if (e.contar) {
-          var alvo = parseFloat(valor.replace(/[^\d,.-]/g, "").replace(",", "."));
-          if (!isNaN(alvo)) {
-            b.setAttribute("data-contar", alvo);
-            b.setAttribute("data-molde", valor);
-          }
-        }
-        c.appendChild(b);
-        var s = document.createElement("span");
-        s.textContent = (t[1] || "").toString().trim();
-        c.appendChild(s);
-        no.appendChild(c);
-      });
-      break;
-    }
-
-    case "tabela": {
-      var linhas = e.linhas || [];
-      var h = "<table>";
-      linhas.forEach(function (l, i) {
-        h += "<tr>";
-        l.forEach(function (c) { h += i === 0 ? "<th>" + _fugir(c) + "</th>" : "<td>" + _rico(c) + "</td>"; });
-        h += "</tr>";
-      });
-      no.innerHTML = h + "</table>";
-      break;
-    }
-
-    case "codigo":
-      no.textContent = e.texto || "";
-      if (e.tamanho) no.style.fontSize = _px(e.tamanho);
-      break;
-
-    case "citacao":
-      no.innerHTML = '<div class="aspas">“' + _rico(e.texto) + '”</div>' +
-                     (e.autor ? '<div class="autor">' + _fugir(e.autor) + "</div>" : "");
-      break;
-
-    case "forma": {
-      var f = e.forma || "retangulo";
-      // Forma de vidro: o `preenchimento` vira a TINTA sob o vidro (fraca),
-      // e o vidro em si é do CSS. Pintar o fundo inteiro aqui cobriria o
-      // desfoque — e um vidro opaco é um retângulo.
-      if (e.material === "vidro") {
-        if (e.preenchimento) no.style.setProperty("--tinta", e.preenchimento);
-      } else {
-        no.style.background = e.preenchimento || "var(--c-tom)";
-      }
-      if (e.borda) no.style.border = (e.borda.largura || 2) + "px solid " + (e.borda.cor || "var(--c-linha)");
-      if (f === "circulo") no.style.borderRadius = "999px";
-      // Sem `raio`, o vidro fica com o 28px da folha — escrever 0px inline
-      // aqui vencia o CSS e o painel de vidro saía de canto reto, contra o
-      // "padrão 28" que a spec promete. Forma comum segue quadrada.
-      else if (e.raio != null) no.style.borderRadius = _px(e.raio);
-      else if (e.material !== "vidro") no.style.borderRadius = "0px";
-      if (f === "triangulo") { no.style.clipPath = "polygon(50% 0,100% 100%,0 100%)"; }
-      if (f === "linha") { no.style.height = _px(e.espessura || 3); no.style.borderRadius = "999px"; }
-      if (f === "seta") {
-        no.style.background = "none";
-        no.innerHTML = '<svg viewBox="0 0 100 24" preserveAspectRatio="none" style="width:100%;height:100%">' +
-          '<path d="M0 12h88M78 4l10 8-10 8" fill="none" stroke="' + (e.preenchimento || "var(--c-tom)") +
-          '" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke"/></svg>';
-      }
-      break;
-    }
-
-    case "imagem": {
-      var img = document.createElement("img");
-      img.src = e.src || "";
-      img.alt = e.alt || "";
-      img.style.objectFit = e.ajuste === "conter" ? "contain" : "cover";
-      if (e.posicao) img.style.objectPosition = e.posicao;
-      if (e.filtro) img.style.filter = e.filtro === "cinza" ? "grayscale(1)"
-        : e.filtro === "sepia" ? "sepia(.7)"
-        : e.filtro === "contraste" ? "contrast(1.35) saturate(1.15)"
-        : e.filtro === "desbotado" ? "saturate(.55) brightness(1.08)"
-        : e.filtro;
-      no.style.borderRadius = _px(e.raio != null ? e.raio : 18);
-      if (e.borda) no.style.border = (e.borda.largura || 2) + "px solid " + (e.borda.cor || "var(--c-linha)");
-      if (e.movimento) {
-        no.setAttribute("data-mov", e.movimento);
-        if (e.duracaoMov) img.style.animationDuration = e.duracaoMov + "s";
-      }
-      no.appendChild(img);
-      break;
-    }
-
-    /* ── clipe: um pedaço de vídeo do próprio usuário ────────────────────
-       "Eu gravo o vídeo, e aí ele vai editar: cortar as pausas demoradas,
-       legendar, colocar efeito, transição, uma música que combine."
-
-       Nada disso era possível — o estúdio não tinha como pôr o vídeo de
-       alguém dentro de uma cena. Um `clipe` é um trecho: o arquivo, de onde
-       começa e onde termina. Cortar as pausas vira uma lista de clipes do
-       MESMO arquivo, com os pedaços mudos fora.
-
-       `de` e `ate` são segundos no arquivo original. `mudo` deixa só a
-       imagem (para quando a trilha manda na cena), e `volume` mistura a voz
-       do vídeo com o resto. */
-    case "clipe": {
-      var vid = document.createElement("video");
-      vid.src = e.src || "";
-      vid.preload = "auto";
-      vid.playsInline = true;
-      vid.muted = !!e.mudo;
-      if (e.volume != null) vid.volume = Math.max(0, Math.min(1, e.volume));
-      vid.style.width = "100%";
-      vid.style.height = "100%";
-      vid.style.objectFit = e.ajuste === "conter" ? "contain" : "cover";
-      if (e.posicao) vid.style.objectPosition = e.posicao;
-      if (e.filtro) vid.style.filter = e.filtro === "cinza" ? "grayscale(1)"
-        : e.filtro === "sepia" ? "sepia(.7)"
-        : e.filtro === "contraste" ? "contrast(1.35) saturate(1.15)"
-        : e.filtro === "desbotado" ? "saturate(.55) brightness(1.08)"
-        : e.filtro;
-      // O trecho fica gravado no nó: quem toca (player) e quem exporta
-      // (video.js) leem daqui em vez de reabrir o documento.
-      if (typeof e.de === "number") vid.dataset.de = e.de;
-      if (typeof e.ate === "number") vid.dataset.ate = e.ate;
-      no.style.borderRadius = _px(e.raio != null ? e.raio : 0);
-
-      /* ── SÓ A VOZ, COM A TELA MONTADA POR CIMA ────────────────────────
-       *
-       *   "Não deixa opção de manter só a voz com uma tela de exemplos."
-       *
-       * Faltava mesmo, e não era teimosia do agente: o vocabulário tinha
-       * `mudo` (imagem sem som) e NÃO tinha o contrário. Sem isto, usar a
-       * gravação como narração — a voz da pessoa por cima de telas montadas
-       * pelo estúdio — era impossível de escrever, por mais que se pedisse.
-       *
-       * O <video> continua no lugar, carregando e tocando: é ele que leva o
-       * áudio para o grafo da trilha (e daí para o MP4) e é o `de`/`ate` dele
-       * que dá a duração da cena. O que muda é que ele não aparece — some da
-       * tela e some do quadro exportado, que é o `data-som` lido no
-       * `video.js`. Um <video> com `display:none` também continuaria tocando,
-       * mas alguns navegadores param de decodificar o que não está no
-       * layout, e sem quadro decodificado o player o trata como não-pronto. */
-      if (e.apenas === "som" || e.som === true) {
-        vid.dataset.som = "1";
-        no.style.position = "absolute";
-        no.style.left = "0"; no.style.top = "0";
-        no.style.width = "1px"; no.style.height = "1px";
-        no.style.opacity = "0";
-        no.style.pointerEvents = "none";
-        no.style.overflow = "hidden";
-      }
-      no.appendChild(vid);
-      break;
-    }
-
-    /* ── O CARTÃO ────────────────────────────────────────────────────────
-       Um produto desenhado, não um retângulo com o nome dele escrito dentro.
-       O que faz o olho ler "cartão" são quatro detalhes pequenos e nenhum
-       deles é o formato: o CHIP, o símbolo de aproximação, a numeração
-       mascarada e o pé com nome e validade. Sem eles o desenho é uma caixa;
-       com eles, qualquer pessoa reconhece em um quadro de vídeo.
-
-       A cor sai da marca (`--c-tom`) quando ninguém diz outra, para o cartão
-       pertencer à peça em vez de ser mais um objeto colorido nela. */
-    case "cartao": {
-      var cc = e.cor || "var(--c-tom)";
-      no.style.setProperty("--cc", cc);
-      if (e.largura) no.style.width = _px(e.largura);
-      if (e.movimento) no.setAttribute("data-mov", e.movimento);
-      if (e.face === "verso") no.setAttribute("data-face", "verso");
-
-      var corpo = document.createElement("div");
-      corpo.className = "cartao-corpo";
-
-      var topo = document.createElement("div");
-      topo.className = "cartao-topo";
-      var marca = document.createElement("span");
-      marca.className = "cartao-marca";
-      marca.textContent = e.nome || "";
-      var vari = document.createElement("span");
-      vari.className = "cartao-variante";
-      vari.textContent = e.variante || "";
-      topo.appendChild(marca); topo.appendChild(vari);
-
-      var meio = document.createElement("div");
-      meio.className = "cartao-meio";
-      var chip = document.createElement("i");
-      chip.className = "cartao-chip";
-      // O símbolo de aproximação: três arcos. Em SVG porque em texto ele
-      // depende de uma fonte que a máquina pode não ter.
-      var onda = document.createElement("span");
-      onda.className = "cartao-onda";
-      onda.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true">'
-        + '<path d="M8 5a10 10 0 0 1 0 14M13 8a5.6 5.6 0 0 1 0 8M17.6 2.4a15 15 0 0 1 0 19.2"'
-        + ' fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>';
-      meio.appendChild(chip); meio.appendChild(onda);
-
-      var num = document.createElement("div");
-      num.className = "cartao-numero";
-      // Os quatro últimos dígitos e mais nada: é o que aparece num cartão de
-      // verdade em foto de campanha, e é o que não vira dado de ninguém.
-      num.textContent = "•••• •••• •••• " + String(e.numero || "4821").slice(-4);
-
-      var pe = document.createElement("div");
-      pe.className = "cartao-pe";
-      var quem = document.createElement("span");
-      quem.textContent = e.titular || "SEU NOME AQUI";
-      var val = document.createElement("span");
-      val.textContent = e.validade || "12/29";
-      pe.appendChild(quem); pe.appendChild(val);
-
-      var brilho = document.createElement("i");
-      brilho.className = "cartao-brilho";
-
-      corpo.appendChild(brilho);
-      corpo.appendChild(topo);
-      corpo.appendChild(meio);
-      corpo.appendChild(num);
-      corpo.appendChild(pe);
-      no.appendChild(corpo);
-      break;
-    }
-
-    /* ── A TELA DO APP ───────────────────────────────────────────────────
-       O `dispositivo` já desenhava o aparelho; o que ele mostrava DENTRO era
-       texto centralizado no meio do vidro, que não se parece com aplicativo
-       nenhum. O que faz uma tela parecer um app é a ARRUMAÇÃO: cabeçalho em
-       cima, um número grande, linhas com o nome à esquerda e o valor à
-       direita separadas por fio, e um botão cheio embaixo.
-
-       Vale sozinho na cena e vale dentro do `dispositivo` — é o mesmo
-       elemento, e por isso a tela do celular e a do print da campanha não
-       divergem. */
-    case "app": {
-      if (e.escuro) no.setAttribute("data-escuro", "1");
-      if (e.topo) {
-        var cab = document.createElement("div");
-        cab.className = "app-topo";
-        cab.innerHTML = "<span>" + _fugir(e.topo) + "</span><i></i>";
-        no.appendChild(cab);
-      }
-      if (e.valor) {
-        var caixaV = document.createElement("div");
-        caixaV.className = "app-valor";
-        if (e.rotulo) {
-          var rot = document.createElement("small");
-          rot.textContent = e.rotulo;
-          caixaV.appendChild(rot);
-        }
-        var vv = document.createElement("strong");
-        vv.textContent = e.valor;
-        caixaV.appendChild(vv);
-        no.appendChild(caixaV);
-      }
-      var linhas = e.linhas || e.itens || [];
-      if (linhas.length) {
-        var lista = document.createElement("div");
-        lista.className = "app-linhas";
-        linhas.slice(0, 8).forEach(function (li) {
-          /* Aceita ["nome", "valor"] e "nome|valor" — o segundo é a forma que
-             todo o resto da spec usa (lista, cartoes, passos), e quem escreve
-             o documento vai chutar a que já conhece. */
-          var nome = li, valor = "";
-          if (Array.isArray(li)) { nome = li[0]; valor = li[1] || ""; }
-          else if (typeof li === "string" && li.indexOf("|") > -1) {
-            var par = li.split("|"); nome = par[0]; valor = par.slice(1).join("|");
-          }
-          var linha = document.createElement("div");
-          linha.className = "app-linha";
-          linha.innerHTML = "<span>" + _fugir(String(nome).trim()) + "</span>"
-            + "<b>" + _fugir(String(valor).trim()) + "</b>";
-          lista.appendChild(linha);
-        });
-        no.appendChild(lista);
-      }
-      if (e.botao) {
-        var bt = document.createElement("div");
-        bt.className = "app-botao";
-        bt.textContent = e.botao;
-        no.appendChild(bt);
-      }
-      break;
-    }
-
-    /* ── A VITRINE ───────────────────────────────────────────────────────
-       A linha de produtos, com um escolhido. O `cartoes` genérico resolvia
-       isso com três caixinhas de vidro do tamanho de um selo; aqui os itens
-       são CARTÕES, o atual vem à frente e os outros recuam — que é o desenho
-       de toda tela de "escolha o seu". */
-    case "vitrine": {
-      var itens = (e.itens || []).slice(0, 5);
-      var atual = e.atual != null ? Number(e.atual) : 0;
-      if (e.titulo) {
-        var tt = document.createElement("div");
-        tt.className = "vitrine-titulo";
-        tt.textContent = e.titulo;
-        no.appendChild(tt);
-      }
-      var fila = document.createElement("div");
-      fila.className = "vitrine-fila";
-      itens.forEach(function (it, i) {
-        var dado = typeof it === "string"
-          ? { nome: it.split("|")[0], detalhe: it.split("|").slice(1).join("|") }
-          : (it || {});
-        var mini = renderElemento({
-          tipo: "cartao", nome: e.nome || dado.marca || "",
-          variante: dado.nome || dado.variante || "",
-          cor: dado.cor || e.cor, numero: dado.numero,
-          titular: " ", validade: " ",
-        }, ctx);
-        var col = document.createElement("div");
-        col.className = "vitrine-item" + (i === atual ? " atual" : "");
-        col.appendChild(mini);
-        if (dado.detalhe) {
-          var d = document.createElement("small");
-          d.textContent = dado.detalhe;
-          col.appendChild(d);
-        }
-        fila.appendChild(col);
-      });
-      no.appendChild(fila);
-      break;
-    }
-
-    /* ── A ASSINATURA ────────────────────────────────────────────────────
-       O fim do anúncio. Toda peça de marca fecha assim — o logo sozinho,
-       grande, sobre a cor da casa, e nada mais na tela. Sem este elemento a
-       última cena do vídeo era mais uma frase, e a peça acabava sem assinar
-       quem falou. */
-    case "assinatura": {
-      no.setAttribute("data-sobre", /^(marca|claro|escuro)$/.test(e.sobre || "") ? e.sobre : "marca");
-      if (e.logo) {
-        var img2 = document.createElement("img");
-        img2.className = "assinatura-logo";
-        img2.src = e.logo; img2.alt = e.nome || "";
-        no.appendChild(img2);
-      } else if (e.nome) {
-        var nm = document.createElement("div");
-        nm.className = "assinatura-nome";
-        nm.textContent = e.nome;
-        no.appendChild(nm);
-      }
-      if (e.frase) {
-        var fr = document.createElement("div");
-        fr.className = "assinatura-frase";
-        fr.textContent = e.frase;
-        no.appendChild(fr);
-      }
-      break;
-    }
-
-    case "icone": {
-      var t = e.tamanho || 90;
-      no.style.width = _px(e.l || t);
-      no.style.height = _px(e.a || t);
-      no.style.color = e.cor || "var(--c-tom)";
-      /* ÍCONE COMO OBJETO: `estilo: "app"` é o azulejo de aplicativo —
-         gradiente da cor, brilho em cima, sombra embaixo, o traço branco —
-         e `estilo: "vidro"` é o mesmo azulejo em liquid glass. Pedido do
-         dono ("icon, liquid glass, bem motion"): um ícone de traço sozinho
-         é sinal; num azulejo vira coisa. `fundo` pinta o azulejo; sem ele, a
-         cor do tema. */
-      if (e.estilo === "app" || e.estilo === "vidro") {
-        no.dataset.estilo = e.estilo;
-        no.style.setProperty("--azulejo", e.fundo || e.cor || "var(--c-tom)");
-        if (e.estilo === "app") no.style.color = e.corTraco || "#fff";
-      }
-      // `caminho`: o ícone desenhado pelo modelo (path SVG 24×24) — ver
-      // icones.js. Sem ele, um da lista pelo nome.
-      no.innerHTML = e.caminho
-        ? svgCaminho(e.caminho, { preenchido: !!e.preenchido, traco: e.traco })
-        : svgIcone(e.nome || "estrela");
-      var s = no.querySelector("svg");
-      if (s) s.setAttribute("stroke-width", e.traco || 1.5);
-      break;
-    }
-
-    case "grafico": {
-      var gl = e.l || 900, ga = e.a || 480;
-      if (!absoluto) { no.style.width = _px(gl); no.style.height = _px(ga); }
-      no.innerHTML = svgGrafico(e, gl, ga);
-      break;
-    }
-
-    case "objeto3d": {
-      montar3d(no, e);
-      break;
-    }
-
-    case "no": {
-      if (e.destaque) no.classList.add("destaque");
-      if (e.formato === "circulo") no.classList.add("circulo");
-      if (e.cor) no.style.background = e.cor;
-      if (e.corTexto) no.style.color = e.corTexto;
-      if (e.tamanho) no.style.fontSize = _px(e.tamanho);
-      no.innerHTML = _rico(e.texto);
-      break;
-    }
-
-    default:
-      no.innerHTML = _rico(e.texto || "");
-  }
-
-  return no;
-}
-
-/* ------------------------------------------------------- posição automática */
-
-/* Dá x/y aos nós a partir dos conectores. O autor manda só o grafo. */
-function posicionarAuto(elementos, W, H, modo) {
-  var nos = elementos.filter(function (e) { return e.id && e.tipo !== "conector"; });
-  if (!nos.length) return;
-
-  var links = elementos.filter(function (e) { return e.tipo === "conector" && e.de && e.para; });
-  var porId = {};
-  nos.forEach(function (n) { porId[n.id] = n; });
-
-  var entra = {}, sai = {};
-  nos.forEach(function (n) { entra[n.id] = []; sai[n.id] = []; });
-  links.forEach(function (c) {
-    if (!porId[c.de] || !porId[c.para]) return;
-    sai[c.de].push(c.para);
-    entra[c.para].push(c.de);
-  });
-
-  /* nível = maior distância desde uma raiz, para a seta nunca voltar */
-  var nivel = {}, visto = {};
-  var fila = nos.filter(function (n) { return !entra[n.id].length; }).map(function (n) { return n.id; });
-  if (!fila.length) fila = [nos[0].id];
-  fila.forEach(function (id) { nivel[id] = 0; });
-
-  var guarda = 0;
-  while (fila.length && guarda++ < 4000) {
-    var id = fila.shift();
-    (sai[id] || []).forEach(function (destino) {
-      var novo = nivel[id] + 1;
-      if (nivel[destino] == null || novo > nivel[destino]) {
-        nivel[destino] = novo;
-        fila.push(destino);
-      }
-    });
-  }
-  nos.forEach(function (n) { if (nivel[n.id] == null) nivel[n.id] = 0; });
-
-  var colunas = {};
-  nos.forEach(function (n) {
-    (colunas[nivel[n.id]] = colunas[nivel[n.id]] || []).push(n);
-  });
-  var chaves = Object.keys(colunas).map(Number).sort(function (a, b) { return a - b; });
-
-  var vertical = modo === "vertical" || modo === "arvore";
-  var margem = Math.round(W * 0.07);
-
-  // tamanho padrão coerente com o espaço disponível
-  var maxPorColuna = Math.max.apply(null, chaves.map(function (k) { return colunas[k].length; }));
-  var lPadrao = vertical
-    ? Math.min(340, Math.floor((W - margem * 2 - (maxPorColuna - 1) * 60) / maxPorColuna))
-    : Math.min(340, Math.floor((W - margem * 2 - (chaves.length - 1) * 90) / Math.max(1, chaves.length)));
-  var aPadrao = vertical
-    ? Math.min(150, Math.floor((H - margem * 2 - (chaves.length - 1) * 70) / Math.max(1, chaves.length)))
-    : 150;
-  lPadrao = Math.max(150, lPadrao);
-  aPadrao = Math.max(90, aPadrao);
-
-  var passoEixo = vertical
-    ? (H - margem * 2 - aPadrao) / Math.max(1, chaves.length - 1)
-    : (W - margem * 2 - lPadrao) / Math.max(1, chaves.length - 1);
-
-  chaves.forEach(function (k, iCol) {
-    var grupo = colunas[k];
-    var vao = vertical ? W : H;
-    var tam = vertical ? lPadrao : aPadrao;
-    var espaco = (vao - margem * 2 - tam) / Math.max(1, grupo.length - 1);
-
-    grupo.forEach(function (n, i) {
-      if (n.l == null) n.l = lPadrao;
-      if (n.a == null) n.a = aPadrao;
-      var eixo = margem + (chaves.length > 1 ? passoEixo * iCol : (vao === W ? 0 : 0));
-      var cruz = grupo.length > 1 ? margem + espaco * i
-                                  : Math.round((vao - (vertical ? n.l : n.a)) / 2);
-      if (vertical) {
-        if (n.x == null) n.x = Math.round(cruz);
-        if (n.y == null) n.y = Math.round(margem + (chaves.length > 1 ? passoEixo * iCol : (H - n.a) / 2));
-      } else {
-        if (n.x == null) n.x = Math.round(margem + (chaves.length > 1 ? passoEixo * iCol : (W - n.l) / 2));
-        if (n.y == null) n.y = Math.round(cruz);
-      }
-    });
-  });
-}
-
-/* -------------------------------------------------------------- conectores */
-
-function desenharConectores(cena, elementos, W, H) {
-  var links = elementos.filter(function (e) { return e.tipo === "conector"; });
-  if (!links.length) return;
-
-  var caixas = {};
-  elementos.forEach(function (e) {
-    if (e.id) caixas[e.id] = { x: e.x || 0, y: e.y || 0, l: e.l || 200, a: e.a || 100 };
-  });
-
-  var ns = "http://www.w3.org/2000/svg";
-  var svg = document.createElementNS(ns, "svg");
-  svg.setAttribute("class", "conectores");
-  svg.setAttribute("viewBox", "0 0 " + W + " " + H);
-
-  var def = document.createElementNS(ns, "defs");
-  def.innerHTML = '<marker id="pta" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">' +
-                  '<path d="M0 0 L10 5 L0 10 z" fill="var(--c-fraco)"/></marker>';
-  svg.appendChild(def);
-
-  links.forEach(function (c) {
-    var a = caixas[c.de], b = caixas[c.para];
-    if (!a || !b) return;
-    var ac = { x: a.x + a.l / 2, y: a.y + a.a / 2 }, bc = { x: b.x + b.l / 2, y: b.y + b.a / 2 };
-    var horizontal = Math.abs(bc.x - ac.x) >= Math.abs(bc.y - ac.y);
-    var p1 = horizontal
-      ? { x: bc.x > ac.x ? a.x + a.l : a.x, y: ac.y }
-      : { x: ac.x, y: bc.y > ac.y ? a.y + a.a : a.y };
-    var p2 = horizontal
-      ? { x: bc.x > ac.x ? b.x : b.x + b.l, y: bc.y }
-      : { x: bc.x, y: bc.y > ac.y ? b.y : b.y + b.a };
-
-    var d;
-    if (c.estilo === "reta") {
-      d = "M" + p1.x + " " + p1.y + " L" + p2.x + " " + p2.y;
-    } else if (c.estilo === "cotovelo") {
-      d = horizontal
-        ? "M" + p1.x + " " + p1.y + " H" + (p1.x + p2.x) / 2 + " V" + p2.y + " H" + p2.x
-        : "M" + p1.x + " " + p1.y + " V" + (p1.y + p2.y) / 2 + " H" + p2.x + " V" + p2.y;
-    } else {
-      d = horizontal
-        ? "M" + p1.x + " " + p1.y + " C" + (p1.x + p2.x) / 2 + " " + p1.y + " " + (p1.x + p2.x) / 2 + " " + p2.y + " " + p2.x + " " + p2.y
-        : "M" + p1.x + " " + p1.y + " C" + p1.x + " " + (p1.y + p2.y) / 2 + " " + p2.x + " " + (p1.y + p2.y) / 2 + " " + p2.x + " " + p2.y;
-    }
-
-    var path = document.createElementNS(ns, "path");
-    path.setAttribute("d", d);
-    path.setAttribute("fill", "none");
-    path.setAttribute("stroke", c.cor || "var(--c-fraco)");
-    path.setAttribute("stroke-width", c.espessura || 3);
-    if (c.tracejado) path.setAttribute("stroke-dasharray", "10 8");
-    if (c.seta !== false) path.setAttribute("marker-end", "url(#pta)");
-    svg.appendChild(path);
-
-    if (c.texto) {
-      var tx = document.createElementNS(ns, "text");
-      tx.setAttribute("x", (p1.x + p2.x) / 2);
-      tx.setAttribute("y", (p1.y + p2.y) / 2 - 12);
-      tx.setAttribute("text-anchor", "middle");
-      tx.setAttribute("fill", "var(--c-fraco)");
-      tx.setAttribute("font-size", "22");
-      tx.textContent = c.texto;
-      svg.appendChild(tx);
-    }
-  });
-
-  cena.appendChild(svg);
-}
-
-/* ------------------------------------------------------------------ cena  */
-
-function renderCenaBase(cena, doc, op) {
-  op = op || {};
-  cena = cena || {};
-  var W = doc.largura || 1920, H = doc.altura || 1080;
-
-  var no = document.createElement("div");
-  no.className = "cena" + (op.animar ? " animar" : "");
-  no.style.width = W + "px";
-  no.style.height = H + "px";
-  no.setAttribute("data-tema", cena.tema || doc.tema || "meia-noite");
-  if (cena.acabamento || doc.acabamento) no.setAttribute("data-acabamento", cena.acabamento || doc.acabamento);
-  if (op.animar && (cena.transicao || doc.transicao)) {
-    no.setAttribute("data-transicao", cena.transicao || doc.transicao);
-  }
-  if (cena.tom) no.style.setProperty("--c-tom", cena.tom);
-  if (cena.tom2) no.style.setProperty("--c-tom2", cena.tom2);
-  aplicarFundo(no, cena.fundo);
-  aplicarMarca(no, cena, doc, H);
-
-  var layout = cena.layout || (op.layoutPadrao || "titulo");
-  var elementos = (cena.elementos || []).slice();
-  var margem = Math.round(W * 0.068);
-
-  /* A gravação do usuário é o CHÃO da cena, não um bloco no meio do texto.
-     Entrando pelo fluxo, ela virava uma caixinha de 190px espremida embaixo
-     do título — e no vídeo exportado sobrava uma tarja de imagem cercada de
-     fundo. Quem grava o próprio rosto falando quer a imagem ocupando o
-     quadro, com a legenda POR CIMA.
-
-     Um clipe com `x`/`y` continua sendo elemento posicionado: aí a pessoa
-     pediu a caixinha de propósito (canto da tela, quadro dentro do quadro). */
-  var deChao = [];
-  var falas = [];
-  elementos = elementos.filter(function (e) {
-    if (!e || e.x != null || e.y != null) return true;
-    if (e.tipo === "clipe") { deChao.push(e); return false; }
-    /* A ASSINATURA É A CENA INTEIRA, e por isso entra pelo chão e não pelo
-       fluxo. Pelo fluxo ela vira uma caixinha colorida no meio da tela, com a
-       margem do layout em volta — que é o oposto de assinar: o logo tem de
-       encostar nas bordas do quadro, como em qualquer fim de comercial. */
-    if (e.tipo === "assinatura") { deChao.push(e); return false; }
-    // Legenda de fala mora no terço de baixo, como toda legenda de vídeo.
-    // Pelo fluxo ela iria para o meio da tela, em cima do rosto de quem fala.
-    if (e.tipo === "texto" && e.papel === "fala") { falas.push(e); return false; }
-    return true;
-  });
-
-  var fluxo = document.createElement("div");
-  fluxo.className = "fluxo";
-  fluxo.setAttribute("data-layout", layout);
-  fluxo.style.padding = margem + "px " + Math.round(W * 0.075) + "px";
-  no.appendChild(fluxo);
-
-  // tela vertical pede tipografia maior: os padrões são calibrados em 1920x1080
-  var escalaTipo = H > W ? 1.35 : 1;
-  no.style.setProperty("--esc", escalaTipo);
-  // A altura do quadro, para o CSS dimensionar o que precisa ocupar a cena
-  // (o aparelho, hoje) em proporção e não em pixels calibrados num formato só.
-  no.style.setProperty("--alto", H + "px");
-  /* A UNIDADE DA CENA: 1% da largura do quadro.
-
-     Sem ela, tudo o que o CSS escreve em `em` cai na fonte herdada — que numa
-     cena é a do navegador, ~14px — e o desenho colapsa sem erro nenhum. Foi
-     medido num quadro de 1080x1920: a linha do extrato saiu com 7,84px e o
-     nome da assinatura com 30,8px, num quadro de 1920 de altura. Na tela
-     aquilo não é "pequeno": é invisível.
-
-     O resto do sistema resolve isso mandando PIXEL do documento (`tamanho`).
-     Peça que não tem `tamanho` — a tela do app, a vitrine, a assinatura — se
-     mede por aqui, e assim acompanha o formato em vez de ser calibrada num só. */
-  no.style.setProperty("--u", (W / 100) + "px");
-  var ctx = {
-    i: 0, escalaTipo: escalaTipo,
-    animPadrao: op.animar ? (cena.anim || "subir") : null,
-    // as chaves precisam saber quanto dura a cena para virar segundos
-    animar: !!op.animar,
-    duracao: cena.duracao || 4,
-    raiz: no,
-    // objeto do elemento -> posição dele em cena.elementos, tirada ANTES de
-    // qualquer separação por layout
-    ordem: (function () {
-      var m = new Map();
-      (cena.elementos || []).forEach(function (e, i) { m.set(e, i); });
-      return m;
-    })(),
-  };
-
-  deChao.forEach(function (e) {
-    ctx.i++;
-    var el = renderElemento(e, ctx);
-    el.style.position = "absolute";
-    /* `inset: 0` sozinho não estica: renderElemento já deixou uma `height`
-       inline, e com altura declarada o `bottom` é ignorado (a regra do
-       over-constrained do CSS). A camada saía com 60px de altura — uma tarja
-       de imagem no topo, com fundo do tema no resto. Largura e altura ditas
-       na cara não têm essa conversa. */
-    el.style.left = "0"; el.style.top = "0"; el.style.right = ""; el.style.bottom = "";
-    el.style.width = "100%"; el.style.height = "100%";
-    el.style.zIndex = "0";
-    // Sem animação de entrada por padrão: deslizar o quadro inteiro da
-    // gravação não é efeito, é defeito. Quem pedir `anim` continua tendo.
-    if (!e.anim) { el.removeAttribute("data-an"); el.style.animation = "none"; }
-    no.insertBefore(el, fluxo);          // atrás do texto, na frente do fundo
-  });
-  if (deChao.length) {
-    fluxo.style.position = "relative";
-    fluxo.style.zIndex = "1";
-  }
-
-  if (falas.length) {
-    var faixa = document.createElement("div");
-    faixa.className = "faixa-fala";
-    faixa.style.position = "absolute";
-    faixa.style.left = "0"; faixa.style.right = "0";
-    faixa.style.bottom = Math.round(H * 0.085) + "px";
-    faixa.style.zIndex = "2";                 // acima do texto e da gravação
-    faixa.style.padding = "0 " + Math.round(W * 0.08) + "px";
-    falas.forEach(function (e) {
-      ctx.i++;
-      faixa.appendChild(renderElemento(e, ctx));
-    });
-    no.appendChild(faixa);
-  }
-
-  if (layout === "livre") {
-    fluxo.style.padding = "0";
-    if (cena.auto) posicionarAuto(elementos, W, H, cena.auto);
-    elementos.forEach(function (e) {
-      if (e.tipo === "conector") return;
-      ctx.i++;
-      var el = renderElemento(e, ctx);
-      el.style.position = "absolute";
-      if (e.x == null) el.style.left = "0px";
-      if (e.y == null) el.style.top = "0px";
-      fluxo.appendChild(el);
-    });
-    desenharConectores(no, elementos, W, H);
-    return no;
-  }
-
-  /* layouts de fluxo — cabeçalho em cima, corpo distribuído */
-  var cabecalho = [], corpo = [], flutuantes = [], imagem = null;
-  elementos.forEach(function (e) {
-    if (e.tipo === "conector") return;
-    if (e.x != null || e.y != null) { flutuantes.push(e); return; }
-    /* O aparelho também vai para o lado, não só a imagem. É o enquadramento
-       do vídeo de referência: texto de um lado, celular com a conversa do
-       outro. Sem isto o celular caía na coluna de texto e o outro lado ficava
-       vazio — metade do quadro em branco. */
-    if ((layout === "imagem-direita" || layout === "imagem-esquerda")
-        && (e.tipo === "imagem" || e.tipo === "dispositivo") && !imagem) { imagem = e; return; }
-    /* Selo, progresso e foto são material de CABEÇALHO: vêm antes do título,
-       como sobrancelha da cena. Caindo no corpo, apareciam DEPOIS do título —
-       a pílula "Módulo 2 de 5" embaixo do nome do módulo, e o rosto da pessoa
-       embaixo do nome dela. Dentro do grupo a ordem é a do documento, então
-       quem escreveu decide o resto. */
-    if (e.papel === "chapeu" || e.papel === "titulo"
-        || e.tipo === "selo" || e.tipo === "progresso" || e.tipo === "avatar") {
-      cabecalho.push(e);
-    } else corpo.push(e);
-  });
-
-  function solta(lista, alvo) {
-    lista.forEach(function (e) { ctx.i++; alvo.appendChild(renderElemento(e, ctx)); });
-  }
-
-  if (layout === "imagem-direita" || layout === "imagem-esquerda") {
-    fluxo.style.padding = "0";
-    var lado = document.createElement("div");
-    lado.className = "lado-texto";
-    lado.style.padding = margem + "px " + Math.round(W * 0.055) + "px";
-    solta(cabecalho, lado); solta(corpo, lado);
-    var box = document.createElement("div");
-    box.className = "lado-imagem";
-    if (imagem && imagem.tipo === "dispositivo") {
-      // O aparelho tem moldura e sombra próprias: encostar nas bordas do
-      // quadro comeria as duas. Ele entra com respiro.
-      box.classList.add("com-aparelho");
-      box.style.padding = margem + "px " + Math.round(W * 0.04) + "px";
-      ctx.i++;
-      box.appendChild(renderElemento(imagem, ctx));
-    } else if (imagem) {
-      var im = renderElemento({ tipo: "imagem", src: imagem.src, ajuste: imagem.ajuste, raio: 0 }, ctx);
-      im.style.position = "absolute";
-      im.style.inset = "0";
-      box.appendChild(im);
-    }
-    if (layout === "imagem-esquerda") { fluxo.appendChild(box); fluxo.appendChild(lado); }
-    else { fluxo.appendChild(lado); fluxo.appendChild(box); }
-  } else if ((layout === "duas-colunas" || layout === "tres-colunas") && corpo.length > 1) {
-    solta(cabecalho, fluxo);
-    var cols = document.createElement("div");
-    cols.className = "colunas";
-    cols.style.gridTemplateColumns = "repeat(" + (layout === "duas-colunas" ? 2 : 3) + ", 1fr)";
-    solta(corpo, cols);
-    fluxo.appendChild(cols);
-    comporCabecaCorpo(fluxo, layout, cabecalho.length, 1);
-  } else {
-    // um bloco só (cartoes, numeros…) já se distribui sozinho: não engaiolar
-    solta(cabecalho, fluxo);
-    solta(corpo, fluxo);
-    comporCabecaCorpo(fluxo, layout, cabecalho.length, corpo.length);
-  }
-
-  flutuantes.forEach(function (e) {
-    ctx.i++;
-    var el = renderElemento(e, ctx);
-    el.style.position = "absolute";
-    no.appendChild(el);
-  });
-
-  /* O RODAPÉ DA APRESENTAÇÃO: nome do deck à esquerda, "03 / 08" à direita.
-     É o que ancora a composição no quadro — sem ele, uma cena de título e
-     lista é um bloco flutuando no meio do preto, e todo deck parece o mesmo
-     deck. Quem manda é quem chama (o player, quando a peça é prisma): o
-     vídeo não tem rodapé, e a capa e as seções também não — são as cenas
-     que se sustentam sozinhas. */
-  if (op.rodape && layout !== "capa" && layout !== "secao") {
-    var rodape = document.createElement("div");
-    rodape.className = "rodape";
-    rodape.style.left = Math.round(W * 0.075) + "px";
-    rodape.style.right = Math.round(W * 0.075) + "px";
-    rodape.style.bottom = Math.round(H * 0.048) + "px";
-    var esq = document.createElement("span");
-    esq.textContent = op.rodape.titulo || "";
-    var dir = document.createElement("span");
-    if (op.rodape.indice && op.rodape.total) {
-      dir.textContent = String(op.rodape.indice).padStart(2, "0") + " / " + String(op.rodape.total).padStart(2, "0");
-    }
-    rodape.appendChild(esq);
-    rodape.appendChild(dir);
-    no.appendChild(rodape);
-  }
-
-  desenharConectores(no, elementos, W, H);
-  return no;
-}
-
-/* A COMPOSIÇÃO DE SLIDE: cabeça em cima, corpo no meio do que sobra.
-
-   Tudo centrado verticalmente — que era o padrão para todo layout — deixa um
-   título com três linhas de lista ocupando 30% do quadro, com 350px de nada
-   em cima e 350px embaixo: a cara de "slide genérico" que o dono apontou. A
-   composição de quem faz deck de verdade ancora o título no alto e dá o resto
-   do quadro ao conteúdo, que se centra ali.
-
-   Só quando há as duas metades (cabeça E corpo) e o layout não é o dos que se
-   sustentam centrados (capa, centro, citação, seção): uma cena de vídeo com um
-   título sozinho continua no meio, onde um título sozinho fica bem. O corpo é
-   marcado no primeiro e no último filho (`margin: auto` no CSS), e o DOM
-   continua chapado — nada de embrulho novo em volta dos elementos. */
-function comporCabecaCorpo(fluxo, layout, nCabeca, nCorpo) {
-  if (!nCabeca || !nCorpo) return;
-  if (layout === "capa" || layout === "centro" || layout === "citacao" || layout === "secao") return;
-  var filhos = fluxo.children;
-  if (filhos.length <= nCabeca) return;
-  fluxo.setAttribute("data-composicao", "cabeca-corpo");
-  filhos[nCabeca].classList.add("corpo-inicio");
-  filhos[filhos.length - 1].classList.add("corpo-fim");
-}
-
-
-/* ══ A CÂMERA DA CENA ══════════════════════════════════════════════════════
- *
- * `chaves` move UM elemento. O que faltava era mover o QUADRO: a cena inteira
- * se aproximando enquanto o texto entra, a panorâmica que atravessa a arte, o
- * leve giro que tira a cara de página parada. É a câmera do After Effects, e
- * sem ela todo movimento nasce preso ao elemento — o vídeo parece um slide com
- * animação, que é exatamente a reclamação.
- *
- * COMO FUNCIONA: o conteúdo da cena vai para dentro de um `.palco`, e a câmera
- * anima o palco com a mesma máquina de chaves dos elementos (mesma curva,
- * mesma interpolação, mesma conta de duração). O FUNDO fica onde está, na raiz
- * da cena: é o que dá profundidade de graça — o quadro anda sobre o fundo em
- * vez de arrastar tudo junto, que é como um zoom de câmera se comporta.
- *
- * PARALAXE: um elemento com `paralaxe` anda MAIS (>1, perto da câmera) ou
- * MENOS (<1, ao longe) que o palco. Como ele já pode ter as próprias chaves, a
- * diferença vai num embrulho em volta dele — duas animações no mesmo nó
- * disputariam a mesma propriedade `transform`, e a segunda ganharia calada.
- */
-
-// Movimentos com NOME, porque quem escreve o documento não quer pensar em
-// chave: são os quatro que aparecem em toda peça de motion.
-var CAMERAS = {
-  aproximar: [{ t: 0, escala: 1 }, { t: 1, escala: 1.12 }],
-  afastar: [{ t: 0, escala: 1.12 }, { t: 1, escala: 1 }],
-  "pan-direita": [{ t: 0, x: -70 }, { t: 1, x: 70 }],
-  "pan-esquerda": [{ t: 0, x: 70 }, { t: 1, x: -70 }],
-  subir: [{ t: 0, y: 60 }, { t: 1, y: -60 }],
-  descer: [{ t: 0, y: -60 }, { t: 1, y: 60 }],
-  // O "empurrão" é o zoom com um grau de giro: é o que dá mão humana ao quadro.
-  empurrar: [{ t: 0, escala: 1.02, giro: -0.6 }, { t: 1, escala: 1.14, giro: 0.3 }],
-  balanco: [{ t: 0, x: -18, giro: -0.5 }, { t: 0.5, x: 12, giro: 0.4 }, { t: 1, x: -6, giro: -0.2 }],
-};
-
-function chavesDaCamera(camera) {
-  if (!camera) return null;
-  if (typeof camera === "string") return CAMERAS[camera] ? CAMERAS[camera].slice() : null;
-  if (Array.isArray(camera)) return camera.slice();
-  if (camera.chaves && camera.chaves.length) return camera.chaves.slice();
-  if (camera.movimento && CAMERAS[camera.movimento]) return CAMERAS[camera.movimento].slice();
-  return null;
-}
-
-/* A chave do elemento de paralaxe: a da câmera, menos a que o palco já deu.
-   Fator 0 devolve nada (anda com o palco, que é o padrão). */
-function chavesDeParalaxe(chaves, fator) {
-  var f = fator - 1;
-  if (!f) return null;
-  return chaves.map(function (k) {
-    var nova = { t: _numero(k.t, 0) };
-    if (typeof k.x === "number") nova.x = k.x * f;
-    if (typeof k.y === "number") nova.y = k.y * f;
-    if (typeof k.escala === "number") nova.escala = 1 + (k.escala - 1) * f;
-    return nova;
-  });
-}
-
-function aplicarCamera(no, cena, op) {
-  var chaves = chavesDaCamera(cena.camera);
-  if (!chaves || !chaves.length || !op.animar) return no;
-
-  var palco = document.createElement("div");
-  palco.className = "palco";
-  while (no.firstChild) palco.appendChild(no.firstChild);
-  no.appendChild(palco);
-
-  var ctx = { raiz: no, duracao: cena.duracao || 4, animar: true };
-  aplicarChaves(palco, {
-    chaves: chaves,
-    suavizar: (cena.camera && cena.camera.suavizar) || "suave",
-  }, ctx);
-
-  /* PARALAXE — e o cuidado que decide se isto funciona ou quebra o layout.
-     · Elemento SEM animação própria recebe a diferença direto: é o caso
-       comum, e assim nada muda no DOM.
-     · Elemento que JÁ anima (tem chaves suas) precisa de um embrulho —
-       duas animações no mesmo nó disputam `transform` e a segunda ganha
-       calada. Embrulhar só é seguro quando ele está posicionado em
-       absoluto; no fluxo, o embrulho viraria um filho a mais no flex e
-       mudaria o espaçamento da cena. Nesse caso a paralaxe é ignorada, e
-       vale a animação do elemento, que é a mais específica. */
-  var comProfundidade = palco.querySelectorAll("[data-paralaxe]");
-  Array.prototype.forEach.call(comProfundidade, function (el) {
-    var fator = parseFloat(el.getAttribute("data-paralaxe"));
-    if (!isFinite(fator) || fator === 1) return;
-    var extras = chavesDeParalaxe(chaves, fator);
-    if (!extras) return;
-    var suave = (cena.camera && cena.camera.suavizar) || "suave";
-
-    if (!el.style.animationName) {
-      aplicarChaves(el, { chaves: extras, suavizar: suave }, ctx);
-      return;
-    }
-    if (el.style.position !== "absolute") return;
-
-    var capa = document.createElement("div");
-    capa.className = "paralaxe";
-    capa.style.position = "absolute";
-    ["left", "top", "right", "bottom", "width", "height"].forEach(function (k) {
-      capa.style[k] = el.style[k];
-      el.style[k] = "";
-    });
-    el.style.position = "relative";
-    el.parentNode.insertBefore(capa, el);
-    capa.appendChild(el);
-    aplicarChaves(capa, { chaves: extras, suavizar: suave }, ctx);
-  });
-  return no;
-}
-
-function renderCena(cena, doc, op) {
-  var no = renderCenaBase(cena, doc, op);
-  return aplicarCamera(no, cena || {}, op || {});
-}
-
-if (typeof module !== "undefined" && module.exports) module.exports = { renderCena: renderCena, CAMERAS: CAMERAS };