/* HSK-BASE-001/002/003/006/008/009/010/011: shared learning UI foundations.
   Keep these tokens and component states together; page rules below own layout. */
body:is([data-page="home"], [data-module-focus]) {
  --hanyu-ink: #203831;
  --hanyu-muted: #56665f;
  --hanyu-primary: #245647;
  --hanyu-primary-hover: #193f34;
  --hanyu-selected: #e9f1eb;
  --hanyu-line: #d4ddd5;
  --hanyu-surface: #fffdf9;
  --hanyu-canvas: #fff7ef;
  --hanyu-control-radius: 12px;
  --hanyu-card-radius: 16px;
  --hanyu-font: Inter, "Noto Sans SC", system-ui, sans-serif;
  --hanyu-space-1: 8px;
  --hanyu-space-2: 12px;
  --hanyu-space-3: 16px;
  --hanyu-space-4: 24px;
  --hanyu-space-5: 32px;
  --hanyu-space-6: 48px;
}

/* Older lesson components consume these aliases until their page CSS is retired. */
body[data-module-focus][data-page][class].multipage-site {
  --grammar-edu-ink: var(--hanyu-ink);
  --grammar-edu-muted: var(--hanyu-muted);
  --grammar-edu-primary: var(--hanyu-primary);
  --grammar-edu-primary-strong: var(--hanyu-primary-hover);
  --grammar-edu-line: var(--hanyu-line);
  --grammar-edu-shadow: none;
  --practice-edu-ink: var(--hanyu-ink);
  --practice-edu-muted: var(--hanyu-muted);
  --practice-edu-green: var(--hanyu-primary);
  --practice-edu-line: var(--hanyu-line);
  --practice-edu-shadow: none;
  --vocab-edu-ink: var(--hanyu-ink);
  --vocab-edu-muted: var(--hanyu-muted);
  --vocab-edu-green: var(--hanyu-primary);
  --vocab-edu-line: var(--hanyu-line);
  --vocab-edu-shadow: none;
}

/* Shared spacing and disclosure for existing learning surfaces. */
body[data-module-focus] #main-content .module-disclosure {
  border: 1px solid var(--hanyu-line); border-radius: 12px; background: var(--hanyu-surface);
  color: var(--hanyu-ink); padding: 0 18px; min-width: 0;
}
body[data-module-focus] #main-content .module-disclosure > summary {
  min-height: 48px; padding: 14px 0; cursor: pointer; font-size: 14px; font-weight: 700;
}
body[data-module-focus] #main-content .module-disclosure :focus-visible { outline: 3px solid var(--hanyu-primary); outline-offset: 3px; }
body[data-module-focus] #main-content .module-disclosure[open] > summary { margin-bottom: 12px; }
body[data-module-focus] #main-content .module-disclosure [hidden], body[data-module-focus] #main-content .source-paper-card[hidden] { display: none !important; }
/* Vocabulary: search follows the selected track, without four repeated metrics. */
body[data-module-focus] #main-content .vocabulary-page-hero.vocabulary-section { padding-top: 28px; }
body[data-module-focus] #main-content .vocabulary-session-heading h1 { font-size: clamp(28px, 3.5vw, 40px); line-height: 1.2; }
body[data-module-focus] #main-content .vocabulary-session-heading { gap: 14px; }
body[data-module-focus] #main-content .vocabulary-page-hero__grid { margin-bottom: 16px; padding-bottom: 0; }
body[data-module-focus] #main-content .vocabulary-page-hero__grid::after { display: none; }
body[data-module-focus] #main-content .module-vocab-details { margin-block: 12px 20px; }
body[data-module-focus] #main-content .module-vocab-details .vocabulary-status-strip { margin: 0; padding: 0; border: 0; background: transparent; }
body[data-module-focus] #main-content .module-vocab-details .vocabulary-status-strip__grid { gap: 12px; }
body[data-module-focus] #main-content .module-vocab-details .vocabulary-status-strip__grid > div {
  min-height: 0; padding: 10px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
