:root {
    --bg: #FAFAF7;
    --surface: #FFFFFF;
    --text: #141413;
    --text-2: #3D3D3A;
    --text-3: #6E6E68;
    --border: #E5E4DF;
    --c-purple: #534AB7; --c-purple-bg: #EEEDFE; --c-purple-text: #3C3489;
    --c-green: #0F6E56; --c-green-bg: #E1F5EE; --c-green-text: #085041;
    --c-orange: #993C1D; --c-orange-bg: #FAECE7; --c-orange-text: #712B13;
    --c-rose: #993556; --c-rose-bg: #FBEAF0; --c-rose-text: #72243E;
    --c-amber: #854F0B; --c-amber-bg: #FAEEDA; --c-amber-text: #633806;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: "Anthropic Sans", -apple-system, "system-ui", "Segoe UI", "PingFang SC", "Helvetica Neue", sans-serif;
    font-size: 15px; line-height: 1.7; color: var(--text); background: var(--bg);
    -webkit-font-smoothing: antialiased;
  }
  .layout { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
  aside.sidebar {
    background: var(--surface); border-right: 1px solid var(--border);
    position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 24px 20px;
  }
  aside .brand { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
  aside .brand-sub { font-size: 12px; color: var(--text-3); margin-bottom: 24px; }
  aside .group-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-3); margin: 18px 0 8px; font-weight: 600;
  }
  aside ol { list-style: none; padding: 0; margin: 0; }
  aside li { margin: 2px 0; }
  aside a {
    display: block; padding: 5px 10px; font-size: 13px; color: var(--text-2);
    text-decoration: none; border-radius: 6px; line-height: 1.4;
    border-left: 2px solid transparent;
  }
  aside a:hover { background: var(--bg); color: var(--text); }
  aside a.active { background: var(--bg); border-left-color: var(--c-orange); color: var(--text); font-weight: 500; }
  main.content { padding: 56px 64px; max-width: 820px; }
  h1 { font-size: 32px; margin: 0 0 12px; font-weight: 600; letter-spacing: -0.01em; }
  h2 { font-size: 22px; margin: 56px 0 18px; font-weight: 600; letter-spacing: -0.01em; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
  h2 .num { color: var(--text-3); margin-right: 8px; font-weight: 400; }
  .lead { font-size: 17px; color: var(--text-2); margin: 0 0 24px; line-height: 1.6; }
  p { margin: 12px 0; }
  .badges { display: flex; gap: 6px; margin: 8px 0 14px; flex-wrap: wrap; }
  .badge { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
  .badge.p0 { background: #C62828; color: white; }
  .badge.p1 { background: #6F6F6A; color: white; }
  .badge.p2 { background: #B8B8B0; color: white; }
  .badge.new { background: var(--c-amber-bg); color: var(--c-amber-text); border: 1px solid var(--c-amber); }
  .badge.layer { background: transparent; border: 1px solid; padding: 1px 6px; }
  .badge.l1 { color: var(--c-purple); border-color: var(--c-purple); }
  .badge.l2 { color: var(--c-green); border-color: var(--c-green); }
  .badge.l3 { color: var(--c-orange); border-color: var(--c-orange); }
  .badge.l4 { color: var(--c-rose); border-color: var(--c-rose); }
  .anchor { background: #FFFBF0; border-left: 3px solid var(--c-amber); padding: 12px 16px; margin: 16px 0; border-radius: 0 6px 6px 0; }
  .anchor .title { font-size: 12px; font-weight: 600; color: var(--c-amber-text); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
  .anchor .body { font-size: 14px; color: var(--text-2); }
  .refs { font-size: 13px; color: var(--text-3); margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border); line-height: 1.6; }
  .refs .label { font-weight: 500; color: var(--text-2); margin-right: 4px; }
  .refs a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
  .refs a:hover { color: var(--text); text-decoration-color: var(--text-3); }
  .refs + .refs { border-top: none; padding-top: 4px; margin-top: 4px; }
  .why { background: #FFF5E5; border-left: 3px solid #C76800; padding: 14px 18px; margin: 16px 0 26px; border-radius: 0 6px 6px 0; }
  .why .title { font-size: 11px; font-weight: 700; color: #C76800; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.08em; }
  .why .body { font-size: 14px; color: var(--text-2); line-height: 1.65; }
  .step-h { margin: 32px 0 12px; font-size: 17px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 6px; }
  .step-h .idx { color: var(--text-3); margin-right: 8px; font-weight: 400; }
  .tradeoffs { background: #F9F8F4; border: 1px solid var(--border); border-radius: 6px; padding: 14px 18px; margin: 14px 0; font-size: 14px; }
  .tradeoffs section { margin: 0 0 14px; }
  .tradeoffs section:last-child { margin-bottom: 0; }
  .tradeoffs h4 { font-size: 13px; font-weight: 600; margin: 0 0 6px; letter-spacing: 0.02em; }
  .tradeoffs h4.use { color: var(--c-green); }
  .tradeoffs h4.no-use { color: #B33A3A; }
  .tradeoffs h4.trap { color: var(--c-amber-text); }
  .tradeoffs ol { padding-left: 22px; margin: 4px 0; color: var(--text-2); }
  .tradeoffs ol li { margin: 4px 0; }
  .tradeoffs ol li strong { color: var(--text); }
  .checklist { background: #F1F5F9; border-left: 3px solid #475569; padding: 14px 18px; margin: 18px 0; border-radius: 0 6px 6px 0; }
  .checklist .title { font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
  .checklist .item { margin: 12px 0; font-size: 14px; }
  .checklist .item input { margin-right: 8px; vertical-align: middle; transform: translateY(-1px); }
  .checklist .item .check-text { font-weight: 500; color: var(--text); }
  .checklist .item .standard { display: block; font-size: 12px; color: var(--text-3); margin-left: 26px; margin-top: 3px; line-height: 1.55; }
  .checklist .item .standard::before { content: "过关标准:"; color: #64748B; font-weight: 500; margin-right: 4px; }
  .exercises .ex { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 14px 18px; margin: 10px 0; }
  .exercises .ex .level { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; margin-bottom: 6px; letter-spacing: 0.05em; }
  .exercises .ex .level.easy { background: #E1F5EE; color: var(--c-green-text); }
  .exercises .ex .level.mid { background: #FAECE7; color: var(--c-orange-text); }
  .exercises .ex .level.hard { background: #FBEAF0; color: var(--c-rose-text); }
  .exercises .ex .task { margin: 6px 0; font-size: 14px; color: var(--text-2); line-height: 1.65; }
  .exercises .ex .gain { font-size: 12px; color: var(--text-3); font-style: italic; margin-top: 8px; }
  .exercises .ex .gain::before { content: "做完获得:"; font-style: normal; margin-right: 4px; }
  .na-code { background: var(--bg); border: 1px dashed var(--border); border-radius: 6px; padding: 12px 16px; margin: 12px 0; font-size: 13px; color: var(--text-3); font-style: italic; }
  .hint { margin-top: 10px; font-size: 13px; }
  .hint summary { cursor: pointer; color: var(--text-3); padding: 4px 0; user-select: none; outline: none; }
  .hint summary:hover { color: var(--text-2); }
  .hint summary::marker { color: var(--text-3); }
  .hint[open] summary { color: var(--text-2); margin-bottom: 6px; }
  .hint .body { padding: 10px 14px; background: var(--bg); border-left: 3px solid var(--c-green); border-radius: 0 6px 6px 0; color: var(--text-2); line-height: 1.65; }
  .hint .body ol, .hint .body ul { margin: 6px 0; padding-left: 22px; }
  .hint .body li { margin: 3px 0; }
  .hint .body strong { color: var(--text); }
  pre, code { font-family: "SF Mono", "Cascadia Mono", "Menlo", monospace; font-size: 13px; }
  pre { background: #F4F3EE; padding: 14px 16px; border-radius: 6px; overflow-x: auto; line-height: 1.5; border: 1px solid var(--border); }
  code { background: #F4F3EE; padding: 1px 5px; border-radius: 3px; font-size: 13px; }
  pre code { background: transparent; padding: 0; }
  .map-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin: 24px 0 40px; }
  .map-wrap object, .map-wrap img { width: 100%; height: auto; display: block; }
  .layer-intro { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 18px 22px; margin: 40px 0 24px; }
  .layer-intro h3 { margin: 0 0 8px; font-size: 18px; }
  .layer-intro p { margin: 0; color: var(--text-2); font-size: 14px; }
  hr { border: none; border-top: 1px solid var(--border); margin: 48px 0; }
  footer { color: var(--text-3); font-size: 13px; padding: 40px 0 20px; }
  footer a { color: var(--text-2); }
  /* mini-TOC at top of each 5-step chapter */
  .mini-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px; font-size: 12px; }
  .mini-toc a { color: var(--text-3); text-decoration: none; padding: 3px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; transition: all 0.15s; }
  .mini-toc a:hover { color: var(--text); border-color: var(--c-orange); background: var(--c-orange-bg); }

  /* prev / next chapter nav */
  .chapter-nav { display: flex; justify-content: space-between; gap: 12px; margin: 36px 0 8px; padding-top: 18px; border-top: 1px dashed var(--border); }
  .chapter-nav a { flex: 1; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; text-decoration: none; color: var(--text-2); font-size: 13px; transition: all 0.15s; }
  .chapter-nav a:hover { border-color: var(--c-orange); background: var(--c-orange-bg); color: var(--text); }
  .chapter-nav a.prev { text-align: left; }
  .chapter-nav a.next { text-align: right; }
  .chapter-nav a .arrow { color: var(--text-3); font-size: 12px; display: block; margin-bottom: 2px; }
  .chapter-nav a .ch-title { font-weight: 500; color: var(--text); }
  .chapter-nav .empty { flex: 1; visibility: hidden; }

  /* anchor copy button(hover 显示) */
  h2 .copy-link { font-size: 12px; color: var(--text-3); margin-left: 10px; opacity: 0; transition: opacity 0.15s; cursor: pointer; user-select: none; padding: 2px 6px; border-radius: 4px; border: 1px solid transparent; vertical-align: middle; font-weight: 400; }
  h2:hover .copy-link { opacity: 1; }
  h2 .copy-link:hover { background: var(--bg); border-color: var(--border); color: var(--text-2); }
  h2 .copy-link.copied { color: var(--c-green); border-color: var(--c-green); opacity: 1; }

  /* toolbar(sidebar 顶部:搜索 + dark toggle + mobile drawer toggle) */
  .toolbar { display: flex; gap: 6px; margin: 0 0 16px; }
  .toolbar input.search { flex: 1; padding: 6px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-family: inherit; }
  .toolbar input.search:focus { outline: none; border-color: var(--c-orange); }
  .toolbar button { padding: 6px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-2); cursor: pointer; font-family: inherit; }
  .toolbar button:hover { border-color: var(--c-orange); color: var(--text); }

  /* search results dropdown */
  .search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px; max-height: 320px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 50; display: none; }
  .search-results.active { display: block; }
  .search-results a { display: block; padding: 6px 10px; font-size: 13px; color: var(--text-2); text-decoration: none; border-radius: 4px; line-height: 1.4; }
  .search-results a:hover { background: var(--bg); color: var(--text); }
  .search-results a .hit-num { color: var(--text-3); font-size: 11px; margin-right: 6px; }
  .search-results .no-results { padding: 8px 10px; font-size: 13px; color: var(--text-3); font-style: italic; }

  /* mobile hamburger toggle + sidebar drawer */
  .mobile-toggle { display: none; }
  @media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; }
    aside.sidebar {
      position: fixed; top: 0; left: 0; width: 280px; height: 100vh; z-index: 100;
      border-right: 1px solid var(--border); border-bottom: none;
      transform: translateX(-100%); transition: transform 0.2s ease;
      box-shadow: 0 0 24px rgba(0,0,0,0.1);
    }
    aside.sidebar.open { transform: translateX(0); }
    main.content { padding: 32px 24px; }
    .mobile-toggle {
      display: block; position: fixed; top: 16px; right: 16px; z-index: 99;
      width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 6px;
      background: var(--surface); color: var(--text); font-size: 18px; cursor: pointer;
      line-height: 1; padding: 0;
    }
    .mobile-toggle:hover { border-color: var(--c-orange); }
    .mobile-backdrop {
      display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.4); z-index: 99;
    }
    .mobile-backdrop.active { display: block; }
    .toolbar { flex-direction: column; }
  }

  /* dark mode (prefers-color-scheme + manual toggle) */
  html[data-theme="dark"] {
    --bg: #1A1917; --surface: #242322; --text: #E5E4DF; --text-2: #B8B8B0;
    --text-3: #8C8C85; --border: #3A3936;
    --c-purple-bg: #2A2545; --c-purple-text: #B4ABFF;
    --c-green-bg: #1E3A2F; --c-green-text: #6FCFA9;
    --c-orange-bg: #3A2418; --c-orange-text: #E89F7B;
    --c-rose-bg: #3A2230; --c-rose-text: #E89BB5;
    --c-amber-bg: #3A2E18; --c-amber-text: #E5C078;
  }
  html[data-theme="dark"] pre, html[data-theme="dark"] code { background: #2E2C29; }
  html[data-theme="dark"] .anchor { background: #2A2418; }
  html[data-theme="dark"] .why { background: #2E2418; }
  html[data-theme="dark"] .checklist { background: #1F252D; }
  html[data-theme="dark"] .tradeoffs { background: #1F1E1B; }
  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
      --bg: #1A1917; --surface: #242322; --text: #E5E4DF; --text-2: #B8B8B0;
      --text-3: #8C8C85; --border: #3A3936;
      --c-purple-bg: #2A2545; --c-purple-text: #B4ABFF;
      --c-green-bg: #1E3A2F; --c-green-text: #6FCFA9;
      --c-orange-bg: #3A2418; --c-orange-text: #E89F7B;
      --c-rose-bg: #3A2230; --c-rose-text: #E89BB5;
      --c-amber-bg: #3A2E18; --c-amber-text: #E5C078;
    }
    html:not([data-theme="light"]) pre, html:not([data-theme="light"]) code { background: #2E2C29; }
    html:not([data-theme="light"]) .anchor { background: #2A2418; }
    html:not([data-theme="light"]) .why { background: #2E2418; }
    html:not([data-theme="light"]) .checklist { background: #1F252D; }
    html:not([data-theme="light"]) .tradeoffs { background: #1F1E1B; }
  }

  /* print styles */
  @media print {
    aside.sidebar, .mobile-toggle, .mobile-backdrop, .toolbar, .chapter-nav, .mini-toc, .copy-link { display: none !important; }
    .layout { display: block; }
    main.content { padding: 0; max-width: 100%; }
    body { font-size: 11pt; line-height: 1.5; color: #000; background: #fff; }
    h2 { page-break-before: auto; page-break-after: avoid; }
    section { page-break-inside: avoid; }
    pre { page-break-inside: avoid; font-size: 9pt; }
    a { color: #000; text-decoration: none; }
  }