:root {
  --v213-nav-height: 68px;
  --v213-focus: #e2b85d;
}

html {
  scroll-padding-top: calc(var(--v213-nav-height) + 16px);
}

section[id],
[id="creativePossibilities"],
[id="immersiveHall"],
[id="digitalMuseum"] {
  scroll-margin-top: calc(var(--v213-nav-height) + 16px);
}

/* 原版5000条谱系：在真正载入前显示明确状态，载入后让图谱成为唯一主画面。 */
#ethnicKnowledgeGraph .ethnic-graph-original-frame-shell {
  position: relative;
  background: radial-gradient(circle at 50% 45%, rgba(112, 31, 30, .18), transparent 48%), #090606;
}

#ethnicKnowledgeGraph .ethnic-graph-original-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

#ethnicKnowledgeGraph .ethnic-graph-original-frame-shell[data-v213-graph-state="ready"] .ethnic-graph-original-frame {
  opacity: 1;
  pointer-events: auto;
}

#ethnicKnowledgeGraph .ethnic-graph-original-fallback {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 12px;
  padding: 32px;
  color: rgba(245, 224, 180, .7);
  text-align: center;
  pointer-events: none;
}

#ethnicKnowledgeGraph .ethnic-graph-original-fallback button {
  pointer-events: auto;
  justify-self: center;
  min-width: 238px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(226, 184, 93, .72);
  background: linear-gradient(135deg, rgba(132, 32, 27, .82), rgba(54, 18, 15, .9));
  color: #f4dfb5;
  font: inherit;
  letter-spacing: .1em;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

#ethnicKnowledgeGraph .ethnic-graph-original-fallback button:hover,
#ethnicKnowledgeGraph .ethnic-graph-original-fallback button:focus-visible {
  border-color: #f0c879;
  background: linear-gradient(135deg, rgba(167, 44, 34, .94), rgba(62, 24, 19, .96));
  transform: translateY(-2px);
}

#ethnicKnowledgeGraph .ethnic-graph-original-fallback button span {
  margin-left: 8px;
  color: #e4bb70;
}

#ethnicKnowledgeGraph .ethnic-graph-original-fallback b {
  color: #f0d49a;
  font: 500 clamp(24px, 3vw, 42px)/1.35 "STSong", "Songti SC", serif;
  letter-spacing: .1em;
}

#ethnicKnowledgeGraph .ethnic-graph-original-frame-shell[data-v213-graph-state="ready"] .ethnic-graph-original-fallback {
  opacity: 0;
  visibility: hidden;
}

#ethnicKnowledgeGraph .ethnic-graph-original-frame-shell[data-v213-graph-state="error"] .ethnic-graph-original-fallback {
  z-index: 3;
  background: linear-gradient(135deg, rgba(30, 8, 9, .94), rgba(10, 6, 6, .96));
}

/* 同心入口继续沿屏幕侧边避让，面板始终落在安全区内。 */
.tx-shell.tx-safe-v213.tx-pomegranate-dock .tx-panel {
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  max-height: calc(100svh - 24px - env(safe-area-inset-bottom));
}

.tx-shell.tx-safe-v213.tx-pomegranate-dock .tx-launch {
  max-width: min(58px, 14vw);
}

/* 键盘可见焦点与触控可达性。 */
:where(a, button, input, select, textarea, [role="button"]):focus-visible {
  outline: 2px solid var(--v213-focus) !important;
  outline-offset: 3px !important;
}

:where(button, [role="button"], a) {
  touch-action: manipulation;
}

@media (max-width: 760px) {
  :root { --v213-nav-height: 64px; }
  #ethnicKnowledgeGraph .ethnic-graph-original-frame-shell { min-height: 600px; }
  .tx-shell.tx-safe-v213.tx-pomegranate-dock .tx-panel {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  #ethnicKnowledgeGraph .ethnic-graph-original-frame { transition: none; }
}