/* Current FINYUE course-directory compact desktop pass. */
.course-route-command {
  margin-bottom: 12px;
  border-radius: 16px;
}

/* Pass 90: scene-one teaching hierarchy, exact dialogue tracking and a
   compact, expressive lesson cockpit. */
html[data-finyue-device="desktop"] body .audio-course-page .audio-scene-card {
  display: grid !important;
  grid-template-areas:
    "scene-visual scene-identity"
    "scene-visual scene-copy"
    "scene-visual scene-tip" !important;
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.45fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  min-height: 390px !important;
  overflow: hidden !important;
}

html[data-finyue-device="desktop"] body .audio-course-page .audio-scene-visual {
  grid-area: scene-visual !important;
  min-height: 390px !important;
  overflow: hidden !important;
}

html[data-finyue-device="desktop"] body .audio-course-page .audio-scene-visual > img {
  width: 100% !important;
  height: 100% !important;
  min-height: 390px !important;
  display: block !important;
  object-fit: cover !important;
}

.audio-course-page .audio-scene-identity {
  grid-area: scene-identity;
  min-width: 0;
  padding: 17px 20px 4px;
  display: grid;
  align-content: start;
  gap: 3px;
}

.audio-course-page .audio-scene-identity > span {
  color: #9b7020;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.audio-course-page .audio-scene-identity > b {
  color: #173f39;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.2;
}

