/* ═══════════════════════════════════════════════════════════════
   nav.css — AI Agent Foundation  Shared Navigation Styles
   Layers: L1 TopBar · L2 ModBar · L3 Breadcrumb
           L4 Sidebar · L5 ViewToggle · L6 Footer
   ═══════════════════════════════════════════════════════════════ */

:root {
  --g-bg:      #0f1117;
  --g-surface: #1a1d27;
  --g-surf2:   #242736;
  --g-border:  #2e3248;
  --g-text:    #e2e8f0;
  --g-dim:     #94a3b8;
  --g-lc:      #22c55e;
  --g-lg:      #7c6af7;
  --g-accent:  #3ecf8e;
  --g-amber:   #f59e0b;

  --g-h1:   48px;   /* L1 height */
  --g-h2:   42px;   /* L2 height */
  --g-htop: 90px;   /* L1 + L2  */
  --g-sw:   220px;  /* left sidebar width */
  --g-sw-r: 220px;  /* right TOC sidebar width */
  --g-fh:   52px;   /* footer height (kept for reference) */
}

/* ── L1 Global Top Bar ─────────────────────────────────────────── */
.g-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--g-h1);
  z-index: 300;
  display: flex;
  align-items: center;
  background: rgba(15,17,23,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--g-border);
  padding: 0 16px;
  font-family: "PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
  box-sizing: border-box;
}

.g-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--g-accent);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 12px;
}

.g-divider {
  width: 1px;
  height: 20px;
  background: var(--g-border);
  margin-right: 12px;
  flex-shrink: 0;
}

.g-track-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
}

.g-track-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--g-dim);
  transition: all .15s;
  border: 1px solid transparent;
}
.g-track-tab:hover            { background: var(--g-surf2); color: var(--g-text); }
.g-track-tab.g-lc-on          { background: rgba(34,197,94,.14); color: var(--g-lc); border-color: rgba(34,197,94,.35); }
.g-track-tab.g-lg-on          { background: rgba(124,106,247,.14); color: #a78bfa; border-color: rgba(124,106,247,.35); }

.g-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.g-home-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--g-dim);
  text-decoration: none;
  border: 1px solid var(--g-border);
  flex-shrink: 0;
  transition: all .15s;
  white-space: nowrap;
}
.g-home-btn:hover { color: var(--g-text); background: var(--g-surf2); }

/* ── L2 Module Sub-Bar ─────────────────────────────────────────── */
.g-modbar {
  position: fixed;
  top: var(--g-h1);
  left: 0; right: 0;
  height: var(--g-h2);
  z-index: 299;
  display: flex;
  align-items: center;
  background: #13151f;
  border-bottom: 1px solid var(--g-border);
  padding: 0 16px;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  font-family: "PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
  box-sizing: border-box;
}
.g-modbar::-webkit-scrollbar { display: none; }

.g-back {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--g-dim);
  text-decoration: none;
  border: 1px solid var(--g-border);
  margin-right: 8px;
  flex-shrink: 0;
  white-space: nowrap;
  transition: all .15s;
}
.g-back:hover { color: var(--g-text); background: var(--g-surf2); }

.g-mod-tab {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 7px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--g-dim);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .15s;
}
.g-mod-tab:hover    { background: var(--g-surf2); color: var(--g-text); }
.g-mod-tab.g-lc-on { background: rgba(34,197,94,.14); color: var(--g-lc); }
.g-mod-tab.g-lg-on { background: rgba(124,106,247,.16); color: #a78bfa; }

/* ── L3 Breadcrumb (in-flow) ───────────────────────────────────── */
.g-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 7px 18px;
  background: var(--g-surface);
  border-bottom: 1px solid var(--g-border);
  font-size: 12px;
  font-family: "PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
  box-sizing: border-box;
}
.g-bc-item        { color: var(--g-dim); text-decoration: none; transition: color .15s; }
.g-bc-item:hover  { color: var(--g-text); }
.g-bc-active      { color: var(--g-text); font-weight: 700; }
.g-bc-sep         { color: #3a3f5c; }

/* ── L4 Lesson Sidebar (fixed left) ────────────────────────────── */
.g-sidebar {
  position: fixed;
  left: 0;
  top: var(--g-htop);
  bottom: 0;
  width: var(--g-sw);
  z-index: 200;
  background: var(--g-surface);
  border-right: 1px solid var(--g-border);
  overflow-y: auto;
  padding: 10px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--g-border) transparent;
  font-family: "PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
  box-sizing: border-box;
}
.g-sidebar::-webkit-scrollbar       { width: 4px; }
.g-sidebar::-webkit-scrollbar-thumb { background: var(--g-border); border-radius: 2px; }

