/* ============================================================
   星投官网 · 版本脉冲站  共享样式  /assets/site.css
   深空蓝黑底场 / 观测舱蓝模块 / 脉冲青信号 / 警示橙归档
   ============================================================ */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; background:#070B18; }
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
img,svg,video{ display:block; max-width:100%; }
table{ border-collapse:collapse; width:100%; }
hr{ border:0; margin:0; }

/* ---------- 2. 变量 ---------- */
:root{
  --void:#070B18;
  --cabin:#0E1730;
  --cabin-hi:#15234A;
  --silver:#C9D4E6;
  --pulse:#29E0C8;
  --amber:#FF7A3D;
  --cream:#F3E6CF;
  --inkbrown:#2A1A12;
  --violet:#7A6CFF;
  --alert:#FF4D5E;
  --muted:#6B7890;

  --line:rgba(201,212,230,.13);
  --line-strong:rgba(201,212,230,.26);

  --font-head:'HarmonyOS Sans SC','Noto Sans SC',system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Source Han Sans SC','Noto Sans SC',system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --shell:1240px;
  --gutter:clamp(16px,4vw,44px);

  --r-xl:30px;
  --r-lg:20px;
  --r-md:14px;
  --r-sm:9px;

  --shadow-card:0 26px 60px -46px rgba(0,0,0,.95);
  --ease:cubic-bezier(.22,.68,.32,1);
}

