/* 知几偕行 · 职场决策
   视觉基调：现代心理与生活方式，不是玄学网站。
   暖中性底 + 单一强调色，正文行高与字距按中文长文阅读调过。 */

:root {
  /* 39 节：全站与首屏同系 —— 暗铜底、暖墨字、金accent。
     主屏的神秘感不是首屏专享，辅屏同一套色板，换屏不换世界。 */
  --bg: #14110d;
  --bg-card: #1c1712;
  --ink: #f0e9dd;
  --ink-2: #cfc6b6;
  --ink-3: #aba190;
  --line: #362e24;
  --line-2: #4d4335;
  --accent: #e0b878;
  --accent-soft: rgba(224, 184, 120, .16);
  --warn-bg: #2b2113;
  --warn-line: #8a6c3a;
  --danger: #e0907e;
  --ok: #96c2a4;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .65);
  --maxw: 860px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* 暗底上的占位符与选区：不交给浏览器默认值，默认灰在暗底上对比不够（39 节复查）。 */
::placeholder { color: var(--ink-3); opacity: 1; }
::selection { background: rgba(224, 184, 120, .35); color: #fff8ea; }

html { -webkit-text-size-adjust: 100%; }
/* 43 轮：100vw 把竖直滚动条的宽度也算进去，首屏会比可视区宽出一条滚动条，
   页面底部因此出现横向滚动条（用户画箭头指的地方）。clip 只裁溢出不产生滚动容器，
   不影响顶栏 sticky 与页内锚点。 */
html, body { overflow-x: hidden; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- 顶栏 */

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px;
  background: rgba(18, 15, 11, .92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand-mark { width: 28px; height: 28px; color: var(--accent); flex: none; }
.brand-text { display: flex; flex-direction: column; font-weight: 650; letter-spacing: .04em; }
.brand-text small { font-weight: 400; font-size: 11px; color: var(--ink-3); letter-spacing: .08em; }

.topbar-right { display: flex; align-items: center; gap: 14px; }
.pill {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); white-space: nowrap;
}
.linklike {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--ink-2);
}
.linklike:hover { color: var(--accent); text-decoration: underline; }

/* ---------------------------------------------------------- 布局 */

#app { max-width: var(--maxw); margin: 0 auto; padding: 28px 20px 60px; }
/* 首页（首屏）不吃内容页留白：28px 顶缝与 60px 底垫还给首屏，罗盘乾坤不被挤裁。 */
#app:has(> #screen-home:not([hidden])) { padding: 0; }
.screen[hidden] { display: none; }

.card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.card.narrow { max-width: 620px; margin-left: auto; margin-right: auto; }
.card.center { text-align: center; }

h1 { font-size: 26px; line-height: 1.4; margin: 0 0 12px; letter-spacing: .02em; font-weight: 650; }
h2, .section-title { font-size: 18px; margin: 30px 0 10px; font-weight: 620; letter-spacing: .02em; }
/* v100：场景节小字删除后标题与卡组之间只剩 10px，贴得太死；id 单补 14px 呼吸，不动全局 .section-title */
#scenario-title { margin-bottom: 14px; }
h3 { font-size: 16px; margin: 20px 0 8px; }
p { margin: 0 0 12px; }
.lede { color: var(--ink-2); font-size: 17px; }
.hint { color: var(--ink-3); font-size: 14px; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; line-height: 1.7; }

/* ---------------------------------------------------------- 首屏（36 节第二版）
   背景铺满一整张会动的先天八卦罗盘：六十四刻度环慢转（雷达感）、太极自转、
   虚线环逆转、一道锥形扫描光掠过 —— 古典的卦、罗盘的刻度、雷达的光，
   三层叠出「厚重 + 科技 + 神秘」。卦环与卦名静止，懂行的人能直接核对卦序。
   排版：文案压左半，靠一层斜向暗纱保可读；罗盘居中偏右、铺满整屏；
   底边融回页面暖底，暗屏与亮页之间不留硬茬。
   所有关键帧只写 from：基础样式就是终态，prefers-reduced-motion 关掉动画后
   页面直接停在终态，不需要第二份样式。 */

.hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: calc(100vh - var(--topbar-h, 57px));
  min-height: calc(100svh - var(--topbar-h, 57px));
  display: flex;
  align-items: center;
  overflow: hidden;
  text-align: left;
  color: #f3eee4;
  background:
    radial-gradient(46% 15% at 30% 88%, rgba(232, 214, 178, .07), rgba(232, 214, 178, 0) 70%),
    radial-gradient(38% 12% at 70% 93%, rgba(206, 194, 172, .05), rgba(206, 194, 172, 0) 70%),
    radial-gradient(80% 46% at 50% 108%, rgba(150, 162, 186, .06), rgba(150, 162, 186, 0) 70%),
    linear-gradient(to top, rgba(14, 19, 30, .34), rgba(14, 19, 30, 0) 24%),
    radial-gradient(80% 60% at 10% 100%, rgba(22, 30, 46, .22), rgba(22, 30, 46, 0) 62%),
    radial-gradient(90% 70% at 62% 58%, rgba(224, 176, 102, .13), rgba(224, 176, 102, 0) 62%),
    radial-gradient(130% 100% at 66% 40%, rgba(126, 96, 56, .22), rgba(126, 96, 56, 0) 64%),
    linear-gradient(165deg, #191613 0%, #14110d 52%, #0e0c0a 100%);
  animation: hero-brighten 1.2s ease-out both;
}
@keyframes hero-brighten { from { filter: brightness(.4); } }

/* 斜向暗纱：左浓右淡。文案永远读得清，罗盘右半保持通透 */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(10, 9, 7, .95) 0%, rgba(10, 9, 7, .86) 38%, rgba(10, 9, 7, .60) 62%, rgba(10, 9, 7, 0) 86%);
}
/* 底边与下一屏之间留一条干脆的金线暗边，不做灰雾过渡 */
.hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1;
  background: rgba(232, 192, 124, .28);
}

.hero-bagua {
  /* 43 轮：罗盘不再「装进屏幕」。直径取视口高的 1.52 倍，上下与右侧出画裁切，
     只留局部像 V2 那样：看得全的罗盘像贴纸，裁切的才有盘面纵深。 */
  --plate: clamp(760px, 140vh, 2300px); /* v74：152vh 时字环上下超出首屏，乾坤被裁；144vh 保证两字完整且仍巨物 */
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center;
  transform: translateX(16%);
  animation: bagua-in 1.6s ease-out both;
}
@keyframes bagua-in { from { opacity: 0; scale: .94; } }

/* 巨物法·天体：左上一轮淡金巨日，全屏唯一的超现实奇观；
   挂在暗纱之上、文案之下，盘与日两个巨物左右对峙。 */
.hero-sun {
  position: absolute; left: -22vh; top: -26vh;
  width: 66vh; height: 66vh; border-radius: 50%;
  z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(circle, rgba(255, 232, 190, .12) 0%, rgba(255, 232, 190, .07) 55%, rgba(255, 232, 190, 0) 70%);
}
/* 巨物仙境·矢量场景层：硬边巨环、斜向光柱、星尘、三层云海剪影＋受光金边。
   放在罗盘之后、暗纱之前：云与光压在盘上造纵深，暗纱仍保文案可读。 */
.hero-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-scene .ray, .hero-scene .mist { mix-blend-mode: screen; }
.hero-rays-layer, .hero-stars-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* v98：星点改为独立小圆点元素——开场从太极中心射出（star-fly 1.6s，与罗盘 bagua-in 同速同曲线），
   落点即基础样式（关键帧只写 from），到达后接慢眨；每颗自合成层，只动 transform/opacity。 */
.hero-stars-layer { --star-cx: 66%; --star-cy: 50%; }
.star { position: absolute; left: var(--star-cx); top: var(--star-cy); width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2); margin-top: calc(var(--s) / -2); border-radius: 50%; background: #ffe6b8; box-shadow: 0 0 6px 1px rgba(255, 230, 184, .5); transform: translate(var(--tx), var(--ty)); opacity: var(--o); will-change: transform, opacity; animation: star-fly 1.6s ease-out both, star-twinkle 7s ease-in-out var(--td) infinite alternate; }
@keyframes star-fly { from { transform: translate(0, 0) scale(.3); opacity: 0; } }
@keyframes star-twinkle { from { opacity: calc(var(--o) * .45); } }
/* 场景层动效：入场一次＋慢循环；关键帧只写 from，基础样式即终态，
   reduced-motion 关掉动画后停在终态（与静态登记口径一致）。 */
.hero-scene { animation: scene-in 1.8s ease-out both; }
/* v95：光束的 590 位移写回 svg 里的 g transform（viewBox 用户单位）。
   上一版把它挪到层根上，590 就从「用户单位 × 1.31 缩放」变成「590 CSS 像素」，
   三束光整体往左上偏了约 320px —— 用户抓到的「左上角光束错位」。层根只留合成器动画。 */
/* 光束层整体 screen 混合：v91 里 .hero-scene .ray 的混合模式，拆层后要挂在层根上才生效 */
/* v98b：楔形顶点退到画外天体中心，光从画框边缘流入、径向渐隐——画面里看不到射线根部；
   静 blur 柔化楔形硬边（滤镜只光栅化一次，呼吸仍走合成器 opacity）。 */
.hero-rays-layer { mix-blend-mode: screen; filter: blur(5px); transform-origin: 0 0; animation: ray-sway 26s ease-in-out infinite alternate, ray-glow 13s ease-in-out infinite alternate; }
/* v98c：光柱恢复「活着」——绕左上光源原点慢摆 1.2 度＋微横移，26s 往返；合成器 transform，不重光栅。 */
@keyframes ray-sway { from { transform: rotate(-1.6deg) translateX(-70px); } }
.hero-scene .colossus { translate: 191px 0; animation: colossus-in 2.6s ease-out both; }
/* 云海 v72 修订（2026-10-05 H1e）：雾层与光晕层改为波浪雾带（上沿随机起伏 ±30–44px，
   不再是平椭圆/直边雾）；删除 .hero-sea-glow 直边来源；首屏高度按顶栏实测 --topbar-h 扣减，进站即满屏。 */
.hero-sea { position: absolute; left: 0; width: 100%; bottom: 0; height: 40%; z-index: 2; pointer-events: none; }
/* v87：云海拆前后两组 —— 后组（底光/背层雾团/远脊与其雾）放到罗盘盘体后面，
   前组（中近脊、台阶雾、风丝、前景雾团、雾纱、接触光）仍在盘前：
   盘的轮廓切断远云、盘底再被浪脊盖住，盘才读作「站在云海里」而不是「贴在云海后」。 */
.hero-sea-back { position: absolute; left: 0; width: 100%; bottom: 0; height: 40%; z-index: 0; pointer-events: none; }
/* v95 云海四层：背雾 / 远脊 / 中脊 / 近脊各是一张独立 svg，
   运动只发生在「层根」上（transform 写纵向浪涌、translate 写横向漂流，两个属性互不覆盖，
   可以叠在同一条 animation 上）。层内元素一律静止 —— 每层只光栅化一次，
   之后每帧只是 GPU 把贴图挪几个像素，不再整块重绘（首屏闪屏＝GPU 丢瓦片的直接来源）。
   百分比按层自身盒子算，等于原先 viewBox 里的用户单位比例（34/340、160/1440…），任何视口都等比。
   云海的流动感改由四层不同周期与方向的视差承担，不再靠层内变形。 */
.hero-sea .hl, .hero-sea .rim, .hero-sea .glowband, .hero-sea .wisp, .hero-sea .mist,
.hero-sea-back .hl, .hero-sea-back .rim, .hero-sea-back .glowband, .hero-sea-back .mist, .hero-sea-back .wisp,
.hero-sea .veil, .hero-sea .contact { mix-blend-mode: screen; }
.hero-sea .crev, .hero-sea .terrace, .hero-sea-back .crev { mix-blend-mode: normal; }
.hero-sea .puff, .hero-sea-back .puff { mix-blend-mode: screen; }
/* 柔边回归：雾纱/雾带/雾帽/光带/接触光的大模糊，是「盘站在云里」而不是「盘贴在云前」的关键。
   v93 为了压每帧重绘把它们全摘了，云就成了硬边剪纸；现在层内不动，模糊只算一次，可以放心用回来。
   overflow:visible 让模糊光晕能溢出图层上沿——否则雾顶会被图层矩形切出一条水平硬边（用户抓过五次的「横线」）。 */