body[data-module-focus] #main-content .module-vocab-details [data-vocab-script-note] { display: block; margin: 12px 0 18px; font-size: 13px; line-height: 1.6; color: var(--hanyu-muted); }
body[data-module-focus] #main-content .module-vocab-details [data-vocab-script-note] span { display: inline; }
body[data-module-focus] #main-content .vocabulary-toolbar { padding: 16px; background: var(--hanyu-surface); box-shadow: none; border-color: var(--hanyu-line); }
body[data-module-focus] #main-content .vocabulary-level-browser a { min-height: 44px; }
body[data-module-focus] #main-content .vocab-level-dock { position: static; }
body[data-module-focus] #main-content .vocab-level-dock__inner { padding-block: 10px; }
/* Grammar: one browser beside the lesson, folded on small screens. */
body[data-module-focus] #main-content .grammar-product__summary, body[data-module-focus] #main-content .grammar-product__summary-copy { display: none; }
body[data-module-focus] #main-content .grammar-product__workspace { display: grid; grid-template-columns: 290px minmax(0, 1fr); align-items: start; gap: 24px; }
body[data-module-focus] #main-content .module-grammar-browser { position: sticky; top: 100px; max-height: calc(100dvh - 120px); overflow-y: auto; }
body[data-module-focus] #main-content .module-grammar-browser .grammar-product__search { display: grid; margin-bottom: 20px; }
body[data-module-focus] #main-content .module-grammar-browser .grammar-product__category-rail { position: static; width: auto; padding: 0; background: transparent; border: 0; box-shadow: none; }
body[data-module-focus] #main-content .module-grammar-browser .grammar-category-nav__items { display: grid; grid-template-columns: minmax(0, 1fr); }
body[data-module-focus] #main-content .module-grammar-browser .grammar-category-nav__items button { min-height: 44px; padding: 10px; }
body[data-module-focus] #main-content .module-grammar-browser .grammar-product__directory { position: static; max-height: none; width: auto; padding: 16px 0; border: 0; box-shadow: none; background: transparent; }
body[data-module-focus] #main-content .module-grammar-browser .grammar-product__progress-card { margin-block: 12px; padding: 12px; border: 0; box-shadow: none; }
body[data-module-focus] #main-content .grammar-product__lesson { min-width: 0; scroll-margin-top: 100px; }
body[data-module-focus] #main-content .grammar-product__switch { margin-block: 0 20px; padding: 8px; box-shadow: none; }
/* Compact existing titles; the task is the main visual element. */
body[data-module-focus] #main-content .practice-hero .page-hero { min-height: 0; padding-block: 28px 20px; display: block; }
body[data-module-focus] #main-content .practice-hero .page-hero h1 { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.15; max-width: none; margin-top: 10px; }
body[data-module-focus] #main-content .practice-hero .page-hero__copy > p { margin-top: 12px; font-size: 16px; line-height: 1.6; }
body[data-module-focus] #main-content .practice-hero__actions, body[data-module-focus] #main-content .practice-hero__glyph, body[data-module-focus] #main-content .practice-hero__glow, body[data-module-focus] #main-content .practice-hero .page-hero__brand-icon, body[data-module-focus] #main-content .practice-hero .page-hero__copy > .kicker, body[data-module-focus] #main-content .conversation-hero .page-hero__meta, body[data-module-focus] #main-content .conversation-module > .practice-scenarios__heading, body[data-module-focus] #main-content .practice-standard-picker__copy > span, body[data-module-focus] #main-content .practice-standard-picker__copy > p, body[data-module-focus] #main-content .practice-lab__heading, body[data-module-focus] #main-content .practice-hero + .local-nav { display: none; }
body[data-module-focus] #main-content .practice-standard-picker { margin-block: 8px 24px; padding: 20px; gap: 16px; background: var(--hanyu-surface); box-shadow: none; border: 1px solid var(--hanyu-line); }
body[data-module-focus] #main-content .practice-standard-picker__copy h2 { font-size: 18px; }
body[data-module-focus] #main-content .practice-standard-picker__controls { gap: 12px; }
body[data-module-focus] #main-content .practice-standard-buttons button { min-height: 52px; padding: 8px 14px; }
body[data-module-focus] #main-content .practice-standard-buttons button small { display: none; }
body[data-module-focus] #main-content .practice-standard-levels button { min-height: 44px; padding: 8px; }
body[data-module-focus] #main-content .practice-standard-levels button span { display: none; }
body[data-module-focus] #main-content .practice-command { display: block; margin-top: 0; padding-bottom: 0; }
body[data-module-focus] #main-content .practice-lab { padding: 0; }
body[data-module-focus] #main-content .practice-stage-new { box-shadow: none; }
body[data-module-focus] #main-content .module-practice-guide { margin-block: 24px; }
body[data-module-focus] #main-content .module-practice-guide .practice-sidecar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; gap: 20px; }
body[data-module-focus] #main-content .module-practice-guide .practice-sidecar > section, body[data-module-focus] #main-content .module-practice-guide .page-hero__meta { padding: 16px 0; margin: 0; background: transparent; box-shadow: none; border: 0; }
body[data-module-focus] #main-content .module-practice-guide .page-hero__meta > span { background: transparent; box-shadow: none; border: 0; }
#scenario-practice, .conversation-next { margin-block: 24px; padding-block: 24px; border-top: 1px solid var(--hanyu-line); }
#scenario-practice .next-step__index, #scenario-practice .next-step__copy > small { display: none; }
#scenario-practice .next-step__copy > strong { font-size: 22px; }
/* Focused practice keeps standard and level visible, with optional session settings. */
body[data-module-focus] #main-content .practice-tool-hero { padding-block: 24px; }
body[data-module-focus] #main-content .practice-tool-hero__grid { display: block; }
body[data-module-focus] #main-content .practice-tool-hero h1 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2; }
body[data-module-focus] #main-content .practice-tool-hero__stats { display: none; }
body[data-module-focus] #main-content .practice-tool-hero__grid > div > p { max-width: 680px; font-size: 15px; line-height: 1.6; margin-top: 12px; }
body[data-module-focus] #main-content .focused-practice-switch { padding: 16px; margin-block: 0 20px; box-shadow: none; }
body[data-module-focus] #main-content .focused-practice-switch__copy { display: none; }
body[data-module-focus] #main-content .focused-practice-switch__modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-module-focus] #main-content .focused-practice-switch__modes a { padding: 12px; min-height: 60px; }
body[data-module-focus] #main-content .focused-practice-switch__modes a > span { display: none; }
body[data-module-focus] #main-content .focused-practice-switch__modes a > small { font-size: 12px; }
body[data-module-focus] #main-content .practice-tool-setup { box-shadow: none; padding: 20px; }
body[data-module-focus] #main-content .module-session-options { margin-block: 12px; padding-inline: 12px; }
body[data-module-focus] #main-content .module-session-options .practice-tool-options { margin: 0; }
body[data-module-focus] #main-content .module-session-options .practice-tool-field-row { margin-block: 16px; }
body[data-module-focus] #main-content .practice-tool-trainer[data-tool-state="idle"] { display: none; }
body[data-module-focus] #main-content .practice-tool-workspace:has(.practice-tool-trainer[data-tool-state="idle"]) { grid-template-columns: minmax(0, 680px); justify-content: center; }
/* Conversation: clear goals instead of repeated marketing and scenario prose. */
body[data-module-focus] #main-content .conversation-module { padding-top: 8px; }
body[data-module-focus] #main-content .practice-scenario-track { padding: 18px; gap: 12px; background: var(--hanyu-surface); border-color: var(--hanyu-line); box-shadow: none; }
body[data-module-focus] #main-content .practice-scenario-picker > header { margin-bottom: 16px; }
body[data-module-focus] #main-content .practice-scenario-picker > header small, body[data-module-focus] #main-content .practice-scenario-picker > header p { display: none; }
body[data-module-focus] #main-content .practice-scenario-picker > header h3 { font-size: 22px; }
body[data-module-focus] #main-content .practice-scenario-choice { min-height: 0; padding: 22px; border-color: var(--hanyu-line); background: var(--hanyu-surface); box-shadow: none; }
body[data-module-focus] #main-content .practice-scenario-choice__mark, body[data-module-focus] #main-content .practice-scenario-choice__situation { display: none; }
body[data-module-focus] #main-content .practice-scenario-choice > strong { font-size: 21px; line-height: 1.35; margin-block: 14px; }
body[data-module-focus] #main-content .practice-scenario-choice__goal { color: var(--hanyu-muted); font-size: 14px; line-height: 1.6; }
body[data-module-focus] #main-content .practice-scenario-choice__action { margin-top: 20px; color: var(--hanyu-primary); }
/* Test library: shared specifications, clear source labels, one action per row. */
body[data-module-focus] #main-content .test-product-nav { position: static; padding-block: 8px; }
body[data-module-focus] #main-content .test-product-nav__brand, body[data-module-focus] #main-content .test-product-nav__mode { display: none; }
body[data-module-focus] #main-content .test-product-nav__inner { min-height: 44px; padding: 0; border: 0; box-shadow: none; background: transparent; }
body[data-module-focus] #main-content .test-product-nav__inner nav { display: flex; flex-wrap: wrap; gap: 4px 12px; }
body[data-module-focus] #main-content .test-product-nav__inner nav a { min-height: 44px; padding: 10px 8px; font-size: 13px; }
body[data-module-focus] #main-content .test-center-catalog__header { display: none; }
body[data-module-focus] #main-content .test-hero-actions .button { display: none; }
body[data-module-focus] #main-content .test-hero-actions { margin-top: 8px; }
body[data-module-focus] #main-content .test-center-catalog { padding-block: 20px 40px; }
body[data-module-focus] #main-content .test-center-controls { box-shadow: none; border-color: var(--hanyu-line); }
body[data-module-focus] #main-content .test-center-controls > section { padding: 18px; }
body[data-module-focus] #main-content .test-center-control__heading { margin-bottom: 12px; }
body[data-module-focus] #main-content .test-center-control__heading > span, body[data-module-focus] #main-content .test-center-control__heading small { display: none; }
body[data-module-focus] #main-content .test-center-selection { box-shadow: none; background: var(--hanyu-surface); border-color: var(--hanyu-line); }
body[data-module-focus] #main-content .authorized-paper-library { padding-block: 20px 40px; }
body[data-module-focus] #main-content .authorized-paper-library .seo-section-heading { margin-bottom: 20px; }
body[data-module-focus] #main-content .authorized-paper-library .seo-section-heading h2 { font-size: 22px; }
body[data-module-focus] #main-content .authorized-paper-library .seo-section-heading p { font-size: 14px; line-height: 1.6; }
body[data-module-focus] #main-content .module-library-specs { margin-bottom: 20px; }
body[data-module-focus] #main-content .module-library-specs .sample-paper-card__stats { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 12px 0; margin: 0; border: 0; border-block: 1px solid var(--hanyu-line); border-radius: 0; background: transparent; }
body[data-module-focus] #main-content .module-library-specs .sample-paper-card__stats > span { display: flex; gap: 8px; align-items: baseline; padding: 0; border: 0; }
body[data-module-focus] #main-content .module-library-specs small { font-size: 11px; color: var(--hanyu-muted); }
body[data-module-focus] #main-content .module-library-specs strong { font-size: 14px; }
body[data-module-focus] #main-content .authorized-paper-library .source-paper-card { display: grid; grid-template-columns: minmax(0, 1fr) 150px 176px; align-items: center; gap: 18px; padding: 18px; min-height: 0; overflow: visible; background: var(--hanyu-surface); border: 1px solid var(--hanyu-line); border-radius: 12px; box-shadow: none; }
body[data-module-focus] #main-content .source-paper-card .sample-paper-card__band { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 0; min-width: 0; border: 0; background: transparent; }
body[data-module-focus] #main-content .source-paper-card .sample-paper-card__band strong { font-size: 20px; }
body[data-module-focus] #main-content .source-paper-card .sample-paper-card__band span { font-size: 12px; line-height: 1.5; white-space: normal; word-break: normal; overflow-wrap: normal; color: var(--hanyu-muted); }
body[data-module-focus] #main-content .source-paper-card .sample-paper-card__footer { padding: 0; background: transparent; border: 0; }
body[data-module-focus] #main-content .module-paper-details { border: 0; padding: 0; background: transparent; }
body[data-module-focus] #main-content .module-paper-details .sample-paper-card__body { display: block; padding: 12px 0; }
body[data-module-focus] #main-content .module-paper-details .sample-paper-card__body > span { display: block; font-size: 11px; }
body[data-module-focus] #main-content .module-paper-details .sample-paper-card__body h2 { display: block; margin: 8px 0; font-size: 17px; }
body[data-module-focus] #main-content .module-paper-details .sample-paper-card__body p { display: block; font-size: 13px; line-height: 1.6; }
body[data-module-focus] #main-content .source-paper-card:has(.module-paper-details[open]) .module-paper-details { grid-column: 1 / -1; grid-row: 2; }
/* Culture: quality/operations, retaining the existing supported reading and deck. */
body[data-module-focus] #main-content .culture-flip-hero { padding-top: 28px; padding-bottom: 36px; gap: 32px; }
body[data-module-focus] #main-content .culture-flip-hero__intro h1 { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.2; }
body[data-module-focus] #main-content .culture-flip-hero__intro p { margin-block: 14px; }
body[data-module-focus] #main-content .culture-flip-hero__browse { background: var(--hanyu-primary); border-color: var(--hanyu-primary); box-shadow: none; }
body[data-module-focus] #main-content .culture-section .section-heading h2 { font-size: 26px; }
/* Working exam controls: volume disclosure and paper/answer links. */
body[data-module-focus] #main-content .source-mock-audio-settings { position: relative; }
body[data-module-focus] #main-content .source-mock-audio-settings > summary { min-height: 44px; padding: 12px 8px; cursor: pointer; font-size: 13px; }
body[data-module-focus] #main-content .source-mock-audio-settings label { padding: 12px; }
body[data-module-focus] #main-content .source-mock-audio-settings input { min-height: 44px; width: 100%; }
body[data-module-focus] #main-content .source-mock-view-link { min-height: 44px; padding: 10px 14px; border: 1px solid #adbcb1; border-radius: 8px; color: var(--hanyu-primary); background: var(--hanyu-surface); font-size: 13px; cursor: pointer; }
body[data-module-focus] #main-content .source-mock-paper, body[data-module-focus] #main-content .source-mock-answers { scroll-margin-top: 150px; }
body[data-module-focus] #main-content .source-mock-back { display: none; }
@media (max-width: 900px) {
  body[data-module-focus] #main-content .grammar-product__workspace { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body[data-module-focus] #main-content .module-grammar-browser { position: static; max-height: none; }
  body[data-module-focus] #main-content .module-grammar-browser .grammar-product__directory { max-height: 50dvh; overflow-y: auto; }
  body[data-module-focus] #main-content .module-grammar-browser .grammar-category-nav__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-module-focus] #main-content .module-practice-guide .practice-sidecar { grid-template-columns: minmax(0, 1fr); }
  body[data-module-focus] #main-content .source-paper-card .sample-paper-card__band { grid-column: 1 / -1; }
  body[data-module-focus] #main-content .authorized-paper-library .source-paper-card { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  body[data-module-focus] #main-content .source-paper-card:has(.module-paper-details[open]) .module-paper-details { grid-row: 3; }
}
@media (max-width: 720px) {
  body[data-module-focus] #main-content .vocabulary-page-hero.vocabulary-section { padding-top: 20px; }
  body[data-module-focus] #main-content .vocabulary-session-heading h1 { font-size: 28px; }
  body[data-module-focus] #main-content .vocabulary-session-heading p { font-size: 13px; line-height: 1.6; }
  body[data-module-focus] #main-content .vocab-level-dock__inner { gap: 8px; }
  body[data-module-focus] #main-content .vocabulary-level-browser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  body[data-module-focus] #main-content .vocabulary-level-browser a { padding: 8px; font-size: 13px; }
  body[data-module-focus] #main-content .vocabulary-toolbar { padding: 12px; }
  body[data-module-focus] #main-content .vocabulary-toolbar label input { min-height: 44px; font-size: 14px; }
  body[data-module-focus] #main-content .module-vocab-details .vocabulary-status-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-module-focus] #main-content .practice-standard-picker { padding: 16px; margin-bottom: 16px; }
  body[data-module-focus] #main-content .practice-standard-picker__controls { gap: 10px; }
  body[data-module-focus] #main-content .practice-standard-picker__status { font-size: 12px; line-height: 1.5; }
  body[data-module-focus] #main-content .practice-standard-levels { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  body[data-module-focus] #main-content .practice-standard-levels:has(button:nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body[data-module-focus] #main-content .practice-stage-new__top { padding: 12px 16px; gap: 8px; }
  body[data-module-focus] #main-content .practice-round-panel { padding: 20px 16px; }
  body[data-module-focus] #main-content .practice-round-intro { min-height: 0; padding: 0; }
  body[data-module-focus] #main-content .practice-round-intro h3 { font-size: 24px; }
  body[data-module-focus] #main-content .practice-tool-hero { padding-block: 20px; }
  body[data-module-focus] #main-content .practice-tool-hero h1 { font-size: 28px; }
  body[data-module-focus] #main-content .practice-tool-breadcrumb { margin-bottom: 12px; }
  body[data-module-focus] #main-content .practice-tool-hero__grid > div > p { font-size: 14px; }
  body[data-module-focus] #main-content .focused-practice-switch { padding: 12px; }
  body[data-module-focus] #main-content .focused-practice-switch__modes a { padding: 10px; min-height: 58px; }
  body[data-module-focus] #main-content .focused-practice-switch__modes a strong { font-size: 14px; }
  body[data-module-focus] #main-content .focused-practice-switch__modes a small { display: none; }
  body[data-module-focus] #main-content .practice-tool-panel-heading { margin-bottom: 14px; }
  body[data-module-focus] #main-content .practice-scenario-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-module-focus] #main-content .practice-scenario-track > div, body[data-module-focus] #main-content .practice-scenario-track > p { grid-column: 1 / -1; }
  body[data-module-focus] #main-content .practice-scenario-track > div > small { display: none; }
  body[data-module-focus] #main-content .practice-scenario-track > p { font-size: 12px; line-height: 1.6; }
  body[data-module-focus] #main-content .practice-scenario-picker > header { gap: 12px; }
  body[data-module-focus] #main-content .practice-scenario-picker > header h3 { font-size: 20px; }
  body[data-module-focus] #main-content .practice-scenario-choice { padding: 20px; }
  body[data-module-focus] #main-content .test-center-controls > section { padding: 14px; }
  body[data-module-focus] #main-content .test-center-control__heading { margin-bottom: 8px; }
  body[data-module-focus] #main-content .test-center-control__heading strong { font-size: 15px; }
  body[data-module-focus] #main-content .test-center-levels button { min-height: 48px; padding: 8px; }
  body[data-module-focus] #main-content .test-center-levels button span { display: none; }
  body[data-module-focus] #main-content .test-center-selection { padding: 18px; }
  body[data-module-focus] #main-content .test-center-selection__level { display: none; }
  body[data-module-focus] #main-content .test-center-selection__body { margin-block: 16px; }
  body[data-module-focus] #main-content .test-center-selection__body h3 { font-size: 23px; }
  body[data-module-focus] #main-content .test-center-selection__metrics { gap: 8px; }
  body[data-module-focus] #main-content .test-center-selection__metrics dd { font-size: 18px; }
  body[data-module-focus] #main-content .test-center-selection footer { margin-top: 16px; }
  body[data-module-focus] #main-content .test-product-nav__inner nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-module-focus] #main-content .test-product-nav__inner nav a { padding-block: 8px; }
  body[data-module-focus] #main-content .culture-flip-hero { gap: 20px; padding-top: 20px; }
  body[data-module-focus] #main-content .culture-flip-hero__intro h1 { font-size: 30px; }
  body[data-module-focus] #main-content .culture-flip-hero__intro .kicker { display: none; }
  body[data-module-focus] #main-content .culture-flip-hero__intro p { font-size: 14px; }
  body[data-module-focus] #main-content .culture-deck-stage { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-module-focus] #main-content .module-disclosure *, body[data-module-focus] #main-content .source-mock-view-link { scroll-behavior: auto; }
}
/* Compact source-page headings without changing their source facts. */
body[data-module-focus][data-page="grammar"] #main-content .seo-hero,
body[data-module-focus][data-page="mock"] #main-content .seo-hero { padding-block: 24px; }
body[data-module-focus][data-page="grammar"] #main-content .seo-hero__grid,
body[data-module-focus][data-page="mock"] #main-content .seo-hero__grid { gap: 20px; padding-block: 0; min-height: 0; }
body[data-module-focus][data-page="grammar"] #main-content .seo-hero h1,
body[data-module-focus][data-page="mock"] #main-content .seo-hero h1 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.2; margin-top: 10px; }
body[data-module-focus][data-page="grammar"] #main-content .seo-hero__lead,
body[data-module-focus][data-page="mock"] #main-content .seo-hero__lead { font-size: 15px; line-height: 1.6; margin-top: 12px; }
body[data-module-focus][data-page="grammar"] #main-content .seo-hero__facts { display: none; }
body[data-module-focus][data-page="grammar"] #main-content .seo-breadcrumb,
body[data-module-focus][data-page="mock"] #main-content .seo-breadcrumb { margin-bottom: 18px; }
body[data-module-focus][data-page="mock"] #main-content .seo-hero__facts { display: flex; flex-wrap: wrap; gap: 16px 24px; padding: 16px; box-shadow: none; background: var(--hanyu-surface); border: 1px solid var(--hanyu-line); border-radius: 12px; }
body[data-module-focus][data-page="mock"] #main-content .seo-hero__facts > span { border: 0; padding: 0; background: transparent; min-height: 0; }
body[data-module-focus][data-page="mock"] #main-content .seo-hero__facts strong { font-size: 16px; }
body[data-module-focus][data-page="mock"] #main-content .seo-hero__facts:empty { display: none; }
@media (max-width: 720px) {
  body[data-module-focus][data-page="grammar"] #main-content .seo-hero__grid,
  body[data-module-focus][data-page="mock"] #main-content .seo-hero__grid { grid-template-columns: minmax(0, 1fr); }
  body[data-module-focus][data-page="grammar"] #main-content .seo-hero__eyebrow,
  body[data-module-focus][data-page="mock"] #main-content .seo-hero__eyebrow::before { display: none; }
  body[data-module-focus][data-page="mock"] #main-content .seo-hero__eyebrow { margin-top: 0; }
  body[data-module-focus][data-page="grammar"] #main-content .seo-hero__grid h1 em { display: inline; margin-left: 8px; font-size: 16px; }
  body[data-module-focus][data-page="grammar"] #main-content .seo-hero__lead { display: none; }
  body[data-module-focus][data-page="grammar"] #main-content .grammar-product__switch { margin-bottom: 16px; }
  /* Active source papers replace the global navigation with a compact return link. */
  body[data-module-focus]:is([data-source-mock-phase="listening"], [data-source-mock-phase="transfer"], [data-source-mock-phase="reading"], [data-source-mock-phase="writing"]) { --site-header-height: 0px; }
  body[data-module-focus]:is([data-source-mock-phase="listening"], [data-source-mock-phase="transfer"], [data-source-mock-phase="reading"], [data-source-mock-phase="writing"]) :is([data-site-header], .exam-context-bar, .test-product-nav, main > .seo-hero) { display: none; }
  body[data-module-focus]:is([data-source-mock-phase="listening"], [data-source-mock-phase="transfer"], [data-source-mock-phase="reading"], [data-source-mock-phase="writing"]) main { padding-top: 0; }
  body[data-module-focus] #main-content .source-mock-sticky-controls,
  body[data-module-focus] #main-content .source-mock-stage__header--timed { top: 0; }
  body[data-module-focus] #main-content .source-mock-back { display: inline-flex; min-height: 44px; align-items: center; color: inherit; font-size: 13px; }
  body[data-module-focus] #main-content .source-mock-audio { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; padding: 4px 12px; }
  body[data-module-focus] #main-content .source-mock-audio > div:first-of-type > span,
  body[data-module-focus] #main-content .source-mock-audio > div:first-of-type > small { display: none; }
  body[data-module-focus] #main-content .source-mock-audio > div:first-of-type strong { font-size: 13px; }
  body[data-module-focus] #main-content .source-mock-audio__progress { grid-column: 1 / -1; grid-row: 2; height: 3px; }
  body[data-module-focus] #main-content .source-mock-audio-settings { grid-column: 3; grid-row: 1; }
  body[data-module-focus] #main-content .source-mock-audio-settings[open] label { position: absolute; z-index: 10; right: 0; width: 210px; color: #fff; background: #1d2521; border-radius: 8px; box-shadow: 0 8px 24px #0003; }
  body[data-module-focus] #main-content .source-mock-section-switcher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px 12px; }
  body[data-module-focus] #main-content .source-mock-section-switcher--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-module-focus] #main-content .source-mock-section-switcher button { display: grid; min-width: 0; min-height: 44px; padding: 4px; gap: 2px; font-size: 12px; }
  body[data-module-focus] #main-content .source-mock-section-switcher button small { font-size: 11px; }
  body[data-module-focus] #main-content .source-mock-question-nav { scroll-margin-top: 130px; }
  body[data-module-focus] #main-content .source-mock-stage__header--timed { padding: 8px 12px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
  body[data-module-focus] #main-content .source-mock-stage__header--timed > strong { grid-column: auto; font-size: 12px; padding: 0; background: transparent; }
  body[data-module-focus] #main-content .source-mock-stage__header--timed > div:first-of-type { display: none; }
  body[data-module-focus] #main-content .source-mock-countdown { min-width: 0; padding: 8px; }
  body[data-module-focus] #main-content .source-mock-countdown strong { font-size: 18px; }
}
/* Content-first headers and consistent mobile word rows. */
body[data-module-focus] #main-content :is(.practice-hero, .practice-tool-hero, .seo-hero) .module-brand-icon { display: none; }
body[data-module-focus] #main-content .focused-practice-switch__modes a { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; }
body[data-module-focus] #main-content .test-center-control__heading { display: block; }
body[data-module-focus] #main-content .practice-start-card { min-height: 0; padding: 20px; gap: 16px; }
body[data-module-focus] #main-content .practice-start-card__icon { display: none; }
body[data-module-focus] #main-content .practice-start-card__copy h3 { margin-block: 8px; font-size: 24px; }
body[data-module-focus] #main-content .practice-start-card__copy p { font-size: 14px; line-height: 1.6; }
body[data-module-focus] #main-content .practice-start-card__mix { margin-top: 12px; }
body[data-module-focus] #main-content .practice-standard-picker { border-radius: 12px; }
body[data-module-focus] #main-content .source-paper-card .sample-paper-card__footer a { min-height: 44px; box-shadow: none; }
body[data-module-focus] #main-content .source-mock-audio > [hidden] { display: none !important; }
@media (max-width: 720px) {
  body[data-module-focus] #main-content .vocabulary-workspace { margin-top: 20px; }
  body[data-module-focus] #main-content [data-vocab-list] > [data-vocab-word] {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; grid-template-rows: auto auto auto;
    gap: 4px 12px; min-height: 110px; padding: 16px; background: var(--hanyu-surface); text-align: left;
  }
  body[data-module-focus] #main-content [data-vocab-list] > [data-vocab-word]:hover { background: #f0f4ec; }
  body[data-module-focus] #main-content .vocabulary-row__index { display: none; }
  body[data-module-focus] #main-content .vocabulary-row__forms { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; justify-content: flex-start; gap: 12px; text-align: left; }
  body[data-module-focus] #main-content .vocabulary-row__word { font-size: 28px; text-align: left; }
  body[data-module-focus] #main-content .vocabulary-row__traditional { font-size: 12px; }
  body[data-module-focus] #main-content .vocabulary-row__pinyin { grid-column: 1; grid-row: 2; font-size: 14px; }
  body[data-module-focus] #main-content .vocabulary-row__meaning { grid-column: 1 / 3; grid-row: 3; font-size: 14px; line-height: 1.6; text-align: left; justify-self: start; }
  body[data-module-focus] #main-content .vocabulary-row__pos { grid-column: 2; grid-row: 1; background: transparent; border: 0; font-size: 12px; }
  body[data-module-focus] #main-content .vocabulary-row__arrow { grid-column: 3; grid-row: 1 / 4; align-self: center; background: transparent; }
  body[data-module-focus] #main-content .practice-hero .page-hero { padding-block: 20px 12px; }
  body[data-module-focus] #main-content .practice-start-card { padding: 16px; }
  body[data-module-focus] #main-content .practice-start-card__copy > span { display: none; }
  body[data-module-focus] #main-content .practice-standard-picker__copy h2 { margin: 0; }
  body[data-module-focus] #main-content .practice-standard-picker { display: block; }
  body[data-module-focus] #main-content .practice-standard-picker__copy { margin-bottom: 12px; }
  body[data-module-focus] #main-content .practice-tool-hero .kicker,
  body[data-module-focus] #main-content .practice-tool-hero__grid > div > p { display: none; }
  body[data-module-focus] #main-content .practice-tool-hero h1 { margin-top: 10px; }
  body[data-module-focus] #main-content .practice-tool-section { padding-top: 0; }
  body[data-module-focus] #main-content .practice-tool-panel-heading { padding-bottom: 12px; }
  body[data-module-focus] #main-content .practice-tool-panel-heading > span { display: none; }
  body[data-module-focus] #main-content .test-center-selection__body { display: block; }
  body[data-module-focus] #main-content .test-center-selection__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-module-focus][data-page="mock"] #main-content .seo-hero__facts { gap: 16px; }
  body[data-module-focus][data-page="mock"] #main-content .seo-hero__facts > span { flex: 1 1 90px; }
}
body[data-module-focus] #main-content .module-library-about { margin-bottom: 16px; }
body[data-module-focus] #main-content .module-library-about .seo-section-heading { display: block; padding: 0; margin: 0; }
body[data-module-focus] #main-content .module-library-about .seo-section-heading h2 { font-size: 18px; }
body[data-module-focus] #main-content .module-library-about .seo-hero__facts { display: flex; gap: 20px; flex-wrap: wrap; border: 0; padding: 12px 0; }
body[data-module-focus] #main-content .module-library-about p { font-size: 14px; line-height: 1.6; }
body[data-module-focus] #main-content .practice-start-card { background: var(--hanyu-surface); box-shadow: none; border: 0; }
body[data-module-focus] #main-content .practice-start-card::before,
body[data-module-focus] #main-content .practice-start-card::after { display: none; }
body[data-module-focus] #main-content .practice-stage-new:has([data-round-start]) :is(.practice-stage-new__top, .practice-stage-new__progress) { display: none; }
@media (max-width: 720px) {
  body[data-module-focus] #main-content .practice-scenario-track > label { grid-column: auto; grid-row: auto; }
  body[data-module-focus] #main-content .practice-scenario-track > label select { width: 100%; min-height: 44px; }
  body[data-module-focus] #main-content .source-mock-section-switcher button:nth-of-type(n) { grid-column: auto; grid-row: auto; }
  body[data-module-focus] #main-content .practice-round-panel { min-height: 0; padding: 12px; }
  body[data-module-focus] #main-content .practice-stage-new { margin-top: 0; padding: 0; }
  body[data-module-focus] #main-content .practice-command { padding-top: 0; }
  body[data-module-focus] #main-content .practice-start-card__copy p { margin-block: 8px; }
  body[data-module-focus] #main-content [data-tool-form] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body[data-module-focus] #main-content [data-tool-form] > :not(.practice-tool-field) { grid-column: 1 / -1; }
  body[data-module-focus] #main-content .practice-tool-field { margin: 0; }
  body[data-module-focus] #main-content .practice-tool-field select { min-width: 0; min-height: 44px; padding: 10px; font-size: 14px; }
  body[data-module-focus] #main-content .practice-tool-setup { min-height: 0; }
  body[data-module-focus] #main-content .test-center-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body[data-module-focus] #main-content .test-center-controls > section { border-bottom: 0; }
  body[data-module-focus] #main-content .test-center-segmented { display: grid; grid-template-columns: minmax(0, 1fr); padding: 4px; }
  body[data-module-focus] #main-content .test-center-segmented button { min-height: 44px; padding: 10px; }
  body[data-module-focus] #main-content .test-center-segmented button small { display: none; }
  body[data-module-focus] #main-content .test-center-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  body[data-module-focus] #main-content .test-center-levels button { min-height: 44px; }
  body[data-module-focus] #main-content .test-center-help { font-size: 12px; line-height: 1.5; margin-top: 8px; }
}
body[data-module-focus] #main-content .source-mock-audio > div:first-of-type strong,
body[data-module-focus] #main-content .source-mock-audio > div:first-of-type small { display: block; }
@media (max-width: 720px) {
  body[data-module-focus] #main-content .source-mock-audio > div:first-of-type small { display: none; }
}
body[data-module-focus] #main-content .source-mock-audio [data-resume-audio] { grid-column: 1 / -1; }
/* Keep desktop task copy in the flexible column after removing decorative cells. */
body[data-module-focus] #main-content .practice-start-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; }
body[data-module-focus] #main-content .practice-start-card__copy { min-width: 0; grid-column: 1; grid-row: 1; }
body[data-module-focus] #main-content .practice-start-card > button { grid-column: 2; grid-row: 1; }
body[data-module-focus] #main-content .vocabulary-page-hero__grid { min-height: 0; padding: 12px 0; }
body[data-module-focus] #main-content .vocabulary-session-heading { padding: 0; }
body[data-module-focus] #main-content .module-grammar-browser .grammar-product__search { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; }
body[data-module-focus] #main-content .module-grammar-browser .grammar-product__search input { width: 100%; min-width: 0; min-height: 44px; font-size: 14px; }
body[data-module-focus] #main-content .module-grammar-categories { padding-inline: 10px; }
body[data-module-focus] #main-content .module-grammar-categories .grammar-category-nav__heading { display: none; }
body[data-module-focus] #main-content .source-paper-card .sample-paper-card__band { flex-direction: row; justify-content: flex-start; align-items: center; min-height: 0; }
body[data-module-focus] #main-content .source-paper-card .sample-paper-card__band span { margin: 0; }
body[data-module-focus] #main-content .focused-practice-switch { display: block; }
body[data-module-focus] #main-content .focused-practice-switch__modes { display: grid; width: 100%; }
body[data-module-focus] #main-content [data-tool-form] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body[data-module-focus] #main-content [data-tool-form][hidden] { display: none !important; }
body[data-module-focus] #main-content [data-tool-form] > :not(.practice-tool-field) { grid-column: 1 / -1; }
body[data-module-focus] #main-content .practice-tool-workspace:has(.practice-tool-trainer[data-tool-state="idle"]) { min-height: 0; border: 0; background: transparent; box-shadow: none; }
body[data-module-focus] #main-content [data-vocab-list] > [data-vocab-word] { display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; grid-template-rows: auto auto auto; gap: 4px 12px; min-height: 110px; padding: 16px; background: var(--hanyu-surface); text-align: left; }
body[data-module-focus] #main-content .vocabulary-row__index { display: none; }
body[data-module-focus] #main-content .vocabulary-row__forms { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; justify-content: flex-start; gap: 12px; text-align: left; }
body[data-module-focus] #main-content .vocabulary-row__word { font-size: 28px; text-align: left; }
body[data-module-focus] #main-content .vocabulary-row__pinyin { grid-column: 1; grid-row: 2; font-size: 14px; }
body[data-module-focus] #main-content .vocabulary-row__meaning { grid-column: 1 / 3; grid-row: 3; font-size: 14px; line-height: 1.6; text-align: left; justify-self: start; }
body[data-module-focus] #main-content .vocabulary-row__pos { grid-column: 2; grid-row: 1; background: transparent; border: 0; font-size: 12px; }
body[data-module-focus] #main-content .vocabulary-row__arrow { grid-column: 3; grid-row: 1 / 4; align-self: center; background: transparent; }
@media (max-width: 720px) {
  body[data-module-focus] #main-content .practice-start-card { grid-template-columns: minmax(0, 1fr); }
  body[data-module-focus] #main-content .practice-start-card > button { grid-column: 1; grid-row: auto; }
}
body[data-module-focus] #main-content .practice-sidecar:not(:has(.practice-sidecar__next:not([hidden]))) { display: none; }
body[data-module-focus] #main-content .module-practice-guide > section { padding: 16px 0; border: 0; background: transparent; box-shadow: none; }
body[data-module-focus] #main-content .vocabulary-row__forms { flex-wrap: wrap; }
/* quality/operations: keep footer destinations available without a long mobile list. */
body[data-module-focus] .site-footer .module-footer-group { border: 0; padding: 0; color: #f8fafc; background: transparent; }
body[data-module-focus] .site-footer .module-footer-group > summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-size: 15px; font-weight: 700; }
body[data-module-focus] .site-footer .module-footer-group > div { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; }
body[data-module-focus] .site-footer .module-footer-group a { display: flex; align-items: center; min-height: 44px; color: #cbd5e1; font-size: 14px; }
body[data-module-focus] .site-footer .module-footer-group :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 720px) {
  body[data-module-focus] .site-footer .footer-grid { display: block; }
  body[data-module-focus] .site-footer .module-footer-group { margin-top: 8px; border-top: 1px solid #334155; }
  body[data-module-focus] .site-footer .footer-brand { margin-bottom: 20px; }
}
body[data-module-focus] #main-content .module-test-progress:has(.test-status-strip[hidden]) { display: none !important; }
body[data-module-focus] #main-content :is(.module-test-progress, .module-test-guide) { margin-block: 20px; }
body[data-module-focus] #main-content .module-test-guide .shell,
body[data-module-focus] #main-content .module-test-progress .shell { width: 100%; }
body[data-module-focus] #main-content .practice-round-panel:has([data-round-start]) { min-height: 0; }
body[data-module-focus] #main-content .practice-stage-new:has([data-round-start]) { min-height: 0; }
body[data-module-focus] #main-content .practice-tool-workspace:has(.practice-tool-trainer[data-tool-state="idle"]) .practice-tool-setup { height: auto; min-height: 0; }

/* Shared components: scope to learning UI, leaving lesson glyphs and score semantics intact. */
body:is([data-page="home"], [data-module-focus]) #main-content :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--hanyu-font); color: var(--hanyu-ink); letter-spacing: -.035em;
}
body:is([data-page="home"], [data-module-focus]) #main-content :is(
  .modern-button, .button, [data-round-start], [data-round-next], [data-round-skip],
  [data-tool-start], [data-tool-next], [data-summary-restart], .practice-tool-actions button,
  .grammar-model__actions button, .grammar-lesson__footer button, .grammar-lesson__footer a,
  .source-mock-view-link, [data-start-source-mock], .test-library-tools button
) {
  min-height: 48px; border-radius: var(--hanyu-control-radius); box-shadow: none;
  font-family: var(--hanyu-font); font-size: 15px; font-weight: 650; line-height: 1.4;
  letter-spacing: 0; text-transform: none; cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
body:is([data-page="home"], [data-module-focus]) #main-content :is(
  .modern-button, .button--dark, [data-round-start], [data-round-next],
  [data-tool-start], [data-tool-next], [data-grammar-next], [data-test-selection-primary], [data-start-source-mock]
) {
  color: #fff; background: var(--hanyu-primary); border: 1px solid var(--hanyu-primary);
  padding: 12px 20px;
}
body:is([data-page="home"], [data-module-focus]) #main-content :is(
  .modern-button, .button--dark, [data-round-start], [data-round-next],
  [data-tool-start], [data-tool-next], [data-grammar-next], [data-test-selection-primary], [data-start-source-mock]
):not(:disabled):hover { background: var(--hanyu-primary-hover); border-color: var(--hanyu-primary-hover); box-shadow: none; transform: none; }
body:is([data-page="home"], [data-module-focus]) #main-content :is(
  .modern-button, .button, [data-round-start], [data-round-next], [data-tool-start], [data-tool-next]
) > span:not(.ph) { color: inherit; font-size: inherit; font-family: inherit; }
body[data-module-focus] #main-content :is(
  [data-round-skip], [data-grammar-complete], .grammar-model__actions button,
  .source-mock-view-link, .test-library-tools button
) { border: 1px solid var(--hanyu-line); color: var(--hanyu-primary); background: var(--hanyu-surface); padding: 10px 16px; }
body[data-module-focus] #main-content :is(
  [data-round-skip], [data-grammar-complete], .grammar-model__actions button,
  .source-mock-view-link, .test-library-tools button
):not(:disabled):hover { border-color: var(--hanyu-primary); background: var(--hanyu-selected); }

