/* gessov.com 首页的底层样式（网站线 10-16 起写）：字体、颜色与底、导航、下载按钮占位、页脚、各块共用的小零件。
   ⚠️ 这是源文件。真正发布的 home.css 由 compose.py 把这份和「这次用到的块」的样式拼起来生成，别直接改 home.css。
   规矩照法律页（site/public/site.css）：零外站脚本、零外站字体，字体同源自托管；颜色、雾、颗粒的数值与 site.css 一致（出处见那份文件头）。 */

@font-face {
  font-family: "XCharter";
  src: url("/fonts/XCharter-Roman-gessov.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-203A, U+20AC, U+2122;
}
@font-face {
  font-family: "Gessov Serif SC";
  src: url("/fonts/NotoSerifSC-Regular-web.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+201C-201D, U+2190-21FF, U+3000-303F, U+4E00-9FFF, U+FF00-FFEF;
}
@font-face {
  font-family: "Gessov Serif SC";
  src: url("/fonts/NotoSerifSC-Medium-web.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+201C-201D, U+2190-21FF, U+3000-303F, U+4E00-9FFF, U+FF00-FFEF;
}

/* Layout: 一条中轴、版心最宽 1160；手机左右留白 20 起。 */
:root {
  color-scheme: light dark;
  --base: #CEC6B4;
  --ink: #191712;
  --ink2: rgb(25 23 18 / .80);
  --dim: rgb(25 23 18 / .66);
  --line: rgb(25 23 18 / .14);
  --btn: #191712;
  --btn-ink: #F2EDE2;
  --glass: rgb(255 255 255 / .28);
  --glass-line: rgb(255 255 255 / .55);
  --panel: rgb(255 252 244 / .30);
  --panel-line: rgb(255 255 255 / .45);
  --frame: #111;
  --grain: url("/grain-light.png");
  --fog-blue: 84, 107, 126;
  --fog-warm: 242, 236, 220;
  --serif: Charter, "XCharter", "Gessov Serif SC", serif;
  --display: ui-serif, "New York", Charter, "XCharter", "Gessov Serif SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --t-hero: clamp(40px, 5.6vw, 76px);
  --t-sec: clamp(28px, 3.2vw, 42px);
  --t-lead: clamp(18px, 1.5vw, 21px);
  --t-body: 17px;
  --t-small: 14px;
  --t-label: 12.5px;
  --gut: clamp(20px, 4vw, 56px);
  --max: 1160px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --base: #0A0A0A;
    --ink: #E9E9E6;
    --ink2: rgb(233 233 230 / .82);
    --dim: rgb(233 233 230 / .62);
    --line: rgb(233 233 230 / .12);
    --btn: #E9E9E6;
    --btn-ink: #0A0A0A;
    --glass: rgb(255 255 255 / .16);
    --glass-line: rgb(255 255 255 / .30);
    --panel: rgb(255 255 255 / .05);
    --panel-line: rgb(255 255 255 / .10);
    --frame: #2A2A28;
    --grain: url("/grain-dark.png");
    --fog-blue: 48, 74, 94;
    --fog-warm: 46, 44, 38;
  }
}
/* 整页深色（6 号「黑石膏」那种）：不跟系统，一直深。compose.py 在配方里写 "dark": true 时给 <html> 加 class="always-dark"。 */
:root.always-dark {
  color-scheme: dark;
  --base: #0A0A0A;
  --ink: #E9E9E6;
  --ink2: rgb(233 233 230 / .82);
  --dim: rgb(233 233 230 / .62);
  --line: rgb(233 233 230 / .12);
  --btn: #E9E9E6;
  --btn-ink: #0A0A0A;
  --glass: rgb(255 255 255 / .16);
  --glass-line: rgb(255 255 255 / .30);
  --panel: rgb(255 255 255 / .05);
  --panel-line: rgb(255 255 255 / .10);
  --frame: #2A2A28;
  --grain: url("/grain-dark.png");
  --fog-blue: 48, 74, 94;
  --fog-warm: 46, 44, 38;
}
:root:lang(zh) { --t-hero: clamp(34px, 4.6vw, 62px); --t-body: 16px;
  /* 中文页的“”交给宋体（同 site.css，10-16）：宋体排第一，它只认中文、全角标点和“”，西文照旧落到 Charter */
  --serif: "Gessov Serif SC", Charter, "XCharter", serif;
  --display: "Gessov Serif SC", ui-serif, "New York", Charter, "XCharter", serif; }

* { box-sizing: border-box; }
html { background: var(--base); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--serif); font-size: var(--t-body); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal; }
/* 底：石膏色 + 对角雾 + 颗粒，钉在屏幕上不跟字滚（同法律页） */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    var(--grain) 0 0 / 64px 64px repeat,
    radial-gradient(64% 58.88% at 103.76% 3.92%, rgba(var(--fog-warm), .5), rgba(var(--fog-warm), 0) 90%),
    radial-gradient(84.48% 66.56% at 83.28% 103.76%, rgba(var(--fog-blue), .725), rgba(var(--fog-blue), 0) 90%),
    radial-gradient(71.68% 66.56% at 44.88% 52.56%, rgba(var(--fog-blue), .435), rgba(var(--fog-blue), 0) 90%),
    radial-gradient(99.84% 79.36% at -1.2% -3.76%, rgba(var(--fog-blue), .94), rgba(var(--fog-blue), 0) 90%),
    var(--base);
}
/* 上下各 120px 淡进石膏底色，只在 iPhone / iPad 的浏览器上（用户 10-28 选甲）：新版 Safari 把顶上状态栏、底下地址栏后面
   涂成 html 的底色（只能一种纯色），雾在边上淡进同一个颜色就没有硬接缝。电脑上不加，样子不变。盖在 body::before 的雾上、字的下面。 */
