/* aquora.cn 首页 · 终稿「玻璃与光」
   把 App 自己的 UI 语言放大成网页:海绿地、玻璃卡(28px 圆角 / 1px 边 / 内高光)、
   圆体藏青标题、柔光图标、薄荷玻璃胶囊导航。主体站在「昼」(App 的样子),
   只有「刷机预报」一段是藏青玻璃的「夜」,搁在海绿地上、四周一条黄昏过渡带。
   色:--sea #61A88A(App 全局底) --ink #1D4354(标题/主按钮) --mint #C9F1E4(Tab 栏/胶囊)
      --deep #084456(图标底/夜段) --sun #F5C842(柔光图标) 玻璃 = 白 14–22%。
   零境外资源;字体走 cn-fonts.css 的自托管栈,正文/标题用系统圆体。 */

/* ===== 主题令牌 =====
   昼(默认)在 :root;夜在 :root[data-theme="dark"] 整套覆盖;@media (prefers-color-scheme: dark) 只作无 data-theme 时的兜底镜像
   (预绘脚本永远会钉上 data-theme,镜像只为无 JS)。规则:任何颜色都先在 :root 有昼值,再在夜块覆盖——组件只读令牌,不写裸色。
   夜不是反色:取 reserve/人格页已有的「夜的一面」——深海信纸地 #0E2C3C→#0B2431→#071B26、奶油墨 #F8F4EC、薄雾绿标签;
   手机(自带海绿)、人格辉光、蜡封、刷机预报夜卡的薄荷文字昼夜不变。 */
