@font-face {
  font-family: "Tianzhixia Brush";
  src: url("./font-zhong.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  color-scheme: light;
  --paper: #f7f3e8;
  --paper-deep: #ede5d3;
  --ink: #27241f;
  --muted: #716b61;
  --line: #d8cfbc;
  --accent: #8b3428;
  --accent-soft: #f0ddd4;
  --shadow: 0 12px 36px rgb(73 57 37 / 10%);
  font-family: "Tianzhixia Brush", "Noto Serif SC", "Songti SC", "STSong", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% -10%, rgb(169 94 64 / 12%), transparent 30rem),
    linear-gradient(180deg, #fbf8f0, var(--paper));
  line-height: 1.75;
}

a { color: #7b3027; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: #b44c38; }

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: auto 1fr minmax(14rem, 22rem);
  gap: 1.25rem;
  align-items: center;
  min-height: 4rem;
  padding: .7rem clamp(1rem, 4vw, 4rem);
  border-bottom: 1px solid rgb(112 91 60 / 20%);
  background: rgb(250 247 238 / 92%);
  backdrop-filter: blur(14px);
}

.brand { color: var(--ink); font-family: "Tianzhixia Brush", "Noto Serif SC", "Songti SC", "STSong", serif; font-size: 1.32rem; font-weight: 400; letter-spacing: .08em; text-decoration: none; white-space: nowrap; }
.main-nav { display: flex; gap: .8rem; overflow-x: auto; scrollbar-width: none; }
.main-nav a { color: var(--muted); font-size: .9rem; text-decoration: none; white-space: nowrap; }
.main-nav a:hover { color: var(--accent); }

.header-search,
.search-main-form {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdf8;
}

input[type="search"] {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  padding: .62rem .9rem;
  color: var(--ink);
  background: transparent;
  font: inherit;
}

button {
  border: 0;
  padding: .6rem .9rem;
  color: white;
  background: var(--accent);
  cursor: pointer;
  font: inherit;
}

.site-main { width: min(70rem, calc(100% - 2rem)); min-height: calc(100vh - 9rem); margin: 0 auto; padding: 2.2rem 0 5rem; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.5rem; color: var(--muted); font-size: .9rem; }
.breadcrumbs a { color: var(--muted); }

.entity-page,
.graph-page,
.search-page,
.copyright-page,
.not-found {
  padding: clamp(1.3rem, 4vw, 3.6rem);
  border: 1px solid rgb(113 90 57 / 18%);
  border-radius: 1.1rem;
  background: rgb(255 253 247 / 86%);
  box-shadow: var(--shadow);
}

.page-heading { position: relative; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.page-heading h1 { display: inline; margin: 0; overflow-wrap: anywhere; font-family: "Tianzhixia Brush", "Noto Serif SC", "Songti SC", "STSong", serif; font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 400; line-height: 1.25; letter-spacing: .06em; }
.page-description { max-width: 50rem; margin: 1rem 0 0; color: var(--muted); }
.type-badge { display: inline-block; margin-left: .8rem; padding: .12rem .6rem; border: 1px solid color-mix(in srgb, var(--type-color), transparent 45%); border-radius: 999px; color: var(--type-color); font: 600 .78rem/1.6 "Tianzhixia Brush", serif; vertical-align: .45em; }

.page-content { margin-top: 2rem; }
.copyright-content { max-width: 48rem; margin-top: 2rem; }
.copyright-content h2 { margin: 2rem 0 .55rem; font-size: 1.2rem; }
.copyright-content p { margin: .55rem 0; color: #4e4942; }
.page-blocks,
.page-blocks ul { margin: 0; padding-left: 1.35rem; }
.page-blocks > li { margin: 1.4rem 0; }
.page-blocks li { padding-left: .25rem; }
.page-blocks li::marker { color: #a18b69; }
.page-blocks .section-block > .block-content { margin-bottom: .65rem; color: #3c3026; font-size: 1.2rem; font-weight: 750; }
.block-continuation { margin: .35rem 0; }
.page-ref { font-weight: 600; }
.missing-ref { color: #8a8175; border-bottom: 1px dotted currentColor; }
.status-tag { display: inline-block; padding: 0 .36em; border-radius: .35em; font: 600 .78em/1.7 "Tianzhixia Brush", serif; }
.status-待确认 { color: #7b5d18; background: #f6eecb; }
.status-推测 { color: #76438c; background: #efe2f4; }
.status-疑点 { color: #9a382f; background: #f6dfda; }
code { padding: .08em .34em; border-radius: .3em; background: #eee6d6; font-family: "Tianzhixia Brush", serif; font-size: .9em; }

.query-table-wrap { overflow-x: auto; margin: .8rem 0 1.4rem; border: 1px solid var(--line); border-radius: .7rem; }
.query-table { width: 100%; border-collapse: collapse; background: #fffefa; font: .92rem/1.55 "Tianzhixia Brush", serif; }
.query-table th,
.query-table td { padding: .7rem .8rem; border-bottom: 1px solid #e8e0d1; text-align: left; vertical-align: top; }
.query-table th { color: #625849; background: #f3ecde; white-space: nowrap; }
.query-table tr:last-child td { border-bottom: 0; }
.query-list { columns: 3 14rem; margin-top: .6rem; }
.query-list li { break-inside: avoid; margin-bottom: .3rem; }

.linked-references,
.local-graph-section { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.linked-references h2,
.local-graph-section h2 { margin-top: 0; }
.reference-group { margin: 1rem 0; padding: 1rem 1.15rem; border-left: .24rem solid #b79a6f; border-radius: .25rem .65rem .65rem .25rem; background: #f7f0e3; }
.reference-group h3 { margin: 0 0 .45rem; font-size: 1rem; }
.reference-group ul { margin: 0; padding-left: 1.25rem; color: #625b51; font-size: .92rem; }

.graph-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .65rem 1rem; margin: .9rem 0; font-family: "Tianzhixia Brush", serif; }
.graph-filters,
.graph-actions { display: flex; flex-wrap: wrap; gap: .42rem; align-items: center; }
.graph-filter,
.graph-action { display: inline-flex; gap: .38rem; align-items: center; min-height: 2rem; padding: .35rem .68rem; border: 1px solid #cad2d9; border-radius: .42rem; color: #46535d; background: #f8fafb; box-shadow: 0 1px 2px rgb(26 39 49 / 7%); font: 500 .78rem/1.2 "Tianzhixia Brush", serif; transition: opacity .15s, border-color .15s, background .15s; }
.graph-filter:hover,
.graph-action:hover { border-color: #94a6b4; color: #24333e; background: #fff; }
.graph-filter[aria-pressed="false"] { opacity: .38; filter: grayscale(.85); }
.graph-action[aria-pressed="false"] { color: #84929c; background: #edf1f4; }
.graph-dot { width: .62rem; height: .62rem; border-radius: 50%; background: var(--node-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--node-color), transparent 72%); }
.graph-canvas-wrap { position: relative; width: 100%; height: 30rem; overflow: hidden; border: 1px solid #ccd5dc; border-radius: .72rem; background: radial-gradient(circle at 50% 42%, #fff 0, #f5f8fa 58%, #edf2f5 100%); box-shadow: inset 0 0 4rem rgb(73 94 108 / 7%), 0 8px 24px rgb(25 38 47 / 10%); }
.graph-canvas-wrap::before { position: absolute; inset: 0; content: ""; pointer-events: none; opacity: .18; background-image: radial-gradient(circle, #728897 0.65px, transparent .8px); background-size: 22px 22px; }
.graph-canvas-wrap.graph-global { height: min(72vh, 52rem); }
.graph-canvas-wrap canvas { position: relative; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.graph-canvas-wrap canvas:active { cursor: grabbing; }
.graph-help { align-self: center; color: var(--muted); font: .76rem/1.4 "Tianzhixia Brush", serif; }
.graph-tooltip { position: absolute; z-index: 3; max-width: 16rem; padding: .5rem .65rem; border: 1px solid rgb(147 177 198 / 24%); border-radius: .42rem; color: #edf7fc; background: rgb(12 20 28 / 92%); box-shadow: 0 5px 18px rgb(0 0 0 / 32%); pointer-events: none; font: .78rem/1.35 "Tianzhixia Brush", serif; backdrop-filter: blur(8px); }
.graph-tooltip strong,
.graph-tooltip span { display: block; }
.graph-tooltip span { margin-top: .12rem; color: #9eb2c0; font-size: .7rem; }

.search-main-form { max-width: 48rem; margin: 2rem auto; border-radius: .65rem; }
.search-main-form input { padding: .9rem 1rem; }
.search-summary { color: var(--muted); }
.search-result { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.search-result h2 { margin: 0; font-size: 1.25rem; }
.search-result p { margin: .4rem 0 0; color: var(--muted); }
.search-result-meta { display: inline-block; margin-left: .5rem; color: #8b7355; font: .75rem "Tianzhixia Brush", serif; }
.search-highlight { color: var(--accent); background: #f7e5c3; }

section,
section * { font-family: "Noto Serif SC", "Songti SC", "STSong", serif !important; }

.site-footer { padding: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); text-align: center; font-family: "Noto Serif SC", "Songti SC", "STSong", serif; font-size: .82rem; }
.site-footer a { color: inherit; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }
  .main-nav { grid-column: 1 / -1; grid-row: 2; order: 3; }
  .header-search { width: min(14rem, 42vw); }
  .query-list { columns: 2 12rem; }
}

@media (max-width: 600px) {
  .site-main { width: min(100% - 1rem, 70rem); padding-top: 1rem; }
  .site-header { padding-inline: .8rem; }
  .header-search { display: none; }
  .entity-page, .graph-page, .search-page, .copyright-page, .not-found { padding: 1.1rem; border-radius: .75rem; }
  .page-heading h1 { display: inline-block; width: 100%; font-size: 1.65rem; line-height: 1.45; white-space: normal; word-break: break-all; }
  .chapter-reference-page .page-heading h1 { font-size: 1.45rem; font-weight: 700; letter-spacing: .02em; }
  .query-list { columns: 1; }
  .graph-canvas-wrap { height: 24rem; }
}

@media print {
  .site-header, .site-footer, .graph-toolbar, .local-graph-section { display: none !important; }
  body { background: white; }
  .entity-page { padding: 0; border: 0; box-shadow: none; }
}