/* ==========================================================================
   异世界旅行记录 · 阿斯特拉设定档案
   主题：银 + 浅蓝 / 异世界幻想 · 现代魔法
   ========================================================================== */

@font-face{font-family:"Cinzel";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../assets/fonts/cinzel.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:300 600;font-display:swap;
  src:url("../assets/fonts/inter.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:300 500;font-display:swap;
  src:url("../assets/fonts/jetbrains-mono.woff2") format("woff2")}

:root{
  --latin:"Cinzel","Times New Roman",serif;
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --cjk:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC",system-ui,sans-serif;

  --rail:196px;
  --pad:clamp(18px,3vw,50px);
  --radius:10px;
}

/* ---------- 明色：银白 + 浅蓝 ---------- */
html[data-theme="light"]{
  --bg:#eaeff6;
  --bg-2:#dde7f2;
  --panel:rgba(255,255,255,.72);
  --panel-2:rgba(255,255,255,.5);
  --solid:#f9fbfd;
  --line:#c6d4e3;
  --line-soft:#dde6f0;
  --ink:#1d2b39;
  --ink2:#425a70;
  --ink3:#71889e;
  --blue:#3f86c4;
  --blue-l:#7db8e8;
  --blue-soft:rgba(120,175,225,.16);
  --glow:rgba(120,180,230,.30);
  --shadow:0 10px 34px rgba(50,80,115,.14);
  --grid-line:rgba(120,150,185,.20);
  --mote:rgba(150,200,245,.9);
  --card-bg:#ffffff;
}
/* ---------- 暗色：银 + 浅蓝（夜） ---------- */
html[data-theme="dark"]{
  --bg:#0a121e;
  --bg-2:#0d1828;
  --panel:rgba(24,38,56,.62);
  --panel-2:rgba(20,32,48,.45);
  --solid:#101d2e;
  --line:#2b4159;
  --line-soft:#1e3247;
  --ink:#e4eefa;
  --ink2:#a8bed4;
  --ink3:#7590a8;
  --blue:#6fb4e8;
  --blue-l:#a6d8f8;
  --blue-soft:rgba(110,180,235,.14);
  --glow:rgba(110,180,235,.34);
  --shadow:0 12px 38px rgba(0,0,0,.45);
  --grid-line:rgba(120,170,220,.16);
  --mote:rgba(170,215,255,.9);
  --card-bg:#16243a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--cjk);font-size:15px;line-height:1.75;
  overflow:hidden;-webkit-font-smoothing:antialiased;
  transition:background .5s ease,color .5s ease;
}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
b{font-weight:600;color:var(--ink)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.latin{font-family:var(--latin);letter-spacing:.14em}
.dot{color:var(--blue);margin:0 .45em}
.sep{color:var(--ink3);margin:0 .5em}

/* ============================ 背景层 ============================ */
.fx{position:fixed;inset:0;pointer-events:none;z-index:0}
.fx-grid{
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 100% at 50% 0%,#000 20%,transparent 85%);
  opacity:.55;
}
html[data-theme="light"] .fx-grid{opacity:.4}
.fx-bloom{
  background:
    radial-gradient(60% 45% at 74% 22%,var(--glow),transparent 70%),
    radial-gradient(45% 40% at 18% 78%,var(--blue-soft),transparent 72%);
}
.fx-motes i{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--mote);box-shadow:0 0 12px 2px var(--glow);
  opacity:.0;animation:mote 14s linear infinite;
}
.fx-motes i:nth-child(1){left:12%;animation-delay:0s}
.fx-motes i:nth-child(2){left:26%;animation-delay:2.4s;animation-duration:17s}
.fx-motes i:nth-child(3){left:38%;animation-delay:5s}
.fx-motes i:nth-child(4){left:52%;animation-delay:1.2s;animation-duration:19s}
.fx-motes i:nth-child(5){left:64%;animation-delay:7.5s}
.fx-motes i:nth-child(6){left:76%;animation-delay:3.6s;animation-duration:16s}
.fx-motes i:nth-child(7){left:86%;animation-delay:9s}
.fx-motes i:nth-child(8){left:94%;animation-delay:6s;animation-duration:20s}
@keyframes mote{
  0%{transform:translateY(102vh) scale(.6);opacity:0}
  12%{opacity:.85}
  80%{opacity:.5}
  100%{transform:translateY(-8vh) scale(1);opacity:0}
}

/* ============================ 加载页 ============================ */
.loader{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--bg),var(--bg-2));
  transition:opacity .9s ease,visibility .9s ease;
}
.loader.done{opacity:0;visibility:hidden}
.loader-inner{text-align:center;position:relative;z-index:2}
.loader-title{font-family:var(--latin);font-size:clamp(30px,4.6vw,54px);letter-spacing:.28em;color:var(--ink)}
.loader-latin{color:var(--ink3);margin:12px 0 26px;font-size:10px}
.loader-bar{width:min(420px,66vw);height:2px;background:var(--line-soft);margin:0 auto 12px;position:relative;overflow:hidden}
.loader-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--blue-l),var(--blue));transition:width .3s linear}
.loader-sub{color:var(--ink3);font-size:10px}
.rune-ring{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.rune-ring i{
  position:absolute;border-radius:50%;border:1px solid var(--line);
}
.rune-ring i:nth-child(1){width:300px;height:300px;border-style:dashed;animation:spin 40s linear infinite}
.rune-ring i:nth-child(2){width:440px;height:440px;border-color:var(--blue-l);opacity:.5;animation:spin 70s linear infinite reverse}
.rune-ring i:nth-child(3){width:600px;height:600px;border-style:dotted;opacity:.35;animation:spin 110s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================ 顶部栏 ============================ */
.topbar{
  position:fixed;left:0;right:0;top:0;height:52px;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);
  background:linear-gradient(180deg,var(--bg) 30%,transparent);
  border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(6px);
}
.tb-left{display:flex;align-items:baseline;gap:14px}
.tb-mark{font-size:17px;letter-spacing:.16em;font-weight:600}
.tb-sub{color:var(--ink3);font-size:9.5px}
.tb-right{display:flex;align-items:center;gap:16px}
.tb-tag{color:var(--ink3);font-size:9.5px}
.tb-btn{
  background:none;border:1px solid var(--line);color:var(--ink2);
  padding:6px 12px;border-radius:20px;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;transition:.3s;
}
.tb-btn:hover{border-color:var(--blue);color:var(--blue)}

/* ============================ 侧栏 INDEX ============================ */
.rail{
  position:fixed;left:0;top:52px;bottom:0;width:var(--rail);z-index:190;
  padding:40px 0 0 var(--pad);
  border-right:1px solid var(--line-soft);
  background:linear-gradient(90deg,var(--bg) 55%,transparent);
}
.rail-title{font-family:var(--mono);font-size:11px;letter-spacing:.42em;color:var(--ink3);margin-bottom:24px}
.rail li{margin:3px 0}
.rail a{position:relative;display:flex;align-items:center;gap:10px;padding:9px 8px 9px 0;color:var(--ink2);transition:.32s ease}
.rail a::before{
  content:"";position:absolute;left:-14px;top:50%;width:2px;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--blue-l),var(--blue));transition:height .32s ease;
}
.rail a .n{font-size:10px;color:var(--ink3);width:20px;text-align:right}
.rail a .cn{font-size:15px;letter-spacing:.12em}
.rail a .en{font-size:9px;color:var(--ink3);opacity:0;transform:translateX(-5px);transition:.32s ease}
.rail a:hover{color:var(--ink)}
.rail a:hover .en{opacity:1;transform:none}
.rail a.active{color:var(--ink)}
.rail a.active::before{height:22px}
.rail a.active .n{color:var(--blue)}
.rail a.active .en{opacity:1;transform:none}

