.lesson-article {
  --reading-width:var(--lesson-width);
  container-name: lesson;
  container-type: inline-size;
  min-width: 0;
}
.lesson-page-header,
.lesson-focus,
.lesson-reading,
.lesson-paper,
.lesson-notebook,
.lesson-compare,
.lesson-step,
.lesson-objectives,
.lesson-sources,
.lesson-end,
.lesson-page .question {
  width: 100%;
  max-width: var(--reading-width);
  margin-inline: 0;
}
.lesson-page-header {
  margin-block: 0 36px;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.lesson-page-header h1 {
  max-width: 28ch;
  margin: 8px 0 16px;
}
.lesson-page-header > p {
  color: var(--muted);
  margin: 0;
}
.lesson-caption {
  font-size: .88rem;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 12px;
}
.lesson-focus {
  margin-block: 24px 32px;
  line-height: 1.75;
}
.lesson-focus p {
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 400;
}
.lesson-focus h2 {
  font-size: 1.3rem;
}
.lesson-page section[id],
.lesson-page figure[id] {
  scroll-margin-top: calc(var(--header-h) + 64px);
}
.lesson-reading,
.lesson-paper,
.lesson-notebook,
.lesson-compare,
.lesson-step {
  display: block;
  min-width: 0;
  margin-block: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.lesson-reading > h2,
.lesson-paper > h2,
.lesson-notebook > h2,
.lesson-compare > h2,
.lesson-step > h2 {
  max-width: 55ch;
}
.lesson-deck,
.lesson-spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 28px 0;
  align-items: start;
}
.lesson-deck > *,
.lesson-spread > * {
  min-width: 0;
  margin: 0;
}
.lesson-rail {
  padding: 20px;
  border-left: 3px solid #b6cad8;
  background: #f2f6f9;
  min-width: 0;
  margin: 28px 0;
}
.lesson-rail .ui-prose {
  font-size: 1rem;
}
.lesson-objectives {
  margin-block: 24px;
  font-size: .95rem;
}
.lesson-objectives h2 {
  font-size: 1rem;
  margin-bottom: 10px;
  color: var(--muted);
}
.lesson-objectives ul {
  margin: 0;
}
.lesson-objectives li {
  margin-bottom: 6px;
}
.lesson-dossier {
  margin: 36px 0;
  padding: 24px;
  border-left: 3px solid #b7c4cc;
  background: #f4f7f9;
}
.lesson-dossier p {
  font-size: 1rem;
}
.lesson-dossier > p:last-child {
  margin-bottom: 0;
}
.lesson-terminal {
  min-width: 0;
  margin: 24px 0;
}
.lesson-terminal .code-wrap {
  margin: 0;
}
.lesson-summary {
  border-top: 2px solid #a9bfce;
  padding-top: 28px;
  margin: 48px 0 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.lesson-summary h3 {
  font-size: 1.1rem;
}
.lesson-summary ul {
  font-size: .97rem;
}
.lesson-sources {
  border-top: 1px solid var(--line);
  padding-top: 28px;
  margin-block: 36px;
  font-size: .94rem;
}
.lesson-sources h2 {
  font-size: 1.15rem;
}
.lesson-sources ul {
  padding-left: 20px;
}
.lesson-sources li {
  margin-bottom: 10px;
}
.lesson-sources a {
  overflow-wrap: anywhere;
}
.lesson-sources li p {
  font-size: .88rem;
  margin: 6px 0;
  color: var(--muted);
}
.lesson-end {
  border-top: 2px solid #a9bfce;
  padding-top: 28px;
  margin-top: 40px;
}
.lesson-end > div {
  max-width: 100%;
}
.lesson-end h2 {
  font-size: 1.25rem;
}
.lesson-pagination {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.lesson-pagination a {
  text-decoration: none;
  line-height: 1.5;
  font-size: .94rem;
}
.lesson-pagination a[rel=next] {
  text-align: right;
}
.lesson-pagination a:only-child {
  grid-column: 1 / -1;
}
.lesson-pagination span {
  display: block;
  color: var(--muted);
  font-size: .82rem;
  margin-bottom: 8px;
}
.lesson-outline {
  position: sticky;
  top: var(--header-h);
  z-index: 25;
  background: #fff;
  border-bottom: 1px solid var(--line);
  margin: -8px 0 28px;
  padding: 0;
}
.lesson-outline > summary {
  padding: 12px 0;
  color: var(--accent);
  font-size: .9rem;
  font-weight: 600;
}
.lesson-outline > summary span {
  font-weight: 400;
  color: var(--muted);
  margin-left: 12px;
}
.lesson-outline nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 6px 0 18px;
  max-height: 48vh;
  overflow: auto;
}
.lesson-outline a {
  font-size: .88rem;
  text-decoration: none;
  padding: 5px 0;
  line-height: 1.4;
}
.lesson-outline a[aria-current] {
  font-weight: 650;
  text-decoration: underline;
}
.lesson-page pre {
  max-width: 100%;
}
.lesson-page figure {
  max-width: 100%;
  margin-inline: 0;
}
@container lesson (min-width:760px) {
  .lesson-spread {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lesson-deck {
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr);
  }
  .lesson-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .lesson-outline {
    top: var(--header-h);
  }
}
@media (max-width: 560px) {
  .lesson-page-header {
    padding-bottom: 24px;
    margin-bottom: 28px;
  }
  .lesson-page-header h1 {
    max-width: none;
  }
  .lesson-deck,
  .lesson-spread {
    margin: 24px 0;
    gap: 24px;
  }
  .lesson-dossier,
  .lesson-rail {
    padding: 20px 16px;
  }
  .lesson-pagination {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .lesson-pagination a[rel=next] {
    text-align: left;
  }
  .lesson-outline {
    top: var(--header-h);
  }
  .lesson-reading,
  .lesson-paper,
  .lesson-notebook,
  .lesson-compare,
  .lesson-step {
    margin-block: 32px;
  }
  .lesson-summary {
    margin-top: 40px;
  }
}