/* Generated replica of https://creme-zipper-06745257.figma.site */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #fff; font-family: "Inter", system-ui, sans-serif; }
.canvas { position: relative; margin: 0 auto; }
.nav-link { text-decoration: none; }
.nav-active { cursor: default; }
.line { position: absolute; }
.wordcloud { position: absolute; }
.wordcloud canvas { width: 100%; height: 100%; display: block; }
/* 数据绑定(databind.mjs):结果面板 + 采集表单 */
.databind { position: absolute; font-family: "Inter", system-ui, sans-serif; }
.databind .db-body { width: 100%; height: 100%; }
.databind .db-body canvas { width: 100%; height: 100%; display: block; }
.databind .db-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; line-height: 1.4; }
.databind .db-label { flex: 0 0 auto; min-width: 4em; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.databind .db-track { flex: 1 1 auto; height: 8px; background: rgba(0,0,0,.08); border-radius: 4px; overflow: hidden; }
.databind .db-fill { height: 100%; background: #2563eb; border-radius: 4px; transition: width .3s ease; }
.databind .db-count { flex: 0 0 auto; min-width: 2.5em; text-align: right; color: #475569; font-variant-numeric: tabular-nums; }
.databind .db-num { font-size: 42px; font-weight: 700; line-height: 1.1; color: #0f172a; }
.databind .db-unit { font-size: 14px; font-weight: 400; margin-left: 4px; color: #64748b; }
.databind .db-item { font-size: 13px; line-height: 1.6; padding: 2px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.databind .db-empty { font-size: 13px; color: #94a3b8; }
.databind .db-note { font-size: 12px; margin-top: 4px; color: #64748b; }
.databind .db-note.db-ok { color: #16a34a; }
.databind .db-note.db-err { color: #b91c1c; }
.databind .db-note.db-wait { color: #64748b; }
.databind .db-note.db-ok { color: #16a34a; }
/* 只写入不渲染(action):容器不该占位,也不该挡到下面的 Figma 元素 */
.databind[data-spec*='"kind":"action"'] { width: 0 !important; height: 0 !important; overflow: visible; pointer-events: none; }
.databind .db-form { display: flex; gap: 6px; margin-top: 8px; pointer-events: auto; }
.databind .db-input { flex: 1 1 auto; min-width: 0; padding: 6px 8px; font-size: 13px; border: 1px solid #cbd5e1; border-radius: 6px; font-family: inherit; }
.databind .db-btn { flex: 0 0 auto; padding: 6px 12px; font-size: 13px; border: 0; border-radius: 6px; background: #2563eb; color: #fff; cursor: pointer; font-family: inherit; }
.databind .db-btn:hover { background: #1d4ed8; }
/* 组件变体轮播(SWAP_STATE):非当前变体隐藏。用属性选择器而不是内联 display ——
   文本节点靠内联 display:flex 排版,直接改 style.display 会把排版弄散。 */
[data-swap-off] { display: none !important; }
[data-swap-to] { cursor: pointer; }
/* AI 插入的视频。定位与尺寸走内联样式(和节点一致),这里只兜底外观。 */
.replica-video { background: #000; }

@font-face {
  font-family: 'Abhaya Libre ExtraBold';
  font-weight: 800;
  font-style: normal;
  src: url(fonts/AbhayaLibre-ExtraBold_1.woff2?v=db588ea6) format('woff2');
}

@font-face {
  font-family: 'Noto Sans Math';
  font-weight: 400;
  font-style: normal;
  src: url(fonts/NotoSansMath-Regular_1.woff2?v=fbed292d) format('woff2');
}

@font-face {
  font-family: 'Noto Sans Symbols';
  font-weight: 400;
  font-style: normal;
  src: url(fonts/NotoSansSymbols-VF_2.woff2?v=969973f8) format('woff2');
}

@font-face {
  font-family: 'Noto Sans';
  font-weight: 400;
  font-style: normal;
  src: url(fonts/NotoSans-VF_3.woff2?v=cae53ea2) format('woff2');
}

@font-face {
  font-family: 'Abril Fatface';
  font-weight: 400;
  font-style: normal;
  src: url(fonts/AbrilFatface-Regular_1.woff2?v=cc490f75) format('woff2');
}

@font-face {
  font-family: 'Actor';
  font-weight: 400;
  font-style: normal;
  src: url(fonts/Actor-Regular_1.woff2?v=cc56f685) format('woff2');
}

@font-face {
  font-family: 'Noto Sans SC';
  font-weight: 400;
  font-style: normal;
  src: url(fonts/NotoSansSC-VF_2.woff2?v=168ba6c4) format('woff2');
}

@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 400;
  font-style: normal;
  src: url(fonts/NotoSansJP-VF_2.woff2?v=87520f11) format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-style: normal;
  src: url(fonts/Inter_1.woff2?v=c5007bb6) format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-weight: 600;
  font-style: normal;
  src: url(fonts/Inter_1.woff2?v=c5007bb6) format('woff2');
}

/* —— Audience Voices:把 24 个选项的文字节点撑满胶囊按钮,点击任意位置都能记录选择 —— */
.canvas [data-node-id="2157:507"], .canvas [data-node-id="2157:513"], .canvas [data-node-id="2157:519"], .canvas [data-node-id="2157:525"], .canvas [data-node-id="2157:531"], .canvas [data-node-id="2157:551"], .canvas [data-node-id="2157:554"], .canvas [data-node-id="2157:557"], .canvas [data-node-id="2157:585"], .canvas [data-node-id="2157:591"], .canvas [data-node-id="2157:597"], .canvas [data-node-id="2157:603"], .canvas [data-node-id="2157:606"], .canvas [data-node-id="2157:588"], .canvas [data-node-id="2157:594"], .canvas [data-node-id="2157:600"], .canvas [data-node-id="2157:679"], .canvas [data-node-id="2157:685"], .canvas [data-node-id="2157:691"], .canvas [data-node-id="2157:697"], .canvas [data-node-id="2157:700"], .canvas [data-node-id="2157:682"], .canvas [data-node-id="2157:688"], .canvas [data-node-id="2157:694"] {
  width: 261px !important;
  height: 61px !important;
  justify-content: center !important;
  align-content: center !important;
  cursor: pointer !important;
}
.canvas [data-node-id="2157:507"], .canvas [data-node-id="2157:513"], .canvas [data-node-id="2157:519"], .canvas [data-node-id="2157:525"] { top: 6018px !important; }
.canvas [data-node-id="2157:531"], .canvas [data-node-id="2157:551"], .canvas [data-node-id="2157:554"], .canvas [data-node-id="2157:557"] { top: 6104px !important; }
.canvas [data-node-id="2157:585"], .canvas [data-node-id="2157:591"], .canvas [data-node-id="2157:597"], .canvas [data-node-id="2157:603"] { top: 6269px !important; }
.canvas [data-node-id="2157:606"], .canvas [data-node-id="2157:588"], .canvas [data-node-id="2157:594"], .canvas [data-node-id="2157:600"] { top: 6355px !important; }
.canvas [data-node-id="2157:679"], .canvas [data-node-id="2157:685"], .canvas [data-node-id="2157:691"], .canvas [data-node-id="2157:697"] { top: 6520px !important; }
.canvas [data-node-id="2157:700"], .canvas [data-node-id="2157:682"], .canvas [data-node-id="2157:688"], .canvas [data-node-id="2157:694"] { top: 6606px !important; }
.canvas [data-node-id="2157:507"], .canvas [data-node-id="2157:531"], .canvas [data-node-id="2157:585"], .canvas [data-node-id="2157:606"], .canvas [data-node-id="2157:679"], .canvas [data-node-id="2157:700"] { left: calc(50% - 590px) !important; }
.canvas [data-node-id="2157:513"], .canvas [data-node-id="2157:551"], .canvas [data-node-id="2157:591"], .canvas [data-node-id="2157:588"], .canvas [data-node-id="2157:685"], .canvas [data-node-id="2157:682"] { left: calc(50% - 292px) !important; }
.canvas [data-node-id="2157:519"], .canvas [data-node-id="2157:554"], .canvas [data-node-id="2157:597"], .canvas [data-node-id="2157:594"], .canvas [data-node-id="2157:691"], .canvas [data-node-id="2157:688"] { left: calc(50% + 7px) !important; }
.canvas [data-node-id="2157:525"], .canvas [data-node-id="2157:557"], .canvas [data-node-id="2157:603"], .canvas [data-node-id="2157:600"], .canvas [data-node-id="2157:697"], .canvas [data-node-id="2157:694"] { left: calc(50% + 305px) !important; }

/* —— 24 个投票绑定里,只有 Submit 下方那个(databind id=voices)负责显示词云;
      其余 23 个是「只负责写入」的面板,压成 1×1 并隐藏,避免叠出 24 个词云 —— */
.canvas .databind[style*="6860"],
.canvas .databind[style*="width:1px"],
.canvas .databind[style*="width: 1px"],
.canvas .databind[style*="height:1px"],
.canvas .databind[style*="height: 1px"] { display: none !important; }
/* —— Audience Voices:Submit 按钮整块可点(点哪都能提交) —— */
.canvas [data-node-id="2158:773"] {
  width: 261px !important;
  height: 61px !important;
  left: calc(50% - 130px) !important;
  top: 6717px !important;
  justify-content: center !important;
  align-content: center !important;
  cursor: pointer !important;
}

/* —— 结果面板:未点 Submit 前只占位 + 给提示;提交成功后才揭示词云 ——
   "已提交"的判据放宽成两种(任一成立即算):
   (1) 面板里出现 [data-db-state="submitted"](点击写入成功后运行时自己会加这个类);
   (2) 面板里的提示是非空、且不是 db-err —— 兜住类名/版本有差异的情况。
   面板本身用两种方式定位:data-spec 里的 write.target,或它的 data-spec/内联样式里的坐标。
   用 opacity 而不是 display:none,保证 canvas 一直有真实尺寸,揭示时不会画成空白。 */
@supports selector(:has(*)) {
  .canvas .databind[style*="6850"] .db-body {
    opacity: 0 !important;
    transform: translateY(6px);
    transition: opacity .45s ease, transform .45s ease;
    pointer-events: none;
  }
  .canvas .databind[style*="6850"]::before {
    content: "Answer the three questions above, then click Submit to reveal everyone's answers.";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 60px;
    text-align: center;
    font-family: "Actor", "Noto Sans SC", "Noto Sans JP", system-ui, sans-serif;
    font-size: 19px;
    line-height: 1.5;
    color: #5789e5;
  }
  .canvas:has(.databind[data-spec*="2158:773"] [data-db-state="submitted"]) .databind[style*="6850"] .db-body,
  .canvas:has(.databind[style*="6790"] [data-db-state="submitted"]) .databind[style*="6850"] .db-body {
    opacity: 1 !important;
    transform: none;
  }
  .canvas:has(.databind[data-spec*="2158:773"] [data-db-state="submitted"]) .databind[style*="6850"]::before,
  .canvas:has(.databind[style*="6790"] [data-db-state="submitted"]) .databind[style*="6850"]::before {
    content: none;
  }
}

/* —— Audience Voices:选中的选项胶囊(以及 Submit)变成主色 #15609E ——
   面板和按钮的对应关系写在面板的 data-spec 里(write.target 指向选项的文字节点)。
   "已选中"判据同样放宽:.db-ok 或"非空且非 db-err 的提示"。
   只改胶囊矩形的 background-color:白色文字在上层,80px 圆角原样保留。 */
.canvas:has(.databind[data-spec*="2157:507"] [data-db-state="submitted"]) [data-node-id="2157:510"],
.canvas:has(.databind[data-spec*="2157:513"] [data-db-state="submitted"]) [data-node-id="2157:512"],
.canvas:has(.databind[data-spec*="2157:519"] [data-db-state="submitted"]) [data-node-id="2157:518"],
.canvas:has(.databind[data-spec*="2157:525"] [data-db-state="submitted"]) [data-node-id="2157:524"],
.canvas:has(.databind[data-spec*="2157:531"] [data-db-state="submitted"]) [data-node-id="2157:530"],
.canvas:has(.databind[data-spec*="2157:551"] [data-db-state="submitted"]) [data-node-id="2157:550"],
.canvas:has(.databind[data-spec*="2157:554"] [data-db-state="submitted"]) [data-node-id="2157:553"],
.canvas:has(.databind[data-spec*="2157:557"] [data-db-state="submitted"]) [data-node-id="2157:556"],
.canvas:has(.databind[data-spec*="2157:585"] [data-db-state="submitted"]) [data-node-id="2157:584"],
.canvas:has(.databind[data-spec*="2157:591"] [data-db-state="submitted"]) [data-node-id="2157:590"],
.canvas:has(.databind[data-spec*="2157:597"] [data-db-state="submitted"]) [data-node-id="2157:596"],
.canvas:has(.databind[data-spec*="2157:603"] [data-db-state="submitted"]) [data-node-id="2157:602"],
.canvas:has(.databind[data-spec*="2157:606"] [data-db-state="submitted"]) [data-node-id="2157:605"],
.canvas:has(.databind[data-spec*="2157:588"] [data-db-state="submitted"]) [data-node-id="2157:587"],
.canvas:has(.databind[data-spec*="2157:594"] [data-db-state="submitted"]) [data-node-id="2157:593"],
.canvas:has(.databind[data-spec*="2157:600"] [data-db-state="submitted"]) [data-node-id="2157:599"],
.canvas:has(.databind[data-spec*="2157:679"] [data-db-state="submitted"]) [data-node-id="2157:678"],
.canvas:has(.databind[data-spec*="2157:685"] [data-db-state="submitted"]) [data-node-id="2157:684"],
.canvas:has(.databind[data-spec*="2157:691"] [data-db-state="submitted"]) [data-node-id="2157:690"],
.canvas:has(.databind[data-spec*="2157:697"] [data-db-state="submitted"]) [data-node-id="2157:696"],
.canvas:has(.databind[data-spec*="2157:700"] [data-db-state="submitted"]) [data-node-id="2157:699"],
.canvas:has(.databind[data-spec*="2157:682"] [data-db-state="submitted"]) [data-node-id="2157:681"],
.canvas:has(.databind[data-spec*="2157:688"] [data-db-state="submitted"]) [data-node-id="2157:687"],
.canvas:has(.databind[data-spec*="2157:694"] [data-db-state="submitted"]) [data-node-id="2157:693"],
.canvas:has(.databind[data-spec*="2158:773"] [data-db-state="submitted"]) [data-node-id="2158:772"] {
  background-color: #15609e !important;
}

/* 鼠标手势:胶囊整体可点(文字节点已撑满胶囊,这里再兜一层) */
.canvas [data-node-id="2157:510"], .canvas [data-node-id="2157:512"], .canvas [data-node-id="2157:518"],
.canvas [data-node-id="2157:524"], .canvas [data-node-id="2157:530"], .canvas [data-node-id="2157:550"],
.canvas [data-node-id="2157:553"], .canvas [data-node-id="2157:556"], .canvas [data-node-id="2157:584"],
.canvas [data-node-id="2157:590"], .canvas [data-node-id="2157:596"], .canvas [data-node-id="2157:602"],
.canvas [data-node-id="2157:605"], .canvas [data-node-id="2157:587"], .canvas [data-node-id="2157:593"],
.canvas [data-node-id="2157:599"], .canvas [data-node-id="2157:678"], .canvas [data-node-id="2157:684"],
.canvas [data-node-id="2157:690"], .canvas [data-node-id="2157:696"], .canvas [data-node-id="2157:699"],
.canvas [data-node-id="2157:681"], .canvas [data-node-id="2157:687"], .canvas [data-node-id="2157:693"],
.canvas [data-node-id="2158:772"] { cursor: pointer; }

/* —— 按下瞬间的即时反馈:手指按住时胶囊就是 #15609E,松手后如果看它就回浅蓝,说明这一下没写进后端 —— */
.canvas [data-node-id="2157:507"]:active, .canvas [data-node-id="2157:513"]:active, .canvas [data-node-id="2157:519"]:active,
.canvas [data-node-id="2157:525"]:active, .canvas [data-node-id="2157:531"]:active, .canvas [data-node-id="2157:551"]:active,
.canvas [data-node-id="2157:554"]:active, .canvas [data-node-id="2157:557"]:active, .canvas [data-node-id="2157:585"]:active,
.canvas [data-node-id="2157:591"]:active, .canvas [data-node-id="2157:597"]:active, .canvas [data-node-id="2157:603"]:active,
.canvas [data-node-id="2157:606"]:active, .canvas [data-node-id="2157:588"]:active, .canvas [data-node-id="2157:594"]:active,
.canvas [data-node-id="2157:600"]:active, .canvas [data-node-id="2157:679"]:active, .canvas [data-node-id="2157:685"]:active,
.canvas [data-node-id="2157:691"]:active, .canvas [data-node-id="2157:697"]:active, .canvas [data-node-id="2157:700"]:active,
.canvas [data-node-id="2157:682"]:active, .canvas [data-node-id="2157:688"]:active, .canvas [data-node-id="2157:694"]:active,
.canvas [data-node-id="2158:773"]:active {
  background-color: #15609e !important;
  border-radius: 80px !important;
}

/* —— Audience Voices:选项 / Submit 胶囊「点过一次就保持主色 #15609E」——
   (1) 兜底(与写入成功与否无关):手指按住哪颗胶囊,它就立刻变深蓝;松手后靠“极慢回退”
       留在深蓝 —— 按下时(:active)用 0.12s 快速变深,松手后恢复动画被拉长到 100000s,
       每帧只回退百万分之几,视觉上就是保持深蓝。圆角写在基础态,否则松手后深蓝会变方角。
   (2) 正规判据:点击写入成功后,运行时会在该绑定的面板里留下 [data-db-state="submitted"]
       (或一条非空、且不是 .db-err 的提示)。命中后面板对应的「文字节点 + 胶囊矩形」都锁定深蓝,
       刷新页面也仍然是深蓝。
   (3) 选择器不再要求数据面板必须位于 .canvas 内部(改成 html:has(...)),避免因为面板层级不同而失配。 */
.canvas [data-node-id="2157:507"], .canvas [data-node-id="2157:513"], .canvas [data-node-id="2157:519"], .canvas [data-node-id="2157:525"],
.canvas [data-node-id="2157:531"], .canvas [data-node-id="2157:551"], .canvas [data-node-id="2157:554"], .canvas [data-node-id="2157:557"],
.canvas [data-node-id="2157:585"], .canvas [data-node-id="2157:591"], .canvas [data-node-id="2157:597"], .canvas [data-node-id="2157:603"],
.canvas [data-node-id="2157:606"], .canvas [data-node-id="2157:588"], .canvas [data-node-id="2157:594"], .canvas [data-node-id="2157:600"],
.canvas [data-node-id="2157:679"], .canvas [data-node-id="2157:685"], .canvas [data-node-id="2157:691"], .canvas [data-node-id="2157:697"],
.canvas [data-node-id="2157:700"], .canvas [data-node-id="2157:682"], .canvas [data-node-id="2157:688"], .canvas [data-node-id="2157:694"],
.canvas [data-node-id="2158:773"] {
  border-radius: 80px !important;
  transition: background-color 100000s linear;
  -webkit-user-select: none;
  user-select: none;
}
.canvas [data-node-id="2157:507"]:active, .canvas [data-node-id="2157:513"]:active, .canvas [data-node-id="2157:519"]:active,
.canvas [data-node-id="2157:525"]:active, .canvas [data-node-id="2157:531"]:active, .canvas [data-node-id="2157:551"]:active,
.canvas [data-node-id="2157:554"]:active, .canvas [data-node-id="2157:557"]:active, .canvas [data-node-id="2157:585"]:active,
.canvas [data-node-id="2157:591"]:active, .canvas [data-node-id="2157:597"]:active, .canvas [data-node-id="2157:603"]:active,
.canvas [data-node-id="2157:606"]:active, .canvas [data-node-id="2157:588"]:active, .canvas [data-node-id="2157:594"]:active,
.canvas [data-node-id="2157:600"]:active, .canvas [data-node-id="2157:679"]:active, .canvas [data-node-id="2157:685"]:active,
.canvas [data-node-id="2157:691"]:active, .canvas [data-node-id="2157:697"]:active, .canvas [data-node-id="2157:700"]:active,
.canvas [data-node-id="2157:682"]:active, .canvas [data-node-id="2157:688"]:active, .canvas [data-node-id="2157:694"]:active,
.canvas [data-node-id="2158:773"]:active {
  background-color: #15609e !important;
  border-radius: 80px !important;
  transition: background-color 0.12s ease-out;
}
/* 写入成功 → 该面板负责的胶囊保持深蓝(文字节点与胶囊矩形一起锁定) */
html:has(.databind[data-spec*="2157:507"] [data-db-state="submitted"]) :is([data-node-id="2157:507"], [data-node-id="2157:510"]),
html:has(.databind[data-spec*="2157:513"] [data-db-state="submitted"]) :is([data-node-id="2157:513"], [data-node-id="2157:512"]),
html:has(.databind[data-spec*="2157:519"] [data-db-state="submitted"]) :is([data-node-id="2157:519"], [data-node-id="2157:518"]),
html:has(.databind[data-spec*="2157:525"] [data-db-state="submitted"]) :is([data-node-id="2157:525"], [data-node-id="2157:524"]),
html:has(.databind[data-spec*="2157:531"] [data-db-state="submitted"]) :is([data-node-id="2157:531"], [data-node-id="2157:530"]),
html:has(.databind[data-spec*="2157:551"] [data-db-state="submitted"]) :is([data-node-id="2157:551"], [data-node-id="2157:550"]),
html:has(.databind[data-spec*="2157:554"] [data-db-state="submitted"]) :is([data-node-id="2157:554"], [data-node-id="2157:553"]),
html:has(.databind[data-spec*="2157:557"] [data-db-state="submitted"]) :is([data-node-id="2157:557"], [data-node-id="2157:556"]),
html:has(.databind[data-spec*="2157:585"] [data-db-state="submitted"]) :is([data-node-id="2157:585"], [data-node-id="2157:584"]),
html:has(.databind[data-spec*="2157:591"] [data-db-state="submitted"]) :is([data-node-id="2157:591"], [data-node-id="2157:590"]),
html:has(.databind[data-spec*="2157:597"] [data-db-state="submitted"]) :is([data-node-id="2157:597"], [data-node-id="2157:596"]),
html:has(.databind[data-spec*="2157:603"] [data-db-state="submitted"]) :is([data-node-id="2157:603"], [data-node-id="2157:602"]),
html:has(.databind[data-spec*="2157:606"] [data-db-state="submitted"]) :is([data-node-id="2157:606"], [data-node-id="2157:605"]),
html:has(.databind[data-spec*="2157:588"] [data-db-state="submitted"]) :is([data-node-id="2157:588"], [data-node-id="2157:587"]),
html:has(.databind[data-spec*="2157:594"] [data-db-state="submitted"]) :is([data-node-id="2157:594"], [data-node-id="2157:593"]),
html:has(.databind[data-spec*="2157:600"] [data-db-state="submitted"]) :is([data-node-id="2157:600"], [data-node-id="2157:599"]),
html:has(.databind[data-spec*="2157:679"] [data-db-state="submitted"]) :is([data-node-id="2157:679"], [data-node-id="2157:678"]),
html:has(.databind[data-spec*="2157:685"] [data-db-state="submitted"]) :is([data-node-id="2157:685"], [data-node-id="2157:684"]),
html:has(.databind[data-spec*="2157:691"] [data-db-state="submitted"]) :is([data-node-id="2157:691"], [data-node-id="2157:690"]),
html:has(.databind[data-spec*="2157:697"] [data-db-state="submitted"]) :is([data-node-id="2157:697"], [data-node-id="2157:696"]),
html:has(.databind[data-spec*="2157:700"] [data-db-state="submitted"]) :is([data-node-id="2157:700"], [data-node-id="2157:699"]),
html:has(.databind[data-spec*="2157:682"] [data-db-state="submitted"]) :is([data-node-id="2157:682"], [data-node-id="2157:681"]),
html:has(.databind[data-spec*="2157:688"] [data-db-state="submitted"]) :is([data-node-id="2157:688"], [data-node-id="2157:687"]),
html:has(.databind[data-spec*="2157:694"] [data-db-state="submitted"]) :is([data-node-id="2157:694"], [data-node-id="2157:693"]),
html:has(.databind[data-spec*="2158:773"] [data-db-state="submitted"]) :is([data-node-id="2158:773"], [data-node-id="2158:772"]) {
  background-color: #15609e !important;
}
/* 结果面板的“揭示”规则也去掉 .canvas 前缀依赖,保证无论面板挂在哪一层都能生效 */
@supports selector(:has(*)) {
  .databind[style*="6850"] .db-body {
    opacity: 0 !important;
    transform: translateY(6px);
    transition: opacity .45s ease, transform .45s ease;
    pointer-events: none;
  }
  .databind[style*="6850"]::before {
    content: "Answer the three questions above, then click Submit to reveal everyone's answers.";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 60px;
    text-align: center;
    font-family: "Actor", "Noto Sans SC", "Noto Sans JP", system-ui, sans-serif;
    font-size: 19px;
    line-height: 1.5;
    color: #5789e5;
  }
  html:has(.databind[data-spec*="2158:773"] [data-db-state="submitted"]) .databind[style*="6850"] .db-body,
  html:has(.databind[style*="6790"] [data-db-state="submitted"]) .databind[style*="6850"] .db-body {
    opacity: 1 !important;
    transform: none;
  }
  html:has(.databind[data-spec*="2158:773"] [data-db-state="submitted"]) .databind[style*="6850"]::before,
  html:has(.databind[style*="6790"] [data-db-state="submitted"]) .databind[style*="6850"]::before {
    content: none;
  }
}
/* ===== Audience Voices:结果面板揭示加固(覆盖先前的规则) =====
   (1) 隐藏仍用 opacity,canvas 始终有真实尺寸;
   (2) 隐藏态过渡拉到 100000s —— 松开 Submit 后几乎不回退,揭示一次就保持住(本次浏览内);
   (3) 揭示触发放宽成三条,任一条成立即可:
       · Submit 写入成功(.db-ok);
       · Submit 留下任何非错误提示;
       · 按住 Submit 胶囊(2158:772 / 提交文字 2158:773)的瞬间 —— 完全不依赖后端;
   (4) 结果面板底部加一行小字说明;Submit 面板的 note 显示在 Submit 正下方(蓝=已提交,红=后端报错)。 */
@supports selector(:has(*)) {
  /* 主面板默认隐藏 */
  html .databind.databind:is([style*="6850"], [data-spec*='"refreshMs":10000']) .db-body {
    opacity: 0 !important;
    transform: translateY(6px) !important;
    transition: opacity 100000s linear, transform 100000s linear !important;
    pointer-events: none !important;
  }

  /* 揭示 */
  html:has(.databind:is([data-spec*="2158:773"], [data-spec*='"kind":"counter"']) [data-db-state="submitted"]) .databind.databind:is([style*="6850"], [data-spec*='"refreshMs":10000']) .db-body,
  html:has(.databind:is([data-spec*="2158:773"], [data-spec*='"kind":"counter"']) .db-note:not(:empty):not(.db-err)) .databind.databind:is([style*="6850"], [data-spec*='"refreshMs":10000']) .db-body,
  html:has([data-node-id="2158:773"]:active) .databind.databind:is([style*="6850"], [data-spec*='"refreshMs":10000']) .db-body,
  html:has([data-node-id="2158:772"]:active) .databind.databind:is([style*="6850"], [data-spec*='"refreshMs":10000']) .db-body {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity .45s ease, transform .45s ease !important;
  }

  /* 揭示后:撤掉等待提示 */
  html:has(.databind:is([data-spec*="2158:773"], [data-spec*='"kind":"counter"']) [data-db-state="submitted"]) .databind.databind:is([style*="6850"], [data-spec*='"refreshMs":10000'])::before,
  html:has(.databind:is([data-spec*="2158:773"], [data-spec*='"kind":"counter"']) .db-note:not(:empty):not(.db-err)) .databind.databind:is([style*="6850"], [data-spec*='"refreshMs":10000'])::before,
  html:has([data-node-id="2158:773"]:active) .databind.databind:is([style*="6850"], [data-spec*='"refreshMs":10000'])::before,
  html:has([data-node-id="2158:772"]:active) .databind.databind:is([style*="6850"], [data-spec*='"refreshMs":10000'])::before {
    content: none !important;
  }

  /* 揭示后:面板底部一行说明 */
  html:has(.databind:is([data-spec*="2158:773"], [data-spec*='"kind":"counter"']) [data-db-state="submitted"]) .databind.databind:is([style*="6850"], [data-spec*='"refreshMs":10000'])::after,
  html:has(.databind:is([data-spec*="2158:773"], [data-spec*='"kind":"counter"']) .db-note:not(:empty):not(.db-err)) .databind.databind:is([style*="6850"], [data-spec*='"refreshMs":10000'])::after,
  html:has([data-node-id="2158:773"]:active) .databind.databind:is([style*="6850"], [data-spec*='"refreshMs":10000'])::after,
  html:has([data-node-id="2158:772"]:active) .databind.databind:is([style*="6850"], [data-spec*='"refreshMs":10000'])::after {
    content: "$2;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    text-align: center;
    font-family: "Actor", "Noto Sans SC", "Noto Sans JP", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #8ab0ee;
    pointer-events: none;
    z-index: 3;
  }
}

/* ===== Submit 的反馈文字:显示在 Submit 正下方(note 由运行时写入) ===== */
html .databind.databind:is([data-spec*="2158:773"], [data-spec*='"kind":"counter"']) {
  display: block !important;
  left: calc(50% - 200px) !important;
  top: 6792px !important;
  width: 400px !important;
  height: 26px !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 4 !important;
}
html .databind.databind:is([data-spec*="2158:773"], [data-spec*='"kind":"counter"']) .db-body {
  display: none !important;
}
html .databind.databind:is([data-spec*="2158:773"], [data-spec*='"kind":"counter"']) .db-note {
  display: block !important;
  margin: 0 !important;
  text-align: center !important;
  font-family: "Actor", "Noto Sans SC", "Noto Sans JP", system-ui, sans-serif !important;
  font-size: 13px !important;
  color: #5789e5 !important;
}
html .databind.databind:is([data-spec*="2158:773"], [data-spec*='"kind":"counter"']) [data-db-state="submitted"] {
  color: #15609e !important;
}
html .databind.databind:is([data-spec*="2158:773"], [data-spec*='"kind":"counter"']) .db-note.db-err {
  color: #b91c1c !important;
}

/* ===== 其余 23 个「只负责写入」的面板:压成 1×1 并隐藏(不依赖它们在不在 .canvas 里) ===== */
html .databind[style*="width:1px"],
html .databind[style*="width: 1px"],
html .databind[style*="height:1px"],
html .databind[style*="height: 1px"],
html .databind[style*="6860"] {
  display: none !important;
}

/* 运行时把 data-db-state="submitted" 设在**提交那个容器自己**身上,所以不能
   写成后代选择器(原来的 .db-note.db-ok 是后代,替换后语义变了 → 永远匹配不上,
   结果就是词云一直藏着)。这条覆盖全部情况:画布里有任意一条已提交就揭示。 */
.canvas:has(.databind[data-db-state="submitted"]) .databind[style*="6850"] .db-body { opacity: 1 !important; transform: none !important; }
.canvas:has(.databind[data-db-state="submitted"]) .databind[style*="6850"]::before,
.canvas:has(.databind[data-db-state="submitted"]) .databind[style*="6850"]::after { content: none !important; }

/* ===== 结果揭示(第二版):点一下 Submit 就揭晓,而且松手后保持 =====
   旧版两个坑,正好解释了「点了 Submit 还是看到 Answer the three questions above」:
   (1) 揭示绑在 :active 上 —— 只有按住的那一瞬间有效,松手就撤销;
   (2) 等待提示用 content:none 撤掉 —— content 不参与过渡,松手瞬间就弹回来。
   现在改成「按住即切换、松手不回头」的 CSS 闩锁:
   · 切换发生在 :active 期间,transition:none —— 按下瞬间完成,不需要按多久;
   · 未揭示状态的过渡拉长到 100000s —— 松手后每帧只回退百万分之几,视觉上永久保持(本次浏览内);
   · 提示文字改用 opacity 参与同一套过渡;
   · Submit 面板只要出现任何提示(成功 db-ok / 报错 db-err)也永久揭示,刷新后仍保持;
   · 结果区留一行兜底文案,数据运行时有异常也不会是一片空白。 */
@supports selector(:has(*)) {
  /* ① 默认:结果面板只占位(用 opacity 隐藏,canvas 始终有真实尺寸) */
  :root:root .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"]) .db-body {
    opacity: 0 !important;
    transform: translateY(6px) !important;
    transition: opacity 100000s linear, transform 100000s linear !important;
    pointer-events: none !important;
  }
  :root:root .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"])::before {
    content: "Answer the three questions above, then click Submit to reveal everyone's answers.";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 60px;
    text-align: center;
    font-family: "Actor", "Noto Sans SC", "Noto Sans JP", system-ui, sans-serif;
    font-size: 19px;
    line-height: 1.5;
    color: #5789e5;
    opacity: 1;
    transition: opacity 100000s linear;
    z-index: 2;
  }
  /* ② 按住 Submit(胶囊 2158:772 / 文字 2158:773)的瞬间立刻揭示,松手不回弹 */
  html:has(:is([data-node-id="2158:773"], [data-node-id="2158:772"]):active) .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"]) .db-body {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html:has(:is([data-node-id="2158:773"], [data-node-id="2158:772"]):active) .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"])::before {
    opacity: 0 !important;
    transition: none !important;
  }
  /* ③ Submit 面板留下任何提示(成功或失败)都永久揭示,并撤掉等待提示 */
  html:has(.databind:is([style*="6790"], [data-spec*="2158:773"], [data-spec*="submitted"]) .db-note:not(:empty)) .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"]) .db-body {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html:has(.databind:is([style*="6790"], [data-spec*="2158:773"], [data-spec*="submitted"]) .db-note:not(:empty)) .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"])::before {
    content: none !important;
    opacity: 0 !important;
  }
  /* ④ 兜底文案:结果面板里连 canvas 都没有(数据运行时异常)时,至少说明情况 */
  :root:root .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"]) .db-body:empty::after {
    content: "No answers to show yet — the choices you pick above will gather here as a word cloud.";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    text-align: center;
    font-family: "Actor", "Noto Sans SC", "Noto Sans JP", system-ui, sans-serif;
    font-size: 16px;
    color: #8ab0ee;
  }
}
/* ⑤ 提交反馈文字:成功用主色,报错保持红色(一眼分辨「已提交」还是「后端拒绝」) */
html .databind.databind:is([data-spec*="2158:773"], [data-spec*="submitted"]) [data-db-state="submitted"] { color: #15609e !important; }
html .databind.databind:is([data-spec*="2158:773"], [data-spec*="submitted"]) .db-note.db-err { color: #b91c1c !important; }

/* 运行时把 data-db-state="submitted" 设在**提交那个容器自己**身上,所以不能
   写成后代选择器(原来的 .db-note.db-ok 是后代,替换后语义变了 → 永远匹配不上,
   结果就是词云一直藏着)。这条覆盖全部情况:画布里有任意一条已提交就揭示。 */
.canvas:has(.databind[data-db-state="submitted"]) .databind[style*="6850"] .db-body { opacity: 1 !important; transform: none !important; }
.canvas:has(.databind[data-db-state="submitted"]) .databind[style*="6850"]::before,
.canvas:has(.databind[data-db-state="submitted"]) .databind[style*="6850"]::after { content: none !important; }

/* ===== 投票「选了却没有结果」的三处加固 ===== */

/* ① 胶囊矩形只当视觉底，不再抢点击：
      投票脚本把 click 绑在「文字节点」上（2157:507… / 2158:773）。
      把胶囊设成 pointer-events:none 后，点在按钮任意位置都必然落到文字节点，
      每一票都能被脚本接到（之前如果点到胶囊边缘，只会变蓝、票不会记录）。 */
.canvas [data-node-id='2157:510'], .canvas [data-node-id='2157:512'], .canvas [data-node-id='2157:518'],
.canvas [data-node-id='2157:524'], .canvas [data-node-id='2157:530'], .canvas [data-node-id='2157:550'],
.canvas [data-node-id='2157:553'], .canvas [data-node-id='2157:556'], .canvas [data-node-id='2157:584'],
.canvas [data-node-id='2157:590'], .canvas [data-node-id='2157:596'], .canvas [data-node-id='2157:602'],
.canvas [data-node-id='2157:605'], .canvas [data-node-id='2157:587'], .canvas [data-node-id='2157:593'],
.canvas [data-node-id='2157:599'], .canvas [data-node-id='2157:678'], .canvas [data-node-id='2157:684'],
.canvas [data-node-id='2157:690'], .canvas [data-node-id='2157:696'], .canvas [data-node-id='2157:699'],
.canvas [data-node-id='2157:681'], .canvas [data-node-id='2157:687'], .canvas [data-node-id='2157:693'],
.canvas [data-node-id='2158:772'] {
  pointer-events: none !important;
}

/* ② 文字节点铺满胶囊并置顶（配合 ①） */
.canvas [data-node-id='2157:507'], .canvas [data-node-id='2157:513'], .canvas [data-node-id='2157:519'],
.canvas [data-node-id='2157:525'], .canvas [data-node-id='2157:531'], .canvas [data-node-id='2157:551'],
.canvas [data-node-id='2157:554'], .canvas [data-node-id='2157:557'], .canvas [data-node-id='2157:585'],
.canvas [data-node-id='2157:591'], .canvas [data-node-id='2157:597'], .canvas [data-node-id='2157:603'],
.canvas [data-node-id='2157:606'], .canvas [data-node-id='2157:588'], .canvas [data-node-id='2157:594'],
.canvas [data-node-id='2157:600'], .canvas [data-node-id='2157:679'], .canvas [data-node-id='2157:685'],
.canvas [data-node-id='2157:691'], .canvas [data-node-id='2157:697'], .canvas [data-node-id='2157:700'],
.canvas [data-node-id='2157:682'], .canvas [data-node-id='2157:688'], .canvas [data-node-id='2157:694'],
.canvas [data-node-id='2158:773'] {
  pointer-events: auto !important;
  z-index: 6 !important;
}

/* ③ 把投票状态提示做成醒目横幅（写在结果面板顶端）：
      蓝底 = 服务器已记录这一票；红底 = 服务器拒绝了这次写入（红字内容就是报错原因）。 */
html .databind.databind[style*='6850'] .db-note:not(:empty) {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  padding: 8px 14px !important;
  text-align: center !important;
  font-family: 'Actor', 'Noto Sans SC', 'Noto Sans JP', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: #7f1d1d !important;
  background: #fef2f2 !important;
  border-bottom: 2px solid #dc2626 !important;
  border-radius: 8px 8px 0 0 !important;
  z-index: 9 !important;
}
html .databind.databind[style*='6850'] [data-db-state="submitted"] {
  color: #15609e !important;
  background: #eaf1ff !important;
  border-bottom-color: #5789e5 !important;
}

/* ⑤ 结果区底部那行说明改成会读状态的提示：空 = 服务器还没有票。 */
html:root:root:root .databind.databind:is([style*='6850'], [data-spec*='refreshMs":10000'])::after {
  content: '$2 !important;
}

/* 运行时把 data-db-state="submitted" 设在**提交那个容器自己**身上,所以不能
   写成后代选择器(原来的 .db-note.db-ok 是后代,替换后语义变了 → 永远匹配不上,
   结果就是词云一直藏着)。这条覆盖全部情况:画布里有任意一条已提交就揭示。 */
.canvas:has(.databind[data-db-state="submitted"]) .databind[style*="6850"] .db-body { opacity: 1 !important; transform: none !important; }
.canvas:has(.databind[data-db-state="submitted"]) .databind[style*="6850"]::before,
.canvas:has(.databind[data-db-state="submitted"]) .databind[style*="6850"]::after { content: none !important; }

/* ⑥ 「服务器已记录多少票」这个小计数器（只读探针）：数字+单位，跟页面配色一致。 */
html .databind.databind[style*='6856'] {
  background: #eaf1ff !important;
  border: 1px solid #c3d6f7 !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 14px !important;
}
html .databind.databind[style*='6856'] .db-num {
  font-family: 'Abhaya Libre ExtraBold', 'Noto Sans SC', 'Noto Sans JP', system-ui, sans-serif !important;
  font-size: 18px !important;
  color: #15609e !important;
  white-space: nowrap !important;
}
html .databind.databind[style*='6856'] .db-unit {
  font-size: 13px !important;
  color: #5789e5 !important;
}
html .databind.databind[style*='6856'] .db-note:not(:empty) {
  color: #b91c1c !important;
  font-size: 12px !important;
}
html .databind.databind[style*='6856'] [data-db-state="submitted"] { color: #15609e !important; }
/* ===== 揭示修复:点一下 Submit 就揭晓(去掉对 :has(:active) 动态失效的依赖) =====
   病根:此前唯一「不依赖后端」的揭示触发是 html:has(...:active)。
   部分 Chrome 对 :has() 内部包裹的 :active 不做动态失效 —— 按住 Submit 也不触发。
   (按钮自身变深蓝是直接写在元素上的 :active,失效正常,所以颜色一直好用。)
   现在改成同级兄弟选择器:Submit 文字节点 :active ~ 排在其后的结果面板。
   它的失效机制和按钮变色完全一样,可靠。另外保留 :has() 版本作为兜底。
   揭示后的保持仍靠「极慢回退」(未揭示态 transition 100000s),松手不回弹;
   等待提示用 opacity(可过渡)而不是 content 撤掉,所以不会弹回来。 */
html:root:root:root [data-node-id="2158:773"]:active ~ .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"]) .db-body,
html:root:root:root [data-node-id="2158:772"]:active ~ .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"]) .db-body,
html:root:root:root .canvas > [data-node-id="2158:773"]:active ~ .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"]) .db-body,
html:root:root:root .canvas > [data-node-id="2158:772"]:active ~ .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"]) .db-body,
html:has([data-node-id="2158:773"]:active) .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"]) .db-body,
html:has([data-node-id="2158:772"]:active) .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"]) .db-body {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html:root:root:root [data-node-id="2158:773"]:active ~ .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"])::before,
html:root:root:root [data-node-id="2158:772"]:active ~ .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"])::before,
html:root:root:root .canvas > [data-node-id="2158:773"]:active ~ .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"])::before,
html:root:root:root .canvas > [data-node-id="2158:772"]:active ~ .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"])::before,
html:has([data-node-id="2158:773"]:active) .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"])::before,
html:has([data-node-id="2158:772"]:active) .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"])::before {
  opacity: 0 !important;
  transition: none !important;
}
/* 已投过的访客(Submit 面板留下 db-ok)或服务器已回应:永久揭示,刷新后仍在 */
html:root:root:root:has(.databind:is([style*="6790"], [data-spec*="2158:773"], [data-spec*="submitted"]) .db-note:not(:empty)) .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"]) .db-body {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html:root:root:root:has(.databind:is([style*="6790"], [data-spec*="2158:773"], [data-spec*="submitted"]) .db-note:not(:empty)) .databind.databind:is([style*="6850"], [data-spec*="refreshMs\":10000"])::before {
  content: none !important;
  opacity: 0 !important;
}

/* 运行时把 data-db-state="submitted" 设在**提交那个容器自己**身上,所以不能
   写成后代选择器(原来的 .db-note.db-ok 是后代,替换后语义变了 → 永远匹配不上,
   结果就是词云一直藏着)。这条覆盖全部情况:画布里有任意一条已提交就揭示。 */
.canvas:has(.databind[data-db-state="submitted"]) .databind[style*="6850"] .db-body { opacity: 1 !important; transform: none !important; }
.canvas:has(.databind[data-db-state="submitted"]) .databind[style*="6850"]::before,
.canvas:has(.databind[data-db-state="submitted"]) .databind[style*="6850"]::after { content: none !important; }

/* ===== 「已投过」提示:底部那条改成英文,左上角竖排那条去掉 ===== */

/* ① 只负责写入的行动面板(rect 0×0,排在画布左上角)不再把运行时的提示漏出来 ——
      它们没有宽度,一行中文会被逐字折成一条竖排的字,既读不懂又挡在页角。
      Submit 面板(2158:773)与结果面板(词云)的提示保留,见 ②③。 */
html .databind.databind:not([data-spec*="2158:773"]):not([data-spec*='"kind":"wordcloud"']) .db-note {
  display: none !important;
}

/* ② 运行时把「这一项你已经投过了」写进 .db-note.db-ok,CSS 改不了文本本身:
      把原文缩成 0 号字(仍留在 DOM 里,依赖 :not(:empty) 的判定不受影响),
      再用 ::after 补上英文。报错(.db-err)与「发送中」(.db-wait)保持原样。 */
html:root .databind.databind:is([data-spec*="2158:773"], [data-spec*='"kind":"wordcloud"']) .db-note.db-ok {
  font-size: 0 !important;
}
html:root .databind.databind:is([data-spec*="2158:773"], [data-spec*='"kind":"wordcloud"']) .db-note.db-ok::after {
  content: "You've already submitted this option.";
  font-size: 13px;
  font-family: "Actor", "Noto Sans SC", "Noto Sans JP", system-ui, sans-serif;
}

/* ③ Submit 面板固定在 Submit 按钮正下方(重申一次定位,免得它退回画布左上角、被折成竖排)。 */
html:root .databind.databind[data-spec*="2158:773"] {
  display: block !important;
  left: calc(50% - 200px) !important;
  top: 6792px !important;
  width: 400px !important;
  height: 26px !important;
  overflow: visible !important;
}

/* ④ 结果面板里这条提示是「已记录」而不是报错,按页面配色显示(辅色 #15609E / 浅蓝 #EAF1FF)。 */
html:root .databind.databind[data-spec*='"kind":"wordcloud"'] .db-note.db-ok {
  color: #15609e !important;
  background: #eaf1ff !important;
  border-bottom-color: #5789e5 !important;
}