/* Readable typography and the expanded learning experience. */
:root { --reading-size: 18px; --muted: #606e79; }
body { font-size: 16px; line-height: 1.8; }
body.large-text { --reading-size: 21px; }
.sidebar { width: 264px; padding: 30px 20px 22px; overflow-y: auto; }
.brand { gap: 12px; margin-bottom: 34px; }
.brand small { font-size: 12px; color: #66716b; }
.brand strong { font-size: 15px; line-height: 1.7; }
.brand-mark { width: 44px; height: 48px; }
.sidebar-label { font-size: 11px; color: #6d7a70; }
.side-nav > a { font-size: 15px; gap: 11px; padding: 13px 12px; color: #58665f; }
.nav-count { font-size: 13px; color: #64756b; }
.sidebar-divider { margin: 22px 12px; }
.path-label { font-size: 13px; color: #6d796e; }
.path-link { font-size: 12px; padding: 11px 10px; color: #657268; }
.path-link > span { font-size: 11px; color: #7c897d; }
.sidebar-bottom { padding-top: 32px; }
.sidebar-note p { font-size: 15px; }
.sidebar-note > span { font-size: 11px; color: #7c7766; }
.sidebar-footer { font-size: 10px; color: #74816f; line-height: 1.8; }
.page-shell { margin-left: 264px; }
.topbar { height: 88px; padding: 0 34px; }
.breadcrumbs { font-size: 14px; gap: 13px; color: #66727e; }
.header-tools { gap: 20px; }
.search-box { width: 280px; min-height: 43px; padding: 10px 12px; }
.search-box input { font-size: 14px; }
.search-box input::placeholder { color: #78838c; }
.search-box .icon { width: 18px; height: 18px; }
.search-box kbd { font-size: 12px; }
.intro-button { font-size: 13px; gap: 7px; color: #65727a; }
.intro-button .icon { width: 19px; height: 19px; }
main { padding: 32px 34px 0; max-width: 1440px; }
.hero { min-height: 430px; }
.hero-copy { width: 57%; padding: 36px 0 36px 34px; }
.hero-eyebrow { font-size: 13px; color: #63756e; line-height: 1.8; }
.hero h1 { font-size: clamp(31px, 2.65vw, 43px); line-height: 1.65; letter-spacing: .02em; }
.hero-copy > p { font-size: 16px; line-height: 1.95; color: #5f6f7d; margin-bottom: 24px; }
.hero-actions { flex-wrap: wrap; gap: 12px; }
.hero-actions > span { font-size: 12px; color: #697984; }
.primary-button { font-size: 15px; min-height: 48px; padding: 13px 19px; gap: 15px; line-height: 1.6; }
.hero-art { width: 45%; right: 0; }
.hero-art > img { width: 112%; max-height: 95%; }
.art-label { font-size: 11px; right: 27px; }
.art-label span { font-size: 10px; }
.art-caption { font-size: 10px; right: 27px; bottom: 24px; }
.progress-strip { padding: 20px; gap: 15px; }
.progress-symbol { width: 44px; height: 44px; }
.progress-copy strong { font-size: 15px; }
.progress-copy > span { font-size: 12px; color: #6b787a; }
.progress-right { min-width: 230px; padding-right: 15px; }
.progress-top { font-size: 12px; gap: 12px; color: #68786e; }
.progress-top b { font-size: 17px; }
.progress-top strong { color: #6b7971; }
.progress-track { height: 7px; }
.curriculum { margin-top: 40px; }
.eyebrow { font-size: 11px; color: #71816e; }
.section-heading h2, .section-heading h1 { font-size: 28px; line-height: 1.6; }
.section-heading p { font-size: 15px; color: #6a7981; line-height: 1.9; }
.text-link { font-size: 13px; gap: 8px; }
.filter-row { gap: 9px; margin: 25px 0; }
.filter { font-size: 13px; padding: 9px 13px; color: #66767e; min-height: 42px; }
.filter span { font-size: 12px; }
.lesson-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.lesson-art { height: 180px; }
.lesson-art > svg { height: 160px; }
.card-number { font-size: 11px; color: #697d6c; }
.card-bookmark { width: 36px; height: 36px; top: 9px; right: 11px; }
.card-bookmark .icon { width: 19px; height: 19px; }
.card-main { padding: 22px 20px 17px; }
.card-category { font-size: 12px; color: #648262; line-height: 1.7; margin-bottom: 10px; }
.lesson-card:nth-child(3n+2) .card-category { color: #6b7d9d; }
.lesson-card:nth-child(3n) .card-category { color: #947347; }
.card-title { font-size: 20px; line-height: 1.8; min-height: 72px; letter-spacing: 0; margin-bottom: 11px; }
.card-description { font-size: 14px; line-height: 1.95; color: #667680; min-height: 81px; }
.card-depth { display: block; font-size: 12px; color: #7c806d; margin-top: 13px; }
.card-meta { font-size: 12px; gap: 10px; margin-top: 15px; padding-top: 14px; color: #6c7b7f; }
.card-meta .icon { width: 15px; height: 15px; }
.card-meta .card-arrow { width: 29px; height: 29px; }
.more-lessons { min-height: 51px; font-size: 14px; }
.results-note { font-size: 15px; }
.empty-state h3 { font-size: 21px; }
.empty-state p, .secondary-button { font-size: 15px; }
.discovery { padding: 36px; gap: 28px; }
.discovery .eyebrow { font-size: 11px; }
.discovery h2 { font-size: 28px; }
.discovery p { font-size: 14px; color: #c4cfdd; }
.discovery-link { font-size: 14px; min-height: 40px; }
.binary-demo { min-width: 280px; }
.bit-labels { font-size: 13px; color: #c2cde0; }
.bit { font-size: 38px; }
.bit-hints { font-size: 11px; color: #bdc9d9; }
.binary-equation { font-size: 15px; }
.closing-note { padding: 38px 10px; }
.closing-note h3 { font-size: 16px; line-height: 1.9; }
.closing-note p { font-size: 13px; color: #6e7f83; line-height: 1.9; }
.main-footer { font-size: 11px; line-height: 1.9; color: #687b75; padding: 24px 0; }
.dictionary-count { font-size: 13px; }
.glossary-card { padding: 27px; }
.glossary-card small { font-size: 11px; color: #6e806b; overflow-wrap: anywhere; }
.glossary-card h2 { font-size: 23px; }
.glossary-card p { font-size: 16px; color: #61727b; line-height: 1.95; }
.glossary-card button { font-size: 14px; min-height: 40px; }
.lesson-dialog { width: min(1060px, calc(100% - 36px)); }
.dialog-toolbar { padding: 15px 24px; gap: 15px; }
.dialog-brand { font-size: 14px; color: #647563; }
.reading-tools { display: flex; align-items: center; gap: 13px; }
.reading-size-button { font-size: 13px; min-height: 39px; padding: 7px 12px; border: 1px solid #d4decf; border-radius: 6px; background: #f3f6ee; white-space: nowrap; }
.reading-size-button[aria-pressed=true] { background: #dfead8; color: #42633a; }
.close-dialog { width: 40px; height: 40px; flex-shrink: 0; }
.close-dialog .icon { width: 20px; height: 20px; }
.lesson-content { max-width: 870px; padding: 38px 50px 50px; margin: 0 auto; font-size: var(--reading-size); }
.lesson-heading .eyebrow { font-size: 13px; color: #657e60; }
.lesson-heading h1 { font-size: 34px; line-height: 1.7; }
.lesson-heading .lead { font-size: var(--reading-size); color: #5f727a; line-height: 1.95; }
.lesson-info { font-size: 14px; gap: 15px; flex-wrap: wrap; margin: 25px 0; color: #637578; }
.lesson-info .icon { width: 17px; height: 17px; }
.lesson-save { font-size: 13px; padding: 8px 12px; }
.lesson-objectives { padding: 24px 27px; background: #edf3e8; border-radius: 12px; margin: 28px 0; border: 1px solid #dee8d7; }
.lesson-objectives h2 { font-size: 19px; display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.lesson-objectives ul { margin: 0; padding-left: 1.4em; }
.lesson-objectives li { font-size: 16px; line-height: 1.9; color: #52684f; padding: 3px 0; }
.lesson-toc { border: 1px solid #e2e5dc; border-radius: 10px; padding: 18px 24px; margin: 28px 0 40px; }
.lesson-toc summary { font-size: 16px; cursor: pointer; font-weight: 600; }
.lesson-toc ol { padding: 7px 0 0 0; margin: 0; list-style: none; counter-reset: toc; }
.lesson-toc li { counter-increment: toc; display: flex; align-items: baseline; gap: 12px; padding: 4px 0; }
.lesson-toc li::before { content: counter(toc, decimal-leading-zero); font: 12px monospace; color: #8a9e7b; }
.lesson-toc button { text-align: left; color: #5b7260; font-size: 15px; padding: 6px 0; line-height: 1.8; }
.lesson-toc button:hover { text-decoration: underline; }
.lesson-section { margin: 45px 0; scroll-margin-top: 85px; }
.lesson-section h2 { font-size: 24px; line-height: 1.8; margin: 0 0 18px; }
.lesson-section h2 > span { width: 31px; height: 31px; font-size: 13px; margin-right: 10px; }
.lesson-section > p, .example-box p, .case-study > p, .case-step p, .exercise > p, .exercise details p, .misconception p { font-size: var(--reading-size); line-height: 2; color: #536773; margin: 15px 0; overflow-wrap: anywhere; }
.lesson-diagram { padding: 28px 22px 21px; margin: 27px 0; }
.diagram-flow { gap: 12px; }
.diagram-node { max-width: none; min-width: 0; padding: 20px 10px; min-height: 100px; display: flex; flex-direction: column; justify-content: center; }
.diagram-node strong { font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
.diagram-node small { font-size: 13px; color: #657d5e; line-height: 1.8; }
.diagram-caption { font-size: 13px; line-height: 1.85; color: #667a5d; margin-top: 21px; }
.compare-item { padding: 19px 16px; }
.compare-item strong { font-size: 16px; color: #876b43; line-height: 1.8; }
.compare-item p { font-size: 14px; line-height: 1.95; color: #657464; }
.diagram-table-wrap { overflow-x: auto; border-radius: 7px; }
.diagram-table { width: 100%; border-collapse: collapse; background: #fffef9; font-size: 14px; min-width: 380px; line-height: 1.9; }
.diagram-table th { background: #e1ebd9; color: #4c6641; text-align: left; font-weight: 600; }
.diagram-table td, .diagram-table th { padding: 13px 15px; border: 1px solid #d4dfcc; vertical-align: top; }
.diagram-table td { color: #56694f; }
.example-box { background: #f8f2e4; border-left: 4px solid #d6bd89; border-radius: 0 10px 10px 0; padding: 20px 24px; margin: 25px 0; }
.example-box h3 { font-size: 17px; margin: 0 0 8px; color: #8b7048; }
.example-box p { margin: 0; }
.learning-extra { margin: 42px 0; }
.learning-extra > .eyebrow { font-size: 11px; margin-bottom: 6px; }
.learning-extra > h2 { font-size: 24px; line-height: 1.8; margin: 0 0 14px; }
.case-study { padding: 28px; background: #f0f3f8; border-radius: 12px; border: 1px solid #e1e6ee; }
.case-study .eyebrow { color: #7c8fa9; }
.case-step { display: flex; align-items: flex-start; gap: 14px; padding: 19px 0; border-top: 1px solid #dce3eb; }
.case-step > b { width: 29px; height: 29px; border-radius: 50%; background: #dbe3ee; color: #6c819c; font: 12px monospace; display: grid; place-items: center; flex-shrink: 0; margin-top: 3px; }
.case-step h3 { font-size: 18px; line-height: 1.8; margin: 0; }
.case-step p { margin: 7px 0 0; }
.case-result { background: #e1e9df; padding: 19px 21px; border-radius: 8px; color: #4f6a4b; line-height: 2; font-size: var(--reading-size); }
.misconception { border: 1px solid #e5e6dc; border-radius: 9px; padding: 22px 24px; margin-top: 14px; }
.misconception h3 { font-size: 17px; font-weight: 500; color: #95755b; line-height: 1.9; margin: 0 0 10px; }
.misconception h3::before { content: 'よくある思い込み'; display: block; font-size: 12px; color: #a18c72; margin-bottom: 4px; }
.misconception p { margin: 0; }
.exercise { background: #fbf6e9; border: 1px solid #e8dfc8; border-radius: 12px; padding: 27px; }
.exercise .eyebrow { color: #958260; }
.exercise details { margin-top: 13px; background: #fffdf7; border: 1px solid #e8dfc8; padding: 14px 19px; border-radius: 8px; }
.exercise summary { cursor: pointer; font-size: 15px; color: #8a754d; font-weight: 500; }
.exercise details p { margin-bottom: 0; }
.takeaway { padding: 25px 27px; gap: 17px; }
.takeaway > .icon { margin-top: 4px; width: 25px; height: 25px; }
.takeaway strong { font-size: 19px; }
.takeaway p { font-size: var(--reading-size); line-height: 2; color: #796f55; margin-top: 10px; }
.quiz-block { margin-top: 42px; }
.quiz-block > h2 { font-size: 25px; line-height: 1.8; margin: 7px 0 11px; }
.quiz-progress { color: #5b7951; font-size: 14px; margin: 0 0 20px; }
.quiz { padding: 26px; margin-top: 19px; }
.quiz .eyebrow { font-size: 12px; color: #738a67; }
.quiz h3 { font-size: 19px; line-height: 1.9; margin: 9px 0 18px; }
.quiz-option { font-size: 16px; padding: 15px; min-height: 54px; line-height: 1.9; }
.quiz-option > b { font-size: 12px; width: 27px; height: 27px; }
.quiz-feedback { font-size: 16px; line-height: 1.95; padding: 19px; color: #526c49; }
.quiz-feedback p { margin: 6px 0 0; }
.quiz-feedback strong { font-size: 17px; }
.lesson-references { padding: 24px 0; border-top: 1px solid #e1e5dc; margin-top: 35px; }
.lesson-references h2 { font-size: 17px; margin: 0 0 8px; }
.lesson-references ul { margin: 0; padding-left: 1.3em; }
.lesson-references a { font-size: 14px; color: #668364; text-decoration: underline; text-underline-offset: 4px; }
.lesson-complete-row { flex-wrap: wrap; gap: 17px; }
.lesson-complete-row > span { font-size: 15px; color: #65825b; display: flex; align-items: center; gap: 7px; }
.intro-dialog { width: min(650px, calc(100% - 32px)); padding: 42px; }
.intro-dialog .eyebrow { font-size: 10px; }
.intro-dialog h2 { font-size: 27px; }
.intro-dialog > p { font-size: 16px; color: #64745e; }
.intro-dialog li { font-size: 14px; color: #667862; line-height: 1.9; gap: 15px; }
.intro-dialog li strong { font-size: 17px; }
.intro-dialog li > b { font-size: 13px; width: 36px; height: 36px; }
.intro-dialog .storage-note { font-size: 12px; color: #8a816c; }
.toast { font-size: 14px; line-height: 1.8; padding: 13px 23px; }
@media (max-width: 1350px) and (min-width: 1081px) {
  main { padding: 28px 26px 0; }
  .topbar { padding: 0 26px; }
  .search-box { width: 235px; }
  .hero h1 { font-size: 31px; }
  .hero-copy { padding-left: 27px; width: 61%; }
  .hero-art { width: 41%; right: -13px; }
  .hero-actions > span { display: none; }
  .hero-copy > p { font-size: 15px; }
  .lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progress-right { min-width: 190px; }
  .progress-copy > span { font-size: 11px; }
  .progress-copy strong { font-size: 14px; }
  .discovery { flex-direction: column; align-items: flex-start; }
  .binary-demo { width: 75%; max-width: 400px; align-self: center; }
}
@media (max-width: 1080px) {
  .sidebar { width: 264px; transform: translateX(-100%); transition: transform .25s; }
  .sidebar.open { transform: translateX(0); }
  .sidebar.open ~ .mobile-shade { display: block; position: fixed; inset: 0; background: #23334b66; backdrop-filter: blur(2px); z-index: 25; }
  .page-shell { margin-left: 0; }
  .menu-button { display: grid; place-items: center; color: #66776d; padding: 3px; }
  .home-crumb, .crumb-separator { display: none; }
  .topbar { height: 80px; padding: 0 27px; }
  main { padding: 27px 27px 0; }
  .hero-copy { width: 57%; padding-left: 32px; }
  .hero h1 { font-size: 34px; }
  .hero-copy > p { font-size: 16px; }
  .hero-art { width: 44%; right: -5px; }
  .hero-art > img { width: 115%; max-width: none; }
  .hero-actions > span { display: none; }
  .hero .primary-button { font-size: 15px; min-height: 48px; padding: 13px 18px; gap: 13px; }
  .art-caption { display: none; }
  .lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px; }
  .card-title { font-size: 21px; min-height: 76px; }
  .card-description { font-size: 15px; min-height: 85px; }
  .progress-right { min-width: 210px; }
  .discovery { flex-direction: row; align-items: center; }
  .discovery-copy { width: 50%; }
  .discovery h2 { font-size: 26px; }
  .binary-demo { width: 44%; min-width: 255px; }
  .bit { font-size: 35px; }
  .glossary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .topbar { height: auto; min-height: 76px; padding: 16px 20px; flex-wrap: wrap; gap: 13px; }
  .breadcrumbs { font-size: 14px; }
  .header-tools { gap: 13px; }
  .search-box { width: 240px; }
  .intro-button span { display: none; }
  main { padding: 22px 20px 0; }
  .hero { min-height: 690px; }
  .hero-copy { width: 100%; padding: 29px 26px 0; }
  .hero h1 { font-size: 36px; }
  .hero-eyebrow { font-size: 13px; margin-bottom: 16px; }
  .hero-copy > p { font-size: 16px; line-height: 1.95; }
  .hero-art { top: auto; bottom: 10px; height: 280px; width: 100%; right: 0; }
  .hero-art > img { width: 93%; height: 100%; max-width: 430px; }
  .art-label { display: none; }
  .hero .primary-button { font-size: 15px; }
  .progress-strip { flex-wrap: wrap; gap: 13px; padding: 20px; }
  .progress-copy { flex: 1; }
  .progress-copy strong { font-size: 15px; }
  .progress-copy > span { font-size: 12px; }
  .progress-right { width: 100%; min-width: 0; margin-left: 0; padding-left: 58px; padding-right: 0; }
  .progress-top { font-size: 12px; }
  .progress-top b { font-size: 16px; }
  .section-heading { align-items: flex-start; flex-wrap: wrap; gap: 13px; }
  .section-heading h2, .section-heading h1 { font-size: 25px; }
  .section-heading p { font-size: 14px; }
  .text-link { font-size: 13px; margin-top: 0; }
  .filter { font-size: 13px; padding: 9px 12px; }
  .eyebrow { font-size: 11px; }
  .lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .card-main { padding: 19px 16px 16px; }
  .card-title { font-size: 18px; min-height: 65px; }
  .card-description { font-size: 14px; min-height: 108px; }
  .card-category { font-size: 11px; }
  .card-meta { font-size: 11px; gap: 8px; }
  .card-meta .beginner { display: none; }
  .card-depth { font-size: 11px; }
  .more-lessons { font-size: 14px; }
  .discovery { padding: 29px; flex-direction: column; align-items: flex-start; gap: 27px; }
  .discovery-copy { width: 100%; }
  .discovery h2 { font-size: 27px; }
  .discovery p { font-size: 15px; }
  .discovery .eyebrow { font-size: 10px; }
  .binary-demo { width: 100%; min-width: 0; max-width: 400px; align-self: center; }
  .bit-hints { font-size: 11px; }
  .closing-note h3 { font-size: 16px; }
  .closing-note p { font-size: 13px; max-width: none; }
  .main-footer { font-size: 11px; }
  .main-footer > span:last-child { font-size: 11px; }
  .glossary-grid { grid-template-columns: 1fr; }
  .lesson-content { padding: 28px 28px 38px; }
  .dialog-brand { font-size: 12px; }
  .dialog-toolbar { padding: 11px 16px; gap: 10px; }
  .reading-tools { gap: 8px; }
  .reading-size-button { font-size: 12px; padding: 8px 9px; }
  .lesson-heading h1 { font-size: 28px; }
  .lesson-heading .eyebrow { font-size: 12px; }
  .lesson-heading .lead { font-size: var(--reading-size); }
  .lesson-info { font-size: 13px; gap: 12px; }
  .lesson-info > span { font-size: 13px; }
  .lesson-save { margin-left: 0; font-size: 13px; }
  .lesson-objectives { padding: 22px; }
  .lesson-objectives li { font-size: 16px; }
  .lesson-toc { padding: 18px 21px; }
  .lesson-section h2, .learning-extra > h2 { font-size: 22px; }
  .lesson-section > p { font-size: var(--reading-size); }
  .diagram-compare { grid-template-columns: 1fr; }
  .compare-item strong { font-size: 16px; }
  .compare-item p { font-size: 15px; }
  .diagram-caption { font-size: 13px; }
  .case-study, .exercise { padding: 23px; }
  .misconception { padding: 21px; }
  .takeaway { padding: 22px; gap: 13px; }
  .takeaway strong { font-size: 18px; }
  .takeaway p { font-size: var(--reading-size); }
  .quiz { padding: 23px; }
  .quiz h3 { font-size: 19px; }
  .quiz-option { font-size: 16px; }
  .lesson-complete-row > span { font-size: 14px; text-align: left; }
  .intro-dialog { padding: 36px 27px; }
  .intro-dialog h2 { font-size: 25px; }
  .intro-dialog > p { font-size: 16px; }
  .intro-dialog li { font-size: 14px; }
  .intro-dialog li strong { font-size: 16px; }
  .intro-dialog .storage-note { font-size: 12px; }
  .toast { left: 50%; font-size: 14px; }
}
@media (max-width: 560px) {
  .topbar { padding: 14px 18px; }
  .breadcrumbs { width: 100%; }
  .header-tools { width: 100%; }
  .search-box { width: auto; flex: 1; }
  .search-box input { font-size: 14px; }
  main { padding: 20px 16px 0; }
  .hero-copy { padding: 27px 22px 0; }
  .hero h1 { font-size: 31px; }
  .hero-eyebrow { font-size: 12px; letter-spacing: .025em; }
  .hero-copy > p { font-size: 15px; letter-spacing: 0; }
  .hero { min-height: 675px; }
  .hero-art { height: 270px; }
  .hero .primary-button { font-size: 14px; padding: 13px 16px; }
  .progress-strip { padding: 17px; }
  .progress-copy strong { font-size: 14px; }
  .progress-copy > span { font-size: 12px; }
  .progress-right { padding-left: 0; }
  .lesson-grid { grid-template-columns: 1fr; gap: 23px; }
  .lesson-art { height: 202px; }
  .lesson-art > svg { width: 85%; height: 182px; }
  .card-main { padding: 23px; }
  .card-category { font-size: 12px; }
  .card-title { font-size: 23px; min-height: 0; }
  .card-description { font-size: 16px; min-height: 0; margin-top: 13px; }
  .card-depth { font-size: 13px; margin-top: 16px; }
  .card-meta { font-size: 13px; margin-top: 20px; }
  .card-meta .icon { width: 16px; height: 16px; }
  .card-meta .beginner { display: flex; }
  .section-heading h2 { font-size: 25px; }
  .filter { font-size: 12px; padding: 9px 10px; }
  .discovery { padding: 27px 23px; }
  .discovery h2 { font-size: 26px; }
  .discovery p { font-size: 14px; }
  .closing-note { align-items: flex-start; }
  .closing-note h3 { font-size: 15px; }
  .closing-note p { font-size: 13px; }
  .lesson-dialog { width: calc(100% - 18px); max-height: 95dvh; }
  .dialog-toolbar { padding: 10px 13px; }
  .dialog-brand { font-size: 0; gap: 7px; white-space: nowrap; }
  .dialog-brand::after { content: 'レッスン'; font-size: 12px; }
  .dialog-brand .icon { width: 16px; height: 16px; }
  .reading-size-button { font-size: 12px; padding: 7px; }
  .reading-tools { gap: 6px; }
  .close-dialog { width: 35px; height: 35px; }
  .lesson-content { padding: 26px 20px 34px; }
  .lesson-heading h1 { font-size: 25px; }
  .lesson-objectives, .lesson-toc { padding: 20px; }
  .lesson-section h2 { font-size: 21px; }
  .lesson-section h2 > span { width: 27px; height: 27px; font-size: 12px; margin-right: 7px; }
  .lesson-diagram { padding: 22px 16px 18px; }
  .diagram-flow { flex-direction: column; gap: 10px; }
  .diagram-node { width: 100%; min-height: 0; padding: 16px; }
  .diagram-node strong { font-size: 17px; }
  .diagram-node small { font-size: 14px; }
  .diagram-flow > .icon { transform: rotate(90deg); width: 20px; height: 20px; }
  .diagram-caption { font-size: 13px; }
  .example-box { padding: 18px 20px; }
  .case-study, .exercise, .misconception, .quiz { padding: 20px; }
  .case-step { gap: 10px; }
  .case-step h3 { font-size: 18px; }
  .case-step > b { width: 25px; height: 25px; font-size: 11px; }
  .exercise details { padding: 13px; }
  .quiz-option { font-size: 16px; padding: 14px 11px; }
  .takeaway { padding: 20px; }
  .lesson-complete-row .primary-button { width: 100%; }
}