/* ============================================================
   space.css —— 落地层：驾驶舱舷窗 + 单星系星图 + 宇航员
   阅读页仍然由 site.css 渲染，这里只管"飞"的那一层。
   ============================================================ */

/* 落地态：把浅色版的画布/贴纸栏/缩放条整套收起来 */
/* 旧首页那套画布/贴纸栏/缩放条整套退役：落地态不用，阅读态也不该露出来
   （审计在项目页里还能量到 .tray 的 22px/14px 圆角，就是它没走干净）。 */
.tray, .zoombar, .board-reset { display: none !important; }
body:not(.is-read) .board,
body:not(.is-read) .chrome__badge { display: none !important; }
/* 阅读态：太空层退场 */
body.is-read .sp-scene,
body.is-read .sp-glass,
body.is-read .sp-mf,
body.is-read .sp-cruise,
body.is-read .sp-hud { display: none !important; }
body.is-read .sp-stars { opacity: .3; }

/* ── 星场 ───────────────────────────────────────── */
.sp-stars { position: fixed; inset: 0; z-index: 0; display: block; }

/* ── 纹理 ───────────────────────────────────────── */
.sp-grain, .sp-vig, .sp-scan { position: fixed; inset: 0; pointer-events: none; }
.sp-grain {
  z-index: 92; opacity: .34; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation: sp-grain 1.1s steps(3) infinite;
}
@keyframes sp-grain { 0%{transform:translate(0,0)} 33%{transform:translate(-3px,2px)} 66%{transform:translate(2px,-3px)} }
.sp-vig { z-index: 90; background: radial-gradient(130% 100% at 50% 45%, transparent 62%, rgba(5,4,8,.42) 100%); }
.sp-scan { z-index: 91; opacity: .12;
  background: repeating-linear-gradient(to bottom, rgba(230, 230, 230,.05) 0 1px, transparent 1px 3px); }
html.sp-plain .sp-grain, html.sp-plain .sp-scan { display: none; }

/* ── 驾驶舱框架 ─────────────────────────────────── */
.sp-cockpit { position: fixed; inset: 0; z-index: 58; pointer-events: none;
  opacity: var(--ck, 1); transition: opacity 1s var(--e); }
body[data-sp="map"] { --ck: .6; }
body.is-read { --ck: .34; }
.sp-brk { position: absolute; width: 38px; height: 38px; border: 1px solid var(--line-2); }
.sp-brk--tl { top: 56px; left: 26px; border-right: 0; border-bottom: 0; }
.sp-brk--tr { top: 56px; right: 26px; border-left: 0; border-bottom: 0; }
.sp-brk--bl { bottom: 26px; left: 26px; border-right: 0; border-top: 0; }
.sp-brk--br { bottom: 26px; right: 26px; border-left: 0; border-top: 0; }
.sp-rule { position: absolute; top: 26%; bottom: 26%; width: 9px;
  background: repeating-linear-gradient(to bottom, var(--line-2) 0 1px, transparent 1px 13px); }
.sp-rule--l { left: 26px; }
.sp-rule--r { right: 26px; }
.sp-rule::after { content: ""; position: absolute; top: 50%; width: 20px; height: 1px; background: var(--line-3); }
.sp-rule--l::after { left: 0; }
.sp-rule--r::after { right: 0; }

/* ── 舷窗 ───────────────────────────────────────── */
.sp-glass { position: fixed; inset: 52px; z-index: 56; pointer-events: none;
  border-radius: 132px / 108px;
  transform: scale(var(--gs, 1)); opacity: var(--go, 1);
  /* 一层层往外：玻璃内沿 → 内框 → 框体 → 外壳 → 舱内暗场 */
  box-shadow:
    0 0 0 1px rgba(216, 216, 216,.34),
    0 0 0 9px #0F0F0F,
    0 0 0 10px rgba(208, 208, 208,.20),
    0 0 0 30px #0B0B0B,
    0 0 0 31px rgba(208, 208, 208,.09),
    0 0 0 100vmax rgba(5,4,8,.95);
}
body[data-sp="map"] .sp-glass { opacity: 0; }
.sp-glass.is-exit {
  transition: transform 1s cubic-bezier(.16,.8,.28,1), opacity 1s linear;
}
/* 大气辉光：星球的光顺着窗沿洒进来，下沿最亮 —— 舷窗最像舷窗的一笔 */
.sp-glass__rim { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow:
    inset 0 -28px 46px -22px color-mix(in srgb, var(--accent) 66%, transparent),
    inset 0 16px 32px -20px color-mix(in srgb, var(--accent) 24%, transparent),
    inset 0 0 0 1px rgba(232, 232, 232,.10); }
/* 玻璃反光 */
.sp-glass__sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(114deg, transparent 26%, rgba(240, 240, 240,.055) 40%,
    rgba(240, 240, 240,.018) 47%, transparent 56%); }
/* 窗框铆钉 */
.sp-glass__bolts { position: absolute; inset: -20px; border-radius: inherit; pointer-events: none; }
.sp-glass__bolts i { position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #181818; box-shadow: 0 0 0 1px rgba(208, 208, 208,.26); }
.sp-glass__bolts i:nth-child(1) { left: 13%; top: -2px; }
.sp-glass__bolts i:nth-child(2) { right: 13%; top: -2px; }
.sp-glass__bolts i:nth-child(3) { left: 13%; bottom: -2px; }
.sp-glass__bolts i:nth-child(4) { right: 13%; bottom: -2px; }
.sp-glass__bolts i:nth-child(5) { left: -2px; top: 50%; }
.sp-glass__bolts i:nth-child(6) { right: -2px; top: 50%; }

/* ── 顶栏 ───────────────────────────────────────── */
.sp-hud::before { content: ""; position: absolute; inset: 0; bottom: -38px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,7,11,.96) 0%, rgba(8,7,11,.86) 46%, rgba(8,7,11,.5) 74%, transparent 100%); }
.sp-hud { position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: 16px; padding: 18px 24px; pointer-events: none; }
.sp-hud > * { pointer-events: auto; }
.sp-id { display: flex; align-items: baseline; gap: 10px; }
.sp-mark { width: 9px; height: 9px; border: 1px solid var(--line-3); position: relative; }
.sp-mark::after { content: ""; position: absolute; inset: 2px; background: var(--accent); }
.sp-nm { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); }
.sp-role { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.sp-sp { flex: 1; }
.sp-stat { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4); display: flex; gap: 18px; align-items: center; }
.sp-stat b { color: var(--ink-2); font-weight: 500; }

.sp-scene { position: fixed; inset: 0; z-index: 10; }

/* ── 开场 ───────────────────────────────────────── */
#sp-intro { z-index: 55; display: grid; place-items: center; }
.sp-txt { position: relative; text-align: center; max-width: 640px; padding: 0 24px;
  opacity: var(--to, 1); transform: translateY(calc(var(--ty, 0) * 1px)); }
.sp-l { display: block; opacity: 0; transform: translateY(10px); animation: sp-up .9s var(--e) forwards; }
.sp-l1 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--ink-4); animation-delay: .4s; }
.sp-l2 { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4.6vw, 44px); color: var(--ink);
  letter-spacing: -.015em; line-height: 1.32; margin: 20px 0 14px; animation-delay: .9s; }
