* {
  box-sizing: border-box;
}

:root {
  --page: #F7FAFF;
  --card: #FFFFFF;
  --text: #1C2740;
  --muted: #667085;
  --line: #D9E3F0;
  --primary: #356DFF;
  --primary-dark: #1C2740;
  --primary-pastel: #DDEBFF;
  --primary-tint: #EEF5FF;
  --primary-soft: #DDEBFF;
  --glow: rgba(53,109,255,0.18);
  --glow-strong: rgba(53,109,255,0.28);

  --success: #1E9E6B;
  --success-soft: #E6F7EF;
  --success-border: #BFE8D3;

  --recognition-soft: #fff6df;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --shadow-card: 0 8px 24px rgba(28,39,64,.06);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background: var(--page);
  color: var(--text);
}

button {
  font: inherit;
}

.app-shell {
  width: min(1180px, 94%);
  margin: 32px auto 60px;
}

.lesson-header {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.brand {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: var(--primary);
}

.unit-name {
  margin-top: 9px;
  color: var(--muted);
  font-size: 14px;
}

h1 {
  margin: 5px 0 0;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.05;
}

.lesson-id {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.progress-shell {
  width: 100%;
  height: 8px;
  overflow: hidden;
  background: var(--primary-tint);
  border-radius: 99px;
  margin-bottom: 18px;
}

.progress-bar {
  height: 100%;
  width: 0;
  background: var(--primary);
  border-radius: inherit;
  transition: width .25s ease;
}

.section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 22px;
}

.section-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  transition:
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.section-tab:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 14px var(--glow);
}

.section-tab.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 750;
  box-shadow: 0 4px 14px var(--glow);
}

.tab-number {
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--primary-tint);
  font-size: 11px;
  font-weight: 800;
}

.section-tab.active .tab-number {
  background: var(--primary);
  color: white;
}

.lesson-content {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(25px, 5vw, 52px);
  min-height: 450px;
  box-shadow: var(--shadow-card);
}

.section-intro {
  max-width: 820px;
  margin-bottom: 32px;
}

.eyebrow {
  color: var(--primary);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 1.5px;
}

h2 {
  margin: 7px 0 10px;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.1;
  color: var(--omnia-text-title, var(--text));
}

.section-purpose {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

.vocab-summary {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.vocab-summary span {
  padding: 7px 11px;
  border-radius: 99px;
  background: #f3f5f8;
  font-size: 13px;
  color: var(--muted);
}

.word-grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(205px, 1fr)
    );
  gap: 17px;
}

.word-card {
  position: relative;
  min-height: 280px;
  perspective: 1000px;
  cursor: pointer;
  outline: none;
}

.word-card:focus-visible {
  border-radius: 17px;
  box-shadow:
    0 0 0 4px
    rgba(53, 109, 255, .18);
}

.word-card-inner {
  position: relative;
  width: 100%;
  min-height: 280px;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .45s ease;
}

.word-card.flipped
.word-card-inner {
  transform: rotateY(180deg);
}

.word-card-face {
  position: absolute;
  inset: 0;
  min-height: 280px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card);
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}

.word-card-back {
  transform: rotateY(180deg);
}

/* OMNIA_WB_MEANING_GROUP_COLOR_V1 */

.word-card.has-meaning-group .word-card-face {
  border-left: 5px solid var(--wb-group-color, var(--line));
}

.wb-meaning-badge {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
  background: var(--wb-group-color, var(--muted));
  margin-bottom: 8px;
}

.status-badge {
  align-self: flex-start;
  padding: 5px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.status-badge.active {
  background: var(--success-soft);
}

.status-badge.recognition {
  background: var(--recognition-soft);
}

.visual-placeholder {
  flex: 1;
  min-height: 135px;
  display: grid;
  place-content: center;
  text-align: center;
  margin: 12px 0;
  border-radius: 13px;
  border: 1px dashed var(--line);
  background: var(--card);
  padding: 12px;
}

.visual-icon {
  font-size: 35px;
  color: #a2acbc;
}

.visual-label {
  margin-top: 7px;
  color: #8b95a5;
  font-size: 12px;
}

.word-english {
  font-size: 24px;
  font-weight: 850;
  text-align: center;
}

.word-spanish {
  margin: auto 0 18px;
  text-align: center;
  font-size: 27px;
  font-weight: 850;
}

.example-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.example-chunk {
  margin-top: 5px;
  font-size: 17px;
  line-height: 1.45;
}

.audio-placeholder {
  margin-top: 18px;
  background: #f4f6fa;
  padding: 10px;
  border-radius: 10px;
  font-size: 11px;
  color: var(--muted);
}

.tap-hint {
  text-align: center;
  margin-top: 13px;
  color: #8c96a5;
  font-size: 11px;
}

.learning-flow {
  display: grid;
  gap: 14px;
  margin-top: 40px;
}

.flow-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 15px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 15px;
}

.flow-number {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 850;
}

.flow-card h3 {
  margin: 3px 0 8px;
}

.flow-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.production-card {
  border-color: #becbf4;
  background: #fafbff;
}

.practice-list {
  display: grid;
  gap: 8px;
}

.practice-item {
  padding: 9px 11px;
  border-radius: 9px;
  background: #f5f7fa;
  line-height: 1.45;
  font-size: 14px;
}

.renderer-notice {
  display: flex;
  gap: 17px;
  max-width: 680px;
  padding: 22px;
  border-radius: 15px;
  background: #f7f9fc;
  border: 1px solid var(--line);
}

.renderer-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--success-soft);
  font-weight: 900;
}

.renderer-notice p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.lesson-footer {
  display: grid;
  grid-template-columns:
    1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 17px;
}

.nav-button {
  justify-self: start;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  font-weight: 750;
  cursor: pointer;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

.nav-button:hover:not(:disabled) {
  border-color: var(--primary);
  box-shadow: 0 4px 14px var(--glow);
}

.nav-button.primary {
  justify-self: end;
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 4px 14px var(--glow);
}

.nav-button.primary:hover:not(:disabled) {
  box-shadow: 0 6px 18px var(--glow-strong);
  transform: translateY(-1px);
}

.nav-button:disabled {
  opacity: .35;
  cursor: default;
}

.section-counter {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.error-panel {
  padding: 20px;
  border-radius: 12px;
  background: #fff0f0;
}

.loading {
  color: var(--muted);
}


@media (max-width: 650px) {

  .app-shell {
    width: 94%;
    margin-top: 20px;
  }

  .lesson-header {
    display: block;
  }

  .lesson-id {
    display: inline-block;
    margin-top: 15px;
  }

  .section-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 7px;
  }

  .section-tab {
    flex: 0 0 auto;
  }

  .lesson-content {
    padding: 23px 17px;
  }

  .word-grid {
    grid-template-columns:
      repeat(
        auto-fit,
        minmax(160px, 1fr)
      );
  }

  .flow-card {
    grid-template-columns: 1fr;
  }

}


/* OMNIA LETS READ RENDERER */

.read-step {
  padding: 30px 0;
  border-top: 1px solid var(--line);
}

.read-step:first-of-type {
  border-top: 0;
}

.step-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
}

.step-badge {
  display: grid;
  place-items: center;
  flex: 0 0 39px;
  height: 39px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-weight: 850;
}

.step-kicker {
  color: var(--primary);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 1.2px;
}

.step-heading h3 {
  margin: 2px 0 0;
  font-size: 23px;
}

.activity-instruction {
  max-width: 820px;
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--primary);
  background: var(--primary-tint);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
}

.visual-scaffold-grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(150px, 1fr)
    );
  gap: 12px;
}

.read-visual-placeholder {
  min-height: 115px;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--card);
  color: #8792a3;
  padding: 14px;
  font-size: 13px;
}

.read-visual-icon {
  margin-bottom: 7px;
  font-size: 28px;
  color: #abb4c2;
}

.reading-card {
  max-width: 850px;
  padding: 25px 27px;
  margin: 18px 0 28px;
  border-radius: 16px;
  background: var(--primary-tint);
  border: 1px solid var(--line);
}

.reading-card p {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.8;
}

.language-mark {
  padding: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  transition:
    background .2s ease,
    color .2s ease;
}

.reading-card.show-language
.some-mark {
  padding: 1px 4px;
  background: #fff1af;
}

.reading-card.show-language
.we-need-mark {
  padding: 1px 4px;
  background: #dfe8ff;
  color: #2249b5;
}

.question-stack {
  display: grid;
  gap: 14px;
  max-width: 850px;
}

.reading-question {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 13px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.question-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f0f3f8;
  font-weight: 850;
}

.question-content h4 {
  margin: 4px 0 13px;
  font-size: 16px;
}

.answer-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.answer-option,
.activity-button {
  border: 1px solid var(--line);
  background: white;
  color: var(--text);
  border-radius: 10px;
  padding: 9px 13px;
  cursor: pointer;
  font-weight: 700;
}

.answer-option:hover,
.activity-button:hover {
  border-color: #9baac1;
}

.answer-option.correct {
  border-color: var(--success-border);
  background: var(--success-soft);
}

.answer-option.wrong {
  border-color: #d77a7a;
  background: #fff0f0;
}

.question-feedback,
.activity-feedback {
  min-height: 20px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 750;
}

.question-feedback.success,
.activity-feedback.success {
  color: var(--success);
}

.question-feedback.retry,
.activity-feedback.retry {
  color: #a34c4c;
}

.read-checklist {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(145px, 1fr)
    );
  gap: 9px;
  max-width: 850px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: white;
  padding: 12px;
  cursor: pointer;
  text-align: left;
}

.check-box {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  height: 24px;
  border: 2px solid var(--line);
  border-radius: 7px;
  color: transparent;
}

.checklist-item.selected
.check-box {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.checklist-item.correct {
  border-color: var(--success-border);
  background: var(--success-soft);
}

.checklist-item.wrong {
  border-color: #d77a7a;
  background: #fff2f2;
}

.activity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 17px;
}

.activity-button.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.noticing-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.noticing-targets.hidden {
  display: none;
}

.noticing-chip {
  padding: 8px 11px;
  border-radius: 99px;
  background: #fff4c7;
  font-size: 13px;
  font-weight: 700;
}

.production-step {
  margin-top: 5px;
}

.sentence-frame-grid {
  display: grid;
  gap: 9px;
  max-width: 760px;
}

.sentence-frame {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border-radius: 12px;
  background: #f7f9fd;
  border: 1px solid var(--line);
  font-size: 16px;
}

.frame-number {
  display: grid;
  place-items: center;
  flex: 0 0 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 850;
}

.production-goal {
  display: inline-block;
  margin-top: 17px;
  padding: 10px 13px;
  border-radius: 10px;
  background: #eef8f1;
  font-size: 14px;
}

@media (max-width: 650px) {

  .reading-question {
    grid-template-columns: 1fr;
  }

  .answer-options {
    display: grid;
  }

  .answer-option {
    text-align: left;
  }

  .reading-card {
    padding: 20px 17px;
  }

}


/* OMNIA READ INTERNAL STEPPER */

.read-stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 0 0 10px;
}

.read-step-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  color: var(--muted);
  padding: 9px 10px;
  cursor: pointer;
  text-align: left;
}

.read-step-pill:hover {
  border-color: #aebbd0;
}

.read-step-pill.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}

.read-step-pill-number {
  display: grid;
  place-items: center;
  flex: 0 0 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--primary-tint);
  font-size: 11px;
  font-weight: 850;
}

.read-step-pill.active
.read-step-pill-number {
  background: var(--primary);
  color: white;
}

.read-step-pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.read-mini-progress {
  height: 5px;
  border-radius: 99px;
  background: var(--primary-pastel);
  overflow: hidden;
  margin-bottom: 28px;
}

.read-mini-progress-bar {
  height: 100%;
  width: 20%;
  border-radius: inherit;
  background: var(--primary);
  transition: width .25s ease;
}

.read-step {
  display: none;
  padding: 18px 0 10px;
  border-top: 0;
  animation: readStepIn .22s ease;
}

.read-step.active {
  display: block;
}

@keyframes readStepIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.read-step-panels {
  min-height: 390px;
}

.read-internal-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.read-internal-nav
#read-back {
  justify-self: start;
}

.read-internal-nav
#read-continue {
  justify-self: end;
}

.read-step-counter {
  font-size: 12px;
  font-weight: 750;
  color: var(--muted);
}

.notice-reading-preview {
  max-width: 850px;
  margin: 18px 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--primary-tint);
}

.notice-reading-preview p {
  margin: 0;
  line-height: 1.75;
  font-size: 17px;
}

.notice-reading-preview.show-language
.some-mark {
  padding: 1px 4px;
  background: #fff1af;
}

.notice-reading-preview.show-language
.we-need-mark {
  padding: 1px 4px;
  background: #dfe8ff;
  color: #2249b5;
}

.read-step-complete {
  display: flex;
  gap: 14px;
  max-width: 700px;
  margin-top: 25px;
  padding: 18px;
  border-radius: 14px;
  background: var(--success-soft);
  border: 1px solid var(--success-border);
}

.read-step-complete-icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  height: 36px;
  border-radius: 50%;
  background: #d9f1e1;
  font-weight: 900;
}

.read-step-complete p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 13px;
}

@media (max-width: 760px) {

  .read-stepper {
    display: flex;
    overflow-x: auto;
    padding-bottom: 5px;
  }

  .read-step-pill {
    flex: 0 0 auto;
  }

  .read-step-pill-label {
    max-width: 110px;
  }

  .read-step-panels {
    min-height: 430px;
  }

}


/* OMNIA LETS LISTEN RENDERER */

.listen-meta {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.listen-meta span {
  padding: 7px 11px;
  border-radius: 99px;
  background: #f2f5f9;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.listen-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.listen-step-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: white;
  color: var(--muted);
  padding: 10px;
  border-radius: 12px;
  cursor: pointer;
}

.listen-step-pill.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}

.listen-step-number {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: 50%;
  background: var(--primary-tint);
  font-size: 11px;
  font-weight: 850;
}

.listen-step-pill.active
.listen-step-number {
  background: var(--primary);
  color: white;
}

.listen-mini-progress {
  height: 5px;
  border-radius: 99px;
  background: var(--primary-pastel);
  overflow: hidden;
  margin-bottom: 28px;
}

.listen-mini-progress-bar {
  width: 25%;
  height: 100%;
  background: var(--primary);
  transition: width .25s ease;
}

.listen-panels {
  min-height: 390px;
}

.listen-panel {
  display: none;
  animation: readStepIn .22s ease;
}

.listen-panel.active {
  display: block;
}

.audio-player-placeholder {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 720px;
  padding: 20px;
  margin: 20px 0 26px;
  border: 1px solid #dce3ef;
  border-radius: 16px;
  background: var(--primary-tint);
}

.fake-play-button {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border: 0;
  border-radius: 50%;
  background: var(--primary-pastel);
  color: var(--primary);
  font-size: 18px;
  cursor: pointer;
  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.fake-play-button:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 16px var(--glow-strong);
}

.fake-play-button:active {
  transform: scale(.96);
}

.audio-placeholder-body {
  width: 100%;
}

.fake-audio-track {
  height: 6px;
  margin: 9px 0;
  overflow: hidden;
  border-radius: 99px;
  background: #dfe5ef;
}

.fake-audio-progress {
  width: 0;
  height: 100%;
  background: var(--primary);
}

.audio-placeholder-body small {
  color: var(--muted);
}

.listen-question {
  max-width: 720px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 15px;
}

.listen-question h4 {
  margin: 0 0 14px;
  font-size: 17px;
}

.listen-checklist {
  display: grid;
  gap: 10px;
  max-width: 820px;
}

.listen-detail-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.listen-food {
  font-weight: 850;
  text-transform: capitalize;
}

.listen-status-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.listen-status-button {
  border: 1px solid var(--line);
  background: white;
  border-radius: 9px;
  padding: 8px 11px;
  cursor: pointer;
}

.listen-status-button.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.listen-status-button.correct {
  border-color: var(--success-border);
  background: var(--success-soft);
}

.listen-status-button.wrong {
  border-color: #d77a7a;
  background: #fff0f0;
}

.speaker-key {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 18px;
}

.speaker-chip {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 8px 11px;
  background: #f2f5f9;
  border-radius: 99px;
  font-size: 12px;
}

.speaker-chip span {
  color: var(--muted);
}

.transcript-card {
  max-width: 850px;
  display: grid;
  gap: 9px;
}

.transcript-line {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 12px;
  background: var(--primary-tint);
}

.transcript-speaker {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.transcript-text {
  line-height: 1.55;
}

.visible-mark {
  padding: 1px 4px;
}

.listen-production-card,
.listen-complete-card {
  display: flex;
  gap: 14px;
  max-width: 700px;
  padding: 18px;
  border-radius: 14px;
  margin-top: 18px;
}

.listen-production-card {
  border: 1px solid var(--line);
  background: var(--primary-tint);
}

.listen-complete-card {
  border: 1px solid var(--success-border);
  background: var(--success-soft);
}

.listen-production-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary-soft);
}

.listen-production-card p,
.listen-complete-card p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.listen-internal-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

#listen-back {
  justify-self: start;
}

#listen-continue {
  justify-self: end;
}

@media (max-width: 700px) {

  .listen-stepper {
    display: flex;
    overflow-x: auto;
  }

  .listen-step-pill {
    flex: 0 0 auto;
  }

  .listen-detail-card {
    grid-template-columns: 1fr;
  }

  .transcript-line {
    grid-template-columns: 1fr;
  }

}


/* OMNIA LETS SPEAK RENDERER */

.speak-stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.speak-step-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  color: var(--muted);
  padding: 10px;
  cursor: pointer;
  min-width: 0;
}

.speak-step-pill.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}

.speak-step-number {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: 50%;
  background: var(--primary-tint);
  font-size: 11px;
  font-weight: 850;
}

.speak-step-pill.active
.speak-step-number {
  background: var(--primary);
  color: white;
}

.speak-mini-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--primary-pastel);
  margin-bottom: 28px;
}

.speak-mini-progress-bar {
  width: 20%;
  height: 100%;
  background: var(--primary);
  transition: width .25s ease;
}

.speak-panels {
  min-height: 410px;
}

.speak-panel {
  display: none;
  animation: readStepIn .22s ease;
}

.speak-panel.active {
  display: block;
}

.partner-audio-placeholder {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  padding: 16px;
  border-radius: 14px;
  background: var(--primary-tint);
  border: 1px solid var(--line);
  margin-bottom: 22px;
}

.partner-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 12px;
  font-weight: 900;
}

.partner-audio-info {
  flex: 1;
}

.partner-audio-info p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.partner-play-placeholder {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
}

.model-dialogue {
  display: grid;
  gap: 10px;
  max-width: 800px;
}

.dialogue-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.dialogue-row.learner {
  flex-direction: row-reverse;
}

.dialogue-speaker {
  flex: 0 0 62px;
  font-size: 10px;
  font-weight: 900;
  color: var(--muted);
  text-align: center;
}

.dialogue-bubble {
  max-width: 72%;
  padding: 12px 15px;
  border-radius: 15px;
  background: #f2f5fa;
  line-height: 1.45;
}

.dialogue-row.learner
.dialogue-bubble {
  background: var(--primary-soft);
  color: #2349b5;
}

.speak-practice-block {
  max-width: 850px;
  margin-bottom: 26px;
}

.speak-practice-block h4 {
  margin: 0 0 12px;
  font-size: 16px;
}

.picture-cue-row {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(150px, 1fr)
    );
  gap: 12px;
}

.picture-cue {
  min-height: 88px;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 14px;
  border-radius: var(--radius-md, 16px);
  border: 1px dashed var(--line, #D9E3F0);
  background: var(--card, #FFFFFF);
}

.picture-cue span {
  margin: 0 auto 7px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-tint, #EEF5FF);
  color: var(--primary);
  font-size: 11px;
  font-weight: 850;
}

.picture-cue-visual {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  padding: 12px;
  text-align: center;
  border-style: solid;
  border-color: var(--line, #D9E3F0);
  background: var(--primary-tint, #EEF5FF);
  box-shadow: 0 6px 18px rgba(28, 39, 64, 0.05);
}

.picture-cue-visual span {
  margin: 0 auto;
}

.picture-cue-image {
  width: 100%;
  height: 92px;
  display: block;
  object-fit: contain;
  border-radius: 12px;
}

.picture-cue-pair-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.picture-cue-image-half {
  height: 92px;
}

.picture-cue-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #1C2740);
}

.repeat-chunks,
.speak-frame-list {
  display: grid;
  gap: 9px;
}

.repeat-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
}

.mini-audio-placeholder {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
}

.speak-frame-card {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.speak-frame-text {
  font-size: 17px;
  font-weight: 750;
}

.show-model-answer {
  margin-top: 10px;
  border: 1px solid #cbd4e2;
  background: white;
  border-radius: 9px;
  padding: 7px 10px;
  cursor: pointer;
}

.model-answer {
  min-height: 18px;
  margin-top: 8px;
  color: var(--success);
  font-weight: 750;
}

.preference-card {
  max-width: 600px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--primary-tint);
}

.partner-question-label,
.your-answer-label,
.gap-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--primary);
}

.preference-question,
.partner-question,
.gap-question-text {
  margin: 6px 0 12px;
  font-size: 20px;
  font-weight: 850;
}

.preference-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.preference-option {
  border: 1px solid var(--line);
  background: white;
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
}

.preference-option.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}

.meal-card {
  max-width: 650px;
  padding: 20px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--card);
}

.meal-card-title {
  margin-bottom: 12px;
  font-weight: 900;
  font-size: 18px;
}

.meal-card-items,
.gap-known {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.meal-food-chip {
  padding: 8px 11px;
  border-radius: 99px;
  background: #edf3ff;
  color: #294eae;
  font-weight: 750;
}

.meal-needed {
  margin-top: 13px;
}

.partner-rounds {
  display: grid;
  gap: 12px;
  max-width: 800px;
}

.partner-round {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 13px;
}

.partner-round-number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-weight: 900;
}

.partner-audio-button {
  border: 0;
  border-radius: 8px;
  padding: 7px 9px;
  margin-bottom: 13px;
}

.your-answer-label {
  margin-top: 4px;
}

.answer-frame {
  margin-top: 5px;
  font-size: 16px;
  font-weight: 750;
}

.gap-layout {
  display: grid;
  grid-template-columns: minmax(250px, .8fr) 1.2fr;
  gap: 18px;
  max-width: 900px;
}

.gap-card {
  padding: 20px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: var(--card);
}

.gap-known {
  align-items: center;
}

.gap-hidden-fields {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.gap-hidden-field {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px dashed #cbd4e2;
  border-radius: 10px;
  color: var(--muted);
}

.gap-hidden-field.revealed {
  border-style: solid;
  border-color: var(--success-border);
  background: var(--success-soft);
  color: var(--text);
}

.gap-question-mark {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--primary-tint);
  font-weight: 900;
}

.gap-questions {
  display: grid;
  gap: 12px;
}

.gap-question-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
}

.ask-partner-button {
  border: 0;
  border-radius: 9px;
  padding: 9px 12px;
  background: var(--primary);
  color: white;
  cursor: pointer;
  font-weight: 750;
}

.ask-partner-button:disabled {
  opacity: .65;
}

.partner-reveal {
  margin-top: 14px;
  padding: 12px;
  border-radius: 10px;
  background: #f2f6ff;
}

.partner-answer-text {
  margin-top: 5px;
  font-weight: 750;
}

.gap-complete-message {
  display: inline-block;
  margin-top: 18px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--success-soft);
  color: var(--success);
  font-weight: 800;
}

.final-speaking-frames {
  display: grid;
  gap: 8px;
  max-width: 760px;
  margin-bottom: 22px;
}

.final-speaking-frame {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--primary-tint);
}

.final-speaking-frame span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
}

.recorder-card {
  max-width: 760px;
  padding: 20px;
  border: 1px solid #dce3ef;
  border-radius: 15px;
  background: var(--card);
}

.recorder-status-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.recording-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #bcc5d3;
}

.recording-indicator.recording {
  background: #d84d4d;
  animation: recorderPulse 1s infinite;
}

@keyframes recorderPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.25);
    opacity: .55;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.recorder-privacy {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.recorder-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.learner-recording {
  width: 100%;
  margin-top: 16px;
}

.hidden {
  display: none !important;
}

.self-check-card {
  max-width: 760px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.self-check-card h4 {
  margin: 0 0 12px;
}

.self-check-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 0;
}

.speak-internal-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

#speak-back {
  justify-self: start;
}

#speak-continue {
  justify-self: end;
}

@media (max-width: 760px) {

  .speak-stepper {
    display: flex;
    overflow-x: auto;
  }

  .speak-step-pill {
    flex: 0 0 auto;
  }

  .gap-layout {
    grid-template-columns: 1fr;
  }

  .dialogue-bubble {
    max-width: 82%;
  }

  .partner-round {
    grid-template-columns: 1fr;
  }

}


/* OMNIA SPEAK LISTEN COMPARE MODEL */

.speak-final-stage-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 14px;
}

.speak-final-stage-title h4 {
  margin: 2px 0 0;
  font-size: 18px;
}

.speak-final-stage-number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 13px;
  font-weight: 900;
}

.model-listen-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 760px;
  margin-bottom: 14px;
}

.model-audio-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.model-speaking-frame {
  display: grid;
  grid-template-columns: 30px 1fr auto;
}

.model-sentence-body {
  display: grid;
  gap: 4px;
}

.model-sentence-body small {
  color: var(--muted);
  font-weight: 500;
}

.sentence-audio-button {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  padding: 8px 11px;
  cursor: pointer;
}

.sentence-audio-button:disabled {
  cursor: default;
  opacity: .55;
}

.record-stage-title {
  margin-top: 30px;
}

.voice-compare {
  max-width: 760px;
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--primary-tint);
}

.voice-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.voice-compare-card {
  display: grid;
  gap: 11px;
  align-content: start;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
}

.voice-compare-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary-soft);
}

.voice-compare-card small {
  color: var(--muted);
  line-height: 1.4;
}

.learner-compare-recording {
  width: 100%;
}

.self-check-title {
  margin-top: 0;
}

@media (max-width: 700px) {

  .voice-compare-grid {
    grid-template-columns: 1fr;
  }

  .model-speaking-frame {
    grid-template-columns: 30px 1fr;
  }

  .sentence-audio-button {
    grid-column: 2;
    justify-self: start;
  }

}


/* OMNIA LETS WRITE RENDERER */

.write-stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.write-step-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  color: var(--muted);
  cursor: pointer;
}

.write-step-pill.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}

.write-step-number {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: 50%;
  background: var(--primary-tint);
  font-size: 11px;
  font-weight: 850;
}

.write-step-pill.active
.write-step-number {
  background: var(--primary);
  color: white;
}

.write-mini-progress {
  height: 5px;
  overflow: hidden;
  margin-bottom: 28px;
  border-radius: 99px;
  background: var(--primary-pastel);
}

.write-mini-progress-bar {
  width: 20%;
  height: 100%;
  background: var(--primary);
  transition: width .25s ease;
}

.write-panels {
  min-height: 410px;
}

.write-panel {
  display: none;
  animation: readStepIn .22s ease;
}

.write-panel.active {
  display: block;
}

.write-model-card {
  max-width: 540px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: white;
}

.write-model-heading {
  padding: 15px 18px;
  background: #f1f5ff;
  color: #294eae;
  font-size: 20px;
  font-weight: 900;
}

.write-model-lines {
  display: grid;
}

.write-model-line {
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  font-size: 17px;
}

.write-some-mark {
  padding: 1px 4px;
  border-radius: 4px;
  background: #fff0a6;
}

.write-notice-layout {
  display: grid;
  grid-template-columns: minmax(280px, 540px) 220px;
  gap: 20px;
  align-items: start;
}

.notice-control-list {
  display: grid;
  gap: 9px;
}

.notice-control {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  padding: 11px 13px;
  cursor: pointer;
  text-align: left;
}

.notice-control.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}

.notice-heading-active {
  box-shadow: inset 4px 0 0 var(--primary);
}

.notice-food-active {
  background: var(--primary-tint);
  font-weight: 750;
}

.write-practice-block {
  max-width: 880px;
  margin-bottom: 28px;
}

.write-practice-block h4 {
  margin: 0 0 10px;
}

.write-helper-text {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
}

.write-picture-grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(150px, 1fr)
    );
  gap: 14px;
}

.write-picture-card {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: start;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--line, #D9E3F0);
  border-radius: 18px;
  background: var(--card, #FFFFFF);
  overflow: hidden;
  box-shadow:
    0 8px 22px
    rgba(28, 39, 64, 0.06);
}

.write-food-image {
  width: 100%;
  height: 126px;
  display: block;
  object-fit: contain;
  border-radius: 13px;
}

.write-picture-placeholder {
  width: 100%;
  height: 126px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--omnia-blue-soft-2, #EEF5FF);
  color: var(--primary, #356DFF);
  font-size: 30px;
  font-weight: 800;
}

.reveal-food-word {
  border: 1px solid
    var(--omnia-line-strong, #C7D6EA);
  border-radius: 10px;
  background:
    var(--omnia-blue-soft-2, #EEF5FF);
  color:
    var(--omnia-blue-dark, #1C2740);
  padding: 8px 13px;
  font-weight: 750;
  cursor: pointer;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}

.reveal-food-word:hover {
  transform: translateY(-1px);
  border-color:
    var(--primary, #356DFF);
  box-shadow:
    0 6px 16px
    rgba(53, 109, 255, 0.14);
}

.revealed-food-word {
  min-height: 20px;
  font-weight: 850;
  color:
    var(--omnia-blue-dark, #1C2740);
}

.write-meal-choices,
.line-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.write-meal-choice,
.line-option {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  padding: 9px 12px;
  cursor: pointer;
}

.write-meal-choice.selected,
.line-option.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}

.line-completion-list {
  display: grid;
  gap: 10px;
  max-width: 650px;
}

.line-completion-card {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.line-frame {
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: 800;
}

.completed-line {
  min-height: 22px;
  margin-top: 10px;
  color: var(--success);
  font-weight: 800;
}

.supported-write-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 20px;
  max-width: 900px;
}

.write-support-bank,
.supported-list-builder,
.final-write-card,
.write-live-check,
.read-aloud-reminder {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

.write-support-bank h4,
.write-live-check h4 {
  margin: 0 0 12px;
}

.write-chip-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.write-support-chip {
  border: 1px solid var(--line);
  border-radius: 99px;
  background: white;
  padding: 8px 11px;
  cursor: pointer;
}

.write-support-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.write-field-label {
  display: block;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.write-select {
  width: 100%;
  max-width: 360px;
  margin-bottom: 18px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  font: inherit;
}

.supported-list-lines {
  display: grid;
  gap: 8px;
  min-height: 120px;
}

.empty-writing-list {
  display: grid;
  place-items: center;
  min-height: 110px;
  padding: 15px;
  border: 1px dashed #cbd5e3;
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
}

.supported-written-line {
  display: grid;
  grid-template-columns: 28px 1fr 30px;
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
}

.supported-written-line > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
}

.supported-written-line button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  color: var(--muted);
}

.supported-builder-actions,
.final-write-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.final-write-layout {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 20px;
  max-width: 960px;
}

.final-line-inputs {
  display: grid;
  gap: 9px;
}

.final-line-row {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 9px;
  align-items: center;
}

.final-line-row > span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
}

.final-food-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font: inherit;
}

.final-food-input:focus {
  outline: 2px solid var(--primary-pastel);
  border-color: var(--primary);
}

.final-write-side {
  display: grid;
  gap: 14px;
  align-content: start;
}

.live-check-item {
  padding: 7px 0;
  color: var(--muted);
}

.live-check-item.passed {
  color: var(--success);
  font-weight: 800;
}

.write-self-check {
  margin-top: 0;
}

.read-aloud-reminder {
  display: flex;
  gap: 12px;
}

.read-aloud-icon {
  font-size: 25px;
}

.read-aloud-reminder p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.4;
  font-size: 13px;
}

.write-internal-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

#write-back {
  justify-self: start;
}

#write-continue {
  justify-self: end;
}

@media (max-width: 760px) {

  .write-stepper {
    display: flex;
    overflow-x: auto;
  }

  .write-step-pill {
    flex: 0 0 auto;
  }

  .write-notice-layout,
  .supported-write-layout,
  .final-write-layout {
    grid-template-columns: 1fr;
  }

}


/* OMNIA LETS BIBLE IT RENDERER */

.bible-reference {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 12px;
  border-radius: 99px;
  background: #f2f5f9;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.bible-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.bible-step-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  color: var(--muted);
  cursor: pointer;
}

.bible-step-pill.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}

.bible-step-number {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: 50%;
  background: var(--primary-tint);
  font-size: 11px;
  font-weight: 850;
}

.bible-step-pill.active
.bible-step-number {
  background: var(--primary);
  color: white;
}

.bible-mini-progress {
  height: 5px;
  overflow: hidden;
  margin-bottom: 28px;
  border-radius: 99px;
  background: var(--primary-pastel);
}

.bible-mini-progress-bar {
  width: 25%;
  height: 100%;
  background: var(--primary);
  transition: width .25s ease;
}

.bible-panels {
  min-height: 430px;
}

.bible-panel {
  display: none;
  animation: readStepIn .22s ease;
}

.bible-panel.active {
  display: block;
}

.bible-story-audio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.bible-story-audio span {
  color: var(--muted);
  font-size: 12px;
}

.bible-audio-button,
.bible-chunk-audio {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  padding: 9px 12px;
}

.bible-scene-shell {
  max-width: 850px;
}

.bible-scene {
  display: none;
  grid-template-columns: 1.05fr .95fr;
  min-height: 280px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
}

.bible-scene.active {
  display: grid;
}

.bible-scene-image {
  min-height: 280px;
  background: #f5f7fb;
}

.bible-scene-image img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: contain;
}

.bible-image-placeholder {
  height: 100%;
  min-height: 280px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--muted);
}

.bible-image-symbol {
  font-size: 40px;
  color: #aeb8c8;
}

.bible-image-placeholder small {
  font-size: 11px;
}

.bible-scene-content {
  display: grid;
  align-content: center;
  padding: 28px;
}

.bible-scene-label {
  margin-bottom: 8px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}

.bible-scene-content p {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  font-weight: 700;
}

.bible-scene-navigation {
  max-width: 850px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

#bible-scene-back {
  justify-self: start;
}

#bible-scene-next {
  justify-self: end;
}

#bible-scene-counter {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.bible-full-story {
  max-width: 850px;
  margin-top: 25px;
  padding: 21px 23px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--primary-tint);
}

.bible-full-story p {
  margin: 8px 0 0;
  line-height: 1.75;
  font-size: 16px;
}

.bible-question-list {
  display: grid;
  gap: 12px;
  max-width: 850px;
}

.bible-question {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
}

.bible-question h4 {
  margin: 2px 0 13px;
}

.bible-comprehension-result {
  display: inline-block;
  margin-top: 18px;
  padding: 11px 14px;
  border-radius: 10px;
  font-weight: 800;
}

.bible-comprehension-result.success {
  background: var(--success-soft);
  color: var(--success);
}

.bible-comprehension-result.retry {
  background: #fff6e8;
  color: #8a6327;
}

.bible-value-bridge {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  max-width: 850px;
}

.bible-chunk-card {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

.bible-chunk-number {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 900;
}

.bible-chunk-body {
  display: grid;
  gap: 10px;
}

.bible-chunk-body strong {
  font-size: 17px;
}

.bible-say-aloud-card {
  display: flex;
  gap: 13px;
  max-width: 600px;
  margin-top: 18px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--primary-tint);
}

.bible-say-icon {
  font-size: 24px;
}

.bible-say-aloud-card p {
  margin: 4px 0 0;
  color: var(--muted);
}

.bible-values-summary {
  display: inline-grid;
  gap: 3px;
  margin-top: 18px;
  padding: 12px 15px;
  border-radius: 12px;
  background: #fff8e8;
}

.bible-values-summary span {
  color: #8a6b2d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
}

.bible-reflection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 920px;
  margin-bottom: 18px;
}

.bible-reflection-card {
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--card);
}

.bible-reflection-icon {
  margin-bottom: 10px;
  font-size: 27px;
}

.bible-reflection-card h4 {
  margin: 5px 0 8px;
}

.bible-reflection-card p {
  min-height: 48px;
  color: var(--muted);
  line-height: 1.5;
}

.bible-sentence-builder {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.bible-sentence-builder span {
  font-weight: 800;
}

.bible-sentence-builder input {
  flex: 1;
  min-width: 140px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}

.bible-response-preview {
  min-height: 25px;
  margin-top: 11px;
  color: var(--success);
  font-weight: 800;
}

.bible-internal-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

#bible-back {
  justify-self: start;
}

#bible-continue {
  justify-self: end;
}

@media (max-width: 760px) {

  .bible-stepper {
    display: flex;
    overflow-x: auto;
  }

  .bible-step-pill {
    flex: 0 0 auto;
  }

  .bible-scene.active,
  .bible-value-bridge,
  .bible-reflection-grid {
    grid-template-columns: 1fr;
  }

  .bible-scene-navigation {
    grid-template-columns: 1fr 1fr;
  }

  #bible-scene-counter {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
  }

}


/* OMNIA READ BIBLE DEPTH V2 STYLES */

.depth-v2-shell {
  width: min(1100px, 100%);
  margin: 0 auto;
}

.depth-v2-header {
  padding: 22px 24px;
  border-radius: 22px;
  margin-bottom: 18px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.96),
    rgba(245,248,255,.96)
  );
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 12px 34px rgba(15,23,42,.08);
}

.depth-v2-header h1 {
  margin: 4px 0 6px;
}

.depth-v2-header p {
  margin: 0;
  opacity: .78;
}

.depth-v2-kicker {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .65;
}

.depth-v2-stepper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.depth-v2-step-button {
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.88);
  border-radius: 14px;
  padding: 10px 8px;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

.depth-v2-step-button span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  margin-right: 4px;
  background: rgba(15,23,42,.08);
}

.depth-v2-step-button.active {
  outline: 2px solid rgba(53,109,255,.45);
  transform: translateY(-1px);
}

.depth-v2-step-button.completed {
  opacity: .76;
}

.depth-v2-panel {
  display: none;
  padding: 24px;
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 14px 38px rgba(15,23,42,.08);
}

.depth-v2-panel.active {
  display: block;
}

.depth-v2-eyebrow {
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  opacity: .62;
  margin-bottom: 6px;
}

.depth-v2-reading-layout {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 18px;
  margin-top: 18px;
}

.depth-v2-reading-card,
.depth-v2-visual-card {
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.09);
  background: rgba(248,250,252,.92);
}

.depth-v2-reading-text {
  font-size: 1.08rem;
  line-height: 1.75;
  margin: 0;
}

.depth-v2-visual-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 210px;
}

.depth-v2-visual-card p {
  line-height: 1.5;
}

.depth-v2-visual-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.depth-v2-pending {
  display: inline-block;
  font-size: .76rem;
  opacity: .58;
  margin-top: 10px;
}

.depth-v2-reading-tip,
.depth-v2-language-focus,
.depth-v2-value-focus {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(53,109,255,.07);
  line-height: 1.5;
}

.depth-v2-bible-reference {
  display: inline-block;
  margin-top: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(245,158,11,.10);
  font-weight: 700;
}

.depth-v2-intro {
  line-height: 1.55;
  opacity: .82;
}

.depth-v2-question-list {
  display: grid;
  gap: 14px;
  margin: 20px 0;
}

.depth-v2-question {
  position: relative;
  padding: 18px 18px 18px 54px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  transition: .18s ease;
}

.depth-v2-question.correct {
  border-color: rgba(30,158,107,.5);
  background: rgba(30,158,107,.06);
}

.depth-v2-question.incorrect {
  border-color: rgba(239,68,68,.42);
  background: rgba(239,68,68,.05);
}

.depth-v2-question-number {
  position: absolute;
  left: 16px;
  top: 17px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  font-weight: 800;
}

.depth-v2-question-prompt {
  font-weight: 700;
  margin: 0 0 12px;
}

.depth-v2-options {
  display: grid;
  gap: 8px;
}

.depth-v2-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(248,250,252,.9);
  cursor: pointer;
}

.depth-v2-action,
.depth-v2-secondary {
  border: 0;
  border-radius: 12px;
  padding: 11px 18px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.depth-v2-action {
  background: var(--primary);
  color: white;
}

.depth-v2-secondary {
  background: rgba(15,23,42,.08);
  color: inherit;
}

.depth-v2-action:disabled,
.depth-v2-secondary:disabled {
  opacity: .4;
  cursor: default;
}

.depth-v2-feedback {
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 12px;
  font-weight: 650;
}

.depth-v2-feedback.success {
  background: rgba(30,158,107,.10);
}

.depth-v2-feedback.retry {
  background: rgba(245,158,11,.11);
}

.depth-v2-feedback.wrong {
  background: rgba(214,69,69,.14);
  color: #a12626;
}

.depth-v2-feedback.hidden {
  display: none;
}

.depth-v2-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
}

.depth-v2-chip {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(53,109,255,.09);
  font-weight: 750;
}

.depth-v2-production-list {
  display: grid;
  gap: 12px;
  margin: 20px 0;
}

.depth-v2-production-item {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(15,23,42,.09);
  border-radius: 14px;
}

.depth-v2-production-item small {
  opacity: .68;
}

.depth-v2-production-item input,
.depth-v2-reflection-card input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(15,23,42,.15);
  border-radius: 11px;
  padding: 11px 12px;
  font: inherit;
}

.depth-v2-bridge-grid,
.depth-v2-reflection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  margin: 20px 0;
}

.depth-v2-bridge-card,
.depth-v2-reflection-card {
  padding: 20px;
  border: 1px solid rgba(15,23,42,.09);
  border-radius: 18px;
  background: rgba(248,250,252,.86);
}

.depth-v2-bridge-card p {
  font-size: 1.1rem;
  font-weight: 750;
}

.depth-v2-bridge-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(53,109,255,.11);
  font-weight: 800;
}

.depth-v2-audio-placeholder {
  border: 1px dashed rgba(15,23,42,.18);
  background: transparent;
  border-radius: 10px;
  padding: 9px 11px;
  opacity: .62;
}

.depth-v2-reflection-icon {
  font-size: 2rem;
}

.depth-v2-reflection-card label {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  font-weight: 650;
}

.depth-v2-sentence-preview {
  min-height: 24px;
  margin-top: 10px;
  font-style: italic;
  opacity: .82;
}

.depth-v2-value-focus {
  display: flex;
  gap: 10px;
  align-items: center;
}

.depth-v2-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.depth-v2-controls > :last-child {
  justify-self: end;
}

.depth-v2-progress-text {
  font-size: .84rem;
  font-weight: 700;
  opacity: .66;
  text-align: center;
}

.depth-v2-local-note {
  font-size: .76rem;
  opacity: .56;
  margin-top: 14px;
}

@media (max-width: 850px) {
  .depth-v2-stepper {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .depth-v2-reading-layout,
  .depth-v2-bridge-grid,
  .depth-v2-reflection-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .depth-v2-panel,
  .depth-v2-header {
    padding: 17px;
  }

  .depth-v2-stepper {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .depth-v2-step-button {
    font-size: .72rem;
  }

  .depth-v2-controls {
    grid-template-columns: 1fr 1fr;
  }

  .depth-v2-progress-text {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}


/* OMNIA LETS PLAY GAME STYLES */

.omnia-play-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  position: relative;
}

.omnia-play-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  border-radius: 22px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.97),
    rgba(241,248,255,.97)
  );
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 12px 34px rgba(15,23,42,.08);
  margin-bottom: 18px;
}

.omnia-play-header h1 {
  margin: 4px 0 6px;
}

.omnia-play-header p {
  margin: 0;
  opacity: .76;
}

.omnia-play-kicker {
  font-size: .77rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .62;
}

.omnia-play-badge {
  white-space: nowrap;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(37,99,235,.10);
  font-weight: 800;
}

.omnia-play-screen {
  display: none;
}

.omnia-play-screen.active {
  display: block;
}

.omnia-play-intro-card,
.omnia-play-results-card {
  padding: 28px;
  border-radius: 24px;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 16px 40px rgba(15,23,42,.09);
  text-align: center;
}

.omnia-play-hero-icon,
.omnia-play-results-icon {
  font-size: 4rem;
}

.omnia-play-intro-card h2,
.omnia-play-results-card h2 {
  margin: 8px 0;
}


/* ==========================================================
   OMNIA_MISSION_CHOICE_ENGINE_V1
   Shared "mission_choice" Let's Play family styling.
   Content-agnostic: no lesson-specific colors or copy here.
   ========================================================== */

.mc-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mc-mission-count {
  display: inline-block;
  margin: 14px 0 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(37,99,235,.10);
  font-weight: 700;
  font-size: .85rem;
}

.mc-primary {
  margin-top: 18px;
  padding: 13px 26px;
  font-size: 1rem;
  font-weight: 800;
  border-radius: 14px;
}

.mc-budget-chip {
  display: inline-block;
  margin: 14px 0 4px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(234,179,8,.14);
  border: 1px solid rgba(202,138,4,.28);
  color: #92660a;
  font-weight: 800;
  font-size: .85rem;
}

.mc-goal-list {
  margin-top: 16px;
  text-align: left;
}

.mc-goal-list > small {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  opacity: .6;
  margin-bottom: 8px;
}

.mc-goal-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mc-goal-chip {
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(15,23,42,.05);
  border: 1px solid rgba(15,23,42,.10);
  font-weight: 650;
  font-size: .85rem;
}

.mc-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}

.mc-hud-stat {
  flex: 1;
  min-width: 90px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
  text-align: center;
}

.mc-hud-stat small {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  opacity: .55;
  margin-bottom: 4px;
}

.mc-hud-stat strong {
  font-size: 1.15rem;
}

.mc-scene {
  margin-bottom: 18px;
}

/* OMNIA_MC_SCENE_IMAGE_V1: optional picture that guides the learner's choice */
.mc-scene-image {
  margin: 0 0 14px;
}

.mc-scene-image img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
}

.mc-situation {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.55;
  opacity: .82;
}

.mc-npc-bubble {
  position: relative;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 26px rgba(15,23,42,.07);
}

.mc-npc-bubble p {
  margin: 4px 0 0;
  font-size: 1.05rem;
  font-weight: 650;
}

.mc-npc-label {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(53,109,255,.12);
  color: #2450d6;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mc-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.mc-badge {
  display: inline-block;
  margin: 18px 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(24,134,75,.12);
  border: 1px solid rgba(24,134,75,.28);
  color: #146e3e;
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .03em;
}

@media (max-width: 640px) {
  .mc-hud {
    gap: 8px;
  }

  .mc-hud-stat {
    min-width: 76px;
    padding: 10px;
  }
}

/* OMNIA_BUILD_ORDER_V1 */

.bo-order-tray {
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(15,23,42,.04);
  border: 1px dashed rgba(15,23,42,.18);
}

.bo-order-tray > small {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  opacity: .6;
  margin-bottom: 8px;
}

.bo-tray-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 32px;
  align-items: center;
}

.bo-tray-chip {
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(53,109,255,.12);
  border: 1px solid rgba(53,109,255,.25);
  color: #2450d6;
  font-weight: 650;
  font-size: .85rem;
}

.bo-tray-empty {
  font-size: .85rem;
  opacity: .5;
  font-style: italic;
}

.bo-item-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}

.bo-item {
  flex: 0 1 auto;
}

.omnia-play-shell .bo-item.selected {
  /* !important + the extra .omnia-play-shell prefix are both required:
     a later generic rule (":is(...,.omnia-play-shell button:not(.primary))
     { background/border-color/color !important }") forces every
     non-primary button inside a game shell to a plain white/shell-accent
     look. A plain "!important" here still LOSES to that rule -- its
     selector (.omnia-play-shell + button + :not(.primary)) computes to
     the same specificity as ".bo-item.selected" once you count the
     :not() argument and the element type, and ties go to whichever rule
     is later in the file (the generic one). Prefixing this selector with
     .omnia-play-shell adds a third class-level selector, which strictly
     outweighs the generic rule's specificity regardless of source order. */
  background: rgba(24,134,75,.12) !important;
  border-color: rgba(24,134,75,.35) !important;
  color: #146e3e !important;
}

.bo-item:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* OMNIA_MEMORY_MATCH_V1 */

.mm-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.mm-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  min-height: 84px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.1);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(15,23,42,.14);
  transition: transform .15s ease;
}

.omnia-play-shell .mm-tile.mm-tile {
  /* !important + the doubled .mm-tile class (a deliberate specificity
     bump, not a typo): see the note on .bo-item.selected above. A single
     ".omnia-play-shell .mm-tile" ties the offending rule's specificity
     exactly (2 classes + 1 element each) and LOSES on source order since
     this rule sits earlier in the file -- repeating the class adds a
     third class-level point, which wins outright regardless of position.
     Without this, every face-down memory-match tile silently lost its
     dark "mystery card" gradient and showed a plain white button instead
     -- functionally still clickable, but not the intended card-back
     look, and not as obviously wrong at a glance as a missing
     "selected"/"matched" color would be. */
  background: linear-gradient(160deg, #35405c, #222a40) !important;
}

.mm-tile:hover:not(:disabled) {
  transform: translateY(-2px);
}

.mm-tile:disabled {
  cursor: default;
}

.mm-tile-face {
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  font-size: .82rem;
}

.mm-tile-back {
  color: rgba(255,255,255,.85);
  font-size: 1.4rem;
}

.mm-tile-front {
  display: none;
  color: #101828;
  width: 100%;
  height: 100%;
}

.mm-tile-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}

.omnia-play-shell .mm-tile.revealed {
  /* !important + .omnia-play-shell prefix: see the specificity note on
     .bo-item.selected above -- the same generic shell-button rule
     otherwise wins over these background/border-color declarations. */
  background: rgba(255,255,255,.97) !important;
  border-color: rgba(53,109,255,.3) !important;
}

.mm-tile.revealed .mm-tile-back {
  display: none;
}

.mm-tile.revealed .mm-tile-front {
  display: block;
}

.omnia-play-shell .mm-tile.matched {
  background: rgba(24,134,75,.12) !important;
  border-color: rgba(24,134,75,.35) !important;
  opacity: .85;
}

.mm-tile.matched .mm-tile-front {
  color: #146e3e !important;
}

@media (max-width: 480px) {
  .mm-board {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  }

  .mm-tile {
    min-height: 68px;
  }
}

.omnia-play-intro-text {
  max-width: 820px;
  margin: 0 auto 22px;
  line-height: 1.6;
}

.omnia-play-rule-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin: 22px 0 28px;
}

.omnia-play-rule {
  display: grid;
  gap: 4px;
  padding: 15px;
  border-radius: 16px;
  background: rgba(248,250,252,.95);
  border: 1px solid rgba(15,23,42,.08);
}

.omnia-play-rule strong {
  font-size: 1.25rem;
}

.omnia-play-rule span {
  font-size: .8rem;
  opacity: .65;
}

.omnia-play-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  max-width: 760px;
  margin: 15px auto 22px;
}

.omnia-play-mode {
  display: grid;
  gap: 5px;
  padding: 18px;
  border-radius: 18px;
  border: 2px solid rgba(15,23,42,.10);
  background: white;
  font: inherit;
  cursor: pointer;
}

.omnia-play-mode.selected {
  border-color: #2563eb;
  background: rgba(37,99,235,.06);
}

.omnia-play-mode-icon {
  font-size: 2rem;
}

.omnia-play-mode small {
  opacity: .64;
}

.omnia-play-primary {
  border: 0;
  border-radius: 13px;
  padding: 12px 19px;
  background: #2563eb;
  color: white;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.omnia-play-start {
  min-width: 180px;
}

.omnia-play-hud {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 9px;
  margin-bottom: 12px;
}

.omnia-play-stat {
  display: grid;
  gap: 2px;
  text-align: center;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.08);
}

.omnia-play-stat span {
  font-size: .72rem;
  text-transform: uppercase;
  opacity: .57;
  font-weight: 800;
}

.omnia-play-stat strong {
  font-size: 1.05rem;
}

.omnia-play-level-card {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 17px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.08);
  margin-bottom: 10px;
}

.omnia-play-level-card h2 {
  margin: 3px 0 4px;
  font-size: 1.15rem;
}

.omnia-play-level-card p {
  margin: 0;
  font-size: .87rem;
  opacity: .72;
}

.omnia-play-level-label {
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .08em;
  opacity: .55;
}

.omnia-play-multiplier {
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  font-weight: 850;
  opacity: .4;
  white-space: nowrap;
}

.omnia-play-multiplier.active {
  opacity: 1;
  background: rgba(34,197,94,.14);
  transform: scale(1.04);
}

.omnia-play-prompt {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 15px;
  background: rgba(245,158,11,.09);
  border: 1px solid rgba(245,158,11,.18);
  border-radius: 15px;
  margin-bottom: 10px;
}

.omnia-play-prompt-icon {
  font-size: 1.5rem;
}

.omnia-play-prompt div {
  flex: 1;
  display: grid;
}

.omnia-play-prompt small {
  opacity: .55;
  font-size: .7rem;
}

.omnia-play-audio {
  border: 1px solid rgba(15,23,42,.12);
  background: white;
  border-radius: 10px;
  padding: 8px 10px;
}

.omnia-play-audio:disabled {
  opacity: .35;
}

.omnia-play-basket-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.omnia-play-basket-selector button {
  border: 1px solid rgba(15,23,42,.13);
  background: white;
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.omnia-play-basket-selector button.active {
  background: #2563eb;
  color: white;
  border-color: #2563eb;
}

.omnia-play-field {
  position: relative;
  height: 390px;
  overflow: hidden;
  border-radius: 22px;
  border: 2px solid rgba(15,23,42,.10);
  background:
    linear-gradient(
      180deg,
      rgba(219,234,254,.82) 0%,
      rgba(254,249,195,.78) 62%,
      rgba(187,247,208,.76) 100%
    );
  outline: none;
  user-select: none;
  touch-action: manipulation;
}

.omnia-play-field:focus {
  border-color: rgba(37,99,235,.45);
}

.omnia-play-kitchen-decoration {
  position: absolute;
  inset: 18px 20px auto;
  display: flex;
  justify-content: space-between;
  opacity: .18;
  font-size: 2.6rem;
}

.omnia-play-falling-layer {
  position: absolute;
  inset: 0;
}

.omnia-play-falling-item {
  position: absolute;
  width: 72px;
  min-height: 72px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 6px;
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 20px rgba(15,23,42,.15);
  z-index: 4;
}

.omnia-play-item-emoji {
  font-size: 2.35rem;
}

.omnia-play-falling-item strong {
  font-size: .75rem;
}

.omnia-play-catcher {
  position: absolute;
  left: 40%;
  bottom: 12px;
  width: 20%;
  min-width: 90px;
  max-width: 150px;
  transform: translateX(0);
  text-align: center;
  transition: left .09s linear;
  z-index: 5;
}

.omnia-play-basket-art {
  position: relative;
  height: 64px;
  font-size: 4.2rem;
  line-height: .95;
  overflow: visible;
}

.omnia-play-catcher-character {
  position: absolute;
  left: 50%;
  bottom: -22px;
  width: 165px;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(
    0 7px 8px rgba(15,23,42,.18)
  );
}

.omnia-play-catcher-label {
  display: inline-block;
  margin-top: 3px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  font-size: .72rem;
  font-weight: 850;
  box-shadow: 0 4px 12px rgba(15,23,42,.10);
}

.omnia-play-move-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 10px;
}

.omnia-play-move-controls button {
  width: 50px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: #2563eb;
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
}

.omnia-play-move-controls span {
  display: grid;
  text-align: center;
  font-size: .8rem;
  font-weight: 750;
}

.omnia-play-move-controls small {
  opacity: .55;
}

.omnia-play-tap-area {
  padding: 26px;
  text-align: center;
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.09);
}

.omnia-play-tap-item {
  display: inline-grid;
  gap: 5px;
  padding: 20px 36px;
  border-radius: 20px;
  background: rgba(248,250,252,.98);
}

.omnia-play-tap-emoji {
  font-size: 4rem;
}

.omnia-play-tap-item strong {
  font-size: 1.1rem;
}

.omnia-play-tap-baskets {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 16px 0;
}

.omnia-play-tap-baskets button,
.omnia-play-avoid {
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 12px;
  padding: 10px 14px;
  background: white;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.omnia-play-avoid {
  background: rgba(239,68,68,.06);
}

.omnia-play-status-row {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 11px;
}

.omnia-play-status-row div {
  display: grid;
  text-align: center;
}

.omnia-play-status-row small {
  opacity: .55;
}

.omnia-play-feedback {
  margin-top: 11px;
  padding: 11px 14px;
  border-radius: 13px;
  background: rgba(59,130,246,.07);
  text-align: center;
  font-weight: 700;
}

.omnia-play-feedback.success {
  background: rgba(34,197,94,.11);
}

.omnia-play-feedback.error {
  background: rgba(239,68,68,.10);
}

.omnia-play-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15,23,42,.62);
  backdrop-filter: blur(5px);
}

.omnia-play-modal.hidden,
.omnia-play-tap-area.hidden,
.omnia-play-catch-area.hidden,
.omnia-play-language-box.hidden {
  display: none !important;
}

.omnia-play-modal-card {
  width: min(470px, 100%);
  padding: 28px;
  border-radius: 24px;
  background: white;
  text-align: center;
  box-shadow: 0 24px 70px rgba(15,23,42,.25);
}

.omnia-play-modal-icon {
  font-size: 3.6rem;
}

.omnia-play-modal-card h2 {
  margin: 8px 0;
}

.omnia-play-language-box {
  display: grid;
  gap: 5px;
  margin: 18px 0;
  padding: 15px;
  border-radius: 15px;
  background: rgba(37,99,235,.07);
}

.omnia-play-language-box small {
  opacity: .6;
}

.omnia-play-language-box strong {
  font-size: 1.08rem;
}

.omnia-play-results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin: 22px 0;
}

.omnia-play-results-grid div {
  display: grid;
  gap: 4px;
  padding: 15px;
  border-radius: 15px;
  background: rgba(248,250,252,.95);
}

.omnia-play-results-grid span {
  font-size: .75rem;
  opacity: .58;
}

.omnia-play-results-grid strong {
  font-size: 1.35rem;
}

.omnia-play-reward {
  display: inline-block;
  margin-bottom: 20px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(245,158,11,.14);
  font-weight: 850;
}

.omnia-play-reward.locked {
  opacity: .5;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 780px) {
  .omnia-play-rule-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .omnia-play-hud {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .omnia-play-level-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 540px) {
  .omnia-play-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .omnia-play-mode-grid {
    grid-template-columns: 1fr;
  }

  .omnia-play-hud {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .omnia-play-field {
    height: 350px;
  }

  .omnia-play-results-grid {
    grid-template-columns: 1fr;
  }
}


/* OMNIA SEMANTIC PLAY V2 STYLES */

.omnia-play-level-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  max-width: 850px;
  margin: 20px auto;
}

.omnia-play-level-preview > div {
  display: grid;
  gap: 4px;
  padding: 16px;
  border-radius: 17px;
  background: rgba(37,99,235,.055);
  border: 1px solid rgba(37,99,235,.10);
}

.omnia-play-level-preview span {
  display: grid;
  place-items: center;
  margin: 0 auto 4px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #2563eb;
  color: white;
  font-weight: 800;
}

.omnia-play-level-preview small {
  opacity: .62;
}

.omnia-play-category-selector {
  padding: 14px;
  margin: 10px 0;
  border-radius: 17px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.08);
}

.omnia-play-category-selector.hidden {
  display: none;
}

.semantic-category-help {
  margin-bottom: 10px;
  font-size: .8rem;
  font-weight: 800;
  opacity: .66;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.semantic-category-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.semantic-category-buttons button {
  flex: 1 1 130px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 52px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 13px;
  background: white;
  font: inherit;
  cursor: pointer;
}

.semantic-category-buttons button:hover {
  transform: translateY(-1px);
  border-color: rgba(37,99,235,.38);
  background: rgba(37,99,235,.04);
}

.semantic-category-buttons button span {
  font-size: 1.4rem;
}

.omnia-play-tap-baskets button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.omnia-play-tap-baskets button span {
  font-size: 1.35rem;
}

@media (max-width: 650px) {
  .omnia-play-level-preview {
    grid-template-columns: 1fr;
  }

  .semantic-category-buttons button {
    flex-basis: 45%;
  }
}



/* OMNIA ORDER FULFILLMENT GAME V1 */

.of-game-shell {
  max-width: 1120px;
  margin: 0 auto;
  font-family: inherit;
}

.of-screen {
  display: none;
}

.of-screen.active {
  display: block;
}

.of-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.of-header h1 {
  margin: 3px 0 6px;
}

.of-header p {
  margin: 0;
  opacity: .72;
  max-width: 720px;
}

.of-kicker,
.of-stage-label {
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .62;
}

.of-audio-controls {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.of-audio-controls button {
  border: 1px solid rgba(15,23,42,.12);
  background: white;
  border-radius: 999px;
  padding: 9px 13px;
  cursor: pointer;
  font: inherit;
  font-size: .82rem;
  font-weight: 750;
}

.of-intro-card,
.of-results-card {
  text-align: center;
  background: white;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 16px 42px rgba(15,23,42,.07);
}

.of-cafe-logo,
.of-trophy {
  font-size: 4rem;
  margin-bottom: 8px;
}

.of-stage-preview {
  display: grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  gap: 10px;
  margin: 22px 0;
}

.of-stage-preview > div {
  padding: 15px 10px;
  border-radius: 17px;
  background: rgba(37,99,235,.055);
  border: 1px solid rgba(37,99,235,.10);
  display: grid;
  gap: 4px;
}

.of-stage-preview span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0 auto 4px;
  border-radius: 999px;
  background: #2563eb;
  color: white;
  font-weight: 900;
}

.of-stage-preview small {
  opacity: .62;
}

.of-language-focus {
  margin: 22px auto;
  max-width: 850px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(16,185,129,.06);
  border: 1px solid rgba(16,185,129,.13);
}

.of-language-focus > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}

.of-language-focus span {
  padding: 8px 11px;
  border-radius: 999px;
  background: white;
  border: 1px solid rgba(15,23,42,.08);
}

.of-primary,
.of-serve-button {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  border-radius: 14px;
  padding: 13px 20px;
  background: #2563eb;
  color: white;
}

.of-serve-button {
  width: 100%;
  margin-top: 18px;
  font-size: 1.05rem;
}

.of-audio-note {
  display: block;
  margin-top: 9px;
  opacity: .58;
}

.of-hud {
  display: grid;
  grid-template-columns:
    repeat(5,minmax(0,1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.of-hud > div {
  background: white;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 10px;
  text-align: center;
}

.of-hud span {
  display: block;
  font-size: .7rem;
  opacity: .58;
  text-transform: uppercase;
  font-weight: 800;
}

.of-hud strong {
  display: block;
  margin-top: 3px;
}

.of-stage-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 12px 0;
}

.of-stage-heading h2 {
  margin: 3px 0;
}

.of-stage-heading p {
  margin: 0;
  opacity: .68;
}

.of-progress-pill {
  white-space: nowrap;
  border-radius: 999px;
  background: rgba(37,99,235,.08);
  padding: 8px 13px;
  font-weight: 850;
}

.of-play-area {
  min-height: 420px;
}

.of-customer-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px;
  background: white;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 19px;
  margin-bottom: 14px;
}

.of-customer-avatar {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 2.25rem;
  background: rgba(245,158,11,.11);
}

.of-customer-card small {
  display: block;
  font-size: .7rem;
  font-weight: 850;
  opacity: .55;
}

.of-customer-card strong {
  font-size: 1.05rem;
}

.of-order-ticket {
  margin-top: 8px;
  padding: 11px 13px;
  border-radius: 12px;
  background: #fffdf4;
  border: 1px dashed rgba(120,90,20,.25);
}

.of-order-ticket p {
  margin: 3px 0;
  font-weight: 750;
}

.of-counter,
.of-food-station,
.of-tray,
.of-rush-card {
  background: white;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 19px;
  padding: 18px;
}

.of-food-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit,minmax(125px,1fr));
  gap: 10px;
  margin-top: 12px;
}

.of-food-card {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 120px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: rgba(15,23,42,.025);
  cursor: pointer;
  font: inherit;
  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease;
}

.of-food-card:hover {
  transform: translateY(-2px);
  border-color: rgba(37,99,235,.22);
}

.of-food-card span {
  font-size: 2.65rem;
}

.of-food-card.selected,
.of-food-card.correct {
  border-color: rgba(16,185,129,.75);
  background: rgba(16,185,129,.08);
}

.of-food-card.wrong {
  border-color: rgba(239,68,68,.7);
  background: rgba(239,68,68,.07);
}

.of-tray-layout {
  display: grid;
  grid-template-columns: 1.45fr .85fr;
  gap: 14px;
}

.of-tray {
  min-height: 290px;
}

.of-tray-title {
  font-weight: 900;
  margin-bottom: 13px;
}

.of-tray-items {
  min-height: 180px;
  padding: 14px;
  border-radius: 16px;
  border: 2px dashed rgba(15,23,42,.13);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-content: flex-start;
}

.of-empty-tray {
  margin: auto;
  opacity: .45;
  text-align: center;
}

.of-tray-food {
  height: fit-content;
  padding: 8px 10px;
  border: 1px solid rgba(16,185,129,.18);
  border-radius: 999px;
  background: rgba(16,185,129,.08);
  font: inherit;
  cursor: pointer;
}

.of-tray-food span {
  margin-right: 4px;
}

.of-tray-food small {
  margin-left: 5px;
  opacity: .5;
}

.of-rush-card {
  text-align: center;
  padding: 30px;
}

.of-rush-icon {
  font-size: 3rem;
}

.of-rush-card small {
  font-weight: 900;
  letter-spacing: .07em;
  opacity: .58;
}

.of-gap-sentence {
  margin: 20px auto;
  padding: 20px;
  border-radius: 17px;
  background: rgba(37,99,235,.055);
  font-size: 1.35rem;
  font-weight: 850;
  max-width: 720px;
}

.of-gap-options {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.of-gap-options button {
  min-width: 140px;
  min-height: 94px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: rgba(15,23,42,.03);
  font: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
  gap: 3px;
}

.of-gap-options span {
  font-size: 2rem;
}

.of-gap-options button.correct {
  border-color: rgba(16,185,129,.7);
  background: rgba(16,185,129,.08);
}

.of-gap-options button.wrong {
  border-color: rgba(239,68,68,.7);
  background: rgba(239,68,68,.07);
}

.of-complete-sentence {
  margin-top: 20px;
  font-size: 1.2rem;
  font-weight: 900;
  color: #047857;
}

.of-complete-sentence.hidden {
  display: none;
}

.of-feedback {
  margin-top: 14px;
  padding: 12px 15px;
  border-radius: 14px;
  text-align: center;
  background: rgba(15,23,42,.045);
  font-weight: 750;
}

.of-feedback.success {
  background: rgba(16,185,129,.09);
  color: #047857;
}

.of-feedback.error {
  background: rgba(239,68,68,.08);
  color: #b91c1c;
}

.of-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15,23,42,.54);
}

.of-modal.hidden {
  display: none;
}

.of-modal-card {
  width: min(520px,100%);
  background: white;
  border-radius: 22px;
  padding: 26px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,.20);
}

.of-modal-icon {
  font-size: 3rem;
}

.of-speech-lines {
  display: grid;
  gap: 7px;
  margin: 17px 0;
}

.of-speech-lines div {
  padding: 9px 11px;
  background: rgba(37,99,235,.055);
  border-radius: 10px;
  font-weight: 750;
}

.of-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 520px;
  margin: 20px auto;
}

.of-results-grid > div {
  padding: 16px;
  border-radius: 15px;
  background: rgba(37,99,235,.055);
}

.of-results-grid span {
  display: block;
  opacity: .58;
}

.of-results-grid strong {
  display: block;
  font-size: 1.5rem;
  margin-top: 3px;
}

.of-badge {
  margin: 16px auto;
  width: fit-content;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(245,158,11,.12);
  font-weight: 900;
}

.of-badge.locked {
  opacity: .55;
}

.of-tray.shake {
  animation: omniaTrayShake .34s ease;
}

@keyframes omniaTrayShake {
  0%,100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-7px);
  }

  75% {
    transform: translateX(7px);
  }
}

@media (max-width: 760px) {

  .of-header {
    display: block;
  }

  .of-audio-controls {
    justify-content: flex-start;
    margin-top: 12px;
  }

  .of-stage-preview {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .of-hud {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .of-tray-layout {
    grid-template-columns: 1fr;
  }

  .of-stage-heading {
    align-items: flex-start;
  }
}



/* OMNIA TEST YOUR KNOWLEDGE V1 */

.tyk-shell {
  max-width: 980px;
  margin: 0 auto;
}

.tyk-screen {
  display: none;
}

.tyk-screen.active {
  display: block;
}

.tyk-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}

.tyk-header h1 {
  margin: 4px 0 5px;
}

.tyk-header p {
  margin: 0;
  opacity: .68;
}

.tyk-kicker {
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .58;
}

.tyk-goal {
  flex: 0 0 auto;
  min-width: 100px;
  text-align: center;
  padding: 10px 15px;
  border-radius: 16px;
  background: rgba(53,109,255,.07);
  border: 1px solid rgba(53,109,255,.12);
}

.tyk-goal span {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  opacity: .55;
}

.tyk-goal strong {
  display: block;
  font-size: 1.35rem;
  margin-top: 2px;
}

.tyk-status {
  display: grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap: 9px;
  margin-bottom: 10px;
}

.tyk-status > div {
  text-align: center;
  background: white;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 10px;
}

.tyk-status span {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  opacity: .52;
}

.tyk-status strong {
  display: block;
  margin-top: 3px;
}

.tyk-progress-track {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15,23,42,.07);
  margin-bottom: 16px;
}

.tyk-progress-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--primary);
  transition: width .25s ease;
}

.tyk-card {
  background: white;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 14px 40px rgba(15,23,42,.06);
}

.tyk-question-number {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  opacity: .48;
}

.tyk-prompt-label {
  margin-top: 24px;
  font-size: .88rem;
  font-weight: 850;
  color: var(--primary);
}

.tyk-spanish-prompt {
  margin-top: 7px;
  padding: 22px;
  border-radius: 18px;
  background: rgba(53,109,255,.055);
  border: 1px solid rgba(53,109,255,.10);
  font-size: clamp(1.25rem,3vw,1.7rem);
  line-height: 1.35;
  font-weight: 900;
}

.tyk-answer-area {
  margin-top: 22px;
}

.tyk-answer-area label {
  display: block;
  margin-bottom: 8px;
  font-weight: 800;
}

.tyk-answer-area input {
  width: 100%;
  box-sizing: border-box;
  min-height: 54px;
  border: 2px solid rgba(15,23,42,.13);
  border-radius: 14px;
  padding: 0 15px;
  font: inherit;
  font-size: 1.05rem;
  outline: none;
}

.tyk-answer-area input:focus {
  border-color: rgba(53,109,255,.65);
  box-shadow: 0 0 0 4px rgba(53,109,255,.08);
}

.tyk-attempt-message {
  margin-top: 7px;
  font-size: .78rem;
  opacity: .55;
}

.tyk-feedback {
  margin-top: 17px;
  padding: 12px 14px;
  border-radius: 13px;
  font-weight: 800;
}

.tyk-feedback.hidden {
  display: none;
}

.tyk-feedback.success {
  background: rgba(30,158,107,.09);
  color: var(--success);
}

.tyk-feedback.recovered {
  background: rgba(53,109,255,.09);
  color: var(--primary);
}

.tyk-feedback.error {
  background: rgba(239,68,68,.08);
  color: #b91c1c;
}

.tyk-feedback.warning {
  background: rgba(245,158,11,.11);
  color: #92400e;
}

.tyk-model-answer {
  margin-top: 14px;
  padding: 14px;
  border-radius: 13px;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.16);
}

.tyk-model-answer.hidden {
  display: none;
}

.tyk-model-answer small {
  display: block;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .06em;
  opacity: .55;
}

.tyk-model-answer strong {
  display: block;
  margin-top: 4px;
  font-size: 1.08rem;
}

.tyk-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 20px;
}

.tyk-primary,
.tyk-secondary {
  border: 0;
  border-radius: 13px;
  padding: 11px 18px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.tyk-primary {
  background: var(--primary);
  color: white;
}

.tyk-secondary {
  background: rgba(15,23,42,.07);
}

.tyk-primary.hidden,
.tyk-secondary.hidden {
  display: none;
}

.tyk-results-card {
  text-align: center;
  background: white;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 14px 40px rgba(15,23,42,.06);
}

.tyk-results-icon {
  font-size: 4rem;
}

.tyk-results-score {
  width: min(350px,100%);
  margin: 22px auto;
  padding: 17px;
  border-radius: 17px;
  background: rgba(53,109,255,.06);
}

.tyk-results-score span,
.tyk-results-score small {
  display: block;
}

.tyk-results-score span {
  font-size: .74rem;
  font-weight: 800;
  opacity: .55;
  text-transform: uppercase;
}

.tyk-results-score strong {
  display: block;
  margin: 4px 0;
  font-size: 2rem;
}

.tyk-results-score small {
  opacity: .64;
}

.tyk-review {
  max-width: 720px;
  margin: 20px auto;
  text-align: left;
}

.tyk-review h3 {
  text-align: center;
}

.tyk-review-list {
  display: grid;
  gap: 8px;
}

.tyk-review-item {
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(15,23,42,.035);
}

.tyk-review-item span {
  font-size: .86rem;
  opacity: .65;
}

.tyk-review-item strong {
  color: var(--primary);
}

.tyk-perfect {
  text-align: center;
  padding: 15px;
  border-radius: 14px;
  background: rgba(30,158,107,.08);
  color: var(--success);
  font-weight: 900;
}

@media (max-width: 650px) {

  .tyk-header {
    display: block;
  }

  .tyk-goal {
    width: fit-content;
    margin-top: 12px;
  }

  .tyk-status {
    grid-template-columns: 1fr 1fr;
  }

  .tyk-status > div:last-child {
    grid-column: 1 / -1;
  }

  .tyk-card {
    padding: 20px;
  }

  .tyk-actions {
    display: grid;
  }

  .tyk-primary,
  .tyk-secondary {
    width: 100%;
  }
}



/* OMNIA HOMEWORK GUIDED PRODUCTION V1 */

.hw-shell {
  max-width: 1050px;
  margin: 0 auto;
}

.hw-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.hw-header h1 {
  margin: 4px 0 6px;
}

.hw-header p {
  margin: 0;
  max-width: 740px;
  opacity: .7;
}

.hw-kicker {
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .08em;
  opacity: .58;
}

.hw-save-status {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 14px;
  background: rgba(30,158,107,.07);
  border: 1px solid rgba(30,158,107,.14);
  text-align: center;
}

.hw-save-status span {
  display: block;
  font-size: .66rem;
  text-transform: uppercase;
  font-weight: 800;
  opacity: .55;
}

.hw-save-status strong {
  font-size: .82rem;
  color: var(--success);
}

.hw-progress {
  display: grid;
  grid-template-columns:
    repeat(5,minmax(0,1fr));
  gap: 8px;
}

.hw-progress-step {
  text-align: center;
  opacity: .48;
}

.hw-progress-step span {
  display: grid;
  place-items: center;
  margin: 0 auto 5px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  font-weight: 900;
}

.hw-progress-step small {
  font-size: .7rem;
  font-weight: 750;
}

.hw-progress-step.active,
.hw-progress-step.done {
  opacity: 1;
}

.hw-progress-step.active span {
  background: var(--primary);
  color: white;
}

.hw-progress-step.done span {
  background: var(--success);
  color: white;
}

.hw-progress-line {
  height: 7px;
  border-radius: 999px;
  background: rgba(15,23,42,.07);
  margin: 12px 0 18px;
  overflow: hidden;
}

.hw-progress-fill {
  width: 0;
  height: 100%;
  background: var(--primary);
  transition: width .25s ease;
}

.hw-work-area {
  min-height: 390px;
  padding: 26px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 22px;
  background: white;
  box-shadow: 0 12px 34px rgba(15,23,42,.05);
}

.hw-work-area.hidden {
  display: none;
}

.hw-step-number {
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .07em;
  color: var(--primary);
}

.hw-step-heading h2 {
  margin: 5px 0;
}

.hw-step-heading p {
  margin: 0 0 20px;
  opacity: .67;
}

.hw-choice-grid {
  display: grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap: 12px;
}

.hw-meal-choice,
.hw-food-choice {
  border: 2px solid transparent;
  border-radius: 18px;
  background: rgba(15,23,42,.025);
  cursor: pointer;
  font: inherit;
}

.hw-meal-choice {
  min-height: 150px;
  display: grid;
  place-items: center;
  gap: 5px;
}

.hw-meal-choice span {
  font-size: 3rem;
}

.hw-meal-choice strong {
  font-size: 1.05rem;
}

.hw-meal-choice.selected,
.hw-food-choice.selected {
  border-color: var(--success);
  background: rgba(30,158,107,.07);
}

.hw-selection-count {
  margin-bottom: 13px;
  font-size: .88rem;
}

.hw-food-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit,minmax(135px,1fr));
  gap: 10px;
}

.hw-food-choice {
  min-height: 125px;
  display: grid;
  place-items: center;
  gap: 4px;
}

.hw-food-choice span {
  font-size: 2.6rem;
}

.hw-food-choice small {
  opacity: .55;
}

.hw-writing-support {
  display: grid;
  grid-template-columns:
    auto 1fr;
  gap: 6px 10px;
  margin-bottom: 18px;
  padding: 13px;
  border-radius: 14px;
  background: rgba(53,109,255,.045);
}

.hw-writing-fields {
  display: grid;
  gap: 13px;
}

.hw-writing-field {
  padding: 15px;
  border-radius: 15px;
  background: rgba(15,23,42,.025);
}

.hw-frame small {
  display: block;
  font-size: .66rem;
  opacity: .5;
  font-weight: 800;
}

.hw-frame strong {
  display: block;
  margin-top: 3px;
  color: var(--primary);
}

.hw-writing-field p {
  margin: 7px 0;
  font-size: .82rem;
  opacity: .63;
}

.hw-writing-field textarea,
.hw-optional-card textarea {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid rgba(15,23,42,.11);
  border-radius: 12px;
  padding: 11px;
  resize: vertical;
  font: inherit;
}

.hw-writing-field textarea:focus,
.hw-optional-card textarea:focus {
  outline: none;
  border-color: rgba(53,109,255,.6);
}

.hw-optional-card {
  padding: 20px;
  border-radius: 17px;
  background: rgba(245,158,11,.055);
  border: 1px solid rgba(245,158,11,.13);
}

.hw-challenge-badge {
  width: fit-content;
  margin-bottom: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(245,158,11,.12);
  font-size: .7rem;
  font-weight: 900;
}

.hw-optional-card textarea {
  margin: 12px 0 7px;
}

.hw-optional-card > small {
  opacity: .55;
}

.hw-speech-card {
  max-width: 720px;
  margin: auto;
  text-align: center;
}

.hw-speech-icon {
  font-size: 3.5rem;
}

.hw-speech-lines {
  display: grid;
  gap: 8px;
  margin: 18px 0;
  text-align: left;
}

.hw-speech-lines > div {
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(53,109,255,.05);
  font-weight: 750;
}

.hw-speech-lines .optional {
  background: rgba(245,158,11,.07);
}

.hw-spoken-button {
  border: 0;
  border-radius: 14px;
  padding: 13px 20px;
  background: var(--primary);
  color: white;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.hw-spoken-button.confirmed {
  background: var(--success);
}

.hw-speech-note {
  font-size: .78rem;
  opacity: .55;
}

.hw-feedback {
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  font-weight: 750;
}

.hw-feedback.hidden {
  display: none;
}

.hw-feedback.error {
  background: rgba(239,68,68,.08);
  color: #b91c1c;
}

.hw-navigation {
  display: flex;
  justify-content: space-between;
  gap: 9px;
  margin-top: 14px;
}

.hw-navigation.hidden {
  display: none;
}

.hw-primary,
.hw-secondary {
  border: 0;
  border-radius: 13px;
  padding: 11px 18px;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.hw-primary {
  background: var(--primary);
  color: white;
}

.hw-secondary {
  background: rgba(15,23,42,.07);
}

.hw-secondary:disabled {
  opacity: .35;
  cursor: default;
}

.hw-complete {
  text-align: center;
  padding: 28px;
  border-radius: 22px;
  background: white;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 12px 34px rgba(15,23,42,.05);
}

.hw-complete.hidden {
  display: none;
}

.hw-complete-icon {
  font-size: 4rem;
}

.hw-final-product {
  max-width: 720px;
  margin: 20px auto;
  text-align: left;
}

.hw-final-heading {
  font-size: 1.35rem;
  font-weight: 900;
  margin-bottom: 9px;
}

.hw-final-foods {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}

.hw-final-foods span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(30,158,107,.07);
  border: 1px solid rgba(30,158,107,.12);
}

.hw-final-sentences {
  padding: 14px;
  border-radius: 14px;
  background: rgba(53,109,255,.04);
}

.hw-final-sentences p {
  margin: 7px 0;
  font-weight: 700;
}

.hw-final-sentences p.optional {
  color: #92400e;
}

.hw-checklist {
  display: grid;
  gap: 6px;
  margin-top: 15px;
}

.hw-checklist > div {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(15,23,42,.03);
}

.hw-checklist .done {
  color: var(--success);
}

@media (max-width: 700px) {

  .hw-header {
    display: block;
  }

  .hw-save-status {
    width: fit-content;
    margin-top: 10px;
  }

  .hw-progress {
    overflow-x: auto;
    grid-template-columns:
      repeat(5,minmax(100px,1fr));
  }

  .hw-choice-grid {
    grid-template-columns: 1fr;
  }

  .hw-writing-support {
    grid-template-columns: 1fr;
  }

  .hw-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}



/* OMNIA COMPLETE LESSON V1 */

.complete-shell {
  max-width: 1080px;
  margin: 0 auto;
}

.complete-hero {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding: 30px;
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      rgba(53,109,255,.07),
      rgba(30,158,107,.07)
    );
  border: 1px solid rgba(15,23,42,.08);
}

.complete-star {
  font-size: 3.4rem;
  margin-bottom: 5px;
}

.complete-kicker,
.complete-section-label {
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  opacity: .56;
}

.complete-hero h1 {
  margin: 5px 0 0;
  font-size: 2rem;
}

.complete-hero h2 {
  margin: 3px 0 10px;
  font-size: 1.15rem;
  color: var(--primary);
}

.complete-hero p {
  max-width: 720px;
  margin: 0;
  line-height: 1.55;
  opacity: .74;
}

.complete-status {
  flex: 0 0 auto;
  min-width: 150px;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border-radius: 17px;
  background: white;
  border: 1px solid rgba(15,23,42,.08);
}

.complete-status > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--primary);
  color: white;
  font-weight: 950;
}

.complete-status.completed > span {
  background: var(--success);
}

.complete-status small {
  display: block;
  font-size: .63rem;
  opacity: .5;
  font-weight: 800;
}

.complete-status strong {
  display: block;
  margin-top: 2px;
  font-size: .84rem;
}

.complete-block {
  margin-top: 16px;
  padding: 22px;
  border-radius: 20px;
  background: white;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 28px rgba(15,23,42,.035);
}

.complete-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

.complete-heading h3,
.complete-block h3 {
  margin: 4px 0 13px;
}

.complete-badge {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border-radius: 13px;
  background: rgba(53,109,255,.08);
  color: var(--primary);
  font-weight: 950;
}

.complete-achievements {
  display: grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap: 9px;
}

.complete-achievement {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px;
  border-radius: 12px;
  background: rgba(30,158,107,.045);
}

.complete-achievement span {
  color: var(--success);
  font-weight: 950;
}

.complete-achievement p {
  margin: 0;
  line-height: 1.4;
}

.complete-path {
  display: grid;
  grid-template-columns:
    repeat(5,minmax(0,1fr));
  gap: 8px;
}

.complete-path-item {
  min-height: 85px;
  padding: 10px;
  border-radius: 13px;
  background: rgba(53,109,255,.04);
  text-align: center;
}

.complete-path-item span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin: 0 auto 7px;
  border-radius: 999px;
  background: var(--primary);
  color: white;
  font-size: .72rem;
  font-weight: 900;
}

.complete-path-item strong {
  font-size: .75rem;
}

.complete-path-note,
.complete-optional-note {
  margin: 11px 0 0;
  font-size: .74rem;
  opacity: .5;
}

.complete-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.complete-score {
  width: fit-content;
  margin: 9px 0;
  padding: 8px 13px;
  border-radius: 12px;
  background: rgba(53,109,255,.08);
  color: var(--primary);
  font-size: 1.25rem;
  font-weight: 950;
}

.complete-mastery p {
  margin-bottom: 9px;
}

.complete-mastery small {
  opacity: .55;
}

.complete-production > strong {
  display: block;
  margin-bottom: 10px;
}

.complete-production ul {
  margin: 0;
  padding-left: 20px;
}

.complete-production li {
  margin: 5px 0;
}

.complete-reflection {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.complete-reflection-option {
  border: 1px solid rgba(15,23,42,.1);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(15,23,42,.025);
  cursor: pointer;
  font: inherit;
  font-size: .82rem;
  font-weight: 750;
}

.complete-reflection-option.selected {
  background: rgba(30,158,107,.1);
  border-color: rgba(30,158,107,.35);
  color: var(--success);
}

.complete-actions {
  margin-top: 16px;
  padding: 24px;
  border-radius: 22px;
  background: white;
  border: 1px solid rgba(15,23,42,.08);
}

.complete-actions-heading h3 {
  margin: 4px 0 15px;
}

.complete-action-primary {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 0;
  border-radius: 16px;
  padding: 16px;
  background: var(--primary);
  color: white;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.complete-action-primary.completed {
  background: var(--success);
}

.complete-action-primary > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  font-size: 1.2rem;
  font-weight: 950;
}

.complete-action-primary strong,
.complete-action-primary small {
  display: block;
}

.complete-action-primary small {
  margin-top: 2px;
  opacity: .78;
}

.complete-companion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.complete-action-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 15px;
  padding: 14px;
  background: rgba(15,23,42,.02);
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.complete-action-icon {
  font-size: 1.8rem;
}

.complete-action-card strong,
.complete-action-card small {
  display: block;
}

.complete-action-card small {
  margin-top: 2px;
  opacity: .55;
}

.complete-arrow {
  opacity: .45;
  font-weight: 900;
}

.complete-review-button {
  width: 100%;
  margin-top: 10px;
  border: 0;
  border-radius: 13px;
  padding: 11px;
  background: rgba(15,23,42,.06);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
}

.complete-lms-note {
  margin: 12px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: .72rem;
  opacity: .5;
}

.complete-burst {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  align-content: center;
  pointer-events: none;
  background: rgba(255,255,255,.86);
  opacity: 0;
  transform: scale(.97);
  transition:
    opacity .3s ease,
    transform .3s ease;
}

.complete-burst.show {
  opacity: 1;
  transform: scale(1);
}

.complete-burst div {
  font-size: 5rem;
}

.complete-burst strong {
  margin-top: 7px;
  font-size: 2rem;
}

.complete-burst span {
  margin-top: 5px;
  opacity: .65;
  font-weight: 700;
}

@media (max-width: 760px) {

  .complete-hero {
    display: block;
  }

  .complete-status {
    margin-top: 17px;
    width: fit-content;
  }

  .complete-achievements,
  .complete-two-column,
  .complete-companion-grid {
    grid-template-columns: 1fr;
  }

  .complete-path {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}

/* OMNIA_ASSET_AWARE_MEDIA_V1 */

/* Generated assets: responsive and lightweight */

.word-image-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
}

.word-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.word-audio-player {
  display: block;
  width: 100%;
  margin-top: 10px;
}

.depth-v2-reading-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 18px;
}

.audio-player-ready {
  display: grid;
  gap: 8px;
  width: 100%;
}

.listen-audio-player {
  width: 100%;
}

.speak-inline-audio {
  display: block;
  width: min(100%, 280px);
  margin-top: 8px;
}

.partner-round-audio {
  display: block;
  width: 100%;
  margin-top: 10px;
}

.media-ready-badge {
  white-space: nowrap;
  font-weight: 700;
}

/* OMNIA_BIBLE_DEPTH_V2_MEDIA_V1 */

.depth-v2-bible-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 18px;
}

.depth-v2-story-audio {
  display: block;
  width: 100%;
  margin-top: 14px;
}

.depth-v2-bridge-audio {
  display: block;
  width: 100%;
  margin-top: 12px;
}

/* OMNIA_WB_READ_AUDIO_V2 */

.word-audio-group {
  width: 100%;
  margin-top: 8px;
}

.word-audio-label {
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.72;
  margin-bottom: 4px;
}

.word-audio-player {
  display: block;
  width: 100%;
  max-width: 100%;
}

.example-audio {
  margin-top: 6px;
}

.translation-support {
  margin-top: 12px;
  font-size: 0.82rem;
  opacity: 0.65;
}

.depth-v2-reading-audio {
  display: block;
  width: 100%;
  margin-top: 14px;
}


/* OMNIA_WORD_BANK_COMPACT_PLAY_V3 */

.word-card {
  min-height: 370px;
}

.word-card-inner {
  min-height: 370px;
}

.word-card-face {
  min-height: 370px;
}

.word-image-wrap {
  width: 100%;
  height: 138px;
  min-height: 138px;
  margin: 12px 0 14px;
  overflow: hidden;
  border-radius: 14px;
  background: #f4f6fa;
}

.word-image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

.word-main-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.word-main-row .word-english {
  text-align: left;
  min-width: 0;
}

.word-play-button {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(53, 109, 255, .18);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    opacity .15s ease;
}

.word-play-button:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(53, 109, 255, .24);
}

.word-play-button:active {
  transform: scale(.96);
}

.word-play-button:focus-visible {
  outline: 3px solid rgba(53, 109, 255, .22);
  outline-offset: 3px;
}

.word-play-button.is-playing {
  transform: scale(.92);
}

.word-play-button.is-disabled {
  opacity: .28;
  cursor: default;
  box-shadow: none;
}

.example-label {
  margin-top: 14px;
}

.example-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

.example-row .example-chunk {
  margin-top: 0;
}

.example-play-button {
  align-self: center;
}

.tap-hint {
  margin-top: auto;
  padding-top: 14px;
}

.word-audio-group,
.word-audio-label,
.word-audio-player {
  display: none;
}



/* OMNIA_WORD_BANK_FULL_TRANSLATION_V1 */

.word-card-back .word-spanish {
  margin: 52px 0 4px;
}

.word-card-back .translation-support {
  margin-top: 0;
  text-align: center;
}

.translation-example {
  width: 100%;
  margin-top: 24px;
  padding: 15px 16px;
  border-radius: 14px;
  background: #f5f7fb;
  text-align: left;
}

.translation-example-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.translation-example-text {
  margin-top: 6px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--text);
}

.word-card-back .tap-hint {
  margin-top: auto;
}



/* OMNIA_LETS_READ_KEY_LANGUAGE_V1 */

.depth-v2-key-language {
  padding: 1px 4px;
  border-radius: 5px;
  background: #fff1a8;
  color: inherit;
  font-weight: 750;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}



/* OMNIA_SPEAK_REPEAT_AUDIO_V1 */

.repeat-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

.speak-repeat-play {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 4px 12px
    rgba(53, 109, 255, .18);
  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.speak-repeat-play:hover {
  transform: scale(1.06);
  box-shadow:
    0 6px 16px
    rgba(53, 109, 255, .24);
}

.speak-repeat-play:active {
  transform: scale(.95);
}

.speak-repeat-play:focus-visible {
  outline:
    3px solid
    rgba(53, 109, 255, .22);
  outline-offset: 3px;
}

.speak-repeat-play.is-disabled {
  opacity: .3;
  cursor: default;
  box-shadow: none;
}

.speak-repeat-audio {
  display: none;
}



/* OMNIA_SPEAK_COMPACT_CHAT_V2 */

.speak-dialogue-header {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 820px;
  margin-bottom: 18px;
  padding: 13px 15px;
  border: 1px solid var(--line, #D9E3F0);
  border-radius: 16px;
  background:
    linear-gradient(
      135deg,
      var(--primary-tint, #EEF5FF),
      #FFFFFF
    );
  box-shadow:
    0 7px 20px
    rgba(53, 109, 255, 0.07);
}

.partner-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  background: var(--primary, #356DFF);
  color: white;
  font-size: 11px;
  font-weight: 900;
  box-shadow:
    0 5px 14px
    rgba(53, 109, 255, 0.22);
}

.speak-dialogue-header strong {
  display: block;
  color: var(--text, #1C2740);
  font-size: 14px;
}

.speak-dialogue-header p {
  margin: 2px 0 0;
  color: var(--muted, #667085);
  font-size: 12px;
}

.model-dialogue {
  display: grid;
  gap: 12px;
  max-width: 820px;
}

.dialogue-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dialogue-row.learner {
  flex-direction: row-reverse;
}

.dialogue-speaker {
  flex: 0 0 54px;
  font-size: 9px;
  letter-spacing: .08em;
  font-weight: 900;
  color: var(--muted, #667085);
  text-align: center;
}

.dialogue-bubble {
  display: flex;
  align-items: center;
  gap: 11px;
  width: fit-content;
  max-width: min(74%, 620px);
  min-height: 46px;
  padding: 10px 12px 10px 15px;
  border: 1px solid #D9E7F8;
  border-radius: 18px 18px 18px 6px;
  background: #F2F7FF;
  color: var(--text, #1C2740);
  line-height: 1.4;
  box-shadow:
    0 5px 16px
    rgba(28, 39, 64, 0.05);
}

.dialogue-row.learner
.dialogue-bubble {
  border-color: #C9D9FF;
  border-radius: 18px 18px 6px 18px;
  background:
    linear-gradient(
      135deg,
      #E2EDFF,
      #F0F6FF
    );
  color: #2349B5;
  box-shadow:
    0 6px 18px
    rgba(53, 109, 255, 0.09);
}

.dialogue-text {
  flex: 1 1 auto;
}

.dialogue-play-button {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--primary, #356DFF);
  color: #FFFFFF;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 5px 14px
    rgba(53, 109, 255, 0.22);
  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.dialogue-play-button:hover {
  transform: scale(1.06);
  box-shadow:
    0 7px 18px
    rgba(53, 109, 255, 0.30);
}

.dialogue-play-button:active {
  transform: scale(.95);
}

.dialogue-play-button:focus-visible {
  outline:
    3px solid
    rgba(53, 109, 255, 0.20);
  outline-offset: 3px;
}

.speak-dialogue-audio {
  display: none;
}


/* =======================================================
   OMNIA_WORD_BANK_CANONICAL_V1_STYLES
   Learner-facing Word Bank + shell refinements
   ======================================================= */

.lesson-id {
  display: none !important;
}

.section-nav {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.section-tab {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.wb-mr3-intro {
  max-width: 720px;
}

.wb-mr3-grid {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.wb-mr3-card {
  min-height: 355px;
}

.wb-mr3-card .word-card-inner,
.wb-mr3-card .word-card-face {
  min-height: 355px;
}

.wb-back-content {
  margin: auto 0;
  text-align: center;
}

.wb-back-english {
  margin-top: 8px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 700;
}

.wb-back-example {
  margin: 24px auto 0;
  max-width: 260px;
  padding: 13px 15px;
  border-radius: 12px;
  background: var(--primary-tint);
  line-height: 1.45;
}

.wb-practice-shell {
  margin-top: 46px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}

.wb-practice-heading {
  max-width: 680px;
  margin-bottom: 22px;
}

.wb-practice-heading h3 {
  margin: 7px 0 8px;
  font-size: 30px;
}

.wb-practice-heading p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.wb-practice-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.wb-activity-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
}

.wb-builder-card {
  grid-column: 1 / -1;
}

.wb-activity-card[hidden] {
  display: none;
}

.wb-step-number {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 850;
}

.wb-activity-card h4 {
  margin: 3px 0 7px;
  font-size: 20px;
}

.wb-activity-card p {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.5;
}

.wb-action-button,
.wb-choice,
.wb-builder-choice {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
}

.wb-action-button {
  padding: 10px 15px;
  font-weight: 750;
}

.wb-action-button.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
}

.wb-action-button.secondary {
  margin-top: 12px;
}

.wb-choice-grid {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.wb-choice {
  padding: 11px 13px;
  text-align: left;
  font-weight: 700;
}

.wb-choice:hover:not(:disabled),
.wb-builder-choice:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 14px var(--glow);
}

.wb-choice:disabled {
  cursor: default;
  opacity: .72;
}

.wb-feedback {
  min-height: 24px;
  margin-top: 10px;
  color: var(--primary);
  font-weight: 750;
}

.wb-question-word {
  margin: 14px 0 4px;
  padding: 16px;
  border-radius: 14px;
  background: var(--primary-tint);
  font-size: 26px;
  font-weight: 850;
  text-align: center;
}

.wb-builder-label {
  margin: 18px 0 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.wb-builder-options {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.wb-builder-choice {
  overflow: hidden;
  padding: 0 0 10px;
  font-weight: 750;
}

.wb-builder-choice img {
  display: block;
  width: 100%;
  height: 92px;
  object-fit: contain;
  margin-bottom: 9px;
}

.wb-builder-choice.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 4px 14px var(--glow);
}

.wb-sentence-preview {
  margin-top: 18px;
  padding: 16px 18px;
  min-height: 58px;
  display: flex;
  align-items: center;
  border: 1px solid #becbf4;
  border-radius: 14px;
  background: #fafbff;
  font-size: 19px;
  font-weight: 750;
  line-height: 1.45;
}


@media (max-width: 900px) {

  .section-nav {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .wb-mr3-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .wb-builder-options {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 650px) {

  .section-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .section-tab {
    width: auto;
    flex: 0 0 auto;
  }

  .wb-mr3-grid {
    grid-template-columns: 1fr;
  }

  .wb-practice-grid {
    grid-template-columns: 1fr;
  }

  .wb-builder-card {
    grid-column: auto;
  }

  .wb-activity-card {
    grid-template-columns: 1fr;
  }
}


/* =======================================================
   OMNIA_LETS_READ_VISUAL_QA_V1
   Reading-first visual hierarchy
   ======================================================= */

/*
  The image supports comprehension.
  It must not dominate the reading.
*/
.depth-v2-panel.active
.depth-v2-image {
  display: block;

  width: auto;
  max-width: 100%;
  max-height: 360px;

  height: auto;

  object-fit: contain;
  object-position: center;

  margin: 18px auto 26px;

  border-radius: 18px;
}


/*
  Reading text is the pedagogical focus.
*/
.depth-v2-reading-text {
  max-width: 100%;
  margin: 0 0 22px;

  font-size: 36px !important;
  font-weight: 750 !important;
  line-height: 1.5;

  color: var(--primary);
  letter-spacing: -0.015em;
}


/*
  Approved target language receives
  explicit noticing support.
*/
.read-target-highlight {
  display: inline;

  padding:
    0.02em
    0.14em;

  border-radius: 0.18em;

  background:
    #fff0a8;

  color:
    #173f9d;

  font-weight: 900;

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}


/*
  Keep narration visually connected
  to the reading text.
*/
.depth-v2-panel.active
.depth-v2-reading-text
+ audio {
  display: block;
  width: min(420px, 100%);
  margin-top: 14px;
}


/*
  Tablet
*/
@media (max-width: 900px) {

  .depth-v2-reading-text {
    font-size: 32px !important;
  }

  .depth-v2-panel.active
  .depth-v2-image {
    height: 300px;
  }
}


/*
  Mobile
*/
@media (max-width: 650px) {

  .depth-v2-reading-text {
    font-size: 27px !important;
    line-height: 1.48;
  }

  .depth-v2-panel.active
  .depth-v2-image {
    height: 235px;
    margin-bottom: 20px;
  }
}


/* =======================================================
   OMNIA_READ_COMPREHENSION_FEEDBACK_V1
   Immediate formative feedback
   ======================================================= */

.depth-v2-option.mr3-read-answer {
  cursor: pointer;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.depth-v2-option.mr3-read-answer:hover {
  transform: translateY(-1px);
}


/* Correct selection */

.depth-v2-option.mr3-read-answer.correct {
  background: #e9f8ef !important;
  border-color: #16834a !important;
  color: #0d6337 !important;

  box-shadow:
    0 0 0 2px
    rgba(22, 131, 74, 0.14);
}


/* Incorrect selection */

.depth-v2-option.mr3-read-answer.wrong {
  background: #fff0f0 !important;
  border-color: #c94444 !important;
  color: #9c2929 !important;

  box-shadow:
    0 0 0 2px
    rgba(201, 68, 68, 0.12);
}


/* Local feedback beneath each question */

.mr3-read-inline-feedback {
  margin-top: 12px;
  padding: 12px 16px;

  border-radius: 12px;

  font-size: 18px;
  font-weight: 750;
  line-height: 1.4;
}

.mr3-read-inline-feedback.success {
  background: #e9f8ef;
  color: #0d6337;
}

.mr3-read-inline-feedback.retry {
  background: #fff0f0;
  color: #9c2929;
}


/* =======================================================
   OMNIA_READ_STEPS5_6_QA_V1
   Guided discovery + visual production support
   ======================================================= */

.mr3-noticing-inline-feedback {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 12px;

  font-size: 18px;
  font-weight: 750;
  line-height: 1.4;
}


.mr3-notice-choice.correct {
  background: #e9f8ef !important;
  border-color: #16834a !important;
  color: #0d6337 !important;

  box-shadow:
    0 0 0 2px
    rgba(22, 131, 74, 0.14);
}


.mr3-notice-choice.wrong {
  background: #fff0f0 !important;
  border-color: #c94444 !important;
  color: #9c2929 !important;

  box-shadow:
    0 0 0 2px
    rgba(201, 68, 68, 0.12);
}


.depth-v2-production-reference {
  max-height: 330px !important;
  margin-top: 18px !important;
  margin-bottom: 28px !important;
}


/* =======================================================
   OMNIA_SELECTABLE_PRECHECK_STATE_V1
   Immediate visual confirmation before answer checking
   ======================================================= */

.mr3-notice-choice.selected:not(.correct):not(.wrong) {
  background: #eaf3ff !important;
  border-color: #4f8cff !important;
  color: #173f9d !important;

  box-shadow:
    0 0 0 2px
    rgba(79, 140, 255, 0.14);

  font-weight: 700;
}

.mr3-notice-choice.selected:not(.correct):not(.wrong):hover {
  background: #dfeeff !important;
}


/* =======================================================
   OMNIA_GRAMMAR_TIP_BOX_V1
   Guided grammar explanation
   ======================================================= */

.grammar-explanation-box {
  margin-top: 22px;
  padding: 24px !important;

  background:
    linear-gradient(
      135deg,
      #f5f9ff 0%,
      #edf5ff 100%
    ) !important;

  border:
    1px solid
    #c8dcff !important;

  border-radius: 20px;

  color: #17233f !important;

  box-shadow:
    0 10px 30px
    rgba(32, 82, 160, 0.08);
}


.grammar-explanation-header {
  margin-bottom: 20px;
}


.grammar-explanation-label {
  display: inline-block;

  margin-bottom: 7px;

  font-size: 13px;
  font-weight: 850;

  letter-spacing: 0.12em;

  color: #356dff;

  text-transform: uppercase;
}


.grammar-explanation-header h3 {
  margin: 0;

  font-size: 26px;
  line-height: 1.2;

  color: #17233f;
}


.grammar-rule-card {
  display: grid;

  grid-template-columns:
    minmax(92px, auto)
    1fr;

  align-items: center;

  gap: 18px;

  padding: 17px 18px;

  background: #ffffff;

  border:
    1px solid
    rgba(54, 92, 160, 0.13);

  border-radius: 15px;
}


.grammar-rule-card
+ .grammar-rule-card {
  margin-top: 14px;
}


.grammar-rule-card p {
  margin: 0;

  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;

  color: #243451;
}


.grammar-rule-keyword {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 44px;

  padding:
    8px
    15px;

  border-radius: 12px;

  font-size: 22px;
  font-weight: 900;

  line-height: 1;

  text-align: center;
}


/* SOME */

.grammar-rule-some
.grammar-rule-keyword {
  background: #fff0ad;

  color: #8a5a00;

  border:
    1px solid
    #f2cf53;
}


/* NEED */

.grammar-rule-need
.grammar-rule-keyword {
  background: #dff6ec;

  color: #08704a;

  border:
    1px solid
    #8fd7ba;
}


/* Tablet / mobile */

@media (max-width: 700px) {

  .grammar-explanation-box {
    padding: 18px !important;
  }

  .grammar-rule-card {
    grid-template-columns: 1fr;

    gap: 10px;
  }

  .grammar-rule-keyword {
    justify-self: start;
  }

  .grammar-rule-card p {
    font-size: 18px;
  }
}


/* =======================================================
   OMNIA_GRAMMAR_INLINE_KEYWORD_V1
   Grammar label → explanation visual reinforcement
   ======================================================= */

.grammar-rule-card p
.grammar-inline-some,
.grammar-rule-card p
.grammar-inline-need {
  font-weight: 900;
}

.grammar-rule-card p
.grammar-inline-some {
  color: #9a6500;
}

.grammar-rule-card p
.grammar-inline-need {
  color: #08704a;
}


/* =======================================================
   OMNIA_READ_STEP6_FINAL_VISUAL_V1
   Speaking production hierarchy
   ======================================================= */

.read-speaking-prompt-grid {
  display: grid;
  gap: 14px;

  margin:
    8px
    0
    24px;
}


.read-speaking-prompt-card {
  display: grid;

  grid-template-columns:
    44px
    1fr;

  align-items: center;

  gap: 14px;

  padding:
    15px
    18px;

  background: #f8fbff;

  border:
    1px solid
    #d9e6ff;

  border-radius: 14px;
}


.read-speaking-prompt-number {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border-radius: 50%;

  background: #eaf3ff;

  color: #356dff;

  font-size: 17px;
  font-weight: 900;
}


.read-speaking-prompt-card p {
  margin: 0;

  font-size: 19px;
  font-weight: 700;
  line-height: 1.45;

  color: #20304f;
}


/* Final speaking task */

.read-final-speaking-task {
  margin:
    10px
    0
    20px;

  padding:
    20px
    22px;

  background:
    linear-gradient(
      135deg,
      #eef5ff 0%,
      #f7faff 100%
    );

  border:
    1px solid
    #c9ddff;

  border-radius: 16px;
}


.read-final-speaking-label {
  margin-bottom: 8px;

  font-size: 12px;
  font-weight: 900;

  letter-spacing: 0.12em;

  color: #356dff;

  text-transform: uppercase;
}


.read-final-speaking-task p {
  margin: 0;

  font-size: 21px;
  font-weight: 800;
  line-height: 1.4;

  color: #1c2d4f;
}


@media (max-width: 650px) {

  .read-speaking-prompt-card {
    grid-template-columns:
      38px
      1fr;

    padding:
      14px
      15px;
  }

  .read-speaking-prompt-number {
    width: 34px;
    height: 34px;

    font-size: 16px;
  }

  .read-speaking-prompt-card p {
    font-size: 17px;
  }

  .read-final-speaking-task p {
    font-size: 19px;
  }
}


/* =======================================================
   OMNIA_UI_TOKENS_V1
   Canonical typography + semantic color system
   ======================================================= */

:root {

  /* Typography */

  --omnia-text-title:
    #17233F;

  --omnia-text-card-title:
    #20304F;

  --omnia-text-body:
    #243451;

  --omnia-text-muted:
    #66738D;


  /* Brand / interaction */

  --omnia-accent:
    #356DFF;

  --omnia-reading-text:
    #356DFF;

  --omnia-target-language:
    #173F9D;


  /* Feedback */

  --omnia-success:
    #0D6337;

  --omnia-error:
    #9C2929;


  /* Pre-check selection */

  --omnia-selected:
    #356DFF;

  --omnia-selected-bg:
    #EAF3FF;

  --omnia-selected-border:
    #4F8CFF;


  /* Grammar semantics */

  --omnia-grammar-some:
    #9A6500;

  --omnia-grammar-need:
    #08704A;
}


/* =======================================================
   TYPOGRAPHIC HIERARCHY
   ======================================================= */

/* Main titles */

h1 {
  color:
    var(--omnia-text-title);
}


/* Large section titles */

.depth-v2-header h2,
.depth-v2-panel > h2 {
  color:
    var(--omnia-text-title);
}


/* Small structural labels */

.depth-v2-eyebrow,
.grammar-explanation-label,
.read-final-speaking-label {
  color:
    var(--omnia-accent);
}


/* Core instructional text */

.depth-v2-question-prompt,
.read-speaking-prompt-card p {
  color:
    var(--omnia-text-card-title);
}


/* Primary reading remains blue */

.depth-v2-reading-text {
  color:
    var(--omnia-reading-text)
    !important;
}


/* Reading target language */

.read-target-highlight {
  color:
    var(--omnia-target-language)
    !important;
}


/* =======================================================
   INTERACTIVE STATES
   ======================================================= */

.depth-v2-option.mr3-read-answer.correct,
.mr3-notice-choice.correct {
  color:
    var(--omnia-success)
    !important;
}


.depth-v2-option.mr3-read-answer.wrong,
.mr3-notice-choice.wrong {
  color:
    var(--omnia-error)
    !important;
}


.mr3-notice-choice.selected:not(.correct):not(.wrong) {
  background:
    var(--omnia-selected-bg)
    !important;

  border-color:
    var(--omnia-selected-border)
    !important;

  color:
    var(--omnia-selected)
    !important;
}


/* =======================================================
   GRAMMAR SEMANTICS
   ======================================================= */

.grammar-rule-some
.grammar-rule-keyword,
.grammar-inline-some {
  color:
    var(--omnia-grammar-some);
}


.grammar-rule-need
.grammar-rule-keyword,
.grammar-inline-need {
  color:
    var(--omnia-grammar-need);
}


/* =======================================================
   SPEAKING TASK
   ======================================================= */

.read-speaking-prompt-number,
.read-final-speaking-label {
  color:
    var(--omnia-accent);
}


.read-speaking-prompt-card p,
.read-final-speaking-task p {
  color:
    var(--omnia-text-card-title);
}


/* =======================================================
   OMNIA_EDUCATIONAL_DESIGN_SYSTEM_V1

   Premium educational publishing system
   ======================================================= */

:root {

  /* -----------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------- */

  --omnia-font-sans:
    "Inter",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;


  /* -----------------------------------------------
     TEXT
     ----------------------------------------------- */

  --omnia-text-title:
    #23436A;

  --omnia-text-card-title:
    #23436A;

  --omnia-text-body:
    #2D405F;

  --omnia-text-muted:
    #64748B;


  /* -----------------------------------------------
     BRAND
     ----------------------------------------------- */

  --omnia-accent:
    #356DFF;

  --omnia-reading-text:
    #2F67D8;

  --omnia-target-language:
    #174EA6;


  /* -----------------------------------------------
     SURFACES
     ----------------------------------------------- */

  --omnia-bg-page:
    #F6F8FC;

  --omnia-bg-card:
    #FFFFFF;

  --omnia-bg-soft:
    #FAFCFF;

  --omnia-bg-brand-soft:
    #EEF4FF;


  /* -----------------------------------------------
     BORDERS
     ----------------------------------------------- */

  --omnia-border:
    #DCE5F2;

  --omnia-control-border:
    #CAD6E6;

  --omnia-control-hover:
    #8FB0F7;


  /* -----------------------------------------------
     SEMANTIC
     ----------------------------------------------- */

  --omnia-success:
    #147A4D;

  --omnia-error:
    #B83A3A;

  --omnia-selected:
    #356DFF;

  --omnia-selected-bg:
    #EAF3FF;

  --omnia-selected-border:
    #4F8CFF;

  --omnia-grammar-some:
    #986600;

  --omnia-grammar-need:
    #08704A;


  /* -----------------------------------------------
     RADII
     ----------------------------------------------- */

  --omnia-radius-xl:
    22px;

  --omnia-radius-lg:
    16px;

  --omnia-radius-md:
    12px;


  /* -----------------------------------------------
     SHADOW
     ----------------------------------------------- */

  --omnia-shadow-card:
    0 8px 30px
    rgba(35, 67, 106, 0.06);
}


/* =======================================================
   GLOBAL TYPOGRAPHY
   ======================================================= */

html,
body {
  font-family:
    var(--omnia-font-sans);
}


body {
  color:
    var(--omnia-text-body);

  background:
    var(--omnia-bg-page);
}


/* =======================================================
   LESSON TITLE
   ======================================================= */

h1 {
  color:
    var(--omnia-text-title);

  font-size:
    clamp(
      42px,
      4vw,
      52px
    );

  font-weight:
    800;

  line-height:
    1.08;

  letter-spacing:
    -0.025em;
}


/* =======================================================
   LARGE SECTION TITLES
   ======================================================= */

.depth-v2-header h2,
.depth-v2-panel > h2 {

  color:
    var(--omnia-text-title);

  font-size:
    clamp(
      34px,
      3vw,
      42px
    );

  font-weight:
    800;

  line-height:
    1.12;

  letter-spacing:
    -0.022em;
}


/* =======================================================
   EYEBROWS / STRUCTURAL LABELS
   ======================================================= */

.depth-v2-eyebrow,
.grammar-explanation-label,
.read-final-speaking-label {

  color:
    var(--omnia-accent);

  font-size:
    13px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;
}


/* =======================================================
   BODY / INSTRUCTIONS
   ======================================================= */

.depth-v2-panel > p {

  color:
    var(--omnia-text-body);

  font-size:
    18px;

  font-weight:
    500;

  line-height:
    1.55;
}


/* =======================================================
   CONTENT SURFACES
   ======================================================= */

.depth-v2-header {

  background:
    var(--omnia-bg-soft);

  border:
    1px solid
    var(--omnia-border);

  border-radius:
    var(--omnia-radius-xl);

  box-shadow:
    var(--omnia-shadow-card);
}


.depth-v2-panel {

  background:
    var(--omnia-bg-card);

  border:
    1px solid
    var(--omnia-border);

  border-radius:
    var(--omnia-radius-xl);

  box-shadow:
    var(--omnia-shadow-card);
}


/* =======================================================
   QUESTIONS
   ======================================================= */

.depth-v2-question {

  background:
    var(--omnia-bg-soft);

  border:
    1px solid
    var(--omnia-border);

  border-radius:
    var(--omnia-radius-lg);
}


.depth-v2-question-prompt {

  color:
    var(--omnia-text-card-title);

  font-size:
    20px;

  font-weight:
    700;

  line-height:
    1.4;
}


/* =======================================================
   OPTIONS / SELECTABLE CONTROLS
   ======================================================= */

.depth-v2-option {

  background:
    var(--omnia-bg-card);

  border:
    1.5px solid
    var(--omnia-control-border);

  border-radius:
    var(--omnia-radius-md);

  color:
    var(--omnia-text-body);

  font-size:
    18px;

  font-weight:
    550;

  line-height:
    1.35;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}


.depth-v2-option:hover {

  background:
    var(--omnia-bg-soft);

  border-color:
    var(--omnia-control-hover);
}


/* =======================================================
   READING
   ======================================================= */

.depth-v2-reading-text {

  max-width:
    1050px;

  color:
    var(--omnia-reading-text)
    !important;

  font-size:
    36px
    !important;

  font-weight:
    730
    !important;

  line-height:
    1.5;

  letter-spacing:
    -0.014em;
}


.read-target-highlight {

  background:
    #FFF2B8;

  color:
    var(--omnia-target-language)
    !important;

  font-weight:
    850;
}


/* =======================================================
   GRAMMAR EXPLANATIONS
   ======================================================= */

.grammar-explanation-box {

  max-width:
    900px;

  background:
    var(--omnia-bg-brand-soft)
    !important;

  border-color:
    #BCD2FA
    !important;

  border-radius:
    var(--omnia-radius-lg);
}


.grammar-rule-card {

  background:
    var(--omnia-bg-card);

  border-color:
    var(--omnia-border);

  border-radius:
    var(--omnia-radius-lg);
}


.grammar-rule-card p {

  color:
    var(--omnia-text-body);

  font-size:
    20px;

  font-weight:
    650;

  line-height:
    1.5;
}


/* =======================================================
   SPEAKING PROMPTS
   ======================================================= */

.read-speaking-prompt-card {

  background:
    var(--omnia-bg-soft);

  border-color:
    var(--omnia-border);

  border-radius:
    var(--omnia-radius-lg);
}


.read-speaking-prompt-card p {

  color:
    var(--omnia-text-card-title);

  font-size:
    19px;

  font-weight:
    700;
}


.read-final-speaking-task {

  background:
    var(--omnia-bg-brand-soft);

  border-color:
    #BCD2FA;

  border-radius:
    var(--omnia-radius-lg);
}


/* =======================================================
   BUTTONS
   ======================================================= */

.depth-v2-action {

  min-height:
    48px;

  border-radius:
    var(--omnia-radius-md);

  font-weight:
    700;
}


.depth-v2-secondary {

  min-height:
    48px;

  border-radius:
    var(--omnia-radius-md);

  color:
    var(--omnia-text-title);
}


/* =======================================================
   SEMANTIC STATES
   ======================================================= */

.depth-v2-option.mr3-read-answer.correct,
.mr3-notice-choice.correct {

  color:
    var(--omnia-success)
    !important;
}


.depth-v2-option.mr3-read-answer.wrong,
.mr3-notice-choice.wrong {

  color:
    var(--omnia-error)
    !important;
}


.mr3-notice-choice.selected:not(.correct):not(.wrong) {

  background:
    var(--omnia-selected-bg)
    !important;

  border-color:
    var(--omnia-selected-border)
    !important;

  color:
    var(--omnia-selected)
    !important;
}


/* =======================================================
   GRAMMAR SEMANTICS
   ======================================================= */

.grammar-rule-some
.grammar-rule-keyword,
.grammar-inline-some {

  color:
    var(--omnia-grammar-some);
}


.grammar-rule-need
.grammar-rule-keyword,
.grammar-inline-need {

  color:
    var(--omnia-grammar-need);
}


/* =======================================================
   MOBILE TYPOGRAPHY
   ======================================================= */

@media (max-width: 650px) {

  h1 {
    font-size:
      36px;
  }


  .depth-v2-header h2,
  .depth-v2-panel > h2 {

    font-size:
      30px;
  }


  .depth-v2-question-prompt {

    font-size:
      18px;
  }


  .depth-v2-option {

    font-size:
      17px;
  }


  .depth-v2-reading-text {

    font-size:
      27px
      !important;
  }
}


/* =======================================================
   OMNIA_CANONICAL_READING_33PX_V1

   Canonical learner reading typography
   ======================================================= */

/*
   Applies to true reading passages only.
   It does NOT enlarge ordinary instructions,
   questions, grammar notes or metadata.
*/

.depth-v2-reading-text,
.depth-v2-bible-reading-text {

  max-width:
    1050px;

  color:
    var(--omnia-reading-text)
    !important;

  font-size:
    33px
    !important;

  font-weight:
    700;

  line-height:
    1.52;

  letter-spacing:
    -0.012em;
}


/*
   Let's Read keeps its slightly stronger
   editorial weight.
*/

.depth-v2-reading-text {

  font-weight:
    730;
}


/*
   Bible story reading remains substantial
   but a little calmer than Let's Read.
*/

.depth-v2-bible-reading-text {

  margin:
    24px 0 20px;

  color:
    var(--omnia-reading-text)
    !important;
}


/* Mobile */

@media (max-width: 650px) {

  .depth-v2-reading-text,
  .depth-v2-bible-reading-text {

    font-size:
      25px
      !important;

    line-height:
      1.5;
  }
}


/* =======================================================
   OMNIA_SECTION_ICON_SYSTEM_V1

   Shared visual identity for major lesson sections.
   One icon family. One placement system. No emoji.
   ======================================================= */

:root {

  --omnia-section-icon-color:
    var(--omnia-accent, #356DFF);

  --omnia-section-icon-bg:
    var(--omnia-selected-bg, #EAF3FF);

  --omnia-section-icon-border:
    var(--omnia-border-default, #DCE5F2);
}


/*
   Host
*/

.omnia-section-icon-host {

  position:
    relative;

  padding-right:
    78px;
}


/*
   Editorial icon tile
*/

.omnia-section-identity {

  position:
    absolute;

  top:
    2px;

  right:
    2px;

  width:
    52px;

  height:
    52px;

  display:
    grid;

  place-items:
    center;

  color:
    var(--omnia-section-icon-color);

  background:
    var(--omnia-section-icon-bg);

  border:
    1px solid
    var(--omnia-section-icon-border);

  border-radius:
    15px;

  box-sizing:
    border-box;
}


/*
   Shared SVG geometry
*/

.omnia-section-identity-svg {

  width:
    27px;

  height:
    27px;

  display:
    block;
}


/*
   Word Bank has its own intro architecture.
*/

.wb-mr3-intro.omnia-section-icon-host {

  min-height:
    54px;
}


/*
   Complete has its own hero architecture.
*/

.complete-hero.omnia-section-icon-host {

  min-height:
    54px;
}


/*
   Small screens:
   preserve icon identity without stealing reading width.
*/

@media (max-width: 650px) {

  .omnia-section-icon-host {

    padding-right:
      62px;
  }


  .omnia-section-identity {

    width:
      44px;

    height:
      44px;

    border-radius:
      13px;
  }


  .omnia-section-identity-svg {

    width:
      23px;

    height:
      23px;
  }
}


/* =======================================================
   OMNIA_READ_ALONG_ENGINE_V1

   Dynamic read-along state.
   Pedagogical target highlighting remains independent.
   ======================================================= */

:root {

  --omnia-readalong-active-bg:
    var(--omnia-selected-bg, #EAF3FF);

  --omnia-readalong-active-border:
    var(--omnia-accent, #356DFF);
}


/*
   Chunks remain visually neutral until audio reaches them.
*/

.omnia-readalong-chunk {

  display:
    inline;

  border-radius:
    0.22em;

  transition:
    background-color 90ms ease,
    box-shadow 90ms ease;

  box-decoration-break:
    clone;

  -webkit-box-decoration-break:
    clone;
}


/*
   Current spoken chunk.
*/

.omnia-readalong-chunk.is-active {

  background:
    var(--omnia-readalong-active-bg);

  box-shadow:
    0 0 0 2px
    color-mix(
      in srgb,
      var(--omnia-readalong-active-border) 24%,
      transparent
    );
}


/*
   Yellow target language remains yellow.
   The blue outline shows that the same target is
   currently being heard.
*/

.omnia-readalong-chunk.is-active
.read-target-highlight {

  box-shadow:
    0 0 0 2px
    var(--omnia-readalong-active-border);
}


/*
   Do not animate for learners who prefer reduced motion.
*/

@media (prefers-reduced-motion: reduce) {

  .omnia-readalong-chunk {

    transition:
      none;
  }
}


/* =======================================================
   OMNIA_LISTEN_PRECHECK_SELECTED_STATE_V1

   Neutral visual confirmation before grading.
   Correct / wrong colors remain reserved for Check.
   ======================================================= */

.mr3-listen-sort.selected:not(.correct):not(.wrong) {

  background:
    var(--omnia-selected-bg, #EAF3FF)
    !important;

  border-color:
    var(--omnia-accent, #356DFF)
    !important;

  color:
    var(--omnia-title, #23436A)
    !important;

  box-shadow:
    inset 0 0 0 1px
    var(--omnia-accent, #356DFF);

  font-weight:
    750;
}


/*
   Preserve semantic grading colors after Check.
*/

.mr3-listen-sort.correct {

  background:
    color-mix(
      in srgb,
      var(--omnia-success, #147A4D) 12%,
      white
    )
    !important;

  border-color:
    var(--omnia-success, #147A4D)
    !important;
}


.mr3-listen-sort.wrong {

  background:
    color-mix(
      in srgb,
      var(--omnia-error, #B83A3A) 10%,
      white
    )
    !important;

  border-color:
    var(--omnia-error, #B83A3A)
    !important;
}

/* =======================================================
   OMNIA_WRITE_DISCOVERY_SELECTED_STATE_V1

   Immediate visual confirmation before answer checking.
   Uses OMNIA Educational Design System tokens.
   ======================================================= */

.mr3-write-discover.selected:not(.correct):not(.wrong) {

  background:
    var(--omnia-selected-bg, #EAF3FF)
    !important;

  border-color:
    var(--omnia-accent, #356DFF)
    !important;

  color:
    var(--omnia-title, #23436A)
    !important;

  box-shadow:
    inset 0 0 0 1px
    var(--omnia-accent, #356DFF);

  font-weight: 700;
}


.mr3-write-discover.selected:not(.correct):not(.wrong):hover {

  background:
    var(--omnia-selected-bg, #EAF3FF)
    !important;
}

/* =======================================================
   OMNIA_BIBLE_PRECHECK_SELECTED_STATE_V1

   Visible learner selection before answer checking.
   Correct / wrong colors remain reserved for Check.
   ======================================================= */

.mr3-bible-answer.selected:not(.correct):not(.wrong) {

  background:
    var(--omnia-selected-bg, #EAF3FF)
    !important;

  border-color:
    var(--omnia-accent, #356DFF)
    !important;

  color:
    var(--omnia-title, #23436A)
    !important;

  box-shadow:
    inset 0 0 0 1px
    var(--omnia-accent, #356DFF);

  font-weight: 700;
}

.mr3-bible-answer.selected:not(.correct):not(.wrong):hover {

  background:
    var(--omnia-selected-bg, #EAF3FF)
    !important;
}



/* OMNIA_LUNCH_RUSH_CANONICAL_V1 */

.omnia-play-audio-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.omnia-play-audio-controls button,
.omnia-play-prompt-listen {
  min-height: 42px;
  padding: 0.55rem 0.8rem;
  border: 1px solid currentColor;
  border-radius: 0.7rem;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.omnia-play-food-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 92px;
  max-height: 92px;
  object-fit: contain;
  margin: 0 auto;
}

.omnia-play-item-emoji:has(
  .omnia-play-food-image
),
.omnia-play-tap-emoji:has(
  .omnia-play-food-image
) {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
}

@media (max-width: 700px) {
  .omnia-play-food-image {
    max-width: 72px;
    max-height: 72px;
  }
}


/* =======================================================
   OMNIA HOMEWORK MR3 VISUAL POLISH V1
   Scoped to MR3 Homework
   ======================================================= */

.mr3-hw-stage {
  display: grid;
  gap: 18px;
}

.mr3-hw-panel {
  padding: 28px;
}

.mr3-hw-panel h3 {
  margin: 0 0 8px;
  font-size: 1.3rem;
  color: var(--primary);
}

.mr3-hw-panel > p {
  margin: 0 0 20px;
  line-height: 1.55;
  opacity: .72;
}


/* Meal cards */

.mr3-hw-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.mr3-hw-meal-choice {
  width: 100%;
  padding: 18px;
  color: inherit;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.mr3-hw-meal-choice:hover {
  transform: translateY(-2px);
  border-color: rgba(53,109,255,.28);
  box-shadow: 0 10px 24px rgba(15,23,42,.07);
}


/* Food cards */

.mr3-hw-food-grid {
  margin-bottom: 18px;
}

.mr3-hw-food-choice {
  position: relative;
  padding: 16px;
  text-align: center;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.mr3-hw-food-choice:hover {
  transform: translateY(-2px);
}

.mr3-hw-food-choice input {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 19px;
  height: 19px;
  accent-color: var(--success);
}

.mr3-hw-food-choice strong {
  font-size: 1rem;
  text-transform: capitalize;
}


/* Own food */

.mr3-hw-own-food {
  display: grid;
  gap: 8px;
  max-width: 560px;
  font-weight: 800;
}

.mr3-hw-own-food input,
.mr3-hw-personal-input {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid rgba(15,23,42,.11);
  border-radius: 13px;
  padding: 13px 14px;
  font: inherit;
  background: white;
}

.mr3-hw-own-food input:focus,
.mr3-hw-personal-input:focus,
.mr3-hw-writing-area:focus {
  outline: none;
  border-color: rgba(53,109,255,.62);
  box-shadow: 0 0 0 4px rgba(53,109,255,.08);
}


/* Writing */

.mr3-hw-help-card {
  margin: 14px 0 18px;
  padding: 16px 18px;
  border-radius: 15px;
  background: rgba(53,109,255,.055);
  border: 1px solid rgba(53,109,255,.11);
}

.mr3-hw-help-card p {
  margin: 6px 0;
  color: var(--primary);
  font-weight: 760;
}

.mr3-hw-writing-area {
  display: block;
  width: 100%;
  min-height: 220px;
  box-sizing: border-box;
  margin-top: 16px;
  padding: 16px;
  resize: vertical;
  border: 2px solid rgba(15,23,42,.11);
  border-radius: 15px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.55;
  background: white;
}

#mr3-hw-count {
  margin: 10px 0 0;
  font-weight: 850;
  color: var(--primary);
}


/* Personal idea */

.mr3-hw-personal-input {
  max-width: 100%;
  min-height: 48px;
}


/* Review checklist */

.mr3-hw-review-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0;
  padding: 12px 14px;
  border-radius: 13px;
  background: rgba(15,23,42,.025);
  line-height: 1.4;
  cursor: pointer;
}

.mr3-hw-review-item input {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  accent-color: var(--success);
}


/* Final actions */

#mr3-hw-said {
  margin-top: 16px;
  margin-right: 10px;
}

.mr3-hw-finish {
  margin-top: 16px;
}

#mr3-hw-feedback {
  margin-top: 16px;
}


/* Tablet / mobile */

@media (max-width: 760px) {

  .mr3-hw-meal-grid {
    grid-template-columns: 1fr;
  }

  .mr3-hw-meal-choice {
    min-height: 110px;
  }

  .mr3-hw-food-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  #mr3-hw-said,
  .mr3-hw-finish {
    width: 100%;
    margin:
      10px 0 0;
  }
}



/* OMNIA HOMEWORK WRITING AREA V2 */

.mr3-hw-panel .mr3-hw-writing-area {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  min-height: 270px !important;

  box-sizing: border-box;

  margin:
    18px 0
    10px !important;

  padding:
    18px 20px !important;

  border:
    2px solid
    rgba(15,23,42,.12);

  border-radius:
    16px;

  font: inherit;
  font-size: 1.05rem;
  line-height: 1.6;

  resize: vertical;

  background: #fff;
}

.mr3-hw-panel .mr3-hw-writing-area:focus {
  outline: none;

  border-color:
    rgba(53,109,255,.68);

  box-shadow:
    0 0 0 4px
    rgba(53,109,255,.08);
}

#mr3-hw-help {
  display: block;
  margin-bottom: 4px;
}

@media (max-width: 760px) {

  .mr3-hw-panel .mr3-hw-writing-area {
    min-height: 240px !important;
  }
}

/* OMNIA_LESSON_INTRO_V1 */

.lesson-content--intro {
  padding: 0;
}


.lesson-intro-screen {
  position: relative;
  isolation: isolate;
  min-height: clamp(650px, 88vh, 860px);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(18px, 4vw, 48px);
  border-radius: 30px;
  background:
    radial-gradient(
      circle at 14% 12%,
      rgba(255, 255, 255, 0.30),
      transparent 40%
    ),
    radial-gradient(
      circle at 90% 86%,
      rgba(255, 255, 255, 0.20),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      #2F6FED 0%,
      #7C5CFC 55%,
      #FF9B6A 100%
    );
}


.lesson-intro-orb {
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  filter: blur(2px);
  pointer-events: none;
}


.lesson-intro-orb-one {
  width: 240px;
  height: 240px;
  top: -70px;
  right: 9%;
  background:
    rgba(255, 214, 153, 0.35);
}


.lesson-intro-orb-two {
  width: 300px;
  height: 300px;
  bottom: -120px;
  left: 2%;
  background:
    rgba(255, 255, 255, 0.22);
}


.lesson-intro-card {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(320px, 0.92fr);
  gap: clamp(30px, 5vw, 68px);
  align-items: center;
  padding: clamp(28px, 5vw, 64px);
  border:
    1px solid rgba(255, 255, 255, 0.88);
  border-radius: 30px;
  background:
    rgba(255, 255, 255, 0.92);
  box-shadow:
    0 28px 80px rgba(46, 22, 90, 0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}


.lesson-intro-copy {
  min-width: 0;
}


.lesson-intro-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 13px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: #EEE8FF;
  color: #5B3DF5;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}


.lesson-intro-unit {
  margin-bottom: 8px;
  color: #7A6BA6;
  font-size: clamp(0.92rem, 1.4vw, 1.06rem);
  font-weight: 700;
}


.lesson-intro-title {
  max-width: 720px;
  margin: 0;
  color: #2E1F6E;
  font-size: clamp(2.55rem, 6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}


.lesson-intro-rule {
  width: 72px;
  height: 5px;
  margin: 24px 0;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      #2F6FED,
      #FF9B6A
    );
}


.lesson-intro-objectives-heading {
  margin: 0 0 14px;
  color: #463A73;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.3;
}


.lesson-intro-objectives {
  display: grid;
  gap: 11px;
  padding: 0;
  margin: 0 0 28px;
  list-style: none;
}


.lesson-intro-objective {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border:
    1px solid rgba(124, 92, 252, 0.18);
  border-radius: 16px;
  background:
    rgba(246, 243, 255, 0.78);
}


.lesson-intro-objective-number {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #ffffff;
  color: #6D4CF2;
  box-shadow:
    0 5px 14px rgba(46, 22, 90, 0.1);
  font-size: 0.78rem;
  font-weight: 900;
}


.lesson-intro-objective-text {
  color: #40365F;
  font-size: clamp(0.94rem, 1.45vw, 1.03rem);
  font-weight: 650;
  line-height: 1.48;
}


.lesson-intro-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-width: 190px;
  min-height: 56px;
  padding: 14px 24px;
  border: 0;
  border-radius: 17px;
  background:
    linear-gradient(
      135deg,
      #5B3DF5 0%,
      #2F6FED 100%
    );
  color: #ffffff;
  box-shadow:
    0 14px 30px rgba(91, 61, 245, 0.30);
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  font-weight: 850;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}


.lesson-intro-start:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 36px rgba(91, 61, 245, 0.36);
  filter: brightness(1.03);
}


.lesson-intro-start:active {
  transform: translateY(0);
}


.lesson-intro-start:focus-visible {
  outline:
    4px solid rgba(91, 61, 245, 0.25);
  outline-offset: 4px;
}


.lesson-intro-start-arrow {
  font-size: 1.35rem;
  line-height: 1;
  transition:
    transform 180ms ease;
}


.lesson-intro-start:hover
.lesson-intro-start-arrow {
  transform: translateX(4px);
}


.lesson-intro-visual {
  min-width: 0;
}


.lesson-intro-image-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 26px;
  background: #e2e8f0;
  box-shadow:
    0 24px 54px rgba(15, 23, 42, 0.17);
  transform: rotate(1.25deg);
}


.lesson-intro-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.lesson-intro-image-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 0 24px;
  font-size: .92rem;
}


.lesson-intro-image-badge {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border:
    4px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  background: #2E1F6E;
  color: #ffffff;
  box-shadow:
    0 10px 24px rgba(46, 22, 90, 0.32);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}


@media (max-width: 840px) {

  .lesson-intro-screen {
    min-height: auto;
    padding: 16px;
    border-radius: 22px;
  }


  .lesson-intro-card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 26px 20px 22px;
    border-radius: 24px;
  }


  .lesson-intro-visual {
    order: -1;
  }


  .lesson-intro-image-frame {
    width: min(520px, 100%);
    margin: 0 auto;
    aspect-ratio: 16 / 10;
    border-radius: 21px;
    transform: none;
  }


  .lesson-intro-title {
    font-size: clamp(2.35rem, 12vw, 4rem);
  }


  .lesson-intro-start {
    width: 100%;
  }

}


@media (prefers-reduced-motion: reduce) {

  .lesson-intro-start,
  .lesson-intro-start-arrow {
    transition: none;
  }

}



/* OMNIA_HIDDEN_STATE_FIX_V1
   Preserve native hidden behavior against component display rules.
*/
.lesson-header[hidden],
.progress-shell[hidden],
.section-nav[hidden],
.lesson-footer[hidden] {
  display: none !important;
}

/* ==========================================================
   OMNIA_MASTER_VISUAL_SYSTEM_V1
   Shared presentation layer for the A2 Master Lesson.

   Presentation only:
   - no pedagogical logic
   - no content changes
   - no runtime API
   - no renderer replacement
   ========================================================== */


/* ----------------------------------------------------------
   1. GLOBAL VISUAL TOKENS
   ---------------------------------------------------------- */

:root {
  --omnia-shell-accent: #356dff;
  --omnia-shell-accent-2: #635bff;

  --omnia-shell-soft:
    rgba(53, 109, 255, 0.085);

  --omnia-shell-border:
    rgba(53, 109, 255, 0.20);

  --omnia-shell-glow:
    rgba(53, 109, 255, 0.14);

  --omnia-shell-glow-strong:
    rgba(53, 109, 255, 0.22);

  --omnia-shell-surface:
    rgba(255, 255, 255, 0.90);

  --omnia-shell-surface-strong:
    rgba(255, 255, 255, 0.97);

  --omnia-shell-text:
    #172033;

  --omnia-shell-muted:
    #667085;
}


/* ----------------------------------------------------------
   2. SECTION PERSONALITY
   Subtle—not a redesign of each activity.
   ---------------------------------------------------------- */

html[data-omnia-section="word_bank"] {
  --omnia-shell-accent: #356dff;
  --omnia-shell-accent-2: #4f46e5;
  --omnia-shell-soft: rgba(53, 109, 255, 0.09);
  --omnia-shell-border: rgba(53, 109, 255, 0.22);
  --omnia-shell-glow: rgba(53, 109, 255, 0.14);
  --omnia-shell-glow-strong: rgba(53, 109, 255, 0.24);
  /* OMNIA_SLIDE_IDENTITY_HEADINGS_V1 */
  --omnia-text-title: #2450d6;
}


html[data-omnia-section="lets_read"] {
  --omnia-shell-accent: #0f8b8d;
  --omnia-shell-accent-2: #14b8a6;
  --omnia-shell-soft: rgba(15, 139, 141, 0.09);
  --omnia-shell-border: rgba(15, 139, 141, 0.22);
  --omnia-shell-glow: rgba(15, 139, 141, 0.14);
  --omnia-shell-glow-strong: rgba(15, 139, 141, 0.23);
  --omnia-text-title: #0b6b6d;
}


html[data-omnia-section="lets_listen"] {
  --omnia-shell-accent: #7357d9;
  --omnia-shell-accent-2: #8b5cf6;
  --omnia-shell-soft: rgba(115, 87, 217, 0.09);
  --omnia-shell-border: rgba(115, 87, 217, 0.22);
  --omnia-shell-glow: rgba(115, 87, 217, 0.14);
  --omnia-shell-glow-strong: rgba(115, 87, 217, 0.23);
  --omnia-text-title: #5c3fc4;
}


html[data-omnia-section="lets_speak"] {
  --omnia-shell-accent: #e35f5f;
  --omnia-shell-accent-2: #f97373;
  --omnia-shell-soft: rgba(227, 95, 95, 0.085);
  --omnia-shell-border: rgba(227, 95, 95, 0.21);
  --omnia-shell-glow: rgba(227, 95, 95, 0.13);
  --omnia-shell-glow-strong: rgba(227, 95, 95, 0.22);
  --omnia-text-title: #c43e3e;
}


html[data-omnia-section="lets_write"] {
  --omnia-shell-accent: #5361cf;
  --omnia-shell-accent-2: #7c5ce4;
  --omnia-shell-soft: rgba(83, 97, 207, 0.085);
  --omnia-shell-border: rgba(83, 97, 207, 0.21);
  --omnia-shell-glow: rgba(83, 97, 207, 0.13);
  --omnia-shell-glow-strong: rgba(83, 97, 207, 0.22);
  --omnia-text-title: #3d4bb8;
}


html[data-omnia-section="lets_bible_it"] {
  --omnia-shell-accent: #9a6a13;
  --omnia-shell-accent-2: #c68b22;
  --omnia-shell-soft: rgba(198, 139, 34, 0.10);
  --omnia-shell-border: rgba(154, 106, 19, 0.22);
  --omnia-shell-glow: rgba(154, 106, 19, 0.12);
  --omnia-shell-glow-strong: rgba(154, 106, 19, 0.21);
  --omnia-text-title: #7d5610;
}


html[data-omnia-section="lets_play"] {
  --omnia-shell-accent: #e56a18;
  --omnia-shell-accent-2: #f59e0b;
  --omnia-shell-soft: rgba(229, 106, 24, 0.09);
  --omnia-shell-border: rgba(229, 106, 24, 0.22);
  --omnia-shell-glow: rgba(229, 106, 24, 0.13);
  --omnia-shell-glow-strong: rgba(229, 106, 24, 0.23);
  --omnia-text-title: #c2570f;
}


html[data-omnia-section="test_your_knowledge"] {
  --omnia-shell-accent: #7a4dd8;
  --omnia-shell-accent-2: #a855f7;
  --omnia-shell-soft: rgba(122, 77, 216, 0.09);
  --omnia-shell-border: rgba(122, 77, 216, 0.22);
  --omnia-shell-glow: rgba(122, 77, 216, 0.13);
  --omnia-shell-glow-strong: rgba(122, 77, 216, 0.23);
  --omnia-text-title: #6538bf;
}


html[data-omnia-section="homework"] {
  --omnia-shell-accent: #137d75;
  --omnia-shell-accent-2: #0d9488;
  --omnia-shell-soft: rgba(19, 125, 117, 0.09);
  --omnia-shell-border: rgba(19, 125, 117, 0.22);
  --omnia-shell-glow: rgba(19, 125, 117, 0.13);
  --omnia-shell-glow-strong: rgba(19, 125, 117, 0.23);
  --omnia-text-title: #0f665f;
}


html[data-omnia-section="complete"] {
  --omnia-shell-accent: #18864b;
  --omnia-shell-accent-2: #22a35a;
  --omnia-shell-soft: rgba(24, 134, 75, 0.09);
  --omnia-shell-border: rgba(24, 134, 75, 0.22);
  --omnia-shell-glow: rgba(24, 134, 75, 0.13);
  --omnia-shell-glow-strong: rgba(24, 134, 75, 0.23);
  --omnia-text-title: #146e3e;
}


/* ----------------------------------------------------------
   3. PAGE
   ---------------------------------------------------------- */

body {
  background:
    radial-gradient(
      circle at 8% 5%,
      rgba(53, 109, 255, 0.075),
      transparent 24rem
    ),
    radial-gradient(
      circle at 92% 18%,
      rgba(16, 185, 129, 0.055),
      transparent 26rem
    ),
    linear-gradient(
      180deg,
      #f8faff 0%,
      #f4f7fb 100%
    );
  background-attachment: fixed;
}


.app-shell {
  width: min(1220px, 94%);
  margin:
    clamp(20px, 3vw, 36px)
    auto
    64px;
}


/* ----------------------------------------------------------
   4. LESSON HEADER
   ---------------------------------------------------------- */

.lesson-header {
  position: relative;
  overflow: hidden;
  align-items: center;
  margin-bottom: 16px;
  padding:
    clamp(20px, 3vw, 30px)
    clamp(20px, 3.3vw, 36px);
  border:
    1px solid
    rgba(255, 255, 255, 0.92);
  border-radius: 24px;
  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,0.98),
      rgba(255,255,255,0.87)
    );
  box-shadow:
    0 13px 40px
    rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


.lesson-header::after {
  content: "";
  position: absolute;
  right: -35px;
  top: -58px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background:
    var(--omnia-shell-soft);
  pointer-events: none;
}


.lesson-heading {
  position: relative;
  z-index: 1;
}


.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color:
    var(--omnia-shell-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
}


.brand::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      var(--omnia-shell-accent),
      var(--omnia-shell-accent-2)
    );
  box-shadow:
    0 0 0 5px
    var(--omnia-shell-soft);
}


.unit-name {
  margin-top: 10px;
  color: #667085;
  font-size: 14px;
  font-weight: 650;
}


.lesson-header h1 {
  margin-top: 7px;
  color: #172033;
  font-size:
    clamp(30px, 4vw, 46px);
  letter-spacing: -0.035em;
}


/* ----------------------------------------------------------
   5. PROGRESS
   ---------------------------------------------------------- */

.progress-shell {
  height: 9px;
  margin:
    0 4px
    18px;
  border:
    1px solid
    rgba(148, 163, 184, 0.14);
  background:
    rgba(226, 232, 240, 0.70);
  box-shadow:
    inset 0 1px 2px
    rgba(15, 23, 42, 0.035);
}


.progress-bar {
  background:
    linear-gradient(
      90deg,
      var(--omnia-shell-accent),
      var(--omnia-shell-accent-2)
    );
  box-shadow:
    0 0 14px
    var(--omnia-shell-glow-strong);
  transition:
    width .35s ease,
    background .25s ease;
}


/* ----------------------------------------------------------
   6. SECTION NAV
   ---------------------------------------------------------- */

.section-nav {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 18px;
}


.section-tab {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  min-height: 48px;
  gap: 9px;
  padding: 9px 12px;
  border:
    1px solid
    rgba(203, 213, 225, 0.78);
  border-radius: 14px;
  background:
    rgba(255,255,255,0.84);
  color: #344054;
  box-shadow:
    0 3px 9px
    rgba(15, 23, 42, 0.025);
  font-size: 12.5px;
  font-weight: 680;
  line-height: 1.15;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    color .16s ease,
    box-shadow .16s ease;
}


.section-tab:hover {
  transform:
    translateY(-1px);
  border-color:
    var(--omnia-shell-border);
  background:
    var(--omnia-shell-surface-strong);
  box-shadow:
    0 7px 18px
    rgba(15, 23, 42, 0.07);
}


.section-tab.active {
  transform:
    translateY(-1px);
  border-color:
    var(--omnia-shell-border);
  background:
    linear-gradient(
      135deg,
      var(--omnia-shell-soft),
      rgba(255,255,255,0.96)
    );
  color:
    var(--omnia-shell-accent);
  box-shadow:
    0 8px 22px
    var(--omnia-shell-glow);
}


.section-tab.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  border-radius:
    999px 999px 0 0;
  background:
    linear-gradient(
      90deg,
      var(--omnia-shell-accent),
      var(--omnia-shell-accent-2)
    );
}


.tab-number {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background:
    #eef2f7;
  color: #475467;
  font-size: 10px;
  transition:
    background .16s ease,
    color .16s ease,
    transform .16s ease;
}


.section-tab.active
.tab-number {
  background:
    linear-gradient(
      135deg,
      var(--omnia-shell-accent),
      var(--omnia-shell-accent-2)
    );
  color: #fff;
  box-shadow:
    0 5px 12px
    var(--omnia-shell-glow);
}


/* ----------------------------------------------------------
   7. MAIN LESSON SURFACE
   ---------------------------------------------------------- */

.lesson-content:not(.lesson-content--intro) {
  position: relative;
  overflow: hidden;
  border:
    1px solid
    var(--omnia-shell-border);
  border-radius: 26px;
  background:
    rgba(255, 255, 255, 0.96);
  box-shadow:
    0 20px 52px
    rgba(15, 23, 42, 0.075),
    0 3px 12px
    var(--omnia-shell-glow);
  transition:
    border-color .25s ease,
    box-shadow .25s ease;
}


.lesson-content:not(.lesson-content--intro)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 5px;
  background:
    linear-gradient(
      90deg,
      var(--omnia-shell-accent),
      var(--omnia-shell-accent-2)
    );
  opacity: .92;
}


/* Section introductions */

.section-intro,
.wb-mr3-intro,
.depth-v2-header,
.tyk-header,
.hw-header,
.complete-hero {
  position: relative;
}


.section-intro .eyebrow {
  color:
    var(--omnia-shell-accent);
}


.section-purpose {
  max-width: 760px;
  color: #667085;
}


/* Existing shared icon system follows active section */

.omnia-section-icon-host {
  --omnia-section-icon-color:
    var(--omnia-shell-accent);
  --omnia-section-icon-bg:
    var(--omnia-shell-soft);
  --omnia-section-icon-border:
    var(--omnia-shell-border);
}


/* ----------------------------------------------------------
   8. GENERIC CARD DEPTH
   Only common safe containers.
   ---------------------------------------------------------- */

.reading-card,
.listen-panel,
.speak-panel,
.write-panel,
.bible-panel,
.tyk-card,
.hw-speech-card,
.hw-optional-card,
.complete-action-card {
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.reading-card:hover,
.listen-panel:hover,
.speak-panel:hover,
.write-panel:hover,
.bible-panel:hover,
.tyk-card:hover,
.hw-speech-card:hover,
.hw-optional-card:hover,
.complete-action-card:hover {
  border-color:
    var(--omnia-shell-border);
  box-shadow:
    0 12px 28px
    rgba(15, 23, 42, 0.07);
}


/* ----------------------------------------------------------
   9. FOOTER
   ---------------------------------------------------------- */

.lesson-footer {
  margin-top: 18px;
  padding: 10px;
  border:
    1px solid
    rgba(203, 213, 225, 0.72);
  border-radius: 18px;
  background:
    rgba(255,255,255,0.84);
  box-shadow:
    0 8px 25px
    rgba(15, 23, 42, 0.055);
  backdrop-filter:
    blur(12px);
  -webkit-backdrop-filter:
    blur(12px);
}


.nav-button {
  min-height: 46px;
  padding: 11px 18px;
  border:
    1px solid
    rgba(203,213,225,0.92);
  border-radius: 13px;
  background:
    #ffffff;
  color: #344054;
  box-shadow:
    0 3px 9px
    rgba(15,23,42,0.035);
}


.nav-button:hover:not(:disabled) {
  transform:
    translateY(-1px);
  border-color:
    var(--omnia-shell-border);
  box-shadow:
    0 8px 20px
    rgba(15,23,42,0.075);
}


.nav-button.primary {
  border-color:
    transparent;
  background:
    linear-gradient(
      135deg,
      var(--omnia-shell-accent),
      var(--omnia-shell-accent-2)
    );
  color: #ffffff;
  box-shadow:
    0 8px 19px
    var(--omnia-shell-glow-strong);
}


.nav-button.primary:hover:not(:disabled) {
  transform:
    translateY(-2px);
  box-shadow:
    0 12px 26px
    var(--omnia-shell-glow-strong);
}


.nav-button:disabled {
  opacity: .38;
  box-shadow: none;
}


.section-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 34px;
  padding: 5px 11px;
  border-radius: 999px;
  background:
    var(--omnia-shell-soft);
  color:
    var(--omnia-shell-accent);
  font-size: 12px;
  font-weight: 850;
}


/* ----------------------------------------------------------
   10. FOCUS ACCESSIBILITY
   ---------------------------------------------------------- */

.section-tab:focus-visible,
.nav-button:focus-visible {
  outline:
    3px solid
    var(--omnia-shell-border);
  outline-offset: 3px;
}


/* ----------------------------------------------------------
   11. RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 900px) {

  .section-nav {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

}


@media (max-width: 650px) {

  .app-shell {
    width: 94%;
    margin-top: 16px;
  }


  .lesson-header {
    display: block;
    padding: 20px 18px;
    border-radius: 20px;
  }


  .lesson-header h1 {
    font-size:
      clamp(28px, 9vw, 39px);
  }


  .section-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding:
      2px 2px
      9px;
    scroll-snap-type:
      x proximity;
    scrollbar-width: thin;
  }


  .section-tab {
    flex: 0 0 auto;
    width: auto;
    min-width: 150px;
    scroll-snap-align: start;
  }


  .lesson-content:not(.lesson-content--intro) {
    border-radius: 21px;
  }


  .lesson-footer {
    grid-template-columns:
      1fr auto 1fr;
    gap: 7px;
    padding: 8px;
  }


  .nav-button {
    min-height: 43px;
    padding: 10px 13px;
    font-size: 13px;
  }

}


/* ----------------------------------------------------------
   12. REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .progress-bar,
  .section-tab,
  .tab-number,
  .lesson-content,
  .nav-button,
  .reading-card,
  .listen-panel,
  .speak-panel,
  .write-panel,
  .bible-panel,
  .tyk-card,
  .hw-speech-card,
  .hw-optional-card,
  .complete-action-card {
    transition: none !important;
  }

}

/* OMNIA_MASTER_VISUAL_SYSTEM_V1 */

/* ==========================================================
   OMNIA_MASTER_VISUAL_SYSTEM_V1_INTENSITY_130
   Increase shell color intensity by ~30%
   Presentation only.
   ========================================================== */

:root {
  --omnia-shell-soft: rgba(53, 109, 255, 0.110);
  --omnia-shell-border: rgba(53, 109, 255, 0.260);
  --omnia-shell-glow: rgba(53, 109, 255, 0.180);
  --omnia-shell-glow-strong: rgba(53, 109, 255, 0.290);
}

html[data-omnia-section="word_bank"] {
  --omnia-shell-soft: rgba(53, 109, 255, 0.117);
  --omnia-shell-border: rgba(53, 109, 255, 0.286);
  --omnia-shell-glow: rgba(53, 109, 255, 0.182);
  --omnia-shell-glow-strong: rgba(53, 109, 255, 0.312);
}

html[data-omnia-section="lets_read"] {
  --omnia-shell-soft: rgba(15, 139, 141, 0.117);
  --omnia-shell-border: rgba(15, 139, 141, 0.286);
  --omnia-shell-glow: rgba(15, 139, 141, 0.182);
  --omnia-shell-glow-strong: rgba(15, 139, 141, 0.299);
}

html[data-omnia-section="lets_listen"] {
  --omnia-shell-soft: rgba(115, 87, 217, 0.117);
  --omnia-shell-border: rgba(115, 87, 217, 0.286);
  --omnia-shell-glow: rgba(115, 87, 217, 0.182);
  --omnia-shell-glow-strong: rgba(115, 87, 217, 0.299);
}

html[data-omnia-section="lets_speak"] {
  --omnia-shell-soft: rgba(227, 95, 95, 0.111);
  --omnia-shell-border: rgba(227, 95, 95, 0.273);
  --omnia-shell-glow: rgba(227, 95, 95, 0.169);
  --omnia-shell-glow-strong: rgba(227, 95, 95, 0.286);
}

html[data-omnia-section="lets_write"] {
  --omnia-shell-soft: rgba(83, 97, 207, 0.111);
  --omnia-shell-border: rgba(83, 97, 207, 0.273);
  --omnia-shell-glow: rgba(83, 97, 207, 0.169);
  --omnia-shell-glow-strong: rgba(83, 97, 207, 0.286);
}

html[data-omnia-section="lets_bible_it"] {
  --omnia-shell-soft: rgba(198, 139, 34, 0.130);
  --omnia-shell-border: rgba(154, 106, 19, 0.286);
  --omnia-shell-glow: rgba(154, 106, 19, 0.156);
  --omnia-shell-glow-strong: rgba(154, 106, 19, 0.273);
}

html[data-omnia-section="lets_play"] {
  --omnia-shell-soft: rgba(229, 106, 24, 0.117);
  --omnia-shell-border: rgba(229, 106, 24, 0.286);
  --omnia-shell-glow: rgba(229, 106, 24, 0.169);
  --omnia-shell-glow-strong: rgba(229, 106, 24, 0.299);
}

html[data-omnia-section="test_your_knowledge"] {
  --omnia-shell-soft: rgba(122, 77, 216, 0.117);
  --omnia-shell-border: rgba(122, 77, 216, 0.286);
  --omnia-shell-glow: rgba(122, 77, 216, 0.169);
  --omnia-shell-glow-strong: rgba(122, 77, 216, 0.299);
}

html[data-omnia-section="homework"] {
  --omnia-shell-soft: rgba(19, 125, 117, 0.117);
  --omnia-shell-border: rgba(19, 125, 117, 0.286);
  --omnia-shell-glow: rgba(19, 125, 117, 0.169);
  --omnia-shell-glow-strong: rgba(19, 125, 117, 0.299);
}

html[data-omnia-section="complete"] {
  --omnia-shell-soft: rgba(24, 134, 75, 0.117);
  --omnia-shell-border: rgba(24, 134, 75, 0.286);
  --omnia-shell-glow: rgba(24, 134, 75, 0.169);
  --omnia-shell-glow-strong: rgba(24, 134, 75, 0.299);
}

/* Slightly stronger active-state presentation */
.section-tab.active {
  box-shadow:
    0 10px 24px var(--omnia-shell-glow-strong);
}

.progress-bar {
  box-shadow:
    0 0 18px var(--omnia-shell-glow-strong);
}

.nav-button.primary {
  box-shadow:
    0 10px 24px var(--omnia-shell-glow-strong);
}

.section-counter {
  box-shadow:
    inset 0 0 0 1px var(--omnia-shell-border);
}


/* ==========================================================
   OMNIA_SECTION_COLOR_BINDING_V1
   Make cards, chips and buttons inherit the active section color.
   Presentation only.
   ========================================================== */

/* -----------------------------------
   1. Generic tinted cards
   ----------------------------------- */

:is(
  .reading-card,
  .listen-panel,
  .listen-complete-card,
  .listen-detail-card,
  .listen-production-card,
  .speak-panel,
  .speak-frame-card,
  .repeat-card,
  .voice-compare-card,
  .write-panel,
  .write-model-card,
  .write-picture-card,
  .final-write-card,
  .bible-panel,
  .bible-chunk-card,
  .bible-reflection-card,
  .bible-say-aloud-card,
  .tyk-card,
  .tyk-results-card,
  .hw-speech-card,
  .hw-optional-card,
  .complete-action-card,
  .complete-shell,
  .meal-card,
  .preference-card,
  .gap-card,
  .gap-question-card,
  .grammar-rule-card,
  .self-check-card,
  .transcript-card,
  .record-stage-title,
  .recorder-card,
  .line-completion-card
) {
  border-color: var(--omnia-shell-border) !important;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.96) 0%,
      var(--omnia-shell-soft) 100%
    ) !important;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.05);
}

/* -----------------------------------
   2. Let's Play / game cards
   ----------------------------------- */

:is(
  .omnia-play-intro-card,
  .omnia-play-level-card,
  .omnia-play-results-card,
  .omnia-play-modal-card,
  .of-intro-card,
  .of-results-card,
  .of-modal-card,
  .of-customer-card,
  .of-food-card,
  .of-rush-card,
  .of-stage-preview,
  .mr3-hw-help-card,
  .mr3-hw-panel
) {
  border-color: var(--omnia-shell-border) !important;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.97) 0%,
      var(--omnia-shell-soft) 100%
    ) !important;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.06);
}

/* -----------------------------------
   3. Stage labels / chips / small pills
   ----------------------------------- */

:is(
  .complete-section-label,
  .of-stage-label,
  .of-stage-heading,
  .self-check-title,
  .meal-card-title,
  .speak-final-stage-number,
  .speak-final-stage-title,
  .record-stage-title,
  .tyk-header .eyebrow,
  .hw-header .eyebrow,
  .depth-v2-header .eyebrow,
  .section-intro .eyebrow,
  .wb-mr3-intro .eyebrow
) {
  color: var(--omnia-shell-accent) !important;
}

:is(
  .omnia-play-hero-icon,
  .complete-section-label,
  .of-stage-label
) {
  background: var(--omnia-shell-soft) !important;
  color: var(--omnia-shell-accent) !important;
  border: 1px solid var(--omnia-shell-border) !important;
}

/* -----------------------------------
   4. Buttons
   ----------------------------------- */

/* Primary / call-to-action buttons */
:is(
  .nav-button.primary,
  .of-customer-card button,
  .of-modal-card button,
  .omnia-play-modal-card button,
  .complete-action-card button,
  .hw-speech-card button,
  .hw-optional-card button
) {
  background:
    linear-gradient(
      135deg,
      var(--omnia-shell-accent),
      var(--omnia-shell-accent-2)
    ) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow:
    0 10px 24px var(--omnia-shell-glow-strong) !important;
}

/* Secondary buttons / toggles / utility controls */
:is(
  .nav-button:not(.primary),
  .dialogue-play-button,
  .audio-chip,
  .audio-button,
  .mode-button,
  .toggle-button,
  .game-toggle,
  .of-game-shell button:not(.primary),
  .omnia-play-shell button:not(.primary)
) {
  border-color: var(--omnia-shell-border) !important;
  background: rgba(255,255,255,0.96) !important;
  color: var(--omnia-shell-accent) !important;
  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.05);
}

/* -----------------------------------
   5. Numeric / stat boxes
   ----------------------------------- */

:is(
  .of-results-card,
  .omnia-play-results-card,
  .self-check-card,
  .tyk-results-card
) strong,
:is(
  .of-results-card,
  .omnia-play-results-card,
  .self-check-card,
  .tyk-results-card
) .score,
:is(
  .of-results-card,
  .omnia-play-results-card,
  .self-check-card,
  .tyk-results-card
) .points {
  color: var(--omnia-shell-accent) !important;
}

/* -----------------------------------
   6. Headings inside active cards
   ----------------------------------- */

:is(
  .omnia-play-intro-card h2,
  .omnia-play-level-card h2,
  .of-intro-card h2,
  .of-results-card h2,
  .reading-card h3,
  .listen-panel h3,
  .speak-panel h3,
  .write-panel h3,
  .bible-panel h3,
  .tyk-card h3,
  .hw-speech-card h3,
  .complete-action-card h3
) {
  color: var(--omnia-shell-accent) !important;
}

/* -----------------------------------
   7. Hover state for tinted cards
   ----------------------------------- */

:is(
  .reading-card,
  .listen-panel,
  .speak-panel,
  .write-panel,
  .bible-panel,
  .tyk-card,
  .hw-speech-card,
  .hw-optional-card,
  .complete-action-card,
  .omnia-play-intro-card,
  .omnia-play-level-card,
  .omnia-play-results-card,
  .of-intro-card,
  .of-results-card,
  .of-modal-card,
  .of-customer-card,
  .of-food-card
):hover {
  border-color: var(--omnia-shell-border) !important;
  box-shadow:
    0 14px 30px var(--omnia-shell-glow) !important;
}

/* -----------------------------------
   8. Selected / active small cards
   ----------------------------------- */

:is(
  .omnia-play-level-card.active,
  .of-customer-card.active,
  .of-food-card.active,
  .meal-card.active,
  .preference-card.active
) {
  border-color: var(--omnia-shell-accent) !important;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.98) 0%,
      var(--omnia-shell-soft) 100%
    ) !important;
  box-shadow:
    0 0 0 2px var(--omnia-shell-border),
    0 12px 28px var(--omnia-shell-glow) !important;
}


/* ==========================================================
   OMNIA_SOLID_LESSON_HEADER_V1
   Permanent brand header.
   Section personality remains in tabs/cards/buttons/progress.
   ========================================================== */

.lesson-header {
  background: #214b82 !important;
  border-color: #214b82 !important;

  box-shadow:
    0 14px 34px
    rgba(20, 50, 90, 0.20) !important;
}


/* Decorative circle stays subtle */
.lesson-header::after {
  background:
    rgba(255, 255, 255, 0.10) !important;
}


/* OMNIA OPEN ACADEMY */
.lesson-header .brand {
  color: #ffffff !important;
}


/* Keep the small brand dot warm */
.lesson-header .brand::before {
  background: #ff9f24 !important;

  box-shadow:
    0 0 0 5px
    rgba(255, 255, 255, 0.12) !important;
}


/* Unit name */
.lesson-header .unit-name {
  color:
    rgba(255, 255, 255, 0.78) !important;
}


/* Lesson title */
.lesson-header h1,
.lesson-header #lesson-title {
  color: #ffffff !important;
}


/* Protect any future text inside header */
.lesson-header {
  color: #ffffff;
}


/* ==========================================================
   OMNIA_BRAND_HEADER_BLUE_GOLD_V1
   Fixed institutional header palette
   ========================================================== */

.lesson-header {
  background:
    linear-gradient(
      135deg,
      #001d64 0%,
      #022877 100%
    ) !important;

  border:
    4px solid #eeb60f !important;

  box-shadow:
    0 16px 36px
    rgba(0, 29, 100, 0.22) !important;

  color: #ffffff !important;
}


/* Decorative circle */
.lesson-header::after {
  background:
    rgba(238, 182, 15, 0.14) !important;
}


/* OMNIA OPEN ACADEMY */
.lesson-header .brand {
  color: #f6c21c !important;
  font-weight: 900 !important;
}


/* Brand dot */
.lesson-header .brand::before {
  background: #f6c21c !important;

  box-shadow:
    0 0 0 5px
    rgba(246, 194, 28, 0.16) !important;
}


/* Unit */
.lesson-header .unit-name {
  color:
    rgba(255, 255, 255, 0.80) !important;
}


/* Lesson title */
.lesson-header h1,
.lesson-header #lesson-title {
  color: #ffffff !important;
}


/* Maintain readable hierarchy */
.lesson-header .lesson-heading {
  color: #ffffff !important;
}

/* ==========================================================
   OMNIA_WHITE_LABEL_V1

   Client branding layer.

   Header = institution identity.
   Section colors = pedagogical identity.
   ========================================================== */

:root {
  --brand-header-bg: #001d64;
  --brand-header-bg-2: #022877;
  --brand-header-border: #eeb60f;
  --brand-header-text: #ffffff;
  --brand-header-muted:
    rgba(255, 255, 255, 0.80);
  --brand-header-accent: #f6c21c;
}


/* ----------------------------------------------------------
   INSTITUTIONAL HEADER
   ---------------------------------------------------------- */

.lesson-header {
  background:
    linear-gradient(
      135deg,
      var(--brand-header-bg) 0%,
      var(--brand-header-bg-2) 100%
    ) !important;

  border:
    4px solid
    var(--brand-header-border) !important;

  color:
    var(--brand-header-text) !important;

  box-shadow:
    0 16px 36px
    rgba(0, 29, 100, 0.22) !important;

  transition:
    background .25s ease,
    border-color .25s ease;
}


/* Decorative shape */
.lesson-header::after {
  background:
    rgba(255, 255, 255, 0.085) !important;
}


/* Institution identity */
.lesson-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color:
    var(--brand-header-accent) !important;

  font-weight: 900 !important;
}


/* Default brand indicator */
.lesson-header .brand::before {
  background:
    var(--brand-header-accent) !important;

  box-shadow:
    0 0 0 5px
    rgba(255,255,255,0.12) !important;
}


/* Do not show dot when a real logo exists */
.lesson-header .brand.has-brand-logo::before {
  display: none !important;
}


.omnia-client-logo {
  display: block;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  object-fit: contain;

  border-radius: 9px;

  background:
    rgba(255,255,255,0.95);

  padding: 3px;

  box-shadow:
    0 4px 12px
    rgba(0,0,0,0.12);
}


.omnia-client-brand-name {
  display: block;
}


/* Unit information */
.lesson-header .unit-name {
  color:
    var(--brand-header-muted) !important;
}


/* Lesson name */
.lesson-header h1,
.lesson-header #lesson-title {
  color:
    var(--brand-header-text) !important;
}


/* ----------------------------------------------------------
   POWERED BY OMNIA
   ---------------------------------------------------------- */

.omnia-powered-by {
  grid-column: 1 / -1;

  padding:
    3px 8px 1px;

  text-align: center;

  color: #8a94a6;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .06em;

  text-transform: uppercase;
}


/* ----------------------------------------------------------
   RESPONSIVE LOGO
   ---------------------------------------------------------- */

@media (max-width: 650px) {

  .omnia-client-logo {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }


  .omnia-client-brand-name {
    font-size: 10px;
  }

}

/* ==========================================================
   OMNIA_COMPLETE_VISUAL_POLISH_V1
   Visual-only polish for MR3 Complete.
   Completion logic remains in complete-mr3.js.
   ========================================================== */


.complete-polish-v1 {
  display: grid;
  gap: 22px;

  background:
    transparent !important;

  border: 0 !important;

  box-shadow:
    none !important;
}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.complete-v1-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  gap: 28px;
  align-items: center;

  min-height: 220px;

  padding:
    clamp(28px, 4vw, 48px);

  border:
    1px solid
    var(--omnia-shell-border) !important;

  border-radius: 26px;

  background:
    radial-gradient(
      circle at 92% 14%,
      var(--omnia-shell-soft),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,0.99),
      var(--omnia-shell-soft)
    ) !important;

  box-shadow:
    0 18px 44px
    var(--omnia-shell-glow) !important;
}


.complete-v1-hero-copy {
  max-width: 720px;
}


.complete-v1-hero h2 {
  margin:
    8px 0 12px;

  font-size:
    clamp(34px, 5vw, 58px);

  line-height: 1;

  letter-spacing:
    -0.04em;
}


.complete-v1-hero p {
  max-width: 650px;

  margin: 0;

  color: #667085;

  font-size:
    clamp(16px, 1.6vw, 19px);

  line-height: 1.55;
}


.complete-v1-progress-card {
  width: 170px;

  padding:
    22px 18px;

  text-align: center;

  border:
    1px solid
    var(--omnia-shell-border);

  border-radius: 22px;

  background:
    rgba(255,255,255,0.92);

  box-shadow:
    0 13px 30px
    rgba(15,23,42,0.07);
}


.complete-v1-progress-number {
  color:
    var(--omnia-shell-accent);

  font-size: 38px;
  font-weight: 900;
  line-height: 1;
}


.complete-v1-progress-number span {
  color: #98a2b3;

  font-size: 18px;
  font-weight: 800;
}


.complete-v1-progress-label {
  margin-top: 8px;

  color: #667085;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .05em;

  text-transform: uppercase;
}


.complete-v1-ready-pill {
  margin-top: 15px;

  padding: 7px 9px;

  border-radius: 999px;

  background: #f2f4f7;

  color: #667085;

  font-size: 11px;
  font-weight: 850;
}


.complete-v1-ready-pill.is-ready {
  background:
    var(--omnia-shell-soft);

  color:
    var(--omnia-shell-accent);

  box-shadow:
    inset 0 0 0 1px
    var(--omnia-shell-border);
}


/* ----------------------------------------------------------
   SHARED BLOCKS
   ---------------------------------------------------------- */

.complete-polish-v1
.complete-block {
  padding:
    clamp(22px, 3vw, 32px);

  border:
    1px solid
    rgba(203,213,225,.78);

  border-radius: 22px;

  background:
    rgba(255,255,255,.96);

  box-shadow:
    0 10px 28px
    rgba(15,23,42,.05);
}


.complete-v1-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;

  margin-bottom: 22px;
}


.complete-v1-section-head h3,
.complete-v1-summary-card h3,
.complete-v1-actions-heading h3 {
  margin:
    6px 0 0;

  color: #243653;

  font-size:
    clamp(22px, 2.4vw, 28px);
}


.complete-v1-count-badge,
.complete-v1-optional {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 34px;

  padding:
    7px 12px;

  border:
    1px solid
    var(--omnia-shell-border);

  border-radius: 999px;

  background:
    var(--omnia-shell-soft);

  color:
    var(--omnia-shell-accent);

  font-size: 11px;
  font-weight: 850;

  white-space: nowrap;
}


/* ----------------------------------------------------------
   CAN DO
   ---------------------------------------------------------- */

.complete-v1-achievement-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;
}


.complete-v1-achievement {
  display: grid;

  grid-template-columns:
    42px
    minmax(0, 1fr);

  gap: 12px;

  align-items: center;

  min-height: 72px;

  padding: 13px;

  border:
    1px solid
    var(--omnia-shell-border);

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.98),
      var(--omnia-shell-soft)
    );
}


.complete-v1-achievement-number {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border-radius: 12px;

  background:
    var(--omnia-shell-soft);

  color:
    var(--omnia-shell-accent);

  font-size: 11px;
  font-weight: 900;

  box-shadow:
    inset 0 0 0 1px
    var(--omnia-shell-border);
}


.complete-v1-achievement p {
  margin: 0;

  color: #344054;

  font-weight: 700;

  line-height: 1.45;
}


/* ----------------------------------------------------------
   REQUIRED ACTIVITY GRID
   ---------------------------------------------------------- */

.complete-v1-path-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 12px;
}


.complete-v1-path-item {
  min-height: 105px;

  padding: 15px;

  border:
    1px solid
    rgba(203,213,225,.84);

  border-radius: 17px;

  background:
    #ffffff;

  box-shadow:
    0 6px 16px
    rgba(15,23,42,.035);
}


.complete-v1-path-item.is-done {
  border-color:
    var(--omnia-shell-border);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      var(--omnia-shell-soft)
    );
}


.complete-v1-path-item.needs-action {
  border-color:
    rgba(217,119,6,.30);

  background:
    linear-gradient(
      145deg,
      #ffffff,
      rgba(245,158,11,.075)
    );
}


.complete-v1-path-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  margin-bottom: 18px;
}


.complete-v1-path-dot {
  width: 11px;
  height: 11px;

  flex:
    0 0 11px;

  border-radius: 50%;

  background: #cbd5e1;
}


.complete-v1-path-item.is-done
.complete-v1-path-dot {
  background:
    var(--omnia-shell-accent);

  box-shadow:
    0 0 0 5px
    var(--omnia-shell-soft);
}


.complete-v1-path-item.needs-action
.complete-v1-path-dot {
  background: #d97706;

  box-shadow:
    0 0 0 5px
    rgba(245,158,11,.10);
}


.complete-v1-path-status {
  font-size: 10px;
  font-weight: 850;

  letter-spacing: .035em;

  text-transform: uppercase;

  color: #98a2b3;
}


.complete-v1-path-item.is-done
.complete-v1-path-status {
  color:
    var(--omnia-shell-accent);
}


.complete-v1-path-item.needs-action
.complete-v1-path-status {
  color: #b45309;
}


.complete-v1-path-item strong {
  display: block;

  color: #344054;

  font-size: 14px;

  line-height: 1.25;
}


/* ----------------------------------------------------------
   MASTERY + PRODUCTION
   ---------------------------------------------------------- */

.complete-v1-summary-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 18px;
}


.complete-v1-summary-card {
  min-width: 0;
}


.complete-v1-score-row {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;

  margin-top: 18px;
}


.complete-v1-score-row > div {
  padding: 18px;

  border:
    1px solid
    var(--omnia-shell-border);

  border-radius: 17px;

  background:
    var(--omnia-shell-soft);
}


.complete-v1-score-row span {
  display: block;

  margin-bottom: 7px;

  color: #667085;

  font-size: 11px;
  font-weight: 800;

  text-transform: uppercase;
}


.complete-v1-score-row strong {
  color:
    var(--omnia-shell-accent);

  font-size:
    clamp(24px, 3vw, 34px);

  line-height: 1;
}


.complete-v1-summary-note {
  margin:
    18px 0 0;

  color: #667085;

  line-height: 1.5;
}


.complete-v1-product-list {
  display: grid;

  gap: 12px;

  padding: 0;

  margin:
    18px 0 0;

  list-style: none;
}


.complete-v1-product-list li {
  display: grid;

  grid-template-columns:
    12px
    minmax(0, 1fr);

  gap: 11px;

  align-items: start;

  color: #344054;

  line-height: 1.45;
}


.complete-v1-product-dot {
  width: 10px;
  height: 10px;

  margin-top: 5px;

  border-radius: 50%;

  background:
    var(--omnia-shell-accent);

  box-shadow:
    0 0 0 4px
    var(--omnia-shell-soft);
}


/* ----------------------------------------------------------
   REFLECTION
   ---------------------------------------------------------- */

.complete-v1-reflection-prompt {
  margin:
    -4px 0 17px;

  color: #475467;

  font-size: 16px;
}


.complete-v1-reflection-options {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 10px;
}


.complete-v1-reflection-option {
  position: relative;

  display: block;

  cursor: pointer;
}


.complete-v1-reflection-option input {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}


.complete-v1-reflection-option span {
  display: flex;
  align-items: center;

  min-height: 52px;

  padding:
    12px 15px;

  border:
    1px solid
    rgba(203,213,225,.92);

  border-radius: 15px;

  background: #fff;

  color: #475467;

  font-weight: 700;

  transition:
    border-color .15s ease,
    background .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}


.complete-v1-reflection-option
input:checked + span {
  border-color:
    var(--omnia-shell-accent);

  background:
    var(--omnia-shell-soft);

  color:
    var(--omnia-shell-accent);

  box-shadow:
    0 0 0 2px
    var(--omnia-shell-border);
}


/* ----------------------------------------------------------
   ACTION AREA
   ---------------------------------------------------------- */

.complete-v1-actions {
  display: grid;

  gap: 15px;

  padding:
    clamp(22px, 3vw, 32px);

  border:
    1px solid
    var(--omnia-shell-border);

  border-radius: 23px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.98),
      var(--omnia-shell-soft)
    );

  box-shadow:
    0 14px 34px
    var(--omnia-shell-glow);
}


.complete-v1-actions-heading {
  margin-bottom: 4px;
}


.complete-v1-complete-button {
  width: 100%;

  min-height: 62px;

  border: 0 !important;

  border-radius: 17px !important;

  background:
    linear-gradient(
      135deg,
      var(--omnia-shell-accent),
      var(--omnia-shell-accent-2)
    ) !important;

  color: #fff !important;

  box-shadow:
    0 12px 28px
    var(--omnia-shell-glow-strong) !important;

  font-size: 16px;
  font-weight: 900;
}


.complete-v1-complete-button:disabled {
  background:
    #d0d5dd !important;

  color:
    #667085 !important;

  box-shadow:
    none !important;

  cursor: default;
}


.complete-v1-complete-button.is-completed {
  background:
    linear-gradient(
      135deg,
      var(--omnia-shell-accent),
      var(--omnia-shell-accent-2)
    ) !important;
}


.complete-v1-companion-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 12px;
}


.complete-v1-action-card {
  display: grid !important;

  grid-template-columns:
    42px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 12px;

  width: 100%;

  min-height: 82px;

  padding: 14px !important;

  text-align: left;

  border:
    1px solid
    var(--omnia-shell-border) !important;

  border-radius:
    17px !important;

  background:
    rgba(255,255,255,.96) !important;

  color:
    #344054 !important;

  cursor: pointer;
}


.complete-v1-action-card:hover {
  transform:
    translateY(-2px);

  background:
    var(--omnia-shell-soft) !important;

  box-shadow:
    0 12px 24px
    var(--omnia-shell-glow) !important;
}


.complete-v1-action-icon {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;

  border-radius: 13px;

  background:
    var(--omnia-shell-soft);

  color:
    var(--omnia-shell-accent);

  font-size: 15px;
  font-weight: 900;

  box-shadow:
    inset 0 0 0 1px
    var(--omnia-shell-border);
}


.complete-v1-action-copy {
  min-width: 0;
}


.complete-v1-action-copy strong,
.complete-v1-action-copy small {
  display: block;
}


.complete-v1-action-copy strong {
  color: #344054;

  font-size: 14px;
}


.complete-v1-action-copy small {
  margin-top: 4px;

  color: #7b8799;

  font-size: 11px;
}


.complete-v1-action-card
.complete-arrow {
  color:
    var(--omnia-shell-accent);

  font-size: 20px;
  font-weight: 900;
}


/* ----------------------------------------------------------
   FEEDBACK
   ---------------------------------------------------------- */

.complete-v1-actions
.depth-v2-feedback.success {
  padding: 11px 14px;

  border:
    1px solid
    var(--omnia-shell-border);

  border-radius: 13px;

  background:
    var(--omnia-shell-soft);

  color:
    var(--omnia-shell-accent);

  font-weight: 800;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1000px) {

  .complete-v1-path-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .complete-v1-companion-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 760px) {

  .complete-v1-hero {
    grid-template-columns: 1fr;
  }


  .complete-v1-progress-card {
    width: auto;

    text-align: left;
  }


  .complete-v1-achievement-grid,
  .complete-v1-summary-grid {
    grid-template-columns: 1fr;
  }


  .complete-v1-reflection-options {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 520px) {

  .complete-v1-path-grid,
  .complete-v1-score-row {
    grid-template-columns: 1fr;
  }


  .complete-v1-section-head {
    display: block;
  }


  .complete-v1-count-badge,
  .complete-v1-optional {
    margin-top: 12px;
  }

}


@media (prefers-reduced-motion: reduce) {

  .complete-v1-action-card,
  .complete-v1-reflection-option span {
    transition: none !important;
  }

}

/* OMNIA_COMPLETE_VISUAL_POLISH_V1 */


/* OMNIA_COMPLETE_COMPLETED_STATE_SYNC_V1 */

.complete-v1-hero h2 {
  color:
    var(--omnia-shell-accent) !important;
}



/* OMNIA_WRITE_FINAL_VISUAL_POLISH_V1 */

/* ==========================================================
   LET'S WRITE — FINAL WRITING
   Visual-only enhancement.
   MR3 logic, persistence and validation remain unchanged.
   ========================================================== */


/* ----------------------------------------------------------
   FINAL PANEL SHELL
   ---------------------------------------------------------- */

[data-write-mr3="4"] {

  padding:
    clamp(24px, 3vw, 38px) !important;

  border:
    1px solid
    var(--omnia-shell-border) !important;

  border-radius:
    24px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      var(--omnia-shell-soft)
    ) !important;

  box-shadow:
    0 16px 40px
    var(--omnia-shell-glow) !important;

}


[data-write-mr3="4"]
.depth-v2-eyebrow {

  color:
    var(--omnia-shell-accent) !important;

  font-size:
    12px;

  font-weight:
    900;

  letter-spacing:
    .12em;

}


[data-write-mr3="4"] > h2 {

  margin:
    8px 0 14px;

  color:
    #243653;

  font-size:
    clamp(32px, 4vw, 48px);

  line-height:
    1.05;

  letter-spacing:
    -.035em;

}


[data-write-mr3="4"] > p {

  max-width:
    900px;

  margin:
    0 0 22px;

  color:
    #475467;

  font-size:
    17px;

  line-height:
    1.6;

}


/* ----------------------------------------------------------
   HELP
   ---------------------------------------------------------- */

#mr3-write-help {

  display:
    inline-flex !important;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    46px;

  padding:
    10px 18px !important;

  margin:
    0 0 14px;

  border:
    1px solid
    var(--omnia-shell-border) !important;

  border-radius:
    14px !important;

  background:
    var(--omnia-shell-soft) !important;

  color:
    var(--omnia-shell-accent) !important;

  font-weight:
    850 !important;

  cursor:
    pointer;

}


#mr3-write-help:hover {

  transform:
    translateY(-1px);

  box-shadow:
    0 9px 22px
    var(--omnia-shell-glow);

}


#mr3-write-help-content {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    10px;

  margin:
    0 0 18px;

  padding:
    16px;

  border:
    1px solid
    var(--omnia-shell-border);

  border-radius:
    16px;

  background:
    rgba(255,255,255,.92);

}


#mr3-write-help-content.hidden {

  display:
    none !important;

}


#mr3-write-help-content p {

  margin:
    0;

  padding:
    12px 14px;

  border-radius:
    12px;

  background:
    var(--omnia-shell-soft);

  color:
    #344054;

  font-weight:
    700;

  line-height:
    1.45;

}


/* ----------------------------------------------------------
   WRITING AREA
   ---------------------------------------------------------- */

#mr3-write-final {

  display:
    block;

  width:
    100% !important;

  min-height:
    270px;

  box-sizing:
    border-box;

  padding:
    20px 22px;

  margin:
    8px 0 12px;

  resize:
    vertical;

  border:
    2px solid
    rgba(148,163,184,.45);

  border-radius:
    18px;

  background:
    #ffffff;

  color:
    #243653;

  font-family:
    inherit;

  font-size:
    17px;

  line-height:
    1.65;

  box-shadow:
    inset 0 2px 8px
    rgba(15,23,42,.035);

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;

}


#mr3-write-final::placeholder {

  color:
    #98a2b3;

}


#mr3-write-final:focus {

  outline:
    none;

  border-color:
    var(--omnia-shell-accent);

  background:
    #ffffff;

  box-shadow:
    0 0 0 4px
    var(--omnia-shell-soft);

}


/* ----------------------------------------------------------
   SPELLING CHECK (OMNIA_WRITE_SPELLCHECK_EN_V1)
   ---------------------------------------------------------- */

.mr3-write-spellcheck {

  display:
    block;

  width:
    100%;

  box-sizing:
    border-box;

  margin:
    0 0 10px;

  padding:
    10px 14px;

  border-radius:
    12px;

  border:
    1px solid
    rgba(148,163,184,.35);

  background:
    rgba(248,250,252,.9);

  color:
    #344054;

  font-size:
    15px;

  line-height:
    1.6;

}


.mr3-write-spellcheck.hidden {

  display:
    none;

}


.mr3-write-spellcheck-clean {

  color:
    #067647;

  font-weight:
    600;

}


.mr3-misspelled-word {

  background:
    transparent;

  color:
    #d63737;

  font-weight:
    700;

  text-decoration:
    underline wavy
    #d63737;

  text-decoration-thickness:
    2px;

  text-underline-offset:
    3px;

}


/* ----------------------------------------------------------
   SENTENCE COUNTER
   ---------------------------------------------------------- */

#mr3-write-count {

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    34px;

  padding:
    7px 12px;

  margin:
    0 0 18px;

  border:
    1px solid
    var(--omnia-shell-border);

  border-radius:
    999px;

  background:
    var(--omnia-shell-soft);

  color:
    var(--omnia-shell-accent);

  font-size:
    12px;

  font-weight:
    850;

}


/* ----------------------------------------------------------
   SELF REVIEW
   ---------------------------------------------------------- */

[data-write-mr3="4"]
.depth-v2-question-list {

  display:
    grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    11px;

  margin:
    4px 0 20px;

}


[data-write-mr3="4"]
.depth-v2-question-list label {

  display:
    flex !important;

  align-items:
    center;

  gap:
    12px;

  min-height:
    58px;

  padding:
    13px 15px;

  margin:
    0 !important;

  border:
    1px solid
    rgba(203,213,225,.88);

  border-radius:
    15px;

  background:
    rgba(255,255,255,.96);

  color:
    #344054;

  font-weight:
    700;

  line-height:
    1.35;

  cursor:
    pointer;

  transition:
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;

}


[data-write-mr3="4"]
.depth-v2-question-list label:hover {

  border-color:
    var(--omnia-shell-border);

  background:
    var(--omnia-shell-soft);

}


[data-write-mr3="4"]
.depth-v2-question-list input {

  width:
    20px;

  height:
    20px;

  flex:
    0 0 20px;

  accent-color:
    var(--omnia-shell-accent);

  cursor:
    pointer;

}


/* ----------------------------------------------------------
   FINISH BUTTON
   ---------------------------------------------------------- */

#mr3-write-finish {

  width:
    100% !important;

  min-height:
    60px;

  margin:
    2px 0 0;

  padding:
    14px 20px !important;

  border:
    0 !important;

  border-radius:
    16px !important;

  background:
    linear-gradient(
      135deg,
      var(--omnia-shell-accent),
      var(--omnia-shell-accent-2)
    ) !important;

  color:
    #ffffff !important;

  font-size:
    16px;

  font-weight:
    900;

  box-shadow:
    0 12px 28px
    var(--omnia-shell-glow-strong);

  cursor:
    pointer;

}


#mr3-write-finish:hover:not(:disabled) {

  transform:
    translateY(-1px);

}


#mr3-write-finish.is-complete,
#mr3-write-finish:disabled {

  opacity:
    .82;

  cursor:
    default;

}


/* ----------------------------------------------------------
   FEEDBACK
   ---------------------------------------------------------- */

#mr3-write-final-feedback {

  margin-top:
    14px;

  padding:
    13px 15px;

  border-radius:
    14px;

  font-weight:
    750;

}


#mr3-write-final-feedback.hidden {

  display:
    none !important;

}


/* ----------------------------------------------------------
   STEP NAVIGATION
   ---------------------------------------------------------- */

.depth-v2-shell:has(
  [data-write-mr3="4"].active
)
.depth-v2-controls {

  display:
    grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items:
    center;

  gap:
    14px;

  margin-top:
    18px;

}


.depth-v2-shell:has(
  [data-write-mr3="4"].active
)
#mr3-write-prev {

  justify-self:
    stretch;

}


.depth-v2-shell:has(
  [data-write-mr3="4"].active
)
#mr3-write-progress {

  min-width:
    96px;

  text-align:
    center;

  color:
    #667085;

  font-weight:
    800;

}


.depth-v2-shell:has(
  [data-write-mr3="4"].active
)
#mr3-write-next {

  justify-self:
    stretch;

}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 760px) {

  #mr3-write-help-content,
  [data-write-mr3="4"]
  .depth-v2-question-list {

    grid-template-columns:
      1fr;

  }


  #mr3-write-final {

    min-height:
      230px;

  }


  .depth-v2-shell:has(
    [data-write-mr3="4"].active
  )
  .depth-v2-controls {

    grid-template-columns:
      1fr;

  }


  .depth-v2-shell:has(
    [data-write-mr3="4"].active
  )
  #mr3-write-progress {

    order:
      -1;

  }

}


@media (prefers-reduced-motion: reduce) {

  #mr3-write-help,
  #mr3-write-final,
  #mr3-write-finish,
  [data-write-mr3="4"]
  .depth-v2-question-list label {

    transition:
      none !important;

  }

}




/* OMNIA_COMPLETE_HIDE_MISSING_SCORE_COPY_V1 */

.complete-v1-summary-note:empty {
  display: none !important;
}



/* OMNIA_MEMORY_VERSE_CANONICAL_V1 */

.memory-verse-canonical {
  padding: clamp(22px, 3vw, 38px) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      var(--omnia-shell-soft)
    ) !important;
}

.memory-verse-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 12px;
}

.memory-verse-heading h2 {
  margin: 4px 0 2px;
  font-size: clamp(30px, 4vw, 46px);
}

.memory-translation {
  margin: 0;
  color: #667085;
  font-weight: 750;
}

.memory-goal-chip {
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--omnia-shell-soft);
  border: 1px solid var(--omnia-shell-border);
  color: var(--omnia-shell-accent);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.memory-practice-goal {
  margin: 0 0 22px;
  max-width: 760px;
  color: #475467;
  font-size: 16px;
  line-height: 1.6;
}

.memory-stage-tabs {
  display: grid;
  grid-template-columns:
    repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}

.memory-stage-tab {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #d8dee9;
  border-radius: 12px;
  background: #ffffff;
  color: #667085;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.memory-stage-tab.active {
  background: var(--omnia-shell-accent);
  border-color: var(--omnia-shell-accent);
  color: #ffffff;
  box-shadow:
    0 8px 20px var(--omnia-shell-glow);
}

.memory-stage-panel {
  display: none;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  min-height: 330px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid #dfe5ee;
  border-radius: 22px;
  background: rgba(255,255,255,.97);
}

.memory-stage-panel.active {
  display: grid;
}

.memory-stage-number {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--omnia-shell-soft);
  border: 1px solid var(--omnia-shell-border);
  color: var(--omnia-shell-accent);
  font-size: 18px;
  font-weight: 950;
}

.memory-stage-label {
  margin-bottom: 5px;
  color: var(--omnia-shell-accent);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
}

.memory-stage-panel h3 {
  margin: 0 0 14px;
  color: #243653;
  font-size: clamp(24px, 3vw, 34px);
}

.memory-meaning {
  max-width: 780px;
  font-size: 17px;
  line-height: 1.65;
  color: #475467;
}

.memory-meaning-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.memory-meaning-card {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 62px;
  padding: 13px 15px;
  border-radius: 15px;
  background: var(--omnia-shell-soft);
  border: 1px solid var(--omnia-shell-border);
}

.memory-meaning-card span {
  color: var(--omnia-shell-accent);
  font-weight: 950;
}

.memory-meaning-card p {
  margin: 0;
  color: #344054;
  font-weight: 750;
}

.memory-full-verse,
.memory-fade-text {
  margin: 18px 0;
  padding: 22px 24px;
  border-left: 5px solid var(--omnia-shell-accent);
  border-radius: 16px;
  background: var(--omnia-shell-soft);
  color: #243653;
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 750;
  line-height: 1.7;
}

.memory-audio-pending {
  margin-top: 15px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fafc;
  color: #667085;
  font-weight: 700;
}

#mr3-memory-audio {
  width: 100%;
  margin-top: 12px;
}

.memory-chunk-list,
.memory-repeat-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.memory-chunk-card,
.memory-repeat-card {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 12px 15px;
  border: 1px solid #d8dee9;
  border-radius: 14px;
  background: #ffffff;
  color: #344054;
  text-align: left;
}

.memory-chunk-card > span,
.memory-repeat-check {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--omnia-shell-soft);
  color: var(--omnia-shell-accent);
  font-weight: 950;
}

.memory-repeat-card {
  cursor: pointer;
  font: inherit;
  font-weight: 750;
}

.memory-repeat-card.complete {
  border-color: var(--omnia-shell-border);
  background: var(--omnia-shell-soft);
}

.memory-repeat-note {
  margin-top: 12px;
  color: #667085;
  font-size: 13px;
  font-weight: 700;
}

.memory-fade-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 16px 0 4px;
}

.memory-hidden-word {
  color: var(--omnia-shell-accent);
  letter-spacing: .04em;
}

.memory-recall-prompt {
  font-size: 17px;
  line-height: 1.6;
  color: #475467;
}

.memory-recall-closed {
  display: grid;
  place-items: center;
  min-height: 180px;
  margin: 18px 0;
  padding: 22px;
  border: 2px dashed var(--omnia-shell-border);
  border-radius: 18px;
  background: var(--omnia-shell-soft);
  text-align: center;
}

.memory-recall-closed span {
  font-size: 34px;
}

.memory-recall-closed strong {
  margin-top: 5px;
  color: #243653;
  font-size: 20px;
}

.memory-recall-closed p {
  margin: 5px 0 0;
  color: #667085;
}

.memory-recall-action {
  margin-right: 8px;
}

.memory-class-recitation {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  padding: 15px 17px;
  border-radius: 16px;
  background: var(--omnia-shell-soft);
  border: 1px solid var(--omnia-shell-border);
}

.memory-class-recitation > span {
  color: var(--omnia-shell-accent);
  font-size: 22px;
}

.memory-class-recitation strong {
  color: #243653;
}

.memory-class-recitation p {
  margin: 4px 0 0;
  color: #475467;
  line-height: 1.5;
}

.memory-stage-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

#mr3-memory-stage-progress {
  min-width: 96px;
  text-align: center;
  color: #667085;
  font-weight: 850;
}

#mr3-memory-stage-next {
  justify-self: stretch;
}

#mr3-memory-stage-prev {
  justify-self: stretch;
}

@media (max-width: 920px) {

  .memory-stage-tabs {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .memory-meaning-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 620px) {

  .memory-verse-heading {
    flex-direction: column;
  }

  .memory-stage-tabs {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .memory-stage-panel {
    grid-template-columns: 1fr;
  }

  .memory-stage-controls {
    grid-template-columns: 1fr;
  }

  #mr3-memory-stage-progress {
    order: -1;
  }

}


/* OMNIA_HOMEWORK_DIALOGUE_COMPLETION_V1 */
.dc-card ul { margin: 6px 0 0; padding-left: 20px; }
.dc-progress { margin: 12px 0 6px; font-weight: 700; opacity: .75; }
.dc-dialogue { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 16px; }
.dc-turn { display: flex; flex-direction: column; max-width: 92%; }
.dc-turn.dc-side-1 { align-self: flex-end; align-items: flex-end; }
.dc-speaker { font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .6; margin: 0 6px 3px; }
.dc-bubble { padding: 12px 15px; border-radius: 16px; background: rgba(15,23,42,.06); line-height: 1.9; font-size: 1.05rem; }
.dc-side-1 .dc-bubble { background: rgba(47,111,237,.10); }
.dc-select { font: inherit; padding: 4px 8px; margin: 0 3px; border-radius: 10px; border: 2px solid rgba(15,23,42,.25); background: #fff; color: inherit; cursor: pointer; }
.dc-select.correct { border-color: #1e9e6b; background: rgba(30,158,107,.16); color: #0f6b47; font-weight: 700; opacity: 1; }
.dc-select.wrong { border-color: #d64545; background: rgba(214,69,69,.14); color: #a12626; font-weight: 700; }
.dc-work { margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: rgba(30,158,107,.08); border: 1px solid rgba(30,158,107,.3); }
.dc-work[hidden] { display: none; }
.dc-work-line { margin: 8px 0; }
.dc-work-speaker { font-weight: 800; margin-right: 4px; }
.dc-work-note { margin-top: 12px; font-weight: 650; }

/* OMNIA_GRAMMAR_CHART_V1 — explanatory chart for a lesson's grammar targets */
.gc-chart { font-weight: 400; border-radius: 24px; overflow: hidden; border: 4px solid var(--brand-header-border, #eeb60f); background: #faf8f2; color: #17233f; box-shadow: 0 6px 18px rgba(23,35,63,.10); }
.gc-title { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--brand-header-bg, #001d64) 0%, var(--brand-header-bg-2, #022877) 100%); color: #fff; text-align: center; font-size: 1.55rem; font-weight: 700; padding: 18px 16px; line-height: 1.2; }
.gc-title::after { content: ""; position: absolute; right: -36px; top: -70px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.086); pointer-events: none; }
.gc-subtitle { background: #4a5b82; color: #fff; text-align: center; font-size: 1.08rem; padding: 10px 16px; line-height: 1.35; border-top: 3px solid #fff; }
.gc-body { padding: 16px 16px 18px; }
.gc-intro { background: #e4e6ea; color: #46557d; text-align: center; padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 1.02rem; line-height: 1.4; }
.gc-table-wrap { overflow-x: auto; }
.gc-table { width: 100%; border-collapse: collapse; background: #f4f3ee; font-size: 1.02rem; }
.gc-table th { background: #edece7; color: #46557d; font-weight: 800; padding: 10px 12px; border: 1px solid #d5d8de; text-align: center; }
.gc-table td { padding: 10px 12px; border: 1px solid #d5d8de; text-align: center; }
.gc-table td.gc-hl { background: #e6eefc; font-weight: 800; color: #2a4c9a; }
.gc-table tbody tr:first-child td:first-child, .gc-table td:first-child { font-weight: 600; }
.gc-compare { margin-top: 14px; display: grid; gap: 8px; }
.gc-compare-row { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 6px 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid #d5d8de; }
.gc-x { color: #d64545; font-weight: 900; font-size: 1.25rem; }
.gc-ok { color: #1e9e6b; font-weight: 900; font-size: 1.25rem; }
.gc-wrong { color: #a12626; text-decoration: line-through; text-decoration-color: rgba(214,69,69,.6); }
.gc-right { color: #0f6b47; font-weight: 700; }
.gc-callout { margin-top: 14px; padding: 12px 16px; border-radius: 6px; background: #fff; border: 3px solid #4a5b82; text-align: center; font-size: 1.05rem; line-height: 1.5; }
.gc-callout-tip { border-color: #1e9e6b; background: #f0faf5; }
.gc-callout-warning { border-color: #d98a1a; background: #fff8ec; }
@media (max-width: 560px) {
  .gc-title { font-size: 1.25rem; }
  .gc-subtitle { font-size: .98rem; }
  .gc-table { font-size: .95rem; }
  .gc-table, .gc-table thead, .gc-table tbody { display: block; }
  .gc-table tr { display: grid; grid-template-columns: repeat(calc(var(--gc-n, 4) - 1), 1fr); }
  .gc-table th:last-child, .gc-table td:last-child { grid-column: 1 / -1; }
  .gc-table th, .gc-table td { padding: 8px 6px; }
  .gc-compare-row { grid-template-columns: auto 1fr; }
}

/* OMNIA_WB_PRACTICE_DECK_V1 */
.wb-round-progress { margin: 12px 0 8px; font-weight: 800; font-size: .85rem; letter-spacing: .04em; color: #356dff; text-transform: uppercase; }

/* OMNIA_HOMEWORK_PRACTICE_SET_V1 */
.ps-activity { margin: 22px 0; padding: 18px 18px 14px; border: 1px solid rgba(15,23,42,.12); border-radius: 18px; background: rgba(255,255,255,.7); }
.ps-activity-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.ps-activity-head h3 { margin: 0 0 2px; font-size: 1.15rem; }
.ps-activity-head p { margin: 0; opacity: .75; }
.ps-activity-number { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: #dbe7ff; color: #2a4c9a; }
.ps-activity-progress { margin-left: auto; font-weight: 800; font-size: .85rem; color: #356dff; white-space: nowrap; }
.ps-question { margin: 14px 0; }
.ps-prompt { margin: 0 0 8px; font-weight: 700; }
.ps-options { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-option, .ps-match-card, .ps-chip { font: inherit; padding: 10px 14px; border-radius: 12px; border: 2px solid rgba(15,23,42,.2); background: #fff; color: inherit; cursor: pointer; }
.ps-option.correct, .ps-match-card.correct, .ps-slot.correct { border-color: #1e9e6b !important; background: rgba(30,158,107,.16) !important; color: #0f6b47 !important; font-weight: 700; }
.ps-option.wrong, .ps-match-card.wrong, .ps-slot.wrong { border-color: #d64545 !important; background: rgba(214,69,69,.14) !important; color: #a12626 !important; font-weight: 700; }
.ps-option:disabled:not(.correct) { opacity: .5; cursor: default; }
.ps-match { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.ps-match-col { display: flex; flex-direction: column; gap: 8px; }
.ps-match-card { text-align: center; }
.ps-match-card.selected { border-color: #356dff; background: rgba(53,109,255,.12); }
.ps-match-card:disabled { cursor: default; }
.ps-tray { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; padding: 10px; border-radius: 12px; background: rgba(15,23,42,.05); }
.ps-chip { cursor: grab; }
.ps-chip.held { border-color: #356dff; background: rgba(53,109,255,.14); }
.ps-chip.used { opacity: .35; cursor: default; }
.ps-sentence { margin: 10px 0; line-height: 2.3; font-size: 1.05rem; }
.ps-slot { display: inline-block; min-width: 96px; min-height: 36px; padding: 2px 12px; margin: 0 4px; border: 2px dashed rgba(15,23,42,.35); border-radius: 10px; text-align: center; vertical-align: middle; line-height: 32px; background: #fff; }
.ps-slot.over { border-color: #356dff; background: rgba(53,109,255,.1); }
.ps-slot.filled { border-style: solid; }
.ps-work-block { margin: 12px 0 4px; }
.ps-work-block h4 { margin: 0 0 4px; }
@media (max-width: 560px) { .ps-match { grid-template-columns: 1fr; } }

/* OMNIA_AUDIO_PLAYER_RESPONSIVE_V1: native <audio> players are 300px wide by default and overflowed
   the panel on phones (found 2026-09-26 in Let's Speak at 375px). */
.depth-v2-question audio,
.depth-v2-panel audio {
  display: block;
  width: 100%;
  max-width: 420px;
  margin-top: 6px;
  box-sizing: border-box;
}

/* OMNIA_PRODUCTION_REFERENCE_GALLERY_V1 */
.depth-v2-production-reference-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 18px; margin-bottom: 28px; }
.depth-v2-production-reference-gallery .depth-v2-production-reference-item { max-height: 220px !important; margin: 0 !important; border-radius: 14px; }
@media (max-width: 560px) { .depth-v2-production-reference-gallery { grid-template-columns: repeat(2, 1fr); } }

/* OMNIA_LISTEN_COMPREHENSION_DROPDOWN_V1 */
.mr3-listen-comprehension-list { margin-top: 16px; }
.mr3-listen-comprehension-list .depth-v2-question strong { display: block; margin-bottom: 8px; }

/* OMNIA_WB_BUILDER_AUDIO_V1 */
#wb-sentence-play { display: block; margin: 12px 0; }
#wb-sentence-play.is-playing { opacity: .75; }

/* OMNIA_SPEAK_PARTNER_RECORD_V1 + OMNIA_SPEAK_GAP_WRITE_AND_LISTEN_V1 */
.mr3-partner-recorder { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mr3-partner-status { flex-basis: 100%; margin: 4px 0 0; opacity: .75; font-size: .92rem; }
.mr3-partner-playback { flex-basis: 100%; width: 100%; max-width: 420px; margin-top: 4px; }
.mr3-gap-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 10px 0; }
.mr3-gap-question-input { flex: 1 1 220px; min-width: 0; padding: 10px 13px; border-radius: 12px; border: 1px solid var(--line); font: inherit; color: inherit; background: var(--card); }
.mr3-gap-row .mr3-gap-answer { flex: 0 0 auto; }
@media (max-width: 560px) { .mr3-gap-row { flex-direction: column; } }

/* OMNIA_SPEAK_PRONUNCIATION_PRACTICE_V1 */
.mr3-pron-divider { border: none; border-top: 1px solid var(--line); margin: 26px 0; }
.mr3-pron-list { display: flex; flex-direction: column; gap: 14px; margin: 12px 0 20px; }
.mr3-pron-item audio.mr3-pron-model-audio { display: block; width: 100%; max-width: 420px; margin: 8px 0; }
.mr3-pron-recorder { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.mr3-pron-status { flex-basis: 100%; margin: 2px 0 0; opacity: .75; font-size: .92rem; }
.mr3-pron-playback { flex-basis: 100%; width: 100%; max-width: 420px; margin-top: 4px; }
.mr3-pron-gauge { margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 220px; }
.mr3-pron-gauge-svg { width: 180px; height: auto; }
.mr3-pron-gauge-score { font-size: 1.4rem; font-weight: 800; }
.mr3-pron-gauge-score span { font-size: .95rem; font-weight: 600; opacity: .6; }
.mr3-pron-gauge-note { margin: 0; font-size: .88rem; opacity: .75; text-align: center; max-width: 260px; }
.mr3-pron-gauge-subnote { margin: 2px 0 0; font-size: .74rem; opacity: .6; text-align: center; max-width: 260px; }

/* OMNIA_SPEAK_PRONUNCIATION_WORD_BREAKDOWN_V1 -- per-word accuracy chips
   shown under the gauge, so a single mispronounced word (e.g. one
   consonant said with a heavy accent) is visible even when the overall
   sentence score still looks fine. */
.mr3-pron-words { margin-top: 8px; max-width: 420px; }
.mr3-pron-word-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mr3-pron-word-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: default;
}
.mr3-pron-word-good { background: rgba(30,158,107,.12); color: #1e9e6b; border-color: rgba(30,158,107,.3); }
.mr3-pron-word-ok { background: rgba(224,167,46,.14); color: #93720f; border-color: rgba(224,167,46,.35); }
.mr3-pron-word-low { background: rgba(214,69,69,.14); color: #b32f2f; border-color: rgba(214,69,69,.35); }
.mr3-pron-word-note { margin: 8px 0 0; font-size: .88rem; opacity: .85; }
.mr3-pron-word-note-good { opacity: .7; font-style: italic; }

/* =====================================================
   OMNIA_WB_AUDIO_CHART_V1 (2026-09-30)
   Clickable audio chart in Word Bank (numbers, alphabet, days...).
   Colors come from each item's group via --chart-color.
   ===================================================== */
.wb-chart {
  margin-top: 28px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
}

.wb-chart-heading {
  max-width: 680px;
  margin-bottom: 14px;
}

.wb-chart-heading h3 {
  margin: 7px 0 6px;
  font-size: 26px;
}

.wb-chart-heading p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.wb-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 14px;
  font-size: .9rem;
  color: var(--muted);
}

.wb-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.wb-chart-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--chart-color, #1f3a93);
}

.wb-chart-row {
  margin-top: 14px;
}

.wb-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
}

.wb-chart .wb-chart-tile {
  --chart-color: #1f3a93;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 62px;
  padding: 8px 4px;
  border: 2px solid var(--chart-color);
  border-radius: 12px;
  background: #ffffff;
  color: var(--chart-color);
  cursor: pointer;
  font: inherit;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}

.wb-chart .wb-chart-tile:hover:not(:disabled) {
  transform: translateY(-2px);
}

.wb-chart .wb-chart-tile:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.wb-chart .wb-chart-tile.is-played {
  background: color-mix(in srgb, var(--chart-color) 12%, #ffffff);
}

.wb-chart .wb-chart-tile.is-playing,
.wb-chart .wb-chart-tile.is-speaking {
  background: var(--chart-color);
  color: #ffffff;
  transform: scale(1.06);
}

.wb-chart-display {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
}

.wb-chart-label {
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  overflow-wrap: anywhere;
}

.wb-chart-repeat {
  margin-top: 10px;
}

.wb-chart-repeat.is-running {
  background: #b32f2f;
  border-color: #b32f2f;
  color: #ffffff;
}

@media (max-width: 480px) {
  .wb-chart { padding: 16px; }
  .wb-chart-grid { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }
  .wb-chart-display { font-size: 1.15rem; }
}

/* OMNIA_SPEAK_SPELLING_V1 (2026-09-30) -- typed spelling practice in Let's Speak */
.mr3-spell-item .mr3-spell-image { display: block; width: 100%; max-width: 260px; height: auto; border-radius: 14px; margin: 10px 0; }
.mr3-spell-item audio { display: block; width: 100%; max-width: 420px; margin: 8px 0; }
.mr3-spell-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 10px 0; }
.mr3-spell-input { flex: 1 1 220px; min-width: 0; padding: 10px 13px; border-radius: 12px; border: 2px solid var(--line); font: inherit; font-size: 1.1rem; letter-spacing: .04em; color: inherit; background: var(--card); }
.mr3-spell-input.is-right { border-color: #2b8a3e; background: rgba(43,138,62,.10); }
.mr3-spell-input.is-wrong { border-color: #c92a2a; background: rgba(201,42,42,.08); }
.mr3-spell-row .mr3-spell-check { flex: 0 0 auto; }
@media (max-width: 560px) { .mr3-spell-row { flex-direction: column; } }

/* OMNIA_INTRO_HIGHLIGHT_V1 (2026-09-30): highlighted target phrases in lesson-intro objectives */
.lesson-intro-objective-text .lesson-intro-hl {
  font-weight: 800;
  color: #3b2fcf;
  background: rgba(99, 102, 241, .13);
  padding: 1px 8px;
  border-radius: 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* OMNIA_FEEDBACK_COLOR_STANDARD_V1 (2026-10-01): one standard for every answer state.
   Correct = GREEN letters, incorrect = RED letters, in every section and game.
   Repeated state classes + `html body` beat the more specific per-section rules. */
html body :is(.correct, .is-right):is(.correct, .is-right):is(.correct, .is-right):is(.correct, .is-right):is(.correct, .is-right),
html body .depth-v2-feedback.success.success.success {
  color: #0f6b47 !important;
  border-color: #1e9e6b !important;
}
html body :is(.wrong, .incorrect, .is-wrong):is(.wrong, .incorrect, .is-wrong):is(.wrong, .incorrect, .is-wrong):is(.wrong, .incorrect, .is-wrong):is(.wrong, .incorrect, .is-wrong),
html body .depth-v2-feedback.retry.retry.retry,
html body .depth-v2-feedback.wrong.wrong.wrong {
  color: #a12626 !important;
  border-color: #d64545 !important;
}
html body .depth-v2-feedback.success.success.success { background: rgba(30, 158, 107, .12) !important; }
html body .depth-v2-feedback.retry.retry.retry,
html body .depth-v2-feedback.wrong.wrong.wrong { background: rgba(214, 69, 69, .12) !important; }
/* answer buttons / options keep a soft tint behind the coloured letters */
html body :is(button, label, li, .depth-v2-option, .answer-option, .mc-choice):is(.correct, .is-right):is(.correct, .is-right):is(.correct, .is-right):is(.correct, .is-right):is(.correct, .is-right) { background: rgba(30, 158, 107, .16) !important; }
html body :is(button, label, li, .depth-v2-option, .answer-option, .mc-choice):is(.wrong, .incorrect, .is-wrong):is(.wrong, .incorrect, .is-wrong):is(.wrong, .incorrect, .is-wrong):is(.wrong, .incorrect, .is-wrong):is(.wrong, .incorrect, .is-wrong) { background: rgba(214, 69, 69, .14) !important; }

/* =====================================================================
   OMNIA_INTRO_COVER_V2 (2026-10-01) -- kids cover: sky gradient in the
   UK + USA flag colors (red / white / blue) with Big Ben and the Statue of
   Liberty. Decorative scene = .lesson-intro-scene (aria-hidden).
   ===================================================================== */
.lesson-intro-screen {
  --cv-red: #E5384B;
  --cv-red-dark: #B71C32;
  --cv-blue: #1E4FD8;
  --cv-navy: #12306B;
  --cv-sun: #FFC93C;
  background:
    radial-gradient(circle at 50% 108%, rgba(255, 255, 255, .55), transparent 46%),
    linear-gradient(180deg, #0F2C75 0%, #1E4FD8 34%, #4DA3F5 66%, #BFE6FF 100%);
  padding-bottom: clamp(70px, 9vw, 96px);
}
.lesson-intro-orb { display: none; }

.lesson-intro-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.lesson-intro-card { position: relative; z-index: 2; }

/* bunting of little flags (red / white / blue) along the top */
.intro-bunting {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 62px;
  background-repeat: repeat-x;
  background-size: 168px 56px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 56'%3E%3Cpath d='M0 3 H168' stroke='%23ffffff' stroke-opacity='.8' stroke-width='3'/%3E%3Cpolygon points='4,4 52,4 28,52' fill='%23E5384B'/%3E%3Cpolygon points='60,4 108,4 84,52' fill='%23ffffff'/%3E%3Cpolygon points='116,4 164,4 140,52' fill='%231E4FD8' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
  filter: drop-shadow(0 4px 4px rgba(8, 20, 60, .25));
}

/* soft clouds */
.intro-cloud {
  position: absolute;
  width: 150px; height: 46px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 40px -18px 0 -4px rgba(255,255,255,.92), 86px -2px 0 -6px rgba(255,255,255,.92);
  animation: intro-drift 16s ease-in-out infinite alternate;
}
.intro-cloud-1 { top: 17%; left: 4%;  transform: scale(.9); }
.intro-cloud-2 { top: 30%; right: 3%; transform: scale(.7); animation-duration: 20s; animation-delay: -6s; }
.intro-cloud-3 { top: 58%; left: 10%; transform: scale(.55); opacity: .8; animation-duration: 24s; animation-delay: -11s; }
@keyframes intro-drift { from { translate: -14px 0; } to { translate: 18px 0; } }

/* twinkling stars */
.intro-star { position: absolute; color: var(--cv-sun); text-shadow: 0 0 10px rgba(255, 201, 60, .9); font-size: 22px; animation: intro-twinkle 3.2s ease-in-out infinite; }
.intro-star-1 { top: 15%; left: 22%; }
.intro-star-2 { top: 11%; right: 26%; font-size: 30px; animation-delay: -1s; }
.intro-star-3 { top: 44%; left: 3%;  font-size: 18px; animation-delay: -2s; }
.intro-star-4 { top: 52%; right: 4%; font-size: 26px; animation-delay: -.5s; }
.intro-star-5 { top: 24%; right: 9%; font-size: 16px; animation-delay: -1.6s; }
@keyframes intro-twinkle { 0%,100% { opacity: .55; transform: scale(.85) rotate(0deg); } 50% { opacity: 1; transform: scale(1.18) rotate(14deg); } }

/* the two landmarks, standing on a flag-striped ground */
.intro-landmark { position: absolute; bottom: 44px; height: auto; filter: drop-shadow(0 10px 14px rgba(8, 20, 60, .35)); }
.intro-bigben  { left: clamp(6px, 2.4vw, 40px);  width: clamp(80px, 11vw, 188px); }
.intro-liberty { right: clamp(6px, 2.4vw, 40px); width: clamp(88px, 12vw, 206px); }
.intro-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
  border-top: 5px solid #fff;
  background: repeating-linear-gradient(135deg, var(--cv-red) 0 26px, #ffffff 26px 52px);
  box-shadow: 0 -8px 18px rgba(8, 20, 60, .18);
}

/* the white card gets a chunkier, friendlier look */
.lesson-intro-card {
  width: min(960px, 100%);
  border: 6px solid #fff;
  border-radius: 36px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 8px 0 rgba(18, 48, 107, .16), 0 30px 70px rgba(8, 20, 60, .38);
}
.lesson-intro-eyebrow {
  background: linear-gradient(180deg, var(--cv-red), var(--cv-red-dark)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 4px 0 rgba(122, 16, 36, .35);
}
.lesson-intro-unit { color: var(--cv-red-dark); font-weight: 800; }
.lesson-intro-title { color: var(--cv-navy); }
.lesson-intro-rule {
  width: 96px; height: 8px;
  background: linear-gradient(90deg, var(--cv-red) 0 33%, #fff 33% 66%, var(--cv-blue) 66% 100%);
  box-shadow: 0 0 0 2px var(--cv-navy) inset;
}
.lesson-intro-objectives-heading { color: var(--cv-navy); }
.lesson-intro-objective { border: 2px solid rgba(30, 79, 216, .16); background: #F4F8FF; }
.lesson-intro-objective:nth-child(3n+1) .lesson-intro-objective-number { background: var(--cv-red);  color: #fff; }
.lesson-intro-objective:nth-child(3n+2) .lesson-intro-objective-number { background: var(--cv-blue); color: #fff; }
.lesson-intro-objective:nth-child(3n)   .lesson-intro-objective-number { background: var(--cv-sun);  color: var(--cv-navy); }
.lesson-intro-objective-number { box-shadow: 0 4px 0 rgba(18, 48, 107, .22); }
.lesson-intro-objective-text { color: #243459; }
.lesson-intro-objective-text .lesson-intro-hl { color: var(--cv-blue); background: rgba(30, 79, 216, .12); }

/* big friendly red button */
.lesson-intro-start {
  background: linear-gradient(180deg, #F25A6A, var(--cv-red-dark)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 6px 0 #8E1126, 0 14px 26px rgba(183, 28, 50, .35) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.lesson-intro-start:hover { transform: translateY(-2px) scale(1.03); }
.lesson-intro-start:active { transform: translateY(4px); box-shadow: 0 2px 0 #8E1126 !important; }

/* picture as a tilted sticker/photo */
.lesson-intro-image-frame {
  background: #fff;
  border: 8px solid #fff;
  border-radius: 28px;
  box-shadow: 0 0 0 4px var(--cv-blue), 0 22px 44px rgba(8, 20, 60, .3);
  transform: rotate(-2deg);
}
.lesson-intro-image-badge { background: var(--cv-red); border-color: #fff; border-radius: 50%; transform: rotate(8deg); }

/* tablet and phone: landmarks become a skyline above the card */
@media (max-width: 960px) {
  .lesson-intro-screen { padding-top: 168px; }
  .intro-landmark { bottom: auto; top: 54px; }
  .intro-bigben  { left: 4%;  width: 74px; }
  .intro-liberty { right: 4%; width: 84px; }
  .intro-cloud-1 { top: 14%; left: 30%; transform: scale(.55); }
  .intro-cloud-2 { top: 22%; right: 28%; transform: scale(.45); }
  .intro-cloud-3 { display: none; }
}
@media (max-width: 520px) {
  .lesson-intro-card { border-width: 4px; border-radius: 28px; }
  .lesson-intro-objective { grid-template-columns: 34px minmax(0, 1fr); padding: 10px 12px; }
  .lesson-intro-objective-number { width: 32px; height: 32px; }
  .lesson-intro-image-frame { transform: rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .intro-cloud, .intro-star { animation: none; }
}

/* OMNIA_INTRO_COVER_V2 -- school bar (logo + school name), configured per brand */
.lesson-intro-screen { padding-top: clamp(150px, 15vw, 168px); }
.lesson-intro-brandbar {
  position: absolute;
  z-index: 3;
  top: 78px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 12px;
  max-width: calc(100% - 28px);
  padding: 7px 22px 7px 8px;
  border: 4px solid #fff;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 0 rgba(18, 48, 107, .2), 0 14px 28px rgba(8, 20, 60, .3);
}
.intro-brand-logo {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #F4F8FF;
  box-shadow: 0 0 0 3px var(--cv-blue) inset;
  overflow: hidden;
}
.intro-brand-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.intro-brand-emblem { color: var(--cv-sun); font-size: 28px; line-height: 1; text-shadow: 0 2px 0 rgba(224, 164, 0, .5); }
.intro-brand-name {
  color: var(--cv-navy);
  font-weight: 900;
  font-size: clamp(.8rem, 1.6vw, 1.05rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.15;
}
@media (max-width: 960px) {
  .lesson-intro-screen { padding-top: 218px; }
  .lesson-intro-brandbar { top: 70px; }
  .intro-landmark { top: 148px; }
  .intro-bigben  { width: 60px; }
  .intro-liberty { width: 68px; }
}
@media (max-width: 520px) {
  .intro-brand-logo { width: 42px; height: 42px; }
  .intro-brand-name { font-size: .72rem; }
}

/* OMNIA_INTRO_COVER_V2 -- landmarks stand IN FRONT at the card's edges (sized from the cover width) */
.lesson-intro-screen { container-type: inline-size; }
.lesson-intro-scene { z-index: auto; }
.intro-landmark { z-index: 3; bottom: 40px; }
.intro-bigben  { left: clamp(2px, 1cqw, 22px);  width: clamp(96px, 14cqw, 210px); }
.intro-liberty { right: clamp(2px, 1cqw, 22px); width: clamp(104px, 15cqw, 230px); }
.lesson-intro-card { padding-left: clamp(28px, 8cqw, 96px); padding-right: clamp(28px, 8cqw, 96px); }
@container (max-width: 960px) {
  .intro-landmark { bottom: auto; top: 150px; }
  .intro-bigben  { width: 62px; left: 4%; }
  .intro-liberty { width: 70px; right: 4%; }
  .lesson-intro-card { padding-left: clamp(20px, 5cqw, 40px); padding-right: clamp(20px, 5cqw, 40px); }
}

/* OMNIA_INTRO_COVER_V2 -- photographic landmarks (transparent cut-outs): sized by height */
.intro-landmark {
  height: 66%;
  width: auto;
  bottom: 40px;
  filter: drop-shadow(0 14px 18px rgba(8, 20, 60, .5)) saturate(1.08) contrast(1.03);
}
.intro-bigben  { left: clamp(14px, 3cqw, 48px);  width: auto; }
.intro-liberty { right: clamp(10px, 2.2cqw, 40px); width: auto; }
@container (max-width: 960px) {
  .intro-landmark { height: 132px; top: 150px; bottom: auto; }
  .intro-bigben  { left: 5%; width: auto; }
  .intro-liberty { right: 4%; width: auto; }
}

/* OMNIA_INTRO_COVER_V2 -- landmarks as LARGE, soft, diluted background (behind the card) */
.intro-landmark {
  z-index: 1;
  height: 118%;
  width: auto;
  bottom: 24px;
  top: auto;
  opacity: .46;
  filter: blur(2.5px) saturate(.9) brightness(1.08);
  -webkit-mask-image: linear-gradient(to top, #000 52%, rgba(0, 0, 0, .15) 94%, transparent 100%);
  mask-image: linear-gradient(to top, #000 52%, rgba(0, 0, 0, .15) 94%, transparent 100%);
  mix-blend-mode: screen;
}
.intro-bigben  { left: -1%;  right: auto; }
.intro-liberty { right: -2%; left: auto; }
.intro-cloud, .intro-star { z-index: 1; }
@container (max-width: 960px) {
  .intro-landmark { top: auto; bottom: 30px; height: 78%; opacity: .4; }
  .intro-bigben  { left: -10%; right: auto; }
  .intro-liberty { right: -14%; left: auto; }
}

/* OMNIA_INTRO_COVER_V2 -- background landmarks: a little stronger, card slightly narrower */
.lesson-intro-card { width: min(900px, 100%); }
.intro-landmark { opacity: .6; filter: blur(2px) saturate(.95) brightness(1.1); }
.intro-bigben  { left: 0; }
.intro-liberty { right: 0; }
@container (max-width: 960px) {
  .lesson-intro-card { width: 100%; }
  .intro-landmark { opacity: .5; }
  .intro-bigben  { left: -8%; }
  .intro-liberty { right: -10%; }
}

/* OMNIA_INTRO_COVER_V2 -- phone: the diluted landmarks rise from the sky area above the card */
@container (max-width: 960px) {
  .intro-landmark {
    top: 40px; bottom: auto; height: 440px;
    opacity: .6; filter: blur(1.6px) saturate(.95) brightness(1.1);
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, rgba(0, 0, 0, .25) 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 40%, rgba(0, 0, 0, .25) 85%, transparent 100%);
  }
  .intro-bigben  { left: -4%; right: auto; }
  .intro-liberty { right: -6%; left: auto; }
}

/* OMNIA_INTRO_COVER_V2 -- card wide enough for the two-column layout (landmarks are background now) */
.lesson-intro-card {
  width: min(1000px, 100%);
  padding-left: clamp(26px, 4.5cqw, 56px);
  padding-right: clamp(26px, 4.5cqw, 56px);
}
@container (max-width: 960px) {
  .lesson-intro-card { padding-left: clamp(20px, 5cqw, 40px); padding-right: clamp(20px, 5cqw, 40px); }
}

/* =====================================================================
   OMNIA_INTRO_ELEMENTS_V1 (2026-10-01): mascot greeting, "words you'll learn"
   and the lesson path ("Your adventure").
   ===================================================================== */
.lesson-intro-mascot {
  position: absolute;
  top: -96px;
  right: clamp(14px, 3cqw, 44px);
  z-index: 4;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  pointer-events: none;
}
.lesson-intro-mascot-img {
  height: clamp(150px, 15cqw, 190px);
  width: auto;
  filter: drop-shadow(0 12px 14px rgba(8, 20, 60, .4));
  animation: intro-mascot-bob 3.6s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes intro-mascot-bob { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
.lesson-intro-bubble {
  position: relative;
  margin-top: 14px;
  max-width: 240px;
  padding: 11px 16px;
  border: 3px solid var(--cv-blue);
  border-radius: 22px;
  background: #fff;
  color: var(--cv-navy);
  font-weight: 900;
  font-size: clamp(.84rem, 1.5cqw, 1rem);
  line-height: 1.25;
  box-shadow: 0 6px 0 rgba(18, 48, 107, .18);
}
.lesson-intro-bubble::after {
  content: "";
  position: absolute;
  right: -12px; top: 22px;
  width: 18px; height: 18px;
  background: #fff;
  border-right: 3px solid var(--cv-blue);
  border-top: 3px solid var(--cv-blue);
  transform: rotate(45deg);
}

/* words you'll learn (under the lesson picture) */
.lesson-intro-words { margin-top: 26px; }
.lesson-intro-words-title {
  margin-bottom: 10px;
  color: var(--cv-red-dark);
  font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.lesson-intro-words-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lesson-intro-word { display: grid; justify-items: center; gap: 5px; width: 64px; }
.lesson-intro-word img {
  width: 58px; height: 58px; object-fit: contain;
  border: 3px solid var(--cv-blue); border-radius: 18px; background: #fff;
  box-shadow: 0 4px 0 rgba(18, 48, 107, .18);
}
.lesson-intro-word-0 img { border-color: var(--cv-red); }
.lesson-intro-word-2 img { border-color: var(--cv-sun); }
.lesson-intro-word span { color: var(--cv-navy); font-size: .72rem; font-weight: 800; text-align: center; line-height: 1.1; }

/* your adventure: the lesson path */
.lesson-intro-path {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 22px;
  border-top: 3px dashed rgba(30, 79, 216, .22);
}
.lesson-intro-path-title {
  margin-bottom: 14px;
  color: var(--cv-navy);
  font-size: 1rem; font-weight: 900;
}
.lesson-intro-path-title span {
  margin-left: 8px; padding: 3px 10px; border-radius: 999px;
  background: var(--cv-sun); color: var(--cv-navy); font-size: .72rem; letter-spacing: .04em;
}
.lesson-intro-path-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 14px 6px;
  margin: 0; padding: 0; list-style: none;
}
.lesson-intro-step { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; text-align: center; }
.lesson-intro-step-dot {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  border: 4px solid #fff;
  color: #fff; font-size: 24px;
  box-shadow: 0 5px 0 rgba(18, 48, 107, .22), 0 0 0 3px rgba(30, 79, 216, .12);
  transition: transform .15s ease;
}
.lesson-intro-step:hover .lesson-intro-step-dot { transform: translateY(-3px) scale(1.06); }
.lesson-intro-step-0 .lesson-intro-step-dot { background: var(--cv-red); }
.lesson-intro-step-1 .lesson-intro-step-dot { background: var(--cv-blue); }
.lesson-intro-step-2 .lesson-intro-step-dot { background: #F5B301; color: var(--cv-navy); }
.lesson-intro-step.is-finish .lesson-intro-step-dot { background: linear-gradient(180deg, #FFD95A, #F5A300); }
.lesson-intro-step-icon { width: 26px; height: 26px; }
.lesson-intro-step-label { color: var(--cv-navy); font-size: .76rem; font-weight: 800; }
@container (min-width: 960px) {
  .lesson-intro-path-list::before {
    content: ""; position: absolute; z-index: 0;
    left: 6%; right: 6%; top: 26px; height: 0;
    border-top: 4px dotted rgba(30, 79, 216, .28);
  }
}

/* phone / tablet: the mascot sits in the flow at the top of the card */
@container (max-width: 960px) {
  .lesson-intro-mascot {
    position: static;
    grid-column: 1 / -1;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: -10px 0 4px;
    pointer-events: auto;
  }
  .lesson-intro-mascot-img { order: -1; height: 104px; }
  .lesson-intro-bubble { margin-top: 0; max-width: 230px; font-size: .9rem; }
  .lesson-intro-bubble::after { right: auto; left: -11px; top: 50%; margin-top: -9px; transform: rotate(-135deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lesson-intro-mascot-img { animation: none; }
}

/* OMNIA_INTRO_ELEMENTS_V1 -- desktop: school bar aligns with the card's left edge; the mascot's bubble owns the right */
@container (min-width: 960px) {
  .lesson-intro-brandbar {
    left: calc(50% - min(500px, 50% - 14px));
    transform: none;
    max-width: 440px;
  }
}

/* OMNIA_INTRO_ELEMENTS_V1 -- phone: mascot greets first, above the picture */
@container (max-width: 960px) {
  .lesson-intro-mascot { order: -3; }
  .lesson-intro-visual { order: -2; }
}

/* =====================================================================
   OMNIA_INTRO_SILHOUETTES_V1 (2026-10-01): the two landmarks as big silhouettes
   (shape = alpha of the photo cut-out) filled with their country's flag.
   Big Ben -> Union Jack, Statue of Liberty -> Stars and Stripes.
   ===================================================================== */
.intro-landmark {
  height: 124%;
  width: auto;
  bottom: 24px; top: auto;
  opacity: .93;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .9)) drop-shadow(0 14px 16px rgba(8, 20, 60, .45));
  mix-blend-mode: normal;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
  -webkit-mask-position: center;  mask-position: center;
  background-repeat: no-repeat;
}
.intro-bigben {
  aspect-ratio: 223 / 1100;
  -webkit-mask-image: url("./assets/intro/bigben.webp"); mask-image: url("./assets/intro/bigben.webp");
  background-image: url("./assets/intro/flag-uk.svg");
  background-repeat: repeat-y;
  background-size: 150% auto;
  background-position: 50% 0;
}
.intro-liberty {
  aspect-ratio: 377 / 1100;
  -webkit-mask-image: url("./assets/intro/liberty.webp"); mask-image: url("./assets/intro/liberty.webp");
  background-image: url("./assets/intro/flag-us.svg");
  background-size: auto 108%;
  background-position: 0 0;
}
@container (max-width: 960px) {
  .intro-landmark { top: 40px; bottom: auto; height: 430px; opacity: .88; }
  .intro-bigben  { -webkit-mask-image: url("./assets/intro/bigben.webp"); mask-image: url("./assets/intro/bigben.webp"); }
  .intro-liberty { -webkit-mask-image: url("./assets/intro/liberty.webp"); mask-image: url("./assets/intro/liberty.webp"); }
}

/* OMNIA_INTRO_SILHOUETTES_V1 -- desktop: the silhouettes stand IN FRONT, beside the card */
@container (min-width: 961px) {
  .intro-landmark { z-index: 3; }
  .intro-bigben  { height: 90%; left: clamp(6px, 1.2cqw, 26px);  right: auto; }
  .intro-liberty { height: 78%; right: clamp(6px, 1.2cqw, 26px); left: auto; }
  .lesson-intro-card { width: min(940px, 100%); }
}

/* OMNIA_INTRO_SILHOUETTES_V1 (final sizing) -- wide screens: silhouettes in their own side lanes;
   narrower screens: they rise from the sky above the card. */
@container (min-width: 1100px) {
  .lesson-intro-screen { padding-left: 14.5cqw; padding-right: 17.5cqw; }
  .lesson-intro-card { width: 100%; max-width: 940px; }
  .intro-landmark { z-index: 3; top: auto; bottom: 40px; }
  .intro-bigben  { width: auto; height: min(58cqw, 90%); left: 1.2cqw;  right: auto; }
  .intro-liberty { width: auto; height: min(47cqw, 76%); right: 1.2cqw; left: auto; }
  .lesson-intro-title { font-size: clamp(2.3rem, 5cqw, 4.2rem); }
}
@container (max-width: 1099px) {
  .intro-landmark { z-index: 1; top: 40px; bottom: auto; height: 430px; opacity: .88; }
  .intro-bigben  { left: 2%;  right: auto; width: auto; }
  .intro-liberty { right: 2%; left: auto; width: auto; }
  .lesson-intro-card { width: min(940px, 100%); }
}

/* OMNIA_INTRO_SILHOUETTES_V1 -- white sticker outline so the flag-filled shapes read against the sky */
.intro-landmark {
  filter:
    drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 12px 14px rgba(8, 20, 60, .4));
  opacity: 1;
  isolation: isolate;
}
/* a brighter canton blue so the statue does not melt into the sky */

/* OMNIA_INTRO_SILHOUETTES_V1 -- statue: blue-with-stars canton covers head, arm and torso; stripes on the pedestal */
.intro-liberty { background-size: auto 132%; background-position: 0 0; }

/* OMNIA_INTRO_SILHOUETTES_V1 -- flags keep their true proportions (SVGs now carry width/height) */
.intro-bigben { background-size: 135% auto; }

/* OMNIA_INTRO_HEADER_ROW_V1 (2026-10-01): bigger school bar, 3-level heading, words in ONE row */
.lesson-intro-brandbar {
  gap: 18px;
  padding: 10px 34px 10px 10px;
  max-width: min(560px, calc(100% - 28px));
}
.intro-brand-logo { width: 86px; height: 86px; }
.intro-brand-logo img { padding: 6px; }
.intro-brand-emblem { font-size: 44px; }
.intro-brand-name { font-size: clamp(.95rem, 1.9cqw, 1.3rem); letter-spacing: .05em; line-height: 1.18; }
.lesson-intro-screen { padding-top: clamp(190px, 17cqw, 208px); }
.lesson-intro-brandbar { top: 70px; }
@container (max-width: 960px) {
  .lesson-intro-screen { padding-top: 258px; }
  .intro-brand-logo { width: 70px; height: 70px; }
  .intro-brand-name { font-size: .9rem; }
  .lesson-intro-brandbar { gap: 12px; padding: 8px 22px 8px 8px; top: 66px; }
  .intro-landmark { top: 182px; }
}

.lesson-intro-unit {
  margin-top: 4px;
  font-size: clamp(1.05rem, 2.1cqw, 1.45rem);
  font-weight: 900;
  color: var(--cv-red-dark);
  letter-spacing: -.005em;
}
.lesson-intro-lessontag {
  display: inline-block;
  margin: 12px 0 2px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--cv-blue);
  color: #fff;
  font-size: .82rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 3px 0 rgba(18, 48, 107, .3);
}

.lesson-intro-words-list {
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  gap: 8px;
  flex-wrap: nowrap;
}
.lesson-intro-word { width: auto; min-width: 0; }
.lesson-intro-word img { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 76px; }
.lesson-intro-word span { font-size: clamp(.62rem, 1.05cqw, .74rem); overflow-wrap: anywhere; }

/* OMNIA_WB_CHART_LABEL_FIT_V1 (2026-10-01): long labels (Wednesday, September, seventeenth) stay on one line inside the tile
   instead of breaking in the middle of the word; only real hyphens can wrap (twenty-first). */
.wb-chart .wb-chart-label {
  font-size: clamp(.5rem, .62rem, .66rem);
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: manual;
  letter-spacing: -.01em;
  max-width: 100%;
}

/* OMNIA_INTRO_LANDMARKS_MID_V1 (2026-10-01): medium widths (iframe in Masteriyo) -- the landmarks used to sit
   BEHIND the wide card and vanished. Give them side lanes sized by the container width, like wide screens. */
@container (min-width: 700px) and (max-width: 1099px) {
  /* the screen IS the container, so lanes are made with the card's own width/margins */
  .lesson-intro-card { width: calc(100% - 28.5cqw); max-width: 940px; margin-left: 12.5cqw; margin-right: 16cqw; }
  .intro-landmark { z-index: 3; top: auto; bottom: 40px; opacity: 1; }
  .intro-bigben  { height: min(52cqw, 90%); left: 1cqw;  right: auto; }
  .intro-liberty { height: min(42cqw, 76%); right: 1cqw; left: auto; }
}
@container (min-width: 700px) and (max-width: 1099px) {
  .lesson-intro-card { grid-template-columns: 1fr; gap: 24px; padding: 28px 30px 24px; }
  .lesson-intro-visual { order: -1; }
  .lesson-intro-image-frame { width: min(520px, 100%); margin: 0 auto; aspect-ratio: 16 / 10; transform: none; }
  .intro-bigben  { height: min(46cqw, 90%); }
  .intro-liberty { height: min(36cqw, 76%); }
}

/* OMNIA_INTRO_BUBBLE_V1 (2026-10-01): livelier parrot greeting -- big colourful "Hi, Name!" + a gentle breathing motion */
.lesson-intro-bubble {
  max-width: 280px;
  padding: 13px 20px 14px;
  border-width: 4px;
  border-radius: 26px;
  text-align: center;
  transform-origin: 100% 60%;
  animation: omnia-bubble-breathe 3.2s ease-in-out infinite;
}
.lesson-intro-bubble .bub-hi {
  display: table; margin: 0 auto;
  font-size: clamp(1.25rem, 2.6cqw, 1.7rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .01em;
  background: linear-gradient(90deg, #e03048 0%, #f5a800 50%, #1f4fd8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: omnia-bubble-hi 3.2s ease-in-out infinite;
}
.lesson-intro-bubble .bub-tail {
  display: block;
  margin-top: 3px;
  font-size: clamp(.95rem, 1.7cqw, 1.1rem);
  font-weight: 800;
  color: var(--cv-navy);
}
@keyframes omnia-bubble-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes omnia-bubble-hi {
  0%, 100% { filter: none; }
  50%      { filter: drop-shadow(0 2px 0 rgba(245, 168, 0, .35)); }
}
@media (prefers-reduced-motion: reduce) {
  .lesson-intro-bubble, .lesson-intro-bubble .bub-hi { animation: none; }
}

/* OMNIA_INTRO_BRANDBAR_V2 (2026-10-01): logo in a ringed circle at the far left of the bar, school name centred in the rest */
.lesson-intro-brandbar {
  width: min(640px, calc(100% - 28px));
  max-width: none;
  padding: 8px 18px 8px 8px;
  gap: 0;
}
.intro-brand-logo {
  background: #fff;
  box-shadow: 0 0 0 4px var(--cv-blue) inset, 0 3px 0 rgba(18, 48, 107, .18);
}
.intro-brand-name { flex: 1 1 auto; min-width: 0; text-align: center; padding: 0 8px 0 14px; }

/* OMNIA_INTRO_ORDER_V1 (2026-10-01): stacked layout -- heading block right under the school bar,
   then the mascot, then the people picture + words, then objectives and the start button. */
@container (max-width: 1099px) {
  .lesson-intro-copy { display: contents; }
  .lesson-intro-card > * { min-width: 0; }
  .lesson-intro-eyebrow       { order: 1; justify-self: center; }
  .lesson-intro-unit          { order: 2; justify-self: center; text-align: center; }
  .lesson-intro-lessontag     { order: 3; justify-self: center; }
  .lesson-intro-title         { order: 4; text-align: center; }
  .lesson-intro-rule          { order: 5; justify-self: center; }
  .lesson-intro-mascot        { order: 6; justify-self: center; }
  .lesson-intro-visual        { order: 7; }
  .lesson-intro-objectives-heading { order: 8; }
  .lesson-intro-objectives    { order: 9; }
  .lesson-intro-start         { order: 10; justify-self: center; }
  .lesson-intro-path          { order: 11; }
}

/* OMNIA_INTRO_BRANDBAR_V3 (2026-10-01): logo = its own ringed circle at the far left; the name sits in a SEPARATE white bar beside it */
.lesson-intro-brandbar {
  left: 16px; right: 16px; transform: none;
  width: auto; max-width: none;
  display: flex; align-items: center; gap: 14px;
  padding: 0; border: 0; background: transparent; box-shadow: none;
}
.lesson-intro-brandbar .intro-brand-logo {
  border: 4px solid #fff;
  background: #fff;
  box-shadow: 0 0 0 4px var(--cv-blue) inset, 0 6px 0 rgba(18, 48, 107, .2), 0 14px 28px rgba(8, 20, 60, .3);
}
.lesson-intro-brandbar .intro-brand-name {
  flex: 1 1 auto;
  align-self: center;
  padding: 20px 28px;
  border: 4px solid #fff;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 0 rgba(18, 48, 107, .2), 0 14px 28px rgba(8, 20, 60, .3);
  text-transform: none;
  letter-spacing: .02em;
  font-size: clamp(1rem, 2.2cqw, 1.45rem);
  text-align: center;
}

/* OMNIA_INTRO_WIDE_GAP_V1 (2026-10-01): wide layout -- the school bar (logo + name) is taller now, so the card
   starts lower and the parrot bubble no longer slides under the bar. */
@container (min-width: 1100px) {
  .lesson-intro-card { margin-top: 70px; }
}


/* OMNIA_BOOK_COVER_V1 */
.lesson-content--cover { padding: 0; background: transparent; }
.book-cover-screen { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 12px 12px 24px; }
.book-cover-open { border: 0; padding: 0; background: none; cursor: pointer; border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 16, 58, .35); line-height: 0; width: min(100%, 560px, calc((100vh - 110px) * .75)); min-width: 260px; }
.book-cover-open:focus-visible { outline: 4px solid #FFC726; outline-offset: 4px; }
.book-cover-svg { width: 100%; height: auto; display: block; border-radius: 18px; }
.book-cover-cta { border: 0; cursor: pointer; font: 700 1.1rem/1 "Fredoka", Inter, system-ui, sans-serif; color: #fff; background: linear-gradient(#e0263f, #b3112b); padding: 14px 28px; border-radius: 999px; box-shadow: 0 6px 0 #7d0a1d, 0 10px 18px rgba(0,0,0,.25); }
.book-cover-cta:active { transform: translateY(3px); box-shadow: 0 3px 0 #7d0a1d; }

/* ==========================================================
   OMNIA_SECTION_TABS_COLOR_V1 (2026-10-02)
   Every section button is born in its own section colour with white bold text (before: white, coloured only
   when active). The active one gets a white ring + lift + underline so it still stands out.
   ========================================================== */
.section-nav .section-tab { --tab-a: #356dff; --tab-b: #4f46e5; }
.section-nav .section-tab[data-section="word_bank"]           { --tab-a: #2f64f0; --tab-b: #4a43d9; }
.section-nav .section-tab[data-section="lets_read"]           { --tab-a: #0b8284; --tab-b: #12a898; }
.section-nav .section-tab[data-section="lets_listen"]         { --tab-a: #6a4fd0; --tab-b: #8657e6; }
.section-nav .section-tab[data-section="lets_speak"]          { --tab-a: #d94f4f; --tab-b: #ee6666; }
.section-nav .section-tab[data-section="lets_write"]          { --tab-a: #4857c4; --tab-b: #7054d6; }
.section-nav .section-tab[data-section="lets_bible_it"]       { --tab-a: #8a5d0f; --tab-b: #b27c19; }
.section-nav .section-tab[data-section="lets_play"]           { --tab-a: #d95f10; --tab-b: #ec7c12; }
.section-nav .section-tab[data-section="test_your_knowledge"] { --tab-a: #7144cc; --tab-b: #9a4ee8; }
.section-nav .section-tab[data-section="homework"]            { --tab-a: #0f7068; --tab-b: #0c8b80; }
.section-nav .section-tab[data-section="complete"]            { --tab-a: #167a43; --tab-b: #1f9b53; }

.section-nav .section-tab {
  background: linear-gradient(135deg, var(--tab-a), var(--tab-b));
  border-color: transparent;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
  box-shadow: 0 4px 10px rgba(15, 23, 42, .12);
}
.section-nav .section-tab:hover {
  background: linear-gradient(135deg, var(--tab-a), var(--tab-b));
  border-color: transparent;
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .2);
}
.section-nav .section-tab .tab-number {
  background: rgba(255, 255, 255, .26);
  color: #fff;
  box-shadow: none;
}
.section-nav .section-tab.active {
  background: linear-gradient(135deg, var(--tab-a), var(--tab-b));
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--tab-a), 0 10px 22px rgba(15, 23, 42, .25);
}
.section-nav .section-tab.active .tab-number {
  background: #fff;
  color: var(--tab-a);
  box-shadow: none;
}
.section-nav .section-tab.active::after {
  background: rgba(255, 255, 255, .9);
}

/* ==========================================================
   OMNIA_WB_CARDS_TURQUOISE_V1 (2026-10-02)
   Word Bank "Learn the words" flip cards: turquoise on BOTH faces for every card, white bolder text.
   ========================================================== */
.omnia-lesson-shell .word-card .word-card-face,
.word-card .word-card-face,
.word-card.has-meaning-group .word-card-face {
  background: linear-gradient(150deg, #14b2c0 0%, #0b8f9d 100%);
  border-color: #0a7f8b;
  color: #fff;
  box-shadow: 0 8px 20px rgba(11, 143, 157, .28);
}
.word-card .word-card-face * { color: #fff; }
.word-card .word-english,
.word-card .word-spanish { color: #fff; font-weight: 900; text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.word-card .example-label { color: rgba(255, 255, 255, .92); font-weight: 900; letter-spacing: .08em; }
.word-card .example-chunk,
.word-card .wb-back-example { color: #fff; font-weight: 700; }
.word-card .wb-back-english { color: rgba(255, 255, 255, .95); font-weight: 800; }
.word-card .translation-support { color: #fff; font-weight: 700; }
.word-card .tap-hint { color: rgba(255, 255, 255, .95); font-weight: 700; }
.word-card .word-image-wrap { background: rgba(255, 255, 255, .92); }
.word-card .word-play-button {
  background: #fff;
  color: #0a7f8b;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
}
.word-card .word-play-button * { color: #0a7f8b; }
.word-card .wb-meaning-badge { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.word-card .wb-back-example {
  background: rgba(4, 60, 70, .32);
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

/* ==========================================================
   OMNIA_WB_HEADER_BANNER_V1 (2026-10-02)
   Word Bank header = one vivid turquoise gradient banner: bigger "WORD BANK" in a dark-turquoise strip,
   large white title, white instruction text, white icon tile.
   ========================================================== */
section.wb-mr3-intro {
  --omnia-section-icon-color: #0a8fa0;
  --omnia-section-icon-bg: #fff;
  --omnia-section-icon-border: rgba(255, 255, 255, .7);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 28px 96px 30px 34px;
  margin-bottom: 26px;
  border-radius: 28px;
  background: linear-gradient(118deg, #21d0dc 0%, #0eb0c0 48%, #0891b0 100%);
  box-shadow: 0 14px 30px rgba(8, 145, 176, .32), inset 0 0 0 3px rgba(255, 255, 255, .28);
}
section.wb-mr3-intro::before,
section.wb-mr3-intro::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
}
section.wb-mr3-intro::before { width: 260px; height: 260px; right: -70px; top: -120px; }
section.wb-mr3-intro::after  { width: 170px; height: 170px; right: 120px; bottom: -110px; }
section.wb-mr3-intro .eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 9px 24px;
  border-radius: 999px;
  background: #06687a;
  border: 2px solid rgba(255, 255, 255, .9);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .2em;
  box-shadow: 0 4px 10px rgba(0, 60, 80, .25);
}
section.wb-mr3-intro h2 {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(2.3rem, 5.4vw, 3.7rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-shadow: 0 2px 4px rgba(0, 70, 90, .3);
}
section.wb-mr3-intro .section-purpose {
  margin: 0;
  max-width: 62ch;
  color: #fff;
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  font-weight: 600;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0, 70, 90, .25);
}
section.wb-mr3-intro .omnia-section-identity {
  top: 22px;
  right: 24px;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  box-shadow: 0 6px 14px rgba(0, 60, 80, .25);
}
section.wb-mr3-intro .omnia-section-identity-svg { width: 34px; height: 34px; }
@media (max-width: 650px) {
  section.wb-mr3-intro { padding: 22px 20px 24px; border-radius: 22px; }
  section.wb-mr3-intro .eyebrow { font-size: .9rem; padding: 7px 18px; }
  section.wb-mr3-intro .omnia-section-identity { position: static; margin: 0 0 12px; width: 48px; height: 48px; }
}
section.wb-mr3-intro { max-width: none; width: 100%; box-sizing: border-box; }
section.wb-mr3-intro .eyebrow { color: #fff !important; -webkit-text-fill-color: #fff; }
@media (max-width: 650px) {
  section.wb-mr3-intro .omnia-section-identity { position: absolute; top: 16px; right: 16px; margin: 0; width: 46px; height: 46px; border-radius: 15px; }
  section.wb-mr3-intro .omnia-section-identity-svg { width: 26px; height: 26px; }
}

/* ==========================================================
   OMNIA_WB_PRACTICE_STYLE_V1 (2026-10-02)
   Word Bank "Quick practice / Use the words": turquoise banner header (same family as the Word Bank header),
   turquoise activity cards (same colour as the vocabulary cards), ORANGE answer strips (Let's Play orange),
   dark-turquoise primary buttons ("Play word", "Listen to my sentence"). Right/wrong keep the feedback standard.
   ========================================================== */
.wb-practice-shell { border-top: 0; padding-top: 6px; }
.wb-practice-shell .wb-practice-heading {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 24px;
  padding: 26px 34px 28px;
  border-radius: 28px;
  background: linear-gradient(118deg, #21d0dc 0%, #0eb0c0 48%, #0891b0 100%);
  box-shadow: 0 14px 30px rgba(8, 145, 176, .32), inset 0 0 0 3px rgba(255, 255, 255, .28);
}
.wb-practice-shell .wb-practice-heading::before,
.wb-practice-shell .wb-practice-heading::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; background: rgba(255, 255, 255, .13);
}
.wb-practice-shell .wb-practice-heading::before { width: 240px; height: 240px; right: -60px; top: -110px; }
.wb-practice-shell .wb-practice-heading::after  { width: 160px; height: 160px; right: 140px; bottom: -100px; }
.wb-practice-shell .wb-practice-heading .eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 9px 24px;
  border-radius: 999px;
  background: #06687a;
  border: 2px solid rgba(255, 255, 255, .9);
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .2em;
  box-shadow: 0 4px 10px rgba(0, 60, 80, .25);
}
.wb-practice-shell .wb-practice-heading h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.02em;
  text-shadow: 0 2px 4px rgba(0, 70, 90, .3);
}
.wb-practice-shell .wb-practice-heading p {
  margin: 0;
  color: #fff;
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  font-weight: 600;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0, 70, 90, .25);
}

/* activity cards = turquoise, white bold text */
.wb-practice-shell .wb-activity-card {
  background: linear-gradient(150deg, #14b2c0 0%, #0b8f9d 100%);
  border: 0;
  box-shadow: 0 8px 20px rgba(11, 143, 157, .28);
  color: #fff;
}
.wb-practice-shell .wb-activity-card h4 { color: #fff; font-weight: 900; text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.wb-practice-shell .wb-activity-card p { color: rgba(255, 255, 255, .96); font-weight: 600; }
.wb-practice-shell .wb-step-number { background: #fff; color: #0a7f8b; font-weight: 900; box-shadow: 0 3px 8px rgba(0, 0, 0, .18); }
.wb-practice-shell .wb-round-progress { color: #fff; font-weight: 900; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.wb-practice-shell .wb-question-word { background: #fff; color: #06687a; font-weight: 900; box-shadow: 0 4px 10px rgba(0, 60, 80, .18); }
.wb-practice-shell .wb-builder-label { color: #fff; font-weight: 900; letter-spacing: .08em; }
.wb-practice-shell .wb-sentence-preview { background: #fff; color: #06485a; font-weight: 800; border-color: rgba(255, 255, 255, .8); }
.wb-practice-shell .wb-feedback:not(:empty) { background: #fff; color: #06485a; font-weight: 700; border-radius: 12px; padding: 8px 12px; }

/* answer strips = orange (Let's Play orange), white bold text */
.wb-practice-shell .wb-choice,
.wb-practice-shell .wb-builder-choice {
  background: linear-gradient(135deg, #d95f10, #ec7c12);
  border: 0;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  box-shadow: 0 4px 10px rgba(120, 50, 0, .22);
}
.wb-practice-shell .wb-choice:hover:not(:disabled),
.wb-practice-shell .wb-builder-choice:hover {
  background: linear-gradient(135deg, #d95f10, #ec7c12);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.wb-practice-shell .wb-choice:disabled { opacity: .78; }
.wb-practice-shell .wb-builder-choice.selected {
  background: linear-gradient(135deg, #b84a08, #d65f0c);
  box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(120, 50, 0, .35);
  color: #fff;
}
.wb-practice-shell .wb-choice.correct, .wb-practice-shell .wb-choice.wrong { text-shadow: none; }

/* buttons: primary = dark turquoise, secondary = white with bold dark text */
.wb-practice-shell .wb-action-button.primary {
  background: linear-gradient(135deg, #07798b, #055a6b);
  border: 2px solid rgba(255, 255, 255, .85);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 5px 12px rgba(0, 50, 65, .35);
}
.wb-practice-shell .wb-action-button.primary:hover:not(:disabled) { filter: brightness(1.12); }
.wb-practice-shell .wb-action-button.secondary {
  background: #fff;
  border: 0;
  color: #06687a;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(0, 50, 65, .22);
}
@media (max-width: 650px) {
  .wb-practice-shell .wb-practice-heading { padding: 22px 20px 24px; border-radius: 22px; }
  .wb-practice-shell .wb-practice-heading .eyebrow { font-size: .9rem; padding: 7px 18px; }
}

/* OMNIA_WB_FEEDBACK_NEON_V1: a hit shows NEON-GREEN letters on a dark strip; a miss keeps red letters on white. */
html body .wb-practice-shell .wb-feedback.is-right.is-right.is-right.is-right.is-right.is-right {
  background: #04323f !important;
  color: #39ff14 !important;
  -webkit-text-fill-color: #39ff14;
  border: 2px solid #39ff14 !important;
  border-radius: 12px;
  font-weight: 900;
  letter-spacing: .01em;
  text-shadow: 0 0 6px rgba(57, 255, 20, .75), 0 0 14px rgba(57, 255, 20, .45);
  box-shadow: 0 0 14px rgba(57, 255, 20, .35);
}
.wb-practice-shell .wb-choice:disabled { opacity: 1; filter: grayscale(.55) brightness(.85); }

/* OMNIA_WB_CHOICE_DARK_ORANGE_V1 (2026-10-02): "Listen and choose" / "Match the meaning" strips = the darker orange
   with a white border (same look as a selected builder strip) -- easier on the eyes than the bright orange. */
.wb-practice-shell .wb-choice {
  background: linear-gradient(135deg, #b84a08, #d65f0c);
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(80, 30, 0, .3);
}
.wb-practice-shell .wb-choice:hover:not(:disabled) {
  background: linear-gradient(135deg, #b84a08, #d65f0c);
  filter: brightness(1.12);
}
.wb-practice-shell .wb-choice:disabled { filter: grayscale(.45) brightness(.82); }
.wb-practice-shell .wb-choice:disabled { filter: saturate(.75) brightness(.92); opacity: .9; }
.wb-practice-shell .wb-choice:disabled { opacity: 1; filter: brightness(.86) saturate(.9); }

/* ==========================================================
   OMNIA_WB_CHART_BOARD_V1 (2026-10-02) -- PROPOSAL (local until approved)
   Audio charts (alphabet, numbers, days, months...) = deep-turquoise "board": white title, white tiles with the
   group colour on border and letters, white bold buttons. Works for any group colours (--chart-color).
   ========================================================== */
.wb-chart {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 26px 28px 30px;
  border: 0;
  border-radius: 28px;
  background: linear-gradient(150deg, #0a7f98 0%, #086a86 55%, #07566f 100%);
  box-shadow: 0 14px 30px rgba(7, 86, 111, .34), inset 0 0 0 3px rgba(255, 255, 255, .22);
}
.wb-chart::before {
  content: ""; position: absolute; z-index: -1; width: 280px; height: 280px; right: -90px; top: -130px;
  border-radius: 50%; background: rgba(255, 255, 255, .09);
}
.wb-chart .wb-chart-heading { max-width: none; }
.wb-chart .wb-chart-heading .eyebrow {
  display: inline-block; padding: 7px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .18); border: 2px solid rgba(255, 255, 255, .85);
  color: #fff !important; -webkit-text-fill-color: #fff; font-weight: 900; letter-spacing: .18em;
}
.wb-chart .wb-chart-heading h3 { color: #fff; font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 900; text-shadow: 0 2px 4px rgba(0, 40, 60, .3); }
.wb-chart .wb-chart-heading p { color: rgba(255, 255, 255, .96); font-weight: 600; font-size: 1.05rem; }
.wb-chart .wb-chart-legend { color: #fff; font-weight: 700; }
.wb-chart .wb-chart-swatch { border: 2px solid #fff; border-radius: 6px; width: 18px; height: 18px; }
.wb-chart .wb-chart-tile {
  border-width: 3px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 30, 45, .28);
}
.wb-chart .wb-chart-tile.is-played { background: color-mix(in srgb, var(--chart-color) 14%, #ffffff); }
.wb-chart .wb-chart-tile.is-playing,
.wb-chart .wb-chart-tile.is-speaking {
  background: var(--chart-color);
  color: #fff;
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--chart-color), 0 0 16px rgba(255, 255, 255, .7);
}
.wb-chart .wb-chart-display { font-weight: 900; }
.wb-chart .wb-chart-repeat {
  background: #fff; border: 0; color: #06687a; font-weight: 900;
  box-shadow: 0 4px 10px rgba(0, 30, 45, .28);
}
.wb-chart .wb-chart-repeat.is-running { background: #b32f2f; color: #fff; }
@media (max-width: 480px) { .wb-chart { padding: 20px 16px 24px; border-radius: 22px; } }
.wb-chart { margin-bottom: 28px; }

/* ==========================================================
   OMNIA_READ_STYLE_V1 (2026-10-02) -- DRAFT, Let's Read only (html[data-omnia-section="lets_read"])
   Same family as the Word Bank: turquoise banner, turquoise-framed cards, ORANGE answer strips with white border,
   dark-turquoise primary buttons, neon-green hit feedback.
   ========================================================== */
html[data-omnia-section="lets_read"] .depth-v2-header {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 0 22px; padding: 24px 32px 26px; border-radius: 28px;
  background: linear-gradient(118deg, #21d0dc 0%, #0eb0c0 48%, #0891b0 100%);
  box-shadow: 0 14px 30px rgba(8, 145, 176, .32), inset 0 0 0 3px rgba(255, 255, 255, .28);
}
html[data-omnia-section="lets_read"] .depth-v2-header::before {
  content: ""; position: absolute; z-index: -1; width: 240px; height: 240px; right: -60px; top: -110px;
  border-radius: 50%; background: rgba(255, 255, 255, .13);
}
html[data-omnia-section="lets_read"] .depth-v2-header .depth-v2-eyebrow {
  display: inline-block; margin: 0 0 12px; padding: 9px 24px; border-radius: 999px;
  background: #06687a; border: 2px solid rgba(255, 255, 255, .9);
  color: #fff !important; -webkit-text-fill-color: #fff;
  font-size: 1.05rem; font-weight: 900; letter-spacing: .2em; box-shadow: 0 4px 10px rgba(0, 60, 80, .25);
}
html[data-omnia-section="lets_read"] .depth-v2-header h2 {
  margin: 0; color: #fff; font-size: clamp(1.8rem, 4.2vw, 3rem); font-weight: 900; line-height: 1.05;
  letter-spacing: -.02em; text-shadow: 0 2px 4px rgba(0, 70, 90, .3);
}

html[data-omnia-section="lets_read"] .depth-v2-panel {
  border: 3px solid #14b2c0; border-radius: 24px; background: #fff;
  box-shadow: 0 10px 24px rgba(11, 143, 157, .18);
}
html[data-omnia-section="lets_read"] .depth-v2-panel .depth-v2-eyebrow {
  display: inline-block; padding: 6px 16px; border-radius: 999px;
  background: #06687a; color: #fff !important; -webkit-text-fill-color: #fff;
  font-weight: 900; letter-spacing: .14em;
}
html[data-omnia-section="lets_read"] .depth-v2-panel h2 { color: #06566a; font-weight: 900; }
html[data-omnia-section="lets_read"] .depth-v2-image { border: 4px solid #14b2c0; border-radius: 22px; box-shadow: 0 8px 20px rgba(11, 143, 157, .28); }
html[data-omnia-section="lets_read"] .depth-v2-reading-text {
  color: #12324a; font-weight: 700; line-height: 1.6;
  background: #effafb; border-left: 6px solid #14b2c0; border-radius: 16px; padding: 18px 22px;
}
html[data-omnia-section="lets_read"] .depth-v2-question-prompt { color: #06566a; font-weight: 900; }

/* answer strips */
html[data-omnia-section="lets_read"] .depth-v2-option {
  background: linear-gradient(135deg, #b84a08, #d65f0c); border: 3px solid #fff; color: #fff;
  font-weight: 800; text-shadow: 0 1px 1px rgba(0, 0, 0, .2); box-shadow: 0 4px 10px rgba(80, 30, 0, .3);
}
html[data-omnia-section="lets_read"] .depth-v2-option:hover:not(:disabled) { filter: brightness(1.12); }

/* buttons */
html[data-omnia-section="lets_read"] .depth-v2-action,
html[data-omnia-section="lets_read"] #mr3-read-next {
  background: linear-gradient(135deg, #07798b, #055a6b); border: 2px solid rgba(255, 255, 255, .85);
  color: #fff; font-weight: 900; box-shadow: 0 5px 12px rgba(0, 50, 65, .35);
}
html[data-omnia-section="lets_read"] .depth-v2-secondary,
html[data-omnia-section="lets_read"] #mr3-read-prev {
  background: #fff; border: 2px solid #14b2c0; color: #06687a; font-weight: 900;
}

/* neon hit feedback */
html body .depth-v2-feedback.success.success.success.success.success.success {
  background: #04323f !important; color: #39ff14 !important; -webkit-text-fill-color: #39ff14;
  border: 2px solid #39ff14 !important; font-weight: 900;
  text-shadow: 0 0 6px rgba(57, 255, 20, .75), 0 0 14px rgba(57, 255, 20, .45); box-shadow: 0 0 14px rgba(57, 255, 20, .35);
}
html[data-omnia-section="lets_read"] .depth-v2-panel .depth-v2-eyebrow,
html[data-omnia-section="lets_read"] .depth-v2-header .depth-v2-eyebrow { opacity: 1; }
html[data-omnia-section="lets_read"] .depth-v2-header {
  --omnia-section-icon-color: #0a8fa0; --omnia-section-icon-bg: #fff; --omnia-section-icon-border: rgba(255, 255, 255, .7);
}
html[data-omnia-section="lets_read"] .depth-v2-header .omnia-section-identity {
  width: 60px; height: 60px; top: 20px; right: 22px; border-radius: 18px; box-shadow: 0 6px 14px rgba(0, 60, 80, .25);
}
html[data-omnia-section="lets_read"] .depth-v2-header .omnia-section-identity-svg { width: 32px; height: 32px; }
html body[class] .depth-v2-panel .depth-v2-reading-text,
html[data-omnia-section="lets_read"] body .depth-v2-panel .depth-v2-reading-text,
html[data-omnia-section="lets_read"] .depth-v2-panel .depth-v2-reading-text {
  color: #12324a !important; -webkit-text-fill-color: #12324a; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 700;
}

/* OMNIA_READ_BANNERS_V1: each Let's Read step has a turquoise banner head; the reading text sits in a DARK turquoise banner
   with white letters. */
html[data-omnia-section="lets_read"] .depth-v2-panel { overflow: hidden; padding-top: 0; }
html[data-omnia-section="lets_read"] .mr3-panel-banner {
  margin: 0 -1px 18px; padding: 18px 26px 20px; border-radius: 0 0 22px 22px;
  background: linear-gradient(118deg, #21d0dc 0%, #0eb0c0 48%, #0891b0 100%);
  box-shadow: 0 8px 18px rgba(8, 145, 176, .25);
}
html[data-omnia-section="lets_read"] .mr3-panel-banner .depth-v2-eyebrow {
  background: #06687a; border: 2px solid rgba(255, 255, 255, .9); margin: 0 0 8px;
}
html[data-omnia-section="lets_read"] .mr3-panel-banner h2 { color: #fff; font-size: clamp(1.5rem, 3.2vw, 2.2rem); text-shadow: 0 2px 4px rgba(0, 70, 90, .3); margin: 0; }
html[data-omnia-section="lets_read"] .mr3-panel-banner p { color: #fff; font-weight: 600; margin: 8px 0 0; text-shadow: 0 1px 2px rgba(0, 70, 90, .25); }
html[data-omnia-section="lets_read"] .depth-v2-panel .depth-v2-reading-text,
html body[class] .depth-v2-panel .depth-v2-reading-text {
  background: linear-gradient(135deg, #076479 0%, #054b5e 100%) !important;
  border: 0; border-left: 0; border-radius: 22px; padding: 22px 26px;
  color: #fff !important; -webkit-text-fill-color: #fff; font-weight: 700;
  box-shadow: 0 10px 22px rgba(5, 75, 94, .35), inset 0 0 0 3px rgba(255, 255, 255, .18);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
/* a chosen (not yet checked) answer: white strip with an orange border */
html[data-omnia-section="lets_read"] .depth-v2-option.selected:not(.correct):not(.wrong) {
  background: #fff; border: 3px solid #d65f0c; color: #b84a08; text-shadow: none;
}
html[data-omnia-section="lets_read"] body .depth-v2-panel .depth-v2-reading-text,
html[data-omnia-section="lets_read"] body .depth-v2-panel .depth-v2-reading-text * {
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}
/* OMNIA_READ_YOURTURN_V1: speaking prompt cards = turquoise like the vocabulary cards; final task = dark turquoise banner */
html[data-omnia-section="lets_read"] .read-speaking-prompt-card {
  background: linear-gradient(150deg, #14b2c0 0%, #0b8f9d 100%); border: 0; color: #fff !important;
  box-shadow: 0 6px 16px rgba(11, 143, 157, .28);
}
html[data-omnia-section="lets_read"] .read-speaking-prompt-card * { color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 800; }
html[data-omnia-section="lets_read"] .read-speaking-prompt-number { background: #fff !important; color: #0a7f8b !important; -webkit-text-fill-color: #0a7f8b !important; }
html[data-omnia-section="lets_read"] .read-final-speaking-task {
  background: linear-gradient(135deg, #076479 0%, #054b5e 100%); border: 0; border-radius: 22px;
  color: #fff !important; box-shadow: 0 10px 22px rgba(5, 75, 94, .35), inset 0 0 0 3px rgba(255, 255, 255, .18);
}
html[data-omnia-section="lets_read"] .read-final-speaking-task, html[data-omnia-section="lets_read"] .read-final-speaking-task * { -webkit-text-fill-color: #fff; color: #fff !important; font-weight: 800; }
html[data-omnia-section="lets_read"] .read-final-speaking-task .read-target-highlight { background: #ffd84a; color: #4a3200 !important; -webkit-text-fill-color: #4a3200; border-radius: 6px; padding: 0 6px; }
@media (max-width: 650px) {
  html[data-omnia-section="lets_read"] body .depth-v2-panel .depth-v2-reading-text { font-size: 1.05rem !important; line-height: 1.55; padding: 18px 16px; }
  html[data-omnia-section="lets_read"] .mr3-panel-banner { padding: 14px 16px 16px; }
}

/* ==========================================================
   OMNIA_LISTEN_STYLE_V1 (2026-10-02) -- Let's Listen = same system as Let's Read / Word Bank
   ========================================================== */
html[data-omnia-section="lets_listen"] .depth-v2-header {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 0 22px; padding: 24px 32px 26px; border-radius: 28px;
  background: linear-gradient(118deg, #21d0dc 0%, #0eb0c0 48%, #0891b0 100%);
  box-shadow: 0 14px 30px rgba(8, 145, 176, .32), inset 0 0 0 3px rgba(255, 255, 255, .28);
  --omnia-section-icon-color: #0a8fa0; --omnia-section-icon-bg: #fff; --omnia-section-icon-border: rgba(255, 255, 255, .7);
}
html[data-omnia-section="lets_listen"] .depth-v2-header::before { content: ""; position: absolute; z-index: -1; width: 240px; height: 240px; right: -60px; top: -110px; border-radius: 50%; background: rgba(255, 255, 255, .13); }
html[data-omnia-section="lets_listen"] .depth-v2-header .depth-v2-eyebrow {
  display: inline-block; margin: 0 0 12px; padding: 9px 24px; border-radius: 999px; background: #06687a;
  border: 2px solid rgba(255, 255, 255, .9); color: #fff !important; -webkit-text-fill-color: #fff; opacity: 1;
  font-size: 1.05rem; font-weight: 900; letter-spacing: .2em; box-shadow: 0 4px 10px rgba(0, 60, 80, .25);
}
html[data-omnia-section="lets_listen"] .depth-v2-header h2 { margin: 0; color: #fff; font-size: clamp(1.8rem, 4.2vw, 3rem); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; text-shadow: 0 2px 4px rgba(0, 70, 90, .3); }
html[data-omnia-section="lets_listen"] .depth-v2-header .omnia-section-identity { width: 60px; height: 60px; top: 20px; right: 22px; border-radius: 18px; box-shadow: 0 6px 14px rgba(0, 60, 80, .25); }
html[data-omnia-section="lets_listen"] .depth-v2-header .omnia-section-identity-svg { width: 32px; height: 32px; }

html[data-omnia-section="lets_listen"] .depth-v2-panel { overflow: hidden; padding-top: 0; border: 3px solid #14b2c0; border-radius: 24px; background: #fff; box-shadow: 0 10px 24px rgba(11, 143, 157, .18); }
html[data-omnia-section="lets_listen"] .mr3-panel-banner {
  margin: 0 -1px 18px; padding: 18px 26px 20px; border-radius: 0 0 22px 22px;
  background: linear-gradient(118deg, #21d0dc 0%, #0eb0c0 48%, #0891b0 100%); box-shadow: 0 8px 18px rgba(8, 145, 176, .25);
}
html[data-omnia-section="lets_listen"] .mr3-panel-banner .depth-v2-eyebrow {
  display: inline-block; padding: 6px 16px; border-radius: 999px; background: #06687a; border: 2px solid rgba(255, 255, 255, .9);
  color: #fff !important; -webkit-text-fill-color: #fff; opacity: 1; font-weight: 900; letter-spacing: .14em; margin: 0 0 8px;
}
html[data-omnia-section="lets_listen"] .mr3-panel-banner h2 { color: #fff; font-size: clamp(1.5rem, 3.2vw, 2.2rem); font-weight: 900; text-shadow: 0 2px 4px rgba(0, 70, 90, .3); margin: 0; }
html[data-omnia-section="lets_listen"] .mr3-panel-banner p { color: #fff; font-weight: 600; margin: 8px 0 0; text-shadow: 0 1px 2px rgba(0, 70, 90, .25); }
html[data-omnia-section="lets_listen"] .depth-v2-question-prompt, html[data-omnia-section="lets_listen"] .depth-v2-question > strong { color: #06566a; font-weight: 900; }

html[data-omnia-section="lets_listen"] .depth-v2-option {
  background: linear-gradient(135deg, #b84a08, #d65f0c); border: 3px solid #fff; color: #fff; font-weight: 800;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .2); box-shadow: 0 4px 10px rgba(80, 30, 0, .3);
}
html[data-omnia-section="lets_listen"] .depth-v2-option:hover:not(:disabled) { filter: brightness(1.12); }
html[data-omnia-section="lets_listen"] .depth-v2-option.selected:not(.correct):not(.wrong) { background: #fff; border: 3px solid #d65f0c; color: #b84a08; text-shadow: none; }

html[data-omnia-section="lets_listen"] .depth-v2-action {
  background: linear-gradient(135deg, #07798b, #055a6b); border: 2px solid rgba(255, 255, 255, .85); color: #fff;
  font-weight: 900; box-shadow: 0 5px 12px rgba(0, 50, 65, .35);
}
html[data-omnia-section="lets_listen"] .depth-v2-secondary { background: #fff; border: 2px solid #14b2c0; color: #06687a; font-weight: 900; }
html[data-omnia-section="lets_listen"] #mr3-listen-next { background: linear-gradient(135deg, #07798b, #055a6b); border: 2px solid rgba(255, 255, 255, .85); color: #fff; font-weight: 900; }
html[data-omnia-section="lets_listen"] .transcript-card, html[data-omnia-section="lets_listen"] .omnia-listen-readalong-transcript {
  background: linear-gradient(135deg, #076479 0%, #054b5e 100%); border: 0; border-radius: 22px;
  box-shadow: 0 10px 22px rgba(5, 75, 94, .35), inset 0 0 0 3px rgba(255, 255, 255, .18);
}
html body html[data-omnia-section="lets_listen"] .transcript-card, html body html[data-omnia-section="lets_listen"] .transcript-card * { color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 700; }
html[data-omnia-section="lets_listen"] .dc-select { border: 3px solid #14b2c0; border-radius: 14px; font-weight: 800; color: #06566a; }
@media (max-width: 650px) { html[data-omnia-section="lets_listen"] .mr3-panel-banner { padding: 14px 16px 16px; } }
/* OMNIA_ANSWER_WRONG_V1: a wrong answer strip = soft red with RED letters (was white-on-white in some sections) */
html[data-omnia-section="lets_listen"] body .depth-v2-option.wrong.wrong.wrong.wrong,
html[data-omnia-section="lets_read"] body .depth-v2-option.wrong.wrong.wrong.wrong {
  background: #fde4e4 !important; border: 3px solid #d64545 !important;
  color: #a12626 !important; -webkit-text-fill-color: #a12626 !important; text-shadow: none !important;
}
html[data-omnia-section="lets_listen"] body .depth-v2-option.correct.correct.correct.correct,
html[data-omnia-section="lets_read"] body .depth-v2-option.correct.correct.correct.correct {
  background: #dcf5e7 !important; border: 3px solid #1e9e6b !important;
  color: #0f6b47 !important; -webkit-text-fill-color: #0f6b47 !important; text-shadow: none !important;
}
/* OMNIA_LISTEN_TRANSCRIPT_V1: transcript = dark-turquoise banner, white letters, speaker names in yellow */
html[data-omnia-section="lets_listen"] .transcript-card { padding: 14px; }
html[data-omnia-section="lets_listen"] body .transcript-card .transcript-line {
  background: rgba(255, 255, 255, .10) !important; border-radius: 12px; margin: 6px 0;
}
html[data-omnia-section="lets_listen"] body .transcript-card .transcript-line strong { color: #ffd84a !important; -webkit-text-fill-color: #ffd84a !important; letter-spacing: .06em; }
html[data-omnia-section="lets_listen"] body .transcript-card .omnia-listen-transcript-text { color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 700; }
html[data-omnia-section="lets_listen"] body .transcript-card .transcript-line.active,
html[data-omnia-section="lets_listen"] body .transcript-card .transcript-line.is-active { background: rgba(255, 216, 74, .25) !important; }
html[data-omnia-section="lets_listen"] body .depth-v2-panel .transcript-card {
  background: linear-gradient(135deg, #076479 0%, #054b5e 100%) !important; border: 0 !important; border-radius: 22px !important;
  box-shadow: 0 10px 22px rgba(5, 75, 94, .35), inset 0 0 0 3px rgba(255, 255, 255, .18) !important;
}

/* OMNIA_QUESTION_BANNERS_V1 (2026-10-02): each question card = turquoise banner with white bold question text
   (Let's Read + Let's Listen). Answer strips / selects keep their own look; right/wrong come from the strips + messages. */
html[data-omnia-section="lets_read"] body .depth-v2-question,
html[data-omnia-section="lets_listen"] body .depth-v2-question {
  background: linear-gradient(118deg, #1fc3d0 0%, #0eaabb 55%, #0891b0 100%) !important;
  border: 0 !important; border-radius: 20px;
  box-shadow: 0 8px 18px rgba(8, 145, 176, .28), inset 0 0 0 3px rgba(255, 255, 255, .22);
}
html[data-omnia-section="lets_read"] body .depth-v2-question > strong,
html[data-omnia-section="lets_listen"] body .depth-v2-question > strong,
html[data-omnia-section="lets_read"] body .depth-v2-question .depth-v2-question-prompt,
html[data-omnia-section="lets_listen"] body .depth-v2-question .depth-v2-question-prompt,
html[data-omnia-section="lets_read"] body .depth-v2-question > label,
html[data-omnia-section="lets_listen"] body .depth-v2-question > label {
  color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 900; text-shadow: 0 1px 3px rgba(0, 70, 90, .35);
}
html[data-omnia-section="lets_read"] body .depth-v2-question.correct,
html[data-omnia-section="lets_listen"] body .depth-v2-question.correct,
html[data-omnia-section="lets_read"] body .depth-v2-question.incorrect,
html[data-omnia-section="lets_listen"] body .depth-v2-question.incorrect,
html[data-omnia-section="lets_read"] body .depth-v2-question.wrong,
html[data-omnia-section="lets_listen"] body .depth-v2-question.wrong {
  background: linear-gradient(118deg, #1fc3d0 0%, #0eaabb 55%, #0891b0 100%) !important; color: #fff !important;
}
html[data-omnia-section="lets_read"] body .depth-v2-question .dc-select,
html[data-omnia-section="lets_listen"] body .depth-v2-question .dc-select {
  background: #fff; border: 3px solid #fff; border-radius: 14px; color: #06566a; font-weight: 900;
  box-shadow: 0 4px 10px rgba(0, 50, 65, .3);
}
html[data-omnia-section="lets_read"] body .depth-v2-question .dc-select.correct,
html[data-omnia-section="lets_listen"] body .depth-v2-question .dc-select.correct { background: #dcf5e7 !important; border-color: #1e9e6b !important; color: #0f6b47 !important; -webkit-text-fill-color: #0f6b47 !important; }
html[data-omnia-section="lets_read"] body .depth-v2-question .dc-select.wrong,
html[data-omnia-section="lets_listen"] body .depth-v2-question .dc-select.wrong,
html[data-omnia-section="lets_read"] body .depth-v2-question .dc-select.incorrect,
html[data-omnia-section="lets_listen"] body .depth-v2-question .dc-select.incorrect { background: #fde4e4 !important; border-color: #d64545 !important; color: #a12626 !important; -webkit-text-fill-color: #a12626 !important; }

/* OMNIA_SPEAK_STYLE_V1 (2026-10-03) -- Let's Speak = same system (turquoise banners, orange answer strips) */
html[data-omnia-section="lets_speak"] .depth-v2-header {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 0 22px; padding: 24px 32px 26px; border-radius: 28px;
  background: linear-gradient(118deg, #21d0dc 0%, #0eb0c0 48%, #0891b0 100%);
  box-shadow: 0 14px 30px rgba(8, 145, 176, .32), inset 0 0 0 3px rgba(255, 255, 255, .28);
  --omnia-section-icon-color: #0a8fa0; --omnia-section-icon-bg: #fff; --omnia-section-icon-border: rgba(255, 255, 255, .7);
}
html[data-omnia-section="lets_speak"] .depth-v2-header::before { content: ""; position: absolute; z-index: -1; width: 240px; height: 240px; right: -60px; top: -110px; border-radius: 50%; background: rgba(255, 255, 255, .13); }
html[data-omnia-section="lets_speak"] .depth-v2-header .depth-v2-eyebrow {
  display: inline-block; margin: 0 0 12px; padding: 9px 24px; border-radius: 999px; background: #06687a;
  border: 2px solid rgba(255, 255, 255, .9); color: #fff !important; -webkit-text-fill-color: #fff; opacity: 1;
  font-size: 1.05rem; font-weight: 900; letter-spacing: .2em; box-shadow: 0 4px 10px rgba(0, 60, 80, .25);
}
html[data-omnia-section="lets_speak"] .depth-v2-header h2 { margin: 0; color: #fff; font-size: clamp(1.8rem, 4.2vw, 3rem); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; text-shadow: 0 2px 4px rgba(0, 70, 90, .3); }
html[data-omnia-section="lets_speak"] .depth-v2-header .omnia-section-identity { width: 60px; height: 60px; top: 20px; right: 22px; border-radius: 18px; box-shadow: 0 6px 14px rgba(0, 60, 80, .25); }
html[data-omnia-section="lets_speak"] .depth-v2-header .omnia-section-identity-svg { width: 32px; height: 32px; }

html[data-omnia-section="lets_speak"] .depth-v2-panel { overflow: hidden; padding-top: 0; border: 3px solid #14b2c0; border-radius: 24px; background: #fff; box-shadow: 0 10px 24px rgba(11, 143, 157, .18); }
html[data-omnia-section="lets_speak"] .mr3-panel-banner {
  margin: 0 -1px 18px; padding: 18px 26px 20px; border-radius: 0 0 22px 22px;
  background: linear-gradient(118deg, #21d0dc 0%, #0eb0c0 48%, #0891b0 100%); box-shadow: 0 8px 18px rgba(8, 145, 176, .25);
}
html[data-omnia-section="lets_speak"] .mr3-panel-banner .depth-v2-eyebrow {
  display: inline-block; padding: 6px 16px; border-radius: 999px; background: #06687a; border: 2px solid rgba(255, 255, 255, .9);
  color: #fff !important; -webkit-text-fill-color: #fff; opacity: 1; font-weight: 900; letter-spacing: .14em; margin: 0 0 8px;
}
html[data-omnia-section="lets_speak"] .mr3-panel-banner h2 { color: #fff; font-size: clamp(1.5rem, 3.2vw, 2.2rem); font-weight: 900; text-shadow: 0 2px 4px rgba(0, 70, 90, .3); margin: 0; }
html[data-omnia-section="lets_speak"] .mr3-panel-banner p { color: #fff; font-weight: 600; margin: 8px 0 0; text-shadow: 0 1px 2px rgba(0, 70, 90, .25); }
html[data-omnia-section="lets_speak"] .depth-v2-question-prompt, html[data-omnia-section="lets_speak"] .depth-v2-question > strong { color: #06566a; font-weight: 900; }

html[data-omnia-section="lets_speak"] .depth-v2-option {
  background: linear-gradient(135deg, #b84a08, #d65f0c); border: 3px solid #fff; color: #fff; font-weight: 800;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .2); box-shadow: 0 4px 10px rgba(80, 30, 0, .3);
}
html[data-omnia-section="lets_speak"] .depth-v2-option:hover:not(:disabled) { filter: brightness(1.12); }
html[data-omnia-section="lets_speak"] .depth-v2-option.selected:not(.correct):not(.wrong) { background: #fff; border: 3px solid #d65f0c; color: #b84a08; text-shadow: none; }

html[data-omnia-section="lets_speak"] .depth-v2-action {
  background: linear-gradient(135deg, #07798b, #055a6b); border: 2px solid rgba(255, 255, 255, .85); color: #fff;
  font-weight: 900; box-shadow: 0 5px 12px rgba(0, 50, 65, .35);
}
html[data-omnia-section="lets_speak"] .depth-v2-secondary { background: #fff; border: 2px solid #14b2c0; color: #06687a; font-weight: 900; }
html[data-omnia-section="lets_speak"] .mr3-speak-next-none { background: linear-gradient(135deg, #07798b, #055a6b); border: 2px solid rgba(255, 255, 255, .85); color: #fff; font-weight: 900; }
html[data-omnia-section="lets_speak"] .dc-select { border: 3px solid #14b2c0; border-radius: 14px; font-weight: 800; color: #06566a; }
@media (max-width: 650px) { html[data-omnia-section="lets_speak"] .mr3-panel-banner { padding: 14px 16px 16px; } }
/* OMNIA_ANSWER_WRONG_V1: a wrong answer strip = soft red with RED letters (was white-on-white in some sections) */
html[data-omnia-section="lets_speak"] body .depth-v2-option.wrong.wrong.wrong.wrong,
html[data-omnia-section="lets_read"] body .depth-v2-option.wrong.wrong.wrong.wrong {
  background: #fde4e4 !important; border: 3px solid #d64545 !important;
  color: #a12626 !important; -webkit-text-fill-color: #a12626 !important; text-shadow: none !important;
}
html[data-omnia-section="lets_speak"] body .depth-v2-option.correct.correct.correct.correct,
html[data-omnia-section="lets_read"] body .depth-v2-option.correct.correct.correct.correct {
  background: #dcf5e7 !important; border: 3px solid #1e9e6b !important;
  color: #0f6b47 !important; -webkit-text-fill-color: #0f6b47 !important; text-shadow: none !important;
}
html[data-omnia-section="lets_speak"] body .depth-v2-question {
  background: linear-gradient(118deg, #1fc3d0 0%, #0eaabb 55%, #0891b0 100%) !important; border: 0 !important; border-radius: 20px;
  box-shadow: 0 8px 18px rgba(8, 145, 176, .28), inset 0 0 0 3px rgba(255, 255, 255, .22);
}
html[data-omnia-section="lets_speak"] body .depth-v2-question > strong,
html[data-omnia-section="lets_speak"] body .depth-v2-question > p,
html[data-omnia-section="lets_speak"] body .depth-v2-question > label {
  color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 800; text-shadow: 0 1px 3px rgba(0, 70, 90, .35);
}
/* OMNIA_SPEAK_STYLE_V1b: text on turquoise cards is white; record / check buttons = orange answer strip */
html[data-omnia-section="lets_speak"] body .depth-v2-question :is(p, small, span, .mr3-speak-check, .mr3-pron-status, .mr3-partner-status, .mr3-pron-gauge-note, .mr3-pron-gauge-subnote, .mr3-pron-word-note):not(.mr3-pron-word-chip):not(.correct):not(.wrong) {
  color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: 0 1px 2px rgba(0, 70, 90, .3);
}
html[data-omnia-section="lets_speak"] body .depth-v2-question .depth-v2-action {
  background: linear-gradient(135deg, #b84a08, #d65f0c) !important; border: 3px solid #fff !important; color: #fff !important;
  -webkit-text-fill-color: #fff !important; box-shadow: 0 4px 10px rgba(80, 30, 0, .3);
}
html[data-omnia-section="lets_speak"] body .depth-v2-question .mr3-spell-input,
html[data-omnia-section="lets_speak"] body .depth-v2-question .mr3-gap-question-input {
  background: #fff; border: 3px solid #fff; border-radius: 14px; color: #06566a !important; -webkit-text-fill-color: #06566a !important; font-weight: 800;
}

/* OMNIA_REST_STYLE_V1 (2026-10-03) -- Write, Bible It, Play, Test Your Knowledge, Homework, Complete = same turquoise/orange system */
html[data-omnia-section="lets_write"] .depth-v2-header,
html[data-omnia-section="lets_bible_it"] .depth-v2-header,
html[data-omnia-section="lets_play"] .depth-v2-header,
html[data-omnia-section="test_your_knowledge"] .depth-v2-header,
html[data-omnia-section="homework"] .depth-v2-header,
html[data-omnia-section="complete"] .depth-v2-header {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 0 22px; padding: 24px 32px 26px; border-radius: 28px;
  background: linear-gradient(118deg, #21d0dc 0%, #0eb0c0 48%, #0891b0 100%) !important;
  border: 0 !important;
  box-shadow: 0 14px 30px rgba(8, 145, 176, .32), inset 0 0 0 3px rgba(255, 255, 255, .28) !important;
  --omnia-section-icon-color: #0a8fa0; --omnia-section-icon-bg: #fff; --omnia-section-icon-border: rgba(255, 255, 255, .7);
}
html[data-omnia-section="lets_write"] .omnia-play-header,
html[data-omnia-section="lets_bible_it"] .omnia-play-header,
html[data-omnia-section="lets_play"] .omnia-play-header,
html[data-omnia-section="test_your_knowledge"] .omnia-play-header,
html[data-omnia-section="homework"] .omnia-play-header,
html[data-omnia-section="complete"] .omnia-play-header {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 0 22px; padding: 24px 32px 26px; border-radius: 28px;
  background: linear-gradient(118deg, #21d0dc 0%, #0eb0c0 48%, #0891b0 100%) !important;
  border: 0 !important;
  box-shadow: 0 14px 30px rgba(8, 145, 176, .32), inset 0 0 0 3px rgba(255, 255, 255, .28) !important;
  --omnia-section-icon-color: #0a8fa0; --omnia-section-icon-bg: #fff; --omnia-section-icon-border: rgba(255, 255, 255, .7);
}
html[data-omnia-section="lets_write"] .depth-v2-header .depth-v2-eyebrow, .omnia-play-header .omnia-play-eyebrow, .omnia-play-header [class*="eyebrow"],
html[data-omnia-section="lets_bible_it"] .depth-v2-header .depth-v2-eyebrow, .omnia-play-header .omnia-play-eyebrow, .omnia-play-header [class*="eyebrow"],
html[data-omnia-section="lets_play"] .depth-v2-header .depth-v2-eyebrow, .omnia-play-header .omnia-play-eyebrow, .omnia-play-header [class*="eyebrow"],
html[data-omnia-section="test_your_knowledge"] .depth-v2-header .depth-v2-eyebrow, .omnia-play-header .omnia-play-eyebrow, .omnia-play-header [class*="eyebrow"],
html[data-omnia-section="homework"] .depth-v2-header .depth-v2-eyebrow, .omnia-play-header .omnia-play-eyebrow, .omnia-play-header [class*="eyebrow"],
html[data-omnia-section="complete"] .depth-v2-header .depth-v2-eyebrow, .omnia-play-header .omnia-play-eyebrow, .omnia-play-header [class*="eyebrow"] {
  display: inline-block; margin: 0 0 12px; padding: 9px 24px; border-radius: 999px; background: #06687a;
  border: 2px solid rgba(255, 255, 255, .9); color: #fff !important; -webkit-text-fill-color: #fff; opacity: 1;
  font-size: 1.05rem; font-weight: 900; letter-spacing: .2em; box-shadow: 0 4px 10px rgba(0, 60, 80, .25);
}
html[data-omnia-section="lets_write"] .depth-v2-header h2, .omnia-play-header h1, .omnia-play-header h2,
html[data-omnia-section="lets_bible_it"] .depth-v2-header h2, .omnia-play-header h1, .omnia-play-header h2,
html[data-omnia-section="lets_play"] .depth-v2-header h2, .omnia-play-header h1, .omnia-play-header h2,
html[data-omnia-section="test_your_knowledge"] .depth-v2-header h2, .omnia-play-header h1, .omnia-play-header h2,
html[data-omnia-section="homework"] .depth-v2-header h2, .omnia-play-header h1, .omnia-play-header h2,
html[data-omnia-section="complete"] .depth-v2-header h2, .omnia-play-header h1, .omnia-play-header h2 { margin: 0; color: #fff !important; -webkit-text-fill-color: #fff; font-size: clamp(1.8rem, 4.2vw, 3rem); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; text-shadow: 0 2px 4px rgba(0, 70, 90, .3); }
html[data-omnia-section="lets_write"] .depth-v2-header p, .omnia-play-header p,
html[data-omnia-section="lets_bible_it"] .depth-v2-header p, .omnia-play-header p,
html[data-omnia-section="lets_play"] .depth-v2-header p, .omnia-play-header p,
html[data-omnia-section="test_your_knowledge"] .depth-v2-header p, .omnia-play-header p,
html[data-omnia-section="homework"] .depth-v2-header p, .omnia-play-header p,
html[data-omnia-section="complete"] .depth-v2-header p, .omnia-play-header p { color: #fff !important; -webkit-text-fill-color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 70, 90, .25); opacity: 1; }
html[data-omnia-section="lets_write"] .depth-v2-header .omnia-section-identity,
html[data-omnia-section="lets_bible_it"] .depth-v2-header .omnia-section-identity,
html[data-omnia-section="lets_play"] .depth-v2-header .omnia-section-identity,
html[data-omnia-section="test_your_knowledge"] .depth-v2-header .omnia-section-identity,
html[data-omnia-section="homework"] .depth-v2-header .omnia-section-identity,
html[data-omnia-section="complete"] .depth-v2-header .omnia-section-identity { width: 60px; height: 60px; top: 20px; right: 22px; border-radius: 18px; box-shadow: 0 6px 14px rgba(0, 60, 80, .25); }
html[data-omnia-section="lets_write"] .depth-v2-panel,
html[data-omnia-section="lets_bible_it"] .depth-v2-panel,
html[data-omnia-section="lets_play"] .depth-v2-panel,
html[data-omnia-section="test_your_knowledge"] .depth-v2-panel,
html[data-omnia-section="homework"] .depth-v2-panel,
html[data-omnia-section="complete"] .depth-v2-panel { overflow: hidden; padding-top: 0; border: 3px solid #14b2c0; border-radius: 24px; background: #fff; box-shadow: 0 10px 24px rgba(11, 143, 157, .18); }
html[data-omnia-section="lets_write"] .mr3-panel-banner,
html[data-omnia-section="lets_bible_it"] .mr3-panel-banner,
html[data-omnia-section="lets_play"] .mr3-panel-banner,
html[data-omnia-section="test_your_knowledge"] .mr3-panel-banner,
html[data-omnia-section="homework"] .mr3-panel-banner,
html[data-omnia-section="complete"] .mr3-panel-banner {
  margin: 0 -1px 18px; padding: 18px 26px 20px; border-radius: 0 0 22px 22px;
  background: linear-gradient(118deg, #21d0dc 0%, #0eb0c0 48%, #0891b0 100%); box-shadow: 0 8px 18px rgba(8, 145, 176, .25);
}
html[data-omnia-section="lets_write"] .mr3-panel-banner .depth-v2-eyebrow,
html[data-omnia-section="lets_bible_it"] .mr3-panel-banner .depth-v2-eyebrow,
html[data-omnia-section="lets_play"] .mr3-panel-banner .depth-v2-eyebrow,
html[data-omnia-section="test_your_knowledge"] .mr3-panel-banner .depth-v2-eyebrow,
html[data-omnia-section="homework"] .mr3-panel-banner .depth-v2-eyebrow,
html[data-omnia-section="complete"] .mr3-panel-banner .depth-v2-eyebrow {
  display: inline-block; padding: 6px 16px; border-radius: 999px; background: #06687a; border: 2px solid rgba(255, 255, 255, .9);
  color: #fff !important; -webkit-text-fill-color: #fff; opacity: 1; font-weight: 900; letter-spacing: .14em; margin: 0 0 8px;
}
html[data-omnia-section="lets_write"] .mr3-panel-banner h2, .mr3-panel-banner h3,
html[data-omnia-section="lets_bible_it"] .mr3-panel-banner h2, .mr3-panel-banner h3,
html[data-omnia-section="lets_play"] .mr3-panel-banner h2, .mr3-panel-banner h3,
html[data-omnia-section="test_your_knowledge"] .mr3-panel-banner h2, .mr3-panel-banner h3,
html[data-omnia-section="homework"] .mr3-panel-banner h2, .mr3-panel-banner h3,
html[data-omnia-section="complete"] .mr3-panel-banner h2, .mr3-panel-banner h3 { color: #fff !important; -webkit-text-fill-color: #fff; font-size: clamp(1.5rem, 3.2vw, 2.2rem); font-weight: 900; text-shadow: 0 2px 4px rgba(0, 70, 90, .3); margin: 0; }
html[data-omnia-section="lets_write"] .mr3-panel-banner p,
html[data-omnia-section="lets_bible_it"] .mr3-panel-banner p,
html[data-omnia-section="lets_play"] .mr3-panel-banner p,
html[data-omnia-section="test_your_knowledge"] .mr3-panel-banner p,
html[data-omnia-section="homework"] .mr3-panel-banner p,
html[data-omnia-section="complete"] .mr3-panel-banner p { color: #fff; font-weight: 600; margin: 8px 0 0; text-shadow: 0 1px 2px rgba(0, 70, 90, .25); }
html[data-omnia-section="lets_write"] .depth-v2-option,
html[data-omnia-section="lets_bible_it"] .depth-v2-option,
html[data-omnia-section="lets_play"] .depth-v2-option,
html[data-omnia-section="test_your_knowledge"] .depth-v2-option,
html[data-omnia-section="homework"] .depth-v2-option,
html[data-omnia-section="complete"] .depth-v2-option {
  background: linear-gradient(135deg, #b84a08, #d65f0c); border: 3px solid #fff; color: #fff; font-weight: 800;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .2); box-shadow: 0 4px 10px rgba(80, 30, 0, .3);
}
html[data-omnia-section="lets_write"] .depth-v2-option.selected:not(.correct):not(.wrong),
html[data-omnia-section="lets_bible_it"] .depth-v2-option.selected:not(.correct):not(.wrong),
html[data-omnia-section="lets_play"] .depth-v2-option.selected:not(.correct):not(.wrong),
html[data-omnia-section="test_your_knowledge"] .depth-v2-option.selected:not(.correct):not(.wrong),
html[data-omnia-section="homework"] .depth-v2-option.selected:not(.correct):not(.wrong),
html[data-omnia-section="complete"] .depth-v2-option.selected:not(.correct):not(.wrong) { background: #fff; border: 3px solid #d65f0c; color: #b84a08; text-shadow: none; }
html[data-omnia-section="lets_write"] .depth-v2-action, .primary,
html[data-omnia-section="lets_bible_it"] .depth-v2-action, .primary,
html[data-omnia-section="lets_play"] .depth-v2-action, .primary,
html[data-omnia-section="test_your_knowledge"] .depth-v2-action, .primary,
html[data-omnia-section="homework"] .depth-v2-action, .primary,
html[data-omnia-section="complete"] .depth-v2-action, .primary {
  background: linear-gradient(135deg, #07798b, #055a6b); border: 2px solid rgba(255, 255, 255, .85); color: #fff;
  font-weight: 900; box-shadow: 0 5px 12px rgba(0, 50, 65, .35);
}
html[data-omnia-section="lets_write"] .depth-v2-secondary,
html[data-omnia-section="lets_bible_it"] .depth-v2-secondary,
html[data-omnia-section="lets_play"] .depth-v2-secondary,
html[data-omnia-section="test_your_knowledge"] .depth-v2-secondary,
html[data-omnia-section="homework"] .depth-v2-secondary,
html[data-omnia-section="complete"] .depth-v2-secondary { background: #fff; border: 2px solid #14b2c0; color: #06687a; font-weight: 900; }
html[data-omnia-section="lets_write"] body .depth-v2-option.wrong.wrong.wrong.wrong,
html[data-omnia-section="lets_bible_it"] body .depth-v2-option.wrong.wrong.wrong.wrong,
html[data-omnia-section="lets_play"] body .depth-v2-option.wrong.wrong.wrong.wrong,
html[data-omnia-section="test_your_knowledge"] body .depth-v2-option.wrong.wrong.wrong.wrong,
html[data-omnia-section="homework"] body .depth-v2-option.wrong.wrong.wrong.wrong,
html[data-omnia-section="complete"] body .depth-v2-option.wrong.wrong.wrong.wrong {
  background: #fde4e4 !important; border: 3px solid #d64545 !important; color: #a12626 !important; -webkit-text-fill-color: #a12626 !important; text-shadow: none !important;
}
html[data-omnia-section="lets_write"] body .depth-v2-option.correct.correct.correct.correct,
html[data-omnia-section="lets_bible_it"] body .depth-v2-option.correct.correct.correct.correct,
html[data-omnia-section="lets_play"] body .depth-v2-option.correct.correct.correct.correct,
html[data-omnia-section="test_your_knowledge"] body .depth-v2-option.correct.correct.correct.correct,
html[data-omnia-section="homework"] body .depth-v2-option.correct.correct.correct.correct,
html[data-omnia-section="complete"] body .depth-v2-option.correct.correct.correct.correct {
  background: #dcf5e7 !important; border: 3px solid #1e9e6b !important; color: #0f6b47 !important; -webkit-text-fill-color: #0f6b47 !important; text-shadow: none !important;
}
html[data-omnia-section="lets_write"] body .depth-v2-question,
html[data-omnia-section="lets_bible_it"] body .depth-v2-question,
html[data-omnia-section="lets_play"] body .depth-v2-question,
html[data-omnia-section="test_your_knowledge"] body .depth-v2-question,
html[data-omnia-section="homework"] body .depth-v2-question,
html[data-omnia-section="complete"] body .depth-v2-question {
  background: linear-gradient(118deg, #1fc3d0 0%, #0eaabb 55%, #0891b0 100%) !important; border: 0 !important; border-radius: 20px;
  box-shadow: 0 8px 18px rgba(8, 145, 176, .28), inset 0 0 0 3px rgba(255, 255, 255, .22);
}
html[data-omnia-section="lets_write"] body .depth-v2-question > strong,
html[data-omnia-section="lets_write"] body .depth-v2-question > p,
html[data-omnia-section="lets_write"] body .depth-v2-question > label,
html[data-omnia-section="lets_write"] body .depth-v2-question .depth-v2-question-prompt,
html[data-omnia-section="lets_bible_it"] body .depth-v2-question > strong,
html[data-omnia-section="lets_bible_it"] body .depth-v2-question > p,
html[data-omnia-section="lets_bible_it"] body .depth-v2-question > label,
html[data-omnia-section="lets_bible_it"] body .depth-v2-question .depth-v2-question-prompt,
html[data-omnia-section="lets_play"] body .depth-v2-question > strong,
html[data-omnia-section="lets_play"] body .depth-v2-question > p,
html[data-omnia-section="lets_play"] body .depth-v2-question > label,
html[data-omnia-section="lets_play"] body .depth-v2-question .depth-v2-question-prompt,
html[data-omnia-section="test_your_knowledge"] body .depth-v2-question > strong,
html[data-omnia-section="test_your_knowledge"] body .depth-v2-question > p,
html[data-omnia-section="test_your_knowledge"] body .depth-v2-question > label,
html[data-omnia-section="test_your_knowledge"] body .depth-v2-question .depth-v2-question-prompt,
html[data-omnia-section="homework"] body .depth-v2-question > strong,
html[data-omnia-section="homework"] body .depth-v2-question > p,
html[data-omnia-section="homework"] body .depth-v2-question > label,
html[data-omnia-section="homework"] body .depth-v2-question .depth-v2-question-prompt,
html[data-omnia-section="complete"] body .depth-v2-question > strong,
html[data-omnia-section="complete"] body .depth-v2-question > p,
html[data-omnia-section="complete"] body .depth-v2-question > label,
html[data-omnia-section="complete"] body .depth-v2-question .depth-v2-question-prompt {
  color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 800; text-shadow: 0 1px 3px rgba(0, 70, 90, .35);
}
html[data-omnia-section="lets_write"] .dc-select,
html[data-omnia-section="lets_bible_it"] .dc-select,
html[data-omnia-section="lets_play"] .dc-select,
html[data-omnia-section="test_your_knowledge"] .dc-select,
html[data-omnia-section="homework"] .dc-select,
html[data-omnia-section="complete"] .dc-select { background: #fff; border: 3px solid #fff; border-radius: 14px; color: #06566a; font-weight: 900; box-shadow: 0 4px 10px rgba(0, 50, 65, .3); }
html[data-omnia-section="lets_write"] .depth-v2-bible-reading-text,
html[data-omnia-section="lets_bible_it"] .depth-v2-bible-reading-text,
html[data-omnia-section="lets_play"] .depth-v2-bible-reading-text,
html[data-omnia-section="test_your_knowledge"] .depth-v2-bible-reading-text,
html[data-omnia-section="homework"] .depth-v2-bible-reading-text,
html[data-omnia-section="complete"] .depth-v2-bible-reading-text { background: linear-gradient(135deg, #076479 0%, #054b5e 100%); color: #fff !important; -webkit-text-fill-color: #fff; border-radius: 22px; padding: 22px 26px; font-weight: 700; box-shadow: 0 10px 22px rgba(5, 75, 94, .35), inset 0 0 0 3px rgba(255, 255, 255, .18); }
/* OMNIA_PLAY_STYLE_V1 */
html[data-omnia-section="lets_play"] .omnia-play-header .omnia-play-kicker {
  display: inline-block; margin: 0 0 10px; padding: 7px 20px; border-radius: 999px; background: #06687a; border: 2px solid rgba(255, 255, 255, .9);
  color: #fff !important; -webkit-text-fill-color: #fff; font-weight: 900; letter-spacing: .16em; opacity: 1;
}
html[data-omnia-section="lets_play"] .omnia-play-intro-card {
  background: linear-gradient(118deg, #21d0dc 0%, #0eb0c0 48%, #0891b0 100%) !important; border: 0 !important; border-radius: 24px;
  box-shadow: 0 12px 26px rgba(8, 145, 176, .3), inset 0 0 0 3px rgba(255, 255, 255, .25) !important;
}
html[data-omnia-section="lets_play"] .omnia-play-intro-card .omnia-play-kicker {
  display: inline-block; padding: 6px 18px; border-radius: 999px; background: #06687a; border: 2px solid rgba(255, 255, 255, .9);
  color: #fff !important; -webkit-text-fill-color: #fff; font-weight: 900; letter-spacing: .16em;
}
html[data-omnia-section="lets_play"] .omnia-play-intro-card h2,
html[data-omnia-section="lets_play"] .omnia-play-intro-card p { color: #fff !important; -webkit-text-fill-color: #fff; text-shadow: 0 2px 4px rgba(0, 70, 90, .3); }
html[data-omnia-section="lets_play"] .omnia-play-intro-card .mc-mission-count { background: #06687a; color: #fff !important; border: 2px solid rgba(255, 255, 255, .8); }
html[data-omnia-section="lets_play"] body .omnia-play-shell button.mc-primary,
html[data-omnia-section="lets_play"] body .omnia-play-shell button.primary {
  background: linear-gradient(135deg, #07798b, #055a6b) !important; border: 2px solid rgba(255, 255, 255, .85) !important; color: #fff !important; -webkit-text-fill-color: #fff;
}
/* OMNIA_PLAY_STYLE_V1b: HUD, memory tiles */
html[data-omnia-section="lets_play"] .mc-hud-stat {
  background: linear-gradient(118deg, #1fc3d0 0%, #0eaabb 55%, #0891b0 100%) !important; border: 0 !important; border-radius: 16px;
  box-shadow: 0 6px 14px rgba(8, 145, 176, .28), inset 0 0 0 3px rgba(255, 255, 255, .22);
}
html[data-omnia-section="lets_play"] .mc-hud-stat * { color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: 0 1px 2px rgba(0, 70, 90, .3); }
html[data-omnia-section="lets_play"] .omnia-play-shell .mm-tile.mm-tile.mm-tile .mm-tile-back { background: linear-gradient(135deg, #076479 0%, #054b5e 100%) !important; border: 0 !important; color: #fff !important; }
html[data-omnia-section="lets_play"] .omnia-play-shell button.mm-tile.mm-tile.mm-tile:not(.revealed):not(.matched) {
  background: linear-gradient(135deg, #076479 0%, #054b5e 100%) !important; border: 3px solid #fff !important; color: #fff !important;
}
html[data-omnia-section="lets_play"] .omnia-play-shell .mm-tile.mm-tile.mm-tile.revealed:not(.matched),
html[data-omnia-section="lets_play"] .omnia-play-shell .mm-tile.mm-tile.mm-tile.revealed:not(.matched) .mm-tile-front {
  background: linear-gradient(135deg, #b84a08, #d65f0c) !important; border: 0 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 800;
}
html[data-omnia-section="lets_play"] .omnia-play-shell .mm-tile.mm-tile.mm-tile.matched,
html[data-omnia-section="lets_play"] .omnia-play-shell .mm-tile.mm-tile.mm-tile.matched .mm-tile-front {
  background: #dcf5e7 !important; border: 0 !important; color: #0f6b47 !important; -webkit-text-fill-color: #0f6b47 !important; font-weight: 800;
}
/* OMNIA_PLAY_STYLE_V1c: answer strips (mission_choice, build_order), NPC bubble */
html[data-omnia-section="lets_play"] body .omnia-play-shell button.mc-choice.mc-choice.mc-choice,
html[data-omnia-section="lets_play"] body .omnia-play-shell button.bo-item.bo-item.bo-item:not(.selected) {
  background: linear-gradient(135deg, #b84a08, #d65f0c) !important; border: 3px solid #fff !important; color: #fff !important;
  -webkit-text-fill-color: #fff !important; font-weight: 800; text-shadow: 0 1px 1px rgba(0, 0, 0, .2); box-shadow: 0 4px 10px rgba(80, 30, 0, .3) !important;
}
html[data-omnia-section="lets_play"] body .omnia-play-shell button.mc-choice.correct.correct.correct,
html[data-omnia-section="lets_play"] body .omnia-play-shell button.bo-item.selected.selected.selected {
  background: #dcf5e7 !important; border: 3px solid #1e9e6b !important; color: #0f6b47 !important; -webkit-text-fill-color: #0f6b47 !important; text-shadow: none !important;
}
html[data-omnia-section="lets_play"] body .omnia-play-shell button.mc-choice.wrong.wrong.wrong {
  background: #fde4e4 !important; border: 3px solid #d64545 !important; color: #a12626 !important; -webkit-text-fill-color: #a12626 !important; text-shadow: none !important;
}
html[data-omnia-section="lets_play"] .mc-npc-bubble {
  background: linear-gradient(118deg, #1fc3d0 0%, #0eaabb 55%, #0891b0 100%) !important; border: 0 !important; border-radius: 18px;
  box-shadow: 0 6px 14px rgba(8, 145, 176, .28), inset 0 0 0 3px rgba(255, 255, 255, .22);
}
html[data-omnia-section="lets_play"] .mc-npc-bubble * { color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 800; }
html[data-omnia-section="lets_play"] .mc-npc-bubble .mc-npc-name, html[data-omnia-section="lets_play"] .mc-npc-bubble [class*="badge"], html[data-omnia-section="lets_play"] .mc-npc-bubble [class*="label"] { background: #06687a !important; border-radius: 999px; padding: 2px 10px; }
/* OMNIA_HOMEWORK_STYLE_V1: practice_set = turquoise activity banners, orange answer strips */
html[data-omnia-section="homework"] .ps-activity { padding: 0 0 14px; overflow: hidden; border: 3px solid #14b2c0; border-radius: 22px; background: #fff; box-shadow: 0 8px 20px rgba(11, 143, 157, .16); }
html[data-omnia-section="homework"] .ps-activity > *:not(.ps-activity-head) { margin-left: 18px; margin-right: 18px; }
html[data-omnia-section="homework"] .ps-activity-head {
  margin: 0 0 14px; padding: 16px 22px; align-items: center; color: #fff;
  background: linear-gradient(118deg, #21d0dc 0%, #0eb0c0 48%, #0891b0 100%); box-shadow: 0 6px 14px rgba(8, 145, 176, .25);
}
html[data-omnia-section="homework"] .ps-activity-head :is(h3, p, div, span) { color: #fff !important; -webkit-text-fill-color: #fff; text-shadow: 0 1px 3px rgba(0, 70, 90, .3); }
html[data-omnia-section="homework"] .ps-activity-head h3 { font-weight: 900; font-size: 1.35rem; margin: 0; }
html[data-omnia-section="homework"] .ps-activity-number { background: #06687a !important; color: #fff !important; border: 2px solid #fff; }
html[data-omnia-section="homework"] .ps-activity-progress { background: #06687a; padding: 4px 12px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .85); }
html[data-omnia-section="homework"] body .ps-option:not(.correct):not(.wrong),
html[data-omnia-section="homework"] body .ps-match-card:not(.correct):not(.wrong):not(.selected),
html[data-omnia-section="homework"] body .ps-chip:not(.used) {
  background: linear-gradient(135deg, #b84a08, #d65f0c) !important; border: 3px solid #fff !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
  font-weight: 800; text-shadow: 0 1px 1px rgba(0, 0, 0, .2); box-shadow: 0 4px 10px rgba(80, 30, 0, .3);
}
html[data-omnia-section="homework"] body .ps-match-card.selected, html[data-omnia-section="homework"] body .ps-chip.held { background: #fff !important; border: 3px solid #d65f0c !important; color: #b84a08 !important; -webkit-text-fill-color: #b84a08 !important; }
html[data-omnia-section="homework"] .ps-select { border: 3px solid #14b2c0; font-weight: 900; color: #06566a; }
html[data-omnia-section="homework"] .ps-slot.over { border-color: #14b2c0; background: rgba(20, 178, 192, .12); }
html[data-omnia-section="homework"] .ps-tray { background: rgba(20, 178, 192, .12); }

/* OMNIA_COMPLETE_STYLE_V1 */
html[data-omnia-section="complete"] .complete-v1-hero { background: linear-gradient(118deg, #21d0dc 0%, #0eb0c0 48%, #0891b0 100%) !important; border: 0 !important; box-shadow: 0 14px 30px rgba(8, 145, 176, .32), inset 0 0 0 3px rgba(255, 255, 255, .28) !important; }
html[data-omnia-section="complete"] .complete-v1-hero-copy * { color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: 0 2px 4px rgba(0, 70, 90, .3); opacity: 1; }
html[data-omnia-section="complete"] .complete-v1-hero .complete-kicker { display: inline-block; padding: 7px 18px; border-radius: 999px; background: #06687a; border: 2px solid rgba(255, 255, 255, .9); font-weight: 900; letter-spacing: .16em; }
html[data-omnia-section="complete"] .complete-v1-section-head {
  margin: -1px -1px 16px; padding: 16px 22px; border-radius: 22px 22px 22px 22px;
  background: linear-gradient(118deg, #21d0dc 0%, #0eb0c0 48%, #0891b0 100%); box-shadow: 0 6px 14px rgba(8, 145, 176, .25);
}
html[data-omnia-section="complete"] .complete-v1-section-head :is(h2, h3, div, span:not(.complete-v1-count-badge):not(.complete-v1-optional)) { color: #fff !important; -webkit-text-fill-color: #fff; text-shadow: 0 1px 3px rgba(0, 70, 90, .3); background: none !important; border: 0 !important; }
html[data-omnia-section="complete"] .complete-v1-achievement { background: linear-gradient(118deg, #1fc3d0 0%, #0eaabb 55%, #0891b0 100%) !important; border: 0 !important; box-shadow: 0 6px 14px rgba(8, 145, 176, .25), inset 0 0 0 3px rgba(255, 255, 255, .22); }
html[data-omnia-section="complete"] .complete-v1-achievement * { color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 800; }
html[data-omnia-section="complete"] .complete-v1-path-item.needs-action, html[data-omnia-section="complete"] [class*="complete-v1-path-item"][class*="needs-a"] { background: linear-gradient(135deg, #b84a08, #d65f0c) !important; border: 3px solid #fff !important; box-shadow: 0 4px 10px rgba(80, 30, 0, .3); }
html[data-omnia-section="complete"] [class*="complete-v1-path-item"][class*="needs-a"] * { color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 800; }
html[data-omnia-section="complete"] .complete-action-primary, html[data-omnia-section="complete"] .complete-action-card { background: linear-gradient(135deg, #07798b, #055a6b) !important; border: 2px solid rgba(255, 255, 255, .85) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
html[data-omnia-section="complete"] .complete-action-card * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html[data-omnia-section="complete"] .complete-v1-reflection-option { background: linear-gradient(135deg, #b84a08, #d65f0c) !important; border: 3px solid #fff !important; color: #fff !important; font-weight: 800; }
html[data-omnia-section="complete"] .complete-v1-reflection-option * { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* OMNIA_TYK_STYLE_V1: text on turquoise cards = white */
html[data-omnia-section="test_your_knowledge"] body .depth-v2-question :is(div, span, h3, h4, p, strong, small):not(button):not(.correct):not(.wrong) { color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: 0 1px 2px rgba(0, 70, 90, .3); }
html[data-omnia-section="complete"] .complete-v1-section-head .complete-v1-count-badge, html[data-omnia-section="complete"] .complete-v1-section-head .complete-v1-optional {
  background: #fff !important; color: #06687a !important; -webkit-text-fill-color: #06687a !important; text-shadow: none !important; border: 0 !important; font-weight: 900;
}
html[data-omnia-section="complete"] .complete-v1-hero .omnia-section-identity { background: #fff !important; color: #0a8fa0 !important; border: 2px solid rgba(255, 255, 255, .7) !important; opacity: 1 !important; }
html[data-omnia-section="complete"] [class*="complete-v1-path-item"][class*="needs-a"] [class*="dot"] { background: #fff !important; }
/* OMNIA_BIBLE_MEMORY_STYLE_V1 */
html[data-omnia-section="lets_bible_it"] body .memory-verse-canonical { background: #fff !important; }
html[data-omnia-section="lets_bible_it"] .memory-verse-canonical > .depth-v2-eyebrow {
  display: inline-block; margin: 18px 0 0 18px; padding: 6px 16px; border-radius: 999px; background: #06687a; border: 2px solid rgba(255,255,255,.9);
  color: #fff !important; -webkit-text-fill-color: #fff; font-weight: 900; letter-spacing: .14em; position: relative; z-index: 1;
}
html[data-omnia-section="lets_bible_it"] .memory-verse-heading {
  margin: -22px -1px 14px; padding: 46px 26px 20px; border-radius: 0 0 22px 22px;
  background: linear-gradient(118deg, #21d0dc 0%, #0eb0c0 48%, #0891b0 100%) !important; box-shadow: 0 8px 18px rgba(8, 145, 176, .25);
}
html[data-omnia-section="lets_bible_it"] .memory-verse-heading h2, html[data-omnia-section="lets_bible_it"] .memory-verse-heading .memory-translation { color: #fff !important; -webkit-text-fill-color: #fff; text-shadow: 0 2px 4px rgba(0,70,90,.3); }
html[data-omnia-section="lets_bible_it"] .memory-goal-chip { background: #06687a !important; color: #fff !important; -webkit-text-fill-color: #fff; border: 2px solid rgba(255,255,255,.85) !important; }
html[data-omnia-section="lets_bible_it"] .memory-practice-goal { color: #06566a; font-weight: 700; padding: 0 18px; }
html[data-omnia-section="lets_bible_it"] body .memory-stage-tab { background: #fff !important; border: 2px solid #14b2c0 !important; color: #06687a !important; -webkit-text-fill-color: #06687a !important; font-weight: 900; }
html[data-omnia-section="lets_bible_it"] body .memory-stage-tab.active { background: linear-gradient(135deg, #07798b, #055a6b) !important; border-color: #fff !important; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: 0 4px 10px rgba(0,50,65,.35); }
html[data-omnia-section="lets_bible_it"] .memory-stage-panel { background: #fff !important; border: 3px solid #14b2c0 !important; border-radius: 22px; }
html[data-omnia-section="lets_bible_it"] .memory-stage-number { background: #06687a !important; color: #fff !important; border: 2px solid #fff; }
html[data-omnia-section="lets_bible_it"] .memory-stage-label { color: #0891b0 !important; font-weight: 900; }
html[data-omnia-section="lets_bible_it"] .memory-stage-panel h3 { color: #06566a !important; }
html[data-omnia-section="lets_bible_it"] .memory-meaning-card, html[data-omnia-section="lets_bible_it"] .memory-chunk-list > * {
  background: linear-gradient(118deg, #1fc3d0 0%, #0eaabb 55%, #0891b0 100%) !important; border: 0 !important; border-radius: 16px; box-shadow: 0 6px 14px rgba(8,145,176,.25), inset 0 0 0 3px rgba(255,255,255,.22);
}
html[data-omnia-section="lets_bible_it"] .memory-meaning-card *, html[data-omnia-section="lets_bible_it"] .memory-chunk-list > *, html[data-omnia-section="lets_bible_it"] .memory-chunk-list > * * { color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 800; }
html[data-omnia-section="lets_bible_it"] .memory-full-verse { background: linear-gradient(135deg, #076479 0%, #054b5e 100%) !important; color: #fff !important; -webkit-text-fill-color: #fff; border: 0 !important; border-radius: 22px; padding: 20px 24px; font-weight: 700; box-shadow: 0 10px 22px rgba(5,75,94,.35), inset 0 0 0 3px rgba(255,255,255,.18); }
html[data-omnia-section="lets_bible_it"] body .memory-verse-canonical button:not(.memory-stage-tab) { background: linear-gradient(135deg, #07798b, #055a6b) !important; border: 2px solid rgba(255,255,255,.85) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 900; }
html[data-omnia-section="lets_bible_it"] body .memory-verse-canonical button:disabled { opacity: .55; }
/* inputs in Write / Bible / Homework */
html[data-omnia-section="lets_write"] :is(input[type="text"], textarea), html[data-omnia-section="lets_bible_it"] :is(input[type="text"], textarea) { border: 3px solid #14b2c0; border-radius: 12px; padding: 6px 10px; font-weight: 700; color: #06566a; background: #fff; }
html[data-omnia-section="lets_bible_it"] .memory-verse-canonical > .depth-v2-eyebrow, html[data-omnia-section="lets_bible_it"] body .memory-stage-tab { opacity: 1 !important; }
/* OMNIA_INTRO_TURQUOISE_V1 (2026-10-03): the blue of the lesson cover becomes turquoise; the sky-blue part becomes a lighter turquoise */
.lesson-intro-screen {
  --cv-blue: #0891b0;
  --cv-navy: #054b5e;
  background:
    radial-gradient(circle at 50% 108%, rgba(255, 255, 255, .55), transparent 46%),
    linear-gradient(180deg, #054b5e 0%, #0891b0 34%, #5fd3de 66%, #c9f4f7 100%);
}
.lesson-intro-objective { border-color: rgba(8, 145, 176, .22); background: #effbfc; }
.lesson-intro-objective-text { color: #0b4452; }
.lesson-intro-objective-text .lesson-intro-hl { color: #067a93; background: rgba(8, 145, 176, .14); }
.lesson-intro-screen [style*="1E4FD8"], .lesson-intro-screen [style*="1e4fd8"] { border-color: #0891b0 !important; }
.intro-bunting { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 56'%3E%3Cpath d='M0 3 H168' stroke='%23ffffff' stroke-opacity='.8' stroke-width='3'/%3E%3Cpolygon points='4,4 52,4 28,52' fill='%23E5384B'/%3E%3Cpolygon points='60,4 108,4 84,52' fill='%23ffffff'/%3E%3Cpolygon points='116,4 164,4 140,52' fill='%230891b0' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E"); }
/* OMNIA_INTRO_STRIPS_V1: objective strips = turquoise banners; Start Lesson = turquoise button with thick white border */
.lesson-intro-screen .lesson-intro-objective {
  background: linear-gradient(118deg, #1fc3d0 0%, #0eaabb 55%, #0891b0 100%) !important; border: 0 !important;
  box-shadow: 0 6px 14px rgba(8, 145, 176, .3), inset 0 0 0 3px rgba(255, 255, 255, .25);
}
.lesson-intro-screen .lesson-intro-objective-text { color: #fff !important; font-weight: 800; text-shadow: 0 1px 3px rgba(0, 70, 90, .35); }
.lesson-intro-screen .lesson-intro-objective-text .lesson-intro-hl { color: #fff !important; background: #06687a !important; border: 2px solid rgba(255, 255, 255, .85); text-shadow: none; }
.lesson-intro-screen .lesson-intro-objective .lesson-intro-objective-number { background: #06687a !important; color: #fff !important; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0, 50, 65, .3); }
.lesson-intro-screen .lesson-intro-start {
  background: linear-gradient(135deg, #0aa6b9, #067a8e) !important; border: 6px solid #fff !important; color: #fff !important;
  box-shadow: 0 6px 0 #055a6b, 0 14px 26px rgba(5, 75, 94, .4) !important;
}
.lesson-intro-screen .lesson-intro-start:active { box-shadow: 0 2px 0 #055a6b !important; }
/* OMNIA_INTRO_UNIT_PILL_V1: unit name = turquoise capsule with thick white border */
.lesson-intro-screen .lesson-intro-unit {
  display: inline-block !important; width: auto; max-width: 100%; margin-left: auto; margin-right: auto; padding: 9px 26px; border-radius: 999px;
  background: linear-gradient(135deg, #0aa6b9, #067a8e) !important; border: 4px solid #fff;
  color: #fff !important; -webkit-text-fill-color: #fff; font-weight: 900; text-shadow: 0 1px 3px rgba(0, 70, 90, .35);
  box-shadow: 0 4px 0 #055a6b, 0 10px 20px rgba(5, 75, 94, .3);
}
/* OMNIA_INTRO_TITLE_V1: unit capsule, then the LESSON capsule right under it (same look), lesson title in red */
.lesson-intro-screen .lesson-intro-unit { margin-bottom: 8px; }
.lesson-intro-screen .lesson-intro-lessontag {
  display: inline-block !important; width: auto; margin: 0 auto 10px; padding: 7px 24px; border-radius: 999px;
  background: linear-gradient(135deg, #0aa6b9, #067a8e) !important; border: 4px solid #fff;
  color: #fff !important; -webkit-text-fill-color: #fff; font-weight: 900; letter-spacing: .14em; text-shadow: 0 1px 3px rgba(0, 70, 90, .35);
  box-shadow: 0 4px 0 #055a6b, 0 10px 20px rgba(5, 75, 94, .3);
}
.lesson-intro-screen .lesson-intro-title { color: #c4182f !important; -webkit-text-fill-color: #c4182f; }
/* OMNIA_INTRO_STRIPS_V2: yellow border on the strips; key words = plain italics (no capsule) */
.lesson-intro-screen .lesson-intro-objective {
  border: 4px solid #ffc93c !important;
  box-shadow: 0 6px 14px rgba(8, 145, 176, .3) !important;
}
.lesson-intro-screen .lesson-intro-objective-text .lesson-intro-hl {
  background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important;
  font-style: italic; font-weight: 900; color: #fff !important;
}
/* OMNIA_INTRO_YELLOW_V1: yellow borders on the capsules and the Start Lesson button; the button glows and pulses */
.lesson-intro-screen .lesson-intro-unit, .lesson-intro-screen .lesson-intro-lessontag { border-color: #ffc93c !important; }
.lesson-intro-screen .lesson-intro-start {
  border: 6px solid #ffc93c !important;
  animation: omnia-start-pulse 1.6s ease-in-out infinite;
}
@keyframes omnia-start-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 0 #055a6b, 0 0 14px 2px rgba(255, 201, 60, .55), 0 0 28px 6px rgba(33, 208, 220, .35); }
  50%      { transform: scale(1.06); box-shadow: 0 6px 0 #055a6b, 0 0 26px 8px rgba(255, 201, 60, .95), 0 0 52px 16px rgba(33, 208, 220, .6); }
}
.lesson-intro-screen .lesson-intro-start:active { animation: none; transform: translateY(4px); box-shadow: 0 2px 0 #055a6b !important; }
@media (prefers-reduced-motion: reduce) { .lesson-intro-screen .lesson-intro-start { animation: none; } }
/* OMNIA_INTRO_START_CENTER_V1: the Start button is a direct child of the card, centred across both columns */
.lesson-intro-card > .lesson-intro-start { grid-column: 1 / -1; justify-self: center; margin: 8px auto 0; }
/* OMNIA_BRAND_BIGGER_V1 (2026-10-03): school logo + name larger on the intro cover and in the section header */
.lesson-intro-brandbar { gap: 20px; }
.lesson-intro-brandbar .intro-brand-logo { width: 118px; height: 118px; }
.lesson-intro-brandbar .intro-brand-name { font-size: clamp(1.25rem, 2.9cqw, 2rem); padding: 26px 34px; letter-spacing: .03em; font-weight: 900; }
.lesson-intro-screen { padding-top: clamp(228px, 20cqw, 250px); }
@container (min-width: 1100px) { .lesson-intro-card { margin-top: 80px; } }
@container (max-width: 960px) {
  .lesson-intro-screen { padding-top: 288px; }
  .lesson-intro-brandbar .intro-brand-logo { width: 92px; height: 92px; }
  .lesson-intro-brandbar .intro-brand-name { font-size: 1.1rem; padding: 20px 22px; }
  .intro-landmark { top: 212px; }
}
.omnia-client-logo { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 16px; padding: 4px; }
.lesson-header .brand { gap: 14px; }
.omnia-client-brand-name { font-size: 1.1rem; letter-spacing: .1em; font-weight: 900; }
@media (max-width: 650px) {
  .omnia-client-logo { width: 50px; height: 50px; flex-basis: 50px; }
  .omnia-client-brand-name { font-size: .8rem; }
}
/* OMNIA_CAPSULE_BORDER_V1: school-name capsule border comes from the brand (white by default; CBEC = wine red) */
.lesson-intro-brandbar .intro-brand-name { border-color: var(--brand-capsule-border, #fff) !important; }
/* OMNIA_MEMORY_TWO_ROWS_V1: the memory board is always two equal rows (columns = half the cards) */
html[data-omnia-section="lets_play"] .mm-board {
  grid-template-columns: repeat(var(--mm-cols, 5), minmax(0, 1fr)) !important;
  max-width: 860px; margin-left: auto; margin-right: auto; gap: 12px;
}
@media (max-width: 480px) {
  html[data-omnia-section="lets_play"] .mm-board { gap: 6px; }
  html[data-omnia-section="lets_play"] .mm-board .mm-tile { padding: 4px; min-height: 0; font-size: .72rem; }
}
/* OMNIA_MEMORY_BIG_TEXT_V1: larger letters on the memory cards */
html[data-omnia-section="lets_play"] .mm-tile .mm-tile-front, html[data-omnia-section="lets_play"] .mm-tile .mm-tile-front * {
  font-size: clamp(1.15rem, 2.5vw, 1.7rem) !important; line-height: 1.15; font-weight: 900 !important; text-align: center;
}
html[data-omnia-section="lets_play"] .mm-tile .mm-tile-back { font-size: clamp(2rem, 4vw, 3rem) !important; }
@media (max-width: 480px) {
  html[data-omnia-section="lets_play"] .mm-tile .mm-tile-front, html[data-omnia-section="lets_play"] .mm-tile .mm-tile-front * { font-size: .8rem !important; line-height: 1.1; }
}
@media (max-width: 480px) {
  html[data-omnia-section="lets_play"] .mm-board .mm-tile { aspect-ratio: 3 / 4.6; padding: 3px; }
  html[data-omnia-section="lets_play"] .mm-tile .mm-tile-front, html[data-omnia-section="lets_play"] .mm-tile .mm-tile-front * { font-size: .7rem !important; overflow-wrap: anywhere; hyphens: auto; }
}
html[data-omnia-section="lets_play"] .mm-tile.revealed .mm-tile-front { display: flex; align-items: center; justify-content: center; }
/* OMNIA_MEMORY_QMARK_V1: the "?" on a face-down card is yellow and fills ~80% of the card height */
html[data-omnia-section="lets_play"] .mm-board .mm-tile { container-type: inline-size; }
html[data-omnia-section="lets_play"] .mm-tile .mm-tile-back {
  font-size: 150cqw !important; line-height: 1 !important; font-weight: 900 !important;
  color: #ffd23c !important; -webkit-text-fill-color: #ffd23c !important;
  text-shadow: 0 3px 0 rgba(0, 60, 80, .55), 0 0 18px rgba(255, 210, 60, .45);
}
html[data-omnia-section="lets_play"] .mm-tile:not(.revealed) .mm-tile-back { display: flex; align-items: center; justify-content: center; }
@media (max-width: 480px) { html[data-omnia-section="lets_play"] .mm-tile .mm-tile-back { font-size: 170cqw !important; } }
/* OMNIA_NAME_COLOR_V1: school-name text colour on the lesson cover comes from the brand (CBEC = wine red) */
.lesson-intro-brandbar .intro-brand-name { color: var(--brand-name-color, #054b5e) !important; -webkit-text-fill-color: var(--brand-name-color, #054b5e); }

/* OMNIA_TEACHER_NOTE_V1 -- collapsed teacher suggestions at the top of each section */
.omnia-tnote { margin: 0 0 12px; text-align: left; }
.omnia-tnote .omnia-tnote-btn { display: inline-block; padding: 6px 14px; font-size: 0.85rem; font-weight: 700; border-radius: 999px; cursor: pointer; background: #fff; color: #054b5e; border: 2px solid #d65f0c; }
.omnia-tnote .omnia-tnote-btn[aria-expanded="true"] { background: #fff4ea; }
.omnia-tnote .omnia-tnote-body { margin-top: 8px; padding: 10px 14px; background: #fff4ea; border: 2px solid #d65f0c; border-radius: 12px; color: #3b2a1c; font-size: 0.92rem; line-height: 1.45; }
.omnia-tnote .omnia-tnote-body[hidden] { display: none; }
.omnia-tnote .omnia-tnote-mode { margin: 0 0 6px; }
.omnia-tnote .omnia-tnote-body ul { margin: 0; padding-left: 20px; }
.omnia-tnote .omnia-tnote-body li { margin-bottom: 4px; }

/* OMNIA_COMPETENCY_V1 -- "Competency:" button beside "Teacher's note:" */
.omnia-tnote .omnia-tools-row { display: flex; flex-wrap: wrap; gap: 8px; }
.omnia-tnote .omnia-comp-btn { display: inline-block; padding: 6px 14px; font-size: 0.85rem; font-weight: 700; border-radius: 999px; cursor: pointer; background: #fff; color: #054b5e; border: 2px solid #0891b0; }
.omnia-tnote .omnia-comp-btn[aria-expanded="true"] { background: #e6f7fa; }
.omnia-tnote .omnia-comp-body { margin-top: 8px; padding: 10px 14px; background: #e6f7fa; border: 2px solid #0891b0; border-radius: 12px; color: #0b3a45; font-size: 0.92rem; line-height: 1.45; }
.omnia-tnote .omnia-comp-body[hidden] { display: none; }
.omnia-tnote .omnia-comp-lead { margin: 0 0 6px; }
.omnia-tnote .omnia-comp-list { margin: 0 0 6px; padding-left: 18px; }
.omnia-tnote .omnia-comp-list li { margin-bottom: 6px; }
.omnia-tnote .omnia-comp-tag { display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; color: #fff; background: #0891b0; }
.omnia-tnote .omnia-comp-tag-values { background: #d65f0c; }
.omnia-tnote .omnia-comp-es { font-size: 0.82rem; color: #3c5a63; }
.omnia-tnote .omnia-comp-more { margin-top: 4px; }
.omnia-tnote .omnia-comp-more summary { cursor: pointer; font-weight: 700; }
.omnia-tnote .omnia-comp-where { margin: 6px 0 2px; font-size: 0.82rem; }
.omnia-tnote .omnia-comp-sub { margin: 6px 0 2px; font-weight: 700; font-size: 0.85rem; }
.omnia-tnote .omnia-comp-more ul { margin: 0; padding-left: 18px; font-size: 0.85rem; }

/* OMNIA_COMPETENCY_V2 -- indicators addressed by this section */
.omnia-tnote .omnia-comp-ind { margin: 2px 0 6px; padding-left: 18px; font-size: 0.85rem; }
.omnia-tnote .omnia-comp-body > .omnia-comp-sub { margin: 6px 0 2px; font-weight: 700; font-size: 0.85rem; color: #054b5e; }
/* OMNIA_COMP_ORANGE_V1: the part of an indicator this lesson works on = the same orange as the exercise options (#b84a08 is the text orange used on white; passes contrast on this light-blue panel) */
.omnia-tnote .omnia-comp-ind strong { color: #b84a08; font-weight: 800; }
.omnia-tnote .omnia-comp-hint { color: #b84a08; font-weight: 700; }

/* OMNIA_DASH_DIALOGUE_V1 (2026-10-06): reading text may contain line breaks (one dialogue line per speaker, introduced by an em dash) */
.depth-v2-reading-text {
  white-space: pre-line;
}

/* OMNIA_WORD_KARAOKE_V1 (2026-10-06): word being spoken = coral pill (user choice A, #FF9E7A) with dark turquoise text.
   Target-language yellow highlights stay as they are; the karaoke word sits on top of them. */
.omnia-kw {
  border-radius: 0.25em;
  padding: 0 0.1em;
  margin: 0 -0.1em;
  transition: background-color 70ms ease, color 70ms ease;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.omnia-kw.is-now,
.read-target-highlight .omnia-kw.is-now {
  background-color: #FF9E7A !important;
  color: #04323f !important;
}

@media (prefers-reduced-motion: reduce) {
  .omnia-kw { transition: none; }
}

/* OMNIA_WB_ACCENTS_V1 (2026-10-06): words pronounced differently in British / American English get one button per accent */
.word-accents {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 4px;
}

.word-play-button.word-accent-button {
  width: auto;
  height: auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
}

.word-accent-button .accent-tag {
  background: rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  letter-spacing: .04em;
}

.word-accent-button .accent-respell {
  font-weight: 600;
}

/* OMNIA_WB_ACCENTS_V1b: compact pills; a card that carries accent buttons may grow a little taller than the fixed 355px */
.word-accent-button {
  padding: 4px 10px !important;
  font-size: 13px !important;
  gap: 6px !important;
}

.word-accent-button .accent-tag {
  font-size: 11px;
  padding: 1px 6px;
}

/* the card faces are absolutely positioned (flip card), so extra content does not grow the card: give it room explicitly */
.wb-mr3-card:has(.word-accents),
.wb-mr3-card:has(.word-accents) .word-card-inner,
.wb-mr3-card:has(.word-accents) .word-card-face {
  min-height: 430px;
}

/* OMNIA_AUDIO_RESILIENCE_V1 (2026-10-07): a failed lesson MP3 is hidden and retried silently; the native player (which shows the word "Error") never reaches the student */
audio[data-omnia-wait] { display: none !important; }
.omnia-audio-wait {
  display: flex; align-items: center; gap: 10px;
  min-height: 54px; max-width: 420px; width: 100%; box-sizing: border-box;
  padding: 10px 18px; border-radius: 999px;
  background: #076479; color: #fff; font-size: 1rem; font-weight: 600;
}
.omnia-audio-wait-dot {
  width: 14px; height: 14px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: omnia-audio-spin .8s linear infinite; flex: none;
}
.omnia-audio-wait.is-failed { background: transparent; padding: 0; min-height: 0; }
.omnia-audio-wait-btn {
  border: 3px solid #fff; background: #b84a08; color: #fff; border-radius: 999px; padding: 10px 20px; font-weight: 700; font-size: 1rem; cursor: pointer;
}
@keyframes omnia-audio-spin { to { transform: rotate(360deg); } }

/* OMNIA_WB_CHART_TILE_FIT_V1 (user, 2026-10-07): chart buttons were a fixed ~64px wide, so long words (airport, terrible, amazing) spilled out of the tile.
   The track width now follows the longest word of the chart (--tile-chars, set by word-bank.js), every tile has the same width, text centred. */
.wb-chart .wb-chart-grid {
  font-size: 1.45rem;
  grid-template-columns: repeat(auto-fill, max(3.4em, calc(var(--tile-chars, 3) * .66em + 1.9em)));
  justify-content: start;
  gap: 12px;
}
.wb-chart .wb-chart-tile { width: 100%; min-height: 2.6em; padding: .45em .5em; box-sizing: border-box; text-align: center; }
.wb-chart .wb-chart-display { font-size: 1em; white-space: nowrap; text-align: center; line-height: 1.15; }
.wb-chart .wb-chart-label { font-size: .5em; text-align: center; white-space: nowrap; }
@media (max-width: 480px) { .wb-chart .wb-chart-grid { font-size: 1.1rem; gap: 9px; } }

/* OMNIA_WB_CHART_TILE_FIT_V1b: charts of phrases/sentences (longest item > 14 characters) get a capped, wrapping tile instead of a one-line tile wider than the screen */
.wb-chart .wb-chart-grid { grid-template-columns: repeat(auto-fill, min(100%, max(3.4em, calc(var(--tile-chars, 3) * .66em + 1.9em)))); }
.wb-chart .wb-chart-grid[data-long] { font-size: 1.1rem; }
.wb-chart .wb-chart-grid[data-long] .wb-chart-display { white-space: normal; overflow-wrap: break-word; hyphens: manual; line-height: 1.2; }
.wb-chart .wb-chart-grid[data-long] .wb-chart-tile { min-height: 3.2em; }

/* OMNIA_COMP_LESSON_HL_V1: unit indicators this lesson covers get a pale orange highlight (legend in the sub-heading) */
.omnia-tnote li.omnia-comp-lesson { background: #ffe3cc; border-left: 4px solid #d65f0c; padding: 2px 8px; border-radius: 4px; list-style-position: inside; }

/* OMNIA_TUTOR_CHAT_V1: Coach tutor chat (floating button + panel), turquoise/orange system */
#omnia-coach { position: fixed; right: 16px; bottom: 16px; z-index: 9000; font-family: inherit; }
#omnia-coach[hidden] { display: none; }
#omnia-coach .omnia-coach-fab { display: flex; align-items: center; gap: 8px; border: 3px solid #fff; border-radius: 999px; padding: 10px 18px; cursor: pointer; color: #fff; font-weight: 800; font-size: 17px; background: linear-gradient(135deg, #21d0dc, #0891b0); box-shadow: 0 6px 16px rgba(5, 75, 94, .35); }
#omnia-coach .omnia-coach-fab:hover { filter: brightness(1.06); }
#omnia-coach .omnia-coach-fab-icon { font-size: 20px; line-height: 1; }
#omnia-coach.is-open .omnia-coach-fab { display: none; }
#omnia-coach .omnia-coach-nudge { position: absolute; right: 4px; bottom: 62px; max-width: 220px; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: #fff; color: #054b5e; font-weight: 700; font-size: 15px; border: 2px solid #0891b0; box-shadow: 0 6px 14px rgba(5, 75, 94, .25); cursor: pointer; animation: omnia-coach-pop .35s ease-out; }
#omnia-coach .omnia-coach-nudge[hidden] { display: none; }
@keyframes omnia-coach-pop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#omnia-coach .omnia-coach-panel { width: 360px; max-width: calc(100vw - 24px); height: min(520px, 72vh); display: flex; flex-direction: column; background: #e4f6fa; border: 3px solid #0891b0; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px rgba(5, 75, 94, .4); }
#omnia-coach .omnia-coach-panel[hidden] { display: none; }
#omnia-coach .omnia-coach-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; color: #fff; background: linear-gradient(135deg, #21d0dc, #0891b0); font-size: 17px; }
#omnia-coach .omnia-coach-sub { font-weight: 600; opacity: .9; font-size: 14px; }
#omnia-coach .omnia-coach-close { border: 0; background: transparent; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; }
#omnia-coach .omnia-coach-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
#omnia-coach .omnia-coach-msg { max-width: 86%; padding: 9px 13px; border-radius: 14px; font-size: 16px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
#omnia-coach .omnia-coach-coach { align-self: flex-start; background: #fff; color: #054b5e; border: 2px solid #b6e3ec; border-bottom-left-radius: 4px; }
#omnia-coach .omnia-coach-user { align-self: flex-end; color: #fff; background: linear-gradient(135deg, #b84a08, #d65f0c); border-bottom-right-radius: 4px; }
#omnia-coach .omnia-coach-typing { display: flex; gap: 5px; padding: 12px 14px; }
#omnia-coach .omnia-coach-typing span { width: 8px; height: 8px; border-radius: 50%; background: #0891b0; animation: omnia-coach-dot 1s infinite ease-in-out; }
#omnia-coach .omnia-coach-typing span:nth-child(2) { animation-delay: .15s; }
#omnia-coach .omnia-coach-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes omnia-coach-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
#omnia-coach .omnia-coach-form { display: flex; gap: 8px; padding: 10px; background: #fff; border-top: 2px solid #b6e3ec; }
#omnia-coach .omnia-coach-input { flex: 1; min-width: 0; font-size: 16px; padding: 9px 12px; border: 2px solid #0891b0; border-radius: 12px; color: #054b5e; }
#omnia-coach .omnia-coach-input:disabled { background: #eef3f4; }
#omnia-coach .omnia-coach-send { border: 0; border-radius: 12px; padding: 0 16px; font-size: 18px; color: #fff; cursor: pointer; background: linear-gradient(135deg, #076479, #054b5e); }
#omnia-coach .omnia-coach-send:disabled { opacity: .5; cursor: default; }
@media (max-width: 520px) {
  #omnia-coach { right: 8px; bottom: 8px; }
  #omnia-coach .omnia-coach-panel { width: calc(100vw - 16px); height: min(70vh, 520px); }
}

/* OMNIA_GAMER_ZONE_MENU_V1: arrow on the Let's Play tab + floating menu to the Gamer Zone games */
.section-tab .omnia-gz-caret { display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; min-width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .28); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; text-shadow: none; }
.section-tab .omnia-gz-caret:hover, .section-tab .omnia-gz-caret:focus-visible, .section-tab .omnia-gz-caret[aria-expanded="true"] { background: #fff; color: #b84a08; outline: none; }
.omnia-gz-menu { position: fixed; z-index: 9500; width: 250px; padding: 10px; background: #fff; border: 3px solid #0891b0; border-radius: 16px; box-shadow: 0 12px 28px rgba(5, 75, 94, .35); }
.omnia-gz-menu[hidden] { display: none; }
.omnia-gz-menu .omnia-gz-title { margin: 2px 4px 8px; font-weight: 800; font-size: 14px; color: #054b5e; }
.omnia-gz-menu .omnia-gz-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-top: 6px; border-radius: 12px; text-decoration: none; color: #fff; background: linear-gradient(135deg, #b84a08, #d65f0c); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(80, 30, 0, .25); }
.omnia-gz-menu .omnia-gz-item:first-of-type { background: linear-gradient(135deg, #076479, #054b5e); }
.omnia-gz-menu .omnia-gz-item:hover { filter: brightness(1.08); }
.omnia-gz-menu .omnia-gz-item > span:first-child { font-size: 24px; }
.omnia-gz-menu .omnia-gz-item strong { display: block; font-size: 16px; }
.omnia-gz-menu .omnia-gz-item small { display: block; font-size: 13px; opacity: .9; }

/* ===== OMNIA_BACK_TO_COVER_V1: "Back" pill on the lesson intro ===== */
.lesson-intro-backrow { grid-column: 1 / -1; display: flex; justify-content: flex-start; margin: -6px 0 10px; }
.lesson-intro-back {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 20px; border-radius: 999px;
  font: 800 .95rem/1 Sora, "DM Sans", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; border: 3px solid #FFFFFF;
  background: linear-gradient(110deg, #12A0B2 0%, #075E6B 100%);
  box-shadow: 0 0 0 1px #075E6B, 0 5px 12px rgba(5,75,94,.3);
}
.lesson-intro-back:hover { filter: brightness(1.08); }
.lesson-intro-back:active { transform: translateY(2px); }
.lesson-intro-back:focus-visible { outline: 3px solid #FFC726; outline-offset: 3px; }

/* OMNIA_SPEAK_GAP_STARTER_V1 */
.mr3-gap-starter { margin: 4px 0 0; font-size: .95em; opacity: .9; }
.mr3-gap-starter strong { font-weight: 800; }