/* Sidebar-first tutorial workspace. Neutral surfaces, restrained green accents. */
body.md.lessonPage {
  --fg: #292d33; --fg-muted: #747a83; --accent: #458568; --accent-dk: #306d52;
  --accent-soft: #edf4ef; --mint: #81ad96; --border: #e3e5e9; --bg: #f6f7f9;
  background: var(--bg);
}
body.md.lessonPage .tutorialAppBar { background: #ffffff; color: #343a43; border-bottom: 1px solid #e5e7eb; box-shadow: 0 4px 16px #203b3115; }
body.md.lessonPage .tutorialBack { background: #f6f7f9; color: #555d68; border-color: #e5e7eb; border-radius: 8px; box-shadow: none; }
body.md.lessonPage .tutorialBackIcon { color: #707985; }
body.md.lessonPage .tutorialBack:hover { background: #eef0f3; }
body.md.lessonPage .tutorialAppIdentity, body.md.lessonPage .tutorialAppCourse { color: #343a43; }
body.md.lessonPage .tutorialAppMark { background: #e9eef0; color: #5c6974; box-shadow: none; border-radius: 7px; }
body.md.lessonPage .tutorialHeaderProgress { color: #7c838d; }
body.md.lessonPage .tutorialHeaderTrack { background: #eceef1; }
body.md.lessonPage .tutorialHeaderTrack i { background: #81ad96; }
body.md.lessonPage .tutorialSidebar { background: #f8f9fb; border-color: #e3e6eb; }
body.md.lessonPage .tutorialWorkspace { background: none; padding-bottom: 45px; }
body.md.lessonPage .tutorialSidebarIntro h1 { font-size: 27px; line-height: 1.4; }
body.md.lessonPage .tutorialMeta > span { background: #ffffff90; border-color: #e3e6eb; }
body.md.lessonPage .tabs { border: 1px solid #e3e6eb; background: #eef0f3; border-radius: 10px; padding: 4px; }
body.md.lessonPage .tabs button { border-radius: 7px !important; }
body.md.lessonPage .tabs button.is-active { background: #fff !important; color: #343c47 !important; box-shadow: 0 2px 6px #203b3110 !important; }
body.md.lessonPage .tutorialTabIcon { background: #a0a7b0; border-radius: 6px; }
body.md.lessonPage .is-active .tutorialTabIcon { background: #606c79; color: #ffffff; box-shadow: none; }
body.md.lessonPage .tutorialJourney { background: #ffffff; color: #4b5562; border: 1px solid #e3e7ec; border-radius: 12px; padding: 17px; }
body.md.lessonPage .tutorialJourney p { color: #858c96; }
body.md.lessonPage .tutorialJourneyHead b { color: #458568; }
body.md.lessonPage .tutorialJourneyTrack { background: #eceef1; }
body.md.lessonPage .tutorialJourneyTrack i { background: #81ad96; }
body.md.lessonPage .tutorialOutlineItem { padding-block: 11px; border-radius: 8px; }
body.md.lessonPage .tutorialOutlineItem.is-current { background: #edf0f3; color: #384553; box-shadow: inset 3px 0 #82948b; }
body.md.lessonPage .tutorialOutlineCheck { background: #82a591; }
body.md.lessonPage .tutorialOutlineNumber { font-size: 12px; }
.lessonOverview { width: min(950px,100%); margin: 0 auto 14px; padding: 21px 24px 0; overflow: hidden; position: relative; border: 1px solid #e0e4e9; border-radius: 16px; background: #ffffff; }
.lessonOverview::after { display: none; content: ''; position: absolute; pointer-events: none; width: 170px; height: 170px; border: 1px solid #9ab57826; border-radius: 50%; right: -20px; top: -83px; box-shadow: 0 0 0 18px #a4bb8220, 0 0 0 38px #a4bb8210; }
.lessonOverviewMain { display: flex; gap: 16px; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.lessonOverviewCopy { min-width: 0; }
.lessonEyebrow { display: block; color: #858b94; letter-spacing: .12em; font-size: 9px; font-weight: 650; }
body.md.lessonPage #lessonTitle { margin: 5px 0; font-size: 28px; font-weight: 750; line-height: 1.35; letter-spacing: -.03em; border: 0; }
.lessonVisited { color: #7b828d; font-size: 11px; }
.lessonRing { --lesson-progress: 0%; flex: none; position: relative; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(#60997c var(--lesson-progress), #eceef2 0); padding: 5px; display: grid; place-items: center; }
.lessonRing > span { display: grid; grid-auto-flow: column; align-items: baseline; justify-content: center; align-content: center; gap: 1px; width: 100%; height: 100%; border: 3px solid #ffffff; border-radius: 50%; background: #ffffff; color: #3c7858; font-size: 19px; font-weight: 750; font-variant-numeric: tabular-nums; }
.lessonRing small { font-size: 9px; font-weight: 500; }
.lessonOverviewFoot { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 10px 0; border-top: 1px solid #eceef2; font-size: 10px; color: #9297a0; }
.lessonDifficulty { color: #b39157; letter-spacing: .04em; }
.lessonDifficulty span { color: #818894; margin-left: 5px; letter-spacing: 0; }
.lessonChapters { width: min(950px,100%); margin: 0 auto 18px; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #cdd2d9 transparent; padding: 2px 1px 6px; }
.lessonChapter { display: inline-flex; align-items: center; flex: none; gap: 7px; padding: 6px 10px 6px 6px; color: #747d89; background: #fff; border: 1px solid #e4e7ec; border-radius: 8px; font-family: inherit; font-size: 11px; line-height: 1.6; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.lessonChapterNumber { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 5px; background: #f1f3f6; color: #8a939e; font-size: 10px; font-weight: 700; }
.lessonChapterLabel { max-width: 135px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
.lessonChapter.is-current { background: #edf3ef; color: #426752; border-color: #f0f2f5; }
.lessonChapter.is-current .lessonChapterNumber { color: #54606c; background: #e2e7ec; }
.lessonChapter:hover { border-color: #b2bcc7; }
.lessonChapter.is-visited:not(.is-current) .lessonChapterNumber { background: #edf4ef; color: #648b73; }
body.md.lessonPage .tutorialWorkspaceTop { gap: 9px; margin-bottom: 10px; }
body.md.lessonPage #tutorialWorkspaceTitle { color: #7e8590 !important; font-size: 13px; font-weight: 500; }
body.md.lessonPage .tutorialOutlineToggle, body.md.lessonPage .tutorialResume { color: #64707c; background: #ffffff; border-color: #e0e4ea; border-radius: 7px; }
body.md.lessonPage .ui-accordion .ui-accordion-header { margin-top: 10px; border-color: #e1e5eb; background: #fff; padding-block: 16px; box-shadow: 0 3px 8px #334a2d04; border-radius: 11px; font-weight: 650; }
body.md.lessonPage .ui-accordion .ui-accordion-header::after { background: #f1f3f6; border: 0; border-radius: 6px; color: #919aa5; }
body.md.lessonPage .ui-accordion .ui-accordion-header.ui-state-active { background: #f4f5f7; color: #363e48; border-color: #f0f2f5; border-radius: 12px 12px 0 0; box-shadow: none; }
body.md.lessonPage .ui-accordion .ui-accordion-header.ui-state-active::after { background: #e3e8ec; color: #687784; font-weight: 800; }
body.md.lessonPage .ui-accordion .ui-accordion-header.ui-state-active::before { border-color: #7e8a96; }
body.md.lessonPage .ui-accordion .ui-accordion-content { border-color: #e1e5eb; border-radius: 0 0 12px 12px; box-shadow: 0 8px 22px #334a2d06; padding-bottom: 24px; }
body.md.lessonPage .tutorialContentPage > h2 { font-size: 21px; line-height: 1.5; margin-top: 8px; padding-bottom: 11px; border-bottom: 1px solid #eceef2; color: #343b45; letter-spacing: -.025em; }
body.md.lessonPage .tutorialContentPage p { color: #4d535e; line-height: 1.85; }
body.md.lessonPage .tutorialContentPage img { border: 1px solid #e3e7ec; border-radius: 10px; background: #fafbfc; box-shadow: 0 4px 12px #30462a06; transition: box-shadow .2s, border-color .2s; }
body.md.lessonPage .tutorialContentPage img:hover { border-color: #bac5ce; box-shadow: 0 5px 18px #30462a12; }
body.md.lessonPage .tutorialContentPage blockquote { border-left: 3px solid #c7cfd8; background: #f5f6f8; border-radius: 0 8px 8px 0; color: #67707c; padding: 12px 16px; }
body.md.lessonPage .tutorialNavigationHeader { border-color: #e6e9ed; padding-bottom: 11px; }
body.md.lessonPage .tutorialNavigationHeader a { border-color: #e2e6ec; background: #f6f7f9; border-radius: 7px; }
body.md.lessonPage .tutorialNavigationHeader .tutorialNextButton { color: #fff; background: #458568; border-color: #458568; }
body.md.lessonPage .tutorialNavigationHeader .tutorialNextButton:hover { background: #356d53; border-color: #356d53; }
body.md.lessonPage .tutorialTocToggle { border-radius: 6px; padding: 5px 7px; color: #75837e; }
body.md.lessonPage .tutorialToc { background: #f7f8fa; border-color: #e1e5eb; box-shadow: 0 4px 10px #30462a05; }
body.md.lessonPage .tutorialTocItem { border-radius: 6px; }
body.md.lessonPage .tutorialTocItem.current { color: #486957; background: #edf3ef; font-weight: 650; }
body.md.lessonPage .tutorialProgress { height: 3px; background: #eceef2; margin-bottom: 16px; }
body.md.lessonPage .tutorialProgressBar { background: #81ad96; transition: width .3s ease; }
body.md.lessonPage .tutorialSubflow { border-color: #dce1e7; padding-left: 14px; }
body.md.lessonPage .tutorialSubflow::before { content: '动手实践 · 分步完成'; color: #929aa5; font-size: 10px; letter-spacing: .07em; }
body.md.lessonPage .tutorialSubflow > .tutorialContentPage > h3:first-child { color: #596573; }
body.md.lessonPage .tutorialNextButtonContainer .tutorialNextButton { background: #3c7858; border-color: #3c7858; border-radius: 9px; box-shadow: 0 4px 12px #35572e17; }
body.md.lessonPage .tutorialHelpIntro { background: #ffffff; border-color: #e2e6eb; }
body.md.lessonPage .tutorialHelpIntro h2 { color: #404955; }
body.md.lessonPage .tutorialHelpGrid > a { border-color: #e1e5eb; }
body.md.lessonPage .tutorialHelpCardArrow { display: grid; place-items: center; width: 27px; height: 27px; background: #f1f3f6; border-radius: 7px; color: #7a8794; }
body.md.lessonPage.is-help-mode .lessonChapters { display: none; }
body.md.lessonPage :is(.lessonChapter, .tutorialTocToggle, .tutorialTocItem):focus-visible { outline: 3px solid #90ad9c; outline-offset: 2px; }
@media (max-width: 820px) {
  body.md.lessonPage .tutorialAppBar { height: 49px; padding-inline: 10px; gap: 10px; }
  body.md.lessonPage .tutorialBack { min-height: 31px; padding: 5px 8px; font-size: 11px; }
  body.md.lessonPage .tutorialAppIdentity { min-width: 0; gap: 7px; }
  body.md.lessonPage .tutorialAppName { display: none; }
  body.md.lessonPage .tutorialAppCourse { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.md.lessonPage .tutorialAppMark { width: 23px; height: 23px; padding: 4px; flex: none; }
  body.md.lessonPage .tutorialSidebar { padding: 9px 10px; }
  body.md.lessonPage .tutorialSidebarIntro { display: none; }
  body.md.lessonPage .tutorialSidebar:not(:has(.tabs)) { display: none; }
  body.md.lessonPage .tabs { margin: 0; }
  body.md.lessonPage .tutorialWorkspace { padding: 12px 10px 30px; }
  .lessonOverview { padding: 13px 14px 0; border-radius: 12px; margin-bottom: 10px; }
  body.md.lessonPage #lessonTitle { font-size: 21px; margin: 4px 0; overflow-wrap: anywhere; }
  .lessonEyebrow { font-size: 8px; letter-spacing: .09em; }
  .lessonOverviewMain { gap: 10px; }
  .lessonRing { width: 50px; height: 50px; padding: 4px; }
  .lessonRing > span { font-size: 15px; border-width: 2px; }
  .lessonRing small { font-size: 8px; }
  .lessonVisited { font-size: 9px; }
  .lessonOverviewFoot { font-size: 9px; margin-top: 10px; padding: 7px 0; gap: 5px; }
  .lessonDifficulty span { margin-left: 3px; }
  .lessonChapters { gap: 6px; margin-bottom: 10px; scrollbar-width: none; }
  .lessonChapters::-webkit-scrollbar { display: none; }
  .lessonChapter { padding: 5px 8px 5px 5px; }
  .lessonChapterLabel { max-width: 96px; font-size: 10px; }
  .lessonChapterNumber { width: 20px; height: 20px; font-size: 9px; }
  body.md.lessonPage .tutorialWorkspaceTop { gap: 5px; }
  body.md.lessonPage #tutorialWorkspaceTitle { font-size: 11px; }
  body.md.lessonPage .tutorialResume { font-size: 9px; padding-inline: 5px; }
  body.md.lessonPage .tutorialOutlineToggle { font-size: 10px; min-height: 29px; padding: 5px 8px; }
  body.md.lessonPage .ui-accordion .ui-accordion-header { font-size: 13px; padding: 13px 30px 13px 47px; }
  body.md.lessonPage .ui-accordion .ui-accordion-header::after { left: 11px; min-width: 25px; font-size: 10px; }
  body.md.lessonPage .ui-accordion .ui-accordion-header::before { right: 15px; width: 6px; height: 6px; }
  body.md.lessonPage .ui-accordion .ui-accordion-content { padding: 15px 13px 22px; }
  body.md.lessonPage .tutorialContentPage { font-size: 14px; }
  body.md.lessonPage .tutorialContentPage > h2 { font-size: 18px; }
  body.md.lessonPage .tutorialContentPage > h3 { font-size: 16px; }
  body.md.lessonPage .tutorialNavigationHeader a { font-size: 10px; min-height: 32px; padding-inline: 8px; }
  body.md.lessonPage .countDiv { font-size: 10px; }
  body.md.lessonPage .tutorialSubflow > .tutorialNavigationHeader a { font-size: 10px; padding-inline: 6px; }
  body.md.lessonPage .tutorialCourseNav { background: #f6f7f9; border-right: 1px solid #e0e5eb; }
  body.md.lessonPage .tutorialDrawerHead { border-color: #e1e5eb; }
  body.md.lessonPage .tutorialDrawerScrim { background: #242b3670; backdrop-filter: blur(3px); }
  body.md.lessonPage .tutorialHelpIntro { padding: 16px; }
  body.md.lessonPage .tutorialHelpIntro h2 { font-size: 18px; }
}
@media (prefers-reduced-motion: no-preference) {
  .lessonOverview { animation: lessonArrive .45s ease-out; }
  body.md.lessonPage .tutorialContentPage { animation: lessonArrive .24s ease-out; }
  @keyframes lessonArrive { from { opacity: .45; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
/* Consistent line icons and editorial heading hierarchy. */
body.md.lessonPage .lessonIcon { display: block; width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body.md.lessonPage :is(.tutorialAppMark, .tutorialTabIcon) { display: grid; place-items: center; padding: 6px; width: 32px; height: 32px; border: 1px solid #e0e5eb; border-radius: 10px; background: #f5f7fa; color: #7b8796; box-shadow: inset 0 1px 0 #fff; }
body.md.lessonPage .is-active .tutorialTabIcon { color: #556d65; background: #edf3f0; border-color: #dce7e0; box-shadow: inset 0 1px 0 #fff; }
body.md.lessonPage .tutorialBackIcon .lessonIcon { width: 16px; height: 16px; }
body.md.lessonPage .tutorialAppIdentity { font-weight: 650; letter-spacing: .015em; }
body.md.lessonPage .tutorialAppName { font-size: 13px; }
body.md.lessonPage .tutorialResume { display: inline-flex; align-items: center; gap: 6px; }
body.md.lessonPage .tutorialResume[hidden] { display: none; }
body.md.lessonPage .tutorialResume .lessonIcon { width: 13px; height: 13px; }
.lessonTitleRow { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.lessonProjectIcon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 1px solid #e8e1d7; border-radius: 12px; background: #faf6ef; color: #a28a65; box-shadow: inset 0 1px 0 #fff, 0 2px 4px #30384504; }
body.md.lessonPage .lessonProjectIcon .lessonIcon { width: 23px; height: 23px; }
body.md.lessonPage #lessonTitle { min-width: 0; margin: 0; color: #2e3540; font-weight: 750; letter-spacing: -.035em; line-height: 1.35; overflow-wrap: anywhere; }
body.md.lessonPage .lessonEyebrow { font-size: 9px; font-weight: 600; letter-spacing: .11em; color: #9299a4; }
body.md.lessonPage .ui-widget { font-family: inherit; }
body.md.lessonPage :is(.tutorialSidebarIntro h1, .ui-accordion-header, .tutorialContentPage h2, .tutorialContentPage h3, .tutorialHelpIntro h2, .tutorialHelpGroupHead h3) { font-family: inherit; }
body.md.lessonPage .tutorialSidebarIntro h1 { font-weight: 750; letter-spacing: -.035em; color: #303843; }
body.md.lessonPage .ui-accordion .ui-accordion-header { font-weight: 650; letter-spacing: .005em; line-height: 1.55; color: #505a66; }
body.md.lessonPage .ui-accordion .ui-accordion-header::after { display: grid; place-items: center; width: 29px; height: 29px; padding: 0; border: 1px solid #e2e7ed; border-radius: 9px; background: linear-gradient(#fff, #f3f5f8); color: #8b97a4; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px #25324704; }
body.md.lessonPage .ui-accordion .ui-accordion-header.ui-state-active { color: #303b47; background: #f5f7f9; font-weight: 700; }
body.md.lessonPage .ui-accordion .ui-accordion-header.ui-state-active::after { color: #557266; background: #ecf2ee; border-color: #d7e3db; }
body.md.lessonPage .lessonChapterNumber { border-radius: 6px; font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 650; }
body.md.lessonPage .tutorialContentPage > h2 { position: relative; font-size: 21px; font-weight: 700; color: #343e4b; padding: 0 0 12px 12px; margin: 10px 0 18px; letter-spacing: -.02em; border-bottom: 1px solid #e9edf1; line-height: 1.5; }
body.md.lessonPage .tutorialContentPage > h2::before { content: ''; position: absolute; left: 0; top: .28em; height: .95em; width: 3px; border-radius: 3px; background: #9aafa4; }
body.md.lessonPage .tutorialContentPage > h3, body.md.lessonPage .tutorialSubflow > .tutorialContentPage > h3:first-child { color: #566171; font-size: 17px; font-weight: 650; letter-spacing: -.01em; line-height: 1.55; }
body.md.lessonPage #tutorialWorkspaceTitle { font-weight: 550; letter-spacing: .025em; }
body.md.lessonPage .tutorialHelpGroupHead h3 { color: #5b6573; font-weight: 650; letter-spacing: .025em; }
body.md.lessonPage .tutorialJourneyHead, body.md.lessonPage .tutorialDrawerHead b { color: #475360; font-weight: 650; letter-spacing: .02em; }
@media (max-width: 820px) {
  body.md.lessonPage :is(.tutorialAppMark, .tutorialTabIcon) { width: 25px; height: 25px; border-radius: 8px; padding: 4px; }
  body.md.lessonPage :is(.tutorialAppMark, .tutorialTabIcon) .lessonIcon { width: 15px; height: 15px; }
  body.md.lessonPage .tutorialAppCourse { font-size: 12px; font-weight: 650; letter-spacing: .005em; }
  .lessonTitleRow { gap: 9px; margin: 8px 0; }
  .lessonProjectIcon { width: 32px; height: 32px; border-radius: 10px; }
  body.md.lessonPage .lessonProjectIcon .lessonIcon { width: 19px; height: 19px; }
  body.md.lessonPage #lessonTitle { font-size: 21px; }
  body.md.lessonPage .lessonEyebrow { font-size: 8px; }
  body.md.lessonPage .ui-accordion .ui-accordion-header { padding-left: 48px; font-size: 13px; }
  body.md.lessonPage .ui-accordion .ui-accordion-header::after { width: 26px; height: 26px; min-width: 26px; border-radius: 8px; font-size: 10px; }
  body.md.lessonPage .tutorialContentPage > h2 { font-size: 18px; margin-bottom: 15px; }
  body.md.lessonPage .tutorialContentPage > h3, body.md.lessonPage .tutorialSubflow > .tutorialContentPage > h3:first-child { font-size: 15px; }
  body.md.lessonPage .tutorialOutlineToggle .lessonIcon { width: 14px; height: 14px; }
}