/* 声词本官网 · 一本会动的图版书
   电脑：一页一个对开页，左页是会动的版画，右页是字。手机：一屏一页，上图下字。
   只有浅色一种样子（纸上的书），所有颜色都在下面这几个令牌里。 */
/* 字体在 css/fonts.css（tools/make_fonts.py 从本机思源宋体、思源黑体切出页面用到的字，内嵌进去） */

:root {
  --paper: #FBFAF6;
  --paper-2: #F2F0EA;
  --ink: #161616;
  --mute: #5F6168;
  --line: #E3E1D9;
  --cob: #2B44D6;
  --cob-soft: #E9ECFD;
  --serif: "SCB Lit", "SCB Serif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, serif;
  --hand: "SCB Hand", "SCB Serif", "Noto Serif SC", serif;
  --sans: "SCB Sans", "Noto Sans SC", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --bar-h: 56px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-snap-type: y proximity; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--paper); z-index: 11; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cob); outline-offset: 3px; border-radius: 2px; }

/* 顶栏 */
.bar { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 10; height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px));
  background: rgba(251, 250, 246, .88); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  transition: transform .32s var(--ease); }
.bar.hide { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px))); }
.mark { display: inline-flex; align-items: center; gap: 8px; font: 900 20px/1 var(--serif); letter-spacing: .02em; text-decoration: none; }
.mark svg { width: 26px; height: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 999px;
  background: var(--cob); color: #fff; font: 700 15px/1 var(--sans); text-decoration: none; transition: transform .1s ease-out, background .16s; }
.btn:hover { background: #2238B8; }
.btn:active { transform: scale(.98); }
.bar .btn { min-height: 36px; padding: 0 16px; font-size: 14px; }
.bar-r { display: flex; align-items: center; gap: 14px; }
/* 首页自己有"立即使用"，顶栏那颗先藏起来（占着位，语言按钮不跳），滑过首页再出来 */
.bar .btn { transition: opacity .25s, visibility .25s, transform .1s ease-out, background .16s; }
.js .bar.cta-off .btn { opacity: 0; visibility: hidden; }

/* 在学哪种语言：右页文字三份并排写好，只露出当前那份 */
html[data-lv="en"] [data-v]:not([data-v="en"]), html[data-lv="es"] [data-v]:not([data-v="es"]), html[data-lv="fr"] [data-v]:not([data-v="fr"]) { display: none !important; }
.lv, .lvs { display: flex; flex-wrap: wrap; align-items: baseline; }
.lv button, .lvs button { appearance: none; border: 0; background: none; margin: 0; cursor: pointer; color: var(--mute);
  text-decoration: underline 2px transparent; text-underline-offset: .32em; transition: color .15s, text-decoration-color .2s; }
.lv button:hover, .lvs button:hover { color: var(--ink); }
.lv button[aria-pressed="true"], .lvs button[aria-pressed="true"] { color: var(--ink); text-decoration-color: var(--cob); }
.lv { gap: 0 22px; margin-top: 26px; }
.lv-l { margin-right: -4px; font: 400 13px/1 var(--sans); color: var(--mute); }
.lv button { padding: 10px 0; font: 400 clamp(18px, 1.5vw, 22px)/1.2 var(--serif); }
.lv button[aria-pressed="true"] { font-weight: 700; }
.lvs { gap: 0 2px; }
.lvs button { min-height: 36px; padding: 0 7px; font: 700 12px/1 var(--sans); letter-spacing: .06em; }

/* 一页 = 一个对开页 */
.page { position: relative; min-height: 100vh; min-height: 100svh; scroll-snap-align: start;
  display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); align-items: center; gap: clamp(36px, 5vw, 84px);
  max-width: 1360px; margin: 0 auto;
  padding: calc(var(--bar-h) + 32px) max(clamp(24px, 4vw, 64px), env(safe-area-inset-right, 0px)) 48px max(clamp(24px, 4vw, 64px), env(safe-area-inset-left, 0px)); }
.page + .page::before { content: ""; position: absolute; top: 0; left: clamp(24px, 4vw, 64px); right: clamp(24px, 4vw, 64px); border-top: 1px solid var(--line); }

/* 左页：图版 */
.plate { margin: 0; min-width: 0; }
.stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper); isolation: isolate; container-type: inline-size; }
/* 步骤字幕（E.steps）：左上角的大字，一次一条 */
.legend { position: absolute; left: 3.6%; top: 4.4%; right: 3.6%; z-index: 2; pointer-events: none; }
.legend p { position: absolute; left: 0; top: 0; margin: 0; display: flex; align-items: baseline; gap: .42em; padding: .26em .62em .34em .5em;
  background: rgba(251, 250, 246, .94); box-shadow: 0 0 0 1px rgba(22, 22, 22, .14); white-space: nowrap; opacity: 0;
  font: 900 clamp(15px, 3.7cqw, 30px)/1.15 var(--serif); color: var(--ink); }