/* ---------- 3. 基底与天文台光场 ---------- */
body{
  min-height:100vh;
  background:transparent;
  color:var(--silver);
  font-family:var(--font-body);
  font-size:clamp(15px,.32vw + 13.6px,16.5px);
  line-height:1.85;
  letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(920px 620px at 8% -12%, rgba(41,224,200,.11), transparent 62%),
    radial-gradient(760px 520px at 96% 2%, rgba(122,108,255,.13), transparent 60%),
    radial-gradient(1100px 720px at 50% 118%, rgba(255,122,61,.07), transparent 66%);
}
main{ display:block; }

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  font-weight:800;
  line-height:1.22;
  letter-spacing:-.012em;
  color:#F2F6FF;
}
h1{ font-size:clamp(1.95rem,4.6vw,3.35rem); }
h2{ font-size:clamp(1.45rem,2.8vw,2.1rem); }
h3{ font-size:clamp(1.12rem,1.7vw,1.4rem); }
p{ max-width:76ch; }
strong{ color:#EDF3FF; font-weight:700; }
::selection{ background:rgba(41,224,200,.28); color:#fff; }

:focus-visible{
  outline:2px solid var(--pulse);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- 4. 跳转链接 ---------- */
.skip-link{
  position:fixed;
  top:0;
  left:50%;
  z-index:200;
  transform:translate(-50%,-130%);
  padding:11px 22px;
  border-radius:0 0 14px 14px;
  background:var(--pulse);
  color:#04191A;
  font-family:var(--font-head);
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  transition:transform .22s var(--ease);
}
.skip-link:focus{ transform:translate(-50%,0); }

/* ---------- 5. 头部骨架 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:90;
  width:100%;
  background:linear-gradient(180deg,rgba(7,11,24,.985),rgba(7,11,24,.9));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* ---------- 6. 版本脉冲带 ---------- */
.pulse-bar{
  position:relative;
  width:100%;
  padding:0 var(--gutter);
  background:linear-gradient(90deg,rgba(255,122,61,.12),rgba(41,224,200,.09) 46%,rgba(122,108,255,.12));
  border-bottom:1px solid var(--line);
}
.pulse-row{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  padding:7px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
}
.pulse-toggle{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:4px 4px 4px 0;
  border-radius:var(--r-sm);
  color:rgba(201,212,230,.78);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  transition:color .2s;
}
.pulse-toggle:hover{ color:#fff; }
.pulse-dot{
  flex-shrink:0;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--pulse);
  animation:pulseDot 3s var(--ease) infinite;
}
@keyframes pulseDot{
  0%,100%{ box-shadow:0 0 0 0 rgba(41,224,200,.5), 0 0 10px rgba(41,224,200,.75); }
  50%{ box-shadow:0 0 0 6px rgba(41,224,200,0), 0 0 17px rgba(41,224,200,1); }
}
.pulse-ver{ color:var(--amber); font-weight:700; letter-spacing:.14em; }
.pulse-sep{ color:rgba(107,120,144,.85); }
.pulse-time{ color:rgba(201,212,230,.6); }
.pulse-chevron{
  width:7px;
  height:7px;
  margin-left:1px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .28s var(--ease);
}
.pulse-toggle[aria-expanded="true"] .pulse-chevron{ transform:rotate(-135deg) translate(-1px,-1px); }

.pulse-archive{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:4px 13px;
  border-radius:999px;
  border:1px solid rgba(255,122,61,.5);
  color:var(--amber);
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.18em;
  transition:background-color .22s,color .22s,border-color .22s;
}
.pulse-archive::after{
  content:'';
  width:5px;
  height:5px;
  border-right:1px solid currentColor;
  border-top:1px solid currentColor;
  transform:rotate(45deg);
}
.pulse-archive:hover{ background:var(--amber); border-color:var(--amber); color:#1B0A02; }

.pulse-detail{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  padding:0 0 16px;
}
.pulse-detail[hidden]{ display:none; }
.pulse-detail-inner{
  padding-top:14px;
  display:grid;
  gap:11px;
  border-top:1px dashed rgba(201,212,230,.16);
  animation:detailIn .34s var(--ease) both;
}
@keyframes detailIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}
.pulse-lead{
  font-size:13.5px;
  line-height:1.85;
  color:rgba(201,212,230,.82);
  max-width:76ch;
}
.pulse-badge{
  display:inline-block;
  margin-right:9px;
  padding:1px 8px;
  border-radius:4px;
  background:rgba(41,224,200,.14);
  color:var(--pulse);
  font-size:10.5px;
  letter-spacing:.16em;
  vertical-align:1px;
}
.pulse-list{ display:flex; flex-wrap:wrap; gap:6px 24px; }
.pulse-list li{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12.5px;
  color:rgba(201,212,230,.68);
}
.pulse-list .mono{ color:var(--violet); font-size:10.5px; letter-spacing:.1em; }
.pulse-more{
  justify-self:start;
  padding-bottom:2px;
  border-bottom:1px solid rgba(122,108,255,.45);
  color:var(--violet);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  transition:color .2s,border-color .2s;
}
.pulse-more:hover{ color:#A79EFF; border-color:#A79EFF; }

.scroll-rail{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  overflow:hidden;
  background:rgba(201,212,230,.07);
}
.scroll-rail span{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,var(--pulse),var(--amber));
  transition:width .12s linear;
}

/* ---------- 7. 悬浮胶囊导航 ---------- */
.nav-dock{
  width:100%;
  padding:11px var(--gutter) 12px;
  display:flex;
  justify-content:center;
}
.nav-capsule{
  width:100%;
  max-width:var(--shell);
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 8px 7px 12px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(21,35,74,.92),rgba(14,23,48,.95));
  border:1px solid var(--line-strong);
  box-shadow:0 22px 46px -34px rgba(0,0,0,.95), inset 0 1px 0 rgba(201,212,230,.07);
  transition:border-color .3s,box-shadow .3s;
}
.brand{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 10px 4px 4px;
  border-radius:999px;
}
.brand-mark{
  position:relative;
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid rgba(41,224,200,.5);
  background:radial-gradient(circle at 50% 50%,rgba(41,224,200,.3),transparent 66%);
}
.brand-mark::after{
  content:'';
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:var(--pulse);
  box-shadow:0 0 10px rgba(41,224,200,.9);
  animation:brandPulse 3.2s var(--ease) infinite;
}
@keyframes brandPulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(.68); opacity:.72; }
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{
  font-family:var(--font-head);
  font-size:14.5px;
  font-weight:800;
  letter-spacing:.08em;
  color:#F4F8FF;
}
.brand-sub{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.26em;
  color:var(--muted);
}

.nav-list{
  display:flex;
  align-items:center;
  gap:2px;
  margin:0 auto;
}
.nav-list a{
  display:block;
  padding:8px 13px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:500;
  color:rgba(201,212,230,.76);
  white-space:nowrap;
  transition:color .2s,background-color .2s;
}
.nav-list a:hover{ color:#fff; background:rgba(41,224,200,.1); }
.nav-list a[aria-current="page"]{
  color:#04191A;
  font-weight:700;
  background:var(--pulse);
  box-shadow:0 0 0 1px rgba(41,224,200,.5), 0 0 22px -6px rgba(41,224,200,.85);
}
.nav-list a[aria-current="page"]:hover{ color:#04191A; background:var(--pulse); }

.nav-toggle{
  display:none;
  align-items:center;
  gap:9px;
  margin-left:auto;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(41,224,200,.38);
  background:rgba(41,224,200,.08);
  color:var(--pulse);
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.2em;
}
.nav-toggle-bars{ display:flex; flex-direction:column; gap:3px; width:14px; }
.nav-toggle-bars i{
  display:block;
  height:1.5px;
  border-radius:2px;
  background:currentColor;
  transition:transform .26s var(--ease),opacity .2s;
}
.nav-capsule[data-open] .nav-toggle-bars i:nth-child(1){ transform:translateY(4.5px) rotate(45deg); }
.nav-capsule[data-open] .nav-toggle-bars i:nth-child(2){ opacity:0; }
.nav-capsule[data-open] .nav-toggle-bars i:nth-child(3){ transform:translateY(-4.5px) rotate(-45deg); }

.nav-cta{
  flex-shrink:0;
  padding:9px 19px;
  border-radius:999px;
  background:var(--amber);
  color:#1B0A02;
  font-family:var(--font-head);
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  box-shadow:0 12px 26px -16px rgba(255,122,61,.95);
  transition:transform .2s var(--ease),background-color .2s;
}
.nav-cta:hover{ background:#FF8F58; transform:translateY(-1px); }

/* ---------- 8. 页脚 ---------- */
.site-footer{
  position:relative;
  z-index:1;
  margin-top:clamp(64px,9vw,124px);
  padding:28px var(--gutter) 38px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(14,23,48,.42),rgba(7,11,24,.98) 70%);
}
.footer-inner{
  max-width:var(--shell);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.footer-note{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 12px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--muted);
  max-width:none;
}
.footer-brand{
  font-family:var(--font-head);
  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
  color:#E9F0FF;
}
.footer-dot{ color:rgba(107,120,144,.55); }
.footer-icp{ color:rgba(201,212,230,.66); }

.footer-contact{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  max-width:none;
}
.copy-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 13px;
  border-radius:8px;
  border:1px dashed rgba(41,224,200,.4);
  color:var(--pulse);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  transition:background-color .2s,border-color .2s,color .2s,border-style .2s;
}
.copy-btn:hover{ background:rgba(41,224,200,.1); border-style:solid; }
.copy-btn[data-copied]{
  background:var(--pulse);
  border-color:var(--pulse);
  border-style:solid;
  color:var(--void);
}
.copy-btn[data-copied]::after{ content:'已复制'; margin-left:2px; font-size:11px; }

.footer-archive-note{
  font-size:12.5px;
  letter-spacing:.03em;
  color:rgba(107,120,144,.95);
  max-width:76ch;
}
.footer-tail{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 18px;
  padding-top:12px;
  border-top:1px dashed rgba(201,212,230,.13);
}
.footer-links{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.footer-links a{
  font-size:12.5px;
  color:rgba(201,212,230,.7);
  transition:color .2s;
}
.footer-links a:hover{ color:var(--pulse); }
.footer-copy{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--muted);
}

/* ---------- 9. 通用容器 / 面包屑 ---------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gutter);
}
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:24px 0 0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--muted);
}
.breadcrumb a{ color:rgba(201,212,230,.7); transition:color .2s; }
.breadcrumb a:hover{ color:var(--pulse); }
.breadcrumb [aria-hidden="true"]{ color:rgba(107,120,144,.5); }

/* ---------- 10. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:12px 23px;
  border-radius:999px;
  border:1px solid transparent;
  font-family:var(--font-head);
  font-size:14px;
  font-weight:700;
  letter-spacing:.05em;
  transition:transform .2s var(--ease),background-color .2s,color .2s,border-color .2s;
}
.btn:hover{ transform:translateY(-1px); }
.btn--pulse{
  background:var(--pulse);
  color:var(--void);
  box-shadow:0 16px 34px -22px rgba(41,224,200,1);
}
.btn--pulse:hover{ background:#4BEFDA; }
.btn--amber{
  background:var(--amber);
  color:#1B0A02;
  box-shadow:0 16px 34px -22px rgba(255,122,61,1);
}
.btn--amber:hover{ background:#FF8F58; }
.btn--ghost{
  border-color:var(--line-strong);
  background:rgba(14,23,48,.6);
  color:var(--silver);
}
.btn--ghost:hover{ border-color:rgba(41,224,200,.55); color:var(--pulse); }

/* ---------- 11. 卡片 ---------- */
.card{
  position:relative;
  padding:22px;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(21,35,74,.62),rgba(14,23,48,.78));
  box-shadow:var(--shadow-card);
}
.card--cream{
  background:var(--cream);
  border-color:rgba(42,26,18,.22);
  color:var(--inkbrown);
}
.card--cream h1,
.card--cream h2,
.card--cream h3,
.card--cream strong{ color:var(--inkbrown); }
.card--flat{
  background:rgba(14,23,48,.55);
  box-shadow:none;
}

/* ---------- 12. 栅格 ---------- */
.grid{ display:grid; gap:clamp(14px,1.8vw,22px); }
.grid--2,
.grid--3,
.grid--4{ grid-template-columns:1fr; }
@media (min-width:640px){
  .grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1000px){
  .grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* ---------- 13. 图片容器 ---------- */
.media{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:linear-gradient(140deg,#101B38,#070B18 68%);
  aspect-ratio:16 / 9;
}
.media::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    linear-gradient(rgba(201,212,230,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,212,230,.07) 1px,transparent 1px);
  background-size:34px 34px;
}
.media img,
.media svg{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
}
.media figcaption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  padding:10px 14px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:rgba(201,212,230,.88);
  background:linear-gradient(180deg,transparent,rgba(7,11,24,.94));
}
.media--wide{ aspect-ratio:21 / 9; }
.media--tall{ aspect-ratio:4 / 5; }
.media--square{ aspect-ratio:1 / 1; }

/* ---------- 14. 排版零件 ---------- */
.display{
  font-family:var(--font-head);
  font-weight:900;
  line-height:.94;
  letter-spacing:-.035em;
  color:#FFFFFF;
  font-size:clamp(2.7rem,10vw,7rem);
}
.mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--pulse);
}
.eyebrow::before{
  content:'';
  width:24px;
  height:1px;
  background:currentColor;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid rgba(122,108,255,.45);
  color:var(--violet);
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
}
.tag--pulse{ border-color:rgba(41,224,200,.45); color:var(--pulse); }
.tag--amber{ border-color:rgba(255,122,61,.45); color:var(--amber); }
.tag--alert{ border-color:rgba(255,77,94,.5); color:var(--alert); }
.rule{
  height:1px;
  border:0;
  background:linear-gradient(90deg,transparent,rgba(201,212,230,.24) 14%,rgba(41,224,200,.36) 50%,rgba(201,212,230,.24) 86%,transparent);
}

