:root {
  color-scheme: dark;
  --bg: #091214;
  --bg-deep: #060c0e;
  --panel: rgba(17, 31, 33, 0.88);
  --panel-solid: #112022;
  --panel-soft: #16282a;
  --line: rgba(189, 226, 218, 0.13);
  --line-strong: rgba(189, 226, 218, 0.24);
  --text: #e5eee9;
  --muted: #91aaa5;
  --faint: #66807c;
  --accent: #e0b66d;
  --accent-soft: rgba(224, 182, 109, 0.14);
  --cyan: #78bfb6;
  --danger: #df8375;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
  --sans: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef0e9;
  --bg-deep: #e3e7de;
  --panel: rgba(250, 251, 246, 0.9);
  --panel-solid: #fafbf6;
  --panel-soft: #f0f3ec;
  --line: rgba(28, 56, 54, 0.12);
  --line-strong: rgba(28, 56, 54, 0.22);
  --text: #18302f;
  --muted: #5e7470;
  --faint: #82928f;
  --accent: #98702f;
  --accent-soft: rgba(152, 112, 47, 0.11);
  --cyan: #287b73;
  --shadow: 0 24px 65px rgba(54, 69, 62, 0.13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px),
    var(--bg);
  background-size: 32px 32px;
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.72;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.ambient { position: fixed; pointer-events: none; filter: blur(2px); opacity: .55; z-index: -1; }
.ambient-a { width: 42vw; height: 42vw; top: -25vw; right: -10vw; background: radial-gradient(circle, rgba(64,139,129,.18), transparent 68%); }
.ambient-b { width: 45vw; height: 45vw; bottom: -32vw; left: 15vw; background: radial-gradient(circle, rgba(204,158,83,.11), transparent 70%); }

.topbar {
  position: fixed; inset: 0 0 auto 0; height: 72px; z-index: 40;
  display: grid; grid-template-columns: 286px minmax(260px, 620px) 44px;
  align-items: center; gap: 28px; padding: 0 24px;
  border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; width: fit-content; }
.brand strong { display: block; font: 600 18px/1.2 var(--serif); letter-spacing: .16em; }
.brand small { display: block; color: var(--faint); font-size: 9px; letter-spacing: .18em; margin-top: 4px; }
.brand-mark { position: relative; width: 35px; height: 35px; border: 1px solid var(--accent); border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 5px var(--accent-soft); }
.brand-mark::before, .brand-mark::after { content:""; position:absolute; background:var(--bg); }
.brand-mark::before { width: 7px; height: 39px; transform: rotate(42deg); }
.brand-mark::after { width: 39px; height: 5px; transform: rotate(-18deg); }
.brand-mark i { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 14px var(--accent); z-index: 1; }

.search-trigger { height: 42px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--muted); display:flex; align-items:center; gap:10px; padding:0 12px; cursor:pointer; transition:.2s ease; }
.search-trigger:hover { border-color: var(--line-strong); background: var(--panel-soft); color: var(--text); }
.search-trigger svg, .search-input-wrap svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.7; }
.search-trigger span { flex:1; text-align:left; }
kbd { border:1px solid var(--line); border-bottom-color:var(--line-strong); background:var(--bg-deep); border-radius:5px; color:var(--faint); font-size:10px; padding:1px 6px; }
.icon-button { width:42px; height:42px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--muted); display:grid; place-items:center; cursor:pointer; }
.icon-button:hover { color:var(--text); border-color:var(--line-strong); }
.icon-button svg { width:19px; fill:none; stroke:currentColor; stroke-width:1.6; }
.menu-button { display:none; }
.menu-button span { display:block; width:18px; height:1px; background:currentColor; margin:2px; }

