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

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

/* ── Variables (Dark — default) ────────────────────────── */
:root {
  --bg:       #0a0c12;
  --bg2:      #10131c;
  --bg3:      #191e2e;
  --surface:  #141826;
  --surface2: #191e2e;
  --border:   #232a3b;
  --border2:  #313a52;
  --text:     #e7e2d9;
  --text2:    #a7a094;
  --text3:    #6c665d;
  --text4:    #4a4640;
  --warm:     #e8a87c;
  --warm2:    #d4785a;
  --teal:     #5cc9b5;
  --teal2:    #3d9e8d;
  --blue:     #6b9eff;
  --purple:   #b07aff;
  --pink:     #e87aaa;
  --yellow:   #e8d06a;
  --green:    #5ce88e;
  --red:      #e86a6a;
  --code-bg:  #0a0c12;

  /* Main-site aliases */
  --bg-elevated: var(--bg2);
  --bg-card: var(--surface);
  --bg-code: var(--code-bg);
  --bg-viz: var(--bg2);
  --border-hover: var(--border2);
  --text-dim: var(--text2);
  --text-muted: var(--text3);
  --orange: var(--warm);
  --cyan: var(--blue);

  /* Fonts — default preset: Editorial (DM Serif Display / Outfit / Space Mono).
     Runtime presets override these via html[data-em-font] (see js/ambient.js). */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font: 'Outfit', -apple-system, sans-serif;
  --font-heading: 'Outfit', sans-serif;
  --font-mono: 'Space Mono', 'IBM Plex Mono', monospace;

  /* Layout */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
}

/* ── Variables (Light) ─────────────────────────────────── */
[data-theme="light"] {
  --bg:       #f6f7fa;
  --bg2:      #eef0f5;
  --bg3:      #e1e4ec;
  --surface:  #ffffff;
  --surface2: #f3f4f8;
  --border:   #e2e5ec;
  --border2:  #c9cdd9;
  --text:     #1c1e26;
  --text2:    #4c5160;
  --text3:    #797e8d;
  --text4:    #a8adba;
  --warm:     #c47a4a;
  --warm2:    #a8603a;
  --teal:     #2a9b86;
  --teal2:    #1e7c6a;
  --blue:     #3d6fd4;
  --purple:   #7c4dcc;
  --pink:     #c44e78;
  --yellow:   #a89030;
  --green:    #2a9e52;
  --red:      #c44040;
  --code-bg:  #0a0c12; /* code stays dark */
  color-scheme: light;
}