:root {
  color-scheme: light;
  /* 品牌常量(昼夜不变):手机屏底、表盘渐变、蜡封仍取这些 */
  --sea: #61A88A;
  --sea-hi: #6DB294;
  --sea-lo: #569D80;
  --sea-deep: #4F9578;          /* 页脚带:亮度 .12,白字 6.0 / 薄荷 4.9(C-03) */
  --mint: #C9F1E4;
  --deep: #084456;
  --sun: #F5C842;
  --navy: #1D4354;
  --cream: #F8F4EC;
  /* 地 */
  --ground: var(--sea);
  --ground-grad: linear-gradient(180deg, var(--sea-hi) 0%, var(--sea) 30%, var(--sea-lo) 100%);
  --mist-c: rgba(201, 241, 228, .9);       /* .mist 光斑中心色(元素自身再乘 opacity .5/.34/.28) */
  --halo-c: rgba(201, 241, 228, .55);      /* 首屏手机后的光晕 */
  /* 墨 */
  --ink: #1D4354;
  --ink-text: #0F3446;          /* 正文层:裸海绿 4.67 / 玻璃 16% 5.6,AA 达标(C-01) */
  --ink-70: rgba(29, 67, 84, .72);
  --ink-50: #143846;            /* 小标签:实心藏青,玻璃 16% 5.2 / 首屏 5.9(C-02) */
  --ink-30: rgba(29, 67, 84, .30);
  --label: var(--ink-50);       /* 节眉 / 事实标签 / 轴名 */
  --muted: var(--ink-50);       /* 次级小字:首屏注、细则、四轴词、方卡副题 */
  --muted-bare: #0B2733;        /* 裸地上的次级小字(网格脚注):裸海绿 4.9(C-02) */
  --text-bare: #0B2E3F;         /* 裸地上的正文(声线副题) */
  --dim: rgba(29, 67, 84, .38); /* 悬挂句号的淡墨 */
  /* 玻璃 */
  --glass: rgba(255, 255, 255, .16);
  --glass-hi: rgba(255, 255, 255, .22);
  --glass-line: rgba(255, 255, 255, .30);
  --glass-rule: rgba(255, 255, 255, .22);   /* 卡内分隔线,弱于外框(C-10) */
  --hl: rgba(255, 255, 255, .38);           /* 卡顶 1px 内高光 */
  --hl-mid: rgba(255, 255, 255, .35);       /* 16 型格顶高光 */
  --hl-sm: rgba(255, 255, 255, .30);        /* 胶囊 / 方卡顶高光 */
  --card-shadow: 0 24px 60px rgba(8, 68, 86, .14);
  --card-shadow-hover: 0 34px 70px rgba(8, 68, 86, .18);
  --cell-hover: rgba(255, 255, 255, .28);
  --pill-bg: rgba(255, 255, 255, .28);      /* 裸地上的节眉胶囊 */
  --pill-line: var(--glass-line);
  --code-bg: var(--glass-hi);               /* 字母代码胶囊 */
  --code-line: transparent;
  --code-ink: var(--ink);
  /* 页眉胶囊 + 主题开关 */
  --nav-bg: rgba(201, 241, 228, .86);
  --nav-line: rgba(255, 255, 255, .55);
  --nav-hl: rgba(255, 255, 255, .70);
  --nav-shadow: 0 10px 30px rgba(8, 68, 86, .12);
  --nav-hover: rgba(255, 255, 255, .55);
  --tog-bg: rgba(255, 255, 255, .45);
  --tog-line: rgba(255, 255, 255, .65);
  --tog-hover: rgba(255, 255, 255, .70);
  --sun-d: block;                           /* 开关图标:昼显太阳、夜显月亮 */
  --moon-d: none;
  /* 按钮 */
  --btn-bg: var(--ink);
  --btn-bg-hover: var(--ink);
  --btn-ink: #fff;
  --btn-shadow: 0 12px 28px rgba(29, 67, 84, .28);
  --btn-shadow-hover: 0 16px 34px rgba(29, 67, 84, .32);
  --ghost-bg: rgba(255, 255, 255, .28);
  --ghost-line: var(--glass-line);
  --ghost-shadow-hover: 0 10px 24px rgba(8, 68, 86, .14);
  --focus: #fff;
  /* 夜段 / 页脚 */
  --dusk-band: linear-gradient(180deg, rgba(8, 68, 86, 0) 0%, rgba(8, 68, 86, .16) 34%, rgba(8, 68, 86, .16) 66%, rgba(8, 68, 86, 0) 100%);
  --night-bg: linear-gradient(160deg, rgba(8, 68, 86, .92), rgba(20, 56, 70, .96));
  --night-shadow: 0 30px 70px rgba(8, 68, 86, .35);
  --foot-band: linear-gradient(180deg, rgba(79, 149, 120, 0) 0%, var(--sea-deep) 100%);
  --foot-text: var(--ink-70);
  --foot-link: var(--ink);
  --foot-brand: var(--ink);
  --foot-dot: var(--ink-30);
  /* 尺寸 */
  --r-card: 28px;
  --r-phone: 44px;
  --w: 1120px;
  --pad: clamp(18px, 4vw, 40px);
  --gap: clamp(64px, 9vw, 120px);
}
/* ---- 夜 ---- 两处令牌必须逐字相同(tools 里没有预处理器,靠 QA 对拍) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0B2431;
  --ground-grad: linear-gradient(180deg, #0E2C3C 0%, #0B2431 30%, #071B26 100%);
  --mist-c: rgba(97, 168, 138, .16);       /* × 元素 opacity .5 → 有效峰值 .08 */
  --halo-c: rgba(97, 168, 138, .08);
  --ink: #8CCBB2;                          /* 夜面惯例=藏青底上的品牌绿(人格页/App 深色模式),标题取亮一档的绿 */
  --ink-text: #6EB99E;
  --ink-70: #6EB99E;
  --ink-50: #61A88A;
  --ink-30: rgba(97, 168, 138, .35);
  --label: #61A88A;
  --muted: #61A88A;
  --muted-bare: #61A88A;
  --text-bare: #6EB99E;
  --dim: rgba(97, 168, 138, .40);
  --glass: rgba(255, 255, 255, .06);
  --glass-hi: rgba(255, 255, 255, .08);
  --glass-line: rgba(97, 168, 138, .18);
  --glass-rule: rgba(97, 168, 138, .14);
  --hl: rgba(255, 255, 255, .05);
  --hl-mid: rgba(255, 255, 255, .05);
  --hl-sm: rgba(255, 255, 255, .05);
  --card-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  --card-shadow-hover: 0 34px 70px rgba(0, 0, 0, .45);
  --cell-hover: rgba(255, 255, 255, .12);
  --pill-bg: rgba(97, 168, 138, .12);
  --pill-line: rgba(97, 168, 138, .24);
  --code-bg: rgba(97, 168, 138, .10);
  --code-line: rgba(97, 168, 138, .40);
  --code-ink: #8CCBB2;
  --nav-bg: rgba(255, 255, 255, .06);
  --nav-line: rgba(97, 168, 138, .22);
  --nav-hl: rgba(255, 255, 255, .05);
  --nav-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --nav-hover: rgba(255, 255, 255, .10);
  --tog-bg: rgba(255, 255, 255, .06);
  --tog-line: rgba(97, 168, 138, .30);
  --tog-hover: rgba(255, 255, 255, .14);
  --sun-d: none;
  --moon-d: block;
  --btn-bg: #61A88A;                       /* 夜面主按钮 = 海绿底 + 深海字(App 图标配色反相),5.7:1 */
  --btn-bg-hover: #6EB99E;
  --btn-ink: #0B2431;
  --btn-shadow: 0 12px 28px rgba(0, 0, 0, .35);
  --btn-shadow-hover: 0 16px 34px rgba(0, 0, 0, .42);
  --ghost-bg: rgba(97, 168, 138, .10);
  --ghost-line: rgba(97, 168, 138, .40);
  --ghost-shadow-hover: 0 10px 24px rgba(0, 0, 0, .30);
  --focus: #C9F1E4;
  --dusk-band: none;
  --night-bg: linear-gradient(160deg, #163C4E, #123544);   /* 夜卡仍是藏青,只比地亮一档,才从深海地里分离出来 */
  --night-shadow: 0 30px 70px rgba(0, 0, 0, .45);
  --foot-band: linear-gradient(180deg, rgba(7, 27, 38, 0) 0%, #071B26 100%);
  --foot-text: #61A88A;
  --foot-link: #6EB99E;
  --foot-brand: #6EB99E;   /* 与导航链接同档:白天版的两档层级(链接+品牌 / 信息行) */
  --foot-dot: rgba(97, 168, 138, .40);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0B2431;
    --ground-grad: linear-gradient(180deg, #0E2C3C 0%, #0B2431 30%, #071B26 100%);
    --mist-c: rgba(97, 168, 138, .16);
    --halo-c: rgba(97, 168, 138, .08);
    --ink: #8CCBB2;                          /* 夜面惯例=藏青底上的品牌绿(人格页/App 深色模式),标题取亮一档的绿 */
    --ink-text: #6EB99E;
    --ink-70: #6EB99E;
    --ink-50: #61A88A;
    --ink-30: rgba(97, 168, 138, .35);
    --label: #6EB99E;
    --muted: #61A88A;
    --muted-bare: #61A88A;
    --text-bare: #6EB99E;
    --dim: rgba(97, 168, 138, .40);
    --glass: rgba(255, 255, 255, .06);
    --glass-hi: rgba(255, 255, 255, .08);
    --glass-line: rgba(97, 168, 138, .18);
    --glass-rule: rgba(97, 168, 138, .14);
    --hl: rgba(255, 255, 255, .05);
    --hl-mid: rgba(255, 255, 255, .05);
    --hl-sm: rgba(255, 255, 255, .05);
    --card-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    --card-shadow-hover: 0 34px 70px rgba(0, 0, 0, .45);
    --cell-hover: rgba(255, 255, 255, .12);
    --pill-bg: rgba(97, 168, 138, .12);
    --pill-line: rgba(97, 168, 138, .24);
    --code-bg: rgba(97, 168, 138, .10);
    --code-line: rgba(97, 168, 138, .40);
    --code-ink: #8CCBB2;
    --nav-bg: rgba(255, 255, 255, .06);
    --nav-line: rgba(97, 168, 138, .22);
    --nav-hl: rgba(255, 255, 255, .05);
    --nav-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --nav-hover: rgba(255, 255, 255, .10);
    --tog-bg: rgba(255, 255, 255, .06);
    --tog-line: rgba(97, 168, 138, .30);
    --tog-hover: rgba(255, 255, 255, .14);
    --sun-d: none;
    --moon-d: block;
    --btn-bg: #61A88A;                       /* 夜面主按钮 = 海绿底 + 深海字(App 图标配色反相),5.7:1 */
    --btn-bg-hover: #6EB99E;
    --btn-ink: #0B2431;
    --btn-shadow: 0 12px 28px rgba(0, 0, 0, .35);
    --btn-shadow-hover: 0 16px 34px rgba(0, 0, 0, .42);
    --ghost-bg: rgba(97, 168, 138, .10);
    --ghost-line: rgba(97, 168, 138, .40);
    --ghost-shadow-hover: 0 10px 24px rgba(0, 0, 0, .30);
    --focus: #C9F1E4;
    --dusk-band: none;
    --night-bg: linear-gradient(160deg, #163C4E, #123544);
    --night-shadow: 0 30px 70px rgba(0, 0, 0, .45);
    --foot-band: linear-gradient(180deg, rgba(7, 27, 38, 0) 0%, #071B26 100%);
    --foot-text: #61A88A;
    --foot-link: #6EB99E;
    --foot-brand: #6EB99E;   /* 与导航链接同档:白天版的两档层级(链接+品牌 / 信息行) */
    --foot-dot: rgba(97, 168, 138, .40);
  }
}

*, *::before, *::after { box-sizing: border-box; }
/* 微信分享图:留在 DOM 里供微信抓取,但折叠成 1px 不占布局(nocss=true 时 cn.css 不加载,须在此重写) */
.wx-share { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wx-share img { display: block; width: 300px; height: 300px; max-width: none; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--ground);
  /* 只在顶部 720px 提亮(首屏内收口),其后全页平铺 #61A88A 与 App 一致;「深」只在页脚带与夜卡(C-06);夜 = 深海信纸三段 */
  background-image: var(--ground-grad);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.01em; line-height: 1.18; text-wrap: balance; }  /* 窄机标题尾字孤行兜底(T-01) */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* 水汽:三枚柔光光斑,慢慢呼吸 */
.mist { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.mist i {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5;
  background: radial-gradient(circle, var(--mist-c) 0%, transparent 70%);
  animation: breathe 14s ease-in-out infinite;
}
.mist i:nth-child(1) { width: 60vw; height: 60vw; top: -18vw; left: -14vw; }
.mist i:nth-child(2) { width: 46vw; height: 46vw; top: 46vh; right: -16vw; animation-delay: -6s; opacity: .34; }
.mist i:nth-child(3) { width: 40vw; height: 40vw; bottom: -10vw; left: 22vw; animation-delay: -10s; opacity: .28; }
/* 光晕专用:呼吸动画必须保留居中位移,否则 transform 被覆盖、光晕偏离中心 */
@keyframes breatheHalo { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.08) translateY(-2%); } }
@keyframes breathe { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.08) translateY(-2%); } }

