/* 在线体验页（demo.html）专用样式。
 *
 * 只新增本页需要的规则，不改动 style.css 里的既有选择器；颜色一律走变量，
 * 保证明暗两个主题都成立。新增变量放进本文件的 :root / :root[data-theme="dark"]，
 * 不要散落到页面里写死色值。
 */

:root {
  /* 演示警示（琥珀色系）：两个主题下都必须一眼看到，不参与品牌蓝。 */
  --demo-alert-bg: #fdf1d6;
  --demo-alert-border: #e6c473;
  --demo-alert-ink: #6d4006;
  --demo-alert-accent: #8a5308;
  --demo-alert-btn-bg: #7a4a08;
  --demo-alert-btn-ink: #fffaf0;

  /* 演示态的中性提示底色 */
  --demo-notice-bg: rgba(58, 104, 200, 0.06);
  --demo-notice-edge: rgba(58, 104, 200, 0.2);

  /* 完整版一栏的强调底色 */
  --demo-full-bg: rgba(58, 104, 200, 0.07);
  --demo-full-edge: rgba(58, 104, 200, 0.28);

  --demo-screen-chrome: #eef3fa;
  --demo-screen-canvas: #ffffff;

  /* 全屏按钮（屏幕区 bar 右端）。与 .demo-screen-tag 同区相邻，两者必须都达标：
     tag 走琥珀色系，按钮走中性色系，避免两个胶囊抢眼。
     浅色下取深灰蓝底 + 近白字（够对比），hover 再压深一档。 */
  --demo-fs-btn-bg: rgba(36, 48, 68, 0.08);
  --demo-fs-btn-bg-hover: rgba(36, 48, 68, 0.16);
  --demo-fs-btn-ink: var(--ink);

  /* 顶部警示条的实际高度，由 js/demo.js 量出来后写入；nav 靠它让位。 */
  --demo-alert-h: 0px;
  --demo-shell: 1200px;
}

:root[data-theme="dark"] {
  --demo-alert-bg: rgba(214, 158, 46, 0.15);
  --demo-alert-border: rgba(214, 158, 46, 0.42);
  --demo-alert-ink: #f3d391;
  --demo-alert-accent: #f0c877;
  --demo-alert-btn-bg: #f2cd7e;
  --demo-alert-btn-ink: #3a2806;

  --demo-notice-bg: rgba(120, 160, 230, 0.12);
  --demo-notice-edge: rgba(120, 160, 230, 0.26);

  --demo-full-bg: rgba(120, 160, 230, 0.12);
  --demo-full-edge: rgba(120, 160, 230, 0.32);

  --demo-screen-chrome: rgba(255, 255, 255, 0.06);
  --demo-screen-canvas: var(--surface);

  /* 深色下反过来：浅色半透明底 + 浅字。 */
  --demo-fs-btn-bg: rgba(255, 255, 255, 0.12);
  --demo-fs-btn-bg-hover: rgba(255, 255, 255, 0.22);
  --demo-fs-btn-ink: var(--ink);
}

/* ============ 顶部警示条 ============ */

.demo-alert {
  position: sticky;
  top: 0;
  z-index: 101;
  background: var(--demo-alert-bg);
  border-bottom: 1px solid var(--demo-alert-border);
  color: var(--demo-alert-ink);
}

.demo-alert-inner {
  width: min(var(--demo-shell), 92vw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 11px 0;
  font-size: 14.5px;
  line-height: 1.5;
}

.demo-alert-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--demo-alert-accent);
}

.demo-alert-text {
  margin: 0;
}

.demo-alert-text strong {
  font-weight: 600;
}

.demo-alert-actions {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.demo-alert-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: var(--demo-alert-btn-bg);
  color: var(--demo-alert-btn-ink);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-2) var(--ease-out);
}

.demo-alert-btn:hover {
  transform: translateY(-1px);
}

