/** ==========================================================================
   MuseForm 缪象官网｜styles.css（v6.00 · 彩墨标题与交付叙事版）
   视觉基调：顶部星辉紫长渐变（向下缓缓渐浅、跨屏衔接）+ 粉蓝紫白彩云极慢飘移形变
             + DeepSeek 式首屏骨架（公告条/大标题/玻璃输入框/胶囊入口组）
             + 自托管子集字体（muse-sans-var / muse-serif-900·700）· 彩墨渐变主标题
             + 第二屏创作伙伴名片墙 + 从灵感到交付（四步路径 + 可交付物）
   结构：字体 → 令牌 → 基础 → 背景（渐变/云团/网格）→ 顶栏 → Hero（公告/彩墨标题·钤印/输入框/入口组）→
         第二屏（名片墙）→ 交付区（路径/清单）→ 页尾（收束语）→ toast → 入场动效 → 关于页 → 响应式 → 无障碍
   ========================================================================== */

/* ---------- 自托管字体（子集化；文案更新后重跑构建脚本刷新字符集） ---------- */
@font-face {
  font-family: "MuseSans";
  src: url("../fonts/muse-sans-var.woff2") format("woff2");
  font-weight: 100 900; /* 可变字重：正文 400 / 强调 500-700 一文件全覆盖 */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MuseSerif";
  src: url("../fonts/muse-serif-900.woff2") format("woff2");
  font-weight: 900; /* 彩墨主标题 */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MuseSerif";
  src: url("../fonts/muse-serif-700.woff2") format("woff2");
  font-weight: 700; /* 区块衬线标题 / 名片名 / 页尾引言 */
  font-style: normal;
  font-display: swap;
}

