/* Course pages share a quiet editorial language. All rules stay inside lesson content. */
body .shell .main.page-lesson #lesson-content {
  --lesson-ink: #263631;
  --lesson-copy: #46574e;
  --lesson-muted: #78867c;
  --lesson-line: #e3e9e1;
  --lesson-paper: #f7f9f4;
  --lesson-teal: #285849;
  --lesson-green: #eaf1e6;
  --lesson-red: #a35642;
  --accent: #285849;
  --accent-dark: #23493e;
  --blue: #285849;
  --red: #a35642;
  min-width: 0;
  color: var(--lesson-copy);
  container: lesson-content / inline-size;
  overflow-wrap: anywhere;
}

body .shell .main.page-lesson #lesson-content :is(.panel, .question, .vocab-card) {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--lesson-line);
  border-radius: 16px;
  box-shadow: none;
}

body .shell .main.page-lesson #lesson-content .panel {
  padding: clamp(24px, 4.4cqw, 40px);
  margin-bottom: 24px;
}

body .shell .main.page-lesson #lesson-content :is(h2, h3) {
  color: var(--lesson-ink);
  font-weight: 600;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

body .shell .main.page-lesson #lesson-content h2 {
  font-size: 24px;
  line-height: 1.55;
}

body .shell .main.page-lesson #lesson-content h3 {
  font-size: 18px;
  line-height: 1.7;
}

body .shell .main.page-lesson #lesson-content .panel > .eyebrow {
  display: none;
}

body .shell .main.page-lesson #lesson-content .panel > .eyebrow + h2 {
  margin-top: 0 !important;
}

body .shell .main.page-lesson #lesson-content .panel > p {
  color: var(--lesson-copy);
  font-size: 15px;
  line-height: 1.95;
  margin-top: 14px;
}

body .shell .main.page-lesson #lesson-content :is(.muted, .en, .pinyin-line) {
  color: var(--lesson-muted);
}

body .shell .main.page-lesson #lesson-content .section-heading {
  align-items: center;
  gap: 14px;
  margin: 34px 0 20px;
}

body .shell .main.page-lesson #lesson-content .section-heading h2 {
  font-size: 20px;
}

body .shell .main.page-lesson #lesson-content .pill {
  max-width: 100%;
  min-width: 0;
  color: var(--lesson-muted);
  background: var(--lesson-paper);
  border: 1px solid var(--lesson-line);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.65;
}

body .shell .main.page-lesson #lesson-content .pill:is(.accent, .blue) {
  color: var(--lesson-teal);
  background: var(--lesson-green);
  border-color: #dce6d7;
}

body .shell .main.page-lesson #lesson-content :is(input, select, textarea) {
  max-width: 100%;
  min-width: 0;
  color: var(--lesson-ink);
  background: #fff;
  border: 1px solid #dce4d9;
  border-radius: 10px;
  box-shadow: none;
  outline: none;
  font: inherit;
}

body .shell .main.page-lesson #lesson-content :is(input, select, textarea):is(:focus, :focus-visible) {
  border-color: #dce4d9;
  box-shadow: none;
  outline: none;
}

body .shell .main.page-lesson #lesson-content :is(input, textarea)::placeholder {
  color: #929b91;
}

body .shell .main.page-lesson #lesson-content :is(.panel, .question, .vocab-card):focus-within {
  box-shadow: none;
  outline: none;
}

/* A readable Chinese text column, with annotation and translation as supporting layers. */
body .shell .main.page-lesson #lesson-content .lesson-body {
  padding: clamp(24px, 5.5cqw, 48px);
}

body .shell .main.page-lesson #lesson-content .article-meta {
  gap: 9px;
  margin: 18px 0 24px;
}

body .shell .main.page-lesson #lesson-content .article-meta .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 10px;
}

body .shell .main.page-lesson #lesson-content .article-meta .pill .icon {
  width: 14px;
  height: 14px;
}

body .shell .main.page-lesson #lesson-content .article-meta button.pill {
  color: var(--lesson-teal);
  background: #fff;
}

body .shell .main.page-lesson #lesson-content .article-figure {
  margin: 28px 0 36px;
  border: 1px solid var(--lesson-line);
  border-radius: 12px;
  background: #fff;
}

