/* 第一屏主动画（hero.js 驱动）。类名一律 hx- 开头，和 site.css 不冲突；颜色全用 site.css 的变量，深浅色跟着页面主题走。
   结构：.hx-view 是镜头（透视），.hx-dolly 管推拉（translateZ），.hx-pan 管平移；各场景 .hx-shot 摆在三维空间里，
   每个场景的"锚点"= 输入框左下角。镜头对准某个场景时，它的锚点正好落在 --hx-dx/--hx-dy（停靠点），
   输入条 .hx-bar 一直停在停靠点下面不动——换场景时是软件在它身后换，条子一直在。
   没有 JS 或"减少动态"时：聊天场景对焦、输入条已出译文，旁边的邮件窗口虚化。只动 transform 和 opacity。 */

.stage.hx{
  --hx-ww:600px;                                   /* 窗口宽 */
  --hx-fp:16px;                                    /* 聊天输入框离窗口边的距离 */
  --hx-ch:208px;                                   /* 聊天、团队工具窗口高 */
  --hx-mh:300px;                                   /* 邮件窗口高 */
  --hx-gap:96px;                                   /* 场景之间的空 */
  --hx-dx:calc(50% - var(--hx-ww) / 2 + var(--hx-fp));
  --hx-dy:216px;                                   /* 停靠点（输入框底边）离画面顶；Safari 在 1440×900 笔记本上（视口约 785 高）第一屏要露出整条输入条 */
  --hx-p:1500px;                                   /* 透视距离 */
  --hx-blur:7px;
  /* 输入条的颜色、阴影用 site.css 的 --bar 那组（和"三步"、回译卡同一套，照产品：不透明、跟系统深浅色） */
  --hx-mark:rgba(10,108,255,.55);                  /* 输入法组字的下划线 */
  --hx-tint:rgba(10,108,255,.12);                  /* 框住时点选预选的底色（产品 WindowPicker：强调色 12%） */
  --hx-ft:46px;                                    /* 框住、截图两个场景：窗口顶边离画面顶（上面留给按键和"Translating"小标） */
  --hx-fh:236px;                                   /* 框住场景的聊天窗口高 */
  isolation:isolate;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .stage.hx{--hx-mark:rgba(92,157,255,.7);--hx-tint:rgba(59,140,255,.18)}
}
:root[data-theme="dark"] .stage.hx{--hx-mark:rgba(92,157,255,.7);--hx-tint:rgba(59,140,255,.18)}

.hx-view{position:absolute;inset:0;overflow:hidden;perspective:var(--hx-p);perspective-origin:var(--hx-dx) var(--hx-dy);
  -webkit-user-select:none;user-select:none;pointer-events:none}
.hx-view p{margin:0}
.hx-dolly,.hx-pan{position:absolute;left:var(--hx-dx);top:var(--hx-dy);width:0;height:0;transform-style:preserve-3d}
.hx-pan{left:0;top:0}

/* 场景摆位：--hx-sx/--hx-sy 是窗口左上角在世界里的位置（世界原点 = 聊天输入框左下角），--hx-sz 是远近 */
.hx-shot{position:absolute;left:0;top:0;width:var(--hx-ww);transform:translate3d(var(--hx-sx),var(--hx-sy),var(--hx-sz))}
.hx-chat{--hx-sx:calc(var(--hx-fp) * -1);--hx-sy:calc(var(--hx-fp) - var(--hx-ch));--hx-sz:0px}
.hx-mail{--hx-sx:calc(var(--hx-ww) + var(--hx-gap) - 20px);--hx-sy:-230px;--hx-sz:-180px}
/* 团队工具摆在邮件右下方、比邮件近一点：镜头从邮件过去时往右下走，三站高低错开 */
.hx-team{--hx-sx:calc((var(--hx-ww) + var(--hx-gap)) * 2 - 40px);--hx-sy:calc(var(--hx-fp) - var(--hx-ch) + 150px);--hx-sz:-90px}
/* 三个功能场景排在下面一行、落在上面两站之间：打字（上）和功能（下）交替，镜头一下一上地走。
   截图那站最近：它压暗屏幕的那层要盖得住旁边虚着的窗口 */
