/* ===== 首屏：粒子星系黑洞 ===== */
body{background:#04050a}
.cosmos{
  position:relative;
  height:calc(100vh - 172px);
  min-height:620px;
  margin-top:-8px;
  overflow:hidden;
  background:#000;
  border-radius:22px;
}
.cosmos__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cosmos__glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 42% at 50% 54%, rgba(34,211,238,.05), transparent 72%);
}
.cosmos::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 95% at 50% 45%, transparent 52%, rgba(0,0,0,.75) 100%);
}

.cosmos__brand{
  position:absolute;top:7%;left:50%;transform:translateX(-50%);
  z-index:3;text-align:center;pointer-events:none;
}
.cosmos__brand-en{font:9px/1 ui-monospace,monospace;letter-spacing:.44em;color:#5a6480}
.cosmos__title{
  margin:14px 0 0;font-size:clamp(20px,2.2vw,28px);font-weight:600;
  letter-spacing:.36em;text-indent:.36em;color:#eef4ff;
}
.cosmos__sub{margin:12px 0 0;font:11.5px/1.9 inherit;letter-spacing:.14em;color:#727d99}

.cosmos__nodes{position:absolute;inset:0;z-index:4}
.node{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.node__kicker{
  font:9px/1 ui-monospace,monospace;letter-spacing:.2em;color:#586279;
  text-transform:uppercase;white-space:nowrap;
}
.node__name{
  font-size:15px;font-weight:600;letter-spacing:.13em;color:#cfd8ea;white-space:nowrap;
  text-shadow:0 1px 14px rgba(0,0,0,.95),0 0 30px rgba(0,0,0,.8);
  transition:color .3s,text-shadow .3s;
}
.node__meta{display:flex;align-items:center;gap:8px}
.node__dot{
  width:25px;height:25px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;font-size:11px;
  background:rgba(255,255,255,.03);
  transition:border-color .3s,box-shadow .3s,transform .3s,background .3s;
}
.node:hover .node__name,.node.active .node__name{color:#8ce9fb;text-shadow:0 0 22px rgba(34,211,238,.6)}
.node:hover .node__dot,.node.active .node__dot{
  border-color:rgba(34,211,238,.7);
  box-shadow:0 0 20px rgba(34,211,238,.4);
  background:rgba(34,211,238,.10);
  transform:scale(1.08);
}
.cosmos__nodes:hover .node:not(:hover){opacity:.30}

.cosmos__scroll{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font:9px/1 ui-monospace,monospace;letter-spacing:.36em;color:#525c74;
}
.cosmos__scroll i{width:1px;height:32px;background:linear-gradient(#5a6480,transparent);animation:drip 2.4s infinite}
@keyframes drip{0%{opacity:.25;transform:scaleY(.35)}50%{opacity:1;transform:scaleY(1)}100%{opacity:.25;transform:scaleY(.35)}}

@media (max-width:900px){
  .cosmos{height:auto;min-height:0;padding:0 0 26px;margin-left:0;margin-right:0;border-radius:0}
  .cosmos__canvas{height:300px;top:36px;opacity:.85}
  .cosmos__brand{position:relative;top:auto;left:auto;transform:none;padding:34px 20px 176px}
  .cosmos__title{font-size:22px}
  .cosmos__nodes{position:relative;inset:auto;display:grid;padding:0 18px;z-index:5}
  .node{
    position:relative!important;left:auto!important;top:auto!important;
    transform:none;flex-direction:row;align-items:center;gap:12px;
    padding:13px 2px;border-top:1px solid rgba(255,255,255,.07);
  }
  .node__kicker{display:none}
  .node__name{order:2;flex:1;font-size:14px}
  .node__meta{order:1}
  .node__dot{width:22px;height:22px}
  .cosmos__scroll{display:none}
}