/* 自托管 Noto Sans SC 子集（400 / 500），base64 内联 —— 整页零外部请求，可直接放 OSS。
   字形子集覆盖本页所有静态 + JS 动态文案；改文案后需重新生成子集，否则新字符会显示为缺字 □。 */
@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/noto-sc-400.67292e81.woff2) format("woff2");
}
@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/noto-sc-500.b012a51e.woff2) format("woff2");
}

/* RL语音 · 极简下载页 —— 背景随时段变化
   调色表是 JS 单一来源，逐帧插值；CSS 只负责静态样式 */

:root {
  --bg:#f3f2ec; --bg-2:#fcfbf6; --fg:#23231d; --sub:#6f6d63;
  --btn-bg:#23231d; --btn-fg:#f3f2ec; --accent:#6d8099;
  --glow-op:.85; --grain-op:.05;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: "Noto Sans SC", sans-serif;
  background-color: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* 极淡光晕 + 颗粒纹理 */
.glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--glow-op);
  background-image:
    radial-gradient(120% 90% at 50% 38%, var(--bg-2) 0%, transparent 62%),
    radial-gradient(70% 55% at 50% 50%, color-mix(in oklch, var(--accent) 14%, transparent) 0%, transparent 70%);
}
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: var(--grain-op);
  background-image: var(--grain); background-size: 180px 180px;
  mix-blend-mode: soft-light;
}
body.dark .grain { mix-blend-mode: overlay; }

/* 布局：居中单屏 */
.screen { position: relative; z-index: 2; min-height: 100%; display: flex; flex-direction: column; }
/* gap 是三件（字标 / 阶段标记 / CTA 组）的唯一间距旋钮。整组垂直居中，故加入阶段标记后
   总高变化会推着字标上移: 上移量 = gap - 13.5px (13.5 = (44 - 标记行高17)/2)。
   44=原始单间隙值(字标上移 30px) · 24=当前 · 14=字标回到加标记之前的原位。 */
.center {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px; padding: 64px 32px; transform: translateY(-2.5%);
}

/* 字标：单一文本，统一字重 */
.wordmark {
  margin: 0; font-weight: 400; letter-spacing: -.005em;
  font-size: clamp(46px, 8.5vw, 104px); line-height: 1; color: var(--fg);
  user-select: none;
}
/* 阶段标记：.center 的直接子项，两侧各吃一份 44px gap = 正落在字标与 CTA 中间。
   排版口径同 .clockmark (11.5px / uppercase / --sub)；分隔结构同 .foot (flex + sep + 可换行)，
   窄屏在 · 处折行而不是撑破 .center 的 32px 内边距。 */
.alpha {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sub);
  user-select: none;
}
.alpha .sep { opacity: .4; }

/* 下载按钮 */
.cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cta {
  font: 500 17px "Noto Sans SC", sans-serif; letter-spacing: .02em;
  color: var(--btn-fg); background: var(--btn-bg);
  border: none; border-radius: 999px; padding: 17px 38px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none;
  transition: transform .15s ease;
}
.cta:hover { transform: scale(1.015); }
.cta:active { transform: scale(.96); }
.cta:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px color-mix(in oklch, var(--accent) 70%, var(--fg)); }
.cta.done { pointer-events: none; }
.cta-note { font-size: 12.5px; letter-spacing: .04em; color: var(--sub); }

/* 页脚 */
.foot {
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  padding: 22px 24px; font-size: 12px; letter-spacing: .03em; color: var(--sub);
}
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: var(--fg); }
.foot .sep { opacity: .4; }

/* 右上角时段标记 */
.clockmark {
  position: fixed; top: 22px; right: 26px; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sub);
}
.clockmark .pip {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 22%, transparent);
}

/* Tweaks 开关 */
body.no-clock .clockmark { display: none; }
body.no-grain .grain, body.no-glow .glow { opacity: 0; }
body.btn-square .cta { border-radius: 12px; }

/* 呼吸光晕（Tweaks 可选） */
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
body.breathe .glow { animation: breathe 14s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { body.breathe .glow { animation: none; } }