# Diretrizes de Estilo do Mindforge

Diretrizes visuais da página de revisão de flashcards: usabilidade moderna com toques acadêmicos vintage — mesa de estudo pessoal, quente, tátil e iluminada.

---

## 1. Identidade do Produto

- **Nome**: Mindforge
- **Conceito**: Estrutura moderna (grade limpa, vidro translúcido, cartões arredondados) + dicas vintage (papel, serifa, cores pergaminho, carimbo, ficha pautada).
- **Tom**: Ambiente de biblioteca com legibilidade de aplicativo moderno. Sempre priorizar foco e UX para estudo.

---

## 2. Princípios de Design

1. **Claro e quente**: Fundos creme/pergaminho/dourado/azul desbotado. Sem tema escuro.
2. **Vintage ao redor, legível no centro**: Serifa na marca e cabeçalhos; sem serifa no conteúdo do flashcard.
3. **Sem animações contínuas**: Progresso estático, sem pulsos, sem cintilações. Movimento apenas para feedback direto (virar, carimbar, celebrar).
4. **Hierarquia forte**: Flashcard é o ponto focal. Sidebar, topbar e painéis são suporte visual mais leve.
5. **Tátil e limpo**: Texturas de papel, bordas tracejadas, sombras suaves. Evitar grunge pesado ou baixo contraste.

---

## 3. Variáveis CSS

```css
:root {
  --bg: #fbf3df;
  --bg-soft: #fff9ea;
  --paper: #fffaf0;
  --paper-deep: #f2dfb3;
  --ink: #2b241c;
  --muted: #7b6a50;
  --line: rgba(82, 60, 28, 0.18);

  --blue: #3f7cac;
  --blue-deep: #255f8d;
  --green: #4f8f5a;
  --green-deep: #32683b;
  --red: #b75b4d;
  --red-deep: #8d3c32;
  --gold: #c79539;
  --violet: #7e65a8;

  --shadow: 0 28px 70px rgba(58, 42, 17, 0.18);
  --card-shadow: 0 30px 90px rgba(76, 48, 12, 0.20);

  --radius-xl: 32px;
  --radius-lg: 22px;
  --radius-md: 16px;

  --ease: cubic-bezier(.2,.75,.2,1);
}
```

| Token | Valor | Função |
| --- | --- | --- |
| `--bg` | `#fbf3df` | Fundo geral |
| `--bg-soft` | `#fff9ea` | Superfícies claras |
| `--paper` | `#fffaf0` | Face do cartão |
| `--paper-deep` | `#f2dfb3` | Pergaminho profundo |
| `--ink` | `#2b241c` | Texto principal |
| `--muted` | `#7b6a50` | Texto secundário |
| `--line` | `rgba(82, 60, 28, 0.18)` | Bordas/divisores |
| `--blue` / `--blue-deep` | `#3f7cac` / `#255f8d` | Destaque, progresso, nota |
| `--green` / `--green-deep` | `#4f8f5a` / `#32683b` | Correto, status ativo |
| `--red` / `--red-deep` | `#b75b4d` / `#8d3c32` | Incorreto, difícil |
| `--gold` | `#c79539` | Destaque vintage, médio |
| `--violet` | `#7e65a8` | Celebração/destaque secundário |

Sombras são marrom-quentes (nunca preto neutro). Raio de borda: `--radius-xl` (contêineres grandes), `--radius-lg` (cartões médios), `--radius-md` (itens compactos). Easing: `cubic-bezier(.2,.75,.2,1)`.

---

## 4. Estilo Global

```css
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255, 221, 146, .8), transparent 35%),
    radial-gradient(circle at 85% 15%, rgba(99, 153, 188, .22), transparent 34%),
    linear-gradient(135deg, #fff8e6 0%, #f9edcc 50%, #fbf5e7 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(92, 68, 30, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 68, 30, 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,.12));
}
```

---

## 5. Tipografia

