/* =========================================================
   microLearning — Shared Design System
   Extracted from microGPT. All lessons share this stylesheet.
   ========================================================= */

/* ── Fonts ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400&family=IBM+Plex+Mono:wght@300;400;500;600&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ── Variables ──────────────────────────────────────────── */
:root {
  --bg: #0f1117;
  --bg2: #161822;
  --bg3: #1c1f2e;
  --surface: #1a1d2b;
  --surface2: #222538;
  --border: #2c3048;
  --border2: #383d5a;
  --text: #d4d4e8;
  --text2: #a0a0c0;
  --text3: #6a6a8e;
  --text4: #484868;
  --warm: #e8a87c;
  --warm2: #d4785a;
  --teal: #5cc9b5;
  --teal2: #3d9e8d;
  --blue: #6b9eff;
  --purple: #b07aff;
  --pink: #e87aaa;
  --yellow: #e8d06a;
  --green: #5ce88e;
  --red: #e86a6a;
  --code-bg: #0c0e16;
}

/* ── Reset ──────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;}
body{font-family:'Crimson Pro',Georgia,serif;background:var(--bg);color:var(--text);line-height:1.85;overflow-x:hidden;}
::selection{background:var(--warm);color:#000;}
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}

/* ── Hero ───────────────────────────────────────────────── */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 50% 40%,rgba(232,168,124,.06),transparent 70%),radial-gradient(ellipse 40% 40% at 30% 70%,rgba(92,201,181,.04),transparent 60%);pointer-events:none;}
.hero-label{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:var(--text3);margin-bottom:1.5rem;}
.hero h1{font-family:'Outfit',sans-serif;font-weight:800;font-size:clamp(2.5rem,7vw,5rem);line-height:1.1;margin-bottom:1rem;}
.hero h1 .w{color:var(--warm);}
.hero h1 .t{color:var(--teal);}
.hero h1 .b{color:var(--blue);}
.hero h1 .p{color:var(--purple);}
.hero .sub{font-size:1.25rem;color:var(--text2);max-width:620px;margin:0 auto 1.5rem;font-weight:300;font-style:italic;}
.hero .prereq{font-family:'IBM Plex Mono',monospace;font-size:.8rem;color:var(--text3);padding:.6rem 1.2rem;border:1px solid var(--border);border-radius:8px;display:inline-block;margin-bottom:2rem;}
.hero .prereq b{color:var(--green);}
.stats{display:flex;gap:2.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.5rem;}
.stat-n{font-family:'Outfit',sans-serif;font-weight:800;font-size:2rem;color:var(--warm);}
.stat-l{font-family:'IBM Plex Mono',monospace;font-size:.65rem;color:var(--text4);text-transform:uppercase;letter-spacing:.12em;}
.go-btn{font-family:'Outfit',sans-serif;font-weight:600;padding:.9rem 2.5rem;background:linear-gradient(135deg,var(--warm) 0%,var(--warm2) 100%);border:none;color:#fff;font-size:1rem;border-radius:50px;cursor:pointer;transition:all .25s;letter-spacing:.02em;}
.go-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(232,168,124,.25);}

/* ── Nav (sticky chapter tabs) ──────────────────────────── */
.nav{position:sticky;top:0;z-index:100;background:rgba(15,17,23,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);display:flex;overflow-x:auto;scrollbar-width:none;padding:0 .5rem;}
.nav::-webkit-scrollbar{display:none;}
.nav button{font-family:'IBM Plex Mono',monospace;font-size:.68rem;padding:.85rem 1rem;background:none;border:none;color:var(--text4);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:all .2s;letter-spacing:.03em;}
.nav button:hover{color:var(--text2);}
.nav button.on{color:var(--warm);border-bottom-color:var(--warm);}
.nav .n{font-weight:600;opacity:.5;margin-right:.3em;}

/* ── Panels (chapter content) ───────────────────────────── */
.panel{display:none;animation:fadeIn .4s ease;}
.panel.on{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}

/* ── Content Section ────────────────────────────────────── */
.sec{max-width:780px;margin:0 auto;padding:2.5rem 1.5rem;}
.sec h2{font-family:'Outfit',sans-serif;font-size:2rem;font-weight:800;margin-bottom:.3rem;line-height:1.2;}
.sec h2 .w{color:var(--warm);}
.sec h2 .t{color:var(--teal);}
.sec h2 .b{color:var(--blue);}
.sec h2 .p{color:var(--purple);}
.sec h3{font-family:'Outfit',sans-serif;font-size:1.25rem;font-weight:600;margin:2.2rem 0 .6rem;color:var(--teal);}
.sec p{margin-bottom:1rem;font-size:1.08rem;}
.dim{color:var(--text2);}
.mono{font-family:'IBM Plex Mono',monospace;}

/* ── Callouts ───────────────────────────────────────────── */
.call{border-left:3px solid var(--teal);background:rgba(92,201,181,.04);padding:1rem 1.2rem;border-radius:0 8px 8px 0;margin:1.2rem 0;font-size:1rem;}
.call.warm{border-left-color:var(--warm);background:rgba(232,168,124,.04);}
.call.idea{border-left-color:var(--yellow);background:rgba(232,208,106,.04);}
.call.check{border-left-color:var(--green);background:rgba(92,232,142,.04);}
.call b{color:inherit;}
.call.warm b{color:var(--warm);}
.call.idea b{color:var(--yellow);}
.call.check b{color:var(--green);}
.call.teal b{color:var(--teal);}