.page { position: relative; z-index: 1; }
.wrap { width: min(var(--w), 100% - var(--pad) * 2); margin-inline: auto; }

/* ---------- 玻璃卡 ---------- */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-card);
  box-shadow: inset 0 1px 0 var(--hl), var(--card-shadow);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}

/* ---------- 页眉:薄荷玻璃胶囊(= App 的 Tab 栏) ---------- */
.top { position: sticky; top: 0; z-index: 20; padding: 14px var(--pad) 0; }
.nav {
  width: min(var(--w), 100%); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;  /* 三段式:中段导航钉在页面中线(T-10) */
  padding: 8px 10px;
  background: var(--nav-bg);
  border: 1px solid var(--nav-line);
  border-radius: 999px;
  box-shadow: var(--nav-shadow), inset 0 1px 0 var(--nav-hl);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; letter-spacing: .01em; justify-self: start; padding-left: 6px; }
.brand svg { width: 24px; height: 18px; }
.nav-links { display: flex; gap: 4px; justify-self: center; }
.nav-links a { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); }
.nav-links a:hover, .nav-links a:focus-visible { background: var(--nav-hover); color: var(--ink); }
.nav-end { justify-self: end; display: flex; align-items: center; gap: 8px; }   /* 主题开关 + App Store:开关永远在 CTA 左侧(含 ≤640) */
.nav-cta { padding: 9px 16px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); font-size: 14px; font-weight: 700; white-space: nowrap; }
/* 主题开关:36px 圆玻璃钮,昼显太阳(点→夜)、夜显月亮(点→昼);无 JS 时不显示(开关不工作) */
.theme-toggle {
  display: none; width: 36px; height: 36px; padding: 0; margin: 0; border-radius: 50%; cursor: pointer;
  place-items: center; color: var(--ink); background: var(--tog-bg); border: 1px solid var(--tog-line);
  box-shadow: inset 0 1px 0 var(--hl-sm); -webkit-tap-highlight-color: transparent; font: inherit;
}
.js .theme-toggle { display: grid; }
.theme-toggle svg { width: 18px; height: 18px; grid-area: 1 / 1; }
.theme-toggle .sun { display: var(--sun-d); }
.theme-toggle .moon { display: var(--moon-d); }
.theme-toggle:hover, .theme-toggle:focus-visible { background: var(--tog-hover); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 26px; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-ink); font-weight: 700; font-size: 16px;
  box-shadow: var(--btn-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn svg { width: 16px; height: 16px; }
.btn-ghost { background: var(--ghost-bg); color: var(--ink); box-shadow: none; border: 1px solid var(--ghost-line); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: var(--btn-shadow-hover); background: var(--btn-bg-hover); }
  .nav-cta:hover { background: var(--btn-bg-hover); }
  .btn-ghost:hover { box-shadow: var(--ghost-shadow-hover); background: var(--ghost-bg); }
}

