/* Sudut Mandarin / Paper & Ink. Shared presentation layer; learning state stays unchanged. */
@import url('fonts/latin.css');
@import url('fonts/noto-serif-sc.css');

:root, body.learn-body {
  --ink: #292c28;
  --ink-2: #444740;
  --muted: #686b62;
  --paper: #f5f4ee;
  --paper-2: #eeece3;
  --white: #fffefa;
  --red: #a63d32;
  --red-dark: #853026;
  --green: #3b6555;
  --line: #e0dfd5;
  --line-dark: #c2c4b6;
  --radius: 10px;
  --shadow: 0 8px 28px #292c2808;
  --font-body: 'DM Sans', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Source Serif 4', Georgia, 'Noto Serif SC', serif;
  --font-hanzi: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.7;
}
body::before { display: none; }
body { font-size: 16px; }
button, input, textarea, select { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
::selection { background: #ecd3c6; color: var(--ink); }
:focus-visible, .learn-body :focus-visible { outline: 3px solid #a63d3290; outline-offset: 4px; }
.skip-link { position: fixed; top: 8px; left: 20px; z-index: 110; transform: translateY(-180%); padding: 10px 16px; background: var(--ink); color: var(--white); border-radius: 5px; font-size: 14px; }
.skip-link:focus { transform: none; }
.learn-body input, .learn-body select, .learn-body textarea { font-size: 16px; }
input[type=checkbox], input[type=radio] { accent-color: var(--red); }
input, textarea, select { color: var(--ink); }
input::placeholder, textarea::placeholder { color: #75786f; opacity: 1; }
button:disabled { cursor: not-allowed; }
.button, .learn-body .button { border-radius: 7px; min-height: 46px; background: var(--red); border-color: var(--red); color: #fffefa; font-size: 14px; font-weight: 600; padding: 11px 20px; letter-spacing: 0; gap: 10px; box-shadow: none; transition: background .15s, border-color .15s; }
.button:hover, .learn-body .button:hover { background: var(--red-dark); border-color: var(--red-dark); transform: none; }
.button-ghost, .learn-body .button-ghost { color: var(--ink); border-color: var(--line-dark); background: transparent; }
.button-ghost:hover, .learn-body .button-ghost:hover { color: var(--ink); background: var(--paper-2); border-color: #989d8d; }
.button:disabled, .button:disabled:hover, .learn-body .button:disabled:hover { background: var(--paper-2); border-color: var(--line); color: var(--muted); opacity: 1; transform: none; }
.button-small, .learn-body .button-small { min-height: 40px; padding: 8px 14px; font-size: 13px; }
.plain-button, .learn-body .plain-button { color: var(--red); font-size: 13px; min-height: 40px; }
.eyebrow, .learn-body .eyebrow, .course-label { color: var(--red); font-size: 11px; font-weight: 600; letter-spacing: .11em; line-height: 1.6; }
.brand { font-size: 21px; gap: 11px; letter-spacing: -.035em; }
.brand-name { display: block; line-height: 1.08; }
.brand-name small { display: block; margin-top: 7px; line-height: 1.5; }
.brand-mark, .lms-sidebar .brand-mark, .placement-header .brand-mark { background: var(--red); border-radius: 3px; width: 37px; height: 40px; flex-shrink: 0; font: 600 25px/1 var(--font-hanzi); box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 4px #fffefa88; }
.brand small, .lms-sidebar .brand small, .placement-header .brand small { font-family: var(--font-body); font-size: 9px; letter-spacing: .08em; color: var(--muted); }
[lang=zh-CN], .hanzi, .example-hanzi, .understand-vocabulary dt, .flashcard h2, .hsk1-vocab-grid strong, .lesson-icon, .level-badge, .feature-grid article>span { font-family: var(--font-hanzi); }

/* The front door: clear promise, a real lesson sample, no invented learner scores. */
.site-header { max-width: 1280px; height: 88px; padding-inline: 40px; }
.site-header nav { font-size: 14px; gap: 30px; }
.site-header nav a { min-height: 44px; display: inline-flex; align-items: center; }
.site-header .button { display: inline-flex; }
.hero { max-width: 1280px; min-height: 640px; grid-template-columns: 1.12fr .88fr; gap: 80px; padding: 80px 40px 90px; }
.hero-copy::before, .hero-card::before { display: none; }
.hero h1 { font-family: var(--font-display); font-size: clamp(44px, 5.1vw, 68px); font-weight: 500; line-height: 1.12; letter-spacing: -.045em; max-width: 650px; }
.hero h1 span { font-family: inherit; color: var(--red); font-weight: 500; }
.hero .lead { font-size: 17px; line-height: 1.85; margin: 24px 0 28px; max-width: 510px; }
.hero-actions { flex-wrap: wrap; gap: 20px; }
.text-link { font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; border-bottom-color: var(--line-dark); }
.trust-list { margin-top: 24px; font-size: 12px; gap: 20px; flex-wrap: wrap; }
.trust-list li::before { content: '✓'; color: var(--green); margin-right: 7px; }
.hero-card { padding: 0; border-radius: 12px; overflow: hidden; background: var(--white); box-shadow: var(--shadow); }
.sample-top { padding: 20px 26px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.sample-tag { color: var(--red); background: #f5e9e2; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: .07em; }
.sample-lesson { padding: 32px 28px 24px; }
.sample-lesson .eyebrow { margin-bottom: 18px; font-size: 10px; }
.sample-hanzi { font: 500 clamp(44px, 4.4vw, 61px)/1.6 var(--font-hanzi); margin: 4px 0 0; letter-spacing: .04em; color: var(--ink); }
.sample-pinyin { color: var(--red); font-size: 16px; margin: 3px 0 9px; }
.sample-meaning { font-size: 16px; margin: 0 0 24px; }
.sample-explanation { padding: 16px 18px; background: var(--paper); border-left: 2px solid var(--green); border-radius: 0 5px 5px 0; font-size: 13px; line-height: 1.8; color: var(--muted); }
.sample-explanation strong { color: var(--ink); }
.sample-steps { padding: 18px 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--muted); }
.sample-steps span:first-child { color: var(--red); font-weight: 600; }
.sample-steps i { font-style: normal; color: #989d8d; }
.editorial-strip { max-width: 1200px; margin: 0 auto; border-block: 1px solid var(--line); padding: 24px 0; display: flex; gap: 30px; justify-content: space-between; align-items: center; }
.editorial-strip>span { font: 500 28px var(--font-hanzi); color: var(--red); letter-spacing: .2em; }
.editorial-strip p { font-size: 14px; color: var(--muted); margin: 0; max-width: 620px; }
.section { padding: 82px max(40px, calc((100vw - 1200px)/2)); }
.section h2 { font-family: var(--font-display); font-size: clamp(32px, 3.5vw, 46px); font-weight: 500; line-height: 1.2; letter-spacing: -.035em; }
.section-intro { font-size: 16px; line-height: 1.85; margin: 18px 0 36px; }
.path-grid { border-color: var(--line-dark); }
.path-card { padding: 28px; min-height: 340px; }
.path-card .week { letter-spacing: .09em; font-size: 11px; }
.path-card .level-badge { height: 56px; margin: 22px 0 14px; font-size: 46px; }
.path-card h3 { font-size: 21px; letter-spacing: -.025em; }
.path-card p { line-height: 1.85; }
.path-card ul { font-size: 13px; line-height: 2; }
.path-card.dark { background: #354b40; }
.path-card.dark .week, .path-card.dark .level-badge { color: #ece8d9; }
.path-card.dark p { color: #d4dbd1; }
.tutor-preview-section { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; background: var(--paper-2); }
.tutor-copy p:not(.eyebrow) { color: var(--muted); font-size: 15px; line-height: 1.85; }
.tutor-preview-section .coach-card { padding: 24px; margin: 0; box-shadow: none; border-radius: 10px; }
.coach-head strong { font-size: 17px; }
.coach-head p { font-size: 12px; }
.spark { color: var(--red); border-color: var(--line-dark); border-radius: 4px; font: 500 22px var(--font-hanzi); }
.chat { max-width: 94%; font-size: 14px; line-height: 1.8; border-radius: 7px; }
.chat.user { background: #354b40; }
.coach-preview-note { font-size: 12px; }
.features { background: var(--white); }
.feature-grid { margin-top: 36px; border-color: var(--line-dark); }
.feature-grid article { padding: 28px 24px; }
.feature-grid article>span { font-size: 30px; }
.feature-grid h3 { font-size: 18px; margin-top: 16px; }
.feature-grid p { font-size: 14px; line-height: 1.85; }
.pricing { gap: 70px; grid-template-columns: minmax(0,1fr) 380px; }
.price-card { background: #354b40; border-radius: 10px; border-top: 3px solid var(--red); padding: 30px; }
.price-card>span { color: #ead9c4; font-size: 11px; letter-spacing: .08em; }
.price-card>p, .price-card>small { color: #d1d9cf; }
.price { font-family: var(--font-display); font-size: 56px; font-weight: 500; line-height: 1.3; }
.price-card .button { background: #fffefa; color: var(--ink); border-color: #fffefa; }
.price-card .button:hover { background: #ece8d9; border-color: #ece8d9; }
.price-card>small { display: block; margin-top: 12px; font-size: 12px; line-height: 1.7; }
.price-card li::before { color: #e2c5a7; }
.faq-section { padding-top: 24px; }
.faq-list { margin-top: 28px; max-width: 900px; }
.faq-list details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq-list summary { cursor: pointer; font-weight: 600; font-size: 16px; min-height: 34px; }
.faq-list p { color: var(--muted); font-size: 14px; line-height: 1.9; max-width: 75ch; }
footer { max-width: 1280px; padding: 32px 40px; font-size: 12px; }
.purchase-dialog { width: min(460px, calc(100vw - 32px)); padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); }
.purchase-dialog::backdrop { background: #292c2866; }
.purchase-dialog h2 { font-family: var(--font-display); font-size: 28px; line-height: 1.3; margin: 8px 0 14px; }
.purchase-dialog p { font-size: 14px; color: var(--muted); line-height: 1.85; }
.purchase-dialog .button { margin-top: 12px; }

/* Shared workspace: generous type, quieter secondary controls. */
.lms-sidebar { background: var(--white); padding-top: 28px; }
.lms-sidebar .brand { font-size: 22px; }
.sidebar-program { margin: 30px 9px 22px; padding-bottom: 20px; }
.sidebar-program .program-label, .nav-label { color: var(--muted); font-size: 10px; }
.sidebar-program strong { font-size: 14px; }
.sidebar-program>span:last-child { font-size: 12px; }
.workspace-tab { color: var(--muted); min-height: 46px; border-radius: 6px; font-size: 14px; gap: 12px; }
.workspace-tab [data-icon] { color: #777e70; }
.workspace-tab.active, .workspace-tab.active:hover { background: #f3e9e1; color: var(--red); }
.workspace-tab.active [data-icon] { color: var(--red); }
.workspace-tab:hover { background: var(--paper-2); }
.nav-section-title { font-size: 10px; color: var(--muted); letter-spacing: .08em; margin: 14px 12px 4px; }
.field-hint { font-size: 12px; color: var(--muted); display: block; margin-top: 6px; }
.local-preview-link { margin-top: 12px; }
.sidebar-bottom { padding-top: 32px; }
.help-link { font-size: 13px; }
.account-avatar { font-family: var(--font-hanzi); background: #f3e9e1; color: var(--red); border-radius: 5px; }
.account-tools strong { font-size: 12px; }.account-tools small { font-size: 10px; }
.account-menu { background: var(--white); box-shadow: var(--shadow); border-color: var(--line-dark); }
.account-menu .icon-button { font-size: 13px; min-height: 44px; }
.local-note { color: var(--muted); font-size: 10px; }
.learn-header { background: #fffefa; height: 76px; }
.header-location { font-size: 13px; }
.course-access { background: #eeefe6; color: var(--green); font-size: 11px; }
.header-student { font-family: var(--font-hanzi); color: var(--red); font-size: 20px; }
.header-student>span { font: 12px var(--font-body); }
.learn-body .product-view, .learn-body .product-view:not(.learn-shell) { padding-top: 36px; padding-bottom: 48px; }
.today-title-row h1, .view-heading h1, .sidebar h1, .practice-heading h1 { font-family: var(--font-display); font-weight: 500; font-size: 36px; line-height: 1.25; letter-spacing: -.035em; }
.today-title-row p, .sidebar .muted, .view-heading p, .practice-heading>div>p:last-child { color: var(--muted); font-size: 14px; line-height: 1.85; max-width: 65ch; }
.today-context strong { background: #eeefe6; color: var(--green); font-size: 12px; }
.dashboard-stats { gap: 0; margin: 24px 0 28px; background: var(--white); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.dashboard-stats>div { border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; padding: 18px 22px; }
.dashboard-stats>div:last-child { border: 0; }
.stat-icon { background: #eeefe6; color: var(--green); border-radius: 5px; }
.dashboard-stats strong { font-size: 25px; font-weight: 500; font-variant-numeric: tabular-nums; }
.dashboard-stats>div>div>span { font-size: 12px; }
.dashboard-stats strong small { color: var(--muted); font-size: 13px; }
.resume-card { border-radius: 10px; background: var(--white); grid-template-columns: 150px minmax(0,1fr); }
.resume-cover { background: #e9eddf; color: #3b5847; padding: 28px 18px; }
.resume-cover>span:first-child { font-family: var(--font-hanzi); font-size: 16px; color: var(--green); border-color: #c8d0bf; }
.resume-cover>strong { font-family: var(--font-hanzi); font-size: 58px; font-weight: 500; }
.resume-cover>small { font-size: 12px; }
.resume-cover .cover-foot { color: #53684f; font-size: 8px; }
.resume-content { padding: 30px 32px; }
.resume-content h2 { font-family: var(--font-display); font-size: 30px; font-weight: 500; line-height: 1.3; margin: 10px 0 12px; }
.resume-meta { color: var(--muted); font-size: 12px; margin: 10px 0 0; }
.resume-content>p:not(.resume-meta) { font-size: 14px; line-height: 1.85; max-width: 66ch; }
.resume-progress>div, .resume-progress strong { color: var(--muted); font-size: 12px; }
.resume-progress progress { height: 4px; }
.dashboard-disclosure { border-radius: 8px; background: var(--white); margin: 16px 0; padding: 16px 22px; }
.dashboard-disclosure>summary { font-size: 14px; min-height: 30px; }
.study-dashboard { background: var(--paper); border: 0; padding: 22px; }
.study-dashboard h2 { font-size: 20px; }.study-dashboard span { color: var(--red); }
.daily-plan, .focus-panel, .week-calendar, .missed-section, .report-panel, .weakness-panel, .recent-report, .metric { background: var(--white); border-color: var(--line); }
.focus-panel strong { font-family: var(--font-body); font-size: 44px; }.focus-panel p { font-size: 13px; }
.panel-title h2 { font-size: 20px; }.panel-title span { color: var(--muted); font-size: 11px; }
.task-item.selected { background: #eeefe6; }.task-copy strong { font-size: 14px; }.task-copy span span { font-size: 12px; color: var(--muted); }
.task-arrow:hover { background: var(--paper-2); color: var(--red); }.task-time, .plan-footer>span { color: var(--muted); font-size: 12px; }
.filter-group { background: var(--paper-2); }.filter { color: var(--muted); font-size: 13px; min-height: 40px; }
.filter.active { background: var(--white); color: var(--red); box-shadow: none; }
.learn-body select { border-color: var(--line-dark); background: var(--white); font-size: 14px; min-height: 42px; }
.overall-card { background: var(--white); }.overall-card small { color: var(--muted); font-size: 12px; }
.sidebar .storage-note { color: var(--muted); font-size: 12px; }
#path-workspace, .extra-materials, .practice-extras { background: var(--white); border-radius: 9px; }
.route-section-heading h2 { font-family: var(--font-display); font-size: 29px; font-weight: 500; }
.route-section-heading p:not(.eyebrow), .route-next>p:not(.eyebrow) { font-size: 14px; }
.route-next { background: #f4f5ed; border-color: var(--line); border-left: 3px solid var(--green); padding: 26px; }
.route-next h3 { font-size: 24px; line-height: 1.5; }
.route-timeline li { font-size: 13px; }.route-timeline .is-complete>span { background: #e9eee3; border-color: #cbd6c3; color: var(--green); }
.route-locked p, .route-map>p, .extra-materials>p, .route-target-settings p, .route-target-settings a { font-size: 13px; line-height: 1.85; }
.route-lesson:hover, .week-card:hover { background: var(--paper); }.route-lesson strong { font-size: 15px; }.route-lesson small { font-size: 12px; }
.route-disclosure>summary, .practice-extras>summary { font-size: 14px; min-height: 44px; }
.route-target-settings select { background: var(--white); }
.course-toolbar { background: var(--paper); }.module-search { background: var(--white); border-color: var(--line-dark); }.module-search input { font-size: 14px; }.module-search:focus-within { border-color: var(--red); box-shadow: 0 0 0 2px #f3e9e1; }
.preparation-library { background: var(--white); }.preparation-library-heading h3 { font-size: 23px; }
.week-card, .week-card:nth-child(even) { background: var(--white); padding-block: 23px; }.week-card.done { background: #f5f7ee; }
.week-number { background: var(--paper-2); color: var(--muted); }.week-info h3 { font-size: 16px; }.module-meta, .module-progress>span { color: var(--muted); font-size: 11px; }
.module-description { color: var(--muted); font-size: 13px; }.week-status>span { color: var(--muted); font-size: 11px; }.week-status strong { font-size: 13px; }
.level-pill { background: #f3e9e1; color: var(--red); font-size: 10px; }.level-pill.hsk2 { background: #e9eee3; color: var(--green); }
.calendar-day { background: var(--white); }.calendar-day.today { background: #f3e9e1; }.calendar-day.done { background: #e9eee3; }
.day-head span, .day-task span { font-size: 12px; color: var(--muted); }.day-task { font-size: 13px; }.calendar-toolbar h2 { font-size: 18px; }
.metric span { font-size: 12px; color: var(--muted); }.metric strong { font-size: 29px; font-weight: 500; }.report-row { font-size: 13px; }
.error-bar { background: var(--paper-2); }.error-bar i { background: var(--red); }.error-item { font-size: 13px; }.error-item span { overflow-wrap: anywhere; }

/* Practice & classroom share the same reading surface. */
.practice-picker { border: 0; gap: 16px; }.practice-picker article { border: 1px solid var(--line); border-radius: 9px; background: var(--white); padding: 28px; }
.practice-picker h2 { font-family: var(--font-display); font-weight: 500; font-size: 28px; }.practice-picker p { font-size: 14px; line-height: 1.85; }
.practice-picker article>span { font-size: 11px; }.practice-summary span { font-size: 11px; }
.listening-card, .reading-intro, .reading-question, .study-workspace { background: var(--white); border-color: var(--line); box-shadow: none; border-radius: 10px; }
.audio-button { background: var(--red); border-color: var(--red); min-height: 46px; font-size: 14px; }.audio-replay { border-color: var(--line-dark); color: var(--ink); min-height: 46px; }
.audio-heading, .audio-demo, .audio-speed, .audio-bottom, #audio-status { color: var(--muted); font-size: 13px; }.audio-heading #practice-part { color: var(--red); }
.audio-speed select { font-size: 14px; }.audio-timeline progress, .audio-volume input { accent-color: var(--green); }
.answer-choice, .guided-option, .reading-option { border-color: var(--line-dark); background: var(--white); border-radius: 7px; min-height: 56px; font-size: 16px; line-height: 1.75; }
.answer-choice.selected, .guided-option:has(input:checked), .reading-option:has(input:checked) { border-color: var(--red); background: #f7eee8; }
.answer-choice:focus-within, .reading-option:focus-within { outline: 3px solid #a63d3290; outline-offset: 3px; }
.answer-choice.correct, .reading-option.is-correct { background: #edf3e7; border-color: var(--green); }.answer-choice.wrong, .reading-option.is-wrong { background: #f8e9e4; border-color: var(--red); }
.guided-option input { accent-color: var(--red); }.option-marker, .choice-letter { color: var(--red); }
.answer-feedback, .study-feedback, .audio-transcript { background: var(--paper); color: var(--ink-2); font-size: 14px; }
.audio-transcript #transcript-text { color: var(--ink); font-size: 24px; }.audio-transcript small { color: var(--muted); font-size: 12px; }
.listening-picture { background: var(--paper); border-color: var(--line); }.listening-picture figcaption, .listening-picture summary { color: var(--muted); font-size: 12px; }
.practice-result { border: 1px solid var(--line); border-top: 3px solid var(--green); border-radius: 10px; }.practice-result>p:not(.eyebrow) { font-size: 15px; color: var(--muted); }
.reading-intro h2, .study-intro h2 { font-family: var(--font-display); font-weight: 500; font-size: 29px; }.reading-intro>p, .reading-discussion article p, .reading-history { color: var(--muted); font-size: 14px; }
.reading-top { color: var(--muted); }.reading-jumps button { background: var(--white); border-color: var(--line-dark); }.reading-jumps [aria-current] { background: #f3e9e1; border-color: var(--red); }
.reading-option small, .reading-section-scores span { color: var(--muted); }.reading-section-scores p, .reading-discussion article { border-color: var(--line); }
.result-actions { flex-wrap: wrap; justify-content: flex-start; gap: 12px; }.practice-result .result-actions { justify-content: center; }
.study-metrics { background: var(--white); }.study-metrics span { font-size: 12px; }.study-tabs button { font-size: 14px; min-height: 44px; }
.study-intro p { font-size: 14px; line-height: 1.9; }.study-muted { color: var(--muted); font-size: 13px; }
.study-sound { color: var(--green); background: #edf0e6; border-color: #cbd3c0; font-size: 12px; min-height: 40px; }.study-sound:hover, .study-sound[aria-pressed=true] { background: #e2e8d8; border-color: #9da991; }
.flashcard h2 { font: 500 68px/1.4 var(--font-hanzi); }.flash-pinyin { color: var(--red); }.flash-example { background: var(--paper); }.flash-ratings button { background: var(--white); border-color: var(--line-dark); min-height: 70px; }
.learn-body .lesson-dialog { background: var(--white); }.lesson-dialog .dialog-head, .lesson-dialog .lesson-actions, .lesson-dialog .dialog-footer { background: var(--white); border-color: var(--line); }
.lesson-dialog .dialog-head h2 { font-family: var(--font-body); font-size: 22px; font-weight: 600; }.dialog-level, .lesson-kicker { color: var(--red); font-size: 11px; }
.lesson-dialog .close-button { color: var(--muted); min-height: 42px; font-size: 13px; }.lesson-dialog .close-button:hover { background: var(--paper-2); }
.lesson-actions .score-input, .dialog-footer #save-message { color: var(--muted); font-size: 11px; }.tutor-tools summary { font-size: 12px; min-height: 36px; }.tutor-tools>div { background: var(--white); border-color: var(--line-dark); }
.session-nav { background: var(--paper); border-color: var(--line); }.session-nav #toggle-curriculum { color: var(--green); font-size: 13px; min-height: 36px; }
.session-link { font-size: 13px; }.session-link.is-current { background: #edf0e6; color: var(--green); }.session-link small { color: var(--muted); font-size: 11px; }
.session-main { background: var(--white); }.learning-stages { gap: 28px; border-color: var(--line); }.learning-stages button { color: var(--muted); font-size: 14px; min-height: 42px; }.learning-stages button.is-current { color: var(--red); border-color: var(--red); }
#guided-stage { padding: 36px max(28px, calc((100% - 840px)/2)); }
.session-main h2 { font-family: var(--font-display); font-size: 33px; font-weight: 500; line-height: 1.35; max-width: 34ch; }
.understand-section-title { color: var(--green); }.understand-lead, .concept-copy { color: var(--ink-2); font-size: 16px; line-height: 1.95; }
.understand-pages { gap: 8px; }.understand-pages button { font-size: 12px; min-height: 40px; color: var(--muted); }.understand-pages button[aria-current] { color: var(--red); background: #f3e9e1; border-color: #dbc5b8; }.understand-pages button>span { color: inherit; }
.understand-goal { border-left-color: var(--green); background: #edf0e6; }.understand-goal p { font-size: 14px; color: var(--ink-2); }.understand-goal strong { color: var(--green); }
.understand-goal>span { color: var(--green); font-size: 11px; }
.lesson-dialog .dialog-level { color: var(--muted); font-size: 11px; }
.session-main .understand-section-title { color: var(--green); }
.understand-vocabulary .vocab-pinyin { color: var(--red); }
.hsk1-support>p, .hsk1-support details p, .hsk1-vocab-grid span, .hsk1-curriculum>p { color: var(--muted); }
.stroke-study svg { background: var(--white); border-color: var(--line-dark); }.stroke-grid { stroke: var(--line-dark); }.stroke-trace { stroke: var(--line); }.stroke-trace.is-traced { stroke: var(--green); }.stroke-trace.is-latest { stroke: var(--red); }
.understand-vocabulary { border-color: var(--line); }.understand-vocabulary>div { border-color: var(--line); }.understand-vocabulary dt { color: var(--ink); font-size: 27px; }.understand-vocabulary dd { color: var(--muted); font-size: 14px; }.understand-vocabulary dd.pinyin { color: var(--red); }
.understand-pattern { background: var(--paper); border: 1px solid var(--line); }.pattern-part { color: var(--red); }.understand-steps li>span { background: #edf0e6; color: var(--green); }.understand-steps p { color: var(--ink-2); font-size: 15px; }
.example-hanzi { font-family: var(--font-hanzi); font-size: 33px !important; color: var(--ink); line-height: 1.75; }.example-pinyin { color: var(--red); font-size: 15px; }.example-meaning { color: var(--ink-2); font-size: 16px; }
.example-number, .understand-caption { color: var(--muted); font-size: 12px; }.example-breakdown { background: var(--paper); font-size: 14px; color: var(--ink-2); }.example-breakdown strong { color: var(--green); font-size: 12px; }
.understand-pitfall { background: #f5eee2; border-color: #a88345; }.understand-pitfall p { font-size: 14px; }.understand-pitfall>div>span { color: #705d39; font-size: 11px; }
.understand-ready { font-size: 15px; color: var(--ink-2); }.answer-instruction { font-size: 14px; color: var(--muted); }.answer-keyboard { font-size: 13px; }.answer-keyboard summary { min-height: 36px; }.answer-keyboard button { background: var(--paper); border-color: var(--line-dark); width: 44px; height: 44px; }
.written-answer, .tone-answer-grid label { color: var(--muted); font-size: 13px; }.written-answer input, .written-answer textarea, .tone-answer-grid input { background: var(--white); border-color: var(--line-dark); font-size: 20px; }
.word-answer, .word-bank button, .word-answer button { background: var(--white); border-color: var(--line-dark); }.word-bank button:hover { background: var(--paper-2); }
.guided-feedback { background: #f5eee2; color: var(--ink-2); border-color: #a88345; font-size: 14px; }.guided-feedback.is-correct { background: #edf3e7; border-color: var(--green); }
.exercise-footer { background: var(--white); }#reader-footer { background: var(--white); border-color: var(--line); padding-block: 16px; }#reader-footer .button, #reader-footer .plain-button { font-size: 13px; }
.mastery-note { background: #edf0e6; font-size: 14px; }.hsk1-support { color: var(--ink-2); }.hsk1-support details { background: var(--paper); border-color: var(--line); }.hsk1-support summary { font-size: 14px; }

/* Onboarding, sign-in and dialogs are part of the same product. */
.placement-body { background: var(--paper); }.placement-header { background: var(--white); height: 84px; }.placement-shell { padding-top: 34px; max-width: 1156px; }
.onboarding-steps { margin-bottom: 30px; }.onboarding-steps li { color: var(--muted); font-size: 13px; }.onboarding-steps li>span { background: var(--white); }.onboarding-steps .is-done>span { background: #edf0e6; color: var(--green); border-color: #cbd3c0; }
.placement-page-heading h1 { font-family: var(--font-display); font-size: 40px; font-weight: 500; line-height: 1.25; }.placement-page-heading>p:last-child { font-size: 15px; }
.placement-intro, .placement-test, .placement-result-heading, .placement-detail, .placement-explanations { background: var(--white); border-color: var(--line); }.placement-intro h2, .placement-result-heading h2 { font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.3; }
.placement-intro p, .placement-rules { font-size: 14px; line-height: 1.85; }.placement-rules { margin-block: 20px; }.placement-rules li { margin: 10px 0; }
.placement-body .placement-outline { background: #edf0e6; color: var(--green); }.placement-outline h3 { font-family: var(--font-display); font-size: 27px; font-weight: 500; }.placement-outline p { color: #53624d; font-size: 13px; }.placement-outline ol { font-size: 14px; }
.placement-target label:has(input:checked) { background: #f7eee8; border-color: var(--red); }.placement-target small { font-size: 12px; }.placement-audio-check { background: var(--paper); }.placement-audio-check span { font-size: 13px; }
.placement-test h2 { font-size: 25px; }.placement-confidence label { font-size: 14px; min-height: 32px; }.placement-phase { background: #edf0e6; color: var(--green); }.placement-route-score { background: var(--paper); }.placement-skill-grid article { background: var(--white); }.placement-skill-grid h3 { font-size: 13px; }
.placement-local-note, .placement-body .placement-scope, .placement-caution { font-size: 12px; color: var(--muted); }
.placement-instructions { margin: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; }
.placement-instructions summary { color: var(--muted); font-size: 13px; font-weight: 600; min-height: 32px; cursor: pointer; }
.placement-intro .placement-rules { font-size: 13px; }
.form-dialog, .readiness-dialog, .readiness-head { background: var(--white); color: var(--ink); }.form-dialog::backdrop, .readiness-dialog::backdrop { background: #292c2870; }
.form-dialog .dialog-head h2, .readiness-head h2 { font-size: 23px; }.form-body>label, .form-body legend { font-size: 13px; }.form-body input, .form-body select { background: var(--white); border-color: var(--line-dark); font-size: 16px; min-height: 46px; }.day-options label, .difficulty-options label { font-size: 13px; }
.help-dialog li::before { background: #edf0e6; color: var(--green); }.help-dialog strong { font-size: 15px; }.help-dialog p { font-size: 14px; }.check-top { font-size: 12px; }.check-discussion h4, .check-discussion p { font-size: 14px; }
.login-body { background: var(--paper); }.login-brand-panel { background: #354b40; padding: 44px max(40px, calc((51vw - 490px)/2)); }.login-brand-panel h1 { font-family: var(--font-display); font-size: clamp(42px, 4.7vw, 66px); font-weight: 500; line-height: 1.15; letter-spacing: -.04em; }.login-brand-panel>div>p:last-child { color: #d1d9cf; font-size: 16px; line-height: 1.9; }.login-brand-panel .eyebrow { color: #dccab1; }.login-brand-panel::after { font-family: var(--font-hanzi); opacity: .7; }.login-brand-panel blockquote { font-family: var(--font-hanzi); font-size: 26px; border-color: #687b69; }.login-brand-panel blockquote small { color: #d1d9cf; font: 13px var(--font-body); }.login-form-panel { background: var(--white); }.login-card { width: min(420px,100%); }.login-card::before { content: '欢迎回来 / SELAMAT DATANG'; color: var(--red); font-size: 11px; margin-bottom: 28px; letter-spacing: .08em; }.login-card h2 { font-family: var(--font-display); font-weight: 500; font-size: 38px; }.login-card>p { font-size: 14px; line-height: 1.85; margin-bottom: 24px; }.login-card label { font-size: 13px; text-transform: none; letter-spacing: 0; }.login-card input { padding: 12px 14px; border: 1px solid var(--line-dark); border-radius: 6px; background: var(--white); min-height: 48px; font-size: 16px; }.password-field input { padding-right: 85px; }.password-field button { top: 9px; right: 12px; font-size: 12px; min-height: 44px; }.login-help { font-size: 13px; }.security-note { font-size: 12px; line-height: 1.85; }.setup-warning { font-size: 13px; line-height: 1.8; border-radius: 0 5px 5px 0; }.form-error { font-size: 13px !important; }.login-back { display: inline-flex; min-height: 44px; align-items: center; margin-top: 12px; color: var(--muted); font-size: 13px; }.mobile-mark { background: var(--red); border-radius: 3px; font-family: var(--font-hanzi); }
.assistant-prompt-card, .assistant-guide { background: var(--white); }.assistant-card-heading h2, .assistant-guide h2 { font-family: var(--font-display); font-size: 26px; font-weight: 500; }.assistant-mark { background: #edf0e6; color: var(--green); }.assistant-context, .assistant-copy-status { font-size: 13px; }#assistant-prompt { background: var(--paper); font-size: 15px; line-height: 1.9; }#assistant-template { font-size: 15px; background: var(--white); }.assistant-guide strong { font-size: 14px; }.assistant-guide li p, .assistant-note p { font-size: 13px; }
.reset-body main { width: min(600px,calc(100% - 40px)); margin: 60px auto; padding: 32px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }.reset-body h1 { font-family: var(--font-display); font-size: 34px; font-weight: 500; line-height: 1.3; margin: 18px 0; }.reset-body p, .reset-body li { font-size: 14px; line-height: 1.85; }.reset-body small { display: block; font-size: 12px; color: var(--muted); line-height: 1.8; overflow-wrap: anywhere; }.reset-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 24px 0; }.reset-actions a:not(.button), #restore-progress { color: var(--red); font-size: 13px; min-height: 44px; }#restore-progress { background: transparent; border: 0; text-decoration: underline; cursor: pointer; }#reset-status { background: var(--paper); padding: 16px; border-radius: 6px; }
.toast { background: var(--ink); color: var(--white); font-size: 14px; line-height: 1.6; }.study-audio-status { background: var(--white); border-color: var(--line-dark); }

@media (min-width:1685px) { .learn-body .product-view { max-width: 1540px; } }
@media (max-width:1180px) { .hero { gap: 44px; }.tutor-preview-section { gap: 36px; }.pricing { gap: 40px; }.resume-content { padding: 26px; }.resume-content h2 { font-size: 27px; } }
@media (max-width:900px) { .learn-header { height: 66px; }.learn-body .product-view, .learn-body .product-view:not(.learn-shell) { padding-top: 28px; }.hero { grid-template-columns: 1fr 1fr; padding-block: 58px; gap: 32px; }.hero h1 { font-size: 46px; }.editorial-strip { margin-inline: 40px; }.hero .lead { font-size: 15px; }.sample-hanzi { font-size: 43px; }.sample-lesson { padding: 24px; }.sample-top { padding-inline: 24px; }.trust-list { gap: 10px 16px; } }
@media (max-width:760px) { .hero { grid-template-columns: 1fr; gap: 36px; padding: 44px 24px 48px; }.site-header { padding-inline: 24px; height: 74px; }.hero h1 { font-size: clamp(39px, 8vw, 52px); max-width: 550px; }.hero .lead { font-size: 16px; }.hero-card { max-width: 520px; }.sample-hanzi { font-size: 52px; }.editorial-strip { margin-inline: 24px; flex-direction: column; align-items: flex-start; gap: 10px; }.editorial-strip>span { font-size: 24px; }.section { padding: 56px 24px; }.tutor-preview-section, .pricing { grid-template-columns: 1fr; gap: 30px; }.path-grid { grid-template-columns: 1fr; }.path-card { padding: 24px; min-height: 0; }.path-card .level-badge { height: auto; margin-block: 18px; }.feature-grid { grid-template-columns: 1fr 1fr; }.feature-grid article { padding: 24px 18px; }.pricing-copy h2 { max-width: 500px; }.price-card { max-width: 520px; }.dashboard-stats>div { padding: 16px; }.session-main h2 { font-size: 29px; }#guided-stage { padding: 28px 24px; }.lesson-dialog .dialog-head h2 { font-size: 18px; }.understand-vocabulary dt { font-size: 25px; }.understand-vocabulary dd { font-size: 13px; } }
@media (max-width:580px) {
  .brand { font-size: 20px; }.site-header .button { display: inline-flex; min-height: 40px; padding: 8px 14px; }.site-header { padding-inline: 20px; }.hero { padding-inline: 20px; }.hero-actions { gap: 12px 20px; }.trust-list { font-size: 12px; }.sample-top { padding: 16px 20px; }.sample-lesson { padding: 22px 20px; }.sample-hanzi { font-size: clamp(39px,10vw,50px); }.sample-steps { padding: 16px 20px; font-size: 11px; }.editorial-strip { margin-inline: 20px; }.section { padding: 48px 20px; }.section h2 { font-size: 34px; }.section-intro { font-size: 14px; }.feature-grid { grid-template-columns: 1fr; }.feature-grid article { padding-inline: 0; border-right: 0; }.path-card { padding-inline: 20px; }.tutor-preview-section .coach-card { padding: 20px; }.chat { font-size: 13px; }.coach-head strong { font-size: 15px; }.price { font-size: 50px; }.price-card { padding: 26px; }footer { padding: 28px 20px; }.faq-list summary { font-size: 15px; }
  .learn-body .product-view, .learn-body .product-view:not(.learn-shell) { padding: 24px 18px 40px; }.learn-header { height: 62px; padding-inline: 18px; }.today-title-row h1, .view-heading h1, .sidebar h1, .practice-heading h1 { font-size: 30px; }.today-title-row p, .sidebar .muted, .view-heading p, .practice-heading>div>p:last-child { font-size: 13px; line-height: 1.85; }.dashboard-stats { margin: 20px 0; }.dashboard-stats>div { padding: 14px 10px; }.dashboard-stats strong { font-size: 22px; }.dashboard-stats strong small { font-size: 11px; }.dashboard-stats>div>div>span { font-size: 11px; line-height: 1.5; }.stat-icon { width: 27px; height: 27px; margin-bottom: 10px; }.resume-card { grid-template-columns: 66px minmax(0,1fr); }.resume-cover { padding: 18px 8px; }.resume-cover>span:first-child { font-size: 12px; width: 40px; }.resume-cover>strong { font-size: 34px; margin-block: 20px 12px; }.resume-cover>small { font-size: 9px; }.resume-cover .cover-foot { font-size: 6px; }.resume-content { padding: 22px 18px; }.resume-content h2 { font-size: 25px; line-height: 1.35; }.resume-meta { font-size: 11px; }.resume-content>p:not(.resume-meta) { font-size: 13px; }.resume-progress>div, .resume-progress strong { font-size: 11px; }.resume-content .button { min-height: 46px; font-size: 13px; }.dashboard-disclosure { padding: 15px 18px; }.dashboard-disclosure>summary { font-size: 13px; }.task-copy strong { font-size: 13px; }.task-copy span span { font-size: 12px; }.plan-footer .button { font-size: 13px; }.plan-footer>span { font-size: 11px; }.focus-panel strong { font-size: 40px; }
  .overall-card small, .sidebar .storage-note { font-size: 11px; }#path-workspace { padding: 22px 18px; }.route-section-heading h2 { font-size: 26px; }.route-section-heading p:not(.eyebrow), .route-next>p:not(.eyebrow) { font-size: 13px; }.route-next { padding: 20px 16px; }.route-next h3 { font-size: 21px; }.route-next .button { font-size: 13px; }.route-timeline li { font-size: 12px; }.route-lesson strong { font-size: 14px; }.route-lesson small { font-size: 12px; }.week-info h3 { font-size: 14px; }.module-description { font-size: 12px; }.module-meta { font-size: 10px; }.mobile-module-state { color: var(--green); font-size: 11px; }.preparation-library-heading h3 { font-size: 22px; }.filter { font-size: 13px; }.module-search input { font-size: 16px; }
  .day-task { font-size: 13px; }.day-task span, .day-head span { font-size: 11px; }.metric span { font-size: 11px; }.metric strong { font-size: 26px; }.report-row { font-size: 12px; }.view-heading .button { font-size: 12px; min-height: 42px; }.practice-picker article { padding: 23px; }.practice-picker h2 { font-size: 26px; }.practice-picker p { font-size: 13px; }.practice-summary span { font-size: 10px; }.quiz-actions { gap: 12px; }.quiz-actions .button { font-size: 13px; }.audio-panel .audio-button { font-size: 14px; min-height: 46px; }.audio-replay { font-size: 13px; }.audio-heading, .audio-demo, #audio-status { font-size: 12px; }.result-actions { flex-direction: column; align-items: stretch; }.result-actions .button { width: 100%; }.reading-intro h2, .study-intro h2 { font-size: 27px; }.study-metrics span { font-size: 11px; line-height: 1.6; }.study-tabs { gap: 18px; }.study-tabs button { font-size: 13px; }.study-intro, .flashcard, .review-question { padding: 24px 20px; }.flash-ratings { gap: 7px; }.flash-ratings button { font-size: 13px; }.flash-ratings small { font-size: 10px; }
  .lesson-dialog .dialog-head { padding: 14px 18px; }.lesson-dialog .dialog-head h2 { font-size: 17px; }.lesson-dialog .lesson-actions { padding-inline: 18px; }.session-nav { padding-inline: 18px; }.learning-stages { padding: 12px 18px 0; gap: 24px; }.learning-stages button { font-size: 12px; }.session-nav #toggle-curriculum { font-size: 12px; }#guided-stage { padding: 24px 20px; }.session-main h2 { font-size: 28px; }.understand-lead, .concept-copy { font-size: 15px; }.understand-pages { gap: 6px; }.understand-pages button { font-size: 10px; line-height: 1.6; min-height: 44px; }.understand-vocabulary>div { grid-template-columns: 60px 83px minmax(0,1fr); }.understand-vocabulary dt { font-size: 24px; }.understand-vocabulary dd { font-size: 12px; }.study-sound { font-size: 11px; padding: 7px 9px; min-height: 38px; }.example-hanzi { font-size: 28px !important; }.example-pinyin { font-size: 14px; }.example-meaning { font-size: 15px; }.example-breakdown { font-size: 13px; }.example-number, .understand-caption { font-size: 11px; }.understand-steps p { font-size: 14px; }.understand-goal p { font-size: 13px; }.understand-pitfall { padding: 18px; }.answer-instruction { font-size: 13px; }.guided-option { font-size: 16px; }#reader-footer { padding: 12px 18px; }#reader-footer .button, #reader-footer .plain-button { font-size: 12px; }#reader-footer .session-next { gap: 10px; }.lesson-actions .score-input, .dialog-footer #save-message { font-size: 10px; }
  .placement-header { height: 74px; }.placement-header .brand { font-size: 20px; }.placement-program { font-size: 10px; }.placement-shell { padding: 26px 18px 36px; }.placement-page-heading h1 { font-size: 34px; }.placement-page-heading>p:last-child { font-size: 14px; }.onboarding-steps li { font-size: 11px; }.placement-intro>div { padding: 24px 20px; }.placement-intro h2, .placement-result-heading h2 { font-size: 28px; }.placement-outline { padding: 24px 20px; }.placement-test h2 { font-size: 23px; }.placement-confidence label { font-size: 13px; }.placement-controls .button { font-size: 13px; }.placement-body .placement-scope, .placement-local-note { font-size: 12px; }.placement-result-heading { padding: 26px 20px; }
  .form-dialog .dialog-head h2, .readiness-head h2 { font-size: 21px; }.form-body { padding: 22px 20px; }.help-dialog p { font-size: 13px; }.readiness-head { padding-inline: 18px; }.check-controls .button { font-size: 13px; }.assistant-card-heading h2, .assistant-guide h2 { font-size: 25px; }#assistant-prompt { font-size: 16px; }.assistant-prompt-card, .assistant-guide { padding: 23px 20px; }.login-form-panel { padding: 28px 22px; }.login-card h2 { font-size: 34px; }.login-card>p { font-size: 14px; }.security-note { font-size: 11px; }.reset-body main { margin: 24px auto; padding: 26px 22px; }.reset-body h1 { font-size: 30px; }
}
@media (max-width:360px) { .hero h1 { font-size: 37px; }.brand { font-size: 18px; }.brand-mark { width: 32px; height: 36px; }.dashboard-stats>div { padding-inline: 8px; }.dashboard-stats>div>div>span { font-size: 10px; }.resume-card { grid-template-columns: 48px minmax(0,1fr); }.resume-cover>span:first-child { width: 30px; font-size: 10px; }.resume-cover>strong { font-size: 27px; }.resume-content { padding: 20px 16px; }.resume-content h2 { font-size: 23px; }.understand-vocabulary>div { grid-template-columns: 55px 72px minmax(0,1fr); }.understand-vocabulary dd { font-size: 11px; }.placement-program { display: none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto; }*, *::before, *::after { animation: none !important; transition: none !important; } }