/* ---------- 设计令牌 ---------- */
:root {
  /* 底色层：顶部星辉紫 → 向下渐浅 → 第二屏起浅色纯底 */
  --bg-below: #FAFAFC;
  --bg-top: #EFE6FF;
  --bg-mid: #F6F0FF;
  --bg-bottom: #FAF8FE;
  --bg-dark: #14101E;

  /* 墨色层（深紫黑，品牌按钮文字色） */
  --ink: #17101E;
  --ink-2: rgba(23, 16, 30, 0.62);
  --ink-3: rgba(23, 16, 30, 0.42);
  --ink-on-dark: #F6F3EC;

  /* 月桂金（价值色） */
  --gold: #C9A227;
  --gold-deep: #8F6A15;
  --gold-bright: #E8C36A;
  --gold-soft: rgba(201, 162, 39, 0.52);

  /* 星辉紫（氛围色） */
  --violet: #B990FF;
  --violet-deep: #7C5BD0;
  --violet-soft: rgba(185, 144, 255, 0.35);

  /* 线与面 */
  --line: rgba(23, 16, 30, 0.075);
  --line-gold: rgba(201, 162, 39, 0.42);
  --line-violet: rgba(185, 144, 255, 0.28);
  --card: rgba(255, 255, 255, 0.66);

  /* 形态与节奏 */
  --radius: 24px;
  --radius-sm: 20px;
  --radius-pill: 999px;
  --nav-h: 72px;

  /* 阴影 */
  --shadow-card: 0 30px 70px -34px rgba(41, 24, 68, 0.30), 0 2px 8px rgba(41, 24, 68, 0.04);
  --shadow-toast: 0 20px 48px -20px rgba(23, 16, 30, 0.55);

  /* 字体（自托管子集优先，系统字体兜底） */
  --font-serif: "MuseSerif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif;
  --font-sans: "MuseSans", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;

  /* 动效 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 基础 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 重要：html 不要设置背景色。
   否则 body 背景会从 canvas 层下沉到普通块级层，把 z-index:-1 的 .backdrop
   整层盖住（表现为渐变完全不可见）。body 背景传播到 canvas 才正确。 */

body {
  position: relative;
  min-height: 100svh;
  font-family: var(--font-sans);
  background: var(--bg-below);
  color: var(--ink);
  line-height: 1.75;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
em { font-style: normal; }
button { font-family: inherit; cursor: pointer; }

::selection { background: rgba(201, 162, 39, 0.30); color: var(--ink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(23, 16, 30, 0.16);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(23, 16, 30, 0.28);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 背景：整页一体长渐变——顶部星辉紫缓缓溶入页面浅色底；紫韵特意保留至首屏输入卡高度（实测 DeepSeek：玻璃卡因「背景有色差」而显立体，故中段加深一档，让白玻璃卡可"浮起"），无任何分段（渐变锚定 200svh，与页面底色无缝衔接） ---------- */
.backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-color: var(--bg-below);
  background-image:
    radial-gradient(92vw 48vh at 50% -6%, rgba(185, 144, 255, 0.12), rgba(185, 144, 255, 0) 72%),
    linear-gradient(180deg, var(--bg-top) 0%, #F2E9FF 12%, #EFE4FF 28%, var(--bg-mid) 48%, var(--bg-below) 68%, var(--bg-below) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 200svh;
}

/* 背景网格：全视口固定层，90px 大格（参考 deepseek 官网实测值）；单条 SVG 路径绘制，
   交叉处完整锐利无断开感；DeepSeek 同款「顶强底隐」遮罩（实测其 mask：0.99 → 0.91@9% → 0@100%），
   顶部完整可感、对话框高度约剩五成、视口底部归零——网格只作顶部氛围，不打扰输入框区域 */
.backdrop::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' shape-rendering='crispEdges'%3E%3Cpath d='M90 .5H0M.5 0V90' fill='none' stroke='%237C5BD0' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 90px 90px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.99) 0%, rgba(0, 0, 0, 0.91) 9%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.99) 0%, rgba(0, 0, 0, 0.91) 9%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

/* 云团裁切层：静止（水平渐隐保护第二屏；mask 不可放在旋转层，否则渐隐线随旋转变斜） */
.clouds {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100svh;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, rgba(0, 0, 0, 0.35) 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, rgba(0, 0, 0, 0.35) 90%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

/* 云团旋转层：绕首屏中心缓转（90s/圈，与流场云周期同步） */
.clouds__spin {
  position: absolute;
  inset: 0;
  animation: cloudSpin 90s linear infinite;
}

/* ---------- 云团：粉蓝紫白渐变如彩云在首页缓缓飘动（整体缓转 + 极慢漂移形变，纯装饰） ---------- */
.cloud {
  position: absolute;
  display: block;
  border-radius: 60% 40% 55% 45% / 50% 62% 38% 50%;
  filter: blur(70px);
  pointer-events: none;
  will-change: transform, border-radius;
}

/* 云一：顶部偏左主云（粉 → 白，双色心错位自然过渡） */
.cloud--1 {
  top: -12%;
  left: 8%;
  width: min(780px, 70vw);
  height: min(520px, 48vw);
  opacity: 0.36;
  background:
    radial-gradient(54% 58% at 42% 42%, rgba(255, 148, 208, 0.58), rgba(255, 148, 208, 0) 72%),
    radial-gradient(58% 62% at 64% 60%, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0) 76%);
  animation: cloudDriftA 108s ease-in-out -14s infinite alternate,
             cloudMorphA 76s ease-in-out -10s infinite alternate;
}

/* 云二：右上云（蓝 → 粉） */
.cloud--2 {
  top: -18%;
  right: 4%;
  width: min(620px, 56vw);
  height: min(430px, 40vw);
  opacity: 0.32;
  background:
    radial-gradient(54% 58% at 52% 44%, rgba(132, 176, 255, 0.60), rgba(132, 176, 255, 0) 74%),
    radial-gradient(50% 54% at 34% 62%, rgba(255, 168, 220, 0.44), rgba(255, 168, 220, 0) 76%);
  animation: cloudDriftB 124s ease-in-out -30s infinite alternate,
             cloudMorphB 84s ease-in-out -18s infinite alternate;
}

/* 云三：左中云（紫 → 蓝） */
.cloud--3 {
  top: 22.5%;
  left: -7%;
  width: min(710px, 64vw);
  height: min(480px, 42vw);
  opacity: 0.30;
  background:
    radial-gradient(56% 56% at 46% 46%, rgba(162, 122, 250, 0.56), rgba(162, 122, 250, 0) 74%),
    radial-gradient(50% 52% at 66% 38%, rgba(132, 176, 255, 0.42), rgba(132, 176, 255, 0) 76%);
  animation: cloudDriftB 100s ease-in-out -44s infinite alternate,
             cloudMorphA 68s ease-in-out -26s infinite alternate;
}

/* 云四：中下部云（白 → 紫，贴近浅色区的柔化过渡） */
.cloud--4 {
  top: 50%;
  right: 6%;
  width: min(580px, 52vw);
  height: min(400px, 36vw);
  opacity: 0.26;
  background:
    radial-gradient(54% 56% at 46% 42%, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0) 78%),
    radial-gradient(52% 54% at 62% 64%, rgba(178, 142, 252, 0.48), rgba(178, 142, 252, 0) 78%);
  animation: cloudDriftC 132s ease-in-out -52s infinite alternate,
             cloudMorphB 92s ease-in-out -34s infinite alternate;
}

/* 流场云：Canvas 2D 粒子云雾（参考 deepseek 官网质感），叠于渐变与静态云之上、网格之下 */
.cloud-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100svh;
  opacity: 0.46;
  filter: blur(22px);
  -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, 0.4) 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, 0.4) 82%, transparent 100%);
  pointer-events: none;
}

/* 旋转：绕首屏中心缓转（90s/圈，与流场云的旋转同步） */
@keyframes cloudSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 漂移：缓速往返（约 1.5px/s），缓入缓出；三条轨迹方向各异 */
@keyframes cloudDriftA {
  from { transform: translate3d(-80px, 26px, 0); }
  to   { transform: translate3d(96px, -34px, 0); }
}
@keyframes cloudDriftB {
  from { transform: translate3d(72px, -20px, 0) scale(1.03); }
  to   { transform: translate3d(-92px, 32px, 0) scale(0.97); }
}
@keyframes cloudDriftC {
  from { transform: translate3d(-60px, -26px, 0) rotate(-2deg); }
  to   { transform: translate3d(76px, 30px, 0) rotate(2.5deg); }
}

