/* ==========================================================================
   「怎么用」页的演示短片：DOM 舞台，画面就是首页演示同款的聊天窗与话术精灵主界面。
   窗口里的配色、圆角、字号、内边距全部照抄 assets/css/demo.css（客户端白色主题复刻），
   两种网站主题下保持原样；只有舞台底色、字幕、按键提示、标注跟着网站主题走。
   舞台按 800×450 设计，assets/js/guide-film.js 用 transform 缩放到容器宽度。
   ========================================================================== */

.film-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--row-hover);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

/* 舞台里不少元素自己设了 display，hidden 要压得住它们 */
.film-stage [hidden] {
  display: none !important;
}

/* 舞台里的两层：screen 是「屏幕」（窄屏时镜头会推近跟着操作走），hud 是字幕与片头片尾（不跟镜头）。 */
.gf-screen,
.gf-hud {
  position: absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 450px;
  transform-origin: 0 0;
}

.gf-hud {
  pointer-events: none;
}

/* ---------- 客户端窗口通用 ---------- */
/* 客户端白色主题 token（同 demo.css 的 .demo）。吸附栏不是 .gf-win，也要拿到同一套，否则它的底色是透明的。 */
.gf-win,
.gf-attached {
  --w-content: #ffffff;
  --w-text: #000000;
  --w-muted: #7a8695;
  --w-border: #cfcfcf;
  --w-edge: #d0d0d0;
  --w-panel-border: #d0d8e2;
  --w-selection-border: #8cb8d6;
  --w-title-fg: #e53935;
  --w-cloud: #4c8dff;
  /* 话术精灵主界面（同 demo.css 的 --p-*，取样自客户端实机截图）；吸附栏结果行也要用 */
  --p-frame: #fbf6ec;
  --p-paper: #fffdf8;
  --p-tab: #f4eadb;
  --p-peach: #ffe4d1;
  --p-ink: #2a1a12;
  --p-chip: #f4ebde;
  --p-muted: #7f7b74;
  --p-digit: #8c7b6b;
  --p-answer: #4a3a2e;
  --p-sep: #e5eaf0;
  --p-box: #8d8279;
  --p-base: #75685f;
  --p-tab-line: #b3a79b;
  --p-chip-line: #d6cabb;
  --p-lv2-line: #645145;
  --p-hover: #fdf3e7;
  --p-badge: #fff3e7;
  --p-sending: #fff5e6;
  --p-rust: #a54626;
  --p-hot: #c2410c;
  --p-focus: #e07f4a;
  /* 聊天窗：目前是通用简化外观（规则允许画成平台形似简易版）；自己发出的气泡与发送键用网站品牌橙 */
  --wx-bg: #ededed;
  --wx-head: #f7f7f7;
  --wx-head-fg: #1a1a1a;
  --wx-sub: #8a8a8a;
  --wx-line: #e3e3e3;
  --wx-in: #ffffff;
  --wx-out: var(--accent);
  --wx-out-fg: #ffffff;
  --wx-avatar-bg: #d7e2f2;
  --wx-avatar-fg: #33506e;
  --wx-focus: var(--accent);
  --wx-focus-ring: var(--accent-soft);
}

.gf-win {
  position: absolute;
  top: 48px;
  height: 350px;
  border: 1px solid var(--w-edge);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- 左：客服聊天窗口（简化皮肤：不写平台名称、不画标志、不含真实用户信息） ---------- */
.gf-chat {
  left: 40px;
  width: 400px;
  display: flex;
  flex-direction: column;
  background: var(--wx-bg);
  overflow: hidden;
}

/* 截图模式：data-skin="shot" 时窗口外观换成 assets/img/ 下的真实截图，
   只隐藏代码画的外框（标题栏、底栏的底色与边框），气泡与输入框里的字照常叠在上面。 */
.gf-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gf-chat[data-skin="shot"],
.gf-chat[data-skin="shot"] .gf-chat-log,
.gf-chat[data-skin="shot"] .gf-chat-head,
.gf-chat[data-skin="shot"] .gf-chat-foot,
.gf-chat[data-skin="shot"] .gf-chat-input,
.gf-chat[data-skin="shot"] .gf-chat-send {
  border-color: transparent;
  background: transparent;
}

.gf-chat[data-skin="shot"] .gf-chat-head > *,
.gf-chat[data-skin="shot"] .gf-chat-send {
  visibility: hidden;
}

.gf-chat-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--wx-line);
  background: var(--wx-head);
}