/* ---------- 15. 显现 ---------- */
.js-reveal [data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .62s var(--ease),transform .62s var(--ease);
}
.js-reveal [data-reveal][data-revealed]{
  opacity:1;
  transform:none;
}

/* ---------- 16. 响应式 ---------- */
@media (max-width:940px){
  .nav-capsule{
    flex-wrap:wrap;
    padding:8px 10px 8px 12px;
    border-radius:24px;
  }
  .nav-toggle{ display:inline-flex; }
  .nav-list{
    display:none;
    order:5;
    flex-basis:100%;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    margin:8px 0 4px;
    padding-top:8px;
    border-top:1px solid var(--line);
  }
  .nav-capsule[data-open] .nav-list{ display:flex; }
  .nav-list a{ padding:11px 14px; border-radius:12px; font-size:14.5px; }
  .nav-list a[aria-current="page"]{ border-radius:12px; }
  .nav-cta{ display:none; }
}

@media (max-width:620px){
  .pulse-time{ display:none; }
  .pulse-sep{ display:none; }
  .pulse-row{ gap:10px; }
  .pulse-archive{ letter-spacing:.12em; }
  .footer-tail{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:420px){
  .brand-sub{ display:none; }
  .pulse-ver{ font-size:10.5px; }
}

/* ---------- 17. 无障碍与动效偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js-reveal [data-reveal]{ opacity:1; transform:none; }
  .scroll-rail span{ transition:none; }
}