.g-sidebar-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g-dim);
  padding: 0 14px 8px;
}

.g-sidebar-item {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 7px 14px;
  color: var(--g-dim);
  font-size: 12px;
  font-weight: 600;
  transition: all .15s;
  border-left: 2px solid transparent;
  box-sizing: border-box;
  cursor: default;
}
.g-sidebar-item:hover  { background: var(--g-surf2); color: var(--g-text); }
.g-sidebar-item.g-lc-on { background: rgba(34,197,94,.1);   color: var(--g-lc); border-left-color: var(--g-lc); }
.g-sidebar-item.g-lg-on { background: rgba(124,106,247,.12); color: #a78bfa;    border-left-color: #7c6af7; }

.g-sn {
  width: 20px; height: 20px;
  border-radius: 5px;
  background: var(--g-surf2);
  font-size: 10px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.g-sidebar-item.g-lc-on .g-sn { background: rgba(34,197,94,.25);   color: var(--g-lc); }
.g-sidebar-item.g-lg-on .g-sn { background: rgba(124,106,247,.35); color: #a78bfa; }

.g-st {
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  word-break: break-word;
}
.g-st:hover { text-decoration: underline; }

.g-si { display: flex; gap: 3px; flex-shrink: 0; }
.g-si a {
  width: 18px; height: 18px;
  border-radius: 4px;
  font-size: 9px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid;
  text-decoration: none;
  transition: all .15s;
}
.g-si-nb { color: var(--g-amber); border-color: rgba(245,158,11,.35); }
.g-si-nb:hover { background: rgba(245,158,11,.1); }
.g-si-ex { color: #a78bfa; border-color: rgba(124,106,247,.35); }
.g-si-ex:hover { background: rgba(124,106,247,.1); }

.g-sidebar-div { height: 1px; background: var(--g-border); margin: 6px 14px; }

/* ── L5 View Toggle (in-flow) ──────────────────────────────────── */
.g-view-toggle {
  display: flex;
  border: 1px solid var(--g-border);
  border-radius: 9px;
  overflow: hidden;
  background: var(--g-surf2);
  margin: 12px 16px 0;
  font-family: "PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
  box-sizing: border-box;
}
.g-vt-tab {
  flex: 1;
  padding: 7px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--g-dim);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all .15s;
}
.g-vt-tab + .g-vt-tab { border-left: 1px solid var(--g-border); }
.g-vt-tab:hover    { color: var(--g-text); background: var(--g-surface); }
.g-vt-nb-on        { background: rgba(245,158,11,.12); color: var(--g-amber); }
.g-vt-ex-on        { background: rgba(124,106,247,.12); color: #a78bfa; }

/* ── L6 Footer Prev/Next (fixed bottom) ────────────────────────── */
.g-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--g-fh);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: var(--g-surface);
  border-top: 1px solid var(--g-border);
  font-family: "PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
  box-sizing: border-box;
}
.g-nav-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 9px;
  border: 1px solid var(--g-border);
  font-size: 12px;
  font-weight: 700;
  color: var(--g-dim);
  background: var(--g-surf2);
  transition: all .15s;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.g-nav-btn:hover         { border-color: var(--g-dim); color: var(--g-text); }
.g-nav-next              { justify-content: flex-end; }
.g-nav-disabled          { opacity: .4; pointer-events: none; }

.g-nav-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--g-dim);
}
.g-dots       { display: flex; gap: 3px; }
.g-dot-item   { width: 6px; height: 6px; border-radius: 50%; background: var(--g-border); }
.g-dot-item.g-lc-on { background: var(--g-lc); width: 14px; border-radius: 3px; }
.g-dot-item.g-lg-on { background: #7c6af7;     width: 14px; border-radius: 3px; }

/* ── L7 Right TOC Sidebar (explained pages) ────────────────────── */
nav.toc {
  position: fixed !important;
  right: 0 !important;
  top: var(--g-htop) !important;
  bottom: 0 !important;
  width: var(--g-sw-r) !important;
  overflow-y: auto !important;
  background: var(--g-surface) !important;
  border: none !important;
  border-left: 1px solid var(--g-border) !important;
  border-radius: 0 !important;
  padding: 14px 0 10px !important;
  margin: 0 !important;
  z-index: 150 !important;
  box-sizing: border-box !important;
  scrollbar-width: thin;
  scrollbar-color: var(--g-border) transparent;
  font-family: "PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
}
nav.toc::-webkit-scrollbar       { width: 3px; }
nav.toc::-webkit-scrollbar-thumb { background: var(--g-border); border-radius: 2px; }
nav.toc h2 {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--g-dim) !important;
  padding: 0 14px 8px !important;
  margin: 0 0 6px !important;
  border-bottom: 1px solid var(--g-border) !important;
}
nav.toc ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  counter-reset: toc-n !important;
}
nav.toc li {
  counter-increment: toc-n !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}