/* ── Code Blocks ────────────────────────────────────────── */
pre.code{background:var(--code-bg);border:1px solid var(--border);border-radius:10px;padding:1.1rem 1.3rem;margin:1.1rem 0;overflow-x:auto;font-family:'IBM Plex Mono',monospace;font-size:.82rem;line-height:1.8;position:relative;color:var(--text2);}
pre.code .tag{position:absolute;top:.4rem;right:.7rem;font-size:.55rem;color:var(--text4);text-transform:uppercase;letter-spacing:.12em;}
.kw{color:#c792ea;}.fn{color:#82aaff;}.st{color:#c3e88d;}.cm{color:#546e7a;font-style:italic;}.nm{color:#f78c6c;}.op{color:#89ddff;}.vr{color:#eeffff;}

/* ── Math Blocks ────────────────────────────────────────── */
.math{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:1.2rem;margin:1.2rem 0;text-align:center;font-size:1.15rem;color:var(--yellow);font-style:italic;letter-spacing:.02em;}

/* ── Widget (interactive components) ────────────────────── */
.W{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.5rem;margin:1.5rem 0;overflow:hidden;}
.W-t{font-family:'IBM Plex Mono',monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--warm);margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem;}
.W-t::before{content:'◆';font-size:.5rem;}
canvas{display:block;border-radius:8px;width:100%;}
.btn{font-family:'IBM Plex Mono',monospace;padding:.45rem 1.1rem;background:var(--bg3);border:1px solid var(--border);color:var(--text2);border-radius:6px;cursor:pointer;font-size:.78rem;transition:all .2s;margin:.2rem;}
.btn:hover{border-color:var(--warm);color:var(--warm);}
.btn.on{background:var(--warm);color:#000;border-color:var(--warm);}
input[type=range]{-webkit-appearance:none;background:var(--bg3);height:4px;border-radius:2px;outline:none;flex:1;min-width:100px;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--warm);border-radius:50%;cursor:pointer;}
.sr{display:flex;align-items:center;gap:.8rem;margin:.4rem 0;flex-wrap:wrap;}
.sl{font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:var(--text3);min-width:100px;}
.sv{font-family:'IBM Plex Mono',monospace;font-size:.8rem;color:var(--warm);min-width:40px;}

/* ── Table ──────────────────────────────────────────────── */
.T{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem;}
.T th{background:var(--bg3);padding:.6rem .8rem;text-align:left;font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--teal);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);}
.T td{padding:.55rem .8rem;border-bottom:1px solid rgba(44,48,72,.5);color:var(--text2);}
.T td:first-child{font-family:'IBM Plex Mono',monospace;color:var(--text);}

/* ── Flow Diagram ───────────────────────────────────────── */
.flow{display:flex;flex-direction:column;align-items:center;gap:0;margin:1.5rem 0;}
.fb{padding:.7rem 1.3rem;border:1px solid var(--border);border-radius:10px;font-size:.9rem;text-align:center;background:var(--surface);min-width:200px;max-width:100%;transition:all .3s;}
.fb:hover{border-color:var(--warm);transform:scale(1.01);}
.fb .fl{font-family:'IBM Plex Mono',monospace;font-size:.6rem;color:var(--text4);text-transform:uppercase;letter-spacing:.08em;}
.fb .fm{margin-top:.15rem;}
.fa{color:var(--text4);font-size:1rem;padding:.15rem 0;}

/* ── Two Column ─────────────────────────────────────────── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:1rem 0;}
@media(max-width:680px){.two{grid-template-columns:1fr;}}

/* ── Quiz ───────────────────────────────────────────────── */
.quiz{background:var(--surface2);border:1px solid var(--border2);border-radius:12px;padding:1.3rem;margin:1.5rem 0;}
.quiz-q{font-family:'Outfit',sans-serif;font-weight:600;font-size:1rem;color:var(--text);margin-bottom:.8rem;}
.quiz-o{display:flex;flex-direction:column;gap:.4rem;}
.quiz-o label{display:flex;align-items:center;gap:.6rem;padding:.5rem .8rem;border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:.9rem;color:var(--text2);transition:all .2s;}
.quiz-o label:hover{border-color:var(--teal);background:rgba(92,201,181,.03);}
.quiz-o input{accent-color:var(--teal);}
.quiz-fb{margin-top:.8rem;padding:.6rem .8rem;border-radius:8px;font-size:.9rem;display:none;}
.quiz-fb.right{display:block;background:rgba(92,232,142,.08);color:var(--green);border:1px solid rgba(92,232,142,.2);}
.quiz-fb.wrong{display:block;background:rgba(232,106,106,.08);color:var(--red);border:1px solid rgba(232,106,106,.2);}

/* ── Video (Manim embeds) ───────────────────────────────── */
.manim-wrap{border-radius:10px;overflow:hidden;margin:1.2rem 0;border:1px solid var(--border);background:#000;}
.manim-wrap video{width:100%;display:block;}
.manim-caption{font-family:'IBM Plex Mono',monospace;font-size:.65rem;color:var(--text4);text-align:center;padding:.4rem;background:var(--bg2);}

/* ── Footer ─────────────────────────────────────────────── */
.footer{text-align:center;padding:3rem 1rem;color:var(--text4);font-size:.85rem;border-top:1px solid var(--border);font-family:'IBM Plex Mono',monospace;}