- 里 document.documentElement.classList.remove('no-js')
- CSS .aa58320 / .no-js .aa58320 / prefers-reduced-motion
我用 reveal 类在部分区块上。
好，写代码。
关于 favicon：内联 data URI SVG。用金色圆角方块 + "片"字。
og:image 用绝对 https URL：https://pian-ba.cn/og/app-cover.png —— 嗯，规则说"logo 填真实可达图 URL(复用 og:image 或内联 SVG data URI)"。我用 og:image 作为 logo 可能不是方形。为了安全，Organization.logo 用内联 SVG data URI。但 JSON-LD 里放 data URI 是可以的（Google 支持？其实 Google 要求 logo 是可抓取的 URL，data URI 可能不行）。规则明确允许"内联 SVG data URI"，所以我就用它。
不过 JSON-LD 里的 data URI 需要正确的转义。我用一个简单的 SVG data URI。
其实用 og:image 的绝对 URL 更好：https://pian-ba.cn/og-cover.png。但那是占位，可能不存在。规则说"绝不写 /logo.png 幽灵地址"。嗯，但 og:image 也是占位。规则说"复用 og:image"，所以用 https://pian-ba.cn/app-cover.png 与 og:image 一致即可。
我用内联 SVG data URI 更保险，规则明确允许。
好，写。
JSON-LD 的 @id 交叉引用：
- SoftwareApplication @id: "https://pian-ba.cn/app/#software"
- WebSite @id: "https://pian-ba.cn/#website"
- Organization @id: "https://pian-ba.cn/#organization"
- BreadcrumbList @id: "https://pian-ba.cn/app/#breadcrumb"
- FAQPage @id: "https://pian-ba.cn/app/#faq"
- WebPage 也可以加但没要求。规则说包含这 5 个。
SoftwareApplication 可以 publisher 引用 Organization @id。
好，开始正式写。
FAQ 内容（7 条，需与 JSON-LD 逐字一致）：
1. 片吧 App 是免费的吗？
答：基础和浏览功能免费，会员服务另计，具体权益以 App 内「会员权益」页面公示为准。下载与安装本身不收取任何费用，也不需要绑定支付方式即可开始使用。
2. 片吧 App 支持哪些手机系统？
答：Android 8.0 及以上、iOS 14 及以上的手机可以安装。更早的系统版本可能无法完成安装，建议先升级系统或改用网页版访问。
3. 安装包有多大，会不会占很多存储？
答：Android 安装包约 68.4 MB，iOS 版本约 92 MB，首次安装后应用本体通常占用 150 MB 左右。播放缓存按需生成，可以在「设置 - 存储管理」里一键清理。
4. 从第三方渠道下载的安装包能用吗？
答：不建议。请只从本页或官方应用商店获取安装包，第三方渠道的包可能被二次打包，存在隐私与账号风险。核对开发者名称与包名是最快的辨别方式。
5. 片吧 App 会不会读取我的通讯录和相册？
答：不会主动读取。App 只在你要上传头像或保存内容时才申请相册权限，通讯录权限从未申请。所有权限都可以在系统设置里随时关闭，关闭后核心功能不受影响。
6. 新版本多久更新一次，怎么更新？
答：通常每 4 到 6 周发布一个功能版本，紧急修复会随时推送。App 内「设置 - 关于」有检查更新入口，也可以在应用商店开启自动更新。
7. 用起来有问题，去哪里反馈？
答：可以在 App 内「设置 - 意见反馈」直接提交，也可以发邮件到页面底部的客服邮箱。带截图和机型的反馈通常处理更快，工作日一般 1 到 2 天内回复。
嗯，第 5 条说"通讯录权限从未申请"——这是个具体断言，合理。
JSON-LD 里要逐字一致。好。
现在，写吧。注意篇幅。
开始编写完整 HTML。
对于"三类典型需求"：
1. 通勤碎片时间看短片的人 —— 具体场景 + 量化好处
2. 想按主题系统补片的人 —— 片单/收藏
3. 家里大屏/投屏看的人 —— 投屏
demo-chat 示例：
用户："我想找 90 分钟以内、适合下班后看的国产剧情片，有推荐吗？"
回复："在片吧里可以这样筛：内容分区 → 电影 → 时长选「90 分钟以内」，地区选「中国大陆」，类型勾「剧情」。按这个条件当前能筛出约 40 部，其中近三年上线的占三分之一。想省事的话直接看「片单」里的《下班后 90 分钟》系列，已经按这个标准整理好了。"
第二轮：
用户："筛完想存下来，下次不用重新选。"
回复："列表右上角有「存为片单」，命名后保存在「我的 - 片单」。之后每次打开直接进这个片单，筛选条件会跟着保留，不用重新勾选。"
好，写。
合作伙伴 Logo 墙：用文字 logo 占位，标注"示例占位"。嗯，合作伙伴要不要写？变体要求"合作伙伴 Logo 墙"。但虚构合作伙伴可能算造假…… 我用一个占位说明，写"以下为合作接入方展示位"，用通用名如"云播科技""星野内容""中辰网络"这类明显的虚构示例。嗯，这有风险。我用更中性的做法：展示"接入能力"而不是具体公司名，比如"CDN 加速""内容分发""播放器内核""账号体系"这些技术合作方向的占位。
变体要求"合作伙伴 Logo 墙"，我就做成"技术与内容合作方向"的文字卡片墙，并注明"合作方名称以官方公示为准，本页仅示意合作方向"。这样既满足板块要求又不造假。好。
开始写完整代码。
CSS 我写得详细一些。
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);background:var(--c-bg);color:var(--c-text);line-height:1.75;font-size:16px}
排版：
h1 { font-size: clamp(2.4rem, 7vw, 5rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.05; }
潮牌感：h1 里"片吧"用金色，"· App"用描边或浅色。
用 片吧 · App
但 H1 文本内容必须是"片吧 · App"原样。加 span 不影响文本内容。好。
不过为了绝对安全，H1 就是：片吧 · App
，内部用 span 包裹"片吧"。文本提取仍是"片吧 · App"。可以。
现在写。
导航：同款结构，但锚点按本页调整。规则要求 3-5 个指向本页 section 的锚点 + 一个首页链接 + 当前项 aria-current="page"。
嗯，首页导航是"立即观看/内容分区/使用指南/常见问题/会员权益/关于我们/App下载"。规则说本页导航要有首页链接 + 3-5 个本页锚点。我用上面这个，视觉同款。
好，现在真正开始写全部代码。
关于移动端导航：用 flex-wrap，小屏时横向滚动。简单处理。
写 CSS 时注意 sticky header 高度约 64px，scroll-padding-top 88px。
开始输出。
细节：`.cut-top` 斜切。我给几个 section 加：
.sec-cut-top {
clip-path: polygon(0 clamp(24px,3.4vw,52px), 100% 0, 100% 100%, 0 100%);
margin-top: calc(-1 * clamp(24px,3.4vw,52px) + 1px);
padding-top: calc(clamp(64px,9vw,110px) + clamp(24px,3.4vw,52px));
}
嗯，margin-top 负值会让它压住上一个 section。这样斜切就"切"进了上一个 section。因为下一个 section 有背景色，效果就是斜切分隔。可行。
但要注意 z-index 和 hover 阴影被裁。可以接受。
我谨慎一点，用较小的斜切量。
好，写。
最后百度推送脚本。
现在输出完整 HTML。我要保证