:root{
  --bg:#06070c; --bg2:#0b0d16; --panel:rgba(16,18,28,.72);
  --ink:#cdc7b6; --ink-dim:#8f8b7c; --ink-faint:#615e52;
  --gold:#c2a15f; --gold-hi:#e9d193; --gold-dim:rgba(194,161,95,.25);
  --red:#b34a55; --red-hi:#e08a91; --red-dim:rgba(179,74,85,.28);
  --green:#4d8f77; --green-hi:#8fd6b5; --green-dim:rgba(77,143,119,.28);
  --line:rgba(194,161,95,.18);
  --serif:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.9;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:
  radial-gradient(1200px 800px at 70% -10%,rgba(194,161,95,.06),transparent 60%),
  radial-gradient(900px 700px at 8% 108%,rgba(77,143,119,.05),transparent 60%),
  radial-gradient(700px 500px at 92% 55%,rgba(179,74,85,.04),transparent 60%)}
#veil{position:fixed;inset:0;z-index:-1;pointer-events:none}
#thread{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,rgba(194,161,95,.1),var(--gold),var(--gold-hi));
  box-shadow:0 0 8px rgba(233,209,147,.5)}
::selection{background:rgba(194,161,95,.3)}

/* ---- 导航 ---- */
#nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:18px;
  padding:10px 22px;background:rgba(6,7,12,.78);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{font-family:var(--serif);color:var(--gold-hi);text-decoration:none;letter-spacing:.2em;font-size:15px;white-space:nowrap}