/* ============================ 底部 ============================ */
.bottombar{
  position:fixed;left:0;right:0;bottom:0;height:48px;z-index:200;
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);
  border-top:1px solid var(--line-soft);pointer-events:none;
  background:linear-gradient(0deg,var(--bg) 35%,transparent);
}
.bb-left{color:var(--ink3);font-size:10px;letter-spacing:.3em;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(3px);opacity:1}}
.bb-arrow{color:var(--blue)}
.bb-right{color:var(--ink3);font-size:11px}
.bb-right span{color:var(--ink2)}

/* ============================ 舞台与分节 ============================ */
#stage{position:fixed;left:var(--rail);right:0;top:52px;bottom:48px;overflow:hidden;z-index:10}
.sec{
  position:absolute;inset:0;padding:var(--pad);
  display:none;flex-direction:column;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .62s cubic-bezier(.2,.7,.2,1);
}
.sec.is-active{display:flex}
.sec.is-shown{opacity:1;transform:none}

.corner{position:absolute;width:18px;height:18px;border:1px solid var(--line);opacity:.8}
.corner.tl{left:12px;top:12px;border-right:0;border-bottom:0}
.corner.tr{right:12px;top:12px;border-left:0;border-bottom:0}
.corner.bl{left:12px;bottom:12px;border-right:0;border-top:0}
.corner.br{right:12px;bottom:12px;border-left:0;border-top:0}