.app-shell { padding-top:72px; min-height:100vh; }
.sidebar { position:fixed; left:0; top:72px; bottom:0; width:286px; z-index:30; border-right:1px solid var(--line); background:color-mix(in srgb, var(--bg-deep) 84%, transparent); backdrop-filter:blur(14px); overflow:auto; padding:22px 16px 16px; }
.sidebar-head { display:flex; justify-content:space-between; color:var(--faint); font-size:11px; letter-spacing:.13em; padding:0 10px 14px; text-transform:uppercase; }
.nav-group { margin-bottom:8px; }
.nav-group-button { width:100%; border:0; background:transparent; color:var(--muted); display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:7px; cursor:pointer; }
.nav-group-button:hover { background:var(--panel); color:var(--text); }
.nav-group-button .chevron { margin-left:auto; transition:transform .2s; }
.nav-group.open .chevron { transform:rotate(90deg); }
.nav-icon { color:var(--accent); width:18px; text-align:center; }
.nav-count { color:var(--faint); font-size:10px; }
.nav-items { display:none; padding:2px 0 5px 18px; }
.nav-group.open .nav-items { display:block; }
.nav-item { display:block; position:relative; text-decoration:none; color:var(--faint); font-size:13px; padding:6px 10px 6px 17px; border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-item::before { content:""; position:absolute; left:2px; top:50%; width:6px; height:1px; background:var(--line-strong); }
.nav-item:hover { color:var(--text); background:var(--panel); }
.nav-item.active { color:var(--accent); background:var(--accent-soft); }
.nav-item.active::before { background:var(--accent); width:8px; }
.sidebar-foot { margin-top:22px; border-top:1px solid var(--line); padding:18px 10px 4px; color:var(--faint); font-size:11px; display:flex; align-items:center; gap:8px; }
.status-dot { width:6px; height:6px; border-radius:50%; background:#6fb99c; box-shadow:0 0 8px #6fb99c; }
.sidebar-scrim { display:none; }

main { margin-left:286px; min-height:calc(100vh - 72px); }
.loading-state, .error-state { min-height:70vh; display:grid; place-content:center; text-align:center; color:var(--muted); }
.loader { width:28px; height:28px; margin:auto; border:1px solid var(--line-strong); border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.home { padding:68px clamp(28px, 5vw, 84px) 90px; max-width:1500px; margin:auto; }
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--accent); font-size:11px; letter-spacing:.22em; text-transform:uppercase; }
.eyebrow::before { content:""; width:30px; height:1px; background:var(--accent); }
.hero { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr); gap:64px; align-items:center; min-height:460px; }
.hero h1 { margin:20px 0 22px; font:500 clamp(50px,7vw,92px)/1.05 var(--serif); letter-spacing:.04em; }
.hero h1 span { display:block; color:var(--accent); }
.hero-copy { max-width:640px; color:var(--muted); font-size:16px; }
.hero-actions { display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.primary-button, .secondary-button { display:inline-flex; align-items:center; gap:8px; padding:11px 17px; border-radius:7px; text-decoration:none; font-size:13px; transition:.2s; }
.primary-button { background:var(--accent); color:#17201e; }
.primary-button:hover { filter:brightness(1.07); transform:translateY(-1px); }
.secondary-button { border:1px solid var(--line-strong); color:var(--text); }
.secondary-button:hover { background:var(--panel-soft); }
.hero-visual { position:relative; aspect-ratio:1; max-height:390px; display:grid; place-items:center; }
.orbital { width:min(78%,320px); aspect-ratio:1; border:1px solid var(--line-strong); border-radius:50%; position:relative; display:grid; place-items:center; box-shadow:0 0 80px rgba(65,147,137,.1); }
.orbital::before, .orbital::after { content:""; position:absolute; border:1px solid var(--line); border-radius:50%; }
.orbital::before { inset:14%; }
.orbital::after { inset:31%; border-color:var(--accent); box-shadow:0 0 28px var(--accent-soft); }
.orbit-line { position:absolute; inset:3%; border:1px dashed rgba(120,191,182,.22); border-radius:50%; transform:rotate(62deg) scaleY(.38); }
.orbit-node { position:absolute; width:8px; height:8px; border:1px solid var(--cyan); border-radius:50%; background:var(--bg); top:18%; right:18%; box-shadow:0 0 12px var(--cyan); }
.orbital-core { width:13px; height:13px; border-radius:50%; background:var(--accent); box-shadow:0 0 28px var(--accent); }
.orbit-caption { position:absolute; right:0; bottom:13%; border-left:1px solid var(--accent); padding-left:13px; color:var(--muted); font-size:11px; letter-spacing:.08em; }

.stats { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--panel); margin:12px 0 68px; }
.stat { padding:19px 22px; border-right:1px solid var(--line); }
.stat:last-child { border-right:0; }
.stat strong { display:block; font:500 26px/1.2 var(--serif); color:var(--text); }
.stat span { color:var(--faint); font-size:11px; letter-spacing:.09em; }
.section-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:20px; }
.section-head h2 { margin:0; font:500 24px var(--serif); letter-spacing:.07em; }
.section-head p { margin:5px 0 0; color:var(--faint); font-size:13px; }
.section-head a { color:var(--accent); font-size:12px; text-decoration:none; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:66px; }
.feature-card { min-height:210px; padding:24px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(145deg,var(--panel),transparent); text-decoration:none; transition:.25s ease; display:flex; flex-direction:column; }
.feature-card:hover { transform:translateY(-3px); border-color:var(--line-strong); box-shadow:var(--shadow); }
.feature-card small { color:var(--accent); letter-spacing:.12em; }
.feature-card h3 { margin:15px 0 10px; font:500 20px var(--serif); }
.feature-card p { color:var(--muted); font-size:13px; margin:0; flex:1; }
.feature-card .card-arrow { color:var(--accent); margin-top:18px; }
.category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.category-card { border:1px solid var(--line); background:var(--panel); padding:18px; border-radius:9px; cursor:pointer; color:var(--text); text-align:left; transition:.2s; }
.category-card:hover { border-color:var(--accent); background:var(--accent-soft); }
.category-card strong { display:block; font:500 16px var(--serif); }
.category-card span { color:var(--faint); font-size:11px; }

