/* ============================================================
   LMS Course Stylesheet — scoped to #lesson-content
   Usage: Add id="lesson-content" to your content wrapper div
   ============================================================ */

/* ── Variables ─────────────────────────────────────────── */


#lesson-content {
  --cream:       #FAF7F0;
  --cream-mid:   #F2E9DC;
  --cream-dark:  #E8D9C8;
  --burg:        #7B1C2E;
  --burg-light:  #9E2D42;
  --burg-deep:   #5A1020;
  --ink:         #2C1810;
  --brown:       #6B4226;
  --gold:        #B08830;
  --gold-light:  #D4AA50;
  --sidebar-bg:  #EDE0D0;
  --math-bg:     #E4D5BE;
  --colab-bg:    #F0EBE1;
  --code-bg:     #1A1A2E;
  --rule:        #C4A882;
  --muted:       #7A5C44;
  --green-hi:    #2E7D52;
  
  
  
  
  
  
}


#lesson-content *, #lesson-content *::before, #lesson-content *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Page shell ─────────────────────────────────────────── */


/* ── Running header & footer ────────────────────────────── */


/* ── Two-column layout ──────────────────────────────────── */


#lesson-content .two-col { display: grid; grid-template-columns: 1fr 46mm; gap: 7mm; align-items: start; }


#lesson-content .full-col { width: 100%; }


/* ── Section headings ───────────────────────────────────── */


#lesson-content .sh {
  font-family: 'Playfair Display', serif; font-size: 14pt; font-weight: 700;
  color: var(--burg); margin-top: 7mm; margin-bottom: 2.5mm;
  line-height: 1.25; letter-spacing: -.01em;
}


#lesson-content .sh-rule { width: 100%; height: .4pt; background: linear-gradient(to right, var(--burg), transparent); margin-bottom: 4mm; }


#lesson-content .ssh {
  font-family: 'Playfair Display', serif; font-size: 10.5pt; font-weight: 600;
  font-style: italic; color: var(--brown); margin-top: 5mm; margin-bottom: 2mm;
}


/* ── Body text ──────────────────────────────────────────── */


#lesson-content p { font-size: 10.5pt; line-height: 1.74; color: var(--ink); margin-bottom: 3.5mm; text-align: justify; hyphens: auto; }


#lesson-content p + p { text-indent: 4mm; }


#lesson-content .no-indent { text-indent: 0 !important; }


#lesson-content .drop-cap::first-letter {
  font-family: 'Playfair Display', serif; font-size: 50pt; font-weight: 900;
  color: var(--burg); float: left; line-height: .8; padding-right: 3mm; padding-top: 2.5mm;
}


#lesson-content strong { font-weight: 600; color: var(--burg-deep); }


#lesson-content em { font-style: italic; color: var(--brown); }


#lesson-content .ht { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--burg); font-style: normal; }


#lesson-content ul.body-list { margin: 2mm 0 4mm 6mm; }


#lesson-content ul.body-list li { font-size: 10pt; line-height: 1.65; margin-bottom: 1.5mm; }


/* ── Sidebar ────────────────────────────────────────────── */


#lesson-content .sidebar { background: var(--sidebar-bg); border-left: 2.5pt solid var(--burg); padding: 4mm 4.5mm; }


#lesson-content .sb-label {
  font-family: 'Playfair Display', serif; font-size: 6.5pt; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase; color: var(--burg);
  margin-bottom: 2.5mm; display: block;
}


#lesson-content .sb-title { font-family: 'Playfair Display', serif; font-size: 9.5pt; font-weight: 700; color: var(--ink); margin-bottom: 2.5mm; line-height: 1.3; }


#lesson-content .sidebar p { font-size: 8.5pt; line-height: 1.58; text-align: left; text-indent: 0 !important; margin-bottom: 2mm; }


#lesson-content .te { margin-bottom: 3mm; padding-bottom: 3mm; border-bottom: .3pt solid var(--rule); }


#lesson-content .te:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }


#lesson-content .tw { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 9pt; color: var(--burg); display: block; margin-bottom: 1mm; }


#lesson-content .td { font-size: 8.5pt; line-height: 1.55; color: var(--ink); text-align: left; text-indent: 0 !important; margin-bottom: 0; }


/* ── Math box ───────────────────────────────────────────── */


#lesson-content .mb {
  background: var(--math-bg); border: .4pt solid #C4A882; border-top: 2.5pt solid var(--gold);
  padding: 4.5mm 5.5mm; margin: 5mm 0; page-break-inside: avoid;
}


#lesson-content .mb-label {
  font-family: 'Playfair Display', serif; font-size: 6.5pt; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 2mm; display: block;
}


#lesson-content .mb-title { font-family: 'Playfair Display', serif; font-size: 10.5pt; font-weight: 700; color: var(--ink); margin-bottom: 2.5mm; }


#lesson-content .mb p { font-size: 9.5pt; line-height: 1.65; text-indent: 0 !important; text-align: left; margin-bottom: 2.5mm; }


#lesson-content .mb ul { margin: 1.5mm 0 2.5mm 5mm; }


#lesson-content .mb ul li { font-size: 9pt; line-height: 1.6; margin-bottom: 1.5mm; }


#lesson-content .mf {
  background: rgba(255,255,255,.55); border: .4pt solid #C4A882;
  padding: 2.5mm 4mm; margin: 2.5mm 0; text-align: center;
  font-size: 10.5pt; border-radius: 1pt;
}


