@layer views {
  .tutorial {
    position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none;
    max-height: none; padding: 0; margin: 0; border: 0; overflow: hidden;
    background: transparent; color: var(--ui-text);
  }
  .tutorial::backdrop { background: transparent; }
  .tutorial__alvo {
    position: fixed; border: 3px solid var(--ui-brand); border-radius: 1rem;
    box-shadow: 0 0 0 200vmax color-mix(in srgb, var(--ui-bg) 86%, transparent);
    pointer-events: none;
  }
  .tutorial__balao, .tutorial-convite {
    background: var(--ui-surface); color: var(--ui-text);
    border: 1px solid var(--ui-control-border); border-radius: 1.25rem;
    padding: clamp(16px, 4vw, 20px); width: min(25rem, calc(100vw - 24px));
    max-height: calc(100dvh - 24px); overflow-y: auto;
  }
  .tutorial__balao { position: fixed; }
  /* Entre um passo e outro (a tela de baixo muda), só a tela escurecida; e no passo sem
     alvo (o print da chamada), o escuro cobre tudo e o balão fica no meio. */
  .tutorial[data-esperando], .tutorial[data-sem-alvo] { background: color-mix(in srgb, var(--ui-bg) 86%, transparent); }
  .tutorial[data-esperando] .tutorial__balao, .tutorial[data-esperando] .tutorial__alvo,
  .tutorial[data-esperando] .tutorial__seta, .tutorial[data-sem-alvo] .tutorial__alvo { visibility: hidden; }
  .tutorial__figura {
    display: block; width: 100%; height: auto; margin-top: .75rem;
    border: 1px solid var(--ui-control-border); border-radius: .875rem; background: var(--ui-bg);
  }
  .tutorial__seta {
    position: fixed; width: 0; height: 0;
    border-inline: 8px solid transparent; pointer-events: none;
  }
  .tutorial__seta[data-direction="down"] { border-top: 9px solid var(--ui-brand); }
  .tutorial__seta[data-direction="up"] { border-bottom: 9px solid var(--ui-brand); }
  .tutorial-convite::backdrop { background: color-mix(in srgb, var(--ui-bg) 86%, transparent); }
  .tutorial__balao h2, .tutorial-convite h2 { font-size: 1.25rem; margin: .5rem 0 .75rem; }
  .tutorial__balao p, .tutorial-convite p { line-height: 1.6; }
  .tutorial__passo { color: var(--ui-brand); font-size: .875rem; font-weight: 600; }
  .tutorial__exemplo { color: var(--ui-muted); font-size: .875rem; margin-top: .75rem; }
  .tutorial__acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: 1.25rem; }
  .tutorial__acoes .btn { min-height: 3rem; max-width: 100%; white-space: normal; }
  /* Revisão de 16/10/2026: Anterior | Próximo lado a lado, de mesma largura,
     e Sair como link na linha de baixo (o "Próximo" caía sozinho a 360 px). */
  .tutorial__acoes--passos { display: grid; grid-template-columns: 1fr 1fr; }
  .tutorial__acoes--passos .btn { width: 100%; }
  .tutorial__sair {
    grid-column: 1 / -1; justify-self: center; min-height: 3rem; padding: 0 .75rem;
    border: 0; border-radius: .75rem; background: none; color: var(--ui-brand);
    font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  }
  .tutorial__balao :focus-visible, .tutorial-convite :focus-visible { outline: 3px solid var(--ui-brand); outline-offset: 3px; }
}