/* 礼：送什么、怎么说 —— 样子
   颜色、字体照 交互说明.md 的 1.5 节（第 4 版）。标题字体是网站自己带的两个小文件（只有固定的那 129 个字）；
   别的字体只用电脑自带的。都不从网上加载。 */
@font-face{font-family:"WenliSerif";font-weight:300;font-display:swap;src:url("title-300.woff") format("woff")}
@font-face{font-family:"WenliSerif";font-weight:600;font-display:swap;src:url("title-600.woff") format("woff")}
:root {
  /* 10 月 21 日换的配色：暖色宣纸底、青瓷绿做主色、朱色只给印章。不用纯白、纯黑，亮处不刺眼，暗处看也不累 */
  --paper: #EAE4D9;  /* 纸：页面底色 */
  --white: #F5F1E9;  /* 卡片、她的气泡（不用纯白） */
  --sunk: #EEE8DD;   /* 气泡里再凹一层：推荐、打开的小印章面板 */
  --ink: #3A332C;    /* 墨：正文 */
  --gray: #6E6458;   /* 灰：次要的字 */
  --line: #D9D0C1;   /* 线：分隔线、边框 */
  --dai: #4D7D76;    /* 主色青瓷绿：选中、按钮（变量名照旧叫 dai） */
  --dai-d: #3B655F;  /* 主色深一点：浅底上的字、链接 */
  --dai-6: rgba(77, 125, 118, 0.10); /* 主色的浅底：价格吊牌、灰字说明条 */
  --me: #D8E6DF;     /* 我说的话的气泡、打开的那块小印章 */
  --me-line: #BFD3CA;
  --zhu: #B0533C;    /* 朱：小章、小印章上的字、“别送”、“还有 6 天” */
  --zhu-6: rgba(176, 83, 60, 0.09); /* 小印章上字的底 */
  --skin: #FBE3D3;   /* 礼礼的脸 */
  --font: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  /* 标题字体（思源宋体，只取了用到的字）：只给固定的字用；模型写的字、人名一律用 --font，免得一行里两种字 */
  --serif: "WenliSerif", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", serif;
  --kai: "KaiTi", "楷体", "STKaiti", "Noto Serif CJK SC", serif;
  --spring: cubic-bezier(.3, 1.45, .5, 1); /* 弹一下（照交互原型） */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
}
button, input, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }

/* 键盘操作时，焦点要看得见：2px 黛色框 */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--dai); outline-offset: 2px; }

/* 一栏，最宽 440px，在电脑上居中，像手机屏幕 */
.app {
  position: relative;
  max-width: 440px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
@media (min-width: 480px) {
  .app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* ---------- 顶部 ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.brand-icon { flex: none; width: 34px; height: 34px; display: block; } /* 后台页顶上的图标 */
.slogan { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 网站的顶部（照交互原型）：首页左上是图标和“问礼”；板块里左上“返回”、中间标题、右上小图标“回首页” */
.top.nav { z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; min-height: 56px; padding: 8px 16px; }
.top-l { display: flex; align-items: center; min-width: 0; }
.top-r { display: flex; justify-content: flex-end; align-items: center; }
.brand .seal-s { width: 34px; height: 34px; display: block; }
.brand-name { display: flex; align-items: center; }
/* 顶栏的“问礼”（第 5 版）：书法集字，和电脑首屏的题字同一套 SVG，小一号；读屏读里面看不见的“问礼”（.vh） */
.brand-callig { display: flex; align-items: center; gap: 1px; color: var(--ink); }
.b-wen { display: block; height: 20px; width: auto; }
.b-li { display: block; height: 26px; width: auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.back { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 10px 0 0; color: var(--dai-d); font-size: 16px; }
.back svg { width: 20px; height: 20px; }
.top-c { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.top-title { font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: .06em; }
.home { width: 44px; height: 40px; display: flex; align-items: center; justify-content: flex-end; }
.home svg { width: 26px; height: 26px; display: block; }
.dots { display: flex; gap: 5px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .3s; }
.dots i.on { background: var(--dai); }

.text-btn {
  flex: none;
  padding: 4px 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--dai-d);
  line-height: 1.5;
}
.text-btn:disabled { opacity: 0.5; }

/* ---------- 中间 ---------- */
.main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding: 16px;
}
/* 网站：每一页（.screen）自己留边，访问码、说明两页也一样 */
.main.shell { padding: 0; }
.main.shell .gate { padding: 8px 16px 16px; }
.main.shell .sample-note { margin: 12px 16px 0; }
.sample-note {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray);
  text-align: center;
}
.hint { margin: 0 0 16px; color: var(--gray); text-align: center; }

/* ---------- 进入之前：访问码、说明、需求类型（和首页一样的样子） ---------- */
.gate { margin: auto 0; padding: 8px 0 16px; }
.gate-row { display: flex; align-items: center; gap: 8px; margin: 0; }
.gate-input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}
.gate-input:focus-visible { outline-offset: 1px; }
.gate-go { display: block; width: 100%; margin-top: 16px; }
.gate-msg { margin: 12px 0 0; font-size: 14px; line-height: 1.6; text-align: center; }

/* ---------- 回答里的字（演练、选礼物共用） ---------- */
.sample-cap {
  margin: 24px 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray);
  text-align: center;
}

/* 用户说的话（演练）：浅青绿气泡，墨色字（和选礼物里我说的话一样） */
.bubble {
  padding: 8px 14px;
  border: 1px solid var(--me-line);
  border-radius: 14px;
  background: var(--me);
  color: var(--ink);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* 回答：白底块，1px 线色边框，圆角 8px，不加阴影 */
.answer {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  overflow-wrap: anywhere;
}
.answer p { margin: 0; }
.blk + .blk { margin-top: 8px; }
.blk.gap { margin-top: 16px; }
.thinking { color: var(--gray); }

/* 行首的标签：正文字体加粗，14px，黛色；“别送”用朱色；标签后面的价格用黛色 */
.label { font-size: 14px; font-weight: 700; color: var(--dai-d); }
.label.warn { color: var(--zhu); }
.price { color: var(--dai-d); }
.list { margin: 0; padding-left: 1.3em; }
.list li + li { margin-top: 4px; }

/* 可以这样说：楷体，字大一点；浅黛色底，左边 3px 黛色竖线，不加阴影 */
.say {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 6px 8px 12px;
  border-left: 3px solid var(--dai);
  background: var(--dai-6);
}
.say-text {
  flex: 1;
  min-width: 0;
  font-family: var(--kai);
  font-size: 20px;
  line-height: 1.6;
}
.copy { font-size: 14px; padding: 2px 6px; margin-top: 2px; }
.say-after { margin-top: 6px; }

/* 写在卡片上：诗句也用楷体 */
.poem { margin-top: 4px; font-family: var(--kai); font-size: 20px; line-height: 1.6; }
.poem-after { margin-top: 4px; }

/* 趣闻：默认收起，只露出这一行和一个小箭头 */
.blk.fun { margin-top: 14px; }
.fun > summary {
  display: block;
  list-style: none;
  color: var(--dai-d);
  cursor: pointer;
  border-radius: 4px;
}
.fun > summary::-webkit-details-marker { display: none; }
.fun > summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 8px;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent currentColor;
  vertical-align: 1px;
}
.fun[open] > summary::before { transform: rotate(90deg); }
.fun-body { margin-top: 6px; padding-left: 15px; }

.note { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--gray); }
.answer > .note:first-child { margin-top: 0; }
.error.after { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

/* 按钮：主色底、白字（发送、停止、重试） */
.primary-btn {
  flex: none;
  height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--dai);
  color: #fff;
  line-height: 1;
}
.primary-btn:disabled { opacity: 0.45; }
.retry { height: 36px; margin-top: 10px; padding: 0 16px; border-radius: 6px; font-size: 14px; }

/* 有用 / 没用（小字按钮，能点的范围至少 32px 高） */
.feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; }
.feedback .text-btn { font-size: 13px; padding: 6px 8px; }
.fb-done { padding: 6px 8px; font-size: 13px; line-height: 1.5; color: var(--gray); }

/* 文字反馈（可选）：一行小输入框 + “提交”（字号 16px，免得 iPhone 放大页面） */
.fb-text { margin-top: 2px; }
.fb-form { display: flex; align-items: center; gap: 4px; margin: 0; }
.fb-input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  font-size: 16px;
}
.fb-input:focus-visible { outline-offset: 1px; }
.fb-text .text-btn { font-size: 13px; padding: 6px 8px; }

::placeholder { color: var(--gray); opacity: 1; }
input:disabled, textarea:disabled { opacity: 0.6; }

/* ---------- 每一页（照交互原型） ---------- */
.screen { padding: 14px 16px 40px; animation: screenIn .28s ease-out; }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.soon-note { margin: 14px 0 0; font-size: 13px; color: var(--gray); }

