/* ============================================================
   潮间带 · 写给《鸣潮》的爱好者手册
   手写设计系统（2026-09-26 从零重写版）
   主题锁：全站仅深夜海底一种主题；强调色锁：潮光青 #6EE7D8 一种
   圆角锁：全站统一 14px
   动效规矩：
   1) 能动的只有 transform / opacity 两条通道；
   2) 每个元素的入场/退场只有一个所有者（.reveal 归 IO/CSS，
      hero 与 pin/scrub 场景归 GSAP，互不插手）；
   3) JS 默认可见、由 JS 负责隐藏后再入场——禁 JS 时页面完整可读；
   4) prefers-reduced-motion 下全部塌缩为静态。
   ============================================================ */

/* ---------- 1. 令牌与基础 ---------- */
:root {
  --bg0: #06090f;            /* 海底基色（非纯黑） */
  --bg1: #0b111c;            /* 面板 */
  --bg2: #0f1726;            /* 更亮一档的面板 */
  --line: rgba(233, 237, 244, 0.09);
  --tx: #e9edf4;
  --tx-dim: #9fb0c8;
  --accent: #6ee7d8;         /* 潮光青，全站唯一 UI 强调色 */
  --accent-strong: #8df0e4;
  --accent-ink: #06231f;     /* 青底上的深字，AA 达标 */
  --accent-dim: rgba(110, 231, 216, 0.14);
  --rad: 14px;               /* 唯一圆角 */
  --sans: "MiSans", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
          system-ui, -apple-system, "Segoe UI", sans-serif;
  /* 宋体只用于「往昔」章节：回忆/档案的编辑感，是这一个板块的表达需要 */
  --serif: "Noto Serif SC", "Songti SC", "STSong", SimSun, serif;
  --nav-h: 64px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

/* 板块开关（后台 SITE_SECTIONS）的隐藏类：!important 压过 GSAP pin 回写的行内样式 */
.st-hide { display: none !important; }

html,
body {
  /* 不能写 smooth：与 Lenis 抢同一个滚动位置（历史上实测过 734ms 延迟） */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  /* 全站文字不参与长按选择/搜索/双击复制（2026-09-27 用户要求：点击无反应）。
     html 上声明靠继承，body 再显式声明一层 —— 个别安卓浏览器不继承 html 的取值；
     需要复制的内容（QQ 号）走专用复制按钮 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body {
  margin: 0;
  background: var(--bg0);
  color: var(--tx);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: rgba(110, 231, 216, 0.32); color: var(--tx); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 2. 氛围层（极光 + 噪点，只动 transform） ---------- */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 34% at 18% 22%, rgba(110, 231, 216, 0.07), transparent 70%),
    radial-gradient(38% 30% at 82% 12%, rgba(148, 118, 232, 0.06), transparent 70%),
    radial-gradient(46% 38% at 60% 88%, rgba(64, 132, 224, 0.05), transparent 72%);
  animation: aurora 52s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes aurora {
  from { transform: translate3d(-2.5%, -1.5%, 0) rotate(-1.2deg); }
  to   { transform: translate3d(2.5%, 2%, 0) rotate(1deg); }
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
main, .nav, .footer { position: relative; z-index: 1; }

/* ---------- 3. 骨架工具 ---------- */
.wrap {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 64px);
}
.sec { position: relative; padding-block: clamp(72px, 9vh, 112px); }

.h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 0.01em;
}
.lede {
  margin: 0;
  color: var(--tx-dim);
  font-size: clamp(15px, 1.6vw, 17px);
  max-width: 62ch;
}

/* 入场浮现：唯一所有者是 IO/CSS。GSAP 一律不许碰 .reveal */
html.js .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
html.js .reveal.is-in { opacity: 1; transform: translate3d(0, 0, 0); }

/* ---------- 4. 按钮与小组件 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: var(--rad);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
              transform 0.15s var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-strong); }
.btn--ghost { border: 1px solid var(--line); color: var(--tx); }
.btn--ghost:hover { border-color: rgba(110, 231, 216, 0.45); background: var(--accent-dim); }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--rad);
  border: 1px solid var(--line);
  background: rgba(11, 17, 28, 0.72);
  color: var(--tx);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out),
              transform 0.15s var(--ease-out);
}
.chip:hover { border-color: rgba(110, 231, 216, 0.45); background: var(--accent-dim); }
.chip:active { transform: translateY(1px) scale(0.985); }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--rad);
  border: 1px solid var(--line);
  color: var(--tx-dim);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.iconbtn:hover { color: var(--accent); border-color: rgba(110, 231, 216, 0.45); }
.iconbtn svg { width: 16px; height: 16px; }

/* ---------- 5. 顶栏 ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--nav-h);
  background: rgba(6, 9, 15, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__row {
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
}
.brand {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.brand em { font-style: normal; color: var(--accent); }
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 26px);
  margin-inline: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav__links::-webkit-scrollbar { display: none; }
.nav__links a {
  flex: none;
  padding: 8px 4px;
  font-size: 14.5px;
  color: var(--tx-dim);
  transition: color 0.3s;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.nav__links a:hover { color: var(--tx); }
.nav__cta { flex: none; margin-left: auto; display: flex; gap: 10px; }
.nav__btn { min-height: 42px; padding: 9px 16px; font-size: 14px; }
.nav__appicon {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  flex: none;
  background: rgba(6, 9, 15, 0.25);
}
/* 窄屏汉堡菜单键（桌面 display:none，≤700px 才显示）：两横线，展开变 ✕ */
.nav__burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border-radius: var(--rad);
  border: 1px solid var(--line);
  color: var(--tx);
}
.nav__burger i {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease-out);
}
.nav__burger.is-open i:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__burger.is-open i:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 700px) {
  .nav__btn--site { display: none; } /* 小屏顶栏只留「下载软件」，官网入口在首屏/页脚 */
  /* 窄屏导航：一行塞不下品牌+5 链接+下载按钮（系统字号放大更挤）——
     链接收进汉堡下拉菜单，顶栏只留 品牌 + 下载 + 菜单键 */
  .nav__links { display: none; }
  .nav__burger { display: flex; }
}

/* 窄屏下拉菜单：fixed 挂导航正下方（不进文档流，开合不让 ScrollTrigger
   锚点漂移）；大触控目标 52px 行高，系统字号放大也从容 */
.nav__menu {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 49; /* 导航(50)之下、内容之上；随 nav 的层叠上下文盖过横幅 */
  max-height: calc(100dvh - var(--nav-h));
  overflow: auto;
  padding: 4px 0 10px;
  background: rgba(6, 9, 15, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out),
              visibility 0s linear 0.28s;
}
.nav__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out);
}
.nav__menu a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 clamp(20px, 5vw, 40px);
  font-size: 16px;
  color: var(--tx);
}
.nav__menu a + a { border-top: 1px solid var(--line); }
.nav__menu-site { color: var(--tx-dim); }
@media (min-width: 700.1px) {
  .nav__menu { display: none; } /* 桌面没有这个菜单 */
}

