/* Shared visual foundation for every Learning Lab experience. */
:root {
  --learning-ink: #223248;
  --learning-muted: #587083;
  --learning-paper: rgba(255, 255, 255, 0.92);
  --learning-line: rgba(34, 50, 72, 0.14);
  --learning-blue: #2f73db;
  --learning-yellow: #ffe27a;
  --learning-mint: #dff4d6;
  --learning-shadow: 0 10px 0 rgba(34, 50, 72, 0.08), 0 20px 36px rgba(34, 50, 72, 0.12);
}

body {
  color: var(--learning-ink);
  background: linear-gradient(180deg, #e9f7ff 0%, #f8fbff 48%, #f1faed 100%);
}

.learning-page {
  color: var(--learning-ink);
  font-family: "Avenir Next", "Trebuchet MS", "Comic Sans MS", sans-serif;
}

.learning-page .hero,
.learning-page .board,
.learning-page .side,
.learning-page .panel,
.learning-page .table-panel,
.learning-page .notes,
.learning-page .references,
.learning-page .column,
.learning-page .cursive-input-area,
.learning-page .canvas-area,
.learning-page .score-display {
  background: var(--learning-paper);
  border: 2px solid var(--learning-line);
  box-shadow: var(--learning-shadow);
}

.learning-page .hero {
  border-radius: 28px;
}

.learning-page h1,
.learning-page h2,
.learning-page h3 {
  color: var(--learning-ink);
  text-shadow: none;
}

.learning-page .badge,
.learning-page .eyebrow {
  background: var(--learning-yellow);
  border: 2px dashed rgba(34, 50, 72, 0.2);
  color: var(--learning-ink);
  font-weight: 900;
}

.learning-page .action-btn,
.learning-page .primary,
.learning-page .btn-primary,
.learning-page .toolbar button.primary {
  background: var(--learning-blue);
  border: 0;
  box-shadow: 0 4px 0 #1f5db9;
  color: #fff;
}

.learning-page .secondary,
.learning-page .btn-secondary,
.learning-page .toolbar button,
.learning-page .hero-links a,
.learning-page .hero-links button,
.learning-page .controls-row button,
.learning-page .letter-btn {
  border: 2px solid var(--learning-line);
  background: #fff;
  color: var(--learning-ink);
}

.learning-page button,
.learning-page a {
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.learning-page button:hover:not(:disabled),
.learning-page a:hover {
  transform: translateY(-2px);
}

.learning-page button:focus-visible,
.learning-page a:focus-visible,
.learning-page input:focus-visible,
.learning-page select:focus-visible {
  outline: 4px solid rgba(255, 196, 61, 0.75);
  outline-offset: 3px;
}

.learning-surface {
  background: var(--learning-paper);
  border: 2px solid var(--learning-line);
  border-radius: 24px;
  box-shadow: var(--learning-shadow);
}

.learning-button {
  border-radius: 16px;
  font-weight: 900;
}

@media (max-width: 720px) {
  .learning-page .hero {
    border-radius: 22px;
  }
}