@charset "UTF-8";
/* ==========================================================================
   涪越探宇航天 FUYUE AEROSPACE — 站点样式
   版式参照 spacex.com:纯黑底、白字、发丝分隔线、全出血图版堆叠、
   大写宽字距导航。字体自托管(DINish, OFL),中文走系统字栈,
   全站零外链依赖 —— 国内访问不受 CDN 影响。
   ========================================================================== */

@font-face{font-family:DINish;font-weight:400;font-style:normal;font-display:swap;
  src:url(../fonts/DINish-Regular.woff2) format("woff2")}
@font-face{font-family:DINish;font-weight:500;font-style:normal;font-display:swap;
  src:url(../fonts/DINish-Medium.woff2) format("woff2")}
@font-face{font-family:DINish;font-weight:600;font-style:normal;font-display:swap;
  src:url(../fonts/DINish-SemiBold.woff2) format("woff2")}
@font-face{font-family:DINish;font-weight:700;font-style:normal;font-display:swap;
  src:url(../fonts/DINish-Bold.woff2) format("woff2")}

:root{
  --bg:#000;
  --fg:#fff;
  --rule:rgba(255,255,255,.22);
  --rule-soft:rgba(255,255,255,.10);
  --dim:rgba(255,255,255,.64);
  /* 原 .40 在黑底上对比度只有约 3.5:1,小字不达标;提到 .52 约 4.6:1 */
  --dimmer:rgba(255,255,255,.52);
  --navy:#0b3a8f;
  --sans:"DINish","PingFang SC","Hiragino Sans GB","Microsoft YaHei",
         "Noto Sans CJK SC","Source Han Sans SC",sans-serif;
  --head:66px;
  --pad:clamp(20px,5vw,68px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:16px;line-height:1.62;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,h4,p,figure,table{margin:0}
ul{margin:0;padding:0;list-style:none}

/* --- 双语:纯 CSS 驱动,不靠 JS 渲染;关掉 JS 也能完整读中文 --- */
html[data-lang="zh"] .en,
html[data-lang="en"] .zh{display:none}

/* --- 无障碍 --- */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:300;
  background:#fff;color:#000;padding:10px 18px;font-size:13px;letter-spacing:.14em}
.skip:focus{left:8px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ==========================  排版基元  ========================== */
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--pad)}
.wrap--narrow{max-width:1040px}

.eyebrow{font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--dim);margin-bottom:18px}
.eyebrow .zh{letter-spacing:.2em}

/* 拉丁标题大写 + 宽字距;中文不大写、字距收窄,否则会散 */
.display{font-weight:600;line-height:1.04;font-size:clamp(32px,6vw,78px)}
.display .en{text-transform:uppercase;letter-spacing:.015em}
.display .zh{letter-spacing:.03em}
.h2{font-weight:600;line-height:1.1;font-size:clamp(25px,3.6vw,46px)}
.h2 .en{text-transform:uppercase;letter-spacing:.02em}
.h3{font-weight:600;line-height:1.25;font-size:clamp(18px,1.7vw,23px)}
.h3 .en{text-transform:uppercase;letter-spacing:.06em}
.kicker{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim)}

.lede{font-size:clamp(15px,1.35vw,19px);color:var(--dim);max-width:64ch}
.lede--wide{max-width:82ch}
.body{color:var(--dim);max-width:70ch}
.body + .body{margin-top:14px}

.btn{display:inline-block;border:1px solid #fff;padding:15px 38px;
  font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  background:transparent;color:#fff;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease)}
.btn:hover,.btn:focus-visible{background:#fff;color:#000}
.btn .zh{letter-spacing:.18em}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ==========================  顶栏  ========================== */
.hdr{position:fixed;top:0;left:0;right:0;z-index:120;height:var(--head);
  display:flex;align-items:center;padding:0 var(--pad);
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.hdr::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);pointer-events:none}
.hdr.is-solid{background:rgba(0,0,0,.86);border-bottom:1px solid var(--rule-soft);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hdr.is-solid::after{opacity:0}

.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:30px;width:auto}

.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,1.8vw,28px)}
.nav a{position:relative;padding:8px 0;font-size:13px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--fg)}
.nav a .zh{letter-spacing:.1em}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:#fff;transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.lang{display:flex;align-items:center;gap:8px;margin-left:clamp(12px,1.6vw,24px);
  padding-left:clamp(12px,1.6vw,24px);border-left:1px solid var(--rule)}
.lang button{background:none;border:0;cursor:pointer;padding:4px 2px;
  font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--dimmer);
  transition:color .2s var(--ease)}
.lang button:hover{color:var(--fg)}
.lang button[aria-pressed="true"]{color:var(--fg)}

.burger{display:none;margin-left:auto;width:44px;height:44px;padding:11px 9px;
  background:none;border:0;cursor:pointer}
.burger i{display:block;height:1px;background:#fff;
  transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger i + i{margin-top:6px}
.is-menu .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.is-menu .burger i:nth-child(2){opacity:0}
.is-menu .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ==========================  全出血图版(首页)  ========================== */
.panel{position:relative;display:flex;align-items:flex-end;
  min-height:100vh;min-height:100svh;overflow:hidden;
  padding:calc(var(--head) + 40px) 0 clamp(56px,9vh,110px)}
.panel__media{position:absolute;inset:0;z-index:0}
.panel__media img{width:100%;height:100%;object-fit:cover;object-position:center}
/* 背景视频与图片同规则铺满;video 里的 <img> 是古老浏览器的回落 */
.panel__media video{width:100%;height:100%;object-fit:cover;object-position:center;
  display:block}
/* 图版素材原生上限 1280x720,压暗 + 渐变遮罩既保证文字对比度,也掩盖放大后的软 */
.panel__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.12) 38%,
    rgba(0,0,0,.62) 78%,rgba(0,0,0,.86) 100%)}
.panel__in{position:relative;z-index:1;width:100%}
.panel--center{align-items:center;text-align:center}
.panel--center .lede{margin-left:auto;margin-right:auto}
.panel--center .btn-row{justify-content:center}