@supports (-webkit-touch-callout: none) {
  html::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(var(--base), rgb(0 0 0 / 0) 120px), linear-gradient(to top, var(--base), rgb(0 0 0 / 0) 120px); }
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
#main:focus { outline: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3 { letter-spacing: 0; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gut); top: 12px; background: var(--base); padding: 6px 10px; }

/* 导航：左 logo（双圆 + gessov），右 书架 / 趣刊 / 支持 / 另一种语言 */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; }
.mark { display: inline-flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 21px; text-decoration: none; }
/* 双圆：黑圆在右、玻璃圆在左压在前面，圆心距 0.45 圆径（设计 13 / 27）。 */
.dot { position: relative; width: 26px; height: 18px; flex: none; }
.dot i { position: absolute; top: 0; width: 18px; height: 18px; border-radius: 50%; }
.dot i:nth-child(1) { left: 8.1px; background: var(--ink); }
.dot i:nth-child(2) { left: 0; z-index: 1; background: var(--glass); border: .5px solid var(--glass-line); -webkit-backdrop-filter: blur(2.5px) saturate(1.2); backdrop-filter: blur(2.5px) saturate(1.2); }
.links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); font-family: var(--sans); font-size: 14px; }
.links a { text-decoration: none; color: var(--ink2); padding-block: 12px; }
.links a:hover { color: var(--ink); }
@media (max-width: 560px) { .links .opt { display: none; } }

/* 下载按钮。上架前是一块不能点的牌子「即将上线」（用户 10-16：做好就发，上架后换苹果官方徽章）。
   上架那天：把 .soon 整个换成 <a href="https://apps.apple.com/app/id…"><img src="/badges/…svg" alt="Download on the App Store"></a>，
   徽章文件用苹果营销素材页给的原件，不改色、不重画。 */
.soon { display: inline-flex; align-items: center; height: 52px; padding: 0 22px; border-radius: 12px; background: var(--btn); color: var(--btn-ink); font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: -.005em; }
.free { font-family: var(--sans); font-size: var(--t-small); color: var(--dim); }