nav.toc a {
  display: flex !important;
  align-items: flex-start !important;
  gap: 7px !important;
  padding: 5px 10px 5px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: var(--g-dim) !important;
  text-decoration: none !important;
  border-left: 2px solid transparent !important;
  transition: color .12s, background .12s, border-color .12s !important;
}
nav.toc a::before {
  content: counter(toc-n) !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 15px !important;
  text-align: center !important;
  color: var(--g-dim) !important;
  background: var(--g-surf2) !important;
  border-radius: 3px !important;
  margin-top: 1px !important;
  transition: background .12s, color .12s !important;
}
nav.toc a:hover {
  color: var(--g-text) !important;
  background: var(--g-surf2) !important;
}
nav.toc a.g-toc-active {
  color: var(--g-accent) !important;
  background: rgba(62, 207, 142, 0.06) !important;
  border-left-color: var(--g-accent) !important;
}
nav.toc a.g-toc-active::before {
  background: var(--g-accent) !important;
  color: var(--g-bg) !important;
}

/* ── GitHub link in TopBar ─────────────────────────────────────── */
.g-github-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--g-border);
  color: var(--g-dim);
  text-decoration: none;
  flex-shrink: 0;
  margin-left: 8px;
  transition: all .15s;
}
.g-github-btn:hover { color: var(--g-text); background: var(--g-surf2); border-color: var(--g-dim); }
.g-github-btn svg   { display: block; }

/* ── Theme toggle button ────────────────────────────────────────── */
.g-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--g-border);
  background: transparent;
  color: var(--g-dim);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 4px;
  transition: all .15s;
  padding: 0;
}
.g-theme-btn:hover { color: var(--g-text); background: var(--g-surf2); border-color: var(--g-dim); }
/* moon shows in dark, sun shows in light */
.g-ti-sun  { display: none; }
.g-ti-moon { display: block; }
html[data-theme="light"] .g-ti-sun  { display: block; }
html[data-theme="light"] .g-ti-moon { display: none; }