.legend p i { font: italic 400 .82em/1 var(--serif); color: var(--cob); }
.stage::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--ink); pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 5.6px rgba(22, 22, 22, .55); }
.cam { position: absolute; inset: 0; transform-origin: 0 0; }
.eng { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scr { position: absolute; overflow: hidden; }
.scr-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ctrl { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.pp { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; padding: 0; position: relative; }
.pp::before { content: ""; position: absolute; inset: -6px; }
.pp svg { width: 12px; height: 12px; }
.pp .i-pause, .pp .i-replay { display: none; }
.playing .pp .i-play { display: none; }
.playing .pp .i-pause { display: block; }
.done .pp .i-play { display: none; }
.done .pp .i-replay { display: block; }
.prog { flex: 1; height: 16px; display: flex; align-items: center; cursor: pointer; }
.prog::before { content: ""; position: absolute; }
.prog i { display: block; height: 2px; width: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 0 0 transparent; }
.prog { background: linear-gradient(var(--line), var(--line)) center / 100% 2px no-repeat; }
.plate figcaption { margin-top: 10px; font: italic 400 14px/1.5 var(--serif); color: var(--mute); }

/* 右页：字 */
.copy { min-width: 0; max-width: 31em; }
.eb { margin: 0 0 14px; font: 700 13px/1.4 var(--sans); letter-spacing: .08em; color: var(--mute); }
.hl { margin: 0; font: 900 clamp(32px, 3.5vw, 52px)/1.18 var(--serif); letter-spacing: -.005em; text-wrap: balance; }
.nw { white-space: nowrap; }
.hero .hl { font-size: clamp(38px, 4.4vw, 64px); }
.hero .eb { margin-bottom: 18px; font-size: clamp(15px, 1.3vw, 19px); letter-spacing: .06em; color: var(--ink); }
.bd2 { margin-top: 10px; }
.bd { margin: 20px 0 0; font: 400 clamp(16px, 1.22vw, 19px)/1.72 var(--sans); color: var(--mute); text-wrap: pretty; }
.bd b { color: var(--ink); font-weight: 700; }
.w { font-family: var(--serif); color: var(--ink); white-space: nowrap; }
.lw { color: var(--cob); font-weight: 700; box-shadow: inset 0 -2px 0 var(--cob); }
.sp { list-style: none; margin: 28px 0 0; padding: 0; }
.sp li { padding: 11px 0; border-top: 1px solid var(--line); font: 400 14.5px/1.5 var(--sans); color: var(--ink); }
.sp li:last-child { border-bottom: 1px solid var(--line); }
.fine { margin: 14px 0 0; font: 400 14px/1.6 var(--sans); color: var(--mute); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.nx { display: inline-flex; align-items: center; gap: 8px; margin-top: 34px; font: 400 14px/1.4 var(--sans); color: var(--mute); text-decoration: none; }
.nx svg { width: 12px; height: 12px; transition: transform .2s; }
.done .nx { color: var(--ink); }
.done .nx svg, .hero .nx svg { animation: nudge .82s var(--ease) infinite; }   /* 原来 1.6 s，跟图版一起快到 1.96 倍 */
@keyframes nudge { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(5px); } }
.folio { position: absolute; right: max(clamp(24px, 4vw, 64px), env(safe-area-inset-right, 0px)); bottom: 22px; font: italic 400 13px/1 var(--serif); color: var(--mute); }

/* 掌握建议：两行对照（别处只给复习日期，这里每个词五盏灯） */
.vs { margin: 26px 0 0; border-top: 1px solid var(--line); }
.vs-r { margin: 0; display: grid; grid-template-columns: 6.8em 7.4em minmax(0, 1fr); align-items: center; gap: 14px; padding: 13px 0;
  border-bottom: 1px solid var(--line); font: 400 15px/1.45 var(--sans); color: var(--mute); }
.vs-k { font-weight: 700; }
.vs-r.on { color: var(--ink); }
.due { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--paper-2); color: var(--mute); font-size: 13px; white-space: nowrap; }
.lamps-i { display: inline-flex; gap: 6px; }
.lamps-i i { width: 9px; height: 9px; border-radius: 50%; background: #CFCDC5; }
.lamps-i i.on { background: var(--ink); }
.vs + .bd { margin-top: 18px; }

/* 给老师：两页之前的分隔，像书里的一个篇章页 */
.chap { max-width: 1360px; margin: 0 auto; min-height: 58vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--bar-h) + 40px) clamp(24px, 4vw, 64px) 56px; border-top: 1px solid var(--line); scroll-snap-align: start; }
.chap-t { margin: 0; font: 900 clamp(48px, 6.4vw, 92px)/1.05 var(--serif); letter-spacing: .04em; }
.chap-t::after { content: ""; display: block; width: 56px; height: 2px; margin: 26px auto 0; background: var(--ink); }
.chap-d { margin: 22px 0 0; font: 400 clamp(16px, 1.3vw, 19px)/1.7 var(--sans); color: var(--mute); text-wrap: balance; }
/* 最后：下一个词 */
.end { max-width: 1360px; margin: 0 auto; min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--bar-h) + 40px) clamp(24px, 4vw, 64px) 64px; border-top: 1px solid var(--line); scroll-snap-align: start; }
.end .lv { justify-content: center; }
.end .cta { justify-content: center; }
.end .fine { margin-top: 22px; text-wrap: balance; }