/* Selected choices are lighter than the action that starts a session. */
body:is([data-page="home"], [data-module-focus]) #main-content :is(
  .home-standard-picker button, .practice-standard-buttons button, .practice-standard-levels button,
  [data-test-version], [data-test-level], .focused-practice-switch__modes a,
  .grammar-product__switch a, .vocabulary-level-browser a, .vocabulary-edition-browser a
) {
  min-height: 44px; border-radius: var(--hanyu-control-radius); box-shadow: none;
  border: 1px solid var(--hanyu-line); color: var(--hanyu-muted); background: var(--hanyu-surface);
  font-family: var(--hanyu-font); font-size: 14px; font-weight: 650; line-height: 1.4;
  transition: background-color 140ms ease, border-color 140ms ease; transform: none;
}
body:is([data-page="home"], [data-module-focus]) #main-content :is(
  .home-standard-picker button, .practice-standard-buttons button, .practice-standard-levels button,
  [data-test-version], [data-test-level], .focused-practice-switch__modes a,
  .grammar-product__switch a, .vocabulary-level-browser a, .vocabulary-edition-browser a
):is([aria-pressed="true"], [aria-current="page"], [aria-current="location"], .is-active) {
  border-color: var(--hanyu-primary); color: var(--hanyu-primary); background: var(--hanyu-selected);
  box-shadow: inset 0 0 0 1px var(--hanyu-primary); transform: none;
}
body:is([data-page="home"], [data-module-focus]) #main-content :is(
  .home-standard-picker button, .practice-standard-buttons button, .practice-standard-levels button,
  [data-test-version], [data-test-level], .focused-practice-switch__modes a,
  .grammar-product__switch a, .vocabulary-level-browser a, .vocabulary-edition-browser a
):hover { border-color: var(--hanyu-primary); background: var(--hanyu-selected); transform: none; }
body[data-module-focus] #main-content :is(.practice-standard-buttons, .practice-standard-levels) button strong {
  color: inherit; font-family: var(--hanyu-font); font-size: 14px;
}
body[data-module-focus] #main-content :is(.focused-practice-switch__modes a, .grammar-product__switch a) :is(strong, small, span) { color: inherit; }
body[data-module-focus] #main-content [data-grammar-topic][aria-pressed="true"] {
  color: var(--hanyu-primary); background: var(--hanyu-selected); box-shadow: inset 3px 0 var(--hanyu-primary);
}

