:root {
  --primary-nav-height: 100px;
  --primary-nav-safe: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: border-box; }
body.has-primary-nav {
  isolation: isolate;
  padding-bottom: 0;
  --glass-ink: #f4efdf;
  --glass-active: #ffdda0;
  --glass-fill: rgba(10, 26, 31, .28);
  --glass-rim: rgba(249, 233, 195, .32);
  --glass-shine: rgba(255, 250, 232, .2);
  --glass-selected: rgba(232, 202, 149, .15);
  --glass-text-shadow: 0 1px 5px rgba(0, 10, 15, .66);
}
body[data-nav-tone="light"] {
  --glass-ink: #4e4232;
  --glass-active: #705021;
  --glass-fill: rgba(250, 244, 226, .31);
  --glass-rim: rgba(255, 251, 237, .68);
  --glass-shine: rgba(255, 253, 243, .5);
  --glass-selected: rgba(240, 213, 166, .24);
  --glass-text-shadow: 0 1px 3px rgba(255, 250, 235, .5);
}
/* Keep the original scene sharp beneath every control. */
body.has-primary-nav *,
body.has-primary-nav *::before,
body.has-primary-nav *::after {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.primary-nav {
  position: fixed;
  z-index: 30;
  bottom: max(12px, var(--primary-nav-safe));
  left: 50%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  width: min(calc(100% - 28px), 402px);
  height: 78px;
  padding: 6px;
  transform: translateX(-50%);
  border: 0;
  background: transparent;
  box-shadow: none;
}
.primary-nav::before,
.primary-nav::after,
.connection-tabs::before,
.connection-tabs::after { content: none; }
.primary-nav-item {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 62px;
  padding: 2px 0 5px;
  border: 1px solid transparent;
  border-radius: 16px 5px 16px 5px;
  background: transparent;
  box-shadow: none;
  color: var(--glass-ink);
  text-decoration: none;
  font: 12px/1.2 "Microsoft YaHei", system-ui, sans-serif;
  letter-spacing: .08em;
  text-shadow: var(--glass-text-shadow);
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
.primary-nav-item svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(5, 17, 21, .15));
  transition: transform 180ms ease;
}
.primary-nav-item.is-active {
  color: var(--glass-active);
  border-color: color-mix(in srgb, currentColor 50%, transparent);
  background: color-mix(in srgb, currentColor 5%, transparent);
  font-weight: 600;
}
.primary-nav-item:hover { color: var(--glass-active); }
.primary-nav-item:hover svg { transform: translateY(-1px); }
.primary-nav-item:active { transform: scale(.96); }
.primary-nav-item:focus-visible,
.connection-tabs a:focus-visible { outline: 2px solid var(--glass-active); outline-offset: -3px; }
/* Shared geometry and finish, taken from the ancestral hall entrance.
   The component ID prevents room themes from restyling the global navigation.
   Display/visibility stay with the room so immersive readers can hide it. */
