:root {
  --ink: #20231f;
  --muted: #62665d;
  --paper: #fbfaf4;
  --surface: #ffffff;
  --line: #20231f;
  --mint: #9bd4bd;
  --mint-soft: #ddf0e6;
  --coral: #ef654f;
  --gold: #f3c64b;
  --sky: #39a7d8;
  --smoke: #ece7db;
  --danger: #9d2d1d;
  --shadow: 0 18px 44px rgba(32, 35, 31, 0.13);
  --radius: 8px;
  --focus: 0 0 0 3px rgba(57, 167, 216, 0.36);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(32, 35, 31, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(32, 35, 31, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 12% 8%, rgba(243, 198, 75, 0.32), transparent 24rem),
    radial-gradient(circle at 82% 4%, rgba(155, 212, 189, 0.36), transparent 22rem),
    #fbfaf4;
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
  font-family: ui-serif, Georgia, "Times New Roman", "Songti SC", serif;
}

body {
  min-height: 100vh;
  margin: 0;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.experience-shell {
  width: min(100%, 1520px);
  margin: 0 auto;
  padding: 1rem;
}

.mission-header,
.mission-board,
.learning-drawer,
.loop-card,
.scene-stage,
.vocab-module,
.phase-panel,
.progress-dock,
.scene-rail {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow);
}

.mission-header {
  display: grid;
  grid-template-columns: minmax(13rem, 18rem) minmax(0, 1fr) minmax(16rem, 24rem);
  gap: 1rem;
  align-items: center;
  padding: 1rem;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  width: 2.85rem;
  height: 2.85rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--gold);
  box-shadow: 0.23rem 0.23rem 0 var(--ink);
  font-size: 1.55rem;
  font-weight: 950;
}

.brand-lockup strong,
.brand-lockup small,
.header-metrics span,
.header-metrics strong {
  display: block;
}

.brand-lockup strong {
  font-size: 1.08rem;
}

.brand-lockup small,
.eyebrow,
.panel-heading p,
.header-metrics span,
.stat-stack span,
.finish-card span,
.coach-line,
.phrase-display span,
.audio-row p,
.recording-playback figcaption,
.unlocked-list li,
.lane-label,
.word-card,
.word-card button {
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
}

.brand-lockup small {
  color: var(--muted);
  font-size: 0.8rem;
}

.mission-title {
  min-width: 0;
}

.eyebrow {
  margin: 0 0 0.25rem;
  color: var(--coral);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(2rem, 5vw, 4.85rem);
  line-height: 0.95;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(1.35rem, 2.4vw, 2.1rem);
  line-height: 1.04;
  letter-spacing: 0;
}

.header-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.header-metrics div {
  min-width: 0;
  padding: 0.65rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  text-align: center;
}

.header-metrics strong {
  font-size: 1.55rem;
  line-height: 1;
}

.header-metrics span {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.mission-board {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr) 20rem;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(250, 248, 239, 0.78);
}

.learning-loop {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) minmax(0, 0.95fr);
  gap: 1rem;
  margin-top: 0.85rem;
}

.learning-drawer {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(250, 248, 239, 0.78);
}

.learning-drawer summary {
  min-height: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.85rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  list-style: none;
}

.learning-drawer summary::-webkit-details-marker {
  display: none;
}

.learning-drawer summary::after {
  content: "打开";
  flex: 0 0 auto;
  min-width: 4.8rem;
  padding: 0.36rem 0.7rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-size: 0.86rem;
  font-weight: 950;
  text-align: center;
}

.learning-drawer[open] summary::after {
  content: "收起";
  background: var(--gold);
  color: var(--ink);
}

.learning-drawer summary span,
.learning-drawer summary strong,
.learning-drawer summary small {
  min-width: 0;
  display: block;
}

.learning-drawer summary strong {
  font-size: 1.15rem;
  font-weight: 950;
}

.learning-drawer summary small {
  margin-top: 0.16rem;
  color: var(--muted);
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-size: 0.82rem;
  font-weight: 850;
}

.loop-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.85rem;
  padding: 1rem;
}

.daily-mission-list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mission;
}

.daily-mission-list li {
  counter-increment: mission;
}

.mission-task,
.review-card,
.word-link-card {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  padding: 0.65rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.mission-task::before {
  content: counter(mission, decimal-leading-zero);
}

.mission-task::before,
.review-card-mark,
.word-link-mark {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--gold);
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-size: 0.76rem;
  font-weight: 950;
}

.mission-task:hover,
.review-card:hover,
.word-link-card:hover {
  transform: translateY(-0.08rem);
  box-shadow: 0.18rem 0.18rem 0 var(--ink);
}