.sec-head{margin-bottom:clamp(14px,2.2vw,28px);flex:0 0 auto}
.micro{color:var(--ink3);font-size:10px;letter-spacing:.28em;margin-bottom:8px}
.sec-title{
  font-size:clamp(26px,3.6vw,44px);line-height:1.15;margin:0;letter-spacing:.06em;font-weight:600;
  background:linear-gradient(100deg,var(--ink) 20%,var(--blue) 130%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sec-desc{color:var(--ink2);font-size:13.5px;margin-top:10px}

.scroll-area{
  flex:1 1 auto;overflow-y:auto;overflow-x:hidden;
  padding-right:14px;padding-bottom:8px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.scroll-area::-webkit-scrollbar{width:8px}
.scroll-area::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.scroll-area::-webkit-scrollbar-track{background:transparent}

/* ============================ 01 首页 ============================ */
#sec-index{justify-content:center}
.hero-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-ring{
  position:absolute;left:70%;top:48%;transform:translate(-50%,-50%);
  border:1px solid var(--line);border-radius:50%;
}
.hero-ring.r1{width:min(62vh,540px);aspect-ratio:1;border-style:dashed;animation:spin 70s linear infinite}
.hero-ring.r2{width:min(88vh,780px);aspect-ratio:1;opacity:.6;animation:spin 120s linear infinite reverse}
.hero-ring.r3{width:min(46vh,400px);aspect-ratio:1;border-color:var(--blue-l);opacity:.5;animation:spin 50s linear infinite}
.hero-orbit{
  position:absolute;left:70%;top:48%;width:min(74vh,660px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--blue-soft),transparent 62%);
}
.hero{position:relative;z-index:2;max-width:min(860px,72vw)}
.hero-title{margin:12px 0 20px;display:flex;flex-direction:column;gap:6px}
.ht-cn{
  font-size:clamp(40px,6.6vw,92px);line-height:1;font-weight:700;letter-spacing:.08em;
  background:linear-gradient(102deg,var(--ink) 10%,var(--blue) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ht-latin{font-family:var(--latin);font-size:clamp(14px,1.7vw,24px);color:var(--ink3);letter-spacing:.42em}
.hero-lead{color:var(--ink2);font-size:clamp(13px,1.1vw,15.5px);line-height:2.1;margin:0 0 22px;max-width:700px}
.hero-meta{display:flex;flex-wrap:wrap;gap:6px 8px;color:var(--ink3);font-size:10px;margin-bottom:24px}
.hero-meta b{color:var(--ink)}

.person-strip{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.ps-card{
  flex:1 1 190px;max-width:260px;padding:14px 16px;border-radius:var(--radius);
  background:var(--card-bg);border:1px solid var(--line);
  box-shadow:var(--shadow);transition:.35s ease;
}
.ps-card:hover{transform:translateY(-3px);border-color:var(--blue-l)}
.ps-role{color:var(--blue);font-size:9.5px;letter-spacing:.2em}
.ps-name{font-size:19px;margin:6px 0 4px;letter-spacing:.08em}
.ps-desc{color:var(--ink3);font-size:12px;line-height:1.7}

.btn-line{
  position:relative;display:inline-flex;align-items:center;gap:14px;
  padding:13px 24px;border-radius:26px;border:1px solid var(--line);
  background:var(--panel);backdrop-filter:blur(8px);transition:.35s ease;overflow:hidden;
}
.btn-line span{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em}
.btn-line i{width:24px;height:1px;background:var(--blue);transition:width .35s ease}
.btn-line:hover{border-color:var(--blue);color:var(--blue);box-shadow:0 8px 26px var(--glow)}
.btn-line:hover i{width:46px}

/* ============================ 通用块 / 卡片 ============================ */
.block{margin-bottom:clamp(18px,2.6vw,34px)}
.block.tight{margin-bottom:16px}
.block-title{
  font-size:17px;letter-spacing:.1em;margin:0 0 14px;font-weight:600;
  display:flex;align-items:center;gap:10px;
}
.block-title::before{content:"";width:16px;height:1px;background:var(--blue)}
.block-title .sub{color:var(--ink3);font-size:10px;letter-spacing:.16em}
.block-lead{color:var(--ink2);font-size:13.5px;line-height:2;margin:0 0 16px;max-width:940px}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,30px);align-items:start;margin-bottom:clamp(18px,2.6vw,32px)}
.stack{display:flex;flex-direction:column;gap:16px}

.figure{
  margin:0;padding:14px;border-radius:var(--radius);
  background:var(--card-bg);border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.figure img{width:100%;height:auto;display:block;border-radius:6px}
.figure figcaption{color:var(--ink3);font-size:10px;margin-top:10px;letter-spacing:.08em}

.fact-list{display:flex;flex-direction:column;gap:10px}
.fact{
  display:grid;grid-template-columns:74px 1fr;gap:4px 14px;
  padding:12px 16px;border-radius:var(--radius);
  background:var(--panel-2);border:1px solid var(--line-soft);
}
.fact .fk{color:var(--blue);font-size:12px;letter-spacing:.1em}
.fact .fv{font-size:14px}
.fact .fd{grid-column:2;color:var(--ink3);font-size:12px;line-height:1.7}

.param-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.param-grid>div{
  padding:12px 14px;border-radius:var(--radius);background:var(--panel-2);
  border:1px solid var(--line-soft);display:flex;flex-direction:column;gap:4px;
}
.param-grid span{color:var(--ink3);font-size:9.5px;letter-spacing:.16em}
.param-grid b{font-size:15px;font-weight:600;color:var(--blue)}

.chip-grid{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:7px 14px;border-radius:20px;background:var(--panel-2);
  border:1px solid var(--line);font-size:12.5px;color:var(--ink2);transition:.3s;
}
.chip:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.chip b{color:var(--ink);margin-right:6px;font-weight:500}

.atlas-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.card-grid.four{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.card-grid.two{grid-template-columns:1fr 1fr}
.card{
  padding:16px 18px;border-radius:var(--radius);
  background:var(--card-bg);border:1px solid var(--line);
  transition:.38s cubic-bezier(.2,.7,.2,1);cursor:default;
}
.card.clickable{cursor:pointer}
.card:hover{transform:translateY(-4px);border-color:var(--blue-l);box-shadow:0 12px 30px var(--glow)}
.card .c-idx{font-family:var(--mono);font-size:9.5px;color:var(--blue);letter-spacing:.18em}
.card .c-cn{font-size:17px;margin:8px 0 2px;letter-spacing:.06em}
.card .c-latin{font-family:var(--latin);font-size:11px;color:var(--ink3);letter-spacing:.2em}
.card .c-desc{color:var(--ink2);font-size:12.5px;line-height:1.85;margin-top:10px}

.fail-list li{
  padding:10px 0 10px 18px;position:relative;font-size:13px;color:var(--ink2);
  border-bottom:1px solid var(--line-soft);
}
.fail-list li::before{content:"";position:absolute;left:0;top:18px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.fail-list li b{color:var(--ink);margin-right:8px;font-weight:600}
.plain-list li{padding:8px 0 8px 16px;position:relative;font-size:13px;color:var(--ink2);line-height:1.9}
.plain-list li::before{content:"";position:absolute;left:0;top:17px;width:4px;height:4px;background:var(--blue-l);border-radius:50%}

.res-list li{
  display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line-soft);
}
.res-list .rn{font-size:14px;color:var(--ink);letter-spacing:.06em}
.res-list .rd{color:var(--ink3);font-size:12.5px;line-height:1.8}

.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);background:var(--card-bg)}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th,.data-table td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--line-soft)}
.data-table thead th{background:var(--blue-soft);color:var(--ink);font-weight:600;letter-spacing:.1em;white-space:nowrap}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:var(--blue-soft)}
.note{color:var(--ink3);font-size:11px;line-height:1.9;margin-top:12px}

