:root { --ink-950:17 19 24; --ink-900:26 30 38; --ink-800:35 41 54; --ink-700:46 52 64; --ink-600:59 66 80; --line:50 58 72; --accent:125 211 252; --accent-strong:56 189 248; color-scheme:dark; }
  html.light { --ink-950:248 250 252; --ink-900:255 255 255; --ink-800:241 245 249; --ink-700:226 232 240; --ink-600:203 213 225; --line:214 222 232; --accent:2 132 199; --accent-strong:3 105 161; color-scheme:light; }
  html.light body { color:#1e293b; }
  html.light .text-slate-100 { color:#0f172a; }
  html.light .text-slate-200 { color:#1e293b; }
  html.light .text-slate-300 { color:#334155; }
  html.light .text-slate-400 { color:#475569; }
  html.light .text-slate-500 { color:#64748b; }
  html.light .text-slate-600 { color:#94a3b8; }
  html.light .prose-tight .text-slate-400 { color:#475569; }
  html.light .text-good { color:#16a34a; }
  html.light .text-warn { color:#b45309; }
  html.light .text-bad { color:#dc2626; }
  html.light .tab-btn { color:#475569; }
  html.light .quiz-opt { background:#ffffff; border-color:#d6dee8; }
  html.light .quiz-opt.correct { color:#15803d; }
  html.light .quiz-opt.wrong { color:#b91c1c; }
  html.light .quiz-opt.selected .opt-dot, html.light .quiz-opt.correct .opt-dot, html.light .quiz-opt.wrong .opt-dot { box-shadow:inset 0 0 0 3px #ffffff; }
  html.light .roadmap-card { background:#ffffff; border-color:#d6dee8; }
  html.light #timerPanel { background:#ffffff; }
  html.light .kbd { background:#f1f5f9; border-color:#cbd5e1; color:#334155; }
  @media (max-width:900px){ html.light aside.sidebar { background:#f8fafc; border-right-color:#d6dee8; } }
  html { scroll-behavior:smooth; }
  body { font-feature-settings:"ss01","cv11"; }
  .kbd { font-family:ui-monospace,monospace; font-size:.72rem; padding:1px 5px; border:1px solid #334; border-bottom-width:2px; border-radius:4px; background:#11151b; }
  pre { tab-size:2; font-size:.82rem; line-height:1.55; overflow-x:auto; padding:.85rem 1rem; background:#111318; border:1px solid #323a48; border-radius:.5rem; }
  pre code { font-family:ui-monospace,monospace; }
  details > summary { list-style:none; cursor:pointer; }
  details > summary::-webkit-details-marker { display:none; }
  details[open] > summary .chev { transform:rotate(90deg); }
  .chev { transition:transform .15s ease; display:inline-block; }
  #progressBar { transition:width .25s ease; }
  /* Tabs */
  .tab-btn { padding:.3rem .7rem; font-size:.75rem; color:#94a3b8; border-bottom:2px solid transparent; cursor:pointer; user-select:none; }
  .tab-btn.active { color:#7dd3fc; border-bottom-color:#7dd3fc; }
  .tab-panel { display:none; }
  .tab-panel.active { display:block; }
  /* Quiz */
  .quiz-opt { display:flex; align-items:flex-start; gap:.55rem; padding:.6rem .8rem; border:1px solid #323a48; border-radius:.45rem; cursor:pointer; transition:all .12s ease; background:#1a1e26; }
  button.quiz-opt { width:100%; text-align:left; font:inherit; color:inherit; appearance:none; -webkit-appearance:none; }
  .quiz-opt:hover { border-color:#38bdf8; }
  .quiz-opt.correct { border-color:#16a34a; background:rgba(22,163,74,0.10); color:#86efac; }
  .quiz-opt.wrong   { border-color:#dc2626; background:rgba(220,38,38,0.10); color:#fca5a5; }
  .quiz-opt.selected { border-color:#7dd3fc; background:rgba(125,211,252,0.12); box-shadow:inset 0 0 0 1px #7dd3fc; }
  .quiz-opt .opt-dot { flex:0 0 auto; width:1rem; height:1rem; margin-top:.18rem; border-radius:9999px; border:2px solid #475569; transition:all .12s ease; }
  .quiz-opt:hover .opt-dot { border-color:#38bdf8; }
  .quiz-opt.selected .opt-dot { border-color:#7dd3fc; background:#7dd3fc; box-shadow:inset 0 0 0 3px #1a1e26; }
  .quiz-opt.correct .opt-dot { border-color:#16a34a; background:#16a34a; box-shadow:inset 0 0 0 3px #1a1e26; }
  .quiz-opt.wrong .opt-dot { border-color:#dc2626; background:#dc2626; box-shadow:inset 0 0 0 3px #1a1e26; }
  .quiz-opt.locked  { pointer-events:none; opacity:.95; }
  /* Sidebar */
  .nav-lesson { display:flex; align-items:center; gap:.55rem; padding:.45rem .7rem; border-left:2px solid transparent; font-size:.83rem; color:#cbd5e1; border-radius:0 .35rem .35rem 0; }
  .nav-lesson:hover { background:rgba(56,189,248,0.05); color:#7dd3fc; }
  .nav-lesson.active { background:rgba(56,189,248,0.10); color:#7dd3fc; border-left-color:#7dd3fc; }
  .nav-lesson.locked { color:#475569; cursor:not-allowed; }
  .nav-lesson.locked:hover { background:transparent; color:#475569; }
  .nav-lesson.passed .nav-status { color:#86efac; }
  .lesson-icon { width:1.3rem; text-align:center; flex-shrink:0; }
  .nav-status { width:1rem; text-align:right; font-size:.7rem; flex-shrink:0; }
  /* Roadmap cards */
  .roadmap-card { transition:transform .12s ease, border-color .12s ease; background:#1a1e26; border:1px solid #323a48; border-radius:.6rem; padding:1rem; position:relative; cursor:pointer; display:block; text-decoration:none; color:inherit; }
  .roadmap-card:hover { transform:translateY(-1px); border-color:#38bdf8; }
  .roadmap-card.locked { opacity:.4; cursor:not-allowed; pointer-events:none; }
  .roadmap-card.locked:hover { transform:none; border-color:#323a48; }
  .roadmap-card.passed { border-color:#16a34a55; }
  /* Stars */
  .star { color:#fde68a; }
  .star-empty { color:#334155; }
  /* Timer */
  #timerPanel { transition:transform .2s ease, opacity .2s ease; background-color:#1a1e26; }
  #timerPanel.hidden-panel { transform:translateY(20px); opacity:0; pointer-events:none; visibility:hidden; transition:transform .2s ease, opacity .2s ease, visibility 0s linear .2s; }
  #timerPanel:not(.hidden-panel) { transition:transform .2s ease, opacity .2s ease, visibility 0s linear 0s; }
  /* Focus visibility — default :focus-visible is invisible on dark background. */
  :focus { outline:none; }
  :focus-visible { outline:2px solid #38bdf8; outline-offset:2px; border-radius:3px; }
  .quiz-opt:focus-visible { outline-offset:0; }
  /* Notes */
  textarea.note { background:#0a0c10; border:1px solid #323a48; border-radius:.35rem; padding:.4rem .55rem; font-size:.78rem; color:#cbd5e1; width:100%; min-height:42px; resize:vertical; font-family:ui-sans-serif,system-ui; }
  textarea.note:focus { outline:none; border-color:#38bdf8; }
  select.status-select { background:#0a0c10; border:1px solid #323a48; border-radius:.3rem; padding:.15rem .35rem; font-size:.72rem; color:#cbd5e1; }
  .chip { font-size:.68rem; padding:1px 7px; border-radius:999px; border:1px solid; display:inline-block; }
  .chip-new   { color:#94a3b8; border-color:#334155; }
  .chip-weak  { color:#fde68a; border-color:#854d0e; background:rgba(133,77,14,0.15); }
  .chip-master{ color:#86efac; border-color:#166534; background:rgba(22,101,52,0.15); }
  /* Token-based syntax */
  .tok-kw{color:#c4b5fd;} .tok-fn{color:#7dd3fc;} .tok-str{color:#86efac;} .tok-num{color:#fca5a5;} .tok-cmt{color:#64748b;font-style:italic;}
  /* Layout */
  .nav-toggle-btn { display:none; }
  @media (max-width: 900px) {
    .nav-toggle-btn { display:inline-flex; align-items:center; }
    aside.sidebar {
      display:block !important;
      position:fixed; inset:0 auto 0 0;
      width:min(82vw, 320px);
      background:#111318;
      border-right:1px solid #323a48;
      padding:1rem 0.75rem;
      z-index:60;
      transform:translateX(-100%);
      transition:transform .2s ease;
      overflow-y:auto;
    }
    aside.sidebar.open { transform:translateX(0); }
    aside.sidebar .sticky { position:static; top:auto; }
    #navBackdrop {
      position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:55;
      opacity:0; pointer-events:none; transition:opacity .2s ease;
    }
    #navBackdrop.open { opacity:1; pointer-events:auto; }
  }
  /* Anim */
  @keyframes pop { 0% { transform:scale(.95); opacity:0; } 100% { transform:scale(1); opacity:1; } }
  .pop { animation:pop .25s ease both; }
  /* Unlock banner */
  .unlock-banner { background:linear-gradient(90deg, rgba(125,211,252,0.10), rgba(125,211,252,0.04)); border:1px solid rgba(125,211,252,0.35); }
  /* Readability — larger text + roomier word/line spacing across lesson + quiz */
  #content { letter-spacing:0.014em; word-spacing:0.08em; }
  #content .text-sm { font-size:1rem; line-height:1.9; }
  #content .text-xs { font-size:0.8rem; line-height:1.6; }
  #content p { line-height:1.9; }
  #content li { margin-top:0.25rem; line-height:1.8; }
  .prose-tight .text-slate-400 { color:#aeb9c7; }
  .prose-tight .space-y-3 > * + * { margin-top:0.95rem; }
  #content pre, #content code, #content [class*="font-mono"] { letter-spacing:normal; word-spacing:normal; }
  /* --- Diagram polish: rounded corners, soft depth, subtle gradients (matches the Docusaurus guides) --- */
  .gfx { animation: gfxReveal .45s ease both; }
  @keyframes gfxReveal { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
  .gfx rect { rx:6px; ry:6px; }
  .gfx line, .gfx path, .gfx polyline { stroke-linecap:round; stroke-linejoin:round; }
  .gfx circle, .gfx rect { filter: drop-shadow(0 1px 2.5px rgba(2,8,23,0.55)); }
  /* recolor primary nodes by their existing fill value — gives depth with no per-node edits */
  .gfx [fill="#0c4a6e"] { fill: url(#gfxBlue); }
  .gfx [fill="#15803d"] { fill: url(#gfxGreen); }
  @media (prefers-reduced-motion: reduce) { .gfx { animation: none; } }