#lesson-content .read-as {
  font-family: 'EB Garamond', serif; font-size: 8.5pt; font-style: italic;
  color: var(--muted); text-align: left; padding: 1.5mm 3mm;
  border-left: 2pt solid var(--gold); margin: 2mm 0 3mm 0;
  background: rgba(255,255,255,.35);
}


#lesson-content .read-as strong { font-style: normal; color: var(--brown); font-weight: 600; }


#lesson-content .we { background: rgba(255,255,255,.42); border-left: 2pt solid var(--gold); padding: 3mm 4mm; margin-top: 3mm; }


#lesson-content .we-label {
  font-family: 'Playfair Display', serif; font-size: 7pt; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brown); display: block; margin-bottom: 2mm;
}


#lesson-content .we p { font-size: 9pt; margin-bottom: 1.5mm; }


/* ── Euler box (special interest box) ──────────────────── */


#lesson-content .euler-box {
  background: #EDE4D5; border: .5pt solid #C4A882; border-left: 3pt solid var(--brown);
  padding: 4.5mm 5.5mm; margin: 5mm 0; page-break-inside: avoid;
}


#lesson-content .euler-label {
  font-family: 'Playfair Display', serif; font-size: 6.5pt; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase; color: var(--brown);
  margin-bottom: 2mm; display: block;
}


#lesson-content .euler-title { font-family: 'Playfair Display', serif; font-size: 10.5pt; font-weight: 700; color: var(--ink); margin-bottom: 2.5mm; }


#lesson-content .euler-box p { font-size: 9.5pt; line-height: 1.65; text-indent: 0 !important; text-align: left; margin-bottom: 2.5mm; }


#lesson-content .euler-box table { width: 100%; border-collapse: collapse; font-size: 9pt; margin: 2.5mm 0; }


#lesson-content .euler-box table th { background: var(--brown); color: var(--cream); padding: 1.5mm 3mm; font-family: 'Playfair Display', serif; font-size: 8pt; text-align: left; }


#lesson-content .euler-box table td { padding: 1.5mm 3mm; border-bottom: .3pt solid var(--rule); }


#lesson-content .euler-box table tr:nth-child(even) td { background: rgba(255,255,255,.3); }


/* ── Code blocks ────────────────────────────────────────── */


#lesson-content .cbw { margin: 5mm 0; border-radius: 2pt; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.2); page-break-inside: avoid; }


#lesson-content .ch {
  background: #0F0F1E; padding: 2mm 4.5mm; display: flex; align-items: center;
  justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.06);
}


#lesson-content .dots { display: flex; gap: 4px; }


#lesson-content .dot { width: 8px; height: 8px; border-radius: 50%; }


#lesson-content .dot.r { background: #FF5F57; }


#lesson-content .dot.y { background: #FEBC2E; }


#lesson-content .dot.g { background: #28C840; }


#lesson-content .cfn { font-family: 'Fira Code', monospace; font-size: 7.5pt; color: rgba(255,255,255,.4); letter-spacing: .04em; }


#lesson-content .cbw pre {
  margin: 0 !important; background: var(--code-bg) !important;
  padding: 3.5mm 4.5mm !important; font-family: 'Fira Code', monospace !important;
  font-size: 8pt !important; line-height: 1.7 !important; overflow-x: auto;
}


#lesson-content .cbw code { font-size: inherit !important; }


#lesson-content .cout {
  background: #111120; border-top: 1px solid rgba(255,255,255,.06);
  padding: 2.5mm 4.5mm; font-family: 'Fira Code', monospace; font-size: 8pt; color: #7EC8A0;
}


#lesson-content .cout-lbl { color: rgba(255,255,255,.3); font-size: 7pt; display: block; margin-bottom: 1.5mm; letter-spacing: .08em; text-transform: uppercase; }


/* Code walkthrough box */


#lesson-content .cw-box {
  background: #F7F3EC; border: .4pt solid var(--rule); border-top: 2.5pt solid var(--burg);
  padding: 4mm 5mm; margin-top: -1mm; page-break-inside: avoid;
}


#lesson-content .cw-label {
  font-family: 'Playfair Display', serif; font-size: 6.5pt; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase; color: var(--burg); margin-bottom: 3mm; display: block;
}


#lesson-content .cw-row { display: flex; gap: 3mm; margin-bottom: 2.5mm; align-items: baseline; }


#lesson-content .cw-line {
  font-family: 'Fira Code', monospace; font-size: 7.5pt; color: var(--cream);
  background: var(--burg); padding: .5mm 2mm; border-radius: 1pt;
  min-width: 12mm; text-align: center; flex-shrink: 0; margin-top: .5mm;
}


#lesson-content .cw-desc { font-size: 8.5pt; line-height: 1.55; color: var(--ink); }


#lesson-content .cw-desc code { font-family: 'Fira Code', monospace; font-size: 8pt; background: var(--cream-dark); padding: .2mm 1.5mm; border-radius: 1pt; }


/* Python concepts box */


#lesson-content .py-box {
  background: #EBF4EE; border: .4pt solid #A8C8B0; border-left: 2.5pt solid var(--green-hi);
  padding: 4mm 5mm; margin: 4mm 0; page-break-inside: avoid;
}


#lesson-content .py-label {
  font-family: 'Playfair Display', serif; font-size: 6.5pt; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase; color: var(--green-hi); margin-bottom: 2mm; display: block;
}


