:root {
  --bg: #0a0d11;
  --surface: #111820;
  --surface-2: #17222b;
  --ink: #edf0ec;
  --ink-2: #b7c0c0;
  --muted: #7d898c;
  --line: #29343d;
  --line-2: #3a4c58;
  --accent: #8dbbd0;
  --accent-soft: rgba(52, 89, 106, .14);
  --accent-bd: #34596a;
  --sans: "Microsoft YaHei UI", "Noto Sans CJK SC", "Segoe UI", sans-serif;
  --mono: "Cascadia Mono", Consolas, monospace;
}

body { min-width: 320px; margin: 0; background: radial-gradient(880px 520px at 72% -10%, rgba(77, 130, 156, .15), transparent 68%), var(--bg); color: var(--ink-2); font: 16px/1.76 var(--sans); }
body::before { display: none; }
.board,
.page,
.shell { width: min(1080px, calc(100% - 64px)); max-width: none; margin: 0 auto; padding: 0 0 50px; }

.nav,
.top,
.bar { display: flex; min-height: 57px; align-items: center; justify-content: flex-start; padding: 0; border-bottom: 1px solid var(--line); background: transparent; }
.nav a,
.top a,
.bar a { color: var(--muted); font: 12px/1.4 var(--mono); text-decoration: none; }
.nav > span,
.top > span,
.bar > span { display: none; }
.mode,
.meta,
.kicker,
.toc-title,
.aside-note,
footer > span,
.card > h2,
.quick { display: none !important; }

.title,
.page > .hero,
.layout article > header { display: block; padding: 42px 0 34px; border: 0; background: transparent; }
.title h1,
.page > .hero h1,
.layout article > header h1 { max-width: 100%; margin: 0; color: var(--ink); font: 700 clamp(40px, 4.4vw, 56px)/1.12 var(--sans); letter-spacing: -.045em; }
.title h1 span,
.page > .hero h1 span,
.layout article > header h1 span { margin-left: .15em; color: #dcebef; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .1em; text-underline-offset: .13em; }
.summary,
.lead,
.dek { max-width: 760px; margin: 24px 0 0; color: var(--ink-2); font-size: 17px; }

.layout { display: block; }
.layout > article { min-width: 0; }
.layout > aside { display: none; }
.mobile-toc { display: none !important; }

.board section,
.page section,
.layout article section { margin: 0; padding: 48px 0; border: 0; }
.board section:first-of-type,
.page section:first-of-type,
.layout article section:first-of-type { padding-top: 38px; }
.section-head { display: block; margin: 0 0 20px; padding: 0; border: 0; }
.section-head h2,
.layout article section > h2 { margin: 0 0 12px; color: var(--ink); font: 680 clamp(30px, 3.3vw, 40px)/1.2 var(--sans); letter-spacing: -.03em; }
.layout article section > h2 { font-size: clamp(28px, 3vw, 36px); }

.card,
.definition,
.figure,
.box,
.quote,
.pull,
.note,
.item,
.quick-card,
.decision { border: 1px solid var(--line) !important; border-radius: 8px !important; background: rgba(14, 19, 24, .7) !important; box-shadow: none !important; }
.card { padding: 22px !important; }
.card h3,
.box h3,
.quick-card h3 { color: var(--ink); font-family: var(--sans); }
.card p,
.box p,
.item p,
.caption { color: var(--muted); }
.alert { border-color: var(--line-2) !important; background: rgba(52, 89, 106, .1) !important; }
.definition,
.pull,
.quote,
.note { padding: 18px 20px !important; border-left: 2px solid var(--accent) !important; }

.grid { gap: 12px !important; }
.flow,
.diagram,
.lane-steps { gap: 8px !important; }
.mini,
.step,
.node { border-color: var(--line) !important; border-radius: 6px !important; background: rgba(23, 34, 43, .52) !important; box-shadow: none !important; }
.step .num { color: var(--accent) !important; }
.mini span { display: none; }
.pill { border-color: var(--line-2) !important; background: rgba(23, 34, 43, .52) !important; color: var(--ink-2) !important; }

.item { border-radius: 0 !important; }
.item + .item { border-top: 0 !important; }
.item .label { color: var(--ink) !important; }
.compare { gap: 12px !important; }
.knowledge-map { border-color: var(--line) !important; background: rgba(14, 19, 24, .7) !important; }

footer { display: flex; justify-content: flex-start; margin-top: 12px; padding: 26px 0 0; border-top: 1px solid var(--line); }
footer a { color: var(--muted) !important; text-decoration: none; }

@media (max-width: 760px) {
  .board,
  .page,
  .shell { width: calc(100% - 30px); }
  .title h1,
  .page > .hero h1,
  .layout article > header h1 { font-size: clamp(34px, 9.2vw, 42px); }
  .summary,
  .lead,
  .dek { font-size: 16px; }
  .grid,
  .flow,
  .compare,
  .twocol { grid-template-columns: 1fr !important; }
  .knowledge-map { display: block !important; }
  .knowledge-map > svg { display: none !important; }
  .map-mobile { display: grid !important; }
  .figure:not(.knowledge-map) { overflow-x: auto; }
  .diagram,
  .lane { min-width: 660px; }
}
/* 阅读正文的内联强调只改变颜色，不切换中文字重。 */
.hero :is(b,strong),
main :is(b,strong),
.callout .h{font-weight:inherit !important}
.mini>strong,.map-item>strong,.node>strong{font-weight:600 !important}
svg text,svg tspan{font-weight:400 !important}