- **UI global**: `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
- **Marca e cabeçalhos**: `Georgia, "Times New Roman", serif`
- **Conteúdo do flashcard (pergunta/resposta)**: `"Segoe UI", Inter, Avenir, system-ui, -apple-system, BlinkMacSystemFont, sans-serif`

Cabeçalho da pergunta: `font-size: clamp(28px, 4.5vw, 46px)`, `line-height: 1.16`, `letter-spacing: -.035em`, `font-weight: 850`.
Cabeçalho da resposta: `font-size: clamp(24px, 3.7vw, 36px)`, `line-height: 1.24`.
Texto de apoio: `max-width: 590px`, `color: #66543d`, `font-size: 17px`, `line-height: 1.68`.

Metadados (rótulos, tags, estatísticas): `text-transform: uppercase`, `letter-spacing: .10em a .14em`, `font-weight: 900 a 950`.

---

## 6. Layout

```css
.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
}

.main {
  min-width: 0;
  padding: 22px 28px 38px;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 24px;
  align-items: start;
}
```

---

## 7. Barra Lateral

```css
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px 18px;
  background:
    linear-gradient(180deg, rgba(255, 249, 234, .9), rgba(245, 226, 183, .84)),
    repeating-linear-gradient(45deg, rgba(113, 74, 18, .04) 0 1px, transparent 1px 8px);
  border-right: 1px solid var(--line);
  box-shadow: 16px 0 40px rgba(80, 54, 18, .08);
  z-index: 2;
}
```

### Marca

```css
.brand { display: flex; align-items: center; gap: 14px; padding: 12px 12px 24px; }

.brand-mark {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, #f2cf82, #fff2c8);
  border: 1px solid rgba(105, 73, 21, .18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 22px rgba(129, 86, 27, .17);
  font-family: Georgia, serif; font-size: 22px; font-weight: 800; color: #51340d;
}

.brand h1 { font-family: Georgia, "Times New Roman", serif; font-size: 22px; letter-spacing: -.03em; }
```

### Navegação

```css
.nav-section-title {
  margin: 20px 12px 10px;
  color: var(--muted); font-size: 11px; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase;
}

.nav-item {
  position: relative; width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 13px; margin: 4px 0;
  border: 1px solid transparent; border-radius: 16px;
  color: #4b3b27; text-decoration: none;
  font-weight: 800; font-size: 14px;
  transition: .25s var(--ease); cursor: pointer;
}

.nav-item:hover { transform: translateX(4px); background: rgba(255,255,255,.45); border-color: var(--line); }

.nav-item.active {
  background: #fff7df; border-color: rgba(129, 86, 27, .16);
  box-shadow: 0 12px 28px rgba(104, 65, 14, .10);
}

.nav-icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(255,255,255,.64);
  border: 1px solid rgba(80, 54, 18, .10);
}
```

### Cartão do baralho e progresso

```css
.deck-card {
  margin-top: 24px; padding: 16px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.62), rgba(255,238,193,.70));
  border: 1px solid rgba(105, 73, 21, .16);
  box-shadow: 0 18px 40px rgba(82, 55, 18, .10);
}

.mini-progress {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(95, 72, 35, .14);
}
.mini-progress span { width: 54%; background: linear-gradient(90deg, var(--blue), #79a9c8, var(--gold)); }
```

---

## 8. Barra Superior

```css
.topbar {
  min-height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 18px; margin-bottom: 24px;
  background: rgba(255, 250, 239, .72);
  border: 1px solid rgba(104, 69, 22, .13); border-radius: 26px;
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(86, 57, 17, .08);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
  color: var(--blue-deep); font-size: 12px; font-weight: 950;
  letter-spacing: .14em; text-transform: uppercase;
}

.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(79, 143, 90, .16);
  /* ESTÁTICO - nunca pulsar */
}

.topbar h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.chip, .icon-button {
  min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(96, 67, 28, .15);
  background: rgba(255,255,255,.62);
  color: #4b3b27; font-weight: 850; font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.icon-button:hover { transform: translateY(-2px) rotate(-2deg); box-shadow: 0 10px 20px rgba(86, 57, 17, .12); }
```

---

## 9. Painel de Revisão