/* 字的几档（≤ 6 档，最小 12.5） */
.hero-t { font-size: var(--t-hero); line-height: 1.04; }
:lang(zh) .hero-t { line-height: 1.22; font-weight: 500; }
.sec-t { font-size: var(--t-sec); line-height: 1.12; }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink2); }
.label { font-family: var(--sans); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
:lang(zh) .label { letter-spacing: .08em; text-transform: none; }

/* 各块共用的小零件 */
.body { color: var(--ink2); }
.num { font-family: var(--display); font-size: 15px; color: var(--dim); font-variant-numeric: tabular-nums; }
.soon.sm { height: 36px; padding: 0 12px; border-radius: 9px; font-size: 13px; }
.links .soon { color: var(--btn-ink); }
.row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* 真机：截图装进细黑框（不斜、不裁状态栏） */
.phone { width: var(--pw, 340px); max-width: 100%; aspect-ratio: 720 / 1564; border-radius: calc(var(--pw, 340px) * .145); padding: calc(var(--pw, 340px) * .028); background: var(--frame); flex: none; }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--pw, 340px) * .12); }
/* 书封面、趣刊卡 */
.cover { width: 100%; aspect-ratio: 480 / 667; border-radius: 3px 6px 6px 3px; overflow: hidden; box-shadow: 0 1px 2px rgb(0 0 0 / .18), 0 10px 22px -12px rgb(0 0 0 / .35); }
.cover img, .card img { width: 100%; height: 100%; object-fit: cover; }
.card { width: 100%; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; }
figure { margin: 0; }
/* 横向可滑的一排（手机上用） */
.rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: center; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* 页脚：一整节。左 logo + 一句，右 隐私 / 条款 / 支持 / 邮箱 / 另一种语言，下面版权。 */
.foot { padding-block: 56px 48px; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.foot .tag { color: var(--ink2); margin-top: 10px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font-family: var(--sans); font-size: 14px; justify-content: flex-end; }
.foot nav a { text-decoration: none; color: var(--ink2); padding-block: 12px; }
.foot nav a:hover { color: var(--ink); }
.foot .copy { grid-column: 1 / -1; font-family: var(--sans); font-size: 12.5px; color: var(--dim); }
@media (max-width: 700px) { .foot { grid-template-columns: 1fr; } .foot nav { justify-content: flex-start; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── 合成稿各节（网站线 10-16，照用户评论拼；compose.py 把它接在 base.css 后面生成 home.css）──
   每节排法都不一样：居中升起 / 左字右图 / 两格并排 / 网页画的书架 / 蓝灰整块 / 三栏 / 右字左机 / 四格。
   动的规矩照 app 口味：慢、柔、浅，一起停；系统「减少动态效果」开着时全部直接停在最后的样子。 */

:root { --band: #56636D; --band-ink: #F1EEE6; --band-dim: rgb(241 238 230 / .72); --close-line: rgb(255 255 255 / .55); --bw: 116px; }
@media (prefers-color-scheme: dark) { :root:not(.always-dark) { --band: #1A2127; --band-ink: #E9E9E6; --band-dim: rgb(233 233 230 / .66); --close-line: rgb(255 255 255 / .14); } }
:root.always-dark { --band: #1A2127; --band-ink: #E9E9E6; --band-dim: rgb(233 233 230 / .66); --close-line: rgb(255 255 255 / .14); }

.phone picture { display: block; height: 100%; }
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--pw, 340px) * .12); overflow: hidden; }
.phone .screen picture { position: absolute; inset: 0; }
.phone .screen img { border-radius: 0; }
.sec-t + .body, .num + .sec-t { margin-top: 0; }
h3 { font-size: 21px; line-height: 1.25; }
:lang(zh) h3 { font-size: 19px; }

/* 滚到眼前才浮上来（只在有脚本时先藏；没脚本全都看得见） */
.js .up { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 140ms); }
.js .up.in { opacity: 1; transform: none; }

/* 1 首屏：标题居中，一台手机只露上半截；往下翻它升上来，过半玻璃自己掀开（--p 由 home.js 给，0 到 1） */
.hero { padding-top: clamp(36px, 6vw, 88px); }
.hero-text { text-align: center; display: grid; justify-items: center; gap: 22px; }
.hero-text .lead { max-width: 34ch; }
.hero-text .free { margin-top: -6px; }
/* 名字来由（品牌定稿 W6）：紧贴大标题下，一行斜体小字，像词典里词头后面那行来源 */
.hero-text .name-line { margin-top: -10px; font-style: italic; font-size: var(--t-small); color: var(--dim); max-width: 40ch; }
.hero-text .name-line, .hero-text .lead { text-wrap: balance; }
:lang(zh) .hero-text .name-line { font-style: normal; }
.rise { height: clamp(340px, 40vw, 520px); overflow: hidden; margin-top: 36px; display: flex; justify-content: center;
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
@media (max-width: 560px) { .rise .phone { --pw: 300px !important; } }
.rise .phone { transform: translateY(calc((1 - var(--p, 0)) * 34px)); transition: transform .2s linear; }
.rise .s-open { opacity: 0; transition: opacity 1.1s ease; }
.rise.lifted .s-open { opacity: 1; }
.scroll-hint { text-align: center; font-family: var(--sans); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-top: 14px; }
:lang(zh) .scroll-hint { letter-spacing: .08em; }
.js .scroll-hint { transition: opacity .6s ease; } .js .rise.lifted + .scroll-hint { opacity: 0; }

/* 特写：只突出玻璃那一块，不套手机框，一道很浅的边 */
.close img, .clip img { border-radius: 26px; border: .5px solid var(--close-line); box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 24px 48px -30px rgb(0 0 0 / .45); }
.clip { position: relative; }
.clip.vid { overflow: hidden; aspect-ratio: 1140 / 2026; border-radius: 6.4% / 3.6%; border: .5px solid var(--close-line); box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 24px 48px -30px rgb(0 0 0 / .45); }
/* 录屏的框比玻璃卡两边各宽一点（露出底色），放大一点把那两条边藏到框外 */
.clip.vid video { display: block; width: 107%; max-width: none; height: 100%; margin-left: -3.3%; object-fit: cover; }
.clip.stack picture { display: block; }
.clip.stack .fr:not(.f0) { position: absolute; inset: 0; }
.clip.stack .fr:not(.f0) img { width: 100%; height: 100%; object-fit: cover; }
/* 录屏没到：几张截图慢慢交替，看得出这里会动 */
.clip.n2 .f1 { animation: swap2 7s ease-in-out infinite; }
@keyframes swap2 { 0%, 38% { opacity: 0; } 50%, 88% { opacity: 1; } 100% { opacity: 0; } }
.clip.blank img { filter: blur(7px) saturate(.6); opacity: .55; }
.clip.blank .clip-note { left: 50%; bottom: auto; top: 50%; transform: translate(-50%, -50%); font-size: 14px; padding: 8px 14px; }
.clip-note { position: absolute; left: 16px; bottom: 16px; font-family: var(--sans); font-size: 12px; padding: 5px 10px; border-radius: 99px; background: rgb(25 23 18 / .72); color: #F2EDE2; }

/* 2 第一步：左字右图（特写） */
.s1 { padding-block: clamp(80px, 11vw, 150px) clamp(56px, 8vw, 104px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(36px, 8vw, 128px); align-items: center; }
.s1-text { display: grid; gap: 18px; max-width: 470px; }
@media (max-width: 760px) { .s1 { grid-template-columns: minmax(0, 1fr); } .s1 .clip { max-width: 300px; margin-inline: auto; } }

/* 3 查词：居中的头，下面两格并排：点一下 / 再点一下（二级查词） */
.s2 { padding-block: clamp(56px, 8vw, 104px); display: grid; gap: clamp(36px, 5vw, 64px); }
.s2-head { display: grid; gap: 16px; justify-items: center; text-align: center; max-width: 560px; margin-inline: auto; }
.s2-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: clamp(20px, 6vw, 96px); align-items: start; }
.s2-pair figure { display: grid; gap: 18px; }
.s2-pair figcaption { display: grid; gap: 6px; padding-inline: 4px; }
@media (max-width: 700px) { .s2-pair { grid-template-columns: minmax(0, 300px); } }

/* 4 书架：照 app 网页画——组名带一条细线，书立着，前面压一条玻璃搁板（不是截图） */
.lib { padding-block: clamp(72px, 10vw, 136px); display: grid; gap: clamp(36px, 5vw, 56px); }
.lib-head { display: grid; gap: 16px; max-width: 620px; }
.shelves { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 48px) 32px; align-items: flex-start; }
.shelf { display: grid; gap: 14px; min-width: 0; max-width: 100%; }
.shelf-label { display: flex; align-items: center; gap: 12px; }
.shelf-label::after { content: ""; flex: 1; height: 1px; background: var(--line); min-width: 24px; }
.shelf-body { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.shelf-body::-webkit-scrollbar { display: none; }
.books-row { list-style: none; margin: 0; padding: 0 0 0; display: flex; gap: 16px; position: relative; width: max-content; }
.books-row li { width: var(--bw); flex: none; position: relative; z-index: 0; }
.shelf-body { position: relative; }
.ledge { position: relative; z-index: 1; height: calc(var(--bw) * .22); margin-top: calc(var(--bw) * -.2); margin-inline: -10px; border-radius: 9px;
  background: linear-gradient(rgb(255 255 255 / .34), rgb(255 255 255 / .16)); border: .5px solid rgb(255 255 255 / .6);
  -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), 0 16px 26px -18px rgb(0 0 0 / .45); }
.ledge::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -7px; height: 7px; border-radius: 0 0 8px 8px; background: rgb(255 255 255 / .18); }
@media (prefers-color-scheme: dark) { :root:not(.always-dark) .ledge { background: linear-gradient(rgb(255 255 255 / .12), rgb(255 255 255 / .05)); border-color: rgb(255 255 255 / .16); box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 16px 26px -18px rgb(0 0 0 / .8); } }
.books-row, .ledge { width: auto; }
.shelf-body > .track { display: inline-flex; flex-direction: column; min-width: 100%; padding-inline: 10px; }
.exam-note { max-width: 46ch; }
/* 书落到搁板上：一本接一本，轻轻落下 */
.js .shelf .books-row li { opacity: 0; transform: translateY(-16px); transition: opacity .8s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 90ms + 120ms); }
.js .shelf.in .books-row li { opacity: 1; transform: none; }
@media (max-width: 560px) { :root { --bw: 104px; } .shelf { width: 100%; } }

/* 5 趣刊：蓝灰一整块（不是全黑），卡一路排出右边、往外淡掉——看得出不止这几张 */
.iss { background: var(--band); color: var(--band-ink); padding-block: clamp(72px, 10vw, 128px); overflow: hidden;
  --ink: var(--band-ink); --ink2: var(--band-ink); --dim: var(--band-dim); --line: rgb(241 238 230 / .2); }
.iss-in { display: grid; }
.iss-head { display: grid; gap: 18px; max-width: 560px; }
.iss-count { display: flex; align-items: baseline; gap: 14px; margin-top: 6px; }
.iss-count b { font-family: var(--display); font-weight: 500; font-size: clamp(44px, 5vw, 64px); line-height: 1; }
.iss-count span { color: var(--band-dim); }
.iss-row { list-style: none; margin: clamp(44px, 6vw, 72px) 0 0; padding: 18px max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))) 30px; display: flex; gap: clamp(16px, 2vw, 26px); overflow-x: auto; scrollbar-width: none;
 }