.mission-task-copy,
.mission-task strong,
.mission-task-kind,
.mission-task small,
.review-card-copy,
.review-card strong,
.review-card-kind,
.review-card small,
.word-link-copy,
.word-link-card strong,
.word-link-kind,
.word-link-card small,
.review-summary,
.scene-word-summary {
  min-width: 0;
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
}

.mission-task strong,
.review-card strong,
.word-link-card strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 950;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.mission-task-kind,
.review-card-kind,
.word-link-kind {
  display: inline-grid;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 0.25rem;
  padding: 0.14rem 0.42rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--mint-soft);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 950;
}

.mission-task small,
.review-card small,
.word-link-card small {
  display: block;
  margin-top: 0.22rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.review-summary,
.scene-word-summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.4;
}

.review-queue,
.scene-word-links {
  display: grid;
  gap: 0.55rem;
}

.review-card {
  grid-template-columns: 2rem minmax(0, 1fr) auto;
}

.review-card-mark {
  background: var(--coral);
  color: #fff;
}

.review-card.is-due {
  background: var(--mint-soft);
}

.review-card time {
  align-self: start;
  padding: 0.16rem 0.45rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-size: 0.7rem;
  font-weight: 950;
  white-space: nowrap;
}

.word-link-card {
  grid-template-columns: 2rem minmax(0, 1fr);
  text-decoration: none;
  color: inherit;
}

.word-link-mark {
  background: var(--sky);
  color: #fff;
}

.scene-rail,
.progress-dock {
  position: sticky;
  top: 1rem;
  align-self: start;
  display: grid;
  gap: 1rem;
  height: var(--mission-core-height, auto);
  max-height: var(--mission-core-height, calc(100vh - 2rem));
  overflow: auto;
  padding: 1rem;
}

.scene-rail {
  align-content: start;
}

.panel-heading {
  display: grid;
  gap: 0.15rem;
}

.scene-list {
  display: grid;
  gap: 0.55rem;
}