.life-strip{display:flex;flex-wrap:wrap;gap:8px}
.life-item{
  flex:1 1 92px;padding:10px 12px;border-radius:8px;text-align:center;
  background:var(--card-bg);border:1px solid var(--line-soft);transition:.3s;
}
.life-item:hover{border-color:var(--blue);background:var(--blue-soft)}
.life-item .lr{font-family:var(--mono);font-size:10px;color:var(--ink3);letter-spacing:.14em}
.life-item .ly{font-size:15px;color:var(--blue);margin-top:4px;font-weight:600}

.race-card{
  padding:14px 16px;border-radius:var(--radius);background:var(--card-bg);
  border:1px solid var(--line);
}
.race-card .rc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.race-card .rc-cn{font-size:16px;letter-spacing:.08em}
.race-card .rc-pct{font-family:var(--mono);font-size:12px;color:var(--blue)}
.race-card .rc-meta{color:var(--ink3);font-size:11.5px;margin-top:6px}
.race-card .rc-desc{color:var(--ink2);font-size:12.5px;line-height:1.8;margin-top:8px}

.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,transparent,var(--line),transparent)}
.timeline li{position:relative;padding:0 0 20px 6px}
.timeline li::before{
  content:"";position:absolute;left:-24px;top:7px;width:9px;height:9px;border-radius:50%;
  background:var(--bg);border:2px solid var(--blue-l);
}
.timeline li.key::before{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
.tl-when{font-family:var(--mono);font-size:10.5px;color:var(--blue);letter-spacing:.1em}
.tl-what{font-size:14.5px;margin:4px 0 3px;letter-spacing:.04em}
.tl-desc{color:var(--ink3);font-size:12.5px;line-height:1.85}

.more-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.more-card{
  display:block;padding:22px;border-radius:var(--radius);
  background:var(--card-bg);border:1px solid var(--line);
  transition:.4s cubic-bezier(.2,.7,.2,1);box-shadow:var(--shadow);
}
.more-card:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:0 16px 38px var(--glow)}
.mc-idx{font-family:var(--mono);font-size:10px;color:var(--ink3);letter-spacing:.2em}
.mc-cn{font-size:21px;margin:12px 0 3px;letter-spacing:.08em}
.mc-latin{font-family:var(--latin);font-size:12px;color:var(--blue);letter-spacing:.24em}
.mc-desc{color:var(--ink2);font-size:12.5px;margin-top:10px;line-height:1.8}
.mc-go{margin-top:14px;color:var(--ink3);font-size:10px;letter-spacing:.2em;transition:.35s}
.more-card:hover .mc-go{color:var(--blue);letter-spacing:.28em}
.site-foot{margin-top:24px;color:var(--ink3);font-size:10px;letter-spacing:.14em;display:flex;gap:.5em;flex-wrap:wrap}