.demo-alert-link {
  color: var(--demo-alert-accent);
  font-size: 13.5px;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* nav 是 sticky top:0，被警示条压住；往下让出警示条的高度。 */
.demo-page .nav {
  top: var(--demo-alert-h);
}

/* ============ Hero ============ */

.demo-hero .hero-copy {
  max-width: 860px;
}

.demo-hero .hero-sub {
  margin-bottom: var(--sp-5);
}

.demo-hero-note {
  width: min(760px, 92vw);
  margin: var(--sp-5) auto 0;
  padding: 13px 18px;
  border-radius: var(--r-md);
  background: var(--demo-notice-bg);
  box-shadow: inset 0 0 0 1px var(--demo-notice-edge);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-muted);
  text-align: left;
}

.demo-hero-note strong {
  color: var(--ink);
  font-weight: 600;
}

/* ============ 体验区 ============ */

.demo-stage {
  padding: 0 var(--sp-5) var(--sp-9);
  background: var(--canvas);
}

.demo-stage-inner {
  width: min(var(--demo-shell), 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
}

.demo-guide {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 0 0 1px var(--hairline),
    var(--shadow-1);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
}

.demo-guide-head {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  margin-bottom: var(--sp-4);
}

.demo-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.demo-step {
  border-radius: var(--r-md);
}

.demo-step-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 0;
  background: transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: background-color var(--dur-2) var(--ease-out);
}

.demo-step-btn:hover {
  background: var(--pearl);
}

.demo-step-num {
  flex: none;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--parchment);
  color: var(--ink-muted);
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out);
}

.demo-step-title {
  flex: 1;
  min-width: 0;
}

.demo-step-chevron {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--ink-faint);
  transition: transform var(--dur-2) var(--ease-out);
}

.demo-step.is-active .demo-step-btn {
  background: var(--accent-weak);
  color: var(--primary);
  font-weight: 600;
}

.demo-step.is-active .demo-step-num {
  background: var(--accent);
  color: #fff;
}

.demo-step.is-active .demo-step-chevron {
  transform: rotate(90deg);
}

.demo-step-panel {
  display: none;
  padding: 2px 12px 14px 46px;
}

.demo-step.is-active .demo-step-panel {
  display: block;
}

.demo-step-can {
  margin: 0 0 var(--sp-4);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-muted);
}

.demo-step-full {
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--demo-full-bg);
  box-shadow: inset 0 0 0 1px var(--demo-full-edge);
}

.demo-step-full-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.demo-step-full ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.demo-step-full li {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink);
}

.demo-guide-foot {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
}

.demo-guide-foot p {
  margin: 0 0 var(--sp-4);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-muted);
}

.demo-guide-foot .btn {
  width: 100%;
  justify-content: center;
}

/* ---- 屏幕 ---- */

.demo-screen {
  position: sticky;
  top: calc(var(--demo-alert-h) + var(--nav-h) + 18px);
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px var(--hairline),
    var(--shadow-shot);
}

.demo-screen-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--demo-screen-chrome);
  border-bottom: 1px solid var(--hairline);
}

.demo-dots {
  display: flex;
  gap: 6px;
  flex: none;
}

.demo-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hairline-strong);
}

.demo-screen-title {
  font-size: 13px;
  color: var(--ink-muted);
}

.demo-screen-tag {
  margin-left: auto;
  flex: none;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--demo-alert-bg);
  color: var(--demo-alert-ink);
  font-size: 12px;
  font-weight: 600;
}

.demo-screen-body {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--demo-screen-canvas);
}

/*
  全屏开关（.demo-fs-btn）。

  这一段同时管两件事，所以放在屏幕区样式里：
  ① 按钮本身的常态外观（bar 右端的图标 + 「全屏」字样）；
  ② 全屏之后的整套姿态——由 JS 加在 `#demoScreen` 上的 `is-fs` 类控制，
     不依赖 `:fullscreen` 伪类（见下方 `.is-fs` 段的说明）。

  按钮参照 .demo-screen-tag 的尺寸感：都是 bar 右端的小胶囊，视觉上成对。
*/
.demo-fs-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--demo-fs-btn-bg);
  color: var(--demo-fs-btn-ink);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition:
    background-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out);
}

