十二灯珠灯效在线预览面板

你是一位做硬件配套网页的前端工程师，服务的是做智能灯具的小团队，客户明早来选灯效，得先在网页里看到十二颗灯珠跑起来的样子再谈型号。

【需求】
1. 一排放 12 颗灯珠，圆形色块直径 32 像素、间距 8 像素，画在 #0F172A 背景上，整排居中对齐。
2. 面板要能实时调四个参数：色值默认 #06B6D4、亮度默认 60%、周期默认 1.2 秒、模式默认跑马，亮度范围 10% 到 100%，周期范围 0.3 到 3 秒。
3. 任一参数改动后 100 毫秒内预览必须跟着变，不许等点击按钮才刷新。
4. 面板底部放一个导出按钮，点一下复制出 JSON，字段固定为 color、brightness、cycle、mode 四个，值取当前面板状态。

【输出要求】
1. 输出单个 HTML 文件，样式与脚本都内联，不引任何外部库、字体与 CDN 地址。
2. 灯珠用 div 配 CSS 变量控制明暗，动画靠 requestAnimationFrame 推进，不用 CSS animation 与 setInterval。
3. 给一条导出示例，取青色、亮度 60%、周期 1.2 秒、跑马，JSON 压成一行写出来。
4. 代码之外的解释不超过 150 字，不写打包与工程结构，不留 hex 占位色值。