/* 形变：轮廓在多个不规则形态间缓慢游走（浑圆 ↔ 驼峰 ↔ 长身，似象似马） */
@keyframes cloudMorphA {
  0%   { border-radius: 62% 38% 50% 50% / 45% 60% 40% 55%; }
  32%  { border-radius: 40% 60% 68% 32% / 62% 38% 58% 42%; }
  66%  { border-radius: 56% 44% 36% 64% / 38% 62% 44% 56%; }
  100% { border-radius: 62% 38% 50% 50% / 45% 60% 40% 55%; }
}
@keyframes cloudMorphB {
  0%   { border-radius: 48% 52% 44% 56% / 56% 44% 58% 42%; }
  30%  { border-radius: 66% 34% 58% 42% / 42% 62% 38% 60%; }
  64%  { border-radius: 38% 62% 50% 50% / 60% 40% 56% 44%; }
  100% { border-radius: 48% 52% 44% 56% / 56% 44% 58% 42%; }
}

/* ---------- 页面滚动：锚点平滑跳转（公告条 / 顶栏按钮 → 对应屏） ---------- */
html { scroll-behavior: smooth; }

/* ---------- 顶栏 ----------
   DeepSeek 式：首屏只显示左侧品牌 + 右侧功能（两侧留白 --nav-outer，约视口 14%，
   无玻璃条、无中间按钮），滚过首屏后左右两侧向中间滑动 --nav-slide「并入」玻璃胶囊，
   中间锚点按钮同时浮现；玻璃胶囊从中间横向延伸出现；
   --nav-glass-x 为胶囊离视口两侧距离（= 外侧 + 滑入 - 内容内缩），
   即「logo 距玻璃左缘 / 功能距玻璃右缘」恒为 --nav-inner */
.nav {
  --nav-outer: clamp(20px, 14vw, 280px); /* 首屏两侧留白 */
  --nav-slide: clamp(16px, 5vw, 100px); /* 滚动向中间滑入量 */
  --nav-inner: clamp(20px, 3vw, 44px); /* 内容距玻璃胶囊边缘 */
  --nav-glass-x: calc(var(--nav-outer) + var(--nav-slide) - var(--nav-inner));
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--nav-outer); /* 首屏：两侧元素居中留白 */
  transition: padding 0.45s var(--ease); /* 滚动时向中间滑动并入胶囊 */
}

/* 滚动后：两侧向中间靠拢，滑入玻璃胶囊内 */
.nav.is-scrolled {
  padding: 0 calc(var(--nav-outer) + var(--nav-slide));
}

/* 玻璃胶囊底色：滚动后从中间向两侧横向延伸包住顶栏内容
   （与输入框玻璃同语言：白 55% + blur 18 + 细白描边） */
.nav::before {
  content: "";
  position: absolute;
  inset: 9px var(--nav-glass-x);
  z-index: -1;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 14px 44px -20px rgba(41, 24, 68, 0.35);
  opacity: 0;
  transform: scaleX(0.6); /* 从中间向两侧横向延伸（DS 式，非下滑） */
  transform-origin: center;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}

.nav.is-scrolled::before {
  opacity: 1;
  transform: scaleX(1);
}

/* 锚点导航组：缪斯名片 / 交付内容 / 关于缪象（随玻璃条滚动后浮现，点击平滑跳转） */
.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}

.nav.is-scrolled .nav__links {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--ease), visibility 0s;
}

.nav__link {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 14.5px;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--ink);
  background: rgba(124, 91, 208, 0.10);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.nav__emblem {
  width: 34px;
  height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: #2A1F03;
  background: linear-gradient(150deg, var(--gold-bright), var(--gold) 60%, #B8912A);
  border: 1px solid rgba(201, 162, 39, 0.5);
  border-radius: 50%;
  box-shadow: 0 6px 16px -8px rgba(201, 162, 39, 0.8);
  overflow: hidden;
}

.nav__emblem.is-img {
  background: #FFFFFF;
  border-color: var(--line);
  box-shadow: 0 2px 10px rgba(23, 16, 30, 0.08);
}

.nav__emblem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nav__name {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.nav__name em {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--gold-deep);
  margin-left: 8px;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.4vw, 16px);
}

.nav__app {
  border: 0;
  background: transparent;
  font-size: 14.5px;
  color: var(--ink-2);
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  transition: color 0.25s var(--ease);
}

.nav__app:hover { color: var(--ink); }

/* 语言切换：灰底胶囊组 */
.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: rgba(23, 16, 30, 0.055);
}

.lang__btn {
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-pill);
  padding: 4.5px 14px;
  font-size: 13.5px;
  line-height: 1;
  color: var(--ink-3);
  transition: color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.lang__btn:hover { color: var(--ink-2); }

.lang__btn.is-on {
  background: #FFFFFF;
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 1px 5px rgba(23, 16, 30, 0.10);
}

/* ==========================================================================
   第一屏 Hero：标题 + 英文小标 + 灵感球 + 玻璃输入框
   ========================================================================== */