/* 透明渲染图版:黑底 + 藏青辉光 + 渲染图占上半屏,文案压在下缘 */
.panel--render{align-items:flex-end}
.panel--render .panel__media{
  background:radial-gradient(58% 60% at 50% 40%,#0d2f6b 0%,#04122e 46%,#000 100%)}
.panel--render .panel__media::after{
  background:radial-gradient(72% 66% at 50% 38%,transparent 0%,rgba(0,0,0,.42) 100%),
             linear-gradient(180deg,transparent 44%,rgba(0,0,0,.78) 86%,#000 100%)}
.panel__art{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;pointer-events:none;padding:var(--head) 0 0}
/* 一律用 max-height 而不是 height:素材原生上限只有 1280x720,硬给高度会把
   横构图的渲染图横向撑爆(vehicle-10t 454x272 曾被拉到 1.85 倍)。
   写成上限后,图按原生尺寸渲染,只在超出时才缩。 */
.panel__art img{max-height:min(72vh,660px);width:auto;max-width:82vw;object-fit:contain;
  filter:drop-shadow(0 0 60px rgba(0,0,0,.75))}
.panel--render .panel__art{padding:calc(var(--head) + 16px) 0 30vh}
.panel--render .panel__art img{max-height:min(56vh,540px)}
.panel--render .panel__in{text-align:center}
.panel--render .btn-row{justify-content:center}

.panel__title{margin:0 0 20px}
.panel__sub{color:rgba(255,255,255,.82);font-size:clamp(15px,1.5vw,20px);max-width:60ch}
.panel--center .panel__sub,.panel--render .panel__sub{margin-left:auto;margin-right:auto}

/* 向下滚动提示 */
.scroll-cue{position:absolute;left:50%;bottom:22px;z-index:2;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dimmer)}
/* 只有那根空 span 是线条;文字 span(向下滚动/Scroll)不能压成 1px,
   否则会被挤成逐字竖排 */
.scroll-cue span:empty{display:block;width:1px;height:38px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent)}

/* ==========================  内页 hero + 区块  ========================== */
.phero{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:clamp(420px,74vh,760px);
  padding:calc(var(--head) + 48px) 0 clamp(40px,6vh,76px)}
.phero .panel__media img{width:100%;height:100%;object-fit:cover}
.phero--render .panel__media{
  background:radial-gradient(64% 74% at 68% 42%,#0d2f6b 0%,#04122e 48%,#000 100%)}
.phero--render .panel__media::after{
  background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.28) 62%,rgba(0,0,0,.55) 100%),
             linear-gradient(180deg,transparent 40%,rgba(0,0,0,.6) 100%)}
/* 照片版内页 hero:文案固定压在左下角,基础遮罩只有纵向渐变,遇到
   亮箭体或亮云正好横穿文字带时对比度不够。补一层左重右轻的横向压暗。 */
.phero:not(.phero--render):not(.phero--soft) .panel__media::after{
  background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.5) 34%,
               rgba(0,0,0,.22) 68%,rgba(0,0,0,.12) 100%),
             linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.1) 34%,
               rgba(0,0,0,.5) 74%,rgba(0,0,0,.84) 100%)}
/* 内页 hero 的渲染图靠右站,文案在左下,窄屏退成淡背景 */
.phero .panel__art{justify-content:flex-end;
  padding:calc(var(--head) + 12px) clamp(12px,5vw,90px) 8% 0}
.phero .panel__art img{max-height:min(52vh,440px);max-width:44vw}
.phero--render .phero__in{max-width:68%}
.phero__in{position:relative;z-index:1;width:100%}
@media (max-width:860px){
  .phero .panel__art{opacity:.3;justify-content:center;padding:var(--head) 0 12%}
  .phero .panel__art img{max-width:74vw}
  .phero--render .phero__in{max-width:none}
}

/* 低分辨率照片当氛围底图:虚化 + 压暗 + 轻微放大(避免虚化边缘露白),
   把 1280x720 页面里裁出的小图放到全出血 hero 里也不会显得糊 */
.phero--soft .panel__media img{filter:blur(3px) brightness(.72) saturate(.92);
  transform:scale(1.08)}
/* 视频版不虚化 —— 动态画面自带质感,虚了反而可惜;只压暗保文字对比度 */
.phero--soft .panel__media video{filter:brightness(.94) saturate(1.02)}
/* 有视频时遮罩也放松一点,让尾焰透出来;文字带在左下,左侧保持压暗 */
.phero--soft:has(.panel__media video) .panel__media::after{
  background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.34) 62%,rgba(0,0,0,.5) 100%),
             linear-gradient(180deg,rgba(0,0,0,.38) 0%,transparent 42%,rgba(0,0,0,.62) 100%)}
.phero--soft .panel__media::after{
  background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.42) 70%,rgba(0,0,0,.6) 100%),
             linear-gradient(180deg,rgba(0,0,0,.4) 0%,transparent 40%,rgba(0,0,0,.7) 100%)}

/* 同一套手法用在首页的全出血 100vh 图版上。全屏背景必须铺满视口,没法靠
   限制尺寸解决(prototype-200kg 342x266 铺满要放到 4.2 倍),只能让这份软
   变成刻意的氛围虚化。遮罩沿用 .panel__media::after 的纵向走向,压得更重。 */
.panel--soft .panel__media img{filter:blur(3px) brightness(.72) saturate(.92);
  transform:scale(1.08)}
.panel--soft .panel__media::after{
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.28) 38%,
    rgba(0,0,0,.68) 78%,rgba(0,0,0,.9) 100%)}

.sec{padding:clamp(64px,9vh,124px) 0;border-top:1px solid var(--rule-soft)}
.sec--flush{border-top:0}
.sec__head{margin-bottom:clamp(34px,5vh,60px)}
.sec__head .h2{margin-bottom:16px}