/* ── Light mode variable overrides ──────────────────────────────── */
html[data-theme="light"] {
  /* nav variables */
  --g-bg:      #f4f5fb;
  --g-surface: #ffffff;
  --g-surf2:   #eaecf7;
  --g-border:  #cdd2ea;
  --g-text:    #18192c;
  --g-dim:     #545d80;
  --g-lc:      #15803d;
  --g-lg:      #5248d8;
  --g-accent:  #0d9960;
  --g-amber:   #c2780a;
  /* page-level variables (overrides :root in each page's inline <style>) */
  --bg:        #f4f5fb;
  --surface:   #ffffff;
  --surface2:  #eaecf7;
  --border:    #cdd2ea;
  --text:      #18192c;
  --text-dim:  #545d80;
  --code-bg:   #f8fafc;
  --accent:    #5b4dd4;
  --langchain: #15803d;
  --langgraph: #5248d8;
  --accent2:   #0d9960;
  --accent3:   #b45309;
  --accent4:   #dc2626;
  --jp-layout-color0: #f4f5fb;
  --jp-layout-color1: #ffffff;
  --jp-layout-color2: #eef1fa;
  --jp-layout-color3: #dde3f2;
  --jp-layout-color4: #cdd6ea;
  --jp-inverse-layout-color0: #18192c;
  --jp-inverse-layout-color1: #273044;
  --jp-inverse-layout-color2: #545d80;
  --jp-inverse-layout-color3: #71799a;
  --jp-inverse-layout-color4: #9aa3bd;
  --jp-ui-font-color0: #18192c;
  --jp-ui-font-color1: #273044;
  --jp-ui-font-color2: #545d80;
  --jp-ui-font-color3: #71799a;
  --jp-ui-inverse-font-color0: #ffffff;
  --jp-ui-inverse-font-color1: #f4f5fb;
  --jp-content-font-color0: #18192c;
  --jp-content-font-color1: #273044;
  --jp-content-font-color2: #545d80;
  --jp-content-font-color3: #71799a;
  --jp-border-color0: #cdd2ea;
  --jp-border-color1: #d8def0;
  --jp-border-color2: #e4e8f4;
  --jp-border-color3: #eef1fa;
  --jp-inverse-border-color: #545d80;
  --jp-cell-editor-background: #f8fafc;
  --jp-cell-editor-active-background: #ffffff;
  --jp-cell-editor-border-color: #cdd2ea;
  --jp-cell-editor-active-border-color: #5b4dd4;
  --jp-cell-editor-box-shadow: inset 0 0 2px rgba(91,77,212,.24);
  --jp-cell-inprompt-font-color: #5b4dd4;
  --jp-cell-outprompt-font-color: #0d9960;
  --jp-cell-prompt-not-active-font-color: #71799a;
  --jp-mirror-editor-keyword-color: #6d28d9;
  --jp-mirror-editor-atom-color: #b45309;
  --jp-mirror-editor-number-color: #b91c1c;
  --jp-mirror-editor-def-color: #1d4ed8;
  --jp-mirror-editor-variable-color: #18192c;
  --jp-mirror-editor-variable-2-color: #0f766e;
  --jp-mirror-editor-variable-3-color: #15803d;
  --jp-mirror-editor-punctuation-color: #334155;
  --jp-mirror-editor-property-color: #1d4ed8;
  --jp-mirror-editor-operator-color: #334155;
  --jp-mirror-editor-comment-color: #64748b;
  --jp-mirror-editor-string-color: #166534;
  --jp-mirror-editor-string-2-color: #0f766e;
  --jp-mirror-editor-meta-color: #7c3aed;
  --jp-mirror-editor-qualifier-color: #545d80;
  --jp-mirror-editor-builtin-color: #1d4ed8;
  --jp-mirror-editor-bracket-color: #475569;
  --jp-mirror-editor-tag-color: #be123c;
  --jp-mirror-editor-attribute-color: #92400e;
  --jp-mirror-editor-header-color: #6d28d9;
  --jp-mirror-editor-quote-color: #166534;
  --jp-mirror-editor-link-color: #1d4ed8;
  --jp-mirror-editor-error-color: #b91c1c;
  --jp-mirror-editor-hr-color: #64748b;
  --jp-input-background: #f8fafc;
  --jp-input-active-background: #ffffff;
  --jp-input-hover-background: #ffffff;
  --jp-input-border-color: #cdd2ea;
  --jp-input-active-border-color: #5b4dd4;
  --jp-toolbar-background: #ffffff;
  --jp-toolbar-border-color: #cdd2ea;
  --jp-toolbar-active-background: #eef1fa;
  --jp-rendermime-error-background: #fff1f2;
  --jp-rendermime-table-row-background: #f8fafc;
  --jp-rendermime-table-row-hover-background: #eef6ff;
  --jp-notebook-select-background: #eef1fa;
  --jp-notebook-multiselected-color: rgba(91,77,212,.1);
  --jp-vega-background: #ffffff;
  --jp-editor-selected-background: #dde3f2;
  --jp-editor-selected-focused-background: rgba(91,77,212,.18);
  --jp-editor-cursor-color: #18192c;
  --jp-scrollbar-background-color: #f4f5fb;
  --jp-scrollbar-thumb-color: 180,188,212;
  --jp-brand-color0: #473ab8;
  --jp-brand-color1: #5b4dd4;
  --jp-brand-color2: #7c6af7;
  --jp-brand-color3: rgba(91,77,212,.2);
  --jp-brand-color4: rgba(91,77,212,.1);
  color-scheme: light;
}