/* 礼礼的气泡：白底细边；尾巴朝左（首页，她在左边）或朝上（板块里，她在左上） */
.speech { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.tail-l::before, .tail-l::after { content: ""; position: absolute; top: calc(50% - 8px); border-style: solid; border-color: transparent; }
.tail-l::before { left: -9px; border-width: 8px 9px 8px 0; border-right-color: var(--line); }
.tail-l::after { left: -7.5px; top: calc(50% - 7px); border-width: 7px 8px 7px 0; border-right-color: var(--white); }
.tail-u::before, .tail-u::after { content: ""; position: absolute; border-style: solid; border-color: transparent; }
.tail-u::before { top: -9px; left: var(--tx, 30px); border-width: 0 8px 9px 8px; border-bottom-color: var(--line); }
.tail-u::after { top: -7.5px; left: calc(var(--tx, 30px) + 1px); border-width: 0 7px 8px 7px; border-bottom-color: var(--white); }
.plain { margin: 0; }

/* 板块里左上角的礼礼和名字 */
.who-row { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 12px; }
.who-row .who-name, .who-row .who-status { margin-bottom: 6px; }
.avatar { width: 88px; height: 110px; flex: none; margin: -6px 0 -2px -6px; }
.avatar .g { width: 88px; height: 110px; }
.who-name { font-family: var(--serif); font-weight: 600; font-size: 16px; }
.who-status { font-size: 13px; color: var(--gray); margin-left: 2px; }
.who-row.desk-who { display: none; } /* 演练、人情簿左边一栏的礼礼：只在电脑上有（见最后“电脑”那一段） */

/* ---------- 演练（第 6 版）：选场面（交互说明 9.1；照原型"演练（第 6 版）：选场面"那段） ---------- */
.drill-page>.speech{margin-bottom:12px}
.drill-main{display:flex;flex-direction:column}
.own-scene{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:14px 14px 14px 12px;background:var(--me);border:1px solid var(--me-line);border-radius:14px;color:var(--ink);text-align:left;transition:border-color .2s,box-shadow .2s,transform .15s}
.own-scene:active{transform:scale(.985)}
@media (hover:hover){.own-scene:hover{border-color:var(--dai);box-shadow:0 10px 24px -18px rgba(58,51,44,.5)}}
.os-av{flex:none;width:52px;height:52px;border-radius:50%;background:var(--white);border:1px solid var(--me-line);overflow:hidden;position:relative}
.os-av .g{position:absolute;left:-2px;top:0;width:54px;height:54px}
.os-text{flex:1;min-width:0;display:flex;flex-direction:column}
.os-t{font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.4;color:var(--dai-d);letter-spacing:.04em}
.os-d{font-size:14px;line-height:1.6;color:var(--ink);margin-top:2px}
.os-eg{font-size:13px;line-height:1.6;color:var(--gray);margin-top:4px}
.os-go{flex:none;width:20px;height:20px;color:var(--dai-d)}
.sg-or{margin:16px 0 0;font-size:13px;color:var(--gray);text-align:center;letter-spacing:.1em}
.sg-h{margin:14px 0 8px;font-family:var(--serif);font-weight:600;font-size:14px;letter-spacing:.12em;color:var(--gray)}
.sg-list{display:flex;flex-direction:column;gap:8px}
.scene-row{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px 11px 14px;background:var(--white);border:1px solid var(--line);border-radius:12px;color:var(--ink);text-align:left;transition:border-color .2s,transform .15s}
.scene-row:active{transform:scale(.985)}
@media (hover:hover){.scene-row:hover{border-color:var(--dai)}}
.scene-row .sr-text{flex:1;min-width:0;display:flex;flex-direction:column}
.scene-row .sr-t{font-size:16px;font-weight:600;line-height:1.5}
.scene-row .sr-d{font-size:13px;line-height:1.55;color:var(--gray);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scene-row .sr-who{flex:none;font-size:12px;padding:3px 9px;border-radius:999px;background:var(--dai-6);color:var(--dai-d)}
.drill-main .note{margin:16px 0 4px;font-size:13px;color:var(--gray);text-align:center}
.drill-main .error{margin-top:12px}
.act{color:var(--gray)}   /* 对方话里括号里的动作 */

/* ---------- 演练：聊天里的东西（交互说明 9.3–9.5；照原型"演练：聊天里的东西"那段） ---------- */
/* 对方（礼礼演的人）：左边，头像是一方小印，上面一行小字写身份；气泡左边一道墨色细线，和礼礼自己说的分开 */
.msg.them{padding-right:30px}
.msg .av.role{display:flex;align-items:center;justify-content:center;background:var(--zhu-6);border-color:var(--zhu-6);color:var(--zhu);font-family:var(--serif);font-weight:600;font-size:18px;line-height:1}
.msg.them.cont .av.role{visibility:hidden;height:0}
.them .bub{background:var(--white);border:1px solid var(--line);border-left:3px solid #6B6157;border-top-left-radius:6px}
.who-tag{font-size:12px;color:var(--gray);margin:0 0 3px 2px}
.them-note{display:flex;align-items:center;gap:10px;margin:4px 0 0 4px;font-size:13px;color:var(--gray)}
.them-note .err{color:var(--zhu)}
.divider{display:flex;align-items:center;gap:10px;align-self:stretch;margin:8px 4px 2px;font-size:12px;color:var(--gray);letter-spacing:.06em}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
/* 场面卡：在礼礼的气泡里（先是三个跳动的点，搭好了整张冒出来） */
.bub.scene{width:100%;padding:12px 14px 10px;white-space:normal}
.bub.scene.typing{width:auto}
.sc-k{font-size:12px;color:var(--gray);letter-spacing:.1em}
.sc-title{margin:2px 0 8px;font-size:18px;font-weight:600;line-height:1.5}
.sc-rows{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;margin:0;font-size:15px;line-height:1.65}
.sc-rows dt{color:var(--gray);font-size:13px;line-height:1.95;white-space:nowrap}
.sc-rows dd{margin:0}
.sc-rows dd.open{font-family:var(--kai);font-size:17px}
.sc-tag{display:inline-block;margin-left:6px;font-size:12px;padding:1px 8px;border-radius:999px;background:var(--dai-6);color:var(--dai-d);vertical-align:1px}
.bub.scene.fresh{animation:cardIn .42s var(--spring) both}
@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
/* 复盘：在礼礼的气泡里，一节一节出来 */
.bub.review{width:100%;padding:12px 14px 10px;white-space:normal;overflow-wrap:anywhere}
.bub.review.typing{width:auto}
.rv-sec{margin-top:12px;animation:rvIn .36s ease-out both}
@keyframes rvIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bub.review.still .rv-sec{animation:none}
.rv-sec:first-child{margin-top:0}
.rv-k{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:13px;font-weight:600;color:var(--dai-d)}
.rv-sec p.rv-sum{margin:0;font-size:17px;font-weight:600;line-height:1.6}   /* 这次怎么样：一句，17px 加粗（9.5；要比下面 .rv-sec p 的 15px 优先） */
.rv-three{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:15px;line-height:1.65}
.rv-three li{display:flex;gap:8px}
.rv-three .mk{flex:none;width:20px;text-align:center;font-weight:700}
.rv-three .mk.ok{color:var(--dai-d)}
.rv-three .mk.tri{color:var(--zhu)}
.rv-three .mk.dot{color:var(--gray)}
.rv-three .mk svg{display:inline-block;vertical-align:-2px}   /* △ 是画出来的，各家字体里大小不一 */
.rv-three b{font-weight:600}
.rv-sec p{margin:0;font-size:15px;line-height:1.7}
.rv-sec p+p{margin-top:4px}
.rv-q{font-family:var(--kai);font-size:17px}
.rv-fix .from{color:var(--gray);text-decoration:line-through;text-decoration-color:rgba(176,83,60,.6)}
.rv-fix .to{font-weight:600}
.rv-next .say-line{margin:2px 0 4px;font-family:var(--kai);font-size:18px;line-height:1.6}
.rv-next .acts{display:flex;gap:16px;margin-bottom:2px}
.rv-next .acts .text-btn{padding:6px 0;font-size:14px}
/* 古人这样做：一块浅纸色，左上一方小印"古"，下面一行出处和性质 */
.rv-old{padding:10px 12px 8px;background:var(--sunk);border:1px solid var(--line);border-radius:12px}
.rv-old .rv-k{color:var(--ink)}
.rv-old .sc,.fold .sc{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:5px;background:var(--zhu-6);color:var(--zhu);font-family:var(--serif);font-weight:600;font-size:14px;line-height:1}
.rv-old .src-line,.fold .src-line{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:6px}
/* 趣闻：折着，点开才显示 */
.rv-sec.fold{border-top:1px dashed var(--line);padding-top:10px}
.fold-head{display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:4px 0;font-size:15px;text-align:left;color:var(--ink)}
.fold-head .t{flex:1;min-width:0}
.fold-head .fb{flex:none;font-size:13px;color:var(--dai-d)}
.fold-body{margin-top:6px}
.fold-body p{margin:0;font-size:15px;line-height:1.7}
/* 复盘以后接着问（9.5a）：她的回答是普通气泡；"可以这样说"一块在下面（虚线、小标签、楷体一行、复制） */
.bub.rv-ask{white-space:normal;overflow-wrap:anywhere}
.bub.rv-ask .ask-a{margin:0}
.bub.rv-ask .ask-a+.ask-a{margin-top:6px}
.ask-say{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}
.ask-say.fresh{animation:giftIn .36s ease-out both}
.ask-say .say-line{margin:2px 0 4px;font-size:18px}
.ask-say .acts{display:flex;gap:16px;margin-bottom:2px}
.ask-say .acts .text-btn{padding:6px 0;font-size:14px}
.ask-note{margin-top:6px;font-size:13px;color:var(--gray)}
.ask-note .text-btn{margin-left:10px;font-size:13px}
/* 底部：还能说几句（在撤回和"换个场面"中间）；"开始练""看复盘""再练一次"是主色实心 */
.turns{font-size:13px;color:var(--gray);margin:4px auto 0}
.chip.go{background:var(--dai);border-color:var(--dai);color:#fff}
@media (hover:hover){.chip.go:hover{background:var(--dai-d);border-color:var(--dai-d)}}
/* 电脑：左边大礼礼演别人时，胸前挂一方小印写着演的是谁 */
.side-guide{position:relative}
.side-role{position:absolute;right:22px;bottom:58px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:7px;background:var(--zhu);color:#F3EEE6;font-family:var(--serif);font-weight:600;font-size:22px;line-height:1;box-shadow:0 6px 14px -8px rgba(58,51,44,.6);transform:rotate(-6deg);animation:roleIn .45s var(--spring) both}
@keyframes roleIn{from{opacity:0;transform:translateY(-14px) rotate(-20deg) scale(.6)}to{opacity:1;transform:rotate(-6deg)}}
@media (max-width:959px){.side-role{display:none}}

/* ===================================================================
   下面照交互原型（改版样稿/交互原型.html）原样搬过来：礼礼、开场、首页、打字的光标
   =================================================================== */
/* ---------- 向导：礼礼（甲骨文"礼"里的那只豆：青铜色，头上两串玉，腰上朱色的结） ---------- */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.g{display:block;overflow:visible}
.g [data-pose]{opacity:0;transition:opacity .12s}
.g.pose-down [data-pose~="down"],.g.pose-chin [data-pose~="chin"],.g.pose-point [data-pose~="point"],
.g.pose-wave [data-pose~="wave"],.g.pose-write [data-pose~="write"]{opacity:1}
.g .mouth>*{opacity:0}
.g.m-smile .mouth .smile,.g.m-open .mouth .open,.g.m-o .mouth .o,.g.m-flat .mouth .flat{opacity:1}
.g .eyes .happy{opacity:0}
.g.e-happy .eyes .happy{opacity:1}
.g.e-happy .eyes .look{opacity:0}
/* ---------- 礼礼（第 6 版：更灵动，交互说明 4.1；照原型 CSS“礼礼（第 6 版）”那段） ----------
   一层一层分开动，互不打断：.fig 做“一下子”的动作（跳、扭一扭）；.body 一直轻轻呼吸、左右晃（按脚底）；
   .head 一直慢慢歪；.head-act 做点头、歪头、听；两串玉晚半拍跟着甩。眨眼、眼睛看哪儿、什么时候做小动作，由 app.js 管 */
.g .fig,.g .body,.g .head,.g .head-act,.g .shadow,.g .jade-l,.g .jade-r,.g .jade-in,.g [data-pose]{transform-box:view-box}
.g .fig,.g .body{transform-origin:80px 194px}
.g .body{animation:idleBody 4.4s ease-in-out infinite}
@keyframes idleBody{0%,50%,100%{transform:rotate(0) scale(1,1)}25%{transform:rotate(-1.3deg) scale(1.014,.978)}75%{transform:rotate(1.3deg) scale(1.014,.978)}}
.g .head{transform-origin:80px 134px;animation:idleHead 5.8s ease-in-out -1.2s infinite}
@keyframes idleHead{0%,100%{transform:rotate(0)}30%{transform:rotate(1.8deg)}70%{transform:rotate(-1.5deg)}}
.g .head-act{transform-origin:80px 134px;transition:transform .28s cubic-bezier(.3,1.4,.5,1)}
.g .jade-l{transform-origin:66px 68px;animation:jade 2.6s ease-in-out infinite}
.g .jade-r{transform-origin:94px 68px;animation:jade 2.6s ease-in-out -1.1s infinite}
@keyframes jade{0%,100%{transform:rotate(-3.6deg)}50%{transform:rotate(3.6deg)}}
.g .jade-l .jade-in{transform-origin:66px 68px}
.g .jade-r .jade-in{transform-origin:94px 68px}
.g .shadow{transform-origin:80px 195px}
/* 眼睛：平时跟着鼠标、手指（JS 设 --lx、--ly，最多 3px）；想、指、往上看的时候有自己的方向 */
.g .look{transform:translate(var(--lx,0px),var(--ly,0px));transition:transform .16s ease-out}
.g.e-up .look{transform:translate(2.5px,-3px)}
.g.e-down .look{transform:translate(0,3px)}
.g.e-side .look{transform:translate(3px,1px)}
/* 眨眼：JS 隔 1.7–5.3 秒随机眨一下，五次里有一次眨两下 */
.g .blink{transform-box:fill-box;transform-origin:center;transition:transform .07s ease-in}
.g.blinking .blink{transform:scaleY(.1)}
.g .think-dots{opacity:0;transition:opacity .2s}
.g.thinking .think-dots{opacity:1}
.g.thinking .think-dots circle{animation:dotPulse 1.2s infinite both}
.g.thinking .think-dots circle:nth-child(2){animation-delay:.2s}
.g.thinking .think-dots circle:nth-child(3){animation-delay:.4s}
@keyframes dotPulse{0%,100%{opacity:.25}40%{opacity:1}}
/* 一下子的动作（JS 加 class，放完就去掉） */
.g.hop .fig{animation:hop .68s ease-in-out}   /* 先蹲一下，再跳起来、身子拉长，落地压扁一下再弹回来 */
@keyframes hop{0%{transform:translateY(0) scale(1,1)}15%{transform:translateY(0) scale(1.08,.9)}40%{transform:translateY(-16px) scale(.95,1.07)}58%{transform:translateY(-17px) scale(1,1)}78%{transform:translateY(0) scale(1.07,.92)}90%{transform:translateY(0) scale(.98,1.03)}100%{transform:translateY(0) scale(1,1)}}
.g.hop .shadow{animation:shadowHop .68s ease-in-out}
@keyframes shadowHop{0%,15%,78%,100%{transform:scale(1)}40%,58%{transform:scale(.7);opacity:.04}}
.g.hop .jade-in,.g.jingle .jade-in{animation:jadeHop .72s ease-out}
@keyframes jadeHop{0%{transform:rotate(0)}22%{transform:rotate(-11deg)}50%{transform:rotate(8deg)}75%{transform:rotate(-3.5deg)}100%{transform:rotate(0)}}
.g.hopS .fig{animation:hopS .46s ease-in-out}
@keyframes hopS{0%,100%{transform:translateY(0) scale(1,1)}20%{transform:scale(1.05,.94)}50%{transform:translateY(-6px) scale(.98,1.03)}80%{transform:translateY(0) scale(1.03,.97)}}
.g.wiggle .fig{animation:wiggle .7s ease-in-out}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-4.5deg)}40%{transform:rotate(4deg)}60%{transform:rotate(-2.5deg)}80%{transform:rotate(1.2deg)}}
.g.nod .head-act{animation:nod .42s ease-in-out}
@keyframes nod{0%,100%{transform:none}35%{transform:translateY(3.5px) rotate(-4deg)}70%{transform:translateY(-1px) rotate(1deg)}}
.g.bob .head-act{animation:bob .3s ease-out}
@keyframes bob{0%,100%{transform:none}45%{transform:translateY(-2.6px) rotate(-1deg)}}
.g.tilt .head-act{animation:tilt 1.3s ease-in-out}
@keyframes tilt{0%,100%{transform:none}22%,72%{transform:rotate(-8deg) translateX(-1px)}}
.g.listen .head-act{transform:rotate(6deg) translateX(1.5px)}   /* 你打字的时候：歪着头听 */
/* 换姿势时，指的、托腮的那只手“弹”出来，不是一下子换掉 */
.g.pose-point g[data-pose="point"],.g.pose-chin g[data-pose="chin"]{transform-origin:90px 136px;animation:armPop .34s cubic-bezier(.3,1.5,.5,1) both}
@keyframes armPop{from{transform:rotate(-16deg) scale(.88)}to{transform:none}}
.g .wave-arm{transform-box:view-box;transform-origin:90px 136px}
.g.pose-wave .wave-arm{animation:wave .9s ease-in-out 2}
@keyframes wave{0%,100%{transform:rotate(0)}30%{transform:rotate(-14deg)}70%{transform:rotate(8deg)}}
.g.pose-write .scribble path{stroke-dasharray:18;stroke-dashoffset:18;animation:scrib 2.4s linear infinite}
.g.pose-write .scribble path:nth-child(2){animation-delay:.5s}
.g.pose-write .scribble path:nth-child(3){animation-delay:1s}
.g.pose-write .pen{animation:pen .35s ease-in-out infinite alternate}
@keyframes scrib{0%{stroke-dashoffset:18}40%,100%{stroke-dashoffset:0}}
@keyframes pen{from{transform:translate(0,0)}to{transform:translate(-2px,2px)}}
/* 图标：印章。大图（开场、电脑首屏“礼”字最早这样写）带印泥 */
.seal{display:block}
.seal.inked .seal-in{filter:url(#sealInk)}

/* ---------- 开场 ---------- */
.opening{position:fixed;inset:0;z-index:50;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}
.opening.out{animation:opOut .45s ease forwards}
@keyframes opOut{to{opacity:0;visibility:hidden}}
.op-logo{width:168px;height:168px;overflow:visible}
.op-logo .seal{opacity:0;transform-box:fill-box;transform-origin:center}
.op-logo .st{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}
.op-logo .foot{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);opacity:0}
.op-logo .drop{opacity:0;transform:translateY(-30px)}
/* 0.25–1.45 秒写出一只豆（盘口、盘、柄，圈足从柄下面长出来）；1.5–2.2 秒两串玉落进去；2.4 秒盖章 */
.opening.play .s1{animation:draw .3s ease-out .25s forwards}
.opening.play .s2{animation:draw .42s ease-in-out .6s forwards}
.opening.play .s3{animation:draw .14s ease-in 1.06s forwards}
.opening.play .foot{animation:grow .24s ease-out 1.2s forwards}
.opening.play .jl{animation:drop .5s var(--spring) 1.52s forwards}
.opening.play .jr{animation:drop .5s var(--spring) 1.7s forwards}
.opening.play .seal{animation:stamp .34s ease-out 2.42s forwards}
.opening.play .op-logo{animation:press .34s ease-out 2.42s}
.opening .ink{transition:opacity .2s ease .2s}
.opening.stamped .ink{opacity:0}
@keyframes draw{0%{opacity:1;stroke-dashoffset:1}100%{opacity:1;stroke-dashoffset:0}}
@keyframes grow{from{opacity:1;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}
@keyframes drop{0%{opacity:0;transform:translateY(-30px)}50%{opacity:1}100%{opacity:1;transform:translateY(0)}}
@keyframes stamp{0%{opacity:0;transform:scale(1.38)}70%{opacity:1;transform:scale(.97)}100%{opacity:1;transform:scale(1)}}
@keyframes press{50%{transform:scale(.965)}}
.op-name{margin-top:22px;font-family:var(--serif);font-size:32px;font-weight:600;letter-spacing:.5em;padding-left:.5em;opacity:0}
/* 开场下面的“问礼”（第 5 版）：书法集字，“問”高 40、“禮”高 50 */
.op-name.callig-name{display:flex;align-items:center;justify-content:center;gap:2px;letter-spacing:0;padding-left:0;color:var(--ink)}
.o-wen{display:block;height:40px;width:auto}
.o-li{display:block;height:50px;width:auto}
.op-sub{margin-top:4px;font-family:var(--serif);font-weight:300;font-size:16px;color:var(--gray);letter-spacing:.2em;padding-left:.2em;opacity:0}
.opening.play .op-name{animation:rise .5s ease-out 2.75s forwards}
.opening.play .op-sub{animation:rise .5s ease-out 2.9s forwards}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.op-skip{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom));font-size:13px;color:var(--gray);opacity:0;animation:rise .4s ease-out .8s forwards}
/* 第二次打开：只盖一下章 */
.opening.short .ink{opacity:0}
.opening.short .seal{animation:stamp .34s ease-out .1s forwards}
.opening.short .op-name,.opening.short .op-sub{animation:rise .3s ease-out .2s forwards}
.opening.short .op-skip{display:none}
/* 点了跳过（和关了动画时）：直接显示盖好的章 */
.opening.done .seal{opacity:1;animation:none;transform:none}
.opening.done .ink{opacity:0}

/* ---------- 首页 ---------- */
/* 手机首页最下面两行出处（第 5 版；电脑上第一屏已经写了，这里不显示）。每一小段不断行，窄屏时整段换到下一行，不把书名拆开 */
.hub-src{margin:14px 0 0;font-family:var(--serif);font-weight:300;font-size:12px;line-height:1.8;color:var(--gray);text-align:center}
.hub-src span{white-space:nowrap}
/* 换页（交互说明 3.5，View Transitions）：礼礼从首页的位置走到板块里左边的位置，点的那张卡片展开成聊天区；回主页反过来。
   整页淡入淡出 0.3 秒；礼礼、卡片 0.5 秒。卡片先淡掉、聊天区再淡出来，中间不出现被拉大的卡片字 */
::view-transition-group(root){animation-duration:.3s}
::view-transition-group(lili),::view-transition-group(panel){animation-duration:.5s;animation-timing-function:cubic-bezier(.3,.85,.3,1)}
::view-transition-old(panel),::view-transition-new(panel){height:100%;width:100%;object-fit:cover;object-position:top}
::view-transition-old(panel){animation:vtOut .16s ease-out both}
::view-transition-new(panel){animation:vtIn .3s .1s ease-out both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}
.card.vt .card-face{view-transition-name:panel}   /* 同一时刻一个名字只能有一个：只加在要变的那一张卡片上 */
#chat,#drillMain{view-transition-name:panel}   /* 演练选场面那一块也叫 panel（第 6 版）：和聊天区不会同时显示 */
@media (min-width:960px){#guideBig,#sideGuide,#paneDrill>.desk-who .avatar,#paneBook>.desk-who .avatar{view-transition-name:lili}}
.hero,.hub-h{display:none}   /* 产品介绍那一屏只在电脑上有 */
#hub.screen{padding-bottom:14px}
.hub-main{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 85px);min-height:calc(100dvh - 85px)}   /* 手机：一屏装满，内容整体上下居中，底部不留一大片空（85 = 顶栏 57 + 上下边距） */
.hub-stage{display:flex;align-items:center;gap:8px;min-height:210px}
.guide-big{width:168px;flex:none;transform-origin:50% 90%}
.guide-big .g{width:168px;height:210px}
.guide-big.pop{animation:popIn .55s var(--spring) both}
@keyframes popIn{from{opacity:0;transform:scale(.6) translateY(16px)}to{opacity:1;transform:none}}
/* 气泡高度跟着这一句话走：打字前先按整句撑好（JS sayHub），不留空，也不会越打越高 */
.hub-bubble{flex:1;font-size:15px;line-height:1.75}
.hub-bubble p{margin:0}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.card{position:relative}
/* 整张卡片就是一个按钮：点一下选中，再点一下（卡片上任何地方）进入 */
.card-face{position:relative;display:block;width:100%;padding:0;overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:12px;text-align:left;transition:border-color .2s,box-shadow .2s,opacity .25s,transform .15s}
.card-in{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:14px 14px 13px;transition:filter .3s ease,opacity .3s ease}
.card-head{display:flex;align-items:center;gap:10px}
/* 卡片右下角很淡的大字：和小章同一个字（赵孟頫行书的 SVG，第 6 版），往下出去一截，被卡片裁掉 */
.card-art{position:absolute;right:2px;bottom:-14px;line-height:1;color:var(--zhu);opacity:.08;pointer-events:none}
.card-art .sg{display:block;width:auto;height:82px}
.card-art .s-bu{height:96px}
.card-face:active{transform:scale(.975)}
.card.on .card-face{border-color:var(--dai);box-shadow:inset 0 0 0 1px var(--dai)}
.card.on .card-in{filter:blur(4px);opacity:.55}
.cards.has-on .card:not(.on) .card-face{opacity:.5}
.mini{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border:1.5px solid var(--zhu);border-radius:6px;color:var(--zhu);font-family:var(--serif);font-weight:600;font-size:18px;line-height:1}
/* 小章里的字：赵孟頫行书（矢量，第 6 版 3.3）。字形宽窄不一，各自定高度，看上去一样大；描一圈细边，小的时候笔画不发虚 */
.mini .sg{display:block;width:auto;height:74%}
.mini .s-yi{height:70%}
.mini .s-yan{height:64%}
.mini .s-bu{height:84%}
.mini .sg path{stroke:currentColor;stroke-width:.5px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.card-title{font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.4;letter-spacing:.04em}
.card-sub{font-size:13px;color:var(--gray);line-height:1.5;margin-top:8px}
.card-eg{display:block;align-self:stretch;margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);font-size:12.5px;line-height:1.6;color:var(--gray)}
@media (max-width:959px) and (max-height:700px){.card-eg{display:none}}   /* 手机屏幕矮：例子先不放 */
.hub-main.tight .card-eg{display:none}   /* 手机上一屏放不下（窄屏卡片里的例子折成三行），也先不放例子（app.js fitHub） */
/* 选中后：卡片正中两个字"进入"，没有底色；下面一道朱色短线 */
.enter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.3;letter-spacing:.3em;padding-left:.3em;color:var(--ink);opacity:0;transform:scale(.9);transition:opacity .22s,transform .32s var(--spring);pointer-events:none}
.enter::after{content:"";width:0;height:2px;margin:7px 0 0 -.3em;border-radius:1px;background:var(--zhu);transition:width .3s ease .12s}
.card.on .enter{opacity:1;transform:none}
.card.on .enter::after{width:26px}
@media (hover:hover){
  .card-face:hover{border-color:#C9BEAC;box-shadow:0 10px 24px -16px rgba(58,51,44,.45)}
  .card.on .card-face:hover{border-color:var(--dai)}
}
.remind{display:flex;align-items:center;gap:10px;width:100%;margin-top:12px;padding:10px 12px;background:var(--white);border:1px solid var(--line);border-radius:12px;text-align:left;font-size:14px;line-height:1.5;color:var(--gray)}
.remind .mini{width:26px;height:26px;font-size:15px;margin:0;flex:none}
.remind .r-t{flex:1;min-width:0}
.remind b{color:var(--ink);font-weight:600;margin-right:6px}
.remind .r-go{flex:none;color:var(--dai-d)}

/* 进入时卡片放大铺满（一个复制出来的块） */
.zoom{position:fixed;z-index:20;background:var(--white);border:1px solid var(--dai);border-radius:12px;pointer-events:none}

/* 打字时后面一闪一闪的光标 */
.typing-caret::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--gray);animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

/* ---------- 选礼物、能送吗：聊天的样子（她说的在左，我选的在右，像微信；照交互原型。原型的 #talk .dock 这里叫 #paneQa .qdock） ---------- */
#paneQa.screen{padding:0 12px;animation:fadeIn .28s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* 聊天的时候整页正好一屏（第 5 版；app.js 给 html 加 chatmode）：上面标题栏，中间消息框，下面输入区；整页不滚，滚的是消息框 */
html.chatmode,html.chatmode body{height:100%;overflow:hidden}
html.chatmode .app{height:100vh;height:100dvh;min-height:0}
html.chatmode .main{flex:1 1 auto;min-height:0}
#paneQa{flex:1;min-height:0;display:flex;flex-direction:column}
.side{display:none}   /* 左边的大礼礼只在电脑上有 */
.chat{flex:1;min-height:0;display:flex;flex-direction:column;min-width:0}
/* 消息从上往下排；放满了，新的把旧的往上顶（框里自动滚到底），滚轮、手指往上能翻到前面的 */
.msgs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding:14px 2px 16px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.msgs>*{flex:none}
.msg{display:flex;align-items:flex-start;gap:8px;animation:msgIn .28s ease-out both}
@keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.msg.her{padding-right:30px}
.msg.me{justify-content:flex-end;padding-left:64px}
.msg .av{position:relative;width:38px;height:38px;flex:none;border-radius:50%;background:var(--white);border:1px solid var(--line);overflow:hidden}
.msg.cont .av{visibility:hidden;height:0}   /* 同一个人连着说：头像只放第一条 */
.av .g{position:absolute;left:-2px;top:0;width:40px;height:40px}
.g.still,.g.still *{animation:none!important;transition:none!important}   /* 前面几段的头像：定住的复制品 */
.col{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:100%}
.bub{position:relative;min-width:0;max-width:100%;padding:9px 13px;border-radius:16px;font-size:16px;line-height:1.7;word-break:break-word;text-align:left;white-space:pre-line}
.her .bub{background:var(--white);border:1px solid var(--line);border-top-left-radius:6px}
.me .bub{background:var(--me);border:1px solid var(--me-line);border-top-right-radius:6px}   /* 第 5 版起只是一条消息，不能点 */
.bub.ask{font-weight:600}
.bub.typing{display:inline-flex;align-items:center;min-height:43px}
.dots3{display:inline-flex;gap:5px}
.dots3 i{width:7px;height:7px;border-radius:50%;background:var(--gray);opacity:.3;animation:dotPulse 1.2s infinite both}
.dots3 i:nth-child(2){animation-delay:.2s}.dots3 i:nth-child(3){animation-delay:.4s}
.sys{align-self:center;max-width:92%;margin:2px 0;padding:3px 12px;border-radius:999px;background:var(--dai-6);font-size:12px;line-height:1.6;color:var(--gray);text-align:center}
.flyer{position:fixed;z-index:30;pointer-events:none;margin:0}

/* 底部输入区（第 5 版）：一张浮起来的卡片，离屏幕下边 10px（再加 iPhone 底部的安全区）。上面是选项（或“礼礼在思考”），
   下面是一直在的输入框，再下面一行小字（跳过、重新问） */
.qdock{flex:none;position:relative;z-index:4;margin:4px 0 calc(10px + env(safe-area-inset-bottom));padding:10px 10px 6px;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 30px -20px rgba(58,51,44,.55)}
.dock-wait{display:flex;align-items:center;gap:10px;height:34px;margin:0 2px 8px;font-size:14px;color:var(--gray)}
.dock-wait .stop{margin-left:auto}   /* 等回答时：左边“礼礼在思考”，右边“停止” */
.opts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.opts:empty{display:none}
.chip{min-height:40px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--white);font-size:15px;line-height:1.4;text-align:left;animation:chipIn .32s ease-out both;animation-delay:calc(var(--i,0) * 40ms);transition:border-color .2s,background .2s,color .2s}
@keyframes chipIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (hover:hover){.chip:hover{border-color:var(--dai)}}
.chip.mine{border-color:var(--dai)}
.chip.mine small{color:var(--gray);font-size:12px;margin-left:4px}
.chip.on{background:var(--dai);border-color:var(--dai);color:#fff}
.chip.on small{color:rgba(255,255,255,.82)}
.chip.act{border-color:var(--dai);color:var(--dai-d)}   /* “填个预算”“记进人情簿”：和追问区分开 */
/* 输入框一直在（第 5 版）：16px，纸色底，44px 高，右边“发送”。提示字每一步不一样（app.js setInput） */
.own{display:flex;gap:8px}
.own input{flex:1;min-width:0;height:44px;border:1px solid var(--line);border-radius:12px;padding:9px 12px;background:var(--paper);font-size:16px;color:var(--ink)}
.own input::placeholder{color:#857A6C}
.own .go{flex:none;height:44px;padding:0 18px;border-radius:12px;background:var(--dai);color:#fff;font-size:15px}
.dock-foot{display:flex;align-items:center;gap:14px;min-height:4px;padding:0 4px}
.dock-foot .skip,.dock-foot .redo{margin-top:4px}
.skip{margin-left:auto;font-size:13px;color:var(--gray);opacity:0;transition:opacity .6s;text-decoration:underline dotted;text-underline-offset:4px;padding:6px 0;pointer-events:none}
.skip.show{opacity:.8;pointer-events:auto}
.skip.show.first{animation:skipHint 1.6s ease-in-out .5s 1}
@keyframes skipHint{50%{opacity:1;color:var(--dai)}}
.stop{font-size:14px;color:var(--dai-d);padding:6px 16px;border:1px solid var(--line);border-radius:999px;background:var(--white)}
.redo{margin-left:auto;font-size:13px;color:var(--gray);padding:6px 0;text-decoration:underline dotted;text-underline-offset:4px}
/* 撤回（第 6 版，交互说明 7.1）：底部最下面一行的左边，收回我刚发的那一句，回到那一步 */
.undo{display:inline-flex;align-items:center;gap:3px;margin-top:4px;padding:6px 8px 6px 0;font-size:13px;color:var(--gray)}
.undo svg{width:16px;height:16px;flex:none}
@media (hover:hover){.undo:hover{color:var(--dai-d)}}
.pick-who{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px;font-size:14px;color:var(--gray)}
.pick-who .chip{animation:none}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;max-width:min(90vw,400px);padding:9px 16px;border-radius:8px;background:var(--ink);color:#fff;font-size:14px;line-height:1.5;animation:rise .25s ease-out}
html.chatmode .toast{top:calc(64px + 14px);bottom:auto}   /* 聊天时提示（“已撤回「……」”）放在上面，不挡底部输入区 */

/* ---------- 回答：放在她的一个大气泡里（照交互原型；原型的 .answer .gh .lab .price .hint 这里叫 .ansb .g-head .g-lab .tag .ans-hint） ---------- */
.bub.ansb{width:100%;padding:12px 14px;white-space:normal}   /* 回答的字按行拆好了再画，不用 pre-line */
.ans{overflow-wrap:anywhere}
.comfort{margin:0 0 10px;padding-bottom:10px;border-bottom:1px dashed var(--line)}   /* 开头的安慰话，下面一条虚线 */
.lead-wait{margin:0 0 10px} /* 写的时候，还看不出是哪种回答 */
.gifts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gifts.one{grid-template-columns:1fr}
.gift{position:relative;border:1px solid var(--line);border-radius:12px;padding:10px 12px 4px;background:var(--sunk);animation:giftIn .4s ease-out both}
@keyframes giftIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.bub.ansb.still .gift{animation:none}   /* 回主页再进来、重画已经在屏幕上的回答：两个推荐不再“冒出来”（交互说明 5.1） */
/* 标签在左上，价格吊牌在右上；放不下时吊牌挪到下一行 */
.g-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-bottom:4px}
.gift .g-lab{font-weight:600;font-size:14px;color:var(--dai-d)}
.gift .g-lab.t{font-family:var(--serif);font-size:15px}   /* 只有“花心思的、实用的、100 元以内、100 元以上”用标题字体 */
.gift .kind{font-size:12px;color:var(--gray)}
.gift .tag{margin-left:auto;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1;padding:4px 9px;border-radius:999px;background:var(--dai-6);color:var(--dai-d)}
.gift p{margin:0;font-size:15px;line-height:1.65}
.swap{display:inline-block;color:var(--dai-d);font-size:13px;padding:6px 0}
.verdict-first{margin:0 0 6px;font-size:22px;font-weight:700;line-height:1.5}   /* 模型写的字：正文字体加粗，不用标题字体 */
.verdict-first.no{color:var(--zhu)}
.verdict-first.yes{color:var(--dai-d)}
.verdict-rest{margin:0;font-size:15px}
.direct-first{margin:0 0 6px;font-size:18px;font-weight:600;line-height:1.55}
.ans-line{margin:8px 0 0;font-size:15px}
.ans-hint{margin:12px 0 0;font-size:14px;color:var(--gray)}
.err{margin:0;color:var(--gray);font-size:15px}
.ans-err{margin-top:10px}
.ans .ans-err:first-child{margin-top:0}
.ans-err .retry{display:inline-block;height:auto;margin-top:10px;padding:8px 16px;border-radius:999px;border:1px solid var(--dai);color:var(--dai-d);font-size:14px;line-height:1.5;background:var(--white)}

/* 小印章（说、理、忌、诗、闻……）：一排在气泡下沿，上面一条虚线；点开就在气泡里吹出来，换一个时像被吸回去 */
.boxes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:12px;border-top:1px dashed var(--line)}
.boxes:empty{display:none}
.boxes.locked .box{opacity:.5;pointer-events:none}
.box{position:relative;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 5px;border:1px solid var(--line);border-radius:10px;background:var(--white);font-size:14px;transition:background .2s,color .2s,border-color .2s}
.boxes .box::after{content:"";position:absolute;left:0;right:0;top:-3px;bottom:-3px}   /* 看着 36px 高，能点的范围 42px */
.box.pop{animation:boxIn .38s var(--spring) both}
@keyframes boxIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.box .sc{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;background:var(--zhu-6);color:var(--zhu);font-family:var(--serif);font-weight:600;font-size:16px;line-height:1;transition:background .2s,color .2s}
.box.open{background:var(--me);border-color:var(--me-line);color:var(--dai-d)}
.box .dot{position:absolute;top:-4px;right:-4px;width:9px;height:9px;border-radius:50%;background:var(--zhu);border:2px solid var(--white)}
.box.gulp{animation:gulp .26s ease-out}
@keyframes gulp{40%{transform:scale(1.14)}100%{transform:scale(1)}}
.slot{overflow:visible}
.panel{--bg:var(--sunk);margin-top:10px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px 8px;will-change:transform;overflow-wrap:anywhere}
.panel.tail-u::after{border-bottom-color:var(--bg)}
.panel .ph{font-size:13px;font-weight:600;color:var(--dai-d);margin-bottom:4px}
/* 趣闻的性质和出处（第 6 版 6.2）：标题后面一个小标签（野史、传说、一般说法用朱色），正文下面一行小字出处 */
.src-kind{font-size:12px;padding:1px 8px;border-radius:999px;border:1px solid var(--line);color:var(--gray);background:var(--white)}
.src-kind.legend{border-color:rgba(176,83,60,.35);color:var(--zhu)}
.panel .ph .src-kind{margin-left:8px;font-weight:400;display:inline-block;vertical-align:1px}
.src-line{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:6px;font-size:13px;color:var(--gray)}
.panel .src-line{margin-top:8px}
.panel p{margin:0;font-size:15px}
.panel .inner{transition:opacity .12s}
.panel .close{display:block;margin:2px 0 0 auto;font-size:13px;color:var(--gray);padding:8px 0 4px 12px}
.say-line{font-family:var(--kai);font-size:20px;line-height:1.6;margin:2px 0 8px}
.panel .say-after{margin:0 0 8px;font-size:14px;color:var(--gray)}
.acts{display:flex;gap:18px;font-size:14px}
.acts button{color:var(--dai-d);padding:6px 0}
.panel.key{--bg:var(--me)}
.panel.avoid{border-left:3px solid var(--zhu)}
.panel.avoid .ph{color:var(--zhu)}
.verse{font-family:var(--kai);font-size:20px;line-height:1.6}
.src{font-size:14px;color:var(--gray)}
.story-body{font-size:15px}
.story-body .blk + .blk{margin-top:6px}
@media (max-width:479px){.gifts{grid-template-columns:1fr}}   /* 窄屏：两个推荐上下排 */

/* 气泡下面一行小字：“内容由 AI 生成，仅供参考。”、有用、没用；“这是真实需求吗”、文字反馈也在这一行（回答写完或停止才出） */
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:4px;padding-left:2px;font-size:12px;color:var(--gray)}
.meta .feedback{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:0}
.meta .need-row{column-gap:10px}   /* “这是真实需求吗？”和三个选项：手机上一行放得下 */
.meta .text-btn{padding:6px 0;border-radius:0;font-size:12px;line-height:1.75;color:var(--gray);text-decoration:underline dotted;text-underline-offset:3px}
.meta .fb-done{padding:6px 0;font-size:12px;line-height:1.75}
.meta .fb-text{flex-basis:100%;margin:0}
.meta .fb-form{gap:10px}
.meta .fb-input{height:34px}

