/* ==========================================================================
   base.css — 设计系统 / 变量 / 排版 / 基础元件
   配色与版式令牌取自《明日方舟：终末地》官网样式表
   （https://web.hycdn.cn/endfield/official-v4/_next/static/css/...css）
   官网为「白底 + 黑 + 亮黄 #fffa00」的企业识别体系，本站沿用同一套令牌。
   ========================================================================== */

:root{
  /* —— 官网主色：亮黄 —— */
  --yl-0:#ffff21;   /* 高光黄 */
  --yl-1:#fffa00;   /* 主黄（官网出现 21 次，主色） */
  --yl-2:#fff500;
  --yl-3:#efe701;   /* 暗黄 */
  --yl-4:#e6de01;   /* 更深黄，用于描边 / 悬停 */
  --yl-glow:0 0 10px #fff000;   /* 官网的激活发光 */

  /* —— 官网强调色（进度条 / 色带）—— */
  --mg-1:#ff1aac;   /* 洋红 */
  --gn-1:#00ffa2;   /* 青绿 */

  /* —— 官网黑系（界面主体色）—— */
  --bk-0:#0d0d0d;
  --bk-1:#131315;   /* 导航壳底色 */
  --bk-2:#141414;
  --bk-3:#191919;   /* 正文黑（官网出现 21 次） */
  --bk-4:#1f1f22;   /* 斜条纹底色 */
  --bk-5:#282828;

  /* —— 官网灰系（描边 / 次级元素）—— */
  --gy-0:#35373c;   /* 导航壳描边、箭头色（10 次） */
  --gy-1:#414348;   /* 未激活进度块 */
  --gy-2:#424242;
  --gy-3:#6d6d6d;   /* 官网装饰线 rgba(109,109,109,.5) 的实色 */
  --gy-4:#b2b2b2;   /* 刻度线 */
  --gy-5:#d9d9d9;
  --gy-6:#e6e6e6;
  --gy-7:#f0f0f0;   /* 官网浅底块 */
  --gy-8:#fafafa;   /* 官网按钮白 */

  /* —— 语义映射 —— */
  --bg-0:var(--bk-0);
  --bg-1:var(--bk-1);
  --bg-2:var(--bk-2);
  --bg-3:var(--bk-4);
  --bg-glass:rgba(19,19,21,.86);
  --bg-glass-2:rgba(13,13,13,.92);
  --bg-panel:#f0f0f0;        /* 官网浅色块 */

  --tx-0:#ffffff;
  --tx-1:#d9d9d9;
  --tx-2:#999999;            /* 官网次级文字色 */
  --tx-3:#6d6d6d;

  --ln-0:rgba(255,250,0,.55);
  --ln-1:rgba(255,250,0,.22);
  --ln-2:rgba(109,109,109,.5);   /* 官网装饰线 */
  --ln-3:rgba(109,109,109,.22);
  --ln-mg:rgba(255,26,172,.5);

  /* —— 胶囊形圆角（官网导航壳 50%）—— */
  --r-pill:999px;
  --r-0:2px;
  --r-1:4px;

  /* —— 字体：官网拉丁字为 Gilroy / Novecentosanswide，
        中文走系统栈；此处保持同等观感的可用替代 —— */
  --f-display:'Novecentosanswide','Rajdhani','Noto Sans SC',system-ui,sans-serif;
  --f-head:'Rajdhani','Noto Sans SC',system-ui,sans-serif;
  --f-body:'Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono','SFMono-Regular',Consolas,'Noto Sans SC',monospace;

  --wrap:1280px;
  --gut:clamp(18px,4vw,56px);
  --sec-y:clamp(72px,11vh,140px);

  --e-out:cubic-bezier(.16,.84,.28,1);
  --e-io:cubic-bezier(.65,.02,.28,1);

  --nav-h:64px;
  --tel-h:34px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,dl,dd,figure,pre,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,canvas{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
b,strong{font-weight:600}
::selection{background:var(--yl-1);color:var(--bk-3)}

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

body{
  background:var(--bg-0);
  color:var(--tx-1);
  font-family:var(--f-body);
  font-weight:300;
  font-size:clamp(14px,1.02vw,15.5px);
  line-height:1.85;
  letter-spacing:.02em;
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 深色底衬：粒子舞台之后的兜底背景 */
body::before{
  content:'';
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1100px 640px at 76% 16%, rgba(255,250,0,.055), transparent 62%),
    radial-gradient(760px 520px at 14% 82%, rgba(255,26,172,.045), transparent 60%),
    linear-gradient(180deg,#0d0d0d 0%,#131315 46%,#0d0d0d 100%);
}

body::-webkit-scrollbar{width:10px}
body::-webkit-scrollbar-track{background:var(--bk-0)}
body::-webkit-scrollbar-thumb{
  background:var(--gy-0);
  border:3px solid var(--bk-0);border-radius:10px;
}
body::-webkit-scrollbar-thumb:hover{background:var(--yl-3)}

.a11y-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 排版 ---------- */
h1,h2,h3,h4{
  font-family:var(--f-head);
  color:var(--tx-0);
  font-weight:600;
  line-height:1.25;
  letter-spacing:.04em;
}

.sec__head{margin-bottom:clamp(28px,4vw,52px);position:relative}
.sec__no{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.36em;
  color:var(--bk-3);
  background:var(--yl-1);
  display:inline-block;
  padding:2px 10px;
  margin-bottom:14px;
}
.sec__title{
  font-size:clamp(26px,3.4vw,44px);
  display:flex;
  align-items:baseline;
  gap:18px;
  flex-wrap:wrap;
}
.sec__title::after{
  content:'';
  flex:1;
  min-width:40px;
  height:1px;
  background:linear-gradient(90deg,var(--ln-2),transparent);
  transform:translateY(-6px);
}
.sec__en{
  font-family:var(--f-display);
  font-size:clamp(10px,1vw,12px);
  font-weight:400;
  letter-spacing:.34em;
  color:var(--tx-3);
  white-space:nowrap;
}
.sec__lede{
  margin-top:18px;
  max-width:74ch;
  color:var(--tx-1);
  font-size:clamp(14px,1.1vw,16px);
  line-height:1.95;
}

p+p{margin-top:.9em}

/* ---------- 容器 / 网格 ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.grid{display:grid;gap:clamp(14px,1.5vw,22px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--mt{margin-top:clamp(14px,1.5vw,22px)}
.grid--wide{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}

/* ---------- 面板（官网浅色块 #f0f0f0 在黑底上的对偶用法） ---------- */
.panel{
  position:relative;
  padding:clamp(20px,2.4vw,32px);
  background:linear-gradient(160deg,rgba(31,31,34,.92),rgba(13,13,13,.95));
  border:1px solid var(--ln-2);
  box-shadow:0 0 .625rem rgba(2,2,2,.3);
}
/* 官网标志性装饰：左上 / 右下的直角括号 */
.panel::before{
  content:'';
  position:absolute;left:-1px;top:-1px;width:18px;height:18px;
  border-left:3px solid var(--yl-1);border-top:3px solid var(--yl-1);
}
.panel::after{
  content:'';
  position:absolute;right:-1px;bottom:-1px;width:18px;height:18px;
  border-right:3px solid var(--yl-1);border-bottom:3px solid var(--yl-1);
}
.panel--full{grid-column:1/-1}
.panel__t{
  font-family:var(--f-head);
  font-size:clamp(17px,1.55vw,21px);
  color:var(--tx-0);
  margin-bottom:16px;
  font-weight:500;
  line-height:1.6;
}
.panel__t--sm{font-size:clamp(14px,1.2vw,16px);letter-spacing:.14em;color:var(--yl-1)}
.panel__t--sm::before{content:'// ';color:var(--tx-3)}
.panel__note{
  margin-top:16px;
  padding-top:14px;
  border-top:1px dashed var(--ln-3);
  font-size:12.5px;
  color:var(--tx-3);
  line-height:1.8;
}

/* ---------- 键值表 ---------- */
.kv{display:grid;gap:0}
.kv>div{
  display:grid;
  grid-template-columns:minmax(88px,120px) 1fr;
  gap:14px;
  padding:11px 0;
  border-bottom:1px solid var(--ln-3);
}
.kv>div:last-child{border-bottom:0}
.kv dt{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  color:var(--tx-3);
  text-transform:uppercase;
  padding-top:3px;
}
.kv dd{color:var(--tx-0);font-weight:400;font-size:14.5px}
.ok{color:var(--gn-1)}
.ok::before{content:'● ';font-size:9px;vertical-align:middle}

/* ---------- 列表 ---------- */
.list{display:grid;gap:10px}
.list li{position:relative;padding-left:20px;color:var(--tx-1)}
.list li::before{
  content:'';
  position:absolute;left:2px;top:.78em;
  width:8px;height:3px;
  background:var(--yl-1);
}
/* ---------- 按钮（官网：白底黑字胶囊 / 黄底黑字） ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 30px;
  font-family:var(--f-head);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.16em;
  border:1px solid var(--ln-2);
  border-radius:var(--r-pill);
  background:var(--bk-4);
  color:var(--tx-0);
  cursor:pointer;
  overflow:hidden;
  transition:background .3s var(--e-out),color .3s var(--e-out),border-color .3s var(--e-out),transform .2s var(--e-out),box-shadow .3s var(--e-out);
}
.btn:hover{border-color:var(--yl-1);color:var(--yl-1)}
.btn:active{transform:translateY(1px)}
.btn--primary{
  color:var(--bk-3);
  background:var(--yl-1);
  border-color:var(--yl-1);
}
.btn--primary:hover{
  color:var(--bk-3);
  background:var(--yl-0);
  border-color:var(--yl-0);
  box-shadow:var(--yl-glow);
}
.btn--ghost{background:transparent;border-color:var(--gy-0)}
.btn--ghost:hover{border-color:var(--yl-1);color:var(--yl-1);background:rgba(255,250,0,.06)}

/* ---------- 卡片 / 模块 ---------- */
.card,.module{
  position:relative;
  padding:clamp(18px,2vw,26px);
  background:linear-gradient(165deg,rgba(31,31,34,.9),rgba(13,13,13,.94));
  border:1px solid var(--ln-3);
  transition:border-color .35s var(--e-out),transform .35s var(--e-out),background .35s var(--e-out);
}
.card:hover,.module:hover{
  border-color:var(--ln-1);
  transform:translateY(-3px);
  background:linear-gradient(165deg,rgba(40,40,40,.94),rgba(13,13,13,.96));
}
/* 左缘的黄条：官网色带的单体化 */
.card::before,.module::before{
  content:'';
  position:absolute;left:0;top:0;
  width:3px;height:0;
  background:var(--yl-1);
  transition:height .45s var(--e-out);
}
.card:hover::before,.module:hover::before{height:56%}
.card__i{
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.28em;
  color:var(--yl-3);
  display:block;
  margin-bottom:12px;
}
.card h3{font-size:clamp(15px,1.25vw,17px);margin-bottom:10px;font-weight:500}
.card p{font-size:13.6px;color:var(--tx-1);line-height:1.9}
.card__tag{
  display:inline-block;
  margin-top:16px;
  padding:3px 10px;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.2em;
  color:var(--yl-1);
  border:1px solid var(--ln-1);
  border-radius:var(--r-pill);
  background:rgba(255,250,0,.06);
}

.module header{
  display:flex;align-items:baseline;gap:10px;margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px solid var(--ln-3);
}
.module header span{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;color:var(--tx-3);
}
.module header b{font-family:var(--f-head);font-size:16px;color:var(--tx-0);font-weight:600}
.module p{font-size:13.6px}

/* ---------- 引言（官网黑底白字大字报式） ---------- */
.quote{
  position:relative;
  margin-bottom:clamp(24px,3vw,44px);
  padding:clamp(22px,3vw,40px) clamp(22px,3.4vw,52px);
  background:var(--bk-3);
  border-left:4px solid var(--yl-1);
}
.quote p{
  font-family:var(--f-head);
  font-size:clamp(17px,2vw,26px);
  line-height:1.75;
  color:var(--tx-0);
  font-weight:300;
  letter-spacing:.05em;
}
.quote::after{
  content:'';
  position:absolute;right:clamp(18px,4vw,54px);bottom:0;
  width:24.5rem;max-width:46%;height:4px;
  background:linear-gradient(90deg,var(--mg-1) 0 33%,var(--gn-1) 0 66%,var(--yl-1) 0);
}

/* ---------- 统计块 ---------- */
.stat{
  padding:clamp(16px,1.8vw,24px);
  border:1px solid var(--ln-3);
  background:linear-gradient(170deg,rgba(31,31,34,.86),rgba(13,13,13,.94));
  text-align:left;
}
.stat b{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(18px,2vw,26px);
  font-weight:700;
  color:var(--yl-1);
  letter-spacing:.04em;
  text-shadow:var(--yl-glow);
}
.stat i{
  display:block;
  margin-top:8px;
  font-style:normal;
  font-size:11.5px;
  letter-spacing:.16em;
  color:var(--tx-3);
}

/* ---------- 时间轴 ---------- */
.timeline{position:relative;padding-left:clamp(22px,3vw,42px)}
.timeline::before{
  content:'';
  position:absolute;left:5px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,var(--yl-1),var(--ln-2) 40%,transparent);
}
.timeline li{position:relative;padding:0 0 clamp(22px,3vw,36px)}
.timeline li::before{
  content:'';
  position:absolute;left:calc(-1 * clamp(22px,3vw,42px) + 2px);top:9px;
  width:8px;height:8px;
  background:var(--yl-1);
}
.timeline li:last-child{padding-bottom:0}
.timeline__t{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.22em;
  color:var(--yl-3);
  display:block;
  margin-bottom:8px;
}
.timeline h3{font-size:clamp(15px,1.3vw,18px);margin-bottom:8px;font-weight:500}
.timeline p{font-size:13.8px;max-width:66ch}

/* ---------- 终端 ---------- */
.term{
  font-family:var(--f-mono);
  font-size:12px;
  line-height:2;
  color:var(--tx-1);
  white-space:pre-wrap;
  word-break:break-all;
  min-height:230px;
  max-height:320px;
  overflow:hidden;
}
.term .t-dim{color:var(--tx-3)}
.term .t-am{color:var(--yl-2)}
.term .t-ok{color:var(--gn-1)}
.term .t-rd{color:var(--mg-1)}

/* ---------- 页脚 ---------- */
.foot{
  border-top:1px solid var(--ln-2);
  background:#101010;
  padding:34px 0 calc(var(--tel-h) + 30px);
}
.foot__in{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:12px;color:var(--tx-3);
}
.foot__l b{
  display:block;
  font-family:var(--f-display);
  font-size:14px;letter-spacing:.26em;color:var(--yl-1);
  margin-bottom:6px;
}
.foot__l span,.foot__r span{display:block;line-height:1.9}
.foot__r{text-align:right}

/* ---------- 通用动效 ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .85s var(--e-out),transform .85s var(--e-out)}
[data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}