/* ============================================================
   基础层：reset · 排版角色 · 屏幕框架 · 品牌字标 · 动效基线
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--abyss);
  color:var(--foam);
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
#app{
  position:relative;
  max-width:480px;
  height:100dvh;
  margin:0 auto;
  overflow:hidden;
  background:
    radial-gradient(120% 70% at 50% -10%, #10222f 0%, transparent 60%),
    radial-gradient(140% 90% at 50% 115%, #04080d 0%, transparent 55%),
    var(--abyss);
}
#app.shake{animation:appShake .3s var(--ease-out)}
@keyframes appShake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-4px,2px)}
  45%{transform:translate(3px,-2px)}
  70%{transform:translate(-2px,1px)}
}

/* ---- 排版角色 ---- */
h1,h2,h3,.t-display{font-family:var(--font-display);font-weight:700;text-wrap:balance;line-height:var(--lh-tight)}
.t-label{font-size:var(--fs-micro);letter-spacing:var(--ls-label);color:var(--mist)}
.t-quiet{font-size:var(--fs-cap);color:var(--mist);line-height:var(--lh-body)}
.t-num{font-family:var(--font-num);font-variant-numeric:tabular-nums}

/* ---- 品牌字标：vboom! 是一个整体，惊叹号与字母同斜 ---- */
.wordmark{
  font-family:var(--font-ui);
  font-weight:800;
  font-style:italic;
  letter-spacing:.02em;
  display:inline-block;
  transform:skewX(0deg); /* 斜体统一由 font-style 提供，不二次倾斜 */
}
.wordmark b{
  color:var(--spark);
  font-weight:800;
  font-style:italic;   /* 惊叹号与字母同角度，不做直立符号 */
  margin-left:.03em;   /* 与 m 的间距微调 */
}

/* ---- 屏幕框架 ---- */
.screen{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
  padding:max(20px,var(--safe-top)) var(--sp-page) 0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}
.screen.active{display:flex;animation:screenIn var(--t-page) var(--ease-out)}
@keyframes screenIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.screen.tabbed{padding-bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 12px)}
.screen .foot{
  position:sticky;bottom:0;
  padding:14px 0 max(16px,var(--safe-bottom));
  background:linear-gradient(transparent,var(--abyss) 40%);
  margin-top:auto;
}
/* 步骤头 = 眉题：小而安静，把视觉主角让给页面主标题 */
.step-head{display:flex;align-items:baseline;gap:10px;margin-bottom:var(--flow-eyebrow-gap)}
.step-no{font-family:var(--font-num);font-size:var(--fs-micro);color:var(--spark);letter-spacing:var(--ls-label)}
.step-title{font-family:var(--font-ui);font-size:13px;font-weight:400;color:var(--mist);letter-spacing:var(--ls-label)}
.step-sub{color:var(--mist);font-size:var(--fs-aid);margin-bottom:var(--sp-3)}
/* 全局排版角色：每页一个 h1，核心句一层，辅助一层 */
.flow-h1{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h1);line-height:var(--lh-h1);text-wrap:balance}
.flow-core{font-family:var(--font-display);font-weight:500;font-size:var(--fs-core);line-height:var(--lh-loose)}
.flow-aid{font-size:var(--fs-aid);color:var(--mist);line-height:var(--lh-body)}
.flow-exit{
  position:absolute;
  top:max(14px,var(--safe-top));
  right:16px;
  width:38px;height:38px;
  color:var(--mist);
  font-size:20px;line-height:38px;text-align:center;
  z-index:5;
}
.sub-back{
  position:absolute;
  top:max(14px,var(--safe-top));
  left:12px;
  width:38px;height:38px;
  color:var(--mist);
  font-size:20px;line-height:38px;text-align:center;
  z-index:5;
}
.page-head{margin:6px 0 18px}
.page-head h2{font-size:var(--fs-h1);line-height:var(--lh-h1)}
.page-head p{color:var(--mist);font-size:var(--fs-aid);letter-spacing:.06em;margin-top:4px}
.brand-line{
  text-align:center;
  font-size:var(--fs-micro);
  color:var(--mist-faint);
  letter-spacing:.14em;
  padding:10px 0 6px;
}
.brand-line .wordmark{font-size:var(--fs-micro);color:var(--mist-dim)}
.brand-line b{color:var(--mist-dim)}
.brand-line strong{font-weight:600;color:var(--mist-dim)}

/* ---- 减少动态效果 ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
.rm .screen.active{animation:none}
.rm #app.shake{animation:none}

/* 强震（全屏碎裂瞬间） */
#app.shake-hard{animation:appShakeHard .45s var(--ease-out)}
@keyframes appShakeHard{
  0%,100%{transform:translate(0,0) rotate(0)}
  12%{transform:translate(-7px,4px) rotate(-.3deg)}
  28%{transform:translate(6px,-4px) rotate(.25deg)}
  46%{transform:translate(-4px,3px) rotate(-.15deg)}
  66%{transform:translate(3px,-2px)}
  84%{transform:translate(-2px,1px)}
}
.rm #app.shake-hard{animation:none}