#lesson-content .py-box p { font-size: 9pt; line-height: 1.6; text-indent: 0 !important; text-align: left; margin-bottom: 1.5mm; color: var(--ink); }


#lesson-content .py-box code { font-family: 'Fira Code', monospace; font-size: 8pt; background: rgba(0,0,0,.07); padding: .2mm 2mm; border-radius: 1pt; }


/* ── Probability table ──────────────────────────────────── */


#lesson-content .pt { width: 100%; border-collapse: collapse; font-size: 9.5pt; margin: 3.5mm 0; font-family: 'EB Garamond', serif; }


#lesson-content .pt thead tr { background: var(--burg); color: var(--cream); }


#lesson-content .pt th { padding: 2mm 3.5mm; font-family: 'Playfair Display', serif; font-weight: 600; font-size: 8pt; letter-spacing: .06em; text-align: left; }


#lesson-content .pt td { padding: 1.8mm 3.5mm; border-bottom: .3pt solid var(--cream-dark); vertical-align: middle; }


#lesson-content .pt tr:nth-child(even) td { background: rgba(0,0,0,.03); }


#lesson-content .pt tr.top-r td { font-weight: 600; color: var(--burg); }


#lesson-content .bar-track { height: 5pt; background: var(--cream-dark); border-radius: 2pt; overflow: hidden; width: 32mm; }


#lesson-content .bar-fill { height: 100%; background: var(--burg-light); border-radius: 2pt; }


/* ── Pipeline ───────────────────────────────────────────── */


#lesson-content .pipeline { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin: 4mm 0; }


#lesson-content .ps { background: var(--cream-dark); border: .5pt solid var(--rule); padding: 2mm 3mm; font-family: 'Playfair Display', serif; font-size: 8pt; font-weight: 600; color: var(--ink); text-align: center; }


#lesson-content .ps.hi { background: var(--burg); color: var(--cream); border-color: var(--burg-deep); }


#lesson-content .pa { font-size: 9pt; color: var(--gold); padding: 0 1mm; font-weight: 700; }


/* ── Key takeaway ───────────────────────────────────────── */


#lesson-content .kbox { background: var(--cream-mid); border: .4pt solid var(--rule); border-left: 3pt solid var(--burg); padding: 4mm 5.5mm; margin: 5mm 0; }


#lesson-content .kbox p { font-size: 10pt; font-style: italic; color: var(--ink); text-align: left; text-indent: 0 !important; margin-bottom: 0; line-height: 1.65; }


/* ── Exercises ──────────────────────────────────────────── */


#lesson-content .exs { margin-top: 6mm; border-top: .4pt solid var(--rule); padding-top: 4.5mm; }


#lesson-content .exs-lbl { font-family: 'Playfair Display', serif; font-size: 7pt; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--burg); display: block; margin-bottom: 3.5mm; }


#lesson-content .ex { display: flex; gap: 3.5mm; margin-bottom: 3mm; font-size: 9.5pt; line-height: 1.65; }


#lesson-content .ex-n { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--burg); min-width: 6mm; padding-top: .5mm; }


/* ── Chapter opener ─────────────────────────────────────── */


#lesson-content .op-title-block { border-top: .5pt solid var(--gold); padding-top: 5mm; }


#lesson-content .op-title { font-family: 'Playfair Display', serif; font-size: 26pt; font-weight: 700; line-height: 1.2; color: var(--cream); letter-spacing: -.01em; }


#lesson-content .op-rule { width: 22mm; height: 1pt; background: var(--gold); margin: 4mm 0; }


#lesson-content .op-intro { font-family: 'EB Garamond', serif; font-size: 9.5pt; color: var(--cream-dark); opacity: .75; line-height: 1.65; max-width: 110mm; }


/* ── Cover, copyright, TOC, Preface ────────────────────── */


#lesson-content .cp-text { font-size: 8.5pt; line-height: 1.7; color: var(--muted); text-align: left; margin-bottom: 3mm; }


#lesson-content .toc-heading { font-family: 'Playfair Display', serif; font-size: 22pt; font-weight: 700; color: var(--burg); margin-bottom: 2mm; }


#lesson-content .toc-rule { width: 100%; height: .5pt; background: linear-gradient(to right, var(--burg), transparent); margin-bottom: 8mm; }


#lesson-content .toc-section-label { font-family: 'Playfair Display', serif; font-size: 7pt; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-top: 5mm; margin-bottom: 2.5mm; display: block; }


#lesson-content .toc-entry { display: flex; align-items: baseline; margin-bottom: 4mm; gap: 2mm; }


#lesson-content .toc-num { font-family: 'Playfair Display', serif; font-size: 9pt; font-weight: 700; color: var(--burg); min-width: 10mm; }


#lesson-content .toc-title { font-family: 'Playfair Display', serif; font-size: 11pt; font-weight: 600; color: var(--ink); }


#lesson-content .toc-sub { font-family: 'EB Garamond', serif; font-size: 8.5pt; font-style: italic; color: var(--muted); display: block; margin-top: .5mm; }


#lesson-content .toc-dots { flex: 1; border-bottom: .5pt dotted var(--rule); margin: 0 2mm 2pt; }


#lesson-content .toc-fm-entry { display: flex; align-items: baseline; gap: 2mm; margin-bottom: 2.5mm; }


#lesson-content .toc-fm-title { font-family: 'EB Garamond', serif; font-size: 10pt; font-style: italic; color: var(--muted); }


