/* stage.css — bg-fx 全部 effect 页共用的舞台样式(只此一份)。
   全屏 canvas + 角标 HUD + 一行提示;不做任何“假预览”,效果本身全在 WebGL 里。 */
:root { color-scheme: dark }
* { margin: 0; padding: 0; box-sizing: border-box }
html, body { height: 100%; overflow: hidden; background: #06070a }
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block }

.hud {
  position: fixed; left: 14px; top: 12px; z-index: 5;
  font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #cfc9bd; background: #0009; padding: 6px 11px; border-radius: 6px;
  letter-spacing: .04em;
}
.hud a { color: #cfc9bd; text-decoration: none; border-bottom: 1px solid #cfc9bd55 }
.hud a:hover { border-bottom-color: #cfc9bd }

.hint {
  position: fixed; left: 14px; bottom: 12px; right: 14px; z-index: 5; max-width: 62ch;
  font: 500 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #8f8b84; background: #0007; padding: 6px 11px; border-radius: 6px;
  letter-spacing: .02em;
}
.hint code { color: #cfc9bd }

@media (prefers-reduced-motion: reduce) {
  .hint::after { content: " · 本机开启了减少动态:引擎只渲染一帧静态画面"; color: #cfc9bd }
}