*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0a0f;--surface:#12121a;--card:#1a1a2e;--border:#2a2a3e;--accent:#6c63ff;--accent2:#00d2ff;--accent3:#ff6b6b;--text:#e0e0e0;--text2:#a0a0b0;--green:#00e676;--orange:#ffab40;--red:#ff6b6b}
body{font-family:Inter,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
nav{display:none}
.tab-nav{position:sticky;top:0;z-index:200;background:rgba(8,8,14,.92);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid rgba(108,99,255,.18);display:flex;align-items:center;height:46px;overflow:hidden;box-shadow:0 1px 20px rgba(0,0,0,.4)}
.tab-nav-back{flex-shrink:0;padding:0 1.1rem;height:100%;display:flex;align-items:center;gap:.4rem;font-weight:700;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);text-decoration:none;border-right:1px solid rgba(108,99,255,.15);white-space:nowrap;transition:background .25s,color .25s}
.tab-nav-back:hover{background:rgba(108,99,255,.12);color:#fff}
.tab-nav-links{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;flex:1;height:100%;align-items:center;padding:0 .4rem;gap:.1rem}
.tab-nav-links::-webkit-scrollbar{display:none}
.tab-nav-links a{flex-shrink:0;padding:.28rem .85rem;display:flex;align-items:center;color:rgba(160,160,176,.7);text-decoration:none;font-size:.75rem;font-weight:600;letter-spacing:.03em;white-space:nowrap;border-radius:20px;border:1px solid transparent;transition:color .22s,background .22s,border-color .22s,box-shadow .22s;position:relative}
.tab-nav-links a:hover{color:rgba(255,255,255,.85);background:rgba(108,99,255,.1);border-color:rgba(108,99,255,.2)}
.tab-nav-links a.active{color:#fff;background:linear-gradient(135deg,rgba(108,99,255,.35),rgba(0,210,255,.2));border-color:rgba(108,99,255,.5);box-shadow:0 0 14px rgba(108,99,255,.35),inset 0 1px 0 rgba(255,255,255,.08);text-shadow:0 0 12px rgba(108,99,255,.8)}
.tab-nav-arrow{flex-shrink:0;width:32px;height:100%;background:transparent;border:none;border-left:1px solid rgba(108,99,255,.12);color:rgba(160,160,176,.5);font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,background .2s;line-height:1;padding:0}
.tab-nav-arrow:hover{color:var(--accent);background:rgba(108,99,255,.1)}
.tab-nav-arrow-left{border-left:none;border-right:1px solid rgba(108,99,255,.12)}
.hero{padding:4rem 2rem 2rem;max-width:1000px;margin:0 auto;text-align:center}
.unit-badge{display:inline-block;padding:.4rem 1.2rem;background:rgba(108,99,255,.1);border:1px solid rgba(108,99,255,.3);border-radius:50px;font-size:.8rem;color:var(--accent);text-transform:uppercase;letter-spacing:2px;margin-bottom:1.5rem;font-weight:600}
h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:900;background:linear-gradient(135deg,#6c63ff,#8b5cf6,#00d2ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;margin-bottom:1rem}
.hero p{color:var(--text2);font-size:1.1rem;line-height:1.6}
.toc{max-width:1000px;margin:2rem auto;padding:0 2rem}
.toc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem}
.toc-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.9rem 1.2rem;cursor:pointer;transition:all .2s;text-decoration:none;color:var(--text);display:block}
.toc-item:hover{border-color:var(--accent);transform:translateY(-2px)}
.toc-num{font-size:.7rem;color:var(--accent);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.toc-title{font-size:.9rem;font-weight:600;margin-top:.2rem}
.content{max-width:1000px;margin:0 auto;padding:2rem}
.section{margin-bottom:3rem;scroll-margin-top:80px}
.section-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.section-num{background:linear-gradient(135deg,#a855f7,#6c63ff,#00d2ff);color:#fff;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;flex-shrink:0}
h2{font-size:1.5rem;font-weight:800;color:var(--text)}
h3{font-size:1.1rem;font-weight:700;color:var(--accent);margin:1.5rem 0 .8rem}
p{color:var(--text2);line-height:1.8;margin-bottom:1rem}
.analogy{background:rgba(0,230,118,.05);border:1px solid rgba(0,230,118,.2);border-left:4px solid var(--green);border-radius:8px;padding:1.2rem 1.5rem;margin:1.2rem 0}
.analogy strong{color:var(--green);display:block;margin-bottom:.4rem;font-size:.8rem;text-transform:uppercase;letter-spacing:1px}
.concept-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.5rem;margin:1.2rem 0}
.concept-box h4{font-size:.9rem;font-weight:700;color:var(--accent);margin-bottom:.8rem}
.warn{background:rgba(255,107,107,.05);border:1px solid rgba(255,107,107,.2);border-left:4px solid var(--red);border-radius:8px;padding:1rem 1.2rem;margin:1rem 0}
.warn strong{color:var(--red);display:block;margin-bottom:.3rem;font-size:.8rem;text-transform:uppercase;letter-spacing:1px}
.tip{background:rgba(0,210,255,.05);border:1px solid rgba(0,210,255,.2);border-left:4px solid var(--accent);border-radius:8px;padding:1rem 1.2rem;margin:1rem 0}
.tip strong{color:var(--accent);display:block;margin-bottom:.3rem;font-size:.8rem;text-transform:uppercase;letter-spacing:1px}
pre{background:#0d0d16;border:1px solid var(--border);border-radius:10px;padding:1.5rem;overflow-x:auto;margin:1rem 0;position:relative}
code{font-family:'JetBrains Mono',monospace;font-size:.85rem;line-height:1.7;color:#e0e0e0}
.kw{color:#c678dd}.str{color:#98c379}.num{color:#d19a66}.fn{color:#61afef}.cls{color:#e5c07b}.type{color:#56b6c2}.cmt{color:#5c6370}
.table-wrap{overflow-x:auto;margin:1.2rem 0}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th{background:rgba(0,210,255,.1);color:var(--accent);padding:.8rem 1rem;text-align:left;font-weight:700;border:1px solid var(--border)}
td{padding:.7rem 1rem;border:1px solid var(--border);color:var(--text2)}
tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.mnemonic{background:rgba(255,171,64,.05);border:1px solid rgba(255,171,64,.2);border-left:4px solid var(--orange);border-radius:8px;padding:1rem 1.2rem;margin:1rem 0}
.mnemonic strong{color:var(--orange);display:block;margin-bottom:.3rem;font-size:.8rem;text-transform:uppercase;letter-spacing:1px}
.quiz-box{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.5rem;margin:1.5rem 0}
.quiz-box h4{color:var(--accent);margin-bottom:1rem}
.quiz-q{margin-bottom:1rem;padding:.8rem;background:var(--surface);border-radius:8px;cursor:pointer;border:1px solid transparent;transition:all .2s}
.quiz-q:hover{border-color:var(--accent)}
.quiz-q .q{font-weight:600;color:var(--text);margin-bottom:.3rem;font-size:.9rem}
.quiz-q .a{color:var(--green);font-size:.85rem;display:none;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border)}
.quiz-q.open .a{display:block}
.practice-box{background:rgba(0,210,255,.05);border:1px solid rgba(0,210,255,.25);border-left:4px solid var(--accent);border-radius:12px;padding:1.5rem;margin:1.5rem 0}
.practice-box .pb-title{font-size:.75rem;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:2px;margin-bottom:1rem}
.spoiler-btn{display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;padding:.4rem .9rem;background:rgba(0,210,255,.12);border:1px solid rgba(0,210,255,.3);border-radius:6px;color:var(--accent);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .2s}
.spoiler-btn:hover{background:rgba(0,210,255,.25)}
.spoiler{display:none;margin-top:.8rem;padding:1rem;background:#0d0d16;border-radius:8px;border:1px solid var(--border)}
.spoiler.open{display:block}
.step{display:flex;gap:.8rem;margin:.6rem 0;align-items:flex-start}
.step-num{background:var(--accent);color:#000;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;flex-shrink:0;margin-top:2px}
.step-text{color:var(--text2);font-size:.9rem;line-height:1.6}
.section-divider{border:none;border-top:2px solid var(--border);margin:3rem 0;position:relative}
.section-divider::after{content:attr(data-label);position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--bg);padding:0 1rem;color:var(--text2);font-size:.75rem;text-transform:uppercase;letter-spacing:2px;font-weight:600}
.mem-lock{background:rgba(255,171,64,.05);border:1px solid rgba(255,171,64,.2);border-left:4px solid var(--orange);border-radius:8px;padding:1rem 1.2rem;margin:1rem 0}
.mem-lock strong{color:var(--orange);display:block;margin-bottom:.3rem;font-size:.8rem;text-transform:uppercase;letter-spacing:1px}
.fp-output{padding:1rem 1.2rem;background:rgba(0,230,118,.04);border:1px solid var(--border);border-radius:8px;margin:.5rem 0}
.fo-label{font-size:.7rem;font-weight:800;color:var(--green);text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem}
.fo-code{display:block;font-family:'JetBrains Mono',monospace;font-size:.82rem;color:#c3e88d;white-space:pre;line-height:1.7}
.exam-box{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.5rem;margin:1.2rem 0;position:relative;overflow:hidden}
.exam-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#00d2ff,#6c63ff)}
.exam-box .ex-title{font-size:.7rem;color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem}
.tag-yes{color:var(--green);font-weight:700}
.tag-no{color:var(--red);font-weight:700}
.compiler-sidebar{position:fixed;right:0;top:64px;width:35%;height:calc(100vh - 64px);background:var(--surface);border-left:2px solid var(--accent);box-shadow:-10px 0 30px rgba(0,0,0,.5);z-index:1000;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.compiler-sidebar.closed{transform:translateX(100%)}
.resizer-handle{position:absolute;left:-5px;top:0;width:10px;height:100%;cursor:ew-resize;z-index:1002}
.compiler-content{display:flex;flex-direction:column;height:100%;width:100%}
.compiler-header{padding:12px 20px;background:var(--card);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.compiler-header h3{margin:0;font-size:.85rem;color:var(--accent);text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:8px}
.compiler-toggle{position:fixed;right:20px;top:80px;z-index:1001;width:45px;height:45px;background:var(--accent);color:#fff;border:none;border-radius:50%;cursor:pointer;box-shadow:0 4px 15px rgba(108,99,255,.4);font-size:1.2rem;transition:all .3s;display:flex;align-items:center;justify-content:center}
.compiler-frame{flex:1;border:none;width:100%;background:#1e1e1e}
@media (min-width: 901px) {
  body.sidebar-open .hero, body.sidebar-open .toc, body.sidebar-open .content {
    width: calc(100% - var(--sidebar-actual-width, 35%) - 2rem);
    left: calc(var(--sidebar-actual-width, 35%) / -2);
  }
}

@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    width: 100vw !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  main {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }
  body.sidebar-open .hero, body.sidebar-open .toc, body.sidebar-open .content,
  .hero, .toc, .content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    padding: 1.2rem !important;
    box-sizing: border-box !important;
  }
  .compiler-sidebar, .compiler-toggle { display: none !important; }
  pre, .table-wrap, .section, .concept-box, .exam-box, .practice-box, .full-prog {
    max-width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
  }
}

.hero,.toc,.content{position:relative;left:0;width:100%;transition:width .4s cubic-bezier(.4,0,.2,1), left .4s cubic-bezier(.4,0,.2,1)}
.copy-btn{position:absolute;top:10px;right:10px;padding:6px;background:rgba(30,30,45,.7);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:rgba(255,255,255,.6);cursor:pointer;transition:all .2s;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0}
pre:hover .copy-btn{opacity:1}
.copy-btn:hover{background:var(--accent);color:#fff;opacity:1}
.copy-btn svg{width:16px;height:16px;stroke-width:2}
.copy-btn.copied{border-color:var(--green);color:var(--green);background:rgba(0,230,118,.1);opacity:1}



/* --- Tab Nav replaces old nav --- */


/* ═══ Practice & Spoiler Additions ═══ */
.practice-box{background:rgba(14,165,233,0.07);border:1px solid rgba(14,165,233,0.25);border-radius:12px;padding:1.2rem 1.4rem;margin:1rem 0;}
.pb-title{font-weight:700;color:var(--accent);margin-bottom:.6rem;font-size:.95rem;}
.spoiler-btn{background:rgba(108,99,255,0.15);border:1px solid rgba(108,99,255,0.35);color:var(--accent);padding:.35rem .9rem;border-radius:6px;cursor:pointer;font-size:.85rem;margin:.4rem 0;transition:background .2s;}
.spoiler-btn:hover{background:rgba(108,99,255,0.3);}
.spoiler{display:none;margin-top:.8rem;padding:1rem;background:rgba(0,230,118,0.06);border-left:3px solid var(--green);border-radius:0 8px 8px 0;}
.spoiler.open{display:block;}
.tag-yes{color:var(--green);font-weight:700;}
.tag-no{color:#ff6b6b;font-weight:700;}
/* ── Mastery & Practice Sections ── */
.practice-box,.predict-box,.debug-box,.edge-box,.recall-box{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:1.2rem 1.4rem;margin-top:1rem}
.pb-title,.prb-title,.db-title,.eb-title,.rb-title{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.prob{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;padding:1rem 1.2rem;margin-bottom:1rem}
.pnum{font-size:.75rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem}
.pstmt{color:var(--text2);font-size:.9rem;line-height:1.6}
.exam-prog{background:rgba(255,171,64,.05);border:1px solid rgba(255,171,64,.2);border-radius:12px;padding:1.2rem 1.4rem;margin-bottom:1.2rem}
.ep-num{font-size:.72rem;font-weight:700;color:var(--orange);text-transform:uppercase;letter-spacing:.08em}
.ep-title{font-size:1rem;font-weight:700;color:var(--text);margin:.3rem 0}
.ep-marks{display:inline-block;background:rgba(255,171,64,.15);color:var(--orange);font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:20px;margin-bottom:.6rem}
.ep-req{color:var(--text2);font-size:.88rem;line-height:1.6;margin-bottom:.8rem}
.full-prog{background:rgba(0,210,255,.04);border:1px solid rgba(0,210,255,.15);border-radius:12px;padding:1.2rem 1.4rem;margin-bottom:1.4rem}
.fp-title{font-size:.95rem;font-weight:700;color:var(--accent);margin-bottom:.8rem}
.fp-deep,.fp-dry{background:rgba(108,99,255,.06);border:1px solid rgba(108,99,255,.15);border-radius:8px;padding:.8rem 1rem;margin-top:.8rem}
.fd-label,.fdr-label{font-size:.72rem;font-weight:700;color:#818cf8;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.6rem}
.dr-row{display:flex;gap:.8rem;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.85rem;flex-wrap:wrap}
.dr-label{color:var(--accent);font-weight:600;min-width:130px;flex-shrink:0}
.dr-desc{color:var(--text2);line-height:1.5}


*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0a0f;--surface:#12121a;--card:#1a1a2e;--border:#2a2a3e;--accent:#6c63ff;--accent2:#00d2ff;--accent3:#ff6b6b;--text:#e0e0e0;--text2:#a0a0b0;--green:#00e676;--orange:#ffab40;--red:#ff6b6b}
body{font-family:Inter,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
nav{position:sticky;top:0;z-index:100;background:rgba(10,10,15,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:.6rem 2rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.nav-logo{font-weight:800;font-size:1.1rem;color:var(--accent);text-decoration:none}
.nav-links{display:flex;gap:1rem;margin-left:auto;flex-wrap:wrap}
.nav-links a{color:var(--text2);text-decoration:none;font-size:.85rem;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--accent)}
.hero{padding:4rem 2rem 2rem;max-width:1000px;margin:0 auto;text-align:center}
.unit-badge{display:inline-block;padding:.4rem 1.2rem;background:rgba(108,99,255,.1);border:1px solid rgba(108,99,255,.3);border-radius:50px;font-size:.8rem;color:var(--accent);text-transform:uppercase;letter-spacing:2px;margin-bottom:1.5rem;font-weight:600}
h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:900;background:linear-gradient(135deg,#6c63ff,#8b5cf6,#00d2ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;margin-bottom:1rem}
.hero p{color:var(--text2);font-size:1.1rem;line-height:1.6}
.toc{max-width:1000px;margin:2rem auto;padding:0 2rem}
.toc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem}
.toc-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.9rem 1.2rem;cursor:pointer;transition:all .2s;text-decoration:none;color:var(--text);display:block}
.toc-item:hover{border-color:var(--accent);transform:translateY(-2px)}
.toc-num{font-size:.7rem;color:var(--accent);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.toc-title{font-size:.9rem;font-weight:600;margin-top:.2rem}
.content{max-width:1000px;margin:0 auto;padding:2rem}
.section{margin-bottom:3rem;scroll-margin-top:80px}
.section-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.section-num{background:linear-gradient(135deg,#a855f7,#6c63ff,#00d2ff);color:#fff;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;flex-shrink:0}
h2{font-size:1.5rem;font-weight:800;color:var(--text)}
h3{font-size:1.1rem;font-weight:700;color:var(--accent);margin:1.5rem 0 .8rem}
p{color:var(--text2);line-height:1.8;margin-bottom:1rem}
.analogy{background:rgba(0,230,118,.05);border:1px solid rgba(0,230,118,.2);border-left:4px solid var(--green);border-radius:8px;padding:1.2rem 1.5rem;margin:1.2rem 0}
.analogy strong{color:var(--green);display:block;margin-bottom:.4rem;font-size:.8rem;text-transform:uppercase;letter-spacing:1px}
.concept-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.5rem;margin:1.2rem 0}
.concept-box h4{font-size:.9rem;font-weight:700;color:var(--accent);margin-bottom:.8rem}
.warn{background:rgba(255,107,107,.05);border:1px solid rgba(255,107,107,.2);border-left:4px solid var(--red);border-radius:8px;padding:1rem 1.2rem;margin:1rem 0}
.warn strong{color:var(--red);display:block;margin-bottom:.3rem;font-size:.8rem;text-transform:uppercase;letter-spacing:1px}
.tip{background:rgba(0,210,255,.05);border:1px solid rgba(0,210,255,.2);border-left:4px solid var(--accent);border-radius:8px;padding:1rem 1.2rem;margin:1rem 0}
.tip strong{color:var(--accent);display:block;margin-bottom:.3rem;font-size:.8rem;text-transform:uppercase;letter-spacing:1px}
pre{background:#0d0d16;border:1px solid var(--border);border-radius:10px;padding:1.5rem;overflow-x:auto;margin:1rem 0;position:relative}
code{font-family:'JetBrains Mono',monospace;font-size:.85rem;line-height:1.7;color:#e0e0e0}
.kw{color:#c678dd}.str{color:#98c379}.num{color:#d19a66}.fn{color:#61afef}.cls{color:#e5c07b}.type{color:#56b6c2}.cmt{color:#5c6370}
.table-wrap{overflow-x:auto;margin:1.2rem 0}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th{background:rgba(0,210,255,.1);color:var(--accent);padding:.8rem 1rem;text-align:left;font-weight:700;border:1px solid var(--border)}
td{padding:.7rem 1rem;border:1px solid var(--border);color:var(--text2)}
tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.quiz-box{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.5rem;margin:1.5rem 0}
.quiz-box h4{color:var(--accent);margin-bottom:1rem}
.quiz-q{margin-bottom:1rem;padding:.8rem;background:var(--surface);border-radius:8px;cursor:pointer;border:1px solid transparent;transition:all .2s}
.quiz-q:hover{border-color:var(--accent)}
.quiz-q .q{font-weight:600;color:var(--text);margin-bottom:.3rem;font-size:.9rem}
.quiz-q .a{color:var(--green);font-size:.85rem;display:none;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border)}
.quiz-q.open .a{display:block}
.step{display:flex;gap:.8rem;margin:.6rem 0;align-items:flex-start}
.step-num{background:var(--accent);color:#000;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;flex-shrink:0;margin-top:2px}
.step-text{color:var(--text2);font-size:.9rem;line-height:1.6}
.section-divider{border:none;border-top:2px solid var(--border);margin:3rem 0;position:relative}
.section-divider::after{content:attr(data-label);position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--bg);padding:0 1rem;color:var(--text2);font-size:.75rem;text-transform:uppercase;letter-spacing:2px;font-weight:600}
.mem-lock{background:rgba(255,171,64,.05);border:1px solid rgba(255,171,64,.2);border-left:4px solid var(--orange);border-radius:8px;padding:1rem 1.2rem;margin:1rem 0}
.mem-lock strong{color:var(--orange);display:block;margin-bottom:.3rem;font-size:.8rem;text-transform:uppercase;letter-spacing:1px}
.fp-output{padding:1rem 1.2rem;background:rgba(0,230,118,.04);border:1px solid var(--border);border-radius:8px;margin:.5rem 0}
.fo-label{font-size:.7rem;font-weight:800;color:var(--green);text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem}
.fo-code{display:block;font-family:'JetBrains Mono',monospace;font-size:.82rem;color:#c3e88d;white-space:pre;line-height:1.7}
.exam-box{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.5rem;margin:1.2rem 0;position:relative;overflow:hidden}
.exam-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#00d2ff,#6c63ff)}
.exam-box .ex-title{font-size:.7rem;color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem}
.tag-yes{color:var(--green);font-weight:700}.tag-no{color:var(--red);font-weight:700}
.compiler-sidebar{position:fixed;right:0;top:64px;width:35%;height:calc(100vh - 64px);background:var(--surface);border-left:2px solid var(--accent);box-shadow:-10px 0 30px rgba(0,0,0,.5);z-index:1000;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.compiler-sidebar.closed{transform:translateX(100%)}
.resizer-handle{position:absolute;left:-5px;top:0;width:10px;height:100%;cursor:ew-resize;z-index:1002}
.compiler-content{display:flex;flex-direction:column;height:100%;width:100%}
.compiler-header{padding:12px 20px;background:var(--card);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.compiler-header h3{margin:0;font-size:.85rem;color:var(--accent);text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:8px}
.compiler-toggle{position:fixed;right:20px;top:80px;z-index:1001;width:45px;height:45px;background:var(--accent);color:#fff;border:none;border-radius:50%;cursor:pointer;box-shadow:0 4px 15px rgba(108,99,255,.4);font-size:1.2rem;transition:all .3s;display:flex;align-items:center;justify-content:center}
.compiler-frame{flex:1;border:none;width:100%;background:#1e1e1e}
@media (min-width: 901px) { body.sidebar-open .hero,body.sidebar-open .toc,body.sidebar-open .content{width:calc(100% - var(--sidebar-actual-width,35%) - 2rem);left:calc(var(--sidebar-actual-width,35%) / -2)} }
.copy-btn{position:absolute;top:10px;right:10px;padding:6px;background:rgba(30,30,45,.7);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:rgba(255,255,255,.6);cursor:pointer;transition:all .2s;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0}
pre:hover .copy-btn{opacity:1}
.copy-btn:hover{background:var(--accent);color:#fff;opacity:1}
.copy-btn svg{width:16px;height:16px;stroke-width:2}
.copy-btn.copied{border-color:var(--green);color:var(--green);background:rgba(0,230,118,.1);opacity:1}
@media(max-width:900px){.compiler-sidebar,.compiler-toggle{display:none}.hero,.toc,.content{width:100%;left:0}}


/* --- Common Topbar Fix --- */
nav {
    position: sticky ;
    top: 0 ;
    z-index: 100 ;
    background: rgba(10, 10, 15, 0.95) ;
    backdrop-filter: blur(12px) ;
    border-bottom: 1px solid var(--border) ;
    padding: 0.8rem 2rem ;
    display: flex ;
    align-items: center ;
    gap: 1.5rem ;
    flex-wrap: nowrap ;
    overflow: hidden ;
    width: 100vw ;
    max-width: 100vw ;
    box-sizing: border-box ;
}
.nav-logo {
    font-family: 'Inter', sans-serif ;
    font-weight: 800 ;
    font-size: 1.1rem ;
    color: var(--accent) ;
    text-decoration: none ;
    white-space: nowrap ;
    flex-shrink: 0 ;
}
.nav-links {
    display: flex ;
    gap: 1.2rem ;
    margin-left: auto ;
    flex-wrap: nowrap ;
    align-items: center ;
    overflow-x: auto ;
    white-space: nowrap ;
    -ms-overflow-style: none ;
    scrollbar-width: none ;
    padding-bottom: 5px ;
    scroll-behavior: smooth ;
    flex: 1 ;
    min-width: 0 ;
}
.nav-links::-webkit-scrollbar {
    display: none ;
}
.nav-links a {
    font-family: 'Inter', sans-serif ;
    color: var(--text2) ;
    text-decoration: none ;
    font-size: 0.85rem ;
    font-weight: 500 ;
    transition: color 0.2s ;
    white-space: nowrap ;
    flex-shrink: 0 ;
}
.nav-links a:hover {
    color: var(--accent) ;
}
.nav-links a.active {
    color: var(--accent) ;
    font-weight: 700 ;
    position: relative ;
}
.nav-links a.active::after {
    content: '' ;
    position: absolute ;
    bottom: -6px ;
    left: 0 ;
    width: 100% ;
    height: 2px ;
    background: var(--accent) ;
    border-radius: 2px ;
}
/* ── Mastery & Practice Sections ── */
.spoiler-btn{display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;padding:.4rem .9rem;background:rgba(108,99,255,.12);border:1px solid rgba(108,99,255,.3);border-radius:6px;color:var(--accent);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s}
.spoiler-btn:hover{background:rgba(108,99,255,.25)}
.spoiler{display:none;margin-top:.8rem;padding:1rem;background:#0d0d16;border-radius:8px;border:1px solid var(--border)}
.spoiler.open{display:block}
details.spoiler{display:block}
.practice-box,.predict-box,.debug-box,.edge-box,.recall-box{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:1.2rem 1.4rem;margin-top:1rem}
.pb-title,.prb-title,.db-title,.eb-title,.rb-title{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.prob{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;padding:1rem 1.2rem;margin-bottom:1rem}
.pnum{font-size:.75rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem}
.pstmt{color:var(--text2);font-size:.9rem;line-height:1.6}
.quiz-q{border-left:3px solid var(--accent);padding:.7rem 1rem;margin:.6rem 0;background:rgba(108,99,255,.05);border-radius:0 8px 8px 0;cursor:pointer}
.quiz-q .q{font-weight:600;color:var(--text);margin-bottom:.3rem}
.quiz-q .a{color:var(--text2);font-size:.88rem;line-height:1.6;display:none;margin-top:.4rem;padding-top:.4rem;border-top:1px solid var(--border)}
.quiz-q.open .a{display:block}
.exam-prog{background:rgba(255,171,64,.05);border:1px solid rgba(255,171,64,.2);border-radius:12px;padding:1.2rem 1.4rem;margin-bottom:1.2rem}
.ep-num{font-size:.72rem;font-weight:700;color:var(--orange);text-transform:uppercase;letter-spacing:.08em}
.ep-title{font-size:1rem;font-weight:700;color:var(--text);margin:.3rem 0}
.ep-marks{display:inline-block;background:rgba(255,171,64,.15);color:var(--orange);font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:20px;margin-bottom:.6rem}
.ep-req{color:var(--text2);font-size:.88rem;line-height:1.6;margin-bottom:.8rem}
.full-prog{background:rgba(0,210,255,.04);border:1px solid rgba(0,210,255,.15);border-radius:12px;padding:1.2rem 1.4rem;margin-bottom:1.4rem}
.fp-title{font-size:.95rem;font-weight:700;color:var(--accent);margin-bottom:.8rem}
.fp-output{background:#050510;border:1px solid var(--border);border-radius:8px;padding:.8rem 1rem;margin-top:.8rem}
.fo-label{font-size:.72rem;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem}
.fo-code{display:block;font-family:monospace;font-size:.85rem;color:#e2e8f0;white-space:pre}
.fp-deep,.fp-dry{background:rgba(108,99,255,.06);border:1px solid rgba(108,99,255,.15);border-radius:8px;padding:.8rem 1rem;margin-top:.8rem}
.fd-label,.fdr-label{font-size:.72rem;font-weight:700;color:#818cf8;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.6rem}
.dr-row{display:flex;gap:.8rem;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.85rem;flex-wrap:wrap}
.dr-label{color:var(--accent);font-weight:600;min-width:130px;flex-shrink:0}
.dr-desc{color:var(--text2);line-height:1.5}
.warn{background:rgba(255,107,107,.08);border-left:3px solid #ff6b6b;border-radius:0 8px 8px 0;padding:.6rem .9rem;margin:.6rem 0;font-size:.85rem;color:var(--text2)}
.tip{background:rgba(0,230,118,.08);border-left:3px solid var(--green);border-radius:0 8px 8px 0;padding:.6rem .9rem;margin:.6rem 0;font-size:.85rem;color:var(--text2)}


/* --- Common Topbar Fix --- */
nav {
    position: sticky ;
    top: 0 ;
    z-index: 100 ;
    background: rgba(10, 10, 15, 0.95) ;
    backdrop-filter: blur(12px) ;
    border-bottom: 1px solid var(--border) ;
    padding: 0.8rem 2rem ;
    display: flex ;
    align-items: center ;
    gap: 1.5rem ;
    flex-wrap: wrap ;
}
.nav-logo {
    font-family: 'Inter', sans-serif ;
    font-weight: 800 ;
    font-size: 1.1rem ;
    color: var(--accent) ;
    text-decoration: none ;
    white-space: nowrap ;
}
.nav-links {
    display: flex ;
    gap: 1.2rem ;
    margin-left: auto ;
    flex-wrap: wrap ;
    align-items: center ;
}
.nav-links a {
    font-family: 'Inter', sans-serif ;
    color: var(--text2) ;
    text-decoration: none ;
    font-size: 0.85rem ;
    font-weight: 500 ;
    transition: color 0.2s ;
    white-space: nowrap ;
}
.nav-links a:hover {
    color: var(--accent) ;
}
.nav-links a.active {
    color: var(--accent) ;
    font-weight: 700 ;
    position: relative ;
}
.nav-links a.active::after {
    content: '' ;
    position: absolute ;
    bottom: -6px ;
    left: 0 ;
    width: 100% ;
    height: 2px ;
    background: var(--accent) ;
    border-radius: 2px ;
}


        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }

        :root {
            --bg: #0a0a0f;
            --surface: #12121a;
            --card: #1a1a2e;
            --border: #2a2a3e;
            --accent: #6c63ff;
            --accent2: #00d2ff;
            --accent3: #ff6b6b;
            --text: #e0e0e0;
            --text2: #a0a0b0;
            --green: #00e676;
            --orange: #ffab40
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100vh
        }

        nav {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(10, 10, 15, .95);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border);
            padding: 1rem 2rem;
            display: flex;
            align-items: center;
            gap: 2rem;
            flex-wrap: wrap
        }

        .nav-logo {
            font-weight: 800;
            font-size: 1.1rem;
            color: var(--accent);
            text-decoration: none
        }

        .nav-links {
            display: flex;
            gap: 1.5rem;
            margin-left: auto
        }

        .nav-links a {
            color: var(--text2);
            text-decoration: none;
            font-size: .85rem;
            transition: color .2s
        }

        .nav-links a:hover {
            color: var(--accent)
        }

        .hero {
            padding: 4rem 2rem 2rem;
            max-width: 1000px;
            margin: 0 auto;
            text-align: center
        }

        .unit-badge {
            display: inline-block;
            padding: .4rem 1.2rem;
            background: rgba(168, 85, 247, .15);
            border: 1px solid rgba(168, 85, 247, .3);
            border-radius: 50px;
            font-size: .8rem;
            color: #a855f7;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1.5rem;
            font-weight: 600
        }

        h1 {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 900;
            background: linear-gradient(135deg, #a855f7, #6c63ff, #00d2ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.1;
            margin-bottom: 1rem
        }

        .hero p {
            color: var(--text2);
            font-size: 1.1rem;
            line-height: 1.6
        }

        .toc {
            max-width: 1000px;
            margin: 2rem auto;
            padding: 0 2rem
        }

        .toc-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: .8rem
        }

        .toc-item {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: .9rem 1.2rem;
            cursor: pointer;
            transition: all .2s;
            text-decoration: none;
            color: var(--text);
            display: block
        }

        .toc-item:hover {
            border-color: #a855f7;
            transform: translateY(-2px)
        }

        .toc-num {
            font-size: .7rem;
            color: #a855f7;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase
        }

        .toc-title {
            font-size: .9rem;
            font-weight: 600;
            margin-top: .2rem
        }

        .content {
            max-width: 1000px;
            margin: 0 auto;
            padding: 2rem
        }

        .section {
            margin-bottom: 3rem;
            scroll-margin-top: 80px
        }

        .section-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border)
        }

        .section-num {
            background: linear-gradient(135deg, #a855f7, #6c63ff);
            color: #fff;
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: .9rem;
            flex-shrink: 0
        }

        h2 {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text)
        }

        h3 {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--accent);
            margin: 1.5rem 0 .8rem
        }

        p {
            color: var(--text2);
            line-height: 1.8;
            margin-bottom: 1rem
        }

        .analogy {
            background: rgba(0, 230, 118, .05);
            border: 1px solid rgba(0, 230, 118, .2);
            border-left: 4px solid var(--green);
            border-radius: 8px;
            padding: 1.2rem 1.5rem;
            margin: 1.2rem 0
        }

        .analogy strong {
            color: var(--green);
            display: block;
            margin-bottom: .4rem;
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: 1px
        }

        .concept-box {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.2rem 0
        }

        .concept-box h4 {
            font-size: .9rem;
            font-weight: 700;
            color: var(--accent);
            margin-bottom: .8rem
        }

        .warn {
            background: rgba(255, 107, 107, .05);
            border: 1px solid rgba(255, 107, 107, .2);
            border-left: 4px solid var(--accent3);
            border-radius: 8px;
            padding: 1rem 1.2rem;
            margin: 1rem 0
        }

        .warn strong {
            color: var(--accent3);
            display: block;
            margin-bottom: .3rem;
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: 1px
        }

        .tip {
            background: rgba(108, 99, 255, .05);
            border: 1px solid rgba(108, 99, 255, .2);
            border-left: 4px solid var(--accent);
            border-radius: 8px;
            padding: 1rem 1.2rem;
            margin: 1rem 0
        }

        .tip strong {
            color: var(--accent);
            display: block;
            margin-bottom: .3rem;
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: 1px
        }

        pre {
            background: #0d0d16;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 1.5rem;
            overflow-x: auto;
            margin: 1rem 0;
            position: relative
        }

        code {
            font-family: 'JetBrains Mono', monospace;
            font-size: .85rem;
            line-height: 1.7;
            color: #e0e0e0
        }

        .kw {
            color: #c678dd
        }

        .cm {
            color: #5c6370;
            font-style: italic
        }

        .str {
            color: #98c379
        }

        .num {
            color: #d19a66
        }

        .fn {
            color: #61afef
        }

        .cls {
            color: #e5c07b
        }

        .type {
            color: #56b6c2
        }

        .cmt {
            color: #5c6370
        }

        .table-wrap {
            overflow-x: auto;
            margin: 1.2rem 0
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: .85rem
        }

        th {
            background: rgba(108, 99, 255, .15);
            color: var(--accent);
            padding: .8rem 1rem;
            text-align: left;
            font-weight: 700;
            border: 1px solid var(--border)
        }

        td {
            padding: .7rem 1rem;
            border: 1px solid var(--border);
            color: var(--text2)
        }

        tr:nth-child(even) td {
            background: rgba(255, 255, 255, .02)
        }

        .tag-yes {
            color: var(--green);
            font-weight: 700
        }

        .tag-no {
            color: var(--accent3);
            font-weight: 700
        }

        .mnemonic {
            background: rgba(255, 171, 64, .05);
            border: 1px solid rgba(255, 171, 64, .2);
            border-left: 4px solid var(--orange);
            border-radius: 8px;
            padding: 1rem 1.2rem;
            margin: 1rem 0
        }

        .mnemonic strong {
            color: var(--orange);
            display: block;
            margin-bottom: .3rem;
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: 1px
        }

        .quiz-box {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0
        }

        .quiz-box h4 {
            color: var(--accent2);
            margin-bottom: 1rem
        }

        .quiz-q {
            margin-bottom: 1rem;
            padding: .8rem;
            background: var(--surface);
            border-radius: 8px;
            cursor: pointer;
            border: 1px solid transparent;
            transition: all .2s
        }

        .quiz-q:hover {
            border-color: var(--accent)
        }

        .quiz-q .q {
            font-weight: 600;
            color: var(--text);
            margin-bottom: .3rem;
            font-size: .9rem
        }

        .quiz-q .a {
            color: var(--green);
            font-size: .85rem;
            display: none;
            margin-top: .5rem;
            padding-top: .5rem;
            border-top: 1px solid var(--border)
        }

        .quiz-q.open .a {
            display: block
        }

        .back-btn {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            color: var(--text2);
            text-decoration: none;
            font-size: .85rem;
            margin-bottom: 2rem;
            transition: color .2s
        }

        .back-btn:hover {
            color: var(--accent)
        }

        .section-nav {
            display: flex;
            gap: 1rem;
            justify-content: space-between;
            margin-top: 3rem;
            padding-top: 2rem;
            border-top: 1px solid var(--border)
        }

        .snav-btn {
            padding: .8rem 1.5rem;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text2);
            text-decoration: none;
            font-size: .85rem;
            transition: all .2s
        }

        .snav-btn:hover {
            border-color: var(--accent);
            color: var(--accent)
        }

        <style>.practice-box {
            background: rgba(108, 99, 255, .05);
            border: 1px solid rgba(108, 99, 255, .25);
            border-left: 4px solid var(--accent);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0
        }

        .practice-box .pb-title {
            font-size: .75rem;
            font-weight: 800;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: .5rem
        }

        .practice-box .pb-title span {
            font-size: 1.1rem
        }

        .think-box {
            background: rgba(0, 210, 255, .04);
            border: 1px solid rgba(0, 210, 255, .2);
            border-left: 4px solid var(--accent2);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0
        }

        .think-box .tb-title {
            font-size: .75rem;
            font-weight: 800;
            color: var(--accent2);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1rem
        }

        .debug-box {
            background: rgba(255, 107, 107, .04);
            border: 1px solid rgba(255, 107, 107, .25);
            border-left: 4px solid var(--accent3);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0
        }

        .debug-box .db-title {
            font-size: .75rem;
            font-weight: 800;
            color: var(--accent3);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1rem
        }

        .predict-box {
            background: rgba(0, 230, 118, .04);
            border: 1px solid rgba(0, 230, 118, .2);
            border-left: 4px solid var(--green);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0
        }

        .predict-box .prb-title {
            font-size: .75rem;
            font-weight: 800;
            color: var(--green);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1rem
        }

        .recall-box {
            background: rgba(255, 171, 64, .04);
            border: 1px solid rgba(255, 171, 64, .2);
            border-left: 4px solid var(--orange);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0
        }

        .recall-box .rb-title {
            font-size: .75rem;
            font-weight: 800;
            color: var(--orange);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1rem
        }

        .prob {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 1.2rem;
            margin: .8rem 0
        }

        .prob .pnum {
            font-size: .7rem;
            font-weight: 700;
            color: var(--accent);
            text-transform: uppercase;
            margin-bottom: .4rem
        }

        .prob .pstmt {
            color: var(--text);
            font-weight: 600;
            margin-bottom: .3rem;
            font-size: .9rem
        }

        .prob .phint {
            color: var(--text2);
            font-size: .8rem;
            margin-top: .4rem;
            font-style: italic
        }

        .spoiler-btn {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            margin-top: .8rem;
            padding: .4rem .9rem;
            background: rgba(108, 99, 255, .15);
            border: 1px solid rgba(108, 99, 255, .3);
            border-radius: 6px;
            color: var(--accent);
            font-size: .78rem;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: all .2s
        }

        .spoiler-btn:hover {
            background: rgba(108, 99, 255, .3)
        }

        .spoiler {
            display: none;
            margin-top: .8rem;
            padding: 1rem;
            background: #0d0d16;
            border-radius: 8px;
            border: 1px solid var(--border)
        }

        .spoiler.open {
            display: block
        }

        details.spoiler { display: block; }

        .step {
            display: flex;
            gap: .8rem;
            margin: .6rem 0;
            align-items: flex-start
        }

        .step-num {
            background: var(--accent);
            color: #fff;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .7rem;
            font-weight: 800;
            flex-shrink: 0;
            margin-top: 2px
        }

        .step-text {
            color: var(--text2);
            font-size: .9rem;
            line-height: 1.6
        }

        .edge-box {
            background: rgba(255, 171, 64, .04);
            border: 1px solid rgba(255, 171, 64, .25);
            border-left: 4px solid var(--orange);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0
        }

        .edge-box .eb-title {
            font-size: .75rem;
            font-weight: 800;
            color: var(--orange);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1rem
        }

        .exam-prog {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 1.5rem;
            margin: 1.2rem 0;
            position: relative;
            overflow: hidden
        }

        .exam-prog::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #a855f7, #6c63ff, #00d2ff)
        }

        .exam-prog .ep-num {
            font-size: .7rem;
            color: #a855f7;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: .3rem
        }

        .exam-prog .ep-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: .5rem
        }

        .exam-prog .ep-marks {
            font-size: .75rem;
            color: var(--orange);
            background: rgba(255, 171, 64, .1);
            padding: .2rem .6rem;
            border-radius: 20px;
            display: inline-block;
            margin-bottom: .8rem
        }

        .exam-prog .ep-req {
            color: var(--text2);
            font-size: .85rem;
            line-height: 1.7;
            margin-bottom: 1rem
        }

        .uml-practice {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.2rem 0
        }

        .uml-practice h4 {
            color: var(--accent2);
            font-size: .9rem;
            margin-bottom: 1rem
        }

        .uml-step {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 1rem;
            margin: .6rem 0
        }

        .uml-step .us-num {
            font-size: .7rem;
            color: var(--accent2);
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: .3rem
        }

        .section-divider {
            border: none;
            border-top: 2px solid var(--border);
            margin: 3rem 0;
            position: relative
        }

        .section-divider::after {
            content: attr(data-label);
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--bg);
            padding: 0 1rem;
            color: var(--text2);
            font-size: .75rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 600
        }

        <style>.full-prog {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 14px;
            margin: 1.5rem 0;
            overflow: hidden
        }

        .fp-title {
            background: linear-gradient(90deg, rgba(0, 210, 255, .12), transparent);
            padding: .8rem 1.2rem;
            font-size: .8rem;
            font-weight: 800;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            border-bottom: 1px solid var(--border)
        }

        .full-prog pre {
            margin: 0;
            border-radius: 0;
            border: none;
            border-bottom: 1px solid var(--border)
        }

        .fp-output {
            padding: 1rem 1.2rem;
            background: rgba(0, 230, 118, .04);
            border-bottom: 1px solid var(--border)
        }

        .fo-label {
            font-size: .7rem;
            font-weight: 800;
            color: var(--green);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: .5rem
        }

        .fo-code {
            display: block;
            font-family: 'JetBrains Mono', monospace;
            font-size: .82rem;
            color: #c3e88d;
            white-space: pre;
            line-height: 1.7
        }

        .fp-deep {
            padding: 1rem 1.2rem;
            background: rgba(0, 210, 255, .03);
            border-bottom: 1px solid var(--border)
        }

        .fd-label {
            font-size: .7rem;
            font-weight: 800;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: .8rem
        }

        .fp-exam {
            padding: 1rem 1.2rem;
            background: rgba(255, 171, 64, .03);
            border-bottom: 1px solid var(--border)
        }

        .fe-label {
            font-size: .7rem;
            font-weight: 800;
            color: var(--orange);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: .8rem
        }

        .fp-dry {
            padding: 1rem 1.2rem;
            background: rgba(108, 99, 255, .03)
        }

        .fdr-label {
            font-size: .7rem;
            font-weight: 800;
            color: #6c63ff;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: .8rem
        }

        .dr-row {
            display: flex;
            gap: 1rem;
            padding: .35rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, .04);
            font-size: .82rem
        }

        .dr-label {
            color: var(--accent);
            font-family: 'JetBrains Mono', monospace;
            min-width: 140px;
            flex-shrink: 0
        }

        .dr-desc {
            color: var(--text2);
            line-height: 1.5
        }

        .prog-divider {
            border: none;
            border-top: 1px dashed var(--border);
            margin: 1.5rem 0
        }
    

        .full-prog {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 14px;
            margin: 1.5rem 0;
            overflow: hidden
        }

        .fp-title {
            background: linear-gradient(90deg, rgba(0, 210, 255, .12), transparent);
            padding: .8rem 1.2rem;
            font-size: .8rem;
            font-weight: 800;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            border-bottom: 1px solid var(--border)
        }

        .full-prog pre {
            margin: 0;
            border-radius: 0;
            border: none;
            border-bottom: 1px solid var(--border)
        }

        .fp-output {
            padding: 1rem 1.2rem;
            background: rgba(0, 230, 118, .04);
            border-bottom: 1px solid var(--border)
        }

        .fo-label {
            font-size: .7rem;
            font-weight: 800;
            color: var(--green);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: .5rem
        }

        .fo-code {
            display: block;
            font-family: 'JetBrains Mono', monospace;
            font-size: .82rem;
            color: #c3e88d;
            white-space: pre;
            line-height: 1.7
        }

        .fp-deep {
            padding: 1rem 1.2rem;
            background: rgba(0, 210, 255, .03);
            border-bottom: 1px solid var(--border)
        }

        .fd-label {
            font-size: .7rem;
            font-weight: 800;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: .8rem
        }

        .fp-exam {
            padding: 1rem 1.2rem;
            background: rgba(255, 171, 64, .03);
            border-bottom: 1px solid var(--border)
        }

        .fe-label {
            font-size: .7rem;
            font-weight: 800;
            color: var(--orange);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: .8rem
        }

        .fp-dry {
            padding: 1rem 1.2rem;
            background: rgba(108, 99, 255, .03)
        }

        .fdr-label {
            font-size: .7rem;
            font-weight: 800;
            color: #6c63ff;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: .8rem
        }

        .dr-row {
            display: flex;
            gap: 1rem;
            padding: .35rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, .04);
            font-size: .82rem
        }

        .dr-label {
            color: var(--accent);
            font-family: 'JetBrains Mono', monospace;
            min-width: 140px;
            flex-shrink: 0
        }

        .dr-desc {
            color: var(--text2);
            line-height: 1.5
        }

        .prog-divider {
            border: none;
            border-top: 1px dashed var(--border);
            margin: 1.5rem 0
        }
    

        /* --- PREMIUM COMPILER & INTERACTION STYLES --- */
        /* --- UNIVERSAL COPY BUTTON STYLES --- */
        .full-prog, .fp-output, .practice-box code, .think-box code, .debug-box code, .predict-box code, .recall-box code, .prob code {
            position: relative;
            display: block; /* Ensure it's a container */
        }

        /* Ensure small inline-style blocks also work if they are multi-line */
        pre, code.fo-code {
            position: relative;
        }

        .copy-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 6px;
            background: rgba(30, 30, 45, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            transition: all 0.2s ease;
            backdrop-filter: blur(8px);
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
        }

        /* Show button on hover of the container */
        .full-prog:hover .copy-btn, 
        .fp-output:hover .copy-btn, 
        .practice-box:hover .copy-btn,
        .think-box:hover .copy-btn,
        .debug-box:hover .copy-btn,
        .predict-box:hover .copy-btn,
        .recall-box:hover .copy-btn,
        .prob:hover .copy-btn {
            opacity: 1;
        }

        .copy-btn:hover {
            background: var(--accent);
            color: #fff;
            opacity: 1 ;
        }

        .copy-btn svg {
            width: 16px;
            height: 16px;
            stroke-width: 2;
        }

        .copy-btn.copied {
            border-color: var(--green);
            color: var(--green);
            background: rgba(0, 230, 118, 0.1);
            opacity: 1 ;
        }

        

        

        :root {
            --compiler-width: 35%;
        }

        /* Nav Highlight */
        .nav-links a.active {
            color: var(--accent) ;
            font-weight: 700;
            position: relative;
        }
        .nav-links a.active::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            height: 2px;
            background: var(--accent);
            border-radius: 2px;
        }

        /* Compiler Sidebar */
        .compiler-sidebar {
            position: fixed;
            right: 0;
            top: 64px;
            width: var(--compiler-width);
            height: calc(100vh - 64px);
            background: var(--surface);
            border-left: 2px solid var(--accent);
            box-shadow: -10px 0 30px rgba(0,0,0,0.5);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: visible;
        }
        .compiler-sidebar.closed { transform: translateX(100%); }
        
        .resizer-handle {
            position: absolute;
            left: -5px;
            top: 0;
            width: 10px;
            height: 100%;
            cursor: ew-resize;
            z-index: 1002;
        }
        .resizer-handle:hover, .resizer-handle.active { background: rgba(108, 99, 255, 0.3); }

        .compiler-content { display: flex; flex-direction: column; height: 100%; width: 100%; }
        .compiler-header {
            padding: 12px 20px;
            background: var(--card);
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
            user-select: none;
        }
        .compiler-header h3 {
            margin: 0 ;
            font-size: 0.85rem ;
            color: var(--accent) ;
            text-transform: uppercase;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .compiler-toggle {
            position: fixed;
            right: 20px;
            top: 80px;
            z-index: 1001;
            width: 45px;
            height: 45px;
            background: var(--accent);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(108, 99, 255, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            transition: all 0.3s ease;
        }

        .compiler-frame { flex: 1; border: none; width: 100%; background: #1e1e1e; }
        .resizing .compiler-frame { pointer-events: none; }

        /* ChatGPT Style Copy Button */
        .full-prog { position: relative; }
        .copy-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 8px;
            background: rgba(30, 30, 45, 0.7);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text2);
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(8px);
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
        }
        .full-prog:hover .copy-btn { opacity: 1; }
        .copy-btn:hover {
            background: var(--card);
            color: var(--accent);
            border-color: var(--accent);
            transform: translateY(-2px);
        }
        .copy-btn svg { width: 16px; height: 16px; }
        .copy-btn.copied {
            background: rgba(0, 230, 118, 0.1);
            border-color: var(--green);
            color: var(--green);
        }

        /* Layout Adjustments */
        @media (min-width: 901px) { body.sidebar-open .hero, 
        body.sidebar-open .toc, 
        body.sidebar-open .content {
            width: calc(100% - var(--sidebar-actual-width, 35%) - 2rem);
            left: calc(var(--sidebar-actual-width, 35%) / -2);
        } }
        .hero, .toc, .content { position: relative; left: 0; width: 100%; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), left 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

        @media (max-width: 900px) {
            .compiler-sidebar, .compiler-toggle { display: none; }
            .hero, .toc, .content { width: 100%; left: 0; }
        }
    

/* --- Common Topbar Fix --- */
nav {
    position: sticky ;
    top: 0 ;
    z-index: 100 ;
    background: rgba(10, 10, 15, 0.95) ;
    backdrop-filter: blur(12px) ;
    border-bottom: 1px solid var(--border) ;
    padding: 0.8rem 2rem ;
    display: flex ;
    align-items: center ;
    gap: 1.5rem ;
    flex-wrap: nowrap ;
    overflow: hidden ;
    width: 100vw ;
    max-width: 100vw ;
    box-sizing: border-box ;
}
.nav-logo {
    font-family: 'Inter', sans-serif ;
    font-weight: 800 ;
    font-size: 1.1rem ;
    color: var(--accent) ;
    text-decoration: none ;
    white-space: nowrap ;
    flex-shrink: 0 ;
}
.nav-links {
    display: flex ;
    gap: 1.2rem ;
    margin-left: auto ;
    flex-wrap: nowrap ;
    align-items: center ;
    overflow-x: auto ;
    white-space: nowrap ;
    -ms-overflow-style: none ;
    scrollbar-width: none ;
    padding-bottom: 5px ;
    scroll-behavior: smooth ;
    flex: 1 ;
    min-width: 0 ;
}
.nav-links::-webkit-scrollbar {
    display: none ;
}
.nav-links a {
    font-family: 'Inter', sans-serif ;
    color: var(--text2) ;
    text-decoration: none ;
    font-size: 0.85rem ;
    font-weight: 500 ;
    transition: color 0.2s ;
    white-space: nowrap ;
    flex-shrink: 0 ;
}
.nav-links a:hover {
    color: var(--accent) ;
}
.nav-links a.active {
    color: var(--accent) ;
    font-weight: 700 ;
    position: relative ;
}
.nav-links a.active::after {
    content: '' ;
    position: absolute ;
    bottom: -6px ;
    left: 0 ;
    width: 100% ;
    height: 2px ;
    background: var(--accent) ;
    border-radius: 2px ;
}


        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }

        :root {
            --bg: #0a0a0f;
            --surface: #12121a;
            --card: #1a1a2e;
            --border: #2a2a3e;
            --accent: #6c63ff;
            --accent2: #00d2ff;
            --accent3: #ff6b6b;
            --text: #e0e0e0;
            --text2: #a0a0b0;
            --green: #00e676;
            --orange: #ffab40;
            --red: #ff6b6b
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100vh
        }

        nav {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(10, 10, 15, .95);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border);
            padding: 1rem 2rem;
            display: flex;
            align-items: center;
            gap: 2rem
        }

        .nav-logo {
            font-weight: 800;
            font-size: 1.1rem;
            color: var(--accent);
            text-decoration: none
        }

        .nav-links {
            display: flex;
            gap: 1.5rem;
            margin-left: auto
        }

        .nav-links a {
            color: var(--text2);
            text-decoration: none;
            font-size: .85rem;
            transition: color .2s
        }

        .nav-links a:hover {
            color: var(--accent)
        }

        .hero {
            padding: 4rem 2rem 2rem;
            max-width: 1000px;
            margin: 0 auto;
            text-align: center
        }

        .unit-badge {
            display: inline-block;
            padding: .4rem 1.2rem;
            background: rgba(108, 99, 255, .1);
            border: 1px solid rgba(108, 99, 255, .3);
            border-radius: 50px;
            font-size: .8rem;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1.5rem;
            font-weight: 600
        }

        h1 {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 900;
            background: linear-gradient(135deg, #6c63ff, #8b5cf6, #00d2ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.1;
            margin-bottom: 1rem
        }

        .hero p {
            color: var(--text2);
            font-size: 1.1rem;
            line-height: 1.6
        }

        .toc {
            max-width: 1000px;
            margin: 2rem auto;
            padding: 0 2rem
        }

        .toc-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: .8rem
        }

        .toc-item {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: .9rem 1.2rem;
            cursor: pointer;
            transition: all .2s;
            text-decoration: none;
            color: var(--text);
            display: block
        }

        .toc-item:hover {
            border-color: var(--accent);
            transform: translateY(-2px)
        }

        .toc-num {
            font-size: .7rem;
            color: var(--accent);
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase
        }

        .toc-title {
            font-size: .9rem;
            font-weight: 600;
            margin-top: .2rem
        }

        .content {
            max-width: 1000px;
            margin: 0 auto;
            padding: 2rem
        }

        .section {
            margin-bottom: 3rem;
            scroll-margin-top: 80px
        }

        .section-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border)
        }

        .section-num {
            background: linear-gradient(135deg, #a855f7, #6c63ff, #00d2ff);
            color: #fff;
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: .9rem;
            flex-shrink: 0
        }

        h2 {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text)
        }

        h3 {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--accent);
            margin: 1.5rem 0 .8rem
        }

        p {
            color: var(--text2);
            line-height: 1.8;
            margin-bottom: 1rem
        }

        .analogy {
            background: rgba(0, 230, 118, .05);
            border: 1px solid rgba(0, 230, 118, .2);
            border-left: 4px solid var(--green);
            border-radius: 8px;
            padding: 1.2rem 1.5rem;
            margin: 1.2rem 0
        }

        .analogy strong {
            color: var(--green);
            display: block;
            margin-bottom: .4rem;
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: 1px
        }

        .concept-box {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.2rem 0
        }

        .concept-box h4 {
            font-size: .9rem;
            font-weight: 700;
            color: var(--accent);
            margin-bottom: .8rem
        }

        .warn {
            background: rgba(255, 107, 107, .05);
            border: 1px solid rgba(255, 107, 107, .2);
            border-left: 4px solid var(--red);
            border-radius: 8px;
            padding: 1rem 1.2rem;
            margin: 1rem 0
        }

        .warn strong {
            color: var(--red);
            display: block;
            margin-bottom: .3rem;
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: 1px
        }

        .tip {
            background: rgba(0, 210, 255, .05);
            border: 1px solid rgba(0, 210, 255, .2);
            border-left: 4px solid var(--accent);
            border-radius: 8px;
            padding: 1rem 1.2rem;
            margin: 1rem 0
        }

        .tip strong {
            color: var(--accent);
            display: block;
            margin-bottom: .3rem;
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: 1px
        }

        pre {
            background: #0d0d16;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 1.5rem;
            overflow-x: auto;
            margin: 1rem 0
        }

        code {
            font-family: 'JetBrains Mono', monospace;
            font-size: .85rem;
            line-height: 1.7;
            color: #e0e0e0
        }

        .kw {
            color: #c678dd
        }

        .str {
            color: #98c379
        }

        .num {
            color: #d19a66
        }

        .fn {
            color: #61afef
        }

        .cls {
            color: #e5c07b
        }

        .type {
            color: #56b6c2
        }

        .cmt {
            color: #5c6370
        }

        .table-wrap {
            overflow-x: auto;
            margin: 1.2rem 0
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: .85rem
        }

        th {
            background: rgba(0, 210, 255, .1);
            color: var(--accent);
            padding: .8rem 1rem;
            text-align: left;
            font-weight: 700;
            border: 1px solid var(--border)
        }

        td {
            padding: .7rem 1rem;
            border: 1px solid var(--border);
            color: var(--text2)
        }

        tr:nth-child(even) td {
            background: rgba(255, 255, 255, .02)
        }

        .mnemonic {
            background: rgba(255, 171, 64, .05);
            border: 1px solid rgba(255, 171, 64, .2);
            border-left: 4px solid var(--orange);
            border-radius: 8px;
            padding: 1rem 1.2rem;
            margin: 1rem 0
        }

        .mnemonic strong {
            color: var(--orange);
            display: block;
            margin-bottom: .3rem;
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: 1px
        }

        .quiz-box {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0
        }

        .quiz-box h4 {
            color: var(--accent);
            margin-bottom: 1rem
        }

        .quiz-q {
            margin-bottom: 1rem;
            padding: .8rem;
            background: var(--surface);
            border-radius: 8px;
            cursor: pointer;
            border: 1px solid transparent;
            transition: all .2s
        }

        .quiz-q:hover {
            border-color: var(--accent)
        }

        .quiz-q .q {
            font-weight: 600;
            color: var(--text);
            margin-bottom: .3rem;
            font-size: .9rem
        }

        .quiz-q .a {
            color: var(--green);
            font-size: .85rem;
            display: none;
            margin-top: .5rem;
            padding-top: .5rem;
            border-top: 1px solid var(--border)
        }

        .quiz-q.open .a {
            display: block
        }

        <style>.practice-box {
            background: rgba(0, 210, 255, .05);
            border: 1px solid rgba(0, 210, 255, .25);
            border-left: 4px solid var(--accent);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0
        }

        .practice-box .pb-title {
            font-size: .75rem;
            font-weight: 800;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: .5rem
        }

        .think-box {
            background: rgba(0, 230, 118, .04);
            border: 1px solid rgba(0, 230, 118, .2);
            border-left: 4px solid var(--green);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0
        }

        .think-box .tb-title {
            font-size: .75rem;
            font-weight: 800;
            color: var(--green);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1rem
        }

        .debug-box {
            background: rgba(255, 107, 107, .04);
            border: 1px solid rgba(255, 107, 107, .25);
            border-left: 4px solid var(--red);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0
        }

        .debug-box .db-title {
            font-size: .75rem;
            font-weight: 800;
            color: var(--red);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1rem
        }

        .predict-box {
            background: rgba(255, 171, 64, .04);
            border: 1px solid rgba(255, 171, 64, .2);
            border-left: 4px solid var(--orange);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0
        }

        .predict-box .prb-title {
            font-size: .75rem;
            font-weight: 800;
            color: var(--orange);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1rem
        }

        .recall-box {
            background: rgba(108, 99, 255, .05);
            border: 1px solid rgba(108, 99, 255, .25);
            border-left: 4px solid #6c63ff;
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0
        }

        .recall-box .rb-title {
            font-size: .75rem;
            font-weight: 800;
            color: #6c63ff;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1rem
        }

        .link-box {
            background: rgba(0, 210, 255, .04);
            border: 1px solid rgba(0, 210, 255, .2);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0
        }

        .link-box .lb-title {
            font-size: .75rem;
            font-weight: 800;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1rem
        }

        .prob {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 1.2rem;
            margin: .8rem 0
        }

        .prob .pnum {
            font-size: .7rem;
            font-weight: 700;
            color: var(--accent);
            text-transform: uppercase;
            margin-bottom: .4rem
        }

        .prob .pstmt {
            color: var(--text);
            font-weight: 600;
            margin-bottom: .3rem;
            font-size: .9rem
        }

        .prob .phint {
            color: var(--text2);
            font-size: .8rem;
            margin-top: .4rem;
            font-style: italic
        }

        .spoiler-btn {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            margin-top: .8rem;
            padding: .4rem .9rem;
            background: rgba(0, 210, 255, .12);
            border: 1px solid rgba(0, 210, 255, .3);
            border-radius: 6px;
            color: var(--accent);
            font-size: .78rem;
            font-weight: 600;
            cursor: pointer;
            transition: all .2s
        }

        .spoiler-btn:hover {
            background: rgba(0, 210, 255, .25)
        }

        .spoiler {
            display: none;
            margin-top: .8rem;
            padding: 1rem;
            background: #0d0d16;
            border-radius: 8px;
            border: 1px solid var(--border)
        }

        .spoiler.open {
            display: block
        }

        details.spoiler { display: block; }

        .step {
            display: flex;
            gap: .8rem;
            margin: .6rem 0;
            align-items: flex-start
        }

        .step-num {
            background: var(--accent);
            color: #000;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .7rem;
            font-weight: 800;
            flex-shrink: 0;
            margin-top: 2px
        }

        .step-text {
            color: var(--text2);
            font-size: .9rem;
            line-height: 1.6
        }

        .exam-prog {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 1.5rem;
            margin: 1.2rem 0;
            position: relative;
            overflow: hidden
        }

        .exam-prog::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #00d2ff, #0ea5e9, #6c63ff)
        }

        .exam-prog .ep-num {
            font-size: .7rem;
            color: var(--accent);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: .3rem
        }

        .exam-prog .ep-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: .5rem
        }

        .exam-prog .ep-marks {
            font-size: .75rem;
            color: var(--orange);
            background: rgba(255, 171, 64, .1);
            padding: .2rem .6rem;
            border-radius: 20px;
            display: inline-block;
            margin-bottom: .8rem
        }

        .exam-prog .ep-req {
            color: var(--text2);
            font-size: .85rem;
            line-height: 1.7;
            margin-bottom: 1rem
        }

        .section-divider {
            border: none;
            border-top: 2px solid var(--border);
            margin: 3rem 0;
            position: relative
        }

        .section-divider::after {
            content: attr(data-label);
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--bg);
            padding: 0 1rem;
            color: var(--text2);
            font-size: .75rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 600
        }

        .mem-lock {
            background: rgba(255, 171, 64, .05);
            border: 1px solid rgba(255, 171, 64, .2);
            border-left: 4px solid var(--orange);
            border-radius: 8px;
            padding: 1rem 1.2rem;
            margin: 1rem 0
        }

        .mem-lock strong {
            color: var(--orange);
            display: block;
            margin-bottom: .3rem;
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: 1px
        }

        .mini-quiz {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 1.2rem;
            margin: 1rem 0
        }

        .mini-quiz .mq-title {
            font-size: .75rem;
            color: #6c63ff;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: .8rem
        }

        <style>.full-prog {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 14px;
            margin: 1.5rem 0;
            overflow: hidden
        }

        .fp-title {
            background: linear-gradient(90deg, rgba(0, 210, 255, .12), transparent);
            padding: .8rem 1.2rem;
            font-size: .8rem;
            font-weight: 800;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            border-bottom: 1px solid var(--border)
        }

        .full-prog pre {
            margin: 0;
            border-radius: 0;
            border: none;
            border-bottom: 1px solid var(--border)
        }

        .fp-output {
            padding: 1rem 1.2rem;
            background: rgba(0, 230, 118, .04);
            border-bottom: 1px solid var(--border)
        }

        .fo-label {
            font-size: .7rem;
            font-weight: 800;
            color: var(--green);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: .5rem
        }

        .fo-code {
            display: block;
            font-family: 'JetBrains Mono', monospace;
            font-size: .82rem;
            color: #c3e88d;
            white-space: pre;
            line-height: 1.7
        }

        .fp-deep {
            padding: 1rem 1.2rem;
            background: rgba(0, 210, 255, .03);
            border-bottom: 1px solid var(--border)
        }

        .fd-label {
            font-size: .7rem;
            font-weight: 800;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: .8rem
        }

        .fp-exam {
            padding: 1rem 1.2rem;
            background: rgba(255, 171, 64, .03);
            border-bottom: 1px solid var(--border)
        }

        .fe-label {
            font-size: .7rem;
            font-weight: 800;
            color: var(--orange);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: .8rem
        }

        .fp-dry {
            padding: 1rem 1.2rem;
            background: rgba(108, 99, 255, .03)
        }

        .fdr-label {
            font-size: .7rem;
            font-weight: 800;
            color: #6c63ff;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: .8rem
        }

        .dr-row {
            display: flex;
            gap: 1rem;
            padding: .35rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, .04);
            font-size: .82rem
        }

        .dr-label {
            color: var(--accent);
            font-family: 'JetBrains Mono', monospace;
            min-width: 140px;
            flex-shrink: 0
        }

        .dr-desc {
            color: var(--text2);
            line-height: 1.5
        }

        .prog-divider {
            border: none;
            border-top: 1px dashed var(--border);
            margin: 1.5rem 0
        }
    

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }

        :root {
            --bg: #0a0a0f;
            --surface: #12121a;
            --card: #1a1a2e;
            --border: #2a2a3e;
            --accent: #6c63ff;
            --accent2: #00d2ff;
            --accent3: #ff6b6b;
            --text: #e0e0e0;
            --text2: #a0a0b0;
            --green: #00e676;
            --orange: #ffab40
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100vh
        }

        nav {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(10, 10, 15, .95);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border);
            padding: 1rem 2rem;
            display: flex;
            align-items: center;
            gap: 2rem;
            flex-wrap: wrap
        }

        .nav-logo {
            font-weight: 800;
            font-size: 1.1rem;
            color: var(--accent);
            text-decoration: none
        }

        .nav-links {
            display: flex;
            gap: 1.5rem;
            margin-left: auto;
            flex-wrap: wrap
        }

        .nav-links a {
            color: var(--text2);
            text-decoration: none;
            font-size: .85rem;
            transition: color .2s
        }

        .nav-links a:hover {
            color: var(--accent)
        }

        .hero {
            padding: 4rem 2rem 2rem;
            max-width: 1000px;
            margin: 0 auto;
            text-align: center
        }

        .unit-badge {
            display: inline-block;
            padding: .4rem 1.2rem;
            background: rgba(108, 99, 255, .1);
            border: 1px solid rgba(108, 99, 255, .3);
            border-radius: 50px;
            font-size: .8rem;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1.5rem;
            font-weight: 600
        }

        h1 {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 900;
            background: linear-gradient(135deg, #a855f7, #6c63ff, #00d2ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.1;
            margin-bottom: 1rem
        }

        .hero p {
            color: var(--text2);
            font-size: 1.1rem;
            line-height: 1.6
        }

        .toc {
            max-width: 1000px;
            margin: 2rem auto;
            padding: 0 2rem
        }

        .toc-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: .8rem
        }

        .toc-item {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: .9rem 1.2rem;
            cursor: pointer;
            transition: all .2s;
            text-decoration: none;
            color: var(--text);
            display: block
        }

        .toc-item:hover {
            border-color: var(--accent);
            transform: translateY(-2px)
        }

        .toc-num {
            font-size: .7rem;
            color: var(--accent);
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase
        }

        .toc-title {
            font-size: .9rem;
            font-weight: 600;
            margin-top: .2rem
        }

        .content {
            max-width: 1000px;
            margin: 0 auto;
            padding: 2rem
        }

        .section {
            margin-bottom: 3rem;
            scroll-margin-top: 80px
        }

        .section-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border)
        }

        .section-num {
            background: linear-gradient(135deg, #a855f7, #6c63ff);
            color: #fff;
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: .9rem;
            flex-shrink: 0
        }

        h2 {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text)
        }

        h3 {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--accent);
            margin: 1.5rem 0 .8rem
        }

        p {
            color: var(--text2);
            line-height: 1.8;
            margin-bottom: 1rem
        }

        .analogy {
            background: rgba(0, 230, 118, .05);
            border: 1px solid rgba(0, 230, 118, .2);
            border-left: 4px solid var(--green);
            border-radius: 8px;
            padding: 1.2rem 1.5rem;
            margin: 1.2rem 0
        }

        .analogy strong {
            color: var(--green);
            display: block;
            margin-bottom: .4rem;
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: 1px
        }

        .concept-box {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.2rem 0
        }

        .concept-box h4 {
            font-size: .9rem;
            font-weight: 700;
            color: var(--accent);
            margin-bottom: .8rem
        }

        .warn {
            background: rgba(255, 107, 107, .05);
            border: 1px solid rgba(255, 107, 107, .2);
            border-left: 4px solid var(--accent);
            border-radius: 8px;
            padding: 1rem 1.2rem;
            margin: 1rem 0
        }

        .warn strong {
            color: var(--accent);
            display: block;
            margin-bottom: .3rem;
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: 1px
        }

        .tip {
            background: rgba(0, 210, 255, .05);
            border: 1px solid rgba(0, 210, 255, .2);
            border-left: 4px solid var(--blue);
            border-radius: 8px;
            padding: 1rem 1.2rem;
            margin: 1rem 0
        }

        .tip strong {
            color: var(--blue);
            display: block;
            margin-bottom: .3rem;
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: 1px
        }

        pre {
            background: #0d0d16;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 1.5rem;
            overflow-x: auto;
            margin: 1rem 0
        }

        code {
            font-family: 'JetBrains Mono', monospace;
            font-size: .85rem;
            line-height: 1.7;
            color: #e0e0e0
        }

        .kw {
            color: #c678dd
        }

        .str {
            color: #98c379
        }

        .num {
            color: #d19a66
        }

        .fn {
            color: #61afef
        }

        .cls {
            color: #e5c07b
        }

        .type {
            color: #56b6c2
        }

        .cmt {
            color: #5c6370
        }

        .table-wrap {
            overflow-x: auto;
            margin: 1.2rem 0
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: .85rem
        }

        th {
            background: rgba(255, 107, 107, .1);
            color: var(--accent);
            padding: .8rem 1rem;
            text-align: left;
            font-weight: 700;
            border: 1px solid var(--border)
        }

        td {
            padding: .7rem 1rem;
            border: 1px solid var(--border);
            color: var(--text2)
        }

        tr:nth-child(even) td {
            background: rgba(255, 255, 255, .02)
        }

        .tag-g {
            color: var(--green);
            font-weight: 700
        }

        .tag-y {
            color: var(--orange);
            font-weight: 700
        }

        .tag-r {
            color: var(--accent);
            font-weight: 700
        }

        .mnemonic {
            background: rgba(255, 171, 64, .05);
            border: 1px solid rgba(255, 171, 64, .2);
            border-left: 4px solid var(--orange);
            border-radius: 8px;
            padding: 1rem 1.2rem;
            margin: 1rem 0
        }

        .mnemonic strong {
            color: var(--orange);
            display: block;
            margin-bottom: .3rem;
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: 1px
        }

        .quiz-box {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0
        }

        .quiz-q {
            margin-bottom: 1rem;
            padding: .8rem;
            background: var(--surface);
            border-radius: 8px;
            cursor: pointer;
            border: 1px solid transparent;
            transition: all .2s
        }

        .quiz-q:hover {
            border-color: var(--accent)
        }

        .quiz-q .q {
            font-weight: 600;
            color: var(--text);
            margin-bottom: .3rem;
            font-size: .9rem
        }

        .quiz-q .a {
            color: var(--green);
            font-size: .85rem;
            display: none;
            margin-top: .5rem;
            padding-top: .5rem;
            border-top: 1px solid var(--border)
        }

        .quiz-q.open .a {
            display: block
        }

        <style>.practice-box {
            background: rgba(0, 210, 255, .05);
            border: 1px solid rgba(0, 210, 255, .25);
            border-left: 4px solid var(--accent);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0
        }

        .practice-box .pb-title {
            font-size: .75rem;
            font-weight: 800;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: .5rem
        }

        .think-box {
            background: rgba(0, 230, 118, .04);
            border: 1px solid rgba(0, 230, 118, .2);
            border-left: 4px solid var(--green);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0
        }

        .think-box .tb-title {
            font-size: .75rem;
            font-weight: 800;
            color: var(--green);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1rem
        }

        .debug-box {
            background: rgba(255, 107, 107, .04);
            border: 1px solid rgba(255, 107, 107, .25);
            border-left: 4px solid var(--red);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0
        }

        .debug-box .db-title {
            font-size: .75rem;
            font-weight: 800;
            color: var(--red);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1rem
        }

        .predict-box {
            background: rgba(255, 171, 64, .04);
            border: 1px solid rgba(255, 171, 64, .2);
            border-left: 4px solid var(--orange);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0
        }

        .predict-box .prb-title {
            font-size: .75rem;
            font-weight: 800;
            color: var(--orange);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1rem
        }

        .recall-box {
            background: rgba(108, 99, 255, .05);
            border: 1px solid rgba(108, 99, 255, .25);
            border-left: 4px solid #6c63ff;
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0
        }

        .recall-box .rb-title {
            font-size: .75rem;
            font-weight: 800;
            color: #6c63ff;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1rem
        }

        .prob {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 1.2rem;
            margin: .8rem 0
        }

        .prob .pnum {
            font-size: .7rem;
            font-weight: 700;
            color: var(--accent);
            text-transform: uppercase;
            margin-bottom: .4rem
        }

        .prob .pstmt {
            color: var(--text);
            font-weight: 600;
            margin-bottom: .3rem;
            font-size: .9rem
        }

        .spoiler-btn {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            margin-top: .8rem;
            padding: .4rem .9rem;
            background: rgba(0, 210, 255, .12);
            border: 1px solid rgba(0, 210, 255, .3);
            border-radius: 6px;
            color: var(--accent);
            font-size: .78rem;
            font-weight: 600;
            cursor: pointer;
            transition: all .2s
        }

        .spoiler-btn:hover {
            background: rgba(0, 210, 255, .25)
        }

        .spoiler {
            display: none;
            margin-top: .8rem;
            padding: 1rem;
            background: #0d0d16;
            border-radius: 8px;
            border: 1px solid var(--border)
        }

        .spoiler.open {
            display: block
        }

        details.spoiler { display: block; }

        .step {
            display: flex;
            gap: .8rem;
            margin: .6rem 0;
            align-items: flex-start
        }

        .step-num {
            background: var(--accent);
            color: #000;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .7rem;
            font-weight: 800;
            flex-shrink: 0;
            margin-top: 2px
        }

        .step-text {
            color: var(--text2);
            font-size: .9rem;
            line-height: 1.6
        }

        .lab-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 1.3rem;
            margin: 1rem 0;
            position: relative;
            overflow: hidden
        }

        .lab-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #00d2ff, #6c63ff)
        }

        .lab-card .lc-tag {
            font-size: .65rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--accent);
            margin-bottom: .3rem
        }

        .lab-card .lc-title {
            font-size: .95rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: .5rem
        }

        .lab-card .lc-diff {
            display: inline-block;
            font-size: .7rem;
            padding: .15rem .5rem;
            border-radius: 10px;
            margin-bottom: .7rem;
            font-weight: 600
        }

        .diff-easy {
            background: rgba(0, 230, 118, .15);
            color: var(--green)
        }

        .diff-med {
            background: rgba(255, 171, 64, .15);
            color: var(--orange)
        }

        .diff-hard {
            background: rgba(255, 107, 107, .15);
            color: var(--red)
        }

        .exam-prog {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 1.5rem;
            margin: 1.2rem 0;
            position: relative;
            overflow: hidden
        }

        .exam-prog::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #00d2ff, #0ea5e9, #6c63ff)
        }

        .exam-prog .ep-num {
            font-size: .7rem;
            color: var(--accent);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: .3rem
        }

        .exam-prog .ep-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: .5rem
        }

        .exam-prog .ep-marks {
            font-size: .75rem;
            color: var(--orange);
            background: rgba(255, 171, 64, .1);
            padding: .2rem .6rem;
            border-radius: 20px;
            display: inline-block;
            margin-bottom: .8rem
        }

        .exam-prog .ep-req {
            color: var(--text2);
            font-size: .85rem;
            line-height: 1.7;
            margin-bottom: 1rem
        }

        .section-divider {
            border: none;
            border-top: 2px solid var(--border);
            margin: 3rem 0;
            position: relative
        }

        .section-divider::after {
            content: attr(data-label);
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--bg);
            padding: 0 1rem;
            color: var(--text2);
            font-size: .75rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 600
        }

        .mem-lock {
            background: rgba(255, 171, 64, .05);
            border: 1px solid rgba(255, 171, 64, .2);
            border-left: 4px solid var(--orange);
            border-radius: 8px;
            padding: 1rem 1.2rem;
            margin: 1rem 0
        }

        .mem-lock strong {
            color: var(--orange);
            display: block;
            margin-bottom: .3rem;
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: 1px
        }

        .choose-table {
            width: 100%;
            border-collapse: collapse;
            margin: 1rem 0;
            font-size: .82rem
        }

        .choose-table th {
            background: rgba(0, 210, 255, .1);
            color: var(--accent);
            padding: .6rem .8rem;
            text-align: left;
            font-size: .72rem;
            text-transform: uppercase;
            letter-spacing: 1px
        }

        .choose-table td {
            padding: .55rem .8rem;
            border-top: 1px solid var(--border);
            color: var(--text2);
            line-height: 1.5
        }

        .choose-table tr:hover td {
            background: rgba(255, 255, 255, .02)
        }

        <style>.full-prog {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 14px;
            margin: 1.5rem 0;
            overflow: hidden
        }

        .fp-title {
            background: linear-gradient(90deg, rgba(0, 210, 255, .12), transparent);
            padding: .8rem 1.2rem;
            font-size: .8rem;
            font-weight: 800;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            border-bottom: 1px solid var(--border)
        }

        .full-prog pre {
            margin: 0;
            border-radius: 0;
            border: none;
            border-bottom: 1px solid var(--border)
        }

        .fp-output {
            padding: 1rem 1.2rem;
            background: rgba(0, 230, 118, .04);
            border-bottom: 1px solid var(--border)
        }

        .fo-label {
            font-size: .7rem;
            font-weight: 800;
            color: var(--green);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: .5rem
        }

        .fo-code {
            display: block;
            font-family: 'JetBrains Mono', monospace;
            font-size: .82rem;
            color: #c3e88d;
            white-space: pre;
            line-height: 1.7
        }

        .fp-deep {
            padding: 1rem 1.2rem;
            background: rgba(0, 210, 255, .03);
            border-bottom: 1px solid var(--border)
        }

        .fd-label {
            font-size: .7rem;
            font-weight: 800;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: .8rem
        }

        .fp-exam {
            padding: 1rem 1.2rem;
            background: rgba(255, 171, 64, .03);
            border-bottom: 1px solid var(--border)
        }

        .fe-label {
            font-size: .7rem;
            font-weight: 800;
            color: var(--orange);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: .8rem
        }

        .fp-dry {
            padding: 1rem 1.2rem;
            background: rgba(108, 99, 255, .03)
        }

        .fdr-label {
            font-size: .7rem;
            font-weight: 800;
            color: #6c63ff;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: .8rem
        }

        .dr-row {
            display: flex;
            gap: 1rem;
            padding: .35rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, .04);
            font-size: .82rem
        }

        .dr-label {
            color: var(--accent);
            font-family: 'JetBrains Mono', monospace;
            min-width: 140px;
            flex-shrink: 0
        }

        .dr-desc {
            color: var(--text2);
            line-height: 1.5
        }

        .prog-divider {
            border: none;
            border-top: 1px dashed var(--border);
            margin: 1.5rem 0
        }
    

