:root {
  --fundo: #fffaf0;
  --texto: #3a2f4f;
  --roxo: #4a2e8c;
  --vermelho: #c84650;
  --cartao: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root { --fundo: #1e1a2b; --texto: #ece6f7; --roxo: #b9a4f0; --vermelho: #f08890; --cartao: #2a2440; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 18px/1.6 "Segoe UI", system-ui, sans-serif;
}
a { color: var(--roxo); }
.capa img { width: 100%; height: 260px; object-fit: cover; display: block; }
main { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; }
.apresentacao {
  display: flex; gap: 24px; align-items: center; margin-top: 28px;
  background: var(--cartao); border-radius: 24px; padding: 20px; box-shadow: 0 6px 24px #0002;
}
.avatar { width: 120px; height: 120px; border-radius: 50%; border: 5px solid #fff; flex-shrink: 0; }
h1 { color: var(--roxo); margin: 0 0 4px; line-height: 1.2; }
h2 { color: var(--vermelho); margin-top: 36px; }
.botao {
  display: inline-block; margin-top: 8px; padding: 10px 20px; border-radius: 999px;
  background: var(--vermelho); color: #fff; text-decoration: none; font-weight: 600;
}
.turma { padding-left: 20px; }
.texto { padding-top: 24px; }
.data { opacity: .7; font-size: 15px; }
footer { text-align: center; padding: 24px 16px 40px; font-size: 15px; }
.yt { width: 28px; height: 20px; vertical-align: -4px; }
.botao .yt { background: #fff; border-radius: 5px; }
.api { margin: 0 0 8px; }
@media (max-width: 560px) {
  .apresentacao { flex-direction: column; text-align: center; }
  .capa img { height: 160px; }
}