.scene-choice,
.phase-tabs button,
.choice-card,
.answer-grid button,
.reply-grid button,
.exam-option,
.voice-switch button,
.primary-command,
.secondary-command,
.record-button,
.round-action,
.word-controls button,
.favorite-toggle,
.mark-word,
.word-strip button {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.scene-choice:hover,
.phase-tabs button:hover,
.choice-card:hover,
.answer-grid button:hover,
.reply-grid button:hover,
.exam-option:hover,
.voice-switch button:hover,
.primary-command:hover,
.secondary-command:hover,
.record-button:hover,
.round-action:hover,
.word-controls button:hover,
.favorite-toggle:hover,
.mark-word:hover,
.word-strip button:hover {
  transform: translateY(-0.08rem);
  box-shadow: 0.18rem 0.18rem 0 var(--ink);
}

.scene-choice {
  width: 100%;
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  padding: 0.65rem;
  text-align: left;
}

.scene-choice.is-active {
  background: var(--mint);
  box-shadow: 0.22rem 0.22rem 0 var(--ink);
}

.scene-number {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-size: 0.78rem;
  font-weight: 950;
}

.scene-choice strong,
.scene-choice small {
  display: block;
}

.scene-choice strong {
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-weight: 900;
}

.scene-choice small {
  margin-top: 0.22rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.training-core {
  min-width: 0;
  display: grid;
  align-self: start;
  gap: 0.75rem;
}

.phase-tabs {
  order: 1;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.4rem;
}

.phase-tabs button {
  min-height: 2.35rem;
  padding: 0 0.5rem;
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-weight: 900;
}

.phase-tabs button.is-active {
  background: var(--ink);
  color: #fff;
}

.scene-stage {
  order: 3;
  display: grid;
  grid-template-columns: minmax(18rem, 0.9fr) minmax(20rem, 1.1fr);
  gap: 0.75rem;
  align-items: stretch;
  padding: 0.75rem;
}

.scene-study-stack {
  min-width: 0;
  display: contents;
}

.scene-visual {
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #f6f0e4;
}

.scene-visual-stage {
  height: 100%;
  width: 100%;
}

.scene-visual svg,
.scenario-svg {
  display: block;
  height: 100%;
  width: 100%;
}

.scene-visual .phrase-memory-svg {
  aspect-ratio: 1.5 / 1;
  background: #fbfaf4;
}

.generated-phrase-visual {
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  align-self: start;
}

.generated-phrase-visual .phrase-memory-svg,
.generated-phrase-visual .phrase-generated-memory,
.generated-phrase-visual .phrase-generated-memory img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.phrase-generated-memory {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #fbfaf4;
}

.phrase-generated-memory img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.phrase-generated-memory figcaption {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  display: grid;
  gap: 0.12rem;
  width: fit-content;
  max-width: calc(100% - 1.5rem);
  padding: 0.42rem 0.55rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: rgba(251, 250, 244, 0.92);
  color: var(--ink);
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  box-shadow: 0.16rem 0.16rem 0 rgba(32, 35, 31, 0.24);
}

.phrase-generated-memory figcaption strong,
.phrase-generated-memory figcaption span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.phrase-generated-memory figcaption strong {
  color: var(--coral);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.05em;
}

.phrase-generated-memory figcaption span {
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.15;
}

.scenario-svg * {
  transform-box: view-box;
}

.scene-train {
  animation: trainDrift 4.5s ease-in-out infinite;
}

.scene-runner {
  transform-origin: 210px 260px;
  animation: runnerBounce 680ms ease-in-out infinite alternate;
}

.limb-a {
  transform-origin: 210px 260px;
  animation: limbA 680ms ease-in-out infinite alternate;
}

.limb-b {
  transform-origin: 210px 260px;
  animation: limbB 680ms ease-in-out infinite alternate;
}

.clock-hand {
  transform-origin: 150px 111px;
  animation: clockSpin 1.8s steps(8) infinite;
}

.speech-bubble {
  animation: bubbleLift 2.4s ease-in-out infinite;
}

.menu-card {
  animation: menuWiggle 2.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.barista-arm {
  animation: armPour 1.7s ease-in-out infinite;
  transform-origin: 268px 252px;
}

.customer-nod {
  animation: customerNod 1.9s ease-in-out infinite;
  transform-origin: 605px 250px;
}

.coffee-cup {
  animation: cupSettle 2.2s ease-in-out infinite;
  transform-origin: 440px 318px;
}

.coffee-fill {
  animation: fillCup 2.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: bottom;
}

.steam {
  stroke-dasharray: 58;
  stroke-dashoffset: 58;
  animation: steamRise 2s ease-in-out infinite;
}

.steam-two {
  animation-delay: 260ms;
}

.coffee-drop {
  stroke-dasharray: 52;
  stroke-dashoffset: 52;
  animation: coffeeDrop 1.45s ease-in-out infinite;
}

.street-sign {
  animation: signSway 3.4s ease-in-out infinite;
  transform-origin: 561px 336px;
}

.map-sheet {
  animation: mapFloat 2.8s ease-in-out infinite;
}

.route-path {
  animation: routeDash 1.8s linear infinite;
}

.route-dot {
  animation: routeDotPulse 1.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.map-pin {
  animation: pinPulse 1.7s ease-in-out infinite;
  transform-origin: 377px 221px;
}

.phone-tilt {
  animation: phoneTilt 2s ease-in-out infinite;
  transform-origin: 227px 209px;
}

.listening-head {
  animation: listenLean 2s ease-in-out infinite;
  transform-origin: 205px 245px;
}

.speaker-bubble {
  animation: speakerPop 1.9s ease-in-out infinite;
  transform-origin: 510px 186px;
}

.sound-wave {
  stroke-dasharray: 92;
  stroke-dashoffset: 92;
  animation: soundPulse 1.5s ease-in-out infinite;
}

.wave-two {
  animation-delay: 240ms;
}

.again-card {
  animation: againTap 1.7s ease-in-out infinite;
  transform-origin: 548px 298px;
}

.listen-arc {
  stroke-dasharray: 88;
  stroke-dashoffset: 88;
  animation: listenArc 1.7s ease-in-out infinite;
}

.arc-two {
  animation-delay: 250ms;
}

.desk-calendar {
  animation: calendarBreathe 2.8s ease-in-out infinite;
  transform-origin: 242px 232px;
}

.calendar-card-old {
  animation: oldDateSlide 3s ease-in-out infinite;
}

.calendar-card-new {
  animation: newDateSlide 3s ease-in-out infinite;
}

.schedule-date-old {
  animation: oldDateBlink 3s ease-in-out infinite;
}

.schedule-date-new {
  animation: newDateBlink 3s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.date-arrow,
.date-arrow-head {
  stroke-dasharray: 230;
  stroke-dashoffset: 230;
  animation: drawArrow 3s ease-in-out infinite;
}

.mini-clock .clock-hand {
  transform-origin: 618px 136px;
}

.unwell-person {
  animation: tiredSway 2.4s ease-in-out infinite;
  transform-origin: 250px 260px;
}

.headache-head {
  animation: headacheBob 1.2s ease-in-out infinite alternate;
}

.forehead-hand {
  animation: comfortPress 1.2s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}

.ache-mark {
  animation: acheFlash 1s ease-in-out infinite alternate;
}

.mark-two {
  animation-delay: 140ms;
}

.mark-three {
  animation-delay: 280ms;
}

.thermo-mercury {
  animation: mercuryPulse 1.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: bottom;
}

.pulse-line {
  stroke-dasharray: 210;
  stroke-dashoffset: 210;
  animation: pulseTrace 1.6s ease-in-out infinite;
}

.water-line {
  animation: waterSlosh 1.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes trainDrift {
  50% {
    transform: translateX(18px);
  }
}

@keyframes runnerBounce {
  to {
    transform: translateY(-7px);
  }
}

@keyframes limbA {
  to {
    transform: rotate(7deg);
  }
}

@keyframes limbB {
  to {
    transform: rotate(-8deg);
  }
}

@keyframes clockSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes bubbleLift {
  50% {
    transform: translateY(-5px);
  }
}

@keyframes menuWiggle {
  50% {
    transform: rotate(-1deg) translateY(-2px);
  }
}

@keyframes armPour {
  50% {
    transform: rotate(-8deg) translateX(4px);
  }
}

@keyframes customerNod {
  50% {
    transform: rotate(1.8deg) translateY(3px);
  }
}

@keyframes cupSettle {
  50% {
    transform: translateY(-4px);
  }
}

@keyframes fillCup {
  0%,
  100% {
    transform: scaleY(0.45);
  }

  55% {
    transform: scaleY(1);
  }
}

@keyframes steamRise {
  0% {
    opacity: 0;
    stroke-dashoffset: 58;
    transform: translateY(12px);
  }

  45%,
  70% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: -58;
    transform: translateY(-10px);
  }
}

@keyframes coffeeDrop {
  0%,
  25% {
    opacity: 0;
    stroke-dashoffset: 52;
    transform: translateY(-14px);
  }

  45%,
  72% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: -52;
    transform: translateY(16px);
  }
}

@keyframes signSway {
  50% {
    transform: rotate(1.8deg);
  }
}

@keyframes mapFloat {
  50% {
    transform: translateY(-5px) rotate(-0.7deg);
  }
}

@keyframes routeDash {
  to {
    stroke-dashoffset: -68;
  }
}

@keyframes pinPulse {
  50% {
    transform: translateY(-7px) scale(1.04);
  }
}

@keyframes routeDotPulse {
  50% {
    transform: scale(1.15);
  }
}

@keyframes phoneTilt {
  50% {
    transform: rotate(-7deg) translateY(-3px);
  }
}

@keyframes listenLean {
  50% {
    transform: rotate(-2deg) translateX(5px);
  }
}

@keyframes speakerPop {
  50% {
    transform: scale(1.025);
  }
}

@keyframes soundPulse {
  0% {
    opacity: 0;
    stroke-dashoffset: 92;
  }

  40%,
  72% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: -92;
  }
}

@keyframes againTap {
  50% {
    transform: rotate(-2deg) scale(1.04);
  }
}

@keyframes listenArc {
  0% {
    opacity: 0;
    stroke-dashoffset: 88;
  }

  55% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: -88;
  }
}

@keyframes calendarBreathe {
  50% {
    transform: translateY(-3px);
  }
}

@keyframes oldDateSlide {
  0%,
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }

  54%,
  72% {
    opacity: 0.5;
    transform: translate(34px, 18px) rotate(-4deg);
  }
}

@keyframes newDateSlide {
  0%,
  18% {
    opacity: 0.72;
    transform: translate(-34px, -18px) rotate(4deg);
  }

  54%,
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
}

@keyframes oldDateBlink {
  50% {
    opacity: 0.45;
  }
}

@keyframes newDateBlink {
  50% {
    transform: scale(1.12);
  }
}

@keyframes drawArrow {
  0%,
  22% {
    stroke-dashoffset: 230;
  }

  58%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes tiredSway {
  50% {
    transform: translateY(4px) rotate(-1deg);
  }
}

@keyframes headacheBob {
  to {
    transform: translateY(5px);
  }
}

@keyframes comfortPress {
  to {
    transform: translateY(4px) rotate(-2deg);
  }
}

@keyframes acheFlash {
  to {
    opacity: 0.35;
    transform: translateY(-4px);
  }
}

@keyframes mercuryPulse {
  50% {
    transform: scaleY(0.58);
  }
}

@keyframes pulseTrace {
  0% {
    stroke-dashoffset: 210;
  }

  56% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -210;
  }
}

@keyframes waterSlosh {
  50% {
    transform: rotate(-2deg) translateY(2px);
  }
}

.scene-copy {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.75rem;
}

.practice-lanes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}