/* ---------- 人情簿（照 改版样稿/新功能.html 的 ⑩⑪；.card .note 已经有别的用处，换成 .bk-card .bk-note） ---------- */
.bk-top{margin-left:auto;margin-bottom:6px;font-size:15px;padding:6px 2px}
.bk-warn{margin:12px 0 0;padding:10px 12px;border-radius:8px;background:var(--zhu-6);color:var(--zhu);font-size:14px;line-height:1.6}
.sec{margin:18px 0 6px;font-size:15px;font-weight:600;color:var(--dai-d);display:flex;justify-content:space-between;align-items:center}
.sec .text-btn{font-weight:400;font-size:14px;padding:6px 0 6px 8px}
.sec .text-btn:disabled{opacity:.4}
.dates{background:var(--white);border:1px solid var(--line);border-radius:8px}
.date{display:flex;width:100%;text-align:left;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.6}
.date:last-child{border-bottom:0}
.date .left{min-width:0}
.date .left b{font-weight:600}
.date .left span{display:block;font-size:13px;color:var(--gray)}
.days{flex:none;font-size:22px;font-weight:600;color:var(--zhu);text-align:right;line-height:1.2}
.days small{display:block;font-size:12px;font-weight:400;color:var(--gray)}
.people{display:flex;flex-direction:column;gap:8px}
.person{display:flex;width:100%;text-align:left;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;background:var(--white);border:1px solid var(--line);border-radius:8px;line-height:1.6}
.person .n{font-size:16px;font-weight:600}
.rel-tag{display:inline-block;font-size:12px;line-height:1.6;color:var(--dai-d);border:1px solid var(--line);border-radius:999px;padding:0 7px;margin-left:6px;font-weight:400;vertical-align:2px}
.person .last{display:block;font-size:13px;color:var(--gray)}
.person .arrow{flex:none;color:var(--gray)}
.bk-empty{margin:4px 0 0;font-size:14px;color:var(--gray)}
.bk-note{margin:14px 0 0;font-size:13px;line-height:1.7;color:var(--gray)}
/* 一个人的页面、备份页上面一行：左边回上一层（“← 全部的人”“← 人情簿”），右边“编辑”。左上“返回”直接回首页（交互说明第 7、9 节） */
.bk-bar{display:flex;justify-content:space-between;align-items:center;margin:-6px 0 4px}
.bk-up{margin-bottom:6px;font-size:15px;padding:6px 2px}
.bk-cancel{min-height:44px;padding:0 10px;font-size:15px}   /* 表单下面的“取消”：回到上一层 */
.bk-card{padding:14px;background:var(--white);border:1px solid var(--line);border-radius:8px}
.bk-card h2{margin:0 0 4px;font-size:22px;line-height:1.4;display:flex;align-items:center;gap:8px;flex-wrap:wrap;overflow-wrap:anywhere}
.bk-card h2 .rel-tag{margin-left:0;vertical-align:0}
.field{display:grid;grid-template-columns:72px 1fr;gap:8px;font-size:15px;padding:6px 0;border-bottom:1px dashed var(--line);overflow-wrap:anywhere}
.field:last-child{border-bottom:0}
.field .k{color:var(--gray)}
.tl-card{padding-top:4px;padding-bottom:4px}
.timeline{margin:0;padding:0;list-style:none}
.tl-row{display:grid;grid-template-columns:46px 1fr auto;gap:8px;align-items:start;width:100%;text-align:left;padding:9px 0;border-bottom:1px dashed var(--line);font-size:15px;line-height:1.6;overflow-wrap:anywhere}
.timeline li:last-child .tl-row{border-bottom:0}
.dir{font-size:12px;text-align:center;border-radius:4px;padding:1px 0;margin-top:3px;white-space:nowrap}
.dir.in{background:var(--zhu-6);color:var(--zhu)}
.dir.out{background:var(--dai-6);color:var(--dai-d)}
.dir.plan{border:1px dashed var(--dai);color:var(--dai-d);padding:0}
.tl-row .when{display:block;font-size:13px;color:var(--gray)}
.money{font-weight:600;white-space:nowrap}
.acts4{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.acts4 button{min-height:44px;padding:10px 6px;border:1px solid var(--dai);border-radius:8px;color:var(--dai-d);font-size:15px;line-height:1.4;background:var(--white)}
.acts4 button.main{background:var(--dai);color:#fff}
/* 人情簿的表单：加一个人、记一笔、备份 */
.bk-form h2{margin:0 0 4px;font-size:19px;line-height:1.5;overflow-wrap:anywhere}
.bk-form h3{margin:22px 0 4px;font-size:16px;color:var(--dai-d)}
.bk-form .fld{margin-top:14px}
.bk-form .lab2{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:var(--dai-d)}
.bk-form input[type=text],.bk-form input[type=date],.bk-form select{display:block;width:100%;min-width:0;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--white);font-size:16px;color:var(--ink)}
.bk-form input[type=date]{-webkit-appearance:none;appearance:none}
.bk-form .chips{display:flex;flex-wrap:wrap;gap:8px}
.bk-form .chips .chip{animation:none}
.day-list{display:flex;flex-direction:column;gap:8px}
.day-row{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--white)}
.day-row .md{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.day-row .flags{display:flex;align-items:center;gap:16px;font-size:15px}
.day-row .flags .text-btn{margin-left:auto;color:var(--zhu);padding:6px 4px}
.check{display:inline-flex;align-items:center;gap:6px;min-height:32px;cursor:pointer}
.check input{width:18px;height:18px;margin:0;accent-color:var(--dai)}
.add-day{display:inline-block;margin-top:8px;padding:6px 0}
.money-in{display:flex;align-items:center;gap:6px}
.money-in input{flex:1}
.money-in span{color:var(--gray)}
.bk-err{margin:12px 0 0;color:var(--zhu);font-size:14px}
.bk-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.bk-actions .primary-btn{flex:1;min-width:120px;font-size:16px}
.danger-btn{min-height:44px;padding:0 14px;border:1px solid var(--zhu);border-radius:8px;background:var(--white);color:var(--zhu);font-size:15px}
.danger-btn:disabled{opacity:.4}
.line-btn{min-height:44px;padding:0 14px;border:1px solid var(--dai);border-radius:8px;background:var(--white);color:var(--dai-d);font-size:15px}
.bk-wide{display:block;width:100%;margin-top:10px}
.bk-text{margin:6px 0 0;font-size:15px;line-height:1.7}
.bk-msg{margin:12px 0 0;padding:8px 12px;border-radius:8px;background:var(--dai-6);color:var(--dai-d);font-size:14px}
#bookBackup input[type=text]{margin-top:10px}
.pick-hint{align-self:center;font-size:14px;color:var(--gray)}

/* ---------- 换我的口气、出处（功能说明功能 5） ---------- */
.say-edit{display:flex;flex-direction:column;gap:8px;margin:2px 0 8px}
.say-edit textarea{width:100%;min-height:84px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--white);font-family:var(--kai);font-size:19px;line-height:1.6;resize:none}
.say-edit .primary-btn{align-self:flex-end;height:40px;padding:0 20px;font-size:15px}
.src-box{margin-top:8px;padding:10px 12px;border:1px dashed var(--line);border-radius:8px;font-size:14px;line-height:1.7;color:var(--gray);white-space:pre-line;overflow-wrap:anywhere}