.stage {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 10px) clamp(20px, 5vw, 48px) 44px;
  text-align: center;
}

/* 公告条：✦ + 消息 + →（DeepSeek 式首屏顶部公告，点击直达第二屏） */
.stage__announce {
  display: block;
  max-width: min(720px, 92vw);
  margin: 0 auto 24px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(23, 16, 30, 0.72);
  transition: color 0.25s var(--ease);
}

.stage__announce:hover { color: var(--ink); }

.stage__announce-star {
  display: inline-block;
  margin-right: 7px;
  font-size: 13px;
  color: var(--gold);
  transform: translateY(-1px);
}

.stage__announce-arrow { margin-left: 3px; opacity: 0.8; }

/* 主标题（彩墨版：思源宋体 900 + 关键词渐变——“灵感”紫→品红、“作品”品红→蓝紫） */
.stage__title {
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-indent: 0.12em; /* 补偿末字后字距，视觉居中 */
  color: var(--ink);
  text-wrap: balance;
}

/* 彩墨渐变（background-clip:text 不可用时自动降级为墨色，不出现色块） */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ink--muse {
    background-image: linear-gradient(120deg, #8C5BE8 0%, #C66BE2 55%, #E86BB1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .ink--form {
    background-image: linear-gradient(120deg, #E86BB1 0%, #B47BE8 45%, #7C8BF0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ---------- 标题 hover「灵感钤印」：墨点反色光标 + 金环落章 ----------
   墨点 = 白色圆 + mix-blend-mode difference：在浅紫底上自动反出深墨点、
   压过的文字自动反白（DeepSeek 自定义光标机制，颜色随底色自然演化）。
   须挂在无 transform/opacity/filter 的祖先下，否则反色只作用于容器内部。 */
.seal,
.seal-ring {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 30;
  pointer-events: none;
  will-change: transform; /* 平移由 JS 逐帧追随指针；缩放/淡入在子级与伪元素上 */
}

.seal { mix-blend-mode: difference; }

.seal__disc,
.seal-ring::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 0.18s ease-out, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); /* 落章回弹 */
}

.seal__disc { background: #FFFFFF; }

/* 金环：略大于墨点外沿（4px 呼吸缝），落章时轻微延迟跟进 */
.seal-ring::before {
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border: 1px solid rgba(201, 162, 39, 0.55);
  transform: scale(0.72);
  transition-delay: 0.04s, 0.04s;
}

.seal.is-on .seal__disc,
.seal-ring.is-on::before {
  opacity: 1;
  transform: scale(1);
}

/* 触屏设备无 hover：不展示钤印 */
@media (hover: none) {
  .seal,
  .seal-ring { display: none; }
}

/* 英文小标 */
.stage__sub {
  margin-top: 18px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--gold-deep);
  opacity: 0.85;
}

/* ---------- 玻璃输入框（DeepSeek 式 · 880×138 逐像素对齐：白玻璃 + 24px 圆角 + 模式 chips + 圆形发送钮） ---------- */
.composer {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 文本区与底栏间距（DeepSeek 实测 4px） */
  width: min(880px, 100%);
  margin-top: 40px;
  padding: 4px 10px 10px; /* 实测内垫：上 4 / 侧 10 / 下 10；配 2px 边框 + 80px 文本区 + 4px 间距 + 36px 底栏 = 整卡 880×138 */
  background: rgba(255, 255, 255, 0.36);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 24px;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  text-align: left;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.composer:focus-within {
  border-color: rgba(185, 144, 255, 0.60);
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 18px 50px -30px rgba(90, 58, 168, 0.45);
}

.composer__input {
  display: block;
  width: 100%;
  min-height: 80px; /* DeepSeek 实测 80px：占位文字居上、底栏贴下 */
  max-height: 300px;
  padding: 12px;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}

.composer__input::placeholder { color: rgba(23, 16, 30, 0.38); }

.composer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.composer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 模式 chips：34px 胶囊（参考 deepseek 实测：13px 字号 / 18px 圆角 / 细边框） */
.composer__chip {
  height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(23, 16, 30, 0.10);
  border-radius: 18px;
  background: transparent;
  font-size: 13px;
  line-height: 1;
  color: var(--ink-2);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.composer__chip:hover { color: var(--ink); border-color: rgba(23, 16, 30, 0.22); }

.composer__chip.is-on {
  border-color: rgba(124, 91, 208, 0.45);
  background: rgba(124, 91, 208, 0.10);
  color: var(--violet-deep);
}

/* 圆形发送钮：主紫（DeepSeek 蓝色位替换为品牌紫） */
.composer__send {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #7C5BD0;
  color: #FFFFFF;
  box-shadow: 0 8px 20px -8px rgba(124, 91, 208, 0.8);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}

.composer__send:hover { background: #6B4AC0; transform: translateY(-1px); }
.composer__send svg { width: 16px; height: 16px; }

/* ---------- 胶囊入口组（DeepSeek 式白玻璃 pill：44px 高 / 100px 圆角 / blur 12px） ---------- */
.stage__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

.stage__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(23, 16, 30, 0.14);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.40);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 15px;
  line-height: 1;
  color: var(--ink);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.stage__action:hover {
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(23, 16, 30, 0.22);
  transform: translateY(-1px);
}

.stage__action svg { width: 16px; height: 16px; flex: none; opacity: 0.72; }

/* ==========================================================================
   第二屏：Nine Inspirations（标题区；星系动效已移至首屏）
   ========================================================================== */
.insp {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 24px) clamp(16px, 4vw, 48px) 64px;
  text-align: center;
}

.insp__head { margin-bottom: 6px; }

.insp__kicker {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--violet-deep);
  opacity: 0.75;
}

.insp__title {
  margin-top: 12px;
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.insp__sub {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-2);
  letter-spacing: 0.08em;
}

/* ---------- 创作伙伴名片墙（九缪斯 3×3 + 小象特别卡；节点由 JS 依 data/characters.js 生成） ---------- */
.wall {
  width: min(1020px, 100%);
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.pcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: 0 22px 48px -34px rgba(41, 24, 68, 0.26);
  text-align: left;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.pcard:hover,
.pcard:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(185, 144, 255, 0.38);
  box-shadow: 0 26px 54px -32px rgba(41, 24, 68, 0.34);
}

.pcard:focus-visible {
  outline: 2px solid rgba(140, 91, 232, 0.55);
  outline-offset: 3px;
}

/* 卡片「查看档案」提示：悬停 / 键盘聚焦浮现（触屏常显弱化版） */
.pcard__more {
  position: absolute;
  right: 16px;
  bottom: 12px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--violet-deep);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
  pointer-events: none;
}