.sp-l3 { font-size: 14.5px; color: var(--ink-2); line-height: 1.9; animation-delay: 1.4s; }
@keyframes sp-up { to { opacity: 1; transform: none; } }
.sp-gauge { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%);
  display: flex; gap: 26px; font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4); opacity: 0; animation: sp-up .8s var(--e) 1.9s forwards; }
.sp-gauge b { color: var(--ink-2); font-weight: 400; }
.sp-scroll { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-4);
  opacity: 0; animation: sp-up .6s var(--e) 2.3s forwards; pointer-events: auto;
  display: flex; align-items: center; gap: 9px; }
.sp-scroll:hover { color: var(--ink-2); }
.sp-scroll i { display: block; width: 1px; height: 15px; background: currentColor; animation: sp-drop 1.7s var(--e) infinite; }
@keyframes sp-drop { 0%{transform:translateY(-5px);opacity:0} 40%{opacity:1} 100%{transform:translateY(7px);opacity:0} }
.sp-bar { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); width: 150px; height: 1px;
  background: var(--line); overflow: hidden; }
.sp-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--line-3); }

/* ── 星图 ───────────────────────────────────────── */
#sp-map { cursor: grab; }
#sp-map.is-drag { cursor: grabbing; }
.sp-world { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }

.sp-core { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); pointer-events: none;
  z-index: 2; display: grid; place-items: center; width: 0; height: 0; }
.sp-core__b { width: 12px; height: 12px; background: var(--ink); border-radius: 50%; grid-area: 1/1; }
.sp-core__r1, .sp-core__r2 { grid-area: 1/1; border-radius: 50%; border: 1px solid var(--line-2); }
.sp-core__r1 { width: 42px; height: 42px; }
.sp-core__r2 { width: 74px; height: 74px; border-style: dashed; border-color: var(--line);
  animation: sp-spin 60s linear infinite; }
@keyframes sp-spin { to { transform: rotate(360deg); } }
.sp-core__lab { grid-area: 1/1; transform: translateY(58px); white-space: nowrap; text-align: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-4); }

.sp-orbit { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  border: 1px solid var(--line); border-radius: 50%; pointer-events: none; }
.sp-orbit__tag { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); padding: 0 11px;
  background: var(--void); font-family: var(--mono); font-size: 10px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

/* 行星：平面地貌 —— 硬边晨昏线 + 各自的表面纹样 + 环。
   点阵图标从星球身上挪进了标签，星球才读得出是星球，不是一个圆形图标容器。 */
.sp-pl { position: absolute; left: 0; top: 0; width: var(--d2); height: var(--d2);
  transform: translate(-50%, -50%); cursor: pointer; z-index: 4; }
