/* Larger support text and finite learning motions in the existing palette. */
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocabulary-intro {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,260px); gap: 22px;
  padding: 25px 28px; margin: 0 0 27px; background: #fdfaf8;
  border: 1px solid #eee4e7; border-radius: 18px; align-items: center;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocabulary-intro > div { min-width: 0; }
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocabulary-intro .eyebrow { color: #9b637c; font-size: 11px; }
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocabulary-intro h2 { margin: 8px 0; font-size: 25px; }
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocabulary-intro p { font-size: 15px; line-height: 1.85; color: #6f6574; }
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocabulary-intro img { display: block; width: 100%; height: 170px; object-fit: contain; }
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocabulary-journey {
  display: flex; gap: 20px; list-style: none; padding: 0; margin: 17px 0 0; color: #765b70;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocabulary-journey li {
  position: relative; flex: 1; min-width: 0; text-align: center; font-size: 13px; line-height: 1.65;
  background: #fff; border: 1px solid #e7dbe4; border-radius: 10px; padding: 9px 6px;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocabulary-journey li:not(:last-child)::after {
  content: ''; position: absolute; left: calc(100% + 1px); top: 50%; width: 20px; height: 1px;
  background: linear-gradient(90deg,#bb86a0,#a7b9cf); transform-origin: left;
  animation: lesson-guide-connect 520ms ease-out both;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .translation {
  font-size: 18px;
  line-height: 1.9;
  max-width: 68ch;
  color: #5d6375;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .pinyin-line {
  font-family: Inter, "Segoe UI", "Noto Sans", sans-serif;
  font-size: 17px;
  line-height: 1.95;
  color: #766176;
  letter-spacing: .015em;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .glossary-word rt {
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #776377;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .zh-text:has(ruby) {
  line-height: 2.65;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .english-tip {
  font-size: 17px;
  line-height: 1.9;
  color: #5d6375;
}
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-lesson #lesson-content .feedback .en {
  font-size: 17px;
  line-height: 1.85;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-item.right {
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: anywhere;
  padding: 13px 12px;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocab-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr));
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content :is(.article-paragraph,.vocab-card,.grammar-formula,.question) {
  animation: lesson-arrive 420ms cubic-bezier(.22,.61,.36,1) both;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocab-card:nth-child(2) { animation-delay: 35ms; }
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocab-card:nth-child(3) { animation-delay: 70ms; }
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocab-card:nth-child(4) { animation-delay: 105ms; }
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .feedback { animation: lesson-feedback 360ms ease-out both; }
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-item {
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 220ms ease;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-item.selected {
  box-shadow: 0 0 0 3px #a54e7015;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-item.matched:not([data-match-restored]) {
  animation: lesson-match-confirm 440ms ease-out;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-connection {
  --connection-color: #6484ac;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-connection.is-error { --connection-color: #b47990; }
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-connection :is(path,circle) { pointer-events: none; }
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-halo {
  fill: none; stroke: var(--connection-color); stroke-width: 9; opacity: .1; stroke-linecap: round;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-line.match-ink {
  fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: none; animation: none;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-connection.is-new .match-ink {
  stroke-dasharray: 1; animation: lesson-connection-draw 620ms cubic-bezier(.22,.61,.36,1) both;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-traveller {
  fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: .06 .94; opacity: 0;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-connection.is-new:not(.is-error) .match-traveller {
  animation: lesson-connection-travel 1000ms ease-out 180ms both;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-endpoint {
  fill: var(--connection-color); stroke: #fff; stroke-width: 1.5;
}
html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-connection.is-new .match-endpoint-arrival {
  animation: lesson-endpoint-arrive 550ms ease-out 200ms both;
}
html.atelier-theme #modal-root .modal .pinyin-line { font-size: 17px; line-height: 1.9; }
html.atelier-theme #modal-root .modal > p:not(.pinyin-line) { font-size: 17px; line-height: 1.9; }

@keyframes lesson-arrive { from { opacity: .55; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lesson-feedback { from { opacity: .6; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lesson-match-confirm { 0% { box-shadow: 0 0 0 0 #5b7dab25; } 65% { box-shadow: 0 0 0 5px #5b7dab00; } 100% { box-shadow: none; } }
@keyframes lesson-connection-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lesson-connection-travel { 0% { stroke-dashoffset: 1; opacity: 0; } 15% { opacity: .9; } 80% { opacity: .8; } 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes lesson-endpoint-arrive { from { r: 0; opacity: .3; } to { r: 3; opacity: 1; } }
@keyframes lesson-guide-connect { from { transform: scaleX(.2); opacity: .4; } to { transform: scaleX(1); opacity: 1; } }

@media (max-width: 600px) {
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocabulary-intro { grid-template-columns: minmax(0,1fr); padding: 22px 19px; gap: 10px; }
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocabulary-intro img { height: 140px; }
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocabulary-intro h2 { font-size: 23px; }
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .translation { font-size: 17px; }
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content :is(.pinyin-line,.english-tip) { font-size: 16px; }
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .glossary-word rt { font-size: 13px; }
  html.atelier-theme body .shell.workspace-shell .main[class].page-lesson #lesson-content .match-item.right { font-size: 15px; padding: 12px 9px; }
}
html.atelier-theme body.reduce-motion .main.page-lesson #lesson-content *,
html.atelier-theme body.reduce-motion .main.page-lesson #lesson-content *::before,
html.atelier-theme body.reduce-motion .main.page-lesson #lesson-content *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.atelier-theme .main.page-lesson #lesson-content *,
  html.atelier-theme .main.page-lesson #lesson-content *::before,
  html.atelier-theme .main.page-lesson #lesson-content *::after { animation: none !important; transition: none !important; }
}