:root {
  --bg: #0d1117;
  --bg-alt: #161b22;
  --bg-inset: #010409;
  --border: #21262d;
  --border-hi: #30363d;
  --text: #c9d1d9;
  --text-dim: #8b949e;
  --text-hi: #e6edf3;
  --blue: #79c0ff;
  --green: #3fb950;
  --red: #f85149;
  --orange: #f0883e;
  --purple: #d2a8ff;
  --mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

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

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: -0.005em;
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 48px 1fr;
  grid-template-areas: "topbar topbar" "sidebar main";
  height: 100vh;
  overflow: hidden;
}

/* ---- top bar ---- */
.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.topbar h1 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-hi); }
.topbar .pkg { color: var(--blue); font-family: var(--mono); }
.tagline { margin-left: auto; font-size: 12px; color: var(--text-dim); font-family: var(--mono); }

/* ---- sidebar ---- */
.sidebar {
  grid-area: sidebar;
  border-right: 1px solid var(--border);
  background: var(--bg-alt);
  overflow-y: auto;
  padding: 12px 0;
}
.sidebar .search {
  margin: 0 12px 12px;
  width: calc(100% - 24px);
  background: var(--bg-inset);
  border: 1px solid var(--border-hi);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  padding: 8px 11px;
  border-radius: 6px;
}
.sidebar .search:focus { outline: none; border-color: var(--blue); }
.cat-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 14px 16px 7px;
}
.fn-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  padding: 8px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fn-item .fn-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-item .fn-count {
  font-size: 10.5px; color: var(--text-dim); background: var(--bg-inset);
  border: 1px solid var(--border-hi); border-radius: 10px; padding: 1px 7px; min-width: 22px; text-align: center;
}
.fn-item:hover { background: var(--border); }
.fn-item.active { background: var(--bg-inset); border-left-color: var(--blue); color: var(--blue); }
.fn-item.active .fn-count { color: var(--blue); border-color: var(--blue); }

.fn-item.home-item { font-family: var(--sans); font-weight: 600; color: var(--text-hi); margin-bottom: 4px; }
.fn-item.home-item.active { color: var(--blue); }

/* ---- main ---- */
.main { grid-area: main; overflow-y: auto; padding: 26px 32px 60px; }
.empty { color: var(--text-dim); margin-top: 40px; font-size: 15px; }

/* ---- home / overview ---- */
.home-hero { max-width: 900px; }
.home-title { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-hi); }
.home-title .pkg { font-family: var(--mono); color: var(--blue); }
.home-title .home-ver { font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--text-dim); }
.home-tagline { margin-top: 12px; font-size: 17px; line-height: 1.55; color: var(--text-hi); }
.home-intro { margin-top: 14px; font-size: 15px; line-height: 1.75; color: var(--text); }
.home-install {
  margin-top: 18px; display: inline-block; background: var(--bg-inset); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 16px; font-family: var(--mono); font-size: 13.5px; color: var(--text);
}
.home-install .py-op { color: var(--text-dim); margin-right: 8px; }
.home-chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--mono); font-size: 12px; color: var(--text-dim);
  background: var(--bg-alt); border: 1px solid var(--border-hi); border-radius: 20px; padding: 3px 12px;
}
.home-stats { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.stat-card {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 20px; min-width: 130px;
}
.stat-val { font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--blue); }
.stat-label { font-size: 12px; color: var(--text-dim); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.06em; }

.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.home-card {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px;
}
.hc-title { font-size: 15px; font-weight: 600; color: var(--text-hi); }
.hc-desc { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }
.hc-fns { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; }
.hc-fn {
  font-family: var(--mono); font-size: 12px; padding: 3px 10px; border-radius: 6px;
  background: var(--bg-inset); border: 1px solid var(--border-hi); color: var(--text-dim); cursor: default;
}
.hc-fn.ready { color: var(--blue); border-color: rgba(121,192,255,0.4); cursor: pointer; }
.hc-fn.ready:hover { background: rgba(121,192,255,0.1); border-color: var(--blue); }
.hc-fn:disabled { opacity: 0.65; }