.hero-sea, .hero-sea-back { overflow: visible; }
.hero-sea .veil { filter: blur(10px); }
.hero-sea .contact { filter: blur(14px); }
.hero-sea .mist, .hero-sea-back .mist { filter: blur(10px); }
.hero-sea-back .cap { filter: blur(16px); }
.hero-sea .glowband, .hero-sea-back .glowband { filter: blur(24px); }
.hero-sea .puff, .hero-sea-back .puff { filter: blur(6px); }
.hero-sea .hl, .hero-sea-back .hl { filter: blur(2.5px); }
.hero-sea .crev, .hero-sea-back .crev { filter: blur(3px); }
.hero-sea .rim, .hero-sea-back .rim { filter: blur(1.4px); }
.hero-sea-back .rim { filter: blur(5px); opacity: .4; }
.hero-sea .wisp, .hero-sea-back .wisp { filter: blur(8px); }
.hero-sea .ridge-near .body { filter: blur(3.5px); }
.hero-sea .ridge-mid .body { filter: blur(1.8px); }
.hero-sea-back .ridge-far .body { filter: blur(.8px); }
.hero-sea-back .glowband { translate: 0 40px; }
/* 四条根运动。.sea-ridge-far / .sea-near 写在后面，同特异性下覆盖共用的 .hero-sea-back / .hero-sea。 */
.hero-sea-back { animation: sea-mist 30s ease-in-out infinite alternate; }
.hero-sea { animation: sea-swell 17s ease-in-out -8s infinite alternate, sea-flow-mid 36s ease-in-out -20s infinite alternate; }
.sea-ridge-far { animation: sea-swell 24s ease-in-out infinite alternate, sea-flow-far 52s ease-in-out infinite alternate; }
.sea-near { animation: sea-swell 11s ease-in-out -3s infinite alternate, sea-flow-near 26s ease-in-out -11s infinite alternate; }
@keyframes sea-swell { from { transform: translateY(10%); } }
@keyframes sea-mist { from { translate: 11.1% 0; } }
@keyframes sea-flow-far { from { translate: -6.25% 0; } }
@keyframes sea-flow-mid { from { translate: 10.4% 0; } }
@keyframes sea-flow-near { from { translate: -16.7% 0; } }
@keyframes scene-in { from { opacity: 0; } }

@keyframes ray-glow { from { opacity: .45; } }

@keyframes colossus-in { from { opacity: 0; } }

/* 巨物法·冷阴：光源在左上天体，盘的右下落一层透明冷青阴，暖金对午夜蓝。 */
.hero-bagua::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: var(--plate); height: var(--plate);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 224, 170, .07), rgba(255, 224, 170, 0) 46%),
    radial-gradient(circle at 64% 66%, rgba(18, 26, 42, .30), rgba(18, 26, 42, 0) 56%);
  pointer-events: none;
}

.hero-glow {
  position: absolute; width: calc(var(--plate) * .58); height: calc(var(--plate) * .58); border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 200, 120, .34), rgba(240, 200, 120, .10) 40%, rgba(240, 200, 120, 0) 66%);
  animation: glow-bloom 1.8s ease-out both;
}
/* 2026-10-04 用户审定预览的光影状态固化为线上默认：
   扫描光、外圈辐光、星点收掉，只留盘心透出的 rays-in；罗盘加一圈暖光晕。 */
.hero-sweep, .hero-rays, .hero-stars { display: none; }
.hero-bagua::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--plate) + 180px); height: calc(var(--plate) + 180px); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(224, 184, 120, 0) 40%, rgba(224, 184, 120, .16) 44%, rgba(224, 184, 120, 0) 52%); pointer-events: none; }
@keyframes glow-bloom { from { opacity: 0; transform: scale(.45); } }

/* 雷达扫描光：一圈锥形渐变自转，给罗盘一层「正在推演」的科技感 */
.hero-sweep {
  position: absolute; width: var(--plate); height: var(--plate); border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(240, 200, 120, 0) 0deg, rgba(240, 200, 120, 0) 300deg, rgba(240, 200, 120, .2) 350deg, rgba(240, 200, 120, 0) 360deg);
  mix-blend-mode: screen;
  animation: sweep 14s linear infinite;
}
@keyframes sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* 52 轮光源辐光、56 轮按用户要求收掉辐条：
   太极以外那圈由中心射出的细辐条会分散视觉锁定，只留盘心一枚呼吸光核，
   光从太极里透出来而不是从盘上扫过去。纯 CSS 渐变，不新增资源、不用 filter。 */
.hero-rays {
  position: absolute; width: var(--plate); height: var(--plate); border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 240, 205, .15), rgba(255, 240, 205, .05) 26%, rgba(255, 240, 205, 0) 40%);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, .9) 0 12%, rgba(0, 0, 0, .5) 20% 30%, rgba(0, 0, 0, .85) 34% 62%, rgba(0, 0, 0, 0) 74%);
  mix-blend-mode: screen;
  animation: rays-breathe 9s ease-in-out infinite;
}
/* 57 轮：辐条请回来，但关进太极圆内（mask 15%≈太极环半径）。
   光从太极里面透出来 = 符号自己在发光；盘面上不再有任何放射线。 */
.hero-rays-in {
  position: absolute; width: var(--plate); height: var(--plate); border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 246, 220, .07) 0deg .6deg, rgba(255, 246, 220, 0) .6deg 5deg);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, .85) 0 15%, rgba(0, 0, 0, 0) 18.5%);
  mix-blend-mode: screen;
  animation: rays-spin 300s linear infinite, rays-breathe 9s ease-in-out infinite;
}
@keyframes rays-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rays-breathe { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }

/* 45 轮星光点点：两层细粒悬在暗纱之上、文案之下，定速慢眨；
   DOM 里排在罗盘节点之后，作为「空气中的星芒」浮在盘面上方，粒径 1-2px 不抢戏。 */