body .shell .main.page-lesson #lesson-content .article-figure .lesson-visual.large {
  aspect-ratio: 16 / 8;
  min-height: 0;
  max-height: 390px;
  background: #fff;
}

body .shell .main.page-lesson #lesson-content :is(.topic-image, .article-figure img, .exercise-image img) {
  object-fit: contain;
  object-position: center;
  filter: none;
}

body .shell .main.page-lesson #lesson-content .article-figure figcaption {
  padding: 12px 16px;
  border-top: 1px solid var(--lesson-line);
  color: var(--lesson-copy);
  background: var(--lesson-paper);
  font-size: 12px;
  line-height: 1.75;
}

body .shell .main.page-lesson #lesson-content .article-figure figcaption span {
  margin-top: 3px;
  color: var(--lesson-muted);
  font-size: 10px;
  line-height: 1.7;
}

body .shell .main.page-lesson #lesson-content .visual-explore {
  top: 14px;
  right: 14px;
  padding: 6px 10px;
  color: var(--lesson-teal);
  background: #fffffff0;
}

body .shell .main.page-lesson #lesson-content .article-paragraph {
  max-width: 44em;
  margin: 30px auto;
}

body .shell .main.page-lesson #lesson-content .zh-text {
  max-width: 42em;
  color: var(--lesson-ink);
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: .025em;
  line-height: 2.25;
  text-align: left;
  word-break: normal;
  overflow-wrap: break-word;
}

body .shell .main.page-lesson #lesson-content .pinyin-line {
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .025em;
  overflow-wrap: anywhere;
}

body .shell .main.page-lesson #lesson-content .article-paragraph > .pinyin-line {
  margin-top: 12px;
  color: #748175;
}

body .shell .main.page-lesson #lesson-content .translation {
  max-width: 72ch;
  margin-top: 14px;
  color: var(--lesson-muted);
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

body .shell .main.page-lesson #lesson-content .glossary-word {
  padding: 0 1px;
  color: var(--lesson-teal);
  border-bottom: 1px dotted #9eb299;
  border-radius: 2px;
  background: transparent;
  font: inherit;
  line-height: inherit;
  transition: background-color .18s ease;
}

body .shell .main.page-lesson #lesson-content .glossary-word:hover {
  background: var(--lesson-green);
}

body .shell .main.page-lesson #lesson-content .glossary-word rt {
  color: #83917f;
  font-family: inherit;
  font-size: .5em;
  font-weight: 400;
  letter-spacing: 0;
}

body .shell .main.page-lesson #lesson-content .source-links {
  padding-top: 20px;
  margin-top: 36px;
  color: var(--lesson-muted);
  border-top: 1px solid var(--lesson-line);
  font-size: 12px;
  line-height: 1.9;
}

body .shell .main.page-lesson #lesson-content .source-links summary {
  width: fit-content;
  color: var(--lesson-copy);
  cursor: pointer;
}

body .shell .main.page-lesson #lesson-content .source-links a {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 8px 0;
  color: var(--lesson-teal);
  overflow-wrap: anywhere;
}

/* Vocabulary reads as a set of study cards rather than small dashboard widgets. */
body .shell .main.page-lesson #lesson-content .vocab-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

body .shell .main.page-lesson #lesson-content .vocab-card {
  display: flex;
  flex-direction: column;
  padding: 25px 22px 18px;
  transition: border-color .2s ease, transform .2s ease;
}

body .shell .main.page-lesson #lesson-content .vocab-card:hover {
  border-color: #c4d2be;
  transform: translateY(-2px);
}

body .shell .main.page-lesson #lesson-content .vocab-title {
  gap: 10px;
  align-items: center;
}

body .shell .main.page-lesson #lesson-content .vocab-title strong {
  color: var(--lesson-ink);
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-size: 29px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .025em;
}

body .shell .main.page-lesson #lesson-content .vocab-title .pill {
  font-size: 10px;
  padding: 3px 7px;
}

body .shell .main.page-lesson #lesson-content .vocab-card .pinyin-line {
  margin: 9px 0 13px;
  font-size: 14px;
}

