帮我将{输入的文章}生成一个 HTML 动态网页，具体要求是:

• 1.非对称与“破界”网格布局(Asymmetrical& Broken Grid Layout)，打破传统的、对称的、规规矩矩的网格系统，采用非对称布局，让元素之间相互重叠、穿插，创造出动感和视觉张力。
• 2.元素重叠: 文字压着图形，不能遮挡文字。中英文混用，中文大字体粗体，英文小字作为点缀。
• 3.模仿 apple 官网的艺术设计，采用{像素艺术 (Pixel Art)/8位机风格(8-bit)}，{纯黑色}底配合渲染模块的{宫殿绿色}作为高亮
• 4.不规则对齐: 元素不严格按照水平或垂直线对齐。
• 5.视觉引导: 通过布局引导用户的视线，形成独特的阅读流。
• 6.HTML 结构: 通常有一个包裹容器，内部的元素可以自由摆放。
• 7.CSS 技术:css Grid Layout:这是实现这种布局的最强工具。Grid 提供了强大的二维布局能力，可以轻松定义非对称的网格轨道，并让元素跨越多个网格单元格。
• 8.position: absolute;:与相对定位的父元素(position: relative)结合，可以精确地将某个元素放置在任何位置,实现自由的重叠效果。
• 9.负 margin:一个简单粗暴但有效的方法，通过设置负的 margin 值让元素向外移动，侵入其他元素的空间，实现重叠。
• 10.JavaScript 负责复杂的交互、状态管理和性能优化 (如 Intersection Observer、Three.js)
• 11.避免使用传统官网布局作为全页面设计
• 12.不要省路内容要点
• 13.底色不要为透明
• 14.自检代码中的bug，并对发生bug的地方进行注释，方便我检查
• 15.CSS 和 JavaScript 直接嵌入到 HTML 文件中，将三个文件合并为一个独立的、自包含的网页文件。