/* 特小屏（≤380px）+ 系统字号放大：顶栏收紧一档。软件名保留（2026-10-01
   用户要求图标也要标明软件名——菜单键已把导航空间腾出来了） */
@media (max-width: 380px) {
  .brand { font-size: 17px; letter-spacing: 0.1em; }
  .nav__row { gap: 10px; }
  .nav__btn { min-height: 40px; padding: 8px 10px; font-size: 13px; gap: 6px; }
  .nav__appicon { width: 18px; height: 18px; }
}

/* ---------- 6. 首屏 ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: clip;
  /* WebGL 缺席时的静态兜底：深夜潮面渐变 */
  background:
    radial-gradient(120% 70% at 70% 108%, rgba(110, 231, 216, 0.12), transparent 60%),
    radial-gradient(90% 60% at 20% 100%, rgba(64, 132, 224, 0.10), transparent 62%),
    linear-gradient(180deg, #070b13 0%, #0a1220 58%, #0d1a2b 100%);
}
#tide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  will-change: transform;   /* 常驻渲染层，预登记 */
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(72px, 11vh, 128px);
  /* 注意：此元素不挂 .reveal——入场归 GSAP 逐字，退场归 GSAP scrub，
     两个系统共管同一元素会出现「状态冻结」（历史教训） */
}
.hero__kicker {
  margin: 0 0 18px;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.42em;
}
/* 粒子海面变亮后，给首屏文字垫一层柔影保证可读 */
.hero__kicker, .hero__title, .hero__sub {
  text-shadow: 0 2px 26px rgba(6, 9, 15, 0.72), 0 1px 8px rgba(6, 9, 15, 0.65);
}
.hero__kicker {
  text-shadow: 0 1px 4px rgba(6, 9, 15, 0.9), 0 0 12px rgba(6, 9, 15, 0.85);
}
.hero__title {
  margin: 0 0 20px;
  font-size: clamp(38px, 7vw, 92px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0.01em;
  max-width: 12em;
}
.hero__title .hline { display: block; overflow: hidden; }
.hero__title .hc { display: inline-block; will-change: transform; }
.hero__sub {
  margin: 0 0 30px;
  color: var(--tx-dim);
  font-size: clamp(15px, 1.7vw, 17.5px);
  max-width: 36em;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- 7. 三个出发的理由（sticky 分栏） ---------- */
.why {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: start;
}
.why__media {
  position: sticky;
  top: calc(var(--nav-h) + 32px);
  border-radius: var(--rad);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  background: var(--bg1);
}
.why__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenburns 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(-1.5%, -1%, 0); }
}
.why__cap {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--tx-dim);
  border-top: 1px solid var(--line);
  background: rgba(6, 9, 15, 0.6);
}
.why__rows { display: block; }
.why__row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: clamp(16px, 2.5vw, 36px);
  padding-block: clamp(30px, 4.5vh, 44px);
  border-top: 1px solid var(--line);
}
.why__row:last-child { border-bottom: 1px solid var(--line); }
.why__key {
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
  transition: color 0.35s var(--ease-out);
}
.why__row:hover .why__key { color: var(--accent); }
.why__body { margin: 0; color: var(--tx-dim); font-size: 15.5px; max-width: 60ch; }

/* ---------- 8. 地名潮（全站唯一 marquee） ---------- */
.strip {
  border-block: 1px solid var(--line);
  padding-block: 20px;
  overflow: hidden;
}
.strip__wrap { will-change: transform; } /* GSAP 只碰这层（速度倾斜） */
.strip__track {
  display: flex;
  gap: clamp(40px, 6vw, 84px);
  width: max-content;
  animation: stripmove 38s linear infinite;
  will-change: transform;
}
@keyframes stripmove {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* 旅程横滚带：篇名高亮带 ›，成员地名细线分隔；整组 ×2 无缝循环 */
.strip__half {
  display: flex;
  align-items: baseline;
  gap: clamp(36px, 5vw, 64px);
  padding-right: clamp(36px, 5vw, 64px);
}
.strip__group {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  white-space: nowrap;
}
.strip__chap {
  font-size: clamp(17px, 2.2vw, 23px);
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.strip__chap::after {
  content: "›";
  margin-left: 8px;
  font-weight: 400;
  color: var(--tx-dim);
}
.strip__loc {
  font-size: clamp(15px, 1.9vw, 20px);
  color: var(--tx-dim);
}
.strip__loc + .strip__loc {
  border-left: 1px solid var(--line);
  padding-left: 14px;
}
.strip__cont { color: var(--accent); opacity: 0.85; }

/* ---------- 9. 世界（滚动驱动横滚画廊） ---------- */
.world__head { margin-bottom: clamp(36px, 6vh, 64px); }
.world__stage { position: relative; overflow: hidden; }
.world__track {
  display: flex;
  gap: clamp(20px, 3vw, 42px);
  padding-inline: clamp(20px, 5vw, 64px);
  width: max-content;
  align-items: stretch;
}
.wcard {
  position: relative;
  flex: none;
  /* 图框自己扛原图比例（2026-10-07 用户"水印被特意截去了，没有必要"）：
     旧版卡高扣掉 62px 署名条后框比例变宽，object-fit:cover 恰好裁掉底部
     水印带——现在 frame 直接 aspect-ratio=--ar，图片完整不裁，署名条在图下 */
  width: calc(min(52vh, 470px) * var(--ar, 2.04));
}
.wcard__frame {
  position: relative;
  height: min(52vh, 470px);
  aspect-ratio: var(--ar, 2.04);
  border-radius: var(--rad);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg1);
}
.wcard__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform; /* transform 由 §8 的滚动视差独占，CSS 不再碰它 */
}
.wcard__name { margin: 14px 0 4px; font-size: 18px; font-weight: 700; }
.wcard__line { margin: 0; color: var(--tx-dim); font-size: 14px; }
.world__bar {
  margin: clamp(28px, 4vh, 44px) clamp(20px, 5vw, 64px) 0;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.world__bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
}