.article-layout { display:grid; grid-template-columns:minmax(0,850px) 220px; justify-content:center; gap:64px; padding:52px clamp(28px,5vw,72px) 100px; }
.article { min-width:0; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:7px; color:var(--faint); font-size:11px; letter-spacing:.08em; margin-bottom:20px; }
.breadcrumbs a { color:var(--muted); text-decoration:none; }
.breadcrumbs span:not(:last-child)::after, .breadcrumbs a::after { content:"/"; margin-left:7px; color:var(--line-strong); }
.article-header { border-bottom:1px solid var(--line); padding-bottom:26px; margin-bottom:34px; }
.article-header h1 { margin:0 0 13px; font:500 clamp(36px,5vw,58px)/1.2 var(--serif); letter-spacing:.04em; }
.article-meta { display:flex; gap:16px; flex-wrap:wrap; color:var(--faint); font-size:11px; }
.article-meta span { display:flex; align-items:center; gap:6px; }
.markdown-body { font-family:var(--serif); font-size:16px; color:color-mix(in srgb,var(--text) 92%,var(--muted)); }
.markdown-body h2, .markdown-body h3, .markdown-body h4 { scroll-margin-top:94px; color:var(--text); font-family:var(--serif); font-weight:500; }
.markdown-body h2 { font-size:27px; margin:2.2em 0 .8em; padding-bottom:.35em; border-bottom:1px solid var(--line); }
.markdown-body h3 { font-size:20px; margin:1.8em 0 .65em; color:var(--cyan); }
.markdown-body h4 { font-size:17px; margin:1.5em 0 .5em; }
.markdown-body p { margin:0 0 1em; }
.markdown-body strong { color:var(--text); font-weight:600; }
.markdown-body a { color:var(--accent); text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent); text-underline-offset:3px; }
.markdown-body a:hover { text-decoration-color:var(--accent); }
.markdown-body blockquote { margin:1.4em 0; padding:12px 18px; border-left:2px solid var(--accent); background:var(--accent-soft); color:var(--muted); }
.markdown-body blockquote p:last-child { margin-bottom:0; }
.markdown-body ul, .markdown-body ol { padding-left:1.4em; }
.markdown-body li { padding-left:.25em; margin:.35em 0; }
.markdown-body li::marker { color:var(--accent); }
.table-wrap { overflow:auto; margin:1.4em 0 1.8em; border:1px solid var(--line); border-radius:8px; }
.markdown-body table { width:100%; border-collapse:collapse; min-width:540px; font-family:var(--sans); font-size:13px; }
.markdown-body th { color:var(--accent); background:var(--accent-soft); text-align:left; font-weight:500; letter-spacing:.04em; }
.markdown-body th, .markdown-body td { padding:10px 13px; border-bottom:1px solid var(--line); vertical-align:top; }
.markdown-body tr:last-child td { border-bottom:0; }
.markdown-body code { font-family:"Cascadia Code",Consolas,monospace; font-size:.88em; color:var(--cyan); background:var(--panel-soft); padding:.12em .35em; border-radius:4px; }
.markdown-body pre { overflow:auto; padding:16px; background:var(--bg-deep); border:1px solid var(--line); border-radius:8px; }
.markdown-body pre code { background:none; padding:0; }
.markdown-body img { display:block; max-width:min(100%,720px); max-height:520px; object-fit:contain; margin:24px auto; border-radius:10px; border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow); }
.markdown-body hr { border:0; border-top:1px solid var(--line); margin:2em 0; }
.article-footer { margin-top:64px; border-top:1px solid var(--line); padding-top:22px; color:var(--faint); font-size:11px; display:flex; justify-content:space-between; gap:14px; }
.toc { position:sticky; top:104px; align-self:start; max-height:calc(100vh - 128px); overflow:auto; padding-left:16px; border-left:1px solid var(--line); }
.toc strong { display:block; color:var(--muted); font-size:11px; letter-spacing:.12em; margin-bottom:10px; }
.toc a { display:block; color:var(--faint); text-decoration:none; font-size:12px; line-height:1.45; padding:5px 0; }
.toc a.level-3 { padding-left:12px; font-size:11px; }
.toc a:hover, .toc a.active { color:var(--accent); }