.demo-fs-btn:hover {
  background: var(--demo-fs-btn-bg-hover);
}

/* 键盘用户必须看得见焦点。outline 用 offset 让它在胶囊外圈画一圈，不被圆角裁掉。 */
.demo-fs-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.demo-fs-icon {
  flex: none;
  display: block;
}

/*
  两个图标叠在同一格：进全屏显示「向外扩」，退出显示「向内收」。
  默认显隐由状态决定，这里先给个初始态，下面两段按 `is-fs` 覆盖。
*/
.demo-fs-icon-exit,
.demo-screen.is-fs .demo-fs-icon-enter {
  display: none;
}

.demo-screen.is-fs .demo-fs-icon-exit {
  display: block;
}

/*
  全屏态 = 铺满整个视口。

  ## 为什么样式钩子是 `is-fs` 类而不是 `:fullscreen` 伪类

  系统级全屏（Fullscreen API）在有些环境会被拒：iOS Safari 对 iframe 内的
  requestFullscreen 有限制，非用户手势触发也一定失败。此时只有「铺满窗口」
  这一层生效；若样式挂在 `:fullscreen` 上就会完全没反应——用户点了按钮、
  什么都没发生，看起来就是个坏按钮。所以两层能力分开：`is-fs`（铺满）是
  状态的真相来源，`:fullscreen` 只补一点兜底背景。

  ## 尺寸

  `inset: 0` 在两种情况下都成立：系统全屏时 fixed 的包含块就是屏幕，
  只铺满时包含块是视口。两态视觉一致，代码不用分叉。

  ## 为什么用 flex 而不是算高度

  `.demo-screen` 竖排 flex，body 用 `flex: 1` 吃掉剩余空间，bar / note /
  actions 按内容高度。**不要**改成 `height: calc(100dvh - 实测高度)`：
  那需要 JS 先量出「其余部分」的高度，而全屏切换的瞬间必然量错（加类与重排
  之间隔着一次 rAF），实测会出现 body 高 900、整块也只有 900、note 被顶到
  屏幕外的情况。交给浏览器的 flex 分配，零测量、零竞态。
*/
.demo-screen.is-fs {
  position: fixed;
  inset: 0;
  z-index: 999;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  /* 铺满时不再需要圆角与投影：边缘就是视口边缘。 */
  border-radius: 0;
  box-shadow: none;
  /* 屏幕区本身不滚。 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 原生全屏时浏览器会接管尺寸，这里只补一个背景，避免边缘露出页面底色。 */
.demo-screen:fullscreen {
  background: var(--surface);
  border-radius: 0;
  box-shadow: none;
}

/*
  「只铺满、没进系统全屏」时（层 ② 被拒，或浏览器根本不支持），
  页面其余内容仍在下面，背景还能被滚到——滚动时 fixed 的屏幕区不动，
  观感像"页面在下面滑"。把 body 锁住最直接。
  进了系统全屏时 body 本来就不参与滚动，锁了也无害，所以不做区分。
*/
body.is-fs-lock {
  overflow: hidden;
}

/* 屏幕区吃掉剩余高度。flex 子项默认 `min-height: auto`，会被内容撑破，必须归零。 */
.demo-screen.is-fs .demo-screen-body {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
}

/*
  窄屏的底部说明会折成好几行，占掉可观的高度。全屏时实例才是主体，把说明
  收到两行，高度还给屏幕。
  用 line-clamp 而不是 `display: none`：那句「界面是真的、数据是虚构的、
  AI 是预录回放」是合规底线，全屏下也必须看得见，不能藏。
*/
.demo-screen.is-fs .demo-screen-note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 铺满时 bar 上的标题等元素挤一挤，把位置让给按钮。 */
.demo-screen.is-fs .demo-screen-bar {
  padding: 8px 12px;
}

.demo-screen.is-fs .demo-screen-note {
  padding: 9px 14px;
}


.demo-screen-body img,
.demo-screen-body picture {
  display: block;
  width: 100%;
  height: 100%;
}

.demo-screen-body img {
  object-fit: cover;
  object-position: top center;
}

/*
  演示实例内嵌。
  `#demoFallback`（静态截图）与 `#demoFrame` 是叠在一起的两层：截图先渲染，
  iframe 加载完成后由 JS 给它加 `is-ready`，把截图层淡出。这样做的原因有两个：
  ① iframe 首字节到达前会是一块白，直接盖住截图就白闪一下；
  ② 内嵌站点在某些网络/策略下会被拦，此时保留截图比留白好。
*/
.demo-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--demo-screen-canvas);
  opacity: 0;
  transition: opacity 0.35s ease;
}