/* ============================ 详情浮层 ============================ */
.overlay{position:fixed;inset:0;z-index:250;display:grid;place-items:center}
.overlay[hidden]{display:none}
.ov-backdrop{position:absolute;inset:0;background:rgba(20,32,46,.42);backdrop-filter:blur(7px);animation:fadeIn .3s ease}
html[data-theme="dark"] .ov-backdrop{background:rgba(4,8,14,.62)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.ov-panel{
  position:relative;width:min(1040px,92vw);max-height:84vh;overflow:auto;
  border-radius:14px;border:1px solid var(--line);
  background:var(--card-bg);box-shadow:var(--shadow);
  display:grid;grid-template-columns:minmax(240px,36%) 1fr;
  animation:ovIn .42s cubic-bezier(.2,.7,.2,1);
}
@keyframes ovIn{from{opacity:0;transform:translateY(20px) scale(.99)}to{opacity:1;transform:none}}
.ov-visual{background:var(--solid);background-size:cover;background-position:center;min-height:400px;position:relative}
.ov-visual .code{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:10px;color:var(--ink3);letter-spacing:.2em}
.ov-body{padding:clamp(20px,2.6vw,36px)}
.ov-micro{color:var(--blue);font-size:10px;letter-spacing:.24em}
.ov-name{font-size:clamp(24px,2.8vw,36px);margin:10px 0 4px;letter-spacing:.08em}
.ov-latin{font-family:var(--latin);font-size:15px;color:var(--ink3);letter-spacing:.28em;margin-bottom:16px}
.ov-rule{height:1px;background:linear-gradient(90deg,var(--blue),transparent);margin-bottom:16px}
.ov-desc{color:var(--ink2);font-size:13.5px;line-height:2;margin:0 0 20px}
.ov-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.ov-field .k{font-family:var(--mono);font-size:9.5px;color:var(--ink3);letter-spacing:.16em}
.ov-field .v{font-size:14px;margin-top:3px}
.ov-bars{display:grid;gap:10px}
.ov-bar{display:grid;grid-template-columns:92px 1fr 40px;gap:12px;align-items:center}
.ov-bar .k{font-size:12px;color:var(--ink2)}
.ov-bar .track{height:3px;border-radius:3px;background:var(--line-soft);overflow:hidden;position:relative}
.ov-bar .track i{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--blue-l),var(--blue));transition:width .9s cubic-bezier(.2,.7,.2,1)}
.ov-bar .n{font-family:var(--mono);font-size:10px;color:var(--ink3);text-align:right}
.ov-close{
  position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);z-index:2;
  padding:11px 22px;border-radius:24px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink2);cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.18em;transition:.3s;
  backdrop-filter:blur(8px);
}
.ov-close span{color:var(--blue);margin-left:8px}
.ov-close:hover{border-color:var(--blue);color:var(--blue)}

