“你没有如期而至，而这正是怀恋的意义”

版式 CSS 代码

@import url('https://fonts.googleapis.com/css2?family=Nixie+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
 
:root {
    --body-bg: 225, 225, 225;
    --content-bg: var(--global-white-color);
    --bg-opacity: 0.9;
 
    --extra-bg-1: url(https://imagebed.pro/images/Liurd/n2QIoY5r1F.svg);
    --extra-bg-2: url(https://imagebed.pro/images/Liurd/n2QIoY5r1F.svg);
    --extra-bg-3: url(https://imagebed.pro/images/Liurd/n2QIoY5r1F.svg);
    --extra-opacity-1: 0.15;
    --extra-opacity-2: 0.05;
    --extra-opacity-3: 0.05;
 
    --topbar-hover-bg: var(--dark-ui-bg), 0.2;
    --topbar-hover-txt: var(--light-ui-txt);
 
    --user-drop-txt: var(--dark-ui-txt);
 
    --bottombar-bg: var(--dark-ui-bg);
    --bottombar-txt: var(--dark-ui-txt);
 
    --header-title: "SCP 基金会";
 
    --banner-title: "FOUNDATION";
    --banner-subtitle: "当色彩褪去的时候";
 
    --header-height: 3rem;
    --topbar-height: 2.5rem;
    --dropdown-height: var(--topbar-height);
    --banner-height: 25rem;
 
    --header-ui-size: 3rem;
 
    --header-title-size: 1.8rem;
    --topbar-size: clamp(0.8em, calc(0.4rem + 0.8vw), 1em);
    --banner-title-size: clamp(2rem, calc(2rem + 3.5vw), 6rem);
    --banner-subtitle-size: 1rem;
 
    --banner-font: "Nixie One", "Noto Serif SC", Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, serif;
    --header-font: var(--banner-font);
    --title-font: "Outfit", "Noto Sans SC", "Noto Sans TC", Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif;
    --body-font: "Atkinson Hyperlegible", "Noto Sans SC", "Noto Sans TC", Arimo, Verdana, Geneva, sans-serif;
    --ui-font: "Outfit", "Noto Sans SC", "Noto Sans TC", Arimo, Verdana, Geneva, sans-serif;
}
 
#extra-div-1 {
    position: fixed;
    width: 100%;
    height: 25vh;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-image: var(--extra-bg-1);
    background-size: 20rem;
    background-repeat: repeat-x;
    background-position: center;
    opacity: var(--extra-opacity-1);
}
 
#extra-div-2 {
    position: fixed;
    width: 100%;
    height: 50vh;
    bottom: 0;
    left: 0;
    z-index: -2;
    background-image: var(--extra-bg-2);
    background-size: 40rem;
    background-repeat: repeat-x;
    background-position: center;
    opacity: var(--extra-opacity-2);
}
 
#extra-div-3 {
    position: fixed;
    width: 100%;
    height: 100vh;
    bottom: 0;
    left: 0;
    z-index: -3;
    background-image: var(--extra-bg-3);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
    opacity: var(--extra-opacity-3);
}
 
#container {
    display: grid;
    grid-template-columns: minmax(var(--sidebar-width), 1fr)auto 1fr;
    grid-template-rows: auto auto auto auto;
}
 
#extrac-div-1 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--banner-font);
    font-weight: 200;
    width: 100%;
    height: var(--banner-height);
    color: rgb(var(--header-txt));
    order: -1;
}
 
#extrac-div-1::before {
    content: var(--banner-title);
    font-size: var(--banner-title-size);
}
 
#extrac-div-1::after {
    content: var(--banner-subtitle);
    font-size: var(--banner-subtitle-size);
}
 
#header {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    min-width: var(--sidebar-width);
    width: 100%;
    height: fit-content;
    grid-template-columns: var(--header-ui-size) 1fr auto auto;
    grid-template-rows: var(--header-ui-size) calc(var(--banner-height) - var(--header-ui-size)) auto;
    top: calc(0px - var(--banner-height));
    order: -2;
}
 
#search-top-box {
    grid-column: 3 / 4;
    position: fixed;
    right: var(--header-ui-size);
    backdrop-filter: blur(1rem);
}
 
#login-status {
    grid-column: 4 / 5;
    position: fixed;
    right: 0;
    backdrop-filter: blur(1rem);
}
 
#header h1 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: var(--header-height);
    position: static;
}
 
#header h1 a {
    justify-content: flex-start;
    padding: 0;
    padding-left: 0.5rem;
    transition: padding var(--global-duration);
}
 
#header h1 a:is(:hover, :focus) {
    padding-left: 1rem;
    transition: padding var(--global-hover-duration);
}
 
#header h2 {
    display: none;
}
 
