:root{
  --ink:#f2f0ff;
  --dim:rgba(232,230,255,.56);
  --faint:rgba(232,230,255,.3);
  --violet:#b8a5ff;
  --cyan:#6ee7ff;
  --gold:#ffd89b;
  --rose:#ff89b8;
  --line:rgba(255,255,255,.09);
  --glass:rgba(9,12,22,.72);
  --serif:"Noto Serif SC",serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#04060d}
body{
  font-family:var(--sans);color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  touch-action:none;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#scene{position:fixed;inset:0;z-index:0}
#scene canvas{display:block}

/* 暗角 + 扫描质感，让画面更像观测舱窗口 */
#vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 50%,transparent 42%,rgba(2,3,8,.55) 100%),
    linear-gradient(transparent 50%,rgba(255,255,255,.012) 50%);
  background-size:100% 100%,100% 3px;
}

/* ---------- 自定义光标 ---------- */
#cursor{
  position:fixed;left:0;top:0;z-index:9000;pointer-events:none;
  width:26px;height:26px;margin:-13px 0 0 -13px;
  border:1px solid rgba(184,165,255,.55);border-radius:50%;
  transition:width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1),
             margin .28s cubic-bezier(.2,.8,.2,1),border-color .28s,opacity .3s;
  opacity:0;
}
#cursor span{
  position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;
  background:var(--cyan);border-radius:50%;box-shadow:0 0 8px var(--cyan);
}
#cursor.on{opacity:1}
#cursor.hot{width:54px;height:54px;margin:-27px 0 0 -27px;border-color:rgba(110,231,255,.8)}
@media (hover:hover) and (pointer:fine){body{cursor:none}}
@media (hover:none){#cursor{display:none}}

/* ---------- 悬停标签 ---------- */
#hover-label{
  position:fixed;left:0;top:0;z-index:800;pointer-events:none;
  transform:translate(-50%,-160%);
  padding:9px 14px;border:1px solid var(--line);border-radius:11px;
  background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;transition:opacity .22s;white-space:nowrap;
}
#hover-label.on{opacity:1}
#hover-label b{display:block;font:500 13px/1.4 var(--serif)}
#hover-label i{display:block;margin-top:3px;font:400 9px/1 var(--sans);font-style:normal;letter-spacing:.16em;color:var(--faint)}

/* ---------- HUD ---------- */
#hud{position:fixed;left:30px;top:28px;z-index:700;pointer-events:none}
.brand{display:flex;align-items:center;gap:11px;font:500 14px var(--serif);letter-spacing:.02em}
.brand .mark{
  width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:14px;
  color:#0a0c16;background:linear-gradient(140deg,#f0eaff,var(--violet) 55%,var(--cyan));
  box-shadow:0 0 22px rgba(184,165,255,.4);
}
.hud-rows{margin:22px 0 0;display:flex;flex-direction:column;gap:10px}
.hud-row{display:flex;align-items:baseline;gap:8px}
.hud-row .k{font-size:9px;letter-spacing:.2em;color:var(--faint)}
.hud-row .v{
  font:500 26px/1 var(--serif);
  background:linear-gradient(120deg,#fff,var(--violet) 60%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums;
}
.hud-row .u{font-size:10px;color:var(--faint)}
.hud-where{margin-top:20px;display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.14em;color:var(--dim)}
.hud-where i{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:blip 2.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}

/* ---------- 右侧星图导航 ---------- */
#starmap{
  position:fixed;right:32px;top:50%;transform:translateY(-50%);z-index:700;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  transition:transform .7s cubic-bezier(.4,0,.2,1),opacity .4s;
}
body.panel-open #starmap{transform:translateY(-50%) translateX(-520px)}
.sm-item{
  display:flex;align-items:center;gap:12px;padding:6px 0;
  background:none;position:relative;
}
.sm-item .sm-name{
  font:400 10px var(--sans);letter-spacing:.16em;color:var(--faint);
  opacity:0;transform:translateX(8px);transition:opacity .3s,transform .3s,color .3s;
}
.sm-item .sm-dot{
  width:9px;height:9px;border-radius:50%;flex:0 0 9px;
  border:1px solid rgba(255,255,255,.3);background:transparent;
  transition:transform .3s,background .3s,box-shadow .3s,border-color .3s;
}
.sm-item:hover .sm-name,.sm-item.active .sm-name{opacity:1;transform:none;color:var(--ink)}
.sm-item:hover .sm-dot{transform:scale(1.5)}
.sm-item.active .sm-dot{transform:scale(1.7)}
.sm-item.home{margin-bottom:14px}
.sm-item.home .sm-dot{width:13px;height:13px;flex-basis:13px;border-style:dashed}
#starmap .sm-line{width:1px;height:16px;margin:0 4px 0 auto;background:linear-gradient(var(--line),transparent)}
@media (max-width:820px){
  #starmap{right:auto;left:18px;gap:0}
  .sm-item{flex-direction:row-reverse}
  .sm-item .sm-name{display:none}
  body.panel-open #starmap{transform:translateY(-50%)}
}

/* ---------- 底部提示 ---------- */
#hint{
  position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:700;
  display:flex;gap:26px;padding:15px 26px;pointer-events:none;
  border:1px solid var(--line);border-radius:99px;
  background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  font-size:11px;color:var(--dim);white-space:nowrap;
  transition:opacity .5s,transform .5s;
}
#hint i{
  font-style:normal;margin-right:7px;padding:3px 7px;border-radius:5px;
  background:rgba(255,255,255,.08);color:var(--ink);font-size:10px;letter-spacing:.04em;
}
#hint.gone{opacity:0;transform:translateX(-50%) translateY(14px)}
@media (max-width:820px){
  #hint{gap:14px;padding:12px 16px;font-size:10px;bottom:18px;flex-wrap:wrap;justify-content:center;max-width:92vw;white-space:normal}
}