body .shell .main.page-lesson #lesson-content .tone-1 { color: #a17c42; }
body .shell .main.page-lesson #lesson-content .tone-2 { color: #4d7d82; }
body .shell .main.page-lesson #lesson-content .tone-3 { color: #6d8859; }
body .shell .main.page-lesson #lesson-content .tone-4 { color: #af6950; }

body .shell .main.page-lesson #lesson-content .vocab-card p {
  color: var(--lesson-copy);
  font-size: 14px;
  line-height: 1.9;
}

body .shell .main.page-lesson #lesson-content .vocab-card .vocab-example {
  margin-top: 16px;
  color: var(--lesson-ink);
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-size: 15px;
  line-height: 1.95;
}

body .shell .main.page-lesson #lesson-content .vocab-card p.muted {
  color: var(--lesson-muted);
  font-size: 12px !important;
  line-height: 1.9;
  margin-bottom: 18px;
}

body .shell .main.page-lesson #lesson-content .vocab-actions {
  gap: 8px;
  padding-top: 13px;
  margin-top: 20px;
  border-top: 1px solid var(--lesson-line);
}

body .shell .main.page-lesson #lesson-content .vocab-card > p:last-of-type {
  margin-bottom: auto;
}

body .shell .main.page-lesson #lesson-content .vocab-actions button {
  min-height: 38px;
  padding: 5px 0;
  color: var(--lesson-teal);
  font-size: 12px;
  line-height: 1.7;
}

body .shell .main.page-lesson #lesson-content .vocab-actions .icon {
  width: 15px;
  height: 15px;
}

body .shell .main.page-lesson #lesson-content #match-container {
  min-width: 0;
  margin-top: 20px;
}

body .shell .main.page-lesson #lesson-content .matching {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(36px, 13cqw, 116px);
  padding: 16px 0;
}

body .shell .main.page-lesson #lesson-content .match-column {
  min-width: 0;
  gap: 17px;
}

body .shell .main.page-lesson #lesson-content .match-item {
  min-width: 0;
  min-height: 66px;
  padding: 14px 16px;
  color: var(--lesson-copy);
  background: #fff;
  border: 1px solid #dce4d9;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.7;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

body .shell .main.page-lesson #lesson-content .match-item.left {
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-size: 19px;
}

body .shell .main.page-lesson #lesson-content .match-item:hover {
  border-color: #b3c7a8;
}

body .shell .main.page-lesson #lesson-content .match-item.selected {
  color: var(--lesson-teal);
  background: #eef4e9;
  border-color: #729c65;
}

body .shell .main.page-lesson #lesson-content .match-item.matched {
  color: #547445;
  background: #f0f5e9;
  border-color: #bdd2aa;
}

body .shell .main.page-lesson #lesson-content .match-item.shake {
  color: var(--lesson-red);
  background: #fcf2ec;
  border-color: #dab9a8;
}

body .shell .main.page-lesson #lesson-content .match-line {
  stroke: #7ba065;
  stroke-width: 2;
}

body .shell .main.page-lesson #lesson-content .match-line.error {
  stroke: var(--lesson-red);
}

body .shell .main.page-lesson #lesson-content .match-result {
  color: var(--lesson-teal);
  font-size: 13px !important;
  line-height: 1.85;
}

body .shell .main.page-lesson #lesson-content .match-save {
  min-height: 20px;
  color: var(--lesson-muted);
  font-size: 11px;
  line-height: 1.8;
}

/* Grammar: one rule, a formula, a worked example. */
body .shell .main.page-lesson #lesson-content .grammar-formula {
  margin: 24px 0;
  padding: 22px 24px;
  color: var(--lesson-teal);
  background: #f0f5e9;
  border: 1px solid #e2ebd7;
  border-radius: 10px;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .015em;
  overflow-wrap: anywhere;
}

body .shell .main.page-lesson #lesson-content .english-tip {
  padding: 18px 21px;
  margin: 24px 0;
  color: var(--lesson-copy);
  background: #faf9f3;
  border-left: 2px solid #d3bd7e;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 1.9;
}

body .shell .main.page-lesson #lesson-content .english-tip strong {
  color: #8b805e;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.7;
  margin-bottom: 8px;
}

