.document-page {
  --masthead-height: 390px;
  --sheet-inset: clamp(26px, 5vw, 56px);
  --document-ink: #254147;
  --document-muted: #526b70;
  --document-rule: #dce7e7;
  background: #eaf1f2;
}
.document-page::before,
.document-page::after {
  inset: 0 0 auto;
  height: var(--masthead-height);
}
.document-page::before {
  background-position: center 25%;
}
.document-page::after {
  background: linear-gradient(180deg, rgb(16 44 42 / 16%), rgb(21 57 75 / 40%));
}
.document-page .top [aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: .42em;
}
.document-main {
  width: min(100% - 72px, 1040px);
  margin-inline: auto;
}
.document-hero {
  min-height: 236px;
  padding: 44px var(--sheet-inset) 33px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
}
.document-page .document-hero h1 {
  font-size: clamp(48px, 6vw, 76px);
  color: #fff;
}
.document-hero p {
  max-width: 42rem;
  color: rgb(255 255 255 / 94%);
  font-size: 16px;
  text-shadow: 0 1px 12px rgb(8 35 44 / 46%);
}
.document-sheet {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(0, 3.6fr);
  gap: clamp(28px, 5vw, 54px);
  padding: 42px var(--sheet-inset) 48px;
  background: #fcfdfb;
  color: var(--document-ink);
  border-radius: 16px;
  box-shadow: 0 18px 60px -27px rgb(16 47 52 / 35%), 0 0 0 1px rgb(26 71 76 / 7%);
}
.document-outline {
  display: block;
  padding-top: 4px;
}
.document-outline > p {
  margin-bottom: 9px;
  color: var(--document-muted);
  font-size: 12px;
  font-weight: 650;
}
.document-outline a {
  min-height: 32px;
  padding-block: 5px;
  color: #315b64;
  font-size: 13px;
  line-height: 1.45;
  text-shadow: none;
}
.document-outline-links {
  display: grid;
}
.document-content {
  min-width: 0;
  font-size: 16px;
  line-height: 1.78;
  overflow-wrap: break-word;
}
html[lang="zh-Hans"] .document-content { line-height: 1.86; }
.document-content section + section {
  margin-top: 28px;
  padding-top: 27px;
  border-top: 1px solid var(--document-rule);
}
.document-content h2 {
  margin: 0 0 9px;
  color: #213d43;
  font-size: clamp(19px, 2.5vw, 23px);
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.3;
  scroll-margin-top: 22px;
}
.document-content p + p { margin-top: 10px; }
.document-content a {
  color: #245c69;
  text-decoration-color: #71959a;
}
.document-content code {
  font-size: .9em;
  overflow-wrap: anywhere;
}
.document-end {
  margin-top: 31px;
  padding-top: 20px;
  border-top: 1px solid var(--document-rule);
  color: var(--document-muted);
  font-size: 14px;
}
.document-end .draft { font-size: 12px; }
.document-sheet a:focus-visible { outline-color: #326875; }
.document-page footer {
  color: #45636a;
  text-shadow: none;
}
@media (max-width: 760px) {
  .document-page {
    --masthead-height: 301px;
    --sheet-inset: clamp(19px, 5vw, 30px);
  }
  .document-main { width: calc(100% - 36px); }
  .document-hero {
    min-height: 176px;
    padding: 32px 3px 25px;
    gap: 9px;
  }
  .document-page .document-hero h1 { font-size: clamp(38px, 8vw, 52px); }
  .document-hero p { font-size: 14px; }
  .document-sheet {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 25px var(--sheet-inset) 32px;
    border-radius: 12px;
  }
  .document-outline {
    padding: 0 0 14px;
    border-bottom: 1px solid var(--document-rule);
  }
  .document-outline-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
  }
  .document-content { font-size: 15px; }
}
@media (max-width: 420px) {
  .document-page .top { gap: 12px; }
}