/* ---------- 信息面板 ---------- */
#panel{
  position:fixed;right:0;top:50%;z-index:750;
  width:472px;max-width:calc(100vw - 36px);max-height:82vh;
  transform:translate(calc(100% + 40px),-50%);
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-right:0;border-radius:26px 0 0 26px;
  background:var(--glass);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  box-shadow:-30px 0 90px rgba(0,0,0,.5);
  transition:transform .8s cubic-bezier(.22,1,.28,1),opacity .5s;
  opacity:0;
}
#panel.on{transform:translate(0,-50%);opacity:1}
#panel-close{
  position:absolute;right:18px;top:16px;z-index:2;
  width:34px;height:34px;border-radius:50%;font-size:19px;line-height:1;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--dim);
  transition:transform .35s,background .3s,color .3s;
}
#panel-close:hover{background:rgba(184,165,255,.2);color:#fff;transform:rotate(90deg)}

#panel-scroll{padding:44px 42px 10px;overflow-y:auto;flex:1}
#panel-scroll::-webkit-scrollbar{width:4px}
#panel-scroll::-webkit-scrollbar-thumb{background:rgba(184,165,255,.4);border-radius:2px}
.p-tag{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 11px;border:1px solid var(--line);border-radius:99px;font-size:10px;letter-spacing:.18em;color:var(--gold)}
.p-tag i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
#p-title{margin:22px 0 10px;font:500 clamp(28px,3.4vw,38px)/1.28 var(--serif);letter-spacing:-.02em}
.p-date{font-size:11px;letter-spacing:.2em;color:var(--faint)}
.p-photo{
  position:relative;margin:26px 0 28px;border-radius:16px;overflow:hidden;
  aspect-ratio:16/10;border:1px solid var(--line);background:rgba(255,255,255,.03);
}
.p-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.86) brightness(.84)}
.p-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 55%,rgba(4,6,13,.75))}
.p-body{font:400 15px/2.05 var(--serif);color:rgba(240,238,255,.8)}
.p-body p+p{margin-top:1.1em}
.p-tags{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 4px}
.p-tags span{padding:6px 12px;border:1px solid var(--line);border-radius:99px;font-size:10px;letter-spacing:.1em;color:var(--dim)}
.p-nav{display:flex;gap:1px;padding:14px 42px 22px}
.p-nav button{
  flex:1;padding:13px 0;font-size:11px;letter-spacing:.1em;color:var(--dim);
  border:1px solid var(--line);border-radius:11px;transition:background .3s,color .3s,transform .3s;
}
.p-nav button:hover{background:rgba(184,165,255,.14);color:#fff;transform:translateY(-2px)}
@media (max-width:820px){
  #panel{width:100%;max-width:100%;left:0;right:0;top:auto;bottom:0;
    transform:translateY(calc(100% + 40px));max-height:74vh;border-radius:24px 24px 0 0;border-right:1px solid var(--line)}
  #panel.on{transform:translateY(0)}
  #panel-scroll{padding:38px 24px 8px}
  .p-nav{padding:12px 24px 20px}
}

/* ---------- 加载 & 开场 ---------- */
#loader,#intro{
  position:fixed;inset:0;z-index:9500;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 45%,#0a0e1c,#04060d 70%);
  transition:opacity .9s ease,visibility .9s;
}
#loader.gone,#intro.gone{opacity:0;visibility:hidden;pointer-events:none}
.l-inner{text-align:center}
.l-orb{
  width:74px;height:74px;margin:0 auto 30px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff5e0,var(--gold) 26%,#c98a4a 62%,#3a2440);
  box-shadow:0 0 60px rgba(255,216,155,.4),0 0 130px rgba(184,165,255,.22);
  animation:orbSpin 7s linear infinite,orbPulse 3.4s ease-in-out infinite;
}
@keyframes orbSpin{to{filter:hue-rotate(360deg)}}
@keyframes orbPulse{0%,100%{transform:scale(.94)}50%{transform:scale(1.06)}}
.l-text{font:400 15px var(--serif);letter-spacing:.1em;color:var(--dim)}
.l-bar{width:190px;height:1px;margin:22px auto 12px;background:rgba(255,255,255,.1);overflow:hidden}
.l-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--cyan));transition:width .35s ease}
.l-step{font-size:9px;letter-spacing:.22em;color:var(--faint);text-transform:uppercase}

.i-inner{text-align:center;padding:0 24px;max-width:620px}
.i-eyebrow{font-size:10px;letter-spacing:.34em;color:var(--gold);margin-bottom:26px}
#intro h1{font:500 clamp(42px,7.4vw,74px)/1.16 var(--serif);letter-spacing:-.03em}
#intro h1 em{
  font-style:normal;
  background:linear-gradient(115deg,#fff 8%,var(--violet) 46%,var(--cyan) 74%,var(--rose));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
#intro p{margin:26px auto 40px;font:400 15px/2.05 var(--serif);color:var(--dim)}
#i-enter{
  padding:16px 42px;border-radius:99px;font-size:14px;font-weight:500;color:#080a14;
  background:linear-gradient(135deg,#f2ecff,var(--violet) 52%,var(--cyan));
  transition:transform .35s,box-shadow .35s;
}
#i-enter:hover{transform:translateY(-3px);box-shadow:0 18px 46px rgba(184,165,255,.42)}
.i-tip{margin-top:26px;font-size:10px;letter-spacing:.18em;color:var(--faint)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.16s!important}}