/* ── Reset ──────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.85;overflow-x:hidden;transition:background 0.5s var(--ease-spring),color 0.5s var(--ease-spring);}
::selection{background:var(--warm);color:#fff;}
::-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:var(--font-mono);font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:var(--text3);margin-bottom:1.5rem;}
.hero h1{font-family:var(--font-display);font-style:italic;font-variation-settings:'opsz' 144;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:var(--font-mono);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:var(--font-heading);font-weight:800;font-size:2rem;color:var(--warm);}
.stat-l{font-family:var(--font-mono);font-size:.65rem;color:var(--text4);text-transform:uppercase;letter-spacing:.12em;}
.go-btn{font-family:var(--font-heading);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:var(--bg);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:var(--font-mono);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:var(--font-display);font-style:italic;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:var(--font-heading);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:var(--font-mono);}

/* ── Callouts ───────────────────────────────────────────── */
.call{border-left:3px solid var(--teal);background:var(--surface);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:var(--surface);}
.call.idea{border-left-color:var(--yellow);background:var(--surface);}
.call.check{border-left-color:var(--green);background:var(--surface);}
.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:var(--font-mono);font-size:.82rem;line-height:1.8;position:relative;color:#a9a196;}
pre.code .tag{position:absolute;top:.4rem;right:.7rem;font-size:.55rem;color:#4a453f;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:var(--font-mono);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;max-width:100%;}
.btn{font-family:var(--font-mono);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:#fff;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:var(--font-mono);font-size:.75rem;color:var(--text3);min-width:100px;}
.sv{font-family:var(--font-mono);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:var(--font-mono);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 var(--border);color:var(--text2);}
.T td:first-child{font-family:var(--font-mono);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:var(--font-mono);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:var(--font-heading);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:var(--surface);}
.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:var(--surface);color:var(--green);border:1px solid var(--green);}
.quiz-fb.wrong{display:block;background:var(--surface);color:var(--red);border:1px solid var(--red);}

/* ── 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:var(--font-mono);font-size:.65rem;color:var(--text4);text-align:center;padding:.4rem;background:var(--bg2);}

/* ── Mastery Engine ────────────────────────────────────────
   Challenge components for active learning:
   derivation, break-lab, design, adversarial quiz,
   implementation checkpoint, bridge, gate
   ──────────────────────────────────────────────────────── */

/* Shared challenge chrome */
.challenge{border:1px solid var(--border2);border-radius:14px;margin:1.8rem 0;overflow:hidden;background:var(--surface);}
.challenge-head{display:flex;align-items:center;gap:.6rem;padding:1rem 1.3rem;cursor:pointer;user-select:none;transition:background .2s;}
.challenge-head:hover{background:var(--surface2);}
.challenge-icon{font-size:1rem;line-height:1;flex-shrink:0;}
.challenge-type{font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;color:var(--warm2);flex-shrink:0;}
.challenge-title{font-family:var(--font-heading);font-weight:600;font-size:.95rem;color:var(--text);flex:1;margin-left:.3rem;}
.challenge-chevron{color:var(--text4);transition:transform .25s;font-size:.8rem;flex-shrink:0;}
.challenge.open .challenge-chevron{transform:rotate(90deg);}
.challenge-body{display:none;padding:0 1.3rem 1.3rem;}
.challenge.open .challenge-body{display:block;animation:fadeIn .3s ease;}
.challenge-done{display:inline-block;font-family:var(--font-mono);font-size:.6rem;color:var(--green);letter-spacing:.08em;margin-left:.5rem;opacity:0;transition:opacity .3s;}
.challenge.attempted .challenge-done{opacity:1;}

/* ── 1. Derivation Challenge ──────────────────────────── */
.derivation-challenge{border-left:3px solid var(--warm);}
.derivation-challenge .challenge-head{border-bottom:1px solid transparent;}
.derivation-challenge.open .challenge-head{border-bottom-color:var(--border);}
.derive-prompt{font-size:1.02rem;line-height:1.75;margin-bottom:1.2rem;color:var(--text);}
.derive-hint{margin:.6rem 0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg2);}
.derive-hint-btn{display:flex;align-items:center;gap:.5rem;width:100%;padding:.7rem 1rem;background:none;border:none;color:var(--text3);font-family:var(--font-mono);font-size:.75rem;cursor:pointer;transition:all .2s;text-align:left;}
.derive-hint-btn:hover{color:var(--warm);background:var(--surface2);}
.derive-hint-btn .hint-n{color:var(--warm2);font-weight:600;}
.derive-hint-content{display:none;padding:.6rem 1rem 1rem;font-size:.95rem;color:var(--text2);line-height:1.7;border-top:1px solid var(--border);}
.derive-hint.revealed .derive-hint-content{display:block;animation:fadeIn .3s ease;}
.derive-hint.revealed .derive-hint-btn{color:var(--warm);opacity:.6;}
.derive-reveal{margin-top:1rem;}
.derive-reveal-btn{display:flex;align-items:center;gap:.5rem;padding:.7rem 1.2rem;background:var(--surface2);border:1px solid var(--warm2);border-radius:8px;color:var(--warm);font-family:var(--font-mono);font-size:.78rem;cursor:pointer;transition:all .2s;letter-spacing:.03em;}
.derive-reveal-btn:hover{background:var(--bg3);transform:translateY(-1px);}
.derive-answer{display:none;margin-top:1rem;padding:1.2rem;background:var(--bg3);border:1px solid var(--border2);border-radius:10px;line-height:1.75;}
.derive-answer.shown{display:block;animation:fadeIn .4s ease;}