/* ---------- 做成卡片：从下面升起来的面板 ---------- */
.sheet{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;background:rgba(58,51,44,.45);animation:rise .2s ease-out}
.sheet-box{width:100%;max-width:440px;max-height:92vh;max-height:92dvh;overflow-y:auto;padding:14px 16px calc(20px + env(safe-area-inset-bottom));background:var(--paper);border-radius:14px 14px 0 0}
.sheet-head{display:flex;justify-content:space-between;align-items:center}
.sheet-head h2{margin:0;font-size:18px}
.sheet-head .text-btn{padding:8px 4px}
.sheet .fld{margin-top:12px}
.sheet .lab2{display:block;margin:12px 0 6px;font-size:14px;font-weight:600;color:var(--dai-d)}
.sheet input[type=text],.sheet textarea{display:block;width:100%;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--white);font-size:16px;line-height:1.6}
.sheet input[type=text]{height:44px}
.sheet textarea{resize:none;font-family:var(--kai);font-size:18px}
.sheet .chips{display:flex;gap:8px}
.sheet .chips .chip{animation:none}
.card-poem{margin-top:4px;font-family:var(--kai);font-size:15px;color:var(--gray)}
.card-canvas{display:block;width:100%;height:auto;aspect-ratio:4/5;border-radius:6px;box-shadow:0 0 0 1px var(--line)}
.card-out{margin-top:12px;text-align:center}
.card-out img{display:block;width:100%;height:auto;border-radius:6px;-webkit-touch-callout:default}
.card-hint{margin:0 0 8px;font-size:15px;color:var(--dai-d)}
body.sheet-open{overflow:hidden}