/* ============================ 响应式 ============================ */
@media (max-width:1240px){
  .two-col{grid-template-columns:1fr}
  .atlas-grid{grid-template-columns:1fr}
  .hero{max-width:100%}
  .hero-ring,.hero-orbit{left:78%;opacity:.7}
}
@media (max-width:1100px){
  :root{--rail:0px}
  .rail{
    left:0;right:0;top:auto;bottom:0;width:auto;height:58px;padding:0 8px;
    display:flex;align-items:center;border-right:0;border-top:1px solid var(--line);
    background:var(--panel);backdrop-filter:blur(12px);
  }
  .rail-title{display:none}
  .rail ul{display:flex;flex:1;justify-content:space-around}
  .rail a{flex-direction:column;gap:2px;padding:6px;align-items:center}
  .rail a .en{display:none}
  .rail a::before{left:0;right:0;top:auto;bottom:-1px;width:0;height:2px;transition:width .3s}
  .rail a.active::before{width:100%;height:2px}
  #stage{left:0;bottom:58px}
  .bottombar{display:none}
  .ov-panel{grid-template-columns:1fr}
  .ov-visual{min-height:220px}
}
@media (max-width:820px){
  .card-grid.two{grid-template-columns:1fr}
  .fact{grid-template-columns:1fr}
  .fact .fd{grid-column:1}
  .res-list li{grid-template-columns:1fr}
  .hero-meta{font-size:9px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ============================================================================
   ASTRA / SILVER VECTOR PASS
   保留原有的圆环、光点、加载动画和分区交互，只增加更明确的科技档案层次。
   ============================================================================ */

:root{
  --cold-white:#edf4fb;
  --cold-blue:#78b8e8;
  --cold-blue-deep:#3c78b2;
  --silver-blue:#a9c1d6;
  --tech-line:rgba(115,166,207,.34);
  --tech-glow:rgba(96,177,238,.32);
}

html[data-theme="light"]{
  --bg:#e7edf4;
  --bg-2:#cfdce9;
  --panel:rgba(244,249,253,.78);
  --panel-2:rgba(233,242,249,.62);
  --solid:#f5f9fc;
  --line:#aebfd0;
  --line-soft:rgba(122,153,181,.34);
  --ink:#172b40;
  --ink2:#3d5871;
  --ink3:#6e879c;
  --blue:#347db8;
  --blue-l:#83c1ee;
  --blue-soft:rgba(74,145,201,.13);
  --glow:rgba(70,151,213,.28);
  --grid-line:rgba(88,133,170,.18);
  --mote:rgba(57,139,202,.86);
  --card-bg:rgba(247,251,254,.74);
}

html[data-theme="dark"]{
  --bg:#081321;
  --bg-2:#0d2034;
  --panel:rgba(11,29,48,.76);
  --panel-2:rgba(15,38,61,.63);
  --solid:#0d2238;
  --line:#31516d;
  --line-soft:rgba(91,136,172,.31);
  --ink:#e4f0fa;
  --ink2:#a8c2d8;
  --ink3:#6e8fa8;
  --blue:#72b8eb;
  --blue-l:#b4def8;
  --blue-soft:rgba(81,159,217,.16);
  --glow:rgba(67,159,225,.34);
  --grid-line:rgba(88,145,190,.17);
  --mote:rgba(135,211,255,.94);
  --card-bg:rgba(12,31,51,.72);
}

body{
  background:
    radial-gradient(80% 100% at 82% 12%,rgba(107,175,224,.16),transparent 58%),
    radial-gradient(58% 72% at 8% 88%,rgba(145,175,202,.14),transparent 66%),
    linear-gradient(135deg,var(--bg),var(--bg-2));
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.42;
  background:
    linear-gradient(115deg,transparent 0 48%,rgba(255,255,255,.12) 49%,transparent 50% 100%),
    repeating-linear-gradient(0deg,transparent 0 5px,rgba(88,137,177,.04) 6px,transparent 7px);
  mix-blend-mode:soft-light;
}

/* 让原有光点更清晰，但仍从底部缓慢上升。 */
.fx-motes i{
  width:4px;
  height:4px;
  background:var(--mote);
  box-shadow:0 0 5px 1px var(--cold-blue),0 0 18px 4px var(--tech-glow);
}
.fx-motes i:nth-child(2n){width:3px;height:3px}

.fx-bloom{
  opacity:.88;
  background:
    radial-gradient(42% 36% at 76% 22%,var(--tech-glow),transparent 74%),
    radial-gradient(34% 50% at 18% 82%,var(--blue-soft),transparent 74%);
}

.topbar{
  height:60px;
  background:linear-gradient(180deg,rgba(231,237,244,.95),rgba(231,237,244,.54) 72%,transparent);
  border-bottom:1px solid var(--tech-line);
  box-shadow:0 8px 30px rgba(28,73,108,.08);
}
html[data-theme="dark"] .topbar{
  background:linear-gradient(180deg,rgba(7,19,33,.96),rgba(7,19,33,.62) 72%,transparent);
}
.topbar::after{
  content:"";
  position:absolute;
  left:var(--pad);
  right:var(--pad);
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--cold-blue),transparent);
  opacity:.8;
}
.tb-mark{font-size:16px;letter-spacing:.2em;text-shadow:0 0 22px var(--tech-glow)}
.tb-sub{color:var(--blue);letter-spacing:.18em}
.tb-tag{border-left:1px solid var(--line);padding-left:16px}
.tb-btn{border-color:var(--tech-line);background:rgba(255,255,255,.08);box-shadow:inset 0 0 12px rgba(110,180,230,.08)}