/* ── 2. Break-It Lab ──────────────────────────────────── */
.break-lab{border-left:3px solid var(--red);}
.break-lab .challenge-type{color:var(--red);}
.lab-desc{font-size:.95rem;color:var(--text2);margin-bottom:1rem;line-height:1.7;}
.lab-toggles{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem;}
.lab-toggle{display:flex;align-items:center;gap:.8rem;padding:.65rem 1rem;background:var(--bg2);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .2s;user-select:none;}
.lab-toggle:hover{border-color:var(--text4);}
.lab-toggle.active{border-color:var(--red);background:var(--surface2);}
.lab-switch{width:36px;height:20px;background:var(--bg3);border:1px solid var(--border2);border-radius:10px;position:relative;flex-shrink:0;transition:all .2s;}
.lab-switch::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;background:var(--text4);border-radius:50%;transition:all .2s;}
.lab-toggle.active .lab-switch{background:var(--surface2);border-color:var(--red);}
.lab-toggle.active .lab-switch::after{left:18px;background:var(--red);}
.lab-label{font-family:var(--font-mono);font-size:.8rem;color:var(--text2);flex:1;}
.lab-toggle.active .lab-label{color:var(--red);}
.lab-status{font-family:var(--font-mono);font-size:.7rem;color:var(--text4);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;}
.lab-toggle.active .lab-status{color:var(--red);}
.lab-explain{display:none;margin-top:.5rem;padding:.8rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;font-size:.88rem;color:var(--text2);line-height:1.65;}
.lab-toggle.active+.lab-explain{display:block;animation:fadeIn .3s ease;}

/* ── 3. Design Challenge ──────────────────────────────── */
.design-challenge{border-left:3px solid var(--blue);}
.design-challenge .challenge-type{color:var(--blue);}
.design-brief{font-size:1rem;line-height:1.75;margin-bottom:1rem;color:var(--text);}
.design-constraints{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.6rem;margin-bottom:1.2rem;}
.design-constraint{padding:.6rem .9rem;background:var(--bg2);border:1px solid var(--border);border-radius:8px;font-family:var(--font-mono);font-size:.78rem;}
.design-constraint .dc-label{color:var(--text4);font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.15rem;}
.design-constraint .dc-value{color:var(--blue);font-weight:500;}
.design-decisions{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem;}
.design-decision{font-family:var(--font-heading);font-size:.9rem;color:var(--text2);padding:.4rem 0;}
.design-decision strong{color:var(--text);}
.design-area{width:100%;min-height:120px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:1rem;color:var(--text);font-family:var(--font-mono);font-size:.82rem;line-height:1.7;resize:vertical;outline:none;transition:border-color .2s;}
.design-area:focus{border-color:var(--blue);}
.design-area::placeholder{color:var(--text4);}

/* ── 4. Adversarial Quiz ──────────────────────────────── */
.adv-quiz{background:var(--surface2);border:1px solid var(--border2);border-radius:12px;padding:1.3rem;margin:1.5rem 0;border-left:3px solid var(--purple);}
.adv-quiz .quiz-q{color:var(--text);margin-bottom:.6rem;}
.adv-scenario{font-size:.92rem;color:var(--text2);margin-bottom:1rem;padding:.7rem 1rem;background:var(--bg3);border-radius:8px;line-height:1.65;border-left:2px solid var(--purple);}
.adv-followup{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border);}
.adv-followup-q{font-family:var(--font-heading);font-weight:600;font-size:.9rem;color:var(--text2);margin-bottom:.6rem;}
.adv-text-input{width:100%;padding:.7rem 1rem;background:var(--bg2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--font-mono);font-size:.82rem;outline:none;transition:border-color .2s;}
.adv-text-input:focus{border-color:var(--purple);}
.adv-text-input::placeholder{color:var(--text4);}
.adv-model-answer{display:none;margin-top:.8rem;padding:.8rem 1rem;background:var(--surface);border:1px solid var(--purple);border-radius:8px;font-size:.88rem;color:var(--text2);line-height:1.65;}
.adv-model-answer.shown{display:block;animation:fadeIn .3s ease;}
.adv-reveal-btn{margin-top:.6rem;padding:.5rem 1rem;background:var(--surface2);border:1px solid var(--purple);border-radius:6px;color:var(--purple);font-family:var(--font-mono);font-size:.75rem;cursor:pointer;transition:all .2s;}
.adv-reveal-btn:hover{background:var(--bg3);}