.phrase-display {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: 0.85rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.phrase-tools {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.lane-label,
.word-lane-label {
  width: fit-content;
  max-width: 100%;
  padding: 0.28rem 0.5rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 950;
}

.phrase-display p {
  margin-bottom: 0;
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-size: clamp(1.75rem, 4vw, 3.5rem);
  font-weight: 950;
  line-height: 1;
  overflow-wrap: anywhere;
}

.phrase-display span {
  color: var(--muted);
  line-height: 1.45;
}

.favorite-toggle {
  min-height: 2.15rem;
  padding: 0 0.65rem;
  background: var(--surface);
  color: var(--ink);
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-size: 0.78rem;
  font-weight: 950;
  white-space: nowrap;
}

.favorite-toggle.is-favorite {
  background: var(--gold);
}

.word-card {
  min-width: 0;
  display: grid;
  grid-template-areas:
    "meta meta"
    "visual title"
    "visual meaning"
    "visual hook"
    "example info"
    "strip strip";
  grid-template-columns: minmax(16rem, 0.92fr) minmax(0, 1.08fr);
  gap: 0.75rem;
  padding: 0;
  align-items: start;
  background: transparent;
}

.vocab-module {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
}

.vocab-module-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.8fr);
  gap: 1rem;
  align-items: end;
}