#lesson-content .preface-label { font-family: 'Playfair Display', serif; font-size: 7pt; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--burg); display: block; margin-bottom: 2mm; }


#lesson-content .preface-title { font-family: 'Playfair Display', serif; font-size: 22pt; font-weight: 700; color: var(--ink); margin-bottom: 2mm; }


#lesson-content .preface-rule { width: 100%; height: .4pt; background: linear-gradient(to right, var(--burg), transparent); margin-bottom: 8mm; }


#lesson-content .preface-sig { font-family: 'Playfair Display', serif; font-size: 10pt; font-style: italic; color: var(--brown); margin-top: 6mm; }


#lesson-content .preface-sig-name { font-weight: 700; font-style: normal; color: var(--burg); }


/* ── Google Colab page ──────────────────────────────────── */


#lesson-content .colab-header {
  background: var(--burg-deep); padding: 10mm var(--mo) 8mm var(--mi);
  display: flex; flex-direction: column; gap: 2mm;
}


#lesson-content .colab-eyebrow { font-family: 'Playfair Display', serif; font-size: 7pt; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-light); opacity: .8; }


#lesson-content .colab-heading { font-family: 'Playfair Display', serif; font-size: 20pt; font-weight: 700; color: var(--cream); line-height: 1.2; }


#lesson-content .colab-tagline { font-family: 'EB Garamond', serif; font-size: 10pt; font-style: italic; color: var(--cream-dark); opacity: .8; margin-top: 1mm; }


#lesson-content .colab-body { padding: 8mm var(--mo) var(--mb) var(--mi); }


#lesson-content .colab-intro { font-size: 10pt; line-height: 1.7; color: var(--ink); margin-bottom: 5mm; text-align: justify; }


#lesson-content .step-block { display: flex; gap: 4mm; margin-bottom: 5mm; page-break-inside: avoid; }


#lesson-content .step-num {
  font-family: 'Playfair Display', serif; font-size: 18pt; font-weight: 900;
  color: var(--burg); line-height: 1; min-width: 9mm; padding-top: 1mm;
}


#lesson-content .step-content { flex: 1; }


#lesson-content .step-title { font-family: 'Playfair Display', serif; font-size: 10.5pt; font-weight: 700; color: var(--ink); margin-bottom: 1.5mm; }


#lesson-content .step-desc { font-size: 9.5pt; line-height: 1.65; color: var(--ink); text-align: left; margin-bottom: 0; }


#lesson-content .step-desc code { font-family: 'Fira Code', monospace; font-size: 8.5pt; background: var(--cream-dark); padding: .2mm 2mm; border-radius: 1pt; }


#lesson-content .step-rule { width: 100%; height: .3pt; background: var(--rule); margin: 5mm 0; }


#lesson-content .colab-note { background: var(--math-bg); border-left: 2.5pt solid var(--gold); padding: 3.5mm 4.5mm; margin-top: 5mm; }


#lesson-content .colab-note p { font-size: 9pt; line-height: 1.6; text-indent: 0; text-align: left; margin-bottom: 0; }


#lesson-content .url-pill { display: inline-block; font-family: 'Fira Code', monospace; font-size: 8.5pt; background: var(--burg); color: var(--cream); padding: .5mm 3mm; border-radius: 2pt; letter-spacing: .02em; }


/* ── Print ──────────────────────────────────────────────── */


#lesson-content {
  --cream:       #FAF7F0;
  --cream-mid:   #F2E9DC;
  --cream-dark:  #E8D9C8;
  --burg:        #7B1C2E;
  --burg-light:  #9E2D42;
  --burg-deep:   #5A1020;
  --ink:         #2C1810;
  --brown:       #6B4226;
  --gold:        #B08830;
  --gold-light:  #D4AA50;
  --sidebar-bg:  #EDE0D0;
  --math-bg:     #E4D5BE;
  --code-bg:     #1A1A2E;
  --rule:        #C4A882;
  --muted:       #7A5C44;
  --green-hi:    #2E7D52;
  
  
  
  
  
  
}

#lesson-content ul.bl { margin: 2mm 0 4mm 6mm; }


#lesson-content ul.bl li { font-size: 10pt; line-height: 1.65; margin-bottom: 1.5mm; }


/* Sidebar */

/* Math box */

#lesson-content .we { background: rgba(255,255,255,.42); border-left: 2pt solid var(--gold); padding: 3mm 4mm; margin-top: 3mm; page-break-inside: avoid; }

/* Interest-style box for historical/contextual notes */


#lesson-content .note-box { background: #EDE4D5; border: .5pt solid #C4A882; border-left: 3pt solid var(--brown); padding: 4mm 5mm; margin: 5mm 0; page-break-inside: avoid; }


#lesson-content .note-label { font-family: 'Playfair Display', serif; font-size: 6.5pt; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--brown); margin-bottom: 2mm; display: block; }


#lesson-content .note-title { font-family: 'Playfair Display', serif; font-size: 10.5pt; font-weight: 700; color: var(--ink); margin-bottom: 2.5mm; }


#lesson-content .note-box p { font-size: 9.5pt; line-height: 1.65; text-indent: 0 !important; text-align: left; margin-bottom: 2mm; }


#lesson-content .note-box table { width: 100%; border-collapse: collapse; font-size: 9pt; margin: 2mm 0; }


#lesson-content .note-box th { background: var(--brown); color: var(--cream); padding: 1.5mm 3mm; font-family: 'Playfair Display', serif; font-size: 8pt; text-align: left; }


