| name | mira-vertical |
| description | Gera uma versão VERTICAL (9:16, generalista para a tela atual: largura da tela / 3 por altura cheia, ex. 640x1080 numa tela 1080p) de um deck do Mira a partir do 16:9, OU cria slides verticais DO ZERO quando não há deck de origem, para vídeo vertical (Reels, Shorts, TikTok, Stories). Não toca no original: gera index-9x16.html ao lado, com só o título no topo e a animação num canvas alto, e reformula o eixo de cada animação para o retrato. Use SEMPRE que o usuário disser /mira-vertical, versão vertical, deixa vertical, formato 9:16, 1080x1920, apresentação vertical, para Reels, para Shorts, para Stories, para TikTok, vídeo vertical, modo retrato, ou cria um slide vertical. |
Skill: Versão Vertical do Deck (9:16) com canvas alto, só título + animação
Transforma um deck 16:9 do Mira numa versão vertical generalista para a tela atual, para gravar como vídeo vertical (Reels, Shorts, TikTok, Stories). Cada slide de conteúdo vira só o título no topo + a animação grande num canvas alto e padronizado. Tem dois modos:
- Modo conversão (padrão quando existe deck 16:9): reformula um deck existente, slide a slide, conforme o playbook abaixo.
- Modo criação nativa (quando NÃO existe deck de origem, ou o usuário pede um slide novo já vertical): cria o slide do zero direto na geometria retrato, sem passar pelo 16:9. Veja a seção "Criação do zero na geometria nativa".
Fonte da verdade: o padrão desta skill foi validado e aprovado no deck de referência _reversa_sdd/slides-verticais/index-9x16.html, e as regras estão congeladas na spec _reversa_sdd/slides-verticais/mira-vertical-9x16-spec.md (com o comparativo elemento por elemento em mira-vertical-comparacao.md). Quando em dúvida sobre um valor exato, o resultado deve ficar idêntico ao deck de referência.
O resultado, em uma frase
Num slide de conteúdo da versão vertical aparecem apenas duas coisas: o título principal colado no topo (1 ou 2 linhas, nunca mais) e a animação grande ocupando o canvas alto logo abaixo, de ponta a ponta na largura da coluna. Somem: o subtítulo, o header do card (ícone + label + botão Replay) e a base do card (legenda uppercase + grade de pílulas). As laterais fora da coluna ficam #333333. Capa e encerramento (que não têm .glass-card) mantêm o layout próprio.
Criação do zero na geometria nativa
Quando não houver deck 16:9 de origem, ou o usuário pedir "cria um slide vertical sobre X", NÃO crie um 16:9 intermediário para converter depois. A animação nasce pensada para o retrato:
- Herde as regras criativas do
agents/mira-animator/SKILL.md: Regra Zero (loop interno obrigatório), liberdade criativa de metáfora, regra de idioma, regra de título (sem ícone, máximo 6 palavras), estrutura do card com glass-card. Tudo vale igual. Manter a estrutura do glass-card (header, .anim-stage, base de pílulas) é o que deixa o mesmo CSS desta skill esconder header/base e exibir só título + animação.
- Geometria nativa desde a concepção: o arquivo já nasce como
index-9x16.html (na pasta do deck novo), com o bloco <style id="mira-formato-9x16"> desta skill no head, canvas alto padrão (aspect-ratio: 128 / 203) e viewBox retrato casando (W = 960, H = W * 203 / 128 ≈ 1523).
- Metáfora escolhida JÁ para o vertical: o eixo dominante nasce na altura (fluxo desce, comparação empilha, rede espalha na vertical, escada sobe íngreme). Não componha mentalmente em 16:9 para depois girar; o playbook de reflow vira aqui um playbook de composição.
- Mesmos critérios de aprovação do modo conversão: título no topo em no máximo 2 linhas, assunto ocupando bem a largura útil, nada cortado, REGRA DE FONTE MÍNIMA respeitada.
- Se o deck vertical (
index-9x16.html) já existir, o slide novo é adicionado nele, no padrão dos demais.
Dimensão (o erro mais comum). O quadro vertical é generalista para a tela atual, não um tamanho fixo em pixels. A altura é a altura cheia da tela (100vh) e a largura é a largura da tela dividida por 3 (calc(100vw / 3)). Numa tela 1080p isso dá 640x1080; numa tela maior ou menor, escala junto. O quadro vertical é a coluna central (um terço da largura) ocupando toda a altura, com sobra dos dois lados como margem em #333333. Por que não 1080x1920 fixo: além de não caber numa tela de 1080 de altura, prenderia o resultado a uma única resolução. (A regra largura/3 dá uma coluna um tiquinho mais larga que o 9:16 cravado. Se a plataforma exigir 9:16 exato, use --fmt-w: calc(100vh * 9 / 16).)
A abordagem não é moldura fixa que só encolhe: é reformulação por slide. Um viewBox 16:9 dentro de um quadro estreito e alto encaixa pela largura e ocupa só uma faixa fina, perdendo todo o impacto. Por isso aqui o palco vira canvas alto e a geometria de cada animação é reformulada no JS da cópia para subir e descer pela altura.
Critério de aprovação (é para assistir no smartphone)
A animação domina a tela e o título é o único texto de apoio. Três coisas têm que estar certas:
-
Composição enxuta: só título + animação. Se aparecer subtítulo, header do card (ícone/label/Replay) ou a base de pílulas num slide de conteúdo, está ERRADO. Sobra do .glass-card apenas o filho do meio, o .anim-stage, sem fundo/borda/sombra/padding, de ponta a ponta.
-
Título no topo, no máximo 2 linhas. Colado no topo (não centralizado vertical), nunca em 3 ou 4 linhas. Títulos longos (palavras grandes como "documentação") encolhem sozinhos até caber em 2 linhas, via o script de auto-ajuste. Títulos curtos ficam no tamanho cheio.
-
Animação vertical e maximizada no canvas alto. Toda animação cujo eixo dominante era horizontal DEVE ser refeita na vertical (o que ia para o lado passa a ir de cima para baixo; lado a lado vira empilhado). Nada de partícula correndo numa faixa fina, nem blocos lado a lado encolhidos. O canvas é alto (128/203) e o viewBox é esticado em altura para casar, sem letterbox e sem distorção.
REGRA DE IDIOMA
Siga agents/_shared/idioma.md. Texto visível em português correto. Proibido travessão (—): use vírgula ou dois-pontos.
REGRA DE FONTE MÍNIMA: 13px RENDERIZADOS
Validado empiricamente pelo usuário (teste de legibilidade em 2026-06-11): abaixo de 13px renderizados na tela, o texto fica ilegível no vertical. Nenhum texto visível pode renderizar com menos de 13px. Sem exceção: rótulos de nós, legendas de eixo, e qualquer texto SVG que permaneça visível.
- Texto SVG (a pegadinha): o
font-size no SVG é em unidades do viewBox, não pixels de tela. O que renderiza um font-size SVG em pixels é a razão entre a largura da coluna e a largura do viewBox (W), que não muda quando esticamos só a altura. Como a geometria do conteúdo (incluindo as fontes) é a mesma do reflow retrato e não é tocada (ver "Esticar o viewBox em altura"), o mínimo já validado continua valendo: no setup padrão (coluna de 1/3 da tela, W ≈ 960), use font-size >= 24 para qualquer texto SVG (24 unidades renderizam ~12,9px). Se um slide tiver outro W, escale o mínimo na proporção da largura do viewBox.
- Texto HTML que sobrar visível (raro, já que header e base somem):
font-size computado >= 13px. No Tailwind, text-xs (12px) está PROIBIDO; o menor permitido é text-sm (14px).
- Se o texto não couber com 13px: encurte o texto ou recomponha o layout. Nunca resolva diminuindo a fonte abaixo do mínimo.
Regra de Ouro: nunca destrua o original
- O deck 16:9 (
index.html) permanece intacto. Você nunca edita o arquivo de origem.
- Você cria um arquivo novo ao lado:
index-9x16.html, e é nele que todo o reflow e a composição acontecem.
- O que você pode mudar na cópia: geometria, layout e composição (viewBox, coordenadas, eixo de espalhamento, altura do canvas, ocultar subtítulo/header/base via CSS, posição do título).
- O que continua intocado mesmo na cópia: textos, rótulos, cores, easing, durações, a lógica do loop interno e o
generation counter (window.__slugGen) que evita vazamento. Você reposiciona e oculta, não reescreve a animação do zero.
Como o Mira monta um slide (o que você vai reformular)
- Cada slide é um
body > section com class="min-h-screen flex flex-col items-center justify-center ...".
- O bloco do slide é o filho direto da
section: <div class="... max-w-6xl/max-w-5xl">, com um .text-center (título h2 + subtítulo p) e o .glass-card dentro.
- O
.glass-card tem três filhos diretos: o header (1º div: ícone + label + sublinha + botão Replay), o .anim-stage (o palco da animação, o filho do meio) e a base (último div, o .border-t: legenda uppercase + grade de pílulas).
- O palco
.anim-stage é aspect-ratio: 16/9 no 16:9. Dentro dele há um <svg id="sv-..."> que preenche 100% x 100%, com preserveAspectRatio="xMidYMid meet".
- O
viewBox da animação é definido no JS de cada slide (IIFE), normalmente como const W = 960, H = 540; ... .attr('viewBox', \0 0 ${W} ${H}`)(às vezes1280 720). As coordenadas derivam de WeH`.
- Alguns slides já trazem um zoom do
mira-size-animator: o viewBox vira ${(W - W/SZ)/2} ${(H - H/SZ)/2} ${W/SZ} ${H/SZ} com uma constante SZ. Preserve essa fórmula (é o nível de tamanho do slide), só case a altura ao canvas alto.
- A navegação (barra de progresso, botão de próximo, teclado) é fixa e continua funcionando.
As três viradas de chave
A reformulação gira em torno de três regras mecânicas.
1. Composição: só título + animação (CSS escopado)
Tudo via CSS no bloco injetado, escopado aos slides de conteúdo com :has(.glass-card) (capa e encerramento, sem .glass-card, ficam de fora):
- Subtítulo oculto:
body > section:has(.glass-card) .text-center > p { display: none }.
- Header e base do card ocultos:
body > section .glass-card > div:first-child, body > section .glass-card > div:last-child { display: none }.
- Chrome do card zerado:
.glass-card sem background, border, box-shadow, backdrop-filter e padding, para a animação ir de ponta a ponta.
- Conteúdo colado no topo:
body > section:has(.glass-card) { justify-content: flex-start; padding: 2.2vh 6px 1.4vh 6px }.
- Título proeminente:
body > section h2 { font-size: clamp(35px, 5.6vh, 52px); line-height: 1.1 } (base ~7/10 da escala). O auto-ajuste por JS reduz só quando passa de 2 linhas.
Não remova os elementos do HTML: o CSS é cirúrgico e reversível, e o escopo :has(.glass-card) preserva capa, encerramento e qualquer slide-régua.
2. Canvas alto padrão (128/203) + esticar o viewBox em altura
- Palco alto:
.anim-stage { height: auto !important; aspect-ratio: 128 / 203 !important } em TODOS os slides (≈0,6305, bem mais alto que o 4:5 antigo). height: auto é obrigatório, senão um height fixo por slide venceria o aspect-ratio.
- viewBox casando, esticado SÓ em altura: para cada
<svg id="sv-...">, mantenha minX, minY e a largura W, e troque a altura por H = W * 203 / 128. A geometria desenhada (coordenadas dos elementos) NÃO muda: o conteúdo renderiza no mesmo tamanho e posição de antes, e o canvas só cresce para baixo. preserveAspectRatio="xMidYMid meet" continua, e como o aspecto do viewBox passa a bater com o do palco, não há letterbox nem distorção.
- Exemplo:
viewBox="140 175 1000 1250" vira viewBox="140 175 1000 1585.94" (1000 * 203/128 = 1585,94).
- Exemplo real do deck de referência:
601.5 → 601.5 * 203/128 = 953.94; 833.34 → 1321.63.
3. Reflow do eixo para o retrato (geometria vertical)
Antes (ou junto com) o esticão de altura, a geometria de cada animação é reformulada para subir e descer pela altura, conforme o playbook por metáfora abaixo. Esse é o passo que garante que a animação não fica como faixa fina horizontal: o eixo dominante horizontal vira vertical, elipse larga vira alta, comparação lado a lado vira empilhada. O loop interno e o generation counter ficam intactos.
O ajuste fino de espalhar o conteúdo para baixo (miolo vazio) e de ampliar uma animação são ferramentas por slide, não passos obrigatórios (ver "Ferramentas por slide").
Auto-ajuste de título (script injetado)
Títulos longos quebram o slide em 3 ou 4 linhas. Um IIFE mede a altura real de cada h2 e reduz a fonte 1px por vez (piso 18px) até caber em no máximo 2 linhas. Roda no load, no document.fonts.ready (reajusta quando a fonte Inter carrega) e no resize (debounced). Medir o render captura palavras longas reais (ex.: "documentação"), o que contar caracteres não pega. Injete junto aos outros scripts, antes de lucide.createIcons():
(function () {
const MAX_LINES = 2, MIN_FONT = 18;
function fitTitles() {
document.querySelectorAll('body > section h2').forEach(h2 => {
h2.style.removeProperty('font-size');
let font = parseFloat(getComputedStyle(h2).fontSize), guard = 0;
while (h2.scrollHeight > parseFloat(getComputedStyle(h2).lineHeight) * MAX_LINES + 2 && font > MIN_FONT && guard < 90) {
font -= 1; h2.style.setProperty('font-size', font + 'px', 'important'); guard++;
}
});
}
window.addEventListener('load', fitTitles);
if (document.fonts && document.fonts.ready) document.fonts.ready.then(fitTitles);
window.addEventListener('resize', () => { clearTimeout(window.__fitT); window.__fitT = setTimeout(fitTitles, 150); });
})();
Playbook de reflow por metáfora
Aplique conforme a metáfora do slide. O princípio geral está no fim, para metáforas fora desta lista.
Fluxo (partícula viajando entre nós). Hoje é horizontal: xs = scalePoint().range([120, W-120]), partícula anima cx. Reflow para vertical:
const ys = d3.scalePoint().domain(d3.range(ETAPAS.length)).range([H * 0.10, H * 0.90]); e const cx = W / 2; fixo.- Linha vertical:
x1 = x2 = cx, y1 = ys(0), y2 = ys(last).
- Nós:
translate(${cx}, ${ys(i)}).
- Rótulo do nó: em vez de embaixo, jogue para o lado:
attr('dx', 70).attr('text-anchor', 'start'), para o texto não colidir com o nó de baixo.
- Partícula: anima
cy de ys(0) até ys(last), com cx fixo.
- Pulsos e timings dos nós: iguais.
Orbital (núcleo central + satélites). Hoje é elipse larga: rx = R, ry = R*0.62. Reflow para elipse alta:
- Troque a compressão:
rx = R * 0.62, ry = R.
- Satélites:
translate(${cx + Math.cos(d.angle) * R * 0.62}, ${cy + Math.sin(d.angle) * R}).
- Aumente
R para preencher a altura nova. Núcleo e pulso radial ficam no centro.
Escada (orbe subindo degraus). Reduza o avanço horizontal (stepW menor), aumente a subida (stepH maior) e recalcule baseX/baseY para a escada subir do rodapé até perto do topo do canvas alto. O orbe continua com o mesmo climb() e easeBounceOut.
Comparação A vs B (dois cards lado a lado). Layout HTML. Empilhe A em cima e B embaixo: troque o grid md:grid-cols-2 por uma coluna só, mantendo o realce alternado (spotlight); se houver partícula viajando de A para B, faça-a descer.
Transformação A → B lado a lado (planta → obra, antes → depois, entrada → saída). Empilhe A em cima e B embaixo, cada um grande, e a seta/partícula de transformação desce de A para B. Nunca deixe os dois lado a lado encolhidos no topo. (É o caso típico de "miolo vazio": ver "Ferramentas por slide".)
Rede / grafo / nuvem de nós (force layout). Recentralize com forceCenter(W/2, H/2) no H novo; aumente o espalhamento (forceManyBody().strength mais negativo, maior linkDistance/forceRadial) até a nuvem usar a altura toda; cresça forceCollide com o raio dos nós; e clampe as posições em [margem, H - margem]:
const MARGEM = 90;
sim.force('center', d3.forceCenter(W / 2, H / 2))
.force('charge', d3.forceManyBody().strength(-340))
.force('collide', d3.forceCollide(d => d.r + 8))
.on('tick', () => {
nodes.forEach(n => {
n.x = Math.max(MARGEM, Math.min(W - MARGEM, n.x));
n.y = Math.max(MARGEM, Math.min(H - MARGEM, n.y));
});
});
Capa (partículas no fundo, tela cheia). Costuma usar W = innerWidth, H = innerHeight: já preenche o retrato sozinho. Não tem .glass-card, então as regras de composição não a tocam. No máximo confira que cobre o quadro.
Flip cards / battle arena (slide tipo exemplos). O stage é HTML, não SVG com viewBox para esticar. Empilhe os cards numa coluna única (flex-direction: column) e deixe a cascata de reveal correr de cima para baixo. O canvas 128/203 vale como caixa.
Fileira de muitos itens (timeline, 6+ etapas). Girar para uma coluna única pode espremer os itens. Recomponha em grade de 2 colunas (ou serpentina), com itens grandes. A ordem de leitura segue a nova disposição.
Princípio geral (metáfora fora da lista): identifique o eixo dominante. Se for horizontal, gire 90 graus para vertical (sempre). Se for radial e achatado, inverta a compressão. Cresça a escala e recomponha até o assunto ocupar bem o canvas alto, centralizado, com o loop interno preservado.
Ferramentas por slide (caso a caso, não obrigatórias)
O canvas alto padrão é aplicado em todos os slides automaticamente. Estes ajustes são acionados por slide (ou em todos), quando o usuário pedir ou quando um slide claramente precisar.
A) Esticar o canvas para baixo (miolo vazio). Para slides de duas pontas (ex.: planta no topo + sistema embaixo) que ficam com um vão grande no meio: aumente a altura do palco daquele slide com um override de aspect-ratio no #st-<slug> (canvas ainda mais alto) e estique o H do viewBox daquele slide para casar, sem mexer na geometria. Quando pedido, espalhe o conteúdo: elemento de cima maior no topo, elemento de baixo maior no rodapé, com o token/scan cruzando o meio como respiro.
B) Aumentar os elementos em X% (REGRA DO USUÁRIO: distâncias caem X% junto). Quando o usuário pede para "aumentar os elementos" da animação, NÃO é zoom de viewBox. A regra fixa dele: os elementos crescem X% E as distâncias entre eles reduzem X%, ao mesmo tempo, para os elementos ficarem mais proeminentes mantendo a proporção do conjunto, sem estourar/cortar nas bordas. Reescale a geometria no JS daquela animação (ou de todas):
- Tamanhos ×(1 + X/100): raios, larguras, alturas,
font-size (respeitando a fonte mínima), stroke-width, gaps internos de um elemento.
- Distâncias ×(1 − X/100): puxe cada POSIÇÃO para o centro do conteúdo (no vertical,
cx = 640, cy = 1015): nova_pos = centro + (pos − centro) × (1 − X/100). Isso encolhe o espaçamento entre elementos sem mexer no tamanho deles.
- Exemplo "+20%": tamanhos ×1,2 e posições puxadas para o centro ×0,8.
- Preserve loop, engine (
reset/track/alive/newSvg), textos, cores, easing e durações. Não troque o viewBox por esse pedido (o viewBox segue 0 0 1280 2030 ou o do slide).
C) Zoom geral no viewBox (ampliar "a cena" inteira em X%). Diferente de (B): aqui cresce elemento E distância juntos, dando zoom na cena, e pode cortar nas bordas. Use só quando o usuário pedir explicitamente "dá zoom / aproxima a cena". k = 1 + X/100; newW = W/k, newH = H/k; recentrar no centro do conteúdo (newMinX = cx − newW/2, newMinY = cy − newH/2), mantendo o aspecto 128/203. Cuidado (EC-04): animações de fluxo que já preenchem a altura cortam as pontas com esse zoom; nelas prefira a ferramenta (B).
Passos
- Localizar o deck. Ache o
index.html do deck (em decks/<deck>/ ou decks/<tema>/). Se houver mais de um deck e o usuário não disser qual, pergunte. Se faltar index.html, ou ele não tiver .glass-card / .anim-stage / <svg id="sv-...">, aborte com mensagem clara sem criar arquivo parcial.
- Copiar para o novo arquivo. Copie
index.html para index-9x16.html na mesma pasta (mesma pasta = caminhos relativos de logo, vídeo e imagens continuam válidos). O index.html fica byte a byte igual.
- Injetar a moldura + composição. Logo antes de
</head> do index-9x16.html, como último bloco de estilo (depois do Tailwind, para vencer a especificidade), insira o bloco <style id="mira-formato-9x16"> canônico (abaixo): quadro 9:16, fundo #333333 fora da coluna, composição só título + animação, título base 7/10, canvas alto 128/203.
- Injetar o script de auto-ajuste de título. Adicione o IIFE
fitTitles (acima) no bloco de scripts, antes de lucide.createIcons().
- Reformular cada animação no JS. Para cada slide de conteúdo: aplique o reflow do eixo para o retrato (playbook) e estique o
H do viewBox para casar com 128/203 (H = W * 203 / 128), mantendo minX, minY, W. Preserve textos, cores, easing, durações, loop e generation counter. Se o slide usa o zoom SZ do mira-size-animator, mantenha a fórmula, só com a altura casada.
- Verificar o encaixe. Confira mentalmente que, na coluna vertical (1/3 da largura da tela, altura cheia): (a) cada slide de conteúdo mostra só título + animação; (b) o título cabe em no máx. 2 linhas, colado no topo; (c) a animação é vertical e preenche o canvas alto, sem distorção nem letterbox; (d) o loop interno ainda roda; (e) capa e encerramento mantêm o layout próprio. Caso a caso, aplique as ferramentas por slide (esticar para baixo / ampliar X%).
- Reportar. Informe o caminho
index-9x16.html, que o quadro é generalista para a tela (largura/3 por altura cheia; numa tela 1080p, 640x1080), o que foi reformulado por slide (uma linha por slide: "fluxo agora vertical", "orbital em elipse alta", etc.) e como gravar: abra em tela cheia num Chromium moderno (o :has() da composição exige Edge/Chrome atual) e recorte a coluna central na ferramenta de captura.
Bloco <style id="mira-formato-9x16"> canônico (gerar exatamente isto)
<style id="mira-formato-9x16">
:root {
--fmt-w: calc(100vw / 3);
--fmt-h: 100vh;
}
html { background: #333333; }
body {
background: #333333;
display: flex;
flex-direction: column;
align-items: center;
}
body > section {
width: var(--fmt-w) !important;
height: var(--fmt-h) !important;
min-height: var(--fmt-h) !important;
overflow: hidden;
background: var(--mira-bg, #000) !important;
}
body > section .max-w-6xl,
body > section .max-w-5xl,
body > section .max-w-4xl,
body > section .max-w-3xl,
body > section .max-w-2xl { max-width: 100% !important; }
.anim-stage { height: auto !important; aspect-ratio: 128 / 203 !important; }
body > section h2 { font-size: clamp(35px, 5.6vh, 52px) !important; line-height: 1.1 !important; }
body > section:has(.glass-card) .text-center > p { display: none !important; }
body > section:has(.glass-card) .text-center { margin-bottom: 8px !important; padding: 0 14px !important; }
body > section:has(.glass-card) { justify-content: flex-start !important; padding: 2.2vh 6px 1.4vh 6px !important; }
body > section .glass-card { background: none !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; padding: 0 !important; }
body > section .glass-card > div:first-child,
body > section .glass-card > div:last-child { display: none !important; }
.slide-counter { font-size: 13px !important; }
body > section [class*="md:grid-cols-4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
body > section [class*="md:grid-cols-2"] { grid-template-columns: 1fr !important; }
#st-exemplos > div { flex-direction: column !important; gap: 14px !important; }
#st-exemplos .flip-wrap { width: 88% !important; max-width: none !important; height: 30% !important; }
</style>
Edge cases (do mais comum ao menos)
- Título longo / palavra grande (ex.: "Contratos operacionais, não documentação para ler"): o auto-ajuste reduz a fonte até caber em 2 linhas. Título curto: fica no tamanho cheio.
- Animação radial (relógio, radar) num canvas alto: fica centrada e preenche a largura; a sobra vertical é inerente ao círculo. A ampliação por slide pode aumentar até o limite da largura.
- Fluxo vertical (pipeline) que já preenche a altura: NÃO aplicar zoom global (corta as pontas). O canvas alto já a acomoda.
- Miolo vazio (duas pontas): esticar o canvas para baixo e espalhar os elementos (ferramenta A).
- Slide sem
.glass-card (capa, encerramento, slide-régua): as regras com :has(.glass-card) não se aplicam; layout próprio preservado.
- Canvas alto excede a coluna numa tela larga: o excedente é cortado pelo
overflow: hidden da seção, e o corte cai na área vazia inferior do canvas, não no conteúdo. Ajuste fino por slide se necessário.
- Navegador sem
:has(): a composição depende dele; avise que a gravação precisa de um Chromium moderno (Edge/Chrome atual).
Checklist
Os que mais falham (cheque primeiro, é para tela de smartphone):