.nav-links{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{color:var(--ink-dim);text-decoration:none;font-size:13px;padding:4px 10px;white-space:nowrap;transition:.25s;border-radius:3px}
.nav-links a:hover{color:var(--ink)}
.nav-links a.act{color:var(--gold-hi);background:var(--gold-dim)}

/* ---- 首页 ---- */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:120px 24px 80px;text-align:center;position:relative}
.hero-eyebrow{font-size:12px;letter-spacing:.6em;color:var(--ink-faint);text-indent:.6em;margin-bottom:30px}
.hero-title{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:clamp(34px,7vw,72px);letter-spacing:.08em;position:relative;display:inline-block}
.crack{position:absolute;left:-2%;top:50%;width:104%;height:80px;transform:translateY(-58%);overflow:visible;pointer-events:none}
.crack path{fill:none;stroke:var(--gold);stroke-width:1;opacity:.65;stroke-dasharray:600;stroke-dashoffset:600;animation:drawcrack 2.6s ease .6s forwards}
@keyframes drawcrack{to{stroke-dashoffset:0}}
.hero-sub{margin-top:28px;font-family:var(--serif);font-size:clamp(16px,2.4vw,22px);color:var(--gold);letter-spacing:.14em}
.hero-dim{margin-top:8px;color:var(--ink-faint);font-size:14px;font-style:italic}
.shards{display:flex;gap:22px;justify-content:center;margin:48px 0 6px;flex-wrap:wrap}
.shard{width:10px;height:10px;transform:rotate(45deg);border:1px solid var(--acc,#c2a15f);background:var(--acc,#c2a15f);opacity:.65;box-shadow:0 0 12px var(--acc,#c2a15f);animation:float 5s ease-in-out infinite}
.shard:nth-child(2){animation-delay:-.7s}.shard:nth-child(3){animation-delay:-1.4s}
.shard:nth-child(4){animation-delay:-2.1s}.shard:nth-child(5){animation-delay:-2.8s}
.shard:nth-child(6){animation-delay:-3.5s}.shard:nth-child(7){animation-delay:-4.2s}
@keyframes float{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(-9px)}}
.hero-cta{display:inline-block;margin-top:36px;color:var(--gold);text-decoration:none;font-size:14px;letter-spacing:.3em;border:1px solid var(--gold-dim);padding:10px 34px;transition:.3s}
.hero-cta:hover{border-color:var(--gold);background:var(--gold-dim);color:var(--gold-hi)}
#resume{margin-top:18px}
#resume a{color:var(--green-hi);font-size:13px;text-decoration:none;border-bottom:1px dotted var(--green-dim)}

/* ---- 卷结构 ---- */
.vol{position:relative;padding:110px 24px 60px;max-width:940px;margin:0 auto}
.sec-head{margin-bottom:54px;position:relative}
.sec-num{position:absolute;right:0;top:-16px;font-family:var(--serif);font-size:110px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(194,161,95,.14);user-select:none;pointer-events:none}
.sec-eyebrow{font-size:12px;letter-spacing:.5em;color:var(--ink-faint);margin-bottom:10px}
.sec-title{font-family:var(--serif);font-weight:400;font-size:clamp(26px,4vw,38px);color:var(--ink);letter-spacing:.1em}
.sec-title::after{content:"";display:block;width:64px;height:1px;margin-top:16px;background:linear-gradient(90deg,var(--gold),transparent)}
.sec-sub{margin-top:14px;color:var(--ink-dim);font-size:14px}

/* ---- 通用块 ---- */
.blk-h{font-family:var(--serif);font-weight:400;color:var(--gold-hi);font-size:20px;margin:42px 0 14px;letter-spacing:.08em}
.blk-h::before{content:"◈ ";color:var(--gold);font-size:14px}
.blk-p{font-size:15px;margin:12px 0;max-width:76ch}
.blk-q{font-family:var(--serif);color:var(--gold);border-left:2px solid var(--gold-dim);padding:6px 0 6px 18px;margin:18px 0;font-style:italic;max-width:72ch}
.blk-ul{list-style:none;margin:14px 0;padding:0}
.blk-ul li{position:relative;padding-left:22px;margin:8px 0;font-size:15px;max-width:78ch}
.blk-ul li::before{content:"";position:absolute;left:2px;top:.78em;width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--gold);opacity:.6}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0}
.fstep{border:1px solid var(--line);padding:4px 12px;font-size:13px;background:rgba(16,18,28,.5)}
.farr{color:var(--gold);font-size:12px}
.kv{margin:16px 0;border:1px solid var(--line)}
.kv>div{display:grid;grid-template-columns:180px 1fr;border-bottom:1px solid rgba(194,161,95,.1)}
.kv>div:last-child{border-bottom:none}
.kv dt{padding:12px 16px;color:var(--gold);font-size:14px;font-family:var(--serif)}
.kv dd{padding:12px 16px;font-size:14px}
.tbl-wrap{overflow-x:auto;margin:20px 0;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;font-size:13.5px;background:rgba(11,13,22,.5)}
th{font-family:var(--serif);color:var(--gold);font-weight:400;padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
td{padding:10px 14px;border-bottom:1px solid rgba(194,161,95,.08);vertical-align:top}
tr:last-child td{border-bottom:none}
.callout{margin:22px 0;padding:16px 20px;border:1px solid var(--tone-border);background:var(--tone-bg);max-width:78ch}
.callout strong{display:block;font-family:var(--serif);color:var(--tone-strong);margin-bottom:6px;letter-spacing:.1em}
.callout p{font-size:14px}
.callout.gold{--tone-border:var(--gold-dim);--tone-bg:rgba(194,161,95,.05);--tone-strong:var(--gold-hi)}
.callout.red{--tone-border:var(--red-dim);--tone-bg:rgba(179,74,85,.06);--tone-strong:var(--red-hi)}
.callout.green{--tone-border:var(--green-dim);--tone-bg:rgba(77,143,119,.06);--tone-strong:var(--green-hi)}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin:22px 0}
.cards3 .c{border:1px solid var(--line);padding:22px 20px;background:var(--panel);transition:.3s}
.cards3 .c:hover{border-color:var(--gold);transform:translateY(-3px)}
.cards3 h4{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--ink)}
.cards3 .csub{color:var(--gold);font-size:12px;letter-spacing:.2em;margin:4px 0 12px}
.cards3 p{color:var(--ink-dim);font-size:13.5px}
.bar{margin:26px 0;max-width:78ch}
.bar-fill{height:8px;border-radius:4px;background:linear-gradient(90deg,#0e1018,#1c1a24,#3a2f1e,#6b5426,#c2a15f)}
.bar-ticks{display:flex;justify-content:space-between;margin-top:8px;font-size:11.5px;color:var(--ink-faint);flex-wrap:wrap;gap:4px}
.chip{display:inline-block;font-size:11px;padding:2px 8px;border:1px solid var(--line);color:var(--ink-dim);border-radius:2px;margin:2px 4px 2px 0}
.chip.red{color:var(--red-hi);border-color:var(--red-dim)}
.chip.green{color:var(--green-hi);border-color:var(--green-dim)}

/* ---- 滚动显现 ---- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}

/* ---- 七宗罪 ---- */
.sin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:22px}
.sin-card{border:1px solid var(--line);background:var(--panel);--acc:#c2a15f;position:relative;overflow:hidden;transition:border-color .3s}
.sin-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--acc);opacity:.55}
.sin-card:hover{border-color:var(--acc)}
.sin-front{padding:24px 24px 16px}
.sin-sig{width:52px;height:52px;color:var(--acc);margin-bottom:14px;opacity:.92;filter:drop-shadow(0 0 6px var(--acc))}
.sin-sig svg{width:100%;height:100%}
.sin-kind{font-size:11px;letter-spacing:.4em;color:var(--ink-faint)}
.sin-name{font-family:var(--serif);font-weight:400;font-size:26px;color:var(--ink);margin:4px 0 2px}
.sin-ep{font-size:12.5px;color:var(--gold);letter-spacing:.15em}
.sin-para{font-family:var(--serif);font-style:italic;margin:16px 0 10px;font-size:14.5px;border-left:2px solid var(--acc);padding-left:14px}
.sin-person{color:var(--ink-dim);font-size:13.5px}
.sin-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;padding:12px 24px;border-top:1px solid rgba(194,161,95,.1);color:var(--ink-dim);font-size:12.5px;letter-spacing:.2em;user-select:none;transition:.25s}
.sin-card.open .sin-toggle{color:var(--gold-hi)}
.sin-toggle .arr{transition:transform .3s}
.sin-card.open .sin-toggle .arr{transform:rotate(180deg)}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease}
.acc-body>div{overflow:hidden}
.sin-card.open .acc-body,.be-card.open .acc-body{grid-template-rows:1fr}
@supports not (grid-template-rows:0fr){.acc-body{display:none}.sin-card.open .acc-body,.be-card.open .acc-body{display:block}}
.sin-body-inner{padding:4px 24px 26px}
.sin-card .blk-h{font-size:16px;margin:26px 0 10px;color:var(--acc)}