/* Inputs, disclosure, cards, and the same readable focus treatment throughout. */
body[data-module-focus] #main-content :is(
  .practice-tool-field select, .practice-scenario-track select, .test-library-tools input,
  .vocabulary-toolbar input, .grammar-product__search input
) {
  min-height: 48px; border: 1px solid #879b8f; border-radius: var(--hanyu-control-radius);
  background: var(--hanyu-surface); color: var(--hanyu-ink); font: 16px/1.5 var(--hanyu-font);
  padding: 10px 12px;
}
body[data-module-focus] #main-content input::placeholder { color: var(--hanyu-muted); opacity: 1; }
body[data-module-focus] #main-content .vocabulary-toolbar input { padding-left: 40px; }
body[data-module-focus] #main-content :is(
  .practice-standard-picker, .practice-stage-new, .practice-lab__workspace, .practice-tool-setup, .practice-scenario-track,
  .practice-scenario-choice, .source-paper-card, .test-center-selection, .vocabulary-toolbar,
  .grammar-product__lesson, .test-library-tools
) {
  border: 1px solid var(--hanyu-line); border-radius: var(--hanyu-card-radius);
  box-shadow: none; background: var(--hanyu-surface);
}
body[data-module-focus] #main-content .module-disclosure { border-radius: var(--hanyu-control-radius); }
body[data-module-focus] #main-content .module-disclosure > summary { color: var(--hanyu-ink); font: 650 14px/1.5 var(--hanyu-font); }
body:is([data-page="home"], [data-module-focus]) :is(#main-content, [data-header]) :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--hanyu-primary); outline-offset: 3px;
}
body[data-module-focus] #main-content :is(button, input, select):disabled {
  opacity: 1; cursor: not-allowed; color: var(--hanyu-muted); background: #edf0eb;
  border-color: var(--hanyu-line); box-shadow: none; transform: none;
}
body[data-module-focus] #main-content button[aria-busy="true"] { cursor: progress; }
body[data-module-focus] #main-content :is([role="alert"], [data-state="error"]) { scroll-margin-top: 110px; }

