/* =====================================================================================
   Hyperlink Dynamics · Interactive lesson demo
   Self-contained styles. The page chrome follows light/dark mode; the courseware stage
   (what the child sees) always stays bright.
   ===================================================================================== */

:root {
  /* Shared design tokens (same as the main site) */
  --ink: #14213D;
  --brand: #3D5AFE;
  --brand-600: #2F45D1;
  --accent: #FF8A3D;
  --mint: #22C55E;
  --sky: #E8EEFF;
  --paper: #FFFFFF;
  --muted: #5B6478;
  --line: #E3E7F0;
  --radius: 16px;
  --pill: 999px;
  --shadow: 0 8px 24px rgba(20, 33, 61, .08);

  /* Chrome (switches in dark mode) */
  --bg: #F6F8FD;
  --surface: var(--paper);
  --surface-2: #F4F6FC;
  --text: var(--ink);
  --text-muted: var(--muted);
  --border: var(--line);
  --bubble: var(--sky);
  --down-text: var(--brand-600);
  --up-text: #B4530A;
  --focus: var(--brand);
  --j-str: #0F7B4F;
  --j-num: #B4530A;
  --j-lit: #7C3AED;
  --note-bg: #FFF5EC;
  --note-border: #FFD3B3;

  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-kid: 'Fredoka', 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1120;
    --surface: #121A2F;
    --surface-2: #18223B;
    --text: #E7ECF7;
    --text-muted: #A3AECB;
    --border: #26324F;
    --bubble: #1C2747;
    --down-text: #9DAEFF;
    --up-text: #FFB27A;
    --focus: #9DAEFF;
    --shadow: 0 8px 24px rgba(0, 0, 0, .35);
    --j-str: #7EE2B0;
    --j-num: #FFB27A;
    --j-lit: #C4B5FD;
    --note-bg: #241B14;
    --note-border: #5A3A22;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--down-text); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

code { font-family: var(--font-mono); font-size: .9em; }

button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 8px;
}

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

