:root {
  --bg:#0a0a0f; --bg2:#0f0f1a; --bg3:#14142a;
  --accent:#f7c948; --accent2:#ff6b35; --accent3:#4ecdc4;
  --text:#e8e8f0; --text-muted:#888899;
  --border:#1e1e3a; --card:#111120;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'IBM Plex Sans',sans-serif;line-height:1.7;overflow-x:hidden}
a{text-decoration:none}
.sidebar{position:fixed;top:0;left:0;width:260px;height:100vh;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:100;overflow-y:auto;padding-bottom:2rem}
.sidebar-logo{padding:1.5rem 1.2rem 1rem;border-bottom:1px solid var(--border)}
.rx-badge{display:inline-block;background:var(--accent);color:#000;font-family:'Space Mono',monospace;font-weight:700;font-size:1.1rem;width:44px;height:44px;line-height:44px;text-align:center;border-radius:8px;margin-bottom:.5rem}
.sidebar-logo h2{font-size:.8rem;font-weight:500;color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase}
.sidebar nav a{display:flex;align-items:center;gap:.6rem;padding:.5rem 1.2rem;font-size:.78rem;color:var(--text-muted);border-left:2px solid transparent;transition:all .18s;font-family:'Space Mono',monospace}
.sidebar nav a:hover,.sidebar nav a.active{color:var(--accent);border-left-color:var(--accent);background:rgba(247,201,72,.05)}
.sidebar nav a .num{font-size:.68rem;color:var(--accent2);min-width:22px}
.sidebar nav .home-link{padding:.8rem 1.2rem;font-weight:700;color:var(--text);border-bottom:1px solid var(--border);margin-bottom:.4rem}
.sidebar nav .home-link:hover{color:var(--accent);background:none}
.sidebar-section-title{padding:1rem 1.2rem .3rem;font-size:.63rem;font-weight:700;color:var(--accent2);letter-spacing:.12em;text-transform:uppercase;font-family:'Space Mono',monospace}
.sidebar-note{margin:1rem 1.2rem;background:var(--card);border:1px solid var(--border);border-radius:6px;padding:.8rem;font-size:.76rem;color:var(--text-muted)}
.sidebar-note strong{color:var(--accent)}
.top-bar{position:fixed;top:0;left:260px;right:0;height:46px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:flex-end;gap:.3rem;padding:0 2rem;z-index:90}
.top-bar a{font-family:'Space Mono',monospace;font-size:.72rem;color:var(--text-muted);padding:.3rem .7rem;border-radius:3px;border:1px solid transparent;transition:all .18s}
.top-bar a:hover{color:var(--accent);border-color:rgba(247,201,72,.3);background:rgba(247,201,72,.05)}
.top-bar a.active-site{color:var(--accent);border-color:rgba(247,201,72,.4);background:rgba(247,201,72,.08)}
.top-bar-sep{color:var(--border);font-size:.8rem}
.main{margin-left:260px;margin-top:46px;min-height:100vh}
.hero{position:relative;padding:5rem 4rem 4rem;overflow:hidden;border-bottom:1px solid var(--border)}
.hero::before{content:'R';position:absolute;right:-2rem;top:-3rem;font-family:'Space Mono',monospace;font-size:22rem;font-weight:700;color:rgba(247,201,72,.04);line-height:1;pointer-events:none;user-select:none}
.hero-tag,.lesson-tag{display:inline-block;background:rgba(247,201,72,.1);border:1px solid rgba(247,201,72,.3);color:var(--accent);font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;padding:.3rem .8rem;border-radius:2px;margin-bottom:1.2rem}
.hero h1,.lesson-hero h1{font-family:'DM Serif Display',serif;font-size:clamp(2.1rem,5vw,4rem);line-height:1.08;margin-bottom:1rem;max-width:760px}
.hero h1 em,.lesson-hero h1 em{font-style:italic;color:var(--accent)}
.hero p,.lesson-hero p{font-size:1rem;color:var(--text-muted);max-width:760px;margin-bottom:1.6rem}
.hero-stats{display:flex;gap:2.5rem;margin-bottom:2.2rem;flex-wrap:wrap}
.hstat .val{font-family:'Space Mono',monospace;font-size:2rem;font-weight:700;color:var(--accent);line-height:1}
.hstat .lbl{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}
.cta-btn{display:inline-block;background:var(--accent);color:#000;font-family:'Space Mono',monospace;font-size:.85rem;font-weight:700;padding:.85rem 2rem;border-radius:3px;letter-spacing:.05em;transition:background .2s,transform .15s;margin-right:.8rem;margin-bottom:.5rem}
.cta-btn:hover{background:#ffd862;transform:translateY(-2px)}
.cta-btn.outline{background:transparent;color:var(--accent);border:1px solid rgba(247,201,72,.5)}
.cta-btn.outline:hover{background:rgba(247,201,72,.08)}
.lesson-hero{position:relative;padding:3.2rem 4rem 2.2rem;overflow:hidden;border-bottom:1px solid var(--border)}
.lesson-hero::before{content:attr(data-lesson);position:absolute;right:1rem;top:-1rem;font-family:'Space Mono',monospace;font-size:9rem;font-weight:700;color:rgba(247,201,72,.04);line-height:1}
.section{padding:2.8rem 4rem;border-bottom:1px solid var(--border)}
.section h2{font-family:'DM Serif Display',serif;font-size:1.8rem;margin-bottom:1rem}
.section h2 span{color:var(--accent)}
.section h3{font-size:1rem;font-weight:600;margin:1.2rem 0 .5rem;color:var(--accent3)}
.section p{font-size:.93rem;color:var(--text-muted);margin-bottom:1rem}
.section ul,.section ol{padding-left:1.2rem;margin:0 0 1rem}
.section li{font-size:.88rem;color:var(--text-muted);margin:.35rem 0}
.section-intro{color:var(--text-muted);margin-bottom:1.3rem;max-width:760px;font-size:.92rem}
.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.8rem}
.lesson-card{display:flex;align-items:center;gap:1rem;background:var(--card);border:1px solid var(--border);border-radius:6px;padding:1rem 1.2rem;color:var(--text);transition:all .2s;position:relative;overflow:hidden}
.lesson-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:transform .2s}
.lesson-card:hover{border-color:rgba(247,201,72,.4);background:#1a1a2e}
.lesson-card:hover::before{transform:scaleY(1)}
.lesson-card .ln{font-family:'Space Mono',monospace;font-size:1.1rem;font-weight:700;color:var(--accent);min-width:36px}
.lesson-card .lt{font-size:.88rem;font-weight:500;color:var(--text)}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.mini-card{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:1rem}
.mini-card h4{font-size:.85rem;color:var(--accent);font-family:'Space Mono',monospace;margin-bottom:.5rem}
.code-block{background:#070710;border:1px solid var(--border);border-radius:6px;padding:1.15rem;margin:1rem 0;overflow-x:auto}
.code-block pre{font-family:'Space Mono',monospace;font-size:.78rem;color:#a8b5c8;line-height:1.7;white-space:pre-wrap}
.key-point{display:flex;gap:.8rem;background:rgba(78,205,196,.08);border:1px solid rgba(78,205,196,.25);border-radius:6px;padding:1rem 1.2rem;margin:1rem 0;font-size:.88rem;color:var(--text-muted)}
.key-point strong{color:var(--text)}
.table-like{display:grid;grid-template-columns:1.2fr 2fr;border:1px solid var(--border);border-radius:6px;overflow:hidden;margin:1rem 0}
.table-like div{padding:.8rem 1rem;border-bottom:1px solid var(--border);font-size:.88rem}
.table-like div:nth-child(odd){background:rgba(255,255,255,.02);color:var(--accent3);font-family:'Space Mono',monospace}
.table-like div:nth-last-child(-n+2){border-bottom:none}
.exercise-box,.sim-box{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:1.3rem}
.exercise-box h3,.sim-box h3{margin-top:0;color:var(--accent)}
.sim-controls{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.sim-controls button{background:transparent;border:1px solid rgba(247,201,72,.4);color:var(--accent);font-family:'Space Mono',monospace;font-size:.78rem;padding:.55rem .9rem;border-radius:4px;cursor:pointer}
.sim-controls button:hover{background:rgba(247,201,72,.08)}
.sim-output{border:1px dashed rgba(247,201,72,.35);padding:1rem;border-radius:6px;color:var(--text);min-height:64px;background:rgba(255,255,255,.02)}
.nextprev{display:flex;gap:.8rem;margin-top:1rem;flex-wrap:wrap}
.nextprev a{font-family:'Space Mono',monospace;font-size:.8rem;padding:.6rem 1.2rem;border:1px solid var(--border);border-radius:4px;color:var(--text-muted);transition:all .18s}
.nextprev a:hover{border-color:var(--accent);color:var(--accent);background:rgba(247,201,72,.05)}
.ready-box{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:2rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.ready-box h3{font-family:'DM Serif Display',serif;font-size:1.4rem;margin-bottom:.4rem;color:var(--text)}
.ready-box p{font-size:.9rem;color:var(--text-muted)}
footer{padding:2rem 4rem;text-align:center;font-size:.78rem;color:var(--text-muted);font-family:'Space Mono',monospace;border-top:1px solid var(--border)}
footer a{color:var(--accent)}
.mobile-menu-btn{display:none;position:fixed;top:.75rem;left:.75rem;z-index:200;background:var(--accent);color:#000;border:none;border-radius:6px;width:38px;height:38px;font-size:1.1rem;cursor:pointer;align-items:center;justify-content:center;font-weight:700;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99}
.sidebar-overlay.open{display:block}
@media (max-width:768px){
  .mobile-menu-btn{display:flex}
  .sidebar{transform:translateX(-100%);transition:transform .28s ease}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0;margin-top:86px}
  .top-bar{left:0;top:46px;height:40px;padding:0 .75rem;gap:.2rem;overflow-x:auto;justify-content:flex-start}
  .hero{padding:3.3rem 1.2rem 2rem}
  .hero::before{font-size:10rem;right:-1rem;top:-1rem}
  .lesson-hero{padding:2.3rem 1.2rem 1.6rem}
  .lesson-hero::before{font-size:5rem;right:.4rem;top:-.2rem}
  .section{padding:2rem 1.2rem}
  footer{padding:1.5rem 1.2rem}
}


/* simplified simulation controls */
.sim-controls{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.sim-controls button{background:transparent;border:1px solid rgba(247,201,72,.4);color:var(--accent);font-family:'Space Mono',monospace;font-size:.78rem;padding:.55rem .9rem;border-radius:4px;cursor:pointer}
.sim-controls button:hover{background:rgba(247,201,72,.08)}
.sim-controls button[hidden]{display:none !important}