/* ---------- 字级 ---------- */
.eyebrow { font-size: 13.5px; font-weight: 700; letter-spacing: .14em; color: var(--label); text-transform: uppercase; }
.eyebrow .lat { font-family: var(--font-latin); font-style: italic; font-weight: 500; letter-spacing: .04em; text-transform: none; font-size: 16px; }
.h-display { font-size: clamp(34px, 5.2vw, 60px); line-height: 1.12; letter-spacing: -.02em; }
.h-section { font-size: clamp(28px, 3.6vw, 42px); }
.h-card { font-size: clamp(22px, 2.2vw, 26px); }
.lede { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-text); line-height: 1.75; }
.small { font-size: 14px; line-height: 1.7; color: var(--muted); }
.lede, .tcard p, .small, .fine, .voice-sub { text-wrap: balance; }  /* 正文末行孤字兜底;pretty 在 CJK 下实测无效(T-02) */

/* ---------- 手机外框 ---------- */
.phone {
  position: relative; width: 100%; aspect-ratio: 9 / 18.6;
  border-radius: var(--r-phone); padding: 10px;
  background: #143846;
  box-shadow: 0 30px 60px rgba(8, 68, 86, .35), inset 0 0 0 2px rgba(255, 255, 255, .06), 0 0 0 1px rgba(8, 68, 86, .4);
}
.phone .screen { position: relative; isolation: isolate; width: 100%; height: 100%; border-radius: calc(var(--r-phone) - 10px); overflow: hidden; background: var(--sea); }
/* 截图保留真实状态栏区域与灵动岛(状态栏文字已在图片里抹去),不再用 CSS 补色带——补带与截图底色必有色差接缝 */
/* 状态栏区:截图顶部按宽度 13.5%(=720 宽图 97px:时间/信号/真岛)整段去掉——负上边距把它顶出屏顶,clip-path 再把它抠透明
   (overflow:hidden 只裁 padding box 之外,负边距区照样可见,所以必须 clip;6.2% 按 1565 高 = 97px,三张截图同为 720×1565)。
   去掉的高度由 .screen 的 padding-top 等量补回,成一条干净的顶带;顶带底色 = 该页 App 自身的顶色,与截图无缝:
   追踪/冥想页 #61A88A(--sea),人格揭晓页 sheet 之下是压暗的 #4F876E(由 .screen--sheet 指定)。岛由 ::before 画在带内(D4 + 灵动岛) */
.phone .screen img { display: block; width: 100%; height: auto; }
/* 灵动岛:iPhone 17 Pro 比例(402pt 宽屏上 126×37pt → 宽 31%,长宽比 126/37);顶距用 margin-top 3.2%(margin 百分比取宽,top 百分比会取高),
   带内上留 3.2% 下留 1.2%;z-index 2 压在截图之上、::after 的边缘高光(z-index 3)之下 */
.phone .screen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); pointer-events: none; z-index: 3; }

/* ---------- Ⅰ Hero:一张巨大的玻璃卡 ---------- */
.hero { padding: clamp(28px, 5vw, 56px) 0 0; }
.hero-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center;
  min-height: 560px; padding: clamp(28px, 4vw, 56px) clamp(28px, 5vw, 72px) 0;
}
.hero-copy { align-self: center; padding-bottom: clamp(40px, 5vw, 76px); }
.hero-copy .eyebrow { margin-bottom: 20px; display: flex; align-items: center; gap: 6px; }  /* 「Aquora 沐汐」一个词空(T-07) */
.hero-copy .lede { margin: 22px 0 32px; max-width: 30em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.hero-note { margin-top: 16px; font-size: 14px; line-height: 1.7; color: var(--muted); }

/* 两台真机从卡底缘错落滑出;底缘用遮罩淡入水面(取自 D 的「海面淡出」) */
/* 旋转的两台手机四角探出 .hero-phones 盒外,而 mask 以边框盒裁切(p1 左角被切 ≈3.8% 列宽):左右各留 5% 出血——
   负外边距向外扩、内边距等量收回,内容盒不变;绝对定位子元素的百分比改以扩后的 padding box(110%)为基,故 54/5/90 各除以 1.1,视觉与扩前一致 */
.hero-phones {
  /* 出血扩大:左右各 24%、顶部 80px,足以容纳手机 60px 投影与光晕的模糊边,遮罩不再在盒边硬切(Abel 指出的左右竖直切线) */
  position: relative; height: calc(100% + 80px); min-height: 600px; padding: 80px 24% 0; margin: -80px -24% 0;  /* border-box:高度补回顶部出血,盒底仍贴格底 */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0, 0, 0, .6) 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0, 0, 0, .6) 88%, transparent 100%);
}
.hero-phones .phone { position: absolute; bottom: calc(-26% + 21px); width: calc(54% / 1.48); }
.hero-phones .p1 { left: calc(29% / 1.48); transform: rotate(-4deg); z-index: 1; }
.hero-phones .p2 { right: calc(29% / 1.48); bottom: calc(-18% + 14px); transform: rotate(3deg); z-index: 2; }
.hero-halo {
  position: absolute; left: 50%; top: calc(40% + 48px); width: calc(90% / 1.48); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, var(--halo-c), transparent 68%);
  filter: blur(20px); animation: breatheHalo 10s ease-in-out infinite; pointer-events: none;
}

