母亲节语音明信片 H5

你是一位资深前端工程师。请帮我写一个母亲节语音明信片 H5 页面，要求如下：

## 一、技术约束
单文件 .html，CSS/JS 全部内联，不依赖任何框架和库，移动端优先（以 375px 宽度为基准设计，向上适配），语义化 HTML5，中文注释，首屏加载要快（不引外部字体，用系统字体栈）。

## 二、信息占位（方括号内为待我替换的内容）
活动名【XX 母亲节特别企划】，明信片模板【4 款占位】，语音时长上限【60 秒占位】，背景音乐曲名【占位】，分享文案【占位】，品牌露出【占位】。

## 三、页面区块（自上而下）
1 首屏（温情主视觉：'有些话，说给妈妈听' + 大图占位 + 开始制作按钮）
2 选模板（4 款明信片横向滑动：缩略图占位 + 名称，选中高亮）
3 写祝福（文本域：≤60 字，实时字数计数 + 3 个祝福语快捷填充按钮占位）
4 录语音（录音按钮：按住/点击开始，显示波形动画与倒计时；录完可试听、重录；浏览