body .shell .main.page-lesson #lesson-content .grammar-example {
  padding: 12px 0 12px 18px;
  margin-top: 24px;
  color: var(--lesson-ink);
  border-left: 2px solid #91ab7a;
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-size: 20px !important;
  line-height: 2;
  overflow-wrap: anywhere;
}

body .shell .main.page-lesson #lesson-content .grammar-example button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 36px;
  height: 36px;
  padding: 8px;
  color: var(--lesson-teal);
  background: transparent;
  border-radius: 8px;
}

body .shell .main.page-lesson #lesson-content .grammar-example button:hover {
  background: var(--lesson-green);
}

body .shell .main.page-lesson #lesson-content .grammar-example + .translation {
  margin: 12px 0 24px 20px;
}

body .shell .main.page-lesson #lesson-content .link-btn {
  color: var(--lesson-teal);
  font-size: 13px;
  line-height: 1.8;
}

/* Folded questions reveal answers with space to read, including the palace map. */
body .shell .main.page-lesson #lesson-content .scaffolds {
  padding: 17px 19px;
  margin: 18px 0;
  color: var(--lesson-copy);
  background: var(--lesson-paper);
  border: 1px solid var(--lesson-line);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.95;
  overflow-wrap: anywhere;
}

body .shell .main.page-lesson #lesson-content .scaffolds summary {
  color: var(--lesson-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.9;
  cursor: pointer;
}

body .shell .main.page-lesson #lesson-content .scaffolds summary::marker {
  color: #87a171;
  font-size: .8em;
}

body .shell .main.page-lesson #lesson-content .scaffolds[open] > summary {
  padding-bottom: 13px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--lesson-line);
}

body .shell .main.page-lesson #lesson-content .scaffolds > :is(p, div) {
  color: var(--lesson-copy);
  font-size: 14px;
  line-height: 1.95;
}

body .shell .main.page-lesson #lesson-content .scaffolds > div + div {
  margin-top: 8px;
}

body .shell .main.page-lesson #lesson-content .teaching-diagram svg {
  width: 100%;
  max-height: 300px;
  margin: 16px 0 12px;
  background: #fff;
  border-radius: 8px;
}

body .shell .main.page-lesson #lesson-content .teaching-diagram > p {
  color: var(--lesson-muted);
  font-size: 12px;
}

body .shell .main.page-lesson #lesson-content .palace-map {
  grid-template-columns: minmax(0, 1fr) minmax(0, 190px) minmax(0, 1fr);
  gap: 20px;
  padding: 27px 22px;
  margin: 24px 0;
  background: #faf9f2;
  border: 1px solid #ebe6d8;
  border-radius: 12px;
}

body .shell .main.page-lesson #lesson-content .palace-map .axis {
  min-width: 0;
  gap: 15px;
}

body .shell .main.page-lesson #lesson-content .palace-map .axis::before {
  background: #d8c990;
}

body .shell .main.page-lesson #lesson-content .map-building {
  min-width: 0;
  padding: 13px 10px;
  color: #6c5c35;
  background: #f3edd7;
  border: 1px solid #dcd0ac;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.7;
  transition: background-color .18s ease, border-color .18s ease;
}

body .shell .main.page-lesson #lesson-content .map-building:hover {
  background: #ece4c9;
  border-color: #c1b080;
  transform: none;
}

body .shell .main.page-lesson #lesson-content .map-building small {
  color: #918365;
  font-size: 10px;
  line-height: 1.55;
  margin-top: 4px;
}

body .shell .main.page-lesson #lesson-content .map-caption {
  min-width: 0;
  color: #918365;
  font-size: 11px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

/* Writing: generous paper, clear requirements and a consistent feedback report. */
body .shell .main.page-lesson #lesson-content .writing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

body .shell .main.page-lesson #lesson-content .writing-grid > * {
  min-width: 0;
}

body .shell .main.page-lesson #lesson-content .writing-grid .panel {
  padding: clamp(24px, 4cqw, 34px);
}

body .shell .main.page-lesson #lesson-content .writing-requirements {
  display: grid;
  gap: 11px;
  padding: 0;
  margin: 22px 0 25px;
  list-style: none;
}

body .shell .main.page-lesson #lesson-content .writing-requirements li {
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  color: var(--lesson-copy);
  font-size: 14px;
  line-height: 1.9;
}