/* ---------- 节 ---------- */
.sec { padding-top: var(--gap); }
.sec-head { max-width: 40em; margin-bottom: clamp(28px, 4vw, 44px); }
.sec-head .eyebrow { margin-bottom: 14px; }
/* 裸海绿上的节眉垫一枚白 28% 胶囊(同 .cell code 做法),#143846 on 胶囊 ≥5.6(C-02) */
.sec-head .eyebrow, .voice .eyebrow, .cta .eyebrow { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--pill-bg); border: 1px solid var(--pill-line); }
.sec-head .lede { margin-top: 12px; }

/* ---------- Ⅱ 三件事:三张竖向玻璃卡各嵌一台真机 ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tcard { position: relative; overflow: hidden; padding: 30px 28px 0; min-height: 660px; display: flex; flex-direction: column; transition: transform .35s ease, box-shadow .35s ease; }
.tcard .glow { margin-bottom: 16px; }   /* 图标→标签 16 / 标签→标题 12 / 标题→正文 10,递减(T-13) */
.tcard .h-card { margin: 12px 0 10px; }
.tcard p { color: var(--ink-text); font-size: 15px; line-height: 1.7; max-width: 24em; margin-bottom: 28px; }
/* 手机压在卡底缘:margin-top:auto 让三张卡的手机都贴底,再以 -22% 溢出卡外(卡 overflow:hidden 裁掉) */
.tcard .phone { width: 84%; margin: auto auto -46%; }   /* 手机放宽到卡宽 84%、只露出约七成机身,与首屏两台的比例一致(Abel:原来显得细长) */
.tcard .fact { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--label); }
@media (hover: hover) {
  .tcard:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 var(--hl), var(--card-shadow-hover); }
}
/* 冥想卡内:App 冥想页那两枚方卡原样放大(取自 E) */
.twin { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: -8px 0 26px; min-height: 125px; }
/* 卡 1/卡 2 与冥想卡的 .twin 同一盒模型:一行胶囊(min-height 锁 125px),三台手机贴底后三卡内部节奏一致(T-04) */
.tcard .chips { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; margin: -8px 0 26px; min-height: 125px; }
.tcard .chips span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--glass); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--hl-sm); }
.tcard .chips span code { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.twin .tile { padding: 16px 10px 14px; text-align: center; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--hl-sm); }
.twin .tile .ic { width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 50%; background: var(--glass-hi); display: grid; place-items: center; color: var(--ink); }
.twin .tile .ic svg { width: 20px; height: 20px; }
.twin .tile b { display: block; font-size: 15px; color: var(--ink); }
.twin .tile span:not(.ic) { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

/* 柔光图标:复用冥想页日落式的柔光 */
.glow {
  position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass-hi); border: 1px solid var(--glass-line); color: var(--ink);   /* 图标描边走 currentColor:昼藏青、夜奶油 */
}
.glow::before {
  content: ""; position: absolute; inset: -18px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow-c, rgba(245, 200, 66, .55)) 0%, rgba(255, 255, 255, 0) 68%);
  filter: blur(6px); animation: breathe 6s ease-in-out infinite; z-index: -1;
}
.glow svg { width: 30px; height: 30px; }