.hx-frame{--hx-sx:calc((var(--hx-ww) + var(--hx-gap)) * .5 - 18px);--hx-sy:240px;--hx-sz:-60px}
.hx-snap{--hx-sx:calc((var(--hx-ww) + var(--hx-gap)) * 1.5 - 34px);--hx-sy:300px;--hx-sz:-30px}
.hx-voice{--hx-sx:calc((var(--hx-ww) + var(--hx-gap)) * 2.5 - 40px);--hx-sy:280px;--hx-sz:-120px}
/* 静帧（没 JS、减少动态）不出这三个，那一帧和原来一样 */
.stage.hx:not(.hx-live) .hx-fx{visibility:hidden}

/* 窗口 */
.hx-win{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:12px;background:var(--win);box-shadow:var(--win-shadow);color:var(--ink);line-height:1.4}
.hx-chat .hx-win,.hx-team .hx-win,.hx-voice .hx-win{height:var(--hx-ch)}
.hx-frame .hx-win{height:var(--hx-fh)}
.hx-mail .hx-win{height:var(--hx-mh)}
.hx-dof{position:absolute;left:0;top:0;width:100%;opacity:0}
.hx-dof .hx-ci{display:none}
/* 没对焦的窗口虚化：没有 JS 时直接糊；动画跑起来后改由 JS 在清晰层和虚化副本之间淡入淡出 */
.hx-shot:not(.is-on) > .hx-win{filter:blur(var(--hx-blur))}
.hx-live .hx-shot > .hx-win{filter:none}
.hx-live .hx-shot > .hx-dof{filter:blur(var(--hx-blur))}

.hx-tb{position:relative;flex:none;display:flex;align-items:center;height:40px;padding:0 14px;background:var(--win-bar);box-shadow:0 1px 0 var(--line);font-size:.87em;color:var(--mute)}
.hx-dots{display:flex;gap:7px}
.hx-dots i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.hx-dots i:nth-child(2){background:#febc2e}
.hx-dots i:nth-child(3){background:#28c840}
.hx-tt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--ink);font-weight:500;white-space:nowrap}
.hx-av{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--bubble-them);color:var(--ink-2);font-size:9px;font-weight:600;letter-spacing:.02em}
.hx-tbi{margin-left:auto;display:grid;place-items:center;width:26px;height:22px;border-radius:6px;color:var(--ink-2)}
.hx-tbi svg{width:15px;height:15px}

