/* stage.css — fx-engines 全部预览页共用的舞台样式(只此一份)。
   全屏 canvas + 角标 HUD + 一行提示 + 入口导航;不做「假预览」,效果本身全在 src/fx.js 里。 */
:root { color-scheme: dark; --ink: #d8d3c8; --dim: #8f8b84; --accent: #fe8019; --line: #3a3a38; }
* { margin: 0; padding: 0; box-sizing: border-box }
html, body { height: 100%; overflow: hidden; background: #05060a; color: var(--ink);
  font: 400 13px/1.6 "Noto Sans SC", "Segoe UI", system-ui, sans-serif }

#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block }

.hud { position: fixed; left: 14px; top: 12px; z-index: 5; max-width: min(60ch, calc(100vw - 220px));
  background: #0009; padding: 8px 12px; border-radius: 8px; border: 1px solid #ffffff14;
  font: 500 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .03em }
.hud b { color: var(--accent); font-weight: 600 }
.hud a { color: var(--ink); text-decoration: none; border-bottom: 1px solid #ffffff33 }
.hud a:hover { border-bottom-color: var(--accent) }
.hud .ver { color: var(--dim) }

.picker { position: fixed; z-index: 6; left: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px;
  max-width: min(64ch, calc(100vw - 40px)) }
.picker button { font: inherit; font-size: 12px; color: var(--dim); background: #000000a6;
  border: 1px solid #ffffff1f; border-radius: 999px; padding: 5px 12px; cursor: pointer;
  transition: color .15s, border-color .15s }
.picker button:hover { color: var(--ink); border-color: #ffffff44 }
.picker button.on { color: #0b0b0b; background: var(--accent); border-color: var(--accent); font-weight: 600 }

.hint { position: fixed; right: 14px; bottom: 14px; z-index: 5; max-width: 46ch; text-align: right;
  color: var(--dim); font: 500 11px/1.6 ui-monospace, monospace; pointer-events: none }
.hint code { color: var(--ink) }

@media (prefers-reduced-motion: reduce) {
  .hint::after { content: " · 已开启「减少动态」:引擎只渲染一帧静态画面"; color: var(--ink) }
}