.vocab-module-head > p {
  margin: 0;
  color: var(--muted);
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-weight: 850;
  line-height: 1.45;
}

.word-topline,
.word-heading {
  min-width: 0;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.7rem;
}

.word-topline {
  grid-area: meta;
}

.word-heading {
  grid-area: title;
}

.word-meaning {
  grid-area: meaning;
}

.word-visual {
  grid-area: visual;
}

.word-hook {
  grid-area: hook;
}

.word-example {
  grid-area: example;
}

.word-info-grid {
  grid-area: info;
}

.word-strip {
  grid-area: strip;
}

.word-kicker {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.word-lane-label {
  background: var(--coral);
  color: #fff;
}

#word-index {
  display: inline-grid;
  min-height: 2rem;
  align-items: center;
  padding: 0 0.55rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 950;
}

.word-controls {
  display: flex;
  gap: 0.4rem;
}

.word-controls button {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: var(--surface);
  font-weight: 950;
}

.word-heading h3 {
  min-width: 0;
  margin: 0;
  display: grid;
  gap: 0.25rem;
}

#word-text {
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 950;
  line-height: 0.95;
  overflow-wrap: anywhere;
}

#word-phonetic {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 850;
}

.mark-word {
  min-height: 2.35rem;
  padding: 0 0.7rem;
  background: var(--ink);
  color: #fff;
  font-weight: 950;
  white-space: nowrap;
}

.mark-word.is-known {
  background: var(--mint);
  color: var(--ink);
}

.word-meaning,
.word-hook {
  margin-bottom: 0;
  color: var(--muted);
  font-weight: 850;
  line-height: 1.45;
}