.pcard:hover .pcard__more,
.pcard:focus-visible .pcard__more {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .pcard__more { opacity: 0.55; transform: none; }
}

/* 角色色圆点：--pc 由 JS 注入（角色 DNA 色） */
.pcard__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pc, var(--violet));
  box-shadow: 0 6px 14px -6px var(--pc, var(--violet));
}

.pcard__name {
  font-family: var(--font-serif);
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.pcard__awake {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

/* 小象特别卡：横贯整行，薄荷青描边 + 定稿台词 */
.pcard--ele {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 26px;
  border-color: rgba(143, 232, 210, 0.62);
  background:
    radial-gradient(120% 190% at 90% 0%, rgba(143, 232, 210, 0.20), rgba(143, 232, 210, 0) 58%),
    var(--card);
}

.pcard__id {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.pcard__meta { display: flex; flex-direction: column; gap: 4px; }

.pcard__quote {
  font-size: 13.5px;
  letter-spacing: 0.03em;
  color: var(--ink-2);
  text-align: right;
}

/* 名片墙收束句（2026-06-11 官网定稿） */
.insp__coda {
  margin-top: 26px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}

/* ==========================================================================
   第三屏：从灵感到交付（四步路径 + 五类可交付物）
   ========================================================================== */
.deliver {
  position: relative;
  padding: clamp(72px, 12vh, 128px) clamp(16px, 4vw, 48px) clamp(52px, 8vh, 88px);
  text-align: center;
}

.deliver__kicker {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--violet-deep);
  opacity: 0.75;
}

.deliver__title {
  margin-top: 12px;
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.deliver__sub {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-2);
  letter-spacing: 0.08em;
}

/* 四步路径：01 灵感发生 → 04 交付变现 */
.deliver__steps {
  list-style: none;
  width: min(1020px, 100%);
  margin: 46px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  text-align: left;
}

.dstep {
  padding: 22px 20px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: 0 22px 48px -34px rgba(41, 24, 68, 0.24);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.dstep:hover {
  transform: translateY(-2px);
  border-color: rgba(185, 144, 255, 0.38);
  box-shadow: 0 26px 54px -32px rgba(41, 24, 68, 0.32);
}

.dstep__no {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
  opacity: 0.9;
}

.dstep__name {
  margin-top: 10px;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.dstep__desc {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-2);
}

/* 五类可交付物 */
.deliver__grid {
  width: min(1020px, 100%);
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  text-align: left;
}

.dcard {
  padding: 20px 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.52);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.dcard:hover {
  transform: translateY(-2px);
  border-color: rgba(185, 144, 255, 0.38);
  box-shadow: 0 24px 50px -34px rgba(41, 24, 68, 0.30);
}

.dcard__name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.dcard__items {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: clamp(28px, 6vh, 64px);
  z-index: 40;
  max-width: calc(100vw - 48px);
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  background: rgba(23, 16, 30, 0.92);
  color: var(--ink-on-dark);
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  box-shadow: var(--shadow-toast);
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- 页脚弹窗：用户协议 / 隐私政策（毛玻璃面板，与站点玻璃语言一致） ---------- */
body.is-locked { overflow: hidden; }

.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 44px);
}

.sheet[hidden] { display: none; }

.sheet__mask {
  position: absolute;
  inset: 0;
  background: rgba(31, 20, 51, 0.38);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.sheet.is-open .sheet__mask { opacity: 1; }

.sheet__panel {
  position: relative;
  width: min(720px, 100%);
  max-height: min(84vh, 780px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 40px 90px -40px rgba(41, 24, 68, 0.5);
  opacity: 0;
  transform: translateY(16px) scale(0.99);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}

.sheet.is-open .sheet__panel { opacity: 1; transform: none; }

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px 12px;
}

.sheet__title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.sheet__close {
  flex: none;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease), background 0.22s var(--ease);
}

.sheet__close:hover {
  color: var(--gold-deep);
  border-color: var(--line-gold);
  background: rgba(255, 255, 255, 0.92);
}

.sheet__body {
  overflow-y: auto;
  padding: 0 26px 26px;
  overscroll-behavior: contain;
}

.sheet__lead {
  margin: 2px 0 14px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-2);
}

.sheet__grid {
  display: grid;
  gap: 10px;
}

.sheet__grid article {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 12px 15px;
  border-radius: 14px;
  background: rgba(248, 244, 255, 0.72);
  border: 1px solid var(--line);
}

.sheet__grid strong {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-deep);
}

