<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <meta name="theme-color" content="#0A0E1E" />
  <title>五气朝元 · 罗盘</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="theme-bg.css" />
</head>
<body>
  
  <div class="luopan-stage" id="luopan-stage">
    <!-- cosmos.js 注入 SVG 罗盘 -->
  </div>

  <!-- 内容面板（点击罗盘段位后滑入） -->
  <div class="luopan-panel" id="luopan-panel">
    <div class="lp-close" id="lp-close">×</div>
    <div class="lp-content" id="lp-content"></div>
  </div>

  <!-- 顶部品牌 -->
  <div class="luopan-brand">
    <span class="lb-name">五气朝元</span>
    <span class="lb-sub">道 · 医 · 文 · 三脉同源</span>
    <a class="lb-jing" href="jingxian.html">朝元境 · 一人一山，命局即地形</a>
  </div>

  <!-- 底部提示 -->
  <div class="luopan-hint" id="luopan-hint">五气朝元 · 春山如笑，文脉长流</div>

  <!-- 五气朝元 v7 罗盘 · 导航在顶部，罗盘为装饰 -->
<script src="cosmos.js"></script>
  <script src="branches.js"></script>
  <script src="chrome.js"></script>
  <script src="theme-bg.js"></script>
</body>
</html>