```css
.review-panel {
  position: relative;
  min-height: 650px;
  padding: clamp(18px, 3vw, 34px);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(145deg, rgba(255,255,255,.54), rgba(255,240,202,.46)),
    radial-gradient(circle at 15% 20%, rgba(255, 201, 101, .25), transparent 35%),
    radial-gradient(circle at 90% 10%, rgba(63, 124, 172, .16), transparent 32%);
  border: 1px solid rgba(104, 69, 22, .13);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.review-panel::before {
  width: 220px; height: 220px;
  right: -92px; top: 100px;
  background: rgba(63, 124, 172, .13);
  /* forma decorativa - nunca cobrir conteúdo */
}

.review-panel::after {
  width: 180px; height: 180px;
  left: -70px; bottom: 60px;
  background: rgba(199, 149, 57, .18);
}

.review-panel::before, .review-panel::after {
  position: absolute; border-radius: 999px; pointer-events: none; filter: blur(2px); opacity: .5;
}

.session-header {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  margin-bottom: 24px;
}

.session-title h3 { font-family: Georgia, serif; font-size: clamp(24px, 3vw, 36px); letter-spacing: -.04em; }
.session-title p { max-width: 660px; color: var(--muted); font-size: 15px; line-height: 1.55; }

.score-pill {
  min-width: 76px; padding: 11px 12px; border-radius: 18px;
  background: rgba(255,255,255,.55); border: 1px solid rgba(100, 65, 18, .12);
  text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.score-pill b { display: block; font-size: 19px; }
.score-pill span { color: var(--muted); font-size: 10px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
```

---

## 10. Flashcard

```css
.stage {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  min-height: 390px;
  perspective: 1400px;
  padding: 22px 0;
}

.flashcard {
  position: relative;
  width: min(680px, 100%); min-height: 355px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .78s var(--ease), filter .35s var(--ease);
  outline: none;
}

.flashcard:hover .card-face { border-color: rgba(63, 124, 172, .28); }
.flashcard.is-flipped { transform: rotateY(180deg); }
.flashcard.is-reviewed { animation: cardExit .58s var(--ease); }

.card-face {
  position: absolute; inset: 0; min-height: 355px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(24px, 5vw, 42px);
  border-radius: 30px;
  backface-visibility: hidden;
  background:
    linear-gradient(90deg, rgba(168, 111, 36, .09) 0 1px, transparent 1px 22px),
    linear-gradient(rgba(168, 111, 36, .08) 0 1px, transparent 1px 30px),
    linear-gradient(145deg, #fffaf0, #f5dfaa);
  border: 1px solid rgba(82, 54, 17, .18);
  box-shadow: var(--card-shadow), inset 0 0 0 8px rgba(255,255,255,.24);
  overflow: hidden;
}

/* Borda tracejada de arquivo */
.card-face::before {
  content: ""; position: absolute; inset: 18px;
  border: 1px dashed rgba(82, 54, 17, .18); border-radius: 22px;
  pointer-events: none;
}

/* Brilho decorativo */
.card-face::after {
  content: ""; position: absolute;
  width: 140px; height: 140px;
  right: -46px; bottom: -50px; border-radius: 50%;
  background: radial-gradient(circle, rgba(199,149,57,.25), transparent 66%);
  pointer-events: none;
}

/* Verso: mais frio/azulado para diferenciar */
.card-back {
  transform: rotateY(180deg);
  background:
    linear-gradient(90deg, rgba(63,124,172,.08) 0 1px, transparent 1px 22px),
    linear-gradient(rgba(63,124,172,.07) 0 1px, transparent 1px 30px),
    linear-gradient(145deg, #fffaf1, #dfeef2);
}

.card-meta {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  color: var(--muted); font-size: 12px; font-weight: 950;
  letter-spacing: .12em; text-transform: uppercase;
}

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 999px;
  background: rgba(255,255,255,.54); border: 1px solid rgba(82, 54, 17, .12);
}

.card-question, .card-answer {
  position: relative; z-index: 1;
  display: grid; align-content: center; gap: 12px;
  min-height: 190px;
}

.card-footer {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; gap: 14px; align-items: center;
  color: var(--muted); font-size: 13px; font-weight: 800;
}

.spacebar {
  padding: 4px 9px; border-radius: 8px;
  color: #4f3a1d; background: rgba(255,255,255,.58);
  border: 1px solid rgba(82, 54, 17, .14);
  box-shadow: inset 0 -2px 0 rgba(82, 54, 17, .08);
  font-size: 11px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase;
}

@keyframes cardExit {
  0%   { transform: translateX(0) rotateY(180deg) rotateZ(0); opacity: 1; }
  45%  { transform: translateX(28px) rotateY(180deg) rotateZ(2deg); opacity: .9; }
  100% { transform: translateX(-32px) rotateY(180deg) rotateZ(-2deg); opacity: 0; }
}
```