.sheet__grid span {
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-2);
}

.sheet__more { margin-top: 16px; }

.sheet__more summary {
  cursor: pointer;
  font-size: 13.5px;
  letter-spacing: 0.05em;
  color: var(--ink);
  padding: 10px 0;
  border-top: 1px solid var(--line);
  transition: color 0.22s var(--ease);
}

.sheet__more summary:hover { color: var(--gold-deep); }

.sheet__more ol {
  margin: 6px 0 4px;
  padding-left: 22px;
  display: grid;
  gap: 10px;
}

.sheet__more li {
  font-size: 13px;
  line-height: 1.78;
  color: var(--ink-2);
}

.sheet__note {
  margin-top: 20px;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--ink-3);
}

/* ---------- 「缪斯档案」弹层（点击名片墙卡片打开；复用 sheet 玻璃体系，--pc 为角色 DNA 色） ---------- */
#sheetDossier .sheet__panel {
  width: min(680px, 100%);
  overflow: hidden;
}

/* 顶部角色色细带（2px + 半透明）：DNA 色的克制呼应 */
#sheetDossier .sheet__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0.45;
  background: linear-gradient(90deg, var(--pc, #7C5BD0), rgba(255, 255, 255, 0) 82%);
}

#sheetDossier .sheet__close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
}

.mdossier__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mdossier__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 30px 32px 0;
}

.mdossier__dot {
  flex: none;
  margin-top: 13px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pc, var(--violet-deep));
}

