/*
---
generated_by: Kiro
date: 2026-09-15
core_logic: Reflect 匿名 Natal 首程的移动优先全屏单任务布局；首次认领前主壳由 shell.js
  hidden+inert，页面只保留返回、语言、隐私/娱乐边界。390×844 日期首屏无滚动。
test_record: server/tests/playwright/reflect-anon-onboarding.spec.ts
recent_changes:
  - 2026-09-15 初版：前端 SDD 子批 A。
  - 2026-09-16 全首程响应式断点（用户审计裁决,ui-ux-pro-max §5）：≥768 表单/授权/计算中
    居中窄栏 560(≥1024 600)、仪式页双栏 grid(盘轮|文字,蚀刻/小字/CTA 通栏,CTA 收 340)、
    落地 768-899 收 640;降级 :has() 通栏居中;手机 <768 单列不动。
  - 2026-09-16 城市候选双行展示（用户裁决）：.onboarding-city-main/.onboarding-city-alt——
    localName 原文名主行 + 规范名次行（12.5px/62% 透明度），单行候选观感不变。
  - 2026-09-15 落地页微调（用户裁决）：删 .onboarding-landing-demo-note（靠嘴说文案不用文字担保真实性）；
    新增 .onboarding-landing-maker（by SusurElf 品牌露出，硬编码不进 i18n）。
  - 2026-09-15 落地页「每日 glance」卡（对标 Co–Star）：.onboarding-landing-glance 卡（横幅图
    object-fit:cover + 日期/头行/总结/Do/Don't 胶囊），外框圆角细边框与站内 insight 卡同风格
    （--reflect-line + 14px 圆角），深色模式走既有 --reflect-* 变量。
  - 2026-09-15 用户裁决（date/time 控件点按太多，换下拉总点击最少）：.onboarding-selects
    三列等分（年稍宽 flex-grow:1.3）+ select 对齐 .onboarding-input（同边框/圆角/高度/内边距），
    原生箭头保留（不画自定义箭头），窄屏 flex-wrap 自动换行。
  - 2026-09-15 乱象修复轮（用户裁决「贴图和配文挤在一起/整体乱」）：glance 横幅图换
    sketch 素描资产（图 132px+纸色占位）、配文内边距 14/16/16+行距 8px、行动区发丝线
    分隔；删 .onboarding-landing-insights（虚构 big-three 样例卡）；落地顺序
    tagline→h1→glance→今日天象盘→CTA；.onboarding-landing-chart 加 [hidden] 兜底
    （数据未到/派生失败=隐藏，诚实）。
  - 2026-09-16 设计轮（用户裁决,仅中英预览微调）：glance 卡版画双细线内框(inset 发丝线+
    shadow-flat)；Do/Don't 改双栏各 3 条(✺/✕ 悬挂字符,发丝线分隔)；星盘包 figure
    (图注 landingChartCaption+装饰印章 seal,盘渲染成功才显示)；桌面 ≥900px 双栏对页
    (body[data-onboarding-phase=landing] 撑宽 .onboarding-page 至 980px,左栏文字右栏盘)。
  - 2026-09-16 用户裁决（铺垫文案全删,展示空间留给主图）：删 .onboarding-landing-tag；
    新 .onboarding-landing-headline 行=h1+角落浅灰小字 .onboarding-landing-unlock
    （12px ink-soft,点状下划线,hover 加深;点击=同 CTA）；glance 横幅图 132→160px
    （腾出的头部空间还给主图）。
  - 2026-09-16 安全居中修复（390×844 实测 firstChildTop=-103px,品牌行被永久裁掉）：
    justify-content:center → flex-start+首尾 auto-margin 范式（放得下=居中,放不下=顶部
    起排全可滚）；桌面 grid align-content 补 safe center 渐进增强。
  - 2026-09-16 三句洞察仪式页（用户原型 Demo reflect-proto/big-three.html）：真数据本命盘轮
    （双环 stroke-dashoffset 生长 1.1/1.5s、星座字 38ms stagger、宫位号、行星标记 160ms
    弹入、中心品牌环字）+ Placement 行 + 三行特质（衬线 21px 裸行,替代旧卡片框）+
    蚀刻带（home-pond.webp,clip-path 中心展开+两侧渐隐 mask）+ 事实小字（mono）+
    CTA（加宽字距）。.rise/.lit 二态体系（基态即终态）。
    three-insight 段套用安全居中 auto-margin 范式（铁律,禁裸 justify-content:center）。
--- */