/* 手机屏幕矮（高 700px 及以下，比如 iPhone SE）：礼礼和卡片小一点，首页四个板块都放得下 */
@media (max-width:959px) and (max-height:700px){.hub-stage{min-height:0}.guide-big{width:120px}.guide-big .g{width:120px;height:150px}.card-in{min-height:100px;padding:12px 12px 10px}.mini{margin-bottom:6px}}

/* ================= 电脑（宽 960px 以上）：横屏（照交互原型最后“电脑”那一段；类名换成这里的 .speech .who-row #paneQa…） ================= */
@media (min-width:960px){
  .app{max-width:none;border:0}
  .top.nav{min-height:64px;padding:8px max(32px,calc((100% - 1180px) / 2 + 32px))}
  .brand .seal-s{width:36px;height:36px}
  .brand-name{font-size:20px}
  .b-wen{height:23px}
  .b-li{height:29px}
  .hub-src{margin-top:18px;text-align:right}   /* 电脑：首屏已经有“問禮”的出处，这里只留小章那一行，放在四个板块下面靠右 */
  .hub-src>span:not(.src-seal),.hub-src br{display:none}
  .screen{width:100%;max-width:1180px;margin:0 auto;padding:28px 32px 64px}
  html.snap{scroll-snap-type:y proximity;scroll-padding-top:64px}
  /* 访问码、说明：还是手机那么宽，放在中间 */
  .main.shell .gate{width:100%;max-width:472px;margin:auto}

  /* 首页第一屏：左边一句话介绍；右边大礼礼，她左手边一次浮出一张小卡片。
     左边和顶栏的“问礼”对齐；右边比顶栏多伸出去一点（宽屏上礼礼更大、卡片不被挤窄） */
  #hub.screen{max-width:none;padding:0;animation:fadeIn .28s ease-out}   /* 只淡入、不上移：上移会让“停在第二屏”的位置差 8px */
  .hero{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);align-items:center;gap:12px;padding:0 max(32px,calc((100% - 1180px) / 2 - 110px)) 70px max(32px,calc((100% - 1180px) / 2 + 32px));min-height:calc(100vh - 64px);min-height:calc(100dvh - 64px);scroll-snap-align:start}
  .hero-text{padding-bottom:10px}
  /* “問禮”：集唐·欧阳询行书（描下来的矢量，颜色跟着墨色）；右边竖着两行小字落款，下面一方小印；再下面一行出处（第 5 版） */
  .hero-title{--ch:clamp(118px,11.5vw,168px);display:flex;align-items:flex-end;margin:0;color:var(--ink);line-height:1}
  .callig{display:flex;align-items:center;gap:calc(var(--ch) * .03)}
  .callig svg{display:block;width:auto}
  .c-wen{height:calc(var(--ch) * .8)}
  .c-li{height:var(--ch)}
  .kuan{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 0 6px 16px}
  .kuan-t{writing-mode:vertical-rl;font-family:var(--serif);font-weight:600;font-size:13px;line-height:1.6;letter-spacing:.22em;color:var(--gray)}
  .kuan-t span{display:block}
  .kuan-seal svg{display:block;width:22px;height:22px}
  .hero-src{margin:18px 0 0;font-family:var(--serif);font-weight:300;font-size:15px;line-height:1.7;color:var(--gray)}
  .hero-src .by{margin-left:.2em;font-size:13px}
  .hero-src .q,.hero-src .by{white-space:nowrap}   /* 窄的时候整句换行，不把书名拆开 */
  .hero-tag{margin:24px 0 0;font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.1vw,28px);line-height:1.65;letter-spacing:.04em}
  .hero-p{margin:16px 0 0;max-width:23em;font-size:16px;line-height:2;color:var(--gray)}
  .hero-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;height:min(640px,calc(100vh - 150px));height:min(640px,calc(100dvh - 150px));min-height:430px}
  .hero-guide{position:relative;height:100%;display:flex;align-items:center;justify-content:center;transform-origin:50% 90%}
  .hero-guide .g{width:clamp(260px,min(28vw,calc((100vh - 190px) * .83)),480px);height:auto;transform:scaleX(-1)}   /* 礼礼放大；照镜子，让她朝左边的小卡片 */
  .hero-guide.pop{animation:popIn .6s var(--spring) both}
  /* 小卡片：五张叠在同一格（格子按最高的那张），小圆点在格子下面、正常排版——卡片多高都压不到圆点。整块在礼礼手边偏上（第 5 版） */
  .slides{position:relative;height:100%;margin-right:-36px;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-end}
  .slides::after{content:"";flex:0 0 20%}
  .slide-stack{display:grid;width:min(100%,350px)}
  .slide{grid-area:1 / 1;align-self:center;position:relative;padding:16px 18px;background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 44px -26px rgba(58,51,44,.5);opacity:0;visibility:hidden;transform:translateX(16px) scale(.97);transition:opacity .4s ease,transform .5s var(--spring),visibility 0s linear .4s}
  .slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .4s ease,transform .5s var(--spring),visibility 0s}
  .slide::before,.slide::after{content:"";position:absolute;top:calc(50% - 9px);border-style:solid;border-color:transparent}   /* 尾巴指着礼礼 */
  .slide::before{right:-10px;border-width:9px 0 9px 10px;border-left-color:var(--line)}
  .slide::after{right:-8.5px;top:calc(50% - 8px);border-width:8px 0 8px 9px;border-left-color:var(--white)}
  .sl-k{margin:0 0 6px;font-size:12px;letter-spacing:.14em;color:var(--gray)}
  .sl-q{margin:0;font-size:19px;font-weight:600;line-height:1.5}
  .sl-t{margin:0;font-size:15px;line-height:1.8}
  .s-origin{display:flex;align-items:center;gap:16px}
  .s-origin .glyph{width:88px;height:88px;flex:none}
  .s-origin .sl-k{font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:.04em;color:var(--ink)}
  .sl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  .sl-chips span{padding:3px 12px;border:1px solid var(--line);border-radius:999px;font-size:14px;line-height:1.6;background:var(--white)}
  .s-ask.on .pick{animation:chipOn .3s ease 1.1s forwards}
  @keyframes chipOn{to{background:var(--dai);border-color:var(--dai);color:#fff}}
  .s-think .sl-say{margin:0;min-height:3.6em;font-size:17px;line-height:1.8;white-space:pre-line}
  .sl-gifts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sl-g{padding:8px 10px 9px;border:1px solid var(--line);border-radius:10px;background:var(--sunk);font-size:14px;line-height:1.5}
  .sl-g b{display:block;font-family:var(--serif);font-weight:600;font-size:13px;color:var(--dai-d)}
  .sl-g i{display:inline-block;margin-top:5px;font-style:normal;font-size:11px;padding:2px 8px;border-radius:999px;background:var(--dai-6);color:var(--dai-d)}
  .sl-tabs{display:flex;flex-wrap:wrap;gap:6px}
  .sl-tabs .box{height:32px;font-size:13px;padding:0 10px 0 4px}
  .sl-tabs .box .sc{width:24px;height:24px;font-size:15px}
  .sl-panel{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--sunk);font-family:var(--kai);font-size:17px;line-height:1.6;opacity:0;transform-origin:15% 0}
  .s-tabs.on .sl-panel{animation:blowOut .45s cubic-bezier(.25,.8,.3,1) .9s forwards}
  @keyframes blowOut{0%{opacity:.5;transform:scale(.3,.4)}75%{opacity:1;transform:scale(1.02)}100%{opacity:1;transform:none}}
  .slide-dots{width:min(100%,350px);margin-top:20px;display:flex;justify-content:center;gap:10px}
  .slide-dots button{width:8px;height:8px;padding:0;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}
  .slide-dots button.on{background:var(--dai);transform:scale(1.3)}
  .scroll-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;font-size:13px;line-height:1.4;color:var(--gray);padding:6px 14px}
  .scroll-hint svg{width:22px;height:22px;animation:nudge 1.8s ease-in-out infinite}
  @keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

  /* 首页第二屏：左边礼礼和气泡（尾巴朝下），右边四个板块 */
  .hub-main{max-width:1180px;margin:0 auto;padding:40px 32px 32px;min-height:calc(100vh - 64px);min-height:calc(100dvh - 64px);display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start}
  .hub-h{display:block;margin:0 0 26px;font-family:var(--serif);font-size:32px;font-weight:600;line-height:1.4;letter-spacing:.08em}
  .hub-h small{display:block;margin-bottom:8px;font-family:var(--font);font-size:14px;font-weight:400;letter-spacing:.32em;color:var(--zhu)}
  .hub-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:40px;align-items:center}
  .hub-stage{flex-direction:column-reverse;gap:14px;min-height:0}
  .guide-big{width:240px}
  .guide-big .g{width:240px;height:300px}
  .hub-bubble{flex:none;width:100%;font-size:16px;line-height:1.8;padding:14px 18px}
  .hub-bubble.tail-l::before{left:50%;top:auto;bottom:-9px;margin-left:-8px;border-width:9px 8px 0;border-color:var(--line) transparent transparent}
  .hub-bubble.tail-l::after{left:50%;top:auto;bottom:-7.5px;margin-left:-7px;border-width:8px 7px 0;border-color:var(--white) transparent transparent}
  .cards{gap:16px;margin-top:0}
  .card-in{padding:20px 22px 18px}
  .card-art{right:4px;bottom:-22px}
  .card-art .sg{height:126px}
  .card-art .s-bu{height:148px}
  .mini{width:38px;height:38px;font-size:23px}
  .card-title{font-size:24px}
  .card-sub{font-size:15px;margin-top:10px}
  .card-eg{display:block;align-self:stretch;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-size:14px;line-height:1.7;color:var(--gray)}
  .card.on .card-in{filter:blur(6px)}
  .enter{font-size:25px}
  .card.on .enter::after{width:34px}
  .remind{margin-top:16px;padding:12px 16px;font-size:15px}

  /* 选礼物、能送吗（电脑）：左边大礼礼，右边聊天；整页正好一屏，消息在框里滚，输入区浮在下面、离底边留空（第 5 版） */
  #paneQa.screen{max-width:1180px;width:100%;margin:0 auto;padding:0 32px}
  #paneQa{display:grid;grid-template-columns:260px minmax(0,740px);justify-content:center;column-gap:56px}
  .side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:0}
  .side-guide{width:240px}
  .side-guide .g{width:240px;height:300px}
  .side-name{margin-top:6px;font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:.14em}
  .side-status{min-height:1.7em;font-size:14px;color:var(--gray)}
  .chat{padding:18px 0 22px}
  .msg .av{display:none}   /* 电脑上聊天里不放小头像（左边有大礼礼） */
  .msg.her{padding-right:96px}
  .msg.me{padding-left:140px}
  .msgs{padding:8px 10px 18px 2px;gap:10px}
  .qdock{margin:8px 0 0;padding:12px 14px 8px;border-radius:18px}
  .gifts{gap:12px}

  /* 演练（选场面那一页）、人情簿（电脑）：左边礼礼（跟着页面走），右边内容；内容不满一屏时，左右两栏整块上下居中 */
  #paneDrill,#paneBook{display:grid;grid-template-columns:200px minmax(0,700px);column-gap:56px;justify-content:center;align-items:start;align-content:center;min-height:calc(100vh - 64px);min-height:calc(100dvh - 64px)}
  #paneDrill>*,#paneBook>*{grid-column:2}
  #paneDrill>.who-row,#paneBook>.who-row{grid-column:1;grid-row:1 / span 40;position:sticky;top:96px;flex-direction:column;align-items:center;gap:2px;margin:0}
  .who-row.desk-who{display:flex}
  .drill-page>.who-row{display:none}   /* 演练选场面那一页手机上的礼礼：电脑上已经在左边一栏 */
  #bookHome>.who-row{justify-content:flex-end;margin-bottom:4px}   /* 人情簿首页：只留右上的“备份” */
  #bookHome>.who-row .avatar,#bookHome>.who-row .who-name{display:none}
  #paneDrill>.who-row .avatar,#paneBook>.who-row .avatar{width:180px;height:225px;margin:0 0 4px}
  #paneDrill>.who-row .avatar .g,#paneBook>.who-row .avatar .g{width:180px;height:225px}
  #paneDrill>.who-row .who-name,#paneBook>.who-row .who-name{margin:0;font-size:18px}
  /* 气泡的尾巴朝左，指着左边的礼礼 */
  .drill-page>.tail-u::before,#bookHome>.tail-u::before{top:30px;left:-9px;border-width:8px 9px 8px 0;border-color:transparent var(--line) transparent transparent}
  .drill-page>.tail-u::after,#bookHome>.tail-u::after{top:31px;left:-7.5px;border-width:7px 8px 7px 0;border-color:transparent var(--white) transparent transparent}
  /* 演练（第 6 版，电脑）：对方的话照样放小印头像（礼礼自己说的不放）；选场面里"自己说个场面"大一号，写好的场面两个一行 */
  .msg.them{padding-right:96px}
  .msg.them .av.role{display:flex}
  .own-scene{padding:18px 18px 18px 16px;gap:16px}
  .os-av{width:60px;height:60px}
  .os-av .g{width:62px;height:62px}
  .os-t{font-size:20px}
  .os-d{font-size:15px}
  #sceneGroups{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .sg-h{grid-column:1 / -1}
  .sg-list{display:contents}
  .scene-row{margin-bottom:10px}
}
/* 电脑、窗口矮（高 700px 以下，比如笔记本开着浏览器工具栏）：第二屏收紧一点，一屏放得下 */
@media (min-width:960px) and (max-height:700px){
  .hub-main{padding-top:18px;padding-bottom:14px}
  .hub-h{margin-bottom:14px;font-size:28px}
  .hub-h small{margin-bottom:4px}
  .hub-grid{grid-template-columns:300px minmax(0,1fr)}
  .guide-big,.guide-big .g{width:180px}
  .guide-big .g{height:225px}
  .hub-bubble{font-size:15px;line-height:1.7;padding:12px 16px}
  .card-in{padding:15px 20px 13px}
  .card-sub{margin-top:6px}
  .card-eg{margin-top:9px;padding-top:8px}
  .remind{margin-top:12px;padding:10px 16px}
}

/* 系统开了“减少动态效果”：只关“动”的（跳、点头、呼吸、玉晃、选项飞、吹出来、放大）。
   打字、停顿、三个点、第一屏轮播照常：这些是说话的节奏（打字和停顿在 app.js 里，不受这里影响） */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .dots3 i{animation-duration:1.2s!important;animation-iteration-count:infinite!important}   /* 三个点照常一明一暗（不移动） */
  .slide{transform:none!important;transition:opacity .4s ease,visibility 0s linear .4s!important}   /* 第一屏的小卡片：照常轮着换，只淡入淡出 */
  .slide.on{transition:opacity .4s ease,visibility 0s!important}
  /* 礼礼（4.1）：不晃、不跳；眨眼、眼睛跟着你、张嘴照样有；点头改成头往下一沉，打字时只看输入框、不歪头 */
  .g.nod .head-act{transform:translateY(2px)}
  .g.listen .head-act{transform:none}
  /* 换页：礼礼不走、卡片不展开，只整页淡入淡出（交互说明 3.5） */
  .card.vt .card-face,#chat,#drillMain,#guideBig,#sideGuide,#paneDrill>.desk-who .avatar,#paneBook>.desk-who .avatar{view-transition-name:none!important}
}