/* ---- 时间轴 ---- */
.tl{position:relative;padding-left:42px;margin-top:10px}
.tl-rail{position:absolute;left:9px;top:6px;bottom:6px;width:1px;background:rgba(194,161,95,.15)}
.tl-fill{position:absolute;left:9px;top:6px;width:1px;height:0;background:linear-gradient(180deg,var(--gold),var(--gold-hi));box-shadow:0 0 6px rgba(233,209,147,.6)}
.tl-item{position:relative;margin-bottom:46px}
.tl-dot{position:absolute;left:-41px;top:8px;width:19px;height:19px;transform:rotate(45deg);border:1px solid var(--gold);background:var(--bg);box-shadow:0 0 10px rgba(194,161,95,.35)}
.tl-item.piv .tl-dot{border-color:var(--red-hi);box-shadow:0 0 14px rgba(224,138,145,.6);background:rgba(179,74,85,.2)}
.tl-card{border:1px solid var(--line);background:var(--panel);padding:26px 28px;transition:border-color .3s}
.tl-item.piv .tl-card{border-color:var(--red-dim);background:linear-gradient(180deg,rgba(179,74,85,.05),var(--panel))}
.tl-tag{font-size:11px;letter-spacing:.3em;color:var(--ink-faint)}
.tl-title{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--ink);margin:6px 0 2px}
.tl-item.piv .tl-title{color:var(--red-hi)}
.tl-period{font-size:12px;color:var(--gold);letter-spacing:.1em;margin-bottom:12px}