/* ---------- 10. 影集（双页签画廊 + 灯箱） ---------- */
.gal__tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}
.gal__tab {
  min-height: 44px;
  padding: 9px 20px;
  border-radius: var(--rad);
  border: 1px solid var(--line);
  background: rgba(11, 17, 28, 0.72);
  color: var(--tx-dim);
  font-size: 15px;
  font-weight: 600;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.gal__tab:hover { color: var(--tx); border-color: rgba(110, 231, 216, 0.4); }
.gal__tab.is-on {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
.gal__panel { display: none; }
.gal__panel.is-on {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  animation: galIn 0.55s var(--ease-out);
}
@keyframes galIn {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* 照片墙：卡片高度统一、宽度随原生比例走，紧凑不拉长页面。
   高度 148/间距 10 是算过的：三张 2.504 宽比卡（六张特写里占五张）
   恰好排进 1152px 内容行，6 张正好 3×2 两行，不会出现 3/2/1 的孤卡 */
.gal__item {
  position: relative;
  margin: 0;
  height: 148px;
  width: auto;
  aspect-ratio: var(--ar, 2.04);
  border-radius: var(--rad);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg1);
  cursor: zoom-in;
}
.gal__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.gal__item:hover img,
.gal__item:focus-visible img { transform: scale(1.05); }
.gal__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(6, 9, 15, 0.82) 100%);
}
.gal__meta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
}
.gal__name { margin: 0; font-size: 16.5px; font-weight: 800; }
.gal__quote {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--tx-dim);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translate3d(0, 8px, 0);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), max-height 0.5s var(--ease-out);
}
.gal__item:hover .gal__quote,
.gal__item:focus-visible .gal__quote {
  max-height: 5em;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 影集折叠：默认每页只展示前 3 张特写，「更多」展开全部。
   裁剪由 JS 加 .is-trimmed 实现——禁 JS 时全量可见、按钮隐藏（内容优先） */
.gal__panel.is-trimmed .gal__item:nth-child(n+7) { display: none; }
.gal__morewrap { display: none; justify-content: center; margin-top: 30px; }
html.js .gal__morewrap { display: flex; }
.gal__more { min-height: 46px; padding: 10px 34px; }

/* 灯箱：完整大图（contain），点背景 / 关闭键 / Esc 退出 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(20px, 4vw, 56px);
  /* 点开放大的「合适放大值」（2026-10-03 用户：不要放到最大）：
     图片上限 = 视口宽的 84% / 高的 78%，宁可留白不顶满；
     要调观感只动这两个变量；桌面档 2026-10-06 用户"放的太大，缩小30%"
     → 84vw/78dvh × 0.7 ≈ 59vw/55dvh（手机屏物理尺寸小，维持原值） */
  --lb-w: 84vw;
  --lb-h: 78dvh;
  background: rgba(4, 6, 10, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.26s var(--ease-out);
}
@media (min-width: 1024px) {
  .lightbox {
    --lb-w: 59vw;
    --lb-h: 55dvh;
  }
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox__img {
  /* 完整不裁剪 + 元素贴合图片本身：宽高交给图片固有比例，
     缩放到「合适放大值」以内居中；小图按原始尺寸显示不放大 */
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, var(--lb-w));
  max-height: min(100%, var(--lb-h));
  border-radius: var(--rad);
  border: 1px solid rgba(233, 237, 244, 0.14);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  transform: scale(0.96);
  transition: transform 0.26s var(--ease-out);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  width: 44px;
  height: 44px;
  border-radius: var(--rad);
  border: 1px solid var(--line);
  background: rgba(11, 17, 28, 0.8);
  color: var(--tx);
  display: grid;
  place-items: center;
}
.lightbox__close:hover { color: var(--accent); border-color: rgba(110, 231, 216, 0.5); }
.lightbox__close svg { width: 18px; height: 18px; }

/* ---------- 10.5 声骸调谐室（品质升阶小游戏） ---------- */
.tune {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.tune__ring {
  position: relative;
  width: min(74vw, 340px);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #10233a, #060d18 76%);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6), 0 24px 60px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  --qc: #7ed492;
}
.tune__arc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from var(--from, 20deg), var(--qc) var(--arc, 64deg), transparent 0);
  opacity: 0.2;
}
.tune__needle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  will-change: transform;
}
.tune__needle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 3.5%;
  width: 2px;
  height: 46%;
  margin-left: -1px;
  background: linear-gradient(180deg, var(--qc), transparent);
  box-shadow: 0 0 12px var(--qc);
}
.tune__core {
  position: absolute;
  inset: 21%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #142741, #050b15 78%);
  border: 1px solid rgba(233, 237, 244, 0.12);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
}
.tune__echo {
  margin: 0;
  font-size: clamp(44px, 7vw, 62px);
  font-weight: 900;
  line-height: 1.1;
  color: var(--qc);
  text-shadow: 0 0 26px rgba(110, 231, 216, 0.35);
}
.tune__quality {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--tx-dim);
}
.tune__side { flex: 1 1 250px; min-width: 240px; }
.tune__msg {
  min-height: 1.9em;
  margin: 0 0 16px;
  color: var(--tx);
  font-size: 15.5px;
}
.tune__steps {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.tune__pip {
  width: 36px;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  transition: background 0.3s, box-shadow 0.3s;
}
.tune__pip.on { box-shadow: 0 0 10px var(--qc, rgba(110, 231, 216, 0.6)); }
.echo__stat {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--rad);
  border: 1px solid var(--line);
  background: rgba(11, 17, 28, 0.72);
  color: var(--tx-dim);
  font-size: 13.5px;
}

/* ---------- 11. 往昔（sticky 年代 + 章节） ---------- */
.story__head { margin-bottom: clamp(28px, 5vh, 48px); }
.story__grid {
  display: grid;
  grid-template-columns: minmax(190px, 260px) 1fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.story__yearbox { position: sticky; top: calc(var(--nav-h) + 48px); }
.story__ver {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 700;
  line-height: 1;
  color: var(--tx);
}
.story__era {
  margin: 10px 0 0;
  font-family: var(--serif);
  color: var(--accent);
  font-size: 17px;
  letter-spacing: 0.2em;
}
.story__note {
  margin: 14px 0 0;
  color: var(--tx-dim);
  font-size: 13.5px;
  max-width: 22em;
}
.chap {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 56px);
  padding-block: clamp(48px, 8vh, 96px);
  border-top: 1px solid var(--line);
  align-items: center;
}
.chap:nth-child(even) .chap__media { order: 2; }
.chap__media {
  border-radius: var(--rad);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 10;
  background: var(--bg1);
}
.chap__media img { width: 100%; height: 100%; object-fit: cover; }
.chap__tag {
  display: inline-block;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--accent);
  border: 1px solid rgba(110, 231, 216, 0.35);
  border-radius: var(--rad);
  padding: 5px 14px;
  margin-bottom: 16px;
}
.chap__quote {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.62;
}
.chap__memo { margin: 0; color: var(--tx-dim); font-size: 14.5px; max-width: 56ch; }

/* ---------- 12. 声骸试炼场（Matter.js） ---------- */
.echo__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 26px;
}
.echo__hint { margin: 0; color: var(--tx-dim); font-size: 14.5px; }
.echo__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 13. 启程（收束） ---------- */
.start {
  position: relative;
  min-height: 92dvh;
  display: flex;
  align-items: flex-end;
  overflow: clip;
  isolation: isolate;
}
.start__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.start__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenburns 26s ease-in-out infinite alternate;
  will-change: transform;
}
.start__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 9, 15, 0.55) 0%, rgba(6, 9, 15, 0.28) 40%, rgba(6, 9, 15, 0.9) 100%);
}
.start__inner { width: 100%; padding-bottom: clamp(72px, 11vh, 130px); }
.start__title {
  margin: 0 0 18px;
  font-size: clamp(34px, 5.6vw, 72px);
  font-weight: 900;
  line-height: 1.14;
  max-width: 14em;
}
.start__sub { margin: 0 0 30px; color: var(--tx-dim); max-width: 40em; }
.start__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- 14.5 WatchAI：演示与下载（站长的手表软件） ---------- */
.sec--app { border-top: 1px solid var(--line); }
.app__scene { width: 100%; }
/* 桌面双列：左列手表纵跨全部行，右列六块内容（tag/h2/steps/asks/dl/note）依次排。
   只设列距，行距交给各块自己的 margin（2026-09-27 DOM 调整：手表进 body，
   手机端才能排到大标题下面）；右列子块数若增减，stage 的 span 行数要跟着改 */
