feat(web): guia do painel com botão ⓘ em cada seção

Um ⓘ ao lado do título de cada seção (Ao vivo, Vida, Eventos, Ajustes,
Reações, Conversa, Movimento) abre a explicação daquela parte: o que faz
cada opção, onde fica e uma dica. No cartão Vida também há ⓘ para
humores, cuidados e ritmo. O ⓘ do topo explica a tela atual.

A página Guia (#/guia) junta todos os 21 tópicos em ordem de tutorial,
com índice e busca; cada tópico também aparece no Ctrl+K e há atalho em
Ajustes › Sistema.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/lib/ajustes.svelte.ts

@@ -38,9 +38,11 @@ export interface Campo {
   opcoes?: Opcoes;
 }
 
-export const GRUPOS: { titulo: string; descricao: string; campos: Campo[] }[] = [
+/** `ajuda` = tópico do guia (ⓘ ao lado do título). */
+export const GRUPOS: { titulo: string; descricao: string; ajuda: string; campos: Campo[] }[] = [
   {
     titulo: 'Tela e personalidade',
+    ajuda: 'tela',
     descricao: 'Como o rosto aparece e se comporta sozinho.',
     campos: [
       { chave: 'auto', rotulo: 'Gestos espontâneos', ajuda: 'Pisca e olha em volta sem comando', tipo: 'toggle' },
@@ -61,6 +63,7 @@ export const GRUPOS: { titulo: string; descricao: string; campos: Campo[] }[] =
   },
   {
     titulo: 'Sensores e reações',
+    ajuda: 'sensores',
     descricao: 'O que o celular percebe e como reage.',
     campos: [
       { chave: 'sensorMic', rotulo: 'Microfone', ajuda: 'Só o nível de som é usado, nunca o áudio', tipo: 'toggle' },
@@ -75,6 +78,7 @@ export const GRUPOS: { titulo: string; descricao: string; campos: Campo[] }[] =
   },
   {
     titulo: 'Sono e madrugada',
+    ajuda: 'sono',
     descricao: 'O que acorda o rosto enquanto ele dorme.',
     campos: [
       { chave: 'somAcordar', rotulo: 'Sons para acordar', ajuda: 'Quantos barulhos em 1 minuto para ele acordar', tipo: 'slider', min: 1, max: 10, passo: 1 },
@@ -90,6 +94,7 @@ export const GRUPOS: { titulo: string; descricao: string; campos: Campo[] }[] =
   },
   {
     titulo: 'Vídeo e rastreamento',
+    ajuda: 'camera',
     descricao: 'Qualidade da transmissão e rastreamento feito neste PC.',
     campos: [
       { chave: 'cameraLado', rotulo: 'Câmera', tipo: 'escolha', opcoes: [['user', 'Frontal'], ['environment', 'Traseira']] },
@@ -113,6 +118,7 @@ export const GRUPOS: { titulo: string; descricao: string; campos: Campo[] }[] =
   },
   {
     titulo: 'Sensibilidade (avançado)',
+    ajuda: 'sensibilidade',
     descricao: 'Limiares dos sustos e intervalos entre reações.',
     campos: [
       { chave: 'somlim', rotulo: 'Nível para perceber som', tipo: 'slider', min: 0, max: 1, passo: 0.01 },

web/src/lib/componentes/Ajuda.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { BookOpen, Info } from '@lucide/svelte';
+  import { TOPICOS } from '../guia';
+  import Modal from './Modal.svelte';
+  import TopicoGuia from './TopicoGuia.svelte';
+
+  // Botão ⓘ: abre a explicação de um tópico do guia num balão, com atalho para o guia completo.
+  let { topico, tamanho = 15 }: { topico: string; tamanho?: number } = $props();
+  const t = $derived(TOPICOS[topico]);
+  let aberto = $state(false);
+</script>
+
+{#if t}
+  <button
+    type="button"
+    class="ajuda"
+    aria-label={'O que é: ' + t.titulo}
+    title="O que é isto?"
+    onclick={(e) => {
+      e.stopPropagation();
+      aberto = true;
+    }}
+  >
+    <Info size={tamanho} />
+  </button>
+  <Modal bind:aberto titulo={t.emoji + ' ' + t.titulo}>
+    <TopicoGuia topico={t} />
+    <a class="btn pequeno guia" href={'#/guia?t=' + topico} onclick={() => (aberto = false)}>
+      <BookOpen size={14} /> Ver o guia completo
+    </a>
+  </Modal>
+{/if}
+
+<style>
+  .ajuda {
+    display: inline-grid;
+    place-items: center;
+    width: 26px;
+    height: 26px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--texto-3);
+    cursor: pointer;
+    vertical-align: middle;
+    text-transform: none;
+    letter-spacing: 0;
+  }
+  .ajuda:hover {
+    background: var(--superficie-2);
+    color: var(--destaque);
+  }
+  .ajuda:focus-visible {
+    outline: 2px solid var(--destaque);
+    outline-offset: 1px;
+  }
+  .guia {
+    justify-self: start;
+    text-decoration: none;
+  }
+</style>

web/src/lib/componentes/Card.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  let { titulo = '', descricao = '', acoes, children, class: classe = '' }: {
+  import Ajuda from './Ajuda.svelte';
+  let { titulo = '', descricao = '', ajuda = '', acoes, children, class: classe = '' }: {
     titulo?: string;
     descricao?: string;
+    /** Tópico do guia: mostra um ⓘ ao lado do título. */
+    ajuda?: string;
     acoes?: Snippet;
     children: Snippet;
     class?: string;
@@ -13,7 +16,7 @@
   {#if titulo || acoes}
     <header>
       <div>
-        {#if titulo}<h2>{titulo}</h2>{/if}
+        {#if titulo}<h2>{titulo}{#if ajuda}<Ajuda topico={ajuda} />{/if}</h2>{/if}
         {#if descricao}<p class="fraco pequeno-texto">{descricao}</p>{/if}
       </div>
       {#if acoes}<div class="linha">{@render acoes()}</div>{/if}

web/src/lib/componentes/Grupo.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import Ajuda from './Ajuda.svelte';
   // Lista agrupada no estilo dos Ajustes do iPhone: título pequeno, cartão arredondado, rodapé de ajuda.
-  let { titulo = '', rodape = '', children }: { titulo?: string; rodape?: string; children: Snippet } = $props();
+  // `ajuda` = tópico do guia; aparece um ⓘ ao lado do título.
+  let { titulo = '', rodape = '', ajuda = '', children }: { titulo?: string; rodape?: string; ajuda?: string; children: Snippet } =
+    $props();
 </script>
 
 <section class="grupo">
-  {#if titulo}<h2>{titulo}</h2>{/if}
+  {#if titulo}<h2>{titulo}{#if ajuda}<Ajuda topico={ajuda} />{/if}</h2>{/if}
   <div class="itens">{@render children()}</div>
   {#if rodape}<p class="rodape">{rodape}</p>{/if}
 </section>
@@ -17,6 +20,10 @@
     min-width: 0;
   }
   h2 {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    min-height: 26px;
     padding: 0 var(--e-4);
     font-size: var(--t-xs);
     font-weight: 600;

web/src/lib/componentes/TopicoGuia.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import type { TopicoGuia } from '../guia';
+  // Conteúdo de um tópico do guia (no balão do ⓘ e na página Guia).
+  let { topico }: { topico: TopicoGuia } = $props();
+</script>
+
+<div class="topico">
+  <p class="onde">{topico.onde}</p>
+  <p class="resumo">{topico.resumo}</p>
+  {#if topico.itens?.length}
+    <dl>
+      {#each topico.itens as item (item.nome)}
+        <div class="item">
+          <dt>
+            {#if item.emoji}<span class="emoji" aria-hidden="true">{item.emoji}</span>{/if}
+            {item.nome}
+          </dt>
+          <dd>{item.texto}</dd>
+        </div>
+      {/each}
+    </dl>
+  {/if}
+  {#if topico.dica}<p class="dica"><strong>Dica:</strong> {topico.dica}</p>{/if}
+</div>
+
+<style>
+  .topico {
+    display: grid;
+    gap: var(--e-3);
+  }
+  .onde {
+    font-size: var(--t-xs);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--texto-3);
+  }
+  .resumo {
+    color: var(--texto);
+    line-height: 1.5;
+    max-width: 65ch;
+  }
+  dl {
+    display: grid;
+    gap: var(--e-3);
+    margin: 0;
+  }
+  .item {
+    display: grid;
+    gap: 2px;
+  }
+  dt {
+    display: flex;
+    align-items: center;
+    gap: var(--e-2);
+    font-weight: 600;
+  }
+  .emoji {
+    width: 1.4em;
+    text-align: center;
+  }
+  dd {
+    margin: 0 0 0 calc(1.4em + var(--e-2));
+    color: var(--texto-2);
+    font-size: var(--t-sm);
+    line-height: 1.45;
+    max-width: 65ch;
+  }
+  .dica {
+    padding: var(--e-2) var(--e-3);
+    border-radius: var(--raio-sm);
+    background: var(--destaque-suave);
+    font-size: var(--t-sm);
+  }
+</style>

web/src/lib/componentes/VidaCartao.svelte

@@ -2,6 +2,7 @@
   import { Gauge, Moon, Sparkles } from '@lucide/svelte';
   import { estado } from '../estado.svelte';
   import { configurarVida, cuidar, CUIDADOS, NECESSIDADES } from '../vida.svelte';
+  import Ajuda from './Ajuda.svelte';
   import Grupo from './Grupo.svelte';
   import Interruptor from './Interruptor.svelte';
   import Linha from './Linha.svelte';
@@ -10,11 +11,11 @@
   const v = $derived(estado.vida);
   let diarioAberto = $state(false);
 
-  // O ritmo também é a sensibilidade dos sensores no celular.
+  // O ritmo também é a sensibilidade dos sensores no celular (detalhes no ⓘ).
   const RITMOS = [
-    { valor: 'calmo', nome: 'Calmo', descricao: 'Age pouco; só reage e acorda com vários sons ou movimentos seguidos' },
-    { valor: 'normal', nome: 'Normal', descricao: 'Reage a barulho alto e movimento forte' },
-    { valor: 'agitado', nome: 'Agitado', descricao: 'Age bastante e reage a qualquer som ou movimento' },
+    { valor: 'calmo', nome: 'Calmo', descricao: 'Reage pouco' },
+    { valor: 'normal', nome: 'Normal', descricao: 'Equilibrado' },
+    { valor: 'agitado', nome: 'Agitado', descricao: 'Reage a tudo' },
   ] as const;
 
   const MOTIVOS: Record<string, string> = {
@@ -44,6 +45,7 @@
 
 <Grupo
   titulo="Vida"
+  ajuda="vida"
   rodape={v?.config.ligado
     ? 'Ele decide sozinho o que fazer pelo humor. Tocar ou deslizar o dedo na tela do celular também conta como carinho.'
     : 'Ligado, ele tem necessidades, humor, cochilos e inventa figurinhas, como um bichinho virtual.'}
@@ -54,7 +56,7 @@
     <div class="bicho" class:dormindo={v.dormindo}>
       <span class="humor" aria-hidden="true">{v.config.ligado ? v.emoji : '🤖'}</span>
       <div class="quem">
-        <strong>{v.config.ligado ? v.nome_humor : 'Modo autônomo desligado'}</strong>
+        <strong>{v.config.ligado ? v.nome_humor : 'Modo autônomo desligado'}{#if v.config.ligado}<Ajuda topico="humores" />{/if}</strong>
         <span>{idade(v.idade_dias)}{v.config.ligado && v.diario[0] ? ' · ' + v.diario[0].texto : ''}</span>
       </div>
       <Interruptor rotulo="Modo autônomo" checked={v.config.ligado} onchange={(l) => configurarVida({ ligado: l })} />
@@ -82,6 +84,7 @@
       </div>
 
       <div class="cuidados">
+        <span class="cuidar">Cuidar <Ajuda topico="cuidados" /></span>
         {#each CUIDADOS as c (c.acao)}
           <button class="btn pequeno" onclick={() => cuidar(c.acao)}><span aria-hidden="true">{c.emoji}</span> {c.nome}</button>
         {/each}
@@ -99,6 +102,7 @@
       </Linha>
       <Linha icone={Gauge} cor="#ff9500" rotulo="Ritmo" detalhe={RITMOS.find((r) => r.valor === v.config.ritmo)?.descricao ?? ''}>
         {#snippet acessorio()}
+          <Ajuda topico="ritmo" />
           <span class="segmentos" role="radiogroup" aria-label="Ritmo">
             {#each RITMOS as r (r.valor)}
               <button
@@ -173,8 +177,23 @@
     min-width: 0;
   }
   .quem strong {
+    display: flex;
+    align-items: center;
+    gap: 2px;
     font-size: var(--t-md);
   }
+  .cuidar {
+    grid-column: 1 / -1;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    margin-bottom: -4px;
+    font-size: var(--t-xs);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--texto-3);
+  }
   .quem span {
     color: var(--texto-3);
     font-size: var(--t-xs);

web/src/lib/guia.ts

@@ -0,0 +1,292 @@
+/**
+ * Guia do painel: o que cada parte faz, em linguagem simples. Usado pelo botão ⓘ ao lado dos
+ * títulos (abre só o tópico) e pela página Guia (todos os tópicos, como um tutorial).
+ */
+
+export interface ItemGuia {
+  nome: string;
+  texto: string;
+  emoji?: string;
+}
+
+export interface TopicoGuia {
+  titulo: string;
+  emoji: string;
+  /** Onde fica no painel. */
+  onde: string;
+  resumo: string;
+  itens?: ItemGuia[];
+  dica?: string;
+}
+
+export const TOPICOS: Record<string, TopicoGuia> = {
+  inicio: {
+    titulo: 'Primeiros passos',
+    emoji: '👋',
+    onde: 'Todo o painel',
+    resumo:
+      'O Carinha é um rosto de robô no celular (S10), ligado a esta placa (Orange Pi) que também move o braço. O painel mostra o que ele vê e sente, e deixa você mandar gestos, mudar o rosto e cuidar dele.',
+    itens: [
+      { emoji: '📹', nome: 'Ao vivo', texto: 'Câmera do celular, rosto ao vivo, modo vida, gestos e o que está acontecendo agora.' },
+      { emoji: '🔔', nome: 'Eventos', texto: 'Histórico de presença, movimento e som, com foto de cada um.' },
+      { emoji: '💬', nome: 'Conversa', texto: 'Converse por texto ou voz; ele responde falando e com um gesto.' },
+      { emoji: '😊', nome: 'Reações', texto: 'Biblioteca de animações e figurinhas, e criação de novas com IA.' },
+      { emoji: '✋', nome: 'Movimento', texto: 'Controle do braço robótico, calibração e teste dos motores.' },
+      { emoji: '⚙️', nome: 'Ajustes', texto: 'Tudo do celular (tela, sensores, sono, vídeo), IA, segurança e sistema.' },
+      { emoji: '🛑', nome: 'Parar tudo (E-Stop)', texto: 'O botão vermelho no topo para o braço, os motores e as animações na hora.' },
+    ],
+    dica: 'O ⓘ ao lado de cada título explica só aquela parte. Ctrl+K abre a busca de comandos.',
+  },
+  vida: {
+    titulo: 'Modo vida (autônomo)',
+    emoji: '🐣',
+    onde: 'Ao vivo › Vida',
+    resumo:
+      'Com o modo vida ligado, o Carinha funciona como um bichinho virtual: tem necessidades que mudam com o tempo e com o que acontece em volta, e decide sozinho o que fazer pelo humor.',
+    itens: [
+      { emoji: '⚡', nome: 'Energia', texto: 'Cai enquanto ele está acordado e enche dormindo. Muito baixa, ele vai tirar um cochilo.' },
+      { emoji: '😊', nome: 'Alegria', texto: 'Acompanha devagar a companhia e a diversão.' },
+      { emoji: '💬', nome: 'Companhia', texto: 'Sobe quando alguém aparece (PIR), conversa com ele ou faz carinho. Baixa, ele fica carente.' },
+      { emoji: '🎈', nome: 'Diversão', texto: 'Sobe com movimento em volta, brincadeiras e quando ele inventa algo. Baixa, ele fica entediado.' },
+      { emoji: '🎨', nome: 'Inventar figurinhas sozinho', texto: 'De vez em quando ele tem uma ideia e desenha uma figurinha nova com o Gemini, que vai para a biblioteca de Reações. No máximo 3 por dia, com 90 min entre elas.' },
+      { emoji: '🌙', nome: 'Dormir à noite', texto: 'Na madrugada ele vai dormir mesmo com gente se mexendo por perto. Carinho ou conversa seguram ele acordado por 10 minutos.' },
+      { emoji: '📖', nome: 'Diário', texto: 'Lista do que ele fez sozinho e dos cuidados que recebeu.' },
+    ],
+    dica: 'Desligar o modo vida volta o celular aos gestos soltos de sempre e à sensibilidade dos Ajustes.',
+  },
+  cuidados: {
+    titulo: 'Cuidar do Carinha',
+    emoji: '❤️',
+    onde: 'Ao vivo › Vida (botões) e a tela do celular',
+    resumo: 'Os botões do cartão Vida funcionam como os de um Tamagotchi. Cada um mexe nas necessidades e ele reage na hora.',
+    itens: [
+      { emoji: '❤️', nome: 'Carinho', texto: 'Companhia +15 e alegria +10. Ele faz coração.' },
+      { emoji: '🎈', nome: 'Brincar', texto: 'Diversão +25 e alegria +8, gasta um pouco de energia. Ele fica alegre.' },
+      { emoji: '⚡', nome: 'Energia', texto: 'Energia +30, como se fosse comida. Ele sorri.' },
+      { emoji: '🌙', nome: 'Ninar / ☀️ Acordar', texto: 'Põe para dormir ou acorda na hora.' },
+      { emoji: '👆', nome: 'Na tela do celular', texto: 'Deslizar o dedo é carinho; tocar é uma cutucada (um pouco de companhia e diversão). Tocar com ele dormindo acorda.' },
+    ],
+  },
+  humores: {
+    titulo: 'Humores',
+    emoji: '🙂',
+    onde: 'Ao vivo › Vida (o emoji grande)',
+    resumo: 'O humor sai das necessidades e escolhe os gestos, as expressões da boca e das sobrancelhas e o quanto ele se mexe.',
+    itens: [
+      { emoji: '😄', nome: 'Feliz', texto: 'Tudo em dia. Saltita, cantarola, dá sorrisinhos e piscadinhas, mexe mais.' },
+      { emoji: '🙂', nome: 'Tranquilo', texto: 'Normal. Olha em volta, pisca devagar, meio sorriso.' },
+      { emoji: '😐', nome: 'Entediado', texto: 'Diversão baixa. Fica pensativo, boca de lado, procura o que fazer e às vezes toca uma reação da biblioteca.' },
+      { emoji: '🥺', nome: 'Carente', texto: 'Companhia baixa. Com alguém perto, acena e pede carinho; sozinho, fica cabisbaixo.' },
+      { emoji: '😢', nome: 'Triste', texto: 'Alegria baixa. Fica tristinho, olha para baixo e mexe menos.' },
+      { emoji: '🥱', nome: 'Cansado', texto: 'Energia baixa. Boceja, suspira e logo vai dormir.' },
+      { emoji: '😴', nome: 'Dormindo', texto: 'Olhos fechados, respira devagar e recupera energia.' },
+    ],
+  },
+  ritmo: {
+    titulo: 'Ritmo e sensibilidade',
+    emoji: '🎚️',
+    onde: 'Ao vivo › Vida › Ritmo',
+    resumo: 'O ritmo diz o quanto ele age sozinho e o quanto os sensores precisam ser estimulados para ele reagir ou acordar.',
+    itens: [
+      { emoji: '🐢', nome: 'Calmo', texto: 'Age a cada 1 a 2,5 min. Limiares 50% mais altos; reage só no 3º barulho alto ou movimento forte seguido; acorda com o dobro de sons, 4 movimentos ou 3 disparos do PIR em 2 min.' },
+      { emoji: '🙂', nome: 'Normal', texto: 'Age a cada 25 s a 1 min. Reage a barulho alto e movimento forte; acorda com os sons configurados ou 2 movimentos.' },
+      { emoji: '⚡', nome: 'Agitado', texto: 'Age a cada 12 a 35 s. Limiares 40% mais baixos; reage a qualquer som ou movimento com reações variadas e acorda no primeiro estímulo.' },
+    ],
+    dica: 'A madrugada silenciosa vale por cima de qualquer ritmo.',
+  },
+  sono: {
+    titulo: 'Sono e madrugada',
+    emoji: '🌙',
+    onde: 'Ajustes › Sono e madrugada',
+    resumo: 'Decide o que acorda o rosto enquanto ele dorme.',
+    itens: [
+      { emoji: '🔊', nome: 'Sons para acordar', texto: 'Quantos barulhos em 1 minuto ele precisa ouvir para acordar. Um barulho comprido conta como um.' },
+      { emoji: '🌌', nome: 'Madrugada silenciosa', texto: 'No horário escolhido, movimento, câmera e PIR não acordam. Só barulho alto repetido, toque na tela ou conversa.' },
+      { emoji: '🕚', nome: 'Começa às / Termina às', texto: 'Horário da madrugada (padrão 23h às 7h). Pode atravessar a meia-noite.' },
+      { emoji: '⬛', nome: 'Apagar a tela quando dormir', texto: 'Fica em Tela e personalidade: depois de um tempo dormindo, a tela fica preta e o brilho vai ao mínimo para poupar bateria.' },
+    ],
+  },
+  celular: {
+    titulo: 'Celular',
+    emoji: '📱',
+    onde: 'Ao vivo › Celular',
+    resumo: 'Estado do S10: bateria, Wi-Fi, IP, versão do app e se ele está acordado. Tudo vem do próprio aplicativo.',
+    itens: [
+      { emoji: '🔋', nome: 'Bateria', texto: 'Nível e se está carregando. O painel avisa quando está baixa.' },
+      { emoji: '🔄', nome: 'Recarregar tela do celular', texto: 'Recarrega o rosto no celular para pegar uma versão nova sem mexer no aparelho.' },
+      { emoji: '🕒', nome: 'Último sinal', texto: 'Se o celular sumir (bateria acabou, Wi-Fi caiu), aparece há quanto tempo ele não responde.' },
+    ],
+  },
+  camera: {
+    titulo: 'Câmera e rastreamento',
+    emoji: '📹',
+    onde: 'Ao vivo › Câmera e Ajustes › Vídeo e rastreamento',
+    resumo: 'O vídeo vai direto do celular para este navegador (WebRTC). Nada é gravado; só a foto de cada evento fica no histórico.',
+    itens: [
+      { emoji: '🎥', nome: 'Transmitir câmera do celular', texto: 'Liga o vídeo ao vivo. Toque no quadrinho do canto para trocar câmera e rosto de lugar.' },
+      { emoji: '🙂', nome: 'Rastrear rosto / mãos', texto: 'Este computador acha rostos e mãos no vídeo.' },
+      { emoji: '👀', nome: 'Olhos seguem o alvo', texto: 'Os olhos do Carinha acompanham o rosto ou a mão encontrada.' },
+      { emoji: '✏️', nome: 'Desenhar rastreamento', texto: 'Mostra no vídeo as marcações do que foi encontrado.' },
+      { emoji: '🟢', nome: 'Bolinha PIR na imagem', texto: 'Cinza com o sensor parado; verde pulsando enquanto o sensor de presença está vendo alguém.' },
+    ],
+  },
+  gestos: {
+    titulo: 'Gestos',
+    emoji: '😉',
+    onde: 'Ao vivo › Gestos e Reações › Gestos do rosto',
+    resumo: 'Animações prontas do rosto: feliz, surpreso, acenar, esconder o rosto com as mãos, dançar e outras.',
+    itens: [
+      { emoji: '⭐', nome: 'Favoritos', texto: 'Até 12 gestos fixados com a estrela. Aparecem no Ao vivo.' },
+      { emoji: '⌨️', nome: 'Teclas 1 a 9', texto: 'Disparam os nove primeiros favoritos.' },
+      { emoji: '🔍', nome: 'Ctrl+K', texto: 'Busca qualquer gesto, rosto, cor ou tela pelo nome.' },
+    ],
+  },
+  aparencia: {
+    titulo: 'Aparência do rosto',
+    emoji: '🎨',
+    onde: 'Ao vivo › Aparência › Rosto, formato e cor',
+    resumo: 'Escolha o estilo do rosto, o formato dos olhos e a cor. Muda na hora no celular.',
+    itens: [
+      { emoji: '👁️', nome: 'Carinha Viva', texto: 'Pálpebras, brilho e micro-movimentos.' },
+      { emoji: '🟦', nome: 'Bloco', texto: 'Olhos quadrados, estilo robô de mesa.' },
+      { emoji: '🔵', nome: 'Matriz', texto: 'Painel de LEDs; boca e sobrancelhas também em pontos.' },
+      { emoji: '🔘', nome: 'Lente', texto: 'Íris e pupila que dilata.' },
+      { emoji: '🙂', nome: 'Clássico, Miúdo e Eilik', texto: 'Os desenhos originais.' },
+      { emoji: '⬭', nome: 'Formato', texto: 'Padrão, redondo, pílula, quadrado ou largo (nos rostos novos).' },
+      { emoji: '🤨', nome: 'Microexpressões', texto: 'Acordado e sem gesto, a boca e as sobrancelhas mexem sozinhas de vez em quando (meio sorriso, sobrancelha arqueada, suspiro) conforme o humor.' },
+    ],
+    dica: 'Boca, sobrancelhas e íris ligam e desligam em Ajustes › Tela e personalidade.',
+  },
+  personalidade: {
+    titulo: 'IA local (Qwen)',
+    emoji: '🧠',
+    onde: 'Ao vivo › Personalidade',
+    resumo: 'Com "Reagir sozinho com IA local" ligado, o Qwen escolhe uma expressão a partir dos sons e movimentos que o celular percebe. Roda sem internet e sem custo.',
+  },
+  acontecimentos: {
+    titulo: 'Acontecimentos',
+    emoji: '🔔',
+    onde: 'Ao vivo › Acontecimentos',
+    resumo: 'Lista ao vivo do que acabou de acontecer: gestos, respostas da conversa, reações, detecções e o que o modo vida fez.',
+    itens: [
+      { emoji: '🚶', nome: 'Sensor de presença (PIR)', texto: 'Mostra se o sensor está funcionando e quando viu alguém pela última vez.' },
+      { emoji: '🗂️', nome: 'Eventos', texto: 'Abre o histórico completo com fotos.' },
+    ],
+  },
+  eventos: {
+    titulo: 'Eventos e fotos',
+    emoji: '🗂️',
+    onde: 'Eventos',
+    resumo: 'Cada detecção vira um evento com horário e, se ligado, uma foto da câmera do celular. Os eventos ficam guardados pelos dias escolhidos (padrão 3) e depois são apagados sozinhos.',
+    itens: [
+      { emoji: '🚶', nome: 'Sensor de presença (PIR)', texto: 'Sensor HC-SR505 no pino 11 da placa. Vê calor de corpo em movimento a até ~3 m.' },
+      { emoji: '👀', nome: 'Movimento na câmera', texto: 'O celular percebe algo se mexendo na frente.' },
+      { emoji: '🔊', nome: 'Som alto', texto: 'O celular ouve um barulho forte (só o nível, nunca o áudio).' },
+      { emoji: '📷', nome: 'Guardar foto', texto: 'Tira uma foto em cada evento. "Ver foto" abre a imagem.' },
+      { emoji: '⏱️', nome: 'Intervalo', texto: 'Tempo mínimo entre dois eventos do mesmo tipo, para não lotar o histórico.' },
+    ],
+  },
+  presenca: {
+    titulo: 'Modo presença',
+    emoji: '🚶',
+    onde: 'Eventos › Modo presença',
+    resumo:
+      'O PIR liga a câmera do celular quando alguém aparece e acorda o Carinha. Sem ninguém pelo tempo escolhido, a câmera desliga, ele dorme e fica em silêncio. Na madrugada silenciosa o PIR não acorda.',
+  },
+  tela: {
+    titulo: 'Tela e personalidade',
+    emoji: '📺',
+    onde: 'Ajustes › Tela e personalidade',
+    resumo: 'Como o rosto aparece no celular e o que ele faz sozinho.',
+    itens: [
+      { emoji: '🎲', nome: 'Gestos espontâneos', texto: 'Pisca e olha em volta sem comando. Com o modo vida, os gestos seguem o humor.' },
+      { emoji: '👄', nome: 'Boca, sobrancelhas e íris', texto: 'Liga ou desliga cada parte do rosto.' },
+      { emoji: '💡', nome: 'Brilho e repouso', texto: 'Brilho normal e o mais fraco depois de um tempo sem nada acontecer.' },
+    ],
+  },
+  sensores: {
+    titulo: 'Sensores e reações',
+    emoji: '🎙️',
+    onde: 'Ajustes › Sensores e reações',
+    resumo: 'O que o celular usa para perceber o ambiente. Só os níveis são usados: nenhum áudio é gravado e a câmera não sai do celular sem você ligar a transmissão.',
+    itens: [
+      { emoji: '🎙️', nome: 'Microfone / Reagir a sons', texto: 'Ouve o nível do som para se assustar e acordar.' },
+      { emoji: '🤫', nome: 'Silêncio para dormir', texto: 'Quantos segundos sem som nem movimento até ele adormecer sozinho.' },
+      { emoji: '📷', nome: 'Câmera como sensor / Reagir a movimento', texto: 'Detecta movimento na frente do celular.' },
+      { emoji: '😴', nome: 'Microfone e câmera durante o sono', texto: 'Se continuam ligados dormindo (para poder acordar).' },
+    ],
+  },
+  sensibilidade: {
+    titulo: 'Sensibilidade (avançado)',
+    emoji: '🎛️',
+    onde: 'Ajustes › Sensibilidade',
+    resumo: 'Os limiares de base dos sustos. O ritmo do modo vida multiplica esses valores (calmo sobe, agitado desce).',
+    itens: [
+      { emoji: '🔉', nome: 'Nível para perceber som', texto: 'Acima disso conta como "tem som".' },
+      { emoji: '💥', nome: 'Som mínimo e aumento súbito para susto', texto: 'Precisa passar dos dois: ser alto e ser bem mais alto que o barulho de fundo.' },
+      { emoji: '🏃', nome: 'Movimento mínimo / para susto', texto: 'Quanto precisa mexer para ele olhar e para ele se assustar.' },
+      { emoji: '⏳', nome: 'Intervalos', texto: 'Tempo mínimo entre dois sustos seguidos.' },
+    ],
+  },
+  reacoes: {
+    titulo: 'Reações',
+    emoji: '✨',
+    onde: 'Reações',
+    resumo: 'Animações e figurinhas que aparecem nos olhos ou em volta do rosto.',
+    itens: [
+      { emoji: '📚', nome: 'Biblioteca', texto: 'Toque para tocar no celular. Dá para curtir, editar, duplicar, desativar e apagar (com desfazer).' },
+      { emoji: '🖌️', nome: 'Criar com IA', texto: 'Descreva uma figurinha e o Gemini desenha; ou deixe ele criar 3 reações a partir da conversa e da rotina.' },
+      { emoji: '😉', nome: 'Gestos do rosto', texto: 'Todos os gestos, com a estrela para fixar nos favoritos.' },
+      { emoji: '📖', nome: 'Diário', texto: 'Resumos e registros usados para criar reações.' },
+    ],
+  },
+  conversa: {
+    titulo: 'Conversa',
+    emoji: '💬',
+    onde: 'Conversa',
+    resumo: 'Fale ou escreva; o Carinha responde em voz de robô, com legenda na tela do celular e um gesto.',
+    itens: [
+      { emoji: '🤖', nome: 'Motor', texto: 'Qwen local (sem internet, sem custo) ou Gemini (responde melhor). Troca em Ajustes › Inteligência artificial.' },
+      { emoji: '🧠', nome: 'Lembranças', texto: 'Coisas que ele guarda sobre você e usa nas respostas.' },
+      { emoji: '🗓️', nome: 'Rotina e preferências', texto: 'Hábitos e gostos que você ensina; também inspiram as reações.' },
+    ],
+  },
+  movimento: {
+    titulo: 'Movimento (braço)',
+    emoji: '🦾',
+    onde: 'Movimento',
+    resumo: 'Controle do braço de 7 articulações pela placa de servos (PCA9685).',
+    itens: [
+      { emoji: '✋', nome: 'Segurar para mover', texto: 'O braço só se mexe enquanto você segura o botão ou o controle. Soltou, ele para.' },
+      { emoji: '🧍', nome: 'Posturas e sequências', texto: 'Posições salvas e movimentos encadeados. A prévia anima só a tela.' },
+      { emoji: '📏', nome: 'Calibração', texto: 'Limites de cada motor, testados passo a passo.' },
+      { emoji: '🩺', nome: 'Diagnóstico', texto: 'Teste canal a canal com limites conservadores. Não abre junto com o controle do braço.' },
+    ],
+    dica: 'O E-Stop vermelho no topo para tudo. Depois é preciso rearmar para mover de novo.',
+  },
+  atalhos: {
+    titulo: 'Atalhos de teclado',
+    emoji: '⌨️',
+    onde: 'Em qualquer tela',
+    resumo: 'Para usar o painel sem o mouse.',
+    itens: [
+      { nome: 'Ctrl+K', texto: 'Busca de comandos (gestos, rostos, cores, telas, este guia).' },
+      { nome: '1 a 9', texto: 'Gestos favoritos.' },
+      { nome: 'Esc Esc ou Shift+Espaço', texto: 'E-Stop: para tudo.' },
+      { nome: 'g e uma letra', texto: 'Vai para uma tela: g v Ao vivo, g e Eventos, g c Conversa, g r Reações, g m Movimento, g a Ajustes.' },
+    ],
+  },
+};
+
+/** Ordem do tutorial (página Guia). */
+export const ORDEM_GUIA = [
+  'inicio', 'vida', 'cuidados', 'humores', 'ritmo', 'sono', 'celular', 'camera', 'gestos', 'aparencia',
+  'personalidade', 'acontecimentos', 'eventos', 'presenca', 'tela', 'sensores', 'sensibilidade',
+  'reacoes', 'conversa', 'movimento', 'atalhos',
+];
+
+/** Tópico de cada tela, para o ⓘ do topo. */
+export const TOPICO_DA_TELA: Record<string, string> = {
+  'ao-vivo': 'inicio', eventos: 'eventos', conversa: 'conversa', reacoes: 'reacoes',
+  movimento: 'movimento', ajustes: 'tela', rosto: 'aparencia', guia: 'inicio',
+};

web/src/lib/paleta.svelte.ts

@@ -3,6 +3,7 @@ import {
   cor, CORES, formato, FORMATOS_INFO, gesto, GESTOS_INFO, gestosDisponiveis, nomeRosto, pararTudo, rearmar, recarregarCelular, rosto,
 } from './comandos.svelte';
 import { estado } from './estado.svelte';
+import { ORDEM_GUIA, TOPICOS } from './guia';
 import { nav, ROTAS } from './rotas.svelte';
 
 export interface ItemPaleta {
@@ -36,6 +37,13 @@ export function itensDaPaleta(): ItemPaleta[] {
 registrarNaPaleta(() => [
   ...ROTAS.map((r) => ({ id: 'ir-' + r.id, grupo: 'Ir para', titulo: r.titulo, fazer: () => nav.ir(r.id) })),
   { id: 'ir-rosto', grupo: 'Ir para', titulo: 'Rosto (estilo, formato e cor)', fazer: () => nav.ir('rosto') },
+  ...ORDEM_GUIA.map((t) => ({
+    id: 'guia-' + t,
+    grupo: 'Guia',
+    titulo: TOPICOS[t].emoji + ' ' + TOPICOS[t].titulo,
+    dica: TOPICOS[t].onde,
+    fazer: () => (location.hash = '/guia?t=' + t),
+  })),
   ...estado.formatos.map((f) => ({ id: 'formato-' + f, grupo: 'Formato dos olhos', titulo: FORMATOS_INFO[f] ?? f, fazer: () => formato(f) })),
   estado.estop.ativo
     ? { id: 'rearmar', grupo: 'Ações', titulo: 'Rearmar motores', fazer: rearmar }

web/src/lib/rotas.svelte.ts

@@ -1,6 +1,6 @@
 /** Rotas por hash (#/conversa): o servidor só precisa entregar index.html em "/". */
 
-export type Rota = 'ao-vivo' | 'eventos' | 'conversa' | 'reacoes' | 'movimento' | 'ajustes' | 'rosto';
+export type Rota = 'ao-vivo' | 'eventos' | 'conversa' | 'reacoes' | 'movimento' | 'ajustes' | 'rosto' | 'guia';
 
 export const ROTAS: { id: Rota; titulo: string; atalho: string }[] = [
   { id: 'ao-vivo', titulo: 'Ao vivo', atalho: 'g v' },
@@ -14,6 +14,7 @@ export const ROTAS: { id: Rota; titulo: string; atalho: string }[] = [
 /** Páginas abertas a partir de outra tela (não aparecem na navegação). */
 export const SECUNDARIAS: { id: Rota; titulo: string; volta: Rota }[] = [
   { id: 'rosto', titulo: 'Rosto', volta: 'ao-vivo' },
+  { id: 'guia', titulo: 'Guia', volta: 'ajustes' },
 ];
 
 export const tituloDa = (id: Rota) => [...ROTAS, ...SECUNDARIAS].find((r) => r.id === id)?.titulo ?? '';