:root {
  --navy: #071F55;
  --blue: #2F80C9;
  --blue-dark: #1664A8;
  --blue-soft: #EAF4FF;
  --orange: #F47C20;
  --orange-soft: #FFF2E7;
  --red: #D71920;
  --red-soft: #FFF0F1;
  --green: #198754;
  --green-soft: #EAF8F1;
  --ink: #14213D;
  --muted: #5F6B7A;
  --line: #D9E4EF;
  --soft: #F6F8FB;
  --white: #FFFFFF;
  --panel: rgba(255, 255, 255, 0.97);
  --shadow: 0 18px 46px rgba(7, 31, 85, 0.13);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--soft);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(47, 128, 201, 0.14), transparent 34%),
    radial-gradient(circle at 100% 90%, rgba(244, 124, 32, 0.10), transparent 31%),
    var(--soft);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell {
  width: min(100%, 1000px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(26px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 20px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 52px;
  height: 43px;
  border: 3px solid var(--blue);
  border-radius: 18px;
  background: #fff;
  position: relative;
  box-shadow: 0 8px 20px rgba(7, 31, 85, .13);
}
.brand-mark::after {
  content: "";
  position: absolute;
  left: 8px;
  bottom: -9px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-left: 3px solid var(--blue);
  border-bottom: 3px solid var(--blue);
  transform: skewY(-28deg);
  border-radius: 0 0 0 4px;
}
.bubble-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: 13px;
  z-index: 1;
}
.dot-blue { left: 9px; background: var(--blue); }
.dot-orange { left: 25px; background: var(--orange); }
.bubble-plus {
  position: absolute;
  right: 3px;
  top: -12px;
  color: var(--red);
  font-weight: 900;
  font-size: 1.3rem;
  z-index: 2;
}
.brand-copy { line-height: 1; }
.wordmark { font-size: 1.18rem; font-weight: 900; letter-spacing: -.03em; }
.wordmark .conv { color: var(--blue); }
.wordmark .a { color: var(--orange); }
.wordmark .plus { color: var(--red); }
.brand-copy p {
  margin: 5px 0 0;
  color: var(--navy);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.icon-btn, .listen-btn {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  color: var(--navy);
  box-shadow: 0 8px 20px rgba(7, 31, 85, .08);
  cursor: pointer;
}
.icon-btn { width: 44px; height: 44px; border-radius: 14px; font-size: 1.05rem; }

main { flex: 1; }
.screen { display: none; animation: fadeUp .35s ease; }
.screen.active { display: block; }

.lesson-hero, .hero-card, .form-card, .question-card, .results-card, .review-panel, .tip-card {
  border: 1px solid rgba(255,255,255,.92);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.lesson-hero {
  border-radius: 28px;
  padding: clamp(26px, 5vw, 48px);
  color: #fff;
  background: linear-gradient(135deg, var(--navy) 0%, #103D78 58%, var(--blue) 100%);
  display: grid;
  grid-template-columns: 1.3fr .9fr;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  position: relative;
}
.lesson-hero::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -120px;
  top: -120px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
}
.lesson-hero h1 {
  margin: 15px 0 10px;
  font-size: clamp(2.3rem, 8vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.055em;
}
.lesson-hero p { margin: 0; max-width: 630px; color: rgba(255,255,255,.84); font-size: 1.08rem; line-height: 1.55; }
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.light-pill { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.16); }
.one-many {
  min-height: 175px;
  border-radius: 25px;
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  position: relative;
  z-index: 1;
}
.one-many div { text-align: center; }
.one-many strong { display: block; font-size: 2.4rem; color: #fff; }
.one-many span { font-size: 1rem; color: rgba(255,255,255,.78); }
.one-many b { font-size: 1.8rem; color: #FFD7B8; }

.rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.rule-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 21px;
  padding: 22px 20px 20px;
  background: #fff;
  box-shadow: 0 9px 24px rgba(7,31,85,.07);
  overflow: hidden;
}
.rule-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--blue);
}
.orange-rule::before { background: var(--orange); }
.red-rule::before { background: var(--red); }
.rule-number {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: .86rem;
  font-weight: 900;
}
.orange-rule .rule-number { background: var(--orange-soft); color: #B95007; }
.red-rule .rule-number { background: var(--red-soft); color: var(--red); }
.rule-card h2 { margin: 13px 0 8px; font-size: 1.22rem; color: var(--navy); }
.rule-card p { margin: 0; color: var(--muted); line-height: 1.52; }
.examples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.examples span {
  padding: 8px 10px;
  border-radius: 11px;
  background: var(--soft);
  color: var(--navy);
  font-size: .88rem;
  font-weight: 800;
}

.tip-card {
  border-radius: 20px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-left: 6px solid var(--orange);
}
.tip-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--orange);
  font-weight: 900;
}
.tip-card strong { color: var(--navy); }
.tip-card p { margin: 5px 0 0; color: var(--muted); line-height: 1.5; }

.primary-btn, .secondary-btn, .text-btn {
  border: 0;
  cursor: pointer;
  font-weight: 900;
}
.primary-btn {
  min-height: 52px;
  border-radius: 15px;
  padding: 14px 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  box-shadow: 0 11px 24px rgba(47,128,201,.27);
}
#continueBtn { display: block; width: min(100%, 520px); margin: 18px auto 0; }
.primary-btn:active { transform: translateY(1px); }
.secondary-btn {
  min-height: 50px;
  border-radius: 14px;
  padding: 13px 18px;
  color: var(--blue-dark);
  background: var(--blue-soft);
  border: 1px solid #C7DCF2;
}
.text-btn {
  padding: 0;
  margin: 0 0 20px;
  color: var(--blue-dark);
  background: transparent;
  text-align: left;
}

.hero-card {
  border-radius: 28px;
  padding: clamp(26px, 5vw, 46px);
  color: white;
  background: linear-gradient(135deg, var(--navy) 0%, #123B76 68%, var(--blue) 100%);
  display: grid;
  grid-template-columns: 1.45fr .65fr;
  gap: 24px;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.hero-card::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  right: -95px;
  top: -105px;
  background: rgba(255,255,255,.07);
}
.hero-card h1 { font-size: clamp(2rem, 6vw, 3.55rem); line-height: 1.02; margin: 18px 0 14px; letter-spacing: -.045em; }
.hero-card p { margin: 0; color: rgba(255,255,255,.8); max-width: 580px; font-size: 1.05rem; line-height: 1.6; }
.hero-badge {
  min-height: 180px;
  border-radius: 25px;
  padding: 20px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  position: relative;
  z-index: 1;
}
.hero-badge b { color: #FFD7B8; font-size: 1.6rem; }
.mini-word { font-weight: 900; letter-spacing: .16em; font-size: .85rem; }
.mini-word.many { color: #FFD7B8; }

.form-card { margin: 18px auto 0; max-width: 720px; border-radius: 24px; padding: clamp(22px, 4vw, 34px); }
.form-card label { display: block; font-weight: 800; margin: 0 0 8px; color: var(--navy); }
.form-card label span { color: var(--muted); font-weight: 500; }
.form-card input {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 15px 16px;
  outline: none;
  margin-bottom: 18px;
  background: #fff;
  transition: .2s ease;
}
.form-card input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47,128,201,.13); }
.assessment-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 5px 0 22px; }
.assessment-summary div { border: 1px solid var(--line); background: var(--soft); border-radius: 15px; padding: 14px 8px; text-align: center; }
.assessment-summary strong { display: block; font-size: 1.35rem; color: var(--navy); }
.assessment-summary span { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.form-card .primary-btn { width: 100%; }
.error-text { color: var(--red); font-weight: 700; min-height: 1.2em; margin: 10px 0 0; }

.progress-wrap { max-width: 800px; margin: 0 auto 14px; }
.progress-meta { display: flex; justify-content: space-between; gap: 12px; margin: 0 3px 8px; color: var(--muted); font-size: .86rem; font-weight: 800; }
.progress-track { width: 100%; height: 10px; border-radius: 999px; background: #DDE8F3; overflow: hidden; }
.progress-bar { height: 100%; width: 4%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--red)); transition: width .3s ease; }

.question-card { max-width: 800px; margin: 0 auto; border-radius: 26px; padding: clamp(22px, 5vw, 40px); }
.question-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pill.muted { background: var(--blue-soft); color: var(--blue-dark); }
.points { color: var(--muted); font-size: .84rem; font-weight: 800; }
.prompt-row { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; margin: 28px 0 22px; }
.instruction { margin: 0 0 8px; color: var(--muted); font-weight: 750; }
.question-card h1 { margin: 0; color: var(--navy); font-size: clamp(2rem, 7vw, 3.35rem); line-height: 1.08; letter-spacing: -.04em; }
.listen-btn {
  min-width: 128px;
  min-height: 52px;
  border-radius: 15px;
  padding: 13px 16px;
  color: var(--blue-dark);
  background: var(--blue-soft);
  border-color: #C7DCF2;
  font-weight: 900;
}
.listen-btn.playing { color: #fff; background: var(--orange); border-color: var(--orange); }
.listen-btn:disabled { opacity: .6; cursor: not-allowed; }
.answer-area { margin-top: 8px; }
.answer-input {
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 17px 18px;
  background: #fff;
  color: var(--ink);
  outline: none;
  font-size: 1.1rem;
}
.answer-input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47,128,201,.12); }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.choice-btn {
  min-height: 58px;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  color: var(--navy);
  background: #fff;
  font-weight: 850;
  cursor: pointer;
}
.choice-btn.selected { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px rgba(47,128,201,.10); }
.choice-btn.correct { border-color: var(--green); background: var(--green-soft); color: #11633F; }
.choice-btn.incorrect { border-color: var(--red); background: var(--red-soft); color: #9E1117; }
.choice-btn:disabled { cursor: default; }
.feedback-box { display: none; margin-top: 18px; border-radius: 15px; padding: 15px 16px; line-height: 1.48; }
.feedback-box.show { display: block; }
.feedback-box.success { background: var(--green-soft); color: #12613F; border: 1px solid #BDE8D1; }
.feedback-box.error { background: var(--red-soft); color: #8E171B; border: 1px solid #F2C4C7; }
.feedback-box.info { background: var(--orange-soft); color: #8A480D; border: 1px solid #F4D2B7; }
.question-actions { margin-top: 24px; display: flex; justify-content: flex-end; }
.question-actions .primary-btn { min-width: 190px; }
.hidden { display: none !important; }

.results-card { max-width: 800px; margin: 0 auto; border-radius: 28px; padding: clamp(24px, 5vw, 42px); text-align: center; }
.score-ring {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--blue) 0%, #E4EBF3 0%);
}
.score-ring::before { content: ""; width: 142px; height: 142px; border-radius: 50%; background: #fff; position: absolute; }
.score-ring > div { position: relative; z-index: 1; }
.score-ring strong { display: block; color: var(--navy); font-size: 2.35rem; line-height: 1; }
.score-ring span { display: block; color: var(--muted); margin-top: 7px; font-size: .82rem; font-weight: 800; }
.result-message { color: var(--orange); font-weight: 900; margin: 0 0 8px; }
.results-card h1 { margin: 0; color: var(--navy); font-size: clamp(1.65rem, 5vw, 2.4rem); }
.muted-copy { color: var(--muted); }
.score-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 24px 0; }
.score-grid div { border: 1px solid var(--line); border-radius: 15px; padding: 15px 10px; background: var(--soft); }
.score-grid span { display: block; color: var(--muted); font-size: .78rem; }
.score-grid strong { display: block; color: var(--navy); margin-top: 5px; font-size: 1.22rem; }
.results-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.review-panel { max-width: 800px; margin: 18px auto 0; border-radius: 24px; padding: clamp(20px,4vw,32px); }
.review-panel h2 { margin-top: 0; color: var(--navy); }
.review-item { border: 1px solid var(--line); border-left: 6px solid var(--green); border-radius: 15px; padding: 15px; margin: 11px 0; background: #fff; }
.review-item.incorrect-review { border-left-color: var(--red); }
.review-meta { display: grid; gap: 5px; margin-top: 8px; color: var(--muted); font-size: .91rem; }
.review-meta b { color: var(--ink); }

footer { padding: 25px 4px 2px; text-align: center; color: var(--navy); }
footer span { display: block; font-weight: 900; }
footer small { display: block; margin-top: 4px; color: var(--muted); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }



/* Convo mascot — matching the ConversA+ Learn demos */
.hero-convo-side,
.welcome-convo,
.question-convo-guide,
.results-convo-row,
.convo-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.hero-convo-side {
  min-width: 0;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.convo-pair { width: 100%; }
.welcome-convo { flex-direction: column; position: relative; z-index: 1; }
.question-convo-guide {
  width: fit-content;
  max-width: 100%;
  margin: 17px 0 -7px;
  justify-content: flex-start;
}
.results-convo-row {
  margin: -8px auto 18px;
  flex-wrap: wrap;
}
.convo-note {
  position: relative;
  max-width: 320px;
  padding: 12px 15px;
  border: 2px solid #C7DCF2;
  border-radius: 18px;
  color: var(--navy);
  background: #fff;
  text-align: left;
  line-height: 1.42;
  font-size: .92rem;
  box-shadow: 0 9px 22px rgba(7,31,85,.10);
}
.convo-note::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 28px;
  width: 15px;
  height: 15px;
  background: inherit;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-color: #C7DCF2;
  transform: rotate(45deg);
}
.convo-note strong { color: var(--blue-dark); }
.convo-note.mini { max-width: 240px; padding: 10px 13px; font-size: .84rem; }
.convo-note.dark-note {
  color: #fff;
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.25);
  box-shadow: none;
}
.convo-note.dark-note::before { border-color: rgba(255,255,255,.25); }
.convo-note.dark-note strong { color: #FFD7B8; }
.convo-svg {
  width: 150px;
  min-width: 116px;
  max-width: 42vw;
  line-height: 0;
  flex: 0 0 auto;
  filter: drop-shadow(0 12px 18px rgba(7,31,85,.20));
  animation: convoFloat 2.8s ease-in-out infinite;
}
.convo-svg.small { width: 86px; min-width: 72px; max-width: 25vw; }
.convo-svg svg { display: block; width: 100%; height: auto; overflow: visible; }
.convo-svg .arm-l,
.convo-svg .arm-r,
.convo-svg .leg-l,
.convo-svg .leg-r,
.convo-svg .brow-l,
.convo-svg .brow-r,
.convo-svg .mouth {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .25s ease;
}
.convo-svg.state-wave .arm-r { transform: rotate(-42deg) translate(4px,-10px); }
.convo-svg.state-wave .arm-l { transform: rotate(8deg); }
.convo-svg.state-teach .arm-r { transform: rotate(-20deg) translate(2px,-5px); }
.convo-svg.state-teach .arm-l { transform: rotate(12deg); }
.convo-svg.state-happy .mouth { transform: scaleX(1.08) translateY(-1px); }
.convo-svg.state-thinking .arm-r { transform: rotate(35deg) translate(-5px,7px); }
.convo-svg.state-thinking .brow-l { transform: rotate(12deg); }
.convo-svg.state-thinking .brow-r { transform: rotate(-12deg); }
.convo-svg.state-thinking .mouth { transform: scaleX(.62) translateY(5px); }
.convo-svg.state-correct { animation: convoCorrect .72s ease-in-out 2; }
.convo-svg.state-correct .mouth { transform: scaleX(1.12) translateY(-2px); }
.convo-svg.state-encourage .arm-r { transform: rotate(-10deg); }
.convo-svg.state-encourage .mouth { transform: scaleX(.9) translateY(2px); }
.convo-svg.state-celebrate .arm-l { transform: rotate(42deg) translate(-8px,-10px); }
.convo-svg.state-celebrate .arm-r { transform: rotate(-42deg) translate(8px,-10px); }
.convo-svg.state-celebrate { animation: convoBounce .75s ease-in-out infinite alternate; }
.convo-svg.state-proud { animation: convoProud 1.8s ease-in-out infinite alternate; }
.one-many.compact {
  width: 100%;
  min-height: auto;
  padding: 13px 18px;
  border-radius: 18px;
}
.one-many.compact strong { font-size: 1.55rem; }
.one-many.compact span { font-size: .88rem; }
@keyframes convoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes convoCorrect { 0% { transform: scale(1); } 40% { transform: translateY(-10px) scale(1.07); } 75% { transform: translateY(-3px) scale(1.03); } 100% { transform: scale(1); } }
@keyframes convoBounce { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-9px) rotate(1deg); } }
@keyframes convoProud { from { transform: translateY(0) scale(1); } to { transform: translateY(-6px) scale(1.03); } }

@media (max-width: 720px) {
  .lesson-hero, .hero-card { grid-template-columns: 1fr; }
  .convo-pair { flex-direction: column; }
  .convo-note::before { left: 50%; top: -9px; transform: translateX(-50%) rotate(135deg); }
  .question-convo-guide .convo-note::before { left: -9px; top: 28px; transform: rotate(45deg); }
  .hero-convo-side .convo-svg { width: 136px; }
  .one-many { min-height: 130px; }
  .welcome-convo { flex-direction: row; }
  .welcome-convo .convo-svg { width: 105px; min-width: 92px; }
  .rule-grid { grid-template-columns: 1fr; }
  .prompt-row { grid-template-columns: 1fr; }
  .listen-btn { width: 100%; }
  .choice-grid { grid-template-columns: 1fr; }
  .results-actions { grid-template-columns: 1fr; }
  .score-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .brand-copy p { font-size: .64rem; }
  .assessment-summary { gap: 7px; }
  .assessment-summary div { padding: 12px 5px; }
  .question-actions .primary-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .convo-svg, .convo-svg.state-correct, .convo-svg.state-celebrate, .convo-svg.state-proud { animation: none !important; }
}

/* Official ConversA+ Convo mascot supplied by the creator. */
.convo-svg img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}