/* === From lesson01.html === */
/* ── M6 Colour tokens ─────────────────────────── */
:root {
  --primary:#c0392b; --primary-light:rgba(192,57,43,.08);
  --secondary:#2471a3; --secondary-light:rgba(36,113,163,.08);
  --accent:#1e8449; --accent-light:rgba(30,132,73,.08);
  --accent-2:#d97706;
  --critical:#8e44ad; --purple:#8e44ad; --purple-light:rgba(142,68,173,.07);
  --consolidation:#1a5276;
  --danger:#dc2626;
  --hero-grad:linear-gradient(135deg,#c0392b 0%,#2471a3 100%);
  --hero-cons:linear-gradient(135deg,#1a5276 0%,#2471a3 100%);
}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
.mono,code{font-family:'DM Mono',monospace;}
/* ── Hero ─────────────────────────────────────── */
.hero{background:var(--hero-grad)!important;color:white;border:none;}
.hero::after{display:none;}
.hero h1,.hero p,.hero-desc{color:white;}
.hero-badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.hbadge{padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.hbadge-red{background:rgba(255,255,255,.22);color:white;}
.hbadge-blue{background:rgba(255,255,255,.15);color:white;}
.hbadge-outline{border:1.5px solid rgba(255,255,255,.45);background:transparent;color:rgba(255,255,255,.9);}
.hero h1{font-size:42px;font-weight:700;line-height:1.15;margin-bottom:12px;letter-spacing:-.5px;}
.hero-desc{font-size:17px;max-width:780px;line-height:1.65;opacity:.92;}
.hero-emoji{font-size:72px;line-height:1;flex-shrink:0;opacity:.85;}
/* ── Fade-up ──────────────────────────────────── */
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
.fade-up.visible{opacity:1;transform:none;}
/* ── Think First ──────────────────────────────── */
.think-first{background:linear-gradient(135deg,#1e3a5f 0%,#1a5276 100%);border-radius:14px;padding:32px;margin-bottom:24px;}
.tf-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;background:rgba(255,255,255,.2);display:inline-block;padding:4px 10px;border-radius:100px;margin-bottom:14px;color:white;font-family:'DM Sans',sans-serif;}
.think-first p{color:rgba(255,255,255,.92);margin-bottom:12px;font-size:15px;}
.think-first strong{color:white;}
.think-first .answer-textarea{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:white;font-size:14px;}
.think-first .answer-textarea::placeholder{color:rgba(255,255,255,.5);}
.think-first .autosave-indicator{color:rgba(255,255,255,.65);}
/* ── Formula panel ────────────────────────────── */
.formula-panel{background:#1e3a5f;border-radius:14px;padding:24px 28px;margin-bottom:24px;color:white;}
.formula-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.formula-panel-icon{font-size:22px;}
.formula-panel h3{font-family:'Roboto Slab',serif;color:white;font-size:17px;margin:0;}
.formula-row{background:rgba(255,255,255,.09);border-radius:10px;padding:16px 20px;margin-bottom:12px;}
.formula-eq{font-family:'DM Mono',monospace;font-size:15px;color:#fbbf24;display:block;margin-bottom:10px;}
.formula-vars{display:flex;flex-wrap:wrap;gap:6px 18px;}
.formula-var{font-size:13px;color:rgba(255,255,255,.85);}
.formula-rearrange{font-size:13px;color:rgba(255,255,255,.7);margin-top:10px;line-height:1.6;}
/* ── Worked Example ───────────────────────────── */
.worked-example{background:#f8fafc;border:2px solid #2471a3;border-radius:14px;padding:28px 32px;margin:24px 0;}
.we-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#2471a3;display:block;margin-bottom:12px;font-family:'DM Sans',sans-serif;}
.worked-example h4{font-family:'Roboto Slab',serif;color:#0f172a;font-size:16px;margin-bottom:14px;}
.worked-step{display:flex;gap:14px;margin:14px 0;}
.step-num{width:28px;height:28px;border-radius:50%;background:#2471a3;color:white;font-size:13px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.step-body{flex:1;}
.step-body p{margin-bottom:6px;color:#475569;font-size:15px;line-height:1.65;}
.we-answer{background:rgba(36,113,163,.08);border-left:3px solid #2471a3;border-radius:0 8px 8px 0;padding:14px 18px;margin-top:14px;}
.we-answer strong{color:#0f172a;}
.we-answer p{color:#475569;font-size:15px;margin:0;line-height:1.65;}
/* ── Callouts ─────────────────────────────────── */
.callout-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:3px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.callout-red{background:rgba(220,38,38,.06);border-left:3px solid #dc2626;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-red .callout-tag{background:#dc2626;color:white;}
.callout-amber .callout-tag{background:#d97706;color:white;}
.callout-blue .callout-tag{background:#2471a3;color:white;}
.callout-purple .callout-tag{background:#8e44ad;color:white;}
.callout-green .callout-tag{background:#1e8449;color:white;}
/* ── Conceptual first ─────────────────────────── */
.conceptual-first{font-size:17px;color:#2471a3;font-style:italic;line-height:1.65;margin-bottom:18px;padding-left:16px;border-left:3px solid #2471a3;}
/* ── Bloom/Band badges ────────────────────────── */
.question-meta{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.bloom-badge,.band-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.bloom-understand{background:#dbeafe;color:#1d4ed8;}
.bloom-apply{background:#d1fae5;color:#065f46;}
.bloom-analyse{background:#ede9fe;color:#5b21b6;}
.bloom-evaluate{background:#fef3c7;color:#92400e;}
.band-2{background:#f1f5f9;color:#475569;}
.band-3{background:#e0f2fe;color:#0369a1;}
.band-4{background:#d1fae5;color:#065f46;}
.band-5{background:#ede9fe;color:#5b21b6;}
.band-6{background:#fef3c7;color:#92400e;}
/* ── Data table ───────────────────────────────── */
.data-table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border);margin:16px 0;}
/* ── Diagram ──────────────────────────────────── */
.diagram-wrap{margin:24px 0;text-align:center;}
.diagram-caption{font-size:12px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:8px;opacity:.75;}
/* ── Real-world anchor ────────────────────────── */
.anchor-callout{background:linear-gradient(135deg,rgba(217,119,6,.1) 0%,rgba(217,119,6,.05) 100%);border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.anchor-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#d97706;display:block;margin-bottom:10px;}
.anchor-callout h3{font-family:'Roboto Slab',serif;color:#92400e;font-size:17px;margin-bottom:10px;}
.anchor-callout p{color:#78350f;font-size:15px;line-height:1.65;margin-bottom:8px;}
/* ── Misconceptions box ───────────────────────── */
.misconceptions-box{background:var(--purple-light);border:1.5px solid var(--purple);border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{font-family:'Roboto Slab',serif;color:var(--purple);font-size:17px;margin-bottom:14px;}
.misconception-item{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.misconception-x{width:22px;height:22px;border-radius:50%;background:#8e44ad;color:white;font-size:12px;font-weight:800;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.misconception-item p{font-size:14px;color:#4a1d96;line-height:1.65;margin:0;}
/* ── Image placeholder ────────────────────────── */
.img-placeholder{background:#f1f5f9;border:2px dashed #cbd5e1;border-radius:12px;padding:32px;text-align:center;margin:20px 0;color:#94a3b8;}
.img-placeholder .img-icon{font-size:36px;margin-bottom:8px;}
.img-placeholder p{font-size:13px;margin:0;line-height:1.5;}

/* === From lesson02.html === */
:root {
  --primary:#c0392b; --primary-light:rgba(192,57,43,.08);
  --secondary:#2471a3; --secondary-light:rgba(36,113,163,.08);
  --accent:#1e8449; --accent-light:rgba(30,132,73,.08);
  --accent-2:#d97706;
  --critical:#8e44ad; --purple:#8e44ad; --purple-light:rgba(142,68,173,.07);
  --danger:#dc2626;
  --hero-grad:linear-gradient(135deg,#c0392b 0%,#2471a3 100%);
}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
.mono,code{font-family:'DM Mono',monospace;}
.hero{background:var(--hero-grad)!important;color:white;border:none;}
.hero::after{display:none;}
.hero h1,.hero p,.hero-desc{color:white;}
.hero-badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.hbadge{padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.hbadge-red{background:rgba(255,255,255,.22);color:white;}
.hbadge-blue{background:rgba(255,255,255,.15);color:white;}
.hbadge-outline{border:1.5px solid rgba(255,255,255,.45);background:transparent;color:rgba(255,255,255,.9);}
.hero h1{font-size:42px;font-weight:700;line-height:1.15;margin-bottom:12px;letter-spacing:-.5px;}
.hero-desc{font-size:17px;max-width:780px;line-height:1.65;opacity:.92;}
.hero-emoji{font-size:72px;line-height:1;flex-shrink:0;opacity:.85;}
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
.fade-up.visible{opacity:1;transform:none;}
.think-first{background:linear-gradient(135deg,#1e3a5f 0%,#1a5276 100%);border-radius:14px;padding:32px;margin-bottom:24px;}
.tf-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;background:rgba(255,255,255,.2);display:inline-block;padding:4px 10px;border-radius:100px;margin-bottom:14px;color:white;font-family:'DM Sans',sans-serif;}
.think-first p{color:rgba(255,255,255,.92);margin-bottom:12px;font-size:15px;}
.think-first strong{color:white;}
.think-first .answer-textarea{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:white;font-size:14px;}
.think-first .answer-textarea::placeholder{color:rgba(255,255,255,.5);}
.think-first .autosave-indicator{color:rgba(255,255,255,.65);}
.formula-panel{background:#1e3a5f;border-radius:14px;padding:24px 28px;margin-bottom:24px;color:white;}
.formula-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.formula-panel-icon{font-size:22px;}
.formula-panel h3{font-family:'Roboto Slab',serif;color:white;font-size:17px;margin:0;}
.formula-row{background:rgba(255,255,255,.09);border-radius:10px;padding:16px 20px;margin-bottom:12px;}
.formula-eq{font-family:'DM Mono',monospace;font-size:15px;color:#fbbf24;display:block;margin-bottom:10px;}
.formula-vars{display:flex;flex-wrap:wrap;gap:6px 18px;}
.formula-var{font-size:13px;color:rgba(255,255,255,.85);}
.formula-rearrange{font-size:13px;color:rgba(255,255,255,.7);margin-top:10px;line-height:1.6;}
.worked-example{background:#f8fafc;border:2px solid #2471a3;border-radius:14px;padding:28px 32px;margin:24px 0;}
.we-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#2471a3;display:block;margin-bottom:12px;font-family:'DM Sans',sans-serif;}
.worked-example h4{font-family:'Roboto Slab',serif;color:#0f172a;font-size:16px;margin-bottom:14px;}
.worked-step{display:flex;gap:14px;margin:14px 0;}
.step-num{width:28px;height:28px;border-radius:50%;background:#2471a3;color:white;font-size:13px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.step-body{flex:1;}
.step-body p{margin-bottom:6px;color:#475569;font-size:15px;line-height:1.65;}
.we-answer{background:rgba(36,113,163,.08);border-left:3px solid #2471a3;border-radius:0 8px 8px 0;padding:14px 18px;margin-top:14px;}
.we-answer p{color:#475569;font-size:15px;margin:0;line-height:1.65;}
.callout-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:3px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.callout-red{background:rgba(220,38,38,.06);border-left:3px solid #dc2626;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-red .callout-tag{background:#dc2626;color:white;}
.callout-amber .callout-tag{background:#d97706;color:white;}
.callout-blue .callout-tag{background:#2471a3;color:white;}
.conceptual-first{font-size:17px;color:#2471a3;font-style:italic;line-height:1.65;margin-bottom:18px;padding-left:16px;border-left:3px solid #2471a3;}
.question-meta{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.bloom-badge,.band-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.bloom-understand{background:#dbeafe;color:#1d4ed8;}
.bloom-apply{background:#d1fae5;color:#065f46;}
.bloom-analyse{background:#ede9fe;color:#5b21b6;}
.bloom-evaluate{background:#fef3c7;color:#92400e;}
.band-2{background:#f1f5f9;color:#475569;}
.band-3{background:#e0f2fe;color:#0369a1;}
.band-4{background:#d1fae5;color:#065f46;}
.band-5{background:#ede9fe;color:#5b21b6;}
.data-table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border);margin:16px 0;}
.diagram-wrap{margin:24px 0;text-align:center;}
.diagram-caption{font-size:12px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:8px;opacity:.75;}
.anchor-callout{background:linear-gradient(135deg,rgba(217,119,6,.1) 0%,rgba(217,119,6,.05) 100%);border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.anchor-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#d97706;display:block;margin-bottom:10px;}
.anchor-callout h3{font-family:'Roboto Slab',serif;color:#92400e;font-size:17px;margin-bottom:10px;}
.anchor-callout p{color:#78350f;font-size:15px;line-height:1.65;margin-bottom:8px;}
.misconceptions-box{background:rgba(142,68,173,.07);border:1.5px solid #8e44ad;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{font-family:'Roboto Slab',serif;color:#8e44ad;font-size:17px;margin-bottom:14px;}
.misconception-item{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.misconception-x{width:22px;height:22px;border-radius:50%;background:#8e44ad;color:white;font-size:12px;font-weight:800;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.misconception-item p{font-size:14px;color:#4a1d96;line-height:1.65;margin:0;}
.img-placeholder{background:#f1f5f9;border:2px dashed #cbd5e1;border-radius:12px;padding:32px;text-align:center;margin:20px 0;color:#94a3b8;}
.img-placeholder .img-icon{font-size:36px;margin-bottom:8px;}
.img-placeholder p{font-size:13px;margin:0;line-height:1.5;}
/* Spot+Fix activity highlight */
.spot-fix-item{background:#fff7ed;border-left:3px solid #d97706;border-radius:0 8px 8px 0;padding:12px 16px;margin:10px 0;font-family:'DM Mono',monospace;font-size:14px;color:#92400e;}

/* === From lesson03.html === */
:root {
  --primary:#c0392b; --secondary:#2471a3; --accent:#1e8449; --accent-2:#d97706;
  --critical:#8e44ad; --purple:#8e44ad; --purple-light:rgba(142,68,173,.07);
  --danger:#dc2626;
  --hero-grad:linear-gradient(135deg,#c0392b 0%,#2471a3 100%);
}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
.mono,code{font-family:'DM Mono',monospace;}
.hero{background:var(--hero-grad)!important;color:white;border:none;}
.hero::after{display:none;}
.hero h1,.hero p,.hero-desc{color:white;}
.hero-badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.hbadge{padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.hbadge-red{background:rgba(255,255,255,.22);color:white;}
.hbadge-blue{background:rgba(255,255,255,.15);color:white;}
.hbadge-outline{border:1.5px solid rgba(255,255,255,.45);background:transparent;color:rgba(255,255,255,.9);}
.hero h1{font-size:42px;font-weight:700;line-height:1.15;margin-bottom:12px;letter-spacing:-.5px;}
.hero-desc{font-size:17px;max-width:780px;line-height:1.65;opacity:.92;}
.hero-emoji{font-size:72px;line-height:1;flex-shrink:0;opacity:.85;}
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
.fade-up.visible{opacity:1;transform:none;}
.think-first{background:linear-gradient(135deg,#1e3a5f 0%,#1a5276 100%);border-radius:14px;padding:32px;margin-bottom:24px;}
.tf-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;background:rgba(255,255,255,.2);display:inline-block;padding:4px 10px;border-radius:100px;margin-bottom:14px;color:white;font-family:'DM Sans',sans-serif;}
.think-first p{color:rgba(255,255,255,.92);margin-bottom:12px;font-size:15px;}
.think-first strong{color:white;}
.think-first .answer-textarea{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:white;font-size:14px;}
.think-first .answer-textarea::placeholder{color:rgba(255,255,255,.5);}
.think-first .autosave-indicator{color:rgba(255,255,255,.65);}
.formula-panel{background:#1e3a5f;border-radius:14px;padding:24px 28px;margin-bottom:24px;color:white;}
.formula-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.formula-panel-icon{font-size:22px;}
.formula-panel h3{font-family:'Roboto Slab',serif;color:white;font-size:17px;margin:0;}
.formula-row{background:rgba(255,255,255,.09);border-radius:10px;padding:16px 20px;margin-bottom:12px;}
.formula-eq{font-family:'DM Mono',monospace;font-size:15px;color:#fbbf24;display:block;margin-bottom:10px;}
.formula-vars{display:flex;flex-wrap:wrap;gap:6px 18px;}
.formula-var{font-size:13px;color:rgba(255,255,255,.85);}
.formula-rearrange{font-size:13px;color:rgba(255,255,255,.7);margin-top:8px;line-height:1.6;}
.worked-example{background:#f8fafc;border:2px solid #2471a3;border-radius:14px;padding:28px 32px;margin:24px 0;}
.we-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#2471a3;display:block;margin-bottom:12px;font-family:'DM Sans',sans-serif;}
.worked-example h4{font-family:'Roboto Slab',serif;color:#0f172a;font-size:16px;margin-bottom:14px;}
.worked-step{display:flex;gap:14px;margin:14px 0;}
.step-num{width:28px;height:28px;border-radius:50%;background:#2471a3;color:white;font-size:13px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.step-body{flex:1;}
.step-body p{margin-bottom:6px;color:#475569;font-size:15px;line-height:1.65;}
.we-answer{background:rgba(36,113,163,.08);border-left:3px solid #2471a3;border-radius:0 8px 8px 0;padding:14px 18px;margin-top:14px;}
.we-answer p{color:#475569;font-size:15px;margin:0;line-height:1.65;}
.try-it{background:rgba(30,132,73,.07);border:1.5px solid #1e8449;border-radius:10px;padding:16px 20px;margin-top:16px;}
.try-it-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#1e8449;display:block;margin-bottom:8px;}
.callout-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:3px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.callout-red{background:rgba(220,38,38,.06);border-left:3px solid #dc2626;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-red .callout-tag{background:#dc2626;color:white;}
.callout-amber .callout-tag{background:#d97706;color:white;}
.callout-blue .callout-tag{background:#2471a3;color:white;}
.callout-green .callout-tag{background:#1e8449;color:white;}
.conceptual-first{font-size:17px;color:#2471a3;font-style:italic;line-height:1.65;margin-bottom:18px;padding-left:16px;border-left:3px solid #2471a3;}
.question-meta{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.bloom-badge,.band-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.bloom-understand{background:#dbeafe;color:#1d4ed8;}
.bloom-apply{background:#d1fae5;color:#065f46;}
.bloom-analyse{background:#ede9fe;color:#5b21b6;}
.bloom-evaluate{background:#fef3c7;color:#92400e;}
.band-2{background:#f1f5f9;color:#475569;}
.band-3{background:#e0f2fe;color:#0369a1;}
.band-4{background:#d1fae5;color:#065f46;}
.band-5{background:#ede9fe;color:#5b21b6;}
.band-6{background:#fef3c7;color:#92400e;}
.data-table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border);margin:16px 0;}
.diagram-wrap{margin:24px 0;text-align:center;}
.diagram-caption{font-size:12px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:8px;opacity:.75;}
.anchor-callout{background:linear-gradient(135deg,rgba(217,119,6,.1) 0%,rgba(217,119,6,.05) 100%);border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.anchor-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#d97706;display:block;margin-bottom:10px;}
.anchor-callout h3{font-family:'Roboto Slab',serif;color:#92400e;font-size:17px;margin-bottom:10px;}
.anchor-callout p{color:#78350f;font-size:15px;line-height:1.65;margin-bottom:8px;}
.misconceptions-box{background:rgba(142,68,173,.07);border:1.5px solid #8e44ad;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{font-family:'Roboto Slab',serif;color:#8e44ad;font-size:17px;margin-bottom:14px;}
.misconception-item{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.misconception-x{width:22px;height:22px;border-radius:50%;background:#8e44ad;color:white;font-size:12px;font-weight:800;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.misconception-item p{font-size:14px;color:#4a1d96;line-height:1.65;margin:0;}
.img-placeholder{background:#f1f5f9;border:2px dashed #cbd5e1;border-radius:12px;padding:32px;text-align:center;margin:20px 0;color:#94a3b8;}
.img-placeholder .img-icon{font-size:36px;margin-bottom:8px;}
.img-placeholder p{font-size:13px;margin:0;line-height:1.5;}
.procedure-step{display:flex;gap:14px;margin:10px 0;align-items:flex-start;}
.proc-num{width:26px;height:26px;border-radius:50%;background:#1e3a5f;color:white;font-size:12px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:1px;}
.proc-body{font-size:14px;color:var(--text-muted);line-height:1.65;flex:1;}

/* === From lesson04.html === */
:root {
  --primary:#c0392b; --secondary:#2471a3; --accent:#1e8449; --accent-2:#d97706;
  --critical:#8e44ad; --purple:#8e44ad; --purple-light:rgba(142,68,173,.07);
  --danger:#dc2626;
  --hero-grad:linear-gradient(135deg,#c0392b 0%,#2471a3 100%);
}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
.mono,code{font-family:'DM Mono',monospace;}
.hero{background:var(--hero-grad)!important;color:white;border:none;}
.hero::after{display:none;}
.hero h1,.hero p,.hero-desc{color:white;}
.hero-badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.hbadge{padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.hbadge-red{background:rgba(255,255,255,.22);color:white;}
.hbadge-blue{background:rgba(255,255,255,.15);color:white;}
.hbadge-outline{border:1.5px solid rgba(255,255,255,.45);background:transparent;color:rgba(255,255,255,.9);}
.hero h1{font-size:42px;font-weight:700;line-height:1.15;margin-bottom:12px;letter-spacing:-.5px;}
.hero-desc{font-size:17px;max-width:780px;line-height:1.65;opacity:.92;}
.hero-emoji{font-size:72px;line-height:1;flex-shrink:0;opacity:.85;}
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
.fade-up.visible{opacity:1;transform:none;}
.think-first{background:linear-gradient(135deg,#1e3a5f 0%,#1a5276 100%);border-radius:14px;padding:32px;margin-bottom:24px;}
.tf-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;background:rgba(255,255,255,.2);display:inline-block;padding:4px 10px;border-radius:100px;margin-bottom:14px;color:white;font-family:'DM Sans',sans-serif;}
.think-first p{color:rgba(255,255,255,.92);margin-bottom:12px;font-size:15px;}
.think-first strong{color:white;}
.think-first .answer-textarea{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:white;font-size:14px;}
.think-first .answer-textarea::placeholder{color:rgba(255,255,255,.5);}
.think-first .autosave-indicator{color:rgba(255,255,255,.65);}
.formula-panel{background:#1e3a5f;border-radius:14px;padding:24px 28px;margin-bottom:24px;color:white;}
.formula-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.formula-panel-icon{font-size:22px;}
.formula-panel h3{font-family:'Roboto Slab',serif;color:white;font-size:17px;margin:0;}
.formula-row{background:rgba(255,255,255,.09);border-radius:10px;padding:16px 20px;margin-bottom:12px;}
.formula-eq{font-family:'DM Mono',monospace;font-size:15px;color:#fbbf24;display:block;margin-bottom:10px;}
.formula-vars{display:flex;flex-wrap:wrap;gap:6px 18px;}
.formula-var{font-size:13px;color:rgba(255,255,255,.85);}
.formula-rearrange{font-size:13px;color:rgba(255,255,255,.7);margin-top:8px;line-height:1.6;}
.worked-example{background:#f8fafc;border:2px solid #2471a3;border-radius:14px;padding:28px 32px;margin:24px 0;}
.we-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#2471a3;display:block;margin-bottom:12px;font-family:'DM Sans',sans-serif;}
.worked-example h4{font-family:'Roboto Slab',serif;color:#0f172a;font-size:16px;margin-bottom:14px;}
.worked-step{display:flex;gap:14px;margin:14px 0;}
.step-num{width:28px;height:28px;border-radius:50%;background:#2471a3;color:white;font-size:13px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.step-body{flex:1;}
.step-body p{margin-bottom:6px;color:#475569;font-size:15px;line-height:1.65;}
.we-answer{background:rgba(36,113,163,.08);border-left:3px solid #2471a3;border-radius:0 8px 8px 0;padding:14px 18px;margin-top:14px;}
.we-answer p{color:#475569;font-size:15px;margin:0;line-height:1.65;}
.callout-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:3px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.callout-red{background:rgba(220,38,38,.06);border-left:3px solid #dc2626;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-red .callout-tag{background:#dc2626;color:white;}
.callout-amber .callout-tag{background:#d97706;color:white;}
.callout-blue .callout-tag{background:#2471a3;color:white;}
.callout-green .callout-tag{background:#1e8449;color:white;}
.conceptual-first{font-size:17px;color:#2471a3;font-style:italic;line-height:1.65;margin-bottom:18px;padding-left:16px;border-left:3px solid #2471a3;}
.question-meta{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.bloom-badge,.band-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.bloom-understand{background:#dbeafe;color:#1d4ed8;}
.bloom-apply{background:#d1fae5;color:#065f46;}
.bloom-analyse{background:#ede9fe;color:#5b21b6;}
.bloom-evaluate{background:#fef3c7;color:#92400e;}
.band-2{background:#f1f5f9;color:#475569;}
.band-3{background:#e0f2fe;color:#0369a1;}
.band-4{background:#d1fae5;color:#065f46;}
.band-5{background:#ede9fe;color:#5b21b6;}
.band-6{background:#fef3c7;color:#92400e;}
.data-table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border);margin:16px 0;}
.diagram-wrap{margin:24px 0;text-align:center;}
.diagram-caption{font-size:12px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:8px;opacity:.75;}
.anchor-callout{background:linear-gradient(135deg,rgba(217,119,6,.1) 0%,rgba(217,119,6,.05) 100%);border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.anchor-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#d97706;display:block;margin-bottom:10px;}
.anchor-callout h3{font-family:'Roboto Slab',serif;color:#92400e;font-size:17px;margin-bottom:10px;}
.anchor-callout p{color:#78350f;font-size:15px;line-height:1.65;margin-bottom:8px;}
.misconceptions-box{background:rgba(142,68,173,.07);border:1.5px solid #8e44ad;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{font-family:'Roboto Slab',serif;color:#8e44ad;font-size:17px;margin-bottom:14px;}
.misconception-item{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.misconception-x{width:22px;height:22px;border-radius:50%;background:#8e44ad;color:white;font-size:12px;font-weight:800;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.misconception-item p{font-size:14px;color:#4a1d96;line-height:1.65;margin:0;}
.img-placeholder{background:#f1f5f9;border:2px dashed #cbd5e1;border-radius:12px;padding:32px;text-align:center;margin:20px 0;color:#94a3b8;}
.img-placeholder .img-icon{font-size:36px;margin-bottom:8px;}
.img-placeholder p{font-size:13px;margin:0;line-height:1.5;}

/* === From lesson05.html === */
:root {
  --primary:#c0392b; --secondary:#2471a3; --accent:#1e8449; --accent-2:#d97706;
  --critical:#8e44ad; --purple:#8e44ad; --purple-light:rgba(142,68,173,.07);
  --danger:#dc2626;
  --hero-grad:linear-gradient(135deg,#c0392b 0%,#2471a3 100%);
}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
.mono,code{font-family:'DM Mono',monospace;}
.hero{background:var(--hero-grad)!important;color:white;border:none;}
.hero::after{display:none;}
.hero h1,.hero p,.hero-desc{color:white;}
.hero-badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.hbadge{padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.hbadge-red{background:rgba(255,255,255,.22);color:white;}
.hbadge-blue{background:rgba(255,255,255,.15);color:white;}
.hbadge-outline{border:1.5px solid rgba(255,255,255,.45);background:transparent;color:rgba(255,255,255,.9);}
.hero h1{font-size:42px;font-weight:700;line-height:1.15;margin-bottom:12px;letter-spacing:-.5px;}
.hero-desc{font-size:17px;max-width:780px;line-height:1.65;opacity:.92;}
.hero-emoji{font-size:72px;line-height:1;flex-shrink:0;opacity:.85;}
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
.fade-up.visible{opacity:1;transform:none;}
.think-first{background:linear-gradient(135deg,#1e3a5f 0%,#1a5276 100%);border-radius:14px;padding:32px;margin-bottom:24px;}
.tf-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;background:rgba(255,255,255,.2);display:inline-block;padding:4px 10px;border-radius:100px;margin-bottom:14px;color:white;font-family:'DM Sans',sans-serif;}
.think-first p{color:rgba(255,255,255,.92);margin-bottom:12px;font-size:15px;}
.think-first strong{color:white;}
.think-first .answer-textarea{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:white;font-size:14px;}
.think-first .answer-textarea::placeholder{color:rgba(255,255,255,.5);}
.think-first .autosave-indicator{color:rgba(255,255,255,.65);}
.formula-panel{background:#1e3a5f;border-radius:14px;padding:24px 28px;margin-bottom:24px;color:white;}
.formula-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.formula-panel-icon{font-size:22px;}
.formula-panel h3{font-family:'Roboto Slab',serif;color:white;font-size:17px;margin:0;}
.formula-row{background:rgba(255,255,255,.09);border-radius:10px;padding:16px 20px;margin-bottom:12px;}
.formula-eq{font-family:'DM Mono',monospace;font-size:15px;color:#fbbf24;display:block;margin-bottom:10px;}
.formula-vars{display:flex;flex-wrap:wrap;gap:6px 18px;}
.formula-var{font-size:13px;color:rgba(255,255,255,.85);}
.formula-rearrange{font-size:13px;color:rgba(255,255,255,.7);margin-top:8px;line-height:1.6;}
.worked-example{background:#f8fafc;border:2px solid #2471a3;border-radius:14px;padding:28px 32px;margin:24px 0;}
.we-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#2471a3;display:block;margin-bottom:12px;font-family:'DM Sans',sans-serif;}
.worked-example h4{font-family:'Roboto Slab',serif;color:#0f172a;font-size:16px;margin-bottom:14px;}
.worked-step{display:flex;gap:14px;margin:14px 0;}
.step-num{width:28px;height:28px;border-radius:50%;background:#2471a3;color:white;font-size:13px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.step-body{flex:1;}
.step-body p{margin-bottom:6px;color:#475569;font-size:15px;line-height:1.65;}
.we-answer{background:rgba(36,113,163,.08);border-left:3px solid #2471a3;border-radius:0 8px 8px 0;padding:14px 18px;margin-top:14px;}
.we-answer p{color:#475569;font-size:15px;margin:0;line-height:1.65;}
.callout-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:3px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.callout-red{background:rgba(220,38,38,.06);border-left:3px solid #dc2626;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-red .callout-tag{background:#dc2626;color:white;}
.callout-amber .callout-tag{background:#d97706;color:white;}
.callout-blue .callout-tag{background:#2471a3;color:white;}
.callout-green .callout-tag{background:#1e8449;color:white;}
.conceptual-first{font-size:17px;color:#2471a3;font-style:italic;line-height:1.65;margin-bottom:18px;padding-left:16px;border-left:3px solid #2471a3;}
.question-meta{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.bloom-badge,.band-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.bloom-understand{background:#dbeafe;color:#1d4ed8;}
.bloom-apply{background:#d1fae5;color:#065f46;}
.bloom-analyse{background:#ede9fe;color:#5b21b6;}
.bloom-evaluate{background:#fef3c7;color:#92400e;}
.band-2{background:#f1f5f9;color:#475569;}
.band-3{background:#e0f2fe;color:#0369a1;}
.band-4{background:#d1fae5;color:#065f46;}
.band-5{background:#ede9fe;color:#5b21b6;}
.band-6{background:#fef3c7;color:#92400e;}
.data-table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border);margin:16px 0;}
.anchor-callout{background:linear-gradient(135deg,rgba(217,119,6,.1) 0%,rgba(217,119,6,.05) 100%);border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.anchor-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#d97706;display:block;margin-bottom:10px;}
.anchor-callout h3{font-family:'Roboto Slab',serif;color:#92400e;font-size:17px;margin-bottom:10px;}
.anchor-callout p{color:#78350f;font-size:15px;line-height:1.65;margin-bottom:8px;}
.misconceptions-box{background:rgba(142,68,173,.07);border:1.5px solid #8e44ad;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{font-family:'Roboto Slab',serif;color:#8e44ad;font-size:17px;margin-bottom:14px;}
.misconception-item{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.misconception-x{width:22px;height:22px;border-radius:50%;background:#8e44ad;color:white;font-size:12px;font-weight:800;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.misconception-item p{font-size:14px;color:#4a1d96;line-height:1.65;margin:0;}

/* === From lesson06.html === */
:root {
  --primary:#c0392b; --secondary:#2471a3; --accent:#1e8449; --accent-2:#d97706;
  --critical:#8e44ad; --purple:#8e44ad; --purple-light:rgba(142,68,173,.07);
  --danger:#dc2626;
  --hero-grad:linear-gradient(135deg,#1a5276 0%,#2471a3 100%);
}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
.mono,code{font-family:'DM Mono',monospace;}
.hero{background:var(--hero-grad)!important;color:white;border:none;}
.hero::after{display:none;}
.hero h1,.hero p,.hero-desc{color:white;}
.hero-badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.hbadge{padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.hbadge-red{background:rgba(255,255,255,.22);color:white;}
.hbadge-blue{background:rgba(255,255,255,.15);color:white;}
.hbadge-outline{border:1.5px solid rgba(255,255,255,.45);background:transparent;color:rgba(255,255,255,.9);}
.hbadge-star{background:rgba(255,215,0,.25);color:#ffd700;border:1.5px solid rgba(255,215,0,.5);}
.hero h1{font-size:42px;font-weight:700;line-height:1.15;margin-bottom:12px;letter-spacing:-.5px;}
.hero-desc{font-size:17px;max-width:780px;line-height:1.65;opacity:.92;}
.hero-emoji{font-size:72px;line-height:1;flex-shrink:0;opacity:.85;}
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
.fade-up.visible{opacity:1;transform:none;}
.think-first{background:linear-gradient(135deg,#1e3a5f 0%,#1a5276 100%);border-radius:14px;padding:32px;margin-bottom:24px;}
.tf-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;background:rgba(255,255,255,.2);display:inline-block;padding:4px 10px;border-radius:100px;margin-bottom:14px;color:white;font-family:'DM Sans',sans-serif;}
.think-first p{color:rgba(255,255,255,.92);margin-bottom:12px;font-size:15px;}
.think-first strong{color:white;}
.think-first .answer-textarea{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:white;font-size:14px;}
.think-first .answer-textarea::placeholder{color:rgba(255,255,255,.5);}
.think-first .autosave-indicator{color:rgba(255,255,255,.65);}
.formula-panel{background:#1e3a5f;border-radius:14px;padding:24px 28px;margin-bottom:24px;color:white;}
.formula-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.formula-panel-icon{font-size:22px;}
.formula-panel h3{font-family:'Roboto Slab',serif;color:white;font-size:17px;margin:0;}
.formula-row{background:rgba(255,255,255,.09);border-radius:10px;padding:16px 20px;margin-bottom:12px;}
.formula-eq{font-family:'DM Mono',monospace;font-size:15px;color:#fbbf24;display:block;margin-bottom:10px;}
.formula-vars{display:flex;flex-wrap:wrap;gap:6px 18px;}
.formula-var{font-size:13px;color:rgba(255,255,255,.85);}
.formula-rearrange{font-size:13px;color:rgba(255,255,255,.7);margin-top:8px;line-height:1.6;}
.worked-example{background:#f8fafc;border:2px solid #2471a3;border-radius:14px;padding:28px 32px;margin:24px 0;}
.we-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#2471a3;display:block;margin-bottom:12px;font-family:'DM Sans',sans-serif;}
.worked-example h4{font-family:'Roboto Slab',serif;color:#0f172a;font-size:16px;margin-bottom:14px;}
.worked-step{display:flex;gap:14px;margin:14px 0;}
.step-num{width:28px;height:28px;border-radius:50%;background:#2471a3;color:white;font-size:13px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.step-body{flex:1;}
.step-body p{margin-bottom:6px;color:#475569;font-size:15px;line-height:1.65;}
.we-answer{background:rgba(36,113,163,.08);border-left:3px solid #2471a3;border-radius:0 8px 8px 0;padding:14px 18px;margin-top:14px;}
.we-answer p{color:#475569;font-size:15px;margin:0;line-height:1.65;}
.callout-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:3px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.callout-red{background:rgba(220,38,38,.06);border-left:3px solid #dc2626;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-red .callout-tag{background:#dc2626;color:white;}
.callout-amber .callout-tag{background:#d97706;color:white;}
.callout-blue .callout-tag{background:#2471a3;color:white;}
.callout-green .callout-tag{background:#1e8449;color:white;}
.conceptual-first{font-size:17px;color:#2471a3;font-style:italic;line-height:1.65;margin-bottom:18px;padding-left:16px;border-left:3px solid #2471a3;}
.question-meta{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.bloom-badge,.band-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.bloom-understand{background:#dbeafe;color:#1d4ed8;}
.bloom-apply{background:#d1fae5;color:#065f46;}
.bloom-analyse{background:#ede9fe;color:#5b21b6;}
.bloom-evaluate{background:#fef3c7;color:#92400e;}
.band-2{background:#f1f5f9;color:#475569;}
.band-3{background:#e0f2fe;color:#0369a1;}
.band-4{background:#d1fae5;color:#065f46;}
.band-5{background:#ede9fe;color:#5b21b6;}
.band-6{background:#fef3c7;color:#92400e;}
.data-table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border);margin:16px 0;}
.consolidation-note{background:linear-gradient(135deg,rgba(26,82,118,.08) 0%,rgba(36,113,163,.05) 100%);border:1.5px solid #2471a3;border-radius:14px;padding:20px 24px;margin:20px 0;}
.consolidation-note h4{font-family:'Roboto Slab',serif;color:#1a5276;font-size:15px;margin-bottom:8px;}
.consolidation-note p{color:#1e3a5f;font-size:14px;line-height:1.65;margin:0;}
.error-diagnosis{background:#fef2f2;border:1.5px solid #dc2626;border-radius:12px;padding:18px 22px;margin:14px 0;}
.error-diagnosis h5{font-family:'Roboto Slab',serif;color:#dc2626;font-size:14px;margin-bottom:8px;}
.error-diagnosis p{font-size:14px;color:#475569;line-height:1.65;margin:0;}
.error-fix{background:#f0fdf4;border:1.5px solid #1e8449;border-radius:12px;padding:14px 18px;margin:8px 0 0;}
.error-fix p{font-size:13px;color:#166534;line-height:1.65;margin:0;}
.misconceptions-box{background:rgba(142,68,173,.07);border:1.5px solid #8e44ad;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{font-family:'Roboto Slab',serif;color:#8e44ad;font-size:17px;margin-bottom:14px;}
.misconception-item{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.misconception-x{width:22px;height:22px;border-radius:50%;background:#8e44ad;color:white;font-size:12px;font-weight:800;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.misconception-item p{font-size:14px;color:#4a1d96;line-height:1.65;margin:0;}

/* === From lesson07.html === */
:root {
  --primary:#c0392b; --secondary:#2471a3; --accent:#1e8449; --accent-2:#d97706;
  --critical:#8e44ad; --purple:#8e44ad; --purple-light:rgba(142,68,173,.07);
  --danger:#dc2626;
  --hero-grad:linear-gradient(135deg,#c0392b 0%,#2471a3 100%);
}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
.mono,code{font-family:'DM Mono',monospace;}
.hero{background:var(--hero-grad)!important;color:white;border:none;}
.hero::after{display:none;}
.hero h1,.hero p,.hero-desc{color:white;}
.hero-badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.hbadge{padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.hbadge-red{background:rgba(255,255,255,.22);color:white;}
.hbadge-blue{background:rgba(255,255,255,.15);color:white;}
.hbadge-outline{border:1.5px solid rgba(255,255,255,.45);background:transparent;color:rgba(255,255,255,.9);}
.hero h1{font-size:42px;font-weight:700;line-height:1.15;margin-bottom:12px;letter-spacing:-.5px;}
.hero-desc{font-size:17px;max-width:780px;line-height:1.65;opacity:.92;}
.hero-emoji{font-size:72px;line-height:1;flex-shrink:0;opacity:.85;}
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
.fade-up.visible{opacity:1;transform:none;}
.think-first{background:linear-gradient(135deg,#1e3a5f 0%,#1a5276 100%);border-radius:14px;padding:32px;margin-bottom:24px;}
.tf-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;background:rgba(255,255,255,.2);display:inline-block;padding:4px 10px;border-radius:100px;margin-bottom:14px;color:white;font-family:'DM Sans',sans-serif;}
.think-first p{color:rgba(255,255,255,.92);margin-bottom:12px;font-size:15px;}
.think-first strong{color:white;}
.think-first .answer-textarea{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:white;font-size:14px;}
.think-first .answer-textarea::placeholder{color:rgba(255,255,255,.5);}
.think-first .autosave-indicator{color:rgba(255,255,255,.65);}
.formula-panel{background:#1e3a5f;border-radius:14px;padding:24px 28px;margin-bottom:24px;color:white;}
.formula-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.formula-panel-icon{font-size:22px;}
.formula-panel h3{font-family:'Roboto Slab',serif;color:white;font-size:17px;margin:0;}
.formula-row{background:rgba(255,255,255,.09);border-radius:10px;padding:16px 20px;margin-bottom:12px;}
.formula-eq{font-family:'DM Mono',monospace;font-size:15px;color:#fbbf24;display:block;margin-bottom:10px;}
.formula-vars{display:flex;flex-wrap:wrap;gap:6px 18px;}
.formula-var{font-size:13px;color:rgba(255,255,255,.85);}
.formula-rearrange{font-size:13px;color:rgba(255,255,255,.7);margin-top:8px;line-height:1.6;}
.worked-example{background:#f8fafc;border:2px solid #2471a3;border-radius:14px;padding:28px 32px;margin:24px 0;}
.we-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#2471a3;display:block;margin-bottom:12px;font-family:'DM Sans',sans-serif;}
.worked-example h4{font-family:'Roboto Slab',serif;color:#0f172a;font-size:16px;margin-bottom:14px;}
.worked-step{display:flex;gap:14px;margin:14px 0;}
.step-num{width:28px;height:28px;border-radius:50%;background:#2471a3;color:white;font-size:13px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.step-body{flex:1;}
.step-body p{margin-bottom:6px;color:#475569;font-size:15px;line-height:1.65;}
.we-answer{background:rgba(36,113,163,.08);border-left:3px solid #2471a3;border-radius:0 8px 8px 0;padding:14px 18px;margin-top:14px;}
.we-answer p{color:#475569;font-size:15px;margin:0;line-height:1.65;}
.callout-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:3px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.callout-red{background:rgba(220,38,38,.06);border-left:3px solid #dc2626;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-red .callout-tag{background:#dc2626;color:white;}
.callout-amber{background:rgba(217,119,6,.06);border-left:3px solid #d97706;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-amber .callout-tag{background:#d97706;color:white;}
.callout-blue{background:rgba(36,113,163,.06);border-left:3px solid #2471a3;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-blue .callout-tag{background:#2471a3;color:white;}
.callout-green{background:rgba(30,132,73,.06);border-left:3px solid #1e8449;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-green .callout-tag{background:#1e8449;color:white;}
.conceptual-first{font-size:17px;color:#2471a3;font-style:italic;line-height:1.65;margin-bottom:18px;padding-left:16px;border-left:3px solid #2471a3;}
.question-meta{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.bloom-badge,.band-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.bloom-understand{background:#dbeafe;color:#1d4ed8;}
.bloom-apply{background:#d1fae5;color:#065f46;}
.bloom-analyse{background:#ede9fe;color:#5b21b6;}
.bloom-evaluate{background:#fef3c7;color:#92400e;}
.band-2{background:#f1f5f9;color:#475569;}
.band-3{background:#e0f2fe;color:#0369a1;}
.band-4{background:#d1fae5;color:#065f46;}
.band-5{background:#ede9fe;color:#5b21b6;}
.band-6{background:#fef3c7;color:#92400e;}
.data-table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border);margin:16px 0;}
.misconceptions-box{background:rgba(142,68,173,.07);border:1.5px solid #8e44ad;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{font-family:'Roboto Slab',serif;color:#8e44ad;font-size:17px;margin-bottom:14px;}
.misconception-item{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.misconception-x{width:22px;height:22px;border-radius:50%;background:#8e44ad;color:white;font-size:12px;font-weight:800;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.misconception-item p{font-size:14px;color:#4a1d96;line-height:1.65;margin:0;}
.phosphate-chain{background:linear-gradient(135deg,rgba(36,113,163,.07) 0%,rgba(30,132,73,.05) 100%);border:1.5px solid #2471a3;border-radius:12px;padding:18px 22px;margin:16px 0;text-align:center;}
.phosphate-chain p{font-family:'DM Mono',monospace;font-size:14px;color:#1e3a5f;margin:0;line-height:2;}

/* === From lesson08.html === */
:root {
  --primary:#c0392b; --secondary:#2471a3; --accent:#1e8449; --accent-2:#d97706;
  --critical:#8e44ad; --purple:#8e44ad; --purple-light:rgba(142,68,173,.07);
  --danger:#dc2626;
  --hero-grad:linear-gradient(135deg,#c0392b 0%,#2471a3 100%);
}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
.mono,code{font-family:'DM Mono',monospace;}
.hero{background:var(--hero-grad)!important;color:white;border:none;}
.hero::after{display:none;}
.hero h1,.hero p,.hero-desc{color:white;}
.hero-badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.hbadge{padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.hbadge-red{background:rgba(255,255,255,.22);color:white;}
.hbadge-blue{background:rgba(255,255,255,.15);color:white;}
.hbadge-outline{border:1.5px solid rgba(255,255,255,.45);background:transparent;color:rgba(255,255,255,.9);}
.hero h1{font-size:42px;font-weight:700;line-height:1.15;margin-bottom:12px;letter-spacing:-.5px;}
.hero-desc{font-size:17px;max-width:780px;line-height:1.65;opacity:.92;}
.hero-emoji{font-size:72px;line-height:1;flex-shrink:0;opacity:.85;}
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
.fade-up.visible{opacity:1;transform:none;}
.think-first{background:linear-gradient(135deg,#1e3a5f 0%,#1a5276 100%);border-radius:14px;padding:32px;margin-bottom:24px;}
.tf-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;background:rgba(255,255,255,.2);display:inline-block;padding:4px 10px;border-radius:100px;margin-bottom:14px;color:white;font-family:'DM Sans',sans-serif;}
.think-first p{color:rgba(255,255,255,.92);margin-bottom:12px;font-size:15px;}
.think-first strong{color:white;}
.think-first .answer-textarea{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:white;font-size:14px;}
.think-first .answer-textarea::placeholder{color:rgba(255,255,255,.5);}
.think-first .autosave-indicator{color:rgba(255,255,255,.65);}
.formula-panel{background:#1e3a5f;border-radius:14px;padding:24px 28px;margin-bottom:24px;color:white;}
.formula-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.formula-panel-icon{font-size:22px;}
.formula-panel h3{font-family:'Roboto Slab',serif;color:white;font-size:17px;margin:0;}
.formula-row{background:rgba(255,255,255,.09);border-radius:10px;padding:16px 20px;margin-bottom:12px;}
.formula-eq{font-family:'DM Mono',monospace;font-size:15px;color:#fbbf24;display:block;margin-bottom:10px;}
.formula-vars{display:flex;flex-wrap:wrap;gap:6px 18px;}
.formula-var{font-size:13px;color:rgba(255,255,255,.85);}
.formula-rearrange{font-size:13px;color:rgba(255,255,255,.7);margin-top:8px;line-height:1.6;}
.worked-example{background:#f8fafc;border:2px solid #2471a3;border-radius:14px;padding:28px 32px;margin:24px 0;}
.we-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#2471a3;display:block;margin-bottom:12px;font-family:'DM Sans',sans-serif;}
.worked-example h4{font-family:'Roboto Slab',serif;color:#0f172a;font-size:16px;margin-bottom:14px;}
.worked-step{display:flex;gap:14px;margin:14px 0;}
.step-num{width:28px;height:28px;border-radius:50%;background:#2471a3;color:white;font-size:13px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.step-body{flex:1;}
.step-body p{margin-bottom:6px;color:#475569;font-size:15px;line-height:1.65;}
.we-answer{background:rgba(36,113,163,.08);border-left:3px solid #2471a3;border-radius:0 8px 8px 0;padding:14px 18px;margin-top:14px;}
.we-answer p{color:#475569;font-size:15px;margin:0;line-height:1.65;}
.callout-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:3px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.callout-red{background:rgba(220,38,38,.06);border-left:3px solid #dc2626;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-red .callout-tag{background:#dc2626;color:white;}
.callout-amber{background:rgba(217,119,6,.06);border-left:3px solid #d97706;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-amber .callout-tag{background:#d97706;color:white;}
.callout-blue{background:rgba(36,113,163,.06);border-left:3px solid #2471a3;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-blue .callout-tag{background:#2471a3;color:white;}
.callout-green{background:rgba(30,132,73,.06);border-left:3px solid #1e8449;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-green .callout-tag{background:#1e8449;color:white;}
.conceptual-first{font-size:17px;color:#2471a3;font-style:italic;line-height:1.65;margin-bottom:18px;padding-left:16px;border-left:3px solid #2471a3;}
.question-meta{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.bloom-badge,.band-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.bloom-understand{background:#dbeafe;color:#1d4ed8;}
.bloom-apply{background:#d1fae5;color:#065f46;}
.bloom-analyse{background:#ede9fe;color:#5b21b6;}
.bloom-evaluate{background:#fef3c7;color:#92400e;}
.band-2{background:#f1f5f9;color:#475569;}
.band-3{background:#e0f2fe;color:#0369a1;}
.band-4{background:#d1fae5;color:#065f46;}
.band-5{background:#ede9fe;color:#5b21b6;}
.band-6{background:#fef3c7;color:#92400e;}
.data-table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border);margin:16px 0;}
.misconceptions-box{background:rgba(142,68,173,.07);border:1.5px solid #8e44ad;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{font-family:'Roboto Slab',serif;color:#8e44ad;font-size:17px;margin-bottom:14px;}
.misconception-item{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.misconception-x{width:22px;height:22px;border-radius:50%;background:#8e44ad;color:white;font-size:12px;font-weight:800;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.misconception-item p{font-size:14px;color:#4a1d96;line-height:1.65;margin:0;}
.method-box{background:linear-gradient(135deg,rgba(36,113,163,.07) 0%,rgba(30,132,73,.05) 100%);border:1.5px solid #2471a3;border-radius:12px;padding:18px 22px;margin:16px 0;}
.method-box h4{font-family:'Roboto Slab',serif;color:#1e3a5f;font-size:14px;margin-bottom:10px;}
.method-box ol{margin:0;padding-left:22px;}
.method-box li{font-size:14px;color:#1e3a5f;line-height:1.8;}

/* === From lesson09.html === */
:root {
  --primary:#c0392b; --secondary:#2471a3; --accent:#1e8449; --accent-2:#d97706;
  --critical:#8e44ad; --purple:#8e44ad; --purple-light:rgba(142,68,173,.07);
  --danger:#dc2626;
  --hero-grad:linear-gradient(135deg,#c0392b 0%,#2471a3 100%);
}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
.mono,code{font-family:'DM Mono',monospace;}
.hero{background:var(--hero-grad)!important;color:white;border:none;}
.hero::after{display:none;}
.hero h1,.hero p,.hero-desc{color:white;}
.hero-badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.hbadge{padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.hbadge-red{background:rgba(255,255,255,.22);color:white;}
.hbadge-blue{background:rgba(255,255,255,.15);color:white;}
.hbadge-outline{border:1.5px solid rgba(255,255,255,.45);background:transparent;color:rgba(255,255,255,.9);}
.hero h1{font-size:42px;font-weight:700;line-height:1.15;margin-bottom:12px;letter-spacing:-.5px;}
.hero-desc{font-size:17px;max-width:780px;line-height:1.65;opacity:.92;}
.hero-emoji{font-size:72px;line-height:1;flex-shrink:0;opacity:.85;}
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
.fade-up.visible{opacity:1;transform:none;}
.think-first{background:linear-gradient(135deg,#1e3a5f 0%,#1a5276 100%);border-radius:14px;padding:32px;margin-bottom:24px;}
.tf-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;background:rgba(255,255,255,.2);display:inline-block;padding:4px 10px;border-radius:100px;margin-bottom:14px;color:white;font-family:'DM Sans',sans-serif;}
.think-first p{color:rgba(255,255,255,.92);margin-bottom:12px;font-size:15px;}
.think-first strong{color:white;}
.think-first .answer-textarea{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:white;font-size:14px;}
.think-first .answer-textarea::placeholder{color:rgba(255,255,255,.5);}
.think-first .autosave-indicator{color:rgba(255,255,255,.65);}
.formula-panel{background:#1e3a5f;border-radius:14px;padding:24px 28px;margin-bottom:24px;color:white;}
.formula-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.formula-panel-icon{font-size:22px;}
.formula-panel h3{font-family:'Roboto Slab',serif;color:white;font-size:17px;margin:0;}
.formula-row{background:rgba(255,255,255,.09);border-radius:10px;padding:16px 20px;margin-bottom:12px;}
.formula-eq{font-family:'DM Mono',monospace;font-size:15px;color:#fbbf24;display:block;margin-bottom:10px;}
.formula-vars{display:flex;flex-wrap:wrap;gap:6px 18px;}
.formula-var{font-size:13px;color:rgba(255,255,255,.85);}
.formula-rearrange{font-size:13px;color:rgba(255,255,255,.7);margin-top:8px;line-height:1.6;}
.worked-example{background:#f8fafc;border:2px solid #2471a3;border-radius:14px;padding:28px 32px;margin:24px 0;}
.we-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#2471a3;display:block;margin-bottom:12px;font-family:'DM Sans',sans-serif;}
.worked-example h4{font-family:'Roboto Slab',serif;color:#0f172a;font-size:16px;margin-bottom:14px;}
.worked-step{display:flex;gap:14px;margin:14px 0;}
.step-num{width:28px;height:28px;border-radius:50%;background:#2471a3;color:white;font-size:13px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.step-body{flex:1;}
.step-body p{margin-bottom:6px;color:#475569;font-size:15px;line-height:1.65;}
.we-answer{background:rgba(36,113,163,.08);border-left:3px solid #2471a3;border-radius:0 8px 8px 0;padding:14px 18px;margin-top:14px;}
.we-answer p{color:#475569;font-size:15px;margin:0;line-height:1.65;}
.callout-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:3px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.callout-red{background:rgba(220,38,38,.06);border-left:3px solid #dc2626;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-red .callout-tag{background:#dc2626;color:white;}
.callout-amber{background:rgba(217,119,6,.06);border-left:3px solid #d97706;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-amber .callout-tag{background:#d97706;color:white;}
.callout-blue{background:rgba(36,113,163,.06);border-left:3px solid #2471a3;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-blue .callout-tag{background:#2471a3;color:white;}
.conceptual-first{font-size:17px;color:#2471a3;font-style:italic;line-height:1.65;margin-bottom:18px;padding-left:16px;border-left:3px solid #2471a3;}
.question-meta{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.bloom-badge,.band-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.bloom-understand{background:#dbeafe;color:#1d4ed8;}
.bloom-apply{background:#d1fae5;color:#065f46;}
.bloom-analyse{background:#ede9fe;color:#5b21b6;}
.bloom-evaluate{background:#fef3c7;color:#92400e;}
.band-3{background:#e0f2fe;color:#0369a1;}
.band-4{background:#d1fae5;color:#065f46;}
.band-5{background:#ede9fe;color:#5b21b6;}
.band-6{background:#fef3c7;color:#92400e;}
.data-table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border);margin:16px 0;}
.misconceptions-box{background:rgba(142,68,173,.07);border:1.5px solid #8e44ad;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{font-family:'Roboto Slab',serif;color:#8e44ad;font-size:17px;margin-bottom:14px;}
.misconception-item{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.misconception-x{width:22px;height:22px;border-radius:50%;background:#8e44ad;color:white;font-size:12px;font-weight:800;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.misconception-item p{font-size:14px;color:#4a1d96;line-height:1.65;margin:0;}
.ice-table{background:#f8fafc;border:1.5px solid #2471a3;border-radius:10px;padding:16px 20px;margin:16px 0;font-family:'DM Mono',monospace;font-size:14px;}
.ice-table table{width:100%;border-collapse:collapse;}
.ice-table th{background:#2471a3;color:white;padding:6px 12px;text-align:center;font-weight:600;}
.ice-table td{padding:6px 12px;text-align:center;border-bottom:1px solid #e2e8f0;color:#1e3a5f;}
.ice-table tr:last-child td{border-bottom:none;background:#dbeafe;}
.method-box{background:linear-gradient(135deg,rgba(36,113,163,.07) 0%,rgba(30,132,73,.05) 100%);border:1.5px solid #2471a3;border-radius:12px;padding:18px 22px;margin:16px 0;}
.method-box h4{font-family:'Roboto Slab',serif;color:#1e3a5f;font-size:14px;margin-bottom:10px;}
.method-box ol{margin:0;padding-left:22px;}
.method-box li{font-size:14px;color:#1e3a5f;line-height:1.8;}

/* === From lesson10.html === */
:root {
  --primary:#c0392b; --secondary:#2471a3; --accent:#1e8449; --accent-2:#d97706;
  --critical:#8e44ad;
  --hero-grad:linear-gradient(135deg,#c0392b 0%,#2471a3 100%);
}
body{font-size:16px;}
.page{max-width:860px;}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
.mono,code{font-family:'DM Mono',monospace;}
.hero{background:var(--hero-grad)!important;color:white;border:none;}
.hero::after{display:none;}
.hero h1,.hero p,.hero-desc{color:white;}
.hero-badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.hbadge{padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.hbadge-red{background:rgba(255,255,255,.22);color:white;}
.hbadge-blue{background:rgba(255,255,255,.15);color:white;}
.hbadge-outline{border:1.5px solid rgba(255,255,255,.45);background:transparent;color:rgba(255,255,255,.9);}
.hero h1{font-size:42px;font-weight:700;line-height:1.15;margin-bottom:12px;letter-spacing:-.5px;}
.hero-desc{font-size:17px;max-width:780px;line-height:1.65;opacity:.92;}
.hero-emoji{font-size:72px;line-height:1;flex-shrink:0;opacity:.85;}
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
.fade-up.visible{opacity:1;transform:none;}
.think-first{background:linear-gradient(135deg,#1e3a5f 0%,#1a5276 100%);border-radius:14px;padding:32px;margin-bottom:24px;}
.tf-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;background:rgba(255,255,255,.2);display:inline-block;padding:4px 10px;border-radius:100px;margin-bottom:14px;color:white;font-family:'DM Sans',sans-serif;}
.think-first p{color:rgba(255,255,255,.92);margin-bottom:12px;font-size:15px;}
.think-first strong{color:white;}
.think-first .answer-textarea{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:white;font-size:14px;}
.think-first .answer-textarea::placeholder{color:rgba(255,255,255,.5);}
.think-first .autosave-indicator{color:rgba(255,255,255,.65);}
.formula-panel{background:#1e3a5f;border-radius:14px;padding:24px 28px;margin-bottom:24px;color:white;}
.formula-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.formula-panel-icon{font-size:22px;}
.formula-panel h3{font-family:'Roboto Slab',serif;color:white;font-size:17px;margin:0;}
.formula-row{background:rgba(255,255,255,.09);border-radius:10px;padding:16px 20px;margin-bottom:12px;}
.formula-eq{font-family:'DM Mono',monospace;font-size:15px;color:#fbbf24;display:block;margin-bottom:10px;}
.formula-vars{display:flex;flex-wrap:wrap;gap:6px 18px;}
.formula-var{font-size:13px;color:rgba(255,255,255,.85);}
.formula-rearrange{font-size:13px;color:rgba(255,255,255,.7);margin-top:8px;line-height:1.6;}
.worked-example{background:#f8fafc;border:2px solid #2471a3;border-radius:14px;padding:28px 32px;margin:24px 0;}
.we-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#2471a3;display:block;margin-bottom:12px;font-family:'DM Sans',sans-serif;}
.worked-example h4{font-family:'Roboto Slab',serif;color:#0f172a;font-size:16px;margin-bottom:14px;}
.worked-step{display:flex;gap:14px;margin:14px 0;}
.step-num{width:28px;height:28px;border-radius:50%;background:#2471a3;color:white;font-size:13px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.step-body{flex:1;}
.step-body p{margin-bottom:6px;color:#475569;font-size:15px;line-height:1.65;}
.we-answer{background:rgba(36,113,163,.08);border-left:3px solid #2471a3;border-radius:0 8px 8px 0;padding:14px 18px;margin-top:14px;}
.we-answer p{color:#475569;font-size:15px;margin:0;line-height:1.65;}
.callout-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:3px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.callout-red{background:rgba(220,38,38,.06);border-left:3px solid #dc2626;color:#475569;padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-red .callout-tag{background:#dc2626;color:white;}
.callout-amber{background:rgba(217,119,6,.06);border-left:3px solid #d97706;color:#475569;padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-amber .callout-tag{background:#d97706;color:white;}
.callout-blue{background:rgba(36,113,163,.06);border-left:3px solid #2471a3;color:#475569;padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-blue .callout-tag{background:#2471a3;color:white;}
.conceptual-first{font-size:17px;color:#2471a3;font-style:italic;line-height:1.65;margin-bottom:18px;padding-left:16px;border-left:3px solid #2471a3;}
.question-meta{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.bloom-badge,.band-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.bloom-understand{background:#dbeafe;color:#1d4ed8;}
.bloom-apply{background:#d1fae5;color:#065f46;}
.bloom-analyse{background:#ede9fe;color:#5b21b6;}
.bloom-evaluate{background:#fef3c7;color:#92400e;}
.band-3{background:#e0f2fe;color:#0369a1;}
.band-4{background:#d1fae5;color:#065f46;}
.band-5{background:#ede9fe;color:#5b21b6;}
.band-6{background:#fef3c7;color:#92400e;}
.data-table-wrap{overflow-x:auto;border-radius:8px;border:1px solid #e2e8f0;margin:16px 0;}
.data-table-wrap table{width:100%;border-collapse:collapse;}
.data-table-wrap th{background:#1e3a5f;color:white;padding:8px 14px;text-align:left;font-size:13px;font-weight:600;}
.data-table-wrap td{padding:8px 14px;border-bottom:1px solid #f1f5f9;font-size:14px;color:#334155;}
.data-table-wrap tr:last-child td{border-bottom:none;}
.misconceptions-box{background:rgba(142,68,173,.07);border:1.5px solid #8e44ad;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{font-family:'Roboto Slab',serif;color:#8e44ad;font-size:17px;margin-bottom:14px;}
.misconception-item{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.misconception-x{width:22px;height:22px;border-radius:50%;background:#8e44ad;color:white;font-size:12px;font-weight:800;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.misconception-item p{font-size:14px;color:#4a1d96;line-height:1.65;margin:0;}

/* === From lesson11.html === */
:root {
  --primary:#c0392b; --secondary:#2471a3; --accent:#1e8449; --accent-2:#d97706;
  --critical:#8e44ad;
  --hero-grad:linear-gradient(135deg,#1a5276 0%,#2471a3 100%);
}
body{font-size:16px;}
.page{max-width:860px;}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
.mono,code{font-family:'DM Mono',monospace;}
.hero{background:var(--hero-grad)!important;color:white;border:none;}
.hero::after{display:none;}
.hero h1,.hero p,.hero-desc{color:white;}
.hero-badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.hbadge{padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.hbadge-red{background:rgba(255,255,255,.22);color:white;}
.hbadge-blue{background:rgba(255,255,255,.15);color:white;}
.hbadge-outline{border:1.5px solid rgba(255,255,255,.45);background:transparent;color:rgba(255,255,255,.9);}
.hbadge-star{background:rgba(255,215,0,.25);color:#ffd700;border:1.5px solid rgba(255,215,0,.5);}
.hero h1{font-size:42px;font-weight:700;line-height:1.15;margin-bottom:12px;letter-spacing:-.5px;}
.hero-desc{font-size:17px;max-width:780px;line-height:1.65;opacity:.92;}
.hero-emoji{font-size:72px;line-height:1;flex-shrink:0;opacity:.85;}
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
.fade-up.visible{opacity:1;transform:none;}
.consolidation-note{background:rgba(255,215,0,.12);border:1.5px solid rgba(255,215,0,.4);border-radius:12px;padding:16px 20px;margin-bottom:24px;font-size:14px;color:#92400e;line-height:1.65;}
.consolidation-note strong{color:#78350f;}
.think-first{background:linear-gradient(135deg,#1e3a5f 0%,#1a5276 100%);border-radius:14px;padding:32px;margin-bottom:24px;}
.tf-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;background:rgba(255,255,255,.2);display:inline-block;padding:4px 10px;border-radius:100px;margin-bottom:14px;color:white;font-family:'DM Sans',sans-serif;}
.think-first p{color:rgba(255,255,255,.92);margin-bottom:12px;font-size:15px;}
.think-first strong{color:white;}
.think-first .answer-textarea{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:white;font-size:14px;}
.think-first .answer-textarea::placeholder{color:rgba(255,255,255,.5);}
.think-first .autosave-indicator{color:rgba(255,255,255,.65);}
.formula-panel{background:#1e3a5f;border-radius:14px;padding:24px 28px;margin-bottom:24px;color:white;}
.formula-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.formula-panel-icon{font-size:22px;}
.formula-panel h3{font-family:'Roboto Slab',serif;color:white;font-size:17px;margin:0;}
.formula-row{background:rgba(255,255,255,.09);border-radius:10px;padding:16px 20px;margin-bottom:12px;}
.formula-eq{font-family:'DM Mono',monospace;font-size:15px;color:#fbbf24;display:block;margin-bottom:10px;}
.formula-vars{display:flex;flex-wrap:wrap;gap:6px 18px;}
.formula-var{font-size:13px;color:rgba(255,255,255,.85);}
.formula-rearrange{font-size:13px;color:rgba(255,255,255,.7);margin-top:8px;line-height:1.6;}
.worked-example{background:#f8fafc;border:2px solid #2471a3;border-radius:14px;padding:28px 32px;margin:24px 0;}
.we-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#2471a3;display:block;margin-bottom:12px;font-family:'DM Sans',sans-serif;}
.worked-example h4{font-family:'Roboto Slab',serif;color:#0f172a;font-size:16px;margin-bottom:14px;}
.worked-step{display:flex;gap:14px;margin:14px 0;}
.step-num{width:28px;height:28px;border-radius:50%;background:#2471a3;color:white;font-size:13px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.step-body{flex:1;}
.step-body p{margin-bottom:6px;color:#475569;font-size:15px;line-height:1.65;}
.we-answer{background:rgba(36,113,163,.08);border-left:3px solid #2471a3;border-radius:0 8px 8px 0;padding:14px 18px;margin-top:14px;}
.we-answer p{color:#475569;font-size:15px;margin:0;line-height:1.65;}
.callout-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:3px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.callout-red{background:rgba(220,38,38,.06);border-left:3px solid #dc2626;color:#475569;padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-red .callout-tag{background:#dc2626;color:white;}
.callout-amber{background:rgba(217,119,6,.06);border-left:3px solid #d97706;color:#475569;padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-amber .callout-tag{background:#d97706;color:white;}
.callout-blue{background:rgba(36,113,163,.06);border-left:3px solid #2471a3;color:#475569;padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-blue .callout-tag{background:#2471a3;color:white;}
.conceptual-first{font-size:17px;color:#2471a3;font-style:italic;line-height:1.65;margin-bottom:18px;padding-left:16px;border-left:3px solid #2471a3;}
.question-meta{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.bloom-badge,.band-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.bloom-understand{background:#dbeafe;color:#1d4ed8;}
.bloom-apply{background:#d1fae5;color:#065f46;}
.bloom-analyse{background:#ede9fe;color:#5b21b6;}
.bloom-evaluate{background:#fef3c7;color:#92400e;}
.band-3{background:#e0f2fe;color:#0369a1;}
.band-4{background:#d1fae5;color:#065f46;}
.band-5{background:#ede9fe;color:#5b21b6;}
.band-6{background:#fef3c7;color:#92400e;}
.data-table-wrap{overflow-x:auto;border-radius:8px;border:1px solid #e2e8f0;margin:16px 0;}
.data-table-wrap table{width:100%;border-collapse:collapse;}
.data-table-wrap th{background:#1e3a5f;color:white;padding:8px 14px;text-align:left;font-size:13px;font-weight:600;}
.data-table-wrap td{padding:8px 14px;border-bottom:1px solid #f1f5f9;font-size:14px;color:#334155;}
.data-table-wrap tr:last-child td{border-bottom:none;}
.misconceptions-box{background:rgba(142,68,173,.07);border:1.5px solid #8e44ad;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{font-family:'Roboto Slab',serif;color:#8e44ad;font-size:17px;margin-bottom:14px;}
.misconception-item{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.misconception-x{width:22px;height:22px;border-radius:50%;background:#8e44ad;color:white;font-size:12px;font-weight:800;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.misconception-item p{font-size:14px;color:#4a1d96;line-height:1.65;margin:0;}
.error-diagnosis{background:rgba(220,38,38,.06);border-left:3px solid #dc2626;padding:12px 16px;border-radius:0 8px 8px 0;margin:10px 0;font-size:13.5px;color:#475569;line-height:1.6;}
.error-fix{background:rgba(30,132,73,.06);border-left:3px solid #1e8449;padding:12px 16px;border-radius:0 8px 8px 0;margin:10px 0;font-size:13.5px;color:#475569;line-height:1.6;}
.decision-tree{background:#f8fafc;border:1.5px solid #2471a3;border-radius:12px;padding:20px 24px;margin:16px 0;font-family:'DM Mono',monospace;font-size:13px;line-height:2;}
.decision-tree .dt-branch{color:#1e3a5f;}
.decision-tree .dt-leaf{color:#1e8449;font-weight:600;}

/* === From lesson12.html === */
:root {
  --primary:#c0392b; --secondary:#2471a3; --accent:#1e8449; --accent-2:#d97706;
  --critical:#8e44ad;
  --hero-grad:linear-gradient(135deg,#c0392b 0%,#2471a3 100%);
}
body{font-size:16px;}
.page{max-width:860px;}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
.mono,code{font-family:'DM Mono',monospace;}
.hero{background:var(--hero-grad)!important;color:white;border:none;}
.hero::after{display:none;}
.hero h1,.hero p,.hero-desc{color:white;}
.hero-badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.hbadge{padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.hbadge-red{background:rgba(255,255,255,.22);color:white;}
.hbadge-blue{background:rgba(255,255,255,.15);color:white;}
.hbadge-outline{border:1.5px solid rgba(255,255,255,.45);background:transparent;color:rgba(255,255,255,.9);}
.hero h1{font-size:42px;font-weight:700;line-height:1.15;margin-bottom:12px;letter-spacing:-.5px;}
.hero-desc{font-size:17px;max-width:780px;line-height:1.65;opacity:.92;}
.hero-emoji{font-size:72px;line-height:1;flex-shrink:0;opacity:.85;}
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
.fade-up.visible{opacity:1;transform:none;}
.think-first{background:linear-gradient(135deg,#1e3a5f 0%,#1a5276 100%);border-radius:14px;padding:32px;margin-bottom:24px;}
.tf-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;background:rgba(255,255,255,.2);display:inline-block;padding:4px 10px;border-radius:100px;margin-bottom:14px;color:white;font-family:'DM Sans',sans-serif;}
.think-first p{color:rgba(255,255,255,.92);margin-bottom:12px;font-size:15px;}
.think-first strong{color:white;}
.think-first .answer-textarea{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:white;font-size:14px;}
.think-first .answer-textarea::placeholder{color:rgba(255,255,255,.5);}
.think-first .autosave-indicator{color:rgba(255,255,255,.65);}
.formula-panel{background:#1e3a5f;border-radius:14px;padding:24px 28px;margin-bottom:24px;color:white;}
.formula-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.formula-panel-icon{font-size:22px;}
.formula-panel h3{font-family:'Roboto Slab',serif;color:white;font-size:17px;margin:0;}
.formula-row{background:rgba(255,255,255,.09);border-radius:10px;padding:16px 20px;margin-bottom:12px;}
.formula-eq{font-family:'DM Mono',monospace;font-size:15px;color:#fbbf24;display:block;margin-bottom:10px;}
.formula-vars{display:flex;flex-wrap:wrap;gap:6px 18px;}
.formula-var{font-size:13px;color:rgba(255,255,255,.85);}
.formula-rearrange{font-size:13px;color:rgba(255,255,255,.7);margin-top:8px;line-height:1.6;}
.worked-example{background:#f8fafc;border:2px solid #2471a3;border-radius:14px;padding:28px 32px;margin:24px 0;}
.we-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#2471a3;display:block;margin-bottom:12px;font-family:'DM Sans',sans-serif;}
.worked-example h4{font-family:'Roboto Slab',serif;color:#0f172a;font-size:16px;margin-bottom:14px;}
.worked-step{display:flex;gap:14px;margin:14px 0;}
.step-num{width:28px;height:28px;border-radius:50%;background:#2471a3;color:white;font-size:13px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.step-body{flex:1;}
.step-body p{margin-bottom:6px;color:#475569;font-size:15px;line-height:1.65;}
.we-answer{background:rgba(36,113,163,.08);border-left:3px solid #2471a3;border-radius:0 8px 8px 0;padding:14px 18px;margin-top:14px;}
.we-answer p{color:#475569;font-size:15px;margin:0;line-height:1.65;}
.callout-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:3px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.callout-red{background:rgba(220,38,38,.06);border-left:3px solid #dc2626;color:#475569;padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-red .callout-tag{background:#dc2626;color:white;}
.callout-amber{background:rgba(217,119,6,.06);border-left:3px solid #d97706;color:#475569;padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-amber .callout-tag{background:#d97706;color:white;}
.callout-blue{background:rgba(36,113,163,.06);border-left:3px solid #2471a3;color:#475569;padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-blue .callout-tag{background:#2471a3;color:white;}
.conceptual-first{font-size:17px;color:#2471a3;font-style:italic;line-height:1.65;margin-bottom:18px;padding-left:16px;border-left:3px solid #2471a3;}
.question-meta{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.bloom-badge,.band-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.bloom-remember{background:#f1f5f9;color:#475569;}
.bloom-understand{background:#dbeafe;color:#1d4ed8;}
.bloom-apply{background:#d1fae5;color:#065f46;}
.bloom-analyse{background:#ede9fe;color:#5b21b6;}
.bloom-evaluate{background:#fef3c7;color:#92400e;}
.band-3{background:#e0f2fe;color:#0369a1;}
.band-4{background:#d1fae5;color:#065f46;}
.band-5{background:#ede9fe;color:#5b21b6;}
.band-6{background:#fef3c7;color:#92400e;}
.data-table-wrap{overflow-x:auto;border-radius:8px;border:1px solid #e2e8f0;margin:16px 0;}
.data-table-wrap table{width:100%;border-collapse:collapse;}
.data-table-wrap th{background:#1e3a5f;color:white;padding:8px 14px;text-align:left;font-size:13px;font-weight:600;}
.data-table-wrap td{padding:8px 14px;border-bottom:1px solid #f1f5f9;font-size:14px;color:#334155;}
.data-table-wrap tr:last-child td{border-bottom:none;}
.misconceptions-box{background:rgba(142,68,173,.07);border:1.5px solid #8e44ad;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{font-family:'Roboto Slab',serif;color:#8e44ad;font-size:17px;margin-bottom:14px;}
.misconception-item{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.misconception-x{width:22px;height:22px;border-radius:50%;background:#8e44ad;color:white;font-size:12px;font-weight:800;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.misconception-item p{font-size:14px;color:#4a1d96;line-height:1.65;margin:0;}
.mc-question{background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0;padding:20px 24px;margin-bottom:20px;}
.mc-stem{font-size:15px;color:#0f172a;margin-bottom:14px;line-height:1.65;}
.mc-options{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.mc-option{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding:10px 14px;border-radius:8px;border:1.5px solid #e2e8f0;background:white;transition:background .15s;}
.mc-option:hover{background:#f1f5f9;}
.mc-option input{margin-top:3px;flex-shrink:0;}
.mc-option span{font-size:14px;color:#334155;line-height:1.5;}
.mc-submit-btn{background:#2471a3;color:white;border:none;padding:9px 22px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;}
.mc-submit-btn:hover{background:#1a5276;}
.mc-feedback{margin-top:10px;font-size:14px;font-weight:500;min-height:20px;}
.answer-wrap{position:relative;}
.answer-textarea{width:100%;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-family:'DM Sans',sans-serif;font-size:14px;color:#334155;resize:vertical;background:#fafafa;line-height:1.6;box-sizing:border-box;}
.answer-textarea:focus{outline:none;border-color:#2471a3;background:white;}
.autosave-indicator{font-size:11px;color:#94a3b8;margin-top:6px;min-height:16px;}
.accordion-group{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.accordion-item{border:1.5px solid #e2e8f0;border-radius:10px;overflow:hidden;}
.accordion-header{padding:16px 20px;cursor:pointer;font-weight:600;font-size:15px;color:#1e3a5f;background:#f8fafc;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.accordion-header::after{content:"▼";font-size:11px;color:#94a3b8;}
details[open] .accordion-header::after{content:"▲";}
.accordion-body{padding:18px 22px;font-size:14px;color:#475569;line-height:1.7;border-top:1px solid #e2e8f0;}
.accordion-body p{margin-bottom:10px;}
.accordion-body p:last-child{margin-bottom:0;}
.completion-banner{background:linear-gradient(135deg,#1e8449 0%,#2471a3 100%);border-radius:14px;padding:28px 32px;text-align:center;color:white;margin:32px 0;}
.completion-banner h2{color:white;font-size:22px;margin-bottom:8px;}
.completion-banner p{color:rgba(255,255,255,.9);font-size:15px;margin:0;}
.lesson-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:32px 0;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none;transition:all .2s;}
.btn-primary{background:#c0392b;color:white;}
.btn-primary:hover{background:#a93226;}
.btn-secondary{background:#f1f5f9;color:#1e3a5f;border:1.5px solid #e2e8f0;}
.btn-secondary:hover{background:#e2e8f0;}
.ice-table{margin:16px 0;}
.ice-table table{border-collapse:collapse;font-family:'DM Mono',monospace;font-size:14px;}
.ice-table th,.ice-table td{border:1px solid #e2e8f0;padding:8px 14px;text-align:center;}
.ice-table th{background:#1e3a5f;color:white;font-size:13px;}
.ice-table tr:nth-child(even) td{background:#f8fafc;}

/* === From lesson13.html === */
:root {
  --primary:#c0392b; --secondary:#2471a3; --accent:#1e8449; --accent-2:#d97706;
  --critical:#8e44ad;
  --hero-grad:linear-gradient(135deg,#c0392b 0%,#2471a3 100%);
}
body{font-size:16px;}
.page{max-width:860px;}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
.mono,code{font-family:'DM Mono',monospace;}
.hero{background:var(--hero-grad)!important;color:white;border:none;}
.hero::after{display:none;}
.hero h1,.hero p,.hero-desc{color:white;}
.hero-badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.hbadge{padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.hbadge-red{background:rgba(255,255,255,.22);color:white;}
.hbadge-blue{background:rgba(255,255,255,.15);color:white;}
.hbadge-outline{border:1.5px solid rgba(255,255,255,.45);background:transparent;color:rgba(255,255,255,.9);}
.hero h1{font-size:42px;font-weight:700;line-height:1.15;margin-bottom:12px;letter-spacing:-.5px;}
.hero-desc{font-size:17px;max-width:780px;line-height:1.65;opacity:.92;}
.hero-emoji{font-size:72px;line-height:1;flex-shrink:0;opacity:.85;}
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
.fade-up.visible{opacity:1;transform:none;}
.think-first{background:linear-gradient(135deg,#1e3a5f 0%,#1a5276 100%);border-radius:14px;padding:32px;margin-bottom:24px;}
.tf-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;background:rgba(255,255,255,.2);display:inline-block;padding:4px 10px;border-radius:100px;margin-bottom:14px;color:white;font-family:'DM Sans',sans-serif;}
.think-first p{color:rgba(255,255,255,.92);margin-bottom:12px;font-size:15px;}
.think-first strong{color:white;}
.think-first .answer-textarea{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:white;font-size:14px;}
.think-first .answer-textarea::placeholder{color:rgba(255,255,255,.5);}
.think-first .autosave-indicator{color:rgba(255,255,255,.65);}
.formula-panel{background:#1e3a5f;border-radius:14px;padding:24px 28px;margin-bottom:24px;color:white;}
.formula-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.formula-panel-icon{font-size:22px;}
.formula-panel h3{font-family:'Roboto Slab',serif;color:white;font-size:17px;margin:0;}
.formula-row{background:rgba(255,255,255,.09);border-radius:10px;padding:16px 20px;margin-bottom:12px;}
.formula-eq{font-family:'DM Mono',monospace;font-size:15px;color:#fbbf24;display:block;margin-bottom:10px;}
.formula-vars{display:flex;flex-wrap:wrap;gap:6px 18px;}
.formula-var{font-size:13px;color:rgba(255,255,255,.85);}
.formula-rearrange{font-size:13px;color:rgba(255,255,255,.7);margin-top:8px;line-height:1.6;}
.worked-example{background:#f8fafc;border:2px solid #2471a3;border-radius:14px;padding:28px 32px;margin:24px 0;}
.we-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#2471a3;display:block;margin-bottom:12px;font-family:'DM Sans',sans-serif;}
.worked-example h4{font-family:'Roboto Slab',serif;color:#0f172a;font-size:16px;margin-bottom:14px;}
.worked-step{display:flex;gap:14px;margin:14px 0;}
.step-num{width:28px;height:28px;border-radius:50%;background:#2471a3;color:white;font-size:13px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.step-body{flex:1;}
.step-body p{margin-bottom:6px;color:#475569;font-size:15px;line-height:1.65;}
.we-answer{background:rgba(36,113,163,.08);border-left:3px solid #2471a3;border-radius:0 8px 8px 0;padding:14px 18px;margin-top:14px;}
.we-answer p{color:#475569;font-size:15px;margin:0;line-height:1.65;}
.callout-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:3px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.callout-red{background:rgba(220,38,38,.06);border-left:3px solid #dc2626;color:#475569;padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-red .callout-tag{background:#dc2626;color:white;}
.callout-amber{background:rgba(217,119,6,.06);border-left:3px solid #d97706;color:#475569;padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-amber .callout-tag{background:#d97706;color:white;}
.callout-blue{background:rgba(36,113,163,.06);border-left:3px solid #2471a3;color:#475569;padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-blue .callout-tag{background:#2471a3;color:white;}
.conceptual-first{font-size:17px;color:#2471a3;font-style:italic;line-height:1.65;margin-bottom:18px;padding-left:16px;border-left:3px solid #2471a3;}
.question-meta{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.bloom-badge,.band-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.bloom-remember{background:#f1f5f9;color:#475569;}
.bloom-understand{background:#dbeafe;color:#1d4ed8;}
.bloom-apply{background:#d1fae5;color:#065f46;}
.bloom-analyse{background:#ede9fe;color:#5b21b6;}
.bloom-evaluate{background:#fef3c7;color:#92400e;}
.band-3{background:#e0f2fe;color:#0369a1;}
.band-4{background:#d1fae5;color:#065f46;}
.band-5{background:#ede9fe;color:#5b21b6;}
.band-6{background:#fef3c7;color:#92400e;}
.data-table-wrap{overflow-x:auto;border-radius:8px;border:1px solid #e2e8f0;margin:16px 0;}
.data-table-wrap table{width:100%;border-collapse:collapse;}
.data-table-wrap th{background:#1e3a5f;color:white;padding:8px 14px;text-align:left;font-size:13px;font-weight:600;}
.data-table-wrap td{padding:8px 14px;border-bottom:1px solid #f1f5f9;font-size:14px;color:#334155;}
.data-table-wrap tr:last-child td{border-bottom:none;}
.misconceptions-box{background:rgba(142,68,173,.07);border:1.5px solid #8e44ad;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{font-family:'Roboto Slab',serif;color:#8e44ad;font-size:17px;margin-bottom:14px;}
.misconception-item{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.misconception-x{width:22px;height:22px;border-radius:50%;background:#8e44ad;color:white;font-size:12px;font-weight:800;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.misconception-item p{font-size:14px;color:#4a1d96;line-height:1.65;margin:0;}
.mc-question{background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0;padding:20px 24px;margin-bottom:20px;}
.mc-stem{font-size:15px;color:#0f172a;margin-bottom:14px;line-height:1.65;}
.mc-options{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.mc-option{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding:10px 14px;border-radius:8px;border:1.5px solid #e2e8f0;background:white;transition:background .15s;}
.mc-option:hover{background:#f1f5f9;}
.mc-option input{margin-top:3px;flex-shrink:0;}
.mc-option span{font-size:14px;color:#334155;line-height:1.5;}
.mc-submit-btn{background:#2471a3;color:white;border:none;padding:9px 22px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;}
.mc-submit-btn:hover{background:#1a5276;}
.mc-feedback{margin-top:10px;font-size:14px;font-weight:500;min-height:20px;}
.answer-wrap{position:relative;}
.answer-textarea{width:100%;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-family:'DM Sans',sans-serif;font-size:14px;color:#334155;resize:vertical;background:#fafafa;line-height:1.6;box-sizing:border-box;}
.answer-textarea:focus{outline:none;border-color:#2471a3;background:white;}
.autosave-indicator{font-size:11px;color:#94a3b8;margin-top:6px;min-height:16px;}
.accordion-group{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.accordion-item{border:1.5px solid #e2e8f0;border-radius:10px;overflow:hidden;}
.accordion-header{padding:16px 20px;cursor:pointer;font-weight:600;font-size:15px;color:#1e3a5f;background:#f8fafc;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.accordion-header::after{content:"▼";font-size:11px;color:#94a3b8;}
details[open] .accordion-header::after{content:"▲";}
.accordion-body{padding:18px 22px;font-size:14px;color:#475569;line-height:1.7;border-top:1px solid #e2e8f0;}
.accordion-body p{margin-bottom:10px;}
.accordion-body p:last-child{margin-bottom:0;}
.completion-banner{background:linear-gradient(135deg,#1e8449 0%,#2471a3 100%);border-radius:14px;padding:28px 32px;text-align:center;color:white;margin:32px 0;}
.completion-banner h2{color:white;font-size:22px;margin-bottom:8px;}
.completion-banner p{color:rgba(255,255,255,.9);font-size:15px;margin:0;}
.lesson-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:32px 0;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none;transition:all .2s;}
.btn-primary{background:#c0392b;color:white;}
.btn-primary:hover{background:#a93226;}
.btn-secondary{background:#f1f5f9;color:#1e3a5f;border:1.5px solid #e2e8f0;}
.btn-secondary:hover{background:#e2e8f0;}

/* === From lesson15.html === */
:root {
  --primary:#c0392b; --secondary:#2471a3; --accent:#1e8449; --accent-2:#d97706;
  --critical:#8e44ad;
  --hero-grad:linear-gradient(135deg,#c0392b 0%,#2471a3 100%);
}
body{font-size:16px;}
.page{max-width:860px;}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
.mono,code{font-family:'DM Mono',monospace;}
.hero{background:var(--hero-grad)!important;color:white;border:none;}
.hero::after{display:none;}
.hero h1,.hero p,.hero-desc{color:white;}
.hero-badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.hbadge{padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.hbadge-red{background:rgba(255,255,255,.22);color:white;}
.hbadge-blue{background:rgba(255,255,255,.15);color:white;}
.hbadge-outline{border:1.5px solid rgba(255,255,255,.45);background:transparent;color:rgba(255,255,255,.9);}
.hero h1{font-size:42px;font-weight:700;line-height:1.15;margin-bottom:12px;letter-spacing:-.5px;}
.hero-desc{font-size:17px;max-width:780px;line-height:1.65;opacity:.92;}
.hero-emoji{font-size:72px;line-height:1;flex-shrink:0;opacity:.85;}
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
.fade-up.visible{opacity:1;transform:none;}
.think-first{background:linear-gradient(135deg,#1e3a5f 0%,#1a5276 100%);border-radius:14px;padding:32px;margin-bottom:24px;}
.tf-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;background:rgba(255,255,255,.2);display:inline-block;padding:4px 10px;border-radius:100px;margin-bottom:14px;color:white;font-family:'DM Sans',sans-serif;}
.think-first p{color:rgba(255,255,255,.92);margin-bottom:12px;font-size:15px;}
.think-first strong{color:white;}
.think-first .answer-textarea{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:white;font-size:14px;}
.think-first .answer-textarea::placeholder{color:rgba(255,255,255,.5);}
.think-first .autosave-indicator{color:rgba(255,255,255,.65);}
.formula-panel{background:#1e3a5f;border-radius:14px;padding:24px 28px;margin-bottom:24px;color:white;}
.formula-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.formula-panel-icon{font-size:22px;}
.formula-panel h3{font-family:'Roboto Slab',serif;color:white;font-size:17px;margin:0;}
.formula-row{background:rgba(255,255,255,.09);border-radius:10px;padding:16px 20px;margin-bottom:12px;}
.formula-eq{font-family:'DM Mono',monospace;font-size:15px;color:#fbbf24;display:block;margin-bottom:10px;}
.formula-vars{display:flex;flex-wrap:wrap;gap:6px 18px;}
.formula-var{font-size:13px;color:rgba(255,255,255,.85);}
.formula-rearrange{font-size:13px;color:rgba(255,255,255,.7);margin-top:8px;line-height:1.6;}
.worked-example{background:#f8fafc;border:2px solid #2471a3;border-radius:14px;padding:28px 32px;margin:24px 0;}
.we-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#2471a3;display:block;margin-bottom:12px;font-family:'DM Sans',sans-serif;}
.worked-example h4{font-family:'Roboto Slab',serif;color:#0f172a;font-size:16px;margin-bottom:14px;}
.worked-step{display:flex;gap:14px;margin:14px 0;}
.step-num{width:28px;height:28px;border-radius:50%;background:#2471a3;color:white;font-size:13px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.step-body{flex:1;}
.step-body p{margin-bottom:6px;color:#475569;font-size:15px;line-height:1.65;}
.we-answer{background:rgba(36,113,163,.08);border-left:3px solid #2471a3;border-radius:0 8px 8px 0;padding:14px 18px;margin-top:14px;}
.we-answer p{color:#475569;font-size:15px;margin:0;line-height:1.65;}
.callout-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:3px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.callout-red{background:rgba(220,38,38,.06);border-left:3px solid #dc2626;color:#475569;padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-red .callout-tag{background:#dc2626;color:white;}
.callout-amber{background:rgba(217,119,6,.06);border-left:3px solid #d97706;color:#475569;padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-amber .callout-tag{background:#d97706;color:white;}
.callout-blue{background:rgba(36,113,163,.06);border-left:3px solid #2471a3;color:#475569;padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-blue .callout-tag{background:#2471a3;color:white;}
.conceptual-first{font-size:17px;color:#2471a3;font-style:italic;line-height:1.65;margin-bottom:18px;padding-left:16px;border-left:3px solid #2471a3;}
.question-meta{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.bloom-badge,.band-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.bloom-remember{background:#f1f5f9;color:#475569;}
.bloom-understand{background:#dbeafe;color:#1d4ed8;}
.bloom-apply{background:#d1fae5;color:#065f46;}
.bloom-analyse{background:#ede9fe;color:#5b21b6;}
.bloom-evaluate{background:#fef3c7;color:#92400e;}
.band-3{background:#e0f2fe;color:#0369a1;}
.band-4{background:#d1fae5;color:#065f46;}
.band-5{background:#ede9fe;color:#5b21b6;}
.band-6{background:#fef3c7;color:#92400e;}
.data-table-wrap{overflow-x:auto;border-radius:8px;border:1px solid #e2e8f0;margin:16px 0;}
.data-table-wrap table{width:100%;border-collapse:collapse;}
.data-table-wrap th{background:#1e3a5f;color:white;padding:8px 14px;text-align:left;font-size:13px;font-weight:600;}
.data-table-wrap td{padding:8px 14px;border-bottom:1px solid #f1f5f9;font-size:14px;color:#334155;}
.data-table-wrap tr:last-child td{border-bottom:none;}
.misconceptions-box{background:rgba(142,68,173,.07);border:1.5px solid #8e44ad;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{font-family:'Roboto Slab',serif;color:#8e44ad;font-size:17px;margin-bottom:14px;}
.misconception-item{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.misconception-x{width:22px;height:22px;border-radius:50%;background:#8e44ad;color:white;font-size:12px;font-weight:800;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.misconception-item p{font-size:14px;color:#4a1d96;line-height:1.65;margin:0;}
.mc-question{background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0;padding:20px 24px;margin-bottom:20px;}
.mc-stem{font-size:15px;color:#0f172a;margin-bottom:14px;line-height:1.65;}
.mc-options{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.mc-option{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding:10px 14px;border-radius:8px;border:1.5px solid #e2e8f0;background:white;transition:background .15s;}
.mc-option:hover{background:#f1f5f9;}
.mc-option input{margin-top:3px;flex-shrink:0;}
.mc-option span{font-size:14px;color:#334155;line-height:1.5;}
.mc-submit-btn{background:#2471a3;color:white;border:none;padding:9px 22px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;}
.mc-submit-btn:hover{background:#1a5276;}
.mc-feedback{margin-top:10px;font-size:14px;font-weight:500;min-height:20px;}
.answer-wrap{position:relative;}
.answer-textarea{width:100%;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-family:'DM Sans',sans-serif;font-size:14px;color:#334155;resize:vertical;background:#fafafa;line-height:1.6;box-sizing:border-box;}
.answer-textarea:focus{outline:none;border-color:#2471a3;background:white;}
.autosave-indicator{font-size:11px;color:#94a3b8;margin-top:6px;min-height:16px;}
.accordion-group{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.accordion-item{border:1.5px solid #e2e8f0;border-radius:10px;overflow:hidden;}
.accordion-header{padding:16px 20px;cursor:pointer;font-weight:600;font-size:15px;color:#1e3a5f;background:#f8fafc;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.accordion-header::after{content:"▼";font-size:11px;color:#94a3b8;}
details[open] .accordion-header::after{content:"▲";}
.accordion-body{padding:18px 22px;font-size:14px;color:#475569;line-height:1.7;border-top:1px solid #e2e8f0;}
.accordion-body p{margin-bottom:10px;}
.accordion-body p:last-child{margin-bottom:0;}
.completion-banner{background:linear-gradient(135deg,#1e8449 0%,#2471a3 100%);border-radius:14px;padding:28px 32px;text-align:center;color:white;margin:32px 0;}
.completion-banner h2{color:white;font-size:22px;margin-bottom:8px;}
.completion-banner p{color:rgba(255,255,255,.9);font-size:15px;margin:0;}
.lesson-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:32px 0;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none;transition:all .2s;}
.btn-primary{background:#c0392b;color:white;}
.btn-primary:hover{background:#a93226;}
.btn-secondary{background:#f1f5f9;color:#1e3a5f;border:1.5px solid #e2e8f0;}
.btn-secondary:hover{background:#e2e8f0;}
.indicator-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px;}
.indicator-table th{background:#1e3a5f;color:white;padding:8px 14px;text-align:left;font-weight:600;}
.indicator-table td{padding:8px 14px;border-bottom:1px solid #f1f5f9;color:#334155;}
.indicator-table tr:last-child td{border-bottom:none;}
.ind-mo{color:#c0392b;font-weight:600;}
.ind-btb{color:#1e8449;font-weight:600;}
.ind-ph{color:#8e44ad;font-weight:600;}

/* === From lesson16.html === */
:root {
  --primary:#c0392b; --secondary:#2471a3; --accent:#1e8449; --accent-2:#d97706;
  --critical:#8e44ad;
  --hero-grad:linear-gradient(135deg,#c0392b 0%,#2471a3 100%);
}
body{font-size:16px;}
.page{max-width:860px;}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
.mono,code{font-family:'DM Mono',monospace;}
.hero{background:var(--hero-grad)!important;color:white;border:none;}
.hero::after{display:none;}
.hero h1,.hero p,.hero-desc{color:white;}
.hero-badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.hbadge{padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.hbadge-red{background:rgba(255,255,255,.22);color:white;}
.hbadge-blue{background:rgba(255,255,255,.15);color:white;}
.hbadge-outline{border:1.5px solid rgba(255,255,255,.45);background:transparent;color:rgba(255,255,255,.9);}
.hero h1{font-size:42px;font-weight:700;line-height:1.15;margin-bottom:12px;letter-spacing:-.5px;}
.hero-desc{font-size:17px;max-width:780px;line-height:1.65;opacity:.92;}
.hero-emoji{font-size:72px;line-height:1;flex-shrink:0;opacity:.85;}
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
.fade-up.visible{opacity:1;transform:none;}
.think-first{background:linear-gradient(135deg,#1e3a5f 0%,#1a5276 100%);border-radius:14px;padding:32px;margin-bottom:24px;}
.tf-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;background:rgba(255,255,255,.2);display:inline-block;padding:4px 10px;border-radius:100px;margin-bottom:14px;color:white;font-family:'DM Sans',sans-serif;}
.think-first p{color:rgba(255,255,255,.92);margin-bottom:12px;font-size:15px;}
.think-first strong{color:white;}
.think-first .answer-textarea{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:white;font-size:14px;}
.think-first .answer-textarea::placeholder{color:rgba(255,255,255,.5);}
.think-first .autosave-indicator{color:rgba(255,255,255,.65);}
.formula-panel{background:#1e3a5f;border-radius:14px;padding:24px 28px;margin-bottom:24px;color:white;}
.formula-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.formula-panel-icon{font-size:22px;}
.formula-panel h3{font-family:'Roboto Slab',serif;color:white;font-size:17px;margin:0;}
.formula-row{background:rgba(255,255,255,.09);border-radius:10px;padding:16px 20px;margin-bottom:12px;}
.formula-eq{font-family:'DM Mono',monospace;font-size:15px;color:#fbbf24;display:block;margin-bottom:10px;}
.formula-vars{display:flex;flex-wrap:wrap;gap:6px 18px;}
.formula-var{font-size:13px;color:rgba(255,255,255,.85);}
.formula-rearrange{font-size:13px;color:rgba(255,255,255,.7);margin-top:8px;line-height:1.6;}
.worked-example{background:#f8fafc;border:2px solid #2471a3;border-radius:14px;padding:28px 32px;margin:24px 0;}
.we-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#2471a3;display:block;margin-bottom:12px;font-family:'DM Sans',sans-serif;}
.worked-example h4{font-family:'Roboto Slab',serif;color:#0f172a;font-size:16px;margin-bottom:14px;}
.worked-step{display:flex;gap:14px;margin:14px 0;}
.step-num{width:28px;height:28px;border-radius:50%;background:#2471a3;color:white;font-size:13px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.step-body{flex:1;}
.step-body p{margin-bottom:6px;color:#475569;font-size:15px;line-height:1.65;}
.we-answer{background:rgba(36,113,163,.08);border-left:3px solid #2471a3;border-radius:0 8px 8px 0;padding:14px 18px;margin-top:14px;}
.we-answer p{color:#475569;font-size:15px;margin:0;line-height:1.65;}
.callout-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:3px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.callout-red{background:rgba(220,38,38,.06);border-left:3px solid #dc2626;color:#475569;padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-red .callout-tag{background:#dc2626;color:white;}
.callout-amber{background:rgba(217,119,6,.06);border-left:3px solid #d97706;color:#475569;padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-amber .callout-tag{background:#d97706;color:white;}
.callout-blue{background:rgba(36,113,163,.06);border-left:3px solid #2471a3;color:#475569;padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-blue .callout-tag{background:#2471a3;color:white;}
.conceptual-first{font-size:17px;color:#2471a3;font-style:italic;line-height:1.65;margin-bottom:18px;padding-left:16px;border-left:3px solid #2471a3;}
.question-meta{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.bloom-badge,.band-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.bloom-remember{background:#f1f5f9;color:#475569;}
.bloom-understand{background:#dbeafe;color:#1d4ed8;}
.bloom-apply{background:#d1fae5;color:#065f46;}
.bloom-analyse{background:#ede9fe;color:#5b21b6;}
.bloom-evaluate{background:#fef3c7;color:#92400e;}
.band-3{background:#e0f2fe;color:#0369a1;}
.band-4{background:#d1fae5;color:#065f46;}
.band-5{background:#ede9fe;color:#5b21b6;}
.band-6{background:#fef3c7;color:#92400e;}
.data-table-wrap{overflow-x:auto;border-radius:8px;border:1px solid #e2e8f0;margin:16px 0;}
.data-table-wrap table{width:100%;border-collapse:collapse;}
.data-table-wrap th{background:#1e3a5f;color:white;padding:8px 14px;text-align:left;font-size:13px;font-weight:600;}
.data-table-wrap td{padding:8px 14px;border-bottom:1px solid #f1f5f9;font-size:14px;color:#334155;}
.data-table-wrap tr:last-child td{border-bottom:none;}
.misconceptions-box{background:rgba(142,68,173,.07);border:1.5px solid #8e44ad;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{font-family:'Roboto Slab',serif;color:#8e44ad;font-size:17px;margin-bottom:14px;}
.misconception-item{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.misconception-x{width:22px;height:22px;border-radius:50%;background:#8e44ad;color:white;font-size:12px;font-weight:800;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.misconception-item p{font-size:14px;color:#4a1d96;line-height:1.65;margin:0;}
.mc-question{background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0;padding:20px 24px;margin-bottom:20px;}
.mc-stem{font-size:15px;color:#0f172a;margin-bottom:14px;line-height:1.65;}
.mc-options{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.mc-option{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding:10px 14px;border-radius:8px;border:1.5px solid #e2e8f0;background:white;transition:background .15s;}
.mc-option:hover{background:#f1f5f9;}
.mc-option input{margin-top:3px;flex-shrink:0;}
.mc-option span{font-size:14px;color:#334155;line-height:1.5;}
.mc-submit-btn{background:#2471a3;color:white;border:none;padding:9px 22px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;}
.mc-submit-btn:hover{background:#1a5276;}
.mc-feedback{margin-top:10px;font-size:14px;font-weight:500;min-height:20px;}
.answer-wrap{position:relative;}
.answer-textarea{width:100%;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-family:'DM Sans',sans-serif;font-size:14px;color:#334155;resize:vertical;background:#fafafa;line-height:1.6;box-sizing:border-box;}
.answer-textarea:focus{outline:none;border-color:#2471a3;}
.autosave-indicator{font-size:11px;color:#94a3b8;margin-top:4px;display:block;height:14px;}
.section-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:#94a3b8;margin:32px 0 14px;display:block;}
.accordion-group{display:flex;flex-direction:column;gap:8px;}
.accordion-item{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;}
.accordion-header{padding:14px 18px;cursor:pointer;font-size:14px;font-weight:600;color:#334155;list-style:none;background:#f8fafc;}
.accordion-header:hover{background:#f1f5f9;}
.accordion-body{padding:14px 18px;font-size:14px;color:#475569;line-height:1.7;border-top:1px solid #e2e8f0;}
.completion-banner{background:linear-gradient(135deg,#1e8449 0%,#2471a3 100%);border-radius:14px;padding:28px 32px;text-align:center;color:white;margin:32px 0;}
.completion-banner h2{color:white;font-size:22px;margin-bottom:8px;}
.completion-banner p{color:rgba(255,255,255,.9);font-size:15px;margin:0;}
.lesson-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:32px 0;}
.btn{display:inline-block;padding:11px 22px;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none;transition:all .15s;}
.btn-secondary{background:#f1f5f9;color:#334155;border:1.5px solid #e2e8f0;}
.btn-secondary:hover{background:#e2e8f0;}
.btn-primary{background:#2471a3;color:white;}
.btn-primary:hover{background:#1a5276;}

/* === From lesson17.html === */
/* ── M6 Colour tokens ─────────────────────────── */
:root {
  --primary:#c0392b; --primary-light:rgba(192,57,43,.08);
  --secondary:#2471a3; --secondary-light:rgba(36,113,163,.08);
  --accent:#1e8449; --accent-light:rgba(30,132,73,.08);
  --accent-2:#d97706;
  --critical:#8e44ad; --purple:#8e44ad; --purple-light:rgba(142,68,173,.07);
  --consolidation:#1a5276;
  --danger:#dc2626;
  --hero-grad:linear-gradient(135deg,#c0392b 0%,#2471a3 100%);
  --hero-cons:linear-gradient(135deg,#1a5276 0%,#2471a3 100%);
  --bg:#fef9f0; --surface:#ffffff;
  --text:#0f172a; --text-muted:#475569; --text-light:#94a3b8;
  --border:#e2e8f0;
  --radius:14px; --radius-sm:8px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);line-height:1.65;font-size:16px;}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
code,.mono{font-family:'DM Mono',monospace;}

/* ── Progress bar ─────────────────────────────── */
.progress-bar-wrap{position:fixed;top:0;left:0;right:0;height:3px;background:rgba(0,0,0,.08);z-index:1000;}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,#1a5276,#2471a3);width:0;transition:width .2s;}

/* ── Section nav dots ─────────────────────────── */
.section-nav{position:fixed;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;z-index:999;}
.section-dot{width:9px;height:9px;border-radius:50%;background:#cbd5e1;cursor:pointer;transition:all .2s;position:relative;}
.section-dot.active{background:#1a5276;transform:scale(1.4);}
.section-dot:hover::after{content:attr(data-label);position:absolute;right:16px;top:50%;transform:translateY(-50%);background:#1e293b;color:white;font-size:11px;font-family:'DM Sans',sans-serif;padding:3px 8px;border-radius:4px;white-space:nowrap;}

/* ── Page wrapper ─────────────────────────────── */
.page{max-width:860px;margin:0 auto;padding:40px 20px 80px;}

/* ── Hero ─────────────────────────────────────── */
.hero{background:var(--hero-cons);border-radius:var(--radius);padding:40px 44px;margin-bottom:28px;color:white;}
.hero-top{display:flex;align-items:flex-start;gap:24px;justify-content:space-between;}
.hero-badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.hbadge{padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.hbadge-cons{background:rgba(255,255,255,.25);color:white;}
.hbadge-star{background:#f59e0b;color:#1a1a1a;}
.hbadge-blue{background:rgba(255,255,255,.15);color:white;}
.hbadge-outline{border:1.5px solid rgba(255,255,255,.45);background:transparent;color:rgba(255,255,255,.9);}
.hero h1{font-size:36px;font-weight:700;line-height:1.15;margin-bottom:12px;letter-spacing:-.4px;color:white;}
.hero-desc{font-size:16px;max-width:720px;line-height:1.65;opacity:.92;color:white;}
.hero-emoji{font-size:64px;line-height:1;flex-shrink:0;opacity:.85;}

/* ── Mode banner ──────────────────────────────── */
.mode-banner{background:white;border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px 20px;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.mode-banner p{font-size:14px;color:var(--text-muted);}
.mode-toggle{display:flex;gap:8px;}
.mode-btn{padding:7px 16px;border-radius:6px;border:1.5px solid var(--border);background:white;font-size:13px;font-weight:600;cursor:pointer;color:var(--text-muted);transition:all .2s;}
.mode-btn.active{background:#1a5276;color:white;border-color:#1a5276;}

/* ── Learning intentions ──────────────────────── */
.intentions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px;}
@media(max-width:720px){.intentions-grid{grid-template-columns:1fr;}}
.intention-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:20px;border-top:3px solid #1a5276;}
.intention-card.purple{border-top-color:var(--purple);}
.intention-card.green{border-top-color:var(--accent);}
.intention-card h3{font-family:'Roboto Slab',serif;font-size:14px;margin-bottom:10px;color:var(--text);}
.intention-card ul{padding-left:16px;color:var(--text-muted);font-size:13.5px;line-height:1.7;}

/* ── Section label ────────────────────────────── */
.section-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-light);margin:32px 0 14px;display:block;}

/* ── Card ─────────────────────────────────────── */
.card{background:white;border:1px solid var(--border);border-radius:var(--radius);padding:32px 36px;margin-bottom:20px;}
.card-header{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px;}
.card-num{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;flex-shrink:0;color:white;}
.card-num.blue{background:#1a5276;}
.card-num.cons{background:#1a5276;}
.card h2{font-family:'Roboto Slab',serif;font-size:20px;color:var(--text);margin-bottom:4px;}
.card-subtitle{font-size:13px;color:var(--text-light);}
.card p{color:var(--text-muted);font-size:15px;line-height:1.7;margin-bottom:14px;}
.card p:last-child{margin-bottom:0;}
.card h3{font-family:'Roboto Slab',serif;font-size:16px;color:var(--text);margin:20px 0 10px;}
.card ul,.card ol{padding-left:20px;color:var(--text-muted);font-size:15px;line-height:1.8;margin-bottom:14px;}

/* ── Conceptual opener ────────────────────────── */
.conceptual-first{font-size:16px;color:#1a5276;font-style:italic;line-height:1.65;margin-bottom:18px;padding-left:16px;border-left:3px solid #1a5276;}

/* ── Think First ──────────────────────────────── */
.think-first{background:linear-gradient(135deg,#0f2744 0%,#1a5276 100%);border-radius:var(--radius);padding:32px;margin-bottom:24px;}
.tf-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;background:rgba(255,255,255,.2);display:inline-block;padding:4px 10px;border-radius:100px;margin-bottom:14px;color:white;font-family:'DM Sans',sans-serif;}
.think-first h3{font-family:'Roboto Slab',serif;color:white;font-size:17px;margin-bottom:12px;}
.think-first p{color:rgba(255,255,255,.9);margin-bottom:12px;font-size:15px;line-height:1.7;}
.think-first strong{color:white;}
.think-first .answer-textarea{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.3);color:white;font-size:14px;border-radius:8px;padding:12px;width:100%;resize:vertical;min-height:80px;font-family:'DM Sans',sans-serif;}
.think-first .answer-textarea::placeholder{color:rgba(255,255,255,.5);}
.think-first .autosave-indicator{color:rgba(255,255,255,.6);font-size:12px;margin-top:6px;display:block;}

/* ── Formula panel ────────────────────────────── */
.formula-panel{background:#0f2744;border-radius:var(--radius);padding:24px 28px;margin-bottom:24px;color:white;}
.formula-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.formula-panel-icon{font-size:22px;}
.formula-panel h3{font-family:'Roboto Slab',serif;color:white;font-size:17px;margin:0;}
.formula-row{background:rgba(255,255,255,.08);border-radius:10px;padding:16px 20px;margin-bottom:12px;}
.formula-row:last-child{margin-bottom:0;}
.formula-eq{font-family:'DM Mono',monospace;font-size:14px;color:#fbbf24;display:block;margin-bottom:8px;}
.formula-vars{display:flex;flex-wrap:wrap;gap:6px 18px;}
.formula-var{font-size:13px;color:rgba(255,255,255,.82);}
.formula-step{font-size:13px;color:rgba(255,255,255,.7);margin-top:8px;line-height:1.6;}

/* ── Callouts ─────────────────────────────────── */
.callout-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:3px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.callout-amber{background:rgba(217,119,6,.07);border-left:3px solid #d97706;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-amber .callout-tag{background:#d97706;color:white;}
.callout-red{background:rgba(220,38,38,.06);border-left:3px solid #dc2626;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-red .callout-tag{background:#dc2626;color:white;}
.callout-blue{background:rgba(36,113,163,.07);border-left:3px solid #2471a3;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-blue .callout-tag{background:#2471a3;color:white;}
.callout-purple{background:var(--purple-light);border-left:3px solid var(--purple);color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-purple .callout-tag{background:#8e44ad;color:white;}

/* ── Data table ───────────────────────────────── */
.data-table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border);margin:16px 0;}
.data-table-wrap table{width:100%;border-collapse:collapse;font-size:13.5px;}
.data-table-wrap th{background:#f8fafc;font-weight:700;color:var(--text);padding:10px 14px;text-align:left;border-bottom:1.5px solid var(--border);}
.data-table-wrap td{padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text-muted);vertical-align:top;}
.data-table-wrap tr:last-child td{border-bottom:none;}
.data-table-wrap tr:nth-child(even) td{background:#fafafa;}

/* ── Analogy box ──────────────────────────────── */
.analogy-box{background:linear-gradient(135deg,rgba(26,82,118,.06) 0%,rgba(36,113,163,.04) 100%);border:1.5px solid #2471a3;border-radius:var(--radius);padding:26px 30px;margin:20px 0;}
.analogy-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#2471a3;display:block;margin-bottom:10px;}
.analogy-box h3{font-family:'Roboto Slab',serif;color:#1a5276;font-size:17px;margin-bottom:12px;}
.analogy-box p{color:var(--text-muted);font-size:15px;line-height:1.7;margin-bottom:10px;}
.analogy-box p:last-child{margin-bottom:0;}
.analogy-breakdown{background:rgba(220,38,38,.06);border-left:3px solid #dc2626;border-radius:0 6px 6px 0;padding:12px 16px;margin-top:14px;font-size:13.5px;color:#7f1d1d;line-height:1.65;}
.analogy-breakdown strong{color:#dc2626;}

/* ── Misconceptions box ───────────────────────── */
.misconceptions-box{background:var(--purple-light);border:1.5px solid var(--purple);border-radius:var(--radius);padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{font-family:'Roboto Slab',serif;color:var(--purple);font-size:17px;margin-bottom:14px;}
.misconception-item{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.misconception-item:last-child{margin-bottom:0;}
.misconception-x{width:22px;height:22px;border-radius:50%;background:#8e44ad;color:white;font-size:12px;font-weight:800;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.misconception-item p{font-size:14px;color:#4a1d96;line-height:1.65;margin:0;}

/* ── Worked example ───────────────────────────── */
.worked-example{background:#f8fafc;border:2px solid #1a5276;border-radius:var(--radius);padding:28px 32px;margin:24px 0;}
.we-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#1a5276;display:block;margin-bottom:12px;font-family:'DM Sans',sans-serif;}
.worked-example h4{font-family:'Roboto Slab',serif;color:var(--text);font-size:16px;margin-bottom:14px;}
.worked-step{display:flex;gap:14px;margin:14px 0;}
.step-num{width:28px;height:28px;border-radius:50%;background:#1a5276;color:white;font-size:13px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.step-body{flex:1;}
.step-body p{margin-bottom:6px;color:var(--text-muted);font-size:15px;line-height:1.65;}
.step-body .mono{background:#f1f5f9;padding:10px 14px;border-radius:6px;display:block;margin:8px 0;font-size:14px;color:#1e3a5f;}
.we-answer{background:rgba(26,82,118,.08);border-left:3px solid #1a5276;border-radius:0 8px 8px 0;padding:14px 18px;margin-top:14px;}
.we-answer strong{color:var(--text);}
.we-answer p{color:var(--text-muted);font-size:15px;margin:0;line-height:1.65;}
.reveal-btn{margin-top:14px;padding:8px 18px;border-radius:6px;border:1.5px solid #1a5276;background:white;color:#1a5276;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;}
.reveal-btn:hover{background:#1a5276;color:white;}
.we-step-hidden{display:none;}
.we-step-hidden.revealed{display:flex;}

/* ── Anchor callout ───────────────────────────── */
.anchor-callout{background:linear-gradient(135deg,rgba(217,119,6,.1) 0%,rgba(217,119,6,.05) 100%);border:1.5px solid #d97706;border-radius:var(--radius);padding:24px 28px;margin:24px 0;}
.anchor-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#d97706;display:block;margin-bottom:10px;}
.anchor-callout h3{font-family:'Roboto Slab',serif;color:#92400e;font-size:17px;margin-bottom:10px;}
.anchor-callout p{color:#78350f;font-size:15px;line-height:1.65;margin-bottom:8px;}
.anchor-callout p:last-child{margin-bottom:0;}

/* ── Copy into books ──────────────────────────── */
.collapsible-wrap{background:white;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:20px;overflow:hidden;}
.collapsible-trigger{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;cursor:pointer;user-select:none;}
.collapsible-trigger h3{font-family:'Roboto Slab',serif;font-size:16px;color:var(--text);margin:0;}
.collapsible-arrow{font-size:14px;color:var(--text-light);transition:transform .3s;}
.collapsible-trigger.open .collapsible-arrow{transform:rotate(180deg);}
.collapsible-body{display:none;padding:0 24px 24px;}
.collapsible-body.open{display:block;}
.copy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}
.copy-item{background:#f8fafc;border-radius:var(--radius-sm);padding:16px;}
.copy-item h4{font-family:'Roboto Slab',serif;font-size:13px;color:var(--text);margin-bottom:10px;}
.copy-item ul{padding-left:14px;font-size:13px;color:var(--text-muted);line-height:1.7;}

/* ── Activities ───────────────────────────────── */
.activity{background:white;border:1px solid var(--border);border-radius:var(--radius);padding:28px 32px;margin-bottom:20px;}
.activity-badge{display:inline-block;background:#1a5276;color:white;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:5px 12px;border-radius:100px;margin-bottom:14px;}
.activity h3{font-family:'Roboto Slab',serif;font-size:17px;color:var(--text);margin-bottom:8px;}
.activity-meta{font-size:13px;color:var(--text-light);margin-bottom:18px;}
.drill-item{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--border);}
.drill-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.drill-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#1a5276;color:white;font-size:11px;font-weight:700;margin-right:6px;}

/* ── Answer wrap ──────────────────────────────── */
.answer-wrap{margin-top:10px;}
.answer-textarea{width:100%;border:1.5px solid var(--border);border-radius:8px;padding:12px 14px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--text);resize:vertical;min-height:70px;background:white;transition:border-color .2s;}
.answer-textarea:focus{outline:none;border-color:#1a5276;}
.autosave-indicator{font-size:11px;color:var(--text-light);margin-top:4px;display:block;height:14px;}
.answer-book-placeholder{display:none;background:#f8fafc;border:1.5px dashed var(--border);border-radius:8px;padding:14px;font-size:13.5px;color:var(--text-light);text-align:center;}

/* ── MC section ───────────────────────────────── */
.mc-question{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border);}
.mc-question:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.mc-question p{font-size:15px;color:var(--text);margin-bottom:12px;font-weight:500;}
.mc-option{display:flex;gap:12px;align-items:flex-start;padding:10px 14px;border-radius:8px;border:1.5px solid var(--border);margin-bottom:8px;cursor:pointer;transition:all .2s;}
.mc-option:hover{border-color:#1a5276;background:rgba(26,82,118,.04);}
.mc-option.correct{border-color:#1e8449;background:rgba(30,132,73,.08);}
.mc-option.incorrect{border-color:#dc2626;background:rgba(220,38,38,.06);}
.mc-option.disabled{cursor:default;pointer-events:none;}
.mc-letter{width:24px;height:24px;border-radius:50%;background:#f1f5f9;color:var(--text-muted);font-size:12px;font-weight:700;display:grid;place-items:center;flex-shrink:0;}
.mc-option.correct .mc-letter{background:#1e8449;color:white;}
.mc-option.incorrect .mc-letter{background:#dc2626;color:white;}
.mc-text{font-size:14px;color:var(--text-muted);line-height:1.55;padding-top:3px;}
.mc-feedback{font-size:13px;margin-top:8px;padding:8px 12px;border-radius:6px;display:none;}
.mc-feedback.correct-msg{display:block;background:rgba(30,132,73,.1);color:#065f46;}
.mc-feedback.incorrect-msg{display:block;background:rgba(220,38,38,.08);color:#7f1d1d;}
.question-item{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border);}
.question-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.question-item p{font-size:15px;color:var(--text);margin-bottom:10px;}
.marks{font-size:11px;font-weight:700;color:#1a5276;background:rgba(26,82,118,.08);padding:2px 8px;border-radius:100px;margin-left:6px;}

/* ── Bloom/Band badges ────────────────────────── */
.question-meta{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.bloom-badge,.band-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.bloom-understand{background:#dbeafe;color:#1d4ed8;}
.bloom-apply{background:#d1fae5;color:#065f46;}
.bloom-analyse{background:#ede9fe;color:#5b21b6;}
.bloom-evaluate{background:#fef3c7;color:#92400e;}
.band-3{background:#e0f2fe;color:#0369a1;}
.band-4{background:#d1fae5;color:#065f46;}
.band-5{background:#ede9fe;color:#5b21b6;}
.band-6{background:#fef3c7;color:#92400e;}

/* ── Answers accordion ────────────────────────── */
.answers-section{background:white;border:1px solid var(--border);border-radius:var(--radius);margin:24px 0;overflow:hidden;}
.answers-trigger{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;cursor:pointer;user-select:none;}
.answers-trigger h2{font-family:'Roboto Slab',serif;font-size:18px;color:var(--text);margin:0;}
.answers-trigger .arrow{font-size:14px;color:var(--text-light);transition:transform .3s;}
.answers-trigger.open .arrow{transform:rotate(180deg);}
.answers-body{display:none;padding:0 28px 28px;}
.answers-body.open{display:block;}
.answer-item{margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--border);}
.answer-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.answer-item h4{font-family:'Roboto Slab',serif;font-size:15px;color:#1a5276;margin-bottom:10px;}
.answer-item p{font-size:14px;color:var(--text-muted);line-height:1.7;margin-bottom:8px;}
.answer-item p:last-child{margin-bottom:0;}

/* ── Revisit ──────────────────────────────────── */
.revisit-box{background:linear-gradient(135deg,#0f2744 0%,#1a5276 100%);border-radius:var(--radius);padding:28px 32px;margin:24px 0;}
.revisit-box h3{font-family:'Roboto Slab',serif;color:white;font-size:17px;margin-bottom:12px;}
.revisit-box p,.revisit-box ul{color:rgba(255,255,255,.88);font-size:15px;line-height:1.7;margin-bottom:10px;}
.revisit-box ul{padding-left:18px;}
.revisit-box .answer-textarea{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.3);color:white;}
.revisit-box .answer-textarea::placeholder{color:rgba(255,255,255,.5);}
.revisit-box .autosave-indicator{color:rgba(255,255,255,.6);}

/* ── Completion ───────────────────────────────── */
.completion-wrap{display:flex;align-items:center;gap:16px;background:white;border:1.5px solid var(--border);border-radius:var(--radius);padding:20px 24px;margin-top:24px;cursor:pointer;transition:border-color .2s;}
.completion-wrap.done{border-color:#1e8449;background:rgba(30,132,73,.04);}
.completion-checkbox{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);display:grid;place-items:center;font-size:14px;font-weight:700;color:#1e8449;flex-shrink:0;transition:all .2s;}
.completion-wrap.done .completion-checkbox{background:#1e8449;color:white;border-color:#1e8449;}
.completion-text h4{font-family:'Roboto Slab',serif;font-size:15px;color:var(--text);margin-bottom:2px;}
.completion-text p{font-size:13px;color:var(--text-light);margin:0;}

/* ── Lesson nav ───────────────────────────────── */
.lesson-nav{display:flex;justify-content:space-between;gap:16px;margin-top:32px;flex-wrap:wrap;}
.lesson-nav a{padding:12px 20px;border-radius:8px;border:1.5px solid var(--border);font-size:14px;font-weight:600;color:var(--text-muted);text-decoration:none;transition:all .2s;}
.lesson-nav a:hover{border-color:#1a5276;color:#1a5276;}
.lesson-nav a.next{background:#1a5276;color:white;border-color:#1a5276;}
.lesson-nav a.next:hover{background:#154360;}

/* ── Mode toggle behaviour ────────────────────── */
body.digital-mode .answer-book-placeholder{display:none;}
body.book-mode .answer-textarea{display:none;}
body.book-mode .answer-book-placeholder{display:block;}

/* ── Fade-up ──────────────────────────────────── */
.fade-up{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;}
.fade-up.visible{opacity:1;transform:none;}

/* ── Equation display ─────────────────────────── */
.eq-display{font-family:'DM Mono',monospace;background:#f8fafc;border:1px solid var(--border);border-radius:8px;padding:12px 16px;font-size:14px;color:#1e3a5f;margin:12px 0;display:block;}

/* ── Five-region checklist ────────────────────── */
.checklist-panel{background:white;border:1.5px solid #1a5276;border-radius:var(--radius);padding:24px 28px;margin:20px 0;}
.checklist-panel h3{font-family:'Roboto Slab',serif;color:#1a5276;font-size:16px;margin-bottom:14px;}
.checklist-step{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px;}
.checklist-step:last-child{margin-bottom:0;}
.step-circle{width:26px;height:26px;border-radius:50%;background:#1a5276;color:white;font-size:12px;font-weight:700;display:grid;place-items:center;flex-shrink:0;}
.checklist-step p{font-size:14px;color:var(--text-muted);line-height:1.6;margin:0;padding-top:3px;}

/* ── Image placeholder ────────────────────────── */
.img-placeholder{background:#f1f5f9;border:2px dashed #cbd5e1;border-radius:12px;padding:28px;text-align:center;margin:20px 0;color:#94a3b8;}
.img-placeholder .img-icon{font-size:32px;margin-bottom:8px;}
.img-placeholder p{font-size:13px;margin:0;line-height:1.5;}

@media(max-width:600px){
  .hero{padding:28px 22px;}
  .hero h1{font-size:26px;}
  .card{padding:22px 18px;}
  .worked-example{padding:20px 18px;}
  .hero-top{flex-direction:column;}
  .hero-emoji{display:none;}
  .page{padding:28px 14px 60px;}
}

/* === From lesson18.html === */
body{font-size:16px;}
.page{max-width:860px;}
/* ── M6 Colour tokens ─────────────────────────── */
:root {
  --primary:#c0392b; --primary-light:rgba(192,57,43,.08);
  --secondary:#2471a3; --secondary-light:rgba(36,113,163,.08);
  --accent:#1e8449; --accent-light:rgba(30,132,73,.08);
  --accent-2:#d97706;
  --critical:#8e44ad; --purple:#8e44ad; --purple-light:rgba(142,68,173,.07);
  --consolidation:#1a5276;
  --danger:#dc2626;
  --hero-grad:linear-gradient(135deg,#c0392b 0%,#2471a3 100%);
  --hero-cons:linear-gradient(135deg,#1a5276 0%,#2471a3 100%);
}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
.mono,code{font-family:'DM Mono',monospace;}
/* ── Hero ─────────────────────────────────────── */
.hero{background:var(--hero-grad)!important;color:white;border:none;}
.hero::after{display:none;}
.hero h1,.hero p,.hero-desc{color:white;}
.hero-badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.hbadge{padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.hbadge-red{background:rgba(255,255,255,.22);color:white;}
.hbadge-blue{background:rgba(255,255,255,.15);color:white;}
.hbadge-outline{border:1.5px solid rgba(255,255,255,.45);background:transparent;color:rgba(255,255,255,.9);}
.hero h1{font-size:42px;font-weight:700;line-height:1.15;margin-bottom:12px;letter-spacing:-.5px;}
.hero-desc{font-size:17px;max-width:780px;line-height:1.65;opacity:.92;}
.hero-emoji{font-size:72px;line-height:1;flex-shrink:0;opacity:.85;}
/* ── Fade-up ──────────────────────────────────── */
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
.fade-up.visible{opacity:1;transform:none;}
/* ── Think First ──────────────────────────────── */
.think-first{background:linear-gradient(135deg,#1e3a5f 0%,#1a5276 100%);border-radius:14px;padding:32px;margin-bottom:24px;}
.tf-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;background:rgba(255,255,255,.2);display:inline-block;padding:4px 10px;border-radius:100px;margin-bottom:14px;color:white;font-family:'DM Sans',sans-serif;}
.think-first p{color:rgba(255,255,255,.92);margin-bottom:12px;font-size:15px;}
.think-first strong{color:white;}
.think-first .answer-textarea{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:white;font-size:14px;}
.think-first .answer-textarea::placeholder{color:rgba(255,255,255,.5);}
.think-first .autosave-indicator{color:rgba(255,255,255,.65);}
/* ── Formula panel ────────────────────────────── */
.formula-panel{background:#1e3a5f;border-radius:14px;padding:24px 28px;margin-bottom:24px;color:white;}
.formula-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.formula-panel-icon{font-size:22px;}
.formula-panel h3{font-family:'Roboto Slab',serif;color:white;font-size:17px;margin:0;}
.formula-row{background:rgba(255,255,255,.09);border-radius:10px;padding:16px 20px;margin-bottom:12px;}
.formula-eq{font-family:'DM Mono',monospace;font-size:15px;color:#fbbf24;display:block;margin-bottom:10px;}
.formula-vars{display:flex;flex-wrap:wrap;gap:6px 18px;}
.formula-var{font-size:13px;color:rgba(255,255,255,.85);}
/* ── Worked Example ───────────────────────────── */
.worked-example{background:#f8fafc;border:2px solid #2471a3;border-radius:14px;padding:28px 32px;margin:24px 0;}
.we-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#2471a3;display:block;margin-bottom:12px;font-family:'DM Sans',sans-serif;}
.worked-example h4{font-family:'Roboto Slab',serif;color:#0f172a;font-size:16px;margin-bottom:14px;}
.worked-step{display:flex;gap:14px;margin:14px 0;}
.step-num{width:28px;height:28px;border-radius:50%;background:#2471a3;color:white;font-size:13px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:2px;}
.step-body{flex:1;}
.step-body p{margin-bottom:6px;color:#475569;font-size:15px;line-height:1.65;}
.we-answer{background:rgba(36,113,163,.08);border-left:3px solid #2471a3;border-radius:0 8px 8px 0;padding:14px 18px;margin-top:14px;}
.we-answer p{color:#475569;font-size:15px;margin:0;line-height:1.65;}
/* ── Callouts ─────────────────────────────────── */
.callout-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:3px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.callout-red{background:rgba(220,38,38,.06);border-left:3px solid #dc2626;color:var(--text-muted);padding:14px 18px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;line-height:1.65;display:flex;gap:12px;align-items:flex-start;}
.callout-red .callout-tag{background:#dc2626;color:white;}
.callout-amber .callout-tag{background:#d97706;color:white;}
.callout-blue .callout-tag{background:#2471a3;color:white;}
/* ── Conceptual first ─────────────────────────── */
.conceptual-first{font-size:17px;color:#2471a3;font-style:italic;line-height:1.65;margin-bottom:18px;padding-left:16px;border-left:3px solid #2471a3;}
/* ── Data table ───────────────────────────────── */
.data-table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border);margin:16px 0;}
/* ── Image placeholder ────────────────────────── */
.img-placeholder{background:#f1f5f9;border:2px dashed #cbd5e1;border-radius:12px;padding:32px;text-align:center;margin:20px 0;color:#94a3b8;}
.img-placeholder .img-icon{font-size:36px;margin-bottom:8px;}
.img-placeholder p{font-size:13px;margin:0;line-height:1.5;}
/* ── Anchor callout ───────────────────────────── */
.anchor-callout{background:linear-gradient(135deg,rgba(217,119,6,.1) 0%,rgba(217,119,6,.05) 100%);border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.anchor-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#d97706;display:block;margin-bottom:10px;}
.anchor-callout h3{font-family:'Roboto Slab',serif;color:#92400e;font-size:17px;margin-bottom:10px;}
.anchor-callout p{color:#78350f;font-size:15px;line-height:1.65;margin-bottom:8px;}

/* === From lesson19.html === */
/* M6 Colour tokens and specific styles are loaded from chem-y12-m6-theme.css */
body{font-size:16px;}
.page{max-width:860px;}
.mono, code { font-family: 'DM Mono', monospace; }