:root{
  --navy:#0f3d3d;
  --blue:#0e7490;
  --gray-bg:#f1f7f6;
  --border:#d3e4e1;
  --accent:#0f766e;
  --warn:#d97706;
}
*{box-sizing:border-box;}
body{
  font-family:-apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color:#1a1f26; line-height:1.55; font-size:13.5px; margin:0; padding:0 36px;
}
h1{color:var(--navy); font-size:27px; border-bottom:3px solid var(--navy); padding-bottom:8px; margin:0 0 6px;}
h1.problem-title{margin-top:0;}
h2{color:var(--navy); font-size:18px; margin-top:30px; border-left:5px solid var(--accent); padding-left:10px;}
h3{color:#0f5e56; font-size:14.5px; margin-top:20px;}
h4{color:#4b6b66; font-size:13.5px; margin-top:14px;}
p{margin:8px 0;}
table{width:100%; border-collapse:collapse; margin:10px 0 18px; font-size:12.3px;}
th{background:var(--navy); color:#fff; text-align:left; padding:6px 8px;}
td{border:1px solid var(--border); padding:6px 8px; vertical-align:top;}
tr:nth-child(even) td{background:var(--gray-bg);}
pre{background:#0f172a; color:#e2e8f0; padding:11px 13px; border-radius:6px; overflow-x:auto; font-size:11.7px; line-height:1.5; white-space:pre;}
code{font-family:"SFMono-Regular", Consolas, Menlo, monospace; font-size:12px; background:#eef1f4; padding:1px 4px; border-radius:3px;}
pre code{background:none; padding:0;}
.callout{background:#e3f5f2; border-left:4px solid var(--accent); padding:9px 14px; margin:12px 0; border-radius:4px;}
.prompt{background:#fff7e6; border-left:4px solid var(--warn); padding:10px 14px; font-style:italic; margin:12px 0; border-radius:4px;}
.section-toc{background:var(--gray-bg); border:1px solid var(--border); border-radius:6px; padding:10px 14px; margin:14px 0; font-size:11.8px; column-count:3; column-gap:18px;}
.section-toc a{display:block; margin-bottom:3px;}
a{color:var(--blue); text-decoration:none;}
.badge{display:inline-block; background:var(--accent); color:#fff; font-size:10.5px; padding:2px 8px; border-radius:10px; margin-left:8px; font-weight:600;}
.badge.warn{background:var(--warn);}
.page-break{page-break-before:always;}
.no-break{page-break-inside:avoid;}
.toc-master{background:var(--navy); color:#fff; padding:18px 22px; border-radius:8px;}
.toc-master a{color:#bdeae3;}
.toc-master h2{color:#fff; border-left:5px solid var(--accent); margin-top:0;}
.dialog{margin:6px 0;}
.dialog .who{font-weight:700; color:var(--navy);}
.diagram{background:#fbfbfd; border:1px solid var(--border); border-radius:8px; padding:16px 10px; margin:14px 0; overflow-x:auto; text-align:center;}
.diagram-caption{font-size:11px; color:#8a8f98; text-align:center; margin:-6px 0 14px;}
.cover{text-align:center; padding:120px 0 60px;}
.cover h1{border:none; font-size:34px;}
.cover p{color:#555; font-size:15px;}
footer-note{display:block; text-align:center; color:#94a3b8; font-size:11px; margin:40px 0;}


/* ================= Multi-page site chrome (added by build.py) ================= */

/* Dark mode uses a neutral charcoal base for every content surface (body,
   cards, tables, code, search, toc-master) -- tinting those surfaces with
   the teal accent hue made the whole page read as murky/swampy rather than
   a clean dark UI. Teal is reserved for *accents* only: headings, links,
   badges, borders, and the always-on sidebar/callout brand color. */
html[data-theme="dark"]{
  --navy:#5eead4; --blue:#22d3ee; --gray-bg:#1b1e23; --border:#2b2f36; --accent:#2dd4bf; --warn:#f59e0b;
}
html[data-theme="dark"] body{background:#12141a; color:#e6e8eb;}
html[data-theme="dark"] tr:nth-child(even) td{background:#1a1d23;}
html[data-theme="dark"] code{background:#1b1e23; color:#e6e8eb;}
html[data-theme="dark"] pre code{background:none; color:inherit;}
html[data-theme="dark"] .toc-master{background:#1b1f24;}
html[data-theme="dark"] .filter-btn{background:#1b1e23; color:#e6e8eb;}
html[data-theme="dark"] .problem-card{background:#1a1d23;}
html[data-theme="dark"] #search-results{background:#1a1d23; color:#e6e8eb;}
html[data-theme="dark"] #search-results a{color:#e6e8eb; border-bottom-color:#2b2f36;}
html[data-theme="dark"] #search-results a:hover{background:#23272e;}

/* h3/h4 and table headers use hardcoded light-mode colors in the original
   single-page doc's own <style> block (it has no dark mode at all), and
   --navy flips to a *light* teal for dark mode everywhere else in this file
   -- so th's "white text on var(--navy) background" silently becomes
   washed-out white-on-light-teal, and h3/h4's hardcoded dark-teal/slate
   text becomes nearly invisible dark-on-dark. Override both explicitly. */
html[data-theme="dark"] h3{color:#5eead4;}
html[data-theme="dark"] h4{color:#9aa6a3;}
html[data-theme="dark"] th{background:#1b1f24; color:#e6e8eb;}

/* --accent and --blue flip to light tints in dark mode so they stay legible
   as *text* (headings, links, labels) on a dark background -- but several
   components reuse the same variables as a *background* paired with fixed
   white text (badges, active nav item, active filter button). A light tint
   behind white text is washed out and low-contrast, so those specific
   components get their own vivid, darker-toned override instead of the
   text-oriented variable. */
html[data-theme="dark"] .badge{background:#0f766e;}
html[data-theme="dark"] .badge.warn{background:#b45309;}
html[data-theme="dark"] .nav-list li a.active{background:#0f766e; color:#fff;}
html[data-theme="dark"] .filter-btn.active{background:#0e7490; color:#fff;}

body{padding:0;}
#content{margin-left:250px;}
.content-inner{padding:0 36px 40px; max-width:1100px; margin:0 auto;}

#sidebar{
  position:fixed; top:0; left:0; width:250px; height:100vh; overflow-y:auto;
  background:#0f3d3d; color:#fff; padding:16px 14px; box-sizing:border-box; z-index:10;
}
#sidebar .sidebar-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
#sidebar .brand{color:#fff; font-weight:700; font-size:14.5px;}
#theme-toggle{background:none; border:1px solid #3f7570; color:#fff; border-radius:6px; padding:3px 8px; cursor:pointer; font-size:13px;}
.search-wrap{position:relative; margin-bottom:14px;}
#search-box{width:100%; padding:6px 8px; border-radius:5px; border:1px solid #3f7570; font-size:12.5px; background:#0f3d3d; color:#fff;}
#search-box::placeholder{color:#a9d6d0;}
#search-results{position:absolute; top:100%; left:0; right:0; background:#fff; color:#1a1f26; border-radius:6px; margin-top:4px; max-height:320px; overflow-y:auto; box-shadow:0 4px 14px rgba(0,0,0,.25); z-index:30; display:none;}
#search-results.open{display:block;}
#search-results a{display:block; padding:6px 10px; font-size:12px; border-bottom:1px solid #eee;}
#search-results a:hover{background:#e3f5f2;}
#search-results .result-parent{display:block; font-size:10px; color:#888;}
.nav-list{list-style:none; margin:0; padding:0; font-size:12.5px;}
.nav-list li a{display:block; color:#bdeae3; padding:5px 8px; border-radius:5px; margin-bottom:1px;}
.nav-list li a:hover{background:rgba(255,255,255,.08);}
.nav-list li a.active{background:var(--accent); color:#fff; font-weight:600;}

#menu-toggle{display:none; position:fixed; top:10px; left:10px; z-index:40; background:#0f3d3d; color:#fff; border:none; border-radius:6px; width:34px; height:34px; font-size:17px; cursor:pointer;}

h3[id]{scroll-margin-top:64px;}

.jumpbar{position:sticky; top:0; z-index:6; background:var(--gray-bg); border:1px solid var(--border); border-radius:6px; padding:8px 14px; margin:0 0 16px; display:flex; align-items:center; gap:10px; font-size:12.5px;}
.jumpbar label{font-weight:600; color:var(--navy); white-space:nowrap;}
.jump-select{flex:1; max-width:340px; padding:4px 8px; border-radius:5px; border:1px solid var(--border); font-size:12.5px; background:#fff; color:#1a1f26;}
html[data-theme="dark"] .jump-select{background:#12141a; color:#e6e8eb;}

.prevnext{display:flex; justify-content:space-between; align-items:center; margin:36px 0 24px; padding-top:14px; border-top:1px solid var(--border);}
.prevnext-link{font-size:13px; font-weight:600;}

.filter-bar{text-align:center; margin:10px 0 22px;}
.filter-btn{background:#fff; border:1px solid var(--border); border-radius:16px; padding:5px 16px; margin:0 4px; font-size:12.5px; cursor:pointer; color:#334155;}
.filter-btn.active{background:var(--blue); color:#fff; border-color:var(--blue);}
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin:0 0 40px;}
.problem-card{display:flex; flex-direction:column; gap:6px; border:1px solid var(--border); border-radius:8px; padding:14px 16px; background:#fff; transition:box-shadow .15s, transform .15s;}
.problem-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.1); transform:translateY(-2px);}
.problem-card .card-num{color:var(--accent); font-weight:700; font-size:12px;}
.problem-card .card-name{color:var(--navy); font-weight:600; font-size:14.5px;}
.problem-card.hidden{display:none;}

/* ---- read-only "editor" chrome for all <pre> code blocks ---- */
.code-window{border-radius:8px; overflow:hidden; margin:10px 0 18px; border:1px solid #1e293b; box-shadow:0 1px 3px rgba(0,0,0,.08);}
.code-window-bar{background:#1e293b; padding:7px 10px; display:flex; align-items:center; gap:6px;}
.code-window-bar .dot{width:9px; height:9px; border-radius:50%; display:inline-block;}
.code-window-bar .dot-red{background:#ef4444;}
.code-window-bar .dot-yellow{background:#f59e0b;}
.code-window-bar .dot-green{background:#22c55e;}
.code-window-bar .cw-label{color:#94a3b8; font-size:10.5px; margin-left:6px; text-transform:uppercase; letter-spacing:.04em;}
.code-window pre{margin:0; border-radius:0;}
.code-window .copy-btn{margin-left:auto; position:static; font-size:10.5px; padding:2px 9px; border-radius:4px; border:1px solid #334155; background:#0f172a; color:#e2e8f0; cursor:pointer; opacity:.85;}
.code-window .copy-btn:hover{opacity:1;}

/* highlightjs-line-numbers.js gutter */
.hljs-ln{border-collapse:collapse; width:100%;}
.hljs-ln td{padding:0; border:none;}
.hljs-ln-numbers{text-align:right; color:#516074; padding:0 10px 0 6px !important; border-right:1px solid #334155; user-select:none; white-space:nowrap; vertical-align:top; width:1%;}
.hljs-ln-code{padding:0 0 0 14px !important; vertical-align:top;}
/* the generic table zebra-striping rule (tr:nth-child(even) td) also matches the
   line-number table injected into code blocks -- kill it there so code stays on
   one consistent dark background instead of alternating with light rows */
.hljs-ln tr:nth-child(even) td, .hljs-ln tr td{background:none !important;}

/* callout/prompt boxes keep their light, colorful backgrounds even in dark mode
   (by design from the original single-page doc) -- give them dark-mode-safe
   backgrounds + text color so they stay readable instead of light-gray-on-pale-yellow */
html[data-theme="dark"] .callout{background:#123330; color:#d3f3ee; border-left-color:#2dd4bf;}
html[data-theme="dark"] .prompt{background:#3a2f14; color:#f5e6c8; border-left-color:#f59e0b;}

/* mermaid diagrams render their own light-theme SVG background regardless of
   page theme (mermaid.initialize uses a fixed 'base' theme) -- keep the
   surrounding card legible in dark mode without fighting the SVG itself */
html[data-theme="dark"] .diagram-caption{color:#98a1a8;}

@media (max-width: 880px){
  #sidebar{left:-260px; transition:left .22s; box-shadow:2px 0 10px rgba(0,0,0,.2);}
  #sidebar.open{left:0;}
  #content{margin-left:0;}
  .content-inner{padding:0 18px 40px;}
  #menu-toggle{display:block;}
  .section-toc{column-count:2 !important;}
}
@media (max-width: 600px){
  .section-toc{column-count:1 !important;}
  table{display:block; overflow-x:auto; white-space:nowrap;}
  .diagram{margin:14px -18px 16px;}
  h1.problem-title{display:flex; flex-direction:column; align-items:flex-start; gap:6px;}
  h1.problem-title .badge{margin-left:0;}
}