.home-how { max-width: 900px; font-size: 14.5px; line-height: 1.75; color: var(--text); }
.home-how code { font-family: var(--mono); font-size: 13px; color: var(--blue); background: var(--bg-inset); padding: 1px 6px; border-radius: 4px; }
.home-how b { color: var(--text-hi); }

.fn-header h2 { font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-hi); }
.fn-header .module { font-family: var(--mono); color: var(--text-dim); font-size: 13.5px; margin-top: 5px; }
.fn-header .summary { margin-top: 14px; font-size: 16.5px; line-height: 1.6; max-width: 820px; color: var(--text-hi); }
.fn-header .description { margin-top: 14px; font-size: 15px; color: var(--text); line-height: 1.75; max-width: 820px; }

.sec-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim); margin: 36px 0 14px; padding-bottom: 7px; border-bottom: 1px solid var(--border);
}

pre.sig, pre.returns {
  background: var(--bg-inset); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px 18px; font-family: var(--mono); font-size: 13.5px; color: var(--text);
  overflow-x: auto; line-height: 1.8; white-space: pre;
}
pre.returns { color: var(--text); }

/* signature token colors */
.py-param { color: #ffa657; }              /* parameter name — warm */
.py-type  { color: #79c0ff; }              /* type annotation — blue */
.py-op    { color: #8b949e; }              /* : = -> punctuation — dim */

table.params { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.params th, table.params td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.5; }
table.params th { color: var(--text-dim); font-weight: 600; font-family: var(--sans); }
table.params td.name { font-family: var(--mono); color: var(--purple); white-space: nowrap; }
table.params td.type { font-family: var(--mono); color: var(--blue); white-space: nowrap; }
table.params td.def { font-family: var(--mono); color: var(--orange); white-space: nowrap; }

/* ---- examples: usage → result report ---- */
.example { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 20px; overflow: hidden; background: var(--bg-alt); }
.example.ex-hit { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.ex-head { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.ex-title-row { display: flex; align-items: center; gap: 10px; }
.ex-head .ex-title { font-weight: 600; font-size: 15px; color: var(--text-hi); }
.ex-head .ex-note { color: var(--text-dim); font-size: 13.5px; margin-top: 6px; line-height: 1.6; }

.verdict {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 5px; border: 1px solid transparent;
}
.verdict.pass { color: var(--green); background: rgba(63,185,80,0.12); border-color: rgba(63,185,80,0.35); }
.verdict.fail { color: var(--red); background: rgba(248,81,73,0.12); border-color: rgba(248,81,73,0.35); }

.pane-bar { display: flex; align-items: center; padding: 7px 16px; background: var(--bg-inset); border-bottom: 1px solid var(--border); }
.pane-bar .label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); }

.copy-btn {
  margin-left: auto; background: none; border: 1px solid var(--border-hi); color: var(--text-dim);
  font-family: var(--sans); font-size: 11.5px; font-weight: 500; padding: 3px 11px; border-radius: 6px; cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.copy-btn:hover { color: var(--text-hi); border-color: var(--text-dim); }
.copy-btn.copied { color: var(--green); border-color: var(--green); background: rgba(63,185,80,0.1); }

pre.call {
  margin: 0; padding: 14px 18px; font-family: var(--mono); font-size: 13.5px;
  color: var(--text); white-space: pre; overflow-x: auto; line-height: 1.7;
  border-bottom: 1px solid var(--border);
}
pre.output {
  margin: 0; padding: 14px 18px; font-family: var(--mono); font-size: 13px;
  color: var(--text); white-space: pre; overflow-x: auto; line-height: 1.65; background: var(--bg-inset);
}

/* Python token colors */
.py-kw    { color: #ff7b72; }
.py-str   { color: #a5d6ff; }
.py-num   { color: #f0883e; }
.py-com   { color: #8b949e; font-style: italic; }
.py-fn    { color: #d2a8ff; }
.py-kwarg { color: #79c0ff; }

/* JSON token colors */
.json-key  { color: #7ee787; }
.json-str  { color: #a5d6ff; }
.json-num  { color: #f0883e; }
.json-bool { color: #d2a8ff; }
.json-null { color: #8b949e; }