#header-extra-div-1 {
    display: none;
}
 
#top-bar {
    grid-column: 1 / 5;
    grid-row: 3 / 4;
    height: auto;
}
 
#top-bar > div > ul {
    flex-direction: column;
    height: auto;
    margin-right: 0;
}
 
#top-bar > div > ul > li {
    flex-basis: unset;
    height: var(--topbar-height);
}
 
#top-bar > div > ul > li > a {
    justify-content: flex-end;
    padding: 0 1rem;
}
 
#top-bar > div > ul > :is(li, li:last-of-type) > ul {
    top: 0;
    left: 100%;
    width: 32em;
    max-width: max-content;
    min-width: auto;
    flex-direction: row;
    flex-wrap: wrap;
}
 
#top-bar > div > ul > li > ul > li {
    width: 50%;
    flex-grow: 1;
}
 
#top-bar > div > ul > :is(li, li:hover, li:focus, li.sfhover, li:focus-within) > ul > li > a {
    box-sizing: border-box;
}
 
#content-wrap {
    display: contents;
}
 
#side-bar {
    max-height: unset;
    overflow-y: auto;
    border: unset;
    box-shadow: 0 0 1.5rem -1rem rgb(var(--global-dark-color));
}
 
#side-bar::after {
    backdrop-filter: blur(1rem);
}
 
#main-content {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    min-height: 100vh;
    box-sizing: border-box;
    margin: 0 auto 15vh;
    padding: 1.5rem;
    box-shadow: 0 0 2.5rem -1rem rgb(var(--global-dark-color));
    position: relative;
    background: rgba(var(--content-bg), var(--bg-opacity));
}
 
#main-content::after {
    content: "控制，收容，保护.";
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 10vh;
    color: rgb(var(--header-txt));
    font-family: var(--banner-font);
    font-weight: 200;
}
 
#page-title {
    padding: 0;
}
 
:is(blockquote, .blockquote, div.blockquote, [class*=blockquote]) {
    padding: 0.5rem 1rem;
    border-width: 0 0 0 0.3rem;
    background: rgba(var(--light-block-bg), 0.4);
}
 
#page-options-container {
    font-family: var(--ui-font);
}
 
#footer {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
    box-sizing: border-box;
    justify-content: flex-end;
    margin-top: 0.5rem;
    border: unset;
}
 
#license-area {
    grid-column: 1 / 4;
    grid-row: 4 / 5;
    padding: 0.5rem;
    justify-content: flex-end;
}
 
#license-area a {
    color: rgb(var(--global-pale-color));
}
 
@media only screen and (max-width: 1024px) {
  #container-wrap {
    perspective-origin: 49.5% 5rem;
  }
 
  #container {
    display: flex;
  }
 
  #header {
    min-width: var(--sidebar-width);
    grid-template-columns: var(--header-ui-size) 1fr auto auto;
    grid-template-rows: var(--header-ui-size) auto auto;
    top: 0;
    width: initial;
    position: static;
  }
 
  #content-wrap {
    display: block;
    margin: 0;
  }
 
  #login-status {
    position: relative;
    backdrop-filter: unset;
  }
 
  #search-top-box {
    position: static;
    backdrop-filter: unset;
  }
 
  #login-status #account-options {
    left: initial;
    right: 0;
  }
 
  #top-bar > div > ul {
    flex-direction: row;
    margin-right: auto;
  }
 
  #top-bar > div > ul > li {
    flex-basis: min-content;
  }
 
  #top-bar > div > ul > li > a {
    justify-content: center;
    padding: 0;
  }
 
  #top-bar > div > ul > :is(li, li:last-of-type) > ul {
    top: 100%;
    left: 0;
    width: auto;
    flex-direction: column;
  }
 
  #top-bar > div > ul > li:last-of-type > ul {
    left: initial;
    right: 0;
  }
 
  #top-bar > div > ul > li > ul > li {
    width: 100%;
    flex-grow: 1;
  }
}
 
@media only screen and (max-width: 768px) {
    #top-bar > div > ul > :is(li, li:last-of-type) > ul {
        flex-direction: row;
    }
    #top-bar > div > ul > li > ul > li {
        width: 50%;
    }
}

项目编号：SCP-CN-1820

项目等级：Euclid

特殊收容措施：SCP-CN-1820的所有数字副本应被储存在Area-CN-07的隔离服务器阵列中，物理访问权限需出示3级及以上安保许可权限。任何非测试目的的访问请求必须提交书面申请并获得至少两名3级人员批准。所有针对SCP-CN-1820的测试需在心理部门监督下进行，受试者在测试后须接受A级记忆消除。