---

## 11. Controles de Revisão

```css
.controls {
  position: relative; z-index: 1;
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
  opacity: .36; transform: translateY(10px);
  pointer-events: none;
  transition: .35s var(--ease);
}

.controls.ready { opacity: 1; transform: translateY(0); pointer-events: auto; }

.review-button {
  position: relative;
  min-width: 170px; min-height: 60px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 20px;
  color: white; font-weight: 950; font-size: 16px; cursor: pointer;
  box-shadow: 0 16px 34px rgba(63, 44, 20, .18), inset 0 1px 0 rgba(255,255,255,.32);
  overflow: hidden;
  transition: .25s var(--ease);
}

.review-button.correct { background: linear-gradient(135deg, var(--green), var(--green-deep)); }
.review-button.wrong   { background: linear-gradient(135deg, var(--red), var(--red-deep)); }

.review-button:hover { transform: translateY(-4px); box-shadow: 0 22px 42px rgba(63, 44, 20, .22), inset 0 1px 0 rgba(255,255,255,.32); }

/* Brilho no hover */
.review-button::before {
  content: ""; position: absolute; inset: -90% -40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transform: rotate(20deg) translateX(-80%);
  transition: .55s var(--ease);
}
.review-button:hover::before { transform: rotate(20deg) translateX(80%); }
```

---

## 12. Carimbo de Feedback

```css
.stamp {
  position: absolute; right: 38px; top: 36px; z-index: 4;
  padding: 12px 18px;
  border: 4px double currentColor; border-radius: 10px;
  font-family: Georgia, serif; font-size: 26px; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transform: rotate(-12deg) scale(1.3);
  pointer-events: none;
}
.stamp.correct { color: var(--green-deep); }
.stamp.wrong   { color: var(--red-deep); }

.stamp.show { animation: stampIn .7s var(--ease); }

@keyframes stampIn {
  0%   { opacity: 0; transform: rotate(-18deg) scale(1.8); }
  38%  { opacity: 1; transform: rotate(-10deg) scale(.9); }
  58%  { transform: rotate(-12deg) scale(1.04); }
  100% { opacity: 0; transform: rotate(-12deg) scale(1); }
}
```

---

## 13. Painel Lateral Direito

```css
.side-panel { display: grid; gap: 18px; }

.panel-card {
  padding: 20px; border-radius: 26px;
  background: rgba(255, 250, 239, .68);
  border: 1px solid rgba(104, 69, 22, .13);
  box-shadow: 0 18px 48px rgba(86, 57, 17, .09);
  backdrop-filter: blur(16px);
}

.panel-card h3 { margin: 0 0 14px; font-family: Georgia, serif; font-size: 22px; letter-spacing: -.03em; }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.stat {
  padding: 14px; border-radius: 18px;
  background: rgba(255,255,255,.52); border: 1px solid rgba(82, 54, 17, .10);
}
.stat b { display: block; font-size: 24px; letter-spacing: -.04em; }
.stat span { color: var(--muted); font-size: 11px; font-weight: 950; letter-spacing: .10em; text-transform: uppercase; }

.track {
  height: 14px; border-radius: 999px; overflow: hidden;
  background: rgba(80, 54, 18, .12);
}
.track span { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red), var(--gold), var(--green)); }

.queue { display: grid; gap: 10px; }

.queue-item {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px; align-items: center; padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.48); border: 1px solid rgba(82, 54, 17, .10);
}
.queue-item strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.queue-number {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: #fff5d8; border: 1px solid rgba(82, 54, 17, .12);
  color: #74531c; font-family: Georgia, serif; font-weight: 900;
}

.difficulty { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(199, 149, 57, .14); }
.difficulty.easy { background: var(--green); box-shadow: 0 0 0 5px rgba(79, 143, 90, .14); }
.difficulty.hard { background: var(--red);   box-shadow: 0 0 0 5px rgba(183, 91, 77, .14); }

.note {
  position: relative;
  padding: 18px 18px 18px 22px; border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 246, 211, .9), rgba(255,255,255,.52));
  border: 1px solid rgba(104, 69, 22, .13);
  color: #5e4a2f; font-size: 14px; line-height: 1.55;
}
.note::before {
  content: ""; position: absolute;
  left: 10px; top: 16px; bottom: 16px; width: 4px; border-radius: 999px;
  background: var(--blue);
}
```

