:root {
  --bg: #f6f3ed;
  --text: #252824;
  --header-bg: #173d35;
  --header-text: #fbfaf6;
  --toc-bg: #ebe7df;
  --toc-border: #d7d1c6;
  --toc-link: #244b42;
  --link: #276457;
  --link-hover: #173d35;
  --blockquote-bg: #ebe9df;
  --blockquote-border: #a46f3f;
  --table-border: #d7d1c6;
  --table-stripe: #eeebe4;
  --nav-bg: #eeeae2;
  --nav-border: #d7d1c6;
  --nav-link: #244b42;
  --footer-bg: #ebe7df;
  --footer-border: #d7d1c6;
  --footer-text: #6a6f68;
  --badge-bg: #a46f3f;
  --badge-text: #fffaf2;
  --code-bg: #ebe7df;
  --code-border: #d7d1c6;
  --scrollbar-track: #eeeae2;
  --scrollbar-thumb: #aaa69e;
}

html { scroll-behavior: smooth; }
body {
  max-width: 1080px;
  background:
    radial-gradient(circle at 10% 0%, rgba(164,111,63,.08), transparent 28rem),
    var(--bg);
  font-family: "Avenir Next", Avenir, "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
  font-size: 16px;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 200;
}
.header {
  padding: 3rem clamp(1.25rem, 5vw, 4.5rem) 3.35rem;
  border: 0;
  border-radius: 0 0 28px 28px;
}
.header h1 {
  max-width: 760px;
  font-family: Georgia, "Songti SC", serif;
  font-size: clamp(1.65rem, 4vw, 2.55rem);
  line-height: 1.14;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.header .subtitle { margin-top: .65rem; max-width: 65ch; }
.breadcrumb { padding: .8rem clamp(1.25rem, 5vw, 4.5rem); background: transparent; }
.content, .index-container { padding: clamp(1.6rem, 4vw, 3.5rem) clamp(1.25rem, 5vw, 4.5rem); }
.content { max-width: 78ch; }
.content h1, .content h2, .content h3 { text-wrap: balance; }
.content h1 { font-family: Georgia, "Songti SC", serif; border-bottom-width: 1px; }
.content h2 { margin-top: 2rem; color: var(--link); }
.content p { text-wrap: pretty; }
.content blockquote { border-radius: 4px 14px 14px 4px; }
.content table { display: block; overflow-x: auto; border-collapse: separate; border-spacing: 0; }
.page-nav {
  padding: 1.25rem clamp(1.25rem, 5vw, 4.5rem);
  background: transparent;
}
.page-nav a {
  max-width: 48%;
  border-radius: 10px;
  background: rgba(255,255,255,.28);
  transition: background-color .18s ease, border-color .18s ease;
}
.page-nav a:hover { background: rgba(255,255,255,.6); border-color: #aaa69e; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--badge-bg) 55%, transparent);
  outline-offset: 3px;
}
.footer { padding: 2rem clamp(1.25rem, 5vw, 4.5rem); }
.back-to-top { border-radius: 12px; box-shadow: 0 8px 22px rgba(23,61,53,.18); }
.index-hero { text-align: left; border-bottom-width: 1px; }
.index-hero h1 { font-family: Georgia, "Songti SC", serif; font-size: clamp(2rem, 5vw, 3.4rem); }
.search-box {
  border-width: 1px;
  border-radius: 12px;
  padding: .9rem 1rem;
  box-shadow: 0 10px 30px rgba(36,75,66,.06);
}
.section-group {
  margin: 2rem 0;
  padding: 1.15rem 1.15rem 1.25rem;
  border-top: 1px solid var(--toc-border);
}
.section-group h2 { font-family: Georgia, "Songti SC", serif; color: var(--link); border: 0; }
.section-group .page-link { border-radius: 8px; padding: .55rem .65rem; }
.section-group .page-link:hover { background: rgba(255,255,255,.48); }

@media (min-width: 760px) {
  .index-container { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.75rem; }
  .index-container > .search-box { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .toc { left: calc(50% - 650px); width: 250px; background: var(--toc-bg); }
  .toc-title { color: var(--text); }
  .content, .header, .breadcrumb, .page-nav, .footer { margin-left: 270px; }
  body { max-width: 1300px; }
}
@media (max-width: 620px) {
  .page-nav { flex-direction: column; }
  .page-nav a { max-width: none; width: 100%; }
  .header { border-radius: 0 0 20px 20px; }
  .back-to-top { right: 1rem; bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}