/* ── 5. Implementation Checkpoint ─────────────────────── */
.impl-checkpoint{border-left:3px solid var(--green);}
.impl-checkpoint .challenge-type{color:var(--green);}
.impl-prompt{font-size:.95rem;color:var(--text);margin-bottom:1rem;line-height:1.7;}
.impl-signature{background:var(--code-bg);border:1px solid var(--border);border-radius:10px;padding:1.1rem 1.3rem;margin:1rem 0;font-family:var(--font-mono);font-size:.82rem;line-height:1.8;color:#a9a196;position:relative;}
.impl-signature .tag{position:absolute;top:.4rem;right:.7rem;font-size:.55rem;color:#4a453f;text-transform:uppercase;letter-spacing:.12em;}
.impl-test{padding:.7rem 1rem;background:var(--bg2);border:1px solid var(--border);border-radius:8px;font-family:var(--font-mono);font-size:.78rem;color:var(--teal);margin:.8rem 0;line-height:1.7;}
.impl-test-label{font-size:.6rem;color:var(--text4);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.3rem;}
.impl-editor{width:100%;min-height:180px;background:var(--code-bg);border:1px solid var(--border);border-radius:10px;padding:1.1rem 1.3rem;color:#e2ddd5;font-family:var(--font-mono);font-size:.82rem;line-height:1.8;resize:vertical;outline:none;transition:border-color .2s;tab-size:4;white-space:pre;overflow-x:auto;margin:.8rem 0;}
.impl-editor:focus{border-color:var(--green);}
.impl-editor::placeholder{color:#4a453f;}
.impl-solution{display:none;margin-top:1rem;}
.impl-solution.shown{display:block;animation:fadeIn .4s ease;}
.impl-bonus{margin-top:1rem;padding:.8rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;font-size:.9rem;color:var(--text2);line-height:1.65;}
.impl-bonus strong{color:var(--yellow);}

/* ── 6. Bridge (Cross-Domain Connection) ──────────────── */
.bridge{border-left:3px solid var(--teal);background:var(--surface);padding:1.2rem 1.4rem;border-radius:0 12px 12px 0;margin:1.8rem 0;position:relative;overflow:hidden;}
.bridge::before{content:'';position:absolute;top:0;right:0;width:60px;height:100%;background:linear-gradient(90deg,transparent,rgba(92,201,181,.04));pointer-events:none;}
.bridge-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem;}
.bridge-icon{font-size:.9rem;}
.bridge-label{font-family:var(--font-mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.14em;color:var(--teal2);}
.bridge-title{font-family:var(--font-heading);font-weight:600;font-size:1rem;color:var(--teal);margin-bottom:.5rem;}
.bridge-body{font-size:.95rem;line-height:1.75;color:var(--text2);}
.bridge-body strong{color:var(--teal);}
.bridge-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:.8rem 0;}
.bridge-side{padding:.7rem .9rem;background:var(--bg2);border:1px solid var(--border);border-radius:8px;font-size:.88rem;line-height:1.6;}
.bridge-side-label{font-family:var(--font-mono);font-size:.6rem;color:var(--text4);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.3rem;}
.bridge-question{font-style:italic;color:var(--teal);margin-top:.6rem;font-size:.92rem;}
.bridge a{color:var(--teal);text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px;transition:text-decoration-color .2s;}
.bridge a:hover{text-decoration-color:var(--teal);}
@media(max-width:600px){.bridge-pair{grid-template-columns:1fr;}}

/* ── 7. Progression Gate ──────────────────────────────── */
.gate{border:1px solid var(--border2);border-radius:14px;margin:2rem 0;overflow:hidden;background:linear-gradient(135deg,var(--surface),var(--bg2));}
.gate-head{padding:1.2rem 1.3rem;border-bottom:1px solid var(--border);}
.gate-label{font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;color:var(--warm2);margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem;}
.gate-label::before{content:'';display:inline-block;width:6px;height:6px;background:var(--warm);border-radius:50%;animation:gatePulse 2s ease-in-out infinite;}
@keyframes gatePulse{0%,100%{opacity:.4;}50%{opacity:1;}}
.gate-question{font-family:var(--font-heading);font-weight:600;font-size:1rem;color:var(--text);line-height:1.5;}
.gate-body{padding:1.2rem 1.3rem;}
.gate-area{width:100%;min-height:100px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:1rem;color:var(--text);font-family:'Crimson Pro',Georgia,serif;font-size:1rem;line-height:1.75;resize:vertical;outline:none;transition:border-color .2s;}
.gate-area:focus{border-color:var(--warm);}
.gate-area::placeholder{color:var(--text4);font-style:italic;}
.gate-actions{display:flex;align-items:center;gap:.8rem;margin-top:1rem;flex-wrap:wrap;}
.gate-check{padding:.6rem 1.3rem;background:linear-gradient(135deg,var(--warm),var(--warm2));border:none;border-radius:8px;color:#fff;font-family:var(--font-mono);font-size:.78rem;cursor:pointer;transition:all .2s;letter-spacing:.03em;}
.gate-check:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(232,168,124,.2);}
.gate-skip{padding:.5rem 1rem;background:none;border:1px solid var(--border);border-radius:8px;color:var(--text4);font-family:var(--font-mono);font-size:.72rem;cursor:pointer;transition:all .2s;}
.gate-skip:hover{border-color:var(--text3);color:var(--text3);}
.gate-model{display:none;margin-top:1rem;padding:1rem;background:var(--bg3);border:1px solid var(--border2);border-radius:10px;font-size:.92rem;line-height:1.75;color:var(--text2);}
.gate-model.shown{display:block;animation:fadeIn .4s ease;}
.gate-model-label{font-family:var(--font-mono);font-size:.6rem;color:var(--teal);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.4rem;}
.gate-passed{display:none;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.72rem;color:var(--green);}
.gate.cleared .gate-passed{display:flex;}
.gate.cleared .gate-area{border-color:var(--green);opacity:.7;}
.gate.cleared .gate-check{opacity:.5;pointer-events:none;}

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

/* ── Light Mode Overrides ──────────────────────────────── */
[data-theme="light"] .hero::before{background:radial-gradient(ellipse 50% 60% at 50% 40%,rgba(196,122,74,.08),transparent 70%),radial-gradient(ellipse 40% 40% at 30% 70%,rgba(42,155,134,.06),transparent 60%);}
[data-theme="light"] .nav{background:rgba(245,240,232,.92);}
[data-theme="light"] pre.code,[data-theme="light"] .impl-signature,[data-theme="light"] .impl-editor{background:var(--code-bg);color:#a9a196;border-color:var(--border);}
[data-theme="light"] .impl-editor{color:#e2ddd5;}
[data-theme="light"] .impl-editor::placeholder{color:#4a453f;}
[data-theme="light"] pre.code .tag,[data-theme="light"] .impl-signature .tag{color:#4a453f;}
[data-theme="light"] .math{background:var(--surface);color:var(--yellow);}