/* ---------- Ⅲ 十六型 ---------- */
/* 四轴字母图例:只解释代码怎么来,不发明读数 */
.axes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 6px 8px; margin-bottom: 18px; border-radius: 22px; background: var(--glass-hi); box-shadow: inset 0 1px 0 var(--hl); }
/* ↑ 图例去外投影:否则窄屏第一行人格名压在 0 24px 60px 投影里对比度掉到 4.33;底用 22% 白让 .pair 到 ≈4.8(C-05) */
.axis { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.axis + .axis { border-left: 1px solid var(--glass-rule); }
.axis .k { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--label); }
.axis .pair { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.axis .pair i { font-style: normal; color: var(--ink-30); margin: 0 4px; }
.axis code { font-family: var(--font-ui); font-size: 12px; font-weight: 800; letter-spacing: .02em; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: var(--code-bg); color: var(--code-ink); box-shadow: inset 0 0 0 1px var(--code-line); }   /* 边用内阴影画,昼透明、夜薄雾,不改盒尺寸 */

.grid16 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cell {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 26px 14px 22px; border-radius: 24px; min-height: 176px;
  isolation: isolate;  /* 让 .em::before 的 z-index:-1 留在格子自身层叠上下文:辉光画在玻璃之上、内容之下,静止/入场/悬停三态同一画法(C-08) */
  background: var(--glass-hi); border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--hl-mid);
  transition: transform .3s ease, background .3s ease;
}
.cell .em { position: relative; font-size: 38px; line-height: 1; width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 14px; }
.cell .em::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; background: radial-gradient(circle, var(--c) 0%, transparent 68%); opacity: .55; filter: blur(8px); z-index: -1; }
.cell b { font-size: 18px; letter-spacing: .01em; }
.cell code { margin-top: 6px; font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .22em; padding: 4px 10px 4px 12px; border-radius: 999px; background: var(--code-bg); color: var(--code-ink); box-shadow: inset 0 0 0 1px var(--code-line); }
.cell .ax { margin-top: 8px; font-size: 13px; color: var(--muted); }
@media (hover: hover) {
  .cell:hover { transform: translateY(-4px); background: var(--cell-hover); }
}
.grid-foot { margin-top: 22px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.grid-foot .small { color: var(--muted-bare); }   /* 裸海绿 4.9(C-02) */
.rs-link { color: inherit; font-weight: 700; border-bottom: 1px solid var(--ink-30); }
.grid-foot .rs-tag { white-space: nowrap; }   /* 标语整体不可断,避免破折号/连接符落行首(T-09) */

/* ---------- Ⅳ 夜:刷机预报 = 藏青玻璃卡搁在海绿地上,四周一条黄昏过渡带 ---------- */
.dusk {
  position: relative;
  /* 上下同取 --gap,带子以卡为轴对称;.16 平台(34–66%)恰落在卡内且中心与卡中心重合;下一节顶距清零,卡→眉题 = --gap(C-07/T-06) */
  padding-bottom: var(--gap);
  background: var(--dusk-band);   /* 夜间整页已是深海,黄昏带撤掉(none) */
}
.dusk + .voice { padding-top: 0; }
.night {
  position: relative; overflow: hidden; color: var(--mint);
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center;
  padding: clamp(36px, 5vw, 64px) clamp(28px, 5vw, 64px);
  background: var(--night-bg);
  border-color: rgba(201, 241, 228, .22);
  box-shadow: inset 0 1px 0 rgba(201, 241, 228, .22), var(--night-shadow);
}
.night::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; left: -10%; top: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(97, 168, 138, .35), transparent 68%); filter: blur(30px); animation: breathe 12s ease-in-out infinite; }
.night .eyebrow { color: rgba(201, 241, 228, .75); }
.night .lede { color: rgba(201, 241, 228, .78); }
.night h2 { color: #EAF7F1; }   /* 雾白:近白的冲击 + 一丝薄荷的色相,白天版唯一的高对比强调(Abel 2026-09-04 三选一定);夜间版由下方覆盖为绿 */
.night-copy { position: relative; }
.night-copy .eyebrow { margin-bottom: 14px; }   /* 与 .sec-head .eyebrow 同值(T-05) */
.night-copy .lede { margin-top: 16px; max-width: 28em; }
.night-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.night-tags li { font-size: 13px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(201, 241, 228, .28); background: rgba(201, 241, 228, .10); }
.dial-wrap { position: relative; display: grid; place-items: center; }
.dial { width: min(100%, 420px); overflow: visible; }
.dial .arc { fill: none; stroke: rgba(201, 241, 228, .16); stroke-width: 14; stroke-linecap: round; }
.dial .arc-on { stroke: url(#dialGrad); stroke-dasharray: 503; stroke-dashoffset: 150;   /* 渐变亮弧:必须在 CSS 里声明,否则被 .dial .arc 的淡薄荷描边覆盖 */ transition: stroke-dashoffset 1.6s cubic-bezier(.22, .61, .36, 1) .2s; }
.js .night:not(.is-in) .dial .arc-on { stroke-dashoffset: 503; }   /* 默认态 = 终态;只有 html.js 才把待入场元素藏起来(D1) */
.dial .tick { stroke: rgba(201, 241, 228, .35); stroke-width: 1.5; stroke-linecap: round; }
.dial .needle { transform-origin: 200px 200px; transform: rotate(28deg); transition: transform 1.6s cubic-bezier(.22, .61, .36, 1) .2s; }
.js .night:not(.is-in) .dial .needle { transform: rotate(-90deg); }
.dial text { fill: rgba(201, 241, 228, .75); font-family: var(--font-ui); font-size: 13px; font-weight: 600; }
.dial .word { fill: #EAF7F1; font-size: 30px; font-weight: 700; }
.dial .sub { font-size: 13px; fill: rgba(201, 241, 228, .8); }
.dial-note { margin-top: 6px; font-size: 12px; color: rgba(201, 241, 228, .75); }

/* ---------- Ⅴ 声线:三行圆体大字 ---------- */
.voice { text-align: center; }
.voice .eyebrow { margin-bottom: 26px; line-height: 1.6; }   /* 现在是 h2,抵消 h2 的 1.18(T-12) */
.voice-lines { display: grid; gap: clamp(8px, 1.5vw, 16px); }
.voice-lines p { font-size: clamp(30px, 5vw, 58px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
/* 居中行末的全角句号占满一字宽,把可见字的视觉中心拉偏半字:句号放进零宽行内块、向右溢出绘制(标点悬挂),可见字正好居中 */
.hang { display: inline-block; width: 0; overflow: visible; white-space: nowrap; }
.voice-lines p .dim, .cta h2 .dim { color: inherit; }
.voice-sub { margin: 26px auto 0; max-width: 34em; color: var(--text-bare); }

/* ---------- Ⅵ 蜡封 CTA ---------- */
.cta { position: relative; overflow: hidden; text-align: center; padding: clamp(44px, 6vw, 72px) var(--pad); }
.cta .eyebrow { margin-top: 24px; }
.cta .h-section { margin-top: 14px; }
.cta .lede { margin: 14px auto 30px; max-width: 26em; }
.cta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cta .fine { margin: 24px auto 0; max-width: 36em; font-size: 13px; line-height: 1.7; color: var(--muted); }
.seal {
  position: relative; width: 96px; height: 96px; margin: 0 auto; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #5FC09E 0%, #44AA88 45%, #2E8A6A 100%);
  box-shadow: 0 14px 30px rgba(8, 68, 86, .35), inset 0 -4px 10px rgba(8, 68, 86, .35), inset 0 3px 6px rgba(255, 255, 255, .35);
}
.seal::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1.5px solid rgba(8, 68, 86, .28); }
.seal::after { content: ""; position: absolute; inset: -22px; border-radius: 50%; background: radial-gradient(circle, rgba(201, 241, 228, .6), transparent 68%); filter: blur(10px); z-index: -1; animation: breathe 7s ease-in-out infinite; }
.seal svg { position: absolute; inset: 0; margin: auto; width: 44px; height: 34px; }

/* ---------- 页脚:深海绿带(取自 D),备案细字居中 ---------- */
.foot-band { margin-top: var(--gap); background: var(--foot-band); }
.footer-icp { padding: 40px var(--pad) 44px; text-align: center; font-size: 13px; line-height: 1.9; color: var(--foot-text); }  /* 76px > 带顶 64px 过渡,文字全部落在实色上(C-03) */
.footer-icp p { max-width: none; margin: 0; }
.footer-icp-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.footer-icp-nav a { color: var(--foot-link); }
.footer-icp-nav span { color: var(--foot-dot); }
.footer-icp-brand { font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--foot-brand); }
.footer-icp-line a { color: inherit; }
.footer-icp-psb a { display: inline-flex; align-items: center; gap: 5px; }
.footer-icp-psb img { width: 20px; height: 20px; display: inline-block; }
.footer-icp-contact { margin-top: 6px; }

/* ---------- 入场 ---------- */
/* 无 JS 守卫:默认可见;<head> 内联脚本给 html 加 .js 后,才把待入场元素藏起来等 IntersectionObserver(D1) */
.reveal { transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); }
.js .reveal:not(.is-in) { opacity: 0; transform: translateY(22px); }
.reveal[data-d="1"] { transition-delay: .12s; }
.reveal[data-d="2"] { transition-delay: .24s; }
.reveal[data-d="3"] { transition-delay: .36s; }

/* ---------- 主题切换:从开关圆心扩开的圆形揭幕 ----------
   首选 View Transitions(Chrome/Edge 111+、Safari 18+、Firefox 144+):新视图以 clip-path: circle() 从钮心扩到最远视口角,旧视图不动、不淡出;
   兜底(旧 Safari / 微信 X5):JS 挂一枚固定定位的 .theme-ripple,以目标主题地色从钮心 scale 扩满视口,令牌在其下切换,再淡出自删(≈600ms),
   pointer-events:none 永不挡点击。prefers-reduced-motion: 两条路都直接切换、无动画(JS 与 CSS 双重保险)。 */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; animation: theme-reveal .7s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes theme-reveal {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); }
  to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 0)); }
}
.theme-ripple {
  position: fixed; z-index: 2147483000; border-radius: 50%; pointer-events: none;
  transform: scale(0); opacity: 1; will-change: transform, opacity;
  transition: transform .42s cubic-bezier(.22, .61, .36, 1), opacity .18s ease .42s;
}
.theme-ripple.is-on { transform: scale(1); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .theme-ripple { display: none; }
  .mist i, .hero-halo, .glow::before, .night::before, .seal::after { animation: none; }
  .reveal, .js .reveal:not(.is-in) { opacity: 1; transform: none; transition: none; }
  .btn, .tcard, .cell { transition: none; }
  .dial .arc-on, .dial .needle { transition: none; }
  .dial .arc-on, .js .night:not(.is-in) .dial .arc-on { stroke-dashoffset: 150; }
  .dial .needle, .js .night:not(.is-in) .dial .needle { transform: rotate(28deg); }
}

