作品集轮播交互
当用户需要修改落地页的项目展示轮播或项目页的图形设计轮播时，使用此技能。如果用户要求使用或参考本技能，请直接实现相应的模式并根据需求调整其内容。
项目背景
本站是一个静态作品集，由 build_site.mjs 生成，共享行为在 site.js 中，样式在 site.css 中。请保持实现与现有架构一致。不要安装 React Bits、添加 React 运行时、配置许可证密钥或复制专有组件。React Bits Prism Carousel 和 Album Rail 仅作为视觉与交互参考。
保留站点现有的调色板、字体和设计令牌。仅轮播请求本身不授权修改它们。保持当前页面内容和路由正常工作，并确保艺术作品完整可见，避免意外裁剪（在艺术作品本身必须保持完整的地方使用包含式图片适配）。
落地页：Prism 风格精选作品
落地页的 #featured 部分以水平居中的矩形封面流方式展示项目。每个项目是一张幻灯片，包含其图片和项目/问题描述，因此它们作为一个整体一起过渡。
- 将一个项目突出显示在中央；将相邻项目显示为逐渐变窄、变小、变暗/去饱和的预览，分布在两侧。
- 导航时，将整个幻灯片（图片和文字）以平滑的封面流过渡移至焦点，并在活动图片上施加一次短暂、克制的光线扫过效果。
- 支持上一页/下一页按钮、直接进度点、水平拖拽/滑动、舞台滚轮滚动以及舞台聚焦时的左/右键盘箭头。在第一和最后一个项目处循环。
- 将居中的图片保持在矩形框架内，并保留其完整构图。将可读的描述文字直接分组在图片下方。
- 维护可访问的标签、焦点可见性、离屏幻灯片的
aria-hidden，以及所选指示器的已宣布/当前状态。防止拖拽意外打开项目链接。 - 在窄屏上，保持图片加描述的关系以及可用控件；减少尺寸和间距，而不是裁剪活动艺术作品。
项目页：专辑条幅风格图形画廊
#ideas 图形设计部分是一个每次显示一张图片的水平扇形/封面流图形设计作品展示。它受 Album Rail 的分层专辑封套启发，但使用本站自己的艺术作品和矩形展示方式。
- 居中一个固定尺寸的矩形图片。将相邻图片以逐渐减小的缩放比例、轻微旋转和较低不透明度扇形分布在两侧；在条幅后方使用柔和的模糊矩形背景。
- 不要添加藤蔓、唱片、黑胶碟或唱片机装饰。也不要将画廊变成一排通用卡片。
- 保持画廊专注于艺术作品。所选项目的标题可以显示其名称和领域/类别；不要为这些画廊项目添加项目描述。
- 每次在舞台滚轮滚动、上一页/下一页按钮、水平拖拽/滑动和左/右键盘箭头上前进一个项目。点击可见的侧边图片可选择它。在集合中循环。
- 将
Limitless排除在此图形画廊之外。其移动UI/UX截图和说明性描述应放在自己专门的区域中，截图作为一个单独的应用设计展示一起显示。 - 保持图片宽高比并在框架内显示完整设计。使条幅具有响应性，但防止幻灯片溢出导致页面级水平滚动。
实施工作流
- 在编辑前检查当前的标记生成器、行为和 CSS。现有入口点为
build_site.mjs（#featured、#ideas和专门的 Limitless 区域）、site.js（[data-prism-carousel]和[data-design-carousel]）以及site.css（.prism-*和.design-*规则）。行号可能变化；请通过这些选择器搜索。 - 只修改请求的轮播或区域。保持数据驱动的项目内容和现有链接；不要将内容重复到硬编码的幻灯片中。
- 保持指针、滚轮、按钮、键盘和点击交互与上述行为一致。避免全局滚动劫持；仅当指针位于轮播舞台上时才捕获滚轮输入。
- 尊重
prefers-reduced-motion，提供可见的键盘焦点，并确保隐藏的幻灯片无法接收焦点或指针输入。 - 当要求验证或预览时，检查桌面和窄屏宽度下的落地页和项目页，包括图片适配、过渡、控件以及独立的 Limitless 区域。