/* Let the lesson use the available screen, with optional navigation panels. */
.topbar-start{display:flex;align-items:center;gap:18px;min-width:0}
.sidebar-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;color:var(--ink);background:#f7f9f5;flex-shrink:0;font-size:.875rem}
.sidebar-toggle:hover{background:#eaf2dc}
.sidebar-toggle .icon{width:19px;height:19px}
.sidebar-toggle-label{min-width:95px;text-align:left}
html[data-sidebar="collapsed"] .sidebar-toggle .icon{transform:rotate(180deg)}
main[data-view="learn"]{max-width:none;padding-inline:clamp(24px,3vw,56px);padding-top:38px}
main[data-view="learn"] .page-heading{margin-bottom:30px}
.lesson-layout-toolbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.lesson-layout-toolbar>span{font-size:.9375rem;color:var(--muted)}
.lesson-list-toggle{min-width:145px;justify-content:flex-start}
main[data-view="learn"] .learning-layout{grid-template-columns:minmax(270px,290px) minmax(0,1fr);gap:32px;align-items:start}
main[data-view="learn"] .learning-layout[data-lesson-nav="collapsed"]{grid-template-columns:minmax(0,1fr)}
main[data-view="learn"] .lesson-nav[hidden]{display:none!important}
main[data-view="learn"] .lesson-nav{display:block;padding:22px 14px;border-radius:18px;position:sticky;top:20px;max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain}
main[data-view="learn"] .lesson-nav-title{display:block;padding:0 8px 18px}
main[data-view="learn"] .lesson-nav-title>span{margin-top:8px}
main[data-view="learn"] .lesson-link{padding:15px 10px;gap:12px;line-height:1.5;margin:5px 0}
main[data-view="learn"] .lesson-link small{display:block;line-height:1.5}
main[data-view="learn"] .lesson-content{container-type:inline-size;container-name:lesson;min-width:0}
main[data-view="learn"] .lesson-heading{gap:16px;margin-bottom:20px}
main[data-view="learn"] .lesson-title{font-size:clamp(1.8rem,2.1vw,2.25rem);line-height:1.4;margin-bottom:18px}
main[data-view="learn"] .lesson-intro{font-size:1.125rem;line-height:1.85;max-width:85ch}
main[data-view="learn"] .compare-pair{grid-template-columns:minmax(0,1fr);gap:24px;margin:32px 0}
main[data-view="learn"] .compare-card{padding:32px;border-radius:20px}
main[data-view="learn"] .compare-card .eyebrow{font-size:.8125rem;line-height:1.5}
main[data-view="learn"] .compare-card h3{font-size:1.5rem;line-height:1.5;margin:14px 0 18px}
main[data-view="learn"] .compare-card p{font-size:1.125rem;line-height:1.85;max-width:70ch}
main[data-view="learn"] .meaning-flow{gap:10px;row-gap:14px;margin-top:28px;font-size:.9375rem;line-height:1.65}
main[data-view="learn"] .meaning-flow span{padding:10px 13px}
main[data-view="learn"] .lesson-caution{padding:24px 28px;gap:16px;align-items:flex-start}
main[data-view="learn"] .lesson-caution p{font-size:1rem;line-height:1.85}
main[data-view="learn"] .lesson-word-section{margin-top:42px}
main[data-view="learn"] .lesson-word-section>.section-line{margin-bottom:22px}
main[data-view="learn"] .lesson-definition{padding-inline:28px}
main[data-view="learn"] .lesson-definition summary{padding:24px 0;font-size:1.0625rem}
main[data-view="learn"] .lesson-definition .term-meaning{font-size:1.0625rem;line-height:1.85;max-width:85ch}
main[data-view="learn"] .definition-example{padding:20px 24px;margin:22px 0;max-width:95ch}
main[data-view="learn"] .definition-example p{font-size:1.0625rem;line-height:1.8}
main[data-view="learn"] .lesson-check{margin-top:36px;padding:30px}
main[data-view="learn"] .lesson-check h3{font-size:1.25rem;line-height:1.7}
main[data-view="learn"] .lesson-check>p{font-size:1rem;line-height:1.8;margin:12px 0 23px}
main[data-view="learn"] .lesson-bottom{margin-top:28px}
@container lesson (min-width:820px){main[data-view="learn"] .compare-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:681px){
html[data-sidebar="collapsed"] .sidebar{width:76px;padding:25px 12px}
html[data-sidebar="collapsed"] .workspace{margin-left:76px;width:calc(100% - 76px)}
html[data-sidebar="collapsed"] .sidebar .brand{justify-content:center}
html[data-sidebar="collapsed"] .sidebar .brand-mark{width:43px;height:47px;flex-shrink:0}
html[data-sidebar="collapsed"] .sidebar .brand-copy,html[data-sidebar="collapsed"] .sidebar .side-label,html[data-sidebar="collapsed"] .sidebar .side-bottom,html[data-sidebar="collapsed"] .sidebar .nav-label{display:none}
html[data-sidebar="collapsed"] #navigation{margin-top:33px}
html[data-sidebar="collapsed"] .sidebar .nav-link{width:48px;min-height:46px;padding:13px;justify-content:center;margin-bottom:9px}
html[data-sidebar="collapsed"] .toast{left:calc(50% + 38px)}
}
@media(max-width:1050px){
main[data-view="learn"] .learning-layout{grid-template-columns:minmax(0,1fr);gap:28px}
main[data-view="learn"] .lesson-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;padding:20px;position:static;max-height:none;overflow:visible}
main[data-view="learn"] .lesson-nav-title{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}
main[data-view="learn"] .lesson-nav-title>span{margin:0}
main[data-view="learn"] .lesson-nav>.small-note{grid-column:1/-1}
.topbar-start{gap:12px}
.topbar-start>span{font-size:.8125rem}
}
@media(max-width:680px){
.topbar{flex-wrap:wrap;gap:9px;padding:13px 18px}
.topbar-start{justify-content:space-between;width:100%}
.topbar .local-badge{max-width:none;margin-left:auto;font-size:.75rem}
.sidebar-toggle{font-size:.8125rem;padding:8px 10px}
.sidebar-toggle-label{min-width:86px}
html[data-sidebar="collapsed"] #navigation{display:none}
html[data-sidebar="collapsed"] .sidebar{padding-bottom:13px}
main[data-view="learn"]{padding:25px 18px 28px}
main[data-view="learn"] .page-heading{flex-wrap:wrap;row-gap:18px}
main[data-view="learn"] .page-heading .btn{font-size:.875rem}
.lesson-layout-toolbar{gap:12px;margin-bottom:24px;padding-bottom:20px}
.lesson-layout-toolbar>span{font-size:.875rem}
main[data-view="learn"] .lesson-nav{display:block;padding:18px 13px}
main[data-view="learn"] .lesson-nav-title{display:flex}
main[data-view="learn"] .lesson-link{padding:13px 10px}
main[data-view="learn"] .lesson-link small{display:none}
main[data-view="learn"] .lesson-title{font-size:1.75rem}
main[data-view="learn"] .lesson-intro{font-size:1.0625rem;line-height:1.85}
main[data-view="learn"] .compare-card{padding:25px 22px}
main[data-view="learn"] .compare-card h3{font-size:1.3rem}
main[data-view="learn"] .compare-card p{font-size:1.0625rem}
main[data-view="learn"] .meaning-flow{font-size:.875rem}
main[data-view="learn"] .lesson-caution{padding:21px 19px}
main[data-view="learn"] .lesson-word-section>.section-line{flex-wrap:wrap}
main[data-view="learn"] .lesson-definition{padding-inline:21px}
main[data-view="learn"] .definition-example{padding:19px}
main[data-view="learn"] .lesson-check{padding:24px 22px}
}