.listing { padding:60px clamp(28px,5vw,76px) 90px; max-width:1280px; margin:auto; }
.listing-head h1 { margin:8px 0 10px; font:500 clamp(38px,5vw,58px) var(--serif); }
.listing-head p { color:var(--muted); margin:0 0 36px; }
.doc-list { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.doc-row { text-decoration:none; border:1px solid var(--line); border-radius:9px; background:var(--panel); padding:18px 20px; transition:.2s; }
.doc-row:hover { border-color:var(--line-strong); transform:translateY(-2px); }
.doc-row h2 { margin:0 0 7px; font:500 18px var(--serif); }
.doc-row p { margin:0; color:var(--muted); font-size:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.doc-row small { display:block; color:var(--faint); margin-top:12px; }

.search-modal { position:fixed; inset:0; z-index:100; display:none; padding:10vh 18px; background:rgba(2,8,9,.72); backdrop-filter:blur(10px); }
.search-modal.open { display:block; }
.search-panel { width:min(720px,100%); max-height:78vh; margin:auto; border:1px solid var(--line-strong); border-radius:12px; background:var(--panel-solid); box-shadow:var(--shadow); overflow:hidden; }
.search-input-wrap { height:62px; display:flex; align-items:center; gap:12px; padding:0 17px; border-bottom:1px solid var(--line); color:var(--muted); }
.search-input-wrap input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font-size:16px; }
.search-input-wrap input::placeholder { color:var(--faint); }
.search-input-wrap button { border:1px solid var(--line); background:var(--bg-deep); color:var(--faint); border-radius:5px; font-size:10px; padding:3px 7px; cursor:pointer; }
.search-hint { padding:11px 18px; color:var(--faint); font-size:11px; background:var(--bg-deep); }
.search-results { overflow:auto; max-height:calc(78vh - 99px); padding:8px; }
.search-result { display:block; text-decoration:none; border-radius:8px; padding:13px 14px; }
.search-result:hover, .search-result:focus { background:var(--panel-soft); outline:0; }
.search-result strong { display:block; font:500 15px var(--serif); }
.search-result span { color:var(--faint); font-size:11px; }
.search-result p { color:var(--muted); font-size:12px; margin:5px 0 0; }
.search-empty { padding:45px; text-align:center; color:var(--faint); }

@media (max-width:1100px) {
  .article-layout { grid-template-columns:minmax(0,800px); }
  .toc { display:none; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .category-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:820px) {
  .topbar { grid-template-columns:42px 1fr 42px; gap:12px; padding:0 14px; }
  .menu-button { display:grid; }
  .search-trigger { position:fixed; right:68px; width:42px; padding:0; justify-content:center; }
  .search-trigger span, .search-trigger kbd { display:none; }
  .sidebar { transform:translateX(-102%); transition:transform .25s ease; box-shadow:var(--shadow); }
  .sidebar.open { transform:translateX(0); }
  .sidebar-scrim { position:fixed; inset:72px 0 0; z-index:20; background:rgba(0,0,0,.46); }
  .sidebar-scrim.open { display:block; }
  main { margin-left:0; }
  .hero { grid-template-columns:1fr; min-height:auto; }
  .hero-visual { display:none; }
  .home { padding-top:48px; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2) { border-right:0; }
  .stat:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .feature-grid { grid-template-columns:1fr; }
  .category-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
  .brand small { display:none; }
  .home, .listing { padding-left:20px; padding-right:20px; }
  .hero h1 { font-size:47px; }
  .stats { margin-bottom:48px; }
  .stat { padding:15px; }
  .feature-card { min-height:180px; }
  .category-grid, .doc-list { grid-template-columns:1fr; }
  .article-layout { padding:34px 20px 72px; }
  .article-header h1 { font-size:36px; }
  .markdown-body { font-size:15px; }
  .article-footer { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; }
}