/* topbar / modbar hardcoded backgrounds → override */
html[data-theme="light"] .g-topbar {
  background: rgba(244, 245, 251, 0.97);
}
html[data-theme="light"] .g-modbar {
  background: #ecedf8;
}

html[data-theme="light"] .top-nav {
  background: rgba(244, 245, 251, 0.94);
  border-bottom-color: var(--g-border);
}
html[data-theme="light"] .nav-divider {
  background: var(--g-border);
}
html[data-theme="light"] .nav-tab {
  color: var(--g-dim);
}
html[data-theme="light"] .nav-tab:hover {
  background: var(--g-surf2);
  color: var(--g-text);
}

/* Page-level light mode for explained/summary lessons. */
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) {
  background: var(--bg);
  color: var(--text);
}
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) header {
  background:
    radial-gradient(circle at 20% 0%, rgba(124,106,247,.14), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #eef1fa 100%);
}
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) h1 {
  background: linear-gradient(90deg, #92400e, #0f766e, #4338ca);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) pre,
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) .output-block {
  background: var(--code-bg);
  border-color: var(--border);
  color: #273044;
}
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) pre code {
  color: #273044;
}
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) .compare-table tr:nth-child(even) td,
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) .compare-table tr:nth-child(even) {
  background: rgba(84, 93, 128, .055);
}
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) .kw { color: #7c3aed; }
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) .fn,
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) .state-box .key-name { color: #2563eb; }
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) .str,
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) .state-box .val { color: #0d9960; }
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) .cmt { color: #64748b; }
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) .cls { color: #b45309; }
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) .num { color: #dc2626; }
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) .ret { color: #0891b2; }
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) .var { color: #18192c; }
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) [style*="color:#fbbf24"],
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) [style*="color: #fbbf24"],
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) [style*="color:#fcd34d"],
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) [style*="color: #fcd34d"],
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) [style*="color:#ffcb6b"],
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) [style*="color: #ffcb6b"],
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) [style*="color:#f59e0b"],
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) [style*="color: #f59e0b"] {
  color: #92400e !important;
}
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) [style*="color:#3ecf8e"],
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) [style*="color: #3ecf8e"],
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) [style*="color:#67e8f9"],
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) [style*="color: #67e8f9"],
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) [style*="color:#89ddff"],
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) [style*="color: #89ddff"],
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) [style*="color:#80cbc4"],
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) [style*="color: #80cbc4"] {
  color: #0f766e !important;
}

