/* Learning surfaces. Load after course-content, workspace and learning-motion.
   Content selectors are explicit: translations, pinyin, answers and examples
   keep reading sizes; labels and operational explanations use 12px. */
html.atelier-theme body .shell.workspace-shell .main[class]:is(.page-lesson, .page-words) {
  --course-ink: var(--design-ink, #242935);
  --course-muted: var(--design-muted, #6d7482);
  --course-line: var(--design-line, #e4e7ed);
  --course-accent: var(--design-accent, #384c86);
  --course-soft: var(--design-soft, #f1f4fa);
  --ink: var(--design-ink, #242935);
  --muted: var(--design-muted, #6d7482);
  --line: var(--design-line, #e4e7ed);
  --accent: var(--design-accent, #384c86);
  --accent-dark: var(--design-accent-hover, #2e3f70);
  --blue: var(--design-accent, #384c86);
  --red: var(--design-danger, #b74255);
  color: var(--design-ink, #242935);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content {
  --lesson-ink: var(--design-ink, #242935);
  --lesson-copy: var(--design-ink, #242935);
  --lesson-muted: var(--design-muted, #6d7482);
  --lesson-line: var(--design-line, #e4e7ed);
  --lesson-paper: var(--design-soft, #f1f4fa);
  --lesson-teal: var(--design-accent, #384c86);
  --lesson-green: var(--design-soft, #f1f4fa);
  --lesson-red: var(--design-danger, #b74255);
  --accent: var(--design-accent, #384c86);
  --accent-dark: var(--design-accent-hover, #2e3f70);
  --blue: var(--design-accent, #384c86);
  --red: var(--design-danger, #b74255);
  min-width: 0;
}

/* A course heading, compact progress and chapters are one clear hierarchy. */
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .lesson-title {
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 26px;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .lesson-title h1 {
  color: var(--design-ink, #242935);
  font-size: clamp(30px, 3.1vw, 40px);
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: -.015em;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .lesson-heading > .en {
  color: var(--design-muted, #6d7482);
  font-size: 18px;
  line-height: 1.75;
  margin-top: 10px;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson :is(.lesson-origin, .lesson-level-note, .lesson-heading > .eyebrow, .lesson-current-section, .lesson-progress-summary, .lesson-progress-summary strong) {
  color: var(--design-muted, #6d7482);
  font-size: 12px;
  line-height: 1.65;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .lesson-origin {
  color: var(--design-accent, #384c86);
  font-weight: 600;
  letter-spacing: .055em;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .level-switch {
  gap: 4px;
  padding: 5px;
  border-color: var(--design-line, #e4e7ed);
  border-radius: 12px;
  background: var(--design-soft, #f1f4fa);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .level-switch button {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--design-muted, #6d7482);
  font-size: 12px;
  font-weight: 500;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .level-switch button:hover:not(.active) {
  color: var(--design-accent, #384c86);
  background: var(--design-surface, #fff);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .level-switch button.active {
  color: #fff;
  background: var(--design-accent, #384c86);
  box-shadow: 0 2px 5px #24293512;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .lesson-overview {
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--design-line, #e4e7ed);
  border-radius: 14px;
  background: var(--design-surface, #fff);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .lesson-progress-summary strong {
  color: var(--design-accent, #384c86);
  font-weight: 650;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .lesson-progress-track {
  height: 5px;
  background: var(--design-soft, #f1f4fa);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .lesson-progress-track i {
  background: var(--design-accent, #384c86);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .tabs {
  align-items: stretch;
  height: auto;
  gap: 5px;
  padding-bottom: 6px;
  border-color: var(--design-line, #e4e7ed);
  background: var(--design-surface, #fff);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .tab {
  box-sizing: border-box;
  height: auto;
  min-height: 52px;
  padding: 13px 12px;
  border-radius: 10px;
  color: var(--design-muted, #6d7482);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.6;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .tab::after {
  /* Transparent inactive underlines also contributed to scroll overflow. */
  bottom: 2px;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .tab:hover {
  color: var(--design-accent, #384c86);
  background: var(--design-soft, #f1f4fa);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .tab.active {
  color: var(--design-accent, #384c86);
  background: var(--design-soft, #f1f4fa);
  font-weight: 650;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .tab.active::after {
  bottom: 2px;
  left: 14px;
  right: 14px;
  height: 3px;
  background: var(--design-accent, #384c86);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .tab.completed:not(.active) {
  color: var(--design-ink, #242935);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .tab-complete {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--design-accent, #384c86);
  background: var(--design-soft, #f1f4fa);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .tab-label > .en {
  color: inherit;
  font-size: 12px;
  line-height: 1.45;
  opacity: 1;
}

/* Reading content remains large, including its English and phonetic support. */
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content :is(.panel, .question, .vocab-card) {
  border-color: var(--design-line, #e4e7ed);
  border-radius: 16px;
  background: var(--design-surface, #fff);
  box-shadow: 0 3px 16px #24293504;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .panel {
  padding: clamp(24px, 4cqw, 36px);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content :is(h2, h3) {
  color: var(--design-ink, #242935);
  font-weight: 650;
  letter-spacing: -.012em;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content h2 {
  font-size: 26px;
  line-height: 1.6;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content h3 {
  font-size: 21px;
  line-height: 1.7;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .panel > .eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--design-muted, #6d7482);
  font-size: 12px;
  letter-spacing: .065em;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .article-paragraph {
  margin: 30px 0;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .zh-text {
  color: var(--design-ink, #242935);
  font-size: clamp(22px, 2.2cqw, 24px);
  line-height: 2.15;
  letter-spacing: .018em;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .zh-text:has(ruby) {
  line-height: 2.55;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .pinyin-line {
  font-size: 17px;
  line-height: 1.95;
  letter-spacing: .015em;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .article-paragraph > .pinyin-line {
  margin-top: 9px;
  color: var(--design-muted, #6d7482);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .translation {
  margin-top: 12px;
  color: #4e586b;
  font-size: 18px;
  line-height: 1.95;
  max-width: 70ch;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .glossary-word {
  border-bottom-color: #aab6d2;
  color: var(--design-accent, #384c86);
  background: transparent;
  border-radius: 3px;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .glossary-word:hover {
  color: var(--design-accent-hover, #2e3f70);
  background: var(--design-soft, #f1f4fa);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .glossary-word rt {
  color: var(--design-muted, #6d7482);
  font-size: 14px;
  line-height: 1.6;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content :is(.article-meta .pill, .source-links, .source-links summary, .article-figure figcaption, .article-figure figcaption span) {
  color: var(--design-muted, #6d7482);
  font-size: 12px;
  line-height: 1.75;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .article-figure figcaption span {
  display: block;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .source-links a {
  color: var(--design-accent, #384c86);
  font-size: 14px;
  text-underline-offset: 3px;
}

/* Words and their context share generous, flexible cards. Tone colors survive. */
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocabulary-intro {
  padding: 28px;
  border-color: var(--design-line, #e4e7ed);
  border-radius: 18px;
  background: var(--design-soft, #f1f4fa);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocabulary-intro :is(.eyebrow, p) {
  color: var(--design-muted, #6d7482);
  font-size: 12px;
  line-height: 1.8;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocabulary-journey li {
  border-color: var(--design-line, #e4e7ed);
  color: var(--design-ink, #242935);
  font-size: 12px;
  line-height: 1.7;
  background: var(--design-surface, #fff);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocabulary-journey li:not(:last-child)::after {
  background: linear-gradient(90deg, #aab6d2, #cad1df);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocab-grid,
html.atelier-theme body .shell.workspace-shell .main[class].page-words .collection-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 18px;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocab-card,
html.atelier-theme body .shell.workspace-shell .main[class].page-words .vocab-card {
  padding: 24px;
  border: 1px solid var(--design-line, #e4e7ed);
  border-radius: 16px;
  background: var(--design-surface, #fff);
  box-shadow: 0 3px 16px #24293504;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocab-card:hover,
html.atelier-theme body .shell.workspace-shell .main[class].page-words .vocab-card:hover {
  border-color: #c6cfdf;
  box-shadow: 0 6px 20px #24293507;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocab-title strong,
html.atelier-theme body .shell.workspace-shell .main[class].page-words .vocab-title strong {
  color: var(--design-ink, #242935);
  font-size: 30px;
  font-weight: 650;
  line-height: 1.65;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocab-title .pill,
html.atelier-theme body .shell.workspace-shell .main[class].page-words .vocab-title .pill {
  border-color: var(--design-line, #e4e7ed);
  color: var(--design-accent, #384c86);
  font-size: 12px;
  background: var(--design-soft, #f1f4fa);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocab-card .pinyin-line,
html.atelier-theme body .shell.workspace-shell .main[class].page-words .vocab-card .pinyin-line {
  margin: 7px 0 10px;
  font-size: 17px;
  line-height: 1.9;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocab-card > p:not(.vocab-example):not(.muted),
html.atelier-theme body .shell.workspace-shell .main[class].page-words .vocab-card > p:not(.vocab-example) {
  color: var(--design-accent, #384c86);
  font-size: 18px;
  line-height: 1.9;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocab-card .vocab-example,
html.atelier-theme body .shell.workspace-shell .main[class].page-words .vocab-card .vocab-example {
  color: var(--design-ink, #242935);
  font-size: 19px;
  line-height: 2;
  margin-top: 14px;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocab-card > p.muted {
  /* The existing inline 10px and course-content !important shrink learning data. */
  color: var(--design-muted, #6d7482);
  font-size: 17px !important;
  line-height: 1.95;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocab-actions,
html.atelier-theme body .shell.workspace-shell .main[class].page-words .vocab-actions {
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-color: var(--design-line, #e4e7ed);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocab-actions button,
html.atelier-theme body .shell.workspace-shell .main[class].page-words .vocab-actions button {
  min-height: 42px;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--design-line, #e4e7ed);
  border-radius: 9px;
  color: var(--design-accent, #384c86);
  background: var(--design-surface, #fff);
  font-size: 12px;
  font-weight: 550;
  line-height: 1.7;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocab-actions button:hover,
html.atelier-theme body .shell.workspace-shell .main[class].page-words .vocab-actions button:hover {
  border-color: #b9c4db;
  color: var(--design-accent-hover, #2e3f70);
  background: var(--design-soft, #f1f4fa);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-words .vocab-actions > .en {
  color: var(--design-muted, #6d7482);
  font-size: 12px;
  line-height: 1.75;
}

/* Existing SVG connections and finite confirmation motion keep their behavior. */
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-column {
  gap: 18px;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-item {
  min-height: 70px;
  padding: 14px 12px;
  border: 1px solid var(--design-line, #e4e7ed);
  border-radius: 12px;
  color: var(--design-ink, #242935);
  background: var(--design-surface, #fff);
  line-height: 1.7;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-item.left {
  font-size: 22px;
  font-weight: 550;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-item.right {
  font-size: 18px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-item:hover {
  border-color: #b9c4db;
  background: var(--design-soft, #f1f4fa);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-item.selected {
  border-color: var(--design-accent, #384c86);
  color: var(--design-accent, #384c86);
  background: var(--design-soft, #f1f4fa);
  box-shadow: 0 0 0 3px #384c8612;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-item.matched {
  border-color: #bac6df;
  color: var(--design-accent, #384c86);
  background: #eaf0fa;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-item.shake {
  border-color: var(--design-danger, #b74255);
  color: var(--design-danger, #b74255);
  background: #fcf1f3;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-connection {
  --connection-color: var(--design-accent, #384c86);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-connection.is-error {
  --connection-color: var(--design-danger, #b74255);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-line {
  stroke: var(--design-accent, #384c86);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-line.error,
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-connection.is-error .match-line {
  stroke: var(--design-danger, #b74255);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content :is(.match-result, .match-save) {
  color: var(--design-muted, #6d7482);
  font-size: 12px !important;
  line-height: 1.8;
}

/* Grammar explanations, bilingual examples and reading questions are content. */
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content[data-chapter="grammar"] .panel > p {
  color: var(--design-ink, #242935);
  font-size: 18px;
  line-height: 2;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .grammar-formula {
  padding: 22px 24px;
  border: 1px solid #dbe1ee;
  border-radius: 12px;
  color: var(--design-accent, #384c86);
  background: var(--design-soft, #f1f4fa);
  font-size: 25px;
  font-weight: 550;
  line-height: 1.75;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .english-tip {
  padding: 20px 22px;
  border-left: 3px solid #aab6d2;
  border-radius: 0 10px 10px 0;
  color: #4e586b;
  background: #f6f8fc;
  font-size: 18px;
  line-height: 1.95;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .english-tip strong {
  color: var(--design-muted, #6d7482);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .055em;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .grammar-example {
  color: var(--design-ink, #242935);
  font-size: 22px !important;
  line-height: 2.05;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .grammar-example button {
  width: 40px;
  min-height: 40px;
  border: 1px solid var(--design-line, #e4e7ed);
  border-radius: 10px;
  color: var(--design-accent, #384c86);
  background: var(--design-surface, #fff);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .grammar-example button:hover {
  background: var(--design-soft, #f1f4fa);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .scaffolds {
  padding: 16px 18px;
  border-color: var(--design-line, #e4e7ed);
  border-radius: 12px;
  color: var(--design-ink, #242935);
  background: #f8f9fc;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .scaffolds > summary {
  color: var(--design-accent, #384c86);
  font-size: 12px;
  font-weight: 550;
  line-height: 1.85;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content[data-chapter="reading"] .scaffolds > summary,
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .scaffolds > :is(p, div) {
  color: var(--design-ink, #242935);
  font-size: 18px;
  line-height: 2;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .map-building {
  padding: 14px 10px;
  border-color: #d6ddeb;
  border-radius: 10px;
  color: var(--design-accent, #384c86);
  background: var(--design-surface, #fff);
  font-size: 18px;
  line-height: 1.85;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .map-building > small.en {
  color: #4e586b;
  font-size: 16px;
  line-height: 1.85;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .map-caption {
  color: var(--design-muted, #6d7482);
  font-size: 14px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

/* Writing uses one readable draft surface and a distinct feedback column. */
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .writing-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .writing-grid .panel > p,
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .writing-requirements li {
  color: var(--design-ink, #242935);
  font-size: 18px;
  line-height: 1.95;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .writing-requirements {
  margin-block: 20px;
  gap: 12px;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .writing-requirements .icon {
  color: var(--design-accent, #384c86);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content #writing-draft {
  min-height: 300px;
  padding: 20px;
  border-color: #ced5e2;
  border-radius: 12px !important;
  color: var(--design-ink, #242935);
  background: var(--design-surface, #fff);
  font-size: 20px;
  line-height: 2;
  resize: vertical;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content :is(.writing-grid label, .writing-meter, #vocab-coverage) {
  color: var(--design-muted, #6d7482);
  font-size: 12px;
  line-height: 1.9;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content #vocab-coverage {
  border-color: var(--design-line, #e4e7ed);
  background: var(--design-soft, #f1f4fa);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content :is(#writing-report .dimension p, #writing-report .correction, #writing-report .improved, [id^="feedback-"] .dimension p) {
  color: var(--design-ink, #242935);
  font-size: 18px;
  line-height: 1.95;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content #writing-report .notice {
  color: var(--design-accent, #384c86);
  background: var(--design-soft, #f1f4fa);
  border-color: #dbe1ee;
  font-size: 17px;
  line-height: 1.95;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content #writing-report .empty > p {
  color: var(--design-muted, #6d7482);
  font-size: 12px;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .score-ring {
  background: conic-gradient(var(--design-accent, #384c86) calc(var(--score) * 1%), var(--design-soft, #f1f4fa) 0);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .score-ring > div {
  color: var(--design-ink, #242935);
  font-variant-numeric: tabular-nums;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content :is(.score-ring small, .dimension small) {
  color: var(--design-muted, #6d7482);
  font-size: 12px;
}

/* Choices, typed responses and returned answers retain content typography. */
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .question {
  padding: 26px;
  margin-bottom: 22px;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .question-head {
  align-items: flex-start;
  gap: 14px;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .question-num {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--design-accent, #384c86);
  background: var(--design-soft, #f1f4fa);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .question h3 {
  color: var(--design-ink, #242935);
  font-size: 20px;
  line-height: 1.9;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .option {
  min-height: 54px;
  padding: 14px 17px;
  border: 1px solid var(--design-line, #e4e7ed);
  border-radius: 11px;
  color: var(--design-ink, #242935);
  background: var(--design-surface, #fff);
  font-size: 18px;
  line-height: 1.9;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .option:hover {
  border-color: #aebcda;
  background: #f7f9fd;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .option.selected {
  border-color: var(--design-accent, #384c86);
  color: var(--design-accent, #384c86);
  background: var(--design-soft, #f1f4fa);
  box-shadow: 0 0 0 2px #384c860d;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .option.correct {
  border-color: #9bacce;
  color: var(--design-accent, #384c86);
  background: #eaf0fa;
  box-shadow: inset 3px 0 var(--design-accent, #384c86);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .option.wrong {
  border-color: #deb7c0;
  color: var(--design-danger, #b74255);
  background: #fcf1f3;
  box-shadow: inset 3px 0 var(--design-danger, #b74255);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .option:is(.selected, .correct)::before {
  border-color: var(--design-accent, #384c86);
  background: var(--design-accent, #384c86);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .option.wrong::before {
  border-color: var(--design-danger, #b74255);
  background: var(--design-danger, #b74255);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .option[data-order-index] {
  font-size: 18px;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content :is(.order-answer, .question textarea) {
  color: var(--design-ink, #242935);
  font-size: 20px;
  line-height: 2;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .question textarea {
  padding: 18px;
  border-color: #ced5e2;
  border-radius: 12px;
  background: var(--design-surface, #fff);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .feedback {
  padding: 20px;
  border-color: #d7dfef;
  border-left-color: var(--design-accent, #384c86);
  border-radius: 12px;
  color: var(--design-accent, #384c86);
  background: var(--design-soft, #f1f4fa);
  font-size: 18px;
  line-height: 1.95;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .feedback.wrong {
  border-color: #ecd3d9;
  border-left-color: var(--design-danger, #b74255);
  color: var(--design-danger, #b74255);
  background: #fcf3f5;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .feedback strong {
  font-size: 14px;
  line-height: 1.8;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .feedback :is(small, .en) {
  color: inherit;
  font-size: 18px;
  line-height: 1.95;
  opacity: 1;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content #practice-score .notice {
  border-color: #dbe1ee;
  color: var(--design-accent, #384c86);
  background: var(--design-soft, #f1f4fa);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content #practice-score p {
  color: var(--design-muted, #6d7482);
  font-size: 12px;
  line-height: 1.85;
}

/* Learning actions use one primary, secondary and disabled vocabulary. */
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .btn,
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .chapter-actions .btn,
html.atelier-theme body .shell.workspace-shell .main[class].page-words .btn {
  min-height: 44px;
  padding: 11px 17px;
  border: 1px solid var(--design-accent, #384c86);
  border-radius: 10px;
  color: #fff;
  background: var(--design-accent, #384c86);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.75;
  white-space: normal;
  box-shadow: 0 2px 4px #24293508;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .btn:hover,
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .chapter-actions .btn:hover,
html.atelier-theme body .shell.workspace-shell .main[class].page-words .btn:hover {
  border-color: var(--design-accent-hover, #2e3f70);
  color: #fff;
  background: var(--design-accent-hover, #2e3f70);
  transform: none;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .btn:is(.secondary, .soft),
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .chapter-actions .btn.secondary,
html.atelier-theme body .shell.workspace-shell .main[class].page-words .btn:is(.secondary, .soft) {
  border-color: #d5dce9;
  color: var(--design-accent, #384c86);
  background: var(--design-surface, #fff);
  box-shadow: none;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .btn:is(.secondary, .soft):hover,
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .chapter-actions .btn.secondary:hover,
html.atelier-theme body .shell.workspace-shell .main[class].page-words .btn:is(.secondary, .soft):hover {
  border-color: #b9c4db;
  color: var(--design-accent-hover, #2e3f70);
  background: var(--design-soft, #f1f4fa);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .btn .en,
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .chapter-actions .btn .en,
html.atelier-theme body .shell.workspace-shell .main[class].page-words .btn .en {
  color: inherit;
  font-size: 12px;
  line-height: 1.6;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .chapter-end {
  gap: 18px;
  margin-top: 30px;
  padding-top: 24px;
  border-color: var(--design-line, #e4e7ed);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .chapter-end > .muted,
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .chapter-end > .muted .en {
  color: var(--design-muted, #6d7482);
  font-size: 12px !important;
  line-height: 1.75;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .lesson-tools {
  border-color: var(--design-line, #e4e7ed);
  border-radius: 14px;
  background: var(--design-surface, #fff);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .lesson-tools :is(h3, label, .policy-note, summary, summary > span) {
  color: var(--design-muted, #6d7482);
  font-size: 12px !important;
  line-height: 1.8;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .lesson-tools > summary {
  color: var(--design-ink, #242935);
  font-weight: 600;
  padding: 15px 18px;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .lesson-tools > summary:hover {
  background: var(--design-soft, #f1f4fa);
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .lesson-tools :is(select, .hb-select-trigger, .btn) {
  min-height: 42px;
  padding: 10px 12px;
  border-color: var(--design-line, #e4e7ed);
  border-radius: 9px;
  color: var(--design-accent, #384c86);
  background: var(--design-surface, #fff);
  font-size: 12px;
  line-height: 1.75;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .lesson-tools .btn:hover {
  border-color: #b9c4db;
  color: var(--design-accent-hover, #2e3f70);
  background: var(--design-soft, #f1f4fa);
}

/* Word-only dialogs keep their learning text readable without restyling admin. */
html.atelier-theme body #modal-root .modal:has(> .word-translation) .modal-head h2 {
  color: var(--design-ink, #242935);
  font-size: 34px;
  font-weight: 650;
  line-height: 1.7;
}
html.atelier-theme body #modal-root .word-review .review-hanzi {
  color: var(--design-ink, #242935);
  font-size: clamp(48px, 8vw, 60px);
  font-weight: 600;
  line-height: 1.7;
}
html.atelier-theme body #modal-root .modal:has(> .word-translation) > .pinyin-line,
html.atelier-theme body #modal-root .word-review .pinyin-line {
  color: var(--design-muted, #6d7482);
  font-size: 17px;
  line-height: 1.95;
}
html.atelier-theme body #modal-root .modal > .word-translation,
html.atelier-theme body #modal-root .word-review .review-meaning {
  color: var(--design-accent, #384c86);
  font-size: 20px;
  line-height: 1.95;
}
html.atelier-theme body #modal-root .modal:has(> .word-translation) .explain-card,
html.atelier-theme body #modal-root .word-review #review-meaning > .muted {
  color: var(--design-ink, #242935);
  font-size: 19px;
  line-height: 2;
}
html.atelier-theme body #modal-root .modal:has(> .word-translation) .explain-card > p {
  color: var(--design-muted, #6d7482);
  font-size: 17px;
  line-height: 1.95;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-words #review-errors :is(.panel h3, .review-options, textarea, input) {
  color: var(--design-ink, #242935);
  font-size: 18px;
  line-height: 1.95;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-words #review-errors .feedback {
  color: var(--design-accent, #384c86);
  background: var(--design-soft, #f1f4fa);
  border-radius: 12px;
  padding: 18px;
  font-size: 18px;
  line-height: 1.95;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-words #review-errors .feedback.wrong {
  color: var(--design-danger, #b74255);
  background: #fcf3f5;
}

/* Cloud reading stays in document flow; status labels differ from read text. */
html.atelier-theme body .speech-player {
  --accent: var(--design-accent, #384c86);
  --line: var(--design-line, #e4e7ed);
  padding: 24px;
  border: 1px solid var(--design-line, #e4e7ed);
  border-radius: 16px;
  color: var(--design-ink, #242935);
  background: var(--design-surface, #fff);
  box-shadow: 0 4px 20px #24293505;
}
html.atelier-theme body .speech-player h2 {
  color: var(--design-ink, #242935);
  font-size: 22px;
  font-weight: 650;
  line-height: 1.6;
}
html.atelier-theme body .speech-player :is(.eyebrow, .speech-message, .speech-note, .speech-segment, .speech-text summary) {
  color: var(--design-muted, #6d7482);
  font-size: 12px;
  line-height: 1.85;
}
html.atelier-theme body .speech-player .speech-text p {
  color: var(--design-ink, #242935);
  font-size: 19px;
  line-height: 2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
html.atelier-theme body .speech-player .speech-actions {
  gap: 10px;
  margin: 16px 0;
}
html.atelier-theme body .speech-player .btn {
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid var(--design-accent, #384c86);
  border-radius: 10px;
  color: #fff;
  background: var(--design-accent, #384c86);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.75;
}
html.atelier-theme body .speech-player .btn:hover {
  border-color: var(--design-accent-hover, #2e3f70);
  background: var(--design-accent-hover, #2e3f70);
}
html.atelier-theme body .speech-player .btn.secondary {
  border-color: #d5dce9;
  color: var(--design-accent, #384c86);
  background: var(--design-surface, #fff);
}
html.atelier-theme body .speech-player .btn.secondary:hover {
  border-color: #b9c4db;
  background: var(--design-soft, #f1f4fa);
}
html.atelier-theme body .speech-player .btn .en {
  color: inherit;
  font-size: 12px;
  line-height: 1.6;
}
html.atelier-theme body .speech-player[data-speech-state="playing"] {
  border-color: #aebcda;
  box-shadow: inset 3px 0 var(--design-accent, #384c86), 0 4px 20px #24293505;
}
html.atelier-theme body .speech-player[data-speech-state="complete"] {
  border-color: #c4cee3;
  background: #f8faff;
}
html.atelier-theme body .speech-player:is([data-speech-state="failed"], [data-speech-state="unconfirmed"]) {
  border-color: #e7c6cf;
  box-shadow: inset 3px 0 var(--design-danger, #b74255);
}
html.atelier-theme body .speech-player:is([data-speech-state="failed"], [data-speech-state="unconfirmed"]) .speech-message {
  color: var(--design-danger, #b74255);
}

/* Restore a visible keyboard focus after earlier course-shell suppression. */
html.atelier-theme body .shell.workspace-shell .main[class]:is(.page-lesson, .page-words) :is(button, a, summary, input, select, textarea):focus-visible,
html.atelier-theme body .speech-player :is(button, a, summary):focus-visible,
html.atelier-theme body #modal-root .modal:has(> .word-translation) :is(button, a):focus-visible,
html.atelier-theme body #modal-root .word-review button:focus-visible {
  outline: 2px solid var(--design-accent, #384c86);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px #384c860c;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .btn:disabled,
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .option:disabled:not(.selected):not(.correct):not(.wrong),
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .chapter-actions .btn:disabled,
html.atelier-theme body .shell.workspace-shell .main[class].page-words .btn:disabled,
html.atelier-theme body .speech-player .btn:disabled {
  border-color: var(--design-line, #e4e7ed);
  color: var(--design-muted, #6d7482);
  background: #f4f5f8;
  box-shadow: none;
  transform: none;
  opacity: 1;
  cursor: not-allowed;
}

@container lesson-content (min-width: 900px) {
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .writing-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  }
}
@media (max-width: 700px) {
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .lesson-overview {
    padding: 14px 16px;
  }
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .level-switch button {
    min-width: 44px;
    padding-inline: 9px;
  }
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .tab {
    min-width: 108px;
    min-height: 50px;
  }
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocabulary-intro {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px;
  }
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocabulary-intro img {
    max-width: 300px;
    justify-self: center;
  }
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content :is(.panel, .question, .vocab-card),
  html.atelier-theme body .shell.workspace-shell .main[class].page-words .vocab-card {
    padding: 22px 18px;
  }
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content h2 {
    font-size: 24px;
  }
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content :is(.match-item.left, .match-item.right) {
    padding: 12px 9px;
    font-size: 18px;
  }
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .map-building {
    padding: 12px 8px;
    font-size: 17px;
  }
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .map-caption {
    font-size: 13px;
  }
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content #writing-draft {
    padding: 17px;
    font-size: 19px;
  }
  html.atelier-theme body .speech-player {
    padding: 20px 18px;
  }
  html.atelier-theme body .speech-player .speech-actions .btn {
    flex: 1 1 auto;
  }
}
@media (max-width: 380px) {
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson .lesson-title h1 {
    font-size: 29px;
  }
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .matching {
    column-gap: 28px;
  }
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .chapter-actions {
    width: 100%;
  }
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .chapter-actions .btn {
    flex: 1 1 auto;
  }
}
html.atelier-theme body.reduce-motion .shell.workspace-shell .main[class]:is(.page-lesson, .page-words) :is(.option, .vocab-card, .btn, .tab),
html.atelier-theme body.reduce-motion .speech-player .btn {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html.atelier-theme body .shell.workspace-shell .main[class]:is(.page-lesson, .page-words) :is(.option, .vocab-card, .btn, .tab),
  html.atelier-theme body .speech-player .btn {
    transition: none !important;
  }
}