/**
 * Anvil 产品页「恶意分析师试过的每一条路，都走不通」一节：六张卡片里示例动画的画布容器。
 *
 * 业务定位：Owner 要求六条路径各配一个示例动画（画面见 page-anvil-paths.js）。这里只管容器占位，
 * 单独成文件而不写进 page-anvil.css，是因为另一位执行者同时在改 page-anvil.css，分开才不互相覆盖。
 *
 * 版式约定：
 *   - 画布紧贴在卡片 .card-head 下面。六张卡的 card-head 都是一行，所以同一行卡片的画布顶边在同一条线上；
 *     画布按卡片内容宽度铺满、比例固定，同一行的画布等大，画面里三栏的横线在相邻卡片之间也对齐；
 *   - 比例用 aspect-ratio 在脚本运行之前就占好位，进场时不发生布局位移（CLS）；六个画布在任一视口宽度下比例相同；
 *   - 平时 4:3。画布窄于约 310px 时改成 1:1：一是卡片还是三栏的 961–1279px 视口（画布约 230–310px 宽），
 *     二是 479px 以下的手机单栏。窄画布上防护栏的说明要折成第二行（见 page-anvil-paths.js 的 chrome()），
 *     4:3 的高度放不下两行字加内容行，只能加高，不能缩字；
 *   - 画布和标题之间的距离与 card-head 到画布的距离相同（22px），卡片里的节奏是等距的。
 */
.axp-viz { aspect-ratio: 4 / 3; margin-bottom: 22px; }
@media (min-width: 961px) and (max-width: 1279px), (max-width: 479px) {
  .axp-viz { aspect-ratio: 1 / 1; }
}