.lesson-pages{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:18px 0 0;color:#718578;font-size:13px}
.lesson-pages[hidden]{display:none}
.lesson-pages span{margin-right:auto}
.lesson-pages button{border:1px solid #d8e6da;background:#fff;color:#276c4c;border-radius:8px;padding:9px 14px}
.lesson-pages button:hover:not(:disabled){background:#edf5ee}
.lesson-pages button:disabled{opacity:.42;cursor:not-allowed}
.course-nav button:focus-visible,.lesson:focus-visible,.lesson-pages button:focus-visible{outline:2px solid #276c4c;outline-offset:2px}
@media(min-width:761px){
  .workspace-grid{height:min(70vh,650px);min-height:540px}
  .course-nav{overflow-y:auto;scrollbar-width:thin}
  .lesson-panel{display:flex;flex-direction:column;min-height:0}
  .lesson-head{flex:none}
  .lesson-list{overflow-y:auto;min-height:0;scrollbar-width:thin}
  .lesson-pages{flex:none}
  .course-nav button{padding:12px 14px}
  .course-nav button+button{margin-top:4px}
}
@media(max-width:760px){
  .topbar{flex-direction:column;align-items:stretch;gap:12px}
  .topbar nav{width:100%;gap:16px;flex-wrap:wrap}
  .topbar nav>a[href="./exams.html"]{display:inline-block}
  .topbar nav>a[href="./pricing.html"]{display:inline-block}
  .topbar nav #account-button{margin-left:auto}
  .topbar nav button{padding:9px 11px}
  .lesson-pages{flex-wrap:wrap}
  .lesson-pages span{width:100%}
  .course-nav{scrollbar-width:thin}
  .course-nav button{min-width:128px}
}
@media(max-width:420px){
  .topbar{padding:14px 16px}
  .topbar .brand{font-size:17px;gap:8px}
  .topbar .brand-mark{width:34px;height:34px}
  .topbar nav a{font-size:13px}
  .topbar nav button{font-size:12px}
}