.sp-pl__disc { position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: var(--cq, var(--c)); box-shadow: 0 0 0 1px rgba(8,7,11,.92); }
/* 晨昏线：一个偏出去的大圆，硬边两色阶 —— 平面画法的球体，不是渐变 */
.sp-pl__term { position: absolute; left: 44%; top: 40%; width: 150%; height: 150%;
  border-radius: 50%; background: color-mix(in srgb, var(--cq, var(--c)) 46%, #08070B); }
/* 表面纹样：四种地貌轮着来，7 颗星不至于长得一模一样 */
.sp-pl__pat { position: absolute; inset: 0; }
.sp-pl--banded .sp-pl__pat {
  background: linear-gradient(180deg, transparent 0 15%,
    color-mix(in srgb, var(--cq, var(--c)) 74%, #08070B) 15% 22%, transparent 22% 40%,
    color-mix(in srgb, var(--cq, var(--c)) 90%, #ffffff) 40% 46%, transparent 46% 65%,
    color-mix(in srgb, var(--cq, var(--c)) 70%, #08070B) 65% 73%, transparent 73%); }
.sp-pl--cratered .sp-pl__pat {
  background:
    radial-gradient(circle at 32% 60%, color-mix(in srgb, var(--cq, var(--c)) 62%, #08070B) 0 13%, transparent 13%),
    radial-gradient(circle at 63% 33%, color-mix(in srgb, var(--cq, var(--c)) 66%, #08070B) 0 9%, transparent 9%),
    radial-gradient(circle at 70% 71%, color-mix(in srgb, var(--cq, var(--c)) 58%, #08070B) 0 7%, transparent 7%),
    radial-gradient(circle at 44% 24%, color-mix(in srgb, var(--cq, var(--c)) 72%, #08070B) 0 5%, transparent 5%); }
.sp-pl--capped .sp-pl__pat {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cq, var(--c)) 84%, #ffffff) 0 12%, transparent 12% 88%,
      color-mix(in srgb, var(--cq, var(--c)) 86%, #ffffff) 88% 100%),
    radial-gradient(ellipse 62% 20% at 50% 52%, color-mix(in srgb, var(--cq, var(--c)) 66%, #08070B) 0 100%, transparent 100%); }
.sp-pl--ringed .sp-pl__pat {
  background: linear-gradient(180deg, transparent 0 43%,
    color-mix(in srgb, var(--cq, var(--c)) 78%, #08070B) 43% 55%, transparent 55%); }
/* 行星环：后半圈在星球后面，前半圈压在星球上 */
.sp-pl__belt, .sp-pl__belt2 { position: absolute; left: 50%; top: 50%;
  width: 208%; height: 208%; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-15deg) scaleY(.23);
  border: 2px solid color-mix(in srgb, var(--c) 62%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 13%, transparent); }
.sp-pl__belt { z-index: 0; }
.sp-pl__belt2 { z-index: 3; clip-path: inset(50% 0 0 0); }
.sp-pl:not(.sp-pl--ringed) .sp-pl__belt,
.sp-pl:not(.sp-pl--ringed) .sp-pl__belt2 { display: none; }
/* 网点当质感，不当阴影 */
.sp-pl__dith { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(8,7,11,.62) 1.05px, transparent 1.15px);
  background-size: 3px 3px; }
html.sp-nodots .sp-pl__dith { opacity: 0; }
/* 受光边 */
.sp-pl__disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 2;
  box-shadow: inset 1.5px 1.5px 0 color-mix(in srgb, var(--cq, var(--c)) 52%, #ffffff),
              inset -1px -1px 0 rgba(8,7,11,.55); }
/* 选中环 */
.sp-pl__ring { position: absolute; inset: -26%; border-radius: 50%; border: 1px solid var(--c);
  opacity: 0; transition: opacity .2s linear; z-index: 4; }
.sp-pl__ring::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px dashed var(--line); }
.sp-pl:hover .sp-pl__ring, .sp-pl.on .sp-pl__ring { opacity: .85; }
.sp-pl:hover .sp-pl__disc, .sp-pl.on .sp-pl__disc {
  box-shadow: 0 0 0 1px rgba(8,7,11,.92), 0 0 0 3px color-mix(in srgb, var(--c) 42%, transparent); }
.sp-pl--f::before { content: ""; position: absolute; inset: -36%; border-radius: 50%;
  border: 1px solid var(--line); opacity: .7; }
.sp-pl--soon { opacity: .45; }


/* ── 宇航员：屏幕空间自由漫游，不跟星图的平移缩放 ── */
.sp-as { position: fixed; left: 0; top: 0; width: 56px; height: 70px; z-index: 52; cursor: pointer;
  transform: translate(-50%, -50%); will-change: transform; }
.sp-as.is-focus { z-index: 62; }
.sp-as::before { content: ""; position: absolute; inset: -26px; border-radius: 50%; }
.sp-as svg { width: 100%; height: 100%; overflow: visible; }
.sp-as__armR { transform-origin: 53px 40px; transition: transform .25s var(--e); }
.sp-as:hover .sp-as__armR, .sp-as.talk .sp-as__armR { animation: sp-wave .62s ease-in-out infinite alternate; }
@keyframes sp-wave { from { transform: rotate(0deg); } to { transform: rotate(-46deg); } }
.sp-as__hint { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); opacity: 0; transition: opacity .2s linear; }
.sp-as:hover .sp-as__hint { opacity: 1; }
/* 安全绳：另一头拴在中心那颗星上（长度和角度由 space.js 每帧算） */
.sp-as__tether { position: absolute; left: 50%; top: 50%; width: 1px; height: 130px;
  background: repeating-linear-gradient(to bottom, var(--line-2) 0 4px, transparent 4px 9px);
  transform-origin: top; transform: rotate(24deg); pointer-events: none; opacity: .55;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 38%, rgba(0,0,0,.25) 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 38%, rgba(0,0,0,.25) 100%); }
body[data-sp="map"] .sp-as__tether { opacity: .42; }
body.sp-talking .sp-as__tether { opacity: .7; }

/* 对话气泡 */
.sp-bub { position: fixed; z-index: 64; width: 372px; background: var(--hull);
  border: 1px solid var(--line-2); padding: 16px 17px 15px; display: none; }
.sp-bub.on { display: block; }
.sp-bub::before { content: ""; position: absolute; left: -7px; top: 26px; width: 12px; height: 12px;
  background: var(--hull); border-left: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  transform: rotate(45deg); }
.sp-bub__k { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.sp-bub__t { font-size: 14px; line-height: 1.85; color: var(--ink-2); margin: 9px 0 13px; }
.sp-bub__t strong { color: var(--ink); font-weight: 600; }
/* 对话流：一条一条讲，右下角箭头推进 */
.sp-bub__log { max-height: 46vh; overflow-y: auto; scrollbar-width: none; padding-right: 2px; }
.sp-bub__log::-webkit-scrollbar { display: none; }
.sp-bub__line { padding: 12px 0 0; }
.sp-bub__line:first-child { padding-top: 4px; }
.sp-bub__line + .sp-bub__line { border-top: 1px solid var(--line); margin-top: 12px; }
.sp-bub__q {
  display: block; margin-bottom: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--accent);
}
.sp-bub__q::before { content: "▸ "; }
.sp-bub__a { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--ink); }
.sp-bub__a strong { color: var(--ink); font-weight: 600; }
.sp-bub__foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.sp-bub__dots { display: flex; gap: 5px; flex: 1; }
.sp-bub__dots i { width: 5px; height: 5px; border: 1px solid var(--line-3);
  transition: background .2s linear, border-color .2s linear; }
.sp-bub__dots i.on { background: var(--accent); border-color: var(--accent); }
.sp-bub__next {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: none; cursor: pointer;
  transition: border-color .18s linear, background .18s linear;
}
.sp-bub__next:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sp-bub__back {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: none; cursor: pointer;
  transition: border-color .18s linear, background .18s linear, opacity .18s linear;
}
.sp-bub__back:hover:not(:disabled) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sp-bub__back i { display: block; width: 8px; height: 8px;
  border-left: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(45deg) translate(1px, -1px); }
.sp-bub__back:hover:not(:disabled) i { border-color: var(--accent); }
.sp-bub__back:disabled { opacity: .28; cursor: default; }
.sp-bub__next i { display: block; width: 8px; height: 8px;
  border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(-45deg) translate(-1px, -1px);
  animation: sp-nudge 1.8s var(--e) infinite; }
.sp-bub__next:hover i { border-color: var(--accent); }
.sp-bub__next.is-end i { transform: rotate(135deg); animation: none; }
@keyframes sp-nudge {
  0%, 100% { transform: rotate(-45deg) translate(-1px, -1px); }
  50%      { transform: rotate(-45deg) translate(1px, 1px); }
}
html.sp-lowmo .sp-bub__next i { animation: none; }
@media (prefers-reduced-motion: reduce) { .sp-bub__next i { animation: none; } }
.sp-bub__x { position: absolute; top: 9px; right: 11px; font-family: var(--mono); font-size: 14px;
  color: var(--ink-4); width: 22px; height: 22px; text-align: center; line-height: 22px; }
.sp-bub__x:hover { color: var(--ink); }
.sp-bub__more { display: block; margin-top: 12px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line);
  padding: 9px 11px; text-align: center; transition: .15s linear; }
.sp-bub__more:hover { border-color: var(--accent); color: var(--ink); }

/* ── 遥测卡 ─────────────────────────────────────── */
.sp-tele { position: fixed; z-index: 59; width: 300px; pointer-events: none; background: var(--hull);
  border: 1px solid var(--line-2); padding: 15px 16px 14px; opacity: 0; transition: opacity .15s linear; }
.sp-tele.on { opacity: 1; }
.sp-tele::before { content: ""; position: absolute; left: -1px; top: -1px; width: 3px; height: 26px; background: var(--c); }
.sp-tele__tag { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.sp-tele__t { font-family: var(--display); font-weight: 700; font-size: 18.5px; color: var(--ink); margin: 7px 0 4px; line-height: 1.35; }
.sp-tele__s { font-size: 13.5px; color: var(--ink-3); line-height: 1.6; margin-bottom: 12px; }
.sp-tele__grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.sp-tele__row { display: flex; justify-content: space-between; gap: 12px; background: var(--void); padding: 6px 9px; }
.sp-tele__k { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.sp-tele__v { font-family: var(--mono); font-size: 11px; color: var(--ink); }
.sp-tele__go { margin-top: 11px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); }

/* ── 星区清单（HUD） ────────────────────────────── */
.sp-mf { position: fixed; left: 44px; top: 50%; transform: translateY(-50%); z-index: 57; width: 306px;
  padding-left: 15px; border-left: 1px solid var(--line-2); transition: opacity .45s var(--e); }
body[data-sp="cabin"] .sp-mf { opacity: 0; pointer-events: none; }
.sp-mf::before, .sp-mf::after { content: ""; position: absolute; left: -1px; width: 11px; height: 1px; background: var(--line-3); }
.sp-mf::before { top: 0; }
.sp-mf::after { bottom: 0; }
.sp-mf__h { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 12px; }
.sp-mf__h b { margin-left: auto; color: var(--ink-3); font-weight: 400; letter-spacing: .1em; }
.sp-mf__gh { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); margin: 13px 0 5px; }
.sp-mf__gh s { flex: 1; height: 1px; background: var(--line); text-decoration: none; }
.sp-mf__i { display: flex; align-items: baseline; gap: 11px; width: calc(100% + 16px); margin-left: -8px;
  padding: 7px 10px 7px 8px; text-align: left;
  font-family: var(--display); font-size: 13px; line-height: 1.55; color: var(--ink-3);
  transition: color .15s linear, background .15s linear; }
.sp-mf__i:hover, .sp-mf__i.on {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.sp-mf__i:hover span, .sp-mf__i.on span { color: var(--ink); }
.sp-mf__i[disabled] { color: var(--ink-4); cursor: default; opacity: .6; }
.sp-mf__n { font-family: var(--mono); font-size: 11px; color: var(--ink-4); flex: none; transition: color .15s linear; }
.sp-mf__i:hover .sp-mf__n, .sp-mf__i.on .sp-mf__n { color: var(--c); }
.sp-mf__i s { flex: none; width: 5px; height: 5px; border: 1px solid currentColor; text-decoration: none;
  transform: translateY(-2px); transition: .15s linear; }
.sp-mf__i.is-f s { background: var(--c); border-color: var(--c); }
.sp-mf__i:hover s, .sp-mf__i.on s { background: var(--c); border-color: var(--c); }
.sp-mf__i span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }

#sp-lead { position: fixed; inset: 0; z-index: 56; pointer-events: none; opacity: 0; transition: opacity .15s linear; }
#sp-lead.on { opacity: 1; }
#sp-lead line { stroke: var(--c); stroke-width: 1; stroke-dasharray: 3 4; }
#sp-lead circle { fill: none; stroke: var(--c); stroke-width: 1; }

.sp-cruise { position: fixed; right: 26px; bottom: 30px; z-index: 57; font-family: var(--mono); font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); pointer-events: none;
  transition: opacity .4s; text-align: right; line-height: 2; }
body[data-sp="cabin"] .sp-cruise { opacity: 0; }

/* 对话时把星图压下去 */
body.sp-talking .sp-mf, body.sp-talking .sp-cruise { opacity: 0; pointer-events: none; }
body.sp-talking .sp-pl { opacity: .22; pointer-events: none; }
body.sp-talking .sp-orbit, body.sp-talking .sp-core { opacity: .35; }
.sp-mf, .sp-pl, .sp-orbit, .sp-core { transition: opacity .45s var(--e); }

/* ── 跃迁 ───────────────────────────────────────── */
#sp-warp { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0; }
#sp-warp.on { opacity: 1; }
.sp-warp__disc { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; border-radius: 50%; background: var(--c); }
.sp-warp__lines { position: absolute; inset: 0; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(236, 236, 236,.55) 0deg .12deg, transparent .12deg 1.7deg);
  -webkit-mask: radial-gradient(circle, transparent 6%, #000 55%, transparent 92%);
  mask: radial-gradient(circle, transparent 6%, #000 55%, transparent 92%); }

/* ── 着陆后：阅读页的地平线 + 舱框 ──────────────── */
.sp-horizon { position: fixed; left: 50%; top: 82vh; width: 300vw; height: 300vw;
  transform: translateX(-50%); border-radius: 50%; z-index: 0; pointer-events: none; display: none;
  background: color-mix(in srgb, var(--pc, var(--accent)) 14%, #0A0809);
  border-top: 1px solid color-mix(in srgb, var(--pc, var(--accent)) 40%, transparent); }
body.is-read .sp-horizon { display: block; }

@media (max-width: 1180px) { .sp-mf { display: none; } }
@media (max-width: 900px) {
  .sp-glass { inset: 22px; border-radius: 110px / 86px;
    box-shadow: 0 0 0 2px rgba(208, 208, 208,.06), 0 0 0 100vmax rgba(6,5,9,.9); }
  .sp-rule { display: none; }
  .sp-tele { width: 250px; }
  .sp-bub { width: min(320px, calc(100vw - 40px)); }
}
@media (max-width: 760px) {
  .sp-world { display: none; }
  .sp-mf { display: block; left: 14px; right: 14px; top: 88px; bottom: 14px; transform: none; width: auto;
    border-left: 0; border: 1px solid var(--line); padding: 16px; overflow: auto; }
  .sp-mf::before, .sp-mf::after { display: none; }
  .sp-mf__i { font-size: 14px; padding: 6px 0; }
  .sp-mf__gh { font-size: 9.5px; margin: 16px 0 6px; }
  .sp-cruise { display: none; }
}
@media (max-width: 640px) {
  .sp-role, .sp-stat { display: none; }
  .sp-nm { font-size: 13px; }
  .sp-gauge { gap: 14px; font-size: 8px; }
}
html.sp-lowmo .sp-grain, html.sp-lowmo .sp-core__r2, html.sp-lowmo .sp-scroll i { animation: none; }

/* 落地态用太空 HUD，阅读态用原来的 chrome */
body:not(.is-read) .chrome { display: none !important; }

/* ============================================================
   暗色化补丁 —— 浅色版里「深底浅字」的强调块，在暗底上会翻成刺眼的亮块。
   小胶囊保留反白（那是最强强调），整条 / 整块的改成暗底 + 品牌色。
   ============================================================ */
body.is-read .stage { z-index: 1; }        /* 让地平线留在正文底下 */

body.is-read .prac-phase {
  background: color-mix(in srgb, var(--tip, var(--accent)) 16%, var(--paper-2));
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
body.is-read .rstep--end {
  background: color-mix(in srgb, var(--tip, var(--accent)) 30%, var(--paper-2));
  color: var(--ink);
}
body.is-read .next-proj {
  background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
body.is-read .sec-down__cue,
body.is-read .read__cue-t,
body.is-read .agent-tip {
  background: var(--paper-2); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
body.is-read .rez__dl { background: var(--accent); color: #08070B; }
body.is-read .agent-fab { background: var(--paper-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }

/* 内嵌原型的白色视口是有意保留的 —— 浅色文件裱在暗色控制台上。
   给它一圈边和一点内缩，让"裱"这件事看得出来。 */
body.is-read .art__viewport,
body.is-read .embed--mac .embed__stack { box-shadow: 0 0 0 1px rgba(0,0,0,.5); }

/* 阅读态顶栏：浅色版那个胶囊是半透明的，暗底上正文会从底下透出来 —— 改成实心 */
body.is-read .chrome { background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
body.is-read .anchors__panel { background: var(--paper); }

/* ============================================================
   舱内首屏 —— 加厚的 HUD
   ============================================================ */
/* 窗外的星球：一颗淡粉的球，视角慢慢漂 —— 有时多露出一些球面，有时沉下去、偏到一侧。
   表面靠晨昏线和一点纹理在转，不用色带渐变。 */
.sp-limb { position: fixed; left: 50%; top: 72vh; width: 280vw; height: 280vw;
  transform: translate(-50%, var(--limb, 0px)); border-radius: 50%;
  z-index: 2; pointer-events: none; opacity: var(--limbo, 1);
  transition: opacity .5s linear; }
.sp-limb.is-exit { transition: transform 1s cubic-bezier(.16,.8,.28,1), opacity 1s linear; }
.sp-limb__drift { position: absolute; inset: 0; border-radius: 50%;
  will-change: transform; animation: sp-drift 84s ease-in-out infinite;
  background:
    radial-gradient(ellipse 78% 62% at 34% 24%,
      color-mix(in srgb, var(--pc, var(--accent)) 42%, #171214) 0%,
      color-mix(in srgb, var(--pc, var(--accent)) 26%, #100D0E) 46%,
      color-mix(in srgb, var(--pc, var(--accent)) 16%, #0A0809) 82%);
  border-top: 1px solid color-mix(in srgb, var(--pc, var(--accent)) 46%, rgba(255, 244, 247, .30));
  box-shadow:
    0 -16px 44px -10px color-mix(in srgb, var(--pc, var(--accent)) 40%, transparent),
    0 -4px 14px -2px color-mix(in srgb, #F2DCE2 14%, transparent); }
/* 大气层：贴着可见边缘那道淡粉亮弧 */
.sp-limb__drift::before { content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border-top: 1.5px solid color-mix(in srgb, var(--pc, var(--accent)) 38%, rgba(255, 246, 249, .46));
  box-shadow: 0 -12px 32px -8px color-mix(in srgb, var(--pc, var(--accent)) 34%, transparent); }
/* 晨昏线慢慢转过可见的那一弧 —— 这是自转，不是换色 */
.sp-limb__spin { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  opacity: .62; will-change: transform;
  background:
    radial-gradient(circle at 30% 16%, rgba(8,8,8,.35) 0 1.8%, transparent 1.9%),
    radial-gradient(circle at 58% 10%, rgba(8,8,8,.22) 0 1.1%, transparent 1.2%),
    radial-gradient(circle at 46% 6%, rgba(255,255,255,.07) 0 2.4%, transparent 2.5%),
    linear-gradient(108deg,
      transparent 38%,
      rgba(8,8,8,.28) 58%,
      rgba(8,8,8,.55) 82%);
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%,
      transparent 0 83%, rgba(0,0,0,.45) 89%, #000 94% 97.6%, rgba(0,0,0,.30) 99.4%, transparent 100%);
  mask: radial-gradient(circle closest-side at 50% 50%,
      transparent 0 83%, rgba(0,0,0,.45) 89%, #000 94% 97.6%, rgba(0,0,0,.30) 99.4%, transparent 100%);
  animation: sp-turn 110s linear infinite; }
.sp-limb__drift::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background-image: radial-gradient(rgba(8,7,11,.88) 1.05px, transparent 1.15px);
  background-size: 3px 3px; }
@keyframes sp-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  24%      { transform: translate(5.2%, -7.5%) rotate(2.2deg); }
  52%      { transform: translate(-4.8%, -12%) rotate(-1.6deg); }
  76%      { transform: translate(3.4%, -4%) rotate(1.1deg); }
}
@keyframes sp-turn { to { transform: rotate(360deg); } }
html.sp-lowmo .sp-limb__drift, html.sp-lowmo .sp-limb__spin { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .sp-limb__drift, .sp-limb__spin { animation: none; }
}
body[data-sp="map"] .sp-limb, body.is-read .sp-limb { opacity: 0; }
html.sp-nodots .sp-limb__drift::after { opacity: 0; }

/* 顶部走马灯 */
.sp-ticker { position: fixed; left: 0; right: 0; top: 76px; z-index: 57; pointer-events: none;
  display: flex; justify-content: center; gap: 30px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-4); opacity: 0; animation: sp-up .8s var(--e) .25s forwards; }
.sp-ticker s { text-decoration: none; color: var(--line-3); }
body[data-sp="map"] .sp-ticker, body.is-read .sp-ticker { display: none; }

/* 左右读数柱 */
.sp-rd { position: fixed; top: 50%; transform: translateY(-50%); z-index: 57; pointer-events: none;
  display: grid; gap: 13px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; }
.sp-rd--l { left: 62px; }
.sp-rd--r { right: 62px; text-align: right; }
body[data-sp="map"] .sp-rd, body.is-read .sp-rd { display: none; }
.sp-rd__row { display: grid; grid-template-columns: 44px auto; gap: 12px; align-items: baseline;
  opacity: 0; animation: sp-up .55s var(--e) forwards; }
.sp-rd--r .sp-rd__row { grid-template-columns: auto 62px; }
.sp-rd__k { color: var(--ink-4); }
.sp-rd__v { color: var(--ink-2); }
.sp-rd__v.ok { color: var(--accent); }
.sp-rd__bar { height: 3px; background: var(--line); position: relative; align-self: center; }
.sp-rd__bar i { position: absolute; inset: 0 auto 0 0; width: var(--w, 50%); background: var(--line-3); }

/* 底部姿态尺 */
.sp-ladder { display: none !important; position: fixed; left: 50%; bottom: 138px; transform: translateX(-50%); z-index: 57;
  width: min(520px, 52vw); pointer-events: none;
  opacity: 0; animation: sp-up .8s var(--e) 1.7s forwards; }
.sp-ladder__bar { height: 1px; background: var(--line-2); position: relative; }
.sp-ladder__bar::before, .sp-ladder__bar::after { content: ""; position: absolute; top: -4px;
  width: 1px; height: 9px; background: var(--line-3); }
.sp-ladder__bar::before { left: 0; }
.sp-ladder__bar::after { right: 0; }
.sp-ladder__ticks { display: flex; justify-content: space-between; margin-top: 0; }
.sp-ladder__ticks i { width: 1px; height: 5px; background: var(--line); }
.sp-ladder__c { position: absolute; left: 50%; top: -13px; transform: translateX(-50%);
  width: 22px; height: 22px; border: 1px solid var(--line-3); border-radius: 50%; }
.sp-ladder__c::before, .sp-ladder__c::after { content: ""; position: absolute; top: 50%;
  width: 8px; height: 1px; background: var(--line-3); }
.sp-ladder__c::before { left: -12px; }
.sp-ladder__c::after { right: -12px; }
body[data-sp="map"] .sp-ladder, body.is-read .sp-ladder { display: none; }

/* 一次性扫描线 */
.sp-sweep { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 59; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(208, 208, 208,.5), transparent);
  animation: sp-sweep 2.2s var(--e) .2s 1 forwards; opacity: 0; }
@keyframes sp-sweep { 0%{transform:translateY(0);opacity:.9} 92%{opacity:.6} 100%{transform:translateY(100vh);opacity:0} }
body[data-sp="map"] .sp-sweep, body.is-read .sp-sweep, html.sp-lowmo .sp-sweep { display: none; }

@media (max-width: 1100px) { .sp-rd { display: none !important; } }
@media (max-width: 760px) {
  .sp-ticker { top: 68px; gap: 14px; font-size: 7.5px; letter-spacing: .18em; }
  .sp-ladder { width: 74vw; bottom: 126px; }
  .sp-big { font-size: 34vw; }
}

/* ============================================================
   光标 —— 瞄准环 + HUD 标签（覆盖浅色版那支箭头）
   ============================================================ */
html.has-cur .cur { --ring: rgba(237, 237, 237, .62); }
html.has-cur.cur-hit .cur { --ring: var(--cursor); }
/* 瞄准环别画在 <svg> 上：那个 svg 带 viewBox，宽度会被自己的固有比例接管，
   给它 width 也扳不回来 —— 量出来是 11×22，圆就成了椭圆。
   索性把箭头整个收掉，环画在 .cur__ibeam 这个普通 span 上，正方形是正方形，
   border-radius:50% 出来就是正圆。（span 在文字态还是那根 I 形光标，见下。） */
.cur__arrow { display: none !important; }
.cur:not(.is-text) .cur__ibeam {
  display: block; position: absolute; left: 0; top: 0;
  width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px;
  border: 1px solid var(--ring); border-radius: 50%;
  background: none; box-shadow: none;
  transition: width .12s linear, height .12s linear, margin .12s linear, border-color .12s linear;
}
html.cur-hit .cur:not(.is-text) .cur__ibeam {
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
}
/* 四个方位刻度 */
.cur::before, .cur::after { content: ""; position: absolute; pointer-events: none; }
.cur::before { left: -20px; top: -1px; width: 40px; height: 1px;
  background: linear-gradient(90deg, var(--ring) 0 7px, transparent 7px 33px, var(--ring) 33px 40px); }
.cur::after { left: -1px; top: -20px; width: 1px; height: 40px;
  background: linear-gradient(180deg, var(--ring) 0 7px, transparent 7px 33px, var(--ring) 33px 40px); }
.cur.is-text::before, .cur.is-text::after { display: none; }
.cur__tag {
  left: 22px; top: 16px;
  padding: 4px 9px;
  border-radius: 0;
  background: rgba(8, 7, 11, .82);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  box-shadow: none;
  font-family: var(--mono); font-size: 9.5px; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase;
}
.cur__tag::before { content: "["; margin-right: 6px; color: var(--line-3); }
.cur__tag::after { content: "]"; margin-left: 6px; color: var(--line-3); }
html.cur-hit .cur__tag { border-color: var(--cursor); color: var(--ink); }
.cur__ibeam {
  width: 1px; height: 22px; margin: -11px 0 0 0;
  background: var(--ink); box-shadow: none; border-radius: 0;
}

/* ── 首屏主体：名字是主角，不是标语 ─────────────── */
.sp-name {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(46px, 8vw, 104px);
  line-height: 1.02; letter-spacing: -.035em;
  color: var(--ink);
  animation-delay: .75s;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.sp-name em {
  font-family: var(--display); font-style: normal; font-weight: 600;
  font-size: clamp(13px, 1.35vw, 19px); letter-spacing: .34em; text-transform: uppercase;
  color: var(--ink-4);
}
.sp-l2b {
  font-family: var(--mono); font-size: clamp(11px, 1.15vw, 13px);
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
  margin-top: 26px; animation-delay: 1.15s;
}
.sp-txt .sp-l3 { margin-top: 16px; max-width: 30em; margin-left: auto; margin-right: auto;
  animation-delay: 1.4s; }

/* 乘员：一格照片位（assets/photo.jpg 放进去就自动显示，没有就是字母牌） */
.sp-rd__row--crew { grid-template-columns: 44px auto; align-items: center; }
.sp-crew { position: relative; display: flex; align-items: center; gap: 11px; }
.sp-crew b, .sp-crew img {
  width: 38px; height: 46px; flex: none;
  border: 1px solid var(--line-2);
}
.sp-crew b {
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: .06em; color: var(--ink-3); background: var(--hull);
}
.sp-crew img { position: absolute; left: 0; top: 0; object-fit: cover; background: var(--hull); }
.sp-crew em {
  font-style: normal; font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}
.sp-rd--r .sp-rd__row { grid-template-columns: auto 84px; }
.sp-rd__k { text-transform: uppercase; }

/* ── 行星常驻标签：这颗星是关于什么的 ───────────── */
.sp-pl__tag {
  position: absolute; left: 50%; top: calc(100% + 13px);
  transform: translateX(-50%);
  white-space: nowrap; pointer-events: none;
  font-family: var(--mono); font-size: 13px; letter-spacing: .12em;
  color: var(--ink-2);
  transition: color .2s linear;
}
.sp-pl__tag::before {
  content: ""; position: absolute; left: 50%; top: -9px;
  width: 1px; height: 6px; background: var(--line-2);
}
.sp-pl:hover .sp-pl__tag, .sp-pl.on .sp-pl__tag { color: var(--ink); }
.sp-pl:hover .sp-pl__tag::before, .sp-pl.on .sp-pl__tag::before { background: var(--c); }
body.sp-talking .sp-pl__tag { opacity: 0; }
@media (max-width: 900px) { .sp-pl__tag { font-size: 11px; letter-spacing: .1em; } }

/* ============================================================
   首屏 v2 —— HUD 式非居中排版 + 打字机
   skill 的 ANTI-CENTER BIAS：VARIANCE 9 不允许居中 hero。
   姓名块压在左下角，读数柱靠右中，中间留给窗外的星球。
   ============================================================ */
#sp-intro { display: block; }
/* 姓名块从左下角挪到中间靠左 —— 舷窗外的景色让给上下两头 */
.sp-txt {
  position: absolute;
  left: clamp(64px, 8vw, 132px);
  top: 50%;
  text-align: left;
  max-width: min(700px, 56vw);
  padding: 0;
  opacity: var(--to, 1);
  transform: translateY(calc(-50% + var(--ty, 0) * 1px));
}
.sp-txt .sp-l1 { color: var(--ink-4); }
.sp-name {
  align-items: flex-start;
  gap: 10px;
  font-size: clamp(52px, 7.4vw, 108px);
  margin: 14px 0 0;
}
.sp-name em { letter-spacing: .3em; }
/* 打字机两行 */
.sp-type { display: block; font-family: var(--mono); margin-top: 20px; min-height: 1.5em; }
.sp-type--role { font-size: clamp(12.5px, 1.35vw, 15.5px); letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); }
.sp-type--bio { font-family: var(--sans); font-size: 17px; line-height: 1.95;
  color: var(--ink-2); margin-top: 12px; max-width: 34em; }
.sp-type b { font-weight: inherit; }
.sp-caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 2px;
  background: currentColor; vertical-align: -.18em; animation: sp-blink 1s steps(1) infinite; }
@keyframes sp-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
.sp-type.done .sp-caret { display: none; }
html.sp-lowmo .sp-caret { animation: none; }

/* ── 玻璃上的 HUD：字不是浮在画面上，是刻在舷窗玻璃上 ──
   一块几乎看不见的磨砂面板 + 上缘高光 + 两只定位角标，
   文字本身给一层朝上的冷刻边和一层朝下的暗影，
   读起来像被舱内灯光从下方打亮的蚀刻字。 */
.sp-txt { isolation: isolate; }
.sp-txt > * { position: relative; z-index: 1; }
.sp-txt::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -40px -150px -46px -42px; border-radius: 2px;
  background:
    linear-gradient(118deg, rgba(243, 243, 243,.075) 0%, rgba(243, 243, 243,.02) 30%, rgba(243, 243, 243,0) 55%),
    linear-gradient(to bottom, rgba(10,8,13,.42), rgba(10,8,13,.12));
  -webkit-backdrop-filter: blur(2.5px) saturate(1.06);
  backdrop-filter: blur(2.5px) saturate(1.06);
  -webkit-mask: radial-gradient(96% 104% at 11% 15%, #000 0 24%, rgba(0,0,0,.6) 54%, rgba(0,0,0,.16) 80%, transparent 95%);
  mask: radial-gradient(96% 104% at 11% 15%, #000 0 24%, rgba(0,0,0,.6) 54%, rgba(0,0,0,.16) 80%, transparent 95%);
  animation: sp-glassbreathe 11s ease-in-out infinite;
}
@keyframes sp-glassbreathe { 0%, 100% { opacity: .9 } 50% { opacity: 1 } }
html.sp-lowmo .sp-txt::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .sp-txt::before { animation: none; } }
/* 上缘和左缘各一道被舱灯擦亮的边，右下角留一只定位角标 —— 玻璃的方向感全在这儿 */
.sp-txt::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -40px -150px -46px -42px;
  background-image:
    linear-gradient(to right, rgba(242, 242, 242,.22), rgba(242, 242, 242,.035) 56%, rgba(242, 242, 242,0) 88%),
    linear-gradient(to bottom, rgba(242, 242, 242,.18), rgba(242, 242, 242,0) 74%),
    linear-gradient(rgba(224, 224, 224,.26), rgba(224, 224, 224,.26)),
    linear-gradient(rgba(224, 224, 224,.26), rgba(224, 224, 224,.26));
  background-repeat: no-repeat;
  background-size: 100% 1px, 1px 100%, 16px 1px, 1px 16px;
  background-position: left top, left top, right 118px bottom, right 118px bottom;
}
.sp-txt .sp-l1 { color: var(--ink-4); }
.sp-name {
  align-items: flex-start;
  gap: 10px;
  font-size: clamp(52px, 7.4vw, 108px);
  margin: 14px 0 0;
}
.sp-name em { letter-spacing: .3em; }
/* 打字机两行 */
.sp-type { display: block; font-family: var(--mono); margin-top: 20px; min-height: 1.5em; }
.sp-type--role { font-size: clamp(12.5px, 1.35vw, 15.5px); letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); }
.sp-type--bio { font-family: var(--sans); font-size: 17px; line-height: 1.95;
  color: var(--ink-2); margin-top: 12px; max-width: 34em; }
.sp-type b { font-weight: inherit; }
.sp-caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 2px;
  background: currentColor; vertical-align: -.18em; animation: sp-blink 1s steps(1) infinite; }
@keyframes sp-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
.sp-type.done .sp-caret { display: none; }
html.sp-lowmo .sp-caret { animation: none; }

/* ── 玻璃上的 HUD：字不是浮在画面上，是刻在舷窗玻璃上 ──
   一块几乎看不见的磨砂面板 + 上缘高光 + 两只定位角标，
   文字本身给一层朝上的冷刻边和一层朝下的暗影，
   读起来像被舱内灯光从下方打亮的蚀刻字。 */
.sp-txt { isolation: isolate; }
.sp-txt > * { position: relative; z-index: 1; }
.sp-txt::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -34px -42px -38px -38px; border-radius: 2px;
  background:
    linear-gradient(116deg, rgba(243, 243, 243,.058) 0%, rgba(243, 243, 243,.016) 34%, rgba(243, 243, 243,0) 58%),
    linear-gradient(to bottom, rgba(10,8,13,.34), rgba(10,8,13,.14));
  -webkit-backdrop-filter: blur(2.5px) saturate(1.06);
  backdrop-filter: blur(2.5px) saturate(1.06);
  box-shadow:
    inset 1px 1px 0 rgba(240, 240, 240,.08),
    inset -1px -1px 0 rgba(240, 240, 240,.028),
    0 24px 60px -30px rgba(0,0,0,.5);
  animation: sp-glassbreathe 11s ease-in-out infinite;
}
@keyframes sp-glassbreathe { 0%, 100% { opacity: .92 } 50% { opacity: 1 } }
html.sp-lowmo .sp-txt::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .sp-txt::before { animation: none; } }
/* 两只定位角标：左上、右下 */
.sp-txt::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -34px -42px -38px -38px;
  background-image:
    linear-gradient(rgba(224, 224, 224,.30), rgba(224, 224, 224,.30)),
    linear-gradient(rgba(224, 224, 224,.30), rgba(224, 224, 224,.30)),
    linear-gradient(rgba(224, 224, 224,.30), rgba(224, 224, 224,.30)),
    linear-gradient(rgba(224, 224, 224,.30), rgba(224, 224, 224,.30));
  background-repeat: no-repeat;
  background-size: 15px 1px, 1px 15px, 15px 1px, 1px 15px;
  background-position: left top, left top, right bottom, right bottom;
}
.sp-txt .sp-l1 {
  color: var(--ink-3);
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 30%, transparent);
}
.sp-name {
  color: color-mix(in srgb, var(--ink) 94%, var(--accent));
  text-shadow:
    0 -1px 0 rgba(245, 245, 245,.26),
    0 1px 0 rgba(6,5,9,.6),
    0 0 24px color-mix(in srgb, var(--accent) 17%, transparent),
    0 0 62px rgba(236, 236, 236,.06);
}
.sp-name em {
  color: var(--ink-4);
  text-shadow: 0 -1px 0 rgba(245, 245, 245,.14), 0 1px 0 rgba(6,5,9,.5);
}
.sp-type--role {
  text-shadow: 0 0 20px color-mix(in srgb, var(--accent) 40%, transparent), 0 1px 0 rgba(6,5,9,.5);
}
.sp-type--bio {
  text-shadow: 0 1px 0 rgba(6,5,9,.55), 0 0 24px rgba(240, 240, 240,.06);
}
.sp-caret { box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); }
@media (max-width: 760px) {
  .sp-txt::before, .sp-txt::after { inset: -22px -30px -24px -18px; }
}

/* 出舱：页面正下方一枚会自己动的箭头，不再是一颗按钮。
   （还是个真 button，键盘和读屏都能用，只是长得像提示。） */
.sp-cta { position: absolute;
  left: 50%; bottom: clamp(34px, 5.5vh, 64px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0; animation: sp-up .6s var(--e) 2.5s forwards; }
.sp-cta__b {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 22px; background: none; border: 0;
  opacity: calc(1 - var(--p, 0) * .8);
}
.sp-chev { display: block; width: 15px; height: 15px;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg);
  animation: sp-chev 3.4s var(--e) infinite; }
.sp-chev:nth-child(2) { margin-top: -9px; opacity: .45; animation-delay: .42s; }
.sp-cta__b:hover .sp-chev { border-color: var(--accent); }
/* 行程更长、停顿更久 —— 原来 1.9s 一来一回，看着像在抖 */
@keyframes sp-chev {
  0%       { transform: rotate(45deg) translate(0, 0); opacity: .35; }
  38%      { transform: rotate(45deg) translate(7px, 7px); opacity: 1; }
  62%      { transform: rotate(45deg) translate(7px, 7px); opacity: .8; }
  100%     { transform: rotate(45deg) translate(0, 0); opacity: .35; }
}
html.sp-lowmo .sp-chev { animation: none; }
@media (prefers-reduced-motion: reduce) { .sp-chev { animation: none; } }
.sp-cta__bar { width: 108px; height: 1px; background: var(--line); overflow: hidden; }
.sp-cta__bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--accent); }
.sp-cta__n { display: none; }

/* 导航栏右上角：简历 + 联系方式，常驻 */
.sp-nav { display: flex; align-items: center; gap: 10px; }
.sp-nav__b {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid var(--line-2); padding: 9px 15px;
  background: none; cursor: pointer; white-space: nowrap;
  transition: color .18s linear, border-color .18s linear, background .18s linear;
}
.sp-nav__b:hover { color: var(--ink); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sp-nav__b--g { border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
@media (max-width: 900px) { .sp-nav__b { font-size: 9px; padding: 7px 10px; letter-spacing: .1em; } }

/* 读数柱：只留右边一列，左下角让给姓名 */
.sp-rd--l { display: none !important; }
.sp-rd--r { right: clamp(104px, 10vw, 172px); top: 46%; gap: 18px; }
.sp-rd--r .sp-rd__row { grid-template-columns: 64px 232px; align-items: baseline; }
.sp-rd__row--crew { align-items: center; }
.sp-rd__row--crew .sp-crew { justify-content: flex-end; }

/* 行星标签里带那枚点阵图标 */
.sp-pl__tag { display: flex; align-items: center; gap: 7px; }
.sp-pl__tag i { display: grid; place-items: center; width: 12px; height: 12px; flex: none; }
.sp-pl__tag i svg { width: 100%; height: 100%; shape-rendering: crispEdges; }
.sp-pl__tag i svg path { fill: var(--c); }

@media (max-width: 1100px) {
  .sp-rd--r { display: none !important; }
  .sp-txt { left: clamp(28px, 6vw, 64px); max-width: min(560px, 76vw); }
  .sp-cta { left: clamp(28px, 6vw, 64px); }
}
@media (max-width: 640px) {
  .sp-name { font-size: clamp(36px, 12vw, 56px); }
  .sp-txt { bottom: 132px; }
  .sp-cta { bottom: 56px; gap: 12px; }
  .sp-cta__bar { width: 74px; }
}

/* ============================================================
   手机：留气氛，去装置
   星场、近黑底、星球边缘、mono 读数留着 —— 这些不占地方，是"在太空里"的全部理由。
   驾驶舱框、玻璃舷窗、梯子、走马灯、读数柱这些在 390px 宽里只是在吃边距，
   而且一个都点不动，全部撤掉。
   ============================================================ */
@media (max-width: 760px) {
  .sp-cockpit, .sp-glass, .sp-ladder, .sp-ticker, .sp-rd { display: none !important; }
  .sp-vig { opacity: .5; }

  /* 顶栏：按钮要按得动 */
  .sp-hud { padding: 0 16px; height: 56px; }
  .sp-nav { gap: 8px; }
  .sp-nav__b { font-size: 11px !important; padding: 0 12px !important; min-height: 40px;
    display: inline-flex; align-items: center; letter-spacing: .08em !important; }

  /* 首屏：字块两边留同样的边，玻璃面板不许出血到屏幕外 */
  .sp-txt { left: 26px; right: 26px; max-width: none; }
  .sp-txt::before, .sp-txt::after { inset: -18px -14px -22px -14px; }
  .sp-name { font-size: clamp(40px, 13vw, 62px); }
  .sp-type--bio { font-size: 15.5px; line-height: 1.85; max-width: none; }
  .sp-type--role { font-size: 12.5px; }
  .sp-cta { left: 50%; transform: translateX(-50%);
    bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }

  /* 宇航员：小一号，只在舱内出现。星图态在手机上只有清单，它飘上去就是挡字 */
  .sp-as { width: 44px; height: 55px; }
  .sp-as__hint { display: none; }
  body[data-sp="map"] .sp-as, body[data-sp="map"] #sp-lead,
  body.is-read .sp-as, body.is-read #sp-lead { display: none !important; }

  /* 星区清单：一行一个项目，按得动，顶到底 */
  .sp-mf { top: 72px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding: 18px 16px; }
  .sp-mf__h { font-size: 10px; letter-spacing: .18em; margin-bottom: 6px; }
  .sp-mf__i { font-size: 15.5px !important; min-height: 48px; padding: 0 !important;
    display: flex; align-items: center; gap: 10px; }
  /* 清单在手机上是唯一的入口，得看得出来能点 */
  .sp-mf__i::after { content: "\203A"; margin-left: auto; font-size: 18px;
    color: var(--ink-4); line-height: 1; padding-left: 10px; }
  .sp-mf__gh { font-size: 10px !important; margin: 20px 0 4px !important; }
}

/* 触摸设备：别留那层默认的高亮方块，也别让整页橡皮筋 */
@media (hover: none) {
  * { -webkit-tap-highlight-color: transparent; }
  body { overscroll-behavior-y: none; }
}

/* ============================================================
   手机星座：宽屏的轨道星图竖过来
   同一批星球，左右错开排成一条，虚线串起来，各自轻微浮动，
   标题和标签外露 —— 不用点进去才知道这颗星是什么。
   ============================================================ */
.sp-cst { display: none; }
@media (max-width: 760px) {
  #sp-mfb { display: none; }                 /* 纯文字清单让位给星座 */
  .sp-cst { display: block; position: relative; padding: 10px 0 28px; }
  .sp-cst__web { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
    overflow: visible; }
  .sp-cst__web path {
    fill: none; stroke: var(--line-2); stroke-width: 1;
    stroke-dasharray: 2 6; stroke-linecap: round;
  }
  .sp-cst__i {
    position: relative; display: block; width: 100%;
    min-height: 96px; padding: 0; margin: 0;
    background: none; border: 0; text-align: left; z-index: 1;
  }
  .sp-cst__i.is-f { min-height: 112px; }
  .sp-cst__i.is-soon { opacity: .5; }

  /* 星球：复用宽屏那套画法，只是不再挂在轨道上 */
  .sp-cst__orb.sp-pl {
    position: absolute; left: var(--x); top: 50%;
    width: var(--d2); height: var(--d2);
    transform: translate(-50%, -50%);
    translate: 0 0;
    animation: sp-bob var(--bob, 6s) var(--e) var(--bd, 0s) infinite alternate;
  }
  @keyframes sp-bob { from { translate: 0 -5px; } to { translate: 0 5px; } }
  html.sp-lowmo .sp-cst__orb.sp-pl { animation: none; }
  @media (prefers-reduced-motion: reduce) { .sp-cst__orb.sp-pl { animation: none; } }

  /* 标题和标签：直接写在星球右边 */
  .sp-cst__lab {
    position: absolute; top: 50%; transform: translateY(-50%);
    left: calc(var(--x) + var(--d2) / 2 + 16px); right: 0;
    display: grid; gap: 3px;
  }
  .sp-cst__k {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--ink-4);
  }
  .sp-cst__k i { display: grid; place-items: center; width: 11px; height: 11px; flex: none; }
  .sp-cst__k i svg { width: 100%; height: 100%; shape-rendering: crispEdges; }
  .sp-cst__k i svg path { fill: var(--c); }
  .sp-cst__lab b {
    font-family: var(--display); font-weight: 700; font-size: 15.5px;
    line-height: 1.35; color: var(--ink); letter-spacing: .01em;
  }
  .sp-cst__lab em {
    font-style: normal; font-family: var(--mono); font-size: 10px;
    letter-spacing: .16em; color: var(--ink-4);
  }
  .sp-cst__i:active .sp-cst__lab b { color: var(--accent); }

  /* 星球在手机上只有 52-68px，宽屏那档网点会把七颗糊成同一个网球 */
  .sp-cst__orb .sp-pl__dith { background-size: 2.4px 2.4px; opacity: .5; }
  .sp-cst__orb .sp-pl__disc::after {
    box-shadow: inset 1px 1px 0 color-mix(in srgb, var(--cq, var(--c)) 62%, #ffffff),
                inset -1px -1px 0 rgba(8,7,11,.6);
  }
  /* 明暗拉开一档：近的亮、远的暗，一竖排才有纵深 */
  .sp-cst__i:nth-child(3n)   .sp-cst__orb { filter: brightness(1.18); }
  .sp-cst__i:nth-child(3n+1) .sp-cst__orb { filter: brightness(.82); }

  /* 清单头留着当这一屏的抬头 */
  .sp-mf__h { font-size: 10px; letter-spacing: .2em; margin-bottom: 10px; }
}