.mdossier__name {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.mdossier__name em {
  margin-left: 10px;
  font-style: italic;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.mdossier__tags {
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

.mdossier__tags i {
  font-style: normal;
  padding: 0 8px;
  color: var(--ink-3);
}

.mdossier__grid {
  display: grid;
  grid-template-columns: minmax(200px, 236px) 1fr;
  gap: 26px;
  align-items: start;
  padding: 22px 32px 32px;
}

.mdossier__grid.is-plain { grid-template-columns: 1fr; }

.mdossier__fig {
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(23, 16, 30, 0.03);
}

.mdossier__fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mdossier__pos {
  padding-left: 14px;
  border-left: 2px solid var(--pc, var(--violet-deep));
  border-left-color: color-mix(in srgb, var(--pc, var(--violet-deep)) 48%, #fff);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.mdossier__slogan {
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(23, 16, 30, 0.025);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.mdossier__slogan span {
  display: block;
  margin-bottom: 4px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

@media (max-width: 768px) {
  .mdossier__head { padding: 24px 22px 0; }
  .mdossier__name { font-size: 22px; }
  .mdossier__grid { grid-template-columns: 1fr; gap: 18px; padding: 18px 22px 26px; }
  .mdossier__fig { width: min(200px, 60%); max-width: 200px; margin: 0 auto; }
}

/* ---------- 入场动效 ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.stage__announce { animation: rise 0.7s var(--ease) both; }
.stage__title { animation: rise 0.7s var(--ease) 0.08s both; }
.stage__sub { animation: rise 0.7s var(--ease) 0.16s both; }
.composer { animation: rise 0.8s var(--ease) 0.24s both; }
.stage__actions { animation: rise 0.8s var(--ease) 0.32s both; }

/* 第二屏 / 交付区：滚动进入时淡入（组内错峰 0.08s / 0.16s） */
.insp__head,
.wall,
.insp__coda,
.deliver__head,
.deliver__steps,
.deliver__grid {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.insp.is-seen .insp__head,
.insp.is-seen .wall,
.insp.is-seen .insp__coda {
  opacity: 1;
  transform: translateY(0);
}

.insp.is-seen .wall { transition-delay: 0.08s; }
.insp.is-seen .insp__coda { transition-delay: 0.16s; }

.deliver.is-seen .deliver__head,
.deliver.is-seen .deliver__steps,
.deliver.is-seen .deliver__grid {
  opacity: 1;
  transform: translateY(0);
}

.deliver.is-seen .deliver__steps { transition-delay: 0.08s; }
.deliver.is-seen .deliver__grid { transition-delay: 0.16s; }

/* 英文文案的排版微调 */
html[lang="en"] .stage__title { letter-spacing: 0.06em; text-indent: 0.06em; font-size: clamp(28px, 3.2vw, 42px); }
html[lang="en"] .stage__sub { letter-spacing: 0.26em; text-indent: 0.26em; }
html[lang="en"] .about-cover__title { letter-spacing: 0.03em; }
html[lang="en"] .closing__quote { letter-spacing: 0.04em; }
html[lang="en"] .about-sec__title { letter-spacing: 0.03em; }
html[lang="en"] .insp__coda { letter-spacing: 0.06em; }
html[lang="en"] .deliver__title { letter-spacing: 0.02em; }
html[lang="en"] .deliver__sub { letter-spacing: 0.06em; }
html[lang="en"] .stage__announce { max-width: min(900px, 94vw); }

/* ==========================================================================
   页尾（首页）：收束语居中 + 关于入口 + 版权
   ========================================================================== */
.closing {
  padding: clamp(84px, 16vh, 168px) clamp(20px, 4vw, 48px) 64px;
  text-align: center;
}

/* 滚动进入淡入（JS 加 .is-seen） */
.closing__inner {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.closing.is-seen .closing__inner {
  opacity: 1;
  transform: translateY(0);
}

.closing__quote {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.closing__lines {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.closing__lines p {
  font-size: 14px;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--ink-2);
}

.closing__links { margin-top: 36px; }

.closing__about {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 22px;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-pill);
  font-size: 14.5px;
  letter-spacing: 0.06em;
  color: var(--gold-deep);
  background: rgba(255, 255, 255, 0.42);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.closing__about:hover {
  background: rgba(201, 162, 39, 0.10);
  border-color: rgba(201, 162, 39, 0.62);
  transform: translateY(-1px);
}

/* ---------- 深色页脚条（参考泡泡玛特：左品牌 + 右信息行 · 两页共用） ---------- */
/* 深墨紫底 + 左上淡紫光晕；左侧金徽章品牌，右侧「媒体 / 法务 · 合作 / 版权」三行左对齐 */
.sitefoot {
  background:
    radial-gradient(120% 170% at 14% 0%, rgba(185, 144, 255, 0.10), transparent 58%),
    var(--bg-dark);
  color: var(--ink-on-dark);
}

.sitefoot__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 64px clamp(24px, 4.5vw, 56px) 60px;
  display: flex;
  align-items: flex-start;
  gap: clamp(44px, 9vw, 140px);
}

.sitefoot__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: none;
  padding-top: 1px;
}

.sitefoot__emblem {
  width: 34px;
  height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: #2A1F03;
  background: linear-gradient(150deg, var(--gold-bright), var(--gold) 60%, #B8912A);
  border: 1px solid rgba(201, 162, 39, 0.5);
  border-radius: 50%;
  overflow: hidden;
}

.sitefoot__emblem.is-img {
  background: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.28);
}

.sitefoot__emblem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sitefoot__name {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-on-dark);
  white-space: nowrap;
}

.sitefoot__name em {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
  margin-left: 7px;
}

.sitefoot__info {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 7px;
  min-width: 0;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px;
}

.foot-link {
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(246, 243, 236, 0.68);
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.22s var(--ease);
}

.foot-link:hover { color: var(--gold-bright); }

.foot-sep {
  width: 1px;
  height: 11px;
  flex: none;
  background: rgba(246, 243, 236, 0.22);
}

.sitefoot__copy {
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: rgba(246, 243, 236, 0.42);
  margin-top: 8px;
}

/* ICP 备案行（后台配置后动态插入版权下方） */
.sitefoot__license {
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: rgba(246, 243, 236, 0.42);
}

.sitefoot__license a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(246, 243, 236, 0.2);
  transition: color 0.2s, border-color 0.2s;
}

.sitefoot__license a:hover {
  color: rgba(246, 243, 236, 0.72);
  border-color: rgba(246, 243, 236, 0.45);
}

/* ==========================================================================
   关于缪象页（about.html）：封面 + 七章纵向叙事，复用全站背景与顶栏
   ========================================================================== */
.about-cover {
  min-height: 94svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 40px) clamp(20px, 5vw, 48px) 72px;
  text-align: center;
}

.about-cover__kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--gold-deep);
  opacity: 0.9;
  animation: rise 0.7s var(--ease) both;
}

.about-cover__title {
  margin-top: 22px;
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.8vw, 48px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-wrap: balance;
  animation: rise 0.7s var(--ease) 0.08s both;
}

.about-cover__title::after {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin: 30px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

.about-cover__intro {
  margin-top: 22px;
  font-size: 15px;
  letter-spacing: 0.10em;
  color: var(--ink-2);
  animation: rise 0.7s var(--ease) 0.16s both;
}

.about-doc {
  max-width: 880px;
  margin: 0 auto;
  padding: 12px clamp(20px, 5vw, 48px) 96px;
}

.about-sec { margin-top: clamp(64px, 10vh, 108px); }

.about-sec__eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--violet-deep);
  opacity: 0.72;
}

.about-sec__title {
  margin-top: 12px;
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.about-sec__text { margin-top: 20px; }

.about-sec__text p {
  font-size: 15.5px;
  line-height: 1.95;
  color: rgba(23, 16, 30, 0.78);
}

.about-sec__text p + p { margin-top: 10px; }

/* 三卡：全站白玻璃语言（金线小标 + 衬线卡题） */
.about-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.about-card {
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: 0 22px 48px -34px rgba(41, 24, 68, 0.28);
  text-align: left;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

.about-card:hover {
  transform: translateY(-2px);
  border-color: rgba(185, 144, 255, 0.38);
  box-shadow: 0 26px 54px -32px rgba(41, 24, 68, 0.36);
}

.about-card h3 {
  position: relative;
  padding-top: 14px;
  font-family: var(--font-serif);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.about-card h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 1px;
  background: var(--gold-soft);
}

.about-card p {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-2);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .stage__title { font-size: clamp(28px, 4.4vw, 40px); }
  .deliver__steps { grid-template-columns: repeat(2, 1fr); }
  .deliver__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .nav { --nav-outer: clamp(16px, 5vw, 40px); --nav-slide: clamp(14px, 4vw, 24px); }
  .nav__links { display: none; } /* 移动端空间窄：只保留玻璃化 + 语言切换 */
  .nav__name em { display: none; }
  .nav__emblem { width: 32px; height: 32px; font-size: 16px; }

  .sitefoot__inner { flex-direction: column; gap: 26px; padding-top: 50px; padding-bottom: 52px; }
  .sitefoot__info { gap: 15px; padding-top: 0; }
  .sitefoot .foot-links { gap: 12px; row-gap: 9px; }
  .foot-link { font-size: 12.5px; }
  .sheet__head { padding: 18px 18px 10px; }
  .sheet__title { font-size: 17px; }
  .sheet__body { padding: 0 18px 20px; }
  .sheet__grid article { flex-direction: column; gap: 4px; }

  .stage { padding-bottom: 36px; }
  .stage__announce { font-size: 13px; line-height: 1.65; margin-bottom: 18px; }
  .stage__title { font-size: clamp(26px, 7.6vw, 34px); letter-spacing: 0.12em; text-indent: 0.12em; }
  .stage__sub { font-size: 10.5px; letter-spacing: 0.26em; text-indent: 0.26em; margin-top: 12px; }

  .composer { margin-top: 32px; border-radius: 20px; padding: 10px 12px; }
  .composer__input { font-size: 15.5px; }

  .stage__actions { margin-top: 28px; gap: 10px; }
  .stage__action { height: 40px; padding: 0 16px; font-size: 13.5px; }

  .cloud { filter: blur(48px); }

  .toast { font-size: 13px; padding: 12px 18px; }

  .closing { padding-top: 72px; padding-bottom: 48px; }
  .closing__lines p { font-size: 13px; }

  .about-cover { min-height: 86svh; padding-bottom: 56px; }
  .about-cover__title::after { margin-top: 24px; }
  .about-doc { padding-bottom: 72px; }
  .about-grid { grid-template-columns: 1fr; }
  .about-sec__text p { font-size: 14.5px; line-height: 1.9; }

  .wall { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 36px; }
  .pcard { padding: 18px 18px 20px; }
  .pcard--ele { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
  .pcard__quote { text-align: left; }
  .insp__coda { font-size: 14px; letter-spacing: 0.10em; margin-top: 22px; }

  .deliver { padding-top: 64px; }
  .deliver__steps { gap: 12px; margin-top: 36px; }
  .deliver__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .lang__btn { padding: 4.5px 11px; font-size: 12.5px; }
  .nav__app { font-size: 13.5px; padding: 8px 6px; }
  .stage__title { font-size: clamp(24px, 8vw, 30px); letter-spacing: 0.10em; text-indent: 0.10em; }
  .stage__actions { gap: 8px; }
  .stage__action { height: 38px; padding: 0 14px; font-size: 13px; }
  .cloud { filter: blur(40px); }

  .closing__quote { font-size: 18px; letter-spacing: 0.05em; }
  .closing__about { padding: 10px 18px; font-size: 13.5px; }

  .wall { grid-template-columns: 1fr; }
  .deliver__steps { grid-template-columns: 1fr; }
  .deliver__grid { grid-template-columns: 1fr; }
}

/* ---------- 无障碍：减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .nav,
  .nav::before,
  .nav__links,
  .sheet__mask,
  .sheet__panel { transition: none; }

  .stage__announce,
  .stage__title,
  .stage__sub,
  .composer,
  .stage__actions,
  .cloud,
  .clouds__spin { animation: none; }

  .toast { transition: none; }

  .insp__head,
  .wall,
  .insp__coda,
  .deliver__head,
  .deliver__steps,
  .deliver__grid { transition: none; opacity: 1; transform: none; }

  .closing__inner { transition: none; opacity: 1; transform: none; }

  .about-cover__kicker,
  .about-cover__title,
  .about-cover__intro { animation: none; }

  .about-card,
  .closing__about,
  .pcard,
  .dstep,
  .dcard { transition: none; }

  .seal,
  .seal-ring { display: none; }
}