/* Reusable hierarchy: labels stay quiet, task text stays readable. */
body[data-module-focus] #main-content :is(
  .practice-standard-picker__status, .practice-tool-setup-note, .practice-tool-field > span,
  .practice-standard-picker__control > legend, .practice-start-card__copy > span,
  .grammar-product__search label, .grammar-lesson__header > div > span
) { color: var(--hanyu-muted); font-family: var(--hanyu-font); font-size: 12px; line-height: 1.5; letter-spacing: .03em; }
body[data-module-focus] #main-content :is(
  .practice-start-card__copy p, .practice-scenario-choice__goal, .grammar-lesson__header p,
  .vocabulary-row__meaning, .practice-tool-hero__grid > div > p
) { font-family: var(--hanyu-font); font-size: 16px; line-height: 1.6; color: var(--hanyu-muted); }
body[data-module-focus] #main-content .practice-start-card__copy h3 { font-weight: 650; line-height: 1.35; letter-spacing: -.025em; }
body[data-module-focus] #main-content .practice-start-card__copy { align-self: center; }
body[data-module-focus] #main-content .practice-start-card__mix span { color: var(--hanyu-muted); font-size: 12px; }
body[data-module-focus] #main-content .practice-command { padding-top: var(--hanyu-space-5); }
body[data-module-focus] #main-content .practice-tool-panel-heading { margin-bottom: var(--hanyu-space-3); }
body[data-module-focus] #main-content .practice-tool-panel-heading strong { font: 650 18px/1.4 var(--hanyu-font); color: var(--hanyu-ink); }
body[data-module-focus] #main-content .practice-tool-panel-heading small { display: none; }
body[data-module-focus] #main-content .practice-tool-hero h1 { font-size: clamp(30px, 3.5vw, 40px); }
body[data-module-focus] #main-content .grammar-product__lesson { padding: var(--hanyu-space-5); }
body[data-module-focus][data-page="grammar"] #main-content .seo-hero { padding-block: var(--hanyu-space-3); }
body[data-module-focus][data-page="grammar"] #main-content .seo-hero__eyebrow { display: none; }
body[data-module-focus][data-page="grammar"] #main-content .seo-breadcrumb { margin-bottom: var(--hanyu-space-2); }
body[data-module-focus][data-page="grammar"] #main-content .seo-hero h1 em { display: inline; margin-left: 12px; font-size: 16px; color: var(--hanyu-muted); }
body[data-module-focus] #main-content .grammar-product__search { background: transparent; }

