Habilidade de Carrossel Social

Produza um carrossel social de 3 painéis em um único palco escuro. Cada painel é uma imagem cinematográfica de 1080×1080 — conectada como uma série, mas cada uma legível por si só.

Fluxo de Trabalho

1. Leia o DESIGN.md ativo (injetado acima). Escolha o token serifado mais chamativo para os títulos e um token mono para selos/contadores.
2. Escolha o tema + 3 legendas do briefing. As legendas devem formar uma única frase quando empilhadas: ("em frente." → "para o próximo." → "olhando para o futuro." ou "entrada." → "iterar." → "entregar.").
3. Palco — página escura de tela cheia. Faixa superior do cabeçalho:
   • Esquerda: display serifado itálico "Três posts. Uma batida."
   • Logo abaixo do título: uma descrição de uma linha em mono suave ("1080×1080 · loops de vídeo cinematográficos · tipografia mínima. Insira no Instagram, LinkedIn ou X — cada post funciona sozinho ou como uma série de três partes.").
   • Direita: pequeno selo mono "SÉRIE · 01 → 03".
4. Cartões — 3 quadrados em uma linha horizontal (quebra para empilhar em visualizações estreitas). Cada cartão é aspect-ratio: 1 / 1 com cantos arredondados de 12px e uma borda sutil de 1px, mais uma sombra suave.
   • Fundo: um gradiente em camadas que sugere uma foto cinematográfica — por exemplo, painel 1 = prado quente do amanhecer (verdes empilhados com um tom ciano no céu); painel 2 = crepúsculo da floresta (laranjas quentes desvanecendo em azuis profundos); painel 3 = cordilheira rosa (picos rosados contra um céu violeta fraco). Use apenas radial-gradient + linear-gradient — sem imagens.
   • Chip superior esquerdo: logomarca da marca em serifado itálico ("Jerrod Lew") com um pequeno ponto de acento.
   • Abaixo do chip, no canto superior esquerdo: índice micro mono "AI · 01 / 03" (e 02, 03).
   • Canto inferior esquerdo: o título em display serifado branco, com acento itálico em uma palavra.
   • Canto inferior direito: um selo mono 1× LOOP dentro de uma borda fina.
   • Legenda da faixa inferior: mono em versalete descrevendo o quadro imaginado ("Homem, andando para frente — perto.", "Mulher, entrando em quadro.", "Mulher, olhando para a cidade.").
5. Escreva um único documento HTML:
   • <!doctype html> até </html>, CSS inline.
   • Os cartões são dimensionados via width: clamp(280px, 30vw, 380px) para que 3 caibam confortavelmente na maioria dos desktops e empilhem em < 1100px.
   • data-od-id no palco, cada cartão, cada título.
6. Auto-verificação:
   • Os três títulos juntos formam uma frase e parecem cinematográficos.
   • Mono é usado apenas para o índice da logomarca, o selo de loop e as legendas inferiores. Os títulos permanecem serifados.
   • A história de cores de cada painel é distinta — nenhum compartilha uma matiz dominante.

Contrato de Saída

Emitir entre as tags <artifact>:

<artifact identifier="carousel-slug" type="text/html" title="Carousel — Title">
<!doctype html>
<html>...</html>
</artifact>

Uma frase antes do artefato, nada depois.