.gf-chat-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: var(--wx-avatar-bg);
  color: var(--wx-avatar-fg);
  font-size: 13px;
  font-weight: 600;
}

.gf-chat-who {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.gf-chat-who strong {
  color: var(--wx-head-fg);
  font-size: 13px;
  font-weight: 600;
}

.gf-chat-who em {
  color: var(--wx-sub);
  font-size: 11.5px;
  font-style: normal;
}

/* 新消息从底部进来、旧消息往上顶（聊天软件的样子），超出的部分直接裁掉 */
.gf-chat-log {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 12px;
  background: var(--wx-bg);
  overflow: hidden;
}

.gf-msg {
  display: flex;
}

.gf-msg--in {
  justify-content: flex-start;
}

.gf-msg--out {
  justify-content: flex-end;
}

.gf-bubble {
  position: relative;
  max-width: 78%;
  margin: 0;
  padding: 8px 11px;
  border-radius: 4px;
  color: #1a1a1a;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.gf-bubble::before {
  content: "";
  position: absolute;
  top: 10px;
  border: 5px solid transparent;
}

.gf-msg--in .gf-bubble {
  border: 1px solid #e2e2e2;
  background: var(--wx-in);
}

.gf-msg--in .gf-bubble::before {
  left: -9px;
  border-right-color: var(--wx-in);
}

.gf-msg--out .gf-bubble {
  background: var(--wx-out);
  color: var(--wx-out-fg);
}

.gf-msg--out .gf-bubble::before {
  right: -9px;
  border-left-color: var(--wx-out);
}

.gf-typing {
  display: inline-flex;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  background: var(--wx-in);
}

.gf-typing-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9a9a9a;
}

.gf-chat-foot {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid var(--wx-line);
  background: var(--wx-head);
}

.gf-chat-input {
  flex: 1;
  height: 70px;
  padding: 7px 9px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  background: var(--wx-in);
  color: #1a1a1a;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
}

.gf-chat-input--focus {
  border-color: var(--wx-focus);
  box-shadow: 0 0 0 2px var(--wx-focus-ring);
}

.gf-placeholder {
  color: #9a9a9a;
}

/* 输入框里闪的光标 */
.gf-caret {
  display: inline-block;
  width: 1px;
  height: 1.15em;
  margin-left: 1px;
  background: #1a1a1a;
  vertical-align: -0.2em;
}

.gf-chat-send {
  flex: 0 0 auto;
  padding: 7px 16px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background: #f2f2f2;
  color: #333333;
  font-size: 13px;
}

.gf-chat-send--ready {
  border-color: var(--wx-out);
  background: var(--wx-out);
  color: var(--wx-out-fg);
}

/* ---------- 右：话术精灵主界面（同 demo.css 的 .app：暖纸面 + 桃色选中 + 深墨描边） ---------- */
.gf-app {
  display: flex;
  flex-direction: column;
  width: 300px;
  padding: 4px 8px 6px;
  border-color: var(--p-box);
  background: var(--p-frame);
  color: var(--p-ink);
}

.gf-app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 0 3px 28px;
}

.gf-app-tag {
  padding: 1px 7px;
  border: 1px solid var(--p-ink);
  border-radius: 999px;
  background: var(--p-peach);
  color: var(--p-ink);
  font-size: 11px;
}

.gf-app-wins {
  display: flex;
  gap: 2px;
}

.gf-app-win {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 6px;
  color: var(--p-ink);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
}