body .shell .main.page-lesson #lesson-content .writing-requirements .icon {
  flex: 0 0 16px;
  width: 16px;
  height: 24px;
  color: #7f9b67;
}

body .shell .main.page-lesson #lesson-content label[for="writing-draft"] {
  display: block;
  margin-top: 26px;
  color: var(--lesson-ink);
  font-size: 15px;
  font-weight: 500;
}

body .shell .main.page-lesson #lesson-content #writing-draft {
  display: block;
  width: 100%;
  min-height: 320px;
  padding: 20px 22px;
  margin-top: 12px;
  resize: vertical;
  color: var(--lesson-ink);
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-size: 18px;
  line-height: 2.05;
  letter-spacing: .015em;
  background: #fff;
}

body .shell .main.page-lesson #lesson-content .writing-meter {
  gap: 8px 14px;
  margin: 12px 0 18px;
  color: var(--lesson-muted);
  font-size: 11px;
  line-height: 1.8;
  font-variant-numeric: tabular-nums;
}

body .shell .main.page-lesson #lesson-content .notice {
  padding: 16px 18px;
  color: var(--lesson-copy);
  background: var(--lesson-paper);
  border: 1px solid var(--lesson-line);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

body .shell .main.page-lesson #lesson-content #vocab-coverage {
  margin: 0 0 22px;
  color: #637553;
  background: #f2f6eb;
  border-color: #e2ebd8;
  font-size: 12px;
}

body .shell .main.page-lesson #lesson-content #writing-report .empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 235px;
  padding: 38px 24px !important;
  text-align: center;
  background: #fafbf7;
  border-style: dashed;
}

body .shell .main.page-lesson #lesson-content #writing-report .empty > .icon {
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  color: #a1b38d;
}

body .shell .main.page-lesson #lesson-content #writing-report .empty h3 {
  margin-bottom: 3px;
  font-size: 17px;
}

body .shell .main.page-lesson #lesson-content #writing-report .empty p {
  color: var(--lesson-muted);
  font-size: 13px;
}

body .shell .main.page-lesson #lesson-content .score-ring {
  width: 136px;
  height: 136px;
  margin: 28px auto 32px;
  background: conic-gradient(#80a364 calc(var(--score) * 1%), #edf1e7 0);
}

body .shell .main.page-lesson #lesson-content .score-ring > div {
  width: 117px;
  height: 117px;
  color: var(--lesson-teal);
  font-size: 39px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

body .shell .main.page-lesson #lesson-content .score-ring small {
  color: var(--lesson-muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 7px;
}

body .shell .main.page-lesson #lesson-content .dimension {
  padding: 0 0 17px;
  margin: 20px 0;
  border-bottom: 1px solid var(--lesson-line);
}

body .shell .main.page-lesson #lesson-content .dimension > div:first-child {
  gap: 12px;
  align-items: baseline;
  margin-bottom: 11px;
  color: var(--lesson-ink);
  font-size: 14px;
  line-height: 1.7;
}

body .shell .main.page-lesson #lesson-content .dimension strong {
  flex-shrink: 0;
  color: var(--lesson-teal);
  font-size: 13px;
  font-weight: 500;
}

body .shell .main.page-lesson #lesson-content .dimension small {
  color: var(--lesson-muted);
  font-size: 11px;
}

body .shell .main.page-lesson #lesson-content .dimension p {
  margin-top: 10px;
  color: var(--lesson-muted);
  font-size: 12px;
  line-height: 1.9;
}

body .shell .main.page-lesson #lesson-content .progress-bar {
  height: 5px;
  background: #edf1e7;
  border-radius: 5px;
  overflow: hidden;
}

body .shell .main.page-lesson #lesson-content .progress-bar i {
  background: #8cab73;
  border-radius: inherit;
}

body .shell .main.page-lesson #lesson-content .correction {
  padding: 18px 0;
  color: var(--lesson-muted);
  border-bottom: 1px solid var(--lesson-line);
  font-size: 14px;
  line-height: 1.95;
}

body .shell .main.page-lesson #lesson-content .correction del {
  color: #a26953;
  text-decoration-color: #c59983;
}