/* 两列:文案 + 图 */
.split{display:grid;gap:clamp(30px,5vw,72px);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split--art-first .split__art{order:-1}
.split__art{display:flex;justify-content:center;align-items:center;min-width:0}
.split__art img{max-height:min(64vh,600px);width:auto}
.split__art--frame{background:radial-gradient(62% 66% at 50% 48%,#0b2857 0%,#040f26 55%,#000 100%);
  border:1px solid var(--rule-soft);padding:clamp(20px,3vw,44px)}

/* 参数表:细线 + 大写表头,spacex 内页那种 */
.spec{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.spec caption{text-align:left;font-size:12px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);padding-bottom:14px;
  border-bottom:1px solid var(--fg)}
.spec th,.spec td{text-align:left;padding:16px 18px 15px 0;
  border-bottom:1px solid var(--rule-soft);vertical-align:top}
.spec thead th{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid var(--rule)}
.spec tbody th{font-weight:400;color:var(--dim);width:34%}
.spec td{font-weight:500}
.spec td:last-child,.spec th:last-child{padding-right:0}
.spec .up{color:#fff;font-weight:600;white-space:nowrap}
.spec .up::before{content:"↑ ";color:var(--dimmer)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* 细线栅格(.stats / .cards / .team 共用)
   线画在格子自己身上,不靠容器底色透出 1px 缝隙:末行不满时,
   容器底色那套做法会把空格子的位置整片露成灰块。
   每个格子只画自己的左竖线和上横线,最外圈那一层由容器 overflow:hidden 裁掉,
   所以有内容才有线,空格子什么都不画,列数怎么变都不会漏。 */
.stats,.cards,.team{background:none;overflow:hidden}
.stats > div,.cards > li,.cards > div,.team > li{position:relative}
.stats > div::before,.cards > li::before,.cards > div::before,.team > li::before,
.stats > div::after, .cards > li::after, .cards > div::after, .team > li::after{
  content:"";position:absolute;background:var(--rule-soft);pointer-events:none}
/* 左竖线:上下各探出 1px,和横线交叉处不留缺口 */
.stats > div::before,.cards > li::before,.cards > div::before,.team > li::before{
  left:-1px;top:-1px;bottom:-1px;width:1px}
/* 上横线 */
.stats > div::after,.cards > li::after,.cards > div::after,.team > li::after{
  left:-1px;right:-1px;top:-1px;height:1px}

/* 大号数字参数块 */
.stats{display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stats > div{background:var(--bg);padding:clamp(22px,3vw,34px) clamp(18px,2vw,28px)}
.stats dt{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-bottom:12px}
.stats dd{margin:0;font-size:clamp(30px,3.8vw,50px);font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums}
.stats dd small{font-size:.42em;font-weight:500;letter-spacing:.08em;
  color:var(--dim);margin-left:6px}

/* 卡片栅格 */
.cards{display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cards > li,.cards > div{background:var(--bg);padding:clamp(24px,3vw,38px)}
.cards .num{display:block;font-size:12px;font-weight:600;letter-spacing:.2em;
  color:var(--dimmer);margin-bottom:16px}
.cards .h3{margin-bottom:12px}
.cards p{color:var(--dim);font-size:15px}
.cards dl{margin:14px 0 0}
.cards dt{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dimmer);margin-top:14px}
.cards dd{margin:4px 0 0;color:var(--dim);font-size:15px}
.cards img{margin-top:22px;height:118px;width:auto;object-fit:contain;
  opacity:.92;align-self:center}
.cards > li,.cards > div{display:flex;flex-direction:column}
.cards .card__img{margin-top:auto;display:flex;justify-content:center;padding-top:26px}
/* 卡片图署名行(CC 协议图片的归属标注,如酒泉 VAB 照片);:has 只在带署名的卡上生效 */
.cards .card__img:has(.img-credit){flex-direction:column;align-items:center}
.cards .card__img .img-credit{align-self:center;margin-top:8px;font-size:11px;color:var(--dim);opacity:.75}

/* 要点行:标签 + 说明,BP 里「核心优势」那种版式 */
.points{border-top:1px solid var(--rule)}
.points li{display:grid;gap:6px 28px;padding:20px 0;
  border-bottom:1px solid var(--rule-soft);
  grid-template-columns:minmax(120px,190px) minmax(0,1fr)}
.points b{font-weight:600;font-size:15px;letter-spacing:.04em}
.points span{color:var(--dim);font-size:15px}

/* 图注 / 画廊 */
/* 尺寸封顶必须加在 figure 上,不能加在轨道上:auto-fit 的列数是按轨道
   *上限* 算的,写成 minmax(200px,340px) 会让 768 宽直接塌成单列。
   轨道仍用 1fr 保证列数自适应,再把每格内容压到 340 —— 这些照片原生只有
   280-340px,不封顶的话两列会被拉到 599px,等于强行放大两倍。 */
.gallery{display:grid;gap:clamp(16px,2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.gallery figure{margin:0 auto;max-width:340px;width:100%}
.gallery img{width:100%;height:auto;border:1px solid var(--rule-soft)}
.gallery figcaption{margin-top:12px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.gallery figcaption .zh{letter-spacing:.06em}
/* 仿真截图本身是浅色工程图,做成浅色面板反而更像仪表读数,不硬反相 */
.gallery--panel img{background:#f4f6f8;padding:10px;object-fit:contain;
  aspect-ratio:4/3}
/* 画廊里混进来的透明线稿渲染图(如 hopper-16,142x247):它比同排照片小得多,
   铺满格子就是 2.7 倍放大。改成按原生尺寸居中,套上与 .split__art--frame
   同一套藏青辉光底,小尺寸看起来才是刻意的面板而不是缩水。 */
.gallery figure.is-render img{width:100%;height:auto;aspect-ratio:342/266;
  object-fit:contain;padding:14px;border-color:transparent;
  background:radial-gradient(62% 66% at 50% 48%,#0b2857 0%,#040f26 55%,#000 100%)}

/* 自绘 SVG 图示:BP 里的图表都带烧进去的中文,必须重画才能跟随语言切换 */
.dgm{width:100%;height:auto;overflow:visible}
.dgm text{font-family:var(--sans);fill:#fff}
.dgm .t-lab{font-size:13px;font-weight:500}
.dgm .t-sm{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  fill:rgba(255,255,255,.62)}
.dgm .t-num{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.dgm .t-big{font-size:26px;font-weight:600}
.dgm .ln{stroke:var(--rule);stroke-width:1;fill:none}
.dgm .ln-dash{stroke:rgba(255,255,255,.34);stroke-width:1;stroke-dasharray:3 4;fill:none}
.dgm .bar-old{fill:rgba(255,255,255,.18)}
.dgm .bar-new{fill:#fff}
.dgm .body-fill{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.5)}
.dgm .flame{fill:rgba(255,255,255,.55)}
.dgm .accent{fill:#5b8dea}

/* 环形图图例 */
.legend{display:grid;gap:14px;margin-top:8px}
.legend li{display:grid;grid-template-columns:12px 1fr auto;gap:14px;align-items:center;
  padding-bottom:13px;border-bottom:1px solid var(--rule-soft);font-size:15px}
.legend i{width:12px;height:12px;border-radius:50%;display:block}
.legend b{font-variant-numeric:tabular-nums;font-weight:600}
.donut-row{display:grid;gap:clamp(30px,5vw,64px);align-items:center;
  grid-template-columns:minmax(240px,380px) minmax(0,1fr)}

/* 路线图时间轴 */
.road{border-top:1px solid var(--fg);counter-reset:stage}
.road li{position:relative;padding:26px 0 26px 0;border-bottom:1px solid var(--rule-soft);
  display:grid;gap:6px 30px;grid-template-columns:minmax(96px,132px) minmax(0,1fr)}
.road .stage{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dimmer);padding-top:5px}
.road .h3{margin-bottom:8px}
.road p{color:var(--dim);font-size:15px}
.road ul{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.road ul li{display:block;padding:6px 13px;border:1px solid var(--rule);
  font-size:12px;letter-spacing:.1em;color:var(--dim);grid-template-columns:none}
.road ul li{border-bottom:1px solid var(--rule)}

/* 团队(匿名:仅岗位 + 院校) */
.team{display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.team > li{background:var(--bg);padding:26px clamp(18px,2vw,26px)}
.team .role{font-size:16px;font-weight:600;margin-bottom:8px}
.team .school{font-size:13px;letter-spacing:.06em;color:var(--dim)}

/* 内页导航条(下一页) */
.next{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:baseline;
  justify-content:space-between;padding:clamp(40px,6vh,74px) 0;
  border-top:1px solid var(--rule)}
.next a{font-size:clamp(20px,2.6vw,34px);font-weight:600}
.next a::after{content:" →";color:var(--dimmer)}
.next a:hover{color:var(--dim)}

/* ==========================  页脚  ========================== */
.ftr{border-top:1px solid var(--rule-soft);padding:clamp(44px,6vh,72px) 0 40px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer)}
.ftr__nav{display:flex;flex-wrap:wrap;gap:14px 28px;margin-bottom:30px}
.ftr__nav a{color:var(--dim)}
.ftr__nav a:hover{color:var(--fg)}
.ftr__nav .zh,.ftr .zh{letter-spacing:.08em}
.ftr__meta{display:flex;flex-wrap:wrap;gap:8px 30px;
  padding-top:26px;border-top:1px solid var(--rule-soft)}
.ftr__brand{color:var(--dim);font-weight:600}

/* ==========================  响应式  ========================== */
@media (max-width:1180px){
  .nav a{font-size:12px;letter-spacing:.1em}
}
@media (max-width:960px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split--art-first .split__art{order:0}
  .donut-row{grid-template-columns:minmax(0,1fr)}
  .points li{grid-template-columns:minmax(0,1fr);gap:4px}
  .road li{grid-template-columns:minmax(0,1fr);gap:4px}
  .road .stage{padding-top:0}
}
@media (max-width:860px){
  :root{--head:58px}
  .nav{position:fixed;inset:0;z-index:110;margin:0;
    flex-direction:column;justify-content:center;align-items:flex-start;
    gap:2px;padding:var(--head) var(--pad) 40px;
    background:#000;
    transform:translateY(-100%);transition:transform .42s var(--ease);
    overflow-y:auto}
  .is-menu .nav{transform:translateY(0)}
  .nav a{font-size:23px;font-weight:600;letter-spacing:.06em;padding:15px 0;
    width:100%;border-bottom:1px solid var(--rule-soft)}
  .nav a::after{display:none}
  .nav a[aria-current="page"]{color:var(--dim)}
  .lang{margin:26px 0 0;padding:0;border-left:0;gap:14px}
  .lang button{font-size:15px}
  .burger{display:block;position:relative;z-index:130}
  .brand{position:relative;z-index:130}
  .spec tbody th{width:42%}
}
@media (max-width:520px){
  .panel{padding-top:calc(var(--head) + 24px)}
  .panel__art img{max-height:min(52vh,420px)}
  .stats > div{padding:20px 16px}
  .cards img{height:96px}
  .next a{font-size:19px}
}
/* 顶栏菜单打开时锁定滚动 */
body.is-locked{overflow:hidden}

/* ==========================  杂项  ========================== */
/* 说明性小字(口径、免责、单位注释) */
.note{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule-soft);
  font-size:13px;line-height:1.7;color:var(--dimmer);max-width:80ch}
.note b{color:var(--dim);font-weight:600}

/* 图注行:一张图 + 一段说明 */
.figrow{display:grid;gap:clamp(20px,3vw,40px);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* 404 / 空状态 */
.err{min-height:100vh;min-height:100svh;display:flex;align-items:center;
  text-align:center;padding:var(--head) 0}
.err .display{margin-bottom:18px}
.err .lede{margin:0 auto}
.err .btn-row{justify-content:center}


/* ======================  整箭三维查看器  ======================
   预渲染的 360° 序列(60 帧透明 WebP),不是实时 WebGL —— 理由见
   3D model/网页出图/README.md。相机固定、只有箭体自转,所以
   「高度 -> 画面 Y」对所有帧是同一个映射,标注锚点由渲染脚本算好、
   build-pages.py 注入成 style="top:N%",这里只负责摆位与观感。 */

/* 首屏那枚火箭:变成可点的入口 */
/* 入口默认是「哑」的:提示气泡不显示、光标不变手。
   JS 就位后才加 .is-ready —— 关掉 JS 时这里就只是一张普通的火箭图,
   不会出现一个点了没反应的按钮。 */
/* pointer-events:auto 是必须的:.panel__art 整层 pointer-events:none
   (装饰层不挡文字),不重新打开的话按钮根本收不到点击。 */
.rv-open{display:block;padding:0;border:0;background:none;cursor:default;
  position:relative;line-height:0;pointer-events:auto}
.rv-open.is-ready{cursor:pointer}
.rv-open img{transition:transform .5s var(--ease),filter .5s var(--ease)}
.rv-open.is-ready:hover img,.rv-open.is-ready:focus-visible img{transform:translateY(-6px);
  filter:drop-shadow(0 0 26px rgba(90,150,255,.45))}
.rv-open__cue{display:none;position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  white-space:nowrap;font-size:11px;letter-spacing:.16em;line-height:1.2;
  text-transform:uppercase;color:var(--dim);
  padding:7px 13px;border:1px solid var(--rule);border-radius:999px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.rv-open__cue .zh{letter-spacing:.06em}
.rv-open.is-ready .rv-open__cue{display:inline-block}
.rv-open:hover .rv-open__cue{border-color:rgba(120,175,255,.7);color:#fff}

/* 箭体旁的全高尺寸标注:一条竖发丝线 + 端点短横 + 顶部小字 */
.rv-open__dim{position:absolute;right:calc(100% + 22px);top:2%;bottom:2%;
  width:1px;background:var(--rule);pointer-events:none}
.rv-open__dim::before,.rv-open__dim::after{content:"";position:absolute;
  right:-3px;width:7px;height:1px;background:var(--rule)}
.rv-open__dim::before{top:0}
.rv-open__dim::after{bottom:0}
.rv-open__dim span{position:absolute;top:50%;right:10px;
  transform:translateY(-50%);white-space:nowrap;
  font-size:11px;letter-spacing:.14em;color:var(--dimmer);line-height:1.2}
.rv-open__dim .zh{letter-spacing:.06em}

/* hero 底部的一行关键参数,填掉文案区下方的空 */
.phero__facts{margin-top:22px;font-size:12.5px;letter-spacing:.12em;
  color:var(--dimmer)}
.phero__facts .zh{letter-spacing:.06em}

/* 细箭体的内页 hero:图拉高站直。hero 本身只有 74vh 高,
   还要减去顶栏与内边距,图再高就会被裁掉下半截 */
.phero--tallart .panel__art{padding:calc(var(--head) + 8px) clamp(24px,6vw,110px) 4% 0}
.phero--tallart .panel__art img{max-height:min(63vh,620px);max-width:30vw}
@media (max-width:860px){
  .phero--tallart .panel__art img{max-width:60vw}
  .rv-open__dim{display:none}
}

/* 遮罩层。z-index 要压过固定顶栏(120),但让给跳转链接(300) */
.rv{position:fixed;inset:0;z-index:200;display:flex;
  align-items:center;justify-content:center;padding:clamp(12px,2.4vw,28px)}
.rv__bg{position:absolute;inset:0;background:rgba(0,0,0,.9);
  backdrop-filter:blur(10px);border:0;cursor:pointer}
.rv__panel{position:relative;width:100%;max-width:1280px;height:100%;
  display:flex;flex-direction:column;
  background:radial-gradient(78% 62% at 50% 44%,#0b2857 0%,#04102a 52%,#000 100%);
  border:1px solid var(--rule-soft);overflow:hidden}
/* 标题区刻意压扁:整箭长细比 11:1,舞台每多 100 px 高,箭体才宽 9 px。
   这里省下的每一点都直接换成箭体尺寸。 */
.rv__head{padding:clamp(12px,1.5vw,20px) clamp(20px,3vw,44px) 0;
  max-width:calc(100% - 90px)}
.rv__head .h2{margin-top:2px;font-size:clamp(19px,2vw,27px)}
.rv__head .eyebrow{margin:0}
.rv__x{position:absolute;top:clamp(12px,1.8vw,22px);right:clamp(12px,1.8vw,22px);
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--rule);border-radius:50%;
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.rv__x:hover{background:rgba(255,255,255,.14);border-color:#fff}
.rv__x svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.6}

/* 舞台。高度是标注百分比的基准 —— .rv__marks 与 .rv__rocket 同高,
   所以 style="top:50.1%" 就是箭体 50.1% 那个位置,与画幅一一对应。
   overflow:hidden 是给放大用的:放大到 3 倍时箭体会溢出上下,裁在这里。 */
/* .rv__view 只做一件事:给标注一个和舞台完全重合的定位参照。
   标注必须是舞台的**兄弟**而不是子元素 —— 窄屏要把它们从箭体旁边挪到
   下方顺排,当子元素时改成 static 就会变成 flex 兄弟项,和箭体挤在一排。
   同时拖拽事件挂在 .rv__stage 上,窄屏时它只包着箭体,
   在标注列表上滑动就是正常滚动,不会误触转动。 */
.rv__view{position:relative;flex:1;min-height:0;display:flex;
  margin:clamp(10px,1.6vw,20px) 0}
.rv__stage{position:relative;flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
/* aspect-ratio 由 build-pages.py 按 turntable.json 的实际画幅注入到 inline style,
   不写死在这里 —— 换了渲染分辨率之后这个比例会变,写死就会letterbox 错位。 */
.rv__rocket{position:relative;height:100%;
  transition:transform .55s var(--ease);will-change:transform}
/* 两层叠放做交叉淡入。48 帧一圈 = 每格 7.5°,直接硬切会有台阶感;
   两层各自淡入淡出之后,即使每秒只走 3 帧看着也是连续转动。
   透明度由 JS 逐帧写 inline style,拖拽时加 .is-drag 把过渡关掉要即时响应。 */
.rv__f{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .3s linear;
  user-select:none;-webkit-user-drag:none}
.rv__f--a{opacity:1}
.rv.is-drag .rv__f,.rv.is-drag .rv__rocket{transition:none}
.rv__stage{cursor:grab}
.rv.is-drag .rv__stage{cursor:grabbing}

/* 打开查看器的入场:箭体从右侧滑入并放大到舞台中央,
   JS 同时加快换帧,看起来就是「旋转着飞进来」。
   is-enter 由 JS 在动画结束后摘掉,之后缩放标注才能正常用 transform。 */
.rv.is-enter .rv__rocket{animation:rv-enter 1.05s var(--ease) both}
@keyframes rv-enter{
  from{transform:translateX(34vw) scale(.42);opacity:0}
  55%{opacity:1}
  to{transform:translateX(0) scale(1);opacity:1}
}
/* 入场期间换帧频率约 24fps,比 300ms 交叉淡入快得多,
   不关过渡的话每帧都淡到一半被切走,糊成一团残影 */
.rv.is-enter .rv__f{transition:none}
/* 标注等箭体落定后再浮出(透明度过渡沿用 .rv__mark 自己的 .4s) */
.rv.is-enter .rv__mark{opacity:0}
/* 二级发动机(40.1%)与提箭发动机(50.1%)两个标注只隔 10%,
   矮窗口下两个文字块会贴上:一个上移、一个下移,各让 14px。
   引线跟着偏 14px,在 2.2m 高的箭体图上是 0.6%,肉眼对不出差。 */
.rv__mark:nth-of-type(4){transform:translateY(calc(-50% - 14px))}
.rv__mark:nth-of-type(6){transform:translateY(calc(-50% + 14px))}
@media (prefers-reduced-motion:reduce){
  .rv.is-enter .rv__rocket{animation:none}
}

/* 标注 */
.rv__marks{position:absolute;inset:0;margin:0;padding:0;list-style:none;
  pointer-events:none}
.rv__mark{position:absolute;transform:translateY(-50%);
  max-width:min(34%,320px);pointer-events:auto;
  transition:opacity .4s var(--ease)}
/* 离中线的距离用变量:放大之后箭体变宽,标注要跟着让开,
   否则激活的那条会被箭体压住(--rv-off 由 JS 按当前倍数写)。 */
.rv__mark--l{right:calc(50% + var(--rv-off,46px));text-align:right}
.rv__mark--r{left:calc(50% + var(--rv-off,46px))}
.rv__marks{transition:none}
.rv__mark--l,.rv__mark--r{transition:opacity .4s var(--ease),right .5s var(--ease),left .5s var(--ease)}
.rv__mark button{display:block;width:100%;padding:8px 2px;cursor:pointer;
  background:none;border:0;color:inherit;text-align:inherit;font:inherit;
  position:relative}
/* 引线:从标注指到箭体。li 是 translateY(-50%) 定位的,所以它的垂直中心
   就是锚点,引线画在 50% 上正好对齐。 */
.rv__mark button::after{content:"";position:absolute;top:50%;width:34px;height:1px;
  background:var(--rule);transition:background .3s var(--ease),width .3s var(--ease)}
.rv__mark--l button::after{left:100%}
.rv__mark--r button::after{right:100%}
.rv__mark b{display:block;font-size:15px;font-weight:600;letter-spacing:.02em}
.rv__mark i{display:block;margin-top:5px;font-style:normal;font-size:12.5px;
  line-height:1.6;color:var(--dimmer)}
.rv__mark button:hover b,.rv__mark button:focus-visible b{color:#8fb8ff}
.rv__mark button:hover::after{background:#8fb8ff;width:44px}

/* 放大某一段:transform-origin 落在该标注的锚点上,scale 之后**锚点位置不变**,
   所以那条标注不用跟着动,箭体是绕着它长大的。其余标注淡出,免得指错地方。 */
.rv.is-zoom .rv__mark{opacity:.14}
.rv.is-zoom .rv__mark.is-on{opacity:1}
.rv.is-zoom .rv__mark.is-on b{color:#8fb8ff}
.rv.is-zoom .rv__mark.is-on button::after{background:#8fb8ff}

/* 首次打开时序列还在下载:细进度条,不挡视线 */
.rv__load{position:absolute;left:0;top:0;height:2px;width:0;
  background:linear-gradient(90deg,#2f6ad0,#8fb8ff);
  transition:width .25s linear;opacity:0}
.rv.is-loading .rv__load{opacity:1}

.rv__hint{margin:0;padding:0 clamp(20px,3vw,44px) clamp(12px,1.5vw,18px);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer)}
.rv__hint .zh{letter-spacing:.06em}

/* 窄屏:两侧挂不下,改成箭体在上、标注顺排在下。
   这时标注的 top 百分比失效,统一清掉,靠文档流排。 */
@media (max-width:860px){
  .rv{padding:0}
  .rv__panel{border:0}
  /* 上下排:箭体固定高度居中,标注在下方顺排,整块面板可滚 */
  .rv__view{display:block;flex:1;min-height:0;overflow-y:auto;
    -webkit-overflow-scrolling:touch;margin:0}
  .rv__stage{height:38vh;flex:none;overflow:visible}
  .rv__rocket{height:38vh;margin:0 auto}
  .rv__marks{position:static;display:block;
    padding:14px clamp(16px,4vw,28px) 22px}
  .rv__mark{position:static;transform:none;max-width:none;
    text-align:left;border-top:1px solid var(--rule-soft)}
  .rv__mark--l,.rv__mark--r{right:auto;left:auto;text-align:left}
  .rv__mark button{padding:12px 2px}
  .rv__mark button::after{display:none}
  .rv__mark i{color:var(--dim)}
  /* 窄屏不做放大:标注已经不在箭体旁边,放大之后引线对不上 */
  .rv.is-zoom .rv__rocket{transform:none}
  .rv.is-zoom .rv__mark{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .rv__rocket,.rv__f--b,.rv-open img{transition:none}
}

[hidden]{display:none!important}

/* ======================  体验层优化(不动版式骨架)  ======================
   全部是渐进增强:JS 加的类才生效,关掉 JS 页面表现与之前一致。 */

/* 选中文本反色,跟整站黑白调一致 */
::selection{background:#fff;color:#000}

/* 细滚动条,融入黑底 */
html{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px;
  border:2px solid #000}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.4)}
::-webkit-scrollbar-track{background:transparent}

/* 长标题两端平衡换行,避免一个词吊在末行 */
.display,.h2{text-wrap:balance}
.panel__sub,.lede{text-wrap:pretty}

/* --- 滚动显现:JS 给元素加 .reveal,进视口再加 .is-in --- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* --- 首屏 hero:极缓慢的推镜,幅度小到几乎察觉不到,但画面是活的 --- */
@media (prefers-reduced-motion:no-preference){
  .panel:first-of-type .panel__media img{
    animation:hero-drift 26s var(--ease) both}
  @keyframes hero-drift{from{transform:scale(1.07)}to{transform:scale(1)}}
  /* 滚动提示线的呼吸(:empty 只命中那根线,不碰文字) */
  .scroll-cue span:empty{animation:cue-pulse 2.2s var(--ease) infinite;
    transform-origin:top}
  @keyframes cue-pulse{
    0%,100%{transform:scaleY(1);opacity:1}
    50%{transform:scaleY(.55);opacity:.45}}
}

/* --- 细线栅格的悬停微反馈:只亮底色,不动线条 --- */
.stats > div,.cards > li,.cards > div,.team > li{
  transition:background .3s var(--ease)}
.stats > div:hover,.cards > li:hover,.cards > div:hover,.team > li:hover{
  background:rgba(255,255,255,.035)}

/* --- 按钮:悬停时字距微微张开,比单纯反色多一口气 --- */
.btn{transition:background .25s var(--ease),color .25s var(--ease),
  letter-spacing .35s var(--ease)}
.btn:hover,.btn:focus-visible{letter-spacing:.28em}
.btn .zh{transition:letter-spacing .35s var(--ease)}
.btn:hover .zh,.btn:focus-visible .zh{letter-spacing:.24em}

/* --- 「下一页」箭头:悬停时向右滑 --- */
.next a::after{display:inline-block;transition:transform .3s var(--ease)}
.next a:hover::after{transform:translateX(8px)}

/* --- 移动端菜单:打开时菜单项依次浮入 --- */
@media (max-width:860px) and (prefers-reduced-motion:no-preference){
  .nav a,.nav .lang{opacity:0;transform:translateY(14px);
    transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .is-menu .nav a,.is-menu .nav .lang{opacity:1;transform:none}
  .is-menu .nav a:nth-child(1){transition-delay:.08s}
  .is-menu .nav a:nth-child(2){transition-delay:.13s}
  .is-menu .nav a:nth-child(3){transition-delay:.18s}
  .is-menu .nav a:nth-child(4){transition-delay:.23s}
  .is-menu .nav a:nth-child(5){transition-delay:.28s}
  .is-menu .nav a:nth-child(6){transition-delay:.33s}
  .is-menu .nav a:nth-child(7){transition-delay:.38s}
  .is-menu .nav .lang{transition-delay:.44s}
}


/* ======================  首页:一次任务的五个阶段  ======================
   滚动驱动的发射剖面。整段只用 transform / opacity,不碰布局属性,
   所以滚动时不会触发重排;位姿由 JS 按进度 p 逐帧算好写进 CSS 变量。 */
.flight{position:relative;height:560vh;background:var(--bg)}
.flight__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.flight__scene{position:absolute;inset:0}

/* 天空:底重顶轻的藏青辉光,跟 .panel--render 同一套配色 */
.fl-sky{position:absolute;inset:0;
  background:radial-gradient(88% 66% at 50% 104%,#0b2c5c 0%,#05122c 44%,#000 100%)}
/* 地平线:一条发丝线,升空时向下退 */
.fl-ground{position:absolute;left:-10%;right:-10%;bottom:16vh;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38) 22%,
    rgba(255,255,255,.38) 78%,transparent)}
/* 发射工位与回收工位:一横一竖两条发丝线,不画具象的塔架 */
.fl-pad,.fl-bay{position:absolute;bottom:16vh;width:clamp(70px,7vw,120px);height:1px;
  background:rgba(255,255,255,.45);transition:background .4s var(--ease)}
.fl-pad{left:50%;transform:translateX(-50%)}
/* 位置用百分比写死:JS 要按它算转移距离,若写成「跟随 JS 变量」,
   测量(读)与赋值(写)会形成正反馈,每次 measure 都把工位往外推 */
.fl-bay{left:76%;opacity:.45}
.fl-bay::after{content:"";position:absolute;right:0;bottom:0;width:1px;height:26px;
  background:rgba(255,255,255,.45)}
.flight.is-docked .fl-bay{opacity:1;background:rgba(143,184,255,.9)}

/* 高度标尺:只有刻度不标数值 */
.fl-scale{position:absolute;left:clamp(16px,4vw,56px);bottom:16vh;width:1px;
  height:min(52vh,460px);background:linear-gradient(180deg,transparent,var(--rule-soft))}
.fl-scale i{position:absolute;right:0;width:9px;height:1px;background:var(--rule)}
.fl-scale i:nth-child(1){bottom:0}
.fl-scale i:nth-child(2){bottom:20%}
.fl-scale i:nth-child(3){bottom:40%}
.fl-scale i:nth-child(4){bottom:60%}
.fl-scale i:nth-child(5){bottom:80%}
.fl-scale i:nth-child(6){bottom:100%;width:16px}

/* 箭体容器:上下两段各是一张整箭渲染图,靠 clip-path 各取一半,
   分离时把上半张往上推,接缝自然裂开。 */
.fl-vehicle{position:absolute;left:50%;bottom:16vh;
  width:clamp(30px,3.4vw,46px);height:min(56vh,540px);
  margin-left:calc(clamp(30px,3.4vw,46px) / -2);
  transform:translate3d(var(--fl-x,0px),var(--fl-y,0px),0);
  will-change:transform}
.fl-vehicle img{position:absolute;left:0;top:0;width:100%;height:100%;
  object-fit:contain;object-position:bottom center}
.fl-upper{clip-path:inset(0 0 47% 0);
  transform:translate3d(0,var(--fl-uy,0px),0);opacity:var(--fl-uo,1)}
.fl-booster{clip-path:inset(53% 0 0 0);
  transform:translate3d(0,var(--fl-by,0px),0)}

/* 尾焰:一个尖头渐变,长度/亮度由 JS 写 --fl-fu / --fl-fb(0~1) */
.fl-flame{position:absolute;left:50%;width:38%;height:var(--fl-fh,0px);
  margin-left:-19%;border-radius:50% 50% 46% 46%;
  background:linear-gradient(180deg,rgba(190,225,255,.95) 0%,rgba(120,175,255,.55) 34%,
    rgba(60,110,220,.22) 70%,transparent 100%);
  filter:blur(3px);opacity:0;transform-origin:top center;pointer-events:none}
.fl-flame--up{top:calc(53% - 1px);
  transform:translate3d(0,var(--fl-uy,0px),0) scaleY(var(--fl-fu,0));
  opacity:var(--fl-fu,0)}
.fl-flame--bo{bottom:-1px;
  transform:translate3d(0,var(--fl-by,0px),0) scaleY(var(--fl-fb,0));
  opacity:var(--fl-fb,0)}
/* 点火瞬间的烟雾:三团模糊的灰色,滚动到点火段时撑开 */
.fl-smoke i{position:absolute;left:50%;bottom:16vh;border-radius:50%;
  background:rgba(190,205,225,.30);filter:blur(14px);opacity:0;
  width:calc(60px + var(--fl-sm,0) * 140px);
  height:calc(22px + var(--fl-sm,0) * 52px);
  transform:translate3d(calc(-50% + var(--fl-sx1,0px)),var(--fl-sy,0px),0);
  transition:opacity .3s linear}
.fl-smoke i:nth-child(1){margin-left:-46px}
.fl-smoke i:nth-child(2){margin-left:38px}
.fl-smoke i:nth-child(3){margin-left:-14px;background:rgba(190,205,225,.22)}
.fl-smoke i:nth-child(4){margin-left:74px;background:rgba(190,205,225,.18)}

/* 文案层:左下角固定,跟随阶段切换 */
.flight__ui{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;padding-bottom:clamp(28px,6vh,64px);
  pointer-events:none}
.flight__head{margin-bottom:clamp(18px,3vh,30px)}
.flight__caps{position:relative;list-style:none;margin:0;
  max-width:46ch;min-height:190px}
.flight__caps li{position:absolute;left:0;top:0;width:100%;
  opacity:0;transform:translateY(14px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.flight__caps li.is-on{opacity:1;transform:none}
.fl-num{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:10px}
.fl-num .zh{letter-spacing:.1em}
.flight__caps .h3{margin-bottom:10px}
.flight__caps p{color:var(--dim);font-size:15px;line-height:1.72}
/* 阶段进度轨 */
.flight__rail{position:relative;margin-top:26px;height:1px;
  background:var(--rule-soft);max-width:46ch}
.flight__rail i{position:absolute;top:-3px;width:1px;height:7px;background:var(--rule)}
.flight__rail i:nth-of-type(1){left:0}
.flight__rail i:nth-of-type(2){left:25%}
.flight__rail i:nth-of-type(3){left:50%}
.flight__rail i:nth-of-type(4){left:75%}
.flight__rail i:nth-of-type(5){left:100%}
.flight__rail-fill{position:absolute;left:0;top:0;height:1px;width:0;
  background:#8fb8ff;box-shadow:0 0 10px rgba(143,184,255,.6)}

/* 关掉 JS / 减弱动态:退化成普通的五段说明,不留空白 */
.flight.is-static{height:auto}
.flight.is-static .flight__stage{position:static;height:auto;overflow:visible;
  padding:clamp(64px,9vh,124px) 0}
.flight.is-static .flight__scene{display:none}
.flight.is-static .flight__ui{position:static;padding:0}
.flight.is-static .flight__caps{position:static;min-height:0;max-width:none;
  display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:clamp(28px,5vh,48px)}
.flight.is-static .flight__caps li{position:static;opacity:1;transform:none;
  padding:24px clamp(18px,2vw,28px);border-top:1px solid var(--rule-soft)}
.flight.is-static .flight__rail{display:none}

@media (max-width:860px){
  .flight{height:460vh}
  .fl-bay{left:auto;right:6vw}
  .flight__caps{min-height:220px}
  .flight__caps p{font-size:14px}
}

/* --- 360° 循环视频(替代静态渲染图) ---
   视频是透明背景(HEVC/VP9 alpha),网页图框自己的渐变辉光
   直接透出来 —— 尺寸与静态图同款,图框保留原有边框与渐变。
   <img> 回落仍走原 img 规则。reduced-motion 时由 JS 暂停。 */
.split__art--frame video{width:auto;height:auto;display:block;
  max-height:min(60vh,540px);max-width:100%;margin:0 auto}
/* 图框内展品说明(如蚱蜢跳模型标注):有说明时图框转纵向,说明居中压在视频下方 */
.split__art--frame:has(.art-caption){flex-direction:column}
.split__art--frame .art-caption{margin-top:clamp(12px,1.8vh,18px);font-size:13px;
  color:var(--dim);text-align:center}
.gallery video{width:auto;height:auto;display:block;
  max-height:min(48vh,430px);max-width:100%;margin:0 auto;
  border:1px solid var(--rule-soft)}

/* --- 排版细调:正文行距放宽一点,长段落更易读 --- */
.body{line-height:1.72}
.cards p{line-height:1.68}
.points span{line-height:1.68}

/* --- 发射剖面 v2:地球 + 轨迹(SVG 场景) ---
   旧版 .fl-vehicle/.fl-flame 等规则已不再引用,留着无害。
   裁切线修正:分离面在 46.5%,分离点下方的 4 台提箭发动机
   (约 50% 高度处)必须归一级(下段)。 */
.flight__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.fl-earth{fill:#030b1c;stroke:rgba(110,160,250,.55);stroke-width:1.5}
.fl-path{fill:none;stroke:rgba(143,184,255,.9);stroke-width:2;stroke-linecap:round}
.fl-path--desc{stroke:rgba(143,184,255,.5)}
.fl-label{font-family:var(--sans);font-size:17px;
  fill:rgba(255,255,255,.62);letter-spacing:.06em}
.fl-label--hi{fill:#8fb8ff}