.app__body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(36px, 5vw, 84px);
  row-gap: 0;
  align-items: center;
}
.app__body > .app__stage { grid-column: 1; grid-row: 1 / span 9; }
.app__body > :not(.app__stage) { grid-column: 2; }
/* DOM 里 asks 排在 steps 前（手机端提问要紧跟手表），桌面右列顺序靠 order 拉回：
   tag → h2 → steps → asks → dlNote → dl → dlRelease → siteAnn → note。
   dlNote/dlRelease/siteAnn 是后台联动动态区（2026-09-27），默认 hidden
   （display:none 不占网格行），所以静态兜底外观与没有它们时完全一致 */
.app__body > .app__tag { order: 1; }
.app__body > .h2 { order: 2; }
.app__body > .app__steps { order: 3; }
.app__body > .app__asks { order: 4; }
.app__body > .app__dlnote { order: 5; }
.app__body > .app__dl { order: 6; }
.app__body > .app__rel { order: 7; }
.app__body > .app__ann { order: 8; }
.app__body > .app__note { order: 9; }
.app__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  touch-action: pan-y;
  perspective: 1100px; /* 滚动旋转的透视在这里给，GSAP 只管旋转 */
}
.app__steps { margin: 18px 0 22px; }
.app__step { padding-block: 12px; border-top: 1px solid var(--line); }
.app__step h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
.app__step p { margin: 0; color: var(--tx-dim); font-size: 14px; }
/* 南孚式滚动展示（桌面）：区块拉高，sticky 舞台，手表随滚动做空间旋转，卖点依次点亮 */
@media (min-width: 1024px) {
  .sec--app { height: 230vh; }
  .app__pin {
    position: sticky;
    top: 0;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    overflow: clip;
  }
}
@media (max-width: 1023.98px) {
  .app__pin { padding-block: clamp(40px, 6vh, 72px); }
  /* 手机单列：大标题 → 手表 → 卖点 → 快捷提问 → 下载。
     手表保持 sticky（2026-10-07 用户"底部 watchai 模型也不固定，和电脑有区别"）：
     钉在导航下方，卖点列表从它底下滚过（与桌面 pin+scrub 同一交互感）；
     quick asks 仍在文档流（永不遮挡红线不变）。 */
  .app__body { display: block; }
  .app__stage {
    position: sticky;
    top: calc(var(--nav-h) + 8px);
    z-index: 3;
    max-width: 340px;
    margin-inline: auto;
    width: 100%;
  }
  /* 解钉（JS 在提问区接近时加 .is-undocked）：手表回到文档流，
     不再盖住四个提问 chips——sticky 的钉住范围本来到父容器底，
     不解钉提问就永远点不了 */
  .app__stage.is-undocked { position: relative; top: auto; }
  /* 卖点行滚到手表面前时给半透明底，文字不与表盘辉光混叠 */
  .app__steps { position: relative; z-index: 4; }
  .app__steps .app__step {
    background: rgb(6 9 15 / 0.55);
    border-radius: 10px;
    padding-inline: 10px;
  }
  /* 提问区永远在表盘之上（点击不被 sticky 盒子拦截的兜底） */
  .app__asks { position: relative; z-index: 5; }
}
.app__halo {
  position: absolute;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 231, 216, 0.16), rgba(110, 231, 216, 0.05) 46%, transparent 70%);
  filter: blur(4px);
  animation: haloPulse 6s ease-in-out infinite alternate;
}
@keyframes haloPulse {
  from { transform: scale(0.96); opacity: 0.8; }
  to   { transform: scale(1.05); opacity: 1; }
}
/* 宣传图主体：CSS 手绘的圆角方表盘。质感三件套：
   ①金属表壳（斜向渐变 + 顶缘捉光 + 底部沉影）②表镜斜向反光（::before）
   ③屏幕内容辉光（::after），配件有表冠纹路与侧按键 */
