.lesson {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 28px;
  background: #fffdf8;
  color: #1e1e1c;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  font-size: 16px;
}
.lesson p, .lesson li, .lesson td, .lesson th {
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.lesson p { margin: 0 0 16px; }
.lesson h2 {
  font-size: 24px;
  line-height: 1.3;
  margin: 44px 0 16px;
  border-bottom: 1px solid #e8e4da;
  padding-bottom: 8px;
  scroll-margin-top: 96px;
}
.lesson h3 {
  font-size: 18px;
  line-height: 1.35;
  margin: 28px 0 12px;
  color: #3a382f;
  scroll-margin-top: 96px;
}
.lesson code {
  background: #f2efe6;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.lesson pre {
  background: #1e1e1c;
  color: #f4f1e8;
  padding: 18px;
  border-radius: 10px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.lesson pre code {
  background: none;
  color: inherit;
  padding: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lesson .box, .lesson .callout {
  border-radius: 10px;
  padding: 20px 24px;
  margin: 28px 0;
  max-width: 100%;
}
.lesson .box__label, .lesson .callout__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.lesson .box--overview {
  background: #faf7f0;
  border: 1px solid #e6dcc8;
}
.lesson .box--overview .box__label { color: #8a6d1f; }
.lesson .box__meta {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  font-size: 14px;
}
.lesson .box__meta li { margin: 4px 0; }
.lesson .callout--note {
  background: #f6f5f2;
  border-left: 4px solid #b9b2a3;
}
.lesson .callout--tip {
  background: #f9f5ea;
  border-left: 4px solid #b98a1e;
}
.lesson .callout--warning {
  background: #fbf1ee;
  border-left: 4px solid #c0492e;
}
.lesson .callout--note .callout__label { color: #6f6a5d; }
.lesson .callout--tip .callout__label { color: #8a6d1f; }
.lesson .callout--warning .callout__label { color: #a63c22; }
.lesson .box--checkpoint {
  background: #eff5ef;
  border: 1px solid #cfe0cf;
}
.lesson .box--checkpoint .box__label { color: #2f6b3c; }
.lesson .checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lesson .checklist li {
  padding-left: 30px;
  position: relative;
  margin: 8px 0;
}
.lesson .checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #2f6b3c;
  font-weight: 700;
}
.lesson table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
}
.lesson thead th {
  background: #1e1e1c;
  color: #fff;
  text-align: left;
  padding: 12px 16px;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.lesson tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #e8e4da;
  font-size: 14px;
}
.lesson tbody tr:last-child td { border-bottom: none; }
.lesson img { max-width: 100%; height: auto; }
@media (max-width: 640px) {
  .lesson { padding: 24px 16px; }
  .lesson h2 { font-size: 21px; margin-top: 36px; }
  .lesson h3 { font-size: 17px; }
  .lesson .box, .lesson .callout { padding: 16px 18px; margin: 22px 0; }
  .lesson table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* The learner SPA has generic content rules that override component surfaces.
   Keep these declarations scoped to the lesson section and force only Fable's sanctioned components. */
section.lesson div.box,
section.lesson div.callout {
  border-radius: 10px !important;
  padding: 20px 24px !important;
  margin: 28px 0 !important;
  max-width: 100% !important;
}
section.lesson div.box p.box__label,
section.lesson div.callout p.callout__label {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
}
section.lesson div.box.box--overview {
  background-color: #faf7f0 !important;
  border: 1px solid #e6dcc8 !important;
}
section.lesson div.box.box--overview p.box__label { color: #8a6d1f !important; }
section.lesson div.box.box--checkpoint {
  background-color: #eff5ef !important;
  border: 1px solid #cfe0cf !important;
}
section.lesson div.box.box--checkpoint p.box__label { color: #2f6b3c !important; }
section.lesson div.callout.callout--note {
  background-color: #f6f5f2 !important;
  border-left: 4px solid #b9b2a3 !important;
}
section.lesson div.callout.callout--tip {
  background-color: #f9f5ea !important;
  border-left: 4px solid #b98a1e !important;
}
section.lesson div.callout.callout--warning {
  background-color: #fbf1ee !important;
  border-left: 4px solid #c0492e !important;
}
section.lesson div.callout.callout--note p.callout__label { color: #6f6a5d !important; }
section.lesson div.callout.callout--tip p.callout__label { color: #8a6d1f !important; }
section.lesson div.callout.callout--warning p.callout__label { color: #a63c22 !important; }
section.lesson table thead th {
  background-color: #1e1e1c !important;
  color: #fff !important;
}
section.lesson pre {
  background-color: #1e1e1c !important;
  color: #f4f1e8 !important;
}
@media (max-width: 640px) {
  section.lesson div.box,
  section.lesson div.callout {
    padding: 16px 18px !important;
    margin: 22px 0 !important;
  }
}