迷失往事：健壮大舅哥＆冷静妹夫不得言うな故事

版式 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/skyline.svg);
    --extra-bg-2: url(https://imagebed.pro/images/liurd/skyline.svg);
    --extra-bg-3: url(https://imagebed.pro/images/liurd/skyline.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: "Backrooms";
 
    --banner-title: "BACKROOMS";
    --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.8rem, calc(0.4rem + 0.8vw), 1.2rem);
    --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: 24em;
    max-width: max-content;
    min-width: auto;
    flex-direction: row;
    flex-wrap: wrap;
}
 
#top-bar > div > ul > li > ul > li {
    width: 10em;
    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%;
    }
}

一、迷失域中空荡荡
描摹世界轮廓的女神自天堂中醒来，
遥遥望向
二、三神明旧日欢愉
时光的马车向后退走，沉睡于忘川之底的名讳缓缓浮现，
在那被懵懂包裹着的、金与蜜糖锻造的纪元里，
曾存在着克劳狄斯、奥古斯都与古登这三个名字。

古登是蓝海中明媚的姝色，是其余神明心头的明珠，
一袭丝质长袍，包裹着她无暇的肌肤，
微卷的长发如波涛，一朵沾着雨露的玫瑰绽放在发间。
克劳狄斯与奥古斯都是她最为亲近之人，
克劳狄斯是勇武与力量的化身，
他身披银亮重甲，背挂赤红披风，
荣誉与骄傲化身出明艳的丝带，彰显着骑士的荣光；
奥古斯都是高贵尊容的天使，
他秀发如金，周身四处明光葳蕤，
圣洁与优雅幻化做无暇的白羽，孕育出无限的生机。
他们携手，为天真烂漫的女孩筑造了美满的理想乡，
漂浮于世间乱流的险恶被铸铁的盾牌与羽翼阻挡，
留给心爱女孩的只有纯真与幸福。

随时光流逝，金与蜜的纪元中泛出空虚，悲伤与忧郁顺势流入时光，
把几近完满的幸福搅得支离破碎，
迷茫与忧虑爬上古登的面颊，如同积雨的阴云把阳光吞吃殆尽，
她不再欢笑，只盯着虚空的某处愣怔着，枯坐数天。
骑士想要振奋她，为她跳起振舞丝带的舞蹈，但那是无用，
天使想要振奋她，用他天马行空的奇异幻想，但那是徒劳，
他们如暴雨将至时碌碌奔走的蚁虫，
试图挥开阴霾，却未果而终。

灵光一现的骑士将丝带幻化为玩偶，又为女孩斟满琼浆，
幸福绽放，笑容盛开，
女孩跪坐在蓝色的海洋里，摆弄着她的玩具们，
直到有一日，失落再次将女孩包裹。
天使这时走上来，展开的双翼间白羽簌簌而落，
无数如奥古斯都般美貌的生灵由他之手赋生，
女孩被朋友们环绕，清脆的欢笑再次出现在她的脸上。

善良的姑娘不愿平白享受着爱人与兄长的照顾，
她搂着心爱的玩具，看着环绕的伙伴，
只觉得有一处空白未曾填满。
她望着蓝光莹莹的虚空，独自一个人冥思苦想，
终于在决定为她所爱的一切创造一处栖身之所。
她的脑海中显现出万千世界的图景，
从熙熙攘攘的城镇到人迹渺渺的荒野，从浩瀚无垠的大漠到波涛万顷的海洋，
素手挥动间，无数种现实在构想中诞生，
女孩与她所爱的家人们并肩，望着他们的造物与伙伴，
在欢声笑语中，女孩悄悄决定要给予她的爱人一件礼物。

聪颖的女孩凝望虚空，在覆雪之城与陷落之阱之间挑选出一片最为纯净的空间，
她素手轻扬，神思如电，
铅灰色的基石自蓝色汪洋中缓缓浮现。
大地般坚实的基底延伸向空间的尽头，
同色的屋顶撑起天穹，
一堵高墙矗立，是为礼物的包装，