.app__watch {
  position: relative;
  width: min(56%, 290px);
  aspect-ratio: 1;
  border-radius: 30%;
  background: linear-gradient(145deg, #31446c 0%, #182642 34%, #0a1120 72%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.30),
    inset 0 -2px 5px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 34px 80px rgba(0, 0, 0, 0.60),
    0 12px 34px rgba(110, 231, 216, 0.10);
  transform-style: preserve-3d;
  will-change: transform;
}
.app__watch::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg,
    rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.05) 18%,
    transparent 34%, transparent 76%, rgba(110, 231, 216, 0.12) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.app__screen {
  position: absolute;
  inset: 6.5%;
  border-radius: 25.5%;
  background: radial-gradient(120% 120% at 30% 18%, #14293f, #050b15 74%);
  overflow: hidden;
  padding: 11% 10%;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 0 2px 12px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(110, 231, 216, 0.10),
    0 0 26px rgba(110, 231, 216, 0.08);
}
.app__screen::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -22%;
  width: 84%;
  height: 165%;
  background: linear-gradient(105deg,
    transparent 40%, rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.13) 56%, rgba(255, 255, 255, 0.04) 62%, transparent 70%);
  transform: rotate(8deg);
  pointer-events: none;
}
.app__screen::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 5%;
  height: 32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(110, 231, 216, 0.15), transparent 70%);
  pointer-events: none;
}
.app__time {
  position: absolute;
  top: 6.5%;
  right: 10%;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--tx-dim);
}
.app__who {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 6px;
}
.app__who i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.app__chat {
  flex: 1;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  overflow: hidden;
}
.app__msg {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  padding: 7px 10px;
  border-radius: 13px;
  max-width: 92%;
  width: fit-content;
}
.app__msg--me {
  align-self: flex-end;
  background: linear-gradient(180deg, rgba(233, 237, 244, 0.17), rgba(233, 237, 244, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  border-bottom-right-radius: 4px;
}
.app__msg--ai {
  align-self: flex-start;
  background: linear-gradient(180deg, rgba(110, 231, 216, 0.20), rgba(110, 231, 216, 0.09));
  border: 1px solid rgba(110, 231, 216, 0.38);
  border-bottom-left-radius: 4px;
  box-shadow: 0 4px 14px rgba(110, 231, 216, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.app__msg--typing::after {
  content: "▌";
  margin-left: 2px;
  color: var(--accent);
  animation: caretBlink 0.8s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }
.app__crown {
  position: absolute;
  right: -3%;
  top: 24%;
  width: 5.5%;
  height: 15%;
  border-radius: 30% / 14%;
  background: linear-gradient(180deg, #4a5d84, #1a2440 55%, #0d1526);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 2px 3px 8px rgba(0, 0, 0, 0.5);
}
.app__crown::after {
  content: "";
  position: absolute;
  inset: 14% 32%;
  border-radius: 2px;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px 3px);
  opacity: 0.55;
}
.app__btn2 {
  position: absolute;
  right: -2.4%;
  top: 46%;
  width: 4%;
  height: 8%;
  border-radius: 3px;
  background: linear-gradient(180deg, #33456a, #101a2e);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), 2px 2px 6px rgba(0, 0, 0, 0.45);
}
.app__orbit i {
  position: absolute;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
  box-shadow: 0 0 10px rgba(110, 231, 216, 0.6);
  animation: orbitFloat 7s ease-in-out infinite alternate;
}
.app__orbit i:nth-child(1) { width: 8px; height: 8px; left: 12%; top: 18%; }
.app__orbit i:nth-child(2) { width: 5px; height: 5px; right: 14%; top: 30%; animation-delay: -2.4s; }
.app__orbit i:nth-child(3) { width: 6px; height: 6px; left: 22%; bottom: 14%; animation-delay: -4.2s; }
@keyframes orbitFloat {
  from { transform: translate3d(0, -6px, 0); }
  to   { transform: translate3d(0, 8px, 0); }
}
.app__tag {
  margin: 0 0 8px;
  font-size: 12.5px;
  letter-spacing: 0.32em;
  color: rgba(159, 176, 200, 0.75);
}
.app__asks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 28px;
}
.app__dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.app__meta { color: var(--tx-dim); font-size: 13.5px; }
.app__note {
  margin: 14px 0 0;
  color: rgba(159, 176, 200, 0.7);
  font-size: 13px;
  max-width: 54ch;
}
/* ---------- 14.6 后台联动动态区（2026-09-27 恢复；全部默认 hidden） ---------- */
/* 顶部公告横幅：fixed 钉在导航栏正下方，不进文档流 —— 内容异步出现不会让
   ScrollTrigger 的锚点漂移；后台清空 BANNER 块即消失。
   视觉：无徽标、白字居中于渐变深底；遍数存在 BANNER JSON 的 loops 里，
   滚完遍数整条横幅隐藏（site.js §13），不遮挡浏览 */
.site-banner {
  position: fixed;
  top: var(--nav-h);
  inset-inline: 0;
  z-index: 40; /* 导航(50)之下，内容之上 */
  background: linear-gradient(180deg, rgba(15, 23, 38, 0.96) 0%, rgba(11, 17, 28, 0.94) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.site-banner__viewport {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px clamp(16px, 4vw, 40px);
  overflow: hidden;
}
.site-banner__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--tx);
  letter-spacing: 0.02em;
  text-align: center;
  white-space: normal;
}
/* 滚动态：文字不折行，padding-left 100% 让它从右缘外侧进场，一遍 = 平移一个自身宽度 */
.site-banner.is-scrolling .site-banner__text {
  display: inline-block;
  white-space: nowrap;
  text-align: left;
  padding-left: 100%;
  animation: bannerScroll var(--banner-dur, 14s) linear var(--banner-loops, 1) both;
}
@keyframes bannerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .site-banner.is-scrolling .site-banner__text {
    padding-left: 0;
    animation: none;
    white-space: normal;
    text-align: center;
    display: block;
  }
}
.app__dlnote {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid rgba(110, 231, 216, 0.28);
  border-radius: var(--rad);
  background: var(--accent-dim);
  color: var(--tx);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 54ch;
}
.app__rel {
  margin: 12px 0 0;
  color: var(--tx-dim);
  font-size: 13px;
  line-height: 1.6;
  max-width: 54ch;
}
.app__ann { margin: 16px 0 0; }
.ann__list { display: flex; flex-direction: column; gap: 10px; }
.ann__item {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--bg1);
}
.ann__item--warning { border-left-color: #f0c26a; }
.ann__item--critical { border-left-color: #e5697a; }
.ann__head { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ann__pin {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 4px;
  padding: 1px 6px;
}
.ann__body { margin: 4px 0 0; color: var(--tx-dim); font-size: 13px; line-height: 1.65; white-space: pre-wrap; }

/* ---------- 14. 页脚 ---------- */
.footer { border-top: 1px solid var(--line); padding-block: 44px 52px; }
.footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
}
.footer__brand { font-size: 17px; font-weight: 800; letter-spacing: 0.14em; }
.footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  color: var(--tx-dim);
  font-size: 14px;
}
.footer__meta a { color: var(--tx-dim); transition: color 0.3s; }
.footer__meta a:hover { color: var(--accent); }
.footer__note { margin: 16px 0 0; color: rgba(159, 176, 200, 0.66); font-size: 13px; }
.footer__note a { color: var(--tx-dim); text-decoration: underline; text-underline-offset: 3px; }
.footer__note a:hover { color: var(--accent); }

/* ---------- 15. 声明页（article） ---------- */
.article { max-width: 760px; }
.article h1 {
  margin: 0 0 8px;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 900;
}
.article__date { margin: 0 0 40px; color: var(--tx-dim); font-size: 14px; }
.article h2 {
  margin: 44px 0 12px;
  font-size: 20px;
  font-weight: 800;
}
.article p { margin: 0 0 14px; color: var(--tx-dim); font-size: 15.5px; }
.article p strong { color: var(--tx); font-weight: 700; }
.article a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 16. 降级路径 ---------- */
/* 禁 JS：html 没有 .js 类，.reveal 天然可见；hero 文字由 JS 负责隐藏，天然可见 */
html.no-io .reveal { opacity: 1; transform: none; transition: none; }

/* prefers-reduced-motion：一切循环/驱动动画塌缩为静态 */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .why__media img, .start__bg img { animation: none; }
  .strip__track { animation: none; }
  .app__halo, .app__orbit i { animation: none; }
  .app__msg--typing::after { animation: none; content: ""; }
  .gal__panel.is-on { animation: none; }
  .lightbox, .lightbox__img { transition: none; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  #tide, .strip__wrap, .app__watch { will-change: auto; }
  .gal__item img { transition: none; }
  .bgm__bar, .bgm__prog i { transition: none; }
  .bgm__eq i { animation: none; transform: scaleY(0.6); }
  .bgm::before { display: none; } /* 律动光晕在 reduced-motion 下不启用 */
  .bgm__panel, .bgm__panel .bgm__row, .bgm__title.swap { transition: none; animation: none; }
  .nav__burger i, .nav__menu { transition: none; } /* 汉堡菜单开合也塌缩为瞬显 */
}

/* ---------- 17. 锚点偏移 / 复制反馈 / 响应式折叠 ---------- */
section[id] { scroll-margin-top: 76px; }
.iconbtn.is-ok { color: var(--accent); border-color: rgba(110, 231, 216, 0.5); }

/* 横滚分区整屏 pin（GSAP 接管，2026-10-07 起手机/平板同款交互）：
   整屏高度 + 居中，pin 期间卡片随竖滚横向行进 */
.sec--world {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 72px 48px;
}
/* flex 上下文里 auto margin 会把 .wrap 压成 fit-content，必须撑满 */
.sec--world > .wrap { width: 100%; }
/* 手机/平板：竖滚驱动横滚与桌面同款（§8 pin+scrub）；卡片改**宽度驱动**，
   图框按原图比例完整显示（2026-10-07 用户"移动端比例问题，不能按原图比例显示"） */
@media (max-width: 1023.98px) {
  .wcard { width: min(86vw, 560px); }
  .wcard__frame { height: auto; width: 100%; }
}
@media (max-width: 900px) {
  .why { grid-template-columns: 1fr; }
  /* 图片保持 sticky（2026-10-07 用户"三个理由那种图片不会固定，和电脑有动效区别"）：
     单列后图片在文档流上方，行从它底下滚过时钉在导航下方 */
  .why__media {
    position: sticky;
    top: calc(var(--nav-h) + 16px);
    z-index: 3;
    aspect-ratio: 2 / 1;
    max-height: 44dvh;
  }
}
@media (max-width: 767px) {
  .why__row { grid-template-columns: 1fr; gap: 4px; }
  .gal__item { height: 106px; }
  .story__grid { grid-template-columns: 1fr; }
  /* 版本年份块保持 sticky（2026-10-07 用户"版本数字会随滑动离去，不像电脑那样交互"）：
     章节从它下方滚过时大字版本号钉在屏上继续换档；垫底色防章节文字从底下穿帮。
     介绍（note）同步恢复显示 —— 之前 display:none 让"往昔介绍不见了"。 */
  .story__yearbox {
    position: sticky;
    top: calc(var(--nav-h) + 10px);
    z-index: 6;
    background: rgb(8 13 21 / 0.92);
    border: 1px solid var(--line);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    margin: 0 0 20px;
    padding: 12px 16px;
  }
  .chap { grid-template-columns: 1fr; gap: 18px; }
  .chap:nth-child(even) .chap__media { order: 0; }
  .chap__media { aspect-ratio: 2 / 1; }
  .echo__head { align-items: flex-start; }
  .hero__sub { max-width: 30em; }
}

/* ---------- 18. 歌单播放器（左下角常驻小控件） ---------- */
.bgm {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 70;
  width: min(80vw, 340px); /* 固定宽度：列表开合时横条不再变长变短；别再加宽，会多遮底部图片 */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 音频律动光晕：低频驱动的呼吸环境光（--lvl 由 site.js 每帧写入 0..1）。
   光是抽象的，跟着低频呼吸天然合理；暂停后 --lvl 归零即熄灭 */
.bgm::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -22%;
  height: 150%;
  background: radial-gradient(58% 62% at 50% 72%,
    rgba(110, 231, 216, 0.34), rgba(110, 231, 216, 0.10) 52%, transparent 72%);
  filter: blur(16px);
  opacity: var(--lvl, 0);
  transform: scale(calc(1 + var(--lvl, 0) * 0.09));
  transform-origin: 50% 78%;
  pointer-events: none;
}
.bgm__bar {
  position: relative;
  z-index: 1; /* 压在律动光晕(::before)之上 */
  display: flex;
  align-items: center;
  gap: 8px; /* 放松节奏；再大中段就装不下最宽歌名（99px），别超 */
  padding: 11px 10px 9px;
  border-radius: var(--rad);
  border: 1px solid rgba(233, 237, 244, 0.14);
  overflow: hidden;
  /* 背景选穗波市的夜：紫藤与路灯的光，配歌单刚好 */
  background:
    linear-gradient(100deg, rgba(6, 9, 15, 0.88) 0%, rgba(6, 9, 15, 0.66) 60%, rgba(6, 9, 15, 0.50) 100%),
    url(../img/world-suibo-night.webp) center 32% / cover no-repeat;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: box-shadow 0.6s ease;
}
/* 播放中：横条带一圈青色呼吸辉光 */
.bgm.is-playing .bgm__bar {
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 1px rgba(110, 231, 216, 0.28),
    0 0 28px rgba(110, 231, 216, 0.18);
}
.bgm__prog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 -1px 0 rgba(233, 237, 244, 0.14);
  cursor: pointer;
  touch-action: none; /* 拖动刮擦（2026-10-01）：手指按住进度条别把页面拖走 */
}
.bgm__prog i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #2fb9a8, var(--accent));
  box-shadow: 0 0 10px rgba(110, 231, 216, 0.65);
  position: relative;
}
/* 播放头：悬停进度条时出现在填充末端，提示可拖动跳转 */
.bgm__prog i::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(110, 231, 216, 0.9);
  opacity: 0;
  transition: opacity 0.2s var(--ease-out);
}
.bgm__prog:hover i::after { opacity: 1; }
/* 拖动刮擦中播放头常显（不依赖 hover——触屏没有 hover） */
.bgm__prog.is-seeking i::after { opacity: 1; }
.bgm__time {
  font-size: 11px;
  color: var(--tx-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  /* 宽度钉死：正常计时（11 字符）即最宽态，切换不抖；给歌名让空间 */
  flex: none;
  min-width: 68px;
  text-align: right;
}
.bgm__ctl {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--tx);
  transition: color 0.3s, background 0.3s;
}
.bgm__ctl:hover { color: var(--accent); background: var(--accent-dim); }
.bgm__ctl svg { width: 17px; height: 17px; }
.bgm__toggle { background: var(--accent); color: var(--accent-ink); }
.bgm__toggle:hover { color: var(--accent-ink); background: var(--accent-strong); }
.bgm__toggle .ic-pause { display: none; }
.bgm.is-playing .bgm__toggle .ic-pause { display: block; }
.bgm.is-playing .bgm__toggle .ic-play { display: none; }
.bgm__info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  /* 弹性占满中段：歌名再长也只在自己地里省略，右半段按钮纹丝不动 */
  flex: 1 1 0;
  min-width: 0;
}
.bgm__title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bgm__sub {
  font-size: 11px;
  color: var(--tx-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bgm__panel {
  width: 100%;
  border-radius: var(--rad);
  border: 1px solid rgba(233, 237, 244, 0.14);
  /* 面板背景选琥珀之都的黄昏：暖紫与灯色，和条体的夜景区分 */
  background:
    linear-gradient(180deg, rgba(6, 9, 15, 0.90) 0%, rgba(6, 9, 15, 0.82) 100%),
    url(../img/world-suibo-dusk.webp) center 40% / cover no-repeat;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  /* 开合动效：从横条位置向上弹出 */
  transform-origin: 24px calc(100% + 16px);
  transform: translateY(12px) scale(0.96);
  opacity: 0;
  transition: transform 0.32s var(--ease-out), opacity 0.24s var(--ease-out);
}
.bgm__panel.is-open {
  transform: none;
  opacity: 1;
}
.bgm__panel.is-open .bgm__row {
  animation: rowIn 0.42s var(--ease-out) both;
  animation-delay: calc(min(var(--i, 0), 8) * 40ms);
}
@keyframes rowIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}
.bgm__panel[hidden] { display: none; }
.bgm__headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 4px 10px;
}
.bgm__head {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--tx-dim);
}
.bgm__mode {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(11, 17, 28, 0.7);
  color: var(--tx-dim);
  font-size: 12px;
  transition: color 0.3s, border-color 0.3s;
}
.bgm__mode:hover { color: var(--accent); border-color: rgba(110, 231, 216, 0.4); }
#bgmRec, #bgmAllList { max-height: 44vh; overflow: auto; }
.bgm__hint { margin: 8px 4px; font-size: 13px; color: var(--tx-dim); }
/* ── 访客点播（2026-10-06）：面板里的第三个视图 ── */
#bgmReqBox { max-height: 44vh; overflow: auto; }
.bgm__req {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 2px 4px 8px;
  padding: 12px;
  border: 1px solid rgba(110, 231, 216, 0.2);
  border-radius: 12px;
  background: rgb(14 30 46 / 0.6);
}
.bgm__req-input {
  width: 100%;
  border: 1px solid rgba(110, 231, 216, 0.22);
  border-radius: 8px;
  background: rgb(8 20 32 / 0.7);
  color: rgb(230 248 244 / 0.92);
  font: inherit;
  font-size: 13.5px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.25s ease;
}
.bgm__req-input:focus { border-color: rgba(110, 231, 216, 0.6); }
.bgm__req-text { resize: vertical; min-height: 52px; }
.bgm__req-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bgm__req-hint { margin: 0; color: #ffb3a7; font-size: 12.5px; }
.bgm__req-hint.is-ok { color: #6ee7d8; }
.bgm__req-send { flex: none; padding: 6px 14px; font-size: 12.5px; color: var(--tx); }
.bgm__req-send:disabled { opacity: 0.55; }
.bgm__row {
  display: flex;
  width: 100%;
  box-sizing: border-box; /* 每行统一满宽，绿色选中框不再长短不一 */
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: none;
  text-align: left;
  color: var(--tx);
  transition: background 0.25s;
}
.bgm__row:hover { background: var(--accent-dim); }
.bgm__row.is-on { background: var(--accent-dim); box-shadow: inset 0 0 0 1px rgba(110, 231, 216, 0.35); }
.bgm__no { font-size: 11px; color: var(--tx-dim); width: 20px; flex: none; }
.bgm__txt { display: flex; flex-direction: column; font-size: 13.5px; font-weight: 600; }
.bgm__txt small { font-weight: 400; font-size: 11.5px; color: var(--tx-dim); margin-top: 2px; }
/* 播放中的行：右侧跳动的小均衡器 */
.bgm__eq {
  margin-left: auto;
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  flex: none;
}
.bgm__eq i {
  width: 2px;
  height: 12px;
  background: var(--accent);
  transform-origin: bottom;
  animation: eqBounce 0.9s ease-in-out infinite;
}
.bgm__eq i:nth-child(2) { animation-delay: 0.15s; }
.bgm__eq i:nth-child(3) { animation-delay: 0.3s; }
.bgm__row.is-on .bgm__eq { display: inline-flex; }
/* 暂停时均衡器冻在低位：不放歌就不许跳（2026-09-27 用户反馈） */
.bgm:not(.is-playing) .bgm__eq i {
  animation: none;
  transform: scaleY(0.35);
}
@keyframes eqBounce {
  0%, 100% { transform: scaleY(0.25); }
  50%      { transform: scaleY(1); }
}
/* 换歌时标题滑入 */
.bgm__title.swap { animation: titleSwap 0.5s var(--ease-out); }
@keyframes titleSwap {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
  /* 基线的 min(80vw,340px) 会让 right 失效（过度约束），右边缺一块；
     手机上左右撑满对称，bottom 从 12 压到 8 贴边下移（2026-09-27 用户反馈） */
  .bgm { left: 12px; right: 12px; bottom: 8px; width: auto; }
  .bgm__panel { width: 100%; }
}
@media (max-width: 349px) {
  /* 特小屏：时间数字让位给歌名（进度条仍能看位置） */
  .bgm__time { display: none; }
}

/* ── 巨声骸·地名轨道（2026-09-30）：播放时按剧情序进场环绕中心天体，
   暂停逆序退场；定位由 site.js §5 逐帧投影写入 transform，CSS 只管观感。
   pointer-events 关掉——地名飘在 #hero 上，不能挡拖拽与点击；
   全站 user-select:none 已有，文字不可选。 ── */
.echo-places {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.echo-place {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 16px;
  letter-spacing: 0.34em;
  text-indent: 0.34em; /* 抵消末字后多出的字距，视觉居中 */
  color: #eefffb;
  text-shadow:
    0 0 14px rgb(110 231 216 / 0.75),
    0 0 3px rgb(220 255 248 / 0.95),
    0 1px 2px rgb(4 12 20 / 0.9);
  opacity: 0;
  will-change: transform, opacity;
  white-space: nowrap;
}

/* ── 留言区（voices，2026-10-01 改版：弹幕画板）——
   常显；所有留言像弹幕一样在画板上从右向左划过（CSS 动画，transform 专属）。
   铁律沿用：textContent 注入、reduced-motion 降级为静态标签流。 ── */
.voices__head { margin-bottom: 18px; text-align: center; }
.voices__lede {
  margin-top: 8px;
  color: rgb(220 255 248 / 0.55);
  font-size: 14px;
  letter-spacing: 0.12em;
}
.voices__stage {
  position: relative;
  height: 324px; /* 360 - 10%（2026-10-01 用户两轮调整：300 加宽 20% 后又收 10%） */
  overflow: hidden;
  border-top: 1px solid rgb(110 231 216 / 0.12);
  border-bottom: 1px solid rgb(110 231 216 / 0.12);
  background:
    radial-gradient(120% 90% at 50% 100%, rgb(27 58 102 / 0.35), transparent 70%),
    rgb(10 22 36 / 0.4);
}
/* 弹幕条：起点在画板右缘外；JS 只设 --lane（轨道）/ --d（时长）/ --delay（负延迟错峰）。
   每条留言只飘一遍（2026-10-06 用户定稿）：播 1 次就停在画板外（both 兜住负延迟
   开场与结束态），JS 在 animationend 把节点摘掉，画板不留死元素 */
.voices__dm {
  position: absolute;
  left: 100%;
  top: calc(var(--lane, 0) * (100% / 6));
  white-space: nowrap;
  color: rgb(226 250 246 / 0.9);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-shadow: 0 0 10px rgb(110 231 216 / 0.35);
  padding: 5px 14px;
  border: 1px solid rgb(110 231 216 / 0.16);
  border-radius: 999px;
  background: rgb(16 34 52 / 0.5);
  will-change: transform;
  animation: voicesDm var(--d, 18s) linear 1 both;
  animation-delay: var(--delay, 0s);
}
.voices__dm i {
  font-style: normal;
  color: #6ee7d8;
  margin-right: 8px;
  font-size: 13px;
}
@keyframes voicesDm {
  /* 从右缘外一路划到左缘外（-100vw 保证长弹幕也完全出画） */
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - 100vw)); }
}
.voices__form {
  margin: 26px auto 0;
  max-width: 520px;
  border: 1px solid rgb(110 231 216 / 0.2);
  border-radius: 16px;
  background: rgb(14 30 46 / 0.6);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(8px);
}
/* 站长回信（2026-10-07）：表单左侧的展示面板，列出站长对访客留言的公开回复。
   2026-10-07 用户终轮：**宽度翻倍**（回归文档流占左列 560px）、高度 240 与
   表单同排居中；回信多时列表内部滚动（标题钉在顶部）。后台拉不到时整块
   hidden（静态兜底）。内容是公开接口，面向所有访客。 */