/* 只露前四张（用户 10-28）：第五张往右淡没（compose.py 的 ISSUE_ROW 只给五张） */
.iss-row li:nth-child(5) { -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .55), transparent 85%); mask-image: linear-gradient(90deg, rgb(0 0 0 / .55), transparent 85%); }
.iss-row::-webkit-scrollbar { display: none; }
.iss-row li { flex: none; width: clamp(150px, 16vw, 206px); }
.iss-row figure { display: grid; gap: 12px; }
.iss-row img { width: 100%; aspect-ratio: 2 / 3; height: auto; object-fit: cover; border-radius: 10px; box-shadow: 0 18px 30px -18px rgb(0 0 0 / .55); }
.iss-row figcaption { text-transform: none; letter-spacing: .04em; font-size: 13px; text-align: center; }
.iss-row li:nth-child(4n+1) figure { transform: rotate(-2deg); } .iss-row li:nth-child(4n+2) figure { transform: rotate(1.5deg) translateY(18px); }
.iss-row li:nth-child(4n+3) figure { transform: rotate(-1deg); } .iss-row li:nth-child(4n) figure { transform: rotate(2deg) translateY(18px); }
.js .iss-row li { opacity: 0; transform: translateX(40px); transition: opacity .9s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 110ms); }
.js .iss.in .iss-row li { opacity: 1; transform: none; }