#lesson-content .note-box td { padding: 1.5mm 3mm; border-bottom: .3pt solid var(--rule); font-size: 8.5pt; }


#lesson-content .note-box tr:nth-child(even) td { background: rgba(255,255,255,.3); }


/* Tables */


#lesson-content .pt { width: 100%; border-collapse: collapse; font-size: 9.5pt; margin: 3.5mm 0; }

#lesson-content .pt td { padding: 1.8mm 3.5mm; border-bottom: .3pt solid var(--cream-dark); vertical-align: middle; font-size: 9pt; }

#lesson-content .pt tr.hi td { font-weight: 600; color: var(--burg); }


/* Code */

/* Code walkthrough */

/* Python concepts */

#lesson-content .py-box p { font-size: 9pt; line-height: 1.6; text-indent: 0 !important; text-align: left; margin-bottom: 1.5mm; }

/* Key takeaway */

/* Exercises */

/* Chapter opener */

/* Monospace inline */


#lesson-content code { font-family: 'Fira Code', monospace; font-size: 8.5pt; background: var(--cream-dark); padding: .2mm 1.5mm; border-radius: 1pt; }


/* Matrix grid display */


#lesson-content .mat-display { display: flex; gap: 6mm; align-items: center; justify-content: center; margin: 3mm 0; flex-wrap: wrap; }


#lesson-content .mat-label { font-family: 'Playfair Display', serif; font-size: 9pt; font-weight: 700; color: var(--brown); text-align: center; margin-bottom: 1.5mm; }


#lesson-content .mat-grid { border-left: 1.5pt solid var(--burg); border-right: 1.5pt solid var(--burg); padding: 2mm 3mm; display: inline-block; }


#lesson-content .mat-row { display: flex; gap: 4mm; margin-bottom: 1mm; }


#lesson-content .mat-row:last-child { margin-bottom: 0; }


#lesson-content .mat-cell { font-family: 'Fira Code', monospace; font-size: 8.5pt; color: var(--ink); min-width: 10mm; text-align: right; }


#lesson-content .mat-cell.hi { color: var(--burg); font-weight: 700; }


#lesson-content .mat-op { font-family: 'Playfair Display', serif; font-size: 16pt; color: var(--gold); font-weight: 700; align-self: center; }


#lesson-content .mat-eq { font-family: 'Playfair Display', serif; font-size: 16pt; color: var(--brown); align-self: center; }


#lesson-content {
  --cream:#FAF7F0; --cream-mid:#F2E9DC; --cream-dark:#E8D9C8;
  --burg:#7B1C2E; --burg-light:#9E2D42; --burg-deep:#5A1020;
  --ink:#2C1810; --brown:#6B4226; --gold:#B08830; --gold-light:#D4AA50;
  --sidebar-bg:#EDE0D0; --math-bg:#E4D5BE; --code-bg:#1A1A2E;
  --rule:#C4A882; --muted:#7A5C44; --green-hi:#2E7D52;
       
}


#lesson-content *, #lesson-content *::before, #lesson-content *::after {box-sizing:border-box;margin:0;padding:0;}

#lesson-content .two-col {display:grid;grid-template-columns:1fr 46mm;gap:7mm;align-items:start;}


#lesson-content .sh {font-family:'Playfair Display',serif;font-size:14pt;font-weight:700;color:var(--burg);margin-top:7mm;margin-bottom:2.5mm;line-height:1.25;letter-spacing:-.01em;}


#lesson-content .sh-rule {width:100%;height:.4pt;background:linear-gradient(to right,var(--burg),transparent);margin-bottom:4mm;}


#lesson-content .ssh {font-family:'Playfair Display',serif;font-size:10.5pt;font-weight:600;font-style:italic;color:var(--brown);margin-top:5mm;margin-bottom:2mm;}


#lesson-content p {font-size:10.5pt;line-height:1.74;color:var(--ink);margin-bottom:3.5mm;text-align:justify;hyphens:auto;}


#lesson-content p+p {text-indent:4mm;}


#lesson-content .no-indent {text-indent:0!important;}


#lesson-content .drop-cap::first-letter {font-family:'Playfair Display',serif;font-size:50pt;font-weight:900;color:var(--burg);float:left;line-height:.8;padding-right:3mm;padding-top:2.5mm;}


#lesson-content strong {font-weight:600;color:var(--burg-deep);}


#lesson-content em {font-style:italic;color:var(--brown);}


#lesson-content .ht {font-family:'Playfair Display',serif;font-weight:700;color:var(--burg);font-style:normal;}


#lesson-content ul.bl {margin:2mm 0 4mm 6mm;}


#lesson-content ul.bl li {font-size:10pt;line-height:1.65;margin-bottom:1.5mm;}


#lesson-content code {font-family:'Fira Code',monospace;font-size:8.5pt;background:var(--cream-dark);padding:.2mm 1.5mm;border-radius:1pt;}


/* Sidebar */


#lesson-content .sidebar {background:var(--sidebar-bg);border-left:2.5pt solid var(--burg);padding:4mm 4.5mm;}


#lesson-content .sb-label {font-family:'Playfair Display',serif;font-size:6.5pt;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--burg);margin-bottom:2.5mm;display:block;}


#lesson-content .sb-title {font-family:'Playfair Display',serif;font-size:9.5pt;font-weight:700;color:var(--ink);margin-bottom:2.5mm;line-height:1.3;}


