/* 各语言字体：思源宋体按 App 的地区字形（SC/TC/JP/KR）子集化；毛笔字与 App 相同。由 build-fonts.py 生成 */
@font-face { font-family: "Lora"; src: url(assets/Lora.ttf) format("truetype"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Senumi Serif SC"; src: url(assets/fonts/serif-sc-regular.woff2?v=030156cd) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Senumi Serif SC"; src: url(assets/fonts/serif-sc-medium.woff2?v=80d6beb3) format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Senumi Brush SC"; src: url(assets/fonts/brush-sc.woff2?v=0a7586e4) format("woff2"); font-display: swap; }
@font-face { font-family: "Senumi Serif TC"; src: url(assets/fonts/serif-tc-regular.woff2?v=34bc838f) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Senumi Serif TC"; src: url(assets/fonts/serif-tc-medium.woff2?v=92a0994c) format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Senumi Brush TC"; src: url(assets/fonts/brush-tc.woff2?v=f27696f8) format("woff2"); font-display: swap; }
@font-face { font-family: "Senumi Serif JP"; src: url(assets/fonts/serif-jp-regular.woff2?v=96d277fe) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Senumi Serif JP"; src: url(assets/fonts/serif-jp-medium.woff2?v=ce464ad9) format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Senumi Brush JP"; src: url(assets/fonts/brush-jp.woff2?v=899b2dc1) format("woff2"); font-display: swap; }
@font-face { font-family: "Senumi Serif KR"; src: url(assets/fonts/serif-kr-regular.woff2?v=a5b34e73) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Senumi Serif KR"; src: url(assets/fonts/serif-kr-medium.woff2?v=7f8e28a3) format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Senumi Brush KR"; src: url(assets/fonts/brush-kr.woff2?v=e5c8811e) format("woff2"); font-display: swap; }

html[lang="zh-Hant"] { --zh: "Senumi Serif TC", "Songti TC", serif; }
html[lang="ja"] { --zh: "Senumi Serif JP", "Hiragino Mincho ProN", serif; }
html[lang="ko"] { --zh: "Senumi Serif KR", "AppleMyungjo", serif; }
html[lang="en"] { --zh: "Lora", Georgia, serif; }
:root {
  /* 纸、墨、朱砂。取自 App 的青瓷底与花笺 */
  --paper: #f2f1e8;
  --paper-2: #eaebdf;
  --ink: #1f2b26;
  --ink-2: #4f5b55;
  --ink-3: #87908a;
  --rule: rgba(31, 43, 38, .13);
  --rule-strong: rgba(31, 43, 38, .28);
  --cinnabar: #b0412e;
  --btn: #26382f;
  --btn-ink: #f2f1e8;
  --night: #0d1512;
  --night-ink: #e6e8dd;
  --night-ink-2: #8d978f;

  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);

  --serif: "Lora", var(--zh);
  --zh: "Senumi Serif SC", "Songti SC", "Noto Serif SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --measure: 1120px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--zh);
  font-size: 16px;
  line-height: 2;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color .8s ease, color .8s ease;
}
/* 极淡的纸纹 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .44 0 0 0 0 .38 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.theme-dark body::before, body.theme-dark::before { opacity: .5; mix-blend-mode: screen; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--zh); font-weight: 400; margin: 0; letter-spacing: .06em; }
p { margin: 0; }
button { font: inherit; letter-spacing: inherit; color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: rgba(176, 65, 46, .18); }

/* ───────── 导航 ───────── */
.nav {
  position: fixed; z-index: 20; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--measure);   /* 页顶时与页面内容区同宽（1120px，含两侧 gutter），浮动时再收成贴合内容的胶囊 */
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 18px var(--gutter);
  border: 1px solid transparent; border-radius: 0;
  --nav-t: .6s cubic-bezier(.32, .72, 0, 1);   /* 收放统一用这一条曲线：宽度、位置、圆角、玻璃同步 */
  /* 投影与毛玻璃同层数、全透明起步，才能平滑插值 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0), 0 0 0 .5px rgba(31, 43, 38, 0), 0 1px 2px rgba(31, 43, 38, 0), 0 12px 32px -14px rgba(31, 43, 38, 0);
  backdrop-filter: saturate(1) blur(0); -webkit-backdrop-filter: saturate(1) blur(0);
  transition: max-width var(--nav-t), top var(--nav-t), padding var(--nav-t), border-radius var(--nav-t), gap var(--nav-t), color .5s,
              box-shadow .25s cubic-bezier(.2, 0, 0, 1), backdrop-filter .25s cubic-bezier(.2, 0, 0, 1), -webkit-backdrop-filter .25s cubic-bezier(.2, 0, 0, 1);
  animation: headerDrop .9s var(--ease-expo) both;
}
/* 浮起后是一块磨砂玻璃：不用描边，只有极细的轮廓、顶边一道高光和柔和的投影 */
.nav.is-floating {
  top: 18px; max-width: min(640px, calc(100% - 24px)); padding: 9px 9px 9px 13px; border-radius: 14px; /* 左侧图标距边 14px，与它上下的留白相等；按钮四周 10px 留白 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 0 0 .5px rgba(31, 43, 38, .1), 0 1px 2px rgba(31, 43, 38, .05), 0 12px 32px -14px rgba(31, 43, 38, .22);
  backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px);
  transition: max-width var(--nav-t), top var(--nav-t), padding var(--nav-t), border-radius var(--nav-t), gap var(--nav-t), color .5s,
              box-shadow var(--nav-t), backdrop-filter var(--nav-t), -webkit-backdrop-filter var(--nav-t);
}
.theme-dark .nav.is-floating { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 .5px rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, 0), 0 12px 32px -14px rgba(0, 0, 0, .5); }
/* 渐变底色放在伪元素上，只渐变透明度——渐变本身无法过渡，直接切换会“先冒出来”；描边、投影、毛玻璃仍在 .nav 本身 */
.nav::before, .nav::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity .25s cubic-bezier(.2, 0, 0, 1); }   /* 褪去：快，约 0.25s，不等宽度展开完 */
.nav::before { background-image: linear-gradient(180deg, rgba(251, 250, 244, .82), rgba(242, 241, 232, .7)); }
.nav::after { background-image: linear-gradient(180deg, rgba(28, 38, 33, .8), rgba(18, 27, 23, .72)); }
.nav.is-floating::before { opacity: 1; transition: opacity var(--nav-t); }   /* 出现：与收窄同一曲线 */
.nav:not(.is-floating) .nav-links::before { transition: opacity .2s; }
.theme-dark .nav.is-floating::before { opacity: 0; transition: opacity .25s cubic-bezier(.2, 0, 0, 1); }
.theme-dark .nav.is-floating::after { opacity: 1; transition: opacity var(--nav-t); }
.theme-dark .nav.is-floating { color: var(--night-ink); }
.theme-dark .nav.is-floating .nav-links { color: var(--night-ink-2); }
.theme-dark .nav.is-floating .btn { background: linear-gradient(180deg, #fbfaf3 0%, #ecebdf 100%); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .4), 0 6px 14px -6px rgba(0, 0, 0, .55); }
.brand { display: flex; align-items: center; gap: 9px; font-family: "Lora", serif; font-size: 20px; letter-spacing: .01em; }
.nav .brand { transition: font-size var(--nav-t); }
.brand img { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(3, 37, 26, .18)); }
/* 字标随语言（文案 app.name）：中日韩显示各自的名字（余静 / 余靜 / 余韻 / 여운담），用对应地区的宋体；
   英文 Senumi 用 Lora（与 App 的英文衬线一致），字重 500、字距略收 */
.brand-name { font-family: var(--zh); font-weight: 500; font-size: .9em; letter-spacing: .14em; line-height: 1; }
html[lang="en"] .brand-name { font-family: "Lora", serif; font-size: .95em; letter-spacing: -.005em; }
.nav.is-floating .brand { font-size: 17px; }
.nav-links { display: flex; gap: 30px; font-size: 14px; letter-spacing: .12em; color: var(--ink-2); transition: color .5s; }
.nav-links a { position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: .12em; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-expo); }
.nav-links a:hover { color: var(--ink); }
.theme-dark .nav-links a:hover { color: var(--night-ink); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-end { display: flex; align-items: center; gap: 10px; }
.lang { position: relative; }
.lang-btn { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-size: 13px; letter-spacing: .06em; color: inherit; opacity: .8; transition: opacity .3s, background-color .3s; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { opacity: 1; background: rgba(31, 43, 38, .06); }
.theme-dark .nav.is-floating .lang-btn:hover, .theme-dark .nav.is-floating .lang-btn[aria-expanded="true"] { background: rgba(230, 232, 221, .08); }
.lang-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 140px; margin: 0; padding: 6px; list-style: none; border-radius: 12px;
  background: rgba(242, 241, 232, .96); border: 1px solid var(--rule); box-shadow: 0 16px 40px -18px rgba(20, 35, 28, .35);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: var(--ink); animation: softFocusIn .35s var(--ease-expo) both; }
.lang-menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 12px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 14px; letter-spacing: .04em; cursor: pointer; color: var(--ink-2); }
.lang-menu button:hover { background: rgba(31, 43, 38, .06); color: var(--ink); }
.lang-menu button[aria-selected="true"] { color: var(--ink); }
.lang-menu button[aria-selected="true"]::after { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--cinnabar); }
.lang-menu button[lang="zh-Hans"] { font-family: "Senumi Serif SC", serif; }
.lang-menu button[lang="zh-Hant"] { font-family: "Senumi Serif TC", serif; }
.lang-menu button[lang="ja"] { font-family: "Senumi Serif JP", serif; }
.lang-menu button[lang="ko"] { font-family: "Senumi Serif KR", serif; }
.lang-menu button[lang="en"] { font-family: "Lora", serif; }

/* ───────── 按钮：小圆角、细字距 ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 26px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--btn); color: var(--btn-ink);
  font-family: var(--zh); font-size: 15px; font-weight: 600; letter-spacing: .16em;
  transition: background-color .3s, opacity .3s;
}
.btn svg { width: 17px; height: 17px; fill: currentColor; margin-top: -2px; }
/* 质感：自上而下的微渐变、顶部一道细高光、底边内阴影，再加一近一远两层投影。所有按钮悬停统一为上浮 2px、投影随之拉长，按下回落 */
.btn { background: linear-gradient(180deg, #364c41 0%, #27392f 52%, #1f2f27 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .22), 0 0 0 .5px rgba(14, 24, 20, .55),
              0 1px 2px rgba(20, 32, 27, .2), 0 8px 18px -8px rgba(20, 32, 27, .45);
  transition: transform .25s var(--ease-quint), box-shadow .25s var(--ease-quint), filter .25s; }
.btn:hover { transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .22), 0 0 0 .5px rgba(14, 24, 20, .55),
              0 2px 4px rgba(20, 32, 27, .2), 0 12px 24px -10px rgba(20, 32, 27, .5); }
