@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');

/* ── Brand ─────────────────────────────────────────────────────────── */
:root {
  --kz-ink: #0b1020;          /* header, hero */
  --kz-ink-2: #141a30;
  --kz-accent: #2f6df6;       /* links, buttons */
  --kz-accent-2: #7fb0ff;     /* on dark */
  --md-primary-fg-color: var(--kz-ink);
  --md-primary-fg-color--light: var(--kz-ink-2);
  --md-primary-fg-color--dark: #070a16;
  --md-accent-fg-color: var(--kz-accent);
  --md-typeset-a-color: var(--kz-accent);
  --md-text-font: "Inter", "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--kz-accent);
  --md-accent-fg-color: var(--kz-accent);
}
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0f1424;
  --md-typeset-a-color: var(--kz-accent-2);
  --md-accent-fg-color: var(--kz-accent-2);
}
body { font-family: var(--md-text-font); }
.md-typeset a:not(.md-button):not(.headerlink) { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; }
.md-typeset a:not(.md-button):hover { text-decoration-color: currentColor; }
.md-search__input { background: rgba(255,255,255,.08); color: #fff; }
.md-search__input::placeholder { color: rgba(255,255,255,.6); }

/* Header: dark, flat, with a thin accent rule under the tabs */
.md-header { background: var(--kz-ink); box-shadow: none; }
.md-tabs { background: var(--kz-ink); border-bottom: 1px solid rgba(255,255,255,.08); }
.md-tabs__link--active { color: #fff; font-weight: 600; }
.md-header__title { font-weight: 700; letter-spacing: .01em; }

/* Headings: no icons, tighter, darker */
.md-typeset h1 { font-weight: 700; color: var(--md-default-fg-color); letter-spacing: -.01em; }
.md-typeset h2 { font-weight: 700; letter-spacing: -.005em; margin-top: 2.2em; padding-bottom: .3em; border-bottom: 1px solid var(--md-default-fg-color--lightest); }
.md-typeset h3 { font-weight: 600; }

/* Buttons */
.md-typeset .md-button { border-radius: .4rem; font-weight: 600; }
.md-typeset .md-button--primary { background: var(--kz-accent); border-color: var(--kz-accent); }

/* ── Home hero ─────────────────────────────────────────────────────── */
.kz-hero {
  margin: -1.2rem -.8rem 2rem; padding: 3.6rem 1.6rem 2.6rem; border-radius: .6rem;
  background: radial-gradient(60rem 30rem at 20% -10%, rgba(47,109,246,.35), transparent 60%), var(--kz-ink);
  color: #fff; text-align: left;
}
.kz-hero .kz-eyebrow { font-size: .78rem; letter-spacing: .02em; color: var(--kz-accent-2); font-weight: 600; margin-bottom: 1rem; }
.kz-hero h1 { color: #fff; font-size: 2.6rem; max-width: 50rem; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin: 0 0 1rem; }
.kz-hero .kz-tagline { font-size: 1rem; color: rgba(255,255,255,.72); max-width: 44rem; margin: 0 0 1.6rem; line-height: 1.7; }
.kz-hero .md-button { margin: 0 .5rem .5rem 0; color: #fff; border-color: rgba(255,255,255,.35); }
.kz-hero .md-button--primary { border-color: var(--kz-accent); }
.kz-hero .md-button:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.kz-hero .md-button--primary:hover { background: #4d84ff; }
.kz-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.12); }
.kz-stat b { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1.1; }
.kz-note { margin-top: 1.2rem; font-size: .68rem; color: rgba(255,255,255,.45); }
.kz-hero .kz-note a { color: rgba(255,255,255,.6); }
.kz-stat span { display: block; margin-top: .35rem; font-size: .72rem; line-height: 1.5; color: rgba(255,255,255,.6); }
@media (max-width: 60em) {
  .kz-stats { grid-template-columns: repeat(2, 1fr); }
  .kz-hero { padding: 2.4rem 1.2rem 2rem; border-radius: 0; margin: -1.6rem -.8rem 2rem; }
  .kz-hero h1 { font-size: 1.9rem; }
  .kz-hero h1 br { display: none; }
}

/* Feature cards: calmer */
.md-typeset .grid.cards { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.md-typeset .grid.cards > ul > li { border-radius: .5rem; border-color: var(--md-default-fg-color--lightest); transition: box-shadow .15s, transform .15s; }
.md-typeset .grid.cards > ul > li:hover { box-shadow: 0 8px 24px rgba(11,16,32,.08); transform: translateY(-1px); border-color: var(--md-default-fg-color--lightest); }
.md-typeset .grid.cards > ul > li hr { margin: .6em 0; }
.md-typeset .grid.cards .lg { color: var(--kz-accent); }

/* Tables span the content width, read a little larger, and never break a
   setting name or a value in the middle of a word */
.md-typeset__table { width: 100%; }
.md-typeset table:not([class]) { display: table; width: 100%; font-size: .72rem; }
.md-typeset table:not([class]) th { white-space: nowrap; }
/* Full grid lines, not just the row rules, dark enough to see */
[data-md-color-scheme="default"] { --kz-table-line: #c9ced8; }
[data-md-color-scheme="slate"] { --kz-table-line: #4a5160; }
.md-typeset table:not([class]) { border-collapse: collapse; border: 1px solid var(--kz-table-line); }
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td { border: 1px solid var(--kz-table-line); padding: .55em .9em; }
.md-typeset table:not([class]) th { background: var(--md-code-bg-color); border-bottom-width: 2px; }
.md-typeset table:not([class]) tbody tr:nth-child(even) { background: var(--md-code-bg-color); }
.md-typeset table:not([class]) tbody tr:hover { background: var(--md-code-bg-color); }
.md-typeset table:not([class]) td { vertical-align: top; }
.md-typeset table:not([class]) code { word-break: break-word; }
.md-typeset table:not([class]) td:first-child code { word-break: keep-all; white-space: nowrap; }

/* Rule order: a numbered chain instead of a cramped diagram */
.kz-chain { display: flex; flex-wrap: wrap; gap: .4rem .3rem; align-items: center; margin: 1rem 0; padding: 0; list-style: none; }
.kz-chain li {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .3rem; background: var(--md-code-bg-color); font-size: .75rem; line-height: 1.3;
}
.kz-chain li::before { content: counter(kz) ; counter-increment: kz; font-weight: 700; color: var(--md-primary-fg-color); }
.kz-chain { counter-reset: kz; }
.kz-chain li + li::before { content: "→ " counter(kz); }
.kz-chain li small { color: var(--md-default-fg-color--light); }

/* Step numbers */
.kz-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--md-primary-fg-color); color: #fff;
  font-size: .8em; font-weight: 700; margin-right: .4em;
}

/* Sidebar: room between entries and sections */
.md-nav__item { padding: .12rem 0; }
.md-nav__link { line-height: 1.6; }
.md-nav--primary .md-nav__title { padding-bottom: .4rem; }
.md-nav__item--section > .md-nav__link { margin-top: 1rem; margin-bottom: .3rem; font-size: .68rem; letter-spacing: .04em; text-transform: none; }
.md-nav__item--section:first-child > .md-nav__link { margin-top: .2rem; }