---

## 14. Animações

### Permitidas (curtas, acionadas pelo usuário)

| Animação | Gatilho | Duração |
| --- | --- | --- |
| Virada do flashcard (`rotateY(180deg)`) | Clique/Espaço/Enter | `.78s` |
| Saída do cartão (`cardExit`) | Marcar Correto/Incorreto | `.58s` |
| Carimbo (`stampIn`) | Marcar Correto/Incorreto | `.7s` |
| Brilho do botão (hover) | Hover | `.55s` |
| Confete (`confettiFly`) | Marcar Correto | `850ms` |
| Revelação dos controles (`.controls.ready`) | Revelação da resposta | `.35s` |

### Proibidas

- Pulsos infinitos (pontos de status, progresso)
- Barras de progresso animadas ou cintilantes
- Movimento de fundo contínuo
- Hover que transforme `.flashcard` conflitando com `rotateY`
- Movimento decorativo durante leitura

---

## 15. Responsivo

### Tablet (`max-width: 1120px`)

```css
@media (max-width: 1120px) {
  .app { grid-template-columns: 84px minmax(0, 1fr); }
  .sidebar { padding: 20px 10px; }
  .brand { justify-content: center; padding: 8px 0 18px; }
  .brand div:not(.brand-mark), .nav-section-title, .nav-text, .deck-card { display: none; }
  .nav-item { justify-content: center; padding: 12px; }
  .content-grid { grid-template-columns: 1fr; }
  .side-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
```

### Mobile (`max-width: 760px`)

```css
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; display: flex; align-items: center; gap: 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { min-width: 64px; padding: 0; }
  .nav-item { min-width: 56px; }
  .main { padding: 16px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .topbar h2 { white-space: normal; }
  .session-header { flex-direction: column; }
  .score-pills { justify-content: flex-start; }
  .review-panel { min-height: auto; }
  .stage { min-height: 420px; }
  .flashcard, .card-face { min-height: 380px; }
  .side-panel { grid-template-columns: 1fr; }
  .review-button { width: 100%; }
}
```

---

## 16. Interação

- Revelar cartão: clique no flashcard, `Espaço` ou `Enter`. Adiciona `.is-flipped` e `.controls.ready`.
- Botões inativos antes da revelação. Após: `Correto` (gradiente verde, carimbo verde + confete), `Incorreto` (gradiente vermelho, carimbo vermelho).
- Atalhos: `Espaço` (revelar), `C` (correto), `W` (incorreto).

---

## 17. Acessibilidade

- Texto principal em tinta escura quente (`--ink`), nunca preto puro.
- Conteúdo do flashcard sempre sem serifa legível.
- Sem animações em loop. Movimento apenas sob ação do usuário.
- Flashcard alcançável por teclado.
- Flashcard é o ponto focal; painéis secundários usam menor contraste e fontes menores.

---

## 18. O que Fazer e Não Fazer

**Fazer**: creme quente, pergaminho, dourado, azul atenuado; página iluminada; serifa na marca e cabeçalhos; sem serifa no flashcard; linhas de papel e bordas tracejadas; progresso estático; animações curtas para feedback; espaçamento generoso.

**Não fazer**: tema escuro; pulsos ou cintilações infinitas; animar barras de progresso; hover no `.flashcard` que conflite com `rotateY`; fontes decorativas no conteúdo; opacidade alta na textura; sidebar/topbar mais fortes que o cartão; cores fora da paleta.