/* Notebook pages ship a late dark override; these light rules intentionally outrank it. */
html[data-theme="light"] body.jp-Notebook,
html[data-theme="light"] .jp-Notebook,
html[data-theme="light"] .jp-NotebookPanel {
  background: var(--jp-layout-color0) !important;
  color: var(--jp-content-font-color0) !important;
}
html[data-theme="light"] body.jp-Notebook .jp-Cell,
html[data-theme="light"] body.jp-Notebook .jp-Notebook-cell,
html[data-theme="light"] body.jp-Notebook .jp-Cell-inputWrapper,
html[data-theme="light"] body.jp-Notebook .jp-Cell-outputWrapper {
  background: transparent !important;
}
html[data-theme="light"] body.jp-Notebook .jp-InputArea-editor,
html[data-theme="light"] body.jp-Notebook .jp-CodeCell .jp-Cell-inputWrapper,
html[data-theme="light"] body.jp-Notebook .jp-RenderedMarkdown pre,
html[data-theme="light"] body.jp-Notebook .highlight pre {
  background: var(--jp-cell-editor-background) !important;
  border-color: var(--jp-border-color1) !important;
  color: #273044 !important;
}
html[data-theme="light"] body.jp-Notebook .jp-RenderedMarkdown,
html[data-theme="light"] body.jp-Notebook .jp-RenderedText,
html[data-theme="light"] body.jp-Notebook .jp-OutputArea-output,
html[data-theme="light"] body.jp-Notebook .jp-RenderedText pre {
  color: var(--jp-content-font-color1) !important;
}
html[data-theme="light"] body.jp-Notebook .jp-RenderedMarkdown h1,
html[data-theme="light"] body.jp-Notebook .jp-RenderedMarkdown h2,
html[data-theme="light"] body.jp-Notebook .jp-RenderedMarkdown h3,
html[data-theme="light"] body.jp-Notebook .jp-RenderedMarkdown h4,
html[data-theme="light"] body.jp-Notebook .jp-RenderedMarkdown h5,
html[data-theme="light"] body.jp-Notebook .jp-RenderedMarkdown h6 {
  color: var(--jp-content-font-color0) !important;
}
html[data-theme="light"] body.jp-Notebook .jp-RenderedMarkdown code {
  background: var(--jp-layout-color2) !important;
  color: #0f766e !important;
}
html[data-theme="light"] body.jp-Notebook .jp-RenderedMarkdown blockquote {
  background: rgba(91,77,212,.08) !important;
  border-left-color: var(--jp-brand-color1) !important;
  color: var(--jp-content-font-color2) !important;
}
html[data-theme="light"] body.jp-Notebook .jp-RenderedMarkdown table th {
  background: var(--jp-layout-color2) !important;
  color: var(--jp-content-font-color0) !important;
  border-color: var(--jp-border-color1) !important;
}
html[data-theme="light"] body.jp-Notebook .jp-RenderedMarkdown table td {
  border-color: var(--jp-border-color1) !important;
  color: var(--jp-content-font-color1) !important;
}
html[data-theme="light"] body.jp-Notebook .jp-RenderedMarkdown table tr:nth-child(even) {
  background: var(--jp-rendermime-table-row-background) !important;
}
html[data-theme="light"] body.jp-Notebook .ansi-green-fg,
html[data-theme="light"] body.jp-Notebook .ansi-green-intense-fg {
  color: #166534 !important;
}
html[data-theme="light"] body.jp-Notebook .ansi-cyan-fg,
html[data-theme="light"] body.jp-Notebook .ansi-cyan-intense-fg {
  color: #0f766e !important;
}
html[data-theme="light"] body.jp-Notebook .ansi-yellow-fg,
html[data-theme="light"] body.jp-Notebook .ansi-yellow-intense-fg {
  color: #92400e !important;
}
html[data-theme="light"] body.jp-Notebook .ansi-blue-fg,
html[data-theme="light"] body.jp-Notebook .ansi-blue-intense-fg {
  color: #1d4ed8 !important;
}
html[data-theme="light"] body.jp-Notebook .ansi-magenta-fg,
html[data-theme="light"] body.jp-Notebook .ansi-magenta-intense-fg {
  color: #7c3aed !important;
}
html[data-theme="light"] body.jp-Notebook .ansi-red-fg,
html[data-theme="light"] body.jp-Notebook .ansi-red-intense-fg {
  color: #b91c1c !important;
}
html[data-theme="light"] body.jp-Notebook [style*="color:#3ecf8e"],
html[data-theme="light"] body.jp-Notebook [style*="color: #3ecf8e"],
html[data-theme="light"] body.jp-Notebook [style*="color:#67e8f9"],
html[data-theme="light"] body.jp-Notebook [style*="color: #67e8f9"],
html[data-theme="light"] body.jp-Notebook [style*="color:#89ddff"],
html[data-theme="light"] body.jp-Notebook [style*="color: #89ddff"],
html[data-theme="light"] body.jp-Notebook [style*="color:#80cbc4"],
html[data-theme="light"] body.jp-Notebook [style*="color: #80cbc4"] {
  color: #0f766e !important;
}
html[data-theme="light"] body.jp-Notebook [style*="color:#f59e0b"],
html[data-theme="light"] body.jp-Notebook [style*="color: #f59e0b"],
html[data-theme="light"] body.jp-Notebook [style*="color:#fbbf24"],
html[data-theme="light"] body.jp-Notebook [style*="color: #fbbf24"],
html[data-theme="light"] body.jp-Notebook [style*="color:#ffcb6b"],
html[data-theme="light"] body.jp-Notebook [style*="color: #ffcb6b"] {
  color: #92400e !important;
}
html[data-theme="light"] body.jp-Notebook ::-webkit-scrollbar-track {
  background: var(--jp-scrollbar-background-color);
}
html[data-theme="light"] body.jp-Notebook ::-webkit-scrollbar-thumb {
  background: rgb(var(--jp-scrollbar-thumb-color));
}