.rail{
  top:60px;
  border-right:1px solid var(--tech-line);
  background:linear-gradient(90deg,rgba(226,235,243,.84) 0%,rgba(226,235,243,.47) 66%,transparent 100%);
}
html[data-theme="dark"] .rail{background:linear-gradient(90deg,rgba(7,20,34,.88),rgba(7,20,34,.5) 66%,transparent)}
.rail::after{
  content:"";
  position:absolute;
  top:88px;
  bottom:88px;
  right:-1px;
  width:1px;
  background:linear-gradient(180deg,transparent,var(--cold-blue),transparent);
  opacity:.72;
}
.rail-title{color:var(--blue);letter-spacing:.5em}
.rail a{padding-top:11px;padding-bottom:11px}
.rail a::before{left:-16px;box-shadow:0 0 14px var(--tech-glow)}
.rail a .n{color:var(--blue)}
.rail a.active{font-weight:600}

.bottombar{border-top-color:var(--tech-line);background:linear-gradient(0deg,rgba(224,234,242,.9) 5%,transparent)}
html[data-theme="dark"] .bottombar{background:linear-gradient(0deg,rgba(7,19,33,.92) 5%,transparent)}

#stage{top:60px}
#stage::before{
  content:"";
  position:absolute;
  inset:14px 18px;
  z-index:-1;
  pointer-events:none;
  border:1px solid rgba(112,158,193,.18);
  background:linear-gradient(90deg,transparent 0 49.9%,rgba(118,173,211,.06) 50%,transparent 50.1%);
}
#stage::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:30%;
  height:1px;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--tech-line),transparent);
  opacity:.45;
}

.sec{padding:clamp(26px,3.6vw,58px) clamp(28px,4vw,68px)}
.sec::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(65% 70% at 88% 50%,rgba(97,177,230,.08),transparent 72%);
}
.sec-head{position:relative}
.sec-head::after{
  content:"";
  display:block;
  width:min(260px,42vw);
  height:1px;
  margin-top:17px;
  background:linear-gradient(90deg,var(--cold-blue),transparent);
  box-shadow:0 0 12px var(--tech-glow);
}
.micro{color:var(--blue);text-shadow:0 0 14px var(--tech-glow)}
.sec-title,.ht-cn{
  text-shadow:0 0 30px rgba(93,170,224,.15);
}
.sec-title{
  background:linear-gradient(105deg,var(--ink) 20%,var(--blue) 84%,var(--blue-l));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* 首页的两条主环继续缓慢反向旋转；第三条环和中心光晕作为细节保留。 */
.hero-ring.r1{
  border-color:var(--cold-blue);
  box-shadow:0 0 28px rgba(91,174,230,.12),inset 0 0 22px rgba(91,174,230,.08);
  animation:orbitPrimary 78s linear infinite;
}
.hero-ring.r2{
  border-color:var(--silver-blue);
  box-shadow:0 0 44px rgba(152,194,225,.1);
  animation:orbitSecondary 125s linear infinite reverse;
}
.hero-ring.r3{border-color:var(--blue-l);box-shadow:0 0 20px var(--tech-glow);animation-duration:54s}
.hero-orbit{
  background:
    radial-gradient(circle at 50% 50%,rgba(92,174,228,.18),transparent 52%),
    conic-gradient(from 20deg,transparent 0 18%,rgba(126,198,239,.14) 20%,transparent 25% 70%,rgba(126,198,239,.11) 73%,transparent 78%);
  filter:blur(.2px);
}
@keyframes orbitPrimary{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes orbitSecondary{to{transform:translate(-50%,-50%) rotate(-360deg)}}

.hero{max-width:min(900px,74vw)}
.hero::before{
  content:"ASTRA // DATA STREAM 02";
  position:absolute;
  left:-2px;
  top:-34px;
  color:var(--blue);
  font:10px var(--mono);
  letter-spacing:.22em;
  opacity:.82;
}
.hero-title{margin-top:18px}
.ht-cn{
  background:linear-gradient(104deg,var(--ink) 10%,var(--cold-blue) 74%,var(--blue-l));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-lead{max-width:740px;color:var(--ink2)}
.hero-meta{border-top:1px solid var(--tech-line);border-bottom:1px solid var(--line-soft);padding:12px 0}
.hero-meta b{color:var(--blue)}
.ps-card,.card,.more-card,.figure{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,var(--card-bg),rgba(169,201,224,.12));
  border-color:var(--line);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.23);
}
.ps-card::before,.card::before,.more-card::before,.figure::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:28px;
  height:1px;
  background:var(--cold-blue);
  box-shadow:0 0 12px var(--tech-glow);
}
.ps-card::after,.card::after,.more-card::after,.figure::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:20px;
  height:1px;
  background:var(--line);
}
.ps-card:hover,.card:hover,.more-card:hover,.figure:hover{border-color:var(--cold-blue);box-shadow:var(--shadow),0 0 30px rgba(77,164,222,.18)}
.ps-role,.card .c-idx,.mc-idx{color:var(--blue)}
.btn-line{border-color:var(--tech-line);box-shadow:inset 0 0 18px rgba(94,166,214,.08)}
.btn-line::before{
  content:"";position:absolute;inset:0;transform:translateX(-110%);
  background:linear-gradient(90deg,transparent,rgba(170,221,248,.16),transparent);
  transition:transform .65s ease;
}
.btn-line:hover::before{transform:translateX(110%)}