body .shell .main.page-lesson #lesson-content .correction ins {
  color: var(--lesson-teal);
  text-decoration: none;
}

body .shell .main.page-lesson #lesson-content .correction p.muted {
  margin-top: 8px;
  color: var(--lesson-muted);
  font-size: 12px !important;
}

/* Exercises offer broad tap targets and explicit answer states. */
body .shell .main.page-lesson #lesson-content .question {
  padding: clamp(24px, 4cqw, 34px);
  margin-bottom: 22px;
}

body .shell .main.page-lesson #lesson-content .question-head {
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
}

body .shell .main.page-lesson #lesson-content .question-num {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: #65814d;
  background: #eef4e6;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

body .shell .main.page-lesson #lesson-content .question h3 {
  margin: 0;
  color: var(--lesson-ink);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.85;
}

body .shell .main.page-lesson #lesson-content .options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body .shell .main.page-lesson #lesson-content .option {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 58px;
  padding: 15px 18px;
  color: var(--lesson-copy);
  background: #fff;
  border: 1px solid #dfe6dc;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.85;
  text-align: left;
  overflow-wrap: anywhere;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

body .shell .main.page-lesson #lesson-content .option:not([data-order-index])::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border: 1px solid #bfcbb7;
  border-radius: 50%;
}

body .shell .main.page-lesson #lesson-content .option:hover {
  background: #fafcf7;
  border-color: #b6cba6;
}

body .shell .main.page-lesson #lesson-content .option.selected {
  color: var(--lesson-teal);
  background: #eff5e8;
  border-color: #85a96a;
}

body .shell .main.page-lesson #lesson-content .option.correct {
  color: #547443;
  background: #f0f6e9;
  border-color: #a8c38e;
}

body .shell .main.page-lesson #lesson-content .option.wrong {
  color: var(--lesson-red);
  background: #fcf2ec;
  border-color: #d9b5a0;
}

body .shell .main.page-lesson #lesson-content .option:is(.selected, .correct)::before {
  border-color: #80a365;
  background: #80a365;
}

body .shell .main.page-lesson #lesson-content .option.wrong::before {
  border-color: #b88265;
  background: #b88265;
}

body .shell .main.page-lesson #lesson-content .options:has([data-order-index]) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

body .shell .main.page-lesson #lesson-content .option[data-order-index] {
  min-height: 44px;
  padding: 10px 15px;
  font-size: 14px;
  text-align: center;
}

body .shell .main.page-lesson #lesson-content .option:disabled {
  color: #a0ab99;
  background: #f5f7f1;
  border-color: #e7ece1;
  opacity: .65;
  cursor: default;
}

body .shell .main.page-lesson #lesson-content .order-answer {
  min-height: 72px;
  padding: 19px 21px;
  margin-bottom: 18px;
  color: var(--lesson-ink);
  background: var(--lesson-paper);
  border: 1px dashed #c8d6bb;
  border-radius: 10px;
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-size: 19px;
  letter-spacing: .04em;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

body .shell .main.page-lesson #lesson-content .question textarea {
  padding: 16px 18px;
  font-size: 16px;
  line-height: 1.9;
  resize: vertical;
}

body .shell .main.page-lesson #lesson-content .exercise-image {
  height: auto;
  aspect-ratio: 16 / 7;
  max-height: 280px;
  margin-bottom: 24px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--lesson-line);
  border-radius: 10px;
}

body .shell .main.page-lesson #lesson-content .exercise-image .lesson-visual {
  width: 100%;
  height: 100%;
  background: #fff;
}

body .shell .main.page-lesson #lesson-content .feedback {
  padding: 18px 21px;
  margin-top: 22px;
  color: #547443;
  background: #f2f6ec;
  border: 1px solid #e0ebd5;
  border-left: 3px solid #a5bf8b;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.95;
  overflow-wrap: anywhere;
}

body .shell .main.page-lesson #lesson-content .feedback strong {
  font-size: 14px;
  font-weight: 600;
}

body .shell .main.page-lesson #lesson-content .feedback.wrong {
  color: #975b43;
  background: #fcf5ee;
  border-color: #eddfd0;
  border-left-color: #cfaa87;
}