#hall-primary-nav {
  position:fixed;z-index:30;left:50%;bottom:max(2px,env(safe-area-inset-bottom,0px));
  width:min(calc(100% - 38px),374px);max-width:374px;height:62px;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:4px;margin:0;
  transform:translateX(-50%);border:0;border-radius:0;background:transparent;box-shadow:none;
}
#hall-primary-nav::before {
  content:"";display:block;position:absolute;inset:-27px -24px -16px;z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(8,25,32,.27));pointer-events:none;
}
#hall-primary-nav::after { content:none; }
#hall-primary-nav .primary-nav-item {
  position:relative;display:grid;align-content:center;justify-items:center;
  min-width:0;min-height:50px;padding:2px 0 4px;gap:3px;margin:0;
  border:0;border-radius:0;background:transparent;box-shadow:none;
  color:#f4ecd8;font:11px/1.2 "Microsoft YaHei",system-ui,sans-serif;letter-spacing:.08em;
  text-decoration:none;text-shadow:0 1px 3px #102930,0 0 5px #102930;
}
#hall-primary-nav .primary-nav-item span {
  font:inherit;letter-spacing:inherit;color:inherit;text-shadow:inherit;-webkit-text-stroke:0;
}
#hall-primary-nav .primary-nav-item svg {
  width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px #102930);
}
#hall-primary-nav .primary-nav-item.is-active {
  color:#ffdda0;background:transparent;border:0;font-weight:600;
}
#hall-primary-nav .primary-nav-item::after { content:none; }
#hall-primary-nav .primary-nav-item.is-active::after {
  content:"";position:absolute;bottom:0;width:16px;height:1px;background:#ffdda0;
}
#hall-primary-nav .primary-nav-item:hover { color:#ffdda0; }
#hall-primary-nav .primary-nav-item:focus-visible { outline:2px solid #ffdda0;outline-offset:-3px; }
.has-primary-nav .app-shell { min-height: 100svh; padding: 0; }
.has-primary-nav .hall-scene,
.has-primary-nav .year-page,
.has-primary-nav .relationship-page,
.has-primary-nav .relation-page,
.has-primary-nav .ten-volume,
.has-primary-nav .volumes-page,
.has-primary-nav .ascent-page,
.has-primary-nav .career-page,
.has-primary-nav .rivers-page,
.has-primary-nav .elements-page,
.has-primary-nav .daily-page {
  min-height: 100svh;
  border-radius: 0;
}
.has-primary-nav .hall-options { bottom: calc(var(--primary-nav-height) + var(--primary-nav-safe) + 40px); }
.has-primary-nav .overview-content { padding-bottom: calc(var(--primary-nav-height) + var(--primary-nav-safe) + 24px); }
.connection-tabs {
  position: absolute;
  z-index: 10;
  top: max(14px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: min(calc(100% - 48px), 244px);
  height: 48px;
  margin: 0;
  padding: 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.connection-tabs a {
  display: grid;
  flex: 1;
  height: 38px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 14px 4px 14px 4px;
  background: transparent;
  box-shadow: none;
  color: var(--glass-ink);
  text-decoration: none;
  font: 14px/1 "Microsoft YaHei", system-ui, sans-serif;
  letter-spacing: .18em;
  text-shadow: var(--glass-text-shadow);
  transition: color 180ms ease, background 180ms ease;
}
.connection-tabs a.is-active {
  color: var(--glass-active);
  border-color: color-mix(in srgb, currentColor 50%, transparent);
  background: color-mix(in srgb, currentColor 5%, transparent);
  font-weight: 600;
}
.module-page {
  position: relative;
  display: grid;
  width: min(100%, 430px);
  min-height: 100svh;
  margin: 0 auto;
  align-content: center;
  justify-items: center;
  gap: 34px;
  padding: 48px 24px calc(var(--primary-nav-height) + var(--primary-nav-safe) + 24px);
  background: radial-gradient(ellipse at 50% 25%, #faf4e7, #ede1ca 70%, #e2d1af);
  color: #56442d;
  font-family: "Songti SC", SimSun, serif;
}
.module-body { margin: 0; background: #17292e; }
.module-label { margin: 0; color: #987d53; font-size: 13px; letter-spacing: .35em; }
.module-page h1 { margin: 0; font-size: 46px; font-weight: 500; letter-spacing: .2em; }
.module-rule { width: 68px; height: 1px; background: #b5965c; }
.pillars { display: grid; width: 100%; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pillar { padding: 22px 0; text-align: center; border: 1px solid #c6ad82; border-radius: 8px; background: rgba(255, 253, 247, .5); }
.pillar span { display: block; color: #94774f; font-size: 14px; }
.pillar i { display: block; margin-top: 22px; font-size: 26px; font-style: normal; color: #b7a484; }
.profile-emblem { display: grid; width: 94px; height: 94px; place-items: center; border: 1px solid #b5965c; border-radius: 50%; }
.profile-emblem svg { width: 44px; fill: none; stroke: #987d53; stroke-width: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .primary-nav-item, .primary-nav-item svg, .connection-tabs a { transition: none; }
}