.fact,.param-grid>div,.chip,.life-item,.race-card{
  background:linear-gradient(145deg,var(--panel-2),rgba(132,181,216,.07));
  border-color:var(--line-soft);
}
.fact:hover,.param-grid>div:hover,.race-card:hover{border-color:var(--cold-blue);box-shadow:0 0 20px rgba(75,159,217,.12)}
.block-title::before{width:26px;background:linear-gradient(90deg,var(--cold-blue),transparent);box-shadow:0 0 10px var(--tech-glow)}
.data-table thead th{background:linear-gradient(90deg,var(--blue-soft),transparent)}
.timeline::before{background:linear-gradient(180deg,transparent,var(--cold-blue),transparent);box-shadow:0 0 12px var(--tech-glow)}
.timeline li.key::before{box-shadow:0 0 0 4px var(--blue-soft),0 0 18px var(--tech-glow)}

.loader{
  background:
    radial-gradient(circle at 50% 46%,rgba(95,177,230,.17),transparent 24%),
    linear-gradient(160deg,var(--bg),var(--bg-2));
}
.loader::before,.loader::after{
  content:"";position:absolute;left:50%;top:50%;width:min(74vw,760px);height:min(74vw,760px);
  border:1px solid rgba(119,184,225,.2);border-radius:50%;transform:translate(-50%,-50%);
  animation:loaderPulse 5s ease-in-out infinite;
}
.loader::after{width:min(54vw,540px);height:min(54vw,540px);border-style:dashed;animation:spin 58s linear infinite reverse}
.loader-title{color:var(--cold-white);text-shadow:0 0 28px var(--tech-glow)}
html[data-theme="light"] .loader-title{color:var(--ink);text-shadow:0 0 24px rgba(82,154,205,.25)}
.loader-bar{height:3px;background:rgba(128,172,204,.22);box-shadow:0 0 18px rgba(76,161,220,.18)}
.loader-bar i{background:linear-gradient(90deg,var(--silver-blue),var(--cold-blue),var(--cold-white));box-shadow:0 0 12px var(--cold-blue)}
.rune-ring i:nth-child(1){border-color:var(--cold-blue);box-shadow:0 0 18px rgba(107,187,235,.16)}
.rune-ring i:nth-child(2){border-color:var(--silver-blue);box-shadow:0 0 26px rgba(142,191,224,.12)}
@keyframes loaderPulse{0%,100%{opacity:.34;transform:translate(-50%,-50%) scale(.98)}50%{opacity:.74;transform:translate(-50%,-50%) scale(1.02)}}

@media (max-width:1100px){
  .topbar{height:54px}
  #stage{top:54px}
  .rail{top:auto}
  .hero::before{display:none}
  .sec{padding-top:16px;padding-bottom:16px}
  .hero-title{margin:4px 0 10px;gap:3px}
  .ht-cn{font-size:clamp(34px,7vw,54px)}
  .ht-latin{font-size:clamp(12px,2.4vw,18px)}
  .hero-lead{font-size:12px;line-height:1.6;margin-bottom:8px}
  .hero-meta{padding:6px 0;margin-bottom:8px;font-size:9px}
  .person-strip{margin-bottom:8px}
  .ps-card{padding:7px 9px}
  .ps-name{font-size:15px;margin:3px 0 1px}
  .ps-desc{font-size:10px;line-height:1.42}
  .btn-line{padding:7px 16px}
}
@media (min-width:621px) and (max-width:1100px){
  .person-strip{gap:10px}
  .ps-card{flex:1 1 0;max-width:none;min-width:0;padding:12px 13px}
  .ps-name{font-size:17px}
  .ps-desc{font-size:11px}
}
@media (max-width:620px){
  .tb-sub,.tb-tag{display:none}
  .tb-mark{font-size:14px}
  .sec{padding:24px 18px}
  #stage::before{inset:10px 8px}
  .hero-ring,.hero-orbit{left:82%;top:40%;opacity:.55}
  .hero-title{margin-top:6px}
  .ht-cn{font-size:clamp(34px,12vw,58px)}
  .hero-meta{gap:5px 6px}
  .person-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .ps-card{padding:8px 7px}
  .ps-name{font-size:14px}
  .ps-desc{font-size:9px;line-height:1.45}
}