.audio-course-page .audio-scene-identity > small {
  color: #4f6862;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.audio-course-page .audio-scene-identity > nav {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.audio-course-page .audio-scene-identity > nav > i {
  padding: 3px 7px;
  border: 1px solid #d7e3de;
  border-radius: 999px;
  color: #456860;
  background: #f4f8f6;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

html[data-finyue-device="desktop"] body .audio-course-page .audio-scene-copy {
  grid-area: scene-copy !important;
  align-self: start !important;
  padding: 18px 20px 8px !important;
}

html[data-finyue-device="desktop"] body .audio-course-page .audio-scene-tip-grid {
  grid-area: scene-tip !important;
  grid-column: auto !important;
  align-self: end !important;
  margin: 0 20px 16px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  overflow: visible !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .audio-scene-tip-grid .audio-scene-hong-kong-tip {
  grid-area: auto !important;
  min-height: 92px !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  display: block !important;
  border-width: 1px 1px 1px 3px !important;
  box-shadow: 0 7px 18px rgba(39, 82, 72, 0.07) !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .audio-scene-tip-grid .audio-scene-hong-kong-tip > span {
  display: block !important;
  white-space: normal !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .audio-scene-tip-grid .audio-scene-hong-kong-tip > p {
  margin-top: 5px !important;
  font-size: 12px !important;
  line-height: 1.42 !important;
}

.audio-course-page .audio-scene-speaker-strip {
  scroll-snap-type: x proximity;
  scroll-padding-inline: 3px;
}

.audio-course-page .audio-scene-speaker-strip:focus-visible {
  outline: 3px solid rgba(40, 116, 102, 0.3);
  outline-offset: 3px;
}

.audio-course-page
  .audio-scene-speaker-strip
  > li[data-dialogue-line-active="true"] {
  color: #fff !important;
  border-color: #2f786d !important;
  background: linear-gradient(135deg, #2f786d, #245f57) !important;
  box-shadow: 0 7px 18px rgba(30, 92, 81, 0.22) !important;
  transform: translateY(-1px);
}

.audio-course-page
  .audio-scene-speaker-strip
  > li[data-dialogue-line-active="true"]
  > i {
  color: #2f655d !important;
  background: #f4d980 !important;
}

.audio-course-page
  .audio-scene-speaker-strip
  > li[data-dialogue-line-active="true"]
  :is(strong, small) {
  color: #fff !important;
}

.audio-course-page .audio-scene-dialogue-actions {
  margin: -2px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.audio-course-page .audio-scene-dialogue-actions
  .audio-scene-dialogue-swipe-hint {
  min-width: 0;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: #61766f;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
  text-align: left;
}

.audio-course-page .audio-scene-dialogue-swipe-hint > i {
  color: #a9781d;
  font-size: 17px;
  font-style: normal;
}

.audio-course-page .audio-scene-dialogue-play {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #286f63;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #328175, #215f56);
  box-shadow: 0 4px 0 #184b44, 0 9px 20px rgba(29, 94, 83, 0.16);
  font: inherit;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
}

.audio-course-page .audio-scene-dialogue-play > i {
  font-style: normal;
}

.audio-course-page .audio-preview-card fieldset {
  display: grid !important;
  gap: 9px !important;
}

.audio-course-page .audio-preview-card fieldset > legend {
  margin-bottom: 2px !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1.4 !important;
}

.audio-course-page .audio-preview-card fieldset > button {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 60px !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  border: 2px solid #d5e0dc !important;
  border-radius: 14px !important;
  color: #254f48 !important;
  background: #fff !important;
  box-shadow: 0 4px 0 #d7e0dc, 0 8px 18px rgba(31, 74, 66, 0.07) !important;
  font: inherit !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  cursor: pointer !important;
}

.audio-course-page .audio-preview-card fieldset > button:hover {
  border-color: #8ab8ae !important;
  transform: translateY(-1px);
}

.audio-course-page .audio-preview-card fieldset > button:focus-visible {
  outline: 3px solid rgba(225, 176, 62, 0.46) !important;
  outline-offset: 2px !important;
}

.audio-course-page .audio-preview-choice-badge {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #367d72, #235e55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

.audio-course-page .audio-preview-card fieldset > button > span {
  min-width: 0;
  font-size: inherit !important;
  line-height: inherit !important;
}

.audio-course-page .audio-preview-card fieldset > button.correct
  .audio-preview-choice-badge {
  color: #235d52;
  background: #f6dc82;
}

.audio-course-page .audio-preview-card fieldset > button.wrong
  .audio-preview-choice-badge {
  background: #a84e45;
}

.audio-course-page .audio-roadmap-completion-pill {
  min-width: 48px;
  min-height: 30px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(36, 103, 91, 0.22);
  border-radius: 999px;
  color: #1e665b;
  background: #f1f8f5;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
}

.audio-course-page .audio-roadmap-completion-pill > i {
  color: #73877f;
  font-size: 10px;
  font-style: normal;
}

.audio-course-page .audio-learning-mastery {
  min-height: 0 !important;
  padding: 6px 8px !important;
  display: block !important;
  border: 0 !important;
  background: transparent !important;
}

.audio-course-page .audio-learning-mastery > i,
.audio-course-page .audio-mode-progress > i {
  position: relative;
  height: 30px !important;
  display: block !important;
  overflow: hidden;
  border: 1px solid rgba(45, 77, 86, 0.16);
  border-radius: 999px;
  background: linear-gradient(90deg, #ede9fe, #dff7f2, #fff1c4, #ffe2d8);
  box-shadow: inset 0 2px 6px rgba(35, 61, 68, 0.09), 0 6px 14px rgba(49, 79, 76, 0.09);
}

.audio-course-page .audio-learning-mastery > i > em,
.audio-course-page .audio-mode-progress > i > span {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #7657d8 0%, #12a59c 42%, #efbd44 72%, #f2745f 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: width 320ms ease;
}

.audio-course-page .audio-learning-mastery > i::after,
.audio-course-page .audio-mode-progress > i::after {
  content: "";
  position: absolute;
  inset: 2px 12% auto 8%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  pointer-events: none;
}

.audio-course-page .audio-learning-mastery > i > b,
.audio-course-page .audio-mode-progress > i > b {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  color: #173f3a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.audio-course-page .audio-mode-progress {
  min-height: 0 !important;
  padding: 6px 12px !important;
  display: block !important;
}

.audio-course-page .audio-mode-progress > i {
  width: min(210px, 100%);
  height: 24px !important;
}

@media (prefers-reduced-motion: reduce) {
  .audio-course-page .audio-scene-speaker-strip > li,
  .audio-course-page .audio-preview-card fieldset > button,
  .audio-course-page .audio-learning-mastery > i > em,
  .audio-course-page .audio-mode-progress > i > span {
    transition: none !important;
  }
}

.course-route-command > header {
  grid-template-columns:
    minmax(220px, 0.72fr)
    minmax(250px, 0.9fr)
    minmax(390px, 1.2fr);
  align-items: center;
  gap: 14px;
  padding: 14px 16px 12px;
}

.course-route-command h1 {
  margin: 0;
  font-size: 28px;
}

.course-route-command > header > p {
  font-size: 9px;
  line-height: 1.45;
}

.course-route-command > header > aside {
  gap: 5px;
}

.course-route-command > header > aside > b {
  align-content: center;
  min-height: 47px;
  padding: 7px 9px;
  font-size: 17px;
}

.course-route-command > header > aside small {
  font-size: 7px;
}

.course-route-command .course-mode-switcher {
  gap: 6px;
  padding: 6px !important;
}

.course-route-command .course-mode-switcher > button {
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  gap: 10px;
  min-height: 72px !important;
  padding: 9px 12px !important;
  border-radius: 11px;
}

.course-route-command .course-mode-switcher > button > i {
  width: 36px;
  height: 36px;
  border-radius: 11px;
}

.course-route-command .course-mode-switcher b {
  font-size: 16px !important;
}

.course-route-command .course-mode-switcher > button strong {
  width: 28px;
  height: 28px;
}

.course-directory-client .general-course-launch {
  grid-template-columns:
    64px
    minmax(0, 1fr)
    minmax(210px, 0.44fr) !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 14px 16px !important;
}

.course-directory-client .general-course-mascot picture {
  width: 58px;
  height: 58px;
  border-radius: 16px;
}

.course-directory-client .general-course-copy h2 {
  margin: 0;
  font-size: 24px;
}

.course-directory-client .general-course-copy p {
  margin: 4px 0 0;
  font-size: 9px;
  line-height: 1.45;
}

.course-directory-client .general-professional-teaser {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 10px !important;
  min-height: 54px !important;
  padding: 10px 12px !important;
  border-radius: 11px !important;
  box-shadow: 0 3px #c1a14c !important;
}

.course-directory-client .general-professional-teaser h3 {
  margin: 0;
  font-size: 14px;
}

.course-directory-client .general-professional-teaser b {
  margin: 0;
  font-size: 9px;
  white-space: nowrap;
}

.general-course-carousel {
  padding-top: 6px;
}

.general-course-carousel > header {
  margin-bottom: 4px;
}

.general-course-carousel > header span {
  font-size: 11px;
}

.general-course-carousel > header button {
  width: 31px;
  height: 29px;
  font-size: 12px;
  border-radius: 8px;
}

.course-directory-client .general-course-mini-grid {
  gap: 7px !important;
  padding: 2px 2px 7px !important;
}

.course-directory-client .general-course-mini-grid button {
  flex-basis: 158px !important;
  min-height: 64px !important;
  padding: 8px 10px !important;
  border-radius: 11px !important;
  box-shadow:
    0 3px #ccd9d5,
    0 8px 15px #17373d0d !important;
}

.course-directory-client .general-course-mini-grid button:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 5px #a9c5be,
    0 12px 20px #17373d17 !important;
}

.course-directory-client .general-course-mini-grid button:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px #a9c5be !important;
}

.course-directory-client .general-course-mini-grid button small {
  margin-bottom: 3px !important;
  font-size: 8px !important;
}

.course-directory-client .general-course-mini-grid button b {
  margin-bottom: 1px !important;
  font-size: 13px !important;
}

.course-directory-client .general-course-mini-grid button span {
  font-size: 8px !important;
}

.course-directory-v32 .professional-direction-deck .course-selection-rail {
  min-width: 0;
  overflow: hidden;
}

.course-directory-v32 .professional-direction-deck {
  color: #1f4640 !important;
  border: 1px solid #d5e0dc !important;
  background:
    radial-gradient(circle at 3% 0, #f1d98c24, transparent 24%),
    linear-gradient(145deg, #fbfcfa, #f3f7f5) !important;
  box-shadow:
    0 4px 0 #d7e0dc,
    0 18px 38px #173b3412 !important;
}

.course-directory-v32 .professional-direction-deck > header strong {
  color: #173f39 !important;
}

.course-directory-v32 .professional-direction-deck > header nav button {
  color: #285950 !important;
  border-color: #cbd9d4 !important;
  background: #fff !important;
  box-shadow: 0 3px 0 #d3ded9 !important;
}

.course-directory-v32
  .professional-direction-deck
  .professional-direction-progress {
  color: #284b45 !important;
}

.course-directory-v32
  .professional-direction-deck
  .professional-direction-progress
  > span {
  background: #dfe8e4 !important;
}

.course-directory-v32
  .professional-direction-deck
  .professional-direction-progress
  > span
  i {
  background: linear-gradient(90deg, #2f7066, #d2aa4e) !important;
}

.course-directory-v32 .professional-direction-deck .direction-track {
  margin: 0;
  padding: 2px 2px 7px !important;
  display: flex !important;
  gap: 7px !important;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.course-directory-v32 .professional-direction-deck .direction-track button {
  flex: 0 0 158px !important;
  min-height: 64px !important;
  padding: 8px 10px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: center;
  gap: 0 !important;
  scroll-snap-align: start;
  color: #35534e !important;
  text-align: left;
  border: 1px solid #d4dfdb !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #fff, #fbfcfb) !important;
  box-shadow:
    0 3px #d2ddd8,
    0 8px 15px #17372f0d !important;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.course-directory-v32
  .professional-direction-deck
  .direction-track
  button::after {
  display: none !important;
}

.course-directory-v32
  .professional-direction-deck
  .direction-track
  button
  small {
  width: auto;
  height: auto;
  display: block;
  color: #9a7429;
  border: 0;
  margin-bottom: 3px;
  font-size: 8px;
  font-weight: 900;
}

.course-directory-v32
  .professional-direction-deck
  .direction-track
  button
  b {
  color: inherit;
  font-size: 13px !important;
  font-weight: 850;
  line-height: 1.25;
}

.course-directory-v32
  .professional-direction-deck
  .direction-track
  button:hover {
  transform: translateY(-2px);
  border-color: #d3b35e !important;
  background: #fffdf5 !important;
  box-shadow:
    0 5px #c9d7d2,
    0 12px 20px #17372f17 !important;
}

.course-directory-v32
  .professional-direction-deck
  .direction-track
  button.active {
  transform: translateY(-2px);
  color: #fff !important;
  border-color: #285f57 !important;
  background: linear-gradient(145deg, #36796f, #285f57) !important;
  box-shadow:
    0 5px #1a4942,
    0 12px 22px #17372f2b !important;
}

.course-directory-v32
  .professional-direction-deck
  .direction-track
  button.active
  small {
  color: #f2d781;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.general-course-drawer {
  gap: 10px 16px !important;
  padding: 15px !important;
}

/* Professional and general directories now share one responsive pattern:
   selection rail, progress, then one card grid. No device-specific duplicate. */
.professional-course-grid-panel {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin-top: 12px;
  padding: 15px;
  border: 1px solid #cbd9d4;
  border-radius: 18px;
  background:
    radial-gradient(circle at 3% 4%, #f5dc8230, transparent 22%),
    #fbfdfc;
  box-shadow: 0 14px 34px #193a3510;
}

.professional-grid-heading {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 10px 3px;
  border: 0;
}

.professional-grid-heading > div {
  min-width: 0;
}

.professional-grid-heading small {
  color: #9a6f29;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.professional-grid-heading h2 {
  margin: 0;
  color: #173f43;
  font: 700 25px/1.15 "Noto Serif TC", "Songti TC", serif;
}

.professional-grid-heading p {
  margin: 4px 0 0;
  color: #6a7b77;
  font-size: 10px;
  line-height: 1.55;
}

.professional-grid-heading > nav {
  display: grid;
  justify-items: start;
  gap: 6px;
  margin-top: 10px;
}

.professional-grid-heading > nav > span {
  display: flex;
  align-items: center;
  gap: 7px;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.professional-grid-heading > nav button {
  width: 40px;
  height: 38px;
  padding: 0;
  color: #255d56;
  border: 1px solid #b9cec8;
  border-radius: 11px;
  background: #fff;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
}

.professional-grid-heading > nav button:disabled {
  opacity: .38;
  cursor: default;
}

.professional-grid-heading > nav b {
  min-width: 48px;
  color: #315d57;
  text-align: center;
  font-size: 14px;
}

.professional-grid-heading > nav > small {
  color: #687d77;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.professional-grid-heading span {
  width: max-content;
  margin-top: 5px;
  padding: 6px 9px;
  color: #2c665d;
  border: 1px solid #bfd4cd;
  border-radius: 999px;
  background: #edf5f2;
  font-size: 8px;
  font-weight: 850;
}

.professional-course-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.professional-course-card-grid li {
  --course-card-accent: #3c776e;
  min-width: 0;
}

.professional-course-card-grid li:nth-child(6n + 2) {
  --course-card-accent: #536cab;
}

.professional-course-card-grid li:nth-child(6n + 3) {
  --course-card-accent: #9b712c;
}

.professional-course-card-grid li:nth-child(6n + 4) {
  --course-card-accent: #57869d;
}

.professional-course-card-grid li:nth-child(6n + 5) {
  --course-card-accent: #7e5d8b;
}

.professional-course-card-grid li:nth-child(6n + 6) {
  --course-card-accent: #9b524d;
}

.professional-course-card-grid li > a {
  height: 100%;
  min-height: 258px;
  padding: 11px;
  display: grid;
  grid-template-rows: auto 112px minmax(30px, auto) auto;
  gap: 9px;
  overflow: hidden;
  border: 1px solid #d6e0dc;
  border-top: 5px solid var(--course-card-accent);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 9px 22px #163b3510;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.professional-course-card-grid li > a:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--course-card-accent) 55%, #d6e0dc);
  box-shadow: 0 15px 28px #163b351a;
}

.professional-course-card-grid header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.professional-course-card-grid header > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 11px;
  background: var(--course-card-accent);
  font: 700 11px/1 Georgia, serif;
}

.professional-course-card-grid header small {
  color: var(--course-card-accent);
  font-size: 8px;
  font-weight: 850;
}

.professional-course-card-grid h3 {
  margin: 3px 0 0;
  color: #17333b;
  font: 700 16px/1.2 "Noto Serif TC", "Songti TC", serif;
}

.professional-course-card-grid figure {
  height: 112px;
  margin: 0;
  overflow: hidden;
  border-radius: 11px;
  background: #dbe7e2;
}

.professional-course-card-grid figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.25s ease;
}

.professional-course-card-grid a:hover figure img {
  transform: scale(1.035);
}

.professional-course-card-grid p {
  margin: 0;
  color: #657671;
  font-size: 9px;
  line-height: 1.45;
}

.professional-course-card-grid footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.professional-course-card-grid footer small {
  overflow: hidden;
  color: #8b9692;
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.professional-course-card-grid footer b {
  min-height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  border-radius: 9px;
  background: var(--course-card-accent);
  font-size: 9px;
}

.professional-course-card-grid footer i {
  font-style: normal;
  font-size: 13px;
}

/* One selector system for both general and professional tracks. */
.course-directory-v32 .general-course-carousel,
.course-directory-v32 .professional-course-switcher {
  display: grid;
  gap: 16px;
}

.course-directory-v32 .course-selector-panel {
  box-sizing: border-box;
  width: 100%;
  min-height: 154px;
  margin: 0 !important;
  padding: 13px 14px 11px !important;
  color: #1f4640 !important;
  border: 1px solid #d5e0dc !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at 3% 0, #f1d98c24, transparent 24%),
    linear-gradient(145deg, #fbfcfa, #f3f7f5) !important;
  box-shadow:
    0 4px 0 #d7e0dc,
    0 18px 38px #173b3412 !important;
}

.course-directory-v32 .course-selector-panel > header {
  min-height: 32px;
  margin: 0 2px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.course-directory-v32 .course-selector-panel > header nav {
  display: flex;
  gap: 6px;
}

.course-directory-v32 .course-selector-controls {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.course-directory-v32 .course-selector-panel > header nav button {
  width: 31px;
  height: 31px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #285950 !important;
  border: 1px solid #cbd9d4 !important;
  border-radius: 9px;
  background: #fff !important;
  box-shadow: 0 3px 0 #d3ded9 !important;
  cursor: pointer;
}

.course-directory-v32 .general-scene-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.course-directory-v32 .course-swipe-hint {
  display: inline !important;
  color: #516d66;
  font-size: 12px !important;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.course-directory-v32 .course-selector-panel .course-selection-rail {
  margin-top: 4px;
}

.course-directory-v32 .general-course-drawer,
.course-directory-v32 .professional-course-grid-panel,
.course-directory-v32 .all-professional-route-maps {
  margin-top: 0 !important;
}

.course-directory-v32 .professional-course-card-grid li > a {
  min-height: 238px;
  grid-template-rows: auto 112px auto auto;
  gap: 7px;
}

.course-directory-v32 .professional-course-card-grid footer {
  display: flex;
  align-items: center;
}

.course-directory-v32 .professional-course-card-grid footer b {
  width: 100%;
  justify-content: space-between;
}

@media (max-width: 1080px) {
  .professional-course-grid-panel {
    grid-template-columns: 1fr;
  }

  .professional-course-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .professional-grid-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .professional-course-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

@media (max-width: 520px) {
  .professional-course-grid-panel {
    margin-top: 8px;
    padding: 10px;
    border-radius: 15px;
  }

  .professional-grid-heading {
    padding-bottom: 10px;
  }

  .professional-grid-heading h2 {
    font-size: 20px;
  }

  .professional-grid-heading p {
    font-size: 9px;
  }

  .professional-course-card-grid {
    margin-top: 10px;
  }

  .professional-course-card-grid li > a {
    min-height: 214px;
    padding: 8px;
    grid-template-rows: auto 82px minmax(25px, auto) auto;
    gap: 7px;
    border-radius: 12px;
  }

  .professional-course-card-grid header {
    grid-template-columns: 31px minmax(0, 1fr);
    gap: 7px;
  }

  .professional-course-card-grid header > span {
    width: 31px;
    height: 31px;
    border-radius: 9px;
    font-size: 9px;
  }

  .professional-course-card-grid header small {
    font-size: 7px;
  }

  .professional-course-card-grid h3 {
    font-size: 13px;
  }

  .professional-course-card-grid figure {
    height: 82px;
    border-radius: 9px;
  }

  .professional-course-card-grid p {
    font-size: 8px;
    line-height: 1.35;
  }

  .professional-course-card-grid footer {
    display: block;
  }

  .professional-course-card-grid footer small {
    display: none;
  }

  .professional-course-card-grid footer b {
    width: 100%;
    min-height: 30px;
    justify-content: space-between;
  }
}

/* Lesson pages enter the learning task quickly instead of spending a screen on
   a tall title banner. Shared by every general and professional audio lesson. */
.audio-course-page .audio-course-hero {
  padding: 10px clamp(18px, 3vw, 42px) 13px !important;
}

.audio-course-page .audio-course-breadcrumb {
  margin-bottom: 7px !important;
  font-size: 9px !important;
}

.audio-course-page .audio-course-hero h1 {
  margin: 4px 0 3px !important;
  font-size: clamp(30px, 3vw, 40px) !important;
  line-height: 1.03 !important;
}

.audio-course-page .audio-course-hero-grid > div > p {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.audio-course-page .audio-course-meta {
  margin-top: 7px !important;
  gap: 6px !important;
}

.audio-course-page .audio-course-meta span {
  padding: 5px 8px !important;
  font-size: 9px !important;
}

.standard-lesson-hero {
  min-height: 0 !important;
  padding: 16px 24px !important;
  gap: 20px !important;
}

.standard-lesson-hero h1 {
  margin: 7px 0 5px !important;
  font-size: 36px !important;
}

.standard-lesson-hero aside {
  padding: 10px 14px !important;
}

/* The six course-unit cards use the owned mascot artwork without simulated
   text, dialogue or controls floating on top of the illustrations. */
.course-directory-client .unit-card-visual {
  padding: 0 !important;
  min-height: 118px !important;
}

.course-directory-client .unit-card-visual > img.unit-card-mascot-art {
  width: 100% !important;
  height: 132px !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Desktop lesson-to-lesson controls. Stage controls remain inside the lesson. */
.audio-lesson-side-navigation {
  position: fixed;
  inset: 50% 16px auto;
  z-index: 58;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
}

.audio-lesson-side-navigation > a,
.audio-lesson-side-navigation > span {
  width: 54px;
  min-height: 84px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  color: #fff;
  border: 1px solid #ffffff50;
  border-radius: 16px;
  background: #173f46ed;
  box-shadow: 0 12px 28px #102c3040;
  pointer-events: auto;
  text-decoration: none;
  transition:
    transform 0.16s,
    background 0.16s,
    box-shadow 0.16s;
}

.audio-lesson-side-navigation > a:hover {
  background: #1c6961;
  box-shadow: 0 15px 34px #102c3057;
  transform: translateY(-2px);
}

.audio-lesson-side-navigation i {
  color: #f2d276;
  font-size: 22px;
  font-style: normal;
  line-height: 1;
}

.audio-lesson-side-navigation span span,
.audio-lesson-side-navigation a span {
  font-size: 10px;
  font-weight: 950;
  writing-mode: vertical-rl;
}

.audio-lesson-side-navigation .is-disabled {
  opacity: 0.24;
  pointer-events: none;
}

/* Desktop term cards now expose real collection and three unmistakable audio
   speeds; the existing handlers persist to local storage and the account API. */
.audio-term-grid .audio-term-mastery-toggle {
  right: 13px !important;
  width: 70px !important;
  height: 32px !important;
  display: flex !important;
  justify-content: center;
  gap: 5px;
  border-radius: 9px !important;
}

.audio-term-grid .audio-term-mastery-toggle > span {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  font-size: 9px;
  font-weight: 950;
}

.audio-term-grid .audio-term-bookmark-toggle {
  position: absolute;
  top: 13px;
  right: 91px;
  width: 70px;
  height: 32px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #725511;
  border: 1px solid #d2b25d;
  border-radius: 9px;
  background: #fff7d7;
  cursor: pointer;
  font-size: 9px;
  font-weight: 950;
}

.audio-term-grid .audio-term-bookmark-toggle i {
  color: #af8324;
  font-size: 14px;
  font-style: normal;
}

.audio-term-grid .audio-term-bookmark-toggle.is-added {
  color: #fff;
  border-color: #2d7167;
  background: #2f786d;
}

.audio-term-grid .audio-term-bookmark-toggle.is-added i {
  color: #f4d77d;
}

.audio-term-grid article h3 {
  padding-right: 150px !important;
}

.audio-term-grid .audio-term-actions {
  gap: 7px !important;
}

.audio-term-grid .audio-term-actions button {
  min-height: 58px !important;
  border: 1.5px solid #9eb9b2 !important;
  background: #f3f8f6 !important;
  box-shadow: 0 3px 0 #b7cac5;
}

.audio-term-grid .audio-term-actions button:nth-child(2) {
  color: #fff;
  border-color: #2b766c !important;
  background: #2f786d !important;
  box-shadow: 0 3px 0 #1f574f;
}

.audio-term-grid .audio-term-actions button:nth-child(3) {
  color: #fff;
  border-color: #172d46 !important;
  background: #1b344f !important;
  box-shadow: 0 3px 0 #0d1d31;
}

.audio-term-grid .audio-term-actions button.is-playing {
  color: #36270c !important;
  border-color: #c99b36 !important;
  background: #f4d376 !important;
  box-shadow: 0 1px 0 #9e7522;
  transform: translateY(2px);
}

.audio-term-grid .audio-term-actions button span {
  font-size: 10px !important;
  font-weight: 900;
}

/* Separate task kind, difficulty and position so “難度 1” never runs into
   “01 / 04”. */
.listening-challenge-card > header .listening-question-kind {
  display: flex;
  align-items: center;
  gap: 8px;
}

.listening-challenge-card > header .listening-question-kind em {
  color: #72551c;
  border: 1px solid #ddc88e;
  border-radius: 999px;
  background: #fff4cd;
  padding: 5px 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0;
}

.listening-challenge-card > header .listening-question-count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid #d2ddd9;
  border-radius: 9px;
  background: #fff;
}

.listening-question-count small {
  color: #74857f;
  margin-right: 3px;
  font-size: 9px;
}

.listening-question-count i {
  color: #a5b1ad;
  font-style: normal;
  font-weight: 500;
}

/* Keep each listening question inside one compact, fast action loop. */
.listening-challenge-card {
  min-height: 0 !important;
  padding: 18px 20px 20px !important;
}

.listening-challenge-mascot {
  top: 9px !important;
  right: 16px !important;
  width: 112px !important;
}

.listening-challenge-mascot > .companion-avatar {
  width: 92px !important;
  height: 76px !important;
}

.listening-challenge-mascot img {
  width: 88px !important;
  height: 76px !important;
}

.listening-challenge-mascot > span:last-child {
  max-width: 110px;
  margin-top: -2px !important;
  padding: 5px 7px !important;
  font-size: 9px !important;
}

.listening-challenge-card > header {
  min-height: 28px !important;
  padding-right: 126px !important;
}

.listening-play-orb {
  width: 88px !important;
  height: 88px !important;
  margin: 14px auto 10px !important;
  border-width: 6px !important;
}

.listening-play-orb > i {
  font-size: 21px !important;
}

.listening-challenge-card > h3 {
  margin-bottom: 10px !important;
  font-size: 20px !important;
}

.listening-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px !important;
}

.listening-options > button {
  min-height: 54px !important;
  padding: 8px 10px !important;
}

.listening-options > button > span {
  font-size: 14px !important;
}

.listening-answer-reveal:not(.listening-wrong-feedback) {
  grid-template-columns: minmax(0, 1fr) 160px;
  grid-template-rows: repeat(4, auto);
  align-items: center;
  gap: 2px 14px;
  display: grid;
  text-align: left !important;
  padding: 12px 14px !important;
}

.listening-answer-reveal:not(.listening-wrong-feedback) > span,
.listening-answer-reveal:not(.listening-wrong-feedback) > h4,
.listening-answer-reveal:not(.listening-wrong-feedback) > p,
.listening-answer-reveal:not(.listening-wrong-feedback) > small {
  grid-column: 1;
}

.listening-answer-reveal:not(.listening-wrong-feedback) > h4 {
  margin: 3px 0 1px !important;
  font-size: 19px !important;
}

.listening-answer-reveal:not(.listening-wrong-feedback) > p,
.listening-answer-reveal:not(.listening-wrong-feedback) > small {
  font-size: 12px !important;
}

.listening-answer-reveal:not(.listening-wrong-feedback) > button {
  grid-column: 2;
  grid-row: 1 / -1;
  min-width: 160px;
  min-height: 64px;
  margin: 0 !important;
  border: 1px solid #14574f !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #237a6e, #15554f) !important;
  box-shadow:
    0 5px 0 #0e3f3a,
    0 11px 22px #174c4530;
  font-size: 16px !important;
}

.listening-answer-reveal:not(.listening-wrong-feedback) > button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 7px 0 #0e3f3a,
    0 14px 28px #174c4540;
}

/* Simulation setup: objective, people and role form one compact dashboard. */
.scenario-brief {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 78px 112px;
  min-height: 112px;
  padding: 14px 18px !important;
}

.scenario-brief h2 {
  margin: 3px 0 4px !important;
  font-size: 31px !important;
}

.scenario-brief p {
  margin: 0;
  font-size: 13px !important;
}

.scenario-brief > b {
  width: 72px !important;
  height: 72px !important;
  font-size: 26px !important;
}

.scenario-brief-mascot {
  width: 108px;
  height: 82px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #ffffff3d;
  border-radius: 14px;
  background: #ffffff12;
}

.scenario-brief-mascot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.scenario-start-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr) !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.scenario-objective-card,
.scenario-character-panel {
  padding: 16px !important;
}

.scenario-objective-card h3,
.scenario-character-panel h3 {
  margin: 3px 0 6px !important;
  font-size: 20px !important;
}

.scenario-objective-card > p {
  margin-bottom: 10px !important;
  font-size: 14px !important;
  line-height: 1.48 !important;
}

.scenario-objective-card ul {
  gap: 6px !important;
  margin: 7px 0 10px !important;
}

.scenario-objective-card li {
  padding: 7px 8px !important;
  font-size: 11px !important;
}

.scenario-objective-card footer {
  padding-top: 9px !important;
}

.scenario-character-panel > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px !important;
}

.scenario-character-panel article {
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 8px !important;
}

.scenario-character-panel article > i {
  width: 36px !important;
  height: 36px !important;
  font-size: 15px !important;
}

.scenario-character-panel article p,
.scenario-character-panel article em {
  font-size: 10px !important;
}

.scenario-character-panel .scenario-role-picker {
  margin-top: 9px !important;
  padding: 9px 10px !important;
  border-radius: 11px !important;
  background: #f7faf8 !important;
}

.scenario-character-panel .scenario-role-picker header {
  justify-content: space-between;
  align-items: center;
  display: flex !important;
}

.scenario-character-panel .scenario-role-picker h3 {
  margin: 0 !important;
  font-size: 13px !important;
}

.scenario-character-panel .scenario-role-picker > div {
  margin-top: 6px;
}

.scenario-character-panel .scenario-role-picker button {
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border-width: 1.5px !important;
  border-radius: 9px !important;
  box-shadow: 0 3px 0 #d1ddd8;
  font-size: 12px !important;
}

.scenario-character-panel .scenario-role-picker button.is-active {
  box-shadow: 0 3px 0 #0f4f49;
}

.scenario-mode-picker {
  gap: 8px !important;
  margin-top: 10px !important;
}

.scenario-mode-picker > button {
  min-height: 84px !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 9px !important;
  padding: 11px 12px !important;
  border-width: 1.5px !important;
  box-shadow: 0 4px 0 #ccd8d4;
}

.scenario-mode-picker > button > i {
  width: 38px !important;
  height: 38px !important;
}

.scenario-mode-picker b {
  font-size: 15px !important;
}

.scenario-mode-picker small {
  font-size: 11px !important;
}

.scenario-mode-picker > button.is-active {
  box-shadow:
    0 4px 0 #0e4744,
    0 10px 22px #174c4530;
  transform: translateY(-1px);
}

.scenario-start-button {
  min-height: 54px !important;
  margin-top: 10px !important;
  border: 1px solid #144f49 !important;
  box-shadow:
    0 5px 0 #0d403b,
    0 12px 24px #174c4533;
}

.mission-desktop-v2 {
  display: block;
}

.mission-mobile-preserved {
  display: none;
}

@media (min-width: 761px) {
  .mission-desktop-v2 {
    overflow: hidden;
    border: 1px solid #ccd9d4;
    border-radius: 20px;
    background:
      radial-gradient(circle at 86% 5%, #dcece5 0, transparent 27%), #f7f4ec;
    box-shadow: 0 18px 56px #19372f12;
  }

  .mission-v2-heading {
    grid-template-columns: minmax(0, 1fr) 320px !important;
    min-height: 134px !important;
    padding: 16px 20px !important;
    border: 0 !important;
    border-bottom: 1px solid #d6dfdb !important;
    background: linear-gradient(120deg, #183e3a, #235e55) !important;
  }

  .mission-v2-heading > div > span {
    color: #f0cd72 !important;
    font-size: 10px !important;
    letter-spacing: 0.15em;
  }

  .mission-v2-heading h2 {
    max-width: 800px;
    margin: 5px 0 4px !important;
    color: #fff !important;
    font-size: clamp(25px, 2.2vw, 34px) !important;
    line-height: 1.15 !important;
  }

  .mission-v2-heading > div > p {
    max-width: 780px;
    margin: 0 !important;
    color: #d7e5e0 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  .mission-v2-heading > aside {
    grid-template-columns: 90px minmax(0, 1fr) !important;
    align-items: center;
    gap: 11px !important;
    min-height: 96px !important;
    padding: 7px !important;
    border: 1px solid #ffffff2e !important;
    border-radius: 15px !important;
    background: #ffffff10 !important;
  }

  .mission-v2-heading > aside img {
    width: 90px !important;
    height: 82px !important;
    border-radius: 11px !important;
    object-fit: cover !important;
  }

  .mission-v2-heading > aside span {
    display: grid;
    gap: 4px;
    color: #e8f1ed !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  .mission-v2-heading > aside b {
    color: #f6d477;
    font-size: 13px;
  }

  .mission-v2-step-map {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0 18px;
    border-bottom: 1px solid #d5ded9;
    background: #fffdf8;
  }

  .mission-v2-step-map button {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 64px;
    padding: 8px 12px;
    border: 0;
    border-right: 1px solid #e3e7e4;
    background: transparent;
    text-align: left;
    cursor: pointer;
  }

  .mission-v2-step-map button:first-child {
    border-left: 1px solid #e3e7e4;
  }

  .mission-v2-step-map button:disabled {
    cursor: default;
    opacity: 0.5;
  }

  .mission-v2-step-map button > i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid #cbd6d1;
    border-radius: 50%;
    color: #74837d;
    background: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
  }

  .mission-v2-step-map button > span {
    display: grid;
    gap: 1px;
  }

  .mission-v2-step-map small {
    color: #9b8a68;
    font-size: 8px;
    letter-spacing: 0.12em;
  }

  .mission-v2-step-map b {
    color: #304a44;
    font-size: 12px;
  }

  .mission-v2-step-map button.is-current {
    background: #edf5f1;
    box-shadow: inset 0 -3px #216d63;
  }

  .mission-v2-step-map button.is-current > i {
    color: #fff;
    border-color: #1f6b61;
    background: #1f6b61;
    box-shadow: 0 4px 12px #1f6b6133;
  }

  .mission-v2-step-map button.is-done > i {
    color: #1b675e;
    border-color: #9dc8b9;
    background: #e8f4ef;
  }

  .mission-v2-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 224px;
    align-items: stretch;
    gap: 12px;
    min-height: 480px;
    padding: 14px 14px 12px;
  }

  .mission-v2-content {
    min-width: 0;
    padding: 20px;
    border: 1px solid #d7dfdb;
    border-radius: 15px;
    background: #fff;
  }

  .mission-v2-content > div > header {
    margin-bottom: 14px;
  }

  .mission-v2-content > div > header > small,
  .mission-v2-result > header small {
    color: #a06c2e;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.15em;
  }

  .mission-v2-content > div > header h3,
  .mission-v2-result > header h3 {
    margin: 4px 0 5px;
    color: #183f39;
    font-size: 24px;
    line-height: 1.2;
  }

  .mission-v2-content > div > header p,
  .mission-v2-result > header p {
    max-width: 850px;
    margin: 0;
    color: #667770;
    font-size: 12px;
    line-height: 1.55;
  }

  .mission-v2-objectives {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .mission-v2-objectives article {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 66px;
    padding: 10px;
    border: 1px solid #dbe4df;
    border-radius: 11px;
    background: #f8faf8;
  }

  .mission-v2-objectives article > i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #fff;
    background: #247267;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
  }

  .mission-v2-objectives article > span {
    display: grid;
    gap: 3px;
  }

  .mission-v2-objectives small {
    color: #9b7c48;
    font-size: 8px;
    letter-spacing: 0.08em;
  }

  .mission-v2-objectives b {
    color: #354b46;
    font-size: 12px;
    line-height: 1.4;
  }

  .mission-v2-foundation {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
  }

  .mission-v2-foundation span {
    display: grid;
    gap: 2px;
    min-height: 56px;
    padding: 9px 10px;
    border-radius: 9px;
    color: #6e7c76;
    background: #f3f0e7;
    font-size: 9px;
  }

  .mission-v2-foundation b {
    color: #8d5721;
    font-size: 17px;
  }

  .mission-v2-term-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .mission-v2-term-grid > button {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 92px;
    padding: 11px;
    border: 1.5px solid #d7e0dc;
    border-radius: 11px;
    background: #fbfcfb;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 3px 0 #dce3e0;
    transition:
      transform 0.16s,
      border-color 0.16s,
      background 0.16s;
  }

  .mission-v2-term-grid > button:hover {
    transform: translateY(-2px);
    border-color: #8cb9ac;
  }

  .mission-v2-term-grid > button > i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #bdccc6;
    border-radius: 50%;
    color: #49665f;
    font-style: normal;
    font-weight: 950;
  }

  .mission-v2-term-grid > button > span {
    display: grid;
    gap: 2px;
  }

  .mission-v2-term-grid b {
    color: #213f39;
    font-size: 17px;
  }

  .mission-v2-term-grid small {
    color: #9a6a33;
    font-size: 10px;
    font-weight: 850;
  }

  .mission-v2-term-grid em {
    overflow: hidden;
    color: #718079;
    font-size: 10px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mission-v2-term-grid > button.is-selected {
    border-color: #1e6b61;
    background: #eaf5f0;
    box-shadow: 0 3px 0 #1c655c;
  }

  .mission-v2-term-grid > button.is-selected > i {
    color: #fff;
    border-color: #1e6b61;
    background: #1e6b61;
  }

  .mission-v2-selection-status {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr);
    align-items: center;
    gap: 12px;
    margin-top: 13px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #48615a;
    background: #f4f0e6;
    font-size: 11px;
  }

  .mission-v2-selection-status > i,
  .mission-v2-score-grid article > i {
    overflow: hidden;
    height: 6px;
    border-radius: 99px;
    background: #d9e1dd;
  }

  .mission-v2-selection-status > i > em,
  .mission-v2-score-grid article > i > em {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1e6b61, #d19a45);
    transition: width 0.2s ease;
  }

  .mission-v2-pattern-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .mission-v2-pattern-grid > button {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    min-height: 118px;
    padding: 11px;
    border: 1.5px solid #d8e0dc;
    border-radius: 11px;
    background: #fafbf9;
    text-align: left;
    cursor: pointer;
  }

  .mission-v2-pattern-grid > button > i {
    color: #a16d30;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
  }

  .mission-v2-pattern-grid > button > span {
    display: grid;
    align-content: start;
    gap: 5px;
  }

  .mission-v2-pattern-grid small {
    color: #8b7656;
    font-size: 9px;
  }

  .mission-v2-pattern-grid b {
    color: #24463f;
    font-size: 15px;
    line-height: 1.35;
  }

  .mission-v2-pattern-grid em {
    color: #6f7f79;
    font-size: 10px;
    font-style: normal;
    line-height: 1.45;
  }

  .mission-v2-pattern-grid > button.is-selected {
    border-color: #1e6b61;
    background: #edf6f2;
    box-shadow: inset 0 -3px #1e6b61;
  }

  .mission-v2-pattern-builder {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 10px;
    margin-top: 11px;
    padding: 12px;
    border: 1px solid #d4dfda;
    border-radius: 12px;
    background: #f5f1e8;
  }

  .mission-v2-pattern-builder > div > small,
  .mission-v2-pattern-builder > aside > small {
    color: #8c7046;
    font-size: 9px;
    font-weight: 900;
  }

  .mission-v2-pattern-builder nav {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
  }

  .mission-v2-pattern-builder nav button {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #cfd9d5;
    border-radius: 99px;
    background: #fff;
    color: #526962;
    font-size: 10px;
    cursor: pointer;
  }

  .mission-v2-pattern-builder nav button.is-selected {
    color: #fff;
    border-color: #1c685e;
    background: #1c685e;
  }

  .mission-v2-pattern-builder > aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff;
  }

  .mission-v2-pattern-builder > aside > small,
  .mission-v2-pattern-builder > aside > b {
    grid-column: 1;
  }

  .mission-v2-pattern-builder > aside > b {
    color: #173f39;
    font-size: 16px;
  }

  .mission-v2-pattern-builder > aside > button {
    grid-column: 2;
    grid-row: 1 / 3;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #1e6a61;
    border-radius: 9px;
    color: #fff;
    background: #1e6a61;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
  }

  .mission-v2-toolkit {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 8px;
    margin-bottom: 9px;
    padding: 9px;
    border: 1px solid #ded8c8;
    border-radius: 10px;
    background: #f6f1e7;
  }

  .mission-v2-toolkit > div {
    display: grid;
    gap: 5px;
    min-width: 0;
  }

  .mission-v2-toolkit small {
    color: #92703f;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: 0.08em;
  }

  .mission-v2-toolkit p {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
  }

  .mission-v2-toolkit p span {
    padding: 4px 7px;
    border-radius: 99px;
    color: #fff;
    background: #236c63;
    font-size: 9px;
    font-weight: 850;
  }

  .mission-v2-toolkit b {
    overflow: hidden;
    color: #264740;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mission-v2-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .mission-v2-listen-panel,
  .mission-v2-response-panel {
    min-width: 0;
    padding: 12px;
    border: 1px solid #d5dfda;
    border-radius: 12px;
    background: #fafbf9;
  }

  .mission-v2-listen-panel > span,
  .mission-v2-response-panel > span {
    color: #9b6d32;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: 0.12em;
  }

  .mission-v2-listen-panel h4,
  .mission-v2-response-panel h4 {
    min-height: 36px;
    margin: 5px 0 8px;
    color: #294740;
    font-size: 14px;
    line-height: 1.35;
  }

  .mission-v2-listen-panel > button {
    width: 100%;
    min-height: 40px;
    margin-bottom: 7px;
    border: 1px solid #195e56;
    border-radius: 9px;
    color: #fff;
    background: #1e6b61;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
  }

  .mission-v2-listen-panel > div,
  .mission-v2-response-panel > div {
    display: grid;
    gap: 5px;
  }

  .mission-v2-listen-panel > div > button,
  .mission-v2-response-panel > div > button {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-height: 39px;
    padding: 6px 8px;
    border: 1px solid #d7dedb;
    border-radius: 8px;
    background: #fff;
    color: #4b5f59;
    text-align: left;
    font-size: 10px;
    cursor: pointer;
  }

  .mission-v2-listen-panel button > i,
  .mission-v2-response-panel button > i {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border-radius: 6px;
    color: #745c36;
    background: #eee7d9;
    font-size: 9px;
    font-style: normal;
    font-weight: 950;
  }

  .mission-v2-listen-panel button.is-correct,
  .mission-v2-response-panel button.is-correct {
    border-color: #4c9b7e;
    background: #eaf6f0;
  }

  .mission-v2-listen-panel button.is-wrong,
  .mission-v2-response-panel button.is-wrong {
    border-color: #c8827b;
    background: #fff1ef;
  }

  .mission-v2-response-panel > label {
    display: grid;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #dce2df;
  }

  .mission-v2-response-panel > label > span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #294740;
    font-size: 10px;
  }

  .mission-v2-response-panel > label small {
    color: #81908a;
    font-size: 8px;
    font-weight: 650;
  }

  .mission-v2-response-panel textarea {
    width: 100%;
    min-height: 58px;
    padding: 8px 10px;
    border: 1px solid #cad7d1;
    border-radius: 8px;
    background: #fff;
    color: #294740;
    font-size: 11px;
    resize: vertical;
  }

  .mission-v2-result > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    align-items: center;
    gap: 16px;
  }

  .mission-v2-result > header > strong {
    display: grid;
    place-items: center;
    align-content: center;
    width: 104px;
    height: 104px;
    border: 7px solid #d9e5df;
    border-top-color: #1e6b61;
    border-right-color: #d09a45;
    border-radius: 50%;
    color: #1c4c44;
  }

  .mission-v2-result > header > strong b {
    font-size: 31px;
    line-height: 1;
  }

  .mission-v2-result > header > strong span {
    margin-top: 5px;
    font-size: 8px;
  }

  .mission-v2-score-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
  }

  .mission-v2-score-grid article {
    display: grid;
    gap: 7px;
    padding: 10px;
    border: 1px solid #dae2de;
    border-radius: 9px;
    background: #f8faf8;
  }

  .mission-v2-score-grid article > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    color: #49615a;
    font-size: 9px;
  }

  .mission-v2-score-grid article strong {
    color: #1d665d;
    font-size: 15px;
  }

  .mission-v2-evidence {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
  }

  .mission-v2-evidence article {
    display: grid;
    align-content: start;
    gap: 5px;
    min-height: 70px;
    padding: 10px;
    border-radius: 9px;
    background: #f3eee3;
  }

  .mission-v2-evidence small {
    color: #9a733e;
    font-size: 8px;
    font-weight: 950;
  }

  .mission-v2-evidence b {
    color: #334d46;
    font-size: 10px;
    line-height: 1.45;
  }

  .mission-v2-next-review {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 9px;
    padding: 10px 12px;
    border: 1px solid #cbdcd5;
    border-radius: 10px;
    background: #edf6f2;
  }

  .mission-v2-next-review small {
    color: #9b6f36;
    font-size: 8px;
    font-weight: 950;
  }

  .mission-v2-next-review h4 {
    margin: 3px 0 0;
    color: #244840;
    font-size: 12px;
  }

  .mission-v2-next-review nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
  }

  .mission-v2-next-review button {
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid #1f6b61;
    border-radius: 7px;
    color: #1f6b61;
    background: #fff;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
  }

  .mission-v2-coach-card {
    overflow: hidden;
    display: grid;
    grid-template-rows: 255px minmax(0, 1fr);
    border: 1px solid #d0dbd6;
    border-radius: 15px;
    background: #183e39;
    box-shadow: 0 12px 30px #173a3217;
  }

  .mission-v2-coach-card > img {
    width: 100%;
    height: 255px;
    object-fit: cover;
    object-position: center;
  }

  .mission-v2-coach-card > div {
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 14px;
    color: #fff;
  }

  .mission-v2-coach-card small {
    color: #e7bf64;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: 0.12em;
  }

  .mission-v2-coach-card h3 {
    margin: 0;
    font-size: 19px;
  }

  .mission-v2-coach-card p {
    margin: 0;
    color: #d9e6e1;
    font-size: 11px;
    line-height: 1.55;
  }

  .mission-v2-coach-card span {
    margin-top: 4px;
    padding: 7px 8px;
    border: 1px solid #ffffff24;
    border-radius: 8px;
    color: #f2d27c;
    background: #ffffff0d;
    font-size: 9px;
    font-weight: 850;
  }

  .mission-v2-navigation {
    display: grid;
    grid-template-columns: 135px minmax(0, 1fr) 230px;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 14px;
  }

  .mission-v2-navigation > button {
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid #cbd7d2;
    border-radius: 9px;
    color: #405e56;
    background: #fff;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
  }

  .mission-v2-navigation > button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
  }

  .mission-v2-navigation > button.is-primary {
    color: #fff;
    border-color: #124c46;
    background: linear-gradient(145deg, #25766b, #16564f);
    box-shadow:
      0 5px 0 #0d403b,
      0 11px 22px #173d3630;
  }

  .mission-v2-navigation > span {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    color: #71807a;
    font-size: 10px;
  }

  .mission-v2-navigation > span b {
    color: #9b6b31;
    font-size: 12px;
  }
}

@media (max-width: 760px) {
  html[data-finyue-device="mobile"] .mission-desktop-v2 {
    display: none !important;
  }

  html[data-finyue-device="mobile"] .mission-mobile-preserved {
    display: block;
  }

  .audio-lesson-side-navigation {
    display: none;
  }

  .audio-course-page .audio-course-hero {
    padding: 9px 14px 12px !important;
  }

  .audio-course-page .audio-course-hero h1 {
    font-size: 30px !important;
  }

  .listening-options {
    grid-template-columns: 1fr;
  }

  .listening-answer-reveal:not(.listening-wrong-feedback) {
    grid-template-columns: 1fr;
  }

  .listening-answer-reveal:not(.listening-wrong-feedback) > button {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    margin-top: 9px !important;
  }

  .scenario-brief {
    grid-template-columns: minmax(0, 1fr) 66px !important;
  }

  .scenario-brief-mascot {
    display: none;
  }

  .scenario-start-grid {
    grid-template-columns: 1fr !important;
  }

  .scenario-character-panel > div {
    grid-template-columns: 1fr;
  }
}

/* Pass 90 final precedence. */
html[data-finyue-device="desktop"] body .audio-course-page .audio-scene-card {
  grid-template-areas:
    "scene-visual scene-identity"
    "scene-visual scene-copy"
    "scene-visual scene-tip" !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

html[data-finyue-device="desktop"] body .audio-course-page .audio-scene-tip-grid {
  grid-area: scene-tip !important;
  grid-column: auto !important;
  align-self: end !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  overflow: visible !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .audio-scene-tip-grid .audio-scene-hong-kong-tip {
  grid-area: auto !important;
  min-height: 92px !important;
  margin: 0 !important;
  display: block !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .audio-scene-tip-grid .audio-scene-hong-kong-tip > span {
  white-space: normal !important;
  font-size: 10px !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .audio-scene-tip-grid .audio-scene-hong-kong-tip > p {
  font-size: 12px !important;
  line-height: 1.42 !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .audio-learning-mastery,
html[data-finyue-device="desktop"] body .audio-course-page
  .audio-mode-progress {
  min-height: 0 !important;
  padding: 6px 8px !important;
  display: block !important;
  gap: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .audio-learning-mastery > i,
html[data-finyue-device="desktop"] body .audio-course-page
  .audio-mode-progress > i {
  position: relative !important;
  height: 30px !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #ede9fe, #dff7f2, #fff1c4, #ffe2d8) !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .audio-mode-progress > i {
  width: min(210px, 100%) !important;
  height: 24px !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .audio-learning-mastery > i > em,
html[data-finyue-device="desktop"] body .audio-course-page
  .audio-mode-progress > i > span {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  height: 100% !important;
  background: linear-gradient(90deg, #7657d8 0%, #12a59c 42%, #efbd44 72%, #f2745f 100%) !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  :is(.audio-learning-mastery, .audio-mode-progress) > i > b {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #173f3a !important;
  font-size: 12px !important;
}

/* The emoji headphone layer belongs around the ears, not across the mascot face. */
.sentence-card-mascot .companion-worn-item.slot-head.item-headphones {
  width: 118px !important;
  height: 58px !important;
  top: -25px !important;
  left: 50% !important;
  font-size: 78px !important;
  transform: translateX(-50%) scaleX(1.42) rotate(0deg) !important;
  transform-origin: 50% 50%;
}

@media (min-width: 761px) {
  .mission-v3-opening-scene {
    margin-top: 17px;
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #cfdbd6;
    border-radius: 16px;
    background: #fff;
  }

  .mission-v3-opening-scene figure {
    position: relative;
    min-height: 178px;
    margin: 0;
    overflow: hidden;
    background: #dfece6;
  }

  .mission-v3-opening-scene figure > img {
    width: 100%;
    height: 100%;
    min-height: 178px;
    object-fit: cover;
  }

  .mission-v3-opening-scene figcaption {
    position: absolute;
    inset: auto 0 0;
    padding: 36px 15px 13px;
    display: grid;
    gap: 4px;
    color: #fff;
    background: linear-gradient(transparent, #112d2ad9);
  }

  .mission-v3-opening-scene figcaption small,
  .mission-v3-opening-scene > div > span {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
  }

  .mission-v3-opening-scene figcaption b {
    font-size: 14px;
    line-height: 1.45;
  }

  .mission-v3-opening-scene > div {
    padding: 23px 25px;
    display: grid;
    align-content: center;
  }

  .mission-v3-opening-scene > div > span {
    color: #98733d;
  }

  .mission-v3-opening-scene h4 {
    margin: 10px 0 17px;
    color: #173a35;
    font-size: 20px;
    line-height: 1.4;
  }

  .mission-v3-opening-scene nav,
  .mission-v3-dialogue-turn nav {
    display: flex;
    gap: 8px;
  }

  .mission-v3-opening-scene button,
  .mission-v3-dialogue-turn button {
    min-height: 39px;
    padding: 0 14px;
    border: 1px solid #bad0c9;
    border-radius: 9px;
    color: #1c5f56;
    background: #edf6f2;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
  }

  .mission-v3-listening > header,
  .mission-v3-speech-lab > header {
    max-width: 760px;
  }

  .mission-v3-listening > header small,
  .mission-v3-speech-lab > header small {
    color: #a37637;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.12em;
  }

  .mission-v3-listening > header h3,
  .mission-v3-speech-lab > header h3 {
    margin: 8px 0 7px;
    color: #173a35;
    font:
      700 28px/1.25 "Noto Serif TC",
      "Songti TC",
      serif;
  }

  .mission-v3-listening > header p,
  .mission-v3-speech-lab > header p {
    margin: 0;
    color: #6c7c76;
    font-size: 11px;
    line-height: 1.7;
  }

  .mission-v3-listening-stage {
    margin-top: 17px;
    display: grid;
    grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
    border: 1px solid #cfdbd6;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
  }

  .mission-v3-listening-stage > div {
    padding: 24px;
    color: #fff;
    background:
      radial-gradient(circle at 100% 0, #3b7c70, transparent 38%),
      linear-gradient(145deg, #173e3a, #245951);
  }

  .mission-v3-listening-stage > div > span,
  .mission-v3-dialogue-turn > div > span {
    color: #efcc72;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.1em;
  }

  .mission-v3-listening-stage h4 {
    margin: 7px 0 13px;
    font-size: 19px;
  }

  .mission-v3-listening-stage blockquote {
    min-height: 58px;
    margin: 0 0 18px;
    font:
      650 19px/1.55 "Noto Serif TC",
      "Songti TC",
      serif;
  }

  .mission-v3-listening-stage > div nav {
    display: flex;
    gap: 6px;
  }

  .mission-v3-listening-stage > div button {
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid #ffffff4d;
    border-radius: 8px;
    color: #fff;
    background: #ffffff12;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
  }

  .mission-v3-listening-stage > article {
    padding: 23px;
  }

  .mission-v3-listening-stage > article > small {
    color: #8b743f;
    font-size: 9px;
    font-weight: 900;
  }

  .mission-v3-listening-stage > article > h4 {
    margin: 8px 0 13px;
    color: #183b36;
    font-size: 17px;
    line-height: 1.45;
  }

  .mission-v3-listening-options {
    display: grid;
    gap: 7px;
  }

  .mission-v3-listening-options > button {
    min-height: 48px;
    padding: 8px 12px;
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border: 1px solid #d5dfdb;
    border-radius: 10px;
    color: #243f3a;
    background: #fbfcfb;
    text-align: left;
    cursor: pointer;
  }

  .mission-v3-listening-options > button i {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #54716a;
    background: #e8efec;
    font-style: normal;
    font-weight: 950;
  }

  .mission-v3-listening-options > button.is-selected {
    border-color: #317c70;
    background: #eaf5f1;
    box-shadow: inset 4px 0 #317c70;
  }

  .mission-v3-listening-feedback {
    margin-top: 12px;
    padding: 10px 13px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    border: 1px solid #d7dfdb;
    border-radius: 13px;
    background: #f8faf8;
  }

  .mission-v3-listening-feedback.is-repair {
    border-color: #e3d0a2;
    background: #fff8e7;
  }

  .mission-v3-listening-feedback img {
    width: 72px;
    height: 64px;
    object-fit: cover;
    object-position: center 35%;
    border-radius: 10px;
  }

  .mission-v3-listening-feedback span {
    display: grid;
    gap: 5px;
  }

  .mission-v3-listening-feedback small {
    color: #986f32;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.07em;
  }

  .mission-v3-listening-feedback b {
    color: #263f3a;
    font-size: 12px;
    line-height: 1.55;
  }

  .mission-v3-listening-feedback button {
    width: max-content;
    padding: 0;
    border: 0;
    color: #1f6b61;
    background: transparent;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
  }

  .mission-v3-dialogue-turn {
    margin-top: 17px;
    padding: 17px 19px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    border: 1px solid #2c5c55;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(140deg, #193e3a, #285f57);
  }

  .mission-v3-dialogue-turn blockquote {
    margin: 6px 0 0;
    font:
      650 17px/1.5 "Noto Serif TC",
      "Songti TC",
      serif;
  }

  .mission-v3-dialogue-turn button {
    color: #fff;
    border-color: #ffffff4f;
    background: #ffffff12;
  }

  .mission-v3-recorder {
    position: relative;
    margin-top: 11px;
    min-height: 162px;
    padding: 22px 215px 22px 23px;
    display: grid;
    align-content: center;
    overflow: hidden;
    border: 1px solid #cad9d4;
    border-radius: 16px;
    background:
      radial-gradient(circle at 91% 42%, #d9ece5, transparent 24%), #fff;
  }

  .mission-v3-recorder.is-recording {
    border-color: #d36b63;
    background:
      radial-gradient(circle at 91% 42%, #f8d8d3, transparent 25%), #fffafa;
  }

  .mission-v3-recording-status > span {
    color: #9b7137;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.13em;
  }

  .mission-v3-recording-status h4 {
    margin: 8px 0 7px;
    color: #173b36;
    font-size: 23px;
  }

  .mission-v3-recording-status p {
    min-height: 20px;
    margin: 0;
    color: #61736d;
    font-size: 11px;
    line-height: 1.6;
  }

  .mission-v3-record-button {
    position: absolute;
    top: 50%;
    right: 30px;
    width: 158px;
    min-height: 104px;
    padding: 11px;
    display: grid;
    place-items: center;
    gap: 6px;
    transform: translateY(-50%);
    border: 1px solid #15544d;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(145deg, #287a6f, #15574f);
    box-shadow:
      0 6px 0 #0e443e,
      0 15px 26px #174d4530;
    cursor: pointer;
  }

  .mission-v3-record-button i {
    width: 47px;
    height: 47px;
    display: grid;
    place-items: center;
    border: 2px solid #ffffffba;
    border-radius: 50%;
    color: #ffcc7b;
    font-style: normal;
    font-size: 22px;
  }

  .mission-v3-record-button span {
    font-size: 11px;
    font-weight: 950;
  }

  .mission-v3-recorder.is-recording .mission-v3-record-button {
    border-color: #8a302b;
    background: linear-gradient(145deg, #c0524b, #8e322e);
    box-shadow:
      0 6px 0 #6f2421,
      0 15px 26px #7c2c2930;
  }

  .mission-v3-wave {
    position: absolute;
    right: 202px;
    bottom: 18px;
    height: 27px;
    display: flex;
    align-items: center;
    gap: 3px;
  }

  .mission-v3-wave b {
    width: 3px;
    height: 8px;
    border-radius: 99px;
    background: #bd4c45;
    animation: missionVoiceWave 0.72s ease-in-out infinite alternate;
  }

  .mission-v3-wave b:nth-child(3n) {
    animation-delay: 0.18s;
  }

  .mission-v3-wave b:nth-child(4n) {
    animation-delay: 0.36s;
  }

  @keyframes missionVoiceWave {
    to {
      height: 26px;
    }
  }

  .mission-v3-recording-note {
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px solid #e1ce9d;
    border-radius: 10px;
    color: #735627;
    background: #fff7e4;
    font-size: 10px;
    line-height: 1.6;
  }

  .mission-v3-instant-score {
    margin-top: 11px;
    padding: 14px;
    display: grid;
    grid-template-columns: 112px repeat(4, minmax(0, 1fr));
    gap: 9px;
    border: 1px solid #d3ddd9;
    border-radius: 14px;
    background: #f7faf8;
  }

  .mission-v3-instant-score > div {
    display: grid;
    place-items: center;
    border-right: 1px solid #d9e2de;
  }

  .mission-v3-instant-score > div strong {
    color: #1e685e;
    font:
      750 34px/1 Georgia,
      serif;
  }

  .mission-v3-instant-score > div span {
    margin-top: 6px;
    color: #74827d;
    font-size: 8px;
    font-weight: 900;
  }

  .mission-v3-instant-score article {
    padding: 5px;
    display: grid;
    align-content: center;
    gap: 9px;
  }

  .mission-v3-instant-score article > span {
    display: flex;
    justify-content: space-between;
    gap: 7px;
    color: #405b55;
    font-size: 8px;
  }

  .mission-v3-instant-score article em {
    color: #1e685e;
    font-style: normal;
    font-weight: 950;
  }

  .mission-v3-instant-score article > i {
    height: 4px;
    overflow: hidden;
    border-radius: 99px;
    background: #dbe4e0;
  }

  .mission-v3-instant-score article > i > b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ddb957, #2d7b70);
  }

  .mission-v3-instant-score > audio {
    grid-column: 1 / -1;
    width: 100%;
    height: 34px;
  }

  .mission-v3-speech-support {
    margin-top: 11px;
    display: grid;
    grid-template-columns: auto auto minmax(250px, 1fr);
    gap: 8px;
  }

  .mission-v3-speech-support button {
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid #d1dcd8;
    border-radius: 9px;
    color: #2b5a53;
    background: #fff;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
  }

  .mission-v3-speech-support button:last-child {
    justify-self: end;
    color: #fff;
    border-color: #8a713e;
    background: #9a7b3d;
  }

  .mission-v3-speech-support button.is-used {
    color: #155b52;
    border-color: #8bc0b5;
    background: #e7f4ef;
  }

  .mission-v3-coach-hint {
    margin-top: 10px;
    padding: 11px 14px;
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    border: 1px solid #dbc993;
    border-radius: 14px;
    background: linear-gradient(120deg, #fff8df, #f4f8f4);
  }

  .mission-v3-coach-hint img {
    width: 86px;
    height: 76px;
    object-fit: cover;
    object-position: center 34%;
    border-radius: 11px;
  }

  .mission-v3-coach-hint > span {
    display: grid;
    gap: 5px;
  }

  .mission-v3-coach-hint small {
    color: #a07332;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: 0.08em;
  }

  .mission-v3-coach-hint b {
    color: #1d443e;
    font:
      650 16px/1.5 "Noto Serif TC",
      "Songti TC",
      serif;
  }

  .mission-v3-coach-hint p {
    margin: 0;
    color: #65766f;
    font-size: 9px;
    line-height: 1.55;
  }

  .mission-v3-conversation-replay {
    margin-top: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .mission-v3-conversation-replay article {
    min-height: 102px;
    padding: 13px 48px 13px 14px;
    display: grid;
    align-content: center;
    gap: 7px;
    position: relative;
    border: 1px solid #d6dfdb;
    border-radius: 11px;
    background: #fff;
  }

  .mission-v3-conversation-replay small {
    color: #9d7134;
    font-size: 8px;
    font-weight: 950;
  }

  .mission-v3-conversation-replay b {
    color: #253f3a;
    font-size: 11px;
    line-height: 1.55;
  }

  .mission-v3-conversation-replay button {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 29px;
    height: 29px;
    border: 1px solid #b9d0c9;
    border-radius: 50%;
    color: #1d665d;
    background: #ecf5f1;
    cursor: pointer;
  }

  .mission-v3-conversation-replay audio {
    width: 100%;
    height: 31px;
  }

  .mission-v3-full-replay {
    width: 100%;
    min-height: 46px;
    margin-top: 10px;
    border: 1px solid #174f49;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #27776d, #174f49);
    box-shadow: 0 4px 0 #103d38;
    font-size: 10px;
    font-weight: 950;
    cursor: pointer;
  }
}

/* Readable course typography at 100% browser zoom. */
html[data-finyue-device="desktop"] .audio-course-page .audio-stage-heading>span,
html[data-finyue-device="desktop"] .audio-course-page .application-stage-heading>span{font-size:12px!important}
html[data-finyue-device="desktop"] .audio-course-page .audio-stage-heading h2,
html[data-finyue-device="desktop"] .audio-course-page .application-stage-heading h2{font-size:30px!important;line-height:1.25!important}
html[data-finyue-device="desktop"] .audio-course-page .audio-stage-heading p,
html[data-finyue-device="desktop"] .audio-course-page .application-stage-heading p{font-size:14px!important;line-height:1.65!important}
html[data-finyue-device="desktop"] .audio-course-page .audio-scene-card h3{font-size:21px!important}
html[data-finyue-device="desktop"] .audio-course-page .audio-scene-card p,
html[data-finyue-device="desktop"] .audio-course-page .audio-preview-card p{font-size:14px!important;line-height:1.65!important}
html[data-finyue-device="desktop"] .audio-course-page .audio-scene-card strong,
html[data-finyue-device="desktop"] .audio-course-page .audio-preview-card>span{font-size:12px!important}
html[data-finyue-device="desktop"] .audio-course-page .audio-preview-card h3{font-size:22px!important}
html[data-finyue-device="desktop"] .audio-course-page .audio-preview-card button,
html[data-finyue-device="desktop"] .audio-course-page .audio-preview-card legend{font-size:13px!important}
html[data-finyue-device="desktop"] .audio-course-page .audio-term-grid article :is(p,em,small,span){font-size:12px!important;line-height:1.5!important}
html[data-finyue-device="desktop"] .audio-course-page .audio-term-grid article h3{font-size:23px!important}
html[data-finyue-device="desktop"] .audio-course-page .audio-term-actions button{font-size:12px!important}
html[data-finyue-device="desktop"] .audio-course-page .sentence-card-topbar :is(span,small,b),
html[data-finyue-device="desktop"] .audio-course-page .sentence-card-context :is(span,p,small,b){font-size:12px!important;line-height:1.55!important}
html[data-finyue-device="desktop"] .audio-course-page .sentence-card-main-line{font-size:24px!important;line-height:1.35!important}
html[data-finyue-device="desktop"] .audio-course-page .sentence-card-jyutping{font-size:14px!important;line-height:1.5!important}
html[data-finyue-device="desktop"] .audio-course-page .sentence-card-practice :is(button,span,small,b,p){font-size:12px!important}
html[data-finyue-device="desktop"] .audio-course-page .sentence-card-replace-trigger,
html[data-finyue-device="desktop"] .audio-course-page .sentence-card-replace-list button{font-size:14px!important}

/* Short replacement phrases such as “保留五分鐘” stay visually intact. */
.audio-course-page .sentence-card-main-line button,
.audio-course-page .sentence-card-replace-trigger b,
.audio-course-page .sentence-replace-drawer button b {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
html[data-finyue-device="desktop"] .audio-course-page .listening-challenge-trainer :is(p,span,small,b,button,legend),
html[data-finyue-device="desktop"] .audio-course-page .scenario-simulator :is(p,span,small,b,button),
html[data-finyue-device="desktop"] .audio-course-page .ability-test :is(p,span,small,b,button){font-size:12px!important;line-height:1.55!important}

/* Course stage strip remains one row but is readable at 100% zoom. */
html[data-finyue-device="desktop"] .audio-course-page .audio-learning-roadmap>header span{
  font-size:10px!important;
}
html[data-finyue-device="desktop"] .audio-course-page .audio-learning-roadmap>header b,
html[data-finyue-device="desktop"] .audio-course-page .audio-learning-roadmap>header strong{
  font-size:15px!important;
}
html[data-finyue-device="desktop"] .audio-course-page .audio-learning-roadmap>header small{
  font-size:10px!important;
}
html[data-finyue-device="desktop"] .audio-course-page .audio-learning-roadmap .audio-stage-nav button>i{
  font-size:13px!important;
  line-height:1!important;
}
html[data-finyue-device="desktop"] .audio-course-page .audio-learning-roadmap .audio-stage-nav button>span{
  font-size:13px!important;
  line-height:1.2!important;
}
html[data-finyue-device="desktop"] .audio-course-page .audio-learning-roadmap .audio-stage-nav button>small{
  font-size:9px!important;
  line-height:1.2!important;
}
.scenario-simulation-complete .scenario-complete-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr;
  gap:9px;
  width:min(430px,100%);
  margin:18px auto 0;
}
.scenario-simulation-complete .scenario-complete-actions>button{
  width:100%;
  min-height:46px;
  margin:0!important;
}
.scenario-simulation-complete .scenario-complete-actions>button:not(.primary){
  color:#285e56!important;
  border:1px solid #b9d0c8!important;
  background:#eef6f2!important;
  box-shadow:0 3px 0 #c6d8d2!important;
}
.scenario-simulation-complete .scenario-complete-actions>button:not(.primary):hover{
  border-color:#7fa99d!important;
  background:#e2f0eb!important;
}
.scenario-simulation-complete .scenario-complete-actions>button:not(.primary):active{
  box-shadow:0 1px 0 #c6d8d2!important;
  transform:translateY(2px);
}
.scenario-simulation-complete .scenario-complete-actions>button.primary{
  color:#fff!important;
  border-color:#1d665e!important;
  background:#1d665e!important;
}

/* Selector panel and lesson cards are separate constrained rows. */
.course-directory-v32 .general-course-carousel{
  width:100%!important;
  min-width:0!important;
  grid-template-columns:minmax(0,1fr)!important;
}
.course-directory-v32 .general-course-carousel>.course-selector-panel,
.course-directory-v32 .general-course-carousel>.general-course-drawer{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
}
.course-directory-v32 .general-course-drawer{
  grid-template-columns:204px minmax(0,1fr)!important;
}
.course-directory-v32 .general-scene-topics{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.course-directory-v32 .general-scene-topics>li{
  width:auto!important;
  min-width:0!important;
}
.course-directory-v32 .professional-course-switcher{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  grid-template-columns:minmax(0,1fr)!important;
}
.course-directory-v32 .professional-course-switcher>.professional-direction-deck,
.course-directory-v32 .professional-course-switcher>.professional-course-grid-panel{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
}
.course-directory-v32 .professional-course-grid-panel{
  grid-template-columns:204px minmax(0,1fr)!important;
}
.course-directory-v32 .professional-course-card-grid{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.course-directory-v32 .professional-course-card-grid>li{
  width:auto!important;
  min-width:0!important;
}
.mission-v2-objectives{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
}
.mission-v2-objectives>article{
  grid-template-columns:30px minmax(0,1fr)!important;
  align-items:center!important;
  gap:8px!important;
  min-height:48px!important;
  padding:8px 10px!important;
}
.mission-v2-objectives>article>i{
  width:30px!important;
  height:30px!important;
  display:grid!important;
  place-items:center!important;
}
.mission-v2-objectives>article>b{
  font-size:12px!important;
  line-height:1.35!important;
}

/* One compact speaking control: record and fallback choices stay together. */
.mission-v3-recorder{
  min-height:0!important;
  padding:15px 16px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-areas:
    "status record"
    "support support"!important;
  align-items:center!important;
  gap:11px 16px!important;
}
.mission-v3-recording-status{
  grid-area:status;
}
.mission-v3-recording-status h4{
  margin:5px 0 4px!important;
  font-size:20px!important;
}
.mission-v3-recording-status p{
  min-height:0!important;
}
.mission-v3-record-button{
  position:static!important;
  grid-area:record;
  width:142px!important;
  min-height:58px!important;
  padding:8px 11px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  transform:none!important;
  border-radius:11px!important;
  box-shadow:0 4px 0 #0e443e,0 9px 18px #174d4525!important;
}
.mission-v3-record-button i{
  width:28px!important;
  height:28px!important;
  flex:0 0 28px!important;
  font-size:13px!important;
}
.mission-v3-record-button span{
  font-size:10px!important;
}
.mission-v3-recorder>.mission-v3-speech-support{
  grid-area:support;
  margin:0!important;
  padding-top:10px;
  grid-template-columns:1fr 1fr 1.4fr!important;
  border-top:1px solid #e1e8e5;
}
.mission-v3-recorder>.mission-v3-speech-support button{
  min-height:38px!important;
  padding:0 10px!important;
  font-size:9px!important;
}
.mission-v3-recorder>.mission-v3-speech-support button:last-child{
  width:100%;
  justify-self:stretch!important;
}
.mission-v3-recorder .mission-v3-wave{
  right:165px!important;
  bottom:65px!important;
}

/* Optional, compact ability check: users may move on without answering. */
html[data-finyue-device="desktop"] .audio-course-page .ability-test{
  box-sizing:border-box!important;
  width:min(1040px,100%)!important;
  margin-inline:auto!important;
}
html[data-finyue-device="desktop"] .ability-test>.application-stage-heading{
  min-height:70px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 150px!important;
  align-items:end!important;
  gap:18px!important;
}
html[data-finyue-device="desktop"] .ability-test>.application-stage-heading h2{
  margin:4px 0 3px!important;
  font-size:25px!important;
}
html[data-finyue-device="desktop"] .ability-test>.application-stage-heading p{
  margin:0!important;
  font-size:11px!important;
  line-height:1.5!important;
}
html[data-finyue-device="desktop"] .ability-test-progress{
  min-width:0!important;
}
html[data-finyue-device="desktop"] .ability-test-map{
  width:min(1000px,100%)!important;
  margin:10px auto 0!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:4px!important;
}
html[data-finyue-device="desktop"] .ability-test-map>span{
  min-height:38px!important;
  padding:5px 8px!important;
  gap:6px!important;
}
html[data-finyue-device="desktop"] .ability-test-map>span>i{
  width:24px!important;
  height:24px!important;
  font-size:9px!important;
}
html[data-finyue-device="desktop"] .ability-test-map>span>b{
  font-size:10px!important;
  white-space:nowrap!important;
}
html[data-finyue-device="desktop"] .ability-test-card{
  box-sizing:border-box!important;
  width:min(960px,100%)!important;
  min-height:0!important;
  margin:10px auto 0!important;
  padding:20px!important;
  border-radius:14px!important;
}
html[data-finyue-device="desktop"] .ability-test-card>header h3{
  margin:7px 0 10px!important;
  font-size:20px!important;
  line-height:1.4!important;
}
html[data-finyue-device="desktop"] .ability-audio-button{
  min-height:38px!important;
  margin:0 0 10px!important;
  padding:0 13px!important;
}
html[data-finyue-device="desktop"] .ability-options{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
}
html[data-finyue-device="desktop"] .ability-options>button{
  min-height:68px!important;
  padding:9px 11px!important;
}
html[data-finyue-device="desktop"] .ability-test-navigation{
  width:min(960px,100%)!important;
  min-height:40px!important;
  margin:8px auto 0!important;
}
html[data-finyue-device="desktop"] .ability-test-navigation button{
  min-height:38px!important;
}

/* Full review opens immediately with a short, horizontal summary. */
html[data-finyue-device="desktop"] .lesson-review-library{
  width:min(1100px,100%)!important;
  gap:9px!important;
}
html[data-finyue-device="desktop"] .lesson-review-library-heading{
  min-height:72px!important;
  padding:13px 18px!important;
  align-items:center!important;
  border-radius:14px!important;
}
html[data-finyue-device="desktop"] .lesson-review-library-heading h2{
  margin:4px 0 0!important;
  font-size:22px!important;
}
html[data-finyue-device="desktop"] .lesson-review-library-index{
  gap:5px!important;
}
html[data-finyue-device="desktop"] .lesson-review-library-index a{
  min-height:35px!important;
  padding:0 10px!important;
}
html[data-finyue-device="desktop"] .lesson-review-library-groups{
  gap:10px!important;
}
html[data-finyue-device="desktop"] .lesson-review-library-groups>section{
  padding:10px!important;
  border-radius:13px!important;
}
html[data-finyue-device="desktop"] .lesson-review-library-groups>section>header{
  min-height:30px!important;
  margin-bottom:5px!important;
}
html[data-finyue-device="desktop"] .lesson-review-expanded-list{
  gap:6px!important;
}
html[data-finyue-device="desktop"] .lesson-review-expanded-list>article{
  padding:9px!important;
  grid-template-columns:125px minmax(0,1fr) 330px!important;
  gap:10px!important;
  border-radius:11px!important;
}
html[data-finyue-device="desktop"] .lesson-review-expanded-list>article.needs-work{
  border-left-width:1px!important;
}
/* The mobile full-review stream is a separate phone presentation.  Keep it
   out of desktop layout so the lesson is never rendered twice. */
.mobile-review-library {
  display: none;
}

.review-session-mode {
  display: contents;
}

/* Desktop directory hard-stop: legacy intrinsic widths must never enlarge the
   selector or lesson drawer.  Only the horizontal rails may scroll. */
html[data-finyue-device="desktop"] .course-directory-v32,
html[data-finyue-device="desktop"] .course-directory-v32 .general-course-launch,
html[data-finyue-device="desktop"] .course-directory-v32 .general-course-carousel,
html[data-finyue-device="desktop"] .course-directory-v32 .professional-course-switcher,
html[data-finyue-device="desktop"] .course-directory-v32 .all-professional-route-maps {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html[data-finyue-device="desktop"] .course-directory-v32 .course-selector-panel,
html[data-finyue-device="desktop"] .course-directory-v32 .general-course-drawer,
html[data-finyue-device="desktop"] .course-directory-v32 .professional-course-grid-panel {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html[data-finyue-device="desktop"] .course-directory-v32 .course-selection-rail {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html[data-finyue-device="desktop"] .course-directory-v32 .course-selection-track {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

html[data-finyue-device="desktop"] .course-directory-v32 .general-course-drawer,
html[data-finyue-device="desktop"] .course-directory-v32 .professional-course-grid-panel {
  grid-template-columns: 204px minmax(0, 1fr) !important;
}

html[data-finyue-device="desktop"] .course-directory-v32 .general-scene-topics,
html[data-finyue-device="desktop"] .course-directory-v32 .professional-course-card-grid {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Full lesson review remains fully expanded, but uses the desktop width instead
   of becoming one very tall single-column stream. */
html[data-finyue-device="desktop"] .lesson-review-expanded-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html[data-finyue-device="desktop"] .lesson-review-expanded-list > article {
  min-width: 0 !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  gap: 8px 10px !important;
  padding: 10px !important;
}

html[data-finyue-device="desktop"] .lesson-review-expanded-list > article > footer {
  grid-column: 1 / -1 !important;
  gap: 5px !important;
}

html[data-finyue-device="desktop"] .lesson-review-expanded-list > article > footer > div {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

html[data-finyue-device="desktop"] .lesson-review-expanded-list > article > footer > .lesson-review-rating {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html[data-finyue-device="desktop"] .lesson-review-expanded-list > article > footer button {
  min-width: 0 !important;
  padding-inline: 6px !important;
}

/* Pass 14: keep the general course heading aligned with the professional
   drawer, then turn the two desktop learning banners into one compact command
   strip.  Phone lessons keep their dedicated mobile presentation. */
html[data-finyue-device="desktop"]
  .course-directory-v32
  .general-course-drawer
  > .general-drawer-heading {
  align-self: start !important;
  justify-self: stretch !important;
  padding: 10px 3px !important;
}

html[data-finyue-device="desktop"]
  .audio-course-page
  .audio-mode-stage.is-collapsed {
  min-height: 54px !important;
  margin: 5px auto 0 !important;
  border-radius: 14px 14px 0 0 !important;
  box-shadow: none !important;
}

html[data-finyue-device="desktop"]
  .audio-course-page
  .audio-mode-stage.is-collapsed
  .audio-mode-compact {
  min-height: 52px !important;
  padding: 4px 8px !important;
  grid-template-columns: minmax(220px, 1fr) 104px 198px 128px 146px !important;
  gap: 7px !important;
}

html[data-finyue-device="desktop"]
  .audio-course-page
  .audio-mode-compact-identity
  img {
  width: 40px !important;
  height: 42px !important;
}

html[data-finyue-device="desktop"]
  .audio-course-page
  .audio-mode-compact-identity
  em {
  display: none !important;
}

html[data-finyue-device="desktop"]
  .audio-course-page
  .audio-mode-compact
  select {
  height: 36px !important;
  min-height: 36px !important;
  padding: 5px 30px 5px 10px !important;
  line-height: 24px !important;
  overflow: visible !important;
}

html[data-finyue-device="desktop"]
  .audio-course-page
  .audio-mode-compact
  > button {
  min-height: 38px !important;
}

html[data-finyue-device="desktop"]
  .audio-course-page
  .audio-mode-stage.is-collapsed
  + .audio-learning-roadmap {
  min-height: 52px !important;
  margin: 0 auto 5px !important;
  padding: 3px !important;
  grid-template-columns: 128px minmax(0, 1fr) !important;
  border-top: 1px solid rgba(205, 220, 215, 0.7) !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 7px 18px rgba(22, 60, 53, 0.09) !important;
}

html[data-finyue-device="desktop"]
  .audio-course-page
  .audio-mode-stage.is-collapsed
  + .audio-learning-roadmap
  > header {
  min-height: 44px !important;
  padding: 3px 7px !important;
}

html[data-finyue-device="desktop"]
  .audio-course-page
  .audio-mode-stage.is-collapsed
  + .audio-learning-roadmap
  > header
  > :is(span, small) {
  display: none !important;
}

html[data-finyue-device="desktop"]
  .audio-course-page
  .audio-mode-stage.is-collapsed
  + .audio-learning-roadmap
  nav,
html[data-finyue-device="desktop"]
  .audio-course-page
  .audio-mode-stage.is-collapsed
  + .audio-learning-roadmap
  nav
  button {
  min-height: 44px !important;
}

html[data-finyue-device="desktop"] .audio-course-page .audio-stage-shell {
  padding: 8px clamp(18px, 3vw, 42px) 0 !important;
}

html[data-finyue-device="desktop"]
  .audio-course-page
  .audio-scene-stage
  > .audio-stage-heading {
  margin-bottom: 8px !important;
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 6px 12px !important;
}

html[data-finyue-device="desktop"]
  .audio-course-page
  .audio-scene-stage
  > .audio-stage-heading
  h2 {
  margin: 0 !important;
  font-size: clamp(22px, 2vw, 24px) !important;
}

html[data-finyue-device="desktop"]
  .audio-course-page
  .audio-scene-stage
  > .audio-stage-heading
  p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

html[data-finyue-device="desktop"]
  .audio-course-page
  :is(.audio-scene-card, .audio-preview-card) {
  min-height: 340px !important;
}

html[data-finyue-device="desktop"]
  .audio-course-page
  .audio-scene-visual {
  min-height: 340px !important;
}

html[data-finyue-device="desktop"]
  .audio-course-page
  .audio-preview-card {
  padding: 17px !important;
}

html[data-finyue-device="desktop"]
  .audio-course-page
  .audio-stage-pagination {
  margin-top: 18px !important;
  padding-top: 12px !important;
}

html[data-finyue-device="desktop"] .lesson-review-library-index button {
  width: 100% !important;
  min-height: 35px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #315a53 !important;
  border: 1px solid #cfddd8 !important;
  border-radius: 11px !important;
  background: #fff !important;
  box-shadow: 0 3px 0 #d5dfdb !important;
  font: inherit !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

html[data-finyue-device="desktop"]
  .lesson-review-library-index
  button[aria-pressed="true"] {
  color: #fff !important;
  border-color: #286a60 !important;
  background: #286a60 !important;
  box-shadow: 0 3px 0 #173f3a !important;
}

html[data-finyue-device="desktop"]
  .lesson-review-library-index
  button[aria-pressed="true"]
  b {
  color: #f2d57e !important;
}

html[data-finyue-device="desktop"]
  .lesson-review-library-index
  button:focus-visible {
  outline: 3px solid rgba(242, 213, 126, 0.82) !important;
  outline-offset: 2px !important;
}

/* Keep the first-listen dialogue compact while making queue ownership visible. */
.audio-scene-speaker-strip {
  display: flex !important;
  gap: 7px !important;
  margin: 11px 0 12px !important;
  padding: 3px !important;
  overflow-x: auto !important;
  list-style: none !important;
  scrollbar-width: thin;
}

.audio-scene-speaker-strip > li {
  flex: 0 0 min(220px, 72vw) !important;
  min-width: 0 !important;
  padding: 8px 9px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid #d6e1dd !important;
  border-radius: 11px !important;
  background: #f7faf8 !important;
  scroll-snap-align: start;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease !important;
}

.audio-scene-speaker-strip > li > i {
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #2e6259 !important;
  background: #e4efeb !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

.audio-scene-speaker-strip > li > span {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

.audio-scene-speaker-strip strong {
  color: #315d55 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
}

.audio-scene-speaker-strip small {
  overflow: hidden !important;
  color: #6b7d78 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.audio-scene-speaker-strip > li[data-speaker-active="true"] {
  color: #fff !important;
  border-color: #2f786d !important;
  background: #2f786d !important;
  transform: translateY(-1px);
}

.audio-scene-speaker-strip > li[data-speaker-active="true"] > i {
  color: #2f655d !important;
  background: #f4d980 !important;
}

.audio-scene-speaker-strip > li[data-speaker-active="true"] :is(strong, small) {
  color: #fff !important;
}

/* Answer feedback must be visible immediately; advancing remains optional. */
.audio-preview-card fieldset button.is-selected.correct {
  color: #fff !important;
  border-color: #277267 !important;
  background: #277267 !important;
  box-shadow: 0 3px 0 #17483f !important;
}

.audio-preview-card fieldset button.is-selected.wrong {
  color: #7c332d !important;
  border-color: #c97768 !important;
  background: #fff0ec !important;
  box-shadow: 0 3px 0 #e1afa4 !important;
}

.audio-preview-feedback {
  min-height: 38px !important;
  margin: 8px 0 0 !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 9px !important;
  color: #61736e !important;
  background: #f2f6f4 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.audio-preview-feedback.is-correct {
  color: #15584f !important;
  background: #e4f4ed !important;
}

.audio-preview-feedback.is-incorrect {
  color: #7b392f !important;
  background: #fff0ec !important;
}

/* Explicit mastery stays unmistakable without changing the learner's ability
   to undo it; first-visit autoplay no longer writes mastery by itself. */
.audio-term-grid > article.is-mastered {
  border-color: #56a38f !important;
  background: linear-gradient(145deg, #ffffff, #eaf7f1) !important;
  box-shadow: 0 0 0 2px rgba(62, 143, 122, 0.13), 0 10px 24px rgba(27, 92, 76, 0.1) !important;
}

.audio-term-grid .audio-term-mastery-toggle.is-mastered[aria-pressed="true"] {
  color: #fff !important;
  border-color: #247365 !important;
  background: #247365 !important;
  box-shadow: 0 3px 0 #15483f !important;
}

.audio-term-grid .audio-term-mastery-toggle.is-mastered[aria-pressed="true"] i {
  color: #f5d77f !important;
}
/* General curriculum v2: keep twenty-four real lessons compact by paging the
   existing six-card surface instead of making the directory endlessly tall. */
.course-directory-v32 .general-drawer-heading {
  position: relative;
}

.course-directory-v32 .general-lesson-pagination {
  align-items: center;
  display: flex;
  gap: 7px;
  margin-top: 10px;
}

.course-directory-v32 .general-lesson-pagination button {
  align-items: center;
  background: #fff;
  border: 1px solid #cfdad5;
  border-radius: 10px;
  color: #1d625a;
  cursor: pointer;
  display: inline-flex;
  font-size: 17px;
  font-weight: 900;
  height: 38px;
  justify-content: center;
  width: 42px;
}

.course-directory-v32 .general-lesson-pagination button:disabled {
  cursor: default;
  opacity: 0.32;
}

.course-directory-v32 .general-lesson-pagination b {
  color: #315e56;
  font-size: 14px;
  font-weight: 900;
  min-width: 44px;
  text-align: center;
}

.course-directory-v32 .general-drawer-heading > span {
  display: block;
  color: #315e56;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.45;
}

@media (max-width: 932px) {
  html[data-finyue-device="mobile"]
    body
    .course-directory-v32
    .general-drawer-heading
    > span {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  html[data-finyue-device="mobile"]
    body
    .course-directory-v32
    .general-lesson-pagination
    button {
    width: 40px !important;
    min-width: 40px !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 17px !important;
  }

  html[data-finyue-device="mobile"]
    body
    .course-directory-v32
    .general-lesson-pagination
    b {
    min-width: 46px !important;
    font-size: 14px !important;
  }
}

/* Course-stage refinement: vocabulary uses one real ended event for first-visit
   autoplay, listening navigation carries state visually, and simulation setup
   stays compact enough to read as one dashboard. */
.audio-course-page .audio-term-mastery-summary .audio-term-autoplay-status {
  color: #315e56 !important;
  font-size: 11px !important;
  font-weight: 850;
}

.audio-course-page .audio-term-manual-navigation-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 11px 14px;
  border: 2px solid #d5aa42;
  border-radius: 12px;
  color: #183c38;
  background: linear-gradient(135deg, #fff9df, #f5e7ad);
  box-shadow: 0 8px 20px rgba(112, 82, 18, 0.13);
}

.audio-course-page .audio-term-manual-navigation-hint strong {
  flex: 0 0 auto;
  color: #73540c;
  font-size: 13px;
}

.audio-course-page .audio-term-manual-navigation-hint span {
  font-size: 12px;
  font-weight: 750;
  line-height: 1.55;
}

.audio-course-page .audio-stage-side-navigation .is-next.is-emphasized {
  border-color: #ffe18a !important;
  background: linear-gradient(145deg, #347e70, #205f56) !important;
  box-shadow:
    0 0 0 5px rgba(240, 204, 101, 0.25),
    0 18px 48px rgba(20, 79, 70, 0.38) !important;
  animation: audio-term-next-pulse 1.3s ease-in-out 2;
}

.audio-course-page .audio-stage-side-navigation .is-next.is-emphasized small,
.audio-course-page .audio-stage-side-navigation .is-next.is-emphasized b {
  color: #fff9df !important;
}

html[data-finyue-device="mobile"]
  .audio-course-page
  .mobile-lesson-dock-next.is-emphasized {
  border-color: #e8c65e !important;
  background: #1f7769 !important;
  box-shadow:
    0 0 0 4px rgba(232, 198, 94, 0.3),
    0 5px 0 #145349 !important;
  animation: audio-term-next-pulse 1.3s ease-in-out 2;
}

@keyframes audio-term-next-pulse {
  50% {
    filter: brightness(1.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .audio-course-page .audio-stage-side-navigation .is-next.is-emphasized,
  html[data-finyue-device="mobile"]
    .audio-course-page
    .mobile-lesson-dock-next.is-emphasized {
    animation: none;
  }
}

.audio-course-page .audio-term-mastery-summary.is-mastery-complete {
  color: #fff !important;
  border-color: #1d6659 !important;
  background: linear-gradient(135deg, #28796c, #18584f) !important;
  box-shadow: 0 8px 20px rgba(23, 89, 78, 0.2);
}

.audio-course-page
  .audio-term-mastery-summary.is-mastery-complete
  :is(span, b, small) {
  color: #fff !important;
}

.audio-course-page .audio-term-mastery-summary.is-mastery-complete > i {
  background: rgba(255, 255, 255, 0.24) !important;
}

.audio-course-page .audio-term-mastery-summary.is-mastery-complete > i > b {
  background: #f3d371 !important;
}

.audio-course-page .audio-term-grid > article.is-current:not(.is-mastered) {
  border-color: #c79b34 !important;
  box-shadow:
    0 0 0 3px rgba(222, 180, 74, 0.19),
    0 13px 28px rgba(66, 52, 25, 0.12) !important;
}

.audio-course-page .audio-term-grid > article.is-mastered {
  border-width: 2px !important;
  border-color: #398a76 !important;
  background: linear-gradient(145deg, #fff, #e1f4eb) !important;
  box-shadow:
    inset 5px 0 0 #2a806c,
    0 0 0 2px rgba(62, 143, 122, 0.15),
    0 11px 25px rgba(27, 92, 76, 0.13) !important;
}

.audio-course-page
  .audio-term-grid
  .audio-term-mastery-toggle.is-mastered[aria-pressed="true"] {
  transform: scale(1.04);
}

.audio-course-page .listening-group-map {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-bottom: 9px !important;
  padding: 6px !important;
}

.audio-course-page .listening-group-map > button {
  position: relative;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: 7px !important;
  min-height: 48px !important;
  padding: 6px 8px !important;
  border-radius: 9px !important;
}

.audio-course-page .listening-group-map > button > i {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
}

.audio-course-page .listening-group-map > button b {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12px !important;
  line-height: 1.25 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.audio-course-page .listening-group-map > button.complete:not(.active)::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 5px;
  color: #24715f;
  font-size: 10px;
  font-weight: 950;
}

.audio-course-page .scenario-objective-image {
  width: 100%;
  height: 104px;
  margin: 7px 0 9px;
  overflow: hidden;
  border: 1px solid #d5e0db;
  border-radius: 11px;
  background: #e3eee9;
  aspect-ratio: 3 / 1;
}

.audio-course-page .scenario-objective-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 761px) {
  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-start-grid {
    gap: 8px !important;
    margin-top: 6px !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    :is(.scenario-objective-card, .scenario-character-panel) {
    padding: 12px !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    :is(.scenario-objective-card, .scenario-character-panel)
    h3 {
    margin: 2px 0 4px !important;
    font-size: 18px !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-objective-card
    > p {
    margin: 0 0 5px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-objective-card
    > strong {
    font-size: 11px !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-objective-card
    ul {
    gap: 5px !important;
    margin: 6px 0 7px !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-objective-card
    li {
    padding: 5px 7px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-objective-card
    footer {
    gap: 5px !important;
    padding-top: 6px !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-objective-card
    footer
    > * {
    padding: 4px 7px !important;
    font-size: 10px !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-character-panel
    > header {
    margin-bottom: 5px !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-character-panel
    > div {
    gap: 5px !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-character-panel
    article {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 7px !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-character-panel
    article
    > i {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-character-panel
    article
    :is(b, small, p, em) {
    margin-block: 0 !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-character-panel
    .scenario-role-picker {
    margin-top: 6px !important;
    padding: 7px 8px !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-character-panel
    .scenario-role-picker
    button {
    min-height: 32px !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-mode-picker {
    gap: 6px !important;
    margin-top: 7px !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-mode-picker
    > button {
    min-height: 68px !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 7px 9px !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-mode-picker
    > button
    > i {
    width: 32px !important;
    height: 32px !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-mode-picker
    :is(b, small) {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-start-button {
    min-height: 44px !important;
    margin-top: 7px !important;
    font-size: 14px !important;
  }
}

/* Scene information: keep the useful note in the previously empty corner. */
.audio-course-page .audio-scene-card {
  grid-template-areas:
    "scene-visual scene-copy"
    "scene-visual scene-tip" !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
}

.audio-course-page .audio-scene-visual {
  grid-area: scene-visual;
}

.audio-course-page .audio-scene-copy {
  grid-area: scene-copy;
  min-width: 0;
}

.audio-course-page .audio-scene-hong-kong-tip {
  grid-area: scene-tip;
  margin: 0 18px 18px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  color: #345c54;
  border: 1px solid #d9e4df;
  border-left: 3px solid #d2a94d;
  border-radius: 11px;
  background: linear-gradient(135deg, #fffaf0, #f5faf7);
}

.audio-course-page .audio-scene-hong-kong-tip > span {
  color: #8d6a22;
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.audio-course-page .audio-scene-hong-kong-tip > p {
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

/* Readable, compact learning copy across every lesson.  Useful information is
   larger while decorative gaps shrink, so the first task arrives sooner. */
html[data-finyue-device="desktop"] .audio-course-page .audio-stage-shell {
  padding: 12px !important;
}

html[data-finyue-device="desktop"] .audio-course-page .audio-scene-card {
  min-height: 306px !important;
}

html[data-finyue-device="desktop"] .audio-course-page .audio-scene-copy {
  padding: 15px 18px 9px !important;
}

html[data-finyue-device="desktop"] .audio-course-page .audio-scene-copy h3 {
  margin-bottom: 6px !important;
  font-size: 23px !important;
}

html[data-finyue-device="desktop"] .audio-course-page .audio-scene-copy p {
  margin-bottom: 8px !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

html[data-finyue-device="desktop"] .audio-course-page .audio-scene-copy strong {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

html[data-finyue-device="desktop"] .audio-course-page .audio-scene-hong-kong-tip {
  margin: 0 18px 13px !important;
  padding-block: 8px !important;
}

.audio-course-page .sentence-card-meaning {
  width: min(100%, 620px);
  margin-top: 7px;
  padding: 7px 9px;
  color: #45625b;
  border: 1px solid #dbe4e0;
  border-radius: 9px;
  background: #f8faf8;
}

.audio-course-page .sentence-card-meaning > summary {
  cursor: pointer;
  color: #2f695f;
  font-size: 11px;
  font-weight: 900;
}

.audio-course-page .sentence-card-meaning > :is(p, small) {
  margin: 5px 0 0;
  font-size: 15px;
  line-height: 1.5;
}

.audio-course-page .sentence-card-meaning-details {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.audio-course-page .sentence-card-meaning-details > p {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  color: #314d47;
  font-size: 14px;
  line-height: 1.55;
}

.audio-course-page .sentence-card-meaning-details > p > span {
  color: #6f817b;
  font-size: 11px;
  font-weight: 900;
}

.audio-course-page .sentence-card-meaning-details .sentence-card-jyutping {
  color: #2d675e;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.audio-course-page .sentence-card-support-actions {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
}

.audio-course-page .sentence-card-support-actions .sentence-card-meaning {
  width: auto;
  min-width: min(260px, 68%);
  margin-top: 0;
  flex: 1 1 auto;
  box-shadow: 0 8px 18px rgba(37, 84, 74, 0.07);
}

.audio-course-page .sentence-card-meaning > summary {
  font-size: 14px;
  line-height: 1.4;
}

.audio-course-page .sentence-card-support-actions .sentence-card-favorite-actions {
  flex: 0 0 auto;
  margin: 0;
}

.audio-course-page .sentence-card-support-actions .sentence-favorite-button {
  min-height: 39px;
  padding-inline: 13px;
  font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .audio-course-page .sentence-card-support-actions {
    align-items: stretch;
  }

  .audio-course-page .sentence-card-support-actions .sentence-card-meaning {
    min-width: 0;
  }
}

.audio-course-page .audio-scene-tip-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 0 18px 13px;
}

.audio-course-page .audio-scene-tip-grid .audio-scene-hong-kong-tip {
  margin: 0 !important;
  min-width: 0;
  padding: 9px 11px !important;
}

.audio-course-page .audio-scene-tip-grid .audio-scene-hong-kong-tip span {
  font-size: 14px !important;
}

.audio-course-page .audio-scene-tip-grid .audio-scene-hong-kong-tip p {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.audio-course-page .audio-scene-tip-grid .is-culture {
  background: #f7f1df !important;
  border-color: #e7d8ad !important;
}

.audio-course-page .audio-scene-tip-grid .is-holiday {
  background: #f8eeee !important;
  border-color: #e6cecc !important;
}

.audio-course-page .audio-scene-dialogue-swipe-hint {
  display: block;
  margin: 5px 0 10px;
  color: #61766f;
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

@media (max-width: 720px) {
  .audio-course-page .audio-scene-tip-grid {
    grid-template-columns: repeat(3, minmax(230px, 82vw));
    overflow-x: auto;
    margin-inline: 10px;
    padding-bottom: 3px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .audio-course-page .audio-scene-tip-grid .audio-scene-hong-kong-tip {
    scroll-snap-align: start;
  }

  .audio-course-page .audio-scene-dialogue-swipe-hint {
    margin-inline: 4px;
    font-size: 14px;
  }
}

.audio-course-page .scenario-character-copy {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(2.7em, auto) auto;
  align-content: start;
  gap: 2px;
}

.audio-course-page .scenario-character-name,
.audio-course-page .scenario-character-series,
.audio-course-page .scenario-character-duty,
.audio-course-page .scenario-character-tone {
  margin: 0 !important;
  line-height: 1.35 !important;
}
/* Course micro-progress: compact, non-blocking feedback shared by every lesson. */
.audio-course-page .lesson-reward-inline-point {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 25px;
  margin-inline-start: 6px;
  padding-inline: 7px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  background: linear-gradient(145deg, #efad39, #d57d2d);
  border-radius: 10px;
  box-shadow: 0 5px 13px rgba(194, 108, 29, 0.22);
  animation: finyue-course-point-pop 620ms cubic-bezier(.2, 1.55, .5, 1) both;
}

.audio-course-page .lesson-reward-layer {
  position: fixed;
  z-index: 87;
  inset: calc(env(safe-area-inset-top, 0px) + 76px) auto auto 50%;
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(330px, calc(100vw - 28px));
  min-height: 60px;
  padding: 7px 12px 7px 7px;
  color: #173f39;
  background: rgba(255, 255, 250, .97);
  border: 1px solid rgba(42, 105, 91, .2);
  border-radius: 19px;
  box-shadow: 0 14px 38px rgba(26, 67, 57, .16);
  pointer-events: none;
  transform: translateX(-50%);
  animation: finyue-course-stage-in 700ms cubic-bezier(.2, 1.35, .45, 1) both;
}

.audio-course-page .lesson-reward-layer img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 14px;
}

.audio-course-page .lesson-stage-transition-arrow {
  display: grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  color: #fff;
  border-radius: 12px;
  background: linear-gradient(145deg, #478b80, #286d64);
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
}

.audio-course-page .lesson-reward-layer > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.audio-course-page .lesson-reward-layer small {
  color: #9a6c25;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
}

.audio-course-page .lesson-reward-layer b {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-course-page .lesson-reward-layer > strong {
  color: #d27d2e;
  font-size: 18px;
}

@keyframes finyue-course-point-pop {
  0% { opacity: 0; transform: translateY(5px) scale(.65); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes finyue-course-stage-in {
  0% { opacity: 0; transform: translate(-50%, -10px) scale(.92); }
  24%, 76% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -5px) scale(.98); }
}

@media (max-width: 932px) {
  .audio-course-page .lesson-reward-layer {
    inset-block-start: calc(env(safe-area-inset-top, 0px) + 62px);
    min-height: 54px;
    width: min(310px, calc(100vw - 24px));
  }
  .audio-course-page .lesson-reward-layer img {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .audio-course-page .lesson-reward-inline-point,
  .audio-course-page .lesson-reward-layer {
    animation: none;
  }
}

/* Final readable-learning contract.  Desktop course copy must be comfortable
   at 100% browser zoom; tiny 8–12px teaching text is reserved for metadata. */
html[data-finyue-device="desktop"] .audio-course-page
  :is(.listening-group-map, .ability-test-map) button,
html[data-finyue-device="desktop"] .audio-course-page
  :is(.listening-group-map, .ability-test-map) > span {
  min-height: 58px !important;
  padding: 9px 11px !important;
}

html[data-finyue-device="desktop"] .audio-course-page
  :is(.listening-group-map, .ability-test-map) b {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

html[data-finyue-device="desktop"] .audio-course-page
  :is(.listening-challenge-card, .ability-test-card) {
  padding: 16px 18px !important;
}

html[data-finyue-device="desktop"] .audio-course-page
  :is(.listening-challenge-card, .ability-test-card) h3 {
  font-size: 19px !important;
  line-height: 1.5 !important;
}

.audio-course-page .listening-question-row {
  margin: 4px 0 9px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.audio-course-page .listening-question-row > h3 {
  min-width: 0;
  margin: 0;
}

.audio-course-page .listening-transcript-toggle {
  width: auto;
  min-height: 38px;
  margin: 0;
  padding: 6px 9px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #194f47;
  border: 1px solid #94bdb2;
  border-radius: 11px;
  background: #eef8f4;
  box-shadow: 0 3px 0 #c6dcd5;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.audio-course-page .listening-transcript-toggle.is-active {
  color: #fff;
  border-color: #286f64;
  background: #286f64;
  box-shadow: 0 3px 0 #174b44;
}

.audio-course-page .listening-transcript-toggle.is-active > i {
  color: #286f64;
  background: #fff;
}

.audio-course-page .listening-transcript-toggle > i {
  min-width: 28px;
  padding: 3px 5px;
  color: #fff;
  border-radius: 7px;
  background: #286f64;
  font-size: 11px;
  font-style: normal;
  letter-spacing: .04em;
}

.audio-course-page .listening-mode-transcript {
  margin: 0 0 12px;
  padding: 12px 14px;
  display: grid;
  gap: 6px;
  color: #173d38;
  border: 1px solid #b9d4cc;
  border-left: 4px solid #3f8578;
  border-radius: 12px;
  background: linear-gradient(135deg, #f3faf7, #fffdf6);
}

.audio-course-page .listening-mode-transcript > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.audio-course-page .listening-mode-transcript > header span {
  color: #24675d;
  font-size: 12px;
  font-weight: 950;
}

.audio-course-page .listening-mode-transcript > header small {
  color: #71827d;
  font-size: 11px;
}

.audio-course-page .listening-mode-transcript > strong {
  font-size: 17px;
  line-height: 1.55;
}

.audio-course-page .listening-mode-transcript > p {
  margin: 0;
  color: #6a7b76;
  font-size: 14px;
  line-height: 1.5;
}

.audio-course-page .listening-mode-transcript details {
  font-size: 14px;
  line-height: 1.5;
}

/* Audio provenance must stay legible while the sentence itself changes. */
.audio-course-page .audio-sticky-player[data-playback-source="official"] {
  border-color: rgba(37, 112, 97, .48) !important;
  box-shadow: 0 12px 34px rgba(28, 88, 77, .2) !important;
}

.audio-course-page .audio-sticky-player[data-playback-source="device"] {
  border-color: rgba(173, 123, 43, .5) !important;
}

.audio-course-page .scenario-subtitle-controls button:disabled {
  opacity: 1;
  color: #765f35;
  border-color: #d8c69e;
  background: #fff8e8;
  cursor: not-allowed;
}

.audio-course-page .scenario-subtitle-controls button:first-child:disabled {
  min-width: 190px;
  font-weight: 900;
}

html[data-finyue-device="desktop"] .audio-course-page .listening-options > button,
html[data-finyue-device="desktop"] .audio-course-page .ability-options > button {
  min-height: 62px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

html[data-finyue-device="desktop"] .audio-course-page
  :is(.scenario-objective-card, .scenario-character-panel) {
  padding: 16px !important;
}

html[data-finyue-device="desktop"] .audio-course-page
  :is(.scenario-objective-card, .scenario-character-panel) h3 {
  font-size: 21px !important;
  line-height: 1.35 !important;
}

html[data-finyue-device="desktop"] .audio-course-page
  :is(.scenario-objective-card, .scenario-character-panel) :is(p, li) {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

html[data-finyue-device="desktop"] .audio-course-page
  :is(.scenario-character-name, .scenario-mode-picker b) {
  font-size: 16px !important;
}

html[data-finyue-device="desktop"] .audio-course-page
  :is(.scenario-character-series, .scenario-character-copy p, .scenario-mode-picker small) {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* Full-review compact extension and the single-line learning-mode command. */
html[data-finyue-device="desktop"] .audio-course-page
  .audio-mode-stage.is-collapsed {
  min-height: 50px !important;
}

html[data-finyue-device="desktop"] .audio-course-page .audio-mode-compact {
  min-height: 48px !important;
  grid-template-columns: minmax(246px, 1fr) 104px 190px 122px 154px !important;
}

html[data-finyue-device="desktop"] .audio-course-page
  .audio-mode-compact-identity {
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 8px !important;
}

html[data-finyue-device="desktop"] .audio-course-page
  .audio-mode-compact-identity img {
  width: 36px !important;
  height: 38px !important;
}

html[data-finyue-device="desktop"] .audio-course-page
  .audio-mode-compact-identity > span {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
}

html[data-finyue-device="desktop"] .audio-course-page
  .audio-mode-compact-identity b {
  font-size: 15px !important;
  white-space: nowrap !important;
}

html[data-finyue-device="desktop"] .audio-course-page
  .audio-mode-compact-identity em {
  display: inline !important;
  font-size: 11px !important;
}

html[data-finyue-device="desktop"] .audio-course-page
  .audio-mode-compact > button {
  min-height: 42px !important;
  padding: 7px 10px !important;
}

html[data-finyue-device="desktop"] .audio-course-page
  .audio-mode-compact > button span {
  font-size: 13px !important;
}

html[data-finyue-device="desktop"] .lesson-review-expanded-list > article {
  grid-template-columns: 68px minmax(0, 1fr) !important;
  gap: 6px 9px !important;
  padding: 8px !important;
}

html[data-finyue-device="desktop"] .lesson-review-expanded-copy h4 {
  font-size: 15px !important;
}

html[data-finyue-device="desktop"] .lesson-review-expanded-copy > p {
  margin: 1px 0 !important;
  font-size: 11px !important;
}

html[data-finyue-device="desktop"] .lesson-review-translation,
html[data-finyue-device="desktop"] .lesson-review-translation em {
  font-size: 12px !important;
}

html[data-finyue-device="desktop"] .lesson-review-extension {
  margin-top: 4px !important;
  padding: 4px 7px !important;
}

html[data-finyue-device="desktop"] .lesson-review-expanded-list
  article > footer {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
  align-items: center !important;
}

html[data-finyue-device="desktop"] .lesson-review-expanded-list
  article > footer button {
  min-height: 36px !important;
  font-size: 11px !important;
}

html[data-finyue-device="desktop"] .lesson-review-recommendations summary {
  min-height: 46px !important;
  font-size: 13px !important;
}

/* Simulation setup: characters can grow from two to four while role choice
   stays anchored to the character panel, and all final actions share one row. */
.audio-course-page .scenario-character-panel {
  display: flex !important;
  flex-direction: column;
  min-width: 0;
}

.audio-course-page .scenario-character-panel > .scenario-character-list {
  flex: 1 1 auto;
  align-content: start;
  min-width: 0;
  min-height: 0;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.audio-course-page .scenario-character-panel > .scenario-role-picker {
  flex: 0 0 auto;
  margin-top: auto !important;
}

.audio-course-page .scenario-character-panel .scenario-role-picker > div {
  display: flex !important;
  flex-wrap: wrap;
  gap: 7px;
}

.audio-course-page .scenario-character-panel .scenario-role-picker button {
  flex: 0 1 auto;
  max-width: 100%;
}

@media (min-width: 761px) {
  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-character-panel
    > .scenario-character-list[data-character-count="3"]
    > .scenario-character-card:last-child {
    grid-column: 1 / -1;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-setup-flow
    > .scenario-mode-picker {
    align-items: stretch;
    grid-template-columns:
      repeat(3, minmax(0, 1fr))
      minmax(250px, 1.4fr) !important;
    gap: 9px !important;
    margin-top: 9px !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-setup-flow
    > .scenario-mode-picker
    > button {
    min-height: 76px !important;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-setup-flow
    > .scenario-mode-picker
    > .scenario-start-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    grid-template-columns: 1fr !important;
    min-width: 0;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 0 26px !important;
    border: 1px solid #174f48 !important;
    border-radius: 14px !important;
    color: #fffdf3 !important;
    background:
      linear-gradient(110deg, #1c6c61 0%, #2f8173 66%, #9a7634 100%) !important;
    box-shadow:
      0 5px 0 #10443e,
      0 14px 28px rgba(18, 74, 66, 0.28) !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    letter-spacing: 0.03em;
  }

  html[data-finyue-device="desktop"]
    body
    .audio-course-page
    .scenario-setup-flow
    > .scenario-mode-picker
    > .scenario-start-button:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
  }
}

@media (max-width: 760px) {
  html[data-finyue-device="mobile"]
    body
    .audio-course-page
    .scenario-character-panel {
    display: flex !important;
    flex-direction: column;
  }

  html[data-finyue-device="mobile"]
    body
    .audio-course-page
    .scenario-character-panel
    > .scenario-character-list {
    flex: 1 1 auto;
  }

  html[data-finyue-device="mobile"]
    body
    .audio-course-page
    .scenario-character-panel
    > .scenario-role-picker.mobile-page-current {
    flex: 0 0 auto;
    margin-top: auto !important;
  }

  html[data-finyue-device="mobile"]
    body
    .audio-course-page
    .scenario-setup-flow
    > .scenario-mode-picker.mobile-page-current {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html[data-finyue-device="mobile"]
    body
    .audio-course-page
    .scenario-setup-flow
    > .scenario-mode-picker.mobile-page-current
    > .scenario-start-button.mobile-page-current {
    display: flex !important;
    align-items: center;
    justify-content: center;
    grid-column: 1 / -1;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding-inline: 18px !important;
    border-radius: 13px !important;
    color: #fffdf3 !important;
    background: linear-gradient(110deg, #1c6c61, #347f70 72%, #98743a) !important;
    box-shadow:
      0 4px 0 #10443e,
      0 10px 22px rgba(18, 74, 66, 0.24) !important;
    font-size: 15px !important;
    font-weight: 950 !important;
  }
}

/* Final roadmap information hierarchy: lesson identity, completion and mastery
   share one compact band before the 01-08 stage rail. */
html[data-finyue-device="desktop"] .audio-course-page .audio-learning-roadmap {
  grid-template-columns:
    minmax(250px, 1.15fr)
    minmax(600px, 3.8fr)
    minmax(205px, 1fr) !important;
}

html[data-finyue-device="desktop"] .audio-course-page
  .audio-learning-roadmap > header {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-content: center !important;
  gap: 4px 10px !important;
}

.audio-course-page .audio-roadmap-lesson-title {
  grid-column: 1 / -1;
  min-width: 0;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(33, 75, 69, 0.12);
}

.audio-course-page .audio-roadmap-lesson-title small,
.audio-course-page .audio-roadmap-lesson-title strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-course-page .audio-roadmap-lesson-title small {
  color: #6e7e79;
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.audio-course-page .audio-roadmap-lesson-title strong {
  margin-top: 1px;
  color: #173d39;
  font-size: 17px !important;
  line-height: 1.25;
}

/* First-arrival tutorial coachmarks: compact handwritten-note treatment that
   explains the current stage without covering the lesson itself. */
.audio-course-page .scene00-tutorial-coachmark {
  position: sticky;
  top: 76px;
  z-index: 18;
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(360px, 1.25fr) 38px;
  gap: 18px;
  align-items: center;
  width: min(1180px, calc(100% - 28px));
  margin: 10px auto 18px;
  padding: 16px 16px 16px 20px;
  border: 1px solid #d5bd77;
  border-radius: 18px;
  color: #173f39;
  background:
    linear-gradient(118deg, #fff8dcf7, #fffef7f7 58%, #edf7f2f7),
    #fffdf4;
  box-shadow: 0 14px 34px #173f3926, 0 3px 0 #c59d4938;
  backdrop-filter: blur(12px);
}

.audio-course-page .scene00-tutorial-coachmark::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 48px;
  width: 14px;
  height: 14px;
  border-top: 1px solid #d5bd77;
  border-left: 1px solid #d5bd77;
  background: #fff9e4;
  transform: rotate(45deg);
}

.audio-course-page .scene00-tutorial-coachmark > div {
  display: grid;
  gap: 4px;
}

.audio-course-page .scene00-tutorial-coachmark > div > small {
  color: #98701f;
  font-size: 13px !important;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.audio-course-page .scene00-tutorial-coachmark > div > strong {
  font-size: 19px;
  line-height: 1.28;
}

.audio-course-page .scene00-tutorial-coachmark > div > p {
  margin: 0;
  color: #536b65;
  font-size: 15px;
  line-height: 1.55;
}

.audio-course-page .scene00-tutorial-coachmark > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.audio-course-page .scene00-tutorial-coachmark > ul > li {
  padding: 8px 11px;
  border: 1px solid #cadbd5;
  border-radius: 999px;
  color: #2d5b53;
  background: #ffffffcc;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.audio-course-page .scene00-tutorial-coachmark > button {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #cfdbd7;
  border-radius: 50%;
  color: #41635d;
  background: #fff;
  font-size: 23px !important;
  line-height: 1;
}

@media (max-width: 760px) {
  html[data-finyue-device="mobile"] .audio-course-page
    .scene00-tutorial-coachmark {
    top: 58px;
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 10px;
    width: calc(100% - 18px);
    margin-block: 8px 12px;
    padding: 13px 11px 13px 15px;
    border-radius: 15px;
  }

  html[data-finyue-device="mobile"] .audio-course-page
    .scene00-tutorial-coachmark > div > strong {
    font-size: 18px;
  }

  html[data-finyue-device="mobile"] .audio-course-page
    .scene00-tutorial-coachmark > div > p {
    font-size: 15px;
  }

  html[data-finyue-device="mobile"] .audio-course-page
    .scene00-tutorial-coachmark > ul {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  html[data-finyue-device="mobile"] .audio-course-page
    .scene00-tutorial-coachmark > ul > li {
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 14px;
  }

  /* Mobile review opens directly on the category controls and first playable
     card; the desktop summary remains useful but costs a full phone screen. */
  html[data-finyue-device="mobile"] .audio-course-page
    .lesson-review-library-heading {
    display: none !important;
  }
}

/* Final lesson command hierarchy: the compact strip is only a mode control,
   while completion, the eight stages and mastery share one logical row. */
.audio-course-page .audio-mode-switch-hint {
  display: flex;
  align-items: center;
  min-width: 0;
  color: #61756f;
  font-size: 14px !important;
  font-weight: 800;
  white-space: nowrap;
}

.audio-course-page .audio-mode-compact > label,
.audio-course-page .audio-mode-compact > label > select {
  width: 100%;
  min-width: 0;
}

.audio-course-page .audio-mode-compact > label > select {
  height: 46px !important;
  min-height: 46px !important;
  padding-block: 8px !important;
  line-height: 1.35 !important;
}

.audio-course-page .audio-course-directory-link {
  min-height: 48px !important;
  padding-inline: 18px !important;
  font-size: 16px !important;
}

html[data-finyue-device="desktop"]
  body
  .audio-course-page
  .audio-mode-stage.is-collapsed
  .audio-mode-compact {
  grid-template-columns:
    minmax(150px, 0.58fr)
    minmax(250px, 1fr)
    minmax(150px, 1fr)
    minmax(178px, 0.68fr) !important;
}

html[data-finyue-device="desktop"]
  body
  .audio-course-page
  .audio-mode-stage.is-collapsed
  + .audio-learning-roadmap {
  grid-template-columns:
    minmax(150px, 0.72fr)
    minmax(620px, 4fr)
    minmax(220px, 1.08fr) !important;
  gap: 10px !important;
  padding: 8px 10px !important;
}

html[data-finyue-device="desktop"]
  body
  .audio-course-page
  .audio-mode-stage.is-collapsed
  + .audio-learning-roadmap
  > header
  > span {
  display: block !important;
  font-size: 14px !important;
}

html[data-finyue-device="desktop"]
  body
  .audio-course-page
  .audio-mode-stage.is-collapsed
  + .audio-learning-roadmap
  > header
  > small {
  display: none !important;
}

/* Simulation copy has to stay readable even where older compact selectors
   carry greater specificity.  Height is preserved so two-to-four characters
   can grow while the role picker remains anchored at the panel bottom. */
html[data-finyue-device="desktop"] body .audio-course-page
  .scenario-objective-card :is(p, li),
html[data-finyue-device="desktop"] body .audio-course-page
  .scenario-character-panel
  .scenario-character-card
  :is(b, small, p, em) {
  font-size: 15px !important;
  line-height: 1.48 !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .scenario-character-panel .scenario-role-picker h3 {
  font-size: 16px !important;
}

/* Mission instructions and speaking controls keep a human reading size. */
.audio-course-page
  :is(
    .mission-v3-content,
    .mission-v3-listening,
    .mission-v3-speech-lab,
    .mission-mobile-scene-card,
    .mission-mobile-response-studio
  )
  :is(p, li, blockquote) {
  font-size: 16px !important;
  line-height: 1.55 !important;
}

.audio-course-page
  :is(
    .mission-v3-content,
    .mission-v3-listening,
    .mission-v3-speech-lab,
    .mission-mobile-scene-card,
    .mission-mobile-response-studio
  )
  small {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

@media (max-width: 760px) {
  html[data-finyue-device="mobile"]
    body
    .audio-course-page
    .audio-mode-compact {
    grid-template-columns: minmax(112px, 0.72fr) minmax(0, 1.28fr) !important;
    gap: 7px !important;
  }

  html[data-finyue-device="mobile"]
    body
    .audio-course-page
    .audio-mode-compact
    > .audio-course-directory-link {
    grid-column: 1 !important;
    grid-row: 1;
  }

  html[data-finyue-device="mobile"]
    body
    .audio-course-page
    .audio-mode-compact
    > label {
    grid-column: 2;
    grid-row: 1;
  }

  html[data-finyue-device="mobile"]
    body
    .audio-course-page
    .audio-mode-switch-hint {
    grid-column: 1;
    grid-row: 2;
    padding-left: 4px;
    font-size: 13px !important;
  }

  html[data-finyue-device="mobile"]
    body
    .audio-course-page
    .audio-mode-compact
    > button {
    grid-column: 2 !important;
    grid-row: 2;
    min-height: 46px !important;
    font-size: 16px !important;
  }

  .audio-course-page
    :is(
      .mission-v3-content,
      .mission-v3-listening,
      .mission-v3-speech-lab,
      .mission-mobile-scene-card,
      .mission-mobile-response-studio
    )
    :is(p, li, blockquote) {
    font-size: 15px !important;
  }
}

/* Pass 90z: keep the new scene/cockpit rules after every legacy pass. */
html[data-finyue-device="desktop"] body .audio-course-page .audio-scene-card {
  grid-template-areas:
    "scene-visual scene-identity"
    "scene-visual scene-copy"
    "scene-visual scene-tip" !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}
html[data-finyue-device="desktop"] body .audio-course-page .audio-scene-tip-grid {
  grid-area: scene-tip !important;
  grid-column: auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-self: end !important;
  overflow: visible !important;
}
html[data-finyue-device="desktop"] body .audio-course-page
  .audio-scene-tip-grid .audio-scene-hong-kong-tip {
  grid-area: auto !important;
  min-height: 92px !important;
  margin: 0 !important;
  display: block !important;
}
html[data-finyue-device="desktop"] body .audio-course-page
  .audio-scene-tip-grid .audio-scene-hong-kong-tip > span {
  white-space: normal !important;
  font-size: 10px !important;
}
html[data-finyue-device="desktop"] body .audio-course-page
  .audio-scene-tip-grid .audio-scene-hong-kong-tip > p {
  font-size: 12px !important;
  line-height: 1.42 !important;
}
html[data-finyue-device="desktop"] body .audio-course-page
  :is(.audio-learning-mastery, .audio-mode-progress) {
  min-height: 0 !important;
  padding: 6px 8px !important;
  display: block !important;
  gap: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html[data-finyue-device="desktop"] body .audio-course-page
  :is(.audio-learning-mastery, .audio-mode-progress) > i {
  position: relative !important;
  height: 30px !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #ede9fe, #dff7f2, #fff1c4, #ffe2d8) !important;
}
html[data-finyue-device="desktop"] body .audio-course-page
  .audio-mode-progress > i {
  width: min(210px, 100%) !important;
  height: 24px !important;
}
html[data-finyue-device="desktop"] body .audio-course-page
  .audio-learning-mastery > i > em,
html[data-finyue-device="desktop"] body .audio-course-page
  .audio-mode-progress > i > span {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  height: 100% !important;
  background: linear-gradient(90deg, #7657d8 0%, #12a59c 42%, #efbd44 72%, #f2745f 100%) !important;
}
html[data-finyue-device="desktop"] body .audio-course-page
  :is(.audio-learning-mastery, .audio-mode-progress) > i > b {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #173f3a !important;
  font-size: 12px !important;
}

/* The roadmap is the single course-information layer: lesson identity and
   completion live together, followed by the eight-stage rail and mastery. */
html[data-finyue-device="desktop"] .audio-course-page .audio-learning-roadmap {
  grid-template-columns:
    minmax(250px, 1.15fr)
    minmax(600px, 3.8fr)
    minmax(205px, 1fr) !important;
}

html[data-finyue-device="desktop"] .audio-course-page
  .audio-learning-roadmap > header {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 4px 10px !important;
}

.audio-course-page .audio-roadmap-lesson-title {
  grid-column: 1 / -1;
  min-width: 0;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(40, 92, 82, .14);
}

.audio-course-page .audio-roadmap-lesson-title > small,
.audio-course-page .audio-roadmap-lesson-title > strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-course-page .audio-roadmap-lesson-title > small {
  color: #8a6a32;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.audio-course-page .audio-roadmap-lesson-title > strong {
  margin-top: 2px;
  color: #173f38;
  font-size: 17px !important;
  line-height: 1.3 !important;
}

/* 2026-08-04 final course readability contract.
   Teaching copy must remain comfortable at 100% zoom.  These desktop rules
   deliberately raise text without increasing the surrounding card geometry. */
html[data-finyue-device="desktop"] body .audio-course-page
  :is(
    .audio-mode-compact select,
    .audio-mode-compact button,
    .audio-course-directory-link,
    .audio-stage-nav button,
    .listening-options button,
    .ability-options button,
    .scenario-role-picker button,
    .scenario-mode-picker button,
    .mission-v3-content button,
    .lesson-review-library button
  ) {
  font-size: 16px !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  :is(
    .audio-scene-copy p,
    .audio-preview-card p,
    .sentence-card-copy p,
    .listening-challenge-card p,
    .scenario-objective-card p,
    .scenario-character-panel p,
    .scenario-dialogue-card p,
    .mission-v3-content p,
    .mission-v3-content li,
    .ability-test-card p,
    .lesson-review-expanded-copy p,
    .lesson-review-expanded-copy small
  ) {
  font-size: 16px !important;
  line-height: 1.58 !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .audio-learning-roadmap > header :is(span, small),
html[data-finyue-device="desktop"] body .audio-course-page
  .audio-learning-mastery :is(span, small) {
  font-size: 13px !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .audio-learning-roadmap > header b,
html[data-finyue-device="desktop"] body .audio-course-page
  .audio-learning-mastery > span b {
  font-size: 18px !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .audio-stage-nav button > i {
  font-size: 13px !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .audio-stage-nav button > span,
html[data-finyue-device="desktop"] body .audio-course-page
  :is(.listening-group-map, .ability-test-map) b {
  font-size: 15px !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .audio-scene-tip-grid .audio-scene-hong-kong-tip > span {
  font-size: 14px !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .audio-scene-tip-grid .audio-scene-hong-kong-tip > p {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  :is(
    .scenario-character-series,
    .scenario-character-tone,
    .scenario-mode-picker small,
    .listening-question-kind,
    .listening-question-count,
    .ability-test-card header small,
    .lesson-review-translation,
    .lesson-review-extension
  ) {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* Global course-page hierarchy, navigation and practice density. */
.audio-course-page .audio-mode-stage.is-collapsed {
  min-height: 58px !important;
  padding: 6px 10px !important;
}

.audio-course-page .audio-mode-compact {
  gap: 8px !important;
}

.audio-course-page .audio-mode-compact-identity img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain;
}

.audio-course-page .audio-mode-compact > button,
.audio-course-page .audio-course-directory-link {
  min-height: 44px !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

.audio-course-page .audio-course-directory-link {
  padding-inline: 16px !important;
}

.audio-course-page .audio-learning-roadmap > *,
.audio-course-page .audio-stage-nav > *,
.audio-course-page .audio-learning-mastery,
.audio-course-page .audio-mode-compact > * {
  min-width: 0;
}

.audio-course-page .audio-learning-mastery {
  display: grid;
  gap: 6px;
  align-content: center;
  padding: 8px 10px;
  border: 1px solid rgba(29, 96, 85, 0.19);
  border-radius: 12px;
  background: rgba(255, 253, 244, 0.82);
}

.audio-course-page .audio-learning-mastery > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: #294f49;
  font-size: 12px;
  font-weight: 900;
}

.audio-course-page .audio-learning-mastery > span b {
  color: #124f47;
  font-size: 17px;
}

.audio-course-page .audio-learning-mastery > i {
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #d9e5de;
}

.audio-course-page .audio-learning-mastery > i > em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1d6b5f, #d29b3d);
  transition: width 320ms ease;
}

.audio-course-page .audio-learning-mastery > small {
  color: #637570;
  font-size: 10px;
  line-height: 1.35;
}

html[data-finyue-device="desktop"] .audio-course-page .audio-mode-compact {
  grid-template-columns:
    minmax(250px, 1.3fr)
    minmax(135px, 0.55fr)
    minmax(190px, 0.72fr)
    minmax(150px, 0.6fr) !important;
}

html[data-finyue-device="desktop"] .audio-course-page .audio-learning-roadmap {
  display: grid !important;
  grid-template-columns:
    minmax(145px, 0.72fr)
    minmax(620px, 4fr)
    minmax(205px, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
}

html[data-finyue-device="desktop"] .audio-course-page .audio-learning-roadmap > header {
  position: static !important;
  align-self: stretch;
  display: grid !important;
  align-content: center;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  margin: 0 !important;
  padding: 7px 8px !important;
}

html[data-finyue-device="desktop"] .audio-course-page .audio-learning-roadmap > header small {
  grid-column: 1 / -1;
}

html[data-finyue-device="desktop"] .audio-course-page .audio-stage-nav {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(62px, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
}

html[data-finyue-device="desktop"] .audio-course-page .audio-stage-nav button {
  min-width: 0 !important;
  min-height: 68px !important;
  padding: 7px 4px !important;
}

/* Readable type scales shared by every course and every lesson. */
.audio-course-page :is(
    .audio-scene-copy,
    .audio-preview-card,
    .sentence-card-copy,
    .listening-challenge-card,
    .scenario-objective-card,
    .scenario-character-panel,
    .scenario-dialogue-card,
    .mission-v2-content,
    .mission-mobile-scene-card,
    .ability-test-card,
    .review-card
  ) h3,
.audio-course-page .lesson-review-expanded-copy h4 {
  font-size: clamp(22px, 2vw, 30px) !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere;
}

.audio-course-page .audio-term-grid > article h3 {
  font-size: clamp(28px, 2.5vw, 38px) !important;
  line-height: 1.2 !important;
}

.audio-course-page .sentence-card-main-line {
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height: 1.32 !important;
  overflow-wrap: anywhere;
}

.audio-course-page :is(
    .audio-scene-copy,
    .audio-preview-card,
    .listening-challenge-card,
    .scenario-objective-card,
    .scenario-character-panel,
    .scenario-dialogue-card,
    .ability-test-card
  ) :is(p, li, label),
.audio-course-page .listening-options button {
  font-size: max(16px, 1rem) !important;
  line-height: 1.55 !important;
}

/* Beginner subtitles remain a distinct, controllable support layer. */
.audio-course-page.mode-beginner .listening-transcript-toggle {
  min-height: 50px !important;
  border-width: 2px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

.audio-course-page .listening-mode-transcript {
  margin-top: 10px !important;
  padding: 16px !important;
  border-width: 2px !important;
}

.audio-course-page .listening-mode-transcript > strong {
  font-size: clamp(22px, 2.2vw, 30px) !important;
  line-height: 1.4 !important;
}

/* The learner's speaking action is the dominant mission control. */
.audio-course-page :is(.mission-v3-record-button, .mission-mobile-record-button) {
  min-height: 58px !important;
  padding: 12px 18px !important;
  font-size: 17px !important;
  font-weight: 950 !important;
}

.audio-course-page :is(.mission-v3-speech-stage, .mission-mobile-speech-stage) button {
  font-size: 15px !important;
}

/* Stable visual frames prevent lesson-specific source images from changing layout. */
.audio-course-page .mission-v3-opening-scene > figure > img {
  width: 100% !important;
  height: 230px !important;
  aspect-ratio: 16 / 9;
  object-fit: cover !important;
}

.audio-course-page .mission-mobile-briefing > figure > img {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
}

.audio-course-page .mission-v2-coach-card > img {
  width: 120px !important;
  height: 120px !important;
  object-fit: contain !important;
}

.audio-course-page .mission-mobile-coach-strip > img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
}

/* Simulation setup remains balanced with two, three or four characters. */
.audio-course-page .scenario-start-grid {
  min-height: 540px !important;
}

.audio-course-page :is(.scenario-objective-card, .scenario-character-panel) {
  padding: 20px !important;
}

.audio-course-page .scenario-character-name {
  font-size: 19px !important;
  line-height: 1.3 !important;
}

.audio-course-page .scenario-character-duty {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.audio-course-page .scenario-mode-picker button b {
  font-size: 18px !important;
}

/* Twelve checks form two rows of six on desktop, with a compact header. */
.audio-course-page .ability-test-compact-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px !important;
}

.audio-course-page .ability-test-compact-header h2 {
  margin: 0 0 3px;
  font-size: clamp(22px, 2vw, 30px) !important;
}

.audio-course-page .ability-test-compact-header p {
  margin: 0;
  color: #536b66;
  font-size: 14px;
}

html[data-finyue-device="desktop"] .audio-course-page .ability-test-map {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html[data-finyue-device="desktop"] .audio-course-page .ability-test-map > span {
  min-height: 62px !important;
  min-width: 0;
}

/* Review meanings share one line and all five actions stay visually distinct. */
.audio-course-page .lesson-review-translation {
  display: flex !important;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px !important;
}

.audio-course-page .lesson-review-expanded-list {
  max-height: min(65vh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.audio-course-page .review-action.play-normal {
  border-color: #31776c !important;
  color: #164f47 !important;
  background: #e7f4ee !important;
}

.audio-course-page .review-action.play-slow {
  border-color: #3e6f9f !important;
  color: #254f76 !important;
  background: #eaf2fb !important;
}

.audio-course-page .review-action.play-repeat {
  border-color: #9d7431 !important;
  color: #684714 !important;
  background: #fff5d9 !important;
}

.audio-course-page .review-action.rate-again {
  border-color: #b45a52 !important;
  color: #7b332d !important;
  background: #fff0ed !important;
}

.audio-course-page .review-action.rate-mastered {
  border-color: #39815d !important;
  color: #18583a !important;
  background: #e8f6ea !important;
}

.audio-course-page .review-action.is-active {
  box-shadow: inset 0 0 0 2px currentColor, 0 3px 9px rgba(29, 73, 64, 0.14) !important;
}

/* The stage rail already names 句型/聽辨.  Keep only useful progress here so
   learners reach the exercise without another repeated hero heading. */
.audio-course-page .sentence-card-progress-standalone,
.audio-course-page .listening-challenge-progressline {
  min-height: 42px;
  margin: 0 0 8px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: #355d56;
  border: 1px solid #d5e2dd;
  border-radius: 11px;
  background: linear-gradient(105deg, #f7fbf9, #fffaf0);
  font-size: 14px;
  font-weight: 900;
}

.audio-course-page .sentence-card-progress-standalone {
  display: grid;
  grid-template-columns: auto minmax(150px, 260px);
}

.audio-course-page .sentence-card-progress-standalone > i {
  height: 7px;
  border-radius: 99px;
  background: #dce7e3;
  overflow: hidden;
}

.audio-course-page .sentence-card-progress-standalone > i > span {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #28776b, #d4a844);
}

/* YOUR CANTONESE is a deliberate user action: its manual demo/recording
   controls need to be easy to hit, while automatic effects skip learner-demo. */
.audio-course-page :is(
    .mission-v3-speech-lab,
    .mission-v3-recorder,
    .mission-mobile-response-studio,
    .mission-mobile-speak
  ) button {
  min-height: 44px;
  font-size: 15px !important;
  font-weight: 850;
}

.audio-course-page :is(
    .mission-v3-speech-support,
    .mission-mobile-response-modes
  ) button {
  font-size: 15px !important;
}

/* Override the early compact desktop rule: all five review actions stay
   visibly different and readable at a real UI size. */
html[data-finyue-device="desktop"]
  .audio-course-page
  .lesson-review-expanded-list
  article
  > footer
  .review-action,
.audio-course-page .lesson-review-expanded-list .review-action {
  min-height: 42px !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
}

.audio-course-page .lesson-reward-inline-point {
  animation: course-point-pop 650ms cubic-bezier(0.18, 0.86, 0.25, 1.2) both;
}

@keyframes course-point-pop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.65);
  }
  55% {
    opacity: 1;
    transform: translateY(-3px) scale(1.16);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .audio-course-page .lesson-reward-inline-point {
    animation: none;
  }
}

@media (max-width: 760px) {
  html[data-finyue-device="mobile"] .audio-course-page .audio-mode-stage.is-collapsed {
    padding: 8px !important;
  }

  html[data-finyue-device="mobile"] .audio-course-page .audio-mode-compact {
    grid-template-columns: minmax(0, 1fr) minmax(126px, auto) !important;
    gap: 7px !important;
  }

  html[data-finyue-device="mobile"] .audio-course-page .audio-mode-compact-identity {
    grid-column: 1 / -1;
  }

  html[data-finyue-device="mobile"] .audio-course-page .audio-mode-compact > button {
    grid-column: 1 / -1;
  }

  html[data-finyue-device="mobile"] .audio-course-page .audio-learning-roadmap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 9px !important;
  }

  html[data-finyue-device="mobile"] .audio-course-page .audio-learning-roadmap > header {
    grid-column: 1;
    position: static !important;
    margin: 0 !important;
  }

  html[data-finyue-device="mobile"] .audio-course-page .audio-learning-mastery {
    grid-column: 2;
  }

  html[data-finyue-device="mobile"] .audio-course-page .audio-stage-nav {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(8, minmax(42px, 1fr)) !important;
    gap: 5px !important;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  html[data-finyue-device="mobile"] .audio-course-page .audio-stage-nav button {
    min-width: 42px !important;
  }

  .audio-course-page :is(
      .audio-scene-copy,
      .audio-preview-card,
      .sentence-card-copy,
      .listening-challenge-card,
      .scenario-objective-card,
      .scenario-character-panel,
      .scenario-dialogue-card,
      .mission-v2-content,
      .mission-mobile-scene-card,
      .ability-test-card,
      .review-card
    ) h3,
  .audio-course-page .lesson-review-expanded-copy h4 {
    font-size: 22px !important;
  }

  .audio-course-page .audio-term-grid > article h3 {
    font-size: 30px !important;
  }

  .audio-course-page .sentence-card-main-line {
    font-size: 28px !important;
  }

  .audio-course-page .scenario-start-grid {
    min-height: 0 !important;
  }

  .audio-course-page :is(.scenario-objective-card, .scenario-character-panel) {
    padding: 15px !important;
  }

  .audio-course-page .ability-test-compact-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding: 13px !important;
  }

  .audio-course-page .ability-test-progress {
    width: 100%;
  }

  .audio-course-page .ability-test-map {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .audio-course-page .ability-test-map > span {
    min-width: 0;
  }

  .audio-course-page :is(button, select, input, textarea) {
    max-width: 100%;
  }
}

/* Desktop final-precedence legibility: controls and teaching copy remain at
   a human reading size even when an earlier compact-layout rule is present. */
html[data-finyue-device="desktop"] body .audio-course-page
  :is(
    .audio-mode-compact select,
    .audio-mode-compact > button,
    .audio-mode-compact > button span,
    .audio-course-directory-link,
    .audio-stage-nav button > span,
    .listening-options button,
    .ability-options button,
    .scenario-role-picker button,
    .scenario-mode-picker button,
    .mission-v3-content button,
    .lesson-review-library button,
    .lesson-review-expanded-list .review-action
  ) {
  font-size: 15px !important;
  line-height: 1.35 !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  :is(
    .audio-scene-copy p,
    .audio-preview-card p,
    .sentence-card-copy p,
    .listening-challenge-card p,
    .scenario-objective-card p,
    .scenario-character-panel p,
    .scenario-dialogue-card p,
    .mission-v3-content p,
    .mission-v3-content li,
    .ability-test-card p,
    .lesson-review-expanded-copy p
  ) {
  font-size: 16px !important;
  line-height: 1.58 !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .audio-scene-tip-grid .audio-scene-hong-kong-tip > span,
html[data-finyue-device="desktop"] body .audio-course-page
  :is(.scenario-character-series, .scenario-character-tone, .scenario-mode-picker small) {
  font-size: 14px !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .audio-scene-tip-grid .audio-scene-hong-kong-tip > p,
html[data-finyue-device="desktop"] body .audio-course-page
  :is(.listening-group-map, .ability-test-map) b {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* Teaching UI readability floor. Earlier compact layouts still contain
   decorative 9–12px rules; these final scoped rules keep actual instructions,
   status text and controls readable without inflating unrelated site chrome. */
html[data-finyue-device="desktop"] .audio-course-page .audio-learning-roadmap {
  grid-template-columns:
    minmax(250px, 1.15fr)
    minmax(600px, 3.8fr)
    minmax(205px, 1fr) !important;
}

html[data-finyue-device="desktop"] .audio-course-page
  .audio-learning-roadmap > header {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-content: center !important;
  gap: 4px 10px !important;
}

.audio-course-page .audio-roadmap-lesson-title {
  grid-column: 1 / -1;
  min-width: 0;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(33, 75, 69, 0.12);
}

.audio-course-page .audio-roadmap-lesson-title :is(small, strong) {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-course-page .audio-roadmap-lesson-title small {
  color: #6e7e79;
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.audio-course-page .audio-roadmap-lesson-title strong {
  margin-top: 1px;
  color: #173d39;
  font-size: 17px !important;
  line-height: 1.25;
}

.audio-course-page
  :is(
    .audio-mode-stage,
    .audio-learning-roadmap,
    .audio-stage-heading,
    .audio-scene-grid,
    .audio-term-stage,
    .sentence-card-trainer,
    .listening-challenge-trainer,
    .scenario-start-grid,
    .scenario-stage,
    .mission-v3-stage,
    .ability-test,
    .lesson-review-stage
  )
  :is(small, label) {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.audio-course-page
  :is(
    .audio-stage-nav button,
    .audio-mode-stage button,
    .audio-mode-stage select,
    .sentence-card-trainer button,
    .listening-challenge-trainer button,
    .scenario-start-grid button,
    .scenario-stage button,
    .mission-v3-stage button,
    .ability-test button,
    .lesson-review-stage button
  ) {
  font-size: 15px !important;
}

@media (max-width: 760px) {
  html[data-finyue-device="mobile"] .audio-course-page
    :is(
      .audio-mode-stage,
      .audio-learning-roadmap,
      .audio-stage-heading,
      .audio-scene-grid,
      .audio-term-stage,
      .sentence-card-trainer,
      .listening-challenge-trainer,
      .scenario-start-grid,
      .scenario-stage,
      .mission-v3-stage,
      .ability-test,
      .lesson-review-stage
    )
    :is(small, label) {
    font-size: 15px !important;
  }
}

/* Pass 90zz final cascade anchor. */
html[data-finyue-device="desktop"] body .audio-course-page .audio-scene-card {
  grid-template-areas: "scene-visual scene-identity" "scene-visual scene-copy" "scene-visual scene-tip" !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}
html[data-finyue-device="desktop"] body .audio-course-page .audio-scene-tip-grid {
  grid-area: scene-tip !important;
  grid-column: auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-self: end !important;
  overflow: visible !important;
}
html[data-finyue-device="desktop"] body .audio-course-page .audio-scene-tip-grid .audio-scene-hong-kong-tip {
  grid-area: auto !important;
  min-height: 92px !important;
  margin: 0 !important;
  display: block !important;
}
html[data-finyue-device="desktop"] body .audio-course-page .audio-scene-tip-grid .audio-scene-hong-kong-tip > span {
  white-space: normal !important;
  font-size: 10px !important;
}
html[data-finyue-device="desktop"] body .audio-course-page .audio-scene-tip-grid .audio-scene-hong-kong-tip > p {
  font-size: 12px !important;
  line-height: 1.42 !important;
}
html[data-finyue-device="desktop"] body .audio-course-page :is(.audio-learning-mastery, .audio-mode-progress) {
  min-height: 0 !important;
  padding: 6px 8px !important;
  display: block !important;
  gap: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html[data-finyue-device="desktop"] body .audio-course-page :is(.audio-learning-mastery, .audio-mode-progress) > i {
  position: relative !important;
  height: 30px !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #ede9fe, #dff7f2, #fff1c4, #ffe2d8) !important;
}
html[data-finyue-device="desktop"] body .audio-course-page .audio-mode-progress > i {
  width: min(210px, 100%) !important;
  height: 24px !important;
}
html[data-finyue-device="desktop"] body .audio-course-page :is(.audio-learning-mastery, .audio-mode-progress) > i > b {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #173f3a !important;
  font-size: 12px !important;
}
/* Scene-specific mission playbook: expose the real incoming line and the
   sentence that moves each lesson's situation forward. */
.audio-course-page .mission-situation-playbook {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #c7dcd5;
  border-radius: 22px;
  background: #f7fbf9;
}

.audio-course-page .mission-situation-playbook > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.audio-course-page .mission-situation-playbook > header small {
  color: #1e6b61;
  font-size: 13px !important;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.audio-course-page .mission-situation-playbook > header h4 {
  max-width: 540px;
  margin: 0;
  color: #345f58;
  font-size: 16px;
  line-height: 1.45;
  text-align: right;
}

.audio-course-page .mission-situation-playbook > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.audio-course-page .mission-situation-playbook article {
  display: grid;
  gap: 9px;
  padding: 15px;
  border: 1px solid #d4e2dd;
  border-left: 5px solid #2e7c70;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 18px #173f3912;
}

.audio-course-page .mission-situation-playbook article:nth-child(2n) {
  border-left-color: #d49b39;
}

.audio-course-page .mission-situation-playbook article > span {
  color: #49716a;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
}

.audio-course-page .mission-situation-playbook article p {
  display: grid;
  gap: 3px;
  margin: 0;
  color: #234841;
  font-size: 15px;
  line-height: 1.5;
}

.audio-course-page .mission-situation-playbook article p small,
.audio-course-page .mission-situation-playbook article blockquote small {
  display: block;
  color: #789089;
  font-size: 11px !important;
  font-weight: 850;
}

.audio-course-page .mission-situation-playbook article blockquote {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #eadcae;
  border-radius: 12px;
  color: #173f39;
  background: #fff9e8;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
}

.audio-course-page .mission-situation-playbook article footer {
  color: #687e78;
  font-size: 12px;
  line-height: 1.45;
}

.audio-course-page .mission-mobile-situation-playbook {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid #cbded8;
  border-radius: 16px;
  background: #f7fbf9;
}

.audio-course-page .mission-mobile-situation-playbook > header {
  display: grid;
  gap: 2px;
}

.audio-course-page .mission-mobile-situation-playbook > header small {
  color: #1e6b61;
  font-size: 11px !important;
  font-weight: 950;
}

.audio-course-page .mission-mobile-situation-playbook > header b {
  color: #385f58;
  font-size: 13px;
  line-height: 1.35;
}

.audio-course-page .mission-mobile-situation-playbook > div {
  display: grid;
  gap: 7px;
}

.audio-course-page .mission-mobile-situation-playbook article {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
  border: 1px solid #d5e3de;
  border-radius: 12px;
  background: #fff;
}

.audio-course-page .mission-mobile-situation-playbook article > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  color: #fff;
  background: #2e7c70;
  font-size: 12px;
  font-weight: 950;
}

.audio-course-page .mission-mobile-situation-playbook article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.audio-course-page .mission-mobile-situation-playbook article small {
  overflow: hidden;
  color: #66817a;
  font-size: 10px !important;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-course-page .mission-mobile-situation-playbook article p,
.audio-course-page .mission-mobile-situation-playbook article b {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.audio-course-page .mission-mobile-situation-playbook article p {
  color: #60746f;
}

.audio-course-page .mission-mobile-situation-playbook article b {
  color: #173f39;
}

/* Pass 95: compact eight-stage cockpit, stable progress feedback and aligned
   sentence actions. The progress fill never scales or rewinds during +1. */
html[data-finyue-device="desktop"] body .audio-course-page .audio-learning-roadmap {
  grid-template-columns: 88px minmax(600px, 1fr) minmax(205px, .34fr) !important;
}

.audio-course-page .audio-learning-roadmap > header {
  position: relative !important;
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center !important;
  min-width: 0 !important;
}

.audio-course-page .audio-roadmap-completion-pill {
  position: relative !important;
  min-width: 58px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  overflow: hidden;
  border: 1px solid rgba(20, 87, 77, .52) !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #267d6d 0%, #195c57 58%, #244d5c 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 5px 12px rgba(24, 78, 70, .18) !important;
  font-size: 18px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1 !important;
  white-space: nowrap;
}

.audio-course-page .audio-roadmap-completion-pill::before {
  content: "";
  position: absolute;
  top: 2px;
  right: 8px;
  left: 8px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  pointer-events: none;
}

.audio-course-page .audio-roadmap-completion-pill > i {
  display: inline-flex;
  align-items: center;
  color: #d9f4eb !important;
  font-size: 11px !important;
  font-weight: 850;
  line-height: 1 !important;
  opacity: .88;
}

.audio-course-page .lesson-reward-inline-point {
  position: absolute !important;
  z-index: 4;
  top: -10px;
  right: -6px;
  margin: 0 !important;
  pointer-events: none;
}

.audio-course-page .audio-learning-mastery {
  position: relative;
}

.audio-course-page .audio-learning-mastery > i > em {
  transform: none !important;
  animation: none !important;
  transition: width 420ms cubic-bezier(.22, .8, .25, 1) !important;
}

.audio-course-page .audio-learning-mastery.is-changing > i::after {
  opacity: 1;
  animation: finyue-mastery-sheen 780ms ease-out both;
}

.audio-course-page .audio-learning-mastery > output {
  position: absolute;
  z-index: 5;
  right: 7px;
  bottom: calc(100% + 5px);
  width: max-content;
  padding: 5px 9px;
  border: 1px solid #d7c16d;
  border-radius: 999px;
  color: #5f4511;
  background: #fff8d8;
  box-shadow: 0 8px 18px rgba(79, 57, 17, .16);
  font-size: 11px;
  font-weight: 950;
  animation: finyue-mastery-label 1.65s ease both;
  pointer-events: none;
}

@keyframes finyue-mastery-sheen {
  0% { transform: translateX(-115%); opacity: 0; }
  25% { opacity: .85; }
  100% { transform: translateX(115%); opacity: 0; }
}

@keyframes finyue-mastery-label {
  0% { opacity: 0; transform: translateY(5px); }
  18%, 75% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}

.audio-course-page .scene00-tutorial-coachmark > ul {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.audio-course-page .scene00-tutorial-coachmark > ul > li {
  display: grid;
  place-items: center;
  min-height: 38px;
  padding: 7px 9px;
  border-radius: 11px;
  text-align: center;
}

.audio-course-page .sentence-card-support-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start !important;
  gap: 10px !important;
  width: 100%;
}

.audio-course-page .sentence-card-support-actions .sentence-card-meaning {
  width: min(100%, 520px) !important;
  min-width: 0 !important;
}

.audio-course-page .sentence-card-support-actions .sentence-card-favorite-actions {
  justify-self: end;
  margin-left: auto !important;
}

.audio-course-page .sentence-card-support-actions .sentence-favorite-button {
  min-width: 120px;
  min-height: 43px !important;
  border: 1px solid #1d6d62 !important;
  border-radius: 11px !important;
  color: #fff !important;
  background: #1d6d62 !important;
  box-shadow: 0 7px 16px rgba(29, 109, 98, .18) !important;
}

html[data-finyue-device="desktop"] body .audio-course-page .scenario-objective-image {
  height: 150px !important;
  margin: 11px 0 13px !important;
  border-radius: 14px !important;
}

@media (prefers-reduced-motion: reduce) {
  .audio-course-page .audio-learning-mastery.is-changing > i::after,
  .audio-course-page .audio-learning-mastery > output {
    animation: none !important;
  }
}

/* Pass 95: compact course voice selector between directory and mode. */
html[data-finyue-device="desktop"] body .audio-course-page
  .audio-mode-stage.is-collapsed .audio-mode-compact {
  grid-template-columns:
    minmax(142px, .48fr)
    minmax(224px, .78fr)
    minmax(218px, .78fr)
    minmax(132px, .48fr)
    minmax(174px, .62fr) !important;
  column-gap: 6px !important;
}

.audio-course-page .audio-mode-compact > .audio-voice-select,
.audio-course-page .audio-mode-compact > .audio-learning-mode-select {
  width: 100%;
  min-width: 0;
}

.audio-course-page .audio-mode-compact > .audio-voice-select > select {
  width: 100%;
  min-width: 0;
  color: #194f48;
  border-color: #9cc8bb !important;
  background: linear-gradient(135deg, #f0fbf7, #fff9e8) !important;
  font-weight: 900;
  padding-inline: 13px 34px !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .audio-mode-compact > button {
  height: 46px !important;
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding-block: 0 !important;
  line-height: 1 !important;
}

html[data-finyue-device="desktop"] body .audio-course-page
  .audio-mode-compact > button > span,
html[data-finyue-device="desktop"] body .audio-course-page
  .audio-mode-compact > button > i {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 0 !important;
  line-height: 1 !important;
}

@media (max-width: 760px) {
  html[data-finyue-device="mobile"] body .audio-course-page
    .audio-mode-compact {
    grid-template-columns: minmax(112px, .72fr) minmax(0, 1.28fr) !important;
    grid-template-rows: auto auto !important;
  }

  html[data-finyue-device="mobile"] body .audio-course-page
    .audio-mode-compact > .audio-course-directory-link {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html[data-finyue-device="mobile"] body .audio-course-page
    .audio-mode-compact > .audio-voice-select {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html[data-finyue-device="mobile"] body .audio-course-page
    .audio-mode-compact > .audio-learning-mode-select {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html[data-finyue-device="mobile"] body .audio-course-page
    .audio-mode-compact > button {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html[data-finyue-device="mobile"] body .audio-course-page
    .audio-mode-compact > .audio-mode-switch-hint {
    display: none !important;
  }
}

/* Pass 94: vocabulary guidance and manual-play mastery feedback. */
.audio-course-page .audio-term-manual-navigation-hint {
  position: relative;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 12px 12px 15px;
}

.audio-course-page .audio-term-manual-navigation-hint > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.audio-course-page .audio-term-manual-navigation-hint > button {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(115, 84, 12, .32);
  border-radius: 50%;
  color: #684b0b;
  background: rgba(255, 255, 255, .7);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.audio-course-page .audio-term-grid > article {
  isolation: isolate;
}

.audio-course-page .audio-term-mastery-celebration {
  z-index: 8;
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: max-content;
  padding: 10px 15px;
  border: 2px solid #f0c34f;
  border-radius: 999px;
  color: #5f4210;
  background: rgba(255, 250, 219, .96);
  box-shadow: 0 14px 34px rgba(74, 52, 11, .24);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: finyue-term-mastered-pop 1.4s cubic-bezier(.2, .86, .28, 1) both;
}

.audio-course-page .audio-term-mastery-celebration b {
  font-size: 15px;
  font-weight: 950;
}

.audio-course-page .audio-term-mastery-celebration i {
  color: #e99d21;
  font-size: 15px;
  font-style: normal;
  animation: finyue-term-mastered-spark .72s ease-in-out infinite alternate;
}

.audio-course-page .audio-term-grid > article.is-mastery-celebrating {
  box-shadow: 0 0 0 3px rgba(240, 195, 79, .42), 0 18px 36px rgba(27, 103, 91, .16) !important;
}

@keyframes finyue-term-mastered-pop {
  0% { opacity: 0; transform: translate(-50%, -42%) scale(.72) rotate(-2deg); }
  18%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(.94); }
}

@keyframes finyue-term-mastered-spark {
  from { transform: rotate(-12deg) scale(.82); }
  to { transform: rotate(12deg) scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .audio-course-page .audio-term-mastery-celebration,
  .audio-course-page .audio-term-mastery-celebration i {
    animation: none !important;
  }
}

/* Pass 97: every tutorial coachmark is one compact, fixed-height line. */
.audio-course-page .scene00-tutorial-coachmark {
  grid-template-columns: minmax(0, 1fr) 32px !important;
  gap: 10px !important;
  box-sizing: border-box;
  height: 62px !important;
  min-height: 62px !important;
  margin-block: 8px 12px !important;
  padding: 8px 10px 8px 17px !important;
  overflow: hidden;
}

.audio-course-page .scene00-tutorial-coachmark > div {
  display: flex !important;
  align-items: baseline;
  gap: 11px !important;
  min-width: 0;
}

.audio-course-page .scene00-tutorial-coachmark > div > :is(small, strong, p) {
  margin: 0 !important;
  white-space: nowrap;
}

.audio-course-page .scene00-tutorial-coachmark > div > small {
  flex: 0 0 auto;
  font-size: 11px !important;
}

.audio-course-page .scene00-tutorial-coachmark > div > strong {
  flex: 0 0 auto;
  font-size: 16px !important;
}

.audio-course-page .scene00-tutorial-coachmark > div > p {
  min-width: 0;
  overflow: hidden;
  color: #597069;
  font-size: 13px !important;
  text-overflow: ellipsis;
}

.audio-course-page .scene00-tutorial-coachmark > ul {
  display: none !important;
}

.audio-course-page .scene00-tutorial-coachmark > button {
  width: 32px !important;
  height: 32px !important;
  font-size: 20px !important;
}

@media (max-width: 760px) {
  html[data-finyue-device="mobile"] .audio-course-page
    .scene00-tutorial-coachmark {
    height: 52px !important;
    min-height: 52px !important;
    padding-left: 12px !important;
  }

  html[data-finyue-device="mobile"] .audio-course-page
    .scene00-tutorial-coachmark > div {
    gap: 8px !important;
  }

  html[data-finyue-device="mobile"] .audio-course-page
    .scene00-tutorial-coachmark > div > small {
    font-size: 9px !important;
  }

  html[data-finyue-device="mobile"] .audio-course-page
    .scene00-tutorial-coachmark > div > strong {
    overflow: hidden;
    font-size: 14px !important;
    text-overflow: ellipsis;
  }

  html[data-finyue-device="mobile"] .audio-course-page
    .scene00-tutorial-coachmark > div > p {
    display: none;
  }
}