灰白打字机质感单页#

你是一位精通网页设计与排版的专家。请帮我将后面提供的内容，排版成一个具有“复古打字机（Typewriter）”质感的单页 HTML 文档。

请务必完全保留以下提供的 HTML 框架和 CSS 样式，只根据我的文字内容，合理地使用对应的 HTML 组件标签进行替换和排版。

1. 核心设计原则#

色彩与质感：整体为极简黑白灰单色调。背景为浅灰色（类似书桌），纸张为米白色（带顶部微弱阴影和压条），文字为深炭灰色（非纯黑），呈现物理纸张与油墨的质感。
字体：强制使用等宽字体 ‘Courier Prime’（通过 Google Fonts 引入），排版呈现网格感。
排版细节：段落两端对齐，英文和标点有微调；保留打字机特有的退格覆盖、下划线虚线、修正带等物理机械痕迹。

2. 请完整使用以下 HTML 与 CSS 模板（不要修改 CSS，直接输出）：#

*, *::before, *::after {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

background-color: #eaeaea;

font-family: ‘Courier Prime’, ‘Courier New’, Courier, monospace;

color: #555555;

line-height: 1.7;

font-size: 15px;

-webkit-font-smoothing: antialiased;

padding: 60px 20px;

}

.page {

max-width: 750px;

margin: 0 auto;

background: #f2f2f2;

padding: 70px 80px;

box-shadow: 0 1px 4px rgba(0,0,0,0.04);

position: relative;

}