/* 2026-09-16 落地页展示缺陷修复（用户审计裁决）：删孤立注释闭合符（文件头注释 45 行已闭合,
   46 行残留裸闭合符——CSS 解析器遇它触发错误恢复,吞掉紧随的 .onboarding-page 主规则
   display:flex/flex:1 1 0%/overflow:hidden,导致落地页失去视口高度约束、内容超高顶出）；
   900 断点补 .onboarding-landing{max-width:none}（否则双栏 grid 仍卡 768 断点 640px,
   盘 400px 横向溢出 137px）。 */
.onboarding-page {
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--reflect-ink, #111827);
}
.onboarding-page[hidden], .onboarding-step[hidden],
.onboarding-error[hidden], .onboarding-selection[hidden],
.onboarding-city-results[hidden], .onboarding-email[hidden],
#onboarding-code-wrap[hidden], #onboarding-back[hidden] { display: none !important; }
.onboarding-tools {
  flex: none;
  min-height: 56px;
  padding: max(8px, env(safe-area-inset-top)) 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.onboarding-icon-btn, .onboarding-lang {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--reflect-ink-soft, #64748b);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.onboarding-icon-btn { font-size: 24px; }
.onboarding-lang { margin-left: auto; padding: 0 12px; }
.onboarding-icon-btn:hover, .onboarding-lang:hover { background: var(--reflect-moss-wash, #eef2ee); }
.onboarding-main {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 8px 20px;
}
.onboarding-step {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
}
.onboarding-step h1 {
  margin: 0 0 14px;
  font-family: var(--reflect-serif, Georgia, serif);
  font-size: clamp(30px, 8vw, 44px);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 600;
  outline: none;
}
.onboarding-step > p { margin: 0; line-height: 1.5; color: var(--reflect-ink-soft, #64748b); }
.onboarding-kicker, .onboarding-axis {
  font-family: var(--reflect-mono, ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  color: var(--reflect-rust, #9a4f35);
}
.onboarding-label { font-size: 13px; font-weight: 650; }
.onboarding-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  padding: 0 15px;
  border: 1px solid var(--reflect-line, #d1d5db);
  border-radius: 14px;
  background: var(--reflect-paper-light, #fff);
  color: var(--reflect-ink, #111827);
  font: inherit;
  font-size: 18px;
}
.onboarding-input:focus, .onboarding-primary:focus-visible, .onboarding-auth:focus-visible,
.onboarding-icon-btn:focus-visible, .onboarding-lang:focus-visible, .onboarding-city-option:focus-visible {
  outline: 2px solid var(--reflect-rust, #9a4f35);
  outline-offset: 2px;
}
/* 出生下拉组（2026-09-15 用户裁决：date/time 控件改五下拉，总点击最少）：
   三列等分（年稍宽）、两列等分；select 样式对齐 .onboarding-input（同边框/圆角/高度/内边距），
   appearance 不动保留原生箭头（不画自定义箭头，少代码少 bug）；窄屏自动换行。 */
.onboarding-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.onboarding-select {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  min-height: 54px;
  padding: 0 15px;
  border: 1px solid var(--reflect-line, #d1d5db);
  border-radius: 14px;
  background: var(--reflect-paper-light, #fff);
  color: var(--reflect-ink, #111827);
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}
#birth-year { flex-grow: 1.3; }
.onboarding-primary, .onboarding-auth {
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 14px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.onboarding-primary {
  margin-top: 8px;
  border: 1px solid var(--reflect-moss, #526b56);
  background: var(--reflect-moss, #526b56);
  color: #fff;
}
.onboarding-primary:disabled { opacity: .48; cursor: not-allowed; }
.onboarding-auth-buttons, .onboarding-email, #onboarding-code-wrap { display: flex; flex-direction: column; gap: 10px; }
/* 2026-09-16 登录墙改版：Apple/Google 降级为次选并排小按钮 + 分隔线 + 隐私说明；
   标准图标按钮（对齐 Safari 原生登录）：图标+文字 flex 居中、图标统一 18px 左对齐，
   Apple=黑底白 logo、Google=白底官方四色 G（mark 禁改色，path 自带 fill 不覆写） */
.onboarding-auth-buttons--secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.onboarding-auth-buttons--secondary .onboarding-auth { min-height: 46px; font-size: 15px; }
.onboarding-auth-buttons--secondary .onboarding-auth svg { width: 18px; height: 18px; flex: none; }
.onboarding-auth {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--reflect-line, #d1d5db);
  background: var(--reflect-paper-light, #fff);
  color: var(--reflect-ink, #111827);
}
.onboarding-auth--apple { background: #000; border-color: #000; color: #fff; }
.onboarding-auth--apple svg { fill: #fff; }
.onboarding-auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 2px;
  color: var(--reflect-ink-soft, #6b7280);
  font-size: 13px;
}
.onboarding-auth-or::before, .onboarding-auth-or::after {
  content: ''; flex: 1; height: 1px;
  background: var(--reflect-hairline, #e5e7eb);
}
.onboarding-privacy-note {
  margin: 12px 0 0;
  color: var(--reflect-ink-soft, #6b7280);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}
.onboarding-city-results {
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--reflect-line, #d1d5db);
  border-radius: 14px;
  background: var(--reflect-paper-light, #fff);
}
.onboarding-city-option {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--reflect-hairline, #e5e7eb);
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.onboarding-city-option:last-child { border-bottom: 0; }
.onboarding-city-option:hover { background: var(--reflect-moss-wash, #eef2ee); }
/* 双行候选（2026-09-16 localName）：主行=与查询同文字的原文名，次行=规范名 displayName */
.onboarding-city-main { display: block; }
.onboarding-city-alt {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  opacity: 0.62;
}
.onboarding-selection { font-weight: 650; color: var(--reflect-moss, #526b56) !important; }
.onboarding-status { min-height: 20px; font-size: 13px; }
.onboarding-error { color: var(--reflect-rust, #9a4f35) !important; font-size: 14px; }
.onboarding-centered { align-items: center; text-align: center; }
.onboarding-orbit {
  width: 64px;
  height: 64px;
  margin-bottom: 12px;
  border: 1px solid var(--reflect-line, #d1d5db);
  border-top-color: var(--reflect-rust, #9a4f35);
  border-radius: 50%;
  animation: onboarding-orbit 1.8s linear infinite;
}
@keyframes onboarding-orbit { to { transform: rotate(360deg); } }
.onboarding-insights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.onboarding-insights li {
  padding: 14px 16px;
  border: 1px solid var(--reflect-line, #d1d5db);
  border-radius: 14px;
  background: var(--reflect-paper-light, #fff);
}
.onboarding-insights p { margin: 6px 0 0; line-height: 1.5; }
.onboarding-insights--compact { gap: 8px; }
.onboarding-insights--compact li { padding: 10px 12px; }
.onboarding-insights--compact p { font-size: 14px; line-height: 1.4; }
.onboarding-footer {
  flex: none;
  padding: 8px 16px max(14px, env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--reflect-ink-soft, #64748b);
}
.onboarding-footer a { color: inherit; }

@media (min-width: 768px) {
  .onboarding-main { padding-inline: 28px; }
  .onboarding-step { gap: 16px; }
}
/* 2026-09-18 拍板：全站永不执行 prefers-reduced-motion（AGENTS.md 红线），原降级块已删 */

/* ---- 落地铺垫页（landing pre-phase,2026-09-15 竞品范式;2026-09-16 设计轮重排）----
   移动：居中单列 品牌→品类→h1→glance 卡→figure(盘+图注+印章)→CTA→安静登录链接。
   桌面(≥900px)：双栏对页——左栏文字流+卡+CTA,右栏星盘 figure 垂直居中。
   视觉=D26 paper/ink/moss 令牌 + 版画印刷细节：卡双细线内框(inset 发丝线)、
   Do ✺ / Don't ✕ 双栏各 3 条、图注 mono 小号大写、印章盘渲染成功后盖在盘右上。 */
.onboarding-landing {
  /* 安全居中（auto-margin 范式，2026-09-16 实证修复）：原 justify-content:center 在内容
     超出容器时把品牌行顶到滚动起点之上（firstChildTop=-103px,滚不回去=永久裁掉）；
     改 flex-start+首尾 auto margin：放得下=整体垂直居中，放不下=从顶部起排、全部可滚到。 */
  justify-content: flex-start;
  gap: 10px;
  text-align: center;
}
.onboarding-landing > :first-child { margin-top: auto; }
.onboarding-landing > :last-child { margin-bottom: auto; }
.onboarding-landing-brand {
  margin: 0;
  font-family: var(--reflect-serif, Georgia, serif);
  font-size: 32px;
  letter-spacing: .06em;
  color: var(--reflect-ink, #111827);
}
.onboarding-landing-maker {
  margin: 0;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--reflect-ink-soft, #64748b);
}
/* 标题行=h1+角落解锁提示（2026-09-16 用户裁决：铺垫全删,弱引导不抢主图注意力） */
.onboarding-landing-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 10px;
  margin: 2px auto 0;
  max-width: 30ch;
}
.onboarding-landing h1 {
  font-size: clamp(21px, 5.6vw, 26px);
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0;
  max-width: 22ch;
}
.onboarding-landing-unlock {
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--reflect-ink-soft, #64748b);
  opacity: .8;
  cursor: pointer;
  text-decoration: underline dotted rgba(100, 116, 139, .55);
  text-underline-offset: 3px;
}
.onboarding-landing-unlock:hover,
.onboarding-landing-unlock:focus-visible {
  opacity: 1;
  color: var(--reflect-ink, #111827);
}
/* 每日 glance 卡：外 1px 线 + 3px 纸留白 + 内发丝线 = 版画「图版」双细线框 */
.onboarding-landing-glance[hidden] { display: none; } /* display:flex 会顶掉 UA [hidden],显式兜住 */
.onboarding-landing-glance {
  margin: 8px auto 0;
  width: min(100%, 42ch);
  flex: none; /* 落地列 flex 收缩会压扁卡片再被自身 overflow:hidden 裁掉配文(2026-09-15 实证 clientH 152 vs scrollH 317) */
  overflow: hidden;
  border: 1px solid var(--reflect-line, #d1d5db);
  border-radius: 14px;
  background: var(--reflect-paper-light, #fff);
  box-shadow:
    inset 0 0 0 3px var(--reflect-paper-light, #fff),
    inset 0 0 0 4px var(--reflect-hairline, rgba(24, 32, 27, .13)),
    var(--reflect-shadow-flat, 0 4px 16px rgba(17, 24, 20, .08));
  text-align: left;
}
.onboarding-landing-glance-img {
  display: block;
  width: 100%;
  height: 160px; /* 2026-09-16 铺垫删除腾出头部,高度还给主图（原 132px） */
  object-fit: cover;
  background: var(--reflect-paper, #f5f2ec); /* 图片加载期占位,不闪白 */
}
.onboarding-landing-glance-body {
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.onboarding-landing-glance-date {
  margin: 0;
  font-family: var(--reflect-mono, ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  color: var(--reflect-rust, #9a4f35);
}
.onboarding-landing-glance-head {
  margin: 0;
  font-family: var(--reflect-serif, Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--reflect-ink, #111827);
}
.onboarding-landing-glance-sum {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--reflect-ink, #111827);
}
/* Do/Don't 双栏各 3 条（2026-09-16 用户裁决,对标 Co–Star）：发丝线分隔上文；
   栏头小胶囊标签;条目悬挂字符 ✺(moss)/✕(rust)。 */
.onboarding-landing-glance-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--reflect-hairline, rgba(24, 32, 27, .13));
}
.onboarding-landing-glance-colhead { margin: 0 0 7px; }
.onboarding-landing-glance-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.onboarding-landing-glance-list li {
  position: relative;
  padding-left: 15px;
  font-size: 13.5px;
  line-height: 1.42;
  color: var(--reflect-ink, #111827);
}
.onboarding-landing-glance-list li::before {
  content: "✺";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 10px;
  line-height: 1.9;
  color: var(--reflect-moss, #526b56);
}
.onboarding-landing-glance-list--dont li::before {
  content: "✕";
  color: var(--reflect-rust, #9a4f35);
}
.onboarding-landing-glance-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--reflect-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--reflect-moss, #526b56);
  color: #fff;
}
.onboarding-landing-glance-tag--dont {
  background: transparent;
  border: 1px solid var(--reflect-line, #d1d5db);
  color: var(--reflect-ink-soft, #64748b);
}
/* figure：盘 + 图注 + 印章。印章绝对定位盖在盘右上,纯装饰,随盘渲染成功才显示。 */
.onboarding-landing-figure {
  position: relative;
  margin: 6px auto 0;
  flex: none;
}
.onboarding-landing-chart {
  margin: 0 auto;
  flex: none; /* 不参与落地列 flex 收缩(内容超高时由 .onboarding-landing 内滚,盘不压扁) */
}
.onboarding-landing-chart[hidden] { display: none; } /* 数据未到/派生失败=隐藏（诚实） */
.onboarding-landing-chart svg {
  display: block;
  width: clamp(200px, 46vh, 300px);
  height: auto;
  margin: 0 auto;
}
.onboarding-landing-chart:empty { display: none; }
.onboarding-landing-chart-caption {
  margin: 10px 0 0;
  text-align: center;
  font-family: var(--reflect-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--reflect-ink-soft, #64748b);
}
.onboarding-landing-chart-caption[hidden],
.onboarding-landing-seal[hidden] { display: none; }
.onboarding-landing-seal {
  position: absolute;
  top: -8px;
  right: -2px;
  width: 72px;
  height: 72px;
  color: var(--reflect-moss, #526b56);
  opacity: .88;
  transform: rotate(-9deg);
  pointer-events: none;
  font-family: var(--reflect-mono, ui-monospace, monospace);
}
.onboarding-landing-cta { min-width: min(100%, 320px); margin-top: 14px; }
.onboarding-landing-signin {
  margin-top: 2px;
  padding: 8px 12px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  color: var(--reflect-ink-soft, #64748b);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.onboarding-landing-signin:hover { color: var(--reflect-ink, #111827); }
.onboarding-landing-signin:focus-visible {
  outline: 2px solid var(--reflect-rust, #9a4f35);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 桌面双栏对页（≥900px）：左栏文字流(左对齐),右栏 figure。fr 轨道撑满,justify-content 无游离空间。 */
@media (min-width: 900px) {
  body[data-onboarding-phase="landing"] .onboarding-page { max-width: 980px; }
  /* 2026-09-16 桌面 900–1023 表单/仪式页窄栏补档：基准 560px 卡死表单（1024 档才放宽 720）
     与仪式（768–899 档 800px 在此区间失效），900–1023 桌面窗口观感窄；此处补齐——
     表单页 720px、仪式页 880px，与 ≥1024 档同值（该档规则在后文 1024 断点，值相同无覆盖问题）。 */
  body[data-onboarding-phase]:not([data-onboarding-phase="landing"]):not([data-onboarding-phase="three-insight"]) .onboarding-page { max-width: 720px; }
  body[data-onboarding-phase="three-insight"] .onboarding-page { max-width: 880px; }
  body[data-onboarding-phase="landing"] .onboarding-landing { max-width: none; } /* 2026-09-16：覆盖 768 断点 640px（该断点在文件后部,特异性加 body[] 前缀稳赢）,双栏 grid 真正用满 980px,盘不再横向溢出 */
  .onboarding-landing {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-rows: repeat(7, auto); /* 7 个左栏子元素=7 行;figure 才能 1/-1 跨满 */
    column-gap: clamp(28px, 5vw, 64px);
    align-content: center;
    align-content: safe center; /* 矮窗溢出时不再裁掉顶部行;不支持 safe 的浏览器回落上一行 center */
    align-items: center;
    justify-content: stretch;
    text-align: left;
    padding: 20px 8px;
  }
  .onboarding-landing > :first-child, .onboarding-landing > :last-child { margin-top: 0; margin-bottom: 0; }
  .onboarding-landing > * { grid-column: 1; }
  .onboarding-landing-figure {
    grid-column: 2;
    grid-row: 1 / -1;
    margin: 0 auto;
  }
  .onboarding-landing-headline { justify-content: flex-start; max-width: none; }
  .onboarding-landing h1 { margin-left: 0; max-width: none; }
  .onboarding-landing-glance { margin-left: 0; margin-right: 0; width: 100%; max-width: 46ch; }
  .onboarding-landing-glance-img { height: 168px; }
  .onboarding-landing-chart svg { width: clamp(300px, 44vh, 400px); max-width: 100%; } /* 2026-09-16：max-width:100% 兜底 900-1024 中间档右列窄于 44vh 盘时收缩,杜绝横向溢出 */
  .onboarding-landing-seal { width: 92px; height: 92px; top: -14px; right: -6px; }
  .onboarding-landing-cta { max-width: 360px; }
}

/* ---- 三句洞察仪式页（three-insight ritual,2026-09-16 用户原型 Demo big-three.html）----
   视觉=D26 令牌纸墨 + 版印刷细节。时序：盘轮双环描边生长(0s)→星座字 38ms stagger→宫位号→
   行星标记 160ms 弹入→中心品牌环字(1.35s)→Placement 行(1.7s)→三行特质(1.95s 起 180ms)→
   蚀刻带 clip-path 中心展开(2.52s)→事实小字(2.75s)→CTA(2.95s)。全部由 JS 加 .lit 驱动。 */
.onboarding-ritual {
  /* 安全居中（铁律,2026-09-16 沿用 landing 同款实证修复）：flex-start+首尾 auto-margin——
     放得下=整体垂直居中,放不下=顶部起排全部可滚到（390×844 与 320px 窄屏不裁切）。 */
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: 11px; /* 390×844 全内容收进一屏（盘轮+特质+蚀刻+小字+CTA）；窄屏照旧顶部起排可滚 */
}
.onboarding-ritual > :first-child { margin-top: auto; }
.onboarding-ritual > :last-child { margin-bottom: auto; }
/* 仪式页 h1 视觉隐藏（sr-only）：首焦点/读屏语义保留,视觉交给盘轮主图（对齐 Demo 无标题） */
.onboarding-ritual-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  outline: none;
}
/* 入场二态：.rise 基态（隐）→ JS 加 .lit（显+过渡）。值逐字来自 Demo。 */
.onboarding-ritual .rise {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(5px);
}
.onboarding-ritual .rise.lit {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity .55s var(--reflect-ease), transform .55s var(--reflect-ease), filter .55s var(--reflect-ease);
}

/* === 本命盘（chart-renderer.js 渲染,与落地页「今日天象盘」同渲染器;2026-09-16 用户
   「加更多真实元素」裁决换渲染器,自绘动画类随之退役,容器级 .rise/.lit 淡入保留） === */
.onboarding-wheel {
  width: min(76vw, 300px);
  flex: none;
}
.onboarding-wheel[hidden] { display: none; }
.onboarding-wheel svg { display: block; width: 100%; height: auto; }

/* === 三 Placement 行（☉ Gemini ☽ Pisces ↑ Virgo） === */
.onboarding-placements {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  align-items: baseline;
  margin: 0;
  font-family: var(--reflect-mono, ui-monospace, monospace);
  font-size: 13.5px;
  letter-spacing: .18em;
  color: var(--reflect-ink-soft, #4c554d);
}
.onboarding-placements[hidden] { display: none; } /* display:flex 会顶掉 UA [hidden],显式兜住 */
.onboarding-placements b { font-weight: 400; color: var(--reflect-ink, #18201b); }

/* === 三行特质：衬线裸行（替代旧卡片框;data-insight-axis/aria-live 渐进语义不变） === */
.onboarding-traits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--reflect-serif, Georgia, serif);
  font-size: clamp(18px, 5.4vw, 21px);
  line-height: 1.7;
  color: var(--reflect-ink, #18201b);
}
.onboarding-traits li {
  padding: 2px 6px;
  border: 0;
  background: none;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(5px);
}
.onboarding-traits li[hidden] { display: none; } /* 渐进显示合同：未点到的一句不占位 */
.onboarding-traits li.lit {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity .55s var(--reflect-ease), transform .55s var(--reflect-ease), filter .55s var(--reflect-ease);
}
.onboarding-traits p { margin: 0; }

/* === 蚀刻带：站内自有 sketch 馆藏（home-pond）,clip-path 由中心向两侧展开+左右渐隐 === */
.onboarding-etching {
  width: 100%;
  height: 84px;
  margin: 2px 0 0;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(0 50% 0 50%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}
.onboarding-etching.lit {
  opacity: .9;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s var(--reflect-ease), opacity .9s var(--reflect-ease);
}
.onboarding-etching img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
}
.onboarding-etching.lit img { transform: scale(1); transition: transform 1.6s var(--reflect-ease); }

/* === 事实小字（mono,事实陈述不夸） === */
.onboarding-chart-footnote {
  margin: 0;
  max-width: 34em;
  font-family: var(--reflect-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: .16em;
  line-height: 1.9;
  text-align: center;
  color: var(--reflect-ink-soft, #4c554d);
  opacity: .82;
}

/* === CTA：沿用 .onboarding-primary 苔绿底,加宽字距对齐 Demo 版画气质 === */
.onboarding-ritual-cta {
  letter-spacing: .3em;
  text-indent: .3em;
  border-radius: 10px;
}

/* === 首程响应式断点（2026-09-16 全链适配,ui-ux-pro-max §5：mobile-first/768/1024/行宽控制/容器一致） ===
   手机(<768)=现行单列（390×844 实证不动）。iPad/桌面补两档：
   ≥768 表单/计算中/授权/认领=居中窄栏 560px（城市输入框不再拉满贴边）;仪式页=双栏
   （左=本命盘轮垂直居中,右=kicker/Placement/三行特质左对齐控测行宽;蚀刻+小字通栏,
   CTA 居中收 340）;落地 768-899 单列收 640 居中（≥900 双栏对页已有不动）。
   ≥1024 仪式页放宽（880px/盘 380px/列距 64px/蚀刻 104px）,表单窄栏 600。
   降级合同:盘轮 hidden（旧缓存无 chart）时 :has() 把文字段通栏居中,不留空左列。 */
@media (min-width: 768px) {
  .onboarding-step:not(.onboarding-landing):not(.onboarding-ritual) {
    max-width: 560px;
    margin-inline: auto;
  }
  /* 2026-09-16 桌面中间档（768–899px）窄列修复：.onboarding-page 基准 max-width:560px 未被本断点放宽，
     landing 的 640px 意图被父级卡死成 504px 单列（glance 卡 + 盘全挤窄列,桌面窗口观感窄且乱）。
     这里把 landing 页容器放宽到 720px（640 列 + padding 余量）。
     注意：平铺为独立 media（768–899 交集）而非嵌套——900 断点在文件前部 522 行,若不加 max-width 上限,
     同特异性规则会被本文件后部位置覆盖,把 ≥900 的 980px 双栏也压成 664px（2026-09-16 实测踩坑）。 */
  @media (min-width: 768px) and (max-width: 899px) {
    body[data-onboarding-phase="landing"] .onboarding-page { max-width: 720px; }
    /* 仪式页同根因修复：ritual step 设计 800px 双栏，父级 .onboarding-page 560px 卡死成 504px
       窄栏（盘+文字挤单列）；此处放宽容器让 ritual 真正双栏。≥900 走 900 断点无此档（ritual
       在 ≥900 由下方 1024 档 880px 接管）。 */
    body[data-onboarding-phase="three-insight"] .onboarding-page { max-width: 800px; }
  }
  .onboarding-landing { max-width: 640px; margin-inline: auto; }

  .onboarding-ritual {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 48px);
    row-gap: 16px;
    align-content: center;
    align-content: safe center;
    justify-content: center;
    text-align: left;
    max-width: 800px;
    margin-inline: auto;
  }
  /* 安全居中范式在 grid 下换轨:首尾 auto-margin 归零,safe center 兜溢出 */
  .onboarding-ritual > :first-child,
  .onboarding-ritual > :last-child { margin-top: 0; margin-bottom: 0; }
  .onboarding-ritual .onboarding-kicker { grid-column: 2; grid-row: 1; align-self: end; }
  .onboarding-ritual .onboarding-placements {
    grid-column: 2; grid-row: 2;
    justify-content: flex-start;
  }
  .onboarding-ritual .onboarding-traits { grid-column: 2; grid-row: 3; text-align: left; }
  .onboarding-ritual .onboarding-wheel {
    grid-column: 1; grid-row: 1 / span 3;
    align-self: center;
    width: 100%;
    max-width: 340px;
  }
  .onboarding-ritual .onboarding-etching { grid-column: 1 / -1; grid-row: 4; height: 96px; }
  .onboarding-ritual .onboarding-chart-footnote { grid-column: 1 / -1; grid-row: 5; text-align: center; }
  .onboarding-ritual .onboarding-error,
  .onboarding-ritual #onboarding-preview-retry { grid-column: 1 / -1; justify-self: center; }
  .onboarding-ritual .onboarding-ritual-cta {
    grid-column: 1 / -1; grid-row: 6;
    justify-self: center;
    width: min(100%, 340px);
  }
  /* 降级（盘轮 hidden）:文字段通栏居中,不留空左列 */
  .onboarding-ritual:has(.onboarding-wheel[hidden]) .onboarding-kicker,
  .onboarding-ritual:has(.onboarding-wheel[hidden]) .onboarding-placements,
  .onboarding-ritual:has(.onboarding-wheel[hidden]) .onboarding-traits {
    grid-column: 1 / -1;
    justify-content: center;
    justify-self: center;
    text-align: center;
  }
}
@media (min-width: 1024px) {
  /* 2026-09-16 桌面表单页窄栏修复：.onboarding-page 基准 560px 未被 ≥1024 放宽（原只放宽 step 到 600，
     父级仍 560 卡死——用户从 landing 980px 双栏点进表单骤缩成 504px 窄条，观感「桌面窄+乱」）。
     这里把表单/流程页容器放宽到 720px，排除 landing（980px 专规则）与仪式页 three-insight（880px
     专规则）。不用 :has() 判定——hidden step 也在 DOM，:has 会把所有页误判为含 ritual。 */
  body[data-onboarding-phase]:not([data-onboarding-phase="landing"]):not([data-onboarding-phase="three-insight"]) .onboarding-page { max-width: 720px; }
  body[data-onboarding-phase="three-insight"] .onboarding-page { max-width: 880px; }
  .onboarding-step:not(.onboarding-landing):not(.onboarding-ritual) { max-width: 640px; }
  .onboarding-ritual { max-width: 880px; column-gap: 64px; }
  .onboarding-ritual .onboarding-wheel { max-width: 380px; }
  .onboarding-ritual .onboarding-etching { height: 104px; }
}
/* 2026-09-18 拍板：全站永不执行 prefers-reduced-motion（AGENTS.md 红线），原降级块已删 */