:root { --grammar-nav-height:58px;--gold:#9a6f2a;--ink:#1e2235;--bg:#e8e4dc;--paper:#fdfcf9;--muted:#9a96a0;--border:#e2ddd6;--red:#c0392b;--green:#2d7d46; }
* { box-sizing:border-box;margin:0;padding:0; }
body { background:var(--bg);color:var(--ink);font-family:'Noto Sans SC',sans-serif;min-height:100vh;display:flex;flex-direction:column; }
.page { position:relative;flex:1;padding:18px 36px 0; }
.header { text-align:center;padding:24px 0;margin-bottom:10px; }
.header-num { font-size:11px;color:var(--gold);margin-bottom:8px; }
.header-title { font-family:'Noto Serif SC',serif;font-weight:600;line-height:1.5; }
.header-title .translation { color:var(--gold);font-size:15px; }
.header-sub { font-size:14px;line-height:1.8;margin:15px auto 0;max-width:650px;color:var(--muted); }
.level-tag { display:inline-block;font-size:11px;margin-top:10px;padding:4px 12px;border:1px solid rgba(46,110,166,.28);color:#2e6ea6; }
.tab-btn { background:none;border:0;border-bottom:2px solid transparent;font-family:'Noto Sans SC',sans-serif;font-size:13px;color:var(--muted);white-space:nowrap;cursor:pointer; }
.tab-btn.active { color:var(--gold);border-bottom-color:var(--gold);font-weight:600; }
.tabs { display:flex;overflow-x:auto; }
.content { background:var(--paper);padding:30px 36px 40px; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.site-footer { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 36px;background:var(--paper);border-top:1px solid var(--border); }
.footer-left { display:flex;gap:10px; }
.contact-btn { display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);background:#fff;border-radius:50%;color:var(--ink);text-decoration:none;font-size:12px;cursor:pointer; }
.wechat-wrap { position:relative; }
.wechat-qr { display:none;position:absolute;bottom:44px;left:0;width:160px;height:160px;object-fit:contain;background:#fff;padding:8px;z-index:110; }
.wechat-wrap.open .wechat-qr { display:block; }
.footer-right { font:400 12px/1.6 Arial,sans-serif;text-align:right; }
.mobile-footer-break { display:none; }
.scroll-top { position:fixed;bottom:26px;right:20px;width:38px;height:38px;border-radius:50%;border:0;background:var(--gold);color:#fff;opacity:0;pointer-events:none;z-index:90;cursor:pointer; }
.scroll-top.visible { opacity:1;pointer-events:auto; }
.page { width:100%;max-width:1280px;margin:0 auto;padding-top:18px; }
.header-title { font-size:32px; }
.header-num,.card-title,.tab-btn,.language-btn { letter-spacing:0; }
.sticky-tools { position:sticky;top:var(--grammar-nav-height);z-index:50;display:flex;align-items:stretch;background:rgba(253,252,249,.97);border-bottom:2px solid rgba(154,111,42,.2); }
.tabs { position:static;flex:1;min-width:0;border:0;box-shadow:none;scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab-btn { padding:12px 15px; }
.language-bar { display:flex;align-items:center;gap:6px;padding:7px 10px;flex:none; }
.language-btn { min-width:36px;height:28px;padding:0 9px;border:1px solid rgba(154,111,42,.24);border-radius:3px;background:transparent;color:#77727a;font:500 10px/1 'Noto Sans SC',sans-serif;cursor:pointer; }
.language-btn:hover,.language-btn.active { color:var(--gold);border-color:rgba(154,111,42,.58);background:rgba(154,111,42,.1); }
.language-separator { width:1px;height:18px;background:var(--border); }
.plan-save-slot { display:flex;align-items:center; }
.language-bar .plan-save-star { position:static!important;width:36px!important;height:28px!important;min-width:36px;padding:0;border-radius:3px;box-shadow:none;backdrop-filter:none;font-size:17px;transform:none!important; }
.en-text,.en-note,.ex-en,.task-en,.translation { display:none!important; }
body.show-translation .en-text,body.show-translation .en-note,body.show-translation .ex-en,body.show-translation .task-en,body.show-translation .translation { display:block!important; }
.ex-pinyin,.pinyin,.inline-pinyin,.title-pinyin { display:none!important; }
body.show-pinyin .ex-pinyin,body.show-pinyin .pinyin,body.show-pinyin .inline-pinyin,body.show-pinyin .title-pinyin { display:block!important; }
.pinyin,.ex-pinyin,.inline-pinyin,.title-pinyin { font:400 12px/1.6 Arial,'Segoe UI',sans-serif!important;letter-spacing:0;text-transform:lowercase;color:#726c67;margin-top:3px; }
.translation { font:400 13px/1.6 Arial,'Noto Sans SC',sans-serif;color:#726c67;margin-top:4px; }
#tab0 { display:none; }
body.js-tabs #tab0.active { display:block; }
.basics-section { padding:26px 0;border-bottom:1px solid var(--border); }
.basics-section:first-child { padding-top:0; }
.basics-section:last-child { border-bottom:0;padding-bottom:0; }
.basics-heading { font:600 21px/1.5 'Noto Serif SC',serif;margin-bottom:18px;color:var(--ink); }
.basics-heading .translation,.basics-heading .pinyin { font-size:12px; }
.tab-panel > .basics-section,.tab-panel > .detail-section { padding:20px 24px;margin-bottom:16px;border:1px solid var(--border);border-radius:6px;background:#fff; }
.basics-heading { font:600 13px/1.6 'Noto Sans SC',sans-serif;color:var(--gold);margin-bottom:14px;text-transform:uppercase; }
.basics-heading .translation { color:var(--gold); }
.detail-section .basics-heading { font:600 18px/1.6 'Noto Serif SC',serif;color:var(--ink);text-transform:none; }
.detail-formula { padding:13px 14px;border:0;border-left:3px solid var(--gold);background:rgba(154,111,42,.055);font:600 14px/1.6 Arial,'Noto Sans SC',sans-serif; }
.practice-question { padding:16px 20px;margin-bottom:10px;border:1px solid var(--border);border-radius:6px;background:#fff; }
.practice-question:last-of-type { border-bottom:1px solid var(--border); }
.contact-btn svg { display:block;width:18px;height:18px; }
.contact-btn { color:var(--muted); }
.contact-btn:hover { color:var(--gold);border-color:var(--gold); }
#tab0 > .basics-section { padding:20px 24px;margin-bottom:16px;border:1px solid var(--border);border-radius:6px;background:#fff; }
#tab0 .basics-heading { font:600 13px/1.6 'Noto Sans SC',sans-serif;color:var(--gold);margin-bottom:14px;text-transform:uppercase; }
#tab0 .basics-heading .translation { color:var(--gold); }
.quiz-title { font:600 13px/1.6 'Noto Sans SC',sans-serif;color:var(--gold);text-transform:uppercase;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border); }
.quiz-title .translation { color:var(--gold); }
.scene-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px; }
.scene-card { min-width:0; }
.scene-flip { position:relative;display:grid;grid-template-areas:'face';width:100%;padding:0;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--ink);text-align:left;cursor:pointer;overflow:hidden;perspective:1200px; }
.scene-front,.scene-back { grid-area:face;width:100%;backface-visibility:hidden;transition:transform .4s ease,opacity .3s ease; }
.scene-front { align-self:center; }
.scene-front img { display:block;width:100%;aspect-ratio:3/2;object-fit:contain; }
.scene-back { padding:22px;opacity:0;transform:rotateY(180deg);pointer-events:none;display:flex;flex-direction:column;justify-content:center;gap:18px; }
.scene-flip[aria-pressed='true'] .scene-front { transform:rotateY(-180deg);opacity:0;pointer-events:none; }
.scene-flip[aria-pressed='true'] .scene-back { transform:rotateY(0);opacity:1;pointer-events:auto; }
.scene-flip:focus-visible { outline:2px solid var(--gold);outline-offset:4px; }
.scene-verb { font-size:16px;font-weight:600; }
.scene-sentence { display:flex;align-items:center;gap:12px; }
.scene-sentence .zh { font-size:20px;font-weight:600; }
.scene-avatar { flex:none;width:54px;height:54px;border-radius:50%;background-repeat:no-repeat;background-size:360% auto; }
.scene-avatar.listen.left { background-position:21% 53%; }
.scene-avatar.listen.right { background-position:85% 53%; }
.scene-avatar.ready.left { background-position:31% 50%; }
.scene-avatar.ready.right { background-position:80% 47%; }
.scene-avatar.see.left { background-position:22% 49%; }
.scene-avatar.see.right { background-position:88% 72%; }
.scene-avatar.clear.left { background-position:26% 56%; }
.scene-avatar.clear.right { background-position:76% 50%; }
.flip-caption { text-align:center;margin-top:7px;font-size:12px;color:#726c67; }
.flip-caption .pinyin,.flip-caption .translation { font-size:11px;margin-top:1px; }
.basics-summary { margin-top:22px;font-size:17px;line-height:1.8; }
.result-formula { font:600 25px/1.5 'Noto Serif SC',serif;color:var(--gold);margin-bottom:20px; }
.result-labels,.result-row { display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1fr);gap:20px;padding:15px 0;border-bottom:1px solid var(--border);align-items:start; }
.result-labels { font-size:12px;color:#726c67;padding-top:0; }
.result-row:last-child { border-bottom:0; }
.result-word .zh { font:600 23px/1.5 'Noto Serif SC',serif;color:var(--gold); }
.result-row .zh { line-height:1.7; }
.note-title { font:600 22px/1.5 'Noto Serif SC',serif;margin-bottom:18px; }
.action-result { margin:18px 0;display:grid;gap:10px; }
.action-result .zh { font-size:21px; }
.action-result .result { padding-left:16px;border-left:3px solid var(--gold); }
.down-arrow { font-size:22px;color:var(--gold); }
.note-explanation { margin-top:12px;font-size:16px;line-height:1.8; }
.ivy-tip-heading { display:flex;align-items:center;gap:12px;margin-bottom:18px; }
.ivy-tip-heading img { width:58px;height:58px;object-fit:cover;border-radius:50%; }
.ivy-tip-heading .basics-heading { margin:0; }
.ivy-tip .tip-main { font-size:19px;font-weight:600; }
.tip-examples { margin:18px 0;padding-left:16px;border-left:3px solid var(--gold);display:grid;gap:12px; }
.tip-equations { display:grid;gap:16px;font-size:17px;font-weight:600; }
.detail-section { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;padding:28px 0;border-bottom:1px solid var(--border);align-items:start; }
.detail-section:first-child { padding-top:0; }
.detail-text { min-width:0; }
.detail-visual { min-width:0;margin:0;position:sticky;top:calc(var(--grammar-nav-height) + 115px); }
.detail-visual img { display:block;width:100%;height:auto;border-radius:4px; }
.detail-formula { margin-bottom:20px;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:19px;font-weight:600;color:var(--gold); }
.action-pair { margin:15px 0; }
.action-pair>strong { font-size:19px; }
.action-pair>div { margin-top:4px;font-size:14px;line-height:1.7; }
.detail-focus { margin-top:20px;padding:15px 0 15px 16px;border-left:3px solid var(--gold);line-height:1.8; }
.focus-title { font-weight:600; }
.detail-example { padding:12px 0;border-bottom:1px solid var(--border);line-height:1.8;font-size:17px; }
.detail-correction { display:grid;gap:12px;margin-top:20px; }
.correction-wrong,.correction-right { display:flex;gap:10px;align-items:start;font-size:17px; }
.correction-wrong { color:var(--red); }
.correction-right { color:var(--green); }
.status-mark { flex:none;font-size:20px; }
.detail-note { margin-top:16px;font-size:14px;line-height:1.8; }
.completed-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px; }
.completed-example { padding:12px 0;border-bottom:1px solid var(--border);font-size:17px;line-height:1.8; }
.result-transitions { margin-top:20px;display:grid;gap:13px;font-size:16px; }
.sentence-breakdown { display:grid;grid-template-columns:1fr 1fr 2fr;gap:10px;padding:15px 0;border-bottom:1px solid var(--border);font-size:18px; }
.part-label { font-weight:400;font-size:11px;color:#726c67;margin-top:8px; }
.part-label .pinyin,.part-label .translation { font-size:10px; }
.object-text { font-weight:600; }
.learning-path { max-width:620px;margin:0 auto; }
.learning-path .detail-formula { margin:7px 0 0;font-size:16px;border:0;padding:0; }
.path-step { margin:10px 0;font-weight:600; }
body.show-translation [hidden] { display:none!important; }
.mistake-label { font-size:13px;color:var(--gold);font-weight:600;margin:18px 0 8px; }
.misconception-text { font-size:19px;line-height:1.8; }
.correct-example { font-size:19px;color:var(--green);font-weight:600;line-height:1.8; }
.meaning-equations { display:flex;gap:30px;margin-top:18px;font-size:21px; }
.potential-preview { margin-top:22px;padding:15px 18px;background:rgba(42,140,138,.05);border-left:2px solid rgba(42,140,138,.3); }
.potential-preview .mistake-label { margin-top:0; }
.joined-structure,.separated-structure { margin-top:14px;font-size:19px;line-height:1.8; }
.joined-structure { color:var(--green); }
.separated-structure { color:var(--red); }
.meaning-compare { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px;margin-top:18px; }
.comparison-sentence { font-size:20px;font-weight:600; }
.hearing-meanings { margin-top:25px;display:grid;gap:18px;font-size:17px; }
.listening-path { margin-top:24px;padding:18px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:21px;font-weight:600; }
.rule-summary-row { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:25px;padding:14px 0;border-bottom:1px solid var(--border);line-height:1.8; }
.rule-summary-row .detail-formula { margin:0;padding:0;border:0;font-size:16px; }
.rule-summary-head { color:var(--gold);font-weight:600; }
.practice-section { padding:28px 0;border-bottom:1px solid var(--border); }
.practice-section:first-child { padding-top:0; }
.practice-question { padding:20px 0;border-bottom:1px solid var(--border); }
.practice-question:last-of-type { border-bottom:0; }
.practice-question.with-image { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start; }
.practice-image { margin:0; }
.practice-image img { display:block;width:100%;height:auto;border-radius:4px; }
.practice-prompt { font-size:17px;line-height:1.8;margin-bottom:14px; }
.practice-choices { display:flex;flex-wrap:wrap;gap:8px; }
.with-image .practice-choices,#tab3 .practice-section:last-child .practice-choices { display:grid;grid-template-columns:minmax(0,1fr); }
.practice-choice { text-align:left;border:1px solid var(--border);border-radius:4px;padding:9px 13px;background:#fff;color:var(--ink);font:400 14px/1.6 'Noto Sans SC',sans-serif;cursor:pointer; }
.practice-choice.selected { background:rgba(154,111,42,.09);border-color:var(--gold); }
.practice-choice.is-correct { border-color:var(--green);background:rgba(45,125,70,.05); }
.practice-choice.is-incorrect { border-color:var(--red);background:rgba(192,57,43,.05); }
.practice-actions { display:flex;gap:10px;margin-top:18px; }
.practice-command { min-width:70px;padding:8px 15px;border:1px solid rgba(154,111,42,.4);border-radius:3px;background:transparent;color:var(--gold);font:500 13px/1.5 'Noto Sans SC',sans-serif;cursor:pointer; }
.practice-command:hover { background:rgba(154,111,42,.08); }
.practice-feedback { margin-top:14px;border-left:3px solid var(--green);padding:10px 13px;background:rgba(45,125,70,.035);font-size:14px;line-height:1.8; }
.practice-feedback.is-incorrect { border-color:var(--red);background:rgba(192,57,43,.035); }
.feedback-status { display:block;color:var(--green);font-size:12px;margin-bottom:7px; }
.practice-feedback.is-incorrect .feedback-status { color:var(--red); }
.feedback-reason { margin-top:10px;font-size:13px; }
.practice-question.is-missing .practice-prompt,.ordering-question.is-missing .ordering-answer { outline:1px solid var(--red);outline-offset:5px; }
.ordering-number { color:var(--gold);font-size:14px;font-weight:600;margin-bottom:10px; }
.ordering-answer { min-height:56px;display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:10px;border:1px solid var(--border);border-radius:4px; }
.ordering-bank { display:flex;flex-wrap:wrap;gap:8px;margin-top:12px; }
.word-token { padding:7px 11px;border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--ink);font:400 14px/1.5 'Noto Sans SC',sans-serif;cursor:pointer; }
.word-token.placed { background:rgba(154,111,42,.08);border-color:rgba(154,111,42,.3); }
.word-token:disabled { opacity:.3;cursor:default; }
.practice-choice:focus-visible,.word-token:focus-visible,.practice-command:focus-visible { outline:2px solid var(--gold);outline-offset:3px; }
@media(max-width:1000px) {
  .sticky-tools { flex-wrap:wrap; }
  .tabs { flex-basis:100%; }
  .language-bar { width:100%;padding:4px 8px;gap:4px; }
  .language-bar [data-pinyin] { margin-right:auto; }
  .language-separator { display:none; }
}
@media(max-width:760px) {
  :root { --grammar-nav-height:54px; }
  .page { padding:12px 12px 0; }
  .header { padding-top:12px; }
  .header-title { font-size:26px; }
  .header-sub { font-size:13px; }
  .site-footer { padding:18px 12px;gap:12px; }
  .footer-right { font-size:11px;max-width:160px; }
  .mobile-footer-break { display:block; }
  .content { padding:24px 14px 30px; }
  #tab0 > .basics-section { padding:16px 13px; }
  .tab-panel > .basics-section,.tab-panel > .detail-section { padding:16px 13px; }
  .practice-question { padding:16px 13px; }
  .tab-btn { padding:9px 12px;font-size:12px; }
  .language-btn { min-width:34px;height:26px;padding:0 7px;font-size:9px; }
  .language-bar .plan-save-star { width:34px!important;height:26px!important;min-width:34px;font-size:16px; }
  .scene-grid { grid-template-columns:minmax(0,1fr);gap:22px; }
  .scene-back { padding:18px;gap:15px; }
  .scene-avatar { width:45px;height:45px; }
  .scene-sentence .zh { font-size:18px; }
  .result-labels,.result-row { grid-template-columns:54px minmax(0,1fr) minmax(0,1fr);gap:10px; }
  .result-row .zh { font-size:14px; }
  .result-word .zh { font-size:20px; }
  .result-row .translation { font-size:11px; }
  .detail-section { grid-template-columns:minmax(0,1fr);gap:20px; }
  .detail-visual { grid-row:1;position:static; }
  .detail-formula { font-size:18px;overflow-wrap:anywhere; }
  .completed-grid { grid-template-columns:minmax(0,1fr); }
  .sentence-breakdown { font-size:16px;gap:8px; }
  .meaning-compare { grid-template-columns:minmax(0,1fr);gap:20px; }
  .meaning-equations { gap:20px;font-size:19px; }
  .listening-path { font-size:18px; }
  .rule-summary-row { gap:12px;font-size:14px; }
  .rule-summary-row .detail-formula { font-size:14px; }
  .practice-question.with-image { grid-template-columns:minmax(0,1fr);gap:18px; }
  .practice-image { grid-row:1; }
  .practice-prompt { font-size:16px; }
  .practice-choice { font-size:13px; }
}
#tab1 .detail-formula { padding:13px 14px;border:0;border-left:3px solid var(--gold);background:rgba(154,111,42,.055);font:600 14px/1.6 Arial,'Noto Sans SC',sans-serif; }
#tab3 .practice-question { padding:16px 20px;margin-bottom:10px;border:1px solid var(--border);border-radius:6px;background:#fff; }
@media(max-width:760px) { #tab3 .practice-question { padding:16px 13px; } }
@media(prefers-reduced-motion:reduce) { .scene-front,.scene-back { transition:none; } }

/* Match lesson 001 cards on both desktop and mobile, after layout overrides. */
.content { padding:32px clamp(16px,4vw,48px) 40px; }
.tab-panel > .card { background:#fff;border:1px solid #e2ddd6;border-radius:6px;padding:20px 24px;margin-bottom:16px; }
.tab-panel .card-title.basics-heading,#tab0 .card-title.basics-heading { font:600 13px/normal 'Noto Sans SC',sans-serif;color:#9a6f2a;margin-bottom:14px;text-transform:uppercase; }
.tab-panel .card-title .translation,.quiz-title .translation { font:inherit;color:inherit;margin-top:0; }
.header-title { font-weight:700;line-height:1.3; }
.header-title .translation { font-family:'Noto Serif SC',serif;font-size:17.6px;font-weight:300;color:var(--gold); }
.header { margin-bottom:24px;padding-top:36px; }
.note-title { font:700 16px/1.6 'Noto Sans SC',sans-serif;margin-bottom:6px; }
.quiz-title { font:600 13px/normal 'Noto Sans SC',sans-serif;color:#9a6f2a; }
.ivy-public-nav .ivy-nav-menu a[href$='/membres/'] { color:#b73225; }
.ivy-public-nav .ivy-nav-menu a[href$='/membres/']::before { content:'印';display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:#b73225;color:#f4efe6;font:400 11px/1 'Noto Serif SC',serif;border-radius:2px;transform:rotate(-2deg); }
@media(max-width:760px) {
  .tab-panel > .card { padding:16px 13px; }
  .header { padding-top:12px; }
  .tabs { border-bottom:1px solid var(--border); }
}