.skip-link {
  position: absolute;
  left: 16px; top: -48px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: var(--pill);
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap {
  width: min(1200px, 100% - 32px);
  margin-inline: auto;
}

/* ---------- Top bar ---------- */

.topbar {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  text-decoration: none;
}
.wordmark__logo { flex: none; }
.wordmark span { white-space: nowrap; }

.topbar__nav { display: flex; gap: 18px; }
.topbar__nav a {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
}
.topbar__nav a:hover { color: var(--text); }

/* ---------- Intro ---------- */

.intro { padding-top: 28px; }

.intro__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.intro h1 {
  margin: 0;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--pill);
  background: var(--note-bg);
  border: 1px solid var(--note-border);
  color: var(--up-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.badge::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.intro__lede {
  max-width: 72ch;
  margin: 12px 0 8px;
  font-size: 17px;
}

.intro__note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

/* ---------- Controls ---------- */

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 33, 61, .06);
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover:not(:disabled) { border-color: var(--brand); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn--primary:hover:not(:disabled) { background: var(--brand-600); border-color: var(--brand-600); }

.btn--big { min-height: 52px; padding: 12px 22px; font-size: 16px; }

.switch {
  position: relative;
  width: 34px; height: 20px;
  border-radius: var(--pill);
  background: #C3CBE0;
  transition: background .2s;
}
.switch::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: transform .2s;
}
.btn--toggle[aria-pressed="true"] { border-color: var(--brand); }
.btn--toggle[aria-pressed="true"] .switch { background: var(--brand); }
.btn--toggle[aria-pressed="true"] .switch::after { transform: translateX(14px); }

.controls__help {
  flex: 1 1 260px;
  margin: 0;
  color: var(--text-muted);
  font-size: 13.5px;
}

/* ---------- Demo layout ---------- */

.demo {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "teacher" "stage" "log";
  margin-block: 18px 56px;
}

.stage { grid-area: stage; }
.teacher { grid-area: teacher; }
.log { grid-area: log; }

@media (min-width: 980px) {
  .demo {
    grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "stage teacher"
      "stage log";
    align-items: start;
  }
  .log { align-self: stretch; min-height: 0; }
}

.panel {
  position: relative;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--text-muted);
  font: 700 11px/1 var(--font-ui);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.panel-tag::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand);
}
.panel-tag--stage { color: #4A5574; }
.panel-tag--stage::before { background: var(--accent); }

/* =====================================================================================
   Courseware stage (always bright)
   ===================================================================================== */

.stage {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 660px;
  padding: 16px 18px 18px;
  border: 1px solid #D9E1F7;
  border-radius: 24px;
  overflow: hidden;
  color: var(--ink);
  color-scheme: light;
  font-family: var(--font-kid);
  background:
    radial-gradient(60px 26px at 14% 16%, rgba(255, 255, 255, .9) 98%, transparent),
    radial-gradient(44px 20px at 19% 13%, rgba(255, 255, 255, .9) 98%, transparent),
    radial-gradient(70px 28px at 86% 74%, rgba(255, 255, 255, .7) 98%, transparent),
    linear-gradient(180deg, #EDF2FF 0%, #E6ECFF 55%, #F2F6FF 100%);
  box-shadow: var(--shadow);
}

.stage .panel-tag { margin-bottom: 0; }

.stage__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: none;
}

.progress__dot {
  width: 12px; height: 12px;
  border-radius: var(--pill);
  background: #C9D3EE;
  transition: width .3s, background .3s;
}
.progress__dot[data-state="current"] { width: 30px; background: var(--brand); }
.progress__dot[data-state="done"] { background: var(--mint); }

.stage__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.stars {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 14px 5px 10px;
  border-radius: var(--pill);
  background: #fff;
  box-shadow: 0 4px 12px rgba(20, 33, 61, .1);
  font-size: 20px;
  font-weight: 700;
  flex: none;
}
.stars.is-popping { animation: pop .5s ease; }

/* ---------- Board ---------- */

.board-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

.board {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 18px 4px 8px;
}

.idle { text-align: center; opacity: .75; }
.idle__row { display: flex; gap: 14px; justify-content: center; font-size: 46px; }
.idle__text { margin: 10px 0 0; font-size: 22px; font-weight: 600; }

.mic-check {
  max-width: 420px;
  padding: 26px 24px;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}
.mic-check__icon { display: inline-block; font-size: 52px; animation: bob 2.2s ease-in-out infinite; }
.mic-check__title { margin: 8px 0 4px; font-size: 22px; font-weight: 600; }
.mic-check__small { margin: 0 0 14px; color: var(--muted); font: 14px/1.5 var(--font-ui); }

.title-card { text-align: center; animation: title-in .6s cubic-bezier(.2, .9, .3, 1.2) backwards; }
.title-card__icon { display: inline-block; font-size: 76px; line-height: 1.1; animation: bob 2.4s ease-in-out infinite; }
.title-card__step {
  margin: 10px 0 2px;
  color: var(--brand-600);
  font: 700 13px/1.2 var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.title-card__name { margin: 0; font-size: clamp(30px, 6cqi, 42px); font-weight: 700; }

/* Cards */

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 660px;
}

@container (min-width: 600px) {
  .cards--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards--grid { grid-template-columns: repeat(2, minmax(0, 210px)); justify-content: center; }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 136px;
  padding: 16px 8px 14px;
  border: 4px solid transparent;
  border-radius: 24px;
  background: var(--tint, #fff);
  color: var(--ink);
  box-shadow: 0 6px 0 rgba(20, 33, 61, .07), 0 10px 22px rgba(20, 33, 61, .08);
  cursor: default;
  transition: transform .2s ease, border-color .2s, box-shadow .2s;
  animation: card-in .5s cubic-bezier(.2, .9, .3, 1.3) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.card__art { font-size: clamp(46px, 9cqi, 66px); line-height: 1.1; }
.card__word { font-size: 23px; font-weight: 600; letter-spacing: .01em; }

.board.is-tappable .card { cursor: pointer; }
.board.is-tappable .card:hover { transform: translateY(-4px); }

.card.is-focus {
  border-color: var(--brand);
  transform: scale(1.05);
  box-shadow: 0 0 0 6px rgba(61, 90, 254, .18), 0 12px 26px rgba(20, 33, 61, .12);
}
.card.is-hint {
  border-color: var(--accent);
  animation: hint-pulse 1.1s ease-in-out infinite;
}
.card.is-reveal {
  border-color: var(--mint);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .22), 0 12px 26px rgba(20, 33, 61, .12);
}
.card.is-starred::after {
  content: '⭐';
  position: absolute;
  top: -12px; right: -8px;
  font-size: 26px;
  animation: pop .45s ease backwards;
}
.card.is-modeling .card__art { animation: model-bounce .55s ease-in-out 2; }
.card.is-pressed { animation: press .45s ease; }
.card.is-wiggle { animation: wiggle .5s ease; }

.sim-pointer {
  position: absolute;
  right: 10px; bottom: 6px;
  font-size: 34px;
  pointer-events: none;
  animation: tap-hand .9s ease both;
}

/* Scene (one big picture, no word) */

.scene {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 4 / 3;
  border: 10px solid #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #D9E1F7, 0 14px 30px rgba(20, 33, 61, .14);
  animation: card-in .55s cubic-bezier(.2, .9, .3, 1.2) backwards;
}
.scene.is-modeling { animation: scene-pulse .7s ease-in-out 2; }

.scene__sky { position: absolute; inset: 0; background: linear-gradient(#9FB0D6, #DCE4F5); }
.scene--rainy .scene__sky { background: linear-gradient(#7C8BA6, #C2CBDA); }
.scene--sunny .scene__sky { background: linear-gradient(#5DB8FF, #CFEBFF); }
.scene--windy .scene__sky { background: linear-gradient(#86CDE3, #D6F0F7); }

.scene__sun {
  position: absolute;
  top: 14%; left: 14%;
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #FFD43B;
  box-shadow: 0 0 0 12px rgba(255, 212, 59, .35), 0 0 60px #FFE066;
  animation: sun-glow 3s ease-in-out infinite;
}

.scene__particles { position: absolute; inset: 0; }
.scene__particle {
  position: absolute;
  top: -12px;
  left: var(--x);
  width: calc(9px * var(--size));
  height: calc(9px * var(--size));
  border-radius: 50%;
  background: #fff;
  opacity: .92;
  animation: snow-fall var(--speed) linear infinite;
  animation-delay: var(--delay);
}
.scene--rainy .scene__particle {
  width: 3px;
  height: calc(16px * var(--size));
  border-radius: 2px;
  background: rgba(255, 255, 255, .85);
  animation-name: rain-fall;
  animation-duration: calc(var(--speed) / 4);
}
.scene--windy .scene__particle {
  top: calc(var(--x) * .6);
  left: -40px;
  width: auto;
  height: auto;
  background: none;
  font-size: calc(22px * var(--size));
  animation-name: leaf-drift;
}

.scene__ground {
  position: absolute;
  left: -6%; right: -6%; bottom: -14%;
  height: 36%;
  border-radius: 50% 50% 0 0;
  background: #7BC67E;
}
.scene--snowy .scene__ground { background: #fff; box-shadow: inset 0 6px 0 #EEF3FF; }
.scene--rainy .scene__ground { background: #5FA866; }

.scene__prop {
  position: absolute;
  right: 13%; bottom: 9%;
  font-size: clamp(50px, 12cqi, 86px);
  line-height: 1;
}

.scene__frame::before,
.scene__frame::after {
  content: '';
  position: absolute;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 33, 61, .05);
}
.scene__frame::before { top: 0; bottom: 0; left: calc(50% - 4px); width: 8px; }
.scene__frame::after { left: 0; right: 0; top: calc(46% - 4px); height: 8px; }

/* Summary */

.summary {
  width: min(100%, 500px);
  padding: 22px 20px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(20, 33, 61, .12);
  text-align: center;
  animation: title-in .6s cubic-bezier(.2, .9, .3, 1.2) backwards;
}
.summary__trophy { display: inline-block; font-size: 58px; line-height: 1; animation: bob 2.4s ease-in-out infinite; }
.summary__title { margin: 6px 0 4px; font-size: 30px; font-weight: 700; }
.summary__stars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px;
  margin: 0 0 12px;
  font-size: 28px;
}
.summary__stars > span[style] { animation: pop .4s ease backwards; animation-delay: calc(300ms + var(--i) * 140ms); }
.summary__count { margin-left: 8px; font-size: 20px; font-weight: 600; color: var(--muted); }
.summary__words {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
@container (min-width: 520px) {
  .summary__words { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.summary__words li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  border-radius: 14px;
  background: #F2F5FF;
  font-size: 18px;
  font-weight: 600;
}
.summary__words li.is-said { background: #E7F8EE; }
.summary__check { color: #15803D; }
.summary__sentence { margin: 0 0 4px; font-size: 19px; }
.summary__time { margin: 0 0 14px; color: var(--muted); font: 14px var(--font-ui); }

.play-again {
  min-height: 48px;
  padding: 10px 24px;
  border: 0;
  border-radius: var(--pill);
  background: var(--brand);
  color: #fff;
  font: 600 18px var(--font-kid);
  cursor: pointer;
  box-shadow: 0 6px 0 var(--brand-600);
}
.play-again:hover { background: var(--brand-600); }

/* Model pop-up ("🔊 sunny") */

.model-pop {
  position: absolute;
  top: -2px; left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 18px;
  border: 2px solid var(--brand);
  border-radius: var(--pill);
  background: #fff;
  color: var(--brand-600);
  font-size: clamp(20px, 4.5cqi, 28px);
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -6px);
  box-shadow: 0 8px 20px rgba(61, 90, 254, .18);
}
.model-pop.is-visible { animation: model-pop 2.4s ease both; }
.model-pop.is-visible.is-slow { animation-duration: 3.2s; letter-spacing: .08em; }
.model-pop__icon { font-size: .8em; }

/* Hint */

.hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin: 6px auto 0;
  padding: 10px 16px;
  max-width: 560px;
  border: 2px solid #FFC59A;
  border-radius: 18px;
  background: #FFF7F0;
}
.hint.is-entering { animation: rise-in .4s ease; }
.hint__art { font-size: 30px; }
.hint__syllables { display: inline-flex; align-items: center; gap: 6px; }
.hint__syllable {
  padding: 2px 12px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  animation: pop .4s ease backwards;
  animation-delay: calc(var(--i) * 250ms);
}
.hint__syllable:nth-of-type(even) { background: var(--accent); }
.hint__dot { font-size: 26px; font-weight: 700; color: var(--muted); }
.hint__tip { font: 500 15px/1.4 var(--font-ui); color: #6B3A12; }

/* ---------- Turn cue, mic and controls ---------- */

.turn-cue {
  min-height: 28px;
  margin: 0;
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  color: var(--brand-600);
  opacity: 0;
  transition: opacity .25s;
}
.turn-cue.is-visible { opacity: 1; animation: rise-in .35s ease; }

.stage__controls {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
}

.round-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  margin-top: 18px;
  padding: 8px 16px;
  border: 2px solid #D5DDF5;
  border-radius: var(--pill);
  background: #fff;
  color: var(--ink);
  font: 600 16px var(--font-kid);
  cursor: pointer;
  transition: border-color .15s, opacity .2s;
}
.round-btn:hover:not(:disabled) { border-color: var(--brand); }
.round-btn:disabled { opacity: .45; cursor: not-allowed; }
.round-btn.is-pressed { animation: press .45s ease; }

.mic-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 128px;
}

.mic {
  position: relative;
  display: grid;
  place-items: center;
  width: 86px; height: 86px;
  border: 0;
  border-radius: 50%;
  background: #C3CCE6;
  color: #fff;
  cursor: not-allowed;
  transition: background .25s, transform .15s;
  box-shadow: 0 6px 0 rgba(20, 33, 61, .12);
}
.mic__icon { position: relative; width: 40px; height: 40px; }
.mic__ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 4px solid transparent;
}
.mic.is-open {
  background: var(--brand);
  cursor: pointer;
  box-shadow: 0 6px 0 var(--brand-600);
}
.mic.is-open .mic__ring { border-color: rgba(61, 90, 254, .35); animation: ring 1.6s ease-out infinite; }
.mic.is-listening {
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 6px 0 #D96A22;
}
.mic.is-listening .mic__ring { border-color: rgba(255, 138, 61, .45); animation: ring 1s ease-out infinite; }
.mic:active:not(:disabled) { transform: translateY(2px); }

.voice-bars {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  opacity: .25;
  transition: opacity .2s;
}
.voice-bars i {
  display: block;
  width: 5px;
  height: 22px;
  border-radius: 3px;
  background: var(--accent);
  transform: scaleY(.25);
  transform-origin: center;
}
.voice-bars.is-active { opacity: 1; }
.voice-bars.is-active i { animation: bars .9s ease-in-out infinite; }
.voice-bars.is-active i:nth-child(2) { animation-delay: -.2s; }
.voice-bars.is-active i:nth-child(3) { animation-delay: -.45s; }
.voice-bars.is-active i:nth-child(4) { animation-delay: -.1s; }
.voice-bars.is-active i:nth-child(5) { animation-delay: -.3s; }
.voice-bars.is-hearing i { animation-duration: .45s; }

.mic__label {
  min-height: 1.3em;
  color: #4A5574;
  font: 600 13px/1.3 var(--font-ui);
  text-align: center;
}

.mic-note {
  max-width: 250px;
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  color: #4A5574;
  font: 13.5px/1.45 var(--font-ui);
  text-align: center;
}

/* Speech line (live transcript / final answer) */

.transcript {
  align-self: center;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 7px 16px;
  border-radius: var(--pill);
  background: #fff;
  box-shadow: 0 4px 12px rgba(20, 33, 61, .08);
  font-size: 18px;
  text-align: center;
}
.transcript[data-mode="empty"] { visibility: hidden; }
.transcript[data-mode="live"] { color: #9A4A0F; }
.transcript__icon { margin-right: 2px; }
.transcript__who { font-weight: 600; }
.transcript__text { overflow-wrap: anywhere; }

/* Accessibility fallback (no microphone) */

.fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.link-btn {
  padding: 4px 6px;
  border: 0;
  background: none;
  color: var(--brand-600);
  font: 500 14px var(--font-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.fallback__panel {
  width: 100%;
  max-width: 560px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid #D9E1F7;
  animation: rise-in .3s ease;
}
.fallback__label { margin: 0 0 8px; color: #4A5574; font: 600 13.5px var(--font-ui); text-align: center; }

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.chips:empty { display: none; }

.chip {
  min-height: 44px;
  padding: 8px 18px;
  border: 2px solid #C9D4FA;
  border-radius: var(--pill);
  background: #fff;
  color: var(--ink);
  font: 600 17px var(--font-kid);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.chip:hover { border-color: var(--brand); background: #F3F5FF; }

.fallback__form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.fallback__form input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid #D5DDF5;
  border-radius: var(--pill);
  background: #fff;
  color: var(--ink);
  font: 16px var(--font-ui);
}
.fallback__form input:disabled { opacity: .55; }
.send-btn {
  min-height: 44px;
  padding: 8px 18px;
  border: 0;
  border-radius: var(--pill);
  background: var(--brand);
  color: #fff;
  font: 600 15px var(--font-ui);
  cursor: pointer;
}
.send-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Effects layer */

.fx {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.confetti {
  position: absolute;
  top: 40%; left: 50%;
  width: 9px; height: 13px;
  border-radius: 2px;
  opacity: 0;
  animation: confetti 1.5s cubic-bezier(.2, .7, .4, 1) var(--delay) forwards;
}

.cheer {
  position: absolute;
  top: 34%; left: 50%;
  margin: 0;
  color: var(--brand-600);
  font-size: clamp(26px, 6cqi, 40px);
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 2px 0 #fff, 0 0 18px #fff;
  animation: cheer 1.7s ease forwards;
}

.flying-star {
  position: absolute;
  font-size: 32px;
  line-height: 1;
  animation: fly-star .75s cubic-bezier(.5, -.3, .6, 1) forwards;
}

/* Start overlay */

.stage-start {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(232, 238, 255, .88);
  backdrop-filter: blur(3px);
}
.stage-start__card {
  width: min(100%, 460px);
  padding: 26px 22px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(20, 33, 61, .16);
  text-align: center;
}
.stage-start__emoji { margin: 0; font-size: 34px; letter-spacing: .1em; }
.stage-start__title { margin: 6px 0 2px; font-size: clamp(26px, 6cqi, 34px); font-weight: 700; }
.stage-start__meta { margin: 0 0 18px; color: var(--muted); font: 15px var(--font-ui); }
.stage-start__actions { display: flex; flex-direction: column; gap: 10px; }
.stage-start__actions .btn { font-family: var(--font-ui); }
.stage-start .btn:not(.btn--primary) { background: #fff; color: var(--ink); border-color: #D5DDF5; }
.stage-start__small { margin: 14px 0 0; color: var(--muted); font: 13px var(--font-ui); }

@container (max-width: 440px) {
  .stage__controls { gap: 8px; }
  .round-btn {
    flex-direction: column;
    gap: 0;
    min-height: 56px;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 18px;
    font-size: 13.5px;
    line-height: 1.15;
  }
  .mic { width: 74px; height: 74px; }
  .mic-wrap { min-width: 100px; }
  .card { min-height: 120px; }
  .transcript { font-size: 16px; }
}

/* =====================================================================================
   Teacher panel
   ===================================================================================== */

.teacher__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.avatar {
  flex: none;
  width: 80px; height: 80px;
}
.avatar svg { display: block; width: 100%; height: 100%; overflow: visible; }
.avatar__eyes { transform-box: fill-box; transform-origin: center; animation: blink 4.5s infinite; }
.avatar__talk { opacity: 0; transform-box: fill-box; transform-origin: center; }
.avatar.is-speaking .avatar__smile { opacity: 0; }
.avatar.is-speaking .avatar__talk { opacity: 1; animation: talk .26s ease-in-out infinite alternate; }
.avatar__spark { transform-box: fill-box; transform-origin: center; }
.avatar.is-speaking .avatar__spark { animation: spin 2.4s linear infinite; }
.avatar[data-mood="cheer"] svg { animation: hop .5s ease; }
.avatar[data-mood="curious"] svg { transform: rotate(-4deg); transition: transform .3s; }

.teacher__id { min-width: 0; }
.teacher__name { margin: 0; font: 600 23px/1.2 var(--font-kid); }
.teacher__role { margin: 2px 0 6px; color: var(--text-muted); font-size: 13.5px; }
.teacher__policy {
  display: inline-block;
  padding: 0 8px;
  border-radius: var(--pill);
  background: var(--note-bg);
  color: var(--up-text);
  font-weight: 600;
}

.teacher__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
}
.teacher__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #9AA4BC;
}
.teacher__status[data-state="talking"] .teacher__dot { background: var(--brand); animation: blip 1s ease-in-out infinite; }
.teacher__status[data-state="listening"] .teacher__dot { background: var(--accent); animation: blip .8s ease-in-out infinite; }
.teacher__status[data-state="waiting"] .teacher__dot { background: var(--accent); }
.teacher__status[data-state="thinking"] .teacher__dot { background: #F5B300; animation: blip .5s ease-in-out infinite; }
.teacher__status[data-state="done"] .teacher__dot { background: var(--mint); }

.bubble {
  position: relative;
  min-height: 4.2em;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--bubble);
  font: 500 19px/1.4 var(--font-kid);
}
.bubble::before {
  content: '';
  position: absolute;
  top: -9px; left: 30px;
  border: 10px solid transparent;
  border-top: 0;
  border-bottom-color: var(--bubble);
}
.bubble strong { font-weight: 700; }
.bubble.is-model {
  color: var(--down-text);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* =====================================================================================
   Protocol log
   ===================================================================================== */

.log {
  display: flex;
  flex-direction: column;
}

.log__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.log__title { margin: 0; font-size: 17px; font-weight: 700; }
.log__counts { display: flex; gap: 6px; margin: 0; }
.log__count {
  padding: 1px 9px;
  border-radius: var(--pill);
  font: 600 12.5px var(--font-mono);
}
.log__count--down { background: rgba(61, 90, 254, .12); color: var(--down-text); }
.log__count--up { background: rgba(255, 138, 61, .16); color: var(--up-text); }
.log__actions { display: flex; gap: 6px; margin-left: auto; }

.mini-btn {
  min-height: 34px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.mini-btn:hover { border-color: var(--brand); }

.log__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-top: 10px;
}

.log__legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.tag {
  padding: 2px 10px;
  border-radius: var(--pill);
  font-size: 12.5px;
  font-weight: 600;
}
.tag--down { background: rgba(61, 90, 254, .12); color: var(--down-text); }
.tag--up { background: rgba(255, 138, 61, .16); color: var(--up-text); }

.log__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
  margin: 0;
  padding: 0 4px 0 0;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
  font: 12.5px/1.45 var(--font-mono);
}

@media (min-width: 980px) {
  .log__list { flex: 1 1 0; min-height: 260px; max-height: none; }
}

.log__item {
  padding: 7px 10px 8px;
  border-left: 4px solid var(--brand);
  border-radius: 10px;
  background: var(--surface-2);
  animation: log-in .3s ease;
}
.log__item--down { margin-right: 18px; }
.log__item--up { margin-left: 18px; border-left-color: var(--accent); }

.log__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 600 11.5px/1.4 var(--font-ui);
}
.log__item--down .log__dir { color: var(--down-text); }
.log__item--up .log__dir { color: var(--up-text); }
.log__time { color: var(--text-muted); font-weight: 500; white-space: nowrap; }

.log__type { display: block; margin-top: 2px; color: var(--text); font-size: 13.5px; font-weight: 700; }

.log__json {
  margin: 3px 0 0;
  color: var(--text-muted);
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.j-key { color: var(--text); }
.j-str { color: var(--j-str); }
.j-num { color: var(--j-num); }
.j-lit { color: var(--j-lit); }

.log__empty {
  margin: 0;
  padding: 18px 12px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
}

/* =====================================================================================
   Explainer
   ===================================================================================== */

.how {
  padding: 8px 0 56px;
  border-top: 1px solid var(--border);
}
.how h2 { margin: 28px 0 16px; font-size: 1.6rem; letter-spacing: -.01em; }

.how__grid {
  display: grid;
  gap: 24px;
  align-items: start;
}
@media (min-width: 900px) {
  .how__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

.how__list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: how;
}
.how__list li {
  position: relative;
  padding-left: 44px;
  counter-increment: how;
}
.how__list li::before {
  content: counter(how);
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.how__list code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.flow {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.flow__node {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid var(--brand);
  border-radius: 14px;
}
.flow__node--courseware { border-color: var(--accent); }
.flow__node strong { display: block; }
.flow__node small { display: block; color: var(--text-muted); font-size: 13px; }
.flow__icon { font-size: 28px; }

.flow__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 10px 4px;
}
.flow__link {
  display: flex;
  gap: 10px;
  font-size: 13px;
}
.flow__link strong { display: block; }
.flow__link--down strong { color: var(--down-text); }
.flow__link--up strong { color: var(--up-text); }
.flow__link code { display: block; color: var(--text-muted); font-size: 11.5px; overflow-wrap: anywhere; }

.flow__arrow {
  position: relative;
  flex: none;
  width: 14px;
  min-height: 64px;
}
.flow__arrow::before {
  content: '';
  position: absolute;
  left: 5px; top: 0; bottom: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--brand);
}
.flow__arrow::after {
  content: '';
  position: absolute;
  left: 0;
  border: 7px solid transparent;
}
.flow__link--down .flow__arrow::after { bottom: -6px; border-top: 9px solid var(--brand); border-bottom: 0; }
.flow__link--up .flow__arrow::before { background: var(--accent); }
.flow__link--up .flow__arrow::after { top: -6px; border-bottom: 9px solid var(--accent); border-top: 0; }

.flow__child {
  padding-top: 10px;
  color: var(--text-muted);
  font-size: 13.5px;
  text-align: center;
}

.honesty {
  margin-top: 28px;
  padding: 16px 18px;
  border: 1px solid var(--note-border);
  border-left: 5px solid var(--accent);
  border-radius: 12px;
  background: var(--note-bg);
}
.honesty p { margin: 0; }
.honesty p + p { margin-top: 6px; color: var(--text-muted); font-size: 15px; }

.privacy-note {
  display: flex;
  gap: 10px;
  margin: 18px 0 0;
  color: var(--text-muted);
  font-size: 14.5px;
}

.reference {
  margin-top: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.reference summary {
  padding: 14px 18px;
  font-weight: 600;
  cursor: pointer;
}
.reference summary span { color: var(--text-muted); font-weight: 400; font-size: 14px; }

.ref {
  display: grid;
  gap: 18px;
  padding: 0 18px 18px;
}
@media (min-width: 900px) {
  .ref { grid-template-columns: 1fr 1fr; }
}
.ref__group h3 { margin: 0 0 8px; font-size: 16px; }
.ref__group h3 span { color: var(--text-muted); font-weight: 500; font-size: 13px; }
.ref__group--down h3 { color: var(--down-text); }
.ref__group--up h3 { color: var(--up-text); }
.ref dl { margin: 0; }
.ref__row { padding: 8px 0; border-top: 1px solid var(--border); }
.ref dt code { font-weight: 700; font-size: 14px; }
.ref dd { margin: 2px 0 0; font-size: 14px; }
.ref__fields { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ref__fields code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12px;
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 14px;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding-block: 18px;
}
.footer nav { display: flex; gap: 16px; }
.footer a { color: var(--text-muted); }

/* ---------- Small screens ---------- */

@media (max-width: 600px) {
  .wordmark { font-size: 15.5px; gap: 8px; }
  .topbar__nav { gap: 14px; }
  .topbar__nav a { font-size: 14px; }
  .stage { min-height: 0; padding: 14px 12px 16px; border-radius: 20px; }
  .board, .board-wrap { min-height: 260px; }
  .avatar { width: 64px; height: 64px; }
  .bubble { font-size: 18px; margin-top: 12px; }
  .controls .btn { flex: 1 1 auto; }
  .flow__links { grid-template-columns: 1fr; }
  .log__item--down { margin-right: 8px; }
  .log__item--up { margin-left: 8px; }
}

/* ---------- Animations ---------- */

@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.85); } }
@keyframes title-in { from { opacity: 0; transform: scale(.8); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes log-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes press { 40% { transform: scale(.92); } }
@keyframes wiggle { 20%, 60% { transform: rotate(-4deg); } 40%, 80% { transform: rotate(4deg); } }
@keyframes model-bounce { 50% { transform: scale(1.18) translateY(-4px); } }
@keyframes scene-pulse { 50% { transform: scale(1.03); } }
@keyframes hint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 138, 61, .45), 0 10px 22px rgba(20, 33, 61, .08); }
  50% { box-shadow: 0 0 0 10px rgba(255, 138, 61, 0), 0 10px 22px rgba(20, 33, 61, .08); }
}
@keyframes tap-hand {
  0% { opacity: 0; transform: translate(14px, 18px); }
  40% { opacity: 1; transform: translate(0, 0); }
  60% { transform: translate(0, 4px) scale(.9); }
  100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes model-pop {
  0% { opacity: 0; transform: translate(-50%, -6px) scale(.9); }
  12% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  85% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -4px) scale(.98); }
}
@keyframes ring {
  0% { transform: scale(.92); opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}
@keyframes bars {
  0%, 100% { transform: scaleY(.25); }
  50% { transform: scaleY(1); }
}
@keyframes confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  60% { opacity: 1; transform: translate(calc(var(--dx) * .85), calc(var(--dy) - 30px)) rotate(calc(var(--rot) * .7)); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 110px)) rotate(var(--rot)); }
}
@keyframes cheer {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.7); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  25% { transform: translate(-50%, 0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -16px) scale(1); }
}
@keyframes fly-star {
  0% { transform: translate(-50%, -50%) scale(1.5); }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.6); opacity: .8; }
}
@keyframes snow-fall {
  0% { transform: translate(0, 0); }
  50% { transform: translate(14px, 190px); }
  100% { transform: translate(-6px, 380px); }
}
@keyframes rain-fall { to { transform: translate(-30px, 380px); } }
@keyframes leaf-drift {
  0% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(280px, 26px) rotate(200deg); }
  100% { transform: translate(580px, -10px) rotate(400deg); }
}
@keyframes sun-glow { 50% { box-shadow: 0 0 0 20px rgba(255, 212, 59, .25), 0 0 80px #FFE066; } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes talk { from { transform: scaleY(.35); } to { transform: scaleY(1.15); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes hop { 40% { transform: translateY(-6px); } }
@keyframes blip { 50% { transform: scale(1.5); opacity: .6; } }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .model-pop.is-visible { animation: none !important; opacity: 1; transform: translate(-50%, 0); }
  .cheer { animation: none !important; transform: translate(-50%, 0); }
  .scene__particle { display: none; }
  .voice-bars.is-active i { transform: scaleY(.7); }
}