#lesson-content .sidebar p {font-size:8.5pt;line-height:1.58;text-align:left;text-indent:0!important;margin-bottom:2mm;}


#lesson-content .te {margin-bottom:3mm;padding-bottom:3mm;border-bottom:.3pt solid var(--rule);}


#lesson-content .te:last-child {border-bottom:none;margin-bottom:0;padding-bottom:0;}


#lesson-content .tw {font-family:'Playfair Display',serif;font-weight:700;font-size:9pt;color:var(--burg);display:block;margin-bottom:1mm;}


#lesson-content .td {font-size:8.5pt;line-height:1.55;color:var(--ink);text-align:left;text-indent:0!important;margin-bottom:0;}


/* Math box */


#lesson-content .mb {background:var(--math-bg);border:.4pt solid #C4A882;border-top:2.5pt solid var(--gold);padding:4.5mm 5.5mm;margin:5mm 0;page-break-inside:avoid;}


#lesson-content .mb-label {font-family:'Playfair Display',serif;font-size:6.5pt;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:2mm;display:block;}


#lesson-content .mb-title {font-family:'Playfair Display',serif;font-size:10.5pt;font-weight:700;color:var(--ink);margin-bottom:2.5mm;}


#lesson-content .mb p {font-size:9.5pt;line-height:1.65;text-indent:0!important;text-align:left;margin-bottom:2.5mm;}


#lesson-content .mf {background:rgba(255,255,255,.55);border:.4pt solid #C4A882;padding:2.5mm 4mm;margin:2.5mm 0;text-align:center;font-size:10.5pt;border-radius:1pt;}


#lesson-content .read-as {font-family:'EB Garamond',serif;font-size:8.5pt;font-style:italic;color:var(--muted);text-align:left;padding:1.5mm 3mm;border-left:2pt solid var(--gold);margin:2mm 0 3mm 0;background:rgba(255,255,255,.35);}


#lesson-content .read-as strong {font-style:normal;color:var(--brown);font-weight:600;}


#lesson-content .we {background:rgba(255,255,255,.42);border-left:2pt solid var(--gold);padding:3mm 4mm;margin-top:2.5mm;page-break-inside:avoid;}


#lesson-content .we-label {font-family:'Playfair Display',serif;font-size:7pt;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brown);display:block;margin-bottom:2mm;}


#lesson-content .we p {font-size:9pt;margin-bottom:1.5mm;}


/* Note / heritage box */


#lesson-content .note-box {background:#EDE4D5;border:.5pt solid #C4A882;border-left:3pt solid var(--brown);padding:4mm 5mm;margin:5mm 0;page-break-inside:avoid;}


#lesson-content .note-label {font-family:'Playfair Display',serif;font-size:6.5pt;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--brown);margin-bottom:2mm;display:block;}


#lesson-content .note-title {font-family:'Playfair Display',serif;font-size:10.5pt;font-weight:700;color:var(--ink);margin-bottom:2.5mm;}


#lesson-content .note-box p {font-size:9.5pt;line-height:1.65;text-indent:0!important;text-align:left;margin-bottom:2mm;}


/* Tables */


#lesson-content .pt {width:100%;border-collapse:collapse;font-size:9pt;margin:3.5mm 0;}


#lesson-content .pt thead tr {background:var(--burg);color:var(--cream);}


#lesson-content .pt th {padding:2mm 3.5mm;font-family:'Playfair Display',serif;font-weight:600;font-size:8pt;letter-spacing:.06em;text-align:left;}


#lesson-content .pt td {padding:1.8mm 3.5mm;border-bottom:.3pt solid var(--cream-dark);vertical-align:top;font-size:8.5pt;}


#lesson-content .pt tr:nth-child(even) td {background:rgba(0,0,0,.03);}


#lesson-content .pt tr.hi td {font-weight:600;color:var(--burg);}


/* Code */


#lesson-content .cbw {margin:5mm 0;border-radius:2pt;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.2);page-break-inside:avoid;}


#lesson-content .ch {background:#0F0F1E;padding:2mm 4.5mm;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.06);}


#lesson-content .dots {display:flex;gap:4px;}


#lesson-content .dot {width:8px;height:8px;border-radius:50%;}


#lesson-content .dot.r {background:#FF5F57;}
#lesson-content .dot.y {background:#FEBC2E;}
#lesson-content .dot.g {background:#28C840;}


#lesson-content .cfn {font-family:'Fira Code',monospace;font-size:7.5pt;color:rgba(255,255,255,.4);}


#lesson-content .cbw pre {margin:0!important;background:var(--code-bg)!important;padding:3.5mm 4.5mm!important;font-family:'Fira Code',monospace!important;font-size:8pt!important;line-height:1.7!important;overflow-x:auto;}


#lesson-content .cbw code {font-size:inherit!important;background:none!important;padding:0!important;}


#lesson-content .cout {background:#111120;border-top:1px solid rgba(255,255,255,.06);padding:2.5mm 4.5mm;font-family:'Fira Code',monospace;font-size:8pt;color:#7EC8A0;}


#lesson-content .cout-lbl {color:rgba(255,255,255,.3);font-size:7pt;display:block;margin-bottom:1.5mm;letter-spacing:.08em;text-transform:uppercase;}


#lesson-content .cw-box {background:#F7F3EC;border:.4pt solid var(--rule);border-top:2.5pt solid var(--burg);padding:4mm 5mm;margin-top:-1mm;page-break-inside:avoid;}