.word-visual {
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.word-svg {
  display: block;
  width: 100%;
  aspect-ratio: 1.73 / 1;
}

.word-svg * {
  transform-box: fill-box;
}

.word-title-tag text,
.word-svg text {
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
}

.word-motion {
  animation: wordFloat 2.9s ease-in-out infinite;
}

.word-pop {
  animation: wordPop 1.8s ease-in-out infinite;
  transform-origin: center;
}

.word-delay {
  animation-delay: 160ms;
}

.word-delay-two {
  animation-delay: 310ms;
}

.word-shift {
  animation: wordShift 2.2s ease-in-out infinite;
}

.word-shift-alt {
  animation: wordShiftAlt 2.2s ease-in-out infinite;
}

.word-draw-line {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: wordDraw 2.4s ease-in-out infinite;
}

.word-fall {
  animation: wordFall 2.5s ease-in-out infinite;
  transform-origin: center bottom;
}

.word-scissor-a {
  animation: scissorA 1.7s ease-in-out infinite;
  transform-origin: 252px 191px;
}

.word-scissor-b {
  animation: scissorB 1.7s ease-in-out infinite;
  transform-origin: 292px 191px;
}

.word-crack {
  stroke-dasharray: 150;
  animation: crackFlash 1.7s ease-in-out infinite;
}

@keyframes wordFloat {
  50% {
    transform: translateY(-5px);
  }
}

@keyframes wordPop {
  50% {
    transform: scale(1.05);
  }
}

@keyframes wordShift {
  50% {
    transform: translateX(9px) rotate(-1.3deg);
  }
}

@keyframes wordShiftAlt {
  50% {
    transform: translateX(-9px) rotate(1.3deg);
  }
}

@keyframes wordDraw {
  0%,
  22% {
    stroke-dashoffset: 240;
  }

  58%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes wordFall {
  45%,
  100% {
    transform: rotate(14deg) translateX(8px);
  }
}

@keyframes scissorA {
  50% {
    transform: rotate(7deg);
  }
}

@keyframes scissorB {
  50% {
    transform: rotate(-8deg);
  }
}

@keyframes crackFlash {
  50% {
    opacity: 0.42;
    stroke-dashoffset: 24;
  }
}

.word-example {
  display: grid;
  gap: 0.25rem;
  padding: 0.7rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.word-example span,
.word-info-grid h4 {
  color: var(--coral);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.word-example p {
  margin-bottom: 0;
  font-size: 1.08rem;
  font-weight: 950;
  line-height: 1.2;
}

.word-example small {
  color: var(--muted);
  font-weight: 850;
  line-height: 1.35;
}

.word-info-grid {
  display: grid;
  gap: 0.55rem;
}

.word-info-grid section {
  display: grid;
  gap: 0.45rem;
  padding: 0.62rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.word-info-grid h4 {
  margin: 0;
}

.word-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.word-chip-list span {
  padding: 0.28rem 0.48rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.2;
}

.word-strip {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.15rem 0 0.2rem;
  scrollbar-width: thin;
}

.word-strip button {
  flex: 0 0 auto;
  min-height: 2.15rem;
  padding: 0 0.52rem;
  background: var(--surface);
  font-size: 0.75rem;
  font-weight: 950;
  white-space: nowrap;
}

.word-strip button.is-active {
  background: var(--ink);
  color: #fff;
}

.word-strip button.is-known:not(.is-active) {
  background: var(--mint);
}

.step-meter {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.35rem;
}

.step-meter span {
  min-width: 0;
  height: 0.65rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--smoke);
}

.step-meter .is-current,
.step-meter .is-done {
  background: var(--coral);
}

.phase-panel {
  order: 4;
  display: none;
  gap: 0.8rem;
  padding: 0.85rem;
}

.phase-panel.is-visible {
  display: grid;
  animation: revealPanel 190ms ease both;
}

@keyframes revealPanel {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }
}

.watch-grid,
.answer-grid,
.reply-grid,
.exam-option-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.choice-card,
.answer-grid button,
.reply-grid button,
.exam-option {
  min-height: 4.8rem;
  padding: 0.8rem;
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-weight: 900;
  text-align: left;
}

.choice-card {
  display: grid;
  align-content: start;
  gap: 0.28rem;
}

.choice-card strong,
.choice-card small {
  display: block;
}

.choice-card small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.35;
}

.choice-card.is-selected small {
  color: #28322b;
}

.choice-card.is-selected,
.answer-grid button.is-correct,
.reply-grid button.is-used {
  background: var(--mint);
}

.answer-grid button.is-missed {
  background: #ffe6df;
}

.exam-lab {
  display: grid;
  gap: 0.8rem;
}

.exam-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.exam-head span,
.exam-head strong {
  display: inline-grid;
  min-height: 2rem;
  align-items: center;
  padding: 0 0.65rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-size: 0.8rem;
  font-weight: 950;
}

.exam-head strong {
  background: var(--mint);
}

.exam-stem {
  margin: 0;
  padding: 0.85rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.45;
}

.exam-option-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.exam-option {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
  align-content: start;
  text-align: left;
}

.exam-option strong,
.exam-option small,
.exam-analysis {
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
}

.exam-option strong {
  font-size: 0.98rem;
  font-weight: 950;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.exam-option small {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1.35;
}

.exam-option.is-selected {
  box-shadow: 0.18rem 0.18rem 0 var(--ink);
}

.exam-option.is-correct {
  background: var(--mint);
}

.exam-option.is-missed {
  background: #ffe6df;
  color: var(--danger);
}

.exam-analysis {
  min-height: 4.2rem;
  padding: 0.8rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--muted);
  font-weight: 850;
  line-height: 1.5;
}

.exam-analysis.is-visible {
  color: var(--ink);
  background: var(--mint-soft);
}

.exam-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.transfer-lab {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 0.8rem;
  align-items: start;
}

.pattern-reader,
.slot-panel,
.transfer-actions {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.pattern-reader {
  min-height: 13.5rem;
  display: grid;
  align-content: center;
  gap: 0.7rem;
  padding: 1rem;
}

.pattern-reader span,
.pattern-reader small,
.slot-chip small,
.slot-panel h3,
.transfer-actions span {
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
}

.pattern-reader span {
  width: fit-content;
  max-width: 100%;
  padding: 0.32rem 0.55rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--gold);
  font-size: 0.85rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.pattern-reader p {
  margin-bottom: 0;
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-size: clamp(2rem, 5vw, 4.4rem);
  font-weight: 950;
  line-height: 0.95;
}

.pattern-reader small {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.4;
}

.slot-board {
  display: grid;
  gap: 0.7rem;
}

.slot-panel {
  display: grid;
  gap: 0.65rem;
  padding: 0.8rem;
}

.slot-panel h3 {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 950;
}

.slot-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.slot-chip {
  min-width: 0;
  min-height: 4.35rem;
  display: grid;
  gap: 0.25rem;
  align-content: center;
  padding: 0.65rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
  text-align: left;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.slot-chip:hover {
  transform: translateY(-0.08rem);
  box-shadow: 0.18rem 0.18rem 0 var(--ink);
}

.slot-chip strong,
.slot-chip small {
  display: block;
}

.slot-chip strong {
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.1;
}

.slot-chip small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.28;
}

.slot-chip.is-selected {
  background: var(--mint);
}

.slot-chip.is-selected small {
  color: #28322b;
}

.transfer-lab > .coach-line {
  grid-column: 1 / -1;
}

.transfer-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem;
  background: var(--paper);
}

.transfer-actions span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 850;
}

.audio-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  padding: 0.85rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.round-action {
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  background: var(--gold);
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-weight: 950;
}

.audio-row p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.45;
}