body .shell .main.page-lesson #lesson-content .feedback small {
  display: block;
  margin-top: 9px;
  color: inherit;
  font-size: 12px;
  line-height: 1.9;
  opacity: .85;
}

body .shell .main.page-lesson #lesson-content [id^="feedback-"] > .panel {
  padding: 25px;
  margin: 22px 0 0;
  border-color: #dbe7d0;
}

body .shell .main.page-lesson #lesson-content #practice-score .notice {
  margin-top: 22px;
  padding: 22px;
  color: var(--lesson-teal);
  background: #f2f6ec;
  border-color: #dfe9d5;
}

body .shell .main.page-lesson #lesson-content #practice-score strong {
  color: var(--lesson-teal);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

body .shell .main.page-lesson #lesson-content #practice-score p {
  margin-top: 6px;
  color: var(--lesson-muted);
  font-size: 13px;
  line-height: 1.9;
}

body .shell .main.page-lesson #lesson-content .notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* Layout follows the actual lesson column, including the desktop tools sidebar. */
@container lesson-content (min-width: 820px) {
  body .shell .main.page-lesson #lesson-content .writing-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: 22px;
  }

  body .shell .main.page-lesson #lesson-content .writing-grid .panel {
    padding: 28px;
  }

  body .shell .main.page-lesson #lesson-content #writing-report .empty {
    min-height: 315px;
  }
}