#lesson-content .cw-label {font-family:'Playfair Display',serif;font-size:6.5pt;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--burg);margin-bottom:3mm;display:block;}


#lesson-content .cw-row {display:flex;gap:3mm;margin-bottom:2.5mm;align-items:baseline;}


#lesson-content .cw-line {font-family:'Fira Code',monospace;font-size:7.5pt;color:var(--cream);background:var(--burg);padding:.5mm 2mm;border-radius:1pt;min-width:14mm;text-align:center;flex-shrink:0;margin-top:.5mm;}


#lesson-content .cw-desc {font-size:8.5pt;line-height:1.55;color:var(--ink);}


#lesson-content .cw-desc code {font-family:'Fira Code',monospace;font-size:8pt;background:var(--cream-dark);padding:.2mm 1.5mm;border-radius:1pt;}


#lesson-content .py-box {background:#EBF4EE;border:.4pt solid #A8C8B0;border-left:2.5pt solid var(--green-hi);padding:4mm 5mm;margin:4mm 0;page-break-inside:avoid;}


#lesson-content .py-label {font-family:'Playfair Display',serif;font-size:6.5pt;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--green-hi);margin-bottom:2mm;display:block;}


#lesson-content .py-box p {font-size:9pt;line-height:1.6;text-indent:0!important;text-align:left;margin-bottom:1.5mm;}


#lesson-content .py-box code {font-family:'Fira Code',monospace;font-size:8pt;background:rgba(0,0,0,.07);padding:.2mm 2mm;border-radius:1pt;}


#lesson-content .kbox {background:var(--cream-mid);border:.4pt solid var(--rule);border-left:3pt solid var(--burg);padding:4mm 5.5mm;margin:5mm 0;}


#lesson-content .kbox p {font-size:10pt;font-style:italic;color:var(--ink);text-align:left;text-indent:0!important;margin-bottom:0;line-height:1.65;}


#lesson-content .exs {margin-top:6mm;border-top:.4pt solid var(--rule);padding-top:4.5mm;}


#lesson-content .exs-lbl {font-family:'Playfair Display',serif;font-size:7pt;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--burg);display:block;margin-bottom:3.5mm;}


#lesson-content .ex {display:flex;gap:3.5mm;margin-bottom:3mm;font-size:9.5pt;line-height:1.65;}


#lesson-content .ex-n {font-family:'Playfair Display',serif;font-weight:700;color:var(--burg);min-width:6mm;padding-top:.5mm;}


/* Opener */


#lesson-content .op-title-block {border-top:.5pt solid var(--gold);padding-top:5mm;}


#lesson-content .op-title {font-family:'Playfair Display',serif;font-size:26pt;font-weight:700;line-height:1.2;color:var(--cream);letter-spacing:-.01em;}


#lesson-content .op-rule {width:22mm;height:1pt;background:var(--gold);margin:4mm 0;}


#lesson-content .op-intro {font-family:'EB Garamond',serif;font-size:9.5pt;color:var(--cream-dark);opacity:.75;line-height:1.65;max-width:110mm;}


/* Flow diagram boxes */


#lesson-content .flow-box {display:flex;flex-direction:column;align-items:center;gap:0;margin:4mm 0;}


#lesson-content .flow-step {background:var(--cream-dark);border:.5pt solid var(--rule);padding:2mm 4mm;font-family:'Playfair Display',serif;font-size:8.5pt;font-weight:600;color:var(--ink);text-align:center;width:100%;}


#lesson-content .flow-step.attn {background:var(--burg);color:var(--cream);border-color:var(--burg-deep);}


#lesson-content .flow-step.norm {background:#DDD0BB;color:var(--ink);}


#lesson-content .flow-step.ffn {background:#4D2030;color:var(--cream);border-color:var(--burg-deep);}


#lesson-content .flow-arrow {font-size:11pt;color:var(--gold);text-align:center;line-height:1.2;}


#lesson-content {
  --cream:#FAF7F0; --cream-mid:#F2E9DC; --cream-dark:#E8D9C8;
  --burg:#7B1C2E; --burg-light:#9E2D42; --burg-deep:#5A1020;
  --ink:#2C1810; --brown:#6B4226; --gold:#B08830; --gold-light:#D4AA50;
  --sidebar-bg:#EDE0D0; --math-bg:#E4D5BE; --code-bg:#1A1A2E;
  --rule:#C4A882; --muted:#7A5C44; --green-hi:#2E7D52;
       
}

/* Sidebar */

/* Math / note boxes */

/* Tables */

/* Code */

/* Walkthrough */

/* Python concepts */

/* Takeaway */

/* Exercises */

/* Opener */

/* Pipeline */


#lesson-content .pipeline {display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:4mm 0;}


#lesson-content .ps {background:var(--cream-dark);border:.5pt solid var(--rule);padding:2mm 3mm;font-family:'Playfair Display',serif;font-size:8pt;font-weight:600;color:var(--ink);text-align:center;}


#lesson-content .ps.hi {background:var(--burg);color:var(--cream);border-color:var(--burg-deep);}


#lesson-content .pa {font-size:9pt;color:var(--gold);padding:0 1mm;font-weight:700;}