/* ---------- 响应 ---------- */
@media (max-width: 980px) {
  .hero-card { grid-template-columns: 1fr; min-height: 0; padding-bottom: 0; }
  .hero-copy { padding-bottom: 10px; }
  .hero-phones { min-height: 0; height: auto; display: flex; justify-content: center; gap: 4%; padding-top: 26px; margin-bottom: -22%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0, 0, 0, .5) 82%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0, 0, 0, .5) 82%, transparent 100%);  margin-top: 0; padding-top: 26px; }
  .hero-phones .phone { position: relative; left: auto; right: auto; bottom: auto; width: 44%; max-width: 260px; }
  .hero-phones .p2 { bottom: auto; margin-top: 34px; }
  .hero-halo { top: 60%; }
  .trio { grid-template-columns: 1fr; }
  .tcard { min-height: 0; }
  .tcard .phone { width: min(78%, 300px); margin-bottom: -40%; }
  .twin, .tcard .chips { max-width: 360px; }
  .axes { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 6px; }
  .axis + .axis { border-left: 0; }
  .axis:nth-child(even) { border-left: 1px solid var(--glass-rule); }
  .axis:nth-child(n + 3) { border-top: 1px solid var(--glass-rule); }
  .grid16 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .night { grid-template-columns: 1fr; }
  .dial { width: min(100%, 340px); }
  /* 表盘文字随 viewBox 缩小,按缩放比补回:渲染字号 ≈12–13px / 词 ≈30px(D3) */
  .dial text { font-size: 15px; } .dial .word { font-size: 35px; } .dial .sub { font-size: 15px; }
}
@media (max-width: 640px) {
  .nav { padding: 6px; grid-template-columns: 1fr auto; gap: 8px; }
  .nav-end { gap: 6px; }
  .brand { padding-left: 8px; }
  .nav-links { display: none; }
  .brand { font-size: 16px; }
  .hero-card { padding: 30px 22px 0; border-radius: 24px; }
  .hero-phones { margin-bottom: -26%; }
  .hero-phones .phone { width: 47%; }
  .tcard { padding: 26px 22px 0; }
  /* 四轴图例改单列四行「轴名左 · 字母对右」,与 .grid16 的行表同一思路;2×2 在窄屏列宽不等且 <375 溢出(T-03/D2) */
  .axes { grid-template-columns: 1fr; }
  .axis { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; }
  .axis:nth-child(even) { border-left: 0; }
  .axis:nth-child(n + 2) { border-top: 1px solid var(--glass-rule); }
  .axis .pair { font-size: 13px; gap: 4px; }
  /* 16 型在窄屏改成单列行表(取自 D 的胶囊表思路):emoji 左、名与四轴词中、代码右 */
  .grid16 { grid-template-columns: 1fr; gap: 8px; }
  .cell { display: grid; grid-template-columns: 52px 1fr auto; grid-template-areas: "em name code" "em ax code"; column-gap: 12px; row-gap: 2px; align-items: center; text-align: left; padding: 10px 14px 10px 12px; min-height: 0; border-radius: 18px; }
  .cell .em { grid-area: em; font-size: 26px; width: 48px; height: 48px; margin: 0; }
  .cell .em::before { inset: -6px; }
  .cell b { grid-area: name; font-size: 16px; }
  .cell code { grid-area: code; margin: 0; font-size: 11px; letter-spacing: .18em; }
  .cell .ax { grid-area: ax; margin: 0; font-size: 12px; letter-spacing: -.01em; }
  .grid-foot { flex-direction: column; align-items: flex-start; }
  .voice-lines p { font-size: clamp(28px, 8.4vw, 36px); }
  .night { padding: 30px 22px; }
  .night h2 { font-size: clamp(24px, 7vw, 28px); }   /* 11 字在 360/375 单行(T-01) */
  .footer-icp { padding-inline: 10px; }
}