#demoScreenBody.is-ready .demo-frame {
  opacity: 1;
}

#demoScreenBody.is-ready #demoFallback {
  opacity: 0;
  pointer-events: none;
}

.demo-screen-note {
  padding: 11px 14px;
  border-top: 1px solid var(--hairline);
  background: var(--pearl);
  font-size: 12.5px;
  line-height: 1.6;
  /* 这行字压在 pearl 上：ink-faint 只有 4.45/3.99（浅色/深色），不达标，必须用 ink-muted。 */
  color: var(--ink-muted);
}

.demo-screen-note strong {
  color: var(--ink);
  font-weight: 650;
}

.demo-screen-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 0 14px 14px;
  background: var(--pearl);
}

.btn-sm {
  padding: 8px 14px;
  font-size: 13.5px;
}

/* ============ 差异对照 ============ */

.demo-diff {
  padding: var(--sp-9) var(--sp-5);
  background: var(--parchment);
}

.demo-diff-head {
  width: min(var(--shell), 92vw);
  margin: 0 auto var(--sp-7);
  text-align: center;
}

.demo-diff-head h2 {
  font-size: 38px;
  line-height: 1.15;
  margin-bottom: var(--sp-4);
}

.demo-diff-head p {
  max-width: 760px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.65;
  /* 这一段压在 parchment 上：浅色下 ink-muted 差 0.01 不达标（4.49），改用 primary（8.91）；
     深色下 primary 又只有 4.21，换回 ink-muted（8.9+）。两个主题各取达标的那一个。 */
  color: var(--primary);
}

:root[data-theme="dark"] .demo-diff-head p {
  color: var(--ink-muted);
}

.demo-diff-table {
  width: min(var(--shell), 92vw);
  margin: 0 auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.diff-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.25fr);
  border-top: 1px solid var(--hairline);
}

.diff-row:first-child {
  border-top: 0;
}

.diff-cell {
  padding: 15px 18px;
  font-size: 14.5px;
  line-height: 1.65;
}

.diff-cell + .diff-cell {
  border-left: 1px solid var(--hairline);
}

.diff-head-row {
  background: var(--pearl);
  font-size: 13px;
  font-weight: 600;
}

.diff-head-row .diff-cell {
  padding: 11px 18px;
  color: var(--ink-muted);
}

.diff-head-row .diff-cell--b {
  color: var(--accent);
}

.diff-key {
  font-weight: 600;
  color: var(--ink);
}

.diff-a {
  color: var(--ink-muted);
}

.diff-b {
  color: var(--ink);
  background: var(--demo-full-bg);
}

/* ============ 下载区（复用官网 .download 的排版） ============ */

.demo-download {
  padding-top: var(--sp-9);
}

/* ============ 更新 / 反馈 / Star ============ */

.demo-community {
  padding: var(--sp-9) var(--sp-5);
  background: var(--canvas);
}

.demo-community-inner {
  width: min(var(--shell), 92vw);
  margin: 0 auto;
}

.demo-community-head {
  text-align: center;
  margin-bottom: var(--sp-7);
}

