.lesson-layout.has-lesson-axis main > .lesson-page {
  width: 100%;
  max-width: none;
  margin: 24px auto 0;
}
.lesson-layout main > .topbar { padding-block: 12px; min-height: 0; }
.lesson-hero {
  padding: clamp(24px, 4vw, 52px);
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(125deg, #153934, #205e55);
}
.lesson-hero .eyebrow { color: #c0e8db; }
.lesson-hero h1 { color: inherit; margin: 10px 0; font-size: clamp(32px, 4vw, 54px); }
.lesson-hero .lead { color: #e1f2ed; max-width: 66ch; margin: 0; }
.lesson-hero nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }
.lesson-hero .primary { width: auto; background: #fff; color: #174b42; }
.lesson-hero .lesson-jump-task { color: #fff; text-underline-offset: 4px; padding-block: 10px; }
.lesson-hero a:focus-visible { outline-color: #fff; }
.lesson-layout .learning-controls { padding: 12px 16px; margin-block: 12px; }
.lesson-layout .learning-controls .mode-explanation { border: 0; padding: 0; margin: 6px 0; }
.lesson-layout .learning-controls .save-notice { margin: 4px 0 0; }
.lesson-layout .lesson-divider { margin: 30px 0 12px; padding-bottom: 10px; border-bottom: 1px solid #c4d8d1; }
.lesson-layout .block { margin-top: 16px; }
.lesson-layout .block > :is(p, ol, ul) { max-width: 78ch; }
.lesson-layout .exercise {
  margin-top: 28px;
  border: 1px solid #8db6aa;
  border-top: 5px solid #23766b;
  background: #f3faf7;
}
.lesson-layout :is(#material-lekcji, #zadanie-lekcji) { scroll-margin-top: 135px; }
.lesson-layout #sequence-model.parts { max-width: 820px; }
@media (max-width: 760px) {
  .lesson-layout.has-lesson-axis main > .lesson-page { margin-top: 16px; }
  .lesson-hero { border-radius: 16px; }
}