.language-course {
  --ink: #10151c;
  --ink-soft: #18212c;
  --panel: #202c39;
  --muted: #a8b3c2;
  --line: #3a4a5d;
  --jade: #68b9a1;
  --jade-dark: #287762;
  --cinnabar: #d9584b;
  --gold: #efc86b;
  --focus: #bce8dc;
}

.language-course .wordmark-han {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 900;
}

.language-course .setup-banner {
  background-color: #294454;
  background-image:
    linear-gradient(90deg, rgba(10, 17, 24, 0.35), rgba(10, 17, 24, 0.08)),
    url("/mandarin/mandarin-road.jpg");
}

.language-course .hanzi {
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
  font-family: Inter, "Noto Sans", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2.15rem, 8vw, 4.25rem);
  line-height: 1.14;
}

.language-course .pinyin {
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.language-course.latin-course .pinyin,
.language-course.latin-course .word-pronunciation > span {
  display: none;
}

.language-course .phrase-panel.has-breakdown {
  min-height: 350px;
}

.language-course .word-breakdown b {
  font-family: inherit;
  font-size: 1rem;
}

.language-course .word-pronunciation {
  min-height: 68px;
}

.language-course .vowel-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.language-course .guide-example-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.language-course .guide-example-grid button {
  min-height: 76px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 82%, black);
  color: inherit;
  text-align: left;
}

.language-course .guide-example-grid button b,
.language-course .guide-example-grid button span,
.language-course .guide-example-grid button small {
  display: block;
}

.language-course .guide-example-grid button span {
  margin-top: 4px;
}

.language-course .guide-example-grid button small {
  margin-top: 3px;
  color: var(--muted);
}

.english-course {
  --ink: #111722;
  --ink-soft: #1a2637;
  --panel: #233249;
  --muted: #adbbcf;
  --line: #405673;
  --jade: #7eb4e8;
  --jade-dark: #376fa4;
  --cinnabar: #d95658;
  --gold: #efca68;
  --focus: #bedfff;
}

.english-course .wordmark-han {
  background: linear-gradient(145deg, #244f8f 0 58%, #f5f1e6 59% 73%, #c8424a 74%);
  color: #fff;
}

.french-course {
  --ink: #111522;
  --ink-soft: #1b2234;
  --panel: #252e45;
  --muted: #afb7ca;
  --line: #46536f;
  --jade: #7d9fe3;
  --jade-dark: #3d5f9f;
  --cinnabar: #dd5960;
  --gold: #efca72;
  --focus: #c8d7ff;
}

.french-course .wordmark-han {
  background: linear-gradient(90deg, #3159a6 0 33%, #f4f1e8 33% 66%, #d2474f 66%);
  color: #17233b;
}

.japanese-course {
  --ink: #15131a;
  --ink-soft: #211d29;
  --panel: #2b2434;
  --muted: #b8adbf;
  --line: #51435c;
  --jade: #ef8794;
  --jade-dark: #a93f53;
  --cinnabar: #d94b5e;
  --gold: #f4c77d;
  --focus: #ffc3cb;
}

.japanese-course .wordmark-han {
  background: radial-gradient(circle, #c92f45 0 31%, #f5f0e7 32%);
  color: #35151b;
}

.portuguese-course {
  --ink: #101710;
  --ink-soft: #1a2519;
  --panel: #233022;
  --muted: #acb8a5;
  --line: #455840;
  --jade: #72b965;
  --jade-dark: #34752e;
  --cinnabar: #d45243;
  --gold: #f0cb56;
  --focus: #c8ebb8;
}

.portuguese-course .wordmark-han {
  background: linear-gradient(90deg, #18764b 0 40%, #d84438 40%);
  color: #fff7d5;
}

.korean-course {
  --ink: #10151c;
  --ink-soft: #182231;
  --panel: #202d3e;
  --muted: #a7b5c8;
  --line: #3d5069;
  --jade: #73aee8;
  --jade-dark: #2f659c;
  --cinnabar: #d94f5d;
  --gold: #efca77;
  --focus: #b8dcff;
}

.korean-course .wordmark-han {
  background: linear-gradient(145deg, #f4f1e8 0 43%, #cc3f50 44% 59%, #3e69b0 60%);
  color: #15243a;
}

.german-course {
  --ink: #16130d;
  --ink-soft: #242018;
  --panel: #2f291f;
  --muted: #b9ae99;
  --line: #554b39;
  --jade: #e5b747;
  --jade-dark: #8a6518;
  --cinnabar: #d24b3e;
  --gold: #f2ca55;
  --focus: #ffe59c;
}

.german-course .wordmark-han {
  background: linear-gradient(#181818 0 33%, #c83232 33% 66%, #e7bb3f 66%);
  color: #fff;
}

.arabic-course {
  --ink: #0e1817;
  --ink-soft: #172725;
  --panel: #1e3330;
  --muted: #a8bbb7;
  --line: #3c5a55;
  --jade: #71c1ad;
  --jade-dark: #287968;
  --cinnabar: #cf6550;
  --gold: #e8c56e;
  --focus: #bcebdd;
}

.arabic-course .wordmark-han {
  background: linear-gradient(145deg, #176b54 0 62%, #f0d17c 63%);
  color: #fff;
  font-size: 1rem;
}

.arabic-course .hanzi {
  direction: rtl;
  font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
  line-height: 1.35;
}

.arabic-course .word-breakdown b {
  direction: rtl;
  font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
  font-size: 1.25rem;
}

@media (max-width: 560px) {
  .language-course .hanzi,
  .language-course .phrase-panel.has-breakdown .hanzi {
    font-size: clamp(1.95rem, 9.5vw, 3rem);
  }

  .language-course .vowel-grid,
  .language-course .guide-example-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .language-course .vowel-grid button:last-child {
    grid-column: 1 / -1;
  }
}