/* ---- 灵质循环环 ---- */
.ring-wrap{position:relative;width:min(360px,86vw);height:min(360px,86vw);margin:34px auto}
.ring-svg{position:absolute;inset:0;width:100%;height:100%}
.ring-svg .orbit{fill:none;stroke:var(--gold-dim);stroke-width:1;stroke-dasharray:3 6}
.ring-svg .rot{animation:rot 60s linear infinite;transform-origin:50% 50%}
@keyframes rot{to{transform:rotate(360deg)}}
.ring-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.ring-core .rc1{font-family:var(--serif);font-size:22px;color:var(--gold-hi);letter-spacing:.2em}
.ring-core .rc2{font-size:11px;color:var(--ink-faint);letter-spacing:.3em;margin-top:2px}
.rnode{position:absolute;transform:translate(-50%,-50%);background:none;border:none;cursor:pointer;padding:10px}
.rn-dot{display:block;width:14px;height:14px;transform:rotate(45deg);border:1px solid var(--gold);background:rgba(194,161,95,.15);transition:.3s}
.rnode:hover .rn-dot,.rnode.act .rn-dot{background:var(--gold);box-shadow:0 0 12px var(--gold)}
.rn-lab{position:absolute;transform:translate(-50%,-50%);font-size:12.5px;color:var(--ink-dim);white-space:nowrap;pointer-events:none;transition:.3s}
.rnode.act .rn-lab{color:var(--gold-hi)}
.ring-detail{max-width:560px;margin:24px auto;border:1px solid var(--line);padding:18px 22px;background:var(--panel)}
.ring-detail h5{font-family:var(--serif);font-weight:400;color:var(--gold-hi);font-size:17px}
.ring-detail .rd-form{font-size:11.5px;color:var(--ink-faint);letter-spacing:.2em;margin:2px 0 10px}
.ring-detail p{font-size:14px}

/* ---- 鬼怪六芒环 ---- */
.hex{position:relative;width:min(480px,92vw);aspect-ratio:1/1;margin:30px auto}
.hex-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80%;aspect-ratio:1/1;border:1px dashed var(--gold-dim);border-radius:50%}
.hex-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.hex-core .hc1{font-family:var(--serif);font-size:21px;color:var(--ink)}
.hex-core .hc2{font-size:11px;color:var(--ink-faint);letter-spacing:.25em}
.hnode{position:absolute;transform:translate(-50%,-50%);text-align:center;cursor:pointer;transition:.25s;width:80px}
.hnode .hl{font-family:var(--serif);font-size:27px;color:var(--gold);line-height:1.1}
.hnode .hn{font-size:12px;color:var(--ink-dim)}
.hnode:hover .hl{color:var(--gold-hi);text-shadow:0 0 10px var(--gold-dim)}
.be-card{border:1px solid var(--line);background:var(--panel);margin:18px 0;--acc:#c2a15f}
.be-card.flash{animation:flash 1.4s ease}
@keyframes flash{0%,55%{border-color:var(--gold);box-shadow:0 0 20px var(--gold-dim)}100%{}}
.be-head{display:flex;gap:18px;align-items:center;padding:20px 22px;cursor:pointer;flex-wrap:wrap}
.be-med{width:54px;height:54px;border:1px solid var(--acc);transform:rotate(45deg);display:flex;align-items:center;justify-content:center;flex:none;margin-right:8px;box-shadow:0 0 10px rgba(0,0,0,.4)}
.be-med span{transform:rotate(-45deg);font-family:var(--serif);font-size:24px;color:var(--acc)}
.be-title h4{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--ink)}
.be-src{font-size:12px;color:var(--ink-dim)}
.be-chips{margin-left:auto}
.be-body-inner{padding:4px 24px 26px}
.be-fld{margin:18px 0}
.be-fld h5{font-family:var(--serif);font-weight:400;color:var(--gold-hi);font-size:15px;letter-spacing:.08em;margin-bottom:6px}
.be-fld p{font-size:14px;margin:6px 0;max-width:80ch}