.voices__replies {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  height: 240px;
  min-height: 0;
  max-height: 260px;
  border: 1px solid rgb(110 231 216 / 0.18);
  border-radius: 16px;
  background: rgb(14 30 46 / 0.55);
  padding: 14px 16px;
  backdrop-filter: blur(8px);
}
/* 站长回信面板已回归文档流（grid 左列），无需定位锚 */

.voices__repliesTitle {
  color: #6ee7d8;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}
.voices__repliesList {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}
.voices__reply {
  border-bottom: 1px solid rgb(110 231 216 / 0.1);
  padding-bottom: 12px;
}
.voices__reply:last-child { border-bottom: none; padding-bottom: 0; }
/* 问：署名用主题色 <i>，正文浅色 */
.voices__replyAsk {
  color: rgb(230 248 244 / 0.8);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 5px;
  overflow-wrap: anywhere;
}
.voices__replyAsk i {
  color: #6ee7d8;
  font-style: normal;
  font-weight: 600;
  margin-right: 6px;
}
/* 置顶徽标：金底小签，与署名/站长标区分 */
.voices__replyAsk i.voices__replyPin {
  background: rgb(240 194 106 / 0.16);
  border: 1px solid rgb(240 194 106 / 0.45);
  border-radius: 5px;
  color: #f0c26a;
  font-size: 11px;
  font-weight: 600;
  margin-right: 6px;
  padding: 1px 6px;
}
/* 答：站长回复用左侧亮线突出，颜色更亮一档 */
.voices__replyAns {
  border-left: 2px solid rgb(110 231 216 / 0.55);
  color: rgb(230 248 244 / 0.92);
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  overflow-wrap: anywhere;
  padding-left: 9px;
}
.voices__replyAns i {
  color: #6ee7d8;
  font-style: normal;
  font-weight: 600;
  margin-right: 6px;
}
.voices__repliesEmpty {
  color: rgb(230 248 244 / 0.4);
  font-size: 12px;
  margin: 0;
}
.voices__row { display: flex; }
.voices__nick,
.voices__input {
  width: 100%;
  border: 1px solid rgb(110 231 216 / 0.22);
  border-radius: 10px;
  background: rgb(8 20 32 / 0.7);
  color: rgb(230 248 244 / 0.92);
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.25s ease;
}
.voices__nick:focus,
.voices__input:focus { border-color: rgb(110 231 216 / 0.6); }
/* 输入框吃掉漂泊框的富余高度（2026-10-07 用户"增加的空白区域加给留言输入框"）：
   min-height 跟着 min-height:280 的框体走，写字空间明显更大 */
.voices__input { resize: vertical; min-height: 128px; }
.voices__hint {
  color: #ffb3a7;
  font-size: 13px;
  margin: 0;
}
/* 审核提示（提交成功进入待审核）用主题色，与错误提示区分 */
.voices__hint.is-ok {
  color: #6ee7d8;
}
.voices__send { justify-content: center; }
/* 表单 + 点赞 + 站长回信（2026-10-07 用户终版）：
   两卡**中心点水平齐平**（同一基线：align-items:center 自然实现，
   表单不再 top 位移）、**漂泊框上下宽度略大于回信框**（宽 580>540、
   高 280>240）、两框整体**左移**贴内容区左缘依次排开。 */
.voices__bottom {
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 580px);
  justify-content: start;
  column-gap: 40px;
  align-items: center;
  margin-top: 34px;
}
.voices__form {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  width: 100%;
  max-width: none;
  min-height: 280px;
  border: 1px solid rgb(110 231 216 / 0.2);
  border-radius: 16px;
  background: rgb(14 30 46 / 0.6);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  backdrop-filter: blur(8px);
}
/* 点赞区：独立一行、横向居中于整个内容区（2026-10-07 用户"点赞功能也居中
   放到下面来，不用挨着漂泊框"）——跨两列 grid-row 2，不再跟表单走 */