.gf-app-tabs {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin: 0 -8px;
  padding: 0 10px;
  border-bottom: 1px solid var(--p-base);
}

.gf-app-tab {
  margin-bottom: -1px;
  padding: 5px 10px;
  border: 1px solid var(--p-tab-line);
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  background: var(--p-tab);
  color: var(--p-digit);
  font-size: 12px;
}

.gf-app-tab--active {
  padding: 4px 9px 5px;
  border: 2px solid var(--p-ink);
  border-bottom: none;
  background: var(--p-frame);
  color: var(--p-ink);
  font-weight: 700;
}

.gf-app-digits {
  display: grid;
  grid-template-columns: repeat(10, 26px);
  padding: 5px 0 6px;
}

.gf-app-digit {
  justify-self: center;
  width: 22px;
  height: 22px;
  border: 2px solid transparent;
  border-radius: 6px;
  color: var(--p-digit);
  font-size: 12.5px;
  line-height: 19px;
  text-align: center;
}

.gf-app-digit--active {
  border-color: var(--p-ink);
  background: var(--p-peach);
  color: var(--p-ink);
  font-weight: 700;
}

.gf-app-lv1 {
  display: flex;
  gap: 6px;
  padding: 5px 6px;
  border: 1px solid var(--p-box);
  border-radius: 6px;
  background: var(--p-paper);
}

.gf-app-chip {
  padding: 2px 8px;
  border: 1px solid var(--p-chip-line);
  border-radius: 6px;
  background: var(--p-chip);
  color: var(--p-muted);
  font-size: 12px;
}

.gf-app-chip--active {
  padding: 1px 7px;
  border: 2px solid var(--p-ink);
  background: var(--p-peach);
  color: var(--p-ink);
  font-weight: 700;
}

.gf-app-tree {
  flex: 1;
  margin-top: 7px;
  padding: 3px;
  border: 1px solid var(--p-box);
  border-radius: 6px;
  background: var(--p-paper);
  overflow: hidden;
}

/* 二级分类（短片里总是展开的那一节）：整条桃色 */
.gf-app-lv2 {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid var(--p-lv2-line);
  border-radius: 6px;
  background: var(--p-peach);
}

.gf-app-lv2-arrow {
  width: 10px;
  color: var(--p-ink);
  font-size: 12px;
  line-height: 1;
  text-align: center;
}

.gf-app-lv2-title {
  color: var(--p-ink);
  font-size: 12.5px;
  font-weight: 600;
}

/* 话术行：[临时序号] [纸飞机] [行号.] 标题 / 答案，纸飞机与行号占固定宽度，标题对齐成一列 */
.gf-app-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 4px 8px 4px 6px;
  border-bottom: 1px solid var(--p-sep);
}

.gf-app-row-send {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 3px;
  border: 1px solid var(--p-ink);
  border-radius: 5px;
  background: var(--p-badge);
  color: var(--p-rust);
}