/* ---- 星图 ---- */
.sm-frame{position:relative;border:1px solid var(--line);background:rgba(8,9,15,.85);margin:26px 0}
#sm-canvas{display:block;width:100%;height:520px;cursor:grab}
#sm-canvas.drag{cursor:grabbing}
.sm-tools{position:absolute;top:10px;right:10px;display:flex;gap:6px}
.sm-tools button{background:rgba(11,13,22,.85);border:1px solid var(--line);color:var(--gold);width:30px;height:30px;font-size:16px;cursor:pointer;line-height:1}
.sm-tools button:hover{border-color:var(--gold)}
.sm-tip{position:fixed;z-index:70;pointer-events:none;background:rgba(8,9,15,.94);border:1px solid var(--gold-dim);padding:6px 10px;font-size:12px;display:none;white-space:nowrap}
.sm-detail{border:1px solid var(--line);background:var(--panel);padding:20px 24px;margin:14px 0;max-width:660px;min-height:70px}
.sm-detail h4{font-family:var(--serif);font-weight:400;color:var(--gold-hi);font-size:19px}
.sm-detail .smd-d{color:var(--ink-dim);font-size:12.5px;margin:4px 0 10px}
.sm-detail p{font-size:14px;margin:6px 0}
.sm-detail .lore{color:var(--green-hi)}

#foot{max-width:940px;margin:0 auto;padding:60px 24px 90px;border-top:1px solid rgba(194,161,95,.1);color:var(--ink-faint);font-size:12.5px;text-align:center;letter-spacing:.1em;line-height:2.2}

@media(max-width:720px){
  .sec-num{font-size:64px;top:-6px}
  .vol{padding:84px 18px 44px}
  .kv>div{grid-template-columns:1fr}
  .kv dt{padding-bottom:0}
  .be-chips{margin-left:0;width:100%}
  #sm-canvas{height:380px}
}
@media (prefers-reduced-motion:reduce){
  .rv{transition:none;opacity:1;transform:none}
  .shard,.ring-svg .rot{animation:none}
  .crack path{animation:none;stroke-dashoffset:0}
}
/* ---- 战争卷 · 月相三联与兵种 ---- */
.war-names{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:26px 0 42px}
.war-name{border:1px solid var(--line);border-top:2px solid var(--acc,#c2a15f);background:var(--panel);padding:24px 18px 18px;text-align:center;transition:.3s}
.war-name:hover{border-color:var(--acc,#c2a15f);transform:translateY(-3px)}
.war-name .micon{display:block;width:34px;height:34px;margin:0 auto 12px;color:var(--acc,#c2a15f);filter:drop-shadow(0 0 7px var(--acc,#c2a15f))}
.war-name .wf{font-size:11px;letter-spacing:.35em;color:var(--ink-faint);text-indent:.35em}
.war-name .wn{font-family:var(--serif);font-size:23px;color:var(--acc,#c2a15f);margin:8px 0 10px;letter-spacing:.12em}
.war-name .wm{font-size:12.5px;color:var(--ink-dim);line-height:1.85}
.unit-fh{color:var(--acc,#c2a15f);border-bottom:1px solid var(--line);padding-bottom:9px}
.unit-fh::before{color:var(--acc,#c2a15f)}
.unit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:12px;margin:16px 0 10px}
.unit-card{border:1px solid var(--line);border-left:2px solid var(--acc,#c2a15f);background:var(--panel);padding:16px 18px 14px;transition:.25s}
.unit-card:hover{border-color:var(--acc,#c2a15f);transform:translateY(-2px)}
.unit-card .unit-role{font-size:10.5px;letter-spacing:.25em;color:var(--acc,#c2a15f)}
.unit-card h4{font-family:var(--serif);font-weight:400;font-size:17px;color:var(--ink);margin:4px 0 8px;letter-spacing:.05em}
.unit-card p{font-size:13px;color:var(--ink-dim);line-height:1.8}