:root{
  --bg:#000;
  --text:#f4f6ff;
  --line:rgba(255,255,255,.22);
  --btn:rgba(255,255,255,.10);
  --btn2:rgba(255,255,255,.06);
  --r:25px;

  /* 节奏：3 秒一轮 */
  --pulse: 3s;

  --font-main: "Microsoft YaHei UI","Microsoft YaHei",system-ui,Arial;
  --bgOpacity: .26;

  --logoShiftDesktop: 0px;
  --logoShiftMobile: -15px;
}

*{ box-sizing:border-box }
html,body{ height:100% }
html{ -webkit-text-size-adjust: 100%; }

body{
  margin:0;
  font-family:var(--font-main);
  color:var(--text);
  background:#000;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
  min-height: 100svh;
}

/* =========================
   背景：星云（固定略活跃，跟随3秒节奏）
   ========================= */
.xm-bg{
  position:fixed;
  inset:-60%;
  pointer-events:none;
  z-index:0;
}

.xm-nebula{
  opacity:var(--bgOpacity);
  background:
    radial-gradient(circle at 20% 30%, rgba(120,160,255,.25), transparent 55%),
    radial-gradient(circle at 70% 40%, rgba(110,240,210,.20), transparent 60%),
    radial-gradient(circle at 55% 70%, rgba(255,120,200,.18), transparent 65%),
    radial-gradient(circle at 40% 80%, rgba(120,160,255,.14), transparent 70%);
  animation: xmNebulaPulse var(--pulse) ease-in-out infinite;
}

@keyframes xmNebulaPulse{
  0%   { transform: scale(1.02) translate(-1%, -1%); opacity:.22; }
  50%  { transform: scale(1.06) translate( 1%,  1%); opacity:.30; }
  100% { transform: scale(1.02) translate(-1%, -1%); opacity:.22; }
}

/* =========================
   主体容器（安全区）
   ========================= */
.xm-center{
  position:relative;
  z-index:2;
  text-align:center;

  padding:
    calc(24px + env(safe-area-inset-top))
    18px
    calc(28px + env(safe-area-inset-bottom))
    18px;

  max-width: 560px;
  transform: translateY(var(--logoShiftDesktop));
}

@media (max-width:520px){
  .xm-center{
    max-width: 420px;
    transform: translateY(var(--logoShiftMobile));
  }
}

/* =========================
   品牌组：确保 logo & 标语同轴居中
   ========================= */
.xm-brand{
  display:inline-flex;
  flex-direction:column;
  align-items:center;   /* 关键：永远跟logo同轴 */
}

/* =========================
   Logo：5秒渐入 + 3秒强呼吸
   ========================= */
.xm-logo{
  font-size:160px;
  font-weight:800;
  line-height:1;
  opacity:0;
  transform:translateY(30px);
  animation:
    xmLogoIn 5s ease-out forwards,
    xmLogoBreath var(--pulse) ease-in-out infinite;
  animation-delay: 0s, 5s;
}

@keyframes xmLogoIn{
  0%   { opacity:0; transform:translateY(30px); }
  20%  { opacity:0; }
  100% { opacity:1; transform:translateY(0); }
}

/* 强烈呼吸（强度已确认） */
@keyframes xmLogoBreath{
  0%{
    filter:brightness(1) saturate(1);
    transform:scale(1);
  }
  50%{
    filter:brightness(1.22) saturate(1.15);
    transform:scale(1.03);
  }
  100%{
    filter:brightness(1) saturate(1);
    transform:scale(1);
  }
}

/* =========================
   标语：跟随logo同轴 + 同步呼吸（更克制）
   ========================= */
.xm-tagline{
  margin-top:14px;
  display:inline-block;
  text-align:center;
  white-space:nowrap;

  font-family:var(--font-main);
  font-weight:400;
  font-size:36px;
  letter-spacing:.5px;
  color:rgba(255,255,255,.86);
  opacity:0;

  animation:
    xmTagIn 5s ease-out forwards,
    xmTagBreath var(--pulse) ease-in-out infinite;
  animation-delay: 0s, 5s;
}

@keyframes xmTagIn{
  0%   { opacity:0; transform:translateY(10px); }
  20%  { opacity:0; }
  100% { opacity:1; transform:translateY(0); }
}

@keyframes xmTagBreath{
  0%   { opacity:.78; filter:brightness(1); }
  50%  { opacity:.95; filter:brightness(1.10); }
  100% { opacity:.78; filter:brightness(1); }
}

/* 响应式 */
@media (max-width:900px){
  .xm-logo{ font-size:110px; }
  .xm-tagline{ font-size:26px; margin-top:12px; }
}
@media (max-width:520px){
  .xm-logo{ font-size:86px; }
  .xm-tagline{ font-size:20px; margin-top:10px; }
}

/* =========================
   导航区：竖排（移动端稳定）
   ========================= */
.xm-nav{
  margin-top:22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

/* 按钮：字清晰 + 氛围光圈按压反馈 */
.xm-btn{
  position:relative;
  width: min(66vw, 340px);
  min-width: 0;
  padding:16px 18px;

  border-radius:var(--r);
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--btn),var(--btn2));
  color:var(--text);

  font-family:var(--font-main);
  font-weight:800;
  font-size:20px;
  letter-spacing:.6px;

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  appearance:none;
  -webkit-appearance:none;
  outline:none;

  transition: border-color .18s ease, box-shadow .18s ease, transform .08s ease, filter .18s ease;
}

@media (max-width:520px){
  .xm-btn{
    width: min(66vw, 320px);
    font-size:19px;
  }
}

.xm-btn:hover{
  border-color:rgba(255,255,255,.32);
  box-shadow:0 0 36px rgba(255,255,255,.18);
}

.xm-btn:active{
  transform: scale(0.985);
  filter: brightness(1.08);
  border-color: rgba(255,255,255,.40);
  box-shadow:
    0 0 0 10px rgba(255,255,255,.09),
    0 0 46px rgba(255,255,255,.22);
}

.xm-btn::before{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius: calc(var(--r) + 16px);
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.20), transparent 62%);
  opacity:0;
  transform: scale(.96);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.xm-btn:active::before{
  opacity:1;
  transform: scale(1.03);
}

/* =========================
   展开面板
   ========================= */
.xm-panel{
  width: min(74vw, 520px);
  text-align:left;

  border:1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);

  overflow:hidden;
  max-height:0;
  opacity:0;
  transform: translateY(-6px);
  transition: max-height .28s ease, opacity .22s ease, transform .22s ease;
}

.xm-panel.open{
  opacity:1;
  transform: translateY(0);
  max-height: 520px;
}

.xm-panel-inner{
  padding:14px 16px;
  color: rgba(255,255,255,.86);
  font-size:16px;     /* ✅ 比之前大一号 */
  line-height:1.6;
}

@media (max-width:520px){
  .xm-panel-inner{
    font-size:15px;
  }
}

.xm-panel-inner .k{
  font-weight:600;    /* ✅ 轻微强化（不抢） */
  color: rgba(255,255,255,.95);
}

.xm-panel-inner ul{
  margin:8px 0 0 18px;
  padding:0;
}
.xm-panel-inner li{
  margin:6px 0;
}

.xm-muted{
  color: rgba(255,255,255,.62);
}

/* =========================
   Footer（安全区）
   ========================= */
.xm-footer{
  position:fixed;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left:0; right:0;
  text-align:center;
  font-family:var(--font-main);
  font-size:12px;
  color:rgba(255,255,255,.55);
  z-index:2;
}