#lesson-content {
  --cream:#FAF7F0;--cream-mid:#F2E9DC;--cream-dark:#E8D9C8;
  --burg:#7B1C2E;--burg-light:#9E2D42;--burg-deep:#5A1020;
  --ink:#2C1810;--brown:#6B4226;--gold:#B08830;--gold-light:#D4AA50;
  --sidebar-bg:#EDE0D0;--math-bg:#E4D5BE;--code-bg:#1A1A2E;
  --rule:#C4A882;--muted:#7A5C44;--green-hi:#2E7D52;
  --app-bg:#F0E8D8;--app-border:#9E6030;
  
}

#lesson-content .sh-first {margin-top:0!important;}

/* Sidebar */

/* Boxes */

/* Chapter 6 code annotation banner */


#lesson-content .ch6-banner {background:#3D1520;border:.5pt solid #7B2035;border-left:3.5pt solid #D4AA50;padding:3.5mm 5mm;margin-bottom:3mm;page-break-inside:avoid;}


#lesson-content .ch6-banner-label {font-family:'Playfair Display',serif;font-size:6.5pt;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-light);margin-bottom:1.5mm;display:block;}


#lesson-content .ch6-banner p {font-size:8.5pt;line-height:1.58;color:var(--cream-dark);text-indent:0!important;text-align:left;margin-bottom:0;}


#lesson-content .ch6-banner code {background:#5A3020;color:#FAF7F0;border-radius:2pt;padding:.2mm 1.5mm;}


/* Appendix header */


#lesson-content .appendix-divider {background:var(--burg-deep);padding:6mm var(--mo) 6mm var(--mi);margin:-18mm -18mm 6mm -22mm;position:relative;}


#lesson-content .appendix-label {font-family:'Playfair Display',serif;font-size:7pt;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-light);opacity:.8;display:block;margin-bottom:2mm;}


#lesson-content .appendix-title {font-family:'Playfair Display',serif;font-size:16pt;font-weight:700;color:var(--cream);line-height:1.2;}


#lesson-content .appendix-sub {font-family:'EB Garamond',serif;font-size:10pt;font-style:italic;color:var(--cream-dark);opacity:.8;margin-top:1.5mm;}


/* Tables */

/* Code blocks */


#lesson-content .cbw {margin:4mm 0;border-radius:2pt;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.2);page-break-inside:avoid;}

#lesson-content .cbw pre {margin:0!important;background:var(--code-bg)!important;padding:3mm 4.5mm!important;font-family:'Fira Code',monospace!important;font-size:7.8pt!important;line-height:1.65!important;overflow-x:auto;}

#lesson-content .cout {background:#111120;border-top:1px solid rgba(255,255,255,.06);padding:2.5mm 4.5mm;font-family:'Fira Code',monospace;font-size:7.8pt;color:#7EC8A0;line-height:1.65;}

/* Inline code comment style */


#lesson-content .ch6-line {color:#6B8CAA!important;}


/* blue-ish for ch6 lines indicator */


/* Walkthrough */

/* Python concepts */

/* Key takeaway */

/* Exercises */

/* Colab cell style */


#lesson-content .colab-cell {border:.5pt solid #C4A882;border-radius:3pt;margin:4mm 0;overflow:hidden;page-break-inside:avoid;}


#lesson-content .colab-cell-header {background:var(--cream-dark);padding:1.5mm 4mm;display:flex;align-items:center;gap:3mm;border-bottom:.4pt solid var(--rule);}


#lesson-content .colab-cell-num {font-family:'Fira Code',monospace;font-size:8pt;color:var(--muted);}


#lesson-content .colab-cell-label {font-family:'EB Garamond',serif;font-size:8.5pt;font-style:italic;color:var(--brown);}


#lesson-content .colab-cell pre {margin:0!important;background:var(--code-bg)!important;padding:3mm 4.5mm!important;font-family:'Fira Code',monospace!important;font-size:7.8pt!important;line-height:1.65!important;}


#lesson-content .colab-cell code {font-size:inherit!important;background:none!important;padding:0!important;}


#lesson-content .colab-cell .cout {border-top:.4pt solid var(--rule);}


/* Opener */

/* ── LMS course content wrapper ───────────────────────────────────────────
   Add this to your Django base.html and inject chapter HTML into
   <div class="lms-chapter-body">{{ chapter_html|safe }}</div>
   ────────────────────────────────────────────────────────────────────── */


#lesson-content .lms-chapter {
  max-width: 780px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 11pt;
  line-height: 1.75;
  color: var(--ink, #2C1810);
  background: var(--cream, #FAF7F0);
}


/* Responsive two-column → single column on small screens */


@media (max-width: 700px) {
  #lesson-content .two-col {
    display: block !important;
  }
  
  
  #lesson-content .two-col > * {
    width: 100% !important;
    padding: 0 !important;
  }
}


/* Remove any residual page-sizing constraints */


#lesson-content .page, #lesson-content .page-content {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}

/* ── LMS content wrapper ──────────────────────────────────────────────────
   The div with id="lesson-content" in your lesson_content.html template.
   All course styles are scoped inside this element.
   ──────────────────────────────────────────────────────────────────────── */

#lesson-content {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 11pt;
  line-height: 1.75;
  color: #2C1810;
  background: #FAF7F0;
  padding: 2rem 2.5rem 3rem;
  border-radius: 0.5rem;
}

/* Responsive two-col on small screens */
@media (max-width: 700px) {
  #lesson-content .two-col {
    display: block !important;
  }
  #lesson-content .two-col > * {
    width: 100% !important;
    padding: 0 !important;
  }
}

/* Strip any residual page-sizing */
#lesson-content .page,
#lesson-content .page-content {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}