#native-audio-player {
  width: 100%;
  margin-top: 0.65rem;
}

#native-audio-player:not([src]) {
  display: none;
}

.audio-row p.is-ready {
  color: var(--ink);
  font-weight: 850;
}

.audio-row p.is-error,
#recording-status.is-error {
  color: var(--danger);
  font-weight: 850;
}

.voice-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.voice-switch button,
.primary-command,
.secondary-command {
  min-height: 2.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.9rem;
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-weight: 900;
}

a.primary-command,
a.secondary-command {
  color: inherit;
  text-decoration: none;
}

.voice-switch button.is-selected,
.primary-command {
  background: var(--ink);
  color: #fff;
}

.secondary-command {
  background: var(--surface);
}

.reset-command {
  width: 100%;
}

.record-button {
  min-height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0 1rem;
  background: var(--gold);
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-weight: 950;
}

.record-button.is-recording {
  background: var(--coral);
  color: #fff;
}

.shadow-grid {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
}

#recording-status,
.coach-line {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.45;
}

.wave-bars {
  grid-column: 1 / -1;
  height: 4.75rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink);
}

.wave-bars span {
  width: 100%;
  max-width: 1.6rem;
  height: 35%;
  border-radius: 999px;
  background: var(--gold);
  animation: waveRise 920ms ease-in-out infinite alternate;
}

.wave-bars span:nth-child(2n) {
  height: 62%;
  background: var(--mint);
  animation-delay: 100ms;
}

.wave-bars span:nth-child(3n) {
  height: 84%;
  background: var(--coral);
  animation-delay: 210ms;
}

@keyframes waveRise {
  to {
    transform: scaleY(0.45);
  }
}

.recording-playback {
  grid-column: 1 / -1;
}

.recording-playback figure {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0.75rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.recording-playback figcaption {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 850;
}

.recording-playback audio {
  width: 100%;
}

.reaction-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.timer {
  display: inline-grid;
  min-width: 4.6rem;
  min-height: 2.55rem;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-weight: 950;
}

#reaction-prompt {
  margin: 0.55rem 0 0;
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-size: clamp(1.5rem, 4vw, 3.5rem);
  font-weight: 950;
  line-height: 1;
}

