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

html { scroll-padding-top: 58px; }

body {
  min-width: 320px;
  background: radial-gradient(880px 520px at 72% -10%, rgba(77, 130, 156, .15), transparent 68%), var(--bg);
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.76;
}

body::before { opacity: .035; background: radial-gradient(#fff .55px, transparent .55px); background-size: 5px 5px; }
body::after { display: none; }
.wrap { width: min(1080px, calc(100% - 64px)); }

.hero {
  padding: 20px 0 28px;
  border-bottom: 0;
  overflow: visible;
}

.hero-grid { display: block; }
.back { display: block; margin: 0 0 42px; padding: 0 0 16px; border-bottom: 1px solid var(--line); color: var(--muted); font: 12px/1.4 var(--mono); }
.back:hover { color: var(--ink); }
.eyebrow,
.filetag,
.hero-card,
.section-head .num,
.tag,
.toc .i,
.subh small { display: none !important; }

.hero h1 {
  max-width: 100%;
  color: var(--ink);
  font-size: clamp(40px, 4.4vw, 56px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.12;
}

.hero h1 em {
  margin-left: .15em;
  color: #dcebef;
  text-shadow: none;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: .1em;
  text-underline-offset: .13em;
}

.hero p { max-width: 760px; margin: 24px 0 0; color: var(--ink-2); font-size: 17px; }
.hero p b { color: var(--ink); }

.toc-band { position: sticky; top: 0; z-index: 20; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(10, 13, 17, .93); backdrop-filter: blur(14px); }
.toc { width: min(1080px, calc(100% - 64px)); gap: clamp(24px, 3vw, 42px); padding: 0 8px 0 0; scrollbar-width: none; }
.toc::-webkit-scrollbar { display: none; }
.toc a { padding: 16px 0 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-size: 13px; }
.toc a:hover { border-color: transparent; color: var(--ink-2); }
.toc a.on { border-color: var(--accent); background: transparent; box-shadow: none; color: var(--ink); }

main.wrap { padding: 0 0 60px; }
section { margin: 0; padding: 72px 0; scroll-margin-top: 62px; }
section + section { padding-top: 48px; }
.section-head { display: block; margin-bottom: 28px; }
.section-head h2 { color: var(--ink); font-size: clamp(34px, 3.5vw, 44px); font-weight: 680; letter-spacing: -.035em; line-height: 1.2; }
.section-head p { max-width: 760px; margin: 10px 0 0; color: var(--muted); font-size: 17px; }

.subh { margin: 34px 0 14px; padding: 0; border: 0; color: var(--ink); font: 650 20px/1.4 var(--sans); }
.panel,
.ccard,
.duo .c,
.vs .col,
.split .c,
.mc,
.cf,
.ctab-wrap { border-color: var(--line); border-radius: 8px; background: rgba(14, 19, 24, .7); box-shadow: none; }
.panel { background: rgba(14, 19, 24, .7); }
.panel-title { padding: 14px 18px; border-color: var(--line); background: rgba(23, 34, 43, .52); }
.panel-title span { color: var(--muted); font-family: var(--sans); }
.swim { padding: 20px; }

.ccard { margin: 14px 0; transition: none; }
.ccard:hover { border-color: var(--line); transform: none; box-shadow: none; }
.ch { padding: 15px 20px; border-color: var(--line); }
.ch .badge { color: var(--blue); text-shadow: none; font-size: 18px; }
.ch .en { color: var(--muted); font-family: var(--sans); }
.body > .k,
.body > .ex,
.body > .code-col { padding: 18px 20px 22px; }

.callout { padding: 15px 18px; border: 0; border-left: 2px solid var(--accent); border-radius: 0; background: rgba(52, 89, 106, .08); }
.callout.warn { border-color: #745b36; background: rgba(208, 165, 97, .07); }
.def { border-left-width: 2px; }
.def .q { display: none; }
.def .lbl { color: var(--blue); font-family: var(--sans); letter-spacing: 0; text-transform: none; }
.def .tx b { color: var(--ink); }
.tip .badge { border-color: var(--line-2); background: rgba(23, 34, 43, .52); color: var(--ink-2); }

.grid3 { gap: 12px; }
.mc { padding: 20px 21px; }
.mc h4 { color: var(--ink); font: 650 17px/1.4 var(--sans); letter-spacing: 0; text-transform: none; }
.duo .c,
.vs .col,
.split .c { padding: 20px 22px; background: rgba(14, 19, 24, .7); }
.duo .c .t { color: var(--ink) !important; font: 650 17px/1.4 var(--sans); }
.duo .c .t::before { display: none; }
.vs .col.bad,
.vs .col.good,
.split .c.yes,
.split .c.no { border-top-width: 1px; }
.vs .col.bad h4,
.vs .col.good h4,
.split .yes .hd,
.split .no .hd { color: var(--ink); }

.steps-wrap { border-top: 0; padding-top: 0; }
.steps-h { color: var(--ink); font-family: var(--sans); font-size: 15px; }
.steps .s { border-radius: 6px; background: rgba(23, 34, 43, .52); }
.steps .s.end { border-color: var(--line-2); background: rgba(52, 89, 106, .12); }

.cf .row,
.cf .row:last-child { border-color: var(--line); }
.cf .row > div { padding: 15px 18px; }
.cf .myth { border-color: var(--line); }
.cf .myth::before,
.cf .fact::before { font-family: var(--sans); letter-spacing: 0; }
.cf .myth::before { color: #bb8b7f; }
.cf .fact::before { color: var(--blue); }

.ctab-wrap { border-color: var(--line-2); }
.ctab .r,
.ctab .r > div { border-color: var(--line); }
.ctab .hd { background: rgba(36, 48, 58, .62); }
.ctab .hd > div { color: var(--ink) !important; font-family: var(--sans); }

.codebar { border-color: var(--line); background: rgba(23, 34, 43, .62); }
pre.code { border-color: var(--line); background: var(--code-bg); }
.foot { margin-top: 12px; padding: 26px 0 0; border-color: var(--line); }

@media (max-width: 600px) {
  .wrap,
  .toc { width: calc(100% - 30px); }
  .hero { padding-top: 18px; }
  .back { margin-bottom: 36px; }
  .hero h1 { font-size: clamp(34px, 9.2vw, 42px); }
  .hero h1 em { margin-left: .12em; }
  .hero p { font-size: 16px; }
  .toc { gap: 26px; }
  section { padding: 52px 0; }
  section + section { padding-top: 40px; }
  .section-head h2 { font-size: 32px; }
  .section-head p { font-size: 16px; }
  .swim { min-width: 680px; }
  .panel { overflow-x: auto; }
  .panel-title { position: sticky; left: 0; width: calc(100vw - 30px); }
  .ch { flex-wrap: wrap; }
  .ch .en { width: 100%; margin-left: 45px; }
}

@media (prefers-reduced-motion: reduce) {
  main section { transition: none; }
}