.bg-gradient-blue { background: linear-gradient(135deg, #00d2ff, #0ea5e9); }
.bg-gradient-orange { background: linear-gradient(135deg, #ffab40, #f59e0b); }
.bg-gradient-orange-alt { background: linear-gradient(135deg, #ffab40, #fb923c); }
.bg-gradient-purple { background: linear-gradient(135deg, #6c63ff, #a855f7); }
.bg-gradient-red { background: linear-gradient(135deg, #ff6b6b, #a855f7); }
.bg-gradient-red-alt { background: linear-gradient(135deg, #ff6b6b, #6c63ff); }
.bg-purple { background: #6c63ff; }
.mb-4 { margin-bottom: 1.5rem; }
.m-0 { margin: 0; }
.rounded-bottom { border-radius: 0 0 8px 8px; }
.text-xs-subtle { font-size: 0.7rem; color: var(--text2); }

/* Prevent scroll jump when scrolling inside iframe */
.compiler-sidebar {
    overscroll-behavior: contain !important;
    overflow: hidden !important;
}

/* FINAL MOBILE OVERRIDE - MUST BE AT THE BOTTOM */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  main, #main-content, .hero, .toc, .content, .container, .section {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
    transform: none !important;
    float: none !important;
  }
  .compiler-sidebar, .compiler-toggle { display: none !important; }
  pre, .table-wrap, .concept-box, .exam-box, .practice-box, .full-prog {
    max-width: 100% !important;
    overflow-x: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .toc-grid { grid-template-columns: 1fr !important; }
  nav, .tab-nav { 
    padding-left: 1rem !important; 
    padding-right: 1rem !important; 
    width: 100% !important;
    box-sizing: border-box !important;
  }
}