.hero-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-stars::before, .hero-stars::after { content: ""; position: absolute; inset: 0; background-repeat: no-repeat; }
.hero-stars::before {
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255, 244, 214, .55), rgba(255, 244, 214, 0) 70%),
    radial-gradient(1.2px 1.2px at 22% 64%, rgba(255, 244, 214, .4), rgba(255, 244, 214, 0) 70%),
    radial-gradient(2px 2px at 31% 12%, rgba(255, 244, 214, .5), rgba(255, 244, 214, 0) 70%),
    radial-gradient(1.4px 1.4px at 44% 78%, rgba(255, 244, 214, .38), rgba(255, 244, 214, 0) 70%),
    radial-gradient(1.8px 1.8px at 58% 8%, rgba(255, 244, 214, .46), rgba(255, 244, 214, 0) 70%),
    radial-gradient(1.2px 1.2px at 69% 88%, rgba(255, 244, 214, .34), rgba(255, 244, 214, 0) 70%),
    radial-gradient(1.6px 1.6px at 81% 16%, rgba(255, 244, 214, .44), rgba(255, 244, 214, 0) 70%),
    radial-gradient(1.3px 1.3px at 91% 58%, rgba(255, 244, 214, .4), rgba(255, 244, 214, 0) 70%);
  animation: star-twinkle-a 5.5s ease-in-out infinite;
}
.hero-stars::after {
  background-image:
    radial-gradient(1.2px 1.2px at 8% 44%, rgba(214, 226, 244, .35), rgba(214, 226, 244, 0) 70%),
    radial-gradient(1.5px 1.5px at 27% 34%, rgba(255, 244, 214, .3), rgba(255, 244, 214, 0) 70%),
    radial-gradient(1.1px 1.1px at 38% 56%, rgba(214, 226, 244, .28), rgba(214, 226, 244, 0) 70%),
    radial-gradient(1.4px 1.4px at 52% 26%, rgba(255, 244, 214, .3), rgba(255, 244, 214, 0) 70%),
    radial-gradient(1.2px 1.2px at 64% 70%, rgba(214, 226, 244, .26), rgba(214, 226, 244, 0) 70%),
    radial-gradient(1.6px 1.6px at 76% 42%, rgba(255, 244, 214, .32), rgba(255, 244, 214, 0) 70%),
    radial-gradient(1.1px 1.1px at 88% 80%, rgba(214, 226, 244, .26), rgba(214, 226, 244, 0) 70%);
  animation: star-twinkle-b 7.5s ease-in-out infinite;
}
@keyframes star-twinkle-a { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes star-twinkle-b { 0%, 100% { opacity: .3; } 55% { opacity: .85; } }

.hero-copy > * { animation: rise-in .7s ease-out both; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-copy > :nth-child(5) { animation-delay: .32s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }

.hero-copy {
  position: relative; z-index: 2;
  max-width: 620px;
  margin-left: clamp(28px, 12vw, 300px);
  padding: 64px 28px;
}
.hero .kicker { background: rgba(224, 176, 102, .14); color: #e6c07c; }
.hero h1 {
  font-size: clamp(34px, 4.6vw, 52px); line-height: 1.22;
  margin-bottom: 14px; letter-spacing: .02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}
.hero .lede { max-width: 26em; color: rgba(243, 238, 228, .80); }

/* 底部引导：告诉眼睛下一步往哪走 */
.hero-scroll {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 12px; letter-spacing: .12em; color: rgba(243, 238, 228, .62);
  animation: rise-in .8s ease-out .5s both;
  /* v100b 引导退场：场景节标题进入视口后这枚引导使命完成，淡出；回首屏复原。只动 opacity，零布局影响 */
  transition: opacity .4s ease;
}
.hero-scroll:hover { color: #e8c07c; }
.hero-scroll.is-past { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hero-scroll { transition: none; } }
.hero-scroll .chev { font-size: 16px; animation: chev 2s ease-in-out infinite; }
@keyframes chev { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(5px); opacity: 1; } }

.hero-proof {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; padding: 0; margin: 0 0 22px;
}
.hero-proof li {
  font-size: 12px; letter-spacing: .06em; padding: 5px 12px;
  border: 1px solid rgba(243, 238, 228, .24); border-radius: 999px;
  /* 43 轮：窄屏罗盘放大后太极亮区会垫到标签底下，加半透明暗底保对比。 */
  background: rgba(12, 10, 7, .58);
  color: rgba(243, 238, 228, .74);
}

/* 用 .btn.hero-cta 而不是 .hero-cta：.btn 的白底定义在本节之后，同特异性会盖掉金底。 */
.btn.hero-cta { background: #e8c07c; border-color: #e8c07c; color: #211e19; font-weight: 650; }
.btn.hero-cta:hover { background: #f0cd90; border-color: #f0cd90; }
.hero-arrow { display: inline-block; margin-left: 8px; transition: transform .15s; }
.btn.hero-cta:hover .hero-arrow { transform: translateX(3px); }

/* 罗盘本体：环、刻度、卦爻、卦名、太极。几何在 index.html 的内联 SVG 里，
   这里只给颜色与节奏 —— 改视觉不动结构。 */
/* 绝对定位居中：罗盘比视口宽时，grid 的 place-items:center 会把溢出项
   钳到起始边（窄屏整盘偏右的根因）；absolute + translate 才保证两边均溢。 */
.bagua {
  /* v95：居中改用独立属性 translate，把 transform 整条让给旋转动画 ——
     合成器直接转贴图，不需要重画。transform-box 显式钉在 border-box，
     避免 svg 根元素按 viewBox 解析 transform-origin 造成偏心。 */
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  transform-box: border-box; transform-origin: 50% 50%;
  width: var(--plate); height: auto; display: block; pointer-events: none;
}
/* 盘面材质：盘底径向铜色、颗粒噪点、金属表圈、凹槽、发丝刻线、字环凹环，
   一层层叠出「金属盘面」的厚重；质感靠层叠，不靠加粗描边。 */
.bagua .plate { fill: url(#plate-grad); }
.bagua .grain { mix-blend-mode: overlay; opacity: .7; }
.bagua .bezel { fill: none; stroke: url(#gold-grad); }
.bagua .groove { fill: none; stroke: #0b0805; }
.bagua .band { fill: none; stroke: #191309; }
.bagua .hair { fill: none; stroke: rgba(214, 178, 116, .20); stroke-width: 1; }
.bagua .cells { fill: none; stroke: rgba(214, 178, 116, .18); stroke-width: 1; }
.bagua .innerplate { fill: #17110b; opacity: .92; }
.bagua .hair.deep { stroke: rgba(214, 178, 116, .10); }
.bagua .ring { fill: none; stroke: rgba(232, 192, 124, .16); stroke-width: 1.5; }
/* 内圈点环：点距拉开、亮度提高，转起来才看得见在走（用户点名要它动） */
.bagua .ring.dash { stroke: rgba(232, 192, 124, .38); stroke-width: 1.8; stroke-dasharray: 1 11; stroke-linecap: round; }
.bagua .ring.dash2 { stroke: rgba(232, 192, 124, .15); stroke-width: 1.2; stroke-dasharray: 16 12; }
/* 点环的灵动（43 轮）：三层定速节奏叠起来 —— 整环保持原逆转；点距沿环用 dashoffset 一格一格爬，
   珠子像在缓缓流动；一道亮彗弧带淡尾比点先跑一圈，掠过处点环被点亮。
   速度全是 linear / ease 定值：灵动，但有秩序。 */
.bagua .ring { transform-box: view-box; transform-origin: 50% 50%; }
/* v95 罗盘拆层（闪屏根治第二步）：一条运动环＝一张独立 svg，旋转写在「层根」上，
   合成器把整张贴图转过去，层内一切静止 —— 只光栅化一次。
   撤掉的是这些每帧都要把整张 1300–2000px 盘面重画一遍的属性动画：
   dashoffset 爬行、dasharray 摆尾、48 枚活字错峰起伏、八卦爻错峰呼吸、光晕呼吸。
   视觉没丢：点环跟着层转，珠子照样在走；彗弧跟着层转，尾巴照样在曳；
   活字波与爻画的呼吸改成把 t=0 那一帧烘焙进标记（见 index.html 的静态 opacity / transform）。 */
.bagua .ring.comet { stroke: rgba(255, 246, 220, 1); stroke-width: 3; stroke-dasharray: 26 1620.2; }
/* 45 轮：彗头彗尾去掉 filter（旋转体上每帧重绘，是卡顿根因之一），光晕改同形宽描边；
   内圈逆转，彗尾必须摆到头部的顺时针一侧（负 dashoffset），否则尾跑在头前（45 轮用户抓到的 bug）。
   星粒 comet-spark：沿尾弧的细珠，conic 遮罩只露尾弧区几粒。 */
.bagua .ring.comet-glow { stroke: rgba(240, 200, 120, .26); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 26 1620.2; }
.bagua .ring.comet-spark { stroke: rgba(255, 244, 214, .9); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 2 44; opacity: .68; mask-image: conic-gradient(from 0deg at 50% 50%, rgba(0, 0, 0, 0) 0deg 38deg, rgba(0, 0, 0, .9) 46deg 88deg, rgba(0, 0, 0, 0) 96deg 360deg); }
.bagua .ring.comet-spark.c2 { stroke-dasharray: 2 38; opacity: .68; mask-image: conic-gradient(from 0deg at 50% 50%, rgba(0, 0, 0, 0) 0deg 92deg, rgba(0, 0, 0, .9) 100deg 142deg, rgba(0, 0, 0, 0) 150deg 360deg); }
/* 彗尾三层渐隐（44 轮）：近层细而实、远层宽而糊。长度原先还按各自周期呼吸（改 dasharray），
   v95 定格在呼吸中值 —— 曳动感由层根旋转提供，不再逐帧改描边。 */
.bagua .ring.comet-tail { stroke-linecap: round; stroke-width: 2.4; }
.bagua .ring.comet-tail.t1 { stroke: rgba(240, 200, 120, .52); stroke-width: 2.2; stroke-dasharray: 85 1561.2; stroke-dashoffset: 85; opacity: .86; }
.bagua .ring.comet-tail.t2 { stroke: rgba(240, 200, 120, .30); stroke-width: 3.2; stroke-dasharray: 170 1476.2; stroke-dashoffset: 170; opacity: .79; }
.bagua .ring.comet-tail.t3 { stroke: rgba(240, 200, 120, .16); stroke-width: 4.6; stroke-dasharray: 265 1381.2; stroke-dashoffset: 265; opacity: .80; }
.bagua .ring.comet.c2 { stroke-width: 2.8; stroke-dasharray: 20 1462.8; }
.bagua .ring.comet-glow.c2 { stroke: rgba(240, 200, 120, .3); }
.bagua .ring.comet-tail.c2 { stroke-width: 2; }
.bagua .ring.comet-tail.c2.t1 { stroke-width: 2; stroke-dasharray: 72 1410.8; stroke-dashoffset: -20; opacity: .79; }
.bagua .ring.comet-tail.c2.t2 { stroke-width: 2.8; stroke-dasharray: 147 1323.8; stroke-dashoffset: -20; opacity: .80; }
.bagua .ring.comet-tail.c2.t3 { stroke-width: 4; stroke-dasharray: 230 1252.8; stroke-dashoffset: -20; opacity: .86; }
/* 53 轮：外圈六十四刻度是活字字块。原为 48 枚沿径向往复升降＋明暗错相（2008 活字印刷波），
   v95 把那一帧烘焙进标记：每枚的 opacity / translateY / scaleY 按 t=0 波形定格，三个波峰仍绕盘分布，
   起伏感留在空间里而不是时间里 —— 48 个逐帧属性动画换成 0 个。 */
.bagua .tk {
  fill: url(#gold-grad);
  transform-box: fill-box; transform-origin: 50% 100%;
}
/* v96：刻度环的旅行波回到自己独立的小层（.bagua-r7，约 .4 盘宽、无滤镜），
   每帧重画只发生在这张几百像素的小层上，不再拖整张盘面——中间圆圈恢复「活着」的观感。 */
.bagua-r7 .tk { animation: tk-wave 6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes tk-wave { 0%, 100% { opacity: .22; transform: translateY(0) scaleY(1); } 50% { opacity: .92; transform: translateY(-8px) scaleY(1.12); } }
.bagua .shan text {
  fill: rgba(226, 196, 140, .50); font-size: 21px;
  text-anchor: middle; dominant-baseline: central;
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", serif;
}
/* 八卦爻画：原 bt-breathe 八方错峰呼吸，同理由标记里的静态 opacity 承担（.62→1 的一帧）。 */
.bagua .bt {
  fill: none; stroke: url(#gold-grad); stroke-width: 9; stroke-linecap: round;
}
.bagua-grain { position: absolute; left: 50%; top: 50%; width: var(--plate); height: var(--plate); transform: translate(-50%, -50%); pointer-events: none; }
.guanames text {
  fill: url(#gold-soft); font-size: 38px;
  text-anchor: middle; dominant-baseline: central;
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", serif;
}
.spin-slow, .spin-rev, .spin-rev2, .spin-fwd2, .spin-mid { transform-box: view-box; transform-origin: 50% 50%; }
/* 六层的转速是「原组转 ⊕ 环内自转」合成后的净角速度，肉眼看到的快慢与拆层前一致：
   r3 点环 90s 逆转；r4 彗弧＝90s 逆 ⊕ 21s 顺 → 净 27.4s 顺（彗弧照样掠过点环）；
   r5＝150s 顺 ⊕ 17s 逆 → 净 19.2s 逆。裁 viewBox 只为省显存：每层只留自己那圈的外接方框。 */
.bagua-r1 { animation: spin 240s linear infinite; }
.bagua-r2 { width: calc(var(--plate) * .744); animation: spin 300s linear infinite reverse; }
.bagua-r3 { width: calc(var(--plate) * .536); animation: spin 90s linear infinite reverse, ring-breathe 9s ease-in-out infinite; }
.bagua-r4 { width: calc(var(--plate) * .544); animation: spin 27.4s linear infinite, ring-breathe 9s ease-in-out infinite; }
.bagua-r5 { width: calc(var(--plate) * .492); animation: spin 19.2s linear infinite reverse, ring-breathe 11s ease-in-out infinite; }
.bagua-r6 { width: calc(var(--plate) * .264); animation: spin 64s linear infinite; }
.bagua-r7 { width: calc(var(--plate) * .4); }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ring-breathe { 0%, 100% { opacity: .86; } 50% { opacity: 1; } }
/* v95：盘心光晕的 7s 呼吸定格在中值——它在静止的基础层里，任何属性动画都会拖着整张盘面重画。 */
.halo { opacity: .84; }
.taiji-ring { fill: #2a2018; stroke: rgba(232, 192, 124, .92); stroke-width: 2.4; }
.taiji-yang { fill: url(#taiji-grad); }
.dot-yin { fill: #2a2018; }
.dot-yang { fill: #e8c07c; }

.kicker {
  display: inline-block; font-size: 12px; letter-spacing: .18em; color: var(--accent);
  background: var(--accent-soft); padding: 4px 12px; border-radius: 999px; margin-bottom: 16px;
}

/* ---------------------------------------------------------- 场景卡 */

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.scenario {
  text-align: left; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px; cursor: pointer; font: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.scenario:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
.scenario b { display: block; font-size: 16px; margin-bottom: 4px; font-weight: 620; }
.scenario span { color: var(--ink-3); font-size: 13px; line-height: 1.6; display: block; }

/* 第二个门：六张场景卡都不贴时，一枚金色主按钮直通提问屏自己写问题。
   居中 + 多一点的顶距：它是「另一条路」，不是第七张卡。 */
.row-entry { margin-top: 26px; }

/* 角度选择：只在自定义入口出现，视觉语言跟场景卡保持一致 */
#angle-pick { margin-top: 12px; }
.angle-hint { margin: 0 0 12px; }
.angle-radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.angle {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; cursor: pointer;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
  transition: border-color .15s, background .15s;
}
.angle:hover { border-color: var(--line-2); }
.angle input { flex: 0 0 auto; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--accent); }
.angle-txt { flex: 1 1 auto; }
.angle-txt b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.angle-txt span { display: block; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
/* 选中态写两条：:has 万一不支持，至少标题还会变金。 */
.angle input:checked ~ .angle-txt b { color: var(--accent); }
.angle:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
/* 默认项（不套角度）用虚线边：它是「什么都不做」的那一格，不该比六个角度更显眼。 */
.angle-free { border-style: dashed; }
.angle-out { margin: 12px 0 0; font-size: 13px; }


/* ---------------------------------------------------------- 按钮 */

.btn {
  font: inherit; font-size: 15px; padding: 11px 22px; border-radius: 10px;
  cursor: pointer; border: 1px solid var(--line-2); background: var(--bg-card); color: var(--ink);
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn:hover { border-color: var(--accent); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #241d12; font-weight: 550; }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); border-color: rgba(224, 144, 126, .45); }
.btn.danger:hover { background: rgba(224, 144, 126, .12); border-color: var(--danger); }
.btn.small { padding: 7px 14px; font-size: 14px; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
#screen-ask .actions { justify-content: space-between; align-items: center; }
#screen-ask #ask-back { padding: 6px 2px; }
.row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.row-center { display: flex; justify-content: center; margin-top: 18px; }
.grow { flex: 1 1 140px; }

/* ---------------------------------------------------------- 表单 */

.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-2); margin-bottom: 14px; }
input[type=text], input[type=tel], textarea, select {
  font: inherit; font-size: 16px; padding: 12px 14px; width: 100%;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); color: var(--ink);
  resize: vertical;
}
input[type="checkbox"] { accent-color: #e0b878; width: 15px; height: 15px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
select { resize: none; }
textarea { line-height: 1.7; }
.counter { text-align: right; font-size: 12px; color: var(--ink-3); margin: 4px 0 0; }

.checklist { list-style: none; padding: 0; margin: 0 0 18px; }
.checklist li {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  margin-bottom: 8px; font-size: 15px; color: var(--ink-2); background: var(--bg);
}
.confirm { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; margin-bottom: 10px; cursor: pointer; }
.confirm input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--accent); }

.opt-block { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: var(--bg); }
.opt-block .opt-head { font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: 8px; }
.opt-block label { display: block; font-size: 13px; color: var(--ink-3); margin: 8px 0 4px; }
.rev-block { margin-bottom: 10px; }
.rev-block label { display: block; font-size: 13px; color: var(--ink-3); margin-bottom: 4px; }

.examples { margin-top: 14px; }
.examples summary, .method-box summary { cursor: pointer; font-size: 14px; color: var(--accent); }
.examples ul { padding-left: 20px; font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.examples button { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-2); cursor: pointer; text-decoration: underline dotted; }

.method-box { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.method-body { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.method-body label { display: block; margin-bottom: 10px; }
.method-body input { accent-color: var(--accent); margin-right: 6px; }
.method-body .odds { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-3); }
/* 时长标记要在方法名旁边就被看到：它是用户决定选不选蓍草法的依据，不该藏在说明后面。 */
.method-body .ritual-time { color: var(--accent); font-weight: 550; white-space: nowrap; }
.method-body .ritual-note { display: block; margin-top: 2px; }

.steps { padding-left: 22px; color: var(--ink-2); }
.steps li { margin-bottom: 10px; }
.refusals { list-style: none; padding: 0; }
.refusals li { border-left: 3px solid var(--line-2); padding: 8px 0 8px 14px; margin-bottom: 10px; font-size: 14px; color: var(--ink-2); }
.refusals b { color: var(--ink); }

/* ---------------------------------------------------------- 反馈条 */

.feedback { margin-top: 14px; padding: 14px 16px; border-radius: 10px; font-size: 14px; white-space: pre-wrap; }
.feedback.err { background: rgba(224, 144, 126, .10); border: 1px solid rgba(224, 144, 126, .4); color: #e8a998; }
.feedback.ok { background: rgba(150, 194, 164, .10); border: 1px solid rgba(150, 194, 164, .35); color: #a9d2b6; }
.feedback.info { background: var(--accent-soft); border: 1px solid var(--line-2); color: var(--ink-2); }

.notice { padding: 16px 18px; border-radius: 12px; margin-bottom: 18px; font-size: 15px; }
.notice.warn { background: var(--warn-bg); border: 1px solid var(--warn-line); }
.notice.plain { background: var(--bg); border: 1px solid var(--line); }

/* ---------------------------------------------------------- 起卦动画 */

/* 顶部留白是抛掷的净空：铜钱最高点 -88px，正好落在 padding 里，
   不会跳到标题与告知文案上。蓍草法的逐变记录也放在这一块，留白同样合适。 */
/* 三钱法舞台（38 节）：暗色祭台 + 双面方孔古钱 + 四拍抛掷。
   暗台把铜钱衬亮，虚线椭圆是「落钱处」的仪式圈；钱是圆的、中有方孔，
   字面刻「知几偕行」四字、背面素郭 —— 竞品往圆片上贴大字，我们铸一枚真钱。
   抛掷四拍：离手 → 空中真翻面（双面都在钱上）→ 落地回弹金光 → 爻落栈。 */
.coins {
  position: relative;
  display: flex; gap: 22px; justify-content: center; align-items: flex-end;
  margin: 8px 0 18px; padding: 110px 18px 20px; min-height: 220px;
  border-radius: 18px;
  background:
    /* 44 轮：v2 提示词的暖金+冷蓝对比，冷蓝只给一层极淡环境光补层次。 */
    radial-gradient(150px 130px at 12% 16%, rgba(122, 152, 190, .07), rgba(122, 152, 190, 0) 62%),
    radial-gradient(230px 210px at 20% 82%, rgba(238, 222, 190, .13), rgba(238, 222, 190, 0) 62%),
    radial-gradient(150px 140px at 79% 30%, rgba(196, 152, 92, .10), rgba(196, 152, 92, 0) 60%),
    radial-gradient(110px 100px at 63% 72%, rgba(214, 172, 108, .08), rgba(214, 172, 108, 0) 60%),
    radial-gradient(120% 96% at 50% 42%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .52) 100%),
    linear-gradient(180deg, #191309 0%, #0e0a06 100%);
  box-shadow: inset 0 0 0 1px rgba(232, 192, 124, .12), inset 0 -14px 30px rgba(0, 0, 0, .55);
  perspective: 900px;
}
.coins::before {
  content: ''; position: absolute; left: 50%; bottom: 10px; width: 260px; height: 58px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(240, 208, 140, .14), rgba(240, 208, 140, 0) 68%);
  animation: coin-ring 4.2s ease-in-out infinite;
}
@keyframes coin-ring { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }
/* 44 轮，吸收抛硬币短片提示词 v2：开场一道金边光扫过（钩子镜头）、微尘漂浮；
   尘层随每次抛掷重建，动画自然重开。落地后镜头缓推、暗角收拢（.coins.settle，JS 每掷加一次）。 */
.coins-dust {
  position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 236, 190, 0) 42%, rgba(255, 236, 190, .18) 50%, rgba(255, 236, 190, 0) 58%) no-repeat;
  background-size: 260% 100%;
  /* 45 轮：撤 mix-blend-mode（每帧强制整区混合重绘），改直接半透叠色，观感差极小。 */
  animation: coin-hook 1.15s ease-out both;
}
@keyframes coin-hook { 0% { background-position: 130% 0; opacity: 0; } 18% { opacity: 1; } 100% { background-position: -30% 0; opacity: 0; } }
.coins-dust::before, .coins-dust::after { content: ""; position: absolute; inset: -18% -8%; background-repeat: no-repeat; }
.coins-dust::before {
  background-image:
    radial-gradient(2px 2px at 18% 62%, rgba(255, 236, 190, .5), rgba(255, 236, 190, 0) 70%),
    radial-gradient(1.6px 1.6px at 34% 38%, rgba(255, 236, 190, .38), rgba(255, 236, 190, 0) 70%),
    radial-gradient(2.4px 2.4px at 55% 70%, rgba(255, 236, 190, .3), rgba(255, 236, 190, 0) 70%),
    radial-gradient(1.4px 1.4px at 71% 30%, rgba(255, 236, 190, .42), rgba(255, 236, 190, 0) 70%),
    radial-gradient(2px 2px at 86% 58%, rgba(255, 236, 190, .34), rgba(255, 236, 190, 0) 70%);
  animation: dust-drift 7s ease-in-out infinite;
}
.coins-dust::after {
  background-image:
    radial-gradient(1.4px 1.4px at 26% 46%, rgba(196, 214, 235, .3), rgba(196, 214, 235, 0) 70%),
    radial-gradient(1.8px 1.8px at 48% 26%, rgba(255, 236, 190, .26), rgba(255, 236, 190, 0) 70%),
    radial-gradient(1.2px 1.2px at 64% 52%, rgba(196, 214, 235, .24), rgba(196, 214, 235, 0) 70%),
    radial-gradient(1.6px 1.6px at 80% 40%, rgba(255, 236, 190, .22), rgba(255, 236, 190, 0) 70%);
  animation: dust-drift2 9s ease-in-out infinite;
}
@keyframes dust-drift { 0%, 100% { transform: translate3d(0, 6px, 0); opacity: .5; } 50% { transform: translate3d(6px, -8px, 0); opacity: .95; } }
@keyframes dust-drift2 { 0%, 100% { transform: translate3d(0, -4px, 0); opacity: .35; } 50% { transform: translate3d(-7px, 7px, 0); opacity: .8; } }
/* 68 轮：雾演员层——手幻化成云雾（用户定调，不要真手）。雾即抛者：
   起掷时祭台底两团雾聚拢提亮、拉伸上送把钱托起，顶点散尽；钱下雾柱先送后接，
   落地拍在原位化成一口接雾横展消散。全部软衰渐变假blur，不用 filter
   （45 轮性能教训），且不碰 .coin / .coin-slot 的 3D 上下文（38 节锁）。 */
.coins-mist {
  position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
  opacity: 0;
  animation: mist-cycle var(--mt, 3.6s) cubic-bezier(.3, .68, .26, 1) both;
}
.coins-mist::before, .coins-mist::after {
  content: ""; position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240, 226, 196, .30), rgba(240, 226, 196, .14) 46%, rgba(240, 226, 196, 0) 74%);
}
.coins-mist::before { left: 4%; bottom: -8%; width: 54%; height: 50%; animation: mist-drift 8s ease-in-out infinite, mist-fade var(--mt, 3.6s) ease-out both; }
.coins-mist::after { right: 2%; bottom: -12%; width: 60%; height: 56%; animation: mist-drift2 10s ease-in-out infinite, mist-fade var(--mt, 3.6s) ease-out both; animation-delay: 0ms, 160ms; }
/* 70 轮 gap3：雕云——雾演员内两片错心 wisp（多心径向做团块感），独立漂移形变，去「光团」感。 */
.coins-mist .wisp {
  position: absolute; border-radius: 50%; pointer-events: none; opacity: .55;
  background:
    radial-gradient(46% 60% at 38% 46%, rgba(240, 226, 196, .26), rgba(240, 226, 196, 0) 70%),
    radial-gradient(38% 46% at 66% 40%, rgba(240, 226, 196, .18), rgba(240, 226, 196, 0) 72%),
    radial-gradient(30% 40% at 52% 66%, rgba(240, 226, 196, .14), rgba(240, 226, 196, 0) 74%);
}
.coins-mist .w1 { left: 10%; bottom: -6%; width: 36%; height: 36%; animation: wisp-a 7s ease-in-out infinite; }
.coins-mist .w2 { right: 8%; bottom: -2%; width: 42%; height: 40%; animation: wisp-b 9s ease-in-out infinite; }
@keyframes wisp-a { 0%, 100% { transform: translate3d(0, 2px, 0) scale(1) rotate(0deg); } 50% { transform: translate3d(8px, -7px, 0) scale(1.12) rotate(4deg); } }
@keyframes wisp-b { 0%, 100% { transform: translate3d(0, -3px, 0) scale(1.06) rotate(0deg); } 50% { transform: translate3d(-9px, 5px, 0) scale(.94) rotate(-5deg); } }
@keyframes mist-drift { 0%, 100% { transform: translate3d(0, 4px, 0) scale(1); } 50% { transform: translate3d(10px, -6px, 0) scale(1.06); } }
@keyframes mist-cycle {
  0% { opacity: .6; transform: translateY(6px) scale(1); }
  14% { opacity: 1; transform: translateY(2px) scale(.78); }
  30% { opacity: .9; transform: translateY(-40px) scaleY(1.28) scaleX(.9); }
  52% { opacity: .5; transform: translateY(-84px) scaleY(1.5) scaleX(.78); }
  68% { opacity: .22; transform: translateY(-26px) scaleY(1.05) scaleX(.98); }
  84% { opacity: .4; transform: translateY(6px) scaleY(.5) scaleX(1.25); }
  100% { opacity: 0; transform: translateY(2px) scaleY(.4) scaleX(1.4); }
}
/* 两团雾错时消散（只动 opacity，与 drift 的 transform 不打架），避免拉成一条横抹带 */
@keyframes mist-fade { 0% { opacity: .5; } 22% { opacity: 1; } 62% { opacity: .6; } 86% { opacity: .25; } 100% { opacity: 0; } }
/* 钱下雾柱：起掷一瞬自台面拎起一柱雾送钱；落地拍在原位化成接雾（横展→散）。 */
.mist-lift {
  position: absolute; left: 50%; top: 26px; width: 60px; height: 150px;
  margin-left: -30px; pointer-events: none; opacity: 0;
  background: radial-gradient(50% 50% at 50% 62%, rgba(240, 226, 196, .40), rgba(240, 226, 196, .16) 48%, rgba(240, 226, 196, 0) 76%);
}
.coin-slot:not(.still) .mist-lift {
  animation: mist-lift var(--t, 1.12s) cubic-bezier(.3, .68, .26, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes mist-lift {
  0% { opacity: 0; transform: translateY(26px) scaleY(.3) scaleX(1.25); }
  12% { opacity: 1; transform: translateY(10px) scaleY(.72) scaleX(1.05); }
  34% { opacity: .8; transform: translateY(-52px) scaleY(1.18) scaleX(.82); }
  62% { opacity: .3; transform: translateY(-96px) scaleY(1.35) scaleX(.66); }
  84% { opacity: .55; transform: translateY(30px) scaleY(.34) scaleX(1.5); }
  100% { opacity: 0; transform: translateY(34px) scaleY(.26) scaleX(1.85); }
}
.coins.settle { animation: coins-push 1.15s cubic-bezier(.22, .61, .36, 1) both; }
/* 45 轮：暗角收拢改独立伪元素做 opacity 动画（合成层），不再逐帧绘 box-shadow。 */
.coins.settle::after {
  content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(232, 192, 124, .05), inset 0 0 90px rgba(0, 0, 0, .45);
  opacity: 0;
  animation: vignette-in 1.15s ease-out both;
}
@keyframes vignette-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes coins-push {
  0% { transform: translateY(0) scale(1); }
  12% { transform: translateY(2px) scale(1.004); }
  26% { transform: translateY(-1px) scale(1.012); }
  100% { transform: translateY(0) scale(1.03); }
}
/* 70 轮 gap4：飞行期舞台微倾视差（:has 触发，落定换 landed 后自动让位 settle 推镜）。 */
.coins:has(.coin.toss) { animation: stage-tilt 2.9s ease-in-out both; }
@keyframes stage-tilt {
  0% { transform: rotateX(0deg); }
  30% { transform: rotateX(1.6deg); }
  62% { transform: rotateX(-.8deg); }
  100% { transform: rotateX(0deg); }
}
.coin-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* 离手一瞬的抛掷光：钱从台面上借光而起，抛者留在镜头外 */
.coin-slot::before {
  content: ''; position: absolute; top: 72px; left: 50%; width: 70px; height: 26px;
  transform: translateX(-50%); border-radius: 50%; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 214, 140, .30), rgba(255, 214, 140, 0) 70%);
}
.coin-slot:not(.still)::before {
  animation: launch-glow var(--t, 1.12s) cubic-bezier(.3, .68, .26, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes launch-glow {
  0% { opacity: .95; } 16% { opacity: .4; } 38% { opacity: 0; } 100% { opacity: 0; }
}
/* 微距景深层：虚化与斜构图挂在钱的外壳上。filter 永远不碰
   .coin / .coin-slot —— 那会把 preserve-3d 压平（38 节实拍教训）。 */
.coin-wrap { perspective: 700px; transform: rotateZ(var(--rz, 0deg)); }
.coin-slot:not(.still) .coin-wrap {
  /* 45 轮：撤掉 wrap-fly 的逐帧 blur 重绘（卡顿根因）；@keyframes wrap-fly 保留给 38 节测试锁，不再被引用。
     摆轴 axis-drift 是纯 transform，走合成不触发重绘。 */
  animation: axis-drift var(--t, 1.12s) cubic-bezier(.3, .68, .26, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes axis-drift {
  0% { transform: rotateZ(var(--rz, 0deg)) rotateY(calc(var(--ax, 14deg) * -1)); }
  46% { transform: rotateZ(var(--rz, 0deg)) rotateY(var(--ax, 14deg)); }
  100% { transform: rotateZ(var(--rz, 0deg)) rotateY(0deg); }
}
/* 空中景深：离手与落台带运动虚化，顶点那一帧钱最实 */
@keyframes wrap-fly {
  0% { filter: blur(calc(var(--soft, 0px) + 1.3px)); }
  30% { filter: blur(calc(var(--soft, 0px) + .5px)); }
  46% { filter: blur(calc(var(--soft, 0px) + .15px)); }
  78% { filter: blur(calc(var(--soft, 0px) + .9px)); }
  100% { filter: blur(calc(var(--soft, 0px) + .25px)); }
}
/* 落地影：钱在空中翻、影子留在台上。不用 filter —— filter 会把
   preserve-3d 压平，压平后背面裁切失效，背钱会透出反着的字（38 节实拍抓到两次）。 */
.coin-slot::after {
  content: ''; position: absolute; top: 90px; left: 50%; width: 92px; height: 16px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 70%);
}
/* 影随钱高：钱离台越高影越淡，微距画面里不留悬空黑块 */
.coin-slot:not(.still)::after {
  animation: shadow-fade var(--t, 1.12s) cubic-bezier(.3, .68, .26, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes shadow-fade {
  0% { opacity: .5; } 46% { opacity: .12; } 88% { opacity: .42; } 100% { opacity: .5; }
}

.coin {
  /* 45 轮：钱面放大一号，字口与包浆在这个尺寸才「看得见」；will-change 让翻转走合成层。 */
  width: 100px; height: 100px; position: relative; border-radius: 50%;
  transform-style: preserve-3d;
  will-change: transform;
}
.coin .face {
  position: absolute; inset: 0; border-radius: 50%;
  backface-visibility: hidden;
  transform: translateZ(3.5px);
  background:
    radial-gradient(circle at 24% 64%, rgba(104, 132, 110, .20) 0, rgba(104, 132, 110, .20) 3%, rgba(104, 132, 110, 0) 5%),
    radial-gradient(circle at 70% 30%, rgba(92, 118, 96, .16) 0, rgba(92, 118, 96, .16) 4%, rgba(92, 118, 96, 0) 6%),
    radial-gradient(circle at 40% 82%, rgba(78, 102, 84, .14) 0, rgba(78, 102, 84, .14) 2%, rgba(78, 102, 84, 0) 4%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 246, 220, .028) 0 1px, rgba(255, 246, 220, 0) 1px 4px),
    radial-gradient(circle at 31% 26%, rgba(255, 246, 218, .30), rgba(255, 246, 218, 0) 27%),
    radial-gradient(circle at 68% 76%, rgba(0, 0, 0, .46), rgba(0, 0, 0, 0) 56%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0 77%, rgba(255, 236, 190, .10) 79% 83%, rgba(0, 0, 0, .32) 85% 90%, rgba(255, 236, 190, .08) 92% 96%, rgba(0, 0, 0, .55) 98% 100%),
    radial-gradient(circle at 42% 38%, #9c7a42 0%, #7c5c2e 42%, #55401c 74%, #3a2a12 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 240, 200, .16),
    inset 0 2px 3px rgba(255, 246, 220, .30),
    inset 0 -3px 6px rgba(0, 0, 0, .5),
    0 2px 7px rgba(0, 0, 0, .55);
}
/* 钱缘：一叠金属片夹在两面之间，翻到立起来时看见的是厚度，不是一张纸 */
.coin .edge {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(180deg, #7a5a2c, #33240f 42%, #5c4320 64%, #1d150a 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
/* 车削纹环状高光 + 内沿磨损圈；抛掷时整层慢转，金属跟着转 */
.coin .face::before {
  content: ''; position: absolute; inset: 4%; border-radius: 50%;
  background: conic-gradient(from 210deg,
    rgba(255, 246, 220, .10), rgba(255, 246, 220, 0) 25%,
    rgba(255, 246, 220, .07) 50%, rgba(255, 246, 220, 0) 75%,
    rgba(255, 246, 220, .10));
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, .14);
}
.coin.toss .face::before { animation: sheen-spin var(--t, 1.12s) linear both; animation-delay: var(--d, 0ms); }
@keyframes sheen-spin { from { transform: rotate(0deg); } to { transform: rotate(720deg); } }
/* 方孔：两面都开，孔壁给一点内阴影，金属厚度就出来了 */
.coin .face::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 26%; height: 26%;
  transform: translate(-50%, -50%); border-radius: 3px;
  background: linear-gradient(180deg, #0d0a06, #1d1610);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .85), inset 0 -1px 0 rgba(255, 236, 190, .22), 0 1px 0 rgba(255, 236, 190, .3);
}
.coin .face-b {
  transform: rotateX(180deg) translateZ(3.5px);
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 246, 220, .024) 0 1px, rgba(255, 246, 220, 0) 1px 4px),
    radial-gradient(circle at 34% 30%, rgba(255, 246, 218, .24), rgba(255, 246, 218, 0) 30%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0 77%, rgba(255, 236, 190, .11) 79% 83%, rgba(0, 0, 0, .30) 85% 90%, rgba(255, 236, 190, .08) 92% 96%, rgba(0, 0, 0, .52) 98% 100%),
    radial-gradient(circle at 40% 36%, #8f6c36 0%, #6f5226 44%, #4a3617 76%, #33250e 100%);
}
.coin .face-b::before {
  content: ''; position: absolute; inset: 12%; border-radius: 50%;
  border: 1px solid rgba(90, 64, 26, .5);
  background: conic-gradient(from 210deg,
    rgba(255, 246, 220, .14), rgba(255, 246, 220, 0) 25%,
    rgba(255, 246, 220, .09) 50%, rgba(255, 246, 220, 0) 75%,
    rgba(255, 246, 220, .14));
}
.coin .insc {
  position: absolute; font-style: normal; font-weight: 700; font-size: 15px; line-height: 1;
  color: #55401c; font-family: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", serif;
  text-shadow: 0 1px 0 rgba(255, 236, 190, .38), 0 -1px 1px rgba(0, 0, 0, .65);
}
.insc.t { top: 11px; left: 50%; transform: translateX(-50%); }
.insc.b { bottom: 11px; left: 50%; transform: translateX(-50%); }
.insc.r { right: 9px; top: 50%; transform: translateY(-50%); }
.insc.l { left: 9px; top: 50%; transform: translateY(-50%); }
.coin-tag { min-height: 16px; font-size: 12px; letter-spacing: .14em; color: rgba(240, 220, 180, .82); }
/* 落地那一刻的金圈：从钱底下荡出去，像声音 */
.coin-slot.ping::before {
  content: ''; position: absolute; left: 50%; top: 50px; width: 100px; height: 100px;
  margin: -50px 0 0 -50px; border-radius: 50%;
  border: 1.5px solid rgba(240, 200, 120, .45);
  background: none; opacity: 1;
  animation: coin-ping .7s ease-out both;
}
@keyframes coin-ping { from { transform: scale(.55); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
/* 70 轮 gap1/gap2：落地重量包——触台一瞬尘踢上溅、地面影 snap 收紧。 */
.dust-kick {
  position: absolute; left: 50%; top: 74px; width: 92px; height: 44px;
  margin-left: -46px; pointer-events: none; opacity: 0;
  background:
    radial-gradient(2px 2px at 22% 70%, rgba(255, 240, 200, .8), rgba(255, 240, 200, 0) 70%),
    radial-gradient(1.6px 1.6px at 38% 82%, rgba(255, 240, 200, .6), rgba(255, 240, 200, 0) 70%),
    radial-gradient(2.2px 2.2px at 54% 74%, rgba(255, 240, 200, .7), rgba(255, 240, 200, 0) 70%),
    radial-gradient(1.4px 1.4px at 68% 84%, rgba(255, 240, 200, .5), rgba(255, 240, 200, 0) 70%),
    radial-gradient(1.8px 1.8px at 82% 72%, rgba(255, 240, 200, .6), rgba(255, 240, 200, 0) 70%);
  background-repeat: no-repeat;
  animation: dust-kick .8s ease-out both;
}
@keyframes dust-kick {
  0% { opacity: 0; transform: translateY(8px) scale(.5); }
  18% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-26px) scale(1.25); }
}
.coin-slot.ping::after {
  animation: shadow-snap .45s ease-out both;
}
@keyframes shadow-snap {
  0% { transform: translateX(-50%) scale(1.25); opacity: .28; }
  60% { transform: translateX(-50%) scale(.92); opacity: .6; }
  100% { transform: translateX(-50%) scale(1); opacity: .5; }
}
.cast-stage { position: relative; }
.coin.toss {
  /* 91 轮：抛的过程改物理采样——竖直走抛物线（重力）、自旋匀角速、横移与缩放按控制点插值，
     21 个密采样点 + linear 时序；去掉段间 cubic-bezier 的速度断点，那就是一格一格的来源。 */
  animation: coin-toss var(--t, 1.12s) linear both;
  animation-delay: var(--d, 0ms);
}
/* --end 由 JS 按字/背下发：字落 1516deg、背落 1336deg —— 两个终止角分别 ≡ 76° 与 256°，
   也就是钱「平躺」着落台（只露钱缘与钱厚），字/背留给落地后的立起那一下去开示（89 轮）。
   空中每一帧都是真钱在翻，不是贴好面原地转。 */
@keyframes coin-toss {
  0% { transform: translate(0, 6px) scale(.9) rotateX(0deg); }
  5% { transform: translate(calc(var(--sx, 0px) * 0.161), -15.8px) scale(0.943) rotateX(calc(var(--end, 1516deg) * 0.05)); }
  10% { transform: translate(calc(var(--sx, 0px) * 0.321), -35.2px) scale(0.986) rotateX(calc(var(--end, 1516deg) * 0.1)); }
  15% { transform: translate(calc(var(--sx, 0px) * 0.467), -52.4px) scale(1.024) rotateX(calc(var(--end, 1516deg) * 0.15)); }
  20% { transform: translate(calc(var(--sx, 0px) * 0.553), -67.3px) scale(1.046) rotateX(calc(var(--end, 1516deg) * 0.2)); }
  25% { transform: translate(calc(var(--sx, 0px) * 0.639), -80px) scale(1.068) rotateX(calc(var(--end, 1516deg) * 0.25)); }
  30% { transform: translate(calc(var(--sx, 0px) * 0.725), -90.3px) scale(1.09) rotateX(calc(var(--end, 1516deg) * 0.3)); }
  35% { transform: translate(calc(var(--sx, 0px) * 0.811), -98.5px) scale(1.112) rotateX(calc(var(--end, 1516deg) * 0.35)); }
  40% { transform: translate(calc(var(--sx, 0px) * 0.897), -104.3px) scale(1.134) rotateX(calc(var(--end, 1516deg) * 0.4)); }
  45% { transform: translate(calc(var(--sx, 0px) * 0.983), -107.9px) scale(1.156) rotateX(calc(var(--end, 1516deg) * 0.45)); }
  50% { transform: translate(calc(var(--sx, 0px) * 0.96), -109.2px) scale(1.17) rotateX(calc(var(--end, 1516deg) * 0.5)); }
  55% { transform: translate(calc(var(--sx, 0px) * 0.878 + var(--sx2, 0px) * 0.036), -108.4px) scale(1.174) rotateX(calc(var(--end, 1516deg) * 0.55)); }
  60% { transform: translate(calc(var(--sx, 0px) * 0.669 + var(--sx2, 0px) * 0.218), -105.2px) scale(1.145) rotateX(calc(var(--end, 1516deg) * 0.6)); }
  65% { transform: translate(calc(var(--sx, 0px) * 0.46 + var(--sx2, 0px) * 0.4), -99.8px) scale(1.116) rotateX(calc(var(--end, 1516deg) * 0.65)); }
  70% { transform: translate(calc(var(--sx, 0px) * 0.251 + var(--sx2, 0px) * 0.582), -92.2px) scale(1.087) rotateX(calc(var(--end, 1516deg) * 0.7)); }
  75% { transform: translate(calc(var(--sx, 0px) * 0.042 + var(--sx2, 0px) * 0.764), -82.4px) scale(1.058) rotateX(calc(var(--end, 1516deg) * 0.75)); }
  80% { transform: translate(calc(var(--sx2, 0px) * 0.657), -70.4px) scale(1.029) rotateX(calc(var(--end, 1516deg) * 0.8)); }
  85% { transform: translate(calc(var(--sx2, 0px) * 0.479), -56.1px) scale(1) rotateX(calc(var(--end, 1516deg) * 0.85)); }
  90% { transform: translate(calc(var(--sx2, 0px) * 0.3), -39.6px) scale(1) rotateX(calc(var(--end, 1516deg) * 0.9)); }
  95% { transform: translate(calc(var(--sx2, 0px) * 0.15), -20.9px) scale(1) rotateX(calc(var(--end, 1516deg) * 0.95)); }
  100% { transform: translate(0, 0) rotateX(var(--end, 1516deg)) scaleY(.84); }
}
.coin.landed { animation: coin-land 1.05s linear both; }
/* 45 轮：落定后一道扫光掠过钱面，把眼睛引去读字口与包浆 —— 细节是被「扫」出来看的。 */
.coin.landed .face::before { animation: sheen-once .8s ease-out .8s both; }
@keyframes sheen-once { from { transform: rotate(0deg); opacity: .45; } to { transform: rotate(150deg); opacity: 1; } }
.coin.landed:not(.back) { --lx: 0deg; --flat: 76deg; transform: rotateX(0deg); }
.coin.back.landed { --lx: 180deg; --flat: 256deg; transform: rotateX(180deg); }
/* 73 轮起的落地演出，89 轮按用户复看意见改成两段分明：
   前段钱「平躺」在台面上（字 76°、背 256°），触台压扁后随即颤——颤发生在平躺阶段，才是金属在台面上 rocking 的真样子；
   后段才立起：从平躺转到呈现姿，过冲一格再收住，把字/背转向看客。
   90 轮：颤从触台第一帧就开始，且 JS 按每枚钱自己的触台时刻切类名——三枚错峰落台，先落的钱不会平躺愣住。
   91 轮：颤改阻尼正弦采样（6.5Hz、τ .16s、21 点）、立起用 easeOutBack 采样，全段 linear 时序无速度断点；
   动画 box-shadow 去掉（逐帧重绘是另一处卡顿源）。1.05s 仍嵌进既有 1.15s 定格拍，流程总时长零增加。
   --flat 平躺角、--lx 呈现基姿、--rv 呈现倾角方向（JS 按字/背下发）。 */
@keyframes coin-land {
  0% { transform: rotateX(var(--flat, 76deg)) translateY(0) scaleY(.84) rotateZ(0deg); }
  2.6% { transform: rotateX(calc(var(--flat, 76deg) + 5.31deg)) translateY(-3.8px) scaleY(0.953) rotateZ(2.27deg); }
  5.2% { transform: rotateX(calc(var(--flat, 76deg) + 3.87deg)) translateY(-2.77px) scaleY(0.98) rotateZ(-0.01deg); }
  7.9% { transform: rotateX(calc(var(--flat, 76deg) + -0.94deg)) translateY(-0.67px) scaleY(0.961) rotateZ(-1.62deg); }
  10.5% { transform: rotateX(calc(var(--flat, 76deg) + -3.44deg)) translateY(-2.45px) scaleY(0.953) rotateZ(-1.17deg); }
  13.1% { transform: rotateX(calc(var(--flat, 76deg) + -1.83deg)) translateY(-1.31px) scaleY(0.974) rotateZ(0.29deg); }
  15.7% { transform: rotateX(calc(var(--flat, 76deg) + 1.1deg)) translateY(-0.78px) scaleY(1.004) rotateZ(1.04deg); }
  18.3% { transform: rotateX(calc(var(--flat, 76deg) + 2.1deg)) translateY(-1.5px) scaleY(1.015) rotateZ(0.55deg); }
  21% { transform: rotateX(calc(var(--flat, 76deg) + 0.75deg)) translateY(-0.54px) scaleY(1.004) rotateZ(-0.34deg); }
  23.6% { transform: rotateX(calc(var(--flat, 76deg) + -0.94deg)) translateY(-0.67px) scaleY(0.991) rotateZ(-0.64deg); }
  26.2% { transform: rotateX(calc(var(--flat, 76deg) + -1.22deg)) translateY(-0.87px) scaleY(0.989) rotateZ(-0.23deg); }
  28.8% { transform: rotateX(calc(var(--flat, 76deg) + -0.22deg)) translateY(-0.16px) scaleY(0.998) rotateZ(0.29deg); }
  31.4% { transform: rotateX(calc(var(--flat, 76deg) + 0.7deg)) translateY(-0.5px) scaleY(1.006) rotateZ(0.37deg); }
  34% { transform: rotateX(calc(var(--flat, 76deg) + 0.67deg)) translateY(-0.48px) scaleY(1.006) rotateZ(0.07deg); }
  36.7% { transform: rotateX(calc(var(--flat, 76deg) + -0.01deg)) translateY(-0.01px) scaleY(1) rotateZ(-0.21deg); }
  39.3% { transform: rotateX(calc(var(--flat, 76deg) + -0.48deg)) translateY(-0.34px) scaleY(0.996) rotateZ(-0.2deg); }
  41.9% { transform: rotateX(calc(var(--flat, 76deg) + -0.34deg)) translateY(-0.25px) scaleY(0.997) rotateZ(0deg); }
  44.5% { transform: rotateX(calc(var(--flat, 76deg) + 0.09deg)) translateY(-0.06px) scaleY(1.001) rotateZ(0.15deg); }
  47.1% { transform: rotateX(calc(var(--flat, 76deg) + 0.31deg)) translateY(-0.22px) scaleY(1.003) rotateZ(0.1deg); }
  49.8% { transform: rotateX(calc(var(--flat, 76deg) + 0.16deg)) translateY(-0.12px) scaleY(1.001) rotateZ(-0.03deg); }
  52.4% { transform: rotateX(calc(var(--flat, 76deg) + -0.1deg)) translateY(-0.07px) scaleY(0.999) rotateZ(-0.09deg); }
  58% { transform: rotateX(var(--flat, 76deg)) translateY(0) scaleY(1) rotateZ(0deg); }
  64.5% { transform: rotateX(calc(var(--flat, 76deg) + (var(--lx, 0deg) + var(--rv, -4deg) - var(--flat, 76deg)) * 0.817)) translateY(-4.24px) scale(1.042) rotateZ(0deg); }
  71% { transform: rotateX(calc(var(--flat, 76deg) + (var(--lx, 0deg) + var(--rv, -4deg) - var(--flat, 76deg)) * 1.088)) translateY(-6px) scale(1.06) rotateZ(0deg); }
  77.5% { transform: rotateX(calc(var(--flat, 76deg) + (var(--lx, 0deg) + var(--rv, -4deg) - var(--flat, 76deg)) * 1.064)) translateY(-4.24px) scale(1.042) rotateZ(0deg); }
  84% { transform: rotateX(calc(var(--lx, 0deg) + var(--rv, -4deg))) translateY(0) scale(1) rotateZ(0deg); }
  92% { transform: rotateX(calc(var(--lx, 0deg) + var(--rv, -4deg))) translateY(-1px) scale(1.015) rotateZ(0deg); }
  100% { transform: rotateX(calc(var(--lx, 0deg) + var(--rv, -4deg))) translateY(-2px) scale(1.03) rotateZ(0deg); }
}

/* 蓍草法引导回放：一变之中的四行数字，居中排，占的是铜钱那一块的位置 */
.shicao-step { text-align: center; font-size: 15px; line-height: 2.1; color: var(--ink-2); }
.coins .shicao-step { width: 100%; }
.shicao-step .strong { color: var(--ink); font-weight: 600; }
/* 一变的画面（41 节）：台上两束策按真实比例分列左右，中间升起挂出的那一策，
   扐去的策收成台角小签。全部节奏收在一拍（约 1.7 秒）里，跟服务端 paceMs 同步。 */
.stalk-stage {
  position: relative; height: 74px; width: min(380px, 88%);
  margin: 4px auto 14px; border-radius: 12px;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(224, 184, 120, .08), rgba(224, 184, 120, 0) 70%),
    linear-gradient(180deg, #191309, #100c07);
  box-shadow: inset 0 0 0 1px rgba(232, 192, 124, .12);
}
.stalk-side { position: absolute; top: 16px; height: 40px; overflow: hidden; }
.stalk-side.sl { left: 4%; width: calc(var(--lw, 50%) * .44); animation: stalk-split-l .5s ease-out both; }
.stalk-side.sr { right: 4%; width: calc(var(--rw, 50%) * .44); animation: stalk-split-r .5s ease-out both; }
.stalk-bundle {
  position: absolute; inset: 0; border-radius: 6px;
  background: repeating-linear-gradient(90deg,
    rgba(224, 184, 120, .68) 0 2px, rgba(224, 184, 120, .12) 2px 3px, rgba(0, 0, 0, 0) 3px 7px);
  box-shadow: inset 0 0 0 1px rgba(224, 184, 120, .22), 0 2px 6px rgba(0, 0, 0, .45);
}
@keyframes stalk-split-l { from { transform: translateX(140%); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes stalk-split-r { from { transform: translateX(-140%); opacity: .2; } to { transform: none; opacity: 1; } }
.stalk-hang {
  position: absolute; left: 50%; top: 8px; width: 3px; height: 30px; margin-left: -1.5px;
  border-radius: 2px; background: linear-gradient(180deg, #f0d8a0, #b9894a);
  box-shadow: 0 0 8px rgba(240, 216, 160, .5);
  animation: stalk-hang .45s ease-out .5s both;
}
@keyframes stalk-hang { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
.stalk-leap {
  position: absolute; right: 5%; bottom: 6px; padding: 1px 9px; border-radius: 999px;
  font-size: 11px; letter-spacing: .08em; color: var(--accent);
  border: 1px solid var(--line-2); background: var(--bg-card);
  animation: stalk-leap .4s ease-out .95s both;
}
@keyframes stalk-leap { from { transform: translateX(-34px); opacity: 0; } to { transform: none; opacity: 1; } }
.shicao-lines > div { animation: line-in .38s ease-out both; }
.shicao-lines > div:nth-child(1) { animation-delay: .15s; }
.shicao-lines > div:nth-child(2) { animation-delay: .55s; }
.shicao-lines > div:nth-child(3) { animation-delay: 1s; }
.shicao-lines > div:nth-child(4) { animation-delay: 1.25s; }
@keyframes line-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* 报告里的十八变核对表。它是给用户自己核的，所以数字之间要能一眼扫过去对齐。 */
.shicao-table { margin-top: 12px; font-size: 13px; line-height: 1.9; color: var(--ink-2); }
.shicao-head { margin-top: 12px; font-weight: 600; color: var(--ink); }
.shicao-row { display: flex; gap: 14px; flex-wrap: wrap; border-bottom: 1px dashed var(--line); padding: 2px 0; }
.shicao-row .no { min-width: 58px; color: var(--ink-3); }
.shicao-row .strong { color: var(--ink); font-weight: 600; }
.shicao-out { padding: 3px 0 4px; color: var(--accent); }

.yao-stack { display: flex; flex-direction: column-reverse; gap: 8px; align-items: center; margin: 10px 0 16px; min-height: 130px; }
.yao { display: flex; flex-direction: column; align-items: center; gap: 3px; opacity: 0; animation: fadein .35s forwards; }
.yao .bar { display: flex; gap: 12px; }
.yao .seg { width: 74px; height: 9px; background: var(--ink); border-radius: 2px; }
.yao.yin .seg { width: 31px; }
.yao.moving .seg { background: var(--accent); }
.yao .tag { font-size: 11px; color: var(--ink-3); letter-spacing: .06em; }
@keyframes fadein { to { opacity: 1; } }

/* ---------------------------------------------------------- 报告 */

.report-head { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 22px; }
.gua-block { display: flex; gap: 14px; align-items: center; }
.gua-figure { display: flex; flex-direction: column-reverse; gap: 5px; }
.gua-figure .seg { width: 54px; height: 7px; background: var(--ink); border-radius: 2px; }
.gua-figure .row-yin { display: flex; gap: 10px; }
.gua-figure .row-yin .seg { width: 22px; }
.gua-figure .moving .seg { background: var(--accent); }
.gua-names { display: flex; flex-direction: column; }
.gua-names .ben { font-size: 28px; font-weight: 650; letter-spacing: .06em; }
.gua-names .arrow { color: var(--ink-3); font-size: 14px; margin: 2px 0; }
.gua-names .bian { font-size: 20px; color: var(--accent); letter-spacing: .06em; }

.report-meta { flex: 1 1 260px; font-size: 13px; color: var(--ink-3); line-height: 1.9; }
.report-meta b { color: var(--ink-2); font-weight: 600; }

.sec { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 14px; }
.sec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.sec-no { font-size: 12px; color: var(--accent); letter-spacing: .1em; }
.sec h2 { margin: 0; font-size: 18px; }
.sec .free-tag { font-size: 11px; color: var(--ok); border: 1px solid rgba(150, 194, 164, .4); border-radius: 999px; padding: 1px 8px; }
.sec-body { white-space: pre-wrap; color: var(--ink-2); font-size: 16px; }
.sec-body p { margin: 0 0 12px; }
.sec-body p:last-child { margin-bottom: 0; }

.sec.locked { position: relative; border-style: dashed; background: repeating-linear-gradient(135deg, #1c1712, #1c1712 10px, #201a14 10px, #201a14 20px); }
.sec.locked .sec-body { filter: blur(0); color: var(--ink-2); font-size: 14px; }

.paywall {
  background: linear-gradient(180deg, #1c1712, var(--accent-soft));
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 26px; text-align: center; margin: 6px 0 18px;
}
.paywall h2 { margin: 0 0 8px; font-size: 20px; }
.paywall p { color: var(--ink-2); font-size: 15px; }
.paywall .price { font-size: 30px; font-weight: 650; color: var(--ink); letter-spacing: .02em; }
.paywall .price small { font-size: 14px; font-weight: 400; color: var(--ink-3); }
.paywall .btn { margin-top: 14px; }

.pro-box { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 14px; }
.pro-box summary { cursor: pointer; font-size: 14px; color: var(--accent); }
.pro-box pre {
  white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.8;
  color: var(--ink-2); margin: 14px 0 0; padding: 0; font-family: inherit;
}

.followup { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 14px; }
.share { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 14px; }
.share-card {
  border: 1px solid var(--line-2); border-radius: 12px; padding: 20px; background: var(--bg);
  font-size: 15px; color: var(--ink-2); margin: 12px 0;
}
.share-card .t { font-size: 17px; color: var(--ink); font-weight: 620; margin-bottom: 8px; line-height: 1.6; }
.share-card .c { font-size: 12px; color: var(--ink-3); margin-top: 12px; }

/* 分享卡片图（96 轮）。1080×1350 的画布按容器宽等比缩小，所以只给它边框与圆角：
   图上的字全画在画布里，DOM 里只有 aria-label，没有可以另排一版的文本。
   限宽是因为它是一张 4:5 的卡，铺满 860px 的正文栏会变成一张海报，压过报告本身。 */
.share-art-slot { margin: 14px 0 6px; }
.share-art {
  display: block; width: 100%; height: auto; max-width: 440px; margin: 0 auto;
  border: 1px solid var(--line-2); border-radius: 12px; background: #0a0806;
  cursor: zoom-in;
}
.share-zoom {
  position: fixed; inset: 0; z-index: 80; background: rgba(6, 4, 3, .92);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow: auto; cursor: zoom-out;
}
.share-zoom img {
  width: 100%; max-width: 720px; height: auto;
  border: 1px solid var(--line-2); border-radius: 12px; background: #0a0806;
}

/* 纠错反馈（设计文档 14 节 D5 第 4 层）。外观与专业盘面折叠层同一档：
   它是给少数人用的入口，不该比报告正文更抢眼。 */
.fb-box { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 14px; }
.fb-box summary { cursor: pointer; font-size: 14px; color: var(--accent); }
.fb-box .fb-fields { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; }
.fb-box .fb-fields > div { flex: 1 1 200px; }
.fb-box .fb-fields label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 4px; }
.fb-box textarea { margin-top: 12px; }
.fb-box .actions { margin-top: 14px; }
.fb-note { font-size: 13px; color: var(--ink-2); line-height: 1.8; margin: 14px 0 0; }

.report-legal { font-size: 13px; color: var(--ink-3); line-height: 1.8; padding: 14px 0; border-top: 1px solid var(--line); }
.report-legal ul { padding-left: 20px; margin: 6px 0; }

/* ---------------------------------------------------------- 付费 */

.skus { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 16px 0; }
.sku {
  text-align: left; border: 1px solid var(--line-2); border-radius: 12px; padding: 16px;
  background: var(--bg); cursor: pointer; font: inherit; position: relative;
}
.sku:hover { border-color: var(--accent); }
.sku[aria-pressed=true] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.sku .name { font-weight: 620; font-size: 15px; }
.sku .amt { font-size: 22px; font-weight: 650; margin: 4px 0; }
.sku .unit { font-size: 12px; color: var(--ok); }
.sku .note { font-size: 12px; color: var(--ink-3); line-height: 1.6; margin-top: 6px; }
.sku .exp { font-size: 12px; color: var(--danger); margin-top: 6px; }
.sku[disabled] { opacity: .5; cursor: not-allowed; }
.refund { padding-left: 20px; font-size: 14px; color: var(--ink-2); }
.refund li { margin-bottom: 6px; }

.qr { text-align: center; padding: 20px; border: 1px dashed var(--line-2); border-radius: 12px; margin-top: 16px; }
.qr .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; color: var(--ink-2); background: var(--bg); padding: 10px; border-radius: 8px; margin: 10px 0; }
.qr .order { font-size: 13px; color: var(--ink-3); }
.qr .qr-code { margin: 14px 0 10px; }
/* SVG 自带 4 个模块的白边（renderQrSvg 的 margin），扫码器靠它定位，不能被裁掉。
   只收缩、不放大：放大会让模块边界发虚，反而更难扫。 */
.qr .qr-code svg { display: block; margin: 0 auto; max-width: 100%; height: auto; background: #fff; }


/* ---------------------------------------------------------- 历史 / 其他 */

.history { list-style: none; padding: 0; }
.history li { border-bottom: 1px solid var(--line); padding: 12px 0; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.history li:last-child { border-bottom: 0; }
.history .g { font-weight: 620; letter-spacing: .04em; }
.history .q { color: var(--ink-2); font-size: 14px; flex: 1 1 200px; }
.history .d { color: var(--ink-3); font-size: 12px; }
.tag { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-3); }
.tag.paid { color: var(--ok); border-color: rgba(150, 194, 164, .4); }
.tag.free { color: var(--ink-3); }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tabs button { font: inherit; font-size: 14px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg); cursor: pointer; }
.tabs button[aria-selected=true] { background: var(--accent); color: #241d12; border-color: var(--accent); }
.legal-body { font-size: 15px; color: var(--ink-2); }
.legal-body p { margin-bottom: 10px; }
.legal-body .head { font-weight: 620; color: var(--ink); margin-top: 18px; }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: #2a231b; color: #f0e9dd; padding: 12px 20px; border-radius: 10px;
  font-size: 14px; max-width: 90vw; box-shadow: var(--shadow); z-index: 50; white-space: pre-wrap;
}

/* ---------------------------------------------------------- 页脚 */

.footer {
  border-top: 1px solid var(--line); padding: 26px 20px 40px;
  max-width: var(--maxw); margin: 0 auto; font-size: 13px; color: var(--ink-3); line-height: 1.8;
}
.footer .ai-label { color: var(--ink-2); }
.footer .links { display: flex; gap: 14px; flex-wrap: wrap; }
.footer a { color: var(--accent); }
/* 公安联网备案：图标 + 编号。图标是备案平台核发的原件（含警徽，仓库里不发也不能自己画），
   文件不在时前端会把 <img> 整个移除，所以这里不必为「图裂了」准备兜底样式。 */
#footer-gongan { display: inline-flex; align-items: center; gap: 5px; }
.footer .gongan-icon { width: 18px; height: 20px; display: block; }

.crumb { font-size: 13px; color: var(--accent); letter-spacing: .06em; margin-bottom: 4px; }

/* ---------------------------------------------------------- 窄屏 */

@media (max-width: 900px) {
  /* v78 手机海报化：首屏不再塌成横幅，罗盘提亮右移与文案左右对峙，暗纱改斜向保右侧通透 */
  /* v82：手机首屏与桌面同权——占满整页海报，下一节整块退到折下 */
  .hero { min-height: calc(100vh - var(--topbar-h, 57px)); min-height: calc(100svh - var(--topbar-h, 57px)); }
  .hero-bagua { transform: translateX(14%); opacity: .8; }
  .hero-stars-layer { --star-cx: 64%; }
  .hero::before { background: linear-gradient(100deg, rgba(10, 9, 7, .92) 0%, rgba(10, 9, 7, .78) 42%, rgba(10, 9, 7, .34) 70%, rgba(10, 9, 7, 0) 92%); }
  .hero-copy { margin: 0 auto; max-width: 100%; padding: 56px 22px 76px; }
  /* v79 手机性能降级：消融实测（390x844@3x、CPU 4x 降速、软件光栅）停掉罗盘旋转/星尘/光柱动画 7.2->16fps，
     而整片云海只占约 1fps——弱机帧率杀手是巨物旋转层，不是云。手机端巨物改静态海报，只保留云海流动；
     云海侧同步减载：雾团径向渐变本就无轮廓，去掉多余 blur 与 screen 混合，雾带/光带 blur 减半。
     v99：上面两条停动改挂 html[data-motion="lite"]——弱机档＝手机无属性默认档（SEO 静态页零脚本也安全），好机经帧率探针挂 full 放行全动；
     云海侧这些减载与档位无关，两档共用（微信内核丢合成层的教训，滤镜不再按档加回）。 */
  html:not([data-motion="full"]):not([data-motion="probe"]) .hero-bagua, html:not([data-motion="full"]):not([data-motion="probe"]) .hero-bagua *,
  html:not([data-motion="full"]):not([data-motion="probe"]) .hero-stars, html:not([data-motion="full"]):not([data-motion="probe"]) .hero-stars::before, html:not([data-motion="full"]):not([data-motion="probe"]) .hero-stars::after,
  html:not([data-motion="full"]):not([data-motion="probe"]) .hero-scene, html:not([data-motion="full"]):not([data-motion="probe"]) .hero-scene * { animation: none !important; }
  html:not([data-motion="full"]):not([data-motion="probe"]) .hero-rays-layer, html:not([data-motion="full"]):not([data-motion="probe"]) .hero-stars-layer, html:not([data-motion="full"]):not([data-motion="probe"]) .hero-stars-layer .star { animation: none !important; }
  /* v99 探针档：循环动效隐形满载跑约 1s（opacity .01 仍照光栅/合成，负载真实），
     盘体入场暂停在 0 相位；定档发生在看不见的一瞬，再淡入，任何方向都不跳帧。
     好机 full＝与电脑端同动效；弱机 lite＝本档原样（v79 静态巨物口径）。 */
  html[data-motion="probe"] .hero-bagua { animation-play-state: paused !important; opacity: .01 !important; }
  html[data-motion="probe"] .hero-rays-layer, html[data-motion="probe"] .hero-stars-layer { opacity: .01 !important; }
  .hero-sea .puff, .hero-sea-back .puff { mix-blend-mode: normal; }
  .hero-sea .mist, .hero-sea-back .mist { mix-blend-mode: normal; }
  .hero-sea .glowband, .hero-sea-back .glowband { mix-blend-mode: normal; }
  .hero-sea .hl, .hero-sea .rim, .hero-sea .wisp, .hero-sea-back .hl, .hero-sea-back .rim, .hero-sea-back .wisp { mix-blend-mode: normal; }
  .hero-sea .veil { mix-blend-mode: normal; }
  .hero-sea .contact { mix-blend-mode: normal; }
  .hero-sea .puff:nth-of-type(2n), .hero-sea-back .puff:nth-of-type(2n) { display: none; }
  .hero { animation: none; }
  /* v95 手机端滤镜口径：桌面这轮把柔边还给了云海（层内静止，模糊只算一次）。
     手机上不能照抄——微信 webview 在首页 display:none→block 之后可能丢合成层（v80 的教训），
     带滤镜的层会退回每帧软件重算。所以：几百枚 hl/crev 逐点模糊一律归零（那是大头），
     只留雾纱/雾带/光带/接触光这几条「成片柔边」，且模糊半径减半；
     四层根都挂 will-change，让内核保持图层提升，提升成功时这些模糊同样只算一次。 */
  .hero-sea .hl, .hero-sea-back .hl, .hero-sea .crev, .hero-sea-back .crev, .hero-sea .terrace { filter: none; }
  /* v99c 柔边回补（用户真机复评「云海棱角太锋利、盘后云海没展示好」）：只挑个位数元素——
     rim 3 枚、ridge 体 4 枚、雾帽 1 枚，层内静止故模糊只算一次；173 枚 hl/crev 的逐点模糊
     继续归零，那是 v95 消融测出来的真大头，不回碰。 */
  .hero-sea .rim, .hero-sea-back .rim { filter: blur(2.5px); }
  .hero-sea .ridge-near .body { filter: blur(8px); opacity: .78; }
  .hero-sea .ridge-mid .body { filter: blur(4.5px); opacity: .7; }
  .hero-sea-back .ridge-far .body { filter: blur(1.5px); }
  .hero-sea-back .cap { filter: blur(12px); }
  /* v99e 前层压低：前层 z-index:2 本就要盖住盘底，但它雾纱的 blur 溢出会爬进太极区；
     34% 高＋雾纱 7px 把溢出顶线压到太极之下。背层 46%：盘后有云、顶线不越太极。 */
  .hero-sea { height: 34%; opacity: .92; }
  .hero-sea-back { height: 46%; }
  /* v99d 手机端罗盘入场改由 app.js 的 WAAPI 幕布统一淡入（每次首页出现都拉一次）：
     微信内核对 display:none→block 的 CSS 动画重启不可靠，真机上入场要么被首渲风暴吞帧、要么回首页不重播；
     WAAPI 只动 opacity、走合成器，主线程风暴里也照淡。桌面不受影响，仍走 bagua-in 入场。 */
  html[data-motion="full"] .hero-bagua { animation: none; }
  /* v99g 艺术闸门：重艺术（云海/罗盘/星点/光柱）先以 opacity .01 隐形预光栅、文案先现；
     app.js 等帧平静后翻 data-art="ready"，靠 CSS transition 淡入 —— 不用 WAAPI：
     微信内核再老也有 transition，且 opacity/filter 过渡走合成器，主线程风暴里也照淡。
     pending 态 transition:none 保证「藏」是瞬间的，淡入只发生在翻 ready 那一次。 */
  html[data-art="pending"] .hero-sea, html[data-art="pending"] .hero-sea-back,
  html[data-art="pending"] .hero-bagua, html[data-art="pending"] .hero-stars-layer { opacity: .01 !important; transition: none !important; }
  html[data-art="pending"] .hero-rays-layer { filter: blur(5px) opacity(0); transition: none !important; }
  .hero-sea, .hero-sea-back, .hero-bagua, .hero-stars-layer { transition: opacity .7s ease-out; }
  /* ready 态显式补 opacity(1)：与 pending 的 blur(5px) opacity(0) 等长同型，
     老内核不必靠「短列表补 identity」那条推论也能插值，光柱不会退化成跳变。 */
  .hero-rays-layer { filter: blur(5px) opacity(1); transition: filter .7s ease-out; }
  .hero-sea .veil { filter: blur(5px); }
  .hero-sea .contact { filter: blur(6px); }
  .hero-sea .mist, .hero-sea-back .mist { filter: blur(7px); }
  .hero-sea .veil { filter: blur(8px); }
  .hero-sea .glowband, .hero-sea-back .glowband { filter: blur(10px); }
  .hero-sea .puff, .hero-sea-back .puff { filter: blur(3px); }
  .hero-sea .wisp, .hero-sea-back .wisp { filter: blur(4px); }
  /* v85→v95 运动层常驻合成提示：运动已经全部上提到层根，四层都钉住提升，返回后不必回退软重绘 */
  .hero-sea, .hero-sea-back, .sea-ridge-far, .sea-near { will-change: transform; }
}

/* v82 矮屏紧凑：满屏海报在 667/568 这类矮机上不挤出不滚动条 */
@media (max-width: 900px) and (max-height: 700px) {
  .hero-copy { padding: 34px 20px 58px; }
  .hero-copy h1 { font-size: 20px; }
  .hero-copy .lede { font-size: 14px; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  #app { padding: 20px 14px 48px; }
  .card { padding: 20px 16px; }
  .hero-copy { margin: 0; max-width: 100%; padding: 48px 20px 68px; }
  h1 { font-size: 22px; }
  .topbar { padding: 10px 14px; }
  .topbar-right { gap: 10px; }
  .brand-text small { display: none; }
  .report-head { gap: 14px; }
  .yao .seg { width: 58px; }
  .yao.yin .seg { width: 24px; }
  .coin { width: 60px; height: 60px; }
  .insc { font-size: 10px; }
  .coin-slot::after { top: 54px; width: 56px; height: 11px; }
  .insc.t { top: 7px; } .insc.b { bottom: 7px; } .insc.r { right: 6px; } .insc.l { left: 6px; }
  .coins { gap: 14px; padding: 88px 12px 16px; }
  .coin-slot.ping::before { width: 60px; height: 60px; margin: -30px 0 0 -30px; top: 30px; }
  .coin-wrap { perspective: 520px; }
}

/* v82 极小屏顶栏：320 宽下品牌与右侧按钮不再换行成两排 */
@media (max-width: 380px) {
  .topbar { padding: 8px 10px; gap: 8px; }
  .brand-text { font-size: 15px; }
  .brand-text small { display: none; }
  .topbar-right { gap: 8px; }
  #quota-pill { font-size: 10px; padding: 3px 7px; }
  .topbar .linklike { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .coin.toss, .coin.landed, .coins::before, .coin-slot.ping::before,
  .coin-wrap, .coin-slot:not(.still)::after, .coin-slot:not(.still)::before,
  .coins-dust, .coins-dust::before, .coins-dust::after, .coins.settle, .coins.settle::after,
  .coins-mist, .mist-lift, .dust-kick, .coin-slot.ping::after, .coins-mist .wisp, .coins:has(.coin.toss),
  .hero-stars, .hero-stars::before, .hero-stars::after, .ring.comet-spark, .ring.comet-glow,
  .coin.landed .face::before,
  .shicao-step *,
  .hero-scene, .hero-rays-layer, .hero-stars-layer, .hero-stars-layer .star,
  .hero-scene .colossus, .hero-scene .colossus-glow,
  .hero-sea, .hero-sea *, .hero-sea-back, .hero-sea-back *,
  .bagua-r7 .tk { animation: none; }
.sea-ridge-far, .sea-near { animation: none; }
  .yao { animation: none; opacity: 1; }
  /* v95：罗盘拆成六张层根旋转的 svg，降级要连层根一起停，
     停下来就是各环的 0 度基准位——与静态登记图一致。 */
  .hero, .hero-copy > *, .hero-bagua, .hero-bagua *, .hero-glow, .hero-sweep, .hero-scroll, .hero-scroll .chev,
  .bagua, .bagua-r1, .bagua-r2, .bagua-r3, .bagua-r4, .bagua-r5, .bagua-r6,
  .spin-slow, .spin-rev, .spin-rev2, .spin-fwd2, .spin-mid, .spin-comet1, .halo, .bt, .hero-rays, .hero-rays-in, .bagua .tk,
  .ring.dash, .ring.dash2, .ring.comet, .ring.comet-tail { animation: none; }
  * { transition: none !important; }
}
/* ========================================================== SEO 落地页
   服务端渲染的静态页，不依赖脚本即可读完全部内容（web/seo.ts）。
   与产品页共用同一套色板与排版令牌，视觉不分家。 */

.seo-page { max-width: var(--maxw); margin: 0 auto; }

.crumbs {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; margin: 0 0 18px; padding: 0;
  font-size: 13px; color: var(--ink-3);
}
.crumbs li { display: flex; align-items: center; gap: 6px; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs .sep { color: var(--line-2); }

.seo-head { margin-bottom: 22px; }
.seo-head h1 {
  margin: 0 0 6px; font-size: 30px; line-height: 1.3;
  letter-spacing: .02em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
}
.py { font-size: 14px; font-weight: 400; color: var(--ink-3); letter-spacing: .04em; }
.seo-sub { margin: 0; color: var(--ink-2); font-size: 15px; }

.seo-top {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start;
  padding: 20px; margin-bottom: 26px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}

/* 卦画：阳爻一整条，阴爻断成两条 */
.guahua { display: flex; flex-direction: column; gap: 9px; flex: 0 0 auto; padding-top: 4px; }
.guahua .yao { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.guahua .yao-bar { display: block; height: 9px; border-radius: 2px; background: var(--ink); }
.guahua .yang .yao-bar { width: 96px; }
.guahua .yin .yao-bar { width: 43px; }
.guahua .yao em {
  font-style: normal; font-size: 11px; color: var(--ink-3);
  min-width: 14px; order: -1; text-align: right;
}

.facts { flex: 1 1 320px; border-collapse: collapse; font-size: 14.5px; }
.facts caption, .yao-table caption, .seq-table caption, .odds-table caption {
  caption-side: top; text-align: left; padding-bottom: 10px;
  font-size: 12.5px; color: var(--ink-3); line-height: 1.6;
}
.facts th, .facts td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.facts th { width: 8.5em; font-weight: 550; color: var(--ink-2); white-space: nowrap; }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }
.facts a { color: var(--accent); }

.seo-sec { margin-bottom: 30px; }
.seo-sec h2 {
  margin: 0 0 14px; font-size: 20px; letter-spacing: .02em;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.seo-sec h3 { margin: 20px 0 8px; font-size: 16px; color: var(--ink-2); }
.seo-sec p { margin: 0 0 12px; }
.seo-sec ul { margin: 0 0 12px; padding-left: 1.3em; }
.seo-sec li { margin-bottom: 7px; }

.classic {
  margin: 0 0 14px; padding: 14px 18px;
  background: var(--bg-card); border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0; font-size: 16.5px; line-height: 1.95;
}
.classic cite { display: block; margin-top: 8px; font-size: 12.5px; font-style: normal; color: var(--ink-3); }

.table-scroll { overflow-x: auto; }
.yao-table, .seq-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.yao-table th, .yao-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.yao-table th { width: 4.5em; font-weight: 600; color: var(--accent); white-space: nowrap; }
.yao-table td { line-height: 1.9; }
.seq-table th, .seq-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.seq-table thead th { font-size: 12.5px; color: var(--ink-3); font-weight: 550; border-bottom: 1px solid var(--line-2); }
.seq-table tbody th { font-weight: 550; }
.seq-table a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.seq-table a:hover { color: var(--accent); border-color: var(--accent); }

/* 起卦可信页（/qigua）：概率表与分堆取法数表。
   分数那一列刻意不缩小字号 —— 蓍草法的分母很长，缩了反而看不清，
   而那串不好看的分母正是「精确解不是教科书近似值」的证据。 */
.odds-table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-bottom: 14px; }
.odds-table th, .odds-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.odds-table thead th { font-size: 12.5px; color: var(--ink-3); font-weight: 550; border-bottom: 1px solid var(--line-2); }
.odds-table tbody th { font-weight: 550; color: var(--accent); }
.odds-table td:last-child, .odds-table th:last-child { white-space: normal; }
.odds-table tfoot th, .odds-table tfoot td { border-top: 1px solid var(--line-2); border-bottom: 0; font-weight: 600; color: var(--ink); }
.odds-fold { margin: 12px 0; }
.odds-fold summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.odds-fold[open] summary { margin-bottom: 10px; }
.trust-tldr ul { padding-left: 20px; color: var(--ink-2); font-size: 15px; }
.trust-tldr li { margin-bottom: 8px; }

/* 守恒式：这一页里唯一需要被当成公式读的两行，所以给它自己的排版 */
.formula {
  margin: 0 0 14px; padding: 12px 16px; background: var(--bg-card);
  border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
  font-size: 14.5px; line-height: 2; color: var(--ink);
}

.cta-band {
  padding: 24px 22px; margin: 30px 0;
  background: var(--accent-soft); border: 1px solid var(--warn-line); border-radius: var(--radius);
}
.cta-band h2 { margin: 0 0 10px; font-size: 19px; }
.cta-band p { margin: 0 0 12px; font-size: 15px; color: var(--ink-2); }
.cta-actions { margin: 16px 0 10px; }
.cta-band .btn { text-decoration: none; display: inline-block; }

.hexnav { display: grid; gap: 16px; margin-bottom: 30px; }
.hexnav > div {
  padding: 16px 18px; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 12px;
}
.hexnav h2 { margin: 0 0 8px; font-size: 15px; color: var(--ink-3); font-weight: 550; }
.hexnav p { margin: 0; font-size: 15px; line-height: 2; }
.hexnav a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.hexnav a:hover { text-decoration: underline; }
.hexnav .gong { line-height: 2.2; }

.gong-block { margin-bottom: 18px; }
.gong-block h2 { margin: 0 0 8px; font-size: 16px; }
.hexlist { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; }
.hexlist li {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 12px; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 10px; min-width: 108px;
}
.hexlist a { color: var(--ink); text-decoration: none; font-weight: 550; }
.hexlist a:hover { color: var(--accent); }
.hexlist .py { font-size: 11.5px; }

.seo-sec.notice {
  padding: 18px 20px; background: var(--warn-bg);
  border: 1px solid var(--warn-line); border-radius: 12px;
}
.seo-sec.notice h2 { border-bottom-color: var(--warn-line); font-size: 17px; }
.seo-sec.notice li { font-size: 14.5px; color: var(--ink-2); }

/* 注音：ruby 在旧浏览器降级为括号，rp 里的括号默认不显示 */
ruby { ruby-position: over; -webkit-ruby-position: before; }
rt { font-size: 11px; color: var(--ink-2); letter-spacing: 0; font-weight: 400; }
rp { display: none; }

@media (max-width: 640px) {
  .seo-head h1 { font-size: 24px; }
  .seo-top { padding: 16px; gap: 18px; }
  .guahua .yang .yao-bar { width: 76px; }
  .guahua .yin .yao-bar { width: 33px; }
  .facts th { width: 7em; }
}