/* 聊天 */
.hx-msgs{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 16px 12px;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 20px);mask-image:linear-gradient(transparent,#000 20px)}
.hx-m{max-width:68%;margin-top:8px;padding:7px 12px;border-radius:16px;line-height:1.36}
.hx-m small{display:block;margin-top:1px;font-size:.73em;opacity:.8}
.hx-me{align-self:flex-end;background:var(--bubble-me);color:var(--bubble-me-ink);transform-origin:100% 100%}
.hx-them{align-self:flex-start;background:var(--bubble-them)}
.hx-new{display:none}
.hx-new.is-in{display:block}
.hx-compose{flex:none;display:flex;align-items:center;gap:8px;padding:0 var(--hx-fp) var(--hx-fp)}
.hx-field{position:relative;flex:1;min-width:0;height:36px;display:flex;align-items:center;padding:0 14px;border-radius:18px;background:var(--field);color:var(--faint);white-space:nowrap;overflow:hidden}
.hx-send{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff}
.hx-send svg{width:14px;height:14px}

/* 邮件 */
.hx-hd{flex:none;display:flex;align-items:center;gap:8px;height:34px;margin:0 20px;box-shadow:0 1px 0 var(--line);font-size:.93em;white-space:nowrap}
.hx-k{color:var(--mute)}
.hx-chip{padding:1px 8px;border-radius:6px;background:var(--sel);color:var(--ink)}
.hx-body{flex:1;padding:14px 20px 0;line-height:1.55}
.hx-body p:first-child{margin-bottom:.7em}
.hx-line{position:relative;display:flex;align-items:center;min-height:1.55em;white-space:nowrap}

/* 团队工具：左边频道列表，右边一条条消息（头像 + 名字 + 时间，不是气泡），下面方角的输入框 */
.hx-tm{flex:1;min-height:0;display:flex}
.hx-side{flex:none;width:136px;padding:10px 8px;background:var(--win-bar);box-shadow:1px 0 0 var(--line);font-size:.87em;color:var(--ink-2);white-space:nowrap}
.hx-sh{padding:0 8px 4px;font-size:.92em;color:var(--mute)}
.hx-ch{padding:3px 8px;border-radius:6px}
.hx-ch.is-sel{background:var(--sel);color:var(--ink);font-weight:500}
.hx-main{flex:1;min-width:0;display:flex;flex-direction:column}
.hx-posts{padding:0 14px 8px;-webkit-mask-image:linear-gradient(transparent,#000 40px);mask-image:linear-gradient(transparent,#000 40px)} /* 发出新消息后最上面那条顶出去，渐隐长一点，不像被切掉半截 */
.hx-post{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;margin-top:10px;line-height:1.38}
.hx-post.hx-new{display:none}
.hx-post.hx-new.is-in{display:grid}
.hx-pa{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:var(--bubble-them);color:var(--ink-2);font-size:10px;font-weight:600;letter-spacing:.02em}
.hx-pa.hx-pme{background:var(--accent);color:#fff}
.hx-pn{font-weight:600;font-size:.93em}
.hx-pn small{margin-left:8px;font-weight:400;font-size:.86em;color:var(--mute)}
.hx-tc{flex:none;padding:0 14px var(--hx-fp)}
.hx-tf{position:relative;display:flex;align-items:center;height:36px;padding:0 6px 0 12px;border-radius:8px;background:var(--win);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--faint);white-space:nowrap;overflow:hidden}
.hx-tsend{order:2;flex:none;margin-left:auto;display:grid;place-items:center;width:26px;height:26px;border-radius:6px;color:var(--ink-2)}
.hx-tsend svg{width:14px;height:14px}

/* 输入框里的文字和光标（光标只在对焦的场景里亮） */
.hx-ft{min-width:0}
.hx-ci{flex:none;order:-1;width:1.5px;height:1.15em;margin-right:1px;border-radius:1px;background:var(--accent);opacity:0}
.hx-shot.is-on .hx-ci{opacity:1}
.hx-filled{color:var(--ink)}
.hx-filled .hx-ci,.hx-line .hx-ci{order:1;margin:0 0 0 1px}
.hx-flying .hx-ci{opacity:0!important}

/* Typeferry 输入条：照产品两层输入条（mac InputBar.swift BarLook、twoLayer；离屏图 样品/界面离屏图-1106/），和 site.css 的 .bar 同一套比例：
   三行——打字那行、"↳ 译文"（箭头小一号、灰）、"Means: …"（小两号、灰，标签中粗）；圆角 6、左右 8、上下 5、行距 3（按 13 号字折成 em）。
   贴在输入框正下方、左对齐；停在停靠点，不跟着镜头走。.hx-bar 的字号 = 主行字号 */
.hx-bar{position:absolute;z-index:2;left:var(--hx-dx);top:calc(var(--hx-dy) + 3px);max-width:calc(100% - var(--hx-dx) - 12px);
  font-size:1.17em;padding:.385em .615em;color:var(--bar-ink);white-space:nowrap;isolation:isolate}
/* 底板单独一层：Means 出来、输入条变高时，底板用 scaleY 补间，不动布局 */
.hx-bg{position:absolute;inset:0;z-index:-1;border-radius:.46em;background:var(--bar);box-shadow:var(--bar-shadow);transform-origin:0 0}
.hx-bar p{overflow:hidden}
.hx-in,.hx-tr{line-height:1.25;min-height:1.25em}
.hx-tr{margin-top:.23em}
.hx-arw{font-size:.923em;color:var(--bar-mute)}
.hx-bt{display:none;margin-top:.27em;font-size:.846em;line-height:1.25;color:var(--bar-mute)}
.hx-bt b{font-weight:500}
.hx-bar.is-bt .hx-bt{display:block}
/* 按住语音键时多出的一行：红点 + "Listening… release to insert"（产品 InputBar twoLayer：11 号字、红点 6） */
.hx-vl{display:none;align-items:center;gap:.4em;margin-top:.3em;font-size:.846em;line-height:1.25;color:var(--bar-mute)}
.hx-vl i{flex:none;width:.46em;height:.46em;border-radius:50%;background:#ff3b30;animation:hx-rec .9s ease-in-out infinite alternate}
.hx-bar.is-vl .hx-vl{display:flex}
@keyframes hx-rec{from{opacity:.4}}
.hx-c{display:inline-block;width:2px;height:1.12em;margin:0 1px;vertical-align:-.18em;border-radius:1px;background:var(--accent);animation:hx-blink 1.06s steps(1) infinite}
.hx-typing .hx-c{animation:none}
@keyframes hx-blink{50%{opacity:0}}
.hx-ph{color:var(--bar-ph);display:none;transition:opacity .4s var(--ease)}
.hx-empty .hx-ph{display:inline}
.hx-quiet .hx-ph,.hx-quiet .hx-c{opacity:0;animation:none}
/* 和产品一致：一打字输入条才出来，填完、停手就收起（11-10）。动画跑着时没字的输入条整条淡掉；语音"正在听"那段除外 */
.hx-live .hx-bar>*{transition:opacity .18s var(--ease)}
.hx-live .hx-bar.hx-empty:not(.is-vl)>*{opacity:0}
.hx-mk{text-decoration:underline;text-decoration-color:var(--hx-mark);text-decoration-thickness:1.5px;text-underline-offset:.2em}
.hx-bar [data-hx-tr]{display:inline-block;opacity:0;transform:translateY(3px);transition:opacity .45s var(--ease),transform .5s var(--ease)}
.hx-bar.is-tr [data-hx-tr]{opacity:1;transform:none}
.hx-bar.hx-snap *{transition:none!important}

/* 回车键：按下时短暂出现在输入条旁边 */
.hx-press{position:absolute;z-index:2;left:0;top:0;font-size:13px;color:var(--mute)}
.hx-pin{display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .4s var(--ease)}
.hx-press.is-on .hx-pin{opacity:1;transform:none}
.hx-key{position:relative;display:block;width:32px;height:32px;border-radius:7px;background:var(--key-edge)}
.hx-key i{position:absolute;left:0;right:0;top:0;height:30.5px;display:grid;place-items:center;border-radius:7px;font:500 15px/1 var(--sans);font-style:normal;color:var(--key-ink);
  background:linear-gradient(var(--key-top),var(--key-bot));box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* 日文用日文字形（只用系统字体） */
.hx :lang(ja){font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,"Noto Sans CJK JP","Noto Sans JP",sans-serif}

/* 飞进输入框的那行译文 */
.hx-fly{position:absolute;z-index:3;left:0;top:0;white-space:nowrap;line-height:1.25;color:var(--bar-ink);transform-origin:0 0}

.hx-paused .hx-c,.hx-paused .hx-vl i{animation-play-state:paused}

/* ---------- 功能场景（hero.js 的 frame / snap / speak）：窗口外面的东西都放 .hx-ui 里，和窗口一起在三维里走、不进虚化副本 ---------- */
.hx-at{position:absolute;left:var(--hx-fp);top:calc(var(--hx-dy) - var(--hx-ft))}   /* 锚点：镜头停下时窗口顶边落在 --hx-ft */
.hx-ui{position:absolute;inset:0;pointer-events:none;transition:opacity .35s var(--ease)}
.hx-fx:not(.is-on) .hx-ui{opacity:0}
/* 快捷键：窗口左上角外面，按一下 */
.hx-keys{position:absolute;z-index:2;left:0;bottom:calc(100% + 8px);display:flex;gap:6px;opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .4s var(--ease)}
.hx-fx.is-keys .hx-keys{opacity:1;transform:none}
.hx-keys .hx-key i,.hx-press .hx-key i{transition:transform .1s ease-out}
.hx-keys.is-down .hx-key i,.hx-press.is-down .hx-key i{transform:translateY(1.5px)}
/* 鼠标：箭头（热点在尖上）、截图拖框时的十字 */
.hx-cur{position:absolute;z-index:3;left:0;top:0;opacity:0;transition:opacity .25s var(--ease)}
.hx-fx.is-cur .hx-cur{opacity:1}
.hx-cur svg{position:absolute;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3))}
.hx-ar{left:-1.5px;top:-1.5px;width:17px;height:24px}
.hx-x{left:-9.5px;top:-9.5px;width:19px;height:19px;display:none}
.hx-fx.is-cross .hx-ar{display:none}
.hx-fx.is-cross .hx-x{display:block}

/* 一块字的原文和译文叠在同一格（同首页"框住""截图"演示）：翻好就换成译文，位置、排版不动 */
.hx-ot{display:grid}
.hx-ot > span{grid-area:1/1;transition:opacity .32s var(--ease)}
.hx-ot > .hx-t,.hx-ot.is-tr > .hx-o{opacity:0}
.hx-ot.is-tr > .hx-t{opacity:1}

/* 框住：鼠标移进窗口先预选（强调色描边 + 浅底，产品 WindowPicker），点下去整窗框住：右上角外侧出"Translating"小标，消息一条条换成译文 */
.hx-frame .hx-ui::before{content:"";position:absolute;inset:0;border-radius:12px;background:var(--hx-tint);box-shadow:inset 0 0 0 3px var(--accent);opacity:0;transition:opacity .18s var(--ease)}
.hx-frame.is-pick .hx-ui::before{opacity:1}
.hx-pill{position:absolute;z-index:2;right:8px;bottom:calc(100% + 8px);display:flex;align-items:center;gap:7px;padding:3px 11px 3px 9px;border-radius:12px;font-size:.8em;font-weight:500;line-height:18px;white-space:nowrap;
  color:var(--bar-ink);background:var(--bar);box-shadow:var(--bar-shadow);opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .4s var(--ease)}
.hx-pill i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--live)}
.hx-frame.is-framed .hx-pill{opacity:1;transform:none}
.hx-ov{position:relative;transform-origin:0 100%}
.hx-ov::before{content:"";position:absolute;left:-11px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--accent);opacity:0;transition:opacity .2s var(--ease)}
.hx-ov.is-busy::before{opacity:.75}