/* HSK-BASE-010/011: move the active grammar lesson closer to the first viewport. */
body[data-module-focus][data-page="grammar"] #main-content .seo-hero { padding-block: 10px 8px; }
body[data-module-focus][data-page="grammar"] #main-content .seo-breadcrumb { margin-bottom: 6px; }
body[data-module-focus][data-page="grammar"] #main-content .seo-hero h1 { margin-top: 4px; font-size: clamp(27px, 3.2vw, 38px); }
body[data-module-focus][data-page="grammar"] #main-content .seo-hero__lead { max-width: 720px; margin-top: 7px; font-size: 14px; line-height: 1.5; }
body[data-module-focus][data-page="grammar"] #main-content .grammar-product__switch { margin-bottom: 12px; padding: 5px; }
body[data-module-focus][data-page="grammar"] #main-content .grammar-product__switch a { min-height: 44px; }
body[data-module-focus][data-page="grammar"] #main-content .grammar-product__workspace { gap: 18px; }
body[data-module-focus][data-page="grammar"] #main-content .grammar-product__lesson { padding: 22px; }

@media (max-width: 760px) {
  body[data-module-focus][data-page="grammar"] #main-content .seo-hero { padding-block: 8px 6px; }
  body[data-module-focus][data-page="grammar"] #main-content .grammar-product__switch { margin-bottom: 10px; }
  body[data-module-focus][data-page="grammar"] #main-content .grammar-product__lesson { padding: 20px 16px; }
}