/* 6 一期里面：一张能用手转的大卡 / 字 / 阅读页（整屏，带框） */
.det { padding-block: clamp(80px, 11vw, 150px); display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr) auto; gap: clamp(32px, 5vw, 80px); align-items: center; }
.det-card { display: grid; gap: 14px; justify-items: center; perspective: 1100px; }
.turn { width: min(300px, 78vw); cursor: grab; touch-action: pan-y; outline: none; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; will-change: transform; }
.turn:active { cursor: grabbing; }
/* 正反两面（用户 10-28：翻过来要和 app 一样是卡背） */
.turn { position: relative; }
.turn .face, .turn .back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.turn .back { position: absolute; inset: 0; transform: rotateY(180deg); }
.turn img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 50px -30px rgb(0 0 0 / .55); -webkit-user-drag: none; user-select: none; }
.turn:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 16px; }
.det-text { display: grid; gap: 18px; max-width: 440px; }
@media (max-width: 980px) { .det { grid-template-columns: minmax(0, 1fr) auto; } .det-text { grid-column: 1 / -1; grid-row: 1; } }
@media (max-width: 640px) { .det { grid-template-columns: minmax(0, 1fr); justify-items: center; } .det-text { justify-self: stretch; } }

/* 7 小组件：左机右字（整屏，带框） */
.wid { padding-block: clamp(56px, 8vw, 104px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(36px, 8vw, 128px); align-items: center; }
.wid-text { display: grid; gap: 18px; max-width: 470px; }
@media (max-width: 760px) { .wid { grid-template-columns: minmax(0, 1fr); justify-items: center; } .wid-text { justify-self: stretch; grid-row: 1; } }

/* 8 四格：免费 / 背完就停 / 不用注册 / 中文界面，再收一个按钮 */
.facts { padding-block: clamp(48px, 7vw, 88px) clamp(64px, 9vw, 112px); display: grid; gap: clamp(48px, 6vw, 72px); }
.facts-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.facts-in > div { border-top: 1px solid var(--line); padding-top: 22px; display: grid; gap: 12px; align-content: start; }
.facts-in .body { font-size: 16px; }
.facts-cta { display: grid; justify-items: center; gap: 14px; text-align: center; }
@media (max-width: 960px) { .facts-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .facts-in { grid-template-columns: minmax(0, 1fr); } }