/* ===== lesson01.html ===== */
/* ── M7 Colour tokens ─────────────────────────── */
:root {
--primary:#b45309; --primary-mid:#d97706; --primary-light:rgba(217,119,6,.08);
--secondary:#d97706; --secondary-light:rgba(217,119,6,.12);
--accent:#0f766e; --accent-dark:#115e59; --accent-light:rgba(15,118,110,.10);
--accent-bg:#ccfbf1;
--cyan:#0369a1; --cyan-light:rgba(3,105,161,.08); --cyan-bg:#e0f2fe;
--shadow-accent:0 4px 20px rgba(217,119,6,.12);
--h2-color:#b45309;
--tf-bg:#fef3c7; --tf-top:#d97706; --tf-head:#b45309; --tf-border:#fcd34d;
--callout-bg:#ccfbf1; --callout-border:#0f766e; --callout-text:#134e4a;
--anchor-bg:#fef3c7; --anchor-border:#d97706; --anchor-text:#78350f;
--purple:#7c3aed; --purple-light:rgba(124,58,237,.07);
--danger:#dc2626;
--hero-grad:linear-gradient(135deg,#b45309 0%,#0f766e 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-amber{background:rgba(255,255,255,.22);color:white;}
.hbadge-teal{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;}
.hero-top{display:flex;align-items:flex-start;gap:28px;justify-content:space-between;}
.hero-left{flex:1;min-width:0;}
/* ── Anchor callout ───────────────────────────── */
.anchor-callout{background:var(--anchor-bg);border:1.5px solid var(--anchor-border);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:var(--primary-mid);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:#fef3c7;border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{font-family:'Roboto Slab',serif;color:#92400e;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:#b45309;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:#78350f;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;}
/* ── SVG diagram wrap ─────────────────────────── */
.diagram-wrap{margin:24px 0;text-align:center;}
.diagram-wrap svg{border-radius:10px;display:block;margin:0 auto;}
.diagram-caption{font-size:12px;color:#78716c;margin-top:8px;font-style:italic;text-align:center;}
/* ===== lesson02.html ===== */
/* ── M7 Colour tokens ─────────────────────────── */
:root {
--primary:#b45309; --primary-mid:#d97706; --primary-light:rgba(217,119,6,.08);
--secondary:#d97706; --secondary-light:rgba(217,119,6,.12);
--accent:#0f766e; --accent-dark:#115e59; --accent-light:rgba(15,118,110,.10);
--accent-bg:#ccfbf1;
--cyan:#0369a1; --cyan-light:rgba(3,105,161,.08); --cyan-bg:#e0f2fe;
--shadow-accent:0 4px 20px rgba(217,119,6,.12);
--h2-color:#b45309;
--tf-bg:#fef3c7; --tf-top:#d97706; --tf-head:#b45309; --tf-border:#fcd34d;
--callout-bg:#ccfbf1; --callout-border:#0f766e; --callout-text:#134e4a;
--anchor-bg:#fef3c7; --anchor-border:#d97706; --anchor-text:#78350f;
--purple:#7c3aed; --purple-light:rgba(124,58,237,.07);
--danger:#dc2626;
--hero-grad:linear-gradient(135deg,#b45309 0%,#0f766e 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-amber{background:rgba(255,255,255,.22);color:white;}
.hbadge-teal{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:38px;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;}
.hero-top{display:flex;align-items:flex-start;gap:28px;justify-content:space-between;}
.hero-left{flex:1;min-width:0;}
/* ── Anchor callout ───────────────────────────── */
.anchor-callout{background:var(--anchor-bg);border:1.5px solid var(--anchor-border);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:var(--primary-mid);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:#fef3c7;border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{font-family:'Roboto Slab',serif;color:#92400e;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:#b45309;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:#78350f;line-height:1.65;margin:0;}
/* ── SVG diagram wrap ─────────────────────────── */
.diagram-wrap{margin:24px 0;text-align:center;}
.diagram-wrap svg{border-radius:10px;display:block;margin:0 auto;}
.diagram-caption{font-size:12px;color:#78716c;margin-top:8px;font-style:italic;text-align:center;}
/* ── Structural signatures reference panel ────── */
.sig-panel{background:#0f172a;border-radius:14px;padding:24px 28px;margin:24px 0;}
.sig-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.sig-panel-icon{font-size:26px;}
.sig-panel-header h3{font-family:'Roboto Slab',serif;color:#f8fafc;font-size:18px;margin:0;}
.sig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
.sig-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:10px;padding:14px 16px;}
.sig-group{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#d97706;margin-bottom:4px;}
.sig-pattern{font-family:'DM Mono',monospace;font-size:14px;color:#f1f5f9;margin-bottom:4px;}
.sig-note{font-size:12px;color:#94a3b8;line-height:1.5;}
/* ===== lesson03.html ===== */
:root {
--primary:#b45309; --primary-mid:#d97706; --primary-light:rgba(217,119,6,.08);
--secondary:#d97706; --secondary-light:rgba(217,119,6,.12);
--accent:#0f766e; --accent-dark:#115e59; --accent-light:rgba(15,118,110,.10);
--accent-bg:#ccfbf1;
--cyan:#0369a1; --cyan-light:rgba(3,105,161,.08); --cyan-bg:#e0f2fe;
--shadow-accent:0 4px 20px rgba(217,119,6,.12);
--h2-color:#b45309;
--tf-bg:#fef3c7; --tf-top:#d97706; --tf-head:#b45309; --tf-border:#fcd34d;
--callout-bg:#ccfbf1; --callout-border:#0f766e; --callout-text:#134e4a;
--anchor-bg:#fef3c7; --anchor-border:#d97706; --anchor-text:#78350f;
--purple:#7c3aed; --purple-light:rgba(124,58,237,.07);
--danger:#dc2626;
--hero-grad:linear-gradient(135deg,#b45309 0%,#0f766e 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-amber{background:rgba(255,255,255,.22);color:white;}
.hbadge-teal{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:38px;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;}
.hero-top{display:flex;align-items:flex-start;gap:28px;justify-content:space-between;}
.hero-left{flex:1;min-width:0;}
.anchor-callout{background:var(--anchor-bg);border:1.5px solid var(--anchor-border);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:var(--primary-mid);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:#fef3c7;border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{font-family:'Roboto Slab',serif;color:#92400e;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:#b45309;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:#78350f;line-height:1.65;margin:0;}
.diagram-wrap{margin:24px 0;text-align:center;}
.diagram-wrap svg{border-radius:10px;display:block;margin:0 auto;}
.diagram-caption{font-size:12px;color:#78716c;margin-top:8px;font-style:italic;text-align:center;}
/* ===== lesson04.html ===== */
:root {
--primary:#b45309; --primary-light:rgba(217,119,6,.08);
--accent:#0f766e;
}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
.hero{background:linear-gradient(135deg,#b45309 0%,#0f766e 100%)!important;color:white;border:none;}
.hero::after{display:none;}
.hero h1,.hero p{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-amber{background:rgba(255,255,255,.22);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;}
.coming-soon-card{background:#fff;border-radius:16px;box-shadow:0 2px 16px rgba(180,83,9,.10);border:2px dashed #fcd34d;padding:60px 40px;text-align:center;margin:40px 0;}
.coming-soon-card h2{font-size:28px;color:#b45309;margin-bottom:12px;}
.coming-soon-card p{font-size:16px;color:#78716c;max-width:520px;margin:0 auto;}
/* ===== lesson05.html ===== */
:root {
--primary:#b45309; --primary-mid:#d97706; --primary-light:rgba(217,119,6,.08);
--secondary:#d97706; --secondary-light:rgba(217,119,6,.12);
--accent:#0f766e; --accent-dark:#115e59; --accent-light:rgba(15,118,110,.10);
--accent-bg:#ccfbf1;
--cyan:#0369a1; --cyan-light:rgba(3,105,161,.08); --cyan-bg:#e0f2fe;
--shadow-accent:0 4px 20px rgba(217,119,6,.12);
--h2-color:#b45309;
--tf-bg:#fef3c7; --tf-top:#d97706; --tf-head:#b45309; --tf-border:#fcd34d;
--callout-bg:#ccfbf1; --callout-border:#0f766e; --callout-text:#134e4a;
--anchor-bg:#fef3c7; --anchor-border:#d97706; --anchor-text:#78350f;
--purple:#7c3aed; --purple-light:rgba(124,58,237,.07);
--danger:#dc2626;
--hero-grad:linear-gradient(135deg,#b45309 0%,#0f766e 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-amber{background:rgba(255,255,255,.22);color:white;}
.hbadge-teal{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:38px;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;}
.hero-top{display:flex;align-items:flex-start;gap:28px;justify-content:space-between;}
.hero-left{flex:1;min-width:0;}
.diagram-wrap{margin:24px 0;text-align:center;}
.diagram-wrap svg{border-radius:12px;display:block;margin:0 auto;}
.diagram-caption{font-size:12px;color:#78716c;margin-top:8px;font-style:italic;text-align:center;}
.anchor-callout{background:var(--anchor-bg);border:1.5px solid var(--anchor-border);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:var(--primary-mid);display:block;margin-bottom:10px;}
.anchor-callout h3{color:#92400e;font-size:17px;margin-bottom:10px;}
.anchor-callout p{color:#78350f;font-size:15px;line-height:1.65;margin-bottom:8px;}
.reaction-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px;}
.reaction-card{background:white;border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:var(--shadow-sm);}
.reaction-card h3{font-size:18px;margin-bottom:8px;color:var(--primary);}
.reaction-card p{font-size:15px;color:var(--text-muted);}
.reaction-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
.reaction-chip{padding:5px 10px;border-radius:999px;background:var(--primary-light);color:var(--primary);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;}
.reaction-explorer{background:linear-gradient(180deg,#fff7ed 0%,#ffffff 100%);border:1px solid #fed7aa;border-radius:18px;padding:24px;margin:28px 0;box-shadow:var(--shadow-accent);}
.explorer-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px;}
.explorer-tab{border:1px solid var(--border);background:white;border-radius:999px;padding:10px 16px;font-weight:700;font-size:13px;color:var(--text-muted);cursor:pointer;transition:.18s;}
.explorer-tab.active{background:var(--primary);border-color:var(--primary);color:white;box-shadow:0 8px 20px rgba(180,83,9,.18);}
.explorer-panel{display:none;background:white;border:1px solid var(--border);border-radius:16px;padding:22px;}
.explorer-panel.active{display:block;}
.explorer-panel h3{font-size:20px;color:var(--primary);margin-bottom:10px;}
.explorer-panel .eqn{font-family:'DM Mono',monospace;font-size:18px;color:var(--accent-dark);padding:10px 14px;background:var(--accent-light);border-radius:10px;margin:12px 0 14px;display:inline-block;}
.explorer-panel ul{margin:8px 0 0 20px;color:var(--text-muted);}
.process-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px;}
.process-step{background:#fff;border:1px solid var(--border);border-top:4px solid var(--accent);border-radius:14px;padding:16px;}
.process-step .step-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--accent-dark);margin-bottom:8px;}
.process-step h4{font-size:15px;margin-bottom:8px;color:var(--text);}
.process-step p{font-size:14px;color:var(--text-muted);}
.comparison-table td strong{color:var(--text);}
.quick-check{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px;}
.quick-check .mini-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;}
.quick-check .mini-card h4{font-size:15px;color:var(--primary);margin-bottom:8px;}
.quick-check .mini-card p{font-size:14px;color:var(--text-muted);}
.misconceptions-box{background:#fef3c7;border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{color:#92400e;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:#b45309;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:#78350f;line-height:1.65;margin:0;}
@media (max-width: 800px){
.reaction-grid,.process-strip,.quick-check{grid-template-columns:1fr;}
.hero-top{flex-direction:column;}
.hero-emoji{font-size:56px;}
}
/* ===== lesson06.html ===== */
:root {
--primary:#b45309; --primary-mid:#d97706; --primary-light:rgba(217,119,6,.08);
--secondary:#d97706; --secondary-light:rgba(217,119,6,.12);
--accent:#0f766e; --accent-dark:#115e59; --accent-light:rgba(15,118,110,.10);
--accent-bg:#ccfbf1;
--cyan:#0369a1; --cyan-light:rgba(3,105,161,.08); --cyan-bg:#e0f2fe;
--shadow-accent:0 4px 20px rgba(217,119,6,.12);
--h2-color:#b45309;
--tf-bg:#fef3c7; --tf-top:#d97706; --tf-head:#b45309; --tf-border:#fcd34d;
--callout-bg:#ccfbf1; --callout-border:#0f766e; --callout-text:#134e4a;
--anchor-bg:#fef3c7; --anchor-border:#d97706; --anchor-text:#78350f;
--purple:#7c3aed; --purple-light:rgba(124,58,237,.07);
--danger:#dc2626;
--hero-grad:linear-gradient(135deg,#b45309 0%,#0f766e 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-amber{background:rgba(255,255,255,.22);color:white;}
.hbadge-teal{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:38px;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;}
.hero-top{display:flex;align-items:flex-start;gap:28px;justify-content:space-between;}
.hero-left{flex:1;min-width:0;}
.diagram-wrap{margin:24px 0;text-align:center;}
.diagram-wrap svg{border-radius:12px;display:block;margin:0 auto;}
.diagram-caption{font-size:12px;color:#78716c;margin-top:8px;font-style:italic;text-align:center;}
.anchor-callout{background:var(--anchor-bg);border:1.5px solid var(--anchor-border);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:var(--primary-mid);display:block;margin-bottom:10px;}
.anchor-callout h3{color:#92400e;font-size:17px;margin-bottom:10px;}
.anchor-callout p{color:#78350f;font-size:15px;line-height:1.65;margin-bottom:8px;}
.conditions-block{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:18px 20px;margin:16px 0;}
.conditions-block h4{font-size:14px;font-weight:700;color:var(--primary);margin-bottom:10px;text-transform:uppercase;letter-spacing:.4px;}
.conditions-block dl{display:grid;grid-template-columns:100px 1fr;gap:4px 12px;font-size:14px;}
.conditions-block dt{font-weight:700;color:var(--text);}
.conditions-block dd{color:var(--text-muted);margin:0;}
.markov-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0;}
.markov-card{border-radius:14px;padding:18px 20px;border:2px solid;}
.markov-card.major{background:#ccfbf1;border-color:#0f766e;}
.markov-card.minor{background:#fef3c7;border-color:#d97706;}
.markov-card h4{font-size:16px;margin-bottom:8px;}
.markov-card.major h4{color:#0f766e;}
.markov-card.minor h4{color:#92400e;}
.markov-card p{font-size:14px;color:var(--text-muted);margin:0;}
.markov-card .eqn{font-family:'DM Mono',monospace;font-size:15px;display:block;margin:8px 0 4px;}
.comparison-table td strong{color:var(--text);}
.misconceptions-box{background:#fef3c7;border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{color:#92400e;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:#b45309;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:#78350f;line-height:1.65;margin:0;}
@media(max-width:800px){
.hero-top,.markov-grid{flex-direction:column;}
.hero-emoji{font-size:56px;}
.markov-grid{grid-template-columns:1fr;}
}
/* ===== lesson07.html ===== */
:root {
--primary:#b45309; --primary-mid:#d97706; --primary-light:rgba(217,119,6,.08);
--secondary:#d97706; --secondary-light:rgba(217,119,6,.12);
--accent:#0f766e; --accent-dark:#115e59; --accent-light:rgba(15,118,110,.10);
--accent-bg:#ccfbf1;
--cyan:#0369a1; --cyan-light:rgba(3,105,161,.08); --cyan-bg:#e0f2fe;
--shadow-accent:0 4px 20px rgba(217,119,6,.12);
--h2-color:#b45309;
--tf-bg:#fef3c7; --tf-top:#d97706; --tf-head:#b45309; --tf-border:#fcd34d;
--anchor-bg:#fef3c7; --anchor-border:#d97706; --anchor-text:#78350f;
--purple:#7c3aed; --purple-light:rgba(124,58,237,.07);
--danger:#dc2626;
--hero-grad:linear-gradient(135deg,#b45309 0%,#0f766e 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-amber{background:rgba(255,255,255,.22);color:white;}
.hbadge-teal{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:38px;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;}
.hero-top{display:flex;align-items:flex-start;gap:28px;justify-content:space-between;}
.hero-left{flex:1;min-width:0;}
.diagram-wrap{margin:24px 0;text-align:center;}
.diagram-wrap svg{border-radius:12px;display:block;margin:0 auto;}
.diagram-caption{font-size:12px;color:#78716c;margin-top:8px;font-style:italic;text-align:center;}
.anchor-callout{background:var(--anchor-bg);border:1.5px solid var(--anchor-border);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:var(--primary-mid);display:block;margin-bottom:10px;}
.anchor-callout h3{color:#92400e;font-size:17px;margin-bottom:10px;}
.anchor-callout p{color:#78350f;font-size:15px;line-height:1.65;margin-bottom:8px;}
.conditions-block{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:18px 20px;margin:16px 0;}
.conditions-block h4{font-size:14px;font-weight:700;color:var(--primary);margin-bottom:10px;text-transform:uppercase;letter-spacing:.4px;}
.conditions-block dl{display:grid;grid-template-columns:100px 1fr;gap:4px 12px;font-size:14px;}
.conditions-block dt{font-weight:700;color:var(--text);}
.conditions-block dd{color:var(--text-muted);margin:0;}
.step-chain{display:flex;flex-direction:column;gap:0;margin:20px 0;}
.step-chain-item{display:flex;align-items:stretch;gap:0;}
.step-chain-box{background:white;border:1.5px solid var(--border);border-radius:12px;padding:14px 18px;flex:1;}
.step-chain-box h4{font-size:14px;font-weight:700;color:var(--primary);margin-bottom:6px;}
.step-chain-box p{font-size:14px;color:var(--text-muted);margin:0;font-family:'DM Mono',monospace;}
.step-chain-arrow{display:flex;align-items:center;justify-content:center;padding:0 10px;font-size:22px;color:#94a3b8;flex-shrink:0;}
.uv-warning{background:#fef2f2;border:2px solid #dc2626;border-radius:14px;padding:18px 22px;margin:20px 0;}
.uv-warning h4{color:#dc2626;font-size:16px;margin-bottom:8px;}
.uv-warning p{color:#7f1d1d;font-size:14px;line-height:1.7;margin:0;}
.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0;}
.cg-card{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:16px 18px;}
.cg-card h4{font-size:15px;font-weight:700;margin-bottom:10px;}
.cg-card.alkene h4{color:#0f766e;}
.cg-card.alkyne h4{color:#b45309;}
.cg-card ul{margin:0 0 0 16px;font-size:13px;color:var(--text-muted);line-height:1.8;}
.misconceptions-box{background:#fef3c7;border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{color:#92400e;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:#b45309;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:#78350f;line-height:1.65;margin:0;}
@media(max-width:800px){
.hero-top,.comparison-grid{flex-direction:column;}
.hero-emoji{font-size:56px;}
.comparison-grid{grid-template-columns:1fr;}
}
/* ===== lesson08.html ===== */
:root {
--primary:#1e40af; --primary-mid:#2563eb; --primary-light:rgba(37,99,235,.08);
--secondary:#0f766e; --secondary-light:rgba(15,118,110,.10);
--accent:#b45309; --accent-dark:#92400e; --accent-light:rgba(180,83,9,.10);
--accent-bg:#fef3c7;
--cyan:#0369a1; --cyan-light:rgba(3,105,161,.08); --cyan-bg:#e0f2fe;
--shadow-accent:0 4px 20px rgba(30,64,175,.12);
--h2-color:#1e40af;
--tf-bg:#eff6ff; --tf-top:#2563eb; --tf-head:#1e40af; --tf-border:#bfdbfe;
--anchor-bg:#eff6ff; --anchor-border:#3b82f6; --anchor-text:#1e3a8a;
--purple:#7c3aed;
--danger:#dc2626;
--hero-grad:linear-gradient(135deg,#1e3a8a 0%,#0f766e 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-blue{background:rgba(255,255,255,.22);color:white;}
.hbadge-teal{background:rgba(255,255,255,.15);color:white;}
.hbadge-star{background:#fbbf24;color:#78350f;padding:4px 14px;}
.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:-.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;}
.hero-top{display:flex;align-items:flex-start;gap:28px;justify-content:space-between;}
.hero-left{flex:1;min-width:0;}
.diagram-wrap{margin:24px 0;text-align:center;}
.diagram-wrap svg{border-radius:12px;display:block;margin:0 auto;}
.diagram-caption{font-size:12px;color:#78716c;margin-top:8px;font-style:italic;text-align:center;}
.consolidation-note{background:#eff6ff;border:2px solid #3b82f6;border-radius:14px;padding:20px 24px;margin:20px 0;}
.consolidation-note p{font-size:15px;color:#1e3a8a;margin:0;line-height:1.7;}
.consolidation-note strong{color:#1e40af;}
.anchor-callout{background:var(--anchor-bg);border:1.5px solid var(--anchor-border);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:var(--primary-mid);display:block;margin-bottom:10px;}
.anchor-callout h3{color:#1e3a8a;font-size:17px;margin-bottom:10px;}
.anchor-callout p{color:#1e3a8a;font-size:15px;line-height:1.65;margin-bottom:8px;}
.error-card{border-radius:14px;padding:20px 22px;margin:14px 0;border:2px solid;}
.error-card.has-error{background:#fef2f2;border-color:#dc2626;}
.error-card h4{font-size:15px;margin-bottom:10px;}
.error-card.has-error h4{color:#dc2626;}
.error-diagnosis{background:#fff;border:1px solid #fca5a5;border-radius:10px;padding:12px 14px;margin:10px 0;}
.error-diagnosis p{font-size:14px;color:#7f1d1d;margin:0;line-height:1.65;}
.error-fix{background:#f0fdf4;border:1px solid #86efac;border-radius:10px;padding:12px 14px;margin:8px 0;}
.error-fix p{font-size:14px;color:#166534;margin:0;line-height:1.65;}
.conditions-ref-table{width:100%;border-collapse:collapse;font-size:13px;margin:16px 0;}
.conditions-ref-table th{background:#1e3a8a;color:white;padding:10px 12px;text-align:left;font-size:12px;}
.conditions-ref-table td{padding:9px 12px;border-bottom:1px solid #e2e8f0;vertical-align:top;}
.conditions-ref-table tr:nth-child(even) td{background:#f8fafc;}
.conditions-ref-table .reaction-name{font-weight:700;color:#1e40af;}
.crit-list{list-style:none;padding:0;margin:0;}
.crit-list li{display:flex;gap:12px;padding:12px 14px;border-radius:10px;margin-bottom:8px;align-items:flex-start;font-size:14px;line-height:1.7;}
.crit-list li.red{background:#fef2f2;color:#7f1d1d;}
.crit-list li.amber{background:#fefce8;color:#78350f;}
.crit-tag{font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.6px;flex-shrink:0;padding:2px 8px;border-radius:100px;margin-top:2px;}
.crit-tag.red{background:#dc2626;color:white;}
.crit-tag.amber{background:#d97706;color:white;}
.misconceptions-box{background:#fef3c7;border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{color:#92400e;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:#b45309;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:#78350f;line-height:1.65;margin:0;}
.blank-table-wrap{background:#f8fafc;border:1.5px dashed #94a3b8;border-radius:14px;padding:20px;margin:20px 0;}
.blank-table-wrap h4{font-size:15px;color:#1e40af;margin-bottom:12px;}
.blank-table-wrap table{width:100%;border-collapse:collapse;font-size:13px;}
.blank-table-wrap th{background:#e2e8f0;color:#475569;padding:8px 10px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;}
.blank-table-wrap td{padding:8px 10px;border-bottom:1px solid #e2e8f0;}
.blank-table-wrap textarea{width:100%;min-height:36px;font-size:12px;border:1px solid #e2e8f0;border-radius:6px;padding:4px 8px;resize:vertical;}
@media(max-width:800px){
.hero-top{flex-direction:column;}
.hero-emoji{font-size:56px;}
.conditions-ref-table,.blank-table-wrap table{font-size:12px;}
}
/* ===== lesson09.html ===== */
:root {
--primary:#0f766e; --primary-mid:#0d9488; --primary-light:rgba(15,118,110,.08);
--secondary:#b45309; --secondary-light:rgba(180,83,9,.10);
--accent:#7c3aed; --accent-light:rgba(124,58,237,.08);
--cyan:#0369a1; --cyan-light:rgba(3,105,161,.08);
--shadow-accent:0 4px 20px rgba(15,118,110,.12);
--h2-color:#0f766e;
--tf-bg:#f0fdfa; --tf-top:#0d9488; --tf-head:#0f766e; --tf-border:#99f6e4;
--anchor-bg:#f0fdfa; --anchor-border:#0d9488; --anchor-text:#134e4a;
--danger:#dc2626;
--hero-grad:linear-gradient(135deg,#0f766e 0%,#7c3aed 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-teal{background:rgba(255,255,255,.22);color:white;}
.hbadge-purple{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:38px;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;}
.hero-top{display:flex;align-items:flex-start;gap:28px;justify-content:space-between;}
.hero-left{flex:1;min-width:0;}
.diagram-wrap{margin:24px 0;text-align:center;}
.diagram-wrap svg{border-radius:12px;display:block;margin:0 auto;}
.diagram-caption{font-size:12px;color:#78716c;margin-top:8px;font-style:italic;text-align:center;}
.anchor-callout{background:var(--anchor-bg);border:1.5px solid var(--anchor-border);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:var(--primary-mid);display:block;margin-bottom:10px;}
.anchor-callout h3{color:#134e4a;font-size:17px;margin-bottom:10px;}
.anchor-callout p{color:#134e4a;font-size:15px;line-height:1.65;margin-bottom:8px;}
.class-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0;}
.class-card{border-radius:14px;padding:18px;border:2px solid;text-align:center;}
.class-card.primary{background:#f0fdfa;border-color:#0f766e;}
.class-card.secondary{background:#eff6ff;border-color:#3b82f6;}
.class-card.tertiary{background:#fdf4ff;border-color:#a855f7;}
.class-card .badge{display:inline-block;font-size:24px;font-weight:800;margin-bottom:8px;}
.class-card.primary .badge{color:#0f766e;}
.class-card.secondary .badge{color:#3b82f6;}
.class-card.tertiary .badge{color:#a855f7;}
.class-card h4{font-size:15px;margin-bottom:6px;}
.class-card p{font-size:13px;color:var(--text-muted);margin:0;font-family:'DM Mono',monospace;}
.bp-bar-wrap{margin:20px 0;}
.bp-bar{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.bp-label{font-size:13px;color:var(--text);width:160px;flex-shrink:0;font-family:'DM Mono',monospace;}
.bp-track{flex:1;background:#f1f5f9;border-radius:6px;height:22px;overflow:hidden;}
.bp-fill{height:100%;border-radius:6px;display:flex;align-items:center;padding-left:8px;font-size:12px;font-weight:700;color:white;}
.sol-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0;}
.sol-card{border-radius:14px;padding:16px 18px;border:1.5px solid;}
.sol-card.water{background:#eff6ff;border-color:#3b82f6;}
.sol-card.hexane{background:#fef3c7;border-color:#d97706;}
.sol-card h4{font-size:14px;font-weight:700;margin-bottom:10px;}
.sol-card.water h4{color:#1e40af;}
.sol-card.hexane h4{color:#92400e;}
.sol-card ul{margin:0 0 0 16px;font-size:13px;color:var(--text-muted);line-height:1.8;}
.misconceptions-box{background:#fef3c7;border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{color:#92400e;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:#b45309;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:#78350f;line-height:1.65;margin:0;}
@media(max-width:800px){
.hero-top,.class-grid,.sol-grid{flex-direction:column;}
.hero-emoji{font-size:56px;}
.class-grid,.sol-grid{grid-template-columns:1fr;}
}
/* ===== lesson10.html ===== */
:root {
--primary:#1e40af; --primary-mid:#2563eb; --primary-light:rgba(30,64,175,.08);
--secondary:#065f46; --secondary-light:rgba(6,95,70,.10);
--accent:#d97706; --accent-light:rgba(217,119,6,.08);
--cyan:#0891b2; --cyan-light:rgba(8,145,178,.08);
--shadow-accent:0 4px 20px rgba(30,64,175,.12);
--h2-color:#1e40af;
--tf-bg:#eff6ff; --tf-top:#2563eb; --tf-head:#1e40af; --tf-border:#bfdbfe;
--anchor-bg:#ecfdf5; --anchor-border:#059669; --anchor-text:#064e3b;
--danger:#dc2626;
--hero-grad:linear-gradient(135deg,#1e40af 0%,#065f46 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-blue{background:rgba(255,255,255,.22);color:white;}
.hbadge-green{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:38px;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;}
.hero-top{display:flex;align-items:flex-start;gap:28px;justify-content:space-between;}
.hero-left{flex:1;min-width:0;}
.diagram-wrap{margin:24px 0;text-align:center;}
.diagram-wrap svg{border-radius:12px;display:block;margin:0 auto;}
.diagram-caption{font-size:12px;color:#78716c;margin-top:8px;font-style:italic;text-align:center;}
.anchor-callout{background:var(--anchor-bg);border:1.5px solid var(--anchor-border);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:#059669;display:block;margin-bottom:10px;}
.anchor-callout h3{color:#064e3b;font-size:17px;margin-bottom:10px;}
.anchor-callout p{color:#064e3b;font-size:15px;line-height:1.65;margin-bottom:8px;}
/* Method comparison table */
.method-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:13px;}
.method-table th{background:#1e40af;color:white;padding:10px 12px;text-align:left;font-family:'DM Sans',sans-serif;font-weight:600;}
.method-table th:first-child{background:#0f172a;}
.method-table td{padding:9px 12px;border-bottom:1px solid #e2e8f0;line-height:1.5;vertical-align:top;}
.method-table tr:nth-child(even) td{background:#f8fafc;}
.method-table td:first-child{font-weight:600;color:#1e40af;font-size:12px;text-transform:uppercase;letter-spacing:.3px;background:#eff6ff;white-space:nowrap;}
.method-table td.green{color:#065f46;}
.method-table td.amber{color:#92400e;}
.method-table td.blue{color:#1e3a8a;}
/* Route cards */
.route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0;}
.route-card{border-radius:14px;padding:16px;border:2px solid;text-align:center;}
.route-card.industrial{background:#eff6ff;border-color:#1e40af;}
.route-card.substitution{background:#fef3c7;border-color:#d97706;}
.route-card.ferment{background:#ecfdf5;border-color:#065f46;}
.route-card .route-icon{font-size:28px;margin-bottom:8px;}
.route-card h4{font-size:14px;font-weight:700;margin-bottom:6px;}
.route-card.industrial h4{color:#1e40af;}
.route-card.substitution h4{color:#92400e;}
.route-card.ferment h4{color:#065f46;}
.route-card p{font-size:12px;color:#64748b;margin:0;font-family:'DM Mono',monospace;line-height:1.5;}
/* Conditions block */
.conditions-block{background:#f8fafc;border:1.5px solid #cbd5e1;border-radius:12px;padding:16px 20px;margin:16px 0;}
.conditions-block h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#475569;margin-bottom:10px;}
.conditions-block dl{display:grid;grid-template-columns:120px 1fr;gap:4px 12px;margin:0;}
.conditions-block dt{font-size:12px;font-weight:700;color:#334155;text-transform:uppercase;letter-spacing:.3px;padding:4px 0;border-right:2px solid #cbd5e1;}
.conditions-block dd{font-size:13px;color:#334155;margin:0;padding:4px 0;font-family:'DM Mono',monospace;}
/* Reactivity list */
.react-list{display:flex;gap:10px;align-items:center;margin:14px 0;flex-wrap:wrap;}
.react-badge{padding:6px 16px;border-radius:100px;font-size:13px;font-weight:700;font-family:'DM Mono',monospace;}
.react-badge.fast{background:#fef3c7;color:#92400e;border:1.5px solid #d97706;}
.react-badge.mid{background:#f0fdf4;color:#166534;border:1.5px solid #16a34a;}
.react-badge.slow{background:#eff6ff;color:#1e40af;border:1.5px solid #3b82f6;}
.react-arrow{color:#94a3b8;font-size:18px;font-weight:700;}
/* Misconceptions box */
.misconceptions-box{background:#fef3c7;border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{color:#92400e;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:#b45309;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:#78350f;line-height:1.65;margin:0;}
@media(max-width:800px){
.hero-top{flex-direction:column;}
.hero-emoji{font-size:56px;}
.route-grid{grid-template-columns:1fr;}
.method-table{font-size:12px;}
}
/* ===== lesson11.html ===== */
:root {
--primary:#b91c1c; --primary-mid:#dc2626; --primary-light:rgba(185,28,28,.08);
--secondary:#c2410c; --secondary-light:rgba(194,65,12,.10);
--accent:#0369a1; --accent-light:rgba(3,105,161,.08);
--cyan:#0891b2; --cyan-light:rgba(8,145,178,.08);
--shadow-accent:0 4px 20px rgba(185,28,28,.12);
--h2-color:#b91c1c;
--tf-bg:#fff7ed; --tf-top:#c2410c; --tf-head:#9a3412; --tf-border:#fdba74;
--anchor-bg:#fff7ed; --anchor-border:#c2410c; --anchor-text:#7c2d12;
--danger:#dc2626;
--hero-grad:linear-gradient(135deg,#b91c1c 0%,#c2410c 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-orange{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:38px;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;}
.hero-top{display:flex;align-items:flex-start;gap:28px;justify-content:space-between;}
.hero-left{flex:1;min-width:0;}
.diagram-wrap{margin:24px 0;text-align:center;}
.diagram-wrap svg{border-radius:12px;display:block;margin:0 auto;}
.diagram-caption{font-size:12px;color:#78716c;margin-top:8px;font-style:italic;text-align:center;}
.anchor-callout{background:var(--anchor-bg);border:1.5px solid var(--anchor-border);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:#c2410c;display:block;margin-bottom:10px;}
.anchor-callout h3{color:#7c2d12;font-size:17px;margin-bottom:10px;}
.anchor-callout p{color:#7c2d12;font-size:15px;line-height:1.65;margin-bottom:8px;}
/* Calculation chain */
.calc-chain{background:#1e1e2e;border-radius:14px;padding:22px 26px;margin:16px 0;font-family:'DM Mono',monospace;}
.calc-step{margin-bottom:14px;}
.calc-step:last-child{margin-bottom:0;}
.calc-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#94a3b8;display:block;margin-bottom:4px;}
.calc-line{font-size:15px;color:#e2e8f0;line-height:1.7;}
.calc-result{color:#86efac;font-weight:700;}
/* Error sources table */
.error-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13px;}
.error-table th{background:#b91c1c;color:white;padding:9px 12px;text-align:left;font-weight:600;}
.error-table td{padding:8px 12px;border-bottom:1px solid #fecaca;vertical-align:top;line-height:1.5;}
.error-table tr:nth-child(even) td{background:#fff5f5;}
.error-table td:first-child{font-weight:600;color:#9a3412;}
/* ΔHc trend bars */
.trend-bars{margin:20px 0;}
.trend-bar-row{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.trend-label{font-size:13px;width:120px;flex-shrink:0;font-family:'DM Mono',monospace;color:#374151;}
.trend-track{flex:1;background:#f1f5f9;border-radius:6px;height:26px;overflow:hidden;}
.trend-fill{height:100%;border-radius:6px;display:flex;align-items:center;padding:0 10px;font-size:12px;font-weight:700;color:white;}
.trend-val{font-size:12px;color:#6b7280;width:120px;text-align:right;font-family:'DM Mono',monospace;}
/* Fuel comparison table */
.fuel-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13px;}
.fuel-table th{background:#1e3a8a;color:white;padding:9px 12px;text-align:left;font-weight:600;}
.fuel-table th:first-child{background:#0f172a;}
.fuel-table td{padding:8px 12px;border-bottom:1px solid #e2e8f0;vertical-align:top;line-height:1.5;}
.fuel-table tr:nth-child(even) td{background:#f8fafc;}
.fuel-table td:first-child{font-weight:600;color:#1e40af;font-size:12px;background:#eff6ff;text-transform:uppercase;white-space:nowrap;}
.fuel-table td.green{color:#065f46;font-weight:600;}
.fuel-table td.red{color:#b91c1c;}
/* Measurement steps list */
.steps-list{counter-reset:steps;margin:14px 0;}
.steps-list li{counter-increment:steps;display:flex;gap:14px;margin-bottom:12px;align-items:flex-start;}
.steps-list li::before{content:counter(steps);min-width:26px;height:26px;border-radius:50%;background:var(--primary);color:white;font-size:12px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:1px;}
.steps-list li p{font-size:14px;line-height:1.65;margin:0;color:#374151;}
/* Misconceptions box */
.misconceptions-box{background:#fef3c7;border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{color:#92400e;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:#b45309;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:#78350f;line-height:1.65;margin:0;}
@media(max-width:800px){
.hero-top{flex-direction:column;}
.hero-emoji{font-size:56px;}
.fuel-table,.error-table{font-size:12px;}
}
/* ===== lesson12.html ===== */
:root {
--primary:#4338ca; --primary-mid:#6366f1; --primary-light:rgba(67,56,202,.08);
--secondary:#0f766e; --secondary-light:rgba(15,118,110,.10);
--accent:#d97706; --accent-light:rgba(217,119,6,.08);
--cyan:#0891b2; --cyan-light:rgba(8,145,178,.08);
--shadow-accent:0 4px 20px rgba(67,56,202,.12);
--h2-color:#4338ca;
--tf-bg:#f5f3ff; --tf-top:#6366f1; --tf-head:#4338ca; --tf-border:#c4b5fd;
--anchor-bg:#ecfdf5; --anchor-border:#0f766e; --anchor-text:#064e3b;
--danger:#dc2626;
--hero-grad:linear-gradient(135deg,#4338ca 0%,#0f766e 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-indigo{background:rgba(255,255,255,.22);color:white;}
.hbadge-teal{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:38px;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;}
.hero-top{display:flex;align-items:flex-start;gap:28px;justify-content:space-between;}
.hero-left{flex:1;min-width:0;}
.diagram-wrap{margin:24px 0;text-align:center;}
.diagram-wrap svg{border-radius:12px;display:block;margin:0 auto;}
.diagram-caption{font-size:12px;color:#78716c;margin-top:8px;font-style:italic;text-align:center;}
/* Conditions block */
.conditions-block{background:#f8fafc;border:1.5px solid #cbd5e1;border-radius:12px;padding:16px 20px;margin:16px 0;}
.conditions-block h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#475569;margin-bottom:10px;}
.conditions-block dl{display:grid;grid-template-columns:110px 1fr;gap:4px 12px;margin:0;}
.conditions-block dt{font-size:12px;font-weight:700;color:#334155;text-transform:uppercase;letter-spacing:.3px;padding:4px 0;border-right:2px solid #cbd5e1;}
.conditions-block dd{font-size:13px;color:#334155;margin:0;padding:4px 0;font-family:'DM Mono',monospace;}
/* Oxidation summary table */
.oxid-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13px;}
.oxid-table th{background:#4338ca;color:white;padding:9px 12px;text-align:left;font-weight:600;}
.oxid-table th:first-child{background:#312e81;}
.oxid-table td{padding:8px 12px;border-bottom:1px solid #ede9fe;vertical-align:top;line-height:1.5;}
.oxid-table tr:nth-child(even) td{background:#f5f3ff;}
.oxid-table td:first-child{font-weight:600;color:#4338ca;font-size:12px;background:#f5f3ff;text-transform:uppercase;}
/* Colour change badges */
.cc-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:100px;font-size:12px;font-weight:700;font-family:'DM Mono',monospace;}
.cc-orange{background:#fef3c7;color:#92400e;border:1.5px solid #d97706;}
.cc-green{background:#d1fae5;color:#065f46;border:1.5px solid #059669;}
.cc-purple{background:#f5f3ff;color:#4338ca;border:1.5px solid #6366f1;}
.cc-clear{background:#f0f9ff;color:#0369a1;border:1.5px solid #0369a1;}
.cc-stays{background:#fef9c3;color:#713f12;border:1.5px solid #ca8a04;font-style:italic;}
.cc-arrow{color:#94a3b8;}
/* Reaction summary grid (3 reaction types) */
.rxn-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0;}
.rxn-card{border-radius:14px;padding:16px;border:2px solid;text-align:center;}
.rxn-card.dehy{background:#f5f3ff;border-color:#4338ca;}
.rxn-card.subst{background:#fef3c7;border-color:#d97706;}
.rxn-card.oxid{background:#ecfdf5;border-color:#0f766e;}
.rxn-card .rxn-icon{font-size:26px;margin-bottom:8px;}
.rxn-card h4{font-size:14px;font-weight:700;margin-bottom:6px;}
.rxn-card.dehy h4{color:#4338ca;}
.rxn-card.subst h4{color:#92400e;}
.rxn-card.oxid h4{color:#0f766e;}
.rxn-card p{font-size:12px;color:#64748b;margin:0;font-family:'DM Mono',monospace;line-height:1.6;}
/* Diagnostic test table */
.diag-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13px;}
.diag-table th{background:#0f766e;color:white;padding:8px 12px;text-align:left;font-weight:600;}
.diag-table td{padding:8px 12px;border-bottom:1px solid #d1fae5;line-height:1.5;}
.diag-table tr:nth-child(even) td{background:#f0fdfa;}
.diag-table td:first-child{font-family:'DM Mono',monospace;font-size:12px;}
/* Misconceptions box */
.misconceptions-box{background:#fef3c7;border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{color:#92400e;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:#b45309;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:#78350f;line-height:1.65;margin:0;}
@media(max-width:800px){
.hero-top{flex-direction:column;}
.hero-emoji{font-size:56px;}
.rxn-type-grid{grid-template-columns:1fr;}
.oxid-table,.diag-table{font-size:12px;}
}
/* ===== lesson13.html ===== */
:root {
--primary:#6d28d9; --primary-mid:#7c3aed; --primary-light:rgba(109,40,217,.08);
--secondary:#be185d; --secondary-light:rgba(190,24,93,.10);
--accent:#d97706; --accent-light:rgba(217,119,6,.08);
--cyan:#0891b2; --cyan-light:rgba(8,145,178,.08);
--shadow-accent:0 4px 20px rgba(109,40,217,.12);
--h2-color:#6d28d9;
--tf-bg:#fdf4ff; --tf-top:#7c3aed; --tf-head:#6d28d9; --tf-border:#e9d5ff;
--anchor-bg:#fdf4ff; --anchor-border:#7c3aed; --anchor-text:#3b0764;
--danger:#dc2626;
--hero-grad:linear-gradient(135deg,#6d28d9 0%,#be185d 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-violet{background:rgba(255,255,255,.22);color:white;}
.hbadge-rose{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:38px;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;}
.hero-top{display:flex;align-items:flex-start;gap:28px;justify-content:space-between;}
.hero-left{flex:1;min-width:0;}
.diagram-wrap{margin:24px 0;text-align:center;}
.diagram-wrap svg{border-radius:12px;display:block;margin:0 auto;}
.diagram-caption{font-size:12px;color:#78716c;margin-top:8px;font-style:italic;text-align:center;}
/* Test results matrix */
.test-matrix{width:100%;border-collapse:collapse;margin:16px 0;font-size:13px;}
.test-matrix th{padding:10px 12px;text-align:center;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.4px;}
.test-matrix th.col-test{background:#1e1b4b;color:white;text-align:left;}
.test-matrix th.col-ald{background:#7c3aed;color:white;}
.test-matrix th.col-ket{background:#be185d;color:white;}
.test-matrix td{padding:9px 12px;border-bottom:1px solid #ede9fe;vertical-align:middle;line-height:1.5;}
.test-matrix tr:nth-child(even) td{background:#fdf4ff;}
.test-matrix td:first-child{font-weight:600;color:#4c1d95;font-size:12px;}
.result-pos{background:#d1fae5;color:#065f46;border-radius:100px;padding:3px 10px;font-size:12px;font-weight:700;display:inline-block;white-space:nowrap;}
.result-neg{background:#f3f4f6;color:#6b7280;border-radius:100px;padding:3px 10px;font-size:12px;font-weight:700;display:inline-block;white-space:nowrap;}
/* Comparison feature table */
.feat-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13px;}
.feat-table th{background:#4c1d95;color:white;padding:9px 12px;text-align:left;font-weight:600;}
.feat-table th:first-child{background:#1e1b4b;}
.feat-table td{padding:8px 12px;border-bottom:1px solid #ede9fe;vertical-align:top;line-height:1.5;}
.feat-table tr:nth-child(even) td{background:#fdf4ff;}
.feat-table td:first-child{font-weight:600;color:#6d28d9;font-size:12px;background:#fdf4ff;text-transform:uppercase;}
/* BP ladder */
.bp-ladder{margin:20px 0;}
.bp-rung{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.bp-compound{width:140px;flex-shrink:0;font-size:13px;font-weight:700;color:#1e1b4b;font-family:'DM Mono',monospace;}
.bp-bar-track{flex:1;background:#f1f5f9;border-radius:6px;height:28px;overflow:hidden;}
.bp-bar-fill{height:100%;border-radius:6px;display:flex;align-items:center;padding:0 10px;font-size:12px;font-weight:700;color:white;}
.bp-imf{font-size:11px;color:#64748b;width:160px;flex-shrink:0;}
/* Misconceptions box */
.misconceptions-box{background:#fef3c7;border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{color:#92400e;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:#b45309;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:#78350f;line-height:1.65;margin:0;}
@media(max-width:800px){
.hero-top{flex-direction:column;}
.hero-emoji{font-size:56px;}
.test-matrix,.feat-table{font-size:12px;}
.bp-imf{display:none;}
}
/* ===== lesson14.html ===== */
:root {
--primary:#047857; --primary-mid:#059669; --primary-light:rgba(4,120,87,.08);
--secondary:#b45309; --secondary-light:rgba(180,83,9,.10);
--accent:#7c3aed; --accent-light:rgba(124,58,237,.08);
--cyan:#0369a1; --cyan-light:rgba(3,105,161,.08);
--shadow-accent:0 4px 20px rgba(4,120,87,.12);
--h2-color:#047857;
--tf-bg:#ecfdf5; --tf-top:#059669; --tf-head:#047857; --tf-border:#a7f3d0;
--anchor-bg:#ecfdf5; --anchor-border:#059669; --anchor-text:#064e3b;
--danger:#dc2626;
--hero-grad:linear-gradient(135deg,#047857 0%,#b45309 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-emerald{background:rgba(255,255,255,.22);color:white;}
.hbadge-amber{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:38px;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;}
.hero-top{display:flex;align-items:flex-start;gap:28px;justify-content:space-between;}
.hero-left{flex:1;min-width:0;}
.diagram-wrap{margin:24px 0;text-align:center;}
.diagram-wrap svg{border-radius:12px;display:block;margin:0 auto;}
.diagram-caption{font-size:12px;color:#78716c;margin-top:8px;font-style:italic;text-align:center;}
/* Reaction equation display */
.rxn-block{background:#1e1e1e;border-radius:10px;padding:18px 22px;margin:14px 0;font-family:'DM Mono',monospace;font-size:13.5px;line-height:2.1;color:#e5e7eb;overflow-x:auto;}
.rxn-block .rxn-label{color:#6ee7b7;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:4px;}
.rxn-block .rxn-obs{color:#fcd34d;font-size:12px;font-style:italic;}
/* Diagnostic test matrix */
.diag-matrix{width:100%;border-collapse:collapse;margin:16px 0;font-size:13px;}
.diag-matrix th{padding:10px 12px;text-align:center;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;}
.diag-matrix th.col-class{background:#064e3b;color:white;text-align:left;}
.diag-matrix th.col-naoh{background:#047857;color:white;}
.diag-matrix th.col-na2co3{background:#0369a1;color:white;}
.diag-matrix th.col-nahco3{background:#b45309;color:white;}
.diag-matrix td{padding:9px 12px;border-bottom:1px solid #d1fae5;vertical-align:middle;line-height:1.5;}
.diag-matrix tr:nth-child(even) td{background:#f0fdf4;}
.diag-matrix td:first-child{font-weight:600;color:#064e3b;font-size:12px;}
.diag-pos{background:#d1fae5;color:#065f46;border-radius:100px;padding:3px 10px;font-size:12px;font-weight:700;display:inline-block;white-space:nowrap;}
.diag-neg{background:#f3f4f6;color:#6b7280;border-radius:100px;padding:3px 10px;font-size:12px;font-weight:700;display:inline-block;white-space:nowrap;}
/* pKa ladder */
.pka-ladder{margin:20px 0;}
.pka-rung{display:flex;align-items:center;gap:14px;margin-bottom:11px;}
.pka-compound{width:165px;flex-shrink:0;font-size:13px;font-weight:700;color:#1a3a2a;font-family:'DM Mono',monospace;}
.pka-bar-track{flex:1;background:#f1f5f9;border-radius:6px;height:28px;overflow:hidden;}
.pka-bar-fill{height:100%;border-radius:6px;display:flex;align-items:center;padding:0 10px;font-size:12px;font-weight:700;color:white;}
.pka-note{font-size:11px;color:#64748b;width:130px;flex-shrink:0;line-height:1.4;}
/* Resonance display */
.resonance-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin:16px 0;}
.res-card{border-radius:12px;padding:16px 14px;border:1.5px solid transparent;}
.res-card.acid-card{background:#ecfdf5;border-color:#a7f3d0;}
.res-card.phenol-card{background:#eff6ff;border-color:#bfdbfe;}
.res-card.alcohol-card{background:#fef9c3;border-color:#fde68a;}
.res-card h4{font-size:13px;font-weight:700;margin-bottom:8px;}
.res-card h4.acid-head{color:#047857;}
.res-card h4.phenol-head{color:#1d4ed8;}
.res-card h4.alcohol-head{color:#92400e;}
.res-card .mono{font-size:12px;line-height:1.8;display:block;}
.res-card .pka-tag{display:inline-block;background:white;border-radius:100px;padding:2px 10px;font-size:11px;font-weight:700;margin-top:6px;}
.res-card .stab-tag{font-size:11px;font-weight:700;display:block;margin-top:4px;}
/* Misconceptions box */
.misconceptions-box{background:#fef3c7;border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{color:#92400e;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:#b45309;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:#78350f;line-height:1.65;margin:0;}
@media(max-width:800px){
.hero-top{flex-direction:column;}
.hero-emoji{font-size:56px;}
.resonance-grid{grid-template-columns:1fr;}
.diag-matrix{font-size:12px;}
.pka-note{display:none;}
}
/* ===== lesson15.html ===== */
:root {
--primary:#db2777; --primary-mid:#ec4899; --primary-light:rgba(219,39,119,.08);
--secondary:#0891b2; --secondary-light:rgba(8,145,178,.10);
--accent:#059669; --accent-light:rgba(5,150,105,.08);
--cyan:#7c3aed; --cyan-light:rgba(124,58,237,.08);
--shadow-accent:0 4px 20px rgba(219,39,119,.12);
--h2-color:#db2777;
--tf-bg:#fdf2f8; --tf-top:#ec4899; --tf-head:#db2777; --tf-border:#fbcfe8;
--anchor-bg:#fdf2f8; --anchor-border:#ec4899; --anchor-text:#831843;
--danger:#dc2626;
--hero-grad:linear-gradient(135deg,#db2777 0%,#0891b2 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-pink{background:rgba(255,255,255,.22);color:white;}
.hbadge-cyan{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:38px;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;}
.hero-top{display:flex;align-items:flex-start;gap:28px;justify-content:space-between;}
.hero-left{flex:1;min-width:0;}
.diagram-wrap{margin:24px 0;text-align:center;}
.diagram-wrap svg{border-radius:12px;display:block;margin:0 auto;}
.diagram-caption{font-size:12px;color:#78716c;margin-top:8px;font-style:italic;text-align:center;}
/* Naming demo */
.naming-card{background:#fdf2f8;border:1.5px solid #fbcfe8;border-radius:14px;padding:20px 24px;margin:14px 0;}
.naming-card h4{color:#db2777;font-size:14px;margin-bottom:12px;}
.naming-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.naming-formula{font-family:'DM Mono',monospace;font-size:14px;font-weight:700;color:#1e1e1e;min-width:200px;}
.naming-arrow{color:#db2777;font-weight:700;font-size:16px;}
.naming-name{font-size:14px;font-weight:700;color:#db2777;}
.naming-aroma{font-size:12px;color:#6b7280;font-style:italic;}
/* Aroma table */
.aroma-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13px;}
.aroma-table th{background:#db2777;color:white;padding:9px 12px;text-align:left;font-weight:600;}
.aroma-table th:first-child{background:#831843;}
.aroma-table td{padding:8px 12px;border-bottom:1px solid #fce7f3;vertical-align:top;}
.aroma-table tr:nth-child(even) td{background:#fdf2f8;}
.aroma-table td:first-child{font-weight:700;font-family:'DM Mono',monospace;color:#db2777;font-size:12px;}
/* BP comparison bar chart */
.bp-ladder{margin:20px 0;}
.bp-rung{display:flex;align-items:center;gap:14px;margin-bottom:11px;}
.bp-compound{width:175px;flex-shrink:0;font-size:13px;font-weight:700;color:#1a1a2e;font-family:'DM Mono',monospace;}
.bp-bar-track{flex:1;background:#f1f5f9;border-radius:6px;height:28px;overflow:hidden;}
.bp-bar-fill{height:100%;border-radius:6px;display:flex;align-items:center;padding:0 10px;font-size:12px;font-weight:700;color:white;}
.bp-note{font-size:11px;color:#64748b;width:140px;flex-shrink:0;line-height:1.4;}
/* Conditions block */
.conditions-block{background:#1e1e1e;border-radius:12px;padding:20px 24px;margin:16px 0;font-family:'DM Mono',monospace;font-size:13px;line-height:2;color:#e5e7eb;}
.conditions-block .cond-head{color:#f9a8d4;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;display:block;margin-bottom:6px;}
.conditions-block .cond-key{color:#7dd3fc;}
.conditions-block .cond-val{color:#e5e7eb;}
/* Isolation steps */
.iso-steps{margin:16px 0;}
.iso-step{display:flex;gap:16px;align-items:flex-start;margin-bottom:14px;padding:14px 16px;background:#f0fdf4;border-left:4px solid #059669;border-radius:0 10px 10px 0;}
.iso-num{width:28px;height:28px;border-radius:50%;background:#059669;color:white;font-weight:800;font-size:13px;display:grid;place-items:center;flex-shrink:0;margin-top:1px;}
.iso-body{flex:1;}
.iso-body strong{color:#064e3b;font-size:13px;display:block;margin-bottom:4px;}
.iso-body p{font-size:13px;color:#374151;margin:0;line-height:1.6;}
/* Le Chatelier diagram */
.lechat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0;}
.lechat-card{border-radius:12px;padding:14px 16px;}
.lechat-card.shift-right{background:#d1fae5;border:1.5px solid #6ee7b7;}
.lechat-card.shift-left{background:#fee2e2;border:1.5px solid #fca5a5;}
.lechat-card h4{font-size:13px;font-weight:700;margin-bottom:8px;}
.lechat-card.shift-right h4{color:#065f46;}
.lechat-card.shift-left h4{color:#991b1b;}
.lechat-card p{font-size:12.5px;line-height:1.6;margin:0;color:#374151;}
/* Misconceptions box */
.misconceptions-box{background:#fef3c7;border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{color:#92400e;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:#b45309;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:#78350f;line-height:1.65;margin:0;}
@media(max-width:800px){
.hero-top{flex-direction:column;}
.hero-emoji{font-size:56px;}
.lechat-grid{grid-template-columns:1fr;}
.naming-row{flex-direction:column;align-items:flex-start;}
.bp-note{display:none;}
}
/* ===== lesson16.html ===== */
:root {
--primary:#0369a1; --primary-mid:#0284c7; --primary-light:rgba(3,105,161,.08);
--secondary:#7c3aed; --secondary-light:rgba(124,58,237,.10);
--accent:#059669; --accent-light:rgba(5,150,105,.08);
--cyan:#b45309; --cyan-light:rgba(180,83,9,.08);
--shadow-accent:0 4px 20px rgba(3,105,161,.12);
--h2-color:#0369a1;
--tf-bg:#f0f9ff; --tf-top:#0284c7; --tf-head:#0369a1; --tf-border:#bae6fd;
--anchor-bg:#f0f9ff; --anchor-border:#0284c7; --anchor-text:#0c4a6e;
--danger:#dc2626;
--hero-grad:linear-gradient(135deg,#0369a1 0%,#7c3aed 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-blue{background:rgba(255,255,255,.22);color:white;}
.hbadge-violet{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:38px;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;}
.hero-top{display:flex;align-items:flex-start;gap:28px;justify-content:space-between;}
.hero-left{flex:1;min-width:0;}
.diagram-wrap{margin:24px 0;text-align:center;}
.diagram-wrap svg{border-radius:12px;display:block;margin:0 auto;}
.diagram-caption{font-size:12px;color:#78716c;margin-top:8px;font-style:italic;text-align:center;}
/* Amine classification grid */
.class-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0;}
.class-card{border-radius:12px;padding:16px 14px;border:1.5px solid transparent;text-align:center;}
.class-card.primary{background:#f0f9ff;border-color:#bae6fd;}
.class-card.secondary{background:#faf5ff;border-color:#ddd6fe;}
.class-card.tertiary{background:#f5f3ff;border-color:#c4b5fd;}
.class-card h4{font-size:13px;font-weight:700;margin-bottom:6px;}
.class-card.primary h4{color:#0369a1;}
.class-card.secondary h4{color:#7c3aed;}
.class-card.tertiary h4{color:#5b21b6;}
.class-card .mono{font-size:12.5px;line-height:1.9;display:block;color:#1e1e1e;}
.class-card .tag{display:inline-block;font-size:11px;font-weight:700;border-radius:100px;padding:2px 9px;margin-top:6px;}
.class-card.primary .tag{background:#e0f2fe;color:#0369a1;}
.class-card.secondary .tag{background:#ede9fe;color:#7c3aed;}
.class-card.tertiary .tag{background:#ede9fe;color:#5b21b6;}
/* BP mega-ladder */
.bp-mega{margin:20px 0;}
.bp-rung{display:flex;align-items:center;gap:12px;margin-bottom:11px;}
.bp-label{width:185px;flex-shrink:0;font-size:12.5px;font-weight:700;color:#1e1e1e;font-family:'DM Mono',monospace;}
.bp-track{flex:1;background:#f1f5f9;border-radius:6px;height:28px;overflow:hidden;}
.bp-fill{height:100%;border-radius:6px;display:flex;align-items:center;padding:0 10px;font-size:12px;font-weight:700;color:white;}
.bp-imf{font-size:11px;color:#64748b;width:155px;flex-shrink:0;line-height:1.4;}
/* Reaction equations block */
.rxn-block{background:#1e1e1e;border-radius:10px;padding:18px 22px;margin:14px 0;font-family:'DM Mono',monospace;font-size:13px;line-height:2.1;color:#e5e7eb;overflow-x:auto;}
.rxn-block .rxn-label{color:#93c5fd;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:4px;}
.rxn-block .rxn-obs{color:#fcd34d;font-size:12px;font-style:italic;}
/* Misconceptions box */
.misconceptions-box{background:#fef3c7;border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{color:#92400e;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:#b45309;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:#78350f;line-height:1.65;margin:0;}
@media(max-width:800px){
.hero-top{flex-direction:column;}
.hero-emoji{font-size:56px;}
.class-grid{grid-template-columns:1fr;}
.bp-imf{display:none;}
}
/* ===== lesson17.html ===== */
:root {
--primary:#0f766e; --primary-mid:#0d9488; --primary-light:rgba(15,118,110,.08);
--secondary:#c2410c; --secondary-light:rgba(194,65,12,.10);
--accent:#7c3aed; --accent-light:rgba(124,58,237,.08);
--cyan:#0369a1; --cyan-light:rgba(3,105,161,.08);
--shadow-accent:0 4px 20px rgba(15,118,110,.12);
--h2-color:#0f766e;
--tf-bg:#f0fdfa; --tf-top:#0d9488; --tf-head:#0f766e; --tf-border:#99f6e4;
--anchor-bg:#f0fdfa; --anchor-border:#0d9488; --anchor-text:#134e4a;
--danger:#dc2626;
--hero-grad:linear-gradient(135deg,#0f766e 0%,#c2410c 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-teal{background:rgba(255,255,255,.22);color:white;}
.hbadge-orange{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:38px;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;}
.hero-top{display:flex;align-items:flex-start;gap:28px;justify-content:space-between;}
.hero-left{flex:1;min-width:0;}
.diagram-wrap{margin:24px 0;text-align:center;}
.diagram-wrap svg{border-radius:12px;display:block;margin:0 auto;}
.diagram-caption{font-size:12px;color:#78716c;margin-top:8px;font-style:italic;text-align:center;}
/* Soap molecule visual */
.soap-mol{display:flex;align-items:center;gap:0;margin:16px 0;}
.soap-tail{height:18px;background:linear-gradient(90deg,#fed7aa,#fb923c);border-radius:9px 0 0 9px;display:flex;align-items:center;padding:0 10px;font-size:11px;font-weight:700;color:#7c2d12;}
.soap-head{width:38px;height:38px;border-radius:50%;background:#0f766e;color:white;display:grid;place-items:center;font-size:10px;font-weight:700;flex-shrink:0;text-align:center;line-height:1.2;}
.soap-labels{display:flex;justify-content:space-between;font-size:11px;color:#6b7280;margin-top:4px;}
/* Steps for cleaning */
.clean-steps{margin:16px 0;}
.clean-step{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px;padding:12px 16px;background:#f0fdfa;border-left:4px solid #0d9488;border-radius:0 10px 10px 0;}
.cs-num{width:26px;height:26px;border-radius:50%;background:#0f766e;color:white;font-weight:800;font-size:12px;display:grid;place-items:center;flex-shrink:0;margin-top:1px;}
.cs-body{flex:1;font-size:13px;color:#374151;line-height:1.6;}
.cs-body strong{color:#0f766e;}
/* Conditions block */
.conditions-block{background:#1e1e1e;border-radius:12px;padding:18px 24px;margin:16px 0;font-family:'DM Mono',monospace;font-size:13px;line-height:2;color:#e5e7eb;}
.conditions-block .cond-head{color:#5eead4;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;display:block;margin-bottom:6px;}
.conditions-block .cond-key{color:#7dd3fc;}
.conditions-block .cond-val{color:#e5e7eb;}
/* Rxn block */
.rxn-block{background:#1e1e1e;border-radius:10px;padding:16px 20px;margin:12px 0;font-family:'DM Mono',monospace;font-size:13px;line-height:2;color:#e5e7eb;overflow-x:auto;}
.rxn-block .rxn-label{color:#5eead4;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:4px;}
.rxn-block .rxn-obs{color:#fcd34d;font-size:12px;font-style:italic;}
/* Comparison table */
.comp-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13px;}
.comp-table th{padding:9px 12px;text-align:left;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.4px;}
.comp-table th.col-feat{background:#134e4a;color:white;}
.comp-table th.col-soap{background:#0f766e;color:white;}
.comp-table th.col-det{background:#c2410c;color:white;}
.comp-table td{padding:8px 12px;border-bottom:1px solid #ccfbf1;vertical-align:top;line-height:1.5;font-size:12.5px;}
.comp-table tr:nth-child(even) td{background:#f0fdfa;}
.comp-table td:first-child{font-weight:600;color:#0f766e;}
/* Hard water diagram labels */
.hwater-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0;}
.hwater-card{border-radius:12px;padding:16px 18px;border:1.5px solid transparent;}
.hwater-card.soap-side{background:#fff7ed;border-color:#fed7aa;}
.hwater-card.det-side{background:#f0fdfa;border-color:#99f6e4;}
.hwater-card h4{font-size:13px;font-weight:700;margin-bottom:8px;}
.hwater-card.soap-side h4{color:#c2410c;}
.hwater-card.det-side h4{color:#0f766e;}
.hwater-card p{font-size:12.5px;line-height:1.65;color:#374151;margin:0;}
.hwater-card .mono{font-size:12px;display:block;margin:4px 0;}
.result-scum{display:inline-block;background:#fee2e2;color:#991b1b;border-radius:100px;padding:2px 10px;font-size:11px;font-weight:700;}
.result-ok{display:inline-block;background:#d1fae5;color:#065f46;border-radius:100px;padding:2px 10px;font-size:11px;font-weight:700;}
/* Misconceptions box */
.misconceptions-box{background:#fef3c7;border:1.5px solid #d97706;border-radius:14px;padding:24px 28px;margin:24px 0;}
.misconceptions-box h3{color:#92400e;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:#b45309;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:#78350f;line-height:1.65;margin:0;}
@media(max-width:800px){
.hero-top{flex-direction:column;}
.hero-emoji{font-size:56px;}
.hwater-grid{grid-template-columns:1fr;}
.comp-table{font-size:12px;}
}
/* ===== lesson18.html ===== */
:root{
--primary:#4f46e5;
--secondary:#059669;
--accent:#1e8449;
--accent-2:#d97706;
--critical:#8e44ad;
--hero-grad:linear-gradient(135deg,#4f46e5 0%,#059669 100%);
}
body{font-size:16px;}
.page{max-width:860px;}
/* pKa ladder */
.pka-ladder-wrap{overflow-x:auto;margin:1rem 0;}
/* Diagnostic table */
.diag-table{width:100%;border-collapse:collapse;font-size:0.85rem;margin:1rem 0;}
.diag-table th{background:var(--primary);color:#fff;padding:6px 8px;text-align:left;}
.diag-table td{padding:5px 8px;border:1px solid #d1d5db;}
.diag-table tr:nth-child(even) td{background:#f0f0ff;}
.react-yes{background:#d1fae5!important;color:#065f46;font-weight:600;}
.react-no{background:#fee2e2!important;color:#991b1b;}
.react-maybe{background:#fef3c7!important;color:#92400e;}
/* pKb ladder */
.pkb-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:0.5rem;margin:1rem 0;}
.pkb-card{border-radius:8px;padding:10px;text-align:center;font-size:0.85rem;}
.pkb-card.strongest{background:#d1fae5;border:2px solid #059669;}
.pkb-card.mid{background:#fef3c7;border:2px solid #d97706;}
.pkb-card.weak{background:#fee2e2;border:2px solid #dc2626;}
.pkb-card.none{background:#f3f4f6;border:2px solid #9ca3af;}
.pkb-label{font-weight:700;font-size:1rem;}
.pkb-val{font-family:'DM Mono',monospace;font-size:0.75rem;margin-top:4px;}
/* Reaction direction */
.rxn-block{background:#1e1e2e;color:#cdd6f4;border-radius:8px;padding:12px 16px;font-family:'DM Mono',monospace;font-size:0.85rem;margin:0.5rem 0;overflow-x:auto;}
.rxn-block .rxn-yes{color:#a6e3a1;}
.rxn-block .rxn-no{color:#f38ba8;}
/* Worked example steps */
.worked-step{display:flex;gap:12px;margin:0.6rem 0;}
.step-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;}
/* Callouts */
.callout-amber{background:#fffbeb;border-left:4px solid #d97706;padding:10px 14px;border-radius:0 6px 6px 0;margin:0.75rem 0;font-size:0.9rem;}
.callout-red{background:#fff1f2;border-left:4px solid #e11d48;padding:10px 14px;border-radius:0 6px 6px 0;margin:0.75rem 0;font-size:0.9rem;}
.callout-blue{background:#eff6ff;border-left:4px solid #2563eb;padding:10px 14px;border-radius:0 6px 6px 0;margin:0.75rem 0;font-size:0.9rem;}
/* Conjugate base comparison */
.conj-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.75rem;margin:1rem 0;}
.conj-card{border-radius:8px;padding:12px;text-align:center;font-size:0.82rem;}
.conj-card.high-stab{background:#d1fae5;border:2px solid #059669;}
.conj-card.mid-stab{background:#fef3c7;border:2px solid #d97706;}
.conj-card.low-stab{background:#fee2e2;border:2px solid #dc2626;}
.conj-name{font-weight:700;font-size:0.95rem;margin-bottom:4px;}
.conj-pka{font-family:'DM Mono',monospace;font-size:0.8rem;margin-top:4px;}
/* Diagnostic flowchart steps */
.flow-steps{margin:1rem 0;}
.flow-step{display:flex;align-items:flex-start;gap:12px;margin:0.5rem 0;}
.flow-q{background:var(--primary);color:#fff;border-radius:6px;padding:6px 10px;font-size:0.82rem;font-weight:600;flex-shrink:0;min-width:44px;text-align:center;}
.flow-body{font-size:0.88rem;}
.flow-yes{color:#065f46;font-weight:700;}
.flow-no{color:#991b1b;font-weight:600;}
/* Summary comparison table */
.acid-summary{width:100%;border-collapse:collapse;font-size:0.85rem;margin:1rem 0;}
.acid-summary th{background:var(--secondary);color:#fff;padding:6px 8px;text-align:left;}
.acid-summary td{padding:5px 8px;border:1px solid #d1d5db;}
.acid-summary tr:nth-child(even) td{background:#f0fdf4;}
/* MC */
.mc-question{background:#f8fafc;border:2px solid #e2e8f0;border-radius:10px;padding:16px;margin:1rem 0;}
.mc-question.correct{border-color:#22c55e;background:#f0fdf4;}
.mc-question.incorrect{border-color:#ef4444;background:#fff1f2;}
.mc-options{list-style:none;padding:0;margin:0.5rem 0;}
.mc-options li{margin:0.3rem 0;}
.mc-options button{width:100%;text-align:left;background:#fff;border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;cursor:pointer;font-size:0.9rem;transition:background 0.15s;}
.mc-options button:hover{background:#e0e7ff;}
.mc-feedback{margin-top:8px;font-size:0.88rem;padding:8px;border-radius:6px;display:none;}
/* Short answer */
.sa-question{background:#f8fafc;border-left:4px solid var(--primary);border-radius:0 8px 8px 0;padding:14px;margin:1rem 0;}
.sa-question textarea{width:100%;min-height:90px;border:1px solid #cbd5e1;border-radius:6px;padding:8px;font-size:0.9rem;resize:vertical;box-sizing:border-box;}
/* Answers accordion */
.answers-accordion{background:#f0fdf4;border:2px solid #059669;border-radius:10px;margin:1rem 0;}
.answers-trigger{width:100%;background:none;border:none;padding:14px;font-weight:700;font-size:1rem;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
.answers-body{padding:0 14px 14px;}
.ans-item{margin:0.75rem 0;padding:10px;background:#fff;border-radius:6px;font-size:0.88rem;}
.ans-q{font-weight:700;margin-bottom:4px;}
/* Collapsible */
.collapsible-trigger{width:100%;background:none;border:none;padding:12px;font-weight:700;text-align:left;cursor:pointer;display:flex;justify-content:space-between;border-radius:8px;background:#f1f5f9;margin-top:0.5rem;}
.collapsible-body{padding:10px 14px;border:1px solid #e2e8f0;border-radius:0 0 8px 8px;display:none;}
.collapsible-body.open{display:block;}
/* Completion */
.completion-box{background:linear-gradient(135deg,#4f46e5,#059669);color:#fff;border-radius:12px;padding:20px;text-align:center;margin:2rem 0;}
.completion-box label{display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;font-size:1.1rem;font-weight:700;}
/* Lesson nav */
.lesson-nav{display:flex;justify-content:space-between;margin:2rem 0;gap:1rem;flex-wrap:wrap;}
.nav-btn{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:0.9rem;cursor:pointer;text-decoration:none;display:inline-block;}
.nav-btn:hover{opacity:0.85;}
/* Section labels */
.section-label{font-size:0.78rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--primary);border-bottom:2px solid var(--primary);padding-bottom:4px;margin:2rem 0 1rem;}
/* Intentions grid */
.intentions-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.75rem;margin:1rem 0;}
.intention-card{border-radius:8px;padding:12px;}
.intention-card.know{background:#e0e7ff;border-top:3px solid #4f46e5;}
.intention-card.understand{background:#d1fae5;border-top:3px solid #059669;}
.intention-card.can-do{background:#fef3c7;border-top:3px solid #d97706;}
.intention-card h4{margin:0 0 6px;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.06em;}
.intention-card ul{margin:0;padding-left:16px;font-size:0.85rem;}
/* Think First */
.think-first{background:linear-gradient(135deg,#4f46e5 0%,#059669 100%);color:#fff;border-radius:12px;padding:20px;margin:1rem 0;}
.think-first h3{margin:0 0 8px;font-size:1.1rem;}
.think-first p{margin:0;font-size:0.92rem;line-height:1.6;}
/* Formula panel */
.formula-panel{background:#1e1e2e;color:#cdd6f4;border-radius:10px;padding:16px;margin:1rem 0;font-family:'DM Mono',monospace;font-size:0.82rem;}
.formula-panel h4{color:#89b4fa;margin:0 0 8px;font-family:'Roboto Slab',serif;}
.formula-row{display:flex;gap:1rem;flex-wrap:wrap;margin:4px 0;}
/* Content card */
.content-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;margin:1.25rem 0;box-shadow:0 1px 4px rgba(0,0,0,0.06);}
.content-card h3{margin:0 0 4px;color:var(--primary);font-size:1.05rem;}
.conceptual-first{font-style:italic;color:#4b5563;margin-bottom:12px;font-size:0.92rem;border-left:3px solid var(--secondary);padding-left:10px;}
/* Misconceptions */
.misconceptions-box{background:#fff7ed;border:2px solid #d97706;border-radius:10px;padding:16px;margin:1.5rem 0;}
.misconceptions-box h3{margin:0 0 10px;color:#92400e;font-size:1rem;}
.misconception-item{margin:0.5rem 0;font-size:0.9rem;}
.misconception-item strong{color:#b45309;}
/* Hero */
.hero{background:var(--hero-grad);color:#fff;border-radius:14px;padding:28px 24px;margin-bottom:1.5rem;}
.hero-badge{display:inline-block;background:rgba(255,255,255,0.2);border-radius:20px;padding:3px 12px;font-size:0.78rem;font-weight:600;margin-bottom:8px;}
.hero h1{margin:0 0 6px;font-size:1.6rem;}
.hero p{margin:0;font-size:0.92rem;opacity:0.92;line-height:1.5;}
/* Progress */
.progress-bar-wrap{height:6px;background:#e2e8f0;border-radius:3px;margin-bottom:1rem;}
.progress-bar-fill{height:6px;background:var(--primary);border-radius:3px;width:0%;transition:width 0.4s;}
/* Section nav */
.section-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.5rem;}
.section-nav a{background:#e0e7ff;color:var(--primary);border-radius:20px;padding:4px 12px;font-size:0.78rem;font-weight:600;text-decoration:none;}
.section-nav a:hover{background:var(--primary);color:#fff;}
/* Revisit */
.revisit-box{background:#f0fdf4;border:2px solid var(--secondary);border-radius:10px;padding:16px;margin:1.5rem 0;}
.revisit-box h3{margin:0 0 8px;color:var(--secondary);}
.revisit-box textarea{width:100%;min-height:70px;border:1px solid #a7f3d0;border-radius:6px;padding:8px;font-size:0.9rem;resize:vertical;box-sizing:border-box;}
/* Copy into books */
.copy-card{background:#fff;border:2px dashed var(--primary);border-radius:10px;padding:16px;font-size:0.88rem;}
.copy-card table{width:100%;border-collapse:collapse;font-size:0.82rem;margin:0.5rem 0;}
.copy-card th{background:var(--primary);color:#fff;padding:5px 8px;text-align:left;}
.copy-card td{padding:4px 8px;border:1px solid #c7d2fe;}
/* Activities */
.activity-box{background:#f0f9ff;border:2px solid var(--secondary);border-radius:10px;padding:16px;margin:1rem 0;}
.activity-box h4{margin:0 0 8px;color:var(--secondary);}
/* ===== lesson19.html ===== */
:root{
--primary:#b45309;
--secondary:#be123c;
--accent:#1e8449;
--accent-2:#2563eb;
--critical:#8e44ad;
--hero-grad:linear-gradient(135deg,#b45309 0%,#be123c 100%);
}
body{font-size:16px;}
.page{max-width:860px;}
/* Hero */
.hero{background:var(--hero-grad);color:#fff;border-radius:14px;padding:28px 24px;margin-bottom:1.5rem;}
.hero-badge{display:inline-block;background:rgba(255,255,255,0.2);border-radius:20px;padding:3px 12px;font-size:0.78rem;font-weight:600;margin-bottom:8px;}
.hero h1{margin:0 0 6px;font-size:1.6rem;}
.hero p{margin:0;font-size:0.92rem;opacity:0.92;line-height:1.5;}
/* Think First */
.think-first{background:var(--hero-grad);color:#fff;border-radius:12px;padding:20px;margin:1rem 0;}
.think-first h3{margin:0 0 8px;font-size:1.1rem;}
/* Formula panel */
.formula-panel{background:#1e1e2e;color:#cdd6f4;border-radius:10px;padding:16px;margin:1rem 0;font-family:'DM Mono',monospace;font-size:0.82rem;}
.formula-panel h4{color:#89b4fa;margin:0 0 8px;font-family:'Roboto Slab',serif;}
.formula-row{display:flex;gap:1rem;flex-wrap:wrap;margin:3px 0;line-height:1.5;}
/* Intentions */
.intentions-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.75rem;margin:1rem 0;}
.intention-card{border-radius:8px;padding:12px;}
.intention-card.know{background:#fef3c7;border-top:3px solid #b45309;}
.intention-card.understand{background:#ffe4e6;border-top:3px solid #be123c;}
.intention-card.can-do{background:#e0f2fe;border-top:3px solid #2563eb;}
.intention-card h4{margin:0 0 6px;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.06em;}
.intention-card ul{margin:0;padding-left:16px;font-size:0.85rem;}
/* Content card */
.content-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;margin:1.25rem 0;box-shadow:0 1px 4px rgba(0,0,0,0.06);}
.content-card h3{margin:0 0 4px;color:var(--primary);font-size:1.05rem;}
.conceptual-first{font-style:italic;color:#4b5563;margin-bottom:12px;font-size:0.92rem;border-left:3px solid var(--secondary);padding-left:10px;}
/* Reaction pathway SVG wrapper */
.pathway-svg-wrap{overflow-x:auto;margin:1rem 0;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px;}
/* Step table */
.step-table{width:100%;border-collapse:collapse;font-size:0.83rem;margin:0.75rem 0;}
.step-table th{background:var(--primary);color:#fff;padding:6px 8px;text-align:left;}
.step-table td{padding:5px 8px;border:1px solid #e2e8f0;vertical-align:top;}
.step-table tr:nth-child(even) td{background:#fef9f0;}
.step-table .step-col{font-weight:700;color:var(--primary);white-space:nowrap;}
/* Algorithm steps */
.algo-steps{counter-reset:algo;margin:0.75rem 0;}
.algo-step{display:flex;gap:12px;margin:0.5rem 0;align-items:flex-start;}
.algo-num{flex-shrink:0;width:28px;height:28px;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.9rem;}
.algo-body{font-size:0.9rem;padding-top:4px;}
/* Traps grid */
.trap-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem;margin:0.75rem 0;}
.trap-card{background:#fff1f2;border-left:3px solid #be123c;border-radius:0 6px 6px 0;padding:8px 10px;font-size:0.84rem;}
.trap-card strong{color:#9f1239;display:block;margin-bottom:2px;}
/* Oxidation ladder */
.ox-ladder{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0.75rem 0;font-size:0.88rem;}
.ox-node{background:#fef3c7;border:2px solid #b45309;border-radius:6px;padding:6px 10px;font-weight:700;text-align:center;font-size:0.82rem;}
.ox-node.dead-end{background:#fee2e2;border-color:#be123c;color:#9f1239;}
.ox-arrow{color:#b45309;font-weight:700;font-size:1rem;}
/* Worked example steps */
.worked-step{display:flex;gap:12px;margin:0.6rem 0;}
.step-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;}
/* Callouts */
.callout-amber{background:#fffbeb;border-left:4px solid #d97706;padding:10px 14px;border-radius:0 6px 6px 0;margin:0.75rem 0;font-size:0.9rem;}
.callout-red{background:#fff1f2;border-left:4px solid #e11d48;padding:10px 14px;border-radius:0 6px 6px 0;margin:0.75rem 0;font-size:0.9rem;}
.callout-blue{background:#eff6ff;border-left:4px solid #2563eb;padding:10px 14px;border-radius:0 6px 6px 0;margin:0.75rem 0;font-size:0.9rem;}
/* Misconceptions */
.misconceptions-box{background:#fff7ed;border:2px solid #d97706;border-radius:10px;padding:16px;margin:1.5rem 0;}
.misconceptions-box h3{margin:0 0 10px;color:#92400e;font-size:1rem;}
.misconception-item{margin:0.5rem 0;font-size:0.9rem;}
/* MC */
.mc-question{background:#f8fafc;border:2px solid #e2e8f0;border-radius:10px;padding:16px;margin:1rem 0;}
.mc-question.correct{border-color:#22c55e;background:#f0fdf4;}
.mc-question.incorrect{border-color:#ef4444;background:#fff1f2;}
.mc-options{list-style:none;padding:0;margin:0.5rem 0;}
.mc-options li{margin:0.3rem 0;}
.mc-options button{width:100%;text-align:left;background:#fff;border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;cursor:pointer;font-size:0.9rem;transition:background 0.15s;}
.mc-options button:hover{background:#fef3c7;}
.mc-feedback{margin-top:8px;font-size:0.88rem;padding:8px;border-radius:6px;display:none;}
/* Short answer */
.sa-question{background:#f8fafc;border-left:4px solid var(--primary);border-radius:0 8px 8px 0;padding:14px;margin:1rem 0;}
.sa-question textarea{width:100%;min-height:90px;border:1px solid #e2e8f0;border-radius:6px;padding:8px;font-size:0.9rem;resize:vertical;box-sizing:border-box;}
/* Answers accordion */
.answers-accordion{background:#fef3c7;border:2px solid #b45309;border-radius:10px;margin:1rem 0;}
.answers-trigger{width:100%;background:none;border:none;padding:14px;font-weight:700;font-size:1rem;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
.answers-body{padding:0 14px 14px;}
.ans-item{margin:0.75rem 0;padding:10px;background:#fff;border-radius:6px;font-size:0.88rem;}
.ans-q{font-weight:700;margin-bottom:4px;}
/* Collapsible */
.collapsible-trigger{width:100%;background:#f1f5f9;border:none;padding:12px;font-weight:700;text-align:left;cursor:pointer;display:flex;justify-content:space-between;border-radius:8px;}
.collapsible-body{padding:10px 14px;border:1px solid #e2e8f0;border-radius:0 0 8px 8px;display:none;}
.collapsible-body.open{display:block;}
/* Activity */
.activity-box{background:#fff8f1;border:2px solid #b45309;border-radius:10px;padding:16px;margin:1rem 0;}
.activity-box h4{margin:0 0 8px;color:#7c2d12;}
/* Completion */
.completion-box{background:var(--hero-grad);color:#fff;border-radius:12px;padding:20px;text-align:center;margin:2rem 0;}
.completion-box label{display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;font-size:1.1rem;font-weight:700;}
/* Lesson nav */
.lesson-nav{display:flex;justify-content:space-between;margin:2rem 0;gap:1rem;flex-wrap:wrap;}
.nav-btn{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:0.9rem;cursor:pointer;text-decoration:none;display:inline-block;}
.nav-btn:hover{opacity:0.85;}
/* Section labels */
.section-label{font-size:0.78rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--primary);border-bottom:2px solid var(--primary);padding-bottom:4px;margin:2rem 0 1rem;}
/* Progress */
.progress-bar-wrap{height:6px;background:#e2e8f0;border-radius:3px;margin-bottom:1rem;}
.progress-bar-fill{height:6px;background:var(--primary);border-radius:3px;width:0%;transition:width 0.4s;}
/* Section nav */
.section-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.5rem;}
.section-nav a{background:#fef3c7;color:var(--primary);border-radius:20px;padding:4px 12px;font-size:0.78rem;font-weight:600;text-decoration:none;}
.section-nav a:hover{background:var(--primary);color:#fff;}
/* Revisit */
.revisit-box{background:#fff8f1;border:2px solid var(--secondary);border-radius:10px;padding:16px;margin:1.5rem 0;}
.revisit-box h3{margin:0 0 8px;color:var(--secondary);}
/* ===== lesson20.html ===== */
:root{
--primary:#5b21b6;
--secondary:#b45309;
--accent:#15803d;
--accent-2:#0e7490;
--hero-grad:linear-gradient(135deg,#5b21b6 0%,#b45309 100%);
}
body{font-size:16px;}
.page{max-width:860px;margin:0 auto;padding:1rem;}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
/* Progress */
.progress-bar-wrap{height:6px;background:#e2e8f0;position:sticky;top:0;z-index:100;}
.progress-bar-fill{height:6px;background:var(--primary);border-radius:0 3px 3px 0;width:0%;transition:width 0.4s;}
/* Section nav */
.section-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.5rem;}
.section-nav a{background:#ede9fe;color:var(--primary);border-radius:20px;padding:4px 12px;font-size:0.78rem;font-weight:600;text-decoration:none;}
.section-nav a:hover{background:var(--primary);color:#fff;}
/* Hero */
.hero{background:var(--hero-grad);color:#fff;border-radius:14px;padding:28px 24px;margin-bottom:1.5rem;}
.hero-badge{display:inline-block;background:rgba(255,255,255,0.22);border-radius:20px;padding:4px 14px;font-size:0.8rem;font-weight:700;margin-bottom:10px;letter-spacing:.04em;}
.hero h1{margin:0 0 8px;font-size:1.7rem;line-height:1.2;}
.hero p{margin:0;font-size:0.95rem;opacity:0.93;line-height:1.55;}
/* Think First */
.think-first{background:var(--hero-grad);color:#fff;border-radius:12px;padding:20px;margin:1rem 0;}
.think-first h3{margin:0 0 8px;font-size:1.1rem;}
/* Formula panel — full table */
.ref-table-wrap{overflow-x:auto;margin:1rem 0;}
.ref-table{width:100%;border-collapse:collapse;font-size:0.78rem;}
.ref-table th{background:#1e1e2e;color:#cdd6f4;padding:6px 8px;text-align:left;white-space:nowrap;font-family:'DM Mono',monospace;}
.ref-table td{padding:5px 8px;border:1px solid #e2e8f0;vertical-align:top;font-size:0.78rem;}
.ref-table tr:nth-child(even) td{background:#f8f5ff;}
.ref-table .rxn-name{font-weight:700;color:var(--primary);white-space:nowrap;}
.ref-table .arrow-rev{color:#7c3aed;font-weight:700;}
.ref-table .flag{color:#be123c;font-weight:700;}
/* Intentions */
.intentions-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.75rem;margin:1rem 0;}
.intention-card{border-radius:8px;padding:12px;}
.intention-card.know{background:#ede9fe;border-top:3px solid #5b21b6;}
.intention-card.understand{background:#fef3c7;border-top:3px solid #b45309;}
.intention-card.can-do{background:#dcfce7;border-top:3px solid #15803d;}
.intention-card h4{margin:0 0 6px;font-size:0.82rem;text-transform:uppercase;letter-spacing:.06em;}
.intention-card ul{margin:0;padding-left:16px;font-size:0.82rem;}
/* Section label */
.section-label{font-size:0.78rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--primary);border-bottom:2px solid var(--primary);padding-bottom:4px;margin:2rem 0 1rem;}
/* Content card */
.content-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;margin:1.25rem 0;box-shadow:0 1px 4px rgba(0,0,0,0.06);}
.content-card h3{margin:0 0 6px;color:var(--primary);font-size:1.05rem;}
.conceptual-first{font-style:italic;color:#4b5563;margin-bottom:12px;font-size:0.92rem;border-left:3px solid var(--secondary);padding-left:10px;}
/* Pathway SVG */
.pathway-svg-wrap{overflow-x:auto;margin:1rem 0;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px;}
/* Callouts */
.callout-amber{background:#fffbeb;border-left:4px solid #d97706;padding:10px 14px;border-radius:0 6px 6px 0;margin:0.75rem 0;font-size:0.9rem;}
.callout-red{background:#fff1f2;border-left:4px solid #e11d48;padding:10px 14px;border-radius:0 6px 6px 0;margin:0.75rem 0;font-size:0.9rem;}
.callout-violet{background:#f5f3ff;border-left:4px solid #7c3aed;padding:10px 14px;border-radius:0 6px 6px 0;margin:0.75rem 0;font-size:0.9rem;}
/* Error/correction grid */
.error-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem;margin:0.75rem 0;}
.error-card{background:#fff1f2;border-left:3px solid #be123c;border-radius:0 6px 6px 0;padding:8px 10px;font-size:0.84rem;}
.error-card strong{color:#9f1239;display:block;margin-bottom:4px;}
.correct-card{background:#f0fdf4;border-left:3px solid #15803d;border-radius:0 6px 6px 0;padding:8px 10px;font-size:0.84rem;}
.correct-card strong{color:#14532d;display:block;margin-bottom:4px;}
/* Step block */
.step-block{background:#f8f5ff;border:1px solid #ddd6fe;border-radius:8px;padding:14px;margin:0.75rem 0;}
.step-block h4{margin:0 0 6px;color:#5b21b6;font-size:0.92rem;}
.conditions-box{background:#1e1e2e;color:#cdd6f4;border-radius:6px;padding:10px 14px;font-family:'DM Mono',monospace;font-size:0.78rem;margin:6px 0;}
.conditions-box span{color:#89b4fa;}
.eq{font-family:'DM Mono',monospace;font-size:0.85rem;background:#f1f5f9;padding:6px 10px;border-radius:4px;margin:6px 0;display:block;}
/* Band 6 template */
.b6-component{display:flex;gap:12px;margin:0.6rem 0;align-items:flex-start;}
.b6-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.82rem;}
.b6-body{font-size:0.88rem;padding-top:3px;}
.marks-pill{display:inline-block;background:#fef3c7;border:1px solid #b45309;border-radius:10px;padding:1px 8px;font-size:0.75rem;font-weight:700;color:#92400e;margin-left:6px;}
/* Blank table activity */
.blank-table{width:100%;border-collapse:collapse;font-size:0.78rem;margin:0.75rem 0;}
.blank-table th{background:#5b21b6;color:#fff;padding:6px 8px;text-align:left;}
.blank-table td{padding:5px 8px;border:1px solid #ddd6fe;background:#fff;min-width:80px;}
.blank-table .rxn-col{font-weight:700;color:#5b21b6;white-space:nowrap;background:#f5f3ff;}
.blank-input{width:100%;border:none;background:transparent;font-size:0.76rem;padding:2px;}
.blank-input:focus{outline:1px dashed #7c3aed;background:#ede9fe;}
/* Worked examples */
.worked-step{display:flex;gap:12px;margin:0.7rem 0;}
.step-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;}
/* MC */
.mc-question{background:#f8fafc;border:2px solid #e2e8f0;border-radius:10px;padding:16px;margin:1rem 0;}
.mc-question.correct{border-color:#22c55e;background:#f0fdf4;}
.mc-question.incorrect{border-color:#ef4444;background:#fff1f2;}
.mc-options{list-style:none;padding:0;margin:0.5rem 0;}
.mc-options li{margin:0.3rem 0;}
.mc-options button{width:100%;text-align:left;background:#fff;border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;cursor:pointer;font-size:0.88rem;transition:background 0.15s;}
.mc-options button:hover{background:#ede9fe;}
.mc-feedback{margin-top:8px;font-size:0.87rem;padding:8px;border-radius:6px;display:none;}
/* Short answer */
.sa-question{background:#f8fafc;border-left:4px solid var(--primary);border-radius:0 8px 8px 0;padding:14px;margin:1rem 0;}
.sa-question textarea{width:100%;min-height:90px;border:1px solid #e2e8f0;border-radius:6px;padding:8px;font-size:0.9rem;resize:vertical;box-sizing:border-box;}
/* Answers accordion */
.answers-accordion{background:#ede9fe;border:2px solid #5b21b6;border-radius:10px;margin:1rem 0;}
.answers-trigger{width:100%;background:none;border:none;padding:14px;font-weight:700;font-size:1rem;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--primary);}
.answers-body{padding:0 14px 14px;display:none;}
.answers-body.open{display:block;}
.ans-item{margin:0.75rem 0;padding:10px;background:#fff;border-radius:6px;font-size:0.88rem;}
.ans-q{font-weight:700;margin-bottom:4px;color:var(--primary);}
/* Collapsible */
.collapsible-trigger{width:100%;background:#f1f5f9;border:none;padding:12px;font-weight:700;text-align:left;cursor:pointer;display:flex;justify-content:space-between;border-radius:8px;font-family:'Roboto Slab',serif;}
.collapsible-body{padding:10px 14px;border:1px solid #e2e8f0;border-radius:0 0 8px 8px;display:none;}
.collapsible-body.open{display:block;}
/* Copy into books */
.copy-box{background:#fef3c7;border:1px solid #d97706;border-radius:8px;margin:1.25rem 0;}
/* Activity */
.activity-box{background:#f5f3ff;border:2px solid #5b21b6;border-radius:10px;padding:16px;margin:1rem 0;}
.activity-box h4{margin:0 0 8px;color:#3b0764;}
/* Revisit */
.revisit-box{background:#fff8f1;border:2px solid var(--secondary);border-radius:10px;padding:16px;margin:1.5rem 0;}
.revisit-box h3{margin:0 0 8px;color:#92400e;}
/* Completion */
.completion-box{background:var(--hero-grad);color:#fff;border-radius:12px;padding:20px;text-align:center;margin:2rem 0;}
.completion-box label{display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;font-size:1.1rem;font-weight:700;}
/* Lesson nav */
.lesson-nav{display:flex;justify-content:space-between;margin:2rem 0;gap:1rem;flex-wrap:wrap;}
.nav-btn{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:0.9rem;cursor:pointer;text-decoration:none;display:inline-block;}
.nav-btn:hover{opacity:0.85;}
/* Priority highlight */
.priority-row td{background:#fef9c3!important;}
@media(max-width:600px){
.intentions-grid{grid-template-columns:1fr;}
.error-grid{grid-template-columns:1fr;}
.hero h1{font-size:1.35rem;}
.ref-table td,.ref-table th{font-size:0.7rem;padding:4px 5px;}
.blank-table td,.blank-table th{font-size:0.7rem;padding:3px 4px;}
}
/* ===== lesson21.html ===== */
:root{
--primary:#0369a1;
--secondary:#7c3aed;
--accent:#0f766e;
--hero-grad:linear-gradient(135deg,#0369a1 0%,#7c3aed 100%);
}
body{font-size:16px;}
.page{max-width:860px;margin:0 auto;padding:1rem;}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
.progress-bar-wrap{height:6px;background:#e2e8f0;position:sticky;top:0;z-index:100;}
.progress-bar-fill{height:6px;background:var(--primary);border-radius:0 3px 3px 0;width:0%;transition:width 0.4s;}
.section-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.5rem;}
.section-nav a{background:#e0f2fe;color:var(--primary);border-radius:20px;padding:4px 12px;font-size:0.78rem;font-weight:600;text-decoration:none;}
.section-nav a:hover{background:var(--primary);color:#fff;}
.hero{background:var(--hero-grad);color:#fff;border-radius:14px;padding:28px 24px;margin-bottom:1.5rem;}
.hero-badge{display:inline-block;background:rgba(255,255,255,0.22);border-radius:20px;padding:4px 14px;font-size:0.8rem;font-weight:700;margin-bottom:10px;letter-spacing:.04em;}
.hero h1{margin:0 0 8px;font-size:1.65rem;line-height:1.2;}
.hero p{margin:0;font-size:0.95rem;opacity:0.93;line-height:1.55;}
.think-first{background:var(--hero-grad);color:#fff;border-radius:12px;padding:20px;margin:1rem 0;}
.think-first h3{margin:0 0 8px;font-size:1.1rem;}
.formula-panel{background:#1e1e2e;color:#cdd6f4;border-radius:10px;padding:16px;margin:1rem 0;font-family:'DM Mono',monospace;font-size:0.82rem;}
.formula-panel h4{color:#89b4fa;margin:0 0 8px;font-family:'Roboto Slab',serif;}
.formula-row{display:flex;gap:1rem;flex-wrap:wrap;margin:3px 0;line-height:1.6;}
.fp-table{width:100%;border-collapse:collapse;margin-top:8px;}
.fp-table th{color:#89b4fa;text-align:left;padding:4px 6px;font-size:0.78rem;border-bottom:1px solid #313244;}
.fp-table td{padding:4px 6px;font-size:0.78rem;border-bottom:1px solid #313244;}
.fp-table tr:last-child td{border-bottom:none;}
.intentions-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.75rem;margin:1rem 0;}
.intention-card{border-radius:8px;padding:12px;}
.intention-card.know{background:#e0f2fe;border-top:3px solid #0369a1;}
.intention-card.understand{background:#ede9fe;border-top:3px solid #7c3aed;}
.intention-card.can-do{background:#dcfce7;border-top:3px solid #0f766e;}
.intention-card h4{margin:0 0 6px;font-size:0.82rem;text-transform:uppercase;letter-spacing:.06em;}
.intention-card ul{margin:0;padding-left:16px;font-size:0.82rem;}
.section-label{font-size:0.78rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--primary);border-bottom:2px solid var(--primary);padding-bottom:4px;margin:2rem 0 1rem;}
.content-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;margin:1.25rem 0;box-shadow:0 1px 4px rgba(0,0,0,0.06);}
.content-card h3{margin:0 0 6px;color:var(--primary);font-size:1.05rem;}
.conceptual-first{font-style:italic;color:#4b5563;margin-bottom:12px;font-size:0.92rem;border-left:3px solid var(--secondary);padding-left:10px;}
.svg-wrap{overflow-x:auto;margin:1rem 0;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px;}
.callout-amber{background:#fffbeb;border-left:4px solid #d97706;padding:10px 14px;border-radius:0 6px 6px 0;margin:0.75rem 0;font-size:0.9rem;}
.callout-red{background:#fff1f2;border-left:4px solid #e11d48;padding:10px 14px;border-radius:0 6px 6px 0;margin:0.75rem 0;font-size:0.9rem;}
.callout-blue{background:#eff6ff;border-left:4px solid #2563eb;padding:10px 14px;border-radius:0 6px 6px 0;margin:0.75rem 0;font-size:0.9rem;}
.polymer-table{width:100%;border-collapse:collapse;font-size:0.82rem;margin:0.75rem 0;}
.polymer-table th{background:var(--primary);color:#fff;padding:7px 9px;text-align:left;}
.polymer-table td{padding:6px 9px;border:1px solid #e2e8f0;vertical-align:top;}
.polymer-table tr:nth-child(even) td{background:#f0f9ff;}
.polymer-table .pname{font-weight:700;color:var(--primary);}
.mono-cell{font-family:'DM Mono',monospace;font-size:0.78rem;}
.step-block{background:#f0f9ff;border-left:4px solid var(--primary);border-radius:0 8px 8px 0;padding:12px 14px;margin:0.6rem 0;}
.step-block h4{margin:0 0 4px;color:#075985;font-size:0.9rem;}
.eq{font-family:'DM Mono',monospace;font-size:0.84rem;background:#f1f5f9;padding:6px 10px;border-radius:4px;margin:5px 0;display:block;}
.worked-step{display:flex;gap:12px;margin:0.7rem 0;}
.step-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;}
.mc-question{background:#f8fafc;border:2px solid #e2e8f0;border-radius:10px;padding:16px;margin:1rem 0;}
.mc-question.correct{border-color:#22c55e;background:#f0fdf4;}
.mc-question.incorrect{border-color:#ef4444;background:#fff1f2;}
.mc-options{list-style:none;padding:0;margin:0.5rem 0;}
.mc-options li{margin:0.3rem 0;}
.mc-options button{width:100%;text-align:left;background:#fff;border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;cursor:pointer;font-size:0.88rem;transition:background 0.15s;}
.mc-options button:hover{background:#e0f2fe;}
.mc-feedback{margin-top:8px;font-size:0.87rem;padding:8px;border-radius:6px;display:none;}
.sa-question{background:#f8fafc;border-left:4px solid var(--primary);border-radius:0 8px 8px 0;padding:14px;margin:1rem 0;}
.sa-question textarea{width:100%;min-height:90px;border:1px solid #e2e8f0;border-radius:6px;padding:8px;font-size:0.9rem;resize:vertical;box-sizing:border-box;}
.answers-accordion{background:#e0f2fe;border:2px solid #0369a1;border-radius:10px;margin:1rem 0;}
.answers-trigger{width:100%;background:none;border:none;padding:14px;font-weight:700;font-size:1rem;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--primary);}
.answers-body{padding:0 14px 14px;display:none;}
.answers-body.open{display:block;}
.ans-item{margin:0.75rem 0;padding:10px;background:#fff;border-radius:6px;font-size:0.88rem;}
.ans-q{font-weight:700;margin-bottom:4px;color:var(--primary);}
.collapsible-trigger{width:100%;background:#f1f5f9;border:none;padding:12px;font-weight:700;text-align:left;cursor:pointer;display:flex;justify-content:space-between;border-radius:8px;font-family:'Roboto Slab',serif;}
.collapsible-body{padding:10px 14px;border:1px solid #e2e8f0;border-radius:0 0 8px 8px;display:none;}
.collapsible-body.open{display:block;}
.copy-box{background:#fef3c7;border:1px solid #d97706;border-radius:8px;margin:1.25rem 0;}
.activity-box{background:#e0f2fe;border:2px solid #0369a1;border-radius:10px;padding:16px;margin:1rem 0;}
.activity-box h4{margin:0 0 8px;color:#075985;}
.revisit-box{background:#fff8f1;border:2px solid #b45309;border-radius:10px;padding:16px;margin:1.5rem 0;}
.revisit-box h3{margin:0 0 8px;color:#92400e;}
.completion-box{background:var(--hero-grad);color:#fff;border-radius:12px;padding:20px;text-align:center;margin:2rem 0;}
.completion-box label{display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;font-size:1.1rem;font-weight:700;}
.lesson-nav{display:flex;justify-content:space-between;margin:2rem 0;gap:1rem;flex-wrap:wrap;}
.nav-btn{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:0.9rem;cursor:pointer;text-decoration:none;display:inline-block;}
.nav-btn:hover{opacity:0.85;}
@media(max-width:600px){
.intentions-grid{grid-template-columns:1fr;}
.hero h1{font-size:1.3rem;}
.polymer-table{font-size:0.74rem;}
}
/* ===== lesson22.html ===== */
:root{
--primary:#0f766e;
--secondary:#7c3aed;
--accent:#be123c;
--hero-grad:linear-gradient(135deg,#0f766e 0%,#7c3aed 100%);
}
body{font-size:16px;}
.page{max-width:860px;margin:0 auto;padding:1rem;}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
.progress-bar-wrap{height:6px;background:#e2e8f0;position:sticky;top:0;z-index:100;}
.progress-bar-fill{height:6px;background:var(--primary);border-radius:0 3px 3px 0;width:0%;transition:width 0.4s;}
.section-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.5rem;}
.section-nav a{background:#ccfbf1;color:var(--primary);border-radius:20px;padding:4px 12px;font-size:0.78rem;font-weight:600;text-decoration:none;}
.section-nav a:hover{background:var(--primary);color:#fff;}
.hero{background:var(--hero-grad);color:#fff;border-radius:14px;padding:28px 24px;margin-bottom:1.5rem;}
.hero-badge{display:inline-block;background:rgba(255,255,255,0.22);border-radius:20px;padding:4px 14px;font-size:0.8rem;font-weight:700;margin-bottom:10px;}
.hero h1{margin:0 0 8px;font-size:1.65rem;line-height:1.2;}
.hero p{margin:0;font-size:0.95rem;opacity:0.93;line-height:1.55;}
.think-first{background:var(--hero-grad);color:#fff;border-radius:12px;padding:20px;margin:1rem 0;}
.think-first h3{margin:0 0 8px;font-size:1.1rem;}
.formula-panel{background:#1e1e2e;color:#cdd6f4;border-radius:10px;padding:16px;margin:1rem 0;font-family:'DM Mono',monospace;font-size:0.81rem;}
.formula-panel h4{color:#a6e3a1;margin:0 0 10px;font-family:'Roboto Slab',serif;}
.formula-row{margin:4px 0;line-height:1.6;}
.formula-row .hl{color:#a6e3a1;}
.formula-row .hl2{color:#fab387;}
.intentions-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.75rem;margin:1rem 0;}
.intention-card{border-radius:8px;padding:12px;}
.intention-card.know{background:#ccfbf1;border-top:3px solid #0f766e;}
.intention-card.understand{background:#ede9fe;border-top:3px solid #7c3aed;}
.intention-card.can-do{background:#fce7f3;border-top:3px solid #be123c;}
.intention-card h4{margin:0 0 6px;font-size:0.82rem;text-transform:uppercase;letter-spacing:.06em;}
.intention-card ul{margin:0;padding-left:16px;font-size:0.82rem;}
.section-label{font-size:0.78rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--primary);border-bottom:2px solid var(--primary);padding-bottom:4px;margin:2rem 0 1rem;}
.content-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;margin:1.25rem 0;box-shadow:0 1px 4px rgba(0,0,0,0.06);}
.content-card h3{margin:0 0 6px;color:var(--primary);font-size:1.05rem;}
.conceptual-first{font-style:italic;color:#4b5563;margin-bottom:12px;font-size:0.92rem;border-left:3px solid var(--secondary);padding-left:10px;}
.svg-wrap{overflow-x:auto;margin:1rem 0;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px;}
.callout-amber{background:#fffbeb;border-left:4px solid #d97706;padding:10px 14px;border-radius:0 6px 6px 0;margin:0.75rem 0;font-size:0.9rem;}
.callout-red{background:#fff1f2;border-left:4px solid #e11d48;padding:10px 14px;border-radius:0 6px 6px 0;margin:0.75rem 0;font-size:0.9rem;}
.callout-blue{background:#eff6ff;border-left:4px solid #2563eb;padding:10px 14px;border-radius:0 6px 6px 0;margin:0.75rem 0;font-size:0.9rem;}
/* Comparison tables */
.cmp-table{width:100%;border-collapse:collapse;font-size:0.82rem;margin:0.75rem 0;}
.cmp-table th{background:var(--primary);color:#fff;padding:7px 9px;text-align:left;}
.cmp-table td{padding:6px 9px;border:1px solid #e2e8f0;vertical-align:top;}
.cmp-table tr:nth-child(even) td{background:#f0fdf9;}
.cmp-table .feat{font-weight:700;color:var(--primary);white-space:nowrap;}
.add-col{background:#eff6ff!important;}
.est-col{background:#f0fdf9!important;}
.ami-col{background:#fdf4ff!important;}
/* Linkage highlight chips */
.chip-ester{display:inline-block;background:#fde68a;border:1.5px solid #b45309;border-radius:6px;padding:2px 8px;font-family:'DM Mono',monospace;font-size:0.82rem;font-weight:700;color:#7c2d12;}
.chip-amide{display:inline-block;background:#ddd6fe;border:1.5px solid #7c3aed;border-radius:6px;padding:2px 8px;font-family:'DM Mono',monospace;font-size:0.82rem;font-weight:700;color:#4c1d95;}
.chip-cc{display:inline-block;background:#e0f2fe;border:1.5px solid #0369a1;border-radius:6px;padding:2px 8px;font-family:'DM Mono',monospace;font-size:0.82rem;font-weight:700;color:#075985;}
.eq{font-family:'DM Mono',monospace;font-size:0.83rem;background:#f1f5f9;padding:6px 10px;border-radius:4px;margin:5px 0;display:block;line-height:1.5;}
.step-row{display:flex;gap:10px;margin:0.55rem 0;align-items:flex-start;}
.step-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.82rem;}
.step-body{font-size:0.9rem;padding-top:3px;}
.worked-step{display:flex;gap:12px;margin:0.7rem 0;}
.wnum{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;}
.mc-question{background:#f8fafc;border:2px solid #e2e8f0;border-radius:10px;padding:16px;margin:1rem 0;}
.mc-question.correct{border-color:#22c55e;background:#f0fdf4;}
.mc-question.incorrect{border-color:#ef4444;background:#fff1f2;}
.mc-options{list-style:none;padding:0;margin:0.5rem 0;}
.mc-options li{margin:0.3rem 0;}
.mc-options button{width:100%;text-align:left;background:#fff;border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;cursor:pointer;font-size:0.88rem;transition:background 0.15s;}
.mc-options button:hover{background:#ccfbf1;}
.mc-feedback{margin-top:8px;font-size:0.87rem;padding:8px;border-radius:6px;display:none;}
.sa-question{background:#f8fafc;border-left:4px solid var(--primary);border-radius:0 8px 8px 0;padding:14px;margin:1rem 0;}
.sa-question textarea{width:100%;min-height:90px;border:1px solid #e2e8f0;border-radius:6px;padding:8px;font-size:0.9rem;resize:vertical;box-sizing:border-box;}
.answers-accordion{background:#ccfbf1;border:2px solid #0f766e;border-radius:10px;margin:1rem 0;}
.answers-trigger{width:100%;background:none;border:none;padding:14px;font-weight:700;font-size:1rem;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--primary);}
.answers-body{padding:0 14px 14px;display:none;}
.answers-body.open{display:block;}
.ans-item{margin:0.75rem 0;padding:10px;background:#fff;border-radius:6px;font-size:0.88rem;}
.ans-q{font-weight:700;margin-bottom:4px;color:var(--primary);}
.collapsible-trigger{width:100%;background:#f1f5f9;border:none;padding:12px;font-weight:700;text-align:left;cursor:pointer;display:flex;justify-content:space-between;border-radius:8px;font-family:'Roboto Slab',serif;}
.collapsible-body{padding:10px 14px;border:1px solid #e2e8f0;border-radius:0 0 8px 8px;display:none;}
.collapsible-body.open{display:block;}
.copy-box{background:#fef3c7;border:1px solid #d97706;border-radius:8px;margin:1.25rem 0;}
.activity-box{background:#f0fdf9;border:2px solid #0f766e;border-radius:10px;padding:16px;margin:1rem 0;}
.activity-box h4{margin:0 0 8px;color:#064e3b;}
.revisit-box{background:#fff8f1;border:2px solid #b45309;border-radius:10px;padding:16px;margin:1.5rem 0;}
.revisit-box h3{margin:0 0 8px;color:#92400e;}
.completion-box{background:var(--hero-grad);color:#fff;border-radius:12px;padding:20px;text-align:center;margin:2rem 0;}
.completion-box label{display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;font-size:1.1rem;font-weight:700;}
.lesson-nav{display:flex;justify-content:space-between;margin:2rem 0;gap:1rem;flex-wrap:wrap;}
.nav-btn{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:0.9rem;cursor:pointer;text-decoration:none;display:inline-block;}
.nav-btn:hover{opacity:0.85;}
@media(max-width:600px){
.intentions-grid{grid-template-columns:1fr;}
.hero h1{font-size:1.3rem;}
.cmp-table{font-size:0.74rem;}
}
/* ===== lesson23.html ===== */
:root{
--primary:#4338ca;
--secondary:#b45309;
--accent:#0f766e;
--hero-grad:linear-gradient(135deg,#4338ca 0%,#b45309 100%);
}
body{font-size:16px;}
.page{max-width:860px;margin:0 auto;padding:1rem;}
h1,h2,h3,h4{font-family:'Roboto Slab',Georgia,serif;}
.progress-bar-wrap{height:6px;background:#e2e8f0;position:sticky;top:0;z-index:100;}
.progress-bar-fill{height:6px;background:var(--primary);border-radius:0 3px 3px 0;width:0%;transition:width 0.4s;}
.section-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.5rem;}
.section-nav a{background:#ede9fe;color:var(--primary);border-radius:20px;padding:4px 12px;font-size:0.78rem;font-weight:600;text-decoration:none;}
.section-nav a:hover{background:var(--primary);color:#fff;}
.hero{background:var(--hero-grad);color:#fff;border-radius:14px;padding:28px 24px;margin-bottom:1.5rem;}
.hero-badge{display:inline-block;background:rgba(255,255,255,0.22);border-radius:20px;padding:4px 14px;font-size:0.8rem;font-weight:700;margin-bottom:10px;}
.hero h1{margin:0 0 8px;font-size:1.65rem;line-height:1.2;}
.hero p{margin:0;font-size:0.95rem;opacity:0.93;line-height:1.55;}
.think-first{background:var(--hero-grad);color:#fff;border-radius:12px;padding:20px;margin:1rem 0;}
.think-first h3{margin:0 0 8px;font-size:1.1rem;}
.intentions-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.75rem;margin:1rem 0;}
.intention-card{border-radius:8px;padding:12px;}
.intention-card.know{background:#ede9fe;border-top:3px solid #4338ca;}
.intention-card.understand{background:#fef3c7;border-top:3px solid #b45309;}
.intention-card.can-do{background:#ccfbf1;border-top:3px solid #0f766e;}
.intention-card h4{margin:0 0 6px;font-size:0.82rem;text-transform:uppercase;letter-spacing:.06em;}
.intention-card ul{margin:0;padding-left:16px;font-size:0.82rem;}
.section-label{font-size:0.78rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--primary);border-bottom:2px solid var(--primary);padding-bottom:4px;margin:2rem 0 1rem;}
.content-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;margin:1.25rem 0;box-shadow:0 1px 4px rgba(0,0,0,0.06);}
.content-card h3{margin:0 0 6px;color:var(--primary);font-size:1.05rem;}
.conceptual-first{font-style:italic;color:#4b5563;margin-bottom:12px;font-size:0.92rem;border-left:3px solid var(--secondary);padding-left:10px;}
.svg-wrap{overflow-x:auto;margin:1rem 0;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px;}
.callout-amber{background:#fffbeb;border-left:4px solid #d97706;padding:10px 14px;border-radius:0 6px 6px 0;margin:0.75rem 0;font-size:0.9rem;}
.callout-indigo{background:#eef2ff;border-left:4px solid #4338ca;padding:10px 14px;border-radius:0 6px 6px 0;margin:0.75rem 0;font-size:0.9rem;}
.callout-teal{background:#ccfbf1;border-left:4px solid #0f766e;padding:10px 14px;border-radius:0 6px 6px 0;margin:0.75rem 0;font-size:0.9rem;}
.callout-red{background:#fef2f2;border-left:4px solid #dc2626;padding:10px 14px;border-radius:0 6px 6px 0;margin:0.75rem 0;font-size:0.9rem;}
.compare-table{width:100%;border-collapse:collapse;font-size:0.85rem;margin:1rem 0;}
.compare-table th{background:var(--primary);color:#fff;padding:8px 10px;text-align:left;}
.compare-table td{padding:7px 10px;border-bottom:1px solid #e2e8f0;vertical-align:top;}
.compare-table tr:nth-child(even) td{background:#f8fafc;}
.polymer-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin:1rem 0;}
.polymer-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px;}
.polymer-card h4{margin:0 0 6px;font-size:0.88rem;color:var(--primary);}
.polymer-card p{margin:0;font-size:0.82rem;color:#374151;}
.recycle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.6rem;margin:1rem 0;}
.recycle-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:10px;text-align:center;}
.recycle-num{font-size:1.4rem;font-weight:700;color:var(--primary);}
.recycle-code{font-size:0.75rem;font-weight:600;color:var(--secondary);margin:2px 0;}
.recycle-eg{font-size:0.72rem;color:#6b7280;}
.activity-box{background:#f0fdf4;border:1px solid #86efac;border-radius:10px;padding:16px;margin:1rem 0;}
.activity-box h4{margin:0 0 8px;color:#166534;font-size:0.95rem;}
.mc-block{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:14px;margin:0.75rem 0;}
.mc-block p{margin:0 0 8px;font-weight:600;font-size:0.9rem;}
.mc-option{display:block;padding:5px 10px;border-radius:4px;font-size:0.87rem;cursor:pointer;margin:3px 0;border:1px solid #e2e8f0;background:#fff;width:100%;text-align:left;}
.mc-option:hover{background:#ede9fe;}
.mc-option.correct{background:#d1fae5;border-color:#10b981;}
.mc-option.incorrect{background:#fee2e2;border-color:#ef4444;}
.mc-feedback{margin-top:6px;font-size:0.84rem;min-height:1em;}
.mc-feedback.correct{color:#065f46;}
.mc-feedback.incorrect{color:#991b1b;}
.sa-box{background:#faf5ff;border:1px solid #c4b5fd;border-radius:8px;padding:14px;margin:0.75rem 0;}
.sa-box label{display:block;font-weight:600;font-size:0.88rem;margin-bottom:6px;}
.sa-box textarea{width:100%;border:1px solid #c4b5fd;border-radius:6px;padding:8px;font-size:0.85rem;font-family:'DM Sans',sans-serif;resize:vertical;box-sizing:border-box;}
details.answers{margin:1rem 0;}
details.answers summary{cursor:pointer;font-weight:700;color:var(--primary);padding:8px 12px;background:#ede9fe;border-radius:6px;font-size:0.9rem;}
details.answers .ans-body{background:#f5f3ff;border:1px solid #c4b5fd;border-radius:0 0 6px 6px;padding:12px 16px;font-size:0.87rem;}
details.answers .ans-body p{margin:4px 0;}
.copy-section{background:#1e1e2e;color:#cdd6f4;border-radius:10px;padding:16px;margin:1rem 0;font-size:0.84rem;line-height:1.8;}
.copy-section h4{color:#a6e3a1;font-family:'Roboto Slab',serif;margin:0 0 10px;}
details.copy-wrap summary{cursor:pointer;font-weight:700;color:var(--primary);padding:8px 12px;background:#ede9fe;border-radius:6px;font-size:0.9rem;list-style:none;}
details.copy-wrap summary::before{content:"📋 ";}
.completion-box{text-align:center;background:linear-gradient(135deg,#ede9fe,#fef3c7);border-radius:12px;padding:24px;margin:2rem 0;}
.completion-box h3{margin:0 0 8px;color:var(--primary);}
.completion-box label{font-size:0.92rem;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;}
.common-mistakes{background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:16px;margin:1rem 0;}
.common-mistakes h4{margin:0 0 10px;color:#9a3412;}
.cm-item{display:flex;gap:10px;margin:8px 0;font-size:0.87rem;}
.cm-x{color:#dc2626;font-weight:700;flex-shrink:0;}
.cm-check{color:#16a34a;font-weight:700;flex-shrink:0;}