/* active tab colours: light-purple #a78bfa → darker for contrast */
html[data-theme="light"] .g-track-tab.g-lg-on  { color: #5248d8; border-color: rgba(82,72,216,.35); }
html[data-theme="light"] .g-mod-tab.g-lg-on    { color: #5248d8; }
html[data-theme="light"] .g-sidebar-item.g-lg-on { color: #5248d8; }
html[data-theme="light"] .g-sidebar-item.g-lg-on .g-sn { background: rgba(82,72,216,.18); color: #5248d8; }
html[data-theme="light"] .g-vt-ex-on           { color: #5248d8; background: rgba(82,72,216,.1); }

/* home page source box: near-transparent bg barely shows on light bg */
html[data-theme="light"] .source-inner { background: var(--surface); }

/* TOC active state: adapt accent to light mode palette */
html[data-theme="light"] nav.toc a.g-toc-active {
  color: #0d9960 !important;
  background: rgba(13, 153, 96, 0.07) !important;
  border-left-color: #0d9960 !important;
}
html[data-theme="light"] nav.toc a.g-toc-active::before {
  background: #0d9960 !important;
  color: #ffffff !important;
}
html[data-theme="light"] nav.toc a::before {
  color: #545d80 !important;
  background: #eaecf7 !important;
}
html[data-theme="light"] nav.toc a:hover {
  background: #eaecf7 !important;
  color: #18192c !important;
}

/* ── Fixed language selector ───────────────────────────────────── */
.g-language-widget {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 500;
  font-family: "PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
}

.g-language-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--g-border);
  background: rgba(26,29,39,.94);
  color: var(--g-text);
  box-shadow: 0 10px 30px rgba(0,0,0,.32);
  cursor: pointer;
  font-weight: 800;
  font-size: 12px;
  transition: transform .15s, background .15s, border-color .15s;
}

.g-language-trigger:hover,
.g-language-widget.open .g-language-trigger {
  transform: translateY(-1px);
  background: var(--g-surf2);
  border-color: var(--g-accent);
}

.g-language-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: rgba(62,207,142,.16);
  color: var(--g-accent);
  font-size: 11px;
  line-height: 1;
}

.g-language-caret {
  color: var(--g-dim);
  font-size: 10px;
}

.g-language-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: 164px;
  padding: 6px;
  border: 1px solid var(--g-border);
  border-radius: 12px;
  background: rgba(26,29,39,.98);
  box-shadow: 0 18px 45px rgba(0,0,0,.38);
  display: none;
}

.g-language-widget.open .g-language-menu { display: block; }

.g-language-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 9px;
  border-radius: 8px;
  color: var(--g-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
}

.g-language-option:hover {
  background: var(--g-surf2);
  color: var(--g-text);
}

.g-language-option.active {
  color: var(--g-accent);
  background: rgba(62,207,142,.12);
}

.g-language-option.disabled {
  opacity: .45;
  cursor: not-allowed;
}

.g-language-check {
  width: 14px;
  color: var(--g-accent);
  font-size: 12px;
  text-align: center;
}

html[data-theme="light"] .g-language-trigger,
html[data-theme="light"] .g-language-menu {
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 30px rgba(47,52,83,.16);
}

@media (max-width: 640px) {
  .g-language-widget {
    right: 12px;
    bottom: 12px;
  }
}

/* ── Inline code: amber pill too light on white background ─────── */
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) p code,
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) li code,
html[data-theme="light"] body:not(.jp-Notebook):not(.home-page) td code {
  background: rgba(146, 64, 14, 0.07) !important;
  border-color: rgba(146, 64, 14, 0.2) !important;
  color: #92400e !important;
}

/* ── Body offset helpers ────────────────────────────────────────── */
/* Applied via inline <style> per page to avoid global conflicts */