/* 尾页的词 */
.gone { display: inline-block; font: 700 clamp(44px, 5vw, 72px)/1.1 var(--serif); color: var(--ink); }
.tagk { display: inline-block; margin-left: 12px; padding: 4px 10px; border-radius: 999px; background: #E2F3E8; color: #17784A; font: 700 13px/1.4 var(--sans); vertical-align: middle; }

.foot { max-width: 1360px; margin: 0 auto; padding: 28px clamp(24px, 4vw, 64px) calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; gap: 8px 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mute); }
.foot a { color: var(--mute); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* 调试：单张定格 */
.solo .bar { display: none; }
.solo .page { min-height: 0; }
.solo .chap, .solo .end, .solo .foot { display: none; }

/* ---------- 手机：一屏一页，上图下字 ---------- */
@media (max-width: 760px) {
  :root { --bar-h: 48px; }
  .bar { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .mark { font-size: 18px; }
  .bar-r { gap: 6px; }
  .bar .btn { min-height: 34px; padding: 0 12px; font-size: 13px; }
  .lvs button { padding: 0 5px; }
  .lv { margin-top: 10px; gap: 0 18px; }
  .lv button { padding: 8px 0; font-size: 17px; }
  .hero .eb { margin-bottom: 6px; font-size: 14px; }
  .vs { margin-top: 12px; }
  .vs-r { grid-template-columns: 6.2em 6.6em minmax(0, 1fr); gap: 8px; padding: 8px 0; font-size: 13px; }
  .due { height: 22px; padding: 0 8px; font-size: 12px; }
  .lamps-i { gap: 4px; } .lamps-i i { width: 7px; height: 7px; }
  .vs + .bd { margin-top: 10px; }
  .chap { min-height: 100svh; padding: calc(var(--bar-h) + 24px) 16px 40px; }
  .chap-t { font-size: 44px; }
  .chap-t::after { margin-top: 18px; }
  .chap-d { font-size: 15px; }
  .end { min-height: calc(100svh - var(--foot-h)); padding: 64px 16px 48px; }
  .foot { min-height: var(--foot-h); padding-top: 0; padding-bottom: env(safe-area-inset-bottom, 0px); align-content: center; }
  .end .hl { font-size: clamp(28px, 8.6vw, 36px); }
  .page { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0; padding: 0 0 18px; min-height: 100svh; }
  .page + .page::before { display: none; }
  .hero { padding-top: var(--bar-h); }
  .plate { width: 100%; }
  .stage::after { border-left: 0; border-right: 0; box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 4.6px rgba(22, 22, 22, .5); }
  .ctrl { margin: 10px 16px 0; gap: 10px; }
  .pp { width: 28px; height: 28px; }
  .plate figcaption { display: none; }
  .copy { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 14px max(16px, env(safe-area-inset-left, 0px)) 0; max-width: none; }
  .copy .nx { margin-top: auto; padding-top: 14px; }
  .eb { margin-bottom: 6px; font-size: 12px; }
  .hl, .hero .hl { font-size: clamp(23px, 6.6vw, 28px); line-height: 1.25; }
  .hero .hl { font-size: clamp(26px, 8.4vw, 34px); }
  .bd { margin-top: 8px; font-size: 15.5px; line-height: 1.62; }
  .sp { margin-top: 12px; }
  .sp li, .sp li:last-child { position: relative; padding: 3px 0 3px 13px; border: 0; font-size: 13px; color: var(--mute); }
  .sp li::before { content: ""; position: absolute; left: 2px; top: .95em; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
  .fine { margin-top: 8px; font-size: 13px; }
  .cta { margin-top: 14px; }
  .nx { margin-top: 14px; font-size: 13px; }
  .folio { display: none; }
  .gone { font-size: 40px; }
}
/* 手机竖着拿：一滑就是一整屏，不会停在两页中间（10-29 修："滑不满"）。
   proximity 只在离页边很近时才吸附，手指轻轻一划停在半路就不管了；改成 mandatory＋always：松手总是落到某一页的顶上，
   一次最多翻一页。为此每个吸附段都做成整整一屏：篇章页"给老师"一屏；尾页＋页脚合起来一屏（页脚也能吸附到底，备案号一定看得到） */
@media (max-width: 760px) and (orientation: portrait) {
  :root { --foot-h: calc(76px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-snap-type: y mandatory; }
  .page, .chap, .end { scroll-snap-stop: always; }
  .foot { scroll-snap-align: end; }
}
@media (max-width: 760px) and (orientation: landscape) { :root { --foot-h: 0px; } }
/* 很矮的手机（比如 iPhone SE 在微信里）：要点收起，保证一屏放下 */
@media (max-width: 760px) and (max-height: 640px) {
  .sp { display: none; }
  .hero .cta, .lv-l { display: none; }
  .hero .hl { font-size: 25px; }
  .ctrl { margin-top: 8px; }
  .copy { padding-top: 10px; }
}
/* 中等高度的手机（641–700 px，iPhone 14 / 14 Pro 的 Safari 就在这一档）：间距各收几像素，首页、记没记住那两页才放得进一屏（一滑一屏要求每页正好一屏） */
@media (max-width: 760px) and (min-height: 641px) and (max-height: 700px) {
  .page { padding-bottom: 6px; }
  .ctrl { margin-top: 6px; }
  .copy { padding-top: 10px; }
  .copy .nx { padding-top: 6px; }
  .cta { margin-top: 10px; }
  .vs { margin-top: 8px; }
}
/* 横着拿手机：还是左图右字 */
@media (max-height: 520px) and (orientation: landscape) {
  .page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 56px 24px 16px; gap: 24px; min-height: 100svh; }
  .hl, .hero .hl { font-size: 24px; }
  .bd { font-size: 14px; margin-top: 8px; }
  .sp { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .done .nx svg, .hero .nx svg { animation: none; }
  .bar { transition: none; }
  html { scroll-snap-type: none; }
}

/* ---------- 英文版（easypalabras.html，html[data-ui="en"]）---------- */
/* 西文比中文宽：标题按词自然换行、字号小一档（思源黑体全角弯引号的问题在 fonts-en.css 的字体里就改好了） */
[data-ui="en"] .nw { white-space: normal; }
[data-ui="en"] .hl { font-size: clamp(30px, 3.1vw, 46px); line-height: 1.12; letter-spacing: -.012em; }
[data-ui="en"] .hero .hl { font-size: clamp(34px, 3.7vw, 56px); }
[data-ui="en"] .eb { letter-spacing: .04em; text-wrap: balance; }
[data-ui="en"] .chap-t { letter-spacing: 0; }
.bar .alt { padding: 10px 2px; font: 700 14px/1 var(--sans); color: var(--mute); text-decoration: none; }
.bar .alt:hover { color: var(--ink); }
/* 页尾：英文版还没有软件可用，不放按钮，只写"即将推出" */
.end .soon { margin: 30px 0 0; padding: 12px 22px; border: 1.5px solid var(--ink); border-radius: 999px; font: 700 15px/1 var(--sans); color: var(--ink); }
.end .fine a { color: var(--ink); text-underline-offset: .2em; }
@media (max-width: 760px) {
  [data-ui="en"] .hl { font-size: clamp(23px, 6.4vw, 27px); line-height: 1.18; }
  [data-ui="en"] .hero .hl { font-size: clamp(27px, 7.8vw, 32px); }
  [data-ui="en"] .end .hl { font-size: clamp(27px, 7.8vw, 32px); }
  .end .soon { margin-top: 22px; font-size: 14px; }
}
@media (max-width: 760px) and (max-height: 640px) {
  [data-ui="en"] .hero .hl { font-size: 24px; }
}

/* ---------- 图版里的真实界面（照 App 渲染图） ---------- */
.ui { --u-paper: #FBFBF8; --u-paper2: #F1F0EB; --u-card: #FFFFFF; --u-ink: #111214; --u-mute: #62646B; --u-line: #E2E1DA; --u-ctl: #8A8C84;
  --u-cob: #2B44D6; --u-cobsoft: #E9ECFD; --u-ok: #17784A; --u-oksoft: #E2F3E8; --u-bad: #C9362A; --u-badsoft: #FDF0EE;
  background: var(--u-paper); color: var(--u-ink); font: 400 14px/1.55 var(--sans); overflow: hidden; }
.ui .w { font-family: var(--serif); color: inherit; white-space: normal; }
.ui .hw { font: 700 34px/1.1 var(--serif); }
.ui .ttl { font: 900 22px/1.2 var(--serif); }
.ui .cap { font: 400 12px/1.5 var(--sans); color: var(--u-mute); }
.ui .mute { color: var(--u-mute); }
.ui .lu { box-shadow: inset 0 -2px 0 var(--u-cob); }
.ui .lu2 { box-shadow: inset 0 -1.5px 0 rgba(43, 68, 214, .7); }
.ui .lu3 { box-shadow: inset 0 -1px 0 rgba(43, 68, 214, .45); }
.ui .cobw { color: var(--u-cob); font-weight: 700; }
.ui .lamps { display: inline-flex; gap: 4px; vertical-align: middle; }
.ui .lamps i { width: 6px; height: 6px; border-radius: 50%; background: var(--u-ctl); }
.ui .lamps i.on { background: var(--u-ink); }
.ui .card { background: var(--u-card); border-top: 2px solid var(--u-ink); border-radius: 0 0 4px 4px; box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .4); padding: 16px; }
.ui .btnp { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 4px; background: var(--u-cob); color: #fff; font: 700 14px/1 var(--sans); }
.ui .btns { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 4px; border: 1.5px solid var(--u-ink); background: var(--u-paper); font: 700 14px/1 var(--sans); }
.ui .chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--u-cobsoft); color: var(--u-cob); font: 700 12px/1 var(--sans); }
.ui .tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--u-ink); border-radius: 4px; font: 500 11px/1 var(--sans); }
.ui .bm { display: inline-block; width: 9px; height: 14px; vertical-align: -2px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); background: var(--u-cob); }
.ui .bm.help { background: var(--u-cobsoft); outline: 1px dashed var(--u-cob); outline-offset: -1px; }
.ui .bm.none { background: var(--u-ctl); opacity: .5; }
.ui .rule { border-top: 2px solid var(--u-ink); }
.ui .hair { border-top: 1px solid var(--u-line); }
.ui .top { height: 52px; display: flex; align-items: center; padding: 0 16px; gap: 10px; }
.ui .row { display: flex; align-items: center; gap: 10px; }