描述：SCP-CN-1820是一组共计37张数字图像文件，其视觉风格高度符合21世纪初期流行的Frutiger Aero美学范式。这些图像通常描绘了包含广阔蓝天白云、玻璃质感用户界面、半透明气泡、繁茂的室内植物与水族景观、充满未来感的城市天际线与自然景观融合的场景。以现今视角审视，SCP-CN-1820所载内容往往显得过分浮夸与不切实际，且制作水平粗糙，极易被辨识出是由计算机合成的图像。

SCP-CN-1820的异常效应在出生于公元1990年至2000年之间的人类个体（通常被称为“千禧世代”）观察图像时显现。受试者会体验到一段清晰、详尽且充满情感共鸣的记忆，内容关乎他们在一个类似于图像所描绘的世界中生活过的童年经历。这些记忆对于受试者本人而言真实不虚，尽管它们与客观历史记录严重不符，且有充足证据支撑证明其并不存在。这些被植入的记忆通常包含以下特征：

• 高度发达的科技水平，但发展路径与现实迥异，且包含明显全无理论依据却依然能正常运作的异常技术。常见元素包括普及的透明显示屏、无缝融合AR技术的日常生活、无可见介质的反重力系统、取之不竭的高效清洁能源、基于生态学的反透视城市设计以及温和无害的人工智能。

• 受试者能够回忆起在该环境中具体的生活片段与细节，例如使用某种特定的手势界面操作设备，在充满植物的生态建筑中学习或工作，乘坐静音且无污染的公共交通工具穿越丛林城市等。

• 几乎所有受试者在回忆结束后，皆会表现出强烈的怀旧和忧郁情绪。对象普遍坚信人类文明曾一度达到或接近这种和谐乐观、科技与自然共存的未来，但随后因未知原因倒退至当前状态。这种认知会持续导致一种独特的失落感，使受试者在日常生活在对身边事物产生抵触。

SCP-CN-1820的起源目前未知。首次引起基金会注意是在2036年，当时多个社交媒体平台上出现传播该组图像的流行趋势，并引起小规模讨论热潮，用户均声称记得一个未曾存在过的、更美好的时代。基金会随后介入调查，通过网络爬虫销毁所有媒体上的SCP-CN-1820副本，并对事件相关人士进行记忆消除。

附录SCP-CN-1820：测试记录

测试1

---

SCP-CN-1820-05

受试者：D-81467

受试者陈述：

中央转运站……我小时候每天上学都要经过这里。空气总是带着一股雨后和臭氧混合的味道，非常清新。我们的通勤卡是嵌入腕带里的生物芯片，走过闸机时，旁边的水幕会泛起一圈涟漪，显示你的行程信息。我记得有一次我的芯片没电了，站务员——是一个很友好的AI助手——只是笑了笑，用他发光的手指点了下我的手腕，就帮我充好了。他说“为了共同的未来”。这不是口号，那时我们真的相信。现在？我们连公交车准时都做不到。我们到底失去了什么？

测试2

---

SCP-CN-1820-16

受试者：D-36151

受试者陈述：

这让我想起了我大学时的公共休息室。我们叫它“穹顶”。看到这些漂浮的屏幕了吗？我们用它来查看全球氧气产量和海洋健康指数，就像看天气一样平常。我记得下午没课的时候，我会坐在那些苔藓椅上，看着窗外的个人飞行器悄无声息地滑过，声音就像风吹过树叶。一切都那么……通透，充满希望。我们现在怎么会变成这样？到处都是灰色的混凝土和闪烁的广告屏。我们明明拥有过更好的。

测试3

---

SCP-CN-1820-23

受试者：D-54603

受试者陈述：

我养过鱼。那是我小学五年级，期末考了双百，我爸妈送给我的奖励。不，它不是屏保，它是键盘精灵。它一开始只是一条小小的、发着蓝光的数字鱼，在屏幕里游来游去。但如果你连续一周都按时完成作业，它的等级就会提升。然后，对，它就能从屏幕里“游”出来了。

是真的游出来！它会像一枚小小彗星，从显示屏正中央跃出，落在我的键盘上。这使我对网络冲浪的含义有了更进一步的认识。它只有我的手掌那么大，在键盘按键之间啪嗒啪嗒地蹦跳，身体是半透明的，能看见里面流动的光点，每次弹跳都会溅起凉丝丝的水花，但那些水花一离开它的身体就化作光点消失了，不会打湿任何东西。它高兴的时候，会吐出一连串的泡泡，那些泡泡会慢悠悠地飘起来，在碰到台灯罩的时候啵地一声轻轻破掉，留下一股淡淡的，像是雨后空气和海盐的味道。

谁家没有一个这样的小宠物呢？它会陪我写作业，在我烦恼的时候用湿漉漉的光尾巴蹭我的手指……后来不知道从什么时候起，它就不见了。也许，也许是一次系统升级后，不再兼容了？