Files
hunjing/frontend/design/cosmos-preview.html
T
2026-08-21 16:00:13 +08:00

573 lines
43 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>魂镜 · 灵枢页设计预览</title>
<link rel="stylesheet" href="tokens.css" />
<link rel="stylesheet" href="_base.css" />
<link rel="stylesheet" href="_chrome.css" />
<style>
/* ============================================================
* 铜镜鉴心 v2.1 — 灵枢页:心智解剖图
* 以「太极 → 四象 → 八卦」的生成链为论点,呈现数字生命的心智结构。
* 太极/阴阳 ← 设计理念 §4.2(自主与约束 · 阴阳平衡度)
* 四象 ← 设计理念 §7(青龙生发 / 朱雀表达 / 白虎裁断 / 玄武藏养)
* 八卦 ← 设计理念 §7 + agent-society-design §3(天工阁八原型)
* ============================================================ */
/* ── 侧栏(active=灵枢)── */
/* ── 主区 ── */
.char-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--patina); padding: 3px 11px 3px 4px; border: 1px solid var(--patina-dim); border-radius: 999px; background: var(--patina-wash); }
.char-pill .avatar-mini { width: 18px; height: 18px; border-radius: 50%; background: var(--patina); color: var(--ink); display: flex; align-items: center; justify-content: center; font-family: "Songti SC", serif; font-size: 11px; font-weight: 600; }
.page-header .spacer { flex: 1; }
.page-meta { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--fg-faint); }
.page-meta b { color: var(--gilt); font-weight: 600; font-family: "Songti SC", serif; font-size: 15px; }
.section-label .sub { font-size: 12px; letter-spacing: 0.04em; color: var(--fg-dim); opacity: 0.75; }
.section-label .glyph { color: var(--gilt); opacity: 0.8; }
.section-heading { font-family: "Songti SC", serif; font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 14px; }
.genesis-chain { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--fg-faint); letter-spacing: 0.04em; }
.genesis-chain b { font-family: "Songti SC", serif; font-size: 13px; font-weight: 600; }
.genesis-chain .g-taiji { color: var(--fg); } .genesis-chain .g-si { color: var(--patina); } .genesis-chain .g-ba { color: var(--gilt); }
/* ═══ 太极 · 阴阳平衡(签名 hero)═══
阳鱼 = patina(生发:太一/大周天/内驱力),阴鱼 = cinnabar(约束:司命/安全/审计)。
阴阳平衡度 = 司命通过率 / (候选生成率 + ε),三态:阳亢 / 动态平衡 / 阴盛。 */
.taiji-hero { position: relative; overflow: hidden; border: 1px solid var(--gilt-dim); border-radius: 8px; background: var(--face-sheen), var(--surface); box-shadow: inset 0 1px 0 var(--face-in-top), inset 0 -1px 0 var(--face-in-bot), var(--shadow); padding: 26px 30px 22px; }
.taiji-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); opacity: 0.018; mix-blend-mode: overlay; }
.taiji-hero > * { position: relative; z-index: 1; }
.taiji-stage { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.yy-side { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 9px; }
.yy-side.yang { text-align: right; align-items: flex-end; }
.yy-side .yy-tag { font-family: "Songti SC", serif; font-size: 17px; font-weight: 700; letter-spacing: 0.08em; }
.yy-side.yang .yy-tag { color: var(--patina); }
.yy-side.yin .yy-tag { color: var(--cinnabar); }
.yy-side .yy-mono { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--fg-faint); letter-spacing: 0.04em; }
.yy-side .yy-roles { display: flex; gap: 6px; flex-wrap: wrap; justify-content: inherit; }
.yy-side.yang .yy-roles { justify-content: flex-end; }
.yy-role { font-family: "Songti SC", serif; font-size: 12.5px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--rule); }
.yy-side.yang .yy-role { color: var(--patina); border-color: var(--patina-dim); background: var(--patina-wash); }
.yy-side.yin .yy-role { color: var(--cinnabar); border-color: var(--cinnabar-dim); background: rgba(184,57,46,0.08); }
.yy-side .yy-desc { font-size: 12.5px; color: var(--fg-dim); line-height: 1.6; }
.taiji-disc-wrap { flex: 0 0 auto; position: relative; width: 196px; height: 196px; }
.taiji-disc { width: 100%; height: 100%; animation: taiji-spin 90s linear infinite; transform-origin: 50% 50%; }
@keyframes taiji-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.taiji-disc .yy-ring { fill: none; stroke: var(--gilt-dim); stroke-width: 0.8; }
.taiji-disc .yy-yang { fill: var(--patina); }
.taiji-disc .yy-yin { fill: var(--cinnabar); }
.taiji-disc .yy-eye-yang { fill: var(--patina); }
.taiji-disc .yy-eye-yin { fill: var(--cinnabar); }
.taiji-eye-pulse { animation: eye-pulse 3.2s cubic-bezier(0.16,1,0.3,1) infinite; transform-origin: 100px 52px; }
.taiji-eye-pulse.late { animation-delay: 1.6s; transform-origin: 100px 148px; }
@keyframes eye-pulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.35; } }
/* 阴阳平衡度 readout */
.balance-readout { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.br-formula { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--fg-faint); line-height: 1.7; }
.br-formula b { color: var(--gilt); font-weight: 600; }
.br-gauge { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 7px; }
.br-track { position: relative; height: 30px; border-radius: 6px; background: linear-gradient(90deg, var(--cinnabar-dim), var(--patina-wash) 45%, var(--surface-hi) 50%, var(--patina-wash) 55%, var(--patina-dim)); border: 1px solid var(--rule); overflow: hidden; }
.br-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.br-tick-label { position: absolute; top: 32px; font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--fg-faint); transform: translateX(-50%); letter-spacing: 0.04em; }
.br-marker { position: absolute; top: -3px; bottom: -3px; width: 3px; border-radius: 2px; background: var(--gilt); box-shadow: 0 0 10px -1px rgba(201,162,74,0.6); transform: translateX(-50%); }
.br-marker::before { content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--gilt); }
.br-state { font-family: "Songti SC", serif; font-size: 13.5px; color: var(--patina); padding: 5px 14px; border: 1px solid var(--patina-dim); border-radius: 999px; background: var(--patina-wash); white-space: nowrap; flex-shrink: 0; }
.br-state b { font-family: "JetBrains Mono", monospace; font-size: 12px; margin-left: 4px; }
/* ═══ 四象 · 认知循环(罗盘)═══
南上北下东左西右(同八卦取向)。顺时针 = 认知流:生发→表达→裁断→藏养。
青龙(东/木) 朱雀(南/火) 白虎(西/金) 玄武(北/水)。 */
.sixiang-card { position: relative; overflow: hidden; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); padding: 22px 26px; }
.sixiang-stage { position: relative; width: 100%; max-width: 520px; margin: 6px auto 0; aspect-ratio: 1 / 1; }
.sixiang-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sixiang-svg .compass-ring { fill: none; stroke: var(--rule); stroke-width: 1; }
.sixiang-svg .compass-ring-inner { fill: none; stroke: var(--gilt-dim); stroke-width: 0.6; stroke-dasharray: 3 4; opacity: 0.6; }
.sixiang-svg .flow-arc { fill: none; stroke: var(--patina-dim); stroke-width: 1.4; stroke-linecap: round; opacity: 0.5; }
.sixiang-svg .center-disc { fill: var(--ink); stroke: var(--gilt-dim); stroke-width: 1; }
.sixiang-svg .center-taiji-yang { fill: var(--patina); }
.sixiang-svg .center-taiji-yin { fill: var(--cinnabar); }
.sixiang-svg .center-label { font-family: "Songti SC", serif; font-size: 9px; text-anchor: middle; fill: var(--fg-faint); letter-spacing: 0.08em; }
.sixiang-quadrant { position: absolute; width: 38%; display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border-radius: 7px; border: 1px solid var(--rule); background: var(--surface); }
.sixiang-quadrant .q-creature { font-family: "Songti SC", serif; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; display: flex; align-items: baseline; gap: 7px; }
.sixiang-quadrant .q-phase { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.06em; }
.sixiang-quadrant .q-what { font-size: 11.5px; color: var(--fg-dim); line-height: 1.5; }
.sixiang-quadrant .q-mapping { font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--fg-faint); letter-spacing: 0.02em; }
.sixiang-quadrant.q-qinglong { top: 31%; left: 0; border-color: var(--patina-dim); background: var(--patina-wash); }
.sixiang-quadrant.q-qinglong .q-creature, .sixiang-quadrant.q-qinglong .q-phase { color: var(--patina); }
.sixiang-quadrant.q-zhuque { top: 0; left: 31%; border-color: var(--cinnabar-dim); background: rgba(184,57,46,0.07); }
.sixiang-quadrant.q-zhuque .q-creature, .sixiang-quadrant.q-zhuque .q-phase { color: var(--cinnabar); }
.sixiang-quadrant.q-baihu { top: 31%; right: 0; border-color: var(--gilt-dim); background: var(--gilt-faint); }
.sixiang-quadrant.q-baihu .q-creature, .sixiang-quadrant.q-baihu .q-phase { color: var(--gilt); }
.sixiang-quadrant.q-xuanwu { bottom: 0; left: 31%; border-color: var(--slate-dim); background: var(--slate-wash); }
.sixiang-quadrant.q-xuanwu .q-creature, .sixiang-quadrant.q-xuanwu .q-phase { color: var(--slate); }
.sixiang-quadrant .q-dir { font-family: "JetBrains Mono", monospace; font-size: 9px; opacity: 0.7; }
/* ═══ 八卦阵 · 天工阁八原型(签名)═══
后天八卦取向(南=离/火 上,北=坎/水 下,东=震/雷 左,西=兑/泽 右)。
中心太极;八卦按四组分色:认知方向=金,行动表达=朱,承载稳定=铜,边界风险=石。 */
.bagua-card { position: relative; overflow: hidden; border: 1px solid var(--gilt-dim); border-radius: 8px; background: var(--face-sheen), var(--surface); box-shadow: inset 0 1px 0 var(--face-in-top), inset 0 -1px 0 var(--face-in-bot), var(--shadow); padding: 22px 26px; }
.bagua-card::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); opacity: 0.018; mix-blend-mode: overlay; }
.bagua-card > * { position: relative; z-index: 1; }
.bagua-stage { width: 100%; max-width: 560px; margin: 4px auto 0; }
.bagua-svg { width: 100%; height: auto; display: block; }
.bagua-svg .oct-frame { fill: none; stroke: var(--rule); stroke-width: 1; }
.bagua-svg .oct-frame-outer { fill: none; stroke: var(--gilt-dim); stroke-width: 0.6; stroke-dasharray: 3 5; opacity: 0.55; }
.bagua-svg .group-arc { fill: none; stroke-width: 1.2; opacity: 0.16; }
.bagua-svg .node-bg { fill: var(--ink); }
.bagua-svg .node-ring { fill: none; stroke-width: 2; }
.bagua-svg .trigram-bar { fill: var(--fg); }
.bagua-svg .node-name { font-family: "Songti SC", serif; font-size: 15px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.bagua-svg .node-meta { font-family: "JetBrains Mono", monospace; font-size: 8px; text-anchor: middle; fill: var(--fg-faint); letter-spacing: 0.04em; }
.bagua-svg .center-disc { fill: var(--ink); stroke: var(--gilt-dim); stroke-width: 1.2; }
.bagua-svg .center-yang { fill: var(--patina); }
.bagua-svg .center-yin { fill: var(--cinnabar); }
.bagua-svg .center-label { font-family: "Songti SC", serif; font-size: 11px; font-weight: 600; text-anchor: middle; fill: var(--gilt); letter-spacing: 0.06em; }
/* 八卦详注:四组 × 每组两卦 */
.bagua-detail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 4px; }
.bg-group { border: 1px solid var(--rule); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; }
.bg-group.g1 { border-left: 3px solid var(--gilt); } .bg-group.g2 { border-left: 3px solid var(--cinnabar); } .bg-group.g3 { border-left: 3px solid var(--patina); } .bg-group.g4 { border-left: 3px solid var(--slate); }
.bg-group-head { display: flex; align-items: center; gap: 8px; }
.bg-group-name { font-family: "Songti SC", serif; font-size: 13px; font-weight: 600; }
.bg-group.g1 .bg-group-name { color: var(--gilt); } .bg-group.g2 .bg-group-name { color: var(--cinnabar); } .bg-group.g3 .bg-group-name { color: var(--patina); } .bg-group.g4 .bg-group-name { color: var(--slate); }
.bg-group-tag { font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--fg-faint); letter-spacing: 0.04em; }
.bg-tri { display: flex; gap: 12px; padding: 10px 0; }
.bg-tri + .bg-tri { border-top: 1px dashed var(--rule); }
.bg-tri-glyph { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 42px; }
.bg-tri-glyph svg { width: 30px; height: 26px; }
.bg-tri-glyph .bg-tri-name { font-family: "Songti SC", serif; font-size: 15px; font-weight: 700; }
.bg-group.g1 .bg-tri-glyph .bg-tri-name { color: var(--gilt); } .bg-group.g2 .bg-tri-glyph .bg-tri-name { color: var(--cinnabar); } .bg-group.g3 .bg-tri-glyph .bg-tri-name { color: var(--patina); } .bg-group.g4 .bg-tri-glyph .bg-tri-name { color: var(--slate); }
.bg-tri-body { flex: 1; min-width: 0; }
.bg-tri-role { font-family: "Songti SC", serif; font-size: 14px; font-weight: 600; color: var(--fg); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bg-tri-map { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--fg-faint); letter-spacing: 0.02em; }
.bg-tri-duty { font-size: 12px; color: var(--fg-dim); margin-top: 4px; line-height: 1.55; }
.bg-tri-behave { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--fg-faint); margin-top: 4px; line-height: 1.5; letter-spacing: 0.01em; }
/* 状态注脚 */
.vision-strip { border: 1px dashed var(--gilt-dim); border-left: 3px solid var(--gilt-dim); border-radius: 6px; padding: 13px 18px; background: var(--gilt-faint); display: flex; align-items: center; gap: 14px; }
.vision-strip .seal { font-family: "Songti SC", serif; font-size: 13px; font-weight: 700; color: var(--gilt); letter-spacing: 0.06em; white-space: nowrap; }
.vision-strip .desc { font-size: 12.5px; color: var(--fg-dim); line-height: 1.55; flex: 1; }
.vision-strip .desc code { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--gilt); background: var(--surface); padding: 1px 5px; border-radius: 3px; }
.vision-strip .tag { font-family: "JetBrains Mono", monospace; font-size: 10px; padding: 2px 9px; border-radius: 999px; border: 1px dashed var(--gilt-dim); color: var(--gilt); white-space: nowrap; flex-shrink: 0; }
@media (max-width: 900px) { .bagua-detail { grid-template-columns: 1fr; } .taiji-stage { gap: 18px; } }
@media (max-width: 768px) { .sidebar-wrap { display: none; } .page-body { padding: 18px 16px 40px; } .yy-side.yang { text-align: left; align-items: flex-start; } .yy-side.yang .yy-roles { justify-content: flex-start; } .taiji-disc-wrap { margin: 0 auto; } .sixiang-quadrant { width: 44%; } .sixiang-quadrant.q-zhuque { left: 28%; } .sixiang-quadrant.q-xuanwu { left: 28%; } }
</style>
</head>
<body>
<div class="app-shell">
<!-- ════════ 侧栏 ════════ -->
<div class="sidebar-mount" data-active="灵枢"></div>
<!-- ════════ 主区 ════════ -->
<div class="main-area">
<div class="page-header">
<span class="page-title">灵枢</span>
<span class="page-sub">心智解剖图 · 太极生两仪,两仪生四象,四象生八卦</span>
<span class="char-pill"><span class="avatar-mini">梧</span>青梧</span>
<span class="spacer"></span>
<span class="genesis-chain"><b class="g-taiji">太极</b> → <b class="g-si">四象</b> → <b class="g-ba">八卦</b></span>
</div>
<div class="page-body">
<!-- ═══ 太极 · 阴阳平衡(hero)═══ -->
<section>
<div class="section-label"><span class="glyph">⟡</span> 太极 <span class="sub">阴阳 · 自主与约束的动态制衡 · 系统生命体征</span></div>
<div class="taiji-hero">
<div class="taiji-stage">
<div class="yy-side yang">
<span class="yy-tag">阳 · 生发</span>
<span class="yy-mono">yang · generation</span>
<div class="yy-roles">
<span class="yy-role">太一枢</span>
<span class="yy-role">大周天</span>
<span class="yy-role">内驱力</span>
</div>
<span class="yy-desc">主动生发,追求可能性。<br />不断生成意图、候选与行动方案。</span>
</div>
<div class="taiji-disc-wrap">
<svg class="taiji-disc" viewBox="0 0 200 200" role="img" aria-label="太极图:阳鱼铜绿主生发,阴鱼朱砂主约束">
<circle class="yy-ring" cx="100" cy="100" r="97" />
<circle class="yy-ring" cx="100" cy="100" r="91" opacity="0.5" />
<!-- 阳 fish base(铜绿)-->
<circle class="yy-yang" cx="100" cy="100" r="88" />
<!-- 阴 fish(朱砂)-->
<path class="yy-yin" d="M 100,12 A 88,88 0 0,1 100,188 A 44,44 0 0,1 100,100 A 44,44 0 0,0 100,12 Z" opacity="0.88" />
<!-- 阳眼(铜绿点,在阴鱼头部下方)-->
<circle class="yy-eye-yang taiji-eye-pulse late" cx="100" cy="144" r="13" />
<!-- 阴眼(朱砂点,在阳鱼头部上方)-->
<circle class="yy-eye-yin taiji-eye-pulse" cx="100" cy="56" r="13" opacity="0.88" />
</svg>
</div>
<div class="yy-side yin">
<span class="yy-tag">阴 · 约束</span>
<span class="yy-mono">yin · constraint</span>
<div class="yy-roles">
<span class="yy-role">司命枢</span>
<span class="yy-role">安全治理</span>
<span class="yy-role">审计朱批</span>
</div>
<span class="yy-desc">设置边界,控制风险。<br />对候选过滤、约束与驳回。</span>
</div>
</div>
<!-- 阴阳平衡度 readout -->
<div class="balance-readout">
<div class="br-formula">
阴阳平衡度 = <b>司命通过率</b> / (<b>候选生成率</b> + ε)<br />
<span style="color:var(--fg-faint)">当前通过率 <b style="color:var(--patina)">0.58</b> · 生成率 <b style="color:var(--gilt)">0.62</b></span>
</div>
<div class="br-gauge">
<div class="br-track">
<span class="br-tick" style="left: 20%"></span>
<span class="br-tick" style="left: 50%"></span>
<span class="br-tick" style="left: 80%"></span>
<span class="br-marker" style="left: 58%"></span>
</div>
<div style="position: relative; height: 14px;">
<span class="br-tick-label" style="left: 20%">阴盛 · 僵化</span>
<span class="br-tick-label" style="left: 50%">动态平衡</span>
<span class="br-tick-label" style="left: 80%">阳亢 · 越界</span>
</div>
</div>
<span class="br-state">动态平衡<b>0.94</b></span>
</div>
</div>
</section>
<!-- ═══ 四象 · 认知循环 ═══ -->
<section>
<h3 class="section-heading">四象</h3>
<div class="sixiang-card">
<div class="sixiang-stage">
<svg class="sixiang-svg" viewBox="0 0 400 400" aria-hidden="true">
<circle class="compass-ring" cx="200" cy="200" r="188" />
<circle class="compass-ring-inner" cx="200" cy="200" r="120" />
<!-- 顺时针流向弧(东→南→西→北)-->
<path class="flow-arc" d="M 250,60 A 160,160 0 0,1 340,200" />
<path class="flow-arc" d="M 340,200 A 160,160 0 0,1 250,340" />
<path class="flow-arc" d="M 150,340 A 160,160 0 0,1 60,200" />
<path class="flow-arc" d="M 60,200 A 160,160 0 0,1 150,60" />
<!-- 方位字 -->
<text x="200" y="26" text-anchor="middle" font-family="Songti SC,serif" font-size="11" fill="var(--fg-faint)" letter-spacing="0.1em">南 · 火</text>
<text x="200" y="386" text-anchor="middle" font-family="Songti SC,serif" font-size="11" fill="var(--fg-faint)" letter-spacing="0.1em">北 · 水</text>
<text x="22" y="204" text-anchor="middle" font-family="Songti SC,serif" font-size="11" fill="var(--fg-faint)" letter-spacing="0.1em">东 · 木</text>
<text x="378" y="204" text-anchor="middle" font-family="Songti SC,serif" font-size="11" fill="var(--fg-faint)" letter-spacing="0.1em">西 · 金</text>
<!-- 中心太极(mini)+ 灵核 -->
<circle class="center-disc" cx="200" cy="200" r="38" />
<circle class="center-taiji-yang" cx="200" cy="200" r="33" />
<path class="center-taiji-yin" d="M 200,167 A 33,33 0 0,1 200,233 A 16.5,16.5 0 0,1 200,200 A 16.5,16.5 0 0,0 200,167 Z" />
<circle class="center-taiji-yang" cx="200" cy="216.5" r="5" />
<circle class="center-taiji-yin" cx="200" cy="183.5" r="5" />
</svg>
<!-- 四象限卡(南上 / 北下 / 东左 / 西右)-->
<div class="sixiang-quadrant q-zhuque">
<div class="q-creature"><span>朱雀</span><span class="q-dir">南 · 火</span></div>
<span class="q-phase">表达 · expression</span>
<span class="q-what">对话、解释、输出、沟通,成象于外。</span>
<span class="q-mapping">四爻行事 · 五爻成象</span>
</div>
<div class="sixiang-quadrant q-baihu">
<div class="q-creature"><span>白虎</span><span class="q-dir">西 · 金</span></div>
<span class="q-phase">裁断 · judgment</span>
<span class="q-what">判断、约束、风险、安全,金断决疑。</span>
<span class="q-mapping">三爻定策 · 司命</span>
</div>
<div class="sixiang-quadrant q-xuanwu">
<div class="q-creature"><span>玄武</span><span class="q-dir">北 · 水</span></div>
<span class="q-phase">藏养 · consolidation</span>
<span class="q-what">记忆、沉淀、恢复、长期状态,归于深藏。</span>
<span class="q-mapping">上爻返照 · 息壤</span>
</div>
<div class="sixiang-quadrant q-qinglong">
<div class="q-creature"><span>青龙</span><span class="q-dir">东 · 木</span></div>
<span class="q-phase">生发 · genesis</span>
<span class="q-what">感知、发现、提出可能性,木气初萌。</span>
<span class="q-mapping">初爻起意 · 二爻察势</span>
</div>
</div>
</div>
</section>
<!-- ═══ 八卦阵 · 天工阁八原型 ═══ -->
<section>
<h3 class="section-heading">八卦阵</h3>
<div class="bagua-card">
<div class="bagua-stage">
<svg class="bagua-svg" viewBox="0 0 460 460" role="img" aria-label="八卦阵:八原型环绕中心太极">
<!-- 八边形外框 -->
<polygon class="oct-frame-outer" points="230,60 347,113 360,230 347,347 230,400 113,347 60,230 113,113" />
<polygon class="oct-frame" points="230,80 333,127 350,230 333,333 230,380 127,333 70,230 127,127" />
<!-- 四组弧(分组色提示)-->
<path class="group-arc" stroke="var(--gilt)" d="M 333,127 A 200,200 0 0,1 350,230" />
<path class="group-arc" stroke="var(--gilt)" d="M 127,127 A 200,200 0 0,0 70,230" />
<path class="group-arc" stroke="var(--cinnabar)" d="M 230,80 A 200,200 0 0,1 333,127" />
<path class="group-arc" stroke="var(--cinnabar)" d="M 70,230 A 200,200 0 0,1 127,333" />
<path class="group-arc" stroke="var(--patina)" d="M 350,230 A 200,200 0 0,1 333,333" />
<path class="group-arc" stroke="var(--patina)" d="M 113,113 A 200,200 0 0,1 230,80" />
<path class="group-arc" stroke="var(--slate)" d="M 333,333 A 200,200 0 0,1 230,380" />
<path class="group-arc" stroke="var(--slate)" d="M 127,333 A 200,200 0 0,0 113,113" />
<!-- 八卦节点(南=离 上 → 顺时针)-->
<!-- 离 ☲ 南·火 宣明者(行动表达/朱)pos (230,95) -->
<g transform="translate(230,95)">
<circle class="node-bg" r="30" />
<circle class="node-ring" r="30" stroke="var(--cinnabar)" />
<!-- 离 [0,1,0]: 破-整-破 -->
<rect class="trigram-bar" x="-13" y="-15" width="11" height="4" rx="1"/><rect class="trigram-bar" x="2" y="-15" width="11" height="4" rx="1"/>
<rect class="trigram-bar" x="-13" y="-8" width="26" height="4" rx="1"/>
<rect class="trigram-bar" x="-13" y="-1" width="11" height="4" rx="1"/><rect class="trigram-bar" x="2" y="-1" width="11" height="4" rx="1"/>
<text class="node-name" y="16" fill="var(--cinnabar)">离</text>
</g>
<text class="node-meta" x="230" y="55">宣明者 · 火</text>
<!-- 坤 ☷ 西南·地 藏守者(承载稳定/铜)pos (325,135) -->
<g transform="translate(325,135)">
<circle class="node-bg" r="30" />
<circle class="node-ring" r="30" stroke="var(--patina)" />
<!-- 坤 [0,0,0] -->
<rect class="trigram-bar" x="-13" y="-15" width="11" height="4" rx="1"/><rect class="trigram-bar" x="2" y="-15" width="11" height="4" rx="1"/>
<rect class="trigram-bar" x="-13" y="-8" width="11" height="4" rx="1"/><rect class="trigram-bar" x="2" y="-8" width="11" height="4" rx="1"/>
<rect class="trigram-bar" x="-13" y="-1" width="11" height="4" rx="1"/><rect class="trigram-bar" x="2" y="-1" width="11" height="4" rx="1"/>
<text class="node-name" y="16" fill="var(--patina)">坤</text>
</g>
<text class="node-meta" x="372" y="120">藏守者 · 地</text>
<!-- 兑 ☱ 西·泽 应和者(承载稳定/铜)pos (365,230) -->
<g transform="translate(365,230)">
<circle class="node-bg" r="30" />
<circle class="node-ring" r="30" stroke="var(--patina)" />
<!-- 兑 [0,1,1]: 破-整-整 -->
<rect class="trigram-bar" x="-13" y="-15" width="11" height="4" rx="1"/><rect class="trigram-bar" x="2" y="-15" width="11" height="4" rx="1"/>
<rect class="trigram-bar" x="-13" y="-8" width="26" height="4" rx="1"/>
<rect class="trigram-bar" x="-13" y="-1" width="26" height="4" rx="1"/>
<text class="node-name" y="16" fill="var(--patina)">兑</text>
</g>
<text class="node-meta" x="412" y="234">应和者 · 泽</text>
<!-- 乾 ☰ 西北·天 造物者(认知方向/金)pos (325,325) -->
<g transform="translate(325,325)">
<circle class="node-bg" r="30" />
<circle class="node-ring" r="30" stroke="var(--gilt)" />
<!-- 乾 [1,1,1] -->
<rect class="trigram-bar" x="-13" y="-15" width="26" height="4" rx="1"/>
<rect class="trigram-bar" x="-13" y="-8" width="26" height="4" rx="1"/>
<rect class="trigram-bar" x="-13" y="-1" width="26" height="4" rx="1"/>
<text class="node-name" y="16" fill="var(--gilt)">乾</text>
</g>
<text class="node-meta" x="372" y="345">造物者 · 天</text>
<!-- 坎 ☵ 北·水 司险者(边界风险/石)pos (230,365) -->
<g transform="translate(230,365)">
<circle class="node-bg" r="30" />
<circle class="node-ring" r="30" stroke="var(--slate)" />
<!-- 坎 [1,0,1]: 整-破-整 -->
<rect class="trigram-bar" x="-13" y="-15" width="26" height="4" rx="1"/>
<rect class="trigram-bar" x="-13" y="-8" width="11" height="4" rx="1"/><rect class="trigram-bar" x="2" y="-8" width="11" height="4" rx="1"/>
<rect class="trigram-bar" x="-13" y="-1" width="26" height="4" rx="1"/>
<text class="node-name" y="16" fill="var(--slate)">坎</text>
</g>
<text class="node-meta" x="230" y="412">司险者 · 水</text>
<!-- 艮 ☶ 东北·山 止守者(边界风险/石)pos (135,325) -->
<g transform="translate(135,325)">
<circle class="node-bg" r="30" />
<circle class="node-ring" r="30" stroke="var(--slate)" />
<!-- 艮 [1,0,0]: 整-破-破 -->
<rect class="trigram-bar" x="-13" y="-15" width="26" height="4" rx="1"/>
<rect class="trigram-bar" x="-13" y="-8" width="11" height="4" rx="1"/><rect class="trigram-bar" x="2" y="-8" width="11" height="4" rx="1"/>
<rect class="trigram-bar" x="-13" y="-1" width="11" height="4" rx="1"/><rect class="trigram-bar" x="2" y="-1" width="11" height="4" rx="1"/>
<text class="node-name" y="16" fill="var(--slate)">艮</text>
</g>
<text class="node-meta" x="88" y="345">止守者 · 山</text>
<!-- 震 ☳ 东·雷 启行者(行动表达/朱)pos (95,230) -->
<g transform="translate(95,230)">
<circle class="node-bg" r="30" />
<circle class="node-ring" r="30" stroke="var(--cinnabar)" />
<!-- 震 [0,0,1]: 破-破-整 -->
<rect class="trigram-bar" x="-13" y="-15" width="11" height="4" rx="1"/><rect class="trigram-bar" x="2" y="-15" width="11" height="4" rx="1"/>
<rect class="trigram-bar" x="-13" y="-8" width="11" height="4" rx="1"/><rect class="trigram-bar" x="2" y="-8" width="11" height="4" rx="1"/>
<rect class="trigram-bar" x="-13" y="-1" width="26" height="4" rx="1"/>
<text class="node-name" y="16" fill="var(--cinnabar)">震</text>
</g>
<text class="node-meta" x="48" y="234">启行者 · 雷</text>
<!-- 巽 ☴ 东南·风 探微者(认知方向/金)pos (135,135) -->
<g transform="translate(135,135)">
<circle class="node-bg" r="30" />
<circle class="node-ring" r="30" stroke="var(--gilt)" />
<!-- 巽 [1,1,0]: 整-整-破 -->
<rect class="trigram-bar" x="-13" y="-15" width="26" height="4" rx="1"/>
<rect class="trigram-bar" x="-13" y="-8" width="26" height="4" rx="1"/>
<rect class="trigram-bar" x="-13" y="-1" width="11" height="4" rx="1"/><rect class="trigram-bar" x="2" y="-1" width="11" height="4" rx="1"/>
<text class="node-name" y="16" fill="var(--gilt)">巽</text>
</g>
<text class="node-meta" x="88" y="120">探微者 · 风</text>
<!-- 中心太极 + 灵核 -->
<circle class="center-disc" cx="230" cy="230" r="40" />
<circle class="center-yang" cx="230" cy="230" r="35" />
<path class="center-yin" d="M 230,195 A 35,35 0 0,1 230,265 A 17.5,17.5 0 0,1 230,230 A 17.5,17.5 0 0,0 230,195 Z" />
<circle class="center-yang" cx="230" cy="247.5" r="5.5" />
<circle class="center-yin" cx="230" cy="212.5" r="5.5" />
</svg>
</div>
</div>
</section>
<!-- ═══ 八卦详注 ═══ -->
<section>
<h3 class="section-heading">八卦详注</h3>
<div class="bagua-detail">
<!-- 认知与方向 -->
<div class="bg-group g1">
<div class="bg-group-head"><span class="bg-group-name">认知与方向</span><span class="bg-group-tag">cognition · direction</span></div>
<div class="bg-tri">
<div class="bg-tri-glyph">
<svg viewBox="0 0 30 26"><rect x="2" y="3" width="26" height="4" rx="1" fill="var(--gilt)"/><rect x="2" y="11" width="26" height="4" rx="1" fill="var(--gilt)"/><rect x="2" y="19" width="26" height="4" rx="1" fill="var(--gilt)"/></svg>
<span class="bg-tri-name">乾</span>
</div>
<div class="bg-tri-body">
<div class="bg-tri-role">造物者<span class="bg-tri-map">☰ 天 · 西北 · 太一目标代理</span></div>
<div class="bg-tri-duty">目标生成、优先级判断、方向引领。</div>
<div class="bg-tri-behave">分解长期目标 → 设定里程碑 → 调度子目标</div>
</div>
</div>
<div class="bg-tri">
<div class="bg-tri-glyph">
<svg viewBox="0 0 30 26"><rect x="2" y="3" width="26" height="4" rx="1" fill="var(--gilt)"/><rect x="2" y="11" width="26" height="4" rx="1" fill="var(--gilt)"/><rect x="2" y="19" width="11" height="4" rx="1" fill="var(--gilt)"/><rect x="17" y="19" width="11" height="4" rx="1" fill="var(--gilt)"/></svg>
<span class="bg-tri-name">巽</span>
</div>
<div class="bg-tri-body">
<div class="bg-tri-role">探微者<span class="bg-tri-map">☴ 风 · 东南 · 烛照/神识感知代理</span></div>
<div class="bg-tri-duty">信息搜集、细粒度探查、搜索。</div>
<div class="bg-tri-behave">搜索缺失信息 → 穿透细节 → 填充知识盲区</div>
</div>
</div>
</div>
<!-- 行动与表达 -->
<div class="bg-group g2">
<div class="bg-group-head"><span class="bg-group-name">行动与表达</span><span class="bg-group-tag">action · expression</span></div>
<div class="bg-tri">
<div class="bg-tri-glyph">
<svg viewBox="0 0 30 26"><rect x="2" y="3" width="11" height="4" rx="1" fill="var(--cinnabar)"/><rect x="17" y="3" width="11" height="4" rx="1" fill="var(--cinnabar)"/><rect x="2" y="11" width="11" height="4" rx="1" fill="var(--cinnabar)"/><rect x="17" y="11" width="11" height="4" rx="1" fill="var(--cinnabar)"/><rect x="2" y="19" width="26" height="4" rx="1" fill="var(--cinnabar)"/></svg>
<span class="bg-tri-name">震</span>
</div>
<div class="bg-tri-body">
<div class="bg-tri-role">启行者<span class="bg-tri-map">☳ 雷 · 东 · 百工/洛书行动代理</span></div>
<div class="bg-tri-duty">任务启动、事件触发、行动推进。</div>
<div class="bg-tri-behave">发起工具调用 → 触发流程 → 推动任务前进</div>
</div>
</div>
<div class="bg-tri">
<div class="bg-tri-glyph">
<svg viewBox="0 0 30 26"><rect x="2" y="3" width="11" height="4" rx="1" fill="var(--cinnabar)"/><rect x="17" y="3" width="11" height="4" rx="1" fill="var(--cinnabar)"/><rect x="2" y="11" width="26" height="4" rx="1" fill="var(--cinnabar)"/><rect x="2" y="19" width="11" height="4" rx="1" fill="var(--cinnabar)"/><rect x="17" y="19" width="11" height="4" rx="1" fill="var(--cinnabar)"/></svg>
<span class="bg-tri-name">离</span>
</div>
<div class="bg-tri-body">
<div class="bg-tri-role">宣明者<span class="bg-tri-map">☲ 火 · 南 · 言灵表达代理</span></div>
<div class="bg-tri-duty">输出呈现、可视化、解释沟通。</div>
<div class="bg-tri-behave">组织语言 → 生成可视化 → 解释系统决策</div>
</div>
</div>
</div>
<!-- 承载与稳定 -->
<div class="bg-group g3">
<div class="bg-group-head"><span class="bg-group-name">承载与稳定</span><span class="bg-group-tag">bearing · stability</span></div>
<div class="bg-tri">
<div class="bg-tri-glyph">
<svg viewBox="0 0 30 26"><rect x="2" y="3" width="11" height="4" rx="1" fill="var(--patina)"/><rect x="17" y="3" width="11" height="4" rx="1" fill="var(--patina)"/><rect x="2" y="11" width="11" height="4" rx="1" fill="var(--patina)"/><rect x="17" y="11" width="11" height="4" rx="1" fill="var(--patina)"/><rect x="2" y="19" width="11" height="4" rx="1" fill="var(--patina)"/><rect x="17" y="19" width="11" height="4" rx="1" fill="var(--patina)"/></svg>
<span class="bg-tri-name">坤</span>
</div>
<div class="bg-tri-body">
<div class="bg-tri-role">藏守者<span class="bg-tri-map">☷ 地 · 西南 · 息壤记忆代理</span></div>
<div class="bg-tri-duty">记忆承载、状态保持、事实基线。</div>
<div class="bg-tri-behave">整理记忆 → 维护世界模型基线 → 确保信息不丢</div>
</div>
</div>
<div class="bg-tri">
<div class="bg-tri-glyph">
<svg viewBox="0 0 30 26"><rect x="2" y="3" width="11" height="4" rx="1" fill="var(--patina)"/><rect x="17" y="3" width="11" height="4" rx="1" fill="var(--patina)"/><rect x="2" y="11" width="26" height="4" rx="1" fill="var(--patina)"/><rect x="2" y="19" width="26" height="4" rx="1" fill="var(--patina)"/></svg>
<span class="bg-tri-name">兑</span>
</div>
<div class="bg-tri-body">
<div class="bg-tri-role">应和者<span class="bg-tri-map">☱ 泽 · 西 · 灵核关系代理</span></div>
<div class="bg-tri-duty">交互愉悦、情绪共鸣、陪伴反馈。</div>
<div class="bg-tri-behave">感知情绪 → 匹配语气节奏 → 维系对话温度</div>
</div>
</div>
</div>
<!-- 边界与风险 -->
<div class="bg-group g4">
<div class="bg-group-head"><span class="bg-group-name">边界与风险</span><span class="bg-group-tag">boundary · risk</span></div>
<div class="bg-tri">
<div class="bg-tri-glyph">
<svg viewBox="0 0 30 26"><rect x="2" y="3" width="26" height="4" rx="1" fill="var(--slate)"/><rect x="2" y="11" width="11" height="4" rx="1" fill="var(--slate)"/><rect x="17" y="11" width="11" height="4" rx="1" fill="var(--slate)"/><rect x="2" y="19" width="26" height="4" rx="1" fill="var(--slate)"/></svg>
<span class="bg-tri-name">坎</span>
</div>
<div class="bg-tri-body">
<div class="bg-tri-role">司险者<span class="bg-tri-map">☵ 水 · 北 · 司命风控代理</span></div>
<div class="bg-tri-duty">风险评估、不确定性分析、失败预案。</div>
<div class="bg-tri-behave">评估候选风险 → 识别不确定性 → 提出备选方案</div>
</div>
</div>
<div class="bg-tri">
<div class="bg-tri-glyph">
<svg viewBox="0 0 30 26"><rect x="2" y="3" width="26" height="4" rx="1" fill="var(--slate)"/><rect x="2" y="11" width="11" height="4" rx="1" fill="var(--slate)"/><rect x="17" y="11" width="11" height="4" rx="1" fill="var(--slate)"/><rect x="2" y="19" width="11" height="4" rx="1" fill="var(--slate)"/><rect x="17" y="19" width="11" height="4" rx="1" fill="var(--slate)"/></svg>
<span class="bg-tri-name">艮</span>
</div>
<div class="bg-tri-body">
<div class="bg-tri-role">止守者<span class="bg-tri-map">☶ 山 · 东北 · 司命边界代理</span></div>
<div class="bg-tri-duty">停止、拒绝、权限节制、冲突回避。</div>
<div class="bg-tri-behave">检查权限 → 拒绝越界请求 → 避免冲突升级</div>
</div>
</div>
</div>
</div>
</section>
<!-- 状态注脚 -->
<div class="vision-strip">
<span class="seal">愿景边界</span>
<span class="desc">四象(认知循环)已作为命名层落地;八卦(<code>天工阁</code> 八原型)属 v2 多智能体愿景,数据结构 <code>agent_roster</code> / <code>agent_role</code> 已在 v1 预留,八原型可逐步作为角色模板进入治理配置。九角色为工程分工,八卦为其人格底色,一角色可兼多卦。</span>
<span class="tag">v2 愿景 · 已预留</span>
</div>
</div>
</div>
</div>
<script src="_theme.js" defer></script>
</body>
</html>