:root {
  --bg: #faf9f7;
  --fg: #222;
  --font: -apple-system, "PingFang SC", "Microsoft YaHei",
          "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  overflow: hidden;
}

#cloud {
  position: fixed;
  inset: 0;
}

#cloud svg {
  display: block;
  width: 100%;
  height: 100%;
}

#cloud text {
  cursor: pointer;
  user-select: none;
  transform-origin: 0 0;
  transition: opacity .35s ease, fill .25s ease;
}

#cloud text:hover { opacity: .65; }

#cloud.focused text { opacity: .06; }
#cloud.focused text.is-active { opacity: 1; }

/* 压暗的句子不再是可点击目标：光标不再假装"点它会选中它"，
   点击径直到达背景层（= 退出聚焦），与"点任意处退出"的规则一致 */
#cloud.focused text:not(.is-active) { pointer-events: none; }

#focus-speaker {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 10vh;
  margin: 0;
  text-align: center;
  font-size: clamp(.9rem, 2.5vw, 1.4rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease .2s;
}

#focus-speaker.is-visible { opacity: .65; }

#empty {
  position: fixed;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  opacity: .5;
  text-align: center;
  padding: 2rem;
}

/* 必须保留：作者级的 display 会压过浏览器默认的 [hidden]{display:none}，
   没有这一条，空态提示会永远浮在词云之上，JS 的 .hidden 开关完全失效 */
#empty[hidden] { display: none; }

/* max-height/overflow 必须保留：body 的 overflow:hidden 会传播到视口，
   没有这两行，句子一多这个唯一的无 JS 内容通道就会被裁掉且无法滚动 */
#fallback {
  padding: 2rem;
  line-height: 1.9;
  max-height: 100dvh;
  overflow-y: auto;
}

@media (prefers-reduced-motion: reduce) {
  #cloud text, #focus-speaker { transition: none; }
}