.btn:active { transform: translateY(0); transition-duration: .08s;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(14, 24, 20, .55), 0 1px 1px rgba(20, 32, 27, .2); }
.btn[aria-disabled="true"] { cursor: default; }
.btn-sm { height: 36px; padding: 0 16px; font-size: 13px; border-radius: 8px; }
.fine { margin-top: 14px; font-size: 12px; letter-spacing: .14em; color: var(--ink-3); }

/* ───────── 首屏 pin（ScreenTune hero） ───────── */
.theme-dark { background-color: var(--night); }
.hero-pin { position: relative; height: 290vh; height: 290svh; }
.hero-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow-x: clip; overflow-y: visible; }
.hero-card {
  position: absolute; inset: 0; transform-origin: 50% 50%;
  background: linear-gradient(180deg, #eef0e4 0%, #ebeee1 14%, #e8eddf 34%, #e3ebdd 50%, #dee7dd 57%, #d4e2d9 69%, #cfdfd6 80%, #cbddd4 87%, #c9dcd3 92%, #c6dad0 100%);
  will-change: transform, clip-path;
}
/* 同 App 首页：莲花在上方居中完整露出，标题缩成一行放在莲花下方 */
.hero-copy { position: absolute; left: 0; right: 0; bottom: clamp(40px, 7vh, 84px); z-index: 2; text-align: center; padding: 0 16px; will-change: opacity, transform; }
.hero-copy h1 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.4; font-weight: 400; letter-spacing: .18em; text-indent: .18em; }
.tseg { display: inline-block; animation: titleFocusIn 1.1s var(--ease-expo) both; }
.tseg:nth-of-type(2) { animation-delay: .12s; }
.lead { max-width: 30em; margin: 14px auto 0; font-size: 15px; color: var(--ink-2); letter-spacing: .08em; animation: softFocusIn 1s var(--ease-expo) .3s both; }
.cta { margin-top: 26px; animation: softFocusIn 1s var(--ease-expo) .42s both; }
.lotus-wrap { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; pointer-events: none; }
/* 莲花可横向拨动旋转；纵向手势仍交给页面滚动 */
#lotus-scene { pointer-events: auto; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
#lotus-scene.is-turning { cursor: grabbing; }
#lotus-scene { width: 100%; height: 100%; opacity: 0; -webkit-mask: radial-gradient(closest-side, #000 78%, transparent 100%); mask: radial-gradient(closest-side, #000 78%, transparent 100%); }
#lotus-scene[data-ready] { animation: glowBloom 1.8s var(--ease-quint) .25s both; }
/* 开场（水滴 → 莲花展开）由画布自己演；导航与首屏文字暂停在起点，花开到尾声时再出现 */
html.lotus-intro #lotus-scene[data-ready] { animation: none; opacity: 1; transform: none; }
/* “到达”只标在导航与首屏文字这两个元素上（.is-arrived），不改 <html> 的 class——后者会让整页重算样式，正好卡在衔接那一帧 */
html.lotus-intro .nav:not(.is-arrived),
html.lotus-intro .hero-copy:not(.is-arrived) .tseg,
html.lotus-intro .hero-copy:not(.is-arrived) .lead,
html.lotus-intro .hero-copy:not(.is-arrived) .cta { animation-play-state: paused; }
html.lotus-intro .nav:not(.is-arrived) { pointer-events: none; }
/* 首屏文字的模糊聚焦动画不变；只预先给它们独立图层，让模糊在合成层上完成，不必每帧重绘大字 */
html.lotus-intro .hero-copy .tseg, html.lotus-intro .hero-copy .lead, html.lotus-intro .hero-copy .cta { will-change: opacity, filter, transform; }
/* 开场模式下用与 titleFocusIn / softFocusIn 完全相同的模糊聚焦，只是起点透明度 .001 而非 0：
   完全透明的元素浏览器不预先绘制，出现那一刻才临时绘制大字，会让画面停住约 0.25 s */
html.lotus-intro .hero-copy .tseg { animation-name: titleFocusInIntro; }
html.lotus-intro .hero-copy .lead, html.lotus-intro .hero-copy .cta { animation-name: softFocusInIntro; }
@keyframes titleFocusInIntro { from { opacity: .001; filter: blur(12px); transform: translateY(.22em) scale(.985); } to { opacity: 1; filter: none; transform: none; } }
@keyframes softFocusInIntro { from { opacity: .001; filter: blur(6px); transform: translateY(10px); } to { opacity: 1; filter: none; transform: none; } }
/* 开场后的导航：不再下坠，只是慢慢浮现，和标题同时开始、比标题更轻 */
html.lotus-intro .nav { animation: navSoftIn 1.4s cubic-bezier(.25, .1, .25, 1) .1s both; }
@keyframes navSoftIn { from { opacity: .001; } to { opacity: 1; } }   /* 起点 .001 而非 0：开场中就先画好，出现时不临时绘制 */
#lotus-scene canvas { width: 100% !important; height: 100% !important; display: block; }
.lotus-fallback { display: none; position: absolute; left: 25%; top: 35%; width: 50%; }
.is-fallback .lotus-fallback { display: block; }


