:root {
  --ink: #183153;
  --muted: #5f6f82;
  --paper: #ffffff;
  --canvas: #f3f6f8;
  --line: #dbe4ea;
  --teal: #0f766e;
  --teal-soft: #dff5f1;
  --amber: #a16207;
  --amber-soft: #fff5d6;
  --blue-soft: #e9f1ff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(15, 118, 110, .10), transparent 28rem),
    linear-gradient(180deg, #eef4f5 0, var(--canvas) 18rem);
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.78;
}

body > header,
body > main,
body > nav,
body > footer,
body > h1,
body > h2,
body > h3,
body > h4,
body > p,
body > ul,
body > ol,
body > table,
body > blockquote,
body > pre,
body > hr {
  width: min(1040px, calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
}

#title-block-header {
  width: min(1040px, calc(100% - 40px));
  margin-top: 56px;
  margin-left: auto;
  margin-right: auto;
  padding: 56px 64px 30px;
  color: #f7fffd;
  background: linear-gradient(135deg, #123c4a, #0f766e 72%, #37a69d);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 24px 64px rgba(31, 61, 76, .18);
}

#title-block-header h1 {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  font-size: clamp(30px, 5vw, 50px);
  line-height: 1.15;
  letter-spacing: -.04em;
}

#TOC {
  width: min(1040px, calc(100% - 40px));
  margin-top: -1px;
  margin-left: auto;
  margin-right: auto;
  padding: 22px 64px 36px 86px;
  color: #e7f7f5;
  background: linear-gradient(135deg, #123c4a, #0f766e 72%, #37a69d);
  border-radius: 0 0 26px 26px;
  box-shadow: 0 24px 64px rgba(31, 61, 76, .18);
  max-height: 360px;
  overflow-y: auto;
  scrollbar-color: rgba(255,255,255,.55) rgba(255,255,255,.12);
}

#TOC h2 { color: #e7f7f5; }
#TOC a { color: #ecfffb; }
#TOC ul { margin: 0; }

h1 {
  margin-top: 76px;
  padding-top: 24px;
  border-top: 2px solid var(--teal);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.25;
}

h2 {
  margin-top: 48px;
  color: #17445d;
  font-size: 27px;
  line-height: 1.35;
}

h3 {
  margin-top: 32px;
  color: var(--teal);
  font-size: 21px;
}

h4 { margin-top: 26px; font-size: 18px; }

p, li { color: #31465d; }

a { color: #08776d; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #075985; }

table {
  display: table;
  margin-top: 22px;
  margin-bottom: 32px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(31, 61, 76, .07);
}

th, td {
  padding: 13px 16px;
  vertical-align: top;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

th {
  color: #0b504b;
  background: var(--teal-soft);
  font-size: 15px;
  text-align: left;
}

tr:last-child td { border-bottom: 0; }
th:last-child, td:last-child { border-right: 0; }

blockquote {
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 18px 24px;
  background: var(--amber-soft);
  border-left: 5px solid #d59b20;
  border-radius: 0 14px 14px 0;
}

pre {
  overflow-x: auto;
  margin-top: 20px;
  margin-bottom: 28px;
  padding: 22px 24px;
  color: #d9f7f2;
  background: #163448;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

code {
  padding: .12em .34em;
  color: #115e59;
  background: #e6f4f1;
  border-radius: 6px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .92em;
}

pre code { padding: 0; color: inherit; background: transparent; }

hr {
  margin-top: 64px;
  margin-bottom: 48px;
  border: 0;
  border-top: 1px solid var(--line);
}

body::after {
  content: "zhctprompt · Youdao source-indexed reading pack · 2026-07-16";
  display: block;
  width: min(1040px, calc(100% - 40px));
  margin: 70px auto 40px;
  padding-top: 24px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: 14px;
  text-align: center;
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  #title-block-header { padding: 40px 28px 24px; }
  #TOC { padding: 18px 28px 28px 48px; }
  table { display: block; overflow-x: auto; }
  th, td { min-width: 140px; }
}

@media print {
  body { background: #fff; font-size: 11pt; }
  #title-block-header, #TOC { color: #123c4a; background: #fff; box-shadow: none; }
  table, pre { box-shadow: none; break-inside: avoid; }
  a { color: inherit; }
}