.chat-window {
  min-height: 17rem;
  display: grid;
  align-content: start;
  gap: 0.65rem;
  padding: 0.85rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.message {
  max-width: min(34rem, 86%);
  padding: 0.65rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
}

.message span {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 950;
}

.message p {
  margin: 0.18rem 0 0;
  font-weight: 850;
}

.message.user {
  justify-self: end;
  background: var(--mint);
}

.finish-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.finish-card div,
.stat-stack div {
  padding: 0.8rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.finish-card strong,
.finish-card span,
.stat-stack strong,
.stat-stack span {
  display: block;
}

.finish-card strong,
.stat-stack strong {
  font-size: 2rem;
  line-height: 1;
}

.finish-card span,
.stat-stack span {
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.core-footer {
  position: sticky;
  top: 0.75rem;
  order: 2;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.7rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: rgba(251, 250, 244, 0.94);
  box-shadow: 0 0.55rem 1.2rem rgba(32, 35, 31, 0.12);
  backdrop-filter: blur(8px);
}

.core-footer button {
  min-height: 3rem;
  min-width: 6.5rem;
}

.core-footer .primary-command {
  min-width: 8rem;
}

.progress-dock {
  align-content: start;
}

.stat-stack {
  display: grid;
  gap: 0.55rem;
}

.memory-card,
.unlocked-list {
  display: grid;
  gap: 0.65rem;
  padding: 0.8rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.memory-visual {
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.memory-visual svg,
.phrase-memory-svg {
  display: block;
  width: 100%;
  aspect-ratio: 1.5 / 1;
}

.phrase-memory-svg * {
  transform-box: fill-box;
}

.phrase-memory-icon {
  animation: memoryFloat 3.1s ease-in-out infinite;
}

.phrase-memory-burst {
  transform-origin: center;
  animation: memoryPop 1.9s ease-in-out infinite;
}

.phrase-memory-route {
  animation: routeDash 1.8s linear infinite;
}

.phrase-memory-hand {
  transform-origin: center;
  animation: clockSpin 2.2s steps(8) infinite;
}

.phrase-memory-shake {
  transform-origin: center;
  animation: memoryShake 900ms ease-in-out infinite;
}

.phrase-memory-wave,
.phrase-memory-steam {
  stroke-dasharray: 86;
  stroke-dashoffset: 86;
  animation: wordDraw 2.4s ease-in-out infinite;
}

.phrase-memory-spark {
  animation: memorySpark 1.6s ease-in-out infinite;
}

.memory-keyword {
  margin: 0;
  width: fit-content;
  max-width: 100%;
  padding: 0.28rem 0.55rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--gold);
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  font-weight: 950;
  line-height: 1.2;
}

#memory-copy {
  margin-bottom: 0;
  color: var(--muted);
  font-family: ui-sans-serif, "Avenir Next", "PingFang SC", sans-serif;
  line-height: 1.45;
}

@keyframes memoryFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-0.28rem) rotate(1.5deg);
  }
}

@keyframes memoryPop {
  0%,
  100% {
    transform: scale(1) rotate(-3deg);
  }
  50% {
    transform: scale(1.08) rotate(3deg);
  }
}

@keyframes memoryShake {
  0%,
  100% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(2deg);
  }
}

@keyframes memorySpark {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}

.unlocked-list ul,
#unlocked-list {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.unlocked-list li {
  padding: 0.55rem 0.6rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.86rem;
  font-weight: 850;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 1180px) {
  .mission-header,
  .mission-board {
    grid-template-columns: 1fr;
  }

  .scene-rail,
  .progress-dock {
    position: static;
    height: auto;
    max-height: none;
  }

  .scene-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .experience-shell {
    padding: 0.75rem;
  }

  .mission-header,
  .mission-board,
  .scene-stage {
    padding: 0.75rem;
  }

  .scene-stage,
  .learning-loop,
  .vocab-module-head,
  .word-card,
  .practice-lanes,
  .shadow-grid,
  .transfer-lab {
    grid-template-columns: 1fr;
  }

  .word-card {
    grid-template-areas:
      "meta"
      "title"
      "meaning"
      "visual"
      "hook"
      "example"
      "info"
      "strip";
  }

  .scene-list,
  .watch-grid,
  .answer-grid,
  .exam-option-grid,
  .reply-grid,
  .finish-card {
    grid-template-columns: 1fr;
  }

  .phase-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .header-metrics,
  .phase-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scene-visual svg {
    aspect-ratio: 1.22 / 1;
  }

  .scene-visual .phrase-memory-svg {
    aspect-ratio: 1.5 / 1;
  }

  .reaction-card,
  .audio-row,
  .slot-options,
  .exam-actions {
    grid-template-columns: 1fr;
  }

  .round-action {
    width: 100%;
  }

  .review-card {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .review-card time {
    grid-column: 2;
    width: fit-content;
  }

  .word-topline,
  .word-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .word-controls {
    width: 100%;
  }

  .word-controls button,
  .mark-word {
    flex: 1 1 0;
  }

  .core-footer button {
    flex: 1 1 100%;
  }
}