/* A quiet course space: clear chapters, paper-like type, and a compact tool rail. */
body .shell .main.page-lesson{
 --course-ink:#263630;
 --course-muted:#78827b;
 --course-line:#e5e9e2;
 --course-accent:#244c48;
 --course-soft:#f5f8f3;
 max-width:1240px;padding-top:42px;background:#fff;
}
body .shell .main.page-lesson .lesson-title{
 display:flex;align-items:flex-end;justify-content:space-between;
 gap:28px;margin:0 0 25px;
}
body .shell .main.page-lesson .lesson-heading{min-width:0;max-width:760px}
body .shell .main.page-lesson .lesson-origin{
 display:block;margin-bottom:11px;color:#7b8b7e;
 font-size:10px;font-weight:500;line-height:1.5;letter-spacing:.08em;
}
body .shell .main.page-lesson .lesson-title .eyebrow{
 margin-bottom:9px;color:#5f7a68;font-size:11px;
 font-weight:500;line-height:1.6;letter-spacing:.075em;
}
body .shell .main.page-lesson .lesson-title h1{
 color:var(--course-ink);font-family:"Noto Serif SC","Songti SC","SimSun",serif;
 font-size:34px;font-weight:600;line-height:1.55;letter-spacing:.025em;
 overflow-wrap:anywhere;
}
body .shell .main.page-lesson .lesson-title .en{
 display:block;margin-top:9px;color:#8a938b;font-size:12px;
 font-weight:400;line-height:1.8;letter-spacing:.012em;
}
body .shell .main.page-lesson .lesson-levels{max-width:100%;flex-shrink:0}
body .shell .main.page-lesson .lesson-level-note{display:block;margin-bottom:8px;color:#78827b;font-size:11px;text-align:right}
body .shell .main.page-lesson .level-switch{
 display:flex;flex-wrap:nowrap;flex-shrink:0;align-self:flex-end;
 width:max-content;max-width:100%;gap:2px;padding:3px;margin:0 0 6px;
 border:1px solid var(--course-line);border-radius:9px;
 background:#fff;box-shadow:none;
}
body .shell .main.page-lesson .level-switch button{
 min-width:47px;min-height:34px;padding:7px 9px;border:0;
 border-radius:6px;background:transparent;color:#899187;
 font-size:11px;font-weight:400;line-height:1.6;white-space:nowrap;
 box-shadow:none;transition:background 160ms ease,color 160ms ease;
}
body .shell .main.page-lesson .level-switch button:hover:not(.active){background:#f7f9f4;color:#415b4b}
body .shell .main.page-lesson .level-switch button.active{
 background:#edf3ec;color:var(--course-accent);font-weight:600;box-shadow:none;
}

/* Progress reports completed work; the bar is supplied by the saved enrollment. */
body .shell .main.page-lesson .lesson-overview{
 display:grid;grid-template-columns:auto minmax(100px,1fr) auto;
 align-items:center;gap:17px;min-width:0;margin:0 0 27px;
 color:var(--course-muted);font-size:11px;line-height:1.6;
}
body .shell .main.page-lesson .lesson-progress-summary{
 display:flex;align-items:center;gap:13px;white-space:nowrap;
}
body .shell .main.page-lesson .lesson-progress-summary strong{
 color:#4f6958;font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;
}
body .shell .main.page-lesson .lesson-progress-track{
 height:3px;overflow:hidden;border:0;border-radius:3px;background:#eef2eb;
}
body .shell .main.page-lesson .lesson-progress-track i{
 display:block;height:100%;max-width:100%;border-radius:inherit;
 background:#799882;transition:width 240ms ease;
}
body .shell .main.page-lesson :is(.lesson-current-section,.lesson-chapter-count){
 color:#879085;font-size:11px;line-height:1.6;white-space:nowrap;
}

/* Full-width chapter navigation keeps the reading surface easy to find. */
body .shell .main.page-lesson .tabs{
 position:sticky;top:79px;z-index:20;
 display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;
 min-width:0;max-width:100%;margin:0 0 28px;padding:0 0 1px;
 border:0;border-bottom:1px solid var(--course-line);border-radius:0;
 background:#fff;box-shadow:none;overflow:visible;
}
body .shell .main.page-lesson .tab{
 position:relative;display:flex;flex-direction:row;align-items:center;
 justify-content:center;gap:8px;min-width:0;min-height:53px;
 padding:13px 9px;border:0;border-radius:7px 7px 0 0;
 color:#8b9288;background:transparent;font-size:12px;font-weight:400;
 line-height:1.5;white-space:nowrap;box-shadow:none;
 transition:color 160ms ease,background 160ms ease;
}
body .shell .main.page-lesson .tab:after{
 content:"";position:absolute;bottom:-2px;left:20px;right:20px;
 height:2px;border-radius:2px;background:transparent;
}
body .shell .main.page-lesson .tab:hover{background:#fafbf7;color:#4c6754;box-shadow:none}
body .shell .main.page-lesson .tab.active{
 background:#f7f9f4;color:var(--course-accent);font-weight:600;box-shadow:none;
}
body .shell .main.page-lesson .tab.active:after{background:var(--course-accent)}
body .shell .main.page-lesson .tab>.icon{width:16px;height:16px;stroke-width:1.7;opacity:.85}
body .shell .main.page-lesson .tab-label{display:block;min-width:0;line-height:1.5}
body .shell .main.page-lesson .tab .en{
 display:block;margin:2px 0 0;color:inherit;font-size:9px;
 font-weight:400;line-height:1.4;letter-spacing:.015em;opacity:.75;
}
body .shell .main.page-lesson .tab-complete{
 display:grid;place-items:center;width:13px;height:13px;color:#91a58a;flex-shrink:0;
}
body .shell .main.page-lesson .tab-complete .icon{width:12px;height:12px;stroke-width:2}
body .shell .main.page-lesson #lesson-content{min-width:0;max-width:100%;scroll-margin-top:152px}

/* A single folding tool rail uses the same small, steady controls as creation. */
body .shell .main.page-lesson .lesson-layout{
 display:grid;grid-template-columns:minmax(0,1fr) 252px;
 gap:28px;align-items:start;min-width:0;
}
body .shell .main.page-lesson .lesson-tools{
 position:sticky;top:152px;order:0;min-width:0;margin:0;
 border:1px solid var(--course-line);border-radius:11px;
 background:#fff;box-shadow:none;overflow:hidden;
}
body .shell .main.page-lesson .lesson-tools>summary{
 display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;
 gap:9px;min-height:50px;padding:14px 17px;list-style:none;
 color:#546a57;font-size:12px;font-weight:500;line-height:1.6;
 transition:background 160ms ease;box-shadow:none;
}
body .shell .main.page-lesson .lesson-tools>summary:hover{background:#fafbf7}
body .shell .main.page-lesson .lesson-tools>summary::-webkit-details-marker{display:none}
body .shell .main.page-lesson .lesson-tools>summary>span{
 margin:0 0 0 auto;color:#9aa295;font-size:10px;font-weight:400;line-height:1.5;
}
body .shell .main.page-lesson .lesson-tools>summary:after{
 content:"";display:block;width:6px;height:6px;margin:0 2px 3px 3px;
 border-right:1.3px solid #889b83;border-bottom:1.3px solid #889b83;
 transform:rotate(45deg);flex-shrink:0;
 transition:transform 180ms ease;
}
body .shell .main.page-lesson .lesson-tools[open]>summary:after{
 content:"";transform:translateY(3px) rotate(225deg);
}
body .shell .main.page-lesson .lesson-tools-content{
 display:grid;grid-template-columns:minmax(0,1fr);gap:23px;
 padding:19px 17px 20px;border-top:1px solid #edf0e8;
}
body .shell .main.page-lesson .lesson-tools .panel{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 align-content:start;gap:14px 10px;min-width:0;margin:0;padding:0;
 border:0;border-radius:0;background:transparent;box-shadow:none;
}
body .shell .main.page-lesson .lesson-tools .panel+.panel{
 grid-template-columns:minmax(0,1fr);padding-top:21px;border-top:1px solid #edf0e8;
}
body .shell .main.page-lesson .lesson-tools h3{
 grid-column:1/-1;margin:0 0 1px;color:#596b55;font-size:11px;
 font-weight:500;line-height:1.6;letter-spacing:.025em;
}
body .shell .main.page-lesson .lesson-tools h3 .en{display:none}
body .shell .main.page-lesson .lesson-tools label{
 min-width:0;gap:7px;color:#8a9385;font-size:10px;font-weight:400;line-height:1.6;
}
body .shell .main.page-lesson .lesson-tools select{
 width:100%;min-height:39px;padding:8px 10px;font-size:11px;line-height:1.7;
}
body .shell .main.page-lesson .lesson-tools .hb-select-trigger{
 min-height:39px;padding:8px 10px;border-radius:7px;
 color:#50664f;font-size:11px;font-weight:400;line-height:21px;
}
body .shell .main.page-lesson .lesson-tools .hb-select-chevron{width:12px;height:12px}
body .shell .main.page-lesson .lesson-tools .btn{
 display:flex;align-items:center;justify-content:flex-start;gap:9px;
 width:100%;min-height:39px;padding:9px 11px;
 border:1px solid #e0e7dc;border-radius:7px;background:#fff;
 color:#60745a;font-size:11px;font-weight:400;line-height:1.6;
 text-align:left;white-space:normal;box-shadow:none;
 transition:background 160ms ease,color 160ms ease,border-color 160ms ease;
}
body .shell .main.page-lesson .lesson-tools .btn.soft{
 color:var(--course-accent);background:#f2f6ee;border-color:#e2eadd;
}
body .shell .main.page-lesson .lesson-tools .btn:hover{
 background:#f7f9f3;color:var(--course-accent);border-color:#d0ddc9;
 transform:none;box-shadow:none;
}
body .shell .main.page-lesson .lesson-tools .btn:active{transform:none;box-shadow:none}
body .shell .main.page-lesson .lesson-tools .btn .icon{display:block;width:14px;height:14px;stroke-width:1.7}
body .shell .main.page-lesson .lesson-tools .btn .en{color:#9ca592;font-size:9px;line-height:1.4}
body .shell .main.page-lesson .lesson-tools .progress-bar{
 grid-column:1/-1;height:3px;border-radius:3px;margin:3px 0 -7px;background:#edf2e8;
}
body .shell .main.page-lesson .lesson-tools .progress-bar i{background:#7e9971}
body .shell .main.page-lesson .lesson-tools .policy-note{
 grid-column:1/-1;color:#9ba391;font-size:10px!important;line-height:1.6;
}

/* Chapter completion is a consistent small action, with plenty of breathing room. */
body .shell .main.page-lesson .chapter-end{
 display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
 gap:16px;margin-top:34px;padding-top:23px;border-top:1px solid var(--course-line);
}
body .shell .main.page-lesson .chapter-end>.muted{
 color:#8f988a;font-size:11px;font-weight:400;line-height:1.7;
}
body .shell .main.page-lesson .chapter-end .en{font-size:10px;line-height:1.5;color:#99a193}
body .shell .main.page-lesson .chapter-actions{display:flex;flex-wrap:wrap;align-items:center;gap:9px;max-width:100%}
body .shell .main.page-lesson .chapter-actions .btn{
 min-height:39px;padding:9px 14px;gap:8px;border:1px solid var(--course-accent);
 border-radius:7px;background:var(--course-accent);color:#fff;box-shadow:none;
 font-size:11px;font-weight:500;line-height:1.6;white-space:normal;
 transition:background 160ms ease,border-color 160ms ease;
}
body .shell .main.page-lesson .chapter-actions .btn:hover{
 background:#173c38;border-color:#173c38;color:#fff;box-shadow:none;transform:none;
}
body .shell .main.page-lesson .chapter-actions .btn.secondary{border-color:#e0e7dc;background:#fff;color:#60745a}
body .shell .main.page-lesson .chapter-actions .btn.secondary:hover{background:#f5f8f3;color:#244c48}
body .shell .main.page-lesson .chapter-actions .btn:active{box-shadow:none;transform:none}
body .shell .main.page-lesson .chapter-actions .btn .icon{width:14px;height:14px;stroke-width:1.8}
body .shell .main.page-lesson .chapter-actions .btn .en{color:#d7e3d3;font-size:9px;line-height:1.4}
body .shell .main.page-lesson .chapter-actions .btn:disabled{
 background:#edf2e9;border-color:#e0e7da;color:#98a18c;opacity:1;transform:none;
}
body .shell .main.page-lesson .footer{
 gap:20px;margin-top:34px;padding:27px 0 8px;border-top:1px solid var(--course-line);
 color:#959d90;font-size:10px;line-height:1.7;
}
body .shell .main.page-lesson .footer>div{gap:18px}
body .shell .main.page-lesson .footer button{
 padding:4px 0;color:#929b8b;font-size:10px;transition:color 160ms ease;
}
body .shell .main.page-lesson .footer button:hover{color:#506b4d}
body .shell .main.page-lesson :is(button,a,summary,input,textarea,select):is(:focus,:focus-visible){
 outline:0;box-shadow:none;
}
body .shell .main.page-lesson :is(button,a,summary):focus-visible{ text-decoration:underline;text-underline-offset:4px }

@media(max-width:1099px){
 body .shell .main.page-lesson .lesson-layout{display:flex;flex-direction:column;gap:0}
 body .shell .main.page-lesson .lesson-tools{position:static;order:-1;width:100%;margin-bottom:24px}
 body .shell .main.page-lesson .lesson-tools-content{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:22px;gap:25px;
 }
 body .shell .main.page-lesson .lesson-tools .panel+.panel{
  grid-template-columns:repeat(2,minmax(0,1fr));padding-top:0;padding-left:25px;
  border-top:0;border-left:1px solid #edf0e8;
 }
 body .shell .main.page-lesson #lesson-content{width:100%}
}
@media(max-width:900px){
 body .shell .main.page-lesson .lesson-title{align-items:flex-start;flex-direction:column;gap:19px}
 body .shell .main.page-lesson .lesson-title h1{font-size:30px}
 body .shell .main.page-lesson .level-switch{align-self:flex-start;margin:0}
 body .shell .main.page-lesson .lesson-level-note{text-align:left}
}
@media(max-width:700px){
 body .shell .main.page-lesson{padding-top:29px}
 body .shell .main.page-lesson .lesson-title{gap:17px;margin-bottom:21px}
 body .shell .main.page-lesson .lesson-title h1{font-size:27px;line-height:1.65;letter-spacing:.025em}
 body .shell .main.page-lesson .lesson-origin{margin-bottom:10px;font-size:9px}
 body .shell .main.page-lesson .lesson-title .eyebrow{font-size:10px;margin-bottom:8px}
 body .shell .main.page-lesson .lesson-title .en{font-size:11px;line-height:1.8;margin-top:7px}
 body .shell .main.page-lesson .level-switch{gap:2px;padding:3px;border-radius:8px}
 body .shell .main.page-lesson .level-switch button{min-width:45px;min-height:34px;padding:7px 8px;font-size:10px}
 body .shell .main.page-lesson .lesson-overview{
  grid-template-columns:auto minmax(40px,1fr);gap:10px 15px;margin-bottom:22px;font-size:10px;
 }
 body .shell .main.page-lesson .lesson-progress-summary{gap:10px}
 body .shell .main.page-lesson .lesson-progress-summary strong{font-size:10px}
 body .shell .main.page-lesson :is(.lesson-current-section,.lesson-chapter-count){
  grid-column:1/-1;font-size:10px;
 }
 body .shell .main.page-lesson .tabs{
  display:flex;gap:3px;overflow-x:auto;overflow-y:hidden;
  margin-bottom:22px;padding:0 0 1px;scroll-padding-inline:8px;
  overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#dbe3d4 transparent;
  -webkit-overflow-scrolling:touch;
 }
 body .shell .main.page-lesson .tabs::-webkit-scrollbar{height:3px}
 body .shell .main.page-lesson .tabs::-webkit-scrollbar-thumb{background:#dbe3d4;border-radius:3px}
 body .shell .main.page-lesson .tab{
  flex:0 0 auto;min-width:98px;min-height:49px;padding:11px 13px;gap:7px;font-size:12px;
 }
 body .shell .main.page-lesson .tab>.icon{width:15px;height:15px}
 body .shell .main.page-lesson .tab:after{left:15px;right:15px}
 body .shell .main.page-lesson .tab .en{display:block;font-size:9px;line-height:1.4}
 body .shell .main.page-lesson .lesson-tools{margin-bottom:21px;border-radius:9px}
 body .shell .main.page-lesson .lesson-tools>summary{min-height:46px;padding:12px 15px;font-size:11px}
 body .shell .main.page-lesson .lesson-tools-content{grid-template-columns:minmax(0,1fr);padding:19px 15px;gap:20px}
 body .shell .main.page-lesson .lesson-tools .panel{gap:14px 12px}
 body .shell .main.page-lesson .lesson-tools .panel+.panel{
  grid-template-columns:repeat(2,minmax(0,1fr));padding:19px 0 0;
  border-left:0;border-top:1px solid #edf0e8;
 }
 body .shell .main.page-lesson .lesson-tools label{font-size:11px;gap:7px}
 body .shell .main.page-lesson .lesson-tools h3{font-size:11px}
 body .shell .main.page-lesson .lesson-tools :is(select,.hb-select-trigger){min-height:42px;font-size:12px}
 body .shell .main.page-lesson .lesson-tools .btn{min-height:42px;padding:10px;font-size:11px;gap:7px}
 body .shell .main.page-lesson .chapter-end{gap:13px;padding-top:21px;margin-top:28px}
 body .shell .main.page-lesson .chapter-actions .btn{min-height:41px;padding:10px 12px}
 body .shell .main.page-lesson .footer{gap:15px;margin-top:27px;padding-top:22px;font-size:10px}
 body .shell .main.page-lesson .footer>div{gap:15px}
}
@media(max-width:360px){
 body .shell .main.page-lesson .lesson-title h1{font-size:24px}
 body .shell .main.page-lesson .level-switch button{min-width:43px;padding-inline:7px}
 body .shell .main.page-lesson .lesson-tools-content{padding:17px 13px}
 body .shell .main.page-lesson .lesson-tools .panel+.panel{grid-template-columns:minmax(0,1fr)}
 body .shell .main.page-lesson .chapter-end{align-items:flex-start}
 body .shell .main.page-lesson .chapter-actions{margin-left:auto}
}
body.reduce-motion .shell .main.page-lesson :is(
 .level-switch button,.lesson-progress-track i,.tab,.lesson-tools>summary,
 .lesson-tools>summary:after,.lesson-tools .btn,.chapter-actions .btn,.footer button
){transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){
 body .shell .main.page-lesson :is(
  .level-switch button,.lesson-progress-track i,.tab,.lesson-tools>summary,
  .lesson-tools>summary:after,.lesson-tools .btn,.chapter-actions .btn,.footer button
 ){transition:none!important;animation:none!important}
}