.gf-app-row-send svg {
  display: block;
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gf-app-row-num {
  flex: 0 0 1.6em;
  color: var(--w-title-fg);
  font-size: 12.5px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gf-app-row.gf-hover {
  background: var(--p-hover);
}

.gf-app-row-send.gf-hover {
  background: var(--p-peach);
  color: var(--p-ink);
}

/* 选中、正在发送压过悬停（同 demo.css 的先后） */
.gf-app-row.gf-app-row--selected {
  background: var(--p-peach);
}

.gf-app-row--selected .gf-app-row-title,
.gf-app-row--selected .gf-app-row-num {
  color: var(--p-ink);
  font-weight: 700;
}

.gf-app-row.gf-app-row--sending {
  background: var(--p-sending);
}

.gf-app-row-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.gf-app-row-main {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 18px;
}

.gf-app-row-digit {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 17px;
  height: 18px;
  border: 2px solid var(--p-ink);
  border-radius: 5px;
  background: var(--p-paper);
  color: var(--p-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.gf-app-row-icon {
  width: 14px;
  height: 14px;
}

.gf-app-row-title {
  flex: 0 0 auto;
  color: var(--w-title-fg);
  font-size: 12.5px;
}

.gf-app-row-text {
  overflow: hidden;
  color: var(--p-answer);
  font-size: 12.5px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 命中来源跟在标题同一行的右边，一条结果只占两行高，三条结果放得下 */
.gf-app-row-path {
  margin-left: auto;
  overflow: hidden;
  color: var(--p-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 搜索结果卡里的行收紧（行高写死，不靠字体的默认行高）：表头 + 三条命中整行放得下，不会有半截行 */
.gf-app-tree--results .gf-app-row {
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 1.35;
}

.gf-app-tree--results .gf-app-row-body {
  gap: 1px;
}

/* 搜索结果卡表头（主界面与吸附栏共用）：「搜索结果 · N」+ 下一步提示 */
.gf-results-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px 4px;
  border-bottom: 1px solid var(--p-sep);
  white-space: nowrap;
}

.gf-results-title {
  flex: 0 0 auto;
  color: var(--p-hot);
  font-size: 13px;
  font-weight: 700;
}

.gf-results-hint {
  overflow: hidden;
  color: var(--p-muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
}

/* 提示语里的 Tab 画成键帽；在客户端窗口里，所以颜色固定，不跟网站主题 */
.gf-hint-cap {
  display: inline-block;
  padding: 0 5px;
  border-radius: 4px;
  background: #c2410c;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
}

.gf-app-search {
  display: flex;
  align-items: center;
  margin-top: 7px;
  border: 1px solid var(--p-base);
  border-radius: 6px;
  background: var(--p-paper);
}

.gf-app-search-glass {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  color: #948b85;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.gf-app-search-input {
  flex: 1;
  height: 26px;
  padding: 3px 8px 3px 6px;
  color: var(--p-ink);
  font-size: 12.5px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
}

.gf-app-search-input .gf-placeholder {
  color: #948b85;
}

.gf-app-search:has(.gf-app-search-input--focus) {
  border-color: var(--p-focus);
}

/* Alt+Q 定位到搜索框时的短高亮（同 demo.css 的 app-search-hit 起点） */
.gf-app-search-input--hit {
  box-shadow: 0 0 0 3px rgba(255, 107, 44, 0.35);
}

.gf-app-range {
  display: grid;
  place-items: center;
  padding: 0 8px;
  border-left: 1px solid var(--p-chip-line);
  border-radius: 0 6px 6px 0;
  color: var(--p-ink);
  font-size: 11.5px;
  white-space: nowrap;
}

/* 鼠标停在可点的东西上：同 demo.css 各控件的 :hover */
.gf-app-tab.gf-hover,
.gf-app-digit.gf-hover:not(.gf-app-digit--active) {
  color: var(--p-ink);
}

.gf-app-chip.gf-hover:not(.gf-app-chip--active) {
  border-color: var(--p-box);
  color: var(--p-ink);
}

.gf-chat-input.gf-hover {
  border-color: #c4c4c4;
}

/* ---------- 底部吸附搜索栏（同 demo.css 的 .attached） ---------- */
.gf-attached {
  position: absolute;
  top: 398px;
  left: 40px;
  width: 400px;
  border: 1px solid var(--w-border);
  background: var(--w-content);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.gf-attached-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: var(--w-content);
}

.gf-attached-row--focus {
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--w-selection-border);
}

.gf-attached-input {
  flex: 1;
  height: 26px;
  padding: 2px 6px;
  color: var(--w-text);
  font-size: 13px;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
}

.gf-attached-input .gf-placeholder {
  color: #9aa3ae;
}

.gf-attached-range {
  min-width: 38px;
  height: 26px;
  padding: 0 5px;
  border-left: 1px solid var(--w-panel-border);
  color: var(--w-text);
  font-size: 12px;
  line-height: 26px;
  text-align: center;
}

.gf-attached-toggle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--w-panel-border);
  border-radius: 6px;
  background: var(--w-content);
  color: var(--w-muted);
  font-size: 20px;
  line-height: 1;
}

/* 结果弹层：向上弹出、盖住聊天窗口下半截，和吸附栏之间留 8px；不透明，聊天窗里的字不会透上来 */
.gf-attached-results {
  position: absolute;
  right: -1px;
  bottom: calc(100% + 8px);
  left: -1px;
  border: 1px solid var(--w-border);
  border-radius: 12px;
  background: var(--w-content);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

/* 吸附到聊天窗口底边那一下：顶边亮一道 */
.gf-snap {
  position: absolute;
  top: -2px;
  right: -1px;
  left: -1px;
  height: 3px;
  background: var(--w-cloud);
}

/* ---------- 鼠标、点击涟漪、按键提示、标注 ---------- */
.gf-pointer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 14px;
  height: 21px;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
  transform-origin: 0 0;
}

.gf-pointer svg {
  display: block;
  width: 100%;
  height: 100%;
}

.gf-ripple {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 2px solid var(--w-cloud);
  border-radius: 50%;
  background: rgba(76, 141, 255, 0.18);
}

/* 按键提示是小键帽，放在没有字的空地上（主界面右边那条空白、按钮上方），不压话术行、卡片边框和搜索框。
   组合键竖着叠（Alt / + / Q），才塞得进主界面右边 40px 宽的空白。 */
.gf-key {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: var(--fg-muted);
  font-size: 9px;
  line-height: 1;
}

.gf-cap {
  min-width: 20px;
  padding: 3px 5px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--bg);
  box-shadow: 0 2px 0 var(--line-strong);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.gf-cap--down {
  box-shadow: 0 1px 0 var(--line-strong);
  transform: translateY(1px);
  border-color: var(--accent);
  color: var(--accent);
}

.gf-note {
  position: absolute;
  z-index: 3;
  padding: 4px 10px;
  border: 1px solid var(--accent-line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- 字幕与片头片尾（hud 层，跟着网站主题） ---------- */
.gf-caption {
  position: absolute;
  top: 12px;
  right: 0;
  left: 0;
  color: var(--fg);
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}

.film-stage[data-zoom] .gf-caption {
  top: 0;
  padding: 8px 12px;
  background: var(--row-hover);
  font-size: 26px;
  line-height: 34px;
}

.gf-caption b {
  margin-right: 4px;
  color: var(--accent);
}

.gf-title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--row-hover);
  color: var(--fg);
  text-align: center;
}

.gf-title img {
  width: 56px;
  height: auto;
}

.gf-title strong {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
}

.gf-title span {
  color: var(--fg-muted);
  font-size: 18px;
}

.gf-title span b {
  color: var(--accent);
  font-weight: 600;
}

/* ---------- 节拍特效（guide-film.js 的 renderFx；开了「减少动态效果」时一个都不出现） ---------- */
/* 粒子与拖尾在 screen 层（跟着镜头），白闪、扫光、片尾彩纸在 hud 层（盖住整个画面）。 */
.gf-spark,
.gf-confetti {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  border-radius: 50%;
  pointer-events: none;
  translate: -50% -50%;
}

.gf-spark--star {
  border-radius: 1px;
}

.gf-confetti {
  border-radius: 1px;
}

.gf-streak {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  height: 4px;
  margin-top: -2px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, var(--accent) 55%, #fff);
  transform-origin: 0 50%;
  pointer-events: none;
}

.gf-glow {
  position: absolute;
  z-index: 6;
  border: 2px solid var(--accent);
  border-radius: 10px;
  pointer-events: none;
}

.gf-sweep {
  position: absolute;
  top: -40px;
  left: 0;
  width: 200px;
  height: 530px;
  background: linear-gradient(90deg, transparent, rgba(255, 190, 140, 0.22) 35%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 190, 140, 0.22) 65%, transparent);
  pointer-events: none;
}

.gf-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  pointer-events: none;
}