/* A path is useful context. Only an unresolved saved path needs warning emphasis. */
body[data-module-focus][data-page][class] [data-exam-context][data-exam-context-state] {
  color: var(--hanyu-muted); background: transparent; border-bottom: 1px solid var(--hanyu-line);
}
body[data-module-focus][data-page][class] [data-exam-context][data-exam-context-state="attention"] { color: #694c16; background: #fff1cf; }
body[data-module-focus][data-page][class] [data-exam-context][data-exam-context-state] .exam-context-bar__inner {
  min-height: 44px; padding-block: 0; gap: 16px; align-items: center;
}
body[data-module-focus][data-page][class] [data-exam-context][data-exam-context-state] a { min-height: 44px; display: inline-flex; align-items: center; color: var(--hanyu-primary); font-size: 13px; }
body[data-module-focus][data-page][class] [data-exam-context][data-exam-context-state="empty"] strong { font-size: 13px; font-weight: 500; }
body[data-module-focus][data-page][class] [data-exam-context][data-exam-context-state]:not([data-exam-context-state="empty"]) .exam-context-bar__inner > span { flex-wrap: wrap; padding-block: 8px; gap: 4px 12px; }
body[data-module-focus][data-page][class] [data-exam-context][data-exam-context-state] em { display: block; font-style: normal; font-size: 12px; color: inherit; }
body[data-module-focus][data-page][class] [data-exam-context][data-exam-context-state] strong { white-space: normal; }

/* Header controls use the same shape, without the previous extruded shadow. */
body[data-module-focus] :is(#main-content, [data-header]) .nav-actions .button { border-radius: var(--hanyu-control-radius); box-shadow: none; font-size: 14px; }
body[data-page="home"].home-modern { --home-ink: var(--hanyu-ink); --home-muted: var(--hanyu-muted); --home-green: var(--hanyu-primary); --home-line: var(--hanyu-line); }
body[data-page="home"] #main-content .hero-photo img { object-position: center; }

@media (max-width: 720px) {
  body[data-module-focus] #main-content .grammar-product__lesson { padding: 20px 16px; }
  body[data-module-focus] #main-content .practice-command { padding-top: 0; }
  body[data-module-focus] #main-content .practice-start-card__copy h3 { font-size: 21px; }
  body[data-module-focus] #main-content .practice-start-card__copy p { font-size: 15px; }
  body[data-module-focus] #main-content .practice-start-card > button { width: 100%; }
  body[data-module-focus] #main-content .focused-practice-switch__modes a { padding: 12px; }
  body[data-module-focus] #main-content .focused-practice-switch__modes a strong { font-size: 14px; }
  body[data-module-focus][data-page][class] [data-exam-context][data-exam-context-state] .exam-context-bar__inner { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  body:is([data-page="home"], [data-module-focus]) #main-content :is(button, a, input, select) { transition: none; }
}