.demo-community-head h2 {
  font-size: 36px;
  line-height: 1.18;
  margin-bottom: var(--sp-4);
}

.demo-community-head p {
  max-width: 720px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-muted);
}

.demo-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

.demo-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.demo-card--accent {
  background: var(--demo-full-bg);
  box-shadow: inset 0 0 0 1px var(--demo-full-edge);
}

.demo-card-icon {
  width: 38px;
  height: 38px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--accent-weak);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-card h3 {
  font-size: 19px;
  margin-bottom: 10px;
}

.demo-card p {
  margin: 0 0 var(--sp-4);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-muted);
}

.demo-card-list {
  margin: 0 0 var(--sp-4);
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 版本号固定一列、说明文字另起一列：换行时说明仍然左对齐，不会缩进错位。 */
.demo-card-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 7px;
  align-items: baseline;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.demo-card-list code {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline);
  padding: 1px 5px;
  border-radius: var(--r-xs);
  white-space: nowrap;
}

.demo-card-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

.demo-card-actions .btn {
  font-size: 15px;
  padding: 10px 18px;
}

/* ============ 响应式 ============ */

@media (max-width: 980px) {
  .demo-stage-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }

  .demo-screen {
    position: static;
    order: -1;
  }

  .demo-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 834px) {
  .demo-alert-inner {
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding: 10px 0;
    font-size: 14px;
  }

  .demo-alert-actions {
    margin-left: 0;
    width: 100%;
  }

  .demo-diff-head h2 {
    font-size: 30px;
  }

  .demo-diff-head p {
    font-size: 16.5px;
  }

  /* 窄屏把三列对照压成一条条：隐藏表头，改用 ::before 标注是哪一栏。 */
  .diff-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .diff-head-row {
    display: none;
  }

  .diff-cell + .diff-cell {
    border-left: 0;
    border-top: 1px dashed var(--hairline);
  }

  .diff-key {
    background: var(--pearl);
  }

  .diff-a::before {
    content: "在线体验版：";
    font-weight: 600;
    color: var(--ink-faint);
  }

  .diff-b::before {
    content: "完整版：";
    font-weight: 600;
    color: var(--accent);
  }

  .demo-community-head h2 {
    font-size: 28px;
  }

  .demo-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .demo-stage-inner,
  .demo-guide {
    width: 100%;
  }

  .demo-guide {
    padding: var(--sp-5) var(--sp-4);
  }

  .demo-step-panel {
    padding-left: 12px;
  }

  .diff-cell {
    padding: 13px 15px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-alert-btn,
  .demo-step-btn,
  .demo-step-num,
  .demo-step-chevron,
  .demo-fs-btn {
    transition: none;
  }
}

/* ============ 全屏态的窄屏处理 ============ */

/*
  bar 右端在窄屏本来就拥挤（圆点 + 标题 + tag + 点击全屏），640 以下再显示
  「全屏」两个字就会把标题挤没。所以窄屏只留图标：按钮仍是 32×32 的可点区域，
  靠 `aria-label`（由 `title` 兜底）保证屏幕阅读器与长按提示都能读到含义。
*/
@media (max-width: 640px) {
  .demo-fs-btn {
    padding: 4px;
    width: 30px;
    height: 30px;
    justify-content: center;
  }

  .demo-fs-text {
    display: none;
  }

  .demo-fs-btn .demo-fs-icon {
    width: 16px;
    height: 16px;
  }
}

/*
  窄屏铺满时的取舍：bar 上「圆点 + 标题 + 演示数据胶囊 + 全屏按钮」四样挤在
  一行，标题必然被压到省略号（实测 390px 下只剩「简历通·在线体验（可…」，
  截断在括号里比不显示更难看）。全屏时用户已经知道自己看的是演示，标题信息
  价值最低，直接不显示，把宽度让给胶囊和按钮。
*/
@media (max-width: 640px) {
  .demo-screen.is-fs .demo-screen-title {
    display: none;
  }
}