.voices__likeWrap {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
  min-width: 0;
}
.voices__likeLabel {
  color: rgb(207 238 233 / 0.6);
  font-size: 14px;
  letter-spacing: 0.22em;
  white-space: nowrap;
}
/* 点赞框：大小由内容（爱心+数字）撑起，紧凑贴合（2026-10-01 用户反馈描边框太大） */
.voices__like {
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  border: 1px solid rgb(255 125 157 / 0.3);
  border-radius: 12px;
  background: rgb(10 24 38 / 0.72);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.voices__like:hover { border-color: rgb(255 125 157 / 0.65); }
.voices__likeHeart {
  color: #ff7d9d;
  font-size: 19px;
  line-height: 1.1;
  text-shadow: 0 0 10px rgb(255 125 157 / 0.6);
  transition: transform 0.2s ease;
}
.voices__like:active .voices__likeHeart { transform: scale(1.3); }
.voices__like.is-liked {
  border-color: rgb(255 125 157 / 0.6);
  cursor: default;
}
.voices__like.is-liked .voices__likeHeart {
  color: #ffb3c6;
  text-shadow: 0 0 14px rgb(255 125 157 / 0.9);
}
.voices__likeCount {
  color: rgb(230 248 244 / 0.95);
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: 0.04em;
}
/* 手机/窄板：**漂泊框在上、回信卡在下**（2026-10-07 用户要求换序）——
   flex column 下按 order 排：表单 1、点赞 2、回信卡 3；卡压矮一档 */
@media (max-width: 860px) {
  .voices__bottom { display: flex; flex-direction: column; align-items: center; }
  .voices__form { order: 1; width: 100%; max-width: 520px; }
  .voices__likeWrap { order: 2; margin-top: 14px; }
  .voices__replies {
    order: 3;
    width: auto;
    align-self: stretch;
    min-height: 0;
    max-height: 280px;
    margin-top: 22px;
  }
}
/* reduced-motion：点赞按钮保留（它是交互不是动效），仅去掉 heart 缩放 */
@media (prefers-reduced-motion: reduce) {
  .voices__like:active .voices__likeHeart { transform: none; }
}

/* reduced-motion：弹幕停飞，降级为静态标签流（可读、不动画） */
@media (prefers-reduced-motion: reduce) {
  .voices__stage { height: auto; padding: 18px; }
  .voices__dm {
    position: static;
    display: inline-block;
    margin: 6px;
    animation: none;
  }
}