/* ───────── 手机里的 App 界面（首屏落点与其一共用）：1 --pt = 1 iPhone 点 ───────── */
.app-ui { position: absolute; opacity: 0; pointer-events: none; color: #2F4540; font-family: var(--zh); letter-spacing: 0; }
.sb { position: absolute; left: 0; top: 0; width: calc(402 * var(--pt)); height: auto; pointer-events: none; z-index: 3; }
/* 首页（NotebookViews：日期 11pt·字距 0.55；标题 23pt·字距 1；副标题 13pt·字距 0.7） */
.home-top { color: var(--t-muted, #4C6057); position: absolute; left: calc(16 * var(--pt)); right: calc(16 * var(--pt)); top: calc(62 * var(--pt)); height: calc(44 * var(--pt)); display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--pt)); font-size: calc(11 * var(--pt)); letter-spacing: calc(.55 * var(--pt)); white-space: nowrap; }
.home-top svg { width: calc(20 * var(--pt)); height: calc(16 * var(--pt)); margin-right: calc(12 * var(--pt)); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.home-top svg circle { fill: var(--t-bg, #ecefe2); }
.home-main { position: absolute; left: 0; right: 0; top: calc(106 * var(--pt)); bottom: calc(112 * var(--pt)); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: calc(12 * var(--pt)) calc(16 * var(--pt)); text-align: center; }
.home-lotus-slot { flex: none; height: calc(260 * var(--pt)); margin: calc(22 * var(--pt)) 0 calc(68 * var(--pt)); }
.home-h { margin: 0; font-family: var(--zh); font-size: calc(23 * var(--pt)); line-height: 1.3; letter-spacing: calc(1 * var(--pt)); white-space: pre-line; color: var(--t-ink, #2F4540); }
.home-sub { font-family: var(--zh); margin: calc(12 * var(--pt)) 0 0; font-size: calc(13 * var(--pt)); line-height: 1.35; letter-spacing: calc(.7 * var(--pt)); color: var(--t-home-muted, #61766D); }
html[lang="en"] .home-top, html[lang="en"] .tabbar em, html[lang="en"] .screen { font-family: var(--sans); }
/* 底栏（NotebookBottomBar）：分组胶囊 + 选中胶囊 + 56pt 添加键 */
.tabbar { position: absolute; left: 0; right: 0; bottom: calc(36 * var(--pt)); display: flex; justify-content: center; align-items: center; gap: calc(12 * var(--pt)); z-index: 2; }
.tb-group { display: flex; padding: calc(4 * var(--pt)); border-radius: 999px; background: var(--t-group, #DCE6DD); }
.tb-tab { min-width: calc(92 * var(--pt)); height: calc(56 * var(--pt)); padding: 0 calc(10 * var(--pt)); border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--pt)); color: var(--t-tab-off, #304C42); }
.tb-tab.on { background: var(--t-sel, #EDF1E7); color: var(--t-tab-on, #304C42); }
.tb-tab em { font-style: normal; font-weight: 500; font-size: calc(11 * var(--pt)); line-height: 1.2; opacity: .72; white-space: nowrap; }
.tb-tab.on em { opacity: 1; }
.tb-ico { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.tb-ico.lotus { --m: url(assets/ui/NavLotusOutline.svg); }
.tb-ico.book { --m: url(assets/ui/NavBookOutline.svg); opacity: .72; }
.tb-tab.on .tb-ico.lotus { --m: url(assets/ui/NavLotusSolid.svg); opacity: 1; }
.tb-tab.on .tb-ico.book { --m: url(assets/ui/NavBookSolid.svg); opacity: 1; }
.tb-tab:not(.on) .tb-ico { opacity: .72; }
.tb-add { width: calc(56 * var(--pt)); height: calc(56 * var(--pt)); border-radius: 50%; background: var(--t-add, #304C42); display: grid; place-items: center; }
.tb-add i { width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); background: var(--t-add-ink, #F1F3E8); -webkit-mask: url(assets/ui/NavCreate.svg) center / contain no-repeat; mask: url(assets/ui/NavCreate.svg) center / contain no-repeat; }

.phone-bezel { position: absolute; left: 50%; opacity: 0; border: 6px solid #161c19; box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 30px 70px -28px rgba(0,0,0,.55); pointer-events: none; transform: translateX(-50%); box-sizing: border-box; }
.pin-heading { position: absolute; left: 0; right: 0; text-align: center; color: var(--night-ink); font-size: clamp(28px, 4vw, 52px); line-height: 1.2; letter-spacing: .1em; pointer-events: none; }
.pin-heading span { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(.22em) scale(.985);
  transition: opacity 1s var(--ease-quint), filter 1s var(--ease-quint), transform 1s var(--ease-quint), color 1s var(--ease-quint); }
.pin-heading.show-a .seg-a { opacity: 1; filter: none; transform: none; }
.pin-heading.show-b .seg-a { color: #5f6c65; }
.pin-heading.show-b .seg-b { opacity: 1; filter: none; transform: none; }

/* ───────── 章节通用 ───────── */
.act, .pricing, .faq { max-width: var(--measure); margin: 0 auto; padding: clamp(120px, 16vw, 200px) var(--gutter) 0; }
.act-head { text-align: center; }
.act-no {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 13px; letter-spacing: .4em; color: var(--cinnabar);
}
.act-no::before, .act-no::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .45; }
.act-head .act-no { margin-right: -.4em; }
.act h2, .pricing h2, .faq h2 { margin-top: 26px; font-size: clamp(30px, 4.2vw, 50px); line-height: 1.3; letter-spacing: .12em; }
.act-sub { margin-top: 16px; font-size: 15px; letter-spacing: .14em; color: var(--ink-3); }

/* ───────── 其一：一条记录的一生 ───────── */
.story { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 8vw, 120px); margin-top: clamp(40px, 6vw, 80px); }
.step { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; max-width: 25em; padding-left: 28px; border-left: 1px solid var(--rule); position: relative;
  opacity: .22; transition: opacity .8s var(--ease-quint); }
.step::before { content: ""; position: absolute; left: -1px; top: 50%; width: 1px; height: 0; background: var(--ink); transform: translateY(-50%); transition: height 1s var(--ease-expo); }
.step.is-active { opacity: 1; }
.step.is-active::before { height: 120px; }
.step-no { font-size: 13px; letter-spacing: .32em; color: var(--ink-3); }
.step h3 { margin: 22px 0 22px; font-size: clamp(26px, 3vw, 36px); line-height: 1.4; letter-spacing: .1em; }
.step p:not(.step-no) { font-size: 16px; line-height: 2.1; color: var(--ink-2); }
.story-caption, .story-dots { display: none; }
.step .hint { margin-top: 14px; font-size: 12.5px !important; line-height: 1.8 !important; color: rgba(0, 0, 0, .38) !important; letter-spacing: .08em; }

.story-phone { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.device { width: min(340px, calc((100svh - 140px) * 0.46)); padding: 5px; border-radius: calc(var(--sr) + 5px); background: #161c19; box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 30px 60px -34px rgba(31, 43, 38, .5); --sr: 44px; }
/* 记录一节的样机：比视口矮一些，并让出顶部导航的位置 */
@media (min-width: 861px) {
  .story-phone { padding-top: 64px; box-sizing: border-box; }
  .story-phone .device { width: min(310px, calc((100svh - 64px - 150px) * 0.46)); }
}
/* 真机外观：金属边框 + 侧键 + 灵动岛（按 402×874pt 的 iPhone 比例） */
.device.real { position: relative; padding: 6px; border: 2.5px solid transparent; border-radius: calc(var(--sr) + 8.5px);
  background: linear-gradient(#050606, #050606) padding-box,
              linear-gradient(140deg, #e4e6e5 0%, #9a9f9d 16%, #d3d6d5 34%, #7f8482 52%, #c4c8c6 70%, #8c918f 86%, #dfe1e0 100%) border-box;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.22), 0 12px 24px -10px rgba(20, 30, 26, .28), 0 50px 80px -40px rgba(20, 30, 26, .45); }
/* 侧键：左侧操作按钮、音量加减；右侧电源键、相机控制 */
/* 侧键画在机身之外，不必压到机身下面，所以不用负 z-index（否则会被带底色的章节背景盖住） */
.device.real .hw { position: absolute; inset: 0 -4px; pointer-events: none; --m: linear-gradient(90deg, #858a88, #d9dcdb 55%, #959a98);
  background: var(--m) 0 18% / 4px 4% no-repeat, var(--m) 0 27.5% / 4px 7.5% no-repeat, var(--m) 0 37.5% / 4px 7.5% no-repeat,
              var(--m) 100% 29% / 4px 11% no-repeat, var(--m) 100% 63% / 4px 5.5% no-repeat; border-radius: 2px; }
.device.real .screen::after { content: ""; position: absolute; z-index: 20; left: 50%; top: calc(11 * var(--pt)); width: calc(124 * var(--pt)); height: calc(36 * var(--pt)); transform: translateX(-50%); border-radius: 999px; background: #000; pointer-events: none; }
.screen { position: relative; aspect-ratio: 1206 / 2622; border-radius: var(--sr); overflow: hidden; container-type: size; background: #eceee2; }
.layer { position: absolute; inset: 0; opacity: 0; transform: scale(1.02); filter: blur(6px); transition: opacity .8s var(--ease-quint), transform 1s var(--ease-expo), filter .8s var(--ease-quint); pointer-events: none; }
.screen[data-active="0"] .layer-write, .screen[data-active="1"] .layer-state,
.screen[data-active="2"] .layer-letter, .screen[data-active="3"] .layer-past { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.layer > img { width: 100%; height: 100%; object-fit: cover; }
/* 屏幕内 1pt = 100cqh / 874 */
.screen { --pt: calc(100cqh / 874); }

.layer-state { background: #b8bcb0; }
/* 状态页：MeditationStatePicker，位置按 App 真机截图量取（屏幕坐标 pt，sheet 顶 72） */
.sheet { position: absolute; inset: calc(72 * var(--pt)) 0 0; border-radius: calc(26 * var(--pt)) calc(26 * var(--pt)) 0 0; overflow: hidden;
  background: linear-gradient(180deg, #eff0e4 0%, #e9ede0 40%, #d6e3da 72%, #cbdcd4 100%); color: #2F4540; letter-spacing: 0; }
.sheet > * { position: absolute; }
.sheet-handle { top: calc(5 * var(--pt)); left: 50%; width: calc(36 * var(--pt)); height: calc(5 * var(--pt)); margin-left: calc(-18 * var(--pt)); border-radius: 9px; background: rgba(60, 60, 67, .3); }
.sheet-cancel, .sheet-title { top: calc(38 * var(--pt)); transform: translateY(-50%); font-size: calc(15 * var(--pt)); color: #4C6057; white-space: nowrap; }
.sheet-cancel { left: calc(16 * var(--pt)); font-weight: 500; }
.sheet-title { left: 50%; transform: translate(-50%, -50%); }
.sheet-prompt { left: calc(16 * var(--pt)); right: calc(16 * var(--pt)); top: calc(111.5 * var(--pt)); transform: translateY(-50%); text-align: center; font-size: calc(27 * var(--pt)); font-weight: 500; line-height: 1.25; }
.sheet-hint { left: calc(16 * var(--pt)); right: calc(16 * var(--pt)); top: calc(137 * var(--pt)); text-align: center; font-size: calc(13 * var(--pt)); line-height: 1.35; color: rgba(60, 60, 67, .6); }
.state-canvas { left: 0; top: calc(-72 * var(--pt)); width: calc(402 * var(--pt)); height: calc(874 * var(--pt)); pointer-events: none; }
.state-name { left: 0; right: 0; top: calc(583.5 * var(--pt)); transform: translateY(-50%); text-align: center; font-size: calc(25 * var(--pt)); letter-spacing: calc(3 * var(--pt)); white-space: nowrap; }
.state-range { left: calc(16 * var(--pt)); top: calc(631 * var(--pt)); transform: translateY(-50%); width: calc(370 * var(--pt)); height: calc(28 * var(--pt)); margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: grab; touch-action: pan-y; }
.state-range:active { cursor: grabbing; }
.state-range::-webkit-slider-runnable-track { height: calc(4 * var(--pt)); border-radius: 9px; background: linear-gradient(90deg, #304C42 var(--fill, 50%), rgba(120, 120, 128, .2) var(--fill, 50%)); }
.state-range::-moz-range-track { height: calc(4 * var(--pt)); border-radius: 9px; background: rgba(120, 120, 128, .2); }
.state-range::-moz-range-progress { height: calc(4 * var(--pt)); border-radius: 9px; background: #304C42; }
.state-range::-webkit-slider-thumb { -webkit-appearance: none; width: calc(37 * var(--pt)); height: calc(24 * var(--pt)); margin-top: calc(-10 * var(--pt)); border-radius: calc(12 * var(--pt)); background: #fff; box-shadow: 0 calc(1.5 * var(--pt)) calc(5 * var(--pt)) rgba(0, 0, 0, .16), 0 0 0 .5px rgba(0, 0, 0, .04); }
.state-range::-moz-range-thumb { width: calc(37 * var(--pt)); height: calc(24 * var(--pt)); border: 0; border-radius: calc(12 * var(--pt)); background: #fff; box-shadow: 0 calc(1.5 * var(--pt)) calc(5 * var(--pt)) rgba(0, 0, 0, .16); }
.state-range:focus-visible { outline-offset: 4px; border-radius: 4px; }
.state-ends { left: calc(16 * var(--pt)); right: calc(16 * var(--pt)); top: calc(661 * var(--pt)); transform: translateY(-50%); display: flex; justify-content: space-between; font-size: calc(13 * var(--pt)); color: #4C6057; }
.sheet-btn { left: calc(16 * var(--pt)); right: calc(16 * var(--pt)); top: calc(714 * var(--pt)); height: calc(52 * var(--pt)); border-radius: calc(8 * var(--pt)); background: #304C42; color: #F1F3E8; display: grid; place-items: center; font-size: calc(17 * var(--pt)); font-weight: 500; }

/* 编辑页：AfterSitting 编辑器，位置按 App 真机截图量取 */
.layer-write { background: linear-gradient(180deg, #eef0e2 0%, #e9ecdc 45%, #e0e7d8 62%); }
.ed-bar { position: absolute; left: 0; right: 0; top: calc(84 * var(--pt)); transform: translateY(-50%); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(16 * var(--pt)) 0 calc(20 * var(--pt)); font-size: calc(13.5 * var(--pt)); color: #4C6057; }
.ed-bar svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); fill: none; stroke: #2F4540; stroke-width: 1.5; stroke-linecap: round; }
.ed-bar b { position: absolute; left: 50%; transform: translateX(-50%); font-weight: 400; white-space: nowrap; }
.ed-bar span { color: rgba(76, 96, 87, .5); font-size: calc(15 * var(--pt)); }
.typing { position: absolute; left: calc(16 * var(--pt)); right: calc(16 * var(--pt)); top: calc(122 * var(--pt)); margin: 0; font-size: calc(17 * var(--pt)); line-height: 1.6; color: #2F4540; }
.typing .ph { font-style: normal; color: rgba(76, 96, 87, .62); }
.typing span:not(:empty) ~ .ph { display: none; }
.typing i { display: inline-block; width: 1.5px; height: 1.15em; margin: 0 1px; vertical-align: -.2em; background: #4a6a5c; animation: caret 1s steps(1) infinite; }
.typing span:empty + i { margin-left: 0; }
.ed-chip { position: absolute; left: calc(17 * var(--pt)); top: calc(504 * var(--pt)); transform: translateY(-50%); height: calc(40 * var(--pt)); display: flex; align-items: center; gap: calc(8 * var(--pt)); padding: 0 calc(12 * var(--pt)) 0 calc(10 * var(--pt)); border-radius: calc(20 * var(--pt)); background: rgba(255, 255, 250, .45); box-shadow: inset 0 0 0 .5px rgba(185, 204, 192, .9); font-size: calc(14.5 * var(--pt)); color: #2F4540; white-space: nowrap; }
.ed-chip canvas { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); }
.ed-chip svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); fill: none; stroke: #4C6057; stroke-width: 2; }
.layer > .ed-kb { position: absolute; left: 0; bottom: 0; top: auto; width: 100%; height: auto; object-fit: initial; }

.layer-letter { background: radial-gradient(80% 50% at 50% 10%, #f1f1e4, transparent), linear-gradient(180deg, #eceee1 0%, #e0e8dc 60%, #cadcd3 100%); }
.layer-letter .letter-slot { position: absolute; left: calc(24 * var(--pt)); width: calc(354 * var(--pt)); top: calc(437 * var(--pt)); transform: translateY(-50%); }
.letter-actions { position: absolute; top: calc(726 * var(--pt)); left: 0; right: 0; display: flex; justify-content: center; gap: calc(32 * var(--pt)); }
.letter-actions span, .letter-actions button { border: 0; padding: 0; cursor: default; width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); border-radius: 50%; background: rgba(248,248,240,.7); display: grid; place-items: center; }
.letter-actions svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); fill: none; stroke: #2f4a40; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.letter-actions .erase svg { stroke: #d24a3e; }

/* ───────── 往日：日历（CalendarMonthCell） ───────── */
.layer-past { background: linear-gradient(180deg, #eef0e3 0%, #e7ecdf 50%, #d2e1d8 80%, #c9dbd2 100%); }
.cal-seg { position: absolute; top: calc(70 * var(--pt)); left: 0; right: 0; display: flex; justify-content: center; gap: calc(56 * var(--pt)); font-size: calc(16 * var(--pt)); color: #4C6057; letter-spacing: .04em; }
.cal-seg b { font-weight: 400; color: #2F4540; position: relative; }
.cal-seg b::after { content: ""; position: absolute; left: 50%; bottom: calc(-10 * var(--pt)); width: calc(22 * var(--pt)); height: calc(2 * var(--pt)); margin-left: calc(-11 * var(--pt)); border-radius: 2px; background: #2F4540; }
.cal-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  position: absolute; width: calc(200 * var(--pt)); padding: calc(12 * var(--pt)) calc(14 * var(--pt)) calc(13 * var(--pt));
  background: #EDF1E7; box-shadow: inset 0 0 0 .5px rgba(185, 204, 192, .62), 0 calc(8 * var(--pt)) calc(24 * var(--pt)) calc(-10 * var(--pt)) rgba(32, 62, 50, .35);
  color: #2F4540; letter-spacing: .02em; pointer-events: none;
  opacity: 0; transform: translateY(calc(4 * var(--pt))); filter: blur(2px);
  transition: opacity .35s var(--ease-quint), transform .5s var(--ease-expo), filter .35s var(--ease-quint);
}

/* ───────── 花笺：App 的 ArchiveCardPaper + VerticalLetterPage，绘制在 native.js ───────── */
.letter-slot { container-type: inline-size; }
.letter {
  position: relative; width: 100%; aspect-ratio: 354 / 456; overflow: hidden;
  background: #EDF1E7;                                   /* surfaceRaised */
  box-shadow: inset 0 0 0 max(.5px, calc(100cqw / 354 * .5)) rgba(185, 204, 192, .62);  /* line · 0.62 · 0.5pt */
}
.letter-grain { position: absolute; inset: 0; opacity: .65; background-size: calc(100cqw * 384 / 354) auto; background-repeat: repeat; pointer-events: none; }
.letter canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.letter-up, .letter-low { position: absolute; display: flex; align-items: center; justify-content: center; opacity: .7; pointer-events: none; }
.letter-up img, .letter-low img { width: 100%; height: 100%; object-fit: contain; }
/* 上：落款列左上 86×144，旋转 25°；下：正文右下 94×132 */
.letter-up { left: calc(4 / 354 * 100%); top: 0; width: calc(86 / 354 * 100%); height: calc(144 / 456 * 100%); transform: rotate(25deg); }
.letter-low { left: calc(250 / 354 * 100%); top: calc(324 / 456 * 100%); width: calc(94 / 354 * 100%); height: calc(132 / 456 * 100%); }

/* ───────── 其二：写一句试试 ───────── */
.act-try { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 8vw, 120px); align-items: center; }
.act-try .try-text { max-width: 27em; }
.act-try .act-no::before { display: none; }
.try-form { margin-top: 48px; }
.try-form textarea {
  display: block; width: 100%; resize: none; border: 0; border-bottom: 1px solid var(--rule-strong); border-radius: 0;
  background: transparent; padding: 6px 0 14px; color: var(--ink);
  font-family: var(--zh); font-size: 18px; line-height: 1.9; letter-spacing: .06em; outline: none;
  transition: border-color .4s;
}
.try-form textarea::placeholder { color: var(--ink-3); }
.try-form textarea:focus { border-color: var(--cinnabar); outline: none; }
.try-states { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px; font-size: 14px; letter-spacing: .2em; }
.try-states button { background: none; border: 0; padding: 2px 0; cursor: pointer; color: var(--ink-3); border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.try-states button:hover { color: var(--ink); }
.try-states button[aria-checked="true"] { color: var(--ink); border-color: var(--ink); }
.try-actions { display: flex; align-items: center; gap: 22px; margin-top: 34px; flex-wrap: wrap; }
.try-actions .btn { min-width: 120px; }
.try-note { font-size: 12.5px; letter-spacing: .1em; color: var(--ink-3); max-width: 18em; line-height: 1.8; }
.try-paper { width: min(100%, 440px); justify-self: center; }

/* ───────── 其三：余静不做的事 ───────── */
.act-nots { max-width: none; padding: 0; height: 330vh; height: 330svh; color: var(--night-ink); }
.nots-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--gutter); }
.act-nots .act-no { color: #c4644f; margin-right: -.4em; }
.nots-list { list-style: none; margin: 44px 0 0; padding: 0; font-size: clamp(22px, 2.8vw, 34px); line-height: 1.4; letter-spacing: .14em; }
/* 同一句换行时行距紧，句与句之间留得更开（单行时总间距与原先 2.1 倍行高一致） */
.nots-list li + li { margin-top: .7em; }
.nots-list li { opacity: 0; transform: translateY(12px); filter: blur(8px); transition: opacity .9s var(--ease-quint), transform .9s var(--ease-quint), filter .9s var(--ease-quint), color 1s; }
/* 划线用行内背景画在每一行文字上（换行时每行各自一道），从左向右划开 */
.nots-list li span { display: inline; padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 56% / 0% 1px; transition: background-size .9s var(--ease-expo); }
.nots-list li.on { opacity: 1; transform: none; filter: none; }
.nots-list li.off { color: #57625c; }
.nots-list li.off span { background-size: 100% 1px; }
.nots-last { margin-top: 40px; font-size: clamp(30px, 4.4vw, 56px); letter-spacing: .16em; line-height: 1.3; opacity: 0; filter: blur(12px); transform: translateY(.22em) scale(.985); transition: opacity 1.2s var(--ease-quint), filter 1.2s var(--ease-quint), transform 1.2s var(--ease-quint); }
.nots-last.on { opacity: 1; filter: none; transform: none; }

/* ───────── 价目 ───────── */
/* 价目：左价格卡 + 右权益清单（参考 Readmate / ScreenTune）。价格卡配色取自 App 付费页：ivory #F2F6DF、forest #03251A */
.pricing { max-width: 1040px; padding-top: clamp(64px, 8vw, 104px); }   /* 紧接在夜色段的圆角之后，上方留白收小 */
.plan { --ivory: 242, 246, 223; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: stretch; margin-top: 56px; }
.plan-card { position: relative; min-height: 460px; display: flex; flex-direction: column; justify-content: space-between; padding: 32px; border-radius: 24px; overflow: hidden;
  color: rgb(var(--ivory)); background: #081611; box-shadow: 0 40px 80px -44px rgba(8, 22, 17, .6); }
.plan-card { background: #091611; }
/* 价格卡背景：池塘莲花照片铺满；左侧本是暗水面，只在顶部轻压、底部压暗，保证价格、按钮和小字清楚 */
.plan-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%; }
.plan-card::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 18, 14, .55) 0%, rgba(8, 18, 14, .15) 45%, rgba(8, 18, 14, 0) 70%),
              linear-gradient(180deg, rgba(8, 18, 14, .25) 0%, rgba(8, 18, 14, 0) 28%, rgba(8, 18, 14, .35) 62%, rgba(8, 18, 14, .88) 100%); }
.plan-top, .plan-bottom { position: relative; z-index: 1; }
.plan-once { font-size: 12.5px; letter-spacing: .24em; color: rgba(var(--ivory), .62); }
.plan-amount { margin-top: 6px; font-family: "Lora", serif; font-size: clamp(48px, 6vw, 64px); line-height: 1.05; letter-spacing: 0; color: rgb(var(--ivory)); }
.plan-name { font-size: clamp(22px, 2.4vw, 26px); letter-spacing: .14em; color: rgb(var(--ivory)); }
.plan-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; margin-top: 20px; border-radius: 12px; background: rgb(var(--ivory)); color: #03251A;
  font-size: 16px; font-weight: 600; letter-spacing: .1em; cursor: default; }
.plan-btn { background: linear-gradient(180deg, #f8fbea 0%, #eaeed7 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(3, 37, 26, .12), 0 0 0 .5px rgba(0, 0, 0, .35),
              0 1px 2px rgba(0, 0, 0, .25), 0 10px 22px -10px rgba(0, 0, 0, .6);
  transition: transform .25s var(--ease-quint), box-shadow .25s var(--ease-quint), filter .25s; }
.plan-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(3, 37, 26, .12), 0 0 0 .5px rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .25), 0 14px 26px -10px rgba(0, 0, 0, .6); }
.plan-btn:active { transform: translateY(0); transition-duration: .08s; }
.plan-btn svg { width: 17px; height: 17px; fill: currentColor; margin-top: -2px; }
.plan-note { margin-top: 12px; font-size: 12px; line-height: 1.7; letter-spacing: .04em; color: rgba(var(--ivory), .55); }
/* 纯线框莲花：青绿渐变与淡暖光增加层次，米白文字与按钮保持清晰。 */
.plan-card-outline { isolation: isolate;
  background: radial-gradient(ellipse at 78% 8%, rgba(205, 190, 135, .18), transparent 64%),
              radial-gradient(ellipse at 8% 65%, rgba(65, 116, 88, .24), transparent 70%),
              linear-gradient(155deg, #345348 0%, #24483b 45%, #16372b 100%); }
.plan-card-outline .plan-art { object-position: 50% 40%; opacity: .65; mix-blend-mode: screen; }
.plan-card-outline::after { background: linear-gradient(180deg, transparent 42%, rgba(22, 55, 43, .16) 64%, rgba(16, 40, 31, .64) 100%); }
/* 权益清单：细线分隔，每行一项 */
.plan-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plan-benefits li { flex: 1; display: flex; gap: 14px; align-items: center; align-content: center; padding: 22px 4px; }
/* 只在条目之间留一道更淡的细线，去掉首尾的线 */
.plan-benefits li + li { border-top: 1px solid rgba(31, 43, 38, .08); }
.plan-badge { flex: none; width: 20px; height: 20px; background: var(--ink); opacity: .75; -webkit-mask: url(assets/ui/badge.svg) center / contain no-repeat; mask: url(assets/ui/badge.svg) center / contain no-repeat; }
.plan-b-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 17px; line-height: 1.5; letter-spacing: .06em; color: var(--ink); }
.plan-b-detail { margin-top: 4px; font-size: 13.5px; line-height: 1.7; letter-spacing: .03em; color: rgba(0, 0, 0, .45); }
.plan-tag { font-style: normal; font-size: 11px; line-height: 16px; letter-spacing: .06em; padding: 1px 8px 2px; border-radius: 999px; color: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 .7px rgba(0, 0, 0, .25); white-space: nowrap; }
html[lang="en"] .plan-once, html[lang="en"] .plan-name, html[lang="en"] .plan-b-title, html[lang="en"] .plan-btn { letter-spacing: 0; }
@media (max-width: 860px) {
  .plan { grid-template-columns: 1fr; }
  .plan-card { min-height: 420px; padding: 26px; border-radius: 20px; }
}

/* ───────── 问答 ───────── */
.faq-list { max-width: 760px; margin: 64px auto 0; border-top: 1px solid var(--rule); }
details { border-bottom: 1px solid var(--rule); }
summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: .04em; transition: color .3s; }
summary::-webkit-details-marker { display: none; }
summary::before, summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 13px; height: 1px; background: var(--ink-2); transition: transform .5s var(--ease-expo); }
summary::after { transform: rotate(90deg); }
details[open] summary::after { transform: rotate(0); }
summary:hover { color: var(--ink-2); }
details p { padding: 0 40px 24px 0; font-size: 15px; color: var(--ink-2); line-height: 1.8; }
/* 英文：问答不加字距；问题用系统字体的中等字重，读起来更紧凑 */
html[lang="en"] summary, html[lang="en"] details p { letter-spacing: 0; }
@media (max-width: 760px) { summary { font-size: 15px; padding: 18px 32px 18px 0; } details p { font-size: 14px; padding-right: 32px; } }

/* ───────── 收尾与页脚 ───────── */
.closing { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(140px, 16vw, 220px) 16px clamp(130px, 15vw, 200px); }
/* 收尾成为独立的一段：从纸色渐入 App 的浅青瓷，图标下方几圈极淡的水纹，呼应首屏水面上的莲；页脚延续同一底色 */
.closing { --band: #d8e4db; position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, var(--paper) 0%, #e9eddf 36%, #dde8de 72%, var(--band) 100%); }
/* 一束极淡的光从上方落在图标上，图标周围一圈柔和的光晕；没有线条 */
.closing::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: min(640px, 130vw); height: calc(clamp(140px, 16vw, 220px) + 160px); transform: translateX(-50%);
  background: radial-gradient(ellipse 34% 100% at 50% 0%, rgba(255, 253, 242, .6), rgba(255, 253, 242, 0) 100%); pointer-events: none; }
.closing::after { content: ""; position: absolute; z-index: -1; left: 50%; top: calc(clamp(140px, 16vw, 220px) + 32px); width: 520px; height: 300px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 252, 238, .75), rgba(255, 252, 238, 0)); pointer-events: none; }
.footer { position: relative; background: #d8e4db; box-shadow: 0 0 0 100vmax #d8e4db; clip-path: inset(0 -100vmax); }
/* 分隔线与页脚内容同宽：从图标左缘到版权文字右缘 */
.footer::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: rgba(31, 43, 38, .1); }
.app-icon { display: block; width: 64px; height: 64px; margin: 0; filter: drop-shadow(0 10px 18px rgba(31, 43, 38, .16)); }
/* 字距会在末尾多出一截空白，用等量的 text-indent 抵消，视觉上才真正居中 */
.closing h2 { margin: 30px 0 0; font-size: clamp(28px, 3.4vw, 40px); font-weight: 400; line-height: 1.4; letter-spacing: .18em; text-indent: .18em; }
/* 标题下一行副文案：纯黑 + 透明度，与其他小字一致 */
.close-sub { max-width: 30em; margin: 14px auto 0; font-size: 15px; line-height: 1.9; letter-spacing: .08em; color: rgba(0, 0, 0, .45); text-wrap: balance; }
html[lang="en"] .close-sub { letter-spacing: 0; }
.close-cta { margin-top: 32px; }
.close-btn { height: 50px; padding: 0 28px; font-size: 15px; letter-spacing: .06em; gap: 8px; }
.close-btn svg { width: 17px; height: 17px; margin-top: -3px; }
html[lang="en"] .closing h2 { text-indent: 0; }
.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--measure); margin: 0 auto; padding: 26px var(--gutter) 40px; font-size: 12.5px; letter-spacing: .12em; color: var(--ink-2); }
.footer .brand { font-size: 16px; color: var(--ink); }
.footer .brand img { width: 24px; height: 24px; }
.footer nav { display: flex; gap: 26px; flex-wrap: wrap; }
/* 页脚文字与链接悬停效果与顶部导航一致：同色，悬停变深并从左划出一道下划线 */
.footer nav a { position: relative; transition: color .3s; }
.footer nav a::after { content: ""; position: absolute; left: 0; right: .12em; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-expo); }
.footer nav a:hover { color: var(--ink); }
.footer nav a:hover::after { transform: scaleX(1); }

/* ───────── 入场动效（ScreenTune：titleFocusIn / softFocusIn / scaleUp） ───────── */
[data-a] { opacity: 0; transition-delay: var(--d, 0ms); }
[data-a="t"] { filter: blur(12px); transform: translateY(.22em) scale(.985); transition: opacity 1.1s var(--ease-expo), filter 1.1s var(--ease-expo), transform 1.1s var(--ease-expo); transition-delay: var(--d, 0ms); }
[data-a="s"] { filter: blur(6px); transform: translateY(12px); transition: opacity 1s var(--ease-expo), filter 1s var(--ease-expo), transform 1s var(--ease-expo); transition-delay: var(--d, 0ms); }
[data-a="c"] { transform: translateY(30px) scale(.97); transition: opacity 1.1s var(--ease-expo), transform 1.3s var(--ease-expo); transition-delay: var(--d, 0ms); }
[data-a].in { opacity: 1; filter: none; transform: none; }

@keyframes headerDrop { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes titleFocusIn { from { opacity: 0; filter: blur(12px); transform: translateY(.22em) scale(.985); } to { opacity: 1; filter: none; transform: none; } }
@keyframes softFocusIn { from { opacity: 0; filter: blur(6px); transform: translateY(10px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes glowBloom { 0% { opacity: 0; transform: translateY(8%) scale(.82); } 30% { opacity: .55; } 100% { opacity: 1; transform: none; } }
@keyframes caret { 50% { opacity: 0; } }

/* ───────── 窄屏 ───────── */
@media (max-width: 860px) {
  .nav-links { display: none; }
  br.wide { display: none; }
  .hero-pin { height: 250vh; height: 250svh; }

  /* 其一：手机与当前文字一起固定，步骤本身只作滚动距离 */
  .story { display: flex; flex-direction: column; margin-top: 24px; }
  /* 手机与文字作为一组，在导航以下的可见区域里垂直居中（dvh 随 Safari 地址栏收起而变化，底部不再空一大块）；文字居中，下方四个进度点 */
  .story-phone { order: -1; top: 56px; height: calc(100svh - 56px); height: calc(100dvh - 56px); flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 8px 0 16px; z-index: 1; }
  .device { align-self: center; width: min(250px, calc((100svh - 56px - 250px) * 0.46)); width: min(250px, calc((100dvh - 56px - 250px) * 0.46)); padding: 4px; --sr: 31px; }
  .story-steps { margin-top: calc(56px - 100svh); margin-top: calc(56px - 100dvh); }
  .step { min-height: 80svh; opacity: 0 !important; visibility: hidden; }
  .story-caption { display: block; min-height: 8.6em; max-width: 21em; padding: 0 var(--gutter); text-align: center; transition: opacity .5s var(--ease-quint), transform .6s var(--ease-expo), filter .5s; }
  .story-caption.swap { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  .story-caption .step-no { font-size: 12px; color: rgba(0, 0, 0, .4); }
  .story-caption h3 { margin: 6px 0 6px; font-size: 21px; letter-spacing: .08em; line-height: 1.45; }
  .story-caption p:not(.step-no) { font-size: 14px; line-height: 1.8; color: var(--ink-2); }
  .story-caption .hint { display: none; }
  .story-dots { display: flex; gap: 6px; margin-top: -6px; }
  .story-dots i { width: 5px; height: 5px; border-radius: 3px; background: rgba(31, 43, 38, .18); transition: width .35s var(--ease-expo), background-color .35s; }
  .story-dots i.on { width: 16px; background: rgba(31, 43, 38, .55); }

  .act-try { grid-template-columns: 1fr; }
  .try-paper { width: min(100%, 340px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-pin { height: 100vh; height: 100svh; }
  .act-nots { height: auto; }
  .nots-sticky { position: static; padding: 140px var(--gutter); height: auto; }
  .nav, .tseg, .lead, .cta, #lotus-scene[data-ready] { animation: none; opacity: 1; }
  [data-a], .nots-list li, .nots-last { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
  .layer { transition: none; filter: none; transform: none; }
}

/* 英文：拉丁字母不加宽字距 */
html[lang="en"] body, html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] .btn,
html[lang="en"] .act-sub, html[lang="en"] .nav-links, html[lang="en"] .step-no, html[lang="en"] .nots-list,
html[lang="en"] .nots-last, html[lang="en"] .plan-name, html[lang="en"] .pin-heading { letter-spacing: 0; }
html[lang="en"] .act-no { letter-spacing: .2em; }
html[lang="en"] .hero-copy h1 { letter-spacing: -.01em; text-indent: 0; }
/* 标题两段并成一行：英文、韩文两句之间要有空格 */
html[lang="en"] .tseg + .tseg, html[lang="ko"] .tseg + .tseg,
html[lang="en"] .pin-heading .seg-b, html[lang="ko"] .pin-heading .seg-b { margin-left: .3em; }
html[lang="ja"] .act-sub, html[lang="ko"] .act-sub { letter-spacing: .06em; }

/* 多语言排版：不折断导航，标题平衡断行，韩文按词换行 */
.nav-links a, .lang-btn, .nav .btn { white-space: nowrap; }
.nav.is-floating { max-width: min(760px, calc(100% - 24px)); }
h1, h2, h3, .lead, .act-sub, .pin-heading, .nots-last { text-wrap: balance; }
p, li, summary { text-wrap: pretty; }
html[lang="ko"] body { word-break: keep-all; overflow-wrap: anywhere; }
html[lang="ja"] body { line-break: strict; }
.lead { max-width: 34em; }
html[lang="en"] .lead, html[lang="en"] .fine, html[lang="en"] .try-note, html[lang="en"] .plan-note { letter-spacing: 0; }
html:not([lang^="zh"]) .nav-links { gap: 22px; letter-spacing: .02em; }
.try-states-label { color: var(--ink-3); margin-right: 4px; }
html[lang="en"] .plan-price .once, html[lang="en"] .plan-planned, html[lang="en"] .try-states { letter-spacing: .02em; }
.layer > .sb { width: 100%; height: auto; object-fit: initial; }
.layer-state > .sb { opacity: .55; }   /* 弹层下方被压暗的状态栏 */

/* 往日：点日期打开当天记录（ArchiveCanvas.readingLayer）
   背景模糊 6pt、透明度 0.2（easeOut 0.24s）；纸卡原地淡入（spring 0.42/0.88 → 近似曲线），收起 spring 0.34/0.92 */
.layer-past .cal-canvas, .layer-past .cal-seg, .layer-past .tabbar { transition: filter .24s ease-out, opacity .24s ease-out; }
.layer-past.is-reading .cal-canvas, .layer-past.is-reading .cal-seg, .layer-past.is-reading .tabbar { filter: blur(calc(6 * var(--pt))); opacity: .2; }
.cal-canvas { cursor: default; }
.cal-detail { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.layer-past.is-reading .cal-detail { pointer-events: auto; }
.cal-detail-back { position: absolute; inset: 0; }
.cal-detail .letter-slot, .cal-stack { position: absolute; left: calc(24 * var(--pt)); width: calc(354 * var(--pt)); top: calc(437 * var(--pt)); transform: translateY(-50%);
  opacity: 0; transition: opacity .34s cubic-bezier(.3, .9, .3, 1); }
.cal-detail .letter-slot .letter { box-shadow: inset 0 0 0 .5px rgba(185, 204, 192, .62), 0 calc(10 * var(--pt)) calc(40 * var(--pt)) calc(-6 * var(--pt)) rgba(32, 62, 50, .13); }
/* 同一天有多条：后面叠一张纸（CalendarNoteStack：缩小 3.5%、下移 20pt、圆角 14pt） */
.cal-detail.stacked .letter-slot { width: calc(354 * .92 * var(--pt)); left: calc((402 - 354 * .92) / 2 * var(--pt)); }
.cal-detail.stacked .letter-slot .letter { border-radius: calc(14 * var(--pt)); }
.cal-stack { display: none; border-radius: calc(14 * var(--pt)); background: #EDF1E7; box-shadow: inset 0 0 0 .5px rgba(185, 204, 192, .28), 0 calc(5 * var(--pt)) calc(24 * var(--pt)) rgba(32, 62, 50, .10); }
.cal-detail.stacked .cal-stack { display: block; width: calc(354 * .92 * var(--pt)); left: calc((402 - 354 * .92) / 2 * var(--pt)); transform: translateY(calc(-50% + 20 * var(--pt))) scale(.965); }
.cal-detail .letter-actions { opacity: 0; transition: opacity .34s cubic-bezier(.3, .9, .3, 1); }
.cal-detail .cal-close { cursor: pointer; }
.layer-past.is-reading .cal-detail .letter-slot, .layer-past.is-reading .cal-detail .letter-actions { opacity: 1; transition-duration: .42s; }
.layer-past.is-reading .cal-stack { opacity: 1; transition-duration: .42s; }

/* ───────── 其二：三种外观（NotebookStyle 的 light / ink / gold 配色） ───────── */
.act-theme { --band: #f2f1e8; background: var(--band); transition: background-color .9s ease, color .9s ease; }
/* 青瓷外观时，这一节下半段渐入浅青瓷，底边与下一节的纸色形成分界，样机正好裁在这条分界上；深色外观时淡出 */
.act-theme { position: relative; isolation: isolate; }
.act-theme::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none;
  background: linear-gradient(180deg, rgba(221, 230, 219, 0) 0%, #e4eadf 55%, #d9e3d8 100%); transition: opacity .9s ease; }
.act-theme:not([data-theme="light"])::after { opacity: 0; }
.act-theme[data-theme="ink"] { --band: #091611; color: #E0E6DD; }
.act-theme[data-theme="gold"] { --band: #171613; color: #EFE5D4; }
.theme-inner { padding-bottom: clamp(100px, 12vw, 160px); }
.act-theme[data-theme="ink"] .act-no { color: #c4644f; }
.act-theme[data-theme="gold"] .act-no { color: #C5A166; }
.act-theme .act-sub { transition: color .9s ease; }
.theme-stage { display: flex; flex-direction: column; align-items: center; margin-top: clamp(36px, 4vw, 52px); }
.theme-device { width: min(300px, 70vw); transition: background-color .9s ease, box-shadow .9s ease; }
/* 只露出样机上部（到首页标语下方），机身放大，并从这一节的底边出画 */
.act-theme .theme-inner { padding-bottom: 0; }
/* 左右留足余量，投影不被裁成方块；下沿直接裁在这一节的底边 */
.theme-crop { --w: min(400px, 84vw); --pad: min(120px, 7vw); width: calc(var(--w) + 2 * var(--pad)); height: calc(var(--w) * 2.17 * .795);   /* 手机露出约 79.5% */ margin: 0 calc(-1 * var(--pad)); padding: 2px var(--pad) 0; box-sizing: border-box; overflow: hidden; }
.theme-crop .theme-device { width: var(--w); }
.act-theme:not([data-theme="light"]) .theme-device:not(.real) { background: #050807; box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 40px 80px -30px rgba(0,0,0,.6); }
/* 暗色外观：边框与侧键换成近黑，融进背景，不再泛金属亮光 */
.act-theme:not([data-theme="light"]) .theme-device.real { box-shadow: 0 0 0 .5px rgba(255,255,255,.06), 0 40px 80px -30px rgba(0,0,0,.6);
  background: linear-gradient(#030404, #030404) padding-box, linear-gradient(140deg, #2b2e2d 0%, #121414 30%, #1f2221 55%, #0c0d0d 80%, #232625 100%) border-box; }
.act-theme:not([data-theme="light"]) .theme-device.real .hw { --m: linear-gradient(90deg, #111312, #2a2d2c 55%, #151716); }
/* 屏幕底色随外观变深，避免圆角抗锯齿处透出浅色细边 */
.theme-device .screen { background: #eceee2; transition: background-color .9s ease; }
.act-theme[data-theme="ink"] .theme-device .screen { background: #091611; }
.act-theme[data-theme="gold"] .theme-device .screen { background: #161512; }
.ts { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.act-theme[data-theme="light"] .ts-light, .act-theme[data-theme="ink"] .ts-ink, .act-theme[data-theme="gold"] .ts-gold { opacity: 1; }
.ts-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ts .home-main { pointer-events: none; }
.ts-ink { --t-bg: #0b1813; --t-ink: #E0E6DD; --t-muted: #A8B5AD; --t-home-muted: rgba(158, 173, 164, .76); --t-group: #13231B; --t-sel: #294233; --t-tab-on: #E7EFE6; --t-tab-off: #E0E6DD; --t-add: #315A46; --t-add-ink: #E7EFE6; }
.ts-gold { --t-bg: #161512; --t-ink: #EFE5D4; --t-muted: #C1B49D; --t-home-muted: #BCAF98; --t-group: #211F1A; --t-sel: #3D3323; --t-tab-on: #D4B77E; --t-tab-off: #C1B49D; --t-add: #C5A166; --t-add-ink: #211A10; }
/* 外观切换：App 底栏式的胶囊分段控件，选中衬底滑动（NotebookBottomBar：0.34s，曲线 0.22,0.8,0.25,1） */
.theme-pick { position: relative; display: inline-flex; padding: 4px; margin-bottom: 40px; border-radius: 999px;
  background: #e8e7dc; box-shadow: inset 0 1px 2px rgba(31, 43, 38, .06), inset 0 0 0 .5px rgba(31, 43, 38, .08); transition: background-color .9s ease, box-shadow .9s ease; }  /* 取自纸色、略深的暖调轨道 */
.act-theme[data-theme="ink"] .theme-pick { background: #13231B; box-shadow: inset 0 0 0 1px rgba(224, 230, 221, .06); }
.act-theme[data-theme="gold"] .theme-pick { background: #211F1A; box-shadow: inset 0 0 0 1px rgba(239, 229, 212, .06); }
.theme-thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: linear-gradient(180deg, #faf9f3, #f3f2ea);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 .5px rgba(31, 43, 38, .08), 0 1px 2px rgba(31, 43, 38, .08), 0 4px 10px -4px rgba(31, 43, 38, .14); transition: transform .34s cubic-bezier(.22, .8, .25, 1), width .34s cubic-bezier(.22, .8, .25, 1), background-color .9s ease; }
.act-theme[data-theme="ink"] .theme-thumb { background: #294233; box-shadow: none; }
.act-theme[data-theme="gold"] .theme-thumb { background: #3D3323; box-shadow: none; }
.theme-pick button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: none;
  color: inherit; cursor: pointer; font-size: 14px; letter-spacing: .08em; white-space: nowrap; opacity: .6; transition: opacity .3s; }
.theme-pick button:hover { opacity: .85; }
.theme-pick button[aria-checked="true"] { opacity: 1; }
.theme-pick i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(127,127,127,.35); }
.theme-pick [data-theme="light"] i { background: linear-gradient(180deg, #eef0e4, #c9dcd3); }
.theme-pick [data-theme="ink"] i { background: radial-gradient(circle at 50% 30%, #3b5b44, #091611 70%); }
.theme-pick [data-theme="gold"] i { background: radial-gradient(circle at 50% 30%, #e8c47c, #171613 72%); }
.theme-pick .lock { width: 11px; height: 11px; margin-left: -2px; fill: none; stroke: #C5A166; stroke-width: 1.2; stroke-linejoin: round; }
.act-theme[data-theme="light"] .theme-pick .lock { stroke: #a8874e; }
@media (max-width: 520px) { .theme-pick button { padding: 0 12px; font-size: 13px; gap: 6px; } }
html[lang="en"] .theme-pick button, html[lang="en"] .act-head > h2:first-child { margin-top: 0; }
.nots-sticky > .nots-list:first-child { margin-top: 0; }


/* 小字：不用带色相的灰，统一为纯黑 / 纯白加透明度 */
.act-sub { color: rgba(0, 0, 0, .45); }
.act-theme:not([data-theme="light"]) .act-sub { color: rgba(255, 255, 255, .5); }
.plan-badge { align-self: flex-start; margin-top: calc((17px * 1.5 - 20px) / 2); }
.plan-benefits li { align-items: flex-start; justify-content: flex-start; flex-direction: row; }
.plan-benefits li { display: grid; grid-template-columns: 20px 1fr; column-gap: 14px; align-content: center; }

/* 英文：照 App 的分工——标题与展示性文字用 Lora（NotebookStyle.serif），其余界面与正文用系统字体 SF Pro（NotebookTypography.ui） */
html[lang="en"] { --zh: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] .pin-heading,
html[lang="en"] .nots-list, html[lang="en"] .nots-last,
html[lang="en"] .plan-amount, html[lang="en"] .plan-name,
html[lang="en"] .home-h, html[lang="en"] .home-sub,
html[lang="en"] .sheet-prompt, html[lang="en"] .state-name { font-family: "Lora", Georgia, serif; }
html[lang="en"] .brand { font-family: "Lora", Georgia, serif; }

/* 按钮文字用系统字体（SF / 苹方 / 冬青等，随页面语言），不用衬线 */
.btn, .plan-btn { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; letter-spacing: .04em; }
html[lang="en"] .btn, html[lang="en"] .plan-btn { letter-spacing: 0; }

/* 字重分层：大标题 400；中小标题（步骤标题、手机上的步骤说明标题、价格卡的方案名）500，免得细笔画发虚 */
.step h3, .story-caption h3, .plan-name { font-weight: 500; }

:root { --sec-r: 32px; }   /* 分段圆角：色块之间的弧形交界 */
/* ───────── 分段圆角（参考 ScreenTune）：收尾色带下沿圆角压在深绿（App 墨绿 #123024）页脚上 ───────── */
/* 上沿从纸色渐入，与问答融成一片；整体高度收短 */
.closing { --pt: clamp(96px, 10vw, 140px); margin-top: clamp(40px, 6vw, 80px); padding: var(--pt) 16px clamp(88px, 9vw, 128px);
  background: linear-gradient(180deg, var(--paper) 0%, #ebeee3 32%, #e5ebe0 64%, #dfe7dd 100%); border-radius: 0 0 var(--sec-r) var(--sec-r); z-index: 1; }
.closing::before { opacity: .7; height: calc(var(--pt) + 150px); -webkit-mask: linear-gradient(transparent, #000 45%); mask: linear-gradient(transparent, #000 45%); }
.closing::after { top: calc(var(--pt) + 32px); }
.footer { padding: calc(var(--sec-r) + 28px) var(--gutter) 23px; color: rgba(238, 240, 226, .6);
  background: #123024; box-shadow: 0 0 0 100vmax #123024; clip-path: inset(calc(-1 * var(--sec-r)) -100vmax 0 -100vmax); }   /* 向上多铺一段圆角高度，露在收尾模块的圆角后面 */
.footer::before { display: none; }
.footer .brand { color: #eef0e2; }
.footer nav a:hover { color: #eef0e2; }
/* 外观与“不做的事”：下一段向上压在上一段上，圆角朝上——“不做的事”的夜色上沿圆角压住外观；价目的纸色上沿圆角压住夜色（用一块纸色圆角补在夜色底部） */
.act-nots { position: relative; z-index: 3; margin-top: calc(-1 * var(--sec-r)); padding-top: var(--sec-r); background: var(--night); border-radius: var(--sec-r) var(--sec-r) 0 0; }
.act-nots::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--sec-r); background: var(--paper); border-radius: var(--sec-r) var(--sec-r) 0 0; }

body.over-nots { background-color: var(--paper); }

/* 焦点：全站统一为朱砂色描边，只在键盘操作（focus-visible）时出现，跟随元素自身圆角 */
:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
summary:focus-visible { outline-offset: 4px; border-radius: 4px; }

/* ───────── 语言切换：导航只留地球图标（与“下载”按钮同高同圆角），页脚显示当前语言；手机上只在页脚 ───────── */
/* 导航：地球 + 语言缩写 + 小箭头，无底色（参考常见产品站的样式） */
.lang-nav .lang-btn { gap: 5px; padding: 0 10px; font-size: 13px; font-weight: 500; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(31, 43, 38, .14); }
.theme-dark .nav.is-floating .lang-nav .lang-btn { box-shadow: inset 0 0 0 1px rgba(230, 232, 221, .16); }
.lang-nav .lang-btn > svg:first-child { width: 16px; height: 16px; }
.lang-nav .lang-abbr { min-width: 1em; text-align: center; font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
.lang-nav .lang-chev, .lang-sheet .lang-chev { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease-quint); }
.lang-nav .lang-btn[aria-expanded="true"] .lang-chev, .lang-sheet .lang-btn[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }
.foot-end { display: flex; align-items: center; gap: 22px; }
.lang-foot .lang-btn { height: 30px; padding: 0 8px; margin: 0 -8px; font-size: 12.5px; letter-spacing: inherit; color: inherit; opacity: 1; }
.lang-foot .lang-btn:hover, .lang-foot .lang-btn[aria-expanded="true"] { background: rgba(238, 240, 226, .08); color: #eef0e2; }
.lang-foot .lang-btn svg { width: 14px; height: 14px; }
/* 页脚菜单挂在 body 上，fixed 定位（坐标由 lang.js 计算），样式与导航菜单相同 */
.lang-menu.lang-menu-float { position: fixed; top: auto; right: auto; z-index: 60; }
@media (max-width: 760px) {
  .lang-nav { display: none; }
}
/* 导航按钮：苹果图标 + 下载 App，与页面主按钮“在 App Store 下载”是同一个动作的短版 */
.nav-cta { gap: 6px; }
.nav-cta svg { width: 14px; height: 14px; margin-top: -2px; }
/* 苹果图标统一按字号换算：图形本身高度 ≈ 1em（与一个汉字等高），所有按钮比例一致 */
.btn svg, .plan-btn svg, .nav-cta svg, .close-btn svg { width: 1.26em; height: 1.26em; margin-top: -.06em; flex: none; }

/* 页脚：上方左侧名字、右侧法律链接与语言；细线下方左侧版权，右侧 Made by */
.footer { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand end" "copy made"; align-items: center; row-gap: 40px; column-gap: 32px; padding-top: 48px; padding-bottom: 28px; }
.footer::after { content: ""; grid-row: 2; grid-column: 1 / -1; align-self: start; height: 1px; background: rgba(238, 240, 226, .1); }
.footer .brand { grid-area: brand; }
.foot-copy { grid-area: copy; margin: 0; padding-top: 20px; }
.foot-made { grid-area: made; justify-self: end; padding-top: 20px; }
.foot-copy, .foot-made { font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif; letter-spacing: .02em; }   /* 版权与署名用系统字体 */
.foot-end { grid-area: end; justify-self: end; display: flex; align-items: center; gap: 22px; }   /* 与链接间距一致 */
.foot-legal { display: flex; gap: 22px; }
.footer nav a { position: relative; transition: color .3s; }
@media (max-width: 600px) {
  /* 手机宽度（放不下同一行时）：名字、法律链接 + 语言同属上方一块；细线在这一块之下，最下“版权 · Made by”分居两端
     节奏：距上 40 → 名字 → 18 → 链接与语言 → 28 → 细线 → 20 → 版权 → 32 */
  .footer { grid-template-columns: 1fr auto; grid-template-areas: "brand brand" "end end" "copy made"; row-gap: 0; align-items: center; text-align: left; line-height: 1.6;
    padding-top: 40px; padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
  .footer .brand { margin-bottom: 18px; }
  /* 链接与语言同一行、左对齐，间距 22 与大屏一致；放不下时语言换到下一行，仍与左边对齐 */
  .foot-end { justify-self: start; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px 22px; font-size: 12px; letter-spacing: .02em; }
  .foot-end .lang-foot .lang-btn { font-size: inherit; }
  .footer .foot-legal { display: contents; }
  html[lang="ja"] .foot-end { letter-spacing: 0; }
  .footer::after { grid-row: 3; margin-top: 28px; }
  .foot-copy, .foot-made { padding-top: 48px; font-size: 12px; }
}

/* 页脚“揭开”：.foot-stage 向上叠进收尾模块的最后一段，里面的页脚 sticky 贴底且层级更低，
   滚到底时收尾模块（不透明、z-index 1、下沿圆角）向上滑开，页脚原地露出 */
:root { --reveal: min(360px, 42vh); }
.foot-stage { position: relative; margin-top: calc(-1 * var(--reveal)); }
.foot-spacer { height: var(--reveal); }
.footer { position: sticky; bottom: 0; z-index: 0; }
.closing { position: relative; z-index: 1; }

/* 版权后的署名：可点击，跳转个人网站；悬停与其他页脚链接一致（变亮 + 下划线划出） */
.foot-made { position: relative; transition: color .3s; }
.foot-made::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-expo); }
.foot-made:hover { color: #eef0e2; }
.foot-made:hover::after { transform: scaleX(1); }

/* 导航两种状态：页顶时“下载 App”与语言按钮同为浅描边、无底色；上滑收成浮动胶囊后，填充渐显成实色按钮，
   填充用 ::before 叠层，便于淡入淡出 */
.nav-cta { position: relative; isolation: isolate; background: transparent; }
.nav-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, #364c41 0%, #27392f 52%, #1f2f27 100%); transition: opacity var(--nav-t); }
.nav:not(.is-floating) .nav-cta { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(31, 43, 38, .14); transition: color var(--nav-t), box-shadow var(--nav-t), transform .25s var(--ease-quint), background-color .3s; }
.nav:not(.is-floating) .nav-cta::before { opacity: 0; }
.nav:not(.is-floating) .nav-cta:hover { transform: none; box-shadow: inset 0 0 0 1px rgba(31, 43, 38, .14); background: rgba(31, 43, 38, .06); }   /* 描边态：与语言按钮一致，只加底色、不上浮 */
.theme-dark .nav:not(.is-floating) .nav-cta:hover { background: rgba(230, 232, 221, .08); }
.theme-dark .nav.is-floating .nav-cta::before { background: linear-gradient(180deg, #fbfaf3 0%, #ecebdf 100%); }   /* 深色段上浮动时，填充换成象牙色 */

/* 浮动导航：宽度贴合内容（--float-w 由 app.js 计算），三组之间统一 20px；图标与链接之间一道细竖线 */
.nav.is-floating { max-width: min(var(--float-w, 640px), calc(100% - 24px)); gap: 20px; }
.nav-links { position: relative; }
.nav-links::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 16px; margin-top: -8px; background: rgba(31, 43, 38, .14); opacity: 0; transition: opacity .5s; }
.nav.is-floating .nav-links { gap: 30px; padding: 0 8px 0 28px; }   /* 竖线到链接 28；末个链接到语言按钮 8 + 20 = 28 */
.nav.is-floating .nav-links::before { opacity: 1; }
.theme-dark .nav.is-floating .nav-links::before { background: rgba(230, 232, 221, .16); }
.nav-links { transition: color .5s, gap var(--nav-t), padding var(--nav-t); }

/* ───────── 小屏导航（参考 flighty.com）：名字 + 描边“下载 App” + 菜单按钮；上滑后成为两侧留边的浮动条，下拉面板放页面导航与语言 ───────── */
.nav-menu-btn, .nav-sheet { display: none; }
@media (max-width: 860px) {
  .nav-end { gap: 8px; }
  .lang-nav { display: none; }   /* 小屏的语言放进菜单 */
  .nav { max-width: 100%; }   /* 小屏顶部态即整屏宽，悬浮时由此收窄，动画才连贯 */
  .nav.is-floating { max-width: calc(100% - 2 * var(--gutter)); }   /* 悬浮栏外缘与内容区对齐，比默认态窄 */
  .nav-menu-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(31, 43, 38, .14); }
  .nav-menu-btn span { width: 14px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .3s var(--ease-quint); }
  .nav-menu-btn[aria-expanded="true"] span:first-child { transform: translateY(2.75px) rotate(45deg); }
  .nav-menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-2.75px) rotate(-45deg); }
  .theme-dark .nav.is-floating .nav-menu-btn { box-shadow: inset 0 0 0 1px rgba(230, 232, 221, .16); }
  .nav-menu-btn { transition: background-color .3s; }
  .nav-menu-btn:hover, .nav-menu-btn[aria-expanded="true"] { background: rgba(31, 43, 38, .06); }   /* 与语言按钮一致：只加底色 */
  .theme-dark .nav-menu-btn:hover, .theme-dark .nav-menu-btn[aria-expanded="true"] { background: rgba(230, 232, 221, .08); }
  /* 菜单卡片：就是导航条本身向下长高——共用一层玻璃与投影，像 Flighty 那样是一个整体 */
  .nav, .nav.is-floating { flex-wrap: wrap; row-gap: 0; }
  .nav-sheet { display: grid; grid-template-rows: 0fr; flex: 0 0 100%; min-width: 0; margin: 0; opacity: 0; color: inherit;
    transition: grid-template-rows var(--nav-t), margin var(--nav-t), flex-basis var(--nav-t), opacity .2s; }
  .nav.menu-open .nav-sheet { grid-template-rows: 1fr; flex-basis: calc(100% + 22px); margin: 9px -9px -9px -13px; opacity: 1; transition: grid-template-rows var(--nav-t), margin var(--nav-t), flex-basis var(--nav-t), opacity .35s .05s; }
  /* 展开成卡片时底色渐变为近乎不透明，下面的页面不再透出来 */
  .nav::before { background-color: rgba(247, 246, 239, 0); }
  .nav::after { background-color: rgba(17, 25, 21, 0); }
  .nav::before, .nav::after { transition: opacity .25s cubic-bezier(.2, 0, 0, 1), background-color var(--nav-t); }
  .nav.is-floating::before, .theme-dark .nav.is-floating::after { transition: opacity var(--nav-t), background-color var(--nav-t); }
  .nav.menu-open::before { background-color: rgba(247, 246, 239, .94); }
  .nav.menu-open::after { background-color: rgba(17, 25, 21, .94); }
  .nav-sheet-in { min-height: 0; overflow: hidden; }
  .nav.menu-settled .nav-sheet-in { overflow: visible; }
  .nav-sheet-body { padding: 4px 18px 14px; border-radius: 0 0 13px 13px;
    background: color-mix(in srgb, currentColor 3.5%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, currentColor 9%, transparent); }
  .nav-sheet-links a { display: block; padding: 15px 0; font-size: 17px; letter-spacing: .06em; }
  .nav-sheet-links a + a { box-shadow: inset 0 1px 0 color-mix(in srgb, currentColor 7%, transparent); }
  .nav-sheet-links a:active { opacity: .6; }
  .nav-sheet-lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; padding-top: 12px; box-shadow: inset 0 1px 0 color-mix(in srgb, currentColor 9%, transparent); }
  .nav-sheet-label { font-size: 14px; letter-spacing: .06em; opacity: .6; }
  .lang-sheet .lang-btn { gap: 6px; font-size: 14px; opacity: 1; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); }
  .lang-sheet .lang-btn svg:first-child { width: 16px; height: 16px; }
  .lang-sheet .lang-menu { right: 0; }
}
@keyframes sheetIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 品牌名不换行、不被挤压（悬浮栏收窄时曾被压成竖排） */
.nav .brand { flex-shrink: 0; }
.nav .brand-name { white-space: nowrap; }

/* 当前模块高亮：其余链接略淡，当前的用正墨色 */
.nav.is-floating .nav-links a { color: rgba(31, 43, 38, .56); transition: color .4s; }
.nav.is-floating .nav-links a:hover, .nav.is-floating .nav-links a.is-current { color: var(--ink); }
.theme-dark .nav.is-floating .nav-links a { color: rgba(230, 232, 221, .5); }
.theme-dark .nav.is-floating .nav-links a:hover, .theme-dark .nav.is-floating .nav-links a.is-current { color: var(--night-ink); }

/* ===== 协议页（privacy.html / terms.html，由 build-legal.py 生成） ===== */
.legal-page { min-height: 100vh; display: flex; flex-direction: column; }
.legal-top { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--measure); margin: 0 auto; padding: 18px var(--gutter); }
.legal-top .lang-nav { display: block; }   /* 小屏也保留语言切换 */
.legal { flex: 1; width: 100%; max-width: calc(720px + 2 * var(--gutter)); margin: 0 auto; padding: clamp(40px, 7vw, 88px) var(--gutter) 96px; }
.legal-back { display: inline-flex; gap: 6px; font-size: 13px; letter-spacing: .06em; color: var(--ink-3); transition: color .3s; }
.legal-back:hover { color: var(--ink); }
.legal h1 { margin: 20px 0 0; font-size: clamp(30px, 4.4vw, 40px); font-weight: 400; letter-spacing: .08em; line-height: 1.3; color: var(--ink); }
.legal-note { margin: 16px 0 0; font-size: 13px; color: var(--ink-3); }
.legal-doc { margin-top: 20px; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans", "Apple SD Gothic Neo", "Microsoft YaHei", "Malgun Gothic", system-ui, sans-serif;
  font-size: 15px; line-height: 1.85; letter-spacing: .01em; color: var(--ink-2); }
.legal-doc[hidden] { display: none; }
.legal-doc .legal-date { margin: 0; font-size: 13px; color: var(--ink-3); }
.legal-doc h3 { margin: 52px 0 0; padding-top: 28px; border-top: 1px solid rgba(31, 43, 38, .1); font-size: 18px; font-weight: 600; line-height: 1.5; letter-spacing: .02em; color: var(--ink); }
.legal-doc h4 { margin: 28px 0 0; font-size: 15.5px; font-weight: 600; line-height: 1.6; color: var(--ink); }
.legal-doc p { margin: 12px 0 0; }
.legal-doc h3 + p, .legal-doc h4 + p { margin-top: 10px; }
.legal-doc strong { font-weight: 600; color: var(--ink); }
.legal-doc a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(31, 43, 38, .3); text-underline-offset: 3px; overflow-wrap: anywhere; transition: text-decoration-color .3s; }
.legal-doc a:hover { text-decoration-color: currentColor; }
.legal-doc ul { margin: 12px 0 0; padding-left: 1.2em; }
.legal-doc li { margin-top: 8px; }
.legal-doc li::marker { color: var(--ink-3); }
.legal-table { margin-top: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.legal-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; line-height: 1.7; }
.legal-table th, .legal-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(31, 43, 38, .1); }
.legal-table th { font-weight: 600; color: var(--ink); border-bottom-color: rgba(31, 43, 38, .2); white-space: nowrap; }
.legal-table td:first-child { color: var(--ink); white-space: nowrap; }
.legal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 22px; width: 100%; max-width: var(--measure); margin: 0 auto; padding: 24px var(--gutter) 32px;
  border-top: 1px solid rgba(31, 43, 38, .1); font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 12.5px; letter-spacing: .02em; color: var(--ink-3); }
.legal-foot p { margin: 0; }
.legal-foot nav { display: flex; gap: 22px; }
.legal-foot a { transition: color .3s; }
.legal-foot a:hover, .legal-foot a[aria-current="page"] { color: var(--ink); }
@media (max-width: 860px) {
  .legal-doc { font-size: 15px; line-height: 1.8; }
  .legal-doc h3 { margin-top: 44px; padding-top: 24px; font-size: 17px; }
  /* 小屏：表格每行叠成一块——首格作小标题，其余格前标列名，不需要横向滚动 */
  .legal-table table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; min-width: 0; }
  .legal-table thead { display: none; }
  .legal-table tr { padding: 14px 0; border-bottom: 1px solid rgba(31, 43, 38, .1); }
  .legal-table tr:first-child { border-top: 1px solid rgba(31, 43, 38, .2); }
  .legal-table td { padding: 0; border: 0; }
  .legal-table td:first-child { font-weight: 600; white-space: normal; }
  .legal-table td + td { margin-top: 6px; }
  .legal-table td + td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--ink-3); }
}
.legal-page .legal-doc h3, .legal-page .legal-doc h4 { font-family: inherit; }   /* 正文标题随正文用系统字体（宋体子集不含协议用字） */