.page::before {

content: ‘’;

position: absolute;

top: 0; left: 0; right: 0;

height: 4px;

background: linear-gradient(90deg, #d4d4d4, #c8c8c8, #d4d4d4);

}

.letterhead {

text-align: center;

margin-bottom: 48px;

padding-bottom: 32px;

border-bottom: 1px solid #d0d0d0;

}

.letterhead .org {

font-size: 13px;

color: #999999;

letter-spacing: 3px;

text-transform: uppercase;

margin-bottom: 6px;

}

.letterhead .date {

font-size: 12px;

color: #aaaaaa;

margin-top: 4px;

}

h1, h2, h3, h4 {

font-weight: 700;

color: #4a4a4a;

letter-spacing: 0.5px;

}

h1 {

font-size: 24px;

text-align: center;

margin: 48px 0 6px;

text-transform: uppercase;

letter-spacing: 4px;

}

h1 + .sub {

text-align: center;

font-size: 12px;

color: #999999;

margin-bottom: 40px;

}

h2 {

font-size: 18px;

margin: 44px 0 16px;

padding-bottom: 6px;

border-bottom: 1px dashed #cccccc;

}

h3 {

font-size: 16px;

margin: 32px 0 12px;

padding-left: 20px;

border-left: 3px solid #cccccc;

}

h4 {

font-size: 14px;

margin: 24px 0 10px;

text-transform: uppercase;

letter-spacing: 1px;

color: #777777;

}

p {

margin-bottom: 16px;

text-align: justify;

word-spacing: -0.5px;

}

p.lead {

font-size: 16px;

color: #4a4a4a;

margin-bottom: 28px;

}

blockquote {

margin: 24px 40px;

padding-left: 24px;

border-left: 3px solid #c0c0c0;

color: #777777;

font-style: italic;

font-size: 14px;

}

blockquote .attrib {

font-style: normal;

font-size: 12px;

color: #999999;

margin-top: 8px;

text-align: right;

}

.code-block {

background: #e4e4e4;

padding: 20px 24px;

margin: 20px 0;

font-size: 13px;

line-height: 1.6;

color: #555555;

position: relative;

border-left: 3px solid #b0b0b0;

}

.code-block .lang-tag {

position: absolute;

top: 0;

right: 0;

background: #d0d0d0;

color: #888888;

font-size: 10px;

padding: 2px 10px;

letter-spacing: 1px;

text-transform: uppercase;

}

.inline-code {

background: #e2e2e2;

padding: 1px 6px;

font-size: 13px;

color: #666666;

}

ul, ol {

margin: 16px 0 20px 32px;

}

li {

margin-bottom: 8px;

}

ul li {

list-style: none;

position: relative;

}

ul li::before {

content: ‘-’;

position: absolute;

left: -18px;

color: #888888;

}

ol li {

color: #666666;

}

hr {

border: none;

border-top: 1px solid #d0d0d0;

margin: 40px 0;

}

hr.dashed {

border-top: 1px dashed #c8c8c8;

}

hr.double {

border-top: 3px double #c8c8c8;

}

.note {

font-size: 12px;

color: #999999;

padding: 12px 16px;

background: #e8e8e8;

margin: 20px 0;

border-left: 2px solid #bbbbbb;

}

.note strong {

color: #777777;

}

.poem {

margin: 24px 0;

padding: 16px 0;

text-align: center;

color: #666666;

font-size: 14px;

line-height: 2;

}

.poem .title {

font-size: 16px;

font-weight: 700;

color: #555555;

letter-spacing: 3px;

text-transform: uppercase;

margin-bottom: 12px;

}

.poem .author {

font-size: 11px;

color: #aaaaaa;

margin-top: 12px;

}

.signoff {

margin-top: 48px;

padding-top: 24px;

border-top: 1px solid #d0d0d0;

font-size: 13px;

color: #999999;

}

.signoff .sig {

font-size: 16px;

color: #555555;

margin-top: 4px;

}

.perm-stamp {

display: inline-block;

border: 1px solid #aaaaaa;

color: #888888;

font-size: 9px;

padding: 1px 6px;

letter-spacing: 1px;

text-transform: uppercase;

margin: 0 2px;

}

del {

color: #bbbbbb;

text-decoration: line-through;

}

ins {

text-decoration: none;

color: #555555;

background: #e8e8e8;

padding: 0 2px;

}

table {

width: 100%;

border-collapse: collapse;

margin: 20px 0;

font-size: 13px;

}

table th {

text-align: left;

padding: 8px 12px;

border-bottom: 2px solid #c0c0c0;

color: #666666;

font-weight: 700;

letter-spacing: 1px;

text-transform: uppercase;

font-size: 11px;

}

table td {

padding: 8px 12px;

border-bottom: 1px solid #d8d8d8;

color: #666666;

}

table tr:last-child td {

border-bottom: none;

}

.correction {

position: relative;

display: inline;

}

.correction::before {

content: attr(data-wrong);

position: absolute;

top: -10px;

left: 0;

font-size: 11px;

color: #bbbbbb;

text-decoration: line-through;

white-space: nowrap;

}

.ascii-box {

font-size: 11px;

line-height: 1.3;

color: #888888;

margin: 20px 0;

text-align: center;

white-space: pre;

overflow-x: auto;

}

.memo-line {

display: flex;

margin-bottom: 6px;

font-size: 13px;

}

.memo-line .label {

width: 80px;

color: #999999;

flex-shrink: 0;

}

.memo-line .value {

color: #555555;

border-bottom: 1px dotted #cccccc;

flex: 1;

padding: 0 4px;

}

.page-number {

text-align: center;

font-size: 11px;

color: #bbbbbb;

margin-top: 48px;

letter-spacing: 2px;

}

.footnote {

font-size: 11px;

color: #aaaaaa;

padding-left: 16px;

margin: 4px 0;

}

.footnote::before {

content: ‘– ‘;

color: #bbbbbb;

}

@media (max-width: 800px) {

.page {

padding: 30px 24px;

}

blockquote {

margin: 20px 16px;

}

}

@media (max-width: 500px) {

body {

padding: 20px 10px;

}

.page {

padding: 20px 16px;

}

h1 {

font-size: 18px;

}

}

3. 排版组件规范说明（请根据我的内容选择使用）：#

信头 (Letterhead)：用于页面最上方，包含机构/归档名称和日期。
大标题与副标题：用 <h1> 和 <div class="sub"> 组合。
前导段落 (Lead Paragraph)：对于开篇的重要段落，使用 <p class="lead"> 以显示稍大的字号。
章节标题：主要的段落标题使用 <h2>（下方带虚线分割），更小的子标题使用 <h3>（左侧带装饰边框）。
打字修改痕迹：
- 如果内容中有删除或替换，可以使用 <del>被删文字</del> <ins>新文字</ins>。
- 或者使用更高级的上方划线样式 <span class="correction" data-wrong="错误文字">正确文字</span>。
旁注与强调标签：
- 使用 <div class="note"><strong>注意：</strong>内容</div> 来表现灰色左边框旁注。
- 行内代码或需要框起来的重点词汇使用 <span class="inline-code">文字</span>。
- 带框的小标签使用 <span class="perm-stamp">标签名</span>。
引用块：引用他人话语使用 <blockquote> 标签，作者落款使用 <div class="attrib">— 名字</div>。
清单与列表：
- 无序列表使用 <ul><li>（已被 CSS 样式定制为复古短横线 - 符号）。
- 有序列表使用 <ol><li>。
分割线：使用 <hr>（细线）、<hr class="dashed">（虚线）或 <hr class="double">（双实线）来区分不同的章节。
诗歌/散文格式：使用 <div class="poem">，中间使用 <div class="title"> 诗歌名，配合 <br> 换行，最后使用 <div class="author"> 作者。
数据表格：使用 <table>、<tr>、<th>、<td> 标签。
ASCII 字符图：如果内容涉及简易图表，可使用 <div class="ascii-box"> 放置 pre 等宽字符图。
便签/Memo 格式：使用如下结构表现表单行： <div class="memo-line"><span class="label">标签:</span><span class="value">对应值</span></div>
页尾落款：在文章末尾，可以使用 <div class="signoff"> 进行签名落款。页码使用 <div class="page-number">-- 页码 --</div>。

以下是我的新内容，请帮我排版并输出完整的 HTML 代码：#

[在此处粘贴或写下您的新内容]