/* 截图：一个网页（订单详情），压暗屏幕、拖出选区、选区下面的截图工具栏（照产品 CaptureToolbar：深色、四组、"完成"带字） */
.hx-url{position:absolute;left:28%;right:28%;top:9px;height:22px;border-radius:6px;background:var(--line)}
.hx-page{padding:14px 18px 16px;background:var(--raised)}
.hx-card{border-radius:10px;background:var(--win);box-shadow:0 0 0 1px var(--line),0 1px 3px rgba(0,0,0,.05);font-size:.87em;line-height:1.5}
.hx-chd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:11px 16px 9px;box-shadow:0 1px 0 var(--line)}
.hx-ctt{font-weight:600;font-size:1.15em;line-height:1.4}
.hx-badge{flex:none;margin-top:1px;padding:1px 9px;border-radius:999px;background:var(--hx-tint);color:var(--accent-text);font-size:.86em;font-weight:600;line-height:1.6}
.hx-cb{padding:10px 16px 0}
.hx-row{display:flex;gap:16px;padding:6px 16px 13px}
.hx-dt{color:var(--mute)}
.hx-cap{position:absolute;z-index:1;left:0;top:0;opacity:0;transition:opacity .25s var(--ease)}
.hx-snap.is-dim .hx-cap{opacity:1}
.hx-cap i,.hx-cap b{position:absolute;transform-origin:0 0}
/* 产品 SelectionOverlay：屏幕铺 30% 黑，选区里露原样。四块不透明的黑合成一层再整体 30%：块和块可以叠着放，拖的时候接缝不漏白线 */
.hx-dim{position:absolute;left:0;top:0;opacity:.3}
.hx-cap i{background:#000}
.hx-cap b{background:var(--accent)}                 /* 选区一圈 1 点强调色 */
.hx-cap s{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px #fff;opacity:0;transform:scale(.4);transition:opacity .2s var(--ease),transform .25s var(--ease)}
.hx-snap.is-sel .hx-cap s{opacity:1;transform:none}
.hx-tbar{position:absolute;z-index:2;left:0;top:0;display:flex;align-items:center;height:2.5em;padding:0 .25em;border-radius:.5em;font-size:.8em;white-space:nowrap;
  color:rgba(255,255,255,.92);background:rgba(33,33,33,.96);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 6px 20px rgba(0,0,0,.28);
  opacity:0;transform:translateY(-4px);transition:opacity .25s var(--ease),transform .35s var(--ease)}
.hx-snap.is-sel .hx-tbar{opacity:1;transform:none}
.hx-grp{position:relative;display:flex;align-items:center;gap:.12em}
.hx-grp + .hx-grp::before{content:"";flex:none;width:1px;height:1.25em;margin:0 .3em 0 .25em;background:rgba(255,255,255,.18)}
.hx-tbar span,.hx-done{position:relative;display:flex;align-items:center;justify-content:center;height:2.05em;border-radius:.38em}
.hx-tbar span{width:2.05em}
.hx-tbar span::after{content:"";position:absolute;inset:1px;border-radius:inherit;background:rgba(255,255,255,.13);opacity:0;transition:opacity .12s}
.hx-tbar span.is-hover::after{opacity:1}
.hx-tbar svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.hx-tbar .is-sel,.hx-done{color:var(--accent)}      /* 选中的"翻译"、"完成"是强调色 */
.hx-done{gap:.3em;padding:0 .55em 0 .4em;font-weight:500}
.hx-done svg{stroke-width:1.7}


@media (min-width:901px){.stage.hx{margin-top:32px}}
@media (max-width:900px){
  .stage.hx{--hx-ww:min(540px, calc(100vw - 112px));--hx-ch:224px;--hx-mh:288px;--hx-gap:64px;--hx-dy:228px;--hx-p:1200px;--hx-blur:6px;height:380px}
  .hx-mail{--hx-sy:-222px;--hx-sz:-150px}
  .hx-team{--hx-sy:calc(var(--hx-fp) - var(--hx-ch) + 130px);--hx-sz:-80px}
  .hx-side{width:112px}
}
@media (max-width:480px){
  .stage.hx{--hx-ww:calc(100vw - 64px);--hx-fp:12px;--hx-ch:216px;--hx-mh:270px;--hx-gap:72px;--hx-dy:228px;--hx-p:900px;--hx-blur:5px;height:380px}
  .hx-mail{--hx-sx:calc(var(--hx-ww) + var(--hx-gap) - 16px);--hx-sy:-200px;--hx-sz:-120px}
  .hx-team{--hx-sx:calc((var(--hx-ww) + var(--hx-gap)) * 2 - 32px);--hx-sy:calc(var(--hx-fp) - var(--hx-ch) + 110px);--hx-sz:-70px}
  .hx-side{display:none}
  .hx-posts{padding:0 12px 8px}
  .hx-tc{padding:0 12px var(--hx-fp)}
  .hx-msgs{padding:0 12px 10px}
  .hx-m{max-width:78%}
  .hx-hd,.hx-body{margin-inline:16px}
  .hx-body{padding:12px 0 0}
  .hx-press{font-size:12px}
  .hx-page{padding:10px 12px 12px}
  .hx-chd{padding:9px 12px 8px}
  .hx-cb{padding:8px 12px 0}
  .hx-row{padding:5px 12px 11px}
  .hx-tbar{font-size:.64em}
}

@media (prefers-reduced-motion:reduce){
  .hx-c{animation:none}
  .hx-bar [data-hx-tr],.hx-pin{transition:none}
}

/* 镜头平移时窗口会伸出画面几像素：figure 已裁掉看不见，但 Chrome 仍算进页面宽度，手机上页面会左右晃（11-09 官网③）。clip 只裁、不建滚动容器 */
.hero{overflow-x:clip}