三、古登修补天堂引发争执
四、红骑士与奥古斯都决斗

克劳狄斯身披银甲，金红斗篷随怒火一起燃烧，
他捉着手中的丝带，迎风一抖
优雅的造物幻化作利刃与圆盾，
他左手持盾，右臂持剑挥砍，
一场可怕的厮杀将如暴雨般来袭。

天使瞧着骑士怒火中烧的模样，心下一惊，
一双羽翼向身前围拢，护住自己
他面朝对手，缓缓退后，
如行至山谷，窥见盘踞在狭路中的毒蛇，
他退后一步，看见骑士已将巨剑抗在肩头，
他后退两步，盔甲行进的金属声凿在心口，
苍白色爬上他的脸颊，他已知晓恶战难以避免。

克劳狄斯瞧着他苍白的神色，心中怒气更盛，
将重剑掷在土地里，
大声斥骂奥古斯都：
“你这徒有高尚皮囊的混蛋，自私自利者，
我祈祷你从未出现在这世间，
你应当随风而消散，骨灰流入冥河之中，
被人遗忘，被人抛弃。
无数双眼睛正在看着你，
无数种思维正在藐视你，
无数颗心灵深处正在嘲笑你，
因你仅是徒有其表的小人，
你披上华美的衣衫，裹着昂贵的丝绸，
用外表弥补内心的缺漏。
你偏袒你的妻子，诋毁她的亲人，
只因她是你无能的生命中所能守护的最小单位，
只为满足你的一己私欲。”

奥古斯都这样回应道：
“克劳狄斯，我理解你的想法，
你的意志如同钢铁，坚硬而刚强，
这钢铁锻造出剑刃，带给你一往无前的勇气，
就像镶嵌的宝石，让你的灵魂熠熠生辉。
但请不要曲解我的爱意，
古登是我的妻子，我的挚爱，

这里先想想想什么？这么色情的东西我实在顶不住！

”

听到这番话，克劳狄斯心中郁积的怒火，
便如同火山爆发般喷薄而出。
他不再言语，喉咙中迸发出闷雷般的咆哮，
那柄被插进大地胸膛的阔剑，如今被高擎过头，
带着崩山裂石之力狠狠地斩下，
又在金石碰撞的铿锵声中被奥古斯都格挡，
他们嘶吼着，挥舞剑刃与拳头，
有如好吃生肉的雄狮，或是长牙锋利的角犀，
它们都有充足的力气。
奥古斯都猛扑过去，一拳捣进骑士的铠甲，
拳头扭曲了金属，阻挡了冲锋的对手，
闷哼声从铁盔下流出，黑红的血液向外淌。
克劳狄斯并没有停止战斗，
他借力后退，直到背靠在墙壁上，
用覆盖铁甲的大手捞起一块巨石，
那石头正伫立在墙根，表面粗糙，棱角分明，
克劳狄斯把他掂在手里，横甩过去。
巨石擦过天使的翅膀，撞进地面里，
白色羽毛抖落了一地。
他们纠缠在一起，鏖战了许久许久，
被愤怒蒙蔽了双眼的他们，完全不知道自己正在酿就大祸。

古登眼睁睁看着爱人与兄长扭打在一起，
每一次攻击，每一次格挡，
巨大的冲击力对天堂造成了不可逆转的后果。
“别打了！”女孩尖叫着，
她从没想过，破坏这种平衡会带来这样的后果，
两人的每一下挥砍，都伴随着一道缺口被撕裂，
现实崩塌，以最完美的方式被折叠与切割，
奥古斯都意识到了当时的状况，尝试逃离这里。

他挥动双翼飞上天空，但骑士抓住了他的斗篷，
一道干净利落的挥砍，他切断了天使的双翼，这让他坠落地面，
骑士越过了天使，后者则掉进了其中一道裂缝，
而女孩，什么也做不了，麻痹在了震惊中。
五、奥古斯都身陨落入迷失域
六、未曾送出的礼物成为丈夫的坟冢