/* 平板区间(641–980):三卡两列,冥想卡通栏、文案左列 + 手机右列,文字轴与手机轴不再错开(T-11) */
@media (min-width: 641px) and (max-width: 980px) {
  .trio { grid-template-columns: 1fr 1fr; }
  .tcard .phone { width: min(72%, 260px); }
  .tcard:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto auto 1fr; column-gap: 24px; }
  .tcard:nth-child(3) > * { grid-column: 1; align-self: start; }
  .tcard:nth-child(3) .phone { grid-column: 2; grid-row: 1 / -1; align-self: end; width: 260px; margin: 0 0 -26%; }
}
@media (max-width: 430px) {
  .dial text { font-size: 16px; } .dial .word { font-size: 37px; } .dial .sub { font-size: 16px; }   /* 390: 12.3 / 28.5 px */
}
@media (max-width: 380px) {
  .dial text { font-size: 17px; } .dial .word { font-size: 39px; } .dial .sub { font-size: 17px; }   /* 375: 12.5 / 28.6 px */
}
@media (max-width: 359px) {
  /* 320–359:「觉察还是自动驾驶」+「C 觉察 / A 自动驾驶」一行放不下(需 ≈265px,可用 ≤246px),轴名回到字母对上方 */
  .axis { flex-direction: column; align-items: flex-start; gap: 4px; }
  /* 页眉:品牌 130 + 开关 36 + CTA 101 + 间距在 320 宽只有 272px 可用,品牌名会折两行;各收一档(品牌名是备案要求,不能藏) */
  .brand { font-size: 15px; gap: 7px; white-space: nowrap; }
  .theme-toggle { width: 32px; height: 32px; }
  .theme-toggle svg { width: 17px; height: 17px; }
  .nav-cta { padding: 9px 12px; }
}
@media (max-width: 360px) {
  .btn-more { display: none; }   /* 蜡封按钮只留「在 App Store 下载」,与首屏按钮同尺寸(D5) */
}
@media (max-width: 350px) {
  .dial text { font-size: 18px; } .dial .word { font-size: 42px; } .dial .sub { font-size: 18px; }
}
@media (max-width: 339px) {
  /* 320–339 宽:含「自动驾驶」的四轴词需 137px,原 1fr 列只剩 ~122px 会折行(行高 70→83 不齐);让 .ax 横跨名字列+代码列(D6) */
  .cell { grid-template-areas: "em name code" "em ax ax"; }
}

.nb { white-space: nowrap; } /* 数词不跨行 */

/* 手机内画面随昼夜切换:浅色/深色两张截图叠放,按主题显示其一(过场由 View Transition 整体截图,无需单独淡入) */
.phone .screen img.img-dark { display: none; }
:root[data-theme="dark"] .phone .screen img.img-light { display: none; }
:root[data-theme="dark"] .phone .screen img.img-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phone .screen img.img-light { display: none; }
  :root:not([data-theme="light"]) .phone .screen img.img-dark { display: block; }
}

/* 夜面手机外框:藏青框在深海地上失去轮廓,加一圈薄雾绿描边 */
:root[data-theme="dark"] .phone { background: #2B4A55; box-shadow: 0 30px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 2px rgba(255, 255, 255, .04), 0 0 0 1px rgba(0, 0, 0, .35); }  /* 石板灰绿机身,比底色亮一档,顶部一线高光 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phone { background: #2B4A55; box-shadow: 0 30px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 2px rgba(255, 255, 255, .04), 0 0 0 1px rgba(0, 0, 0, .35); }  /* 石板灰绿机身,比底色亮一档,顶部一线高光 */
}
/* 刷机预报卡 = 「夜的一面」,昼夜同一张卡(Abel 2026-09-04 定):夜间不覆盖它的文字与表盘配色,只让卡面比深海地亮一档(--night-bg 已处理) */