@container lesson-content (max-width: 730px) {
  body .shell .main.page-lesson #lesson-content .vocab-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .shell .main.page-lesson #lesson-content .options {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container lesson-content (max-width: 460px) {
  body .shell .main.page-lesson #lesson-content .vocab-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  body .shell .main.page-lesson #lesson-content :is(.panel, .lesson-body, .question, .writing-grid .panel) {
    padding: 22px 19px;
    border-radius: 12px;
    margin-bottom: 18px;
  }

  body .shell .main.page-lesson #lesson-content h2 {
    font-size: 22px;
  }

  body .shell .main.page-lesson #lesson-content .section-heading {
    margin: 28px 0 16px;
  }

  body .shell .main.page-lesson #lesson-content .section-heading h2 {
    font-size: 19px;
  }

  body .shell .main.page-lesson #lesson-content .panel > p {
    font-size: 14px;
  }

  body .shell .main.page-lesson #lesson-content .article-meta {
    gap: 7px;
    margin: 17px 0 20px;
  }

  body .shell .main.page-lesson #lesson-content .article-meta .pill {
    padding: 5px 8px;
    font-size: 10px;
  }

  body .shell .main.page-lesson #lesson-content .article-figure {
    margin: 23px 0 28px;
    border-radius: 10px;
  }

  body .shell .main.page-lesson #lesson-content .article-figure .lesson-visual.large {
    aspect-ratio: 4 / 3;
  }

  body .shell .main.page-lesson #lesson-content .article-figure figcaption {
    padding: 10px 12px;
    font-size: 11px;
  }

  body .shell .main.page-lesson #lesson-content .visual-explore {
    top: 10px;
    right: 10px;
    padding: 5px 8px;
    font-size: 9px;
  }

  body .shell .main.page-lesson #lesson-content .article-paragraph {
    margin: 26px 0;
  }

  body .shell .main.page-lesson #lesson-content .zh-text {
    font-size: 19px;
    line-height: 2.15;
    letter-spacing: .015em;
  }

  body .shell .main.page-lesson #lesson-content .translation {
    font-size: 13px;
    line-height: 1.9;
  }

  body .shell .main.page-lesson #lesson-content .vocab-card {
    padding: 23px 21px 15px;
  }

  body .shell .main.page-lesson #lesson-content .vocab-title strong {
    font-size: 28px;
  }

  body .shell .main.page-lesson #lesson-content .matching {
    column-gap: 34px;
    padding: 14px 0;
  }

  body .shell .main.page-lesson #lesson-content .match-column {
    gap: 15px;
  }

  body .shell .main.page-lesson #lesson-content .match-item {
    min-height: 68px;
    padding: 11px 9px;
    font-size: 12px;
    line-height: 1.75;
    border-radius: 8px;
  }

  body .shell .main.page-lesson #lesson-content .match-item.left {
    font-size: 17px;
  }

  body .shell .main.page-lesson #lesson-content .match-item.matched::after {
    font-size: 9px;
    margin-left: 4px;
  }

  body .shell .main.page-lesson #lesson-content .match-result {
    font-size: 12px !important;
  }

  body .shell .main.page-lesson #lesson-content .grammar-formula {
    padding: 18px;
    margin: 21px 0;
    font-size: 20px;
    line-height: 1.9;
  }

  body .shell .main.page-lesson #lesson-content .english-tip {
    padding: 16px 17px;
    font-size: 13px;
  }

  body .shell .main.page-lesson #lesson-content .grammar-example {
    padding-left: 14px;
    font-size: 18px !important;
    line-height: 2;
  }

  body .shell .main.page-lesson #lesson-content .grammar-example + .translation {
    margin-left: 16px;
  }

  body .shell .main.page-lesson #lesson-content .scaffolds {
    padding: 15px;
    font-size: 13px;
  }

  body .shell .main.page-lesson #lesson-content .scaffolds :is(summary, p, div) {
    font-size: 13px;
  }

  body .shell .main.page-lesson #lesson-content .palace-map {
    grid-template-columns: minmax(0, 1fr) minmax(0, 140px) minmax(0, 1fr);
    gap: 8px;
    padding: 19px 9px;
    margin: 20px 0;
  }

  body .shell .main.page-lesson #lesson-content .map-building {
    padding: 11px 7px;
    font-size: 12px;
  }

  body .shell .main.page-lesson #lesson-content .map-building small {
    font-size: 9px;
  }

  body .shell .main.page-lesson #lesson-content .map-caption {
    font-size: 9px;
  }

  body .shell .main.page-lesson #lesson-content .writing-requirements li {
    font-size: 13px;
  }

  body .shell .main.page-lesson #lesson-content #writing-draft {
    min-height: 285px;
    padding: 17px 16px;
    font-size: 17px;
  }

  body .shell .main.page-lesson #lesson-content .writing-meter {
    font-size: 10px;
  }

  body .shell .main.page-lesson #lesson-content .question-head {
    gap: 11px;
    margin-bottom: 20px;
  }

  body .shell .main.page-lesson #lesson-content .question-num {
    width: 27px;
    height: 27px;
    font-size: 11px;
  }

  body .shell .main.page-lesson #lesson-content .question h3 {
    font-size: 15px;
  }

  body .shell .main.page-lesson #lesson-content .option {
    min-height: 54px;
    padding: 13px 15px;
    font-size: 14px;
  }

  body .shell .main.page-lesson #lesson-content .option[data-order-index] {
    padding: 9px 12px;
    font-size: 13px;
  }

  body .shell .main.page-lesson #lesson-content .order-answer {
    padding: 16px;
    font-size: 18px;
  }

  body .shell .main.page-lesson #lesson-content .exercise-image {
    aspect-ratio: 4 / 3;
  }

  body .shell .main.page-lesson #lesson-content .feedback {
    padding: 16px 17px;
    font-size: 13px;
  }

  body .shell .main.page-lesson #lesson-content .feedback strong {
    font-size: 13px;
  }

  body .shell .main.page-lesson #lesson-content [id^="feedback-"] > .panel {
    padding: 20px 16px;
  }

  body .shell .main.page-lesson #lesson-content .dimension > div:first-child {
    font-size: 13px;
  }

  body .shell .main.page-lesson #lesson-content #practice-score .notice {
    padding: 19px 16px;
  }
}

@container lesson-content (max-width: 320px) {
  body .shell .main.page-lesson #lesson-content :is(.panel, .lesson-body, .question, .writing-grid .panel) {
    padding: 20px 16px;
  }

  body .shell .main.page-lesson #lesson-content .palace-map {
    grid-template-columns: minmax(0, 1fr) minmax(0, 125px) minmax(0, 1fr);
    gap: 6px;
    padding: 17px 7px;
  }

  body .shell .main.page-lesson #lesson-content .matching {
    column-gap: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .shell .main.page-lesson #lesson-content *,
  body .shell .main.page-lesson #lesson-content *::before,
  body .shell .main.page-lesson #lesson-content *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  body .shell .main.page-lesson #lesson-content .vocab-card:hover {
    transform: none;
  }
}