Level 335

又大又可怕的版式代码。

/* Random Liminal Greyspace theme made by EpicNecromancer */
 
:root {
   --theme-base: "black-highlighter";
   --theme-id: "liminal-greyspace";
   --theme-name: "Liminal Greyspace Theme";
 
   --white-monochrome: 35, 32, 30;
   --pale-gray-monochrome: 27, 26, 24;
   --light-gray-monochrome: 95, 95, 95;
   --gray-monochrome: 66, 64, 60;
   --black-monochrome: 230, 235, 239;
   --bright-accent: 115, 119, 129;
   --medium-accent: 60, 49, 37;
   --dark-accent: 115, 119, 129;
   --pale-accent: 59, 53, 40;
   --dark-gray-monochrome: 207, 207, 203;
 
   --gradient-header: linear-gradient(to top,
      rgba(--medium-accent), 0.20) 0%,
      rgba(var(--medium-accent)) 100%);
 
    --swatch-menubg-color: var(--gray-monochrome);
    --swatch-menubg-light-color: var(--pale-gray-monochrome);
    --swatch-menubg-medium-color: var(--pale-gray-monochrome);
    --swatch-menubg-medium-dark-color: var(--gray-monochrome);
    --swatch-menubg-dark-color: var(--gray-monochrome);
    --swatch-menubg-black-color: var(--gray-monochrome);
    --swatch-menubg-hover-color: var(--gray-monochrome);
    --swatch-menutxt-dark-color: var(--black-monochrome);
    --swatch-menutxt-light-color: var(--black-monochrome);
    --swatch-border-color: var(--gray-monochrome);
 
   --swatch-headerh1-color: var(--black-monochrome);
   --swatch-headerh2-color: var(--black-monochrome);
   --swatch-topmenu-border-color: var(--pale-gray-monochrome);
   --swatch-topmenu-bg-color: var(--pale-gray-monochrome);
 
   --link-color: 217, 46, 83;
   --hover-link-color: 244, 87, 108;
   --visited-link-color: 147, 109, 115;
   --newpage-color: 195, 94, 44;
 
   --background-gradient-distance: 0rem;
 
   --diagonal-stripes: linear-gradient(transparent 0);
 
    --rating-module-button-color: var(--black-monochrome);
    --rating-module-button-plus-color: var(--gray-monochrome);
    --rating-module-button-negative-color: var(--gray-monochrome);
    --rating-module-button-cancel-color: var(--gray-monochrome);
    --rating-module-button-credit-color: 50, 50, 50;
    --rating-module-text-color: var(--black-monochrome);
    --rating-module-text-hover-color: var(--black-monochrome);
}
 
#skrollr-body {
   background-image:
    radial-gradient(circle, rgb(var(--pale-accent)) 50%, transparent 0);
   background-repeat: repeat;
   background-size: 0.25em 0.25em;
   width: 100%;
   height: 7.5rem;
}
 
/* sd banner colours */
 
.sd-container {
 
   --sd-border:var(--white-monochrome);
 
   --sd-text:222,222,222;
 
   --sd-symbol:var(--sd-text);
 
   --sd-bullets:var(--sd-text);
 
    --sd-symbol: var(--sd-border) !important;
    --sd-symbol-secondary: 255, 255, 255;
 
}
 
#container {
   background-image: radial-gradient(circle, rgb(var(--pale-accent), 0.2) 50%, transparent 0);
   background-size: 0.25em 0.25em;
   background-repeat: repeat;
   background-attachment: fixed;
}
 
#header, #top-bar {
   background-attachment: scroll;
}
 
#header {
   background-image: none;
}
 
#footer{
   color: rgb(var(--gray-monochrome));
}
 
a.newpage {
   background: transparent;
   text-decoration: none
}
 
a.newpage {
   color: rgb(var(--newpage-color))
}
 
#search-top-box-input:hover,
#search-top-box-input:focus {
    background: rgba(var(--gray-monochrome));
}
 
#login-status {
    color: rgb(var(--black-monochrome));
}
 
#login-status a {
    color: rgb(var(--black-monochrome));
}
 
#login-status ul a {
    color: rgb(var(--gray-monochrome));
}
 
#account-topbutton {
    color: rgb(var(--black-monochrome));
}
 
table.wiki-content-table th {
  background-color: rgb(var(--medium-accent)) !important;
  color: rgb(var(--black-monochrome));
  border-color: rgb(var(--black-monochrome));
}
 
.scp-image-block {
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
blockquote {
   background-color:rgb(var(--medium-accent));
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-quote {
   background-color:rgb(var(--medium-accent));
   border-left: 0.5rem solid rgba(var(--gray-monochrome));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.dark-styled-quote {
   background-color:rgb(var(--pale-gray-monochrome));
   border-left: 0.5rem solid rgba(var(--gray-monochrome));
   color:rgb(var(--black-monochrome));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.dark-styled-quote a{
  color: rgb(var(--swatch-menubg-medium-color));
}
 
.darkblock {
   background-color:rgb(var(--medium-accent));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   color: rgb(var(--black-monochrome));
}
 
.lightblock {
   background-color:rgb(var(--gray-monochrome));
   color:rgb(var(--black-monochrome));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.darkerblock {
   background-color:rgb(var(--pale-gray-monochrome));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   color: rgb(var(--black-monochrome));
}
 
.darkblock a {
color: rgb(var(--swatch-menubg-medium-color));
}
 
/* Hovering over a tab */
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background: rgb(var(--gray-monochrome));
    color: rgb(var(--black-monochrome)) !important;
}
 
/* Selected tab */
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected,
.yui-navset .yui-nav .selected:hover,
.yui-navset .yui-navset-top .yui-nav .selected:hover {
    color: rgb(var(--black-monochrome));
}
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em {
    color: rgb(var(--black-monochrome));
}
 
.yui-navset .yui-nav .selected a {
    /* Undoes a color set by wikidot's default layout */
    color: rgb(230, 235, 239) !important;
}
 
#side-bar img {
    filter: invert(calc(230/255));
}

醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒醒

+ 醒了？

你回忆起在你静止不动、毫无生气之前的日子，但你的眼睛只能窥视到自己头骨中漆黑一片。你周围发生的一切已变得毫无意义——外界的噪音和话语混杂成一片没有原因的声音迷雾。人们的触碰与你被麻木感所占据的感觉无从分辨。你试图记住日子，但每次尝试，记忆就像你指间沙漏中不断下落的沙粒一样溜走。每一个流逝的瞬间都融合在一起，变成一个永恒的、沉默的痛苦循环。

你的身体屈服了；所有功能都停止了。一切渐渐淡去，直到你再次醒来，感受到皮肤上的草地。它已经结束了，你现在幸福地睡着了。

醒醒。

生存难度：生存難度：

等级等級 醒醒。

• 醒醒。
• 醒醒。
• 醒醒。

---

翻译者须知：

从 2026 年 5 月 20 日起，后室英文维基开始使用层级等级（后室英文维基），全面替代此组件。最终的结果是，此组件从 component:level-class 变成了 component:old-level-class；而 component:level-class 则被替换成了上述的新组件。

这导致后室英文维基所有使用了生存难度分级组件的页面，都自动更新成另一版本。中文维基不会跟进这一改动，亦不会重命名此组件。译者可以自由选择在翻译过程中应用新版组件，使之与原文相同；也可以继续使用此组件，即不改动 [[include]] 代码。

除了外形有所变化，新组件还新增了 1E-5E 的环境危害分级，并稍微扩展了自定义维度；因此部分页面可能有必要更换为新组件，才能正常显示。请译者自行甄别。

如何使用：

[[include :backrooms-wiki-cn:component:level-class
|class=等级
]]

class 处的可用参数包括以下内容，支持简繁体及英文输入。

English						简体中文						繁體中文
0	1	2	3	4	5	0	1	2	3	4	5	0	1	2	3	4	5
unknown						未知						未知
habitable						宜居						宜居
deadzone						死区						死區
pending						等待分级						等待分級
n/a						不适用						不適用
amended						修正						修正
omega						终结						終結

该组件支持简繁切换，如下方代码所示：

[[include :backrooms-wiki-cn:component:level-class
|lang=cn/tr
|class=等级
]]

在 lang 处选择语言，cn 表示简体中文，tr 表示繁体中文，不填默认选择简体中文。

---

自定义等级

[[include :backrooms-wiki-cn:component:level-class
|lang=cn/tr
|class=等级名字
|color=#000000（带有井号的十六进制色号代码。）
|image=链接（至图片的链接。）
|one=在这
|two=随便
|three=放文字
]]

使用 CSS 进行自定义：

你可以使用 CSS 进行额外的自定义，将代码放入到 [[module css]] 中或者是放入到页面的版式内都可以。在这一组件中，不要把 [[module css]] 放在 [[include]] 里面，把它放在那个的下面或者是页面的顶部或底部。
将这些代码放入到你的页面/版式中以编辑所有的颜色，因为组件的 |color= 部分仅能控制背景：

[[module css]]
.sd-container {
/* 字体 */
--sd-font: Poppins, Noto Sans SC, Noto Serif SC;

/* 边框 */
--sd-border: var(--gray-monochrome); /* 大多数等级 */
--sd-border-secondary: 0, 0, 0; /* 不适用 */
--sd-border-deadzone: 20, 0, 0; /* 死区 */

/* 标志 */
--sd-symbol: var(--sd-border) !important; /* 大多数标志 */
--sd-symbol-secondary: 255, 255, 255; /* 4 级以上的是白色 */

/* 文本 */
--sd-bullets: var(--sd-border) !important; /* 点句符文本颜色 */
--sd-text: var(--swatch-text-secondary-color); /* 顶部框文本颜色 */

/* 等级颜色 */
--class-0: 247, 227, 117;
--class-1: 255, 201, 14;
--class-2: 245, 156, 0;
--class-3: 249, 90, 0;
--class-4: 254, 23, 1;
--class-5: 175, 6, 6;
--class-unknown: 38, 38, 38;
--class-habitable: 26, 128, 111;
--class-deadzone: 44, 13, 12;
--class-pending: 182, 182, 182;
--class-n-a: 38, 38, 38;
--class-amended: 185, 135, 212;
--class-omega: 25, 46, 255;
}
[[/module]]

旧版颜色：

如果你不喜欢新版的样式，想要用回旧版的红色边框色，只需要在你的页面中与组件一同引入下方的代码：

[[module css]]
.sd-container {
--sd-border: 90, 29, 27;
--sd-image: 90, 29, 27;
--sd-symbol: 90, 29, 27;
}
[[/module]]

描述

你发现自己身处隐约熟悉的事物中。这离家很近，尽管没有什么是真正完美的。记住细节很难，但事情似乎几乎是应该的。即使事情很难记住，当你醒来时，有些事情永远不会完美。你的房子可能几乎在正确的位置。你的街道名称可能几乎是正确的。房屋之间的空间可能比以前宽或小一米。也许你脚下的地面会感觉不同？你还记得你自己屋顶的颜色吗？

这一次，当你进入你家时，你的亲人没有迎接你。事情又感觉有点不像了。大厅从来没有这么紧凑。你不记得客厅的墙上有多少张照片。所有的家具都有点偏离中心。你呼唤你的家人，但你感知到的唯一反应是模糊的……他们声音的耳语和杂音遥无可及。无论你去哪里，他们不连贯的讨论都从你的掌握中转移了。不可能听他们安静的话，因为他们说的话对你来说没有任何逻辑意义。你曾经称之为家的地方感觉就像一个空洞的提醒。

醒醒。

太阳永远不会在你的天堂落山。低雾总是会把你遮住，隐藏在阳光的尘土照耀下。你离开家去散步，但邻居们不在身边迎接你。他们的车——如果你能正确地回忆起它们的样子——要么不见了，要么完美地停在了他们的车道上。你越是继续下去，你对自己的皮肤就越感到不舒服。这条路从来没有持续这么久，但当你怀疑自己时，你发现了通往下一条街的弯道。房子在短时间内显得陌生，尽管你很快就模糊地提醒了它们的特征是什么。你几乎熟悉你的步行路线。

你累了，但你继续在疲惫的状态下行走。你因越来越不熟悉而踐跚。失去了家，但回头没有结果。你越往下走，房子看起来就越抽象。它们被放置在随意的距离上，以奇怪的比例存在，展示的特征只是模仿了你对它们的看法。逐渐的恐慌已经出现，你疯狂地逃跑了，没有目的地。你回家的路迷路了，但你很快就奇迹般地遇到了它，尽管这个地区很陌生。

进入后，已经成为标准的沉默再次迎接你。你会吃，但你不觉得饿。你选择走上台阶，逐渐将略微不正确的大厅导航到你的卧室。事情可能看起来是对的，但你再也记不起来了。你不确定你的床是靠在左边还是右边的墙上。不清楚你的梳妆台应该位于房间的哪个部分，但至少它在那里。盖子小心翼翼地抬起，露出你的床，就像你记得的那样。有了它，你轻轻地躺下，感到舒适。你现在幸福地睡着了。

描述

你在床上醒来，但仍然感到困倦的气息，还是很累。没有人打扰你，家人也还没有出现。事物感觉大体上是正确的。你不确定你的床是靠在右边的墙，还是左边的墙。你不太记得你的梳妆台应该在哪里。床头柜上的钟没有提醒你早晨的到来，尽管一天的时间从未改变。无论如何，它似乎一开始就没有开过。

小心翼翼地，你进入了大厅，那里的事情几乎感觉是正确的。慢慢地，小心翼翼地，你开始下楼。你走得越多，你对自己的皮肤就越感到不舒服。事情又感觉有点不像了。大厅从来没有这么紧凑。你不记得客厅的墙上有多少张照片。所有的家具都有点偏离中心。厨房已经布置好了，但你很难判断这是否是通常的情况。不过，在冰箱里，你找到了所有你最喜欢的食物。你想要的一切都在里面。你伸手从冰箱里拿了一条面包。

醒醒。

尽管事情很奇怪，但你继续你的例行公事。你用你最喜欢的果酱做吐司，把盘子带到桌子上。你甚至不记得曾经把面包放在盘子里或烤过，但不管怎样，它就在那里。你咬了一口，但你很快就意识到这不是你放的果酱，而是蛋黄酱。也许你在做三明治，却忘了。你看了看冰箱里面，发现里面有你最喜欢的食物。

你伸手去拿一条面包，但你突然停了下来。你什么时候把面包放回冰箱的？你什么时候把所有其他东西都放在柜台上的？一旦明显出了问题，你就选择把所有东西都放回冰箱里。你不再饿了。
把自己搬到客厅，有那么一瞬间，事情似乎很正常。你试着打开电视，幸运的是你最喜欢的频道出现了。最后，有些东西感觉恰到好处。你一心一意地盯着屏幕看了这么久，以至于你迷失了方向。你开始明白，你一直在重复观看同一段新闻。当你家人的喃喃自语回到你身边时，你的眼睛因恐惧而在房间里飞来飞去。难以理解的喃喃自语的噪音引起了巨大的恐惧和焦虑。你有逃离的冲动。

你小心翼翼地走上台阶，逐渐导航到稍微不正确的大厅到你的卧室。事情可能看起来是对的，但你再也记不起来了。你不记得你的梳妆台应该在房间周围的什么地方。你不记得你的床应该靠哪面墙；左边还是右边。你不记得墙上有多少张照片，或者里面的人是谁。你开始爬回被窝里，闭上眼睛时恐惧地蜷缩起来。很难安顿下来并开始休息，但很快就睡着了。你现在幸福地睡着了。

描述

你醒了，但你仍然觉得累。这些天起床变得很困难。你周围的房间感觉几乎很熟悉，但你记不起为什么。你的时钟闹钟没有像往常一样响，但也许它只是没有设置。你因越来越不熟悉而踐跚。你已经开始慢慢下楼梯了。

感到饿了，你开始向厨房走去，但你却误入了餐厅。你确信厨房一直就在这里，但你还是继续前行，最终找到了它。冰箱里装满了你喜欢的所有食物，你拿出了一条面包，尽管你忽略了自己从未在冰箱里存放过面包的事实。你开始给自己做烤面包，但你越努力，你的手就抖得越厉害。你突然感到虚弱，放弃了涂抹果酱。你从未记得自己从冰箱里拿出过果酱。

醒醒。

重新打开冰箱，你颤抖的手伸去放回草莓果酱罐。看着标签，你意识到那实际上是覆盆子果酱，而不是草莓。你从未买过覆盆子果酱。你开始难以分辨自己到底喜欢哪一种，甚至一开始打算涂在烤面包上的是什么。你最初打算吃的东西的想法从你的记忆中溜走了，但当你放下果酱罐时，有东西吸引了你的注意。

你逐渐伸手，在冰箱里发现了一张照片，但你不明白为什么它在那里。你不可能分辨出谁在里面，更不用说谁把照片放在了这么奇怪的地方了。你把它握在两只手之间，强烈地凝视着它的陌生感，尽管它很混乱。小心翼翼地把它放回冰箱里。你不再饿了，但你有洗漱的冲动。

水槽渐渐地随着水流动，你洗掉了你的脸，凝视着里面难以辨认的特征，你漫不关心地转身，游荡到客厅。你试着打开电视，幸运的是你最喜欢的频道打开了。最后，有些东西感觉恰到好处。你一心一意地盯着屏幕看了这么久，以至于你迷失了方向。你坐了好几个小时，但很快你就起来给自己做午饭了。厨房现在湿透了，一层薄薄的水覆盖了地板。你忘了关掉水龙头。

渐渐地，当你关闭它时，恐慌开始出现。你所爱的人的喃喃自语在远处回荡，但这一切都感觉是恶意的。你尴尬地导航到前门，走到街上。即使事情很难记住，有些事情也不一样。你的房子可能几乎来对地方了。你的街道名称可能几乎正确。房屋之间的空间可以比以前宽或小一米。太阳永远不会在你的天堂落山。低雾总是会把你遮蔽，隐藏在阳光凝视的尘土飞扬的阳光下。事情看起来还行，但你再也记不起来了。

你累了，开始在荒凉的街道中间转身。渐渐地，你踸来踓去，回到房子的前台阶上，再次返回。事情又感觉有点不像了。大厅从来没有这么紧凑。你不记得客厅的墙上有多少张照片。所有的家具都有点偏离中心。你呼唤任何人，但你听到的只是你隐约熟悉的人的远距离对话。

你差点忘了你在哪里。在这之前你在哪里？你是怎么来到这里的？是什么让你变成这样的？当你在自己家的房间里徘徊时，这些问题在你的脑海中溜走，但你从未正确地承认过它们。你忘了你把照片挂在墙上，但里面的人是谁？你甚至还记得你什么时候或是否拿走了它们吗？

你小心翼翼地走上台阶，逐渐穿过大厅到你的卧室。你再也认不出它了，但这对你来说并不重要。你昏昏不忙地经过你的梳妆台。你的脚偶然发现了一堆你忘记带出去的衣服。盖子闻起来有葡萄汁和体味，但你平静地躺在昏昏欲睡的状态中。有一张人们在你床边的照片，但你永远无法回忆起曾经见过它。渐渐地，你进入一种放松的恍惚状态，随着你的手臂变得虚弱，你的眼睛变得越来越沉重。 你现在幸福地睡着了。醒醒。

---

‡ 授权 / 引用

请按如下方式引用此页：

“Level 335”，作者 RoseMonsignor，来自后室英文维基。原文链接：http://backrooms-wiki.wikidot.com/level-335。译者 jiaoyanerlan2，来自后室TODV维基。译文链接：https://backrooms-survivor-governor.wikidot.com/level-335。遵循 CC BY-SA 3.0 协议。

---

图像名：first
图像作者: RoseMonsignor
授权协议: CC BY-SA 3.0

图像名：second
图像作者： RoseMonsignor
授权协议: CC BY-SA 3.0

图像名：third
图像作者: RoseMonsignor
授权协议: CC BY-SA 3.0

更多授权相关信息，请查阅授权指导。

+ 展开样式代码

/* BHL Style Search Top Box And User Account */
/* By Mercuresphere */
/* Based on BHL Theme */
 
:root, :root:lang(cn) {
    --merc-light-color: var(--swatch-menutxt-light-color);
    --merc-dark-color: var(--swatch-menubg-dark-color);
 
    --user-account-mask: url("https://fastly.jsdelivr.net/gh/Crimone/crimson-anemone@main/files/user-circle.svg");
    --search-top-box-mask: url("https://fastly.jsdelivr.net/gh/Crimone/crimson-anemone@main/files/search-top-box-mask.svg");
}
 
/* ===用户和搜索栏=== */
@media only screen and (max-width: 768px) {
    #login-status {
        right: unset;
        font-size: unset;
    }
 
    #navi-bar, #navi-bar-shadow, #search-top-box-input {
        display: unset;
    }
 
    #search-top-box-input {
        min-width: unset;
    }
 
    #search-top-box {
        top: unset;
        right: unset;
        height: unset;
    }
 
    #search-top-box:focus-within {
        box-shadow: unset;
        background: unset;
        padding: unset;
    }
 
    #search-top-box:not(:focus-within):before {
        -webkit-mask-size: calc(calc(0.9375rem * 1.8) / 2) calc(calc(0.9375rem * 1.8) / 2);
        -webkit-mask-position: center center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-image: var(--search-top-box-mask);
        z-index: 14;
        background-color: rgb(var(--merc-light-color));
        color: rgb(var(--merc-dark-color));
        text-align: center;
        cursor: pointer;
        mask-image: var(--search-top-box-mask);
        mask-position: center center;
        mask-repeat: no-repeat;
        mask-size: calc(calc(0.9375rem * 1.8) / 2) calc(calc(0.9375rem * 1.8) / 2);
        pointer-events: none;
        position: absolute;
        top: 0;
        right: 0;
        width: calc(0.9375rem * 1.8);
        height: 100%;
        content: " ";
    }
 
    #search-top-box form[id=search-top-box-form] {
        visibility: unset;
        height: unset;
    }
 
    #search-top-box form[id=search-top-box-form]:focus-within {
        visibility: unset;
    }
 
    #search-top-box form[id=search-top-box-form] input {
        -webkit-appearance: unset;
        -moz-appearance: unset;
        position: unset;
        top: unset;
        transform: unset;
        appearance: unset;
        height: unset;
    }
 
    #search-top-box form[id=search-top-box-form] input[type=text] {
        visibility: unset;
        transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), font-variation-settings .2s cubic-bezier(.4, 0, .2, 1), font-weight .2s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), right .2s cubic-bezier(.4, 0, .2, 1), width .6s cubic-bezier(.4, 0, .2, 1), padding .6s cubic-bezier(.4, 0, .2, 1), max-width .6s cubic-bezier(.4, 0, .2, 1);
    }
 
    #search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text] {
        position: unset;
        right: unset;
        transform: unset;
        cursor: unset;
        border-width: unset;
        width: unset;
        height: unset;
        color: unset;
    }
 
    #search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text]:hover {
        background-color: unset;
    }
 
    #search-top-box form[id=search-top-box-form] input[type=submit] {
        background: none;
        transition: unset;
    }
 
    #search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=submit] {
        opacity: unset;
        margin: unset;
        padding: unset;
        width: unset;
    }
 
    #header h1 a {
        z-index: unset;
    }
}
 
@media only screen and (max-width: 56.25rem) {
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        background-color: rgba(0, 0, 0, 0);
    }
}
 
@media (min-width: 36rem) {
    #login-status {
        flex-grow: unset;
        left: unset;
        right: unset;
    }
 
    #login-status:not(:hover):not(:focus-within) {
        visibility: hidden;
    }
 
    #login-status::before {
        visibility: visible;
    }
}
 
#search-top-box-input {
    min-width: unset;
    display: inline-block;
}
 
#search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:focus, #search-top-box-form input[type=submit]:hover {
    color: transparent;
}
 
#search-top-box-form input[type=submit]:focus, #search-top-box-form input[type=submit]:hover {
    border: none;
    text-shadow: none;
}
 
#search-top-box-form input[type=submit], #search-top-box-input:focus, #search-top-box-input:hover {
    border: none;
}
 
#search-top-box {
    display: flex;
    z-index: 12;
    position: absolute;
    top: 1.5em;
    right: calc(3% - .25em);
    align-items: center;
    justify-content: center;
    width: auto;
    height: calc(0.9375rem * 1.8);
    transform: translateY(-50%);
    font-size: calc(0.9375rem * .86667);
}
 
#search-top-box, #search-top-box * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), font-variation-settings .2s cubic-bezier(.4, 0, .2, 1), font-weight .2s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), right .2s cubic-bezier(.4, 0, .2, 1), width .6s cubic-bezier(.4, 0, .2, 1), padding .6s cubic-bezier(.4, 0, .2, 1), max-width .6s cubic-bezier(.4, 0, .2, 1);
    will-change: box-shadow, font-variation-settings, font-weight, background-color, color, right, width, padding, max-width;
}
 
#search-top-box:focus-within, #search-top-box:focus-within *, #search-top-box:focus-within :after, #search-top-box:focus-within :before {
    margin: 0;
    padding: 0;
    transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), font-variation-settings .2s cubic-bezier(.4, 0, .2, 1), font-weight .2s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), right .2s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1), padding .3s cubic-bezier(.4, 0, .2, 1), max-width .3s cubic-bezier(.4, 0, .2, 1);
    will-change: box-shadow, font-variation-settings, font-weight, background-color, color, right, width, padding, max-width;
}
 
#search-top-box:focus-within {
    background: rgba(var(--merc-dark-color), .7);
    box-shadow: calc(calc(0.9375rem * 1.8) / 2 * -1) 0 calc(calc(0.9375rem * 1.8) / 2) rgba(var(--merc-dark-color));
}
 
#search-top-box:after, #search-top-box:before {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(0.9375rem * 1.8);
    height: 100%;
    content: " ";
}
 
#search-top-box:before {
    -webkit-mask-size: calc(calc(0.9375rem * 1.8) / 2) calc(calc(0.9375rem * 1.8) / 2);
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-image: var(--search-top-box-mask);
    z-index: 14;
    background-color: rgb(var(--merc-light-color));
    color: rgb(var(--merc-dark-color));
    text-align: center;
    cursor: pointer;
    mask-image: var(--search-top-box-mask);
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: calc(calc(0.9375rem * 1.8) / 2) calc(calc(0.9375rem * 1.8) / 2);
    pointer-events: none;
}
 
#search-top-box:not(:focus-within):hover:before {
    background-color: rgb(var(--merc-light-color));
}
 
#search-top-box:after {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: var(--clip-path);
    z-index: 13;
    clip-path: var(--clip-path);
    pointer-events: none;
    background-color: transparent;
}
 
#search-top-box:not(:focus-within):after {
    --clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    background-color: rgb(var(--merc-light-color), 0);
}
 
#search-top-box form[id=search-top-box-form] {
    display: flex;
    visibility: visible;
    position: relative;
    right: 0;
    max-width: 100%;
    height: calc(0.9375rem * 1.8);
}
 
#search-top-box form[id=search-top-box-form]:not(:focus-within) {
    max-width: calc(0.9375rem * 15);
}
 
#search-top-box form[id=search-top-box-form] input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    top: 0;
}
 
#search-top-box form[id=search-top-box-form] input[type=text] {
    z-index: 13;
    position: absolute;
    right: 0;
    width: calc(0.9375rem * 15);
    max-width: calc(0.9375rem * 15);
    height: 100%;
    padding: 0 calc(0.9375rem * 1.8) 0 1em;
    outline: 0 solid rgb(var(--merc-light-color));
    background-color: rgb(var(--merc-dark-color), .7);
    box-shadow: 0 0 0 .125rem rgb(var(--merc-light-color));
    color: rgba(var(--merc-light-color));
}
 
#search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text] {
    max-width: calc(0.9375rem * 1.8);
    padding: 0;
    outline-width: 0;
    background-color: rgba(var(--merc-dark-color), 0);
    box-shadow: 0 0 0 0 rgb(var(--merc-light-color));
    color: rgba(0, 0, 0, 0);
    cursor: pointer;
}
 
#search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text]:hover {
    background-color: rgba(var(--merc-dark-color), 1);
}
 
#search-top-box form[id=search-top-box-form] input[type=submit] {
    visibility: visible;
    z-index: 14;
    position: absolute;
    right: 0;
    width: calc(0.9375rem * 1.8);
    height: calc(0.9375rem * 1.8);
    outline: 0 solid rgb(var(--merc-light-color));
    background-color: transparent;
    box-shadow: 0 0 0 .125rem rgb(var(--merc-light-color));
    color: t;
    font-size: calc(0.9375rem * .86667);
    cursor: pointer;
    pointer-events: all;
}
 
#search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=submit] {
    box-shadow: 0 0 0 0 rgb(var(--merc-light-color));
    pointer-events: none;
}
 
#login-status {
    --wght: var(--ui-wght);
    display: flex;
    z-index: 11;
    position: absolute;
    top: 1.5em;
    right: calc(3% + calc(0.9375rem * 1.8) - .25em);
    align-items: center;
    justify-content: center;
    height: 2em;
    margin: 0 0 0 .5em;
    transform: translateY(-50%);
    color: rgb(var(--merc-light-color));
    font-weight: var(--wght);
    font-size: 1em;
    font-family: var(--UI-font);
    white-space: nowrap;
    transition: opacity .2s cubic-bezier(.4, 0, .2, 1);
}
 
#search-top-box:focus-within ~ #login-status {
    opacity: 0;
}
 
#login-status span.printuser a:first-of-type {
    width: 1.75em;
}
 
#login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in {
    margin: 0 1em;
    background-color: rgb(var(--pale-gray-monochrome));
    color: rgb(var(--merc-dark-color));
    padding: 0.1em 1em;
    text-decoration: none;
}
 
#login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account:active, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account:hover, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in:active, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in:hover, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account:focus-within, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in:focus-within {
    background-color: rgba(var(--merc-light-color), 1);
    color: rgb(var(--merc-dark-color));
    text-decoration: none;
}
 
#login-status span.printuser {
    --wght: var(--ui-wght);
    margin-right: .5em;
    color: rgb(var(--merc-light-color));
    font-weight: var(--wght);
}
 
#login-status a#my-account, #login-status a[href*="account/messages"] {
    color: rgb(var(--merc-light-color));
}
 
#login-status a#my-account {
    --wght: var(--ui-wght);
    -webkit-text-decoration: underline rgb(var(--merc-dark-color)) .125em;
    display: flex;
    align-items: center;
    padding: 0 .5em;
    background-color: initial;
    box-shadow: inset 0 0 0 0 rgb(var(--merc-dark-color));
    font-weight: var(--wght);
    text-decoration: underline rgb(var(--merc-dark-color)) .125em;
    transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), text-decoration .2s cubic-bezier(.4, 0, .2, 1), -webkit-text-decoration .2s cubic-bezier(.4, 0, .2, 1);
}
 
#login-status a#my-account:active, #login-status a#my-account:hover {
    --wght: var(--ui-hvr-wght);
    -webkit-text-decoration: underline rgb(var(--merc-dark-color)) 0;
    box-shadow: inset 0 -2em 0 0 rgb(var(--merc-dark-color));
    color: rgb(var(--merc-light-color));
    font-weight: var(--wght);
    text-decoration: underline rgb(var(--merc-dark-color)) 0;
}
 
#login-status a#my-account:focus-within {
    --wght: var(--ui-hvr-wght);
    -webkit-text-decoration: underline rgb(var(--merc-dark-color)) 0;
    box-shadow: inset 0 -2em 0 0 rgb(var(--merc-dark-color));
    color: rgb(var(--merc-light-color));
    font-weight: var(--wght);
    text-decoration: underline rgb(var(--merc-dark-color)) 0;
}
 
#login-status #account-topbutton {
    --clip-path: polygon(30% 35%, 70% 35%, 50% 60%, 50% 60%);
    -webkit-clip-path: var(--clip-path);
    position: relative;
    width: var(--account-height);
    height: var(--account-height);
    margin: 0;
    padding: 0;
    background-color: rgb(var(--merc-light-color));
    color: transparent;
    clip-path: var(--clip-path);
    transition: -webkit-clip-path .1s cubic-bezier(.4, 0, .2, 1);
    transition: clip-path .1s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .1s cubic-bezier(.4, 0, .2, 1);
}
 
#login-status #account-options {
    display: block !important;
    z-index: 12;
    position: absolute;
    top: 1.5rem;
    right: 0;
    width: 10em;
    margin: .25em 0 0;
    padding: 0;
    overflow: hidden;
    background-image: var(--gradient-header);
    background-color: rgb(var(--merc-dark-color));
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s cubic-bezier(.4, 0, .2, 1);
}
 
#login-status #account-options:focus-within, #login-status #account-topbutton:active + #account-options, #login-status #account-topbutton:focus + #account-options {
    opacity: 1;
    pointer-events: all;
}
 
@media (pointer: coarse) {
    #login-status #account-options:hover, #login-status #account-topbutton:hover + #account-options {
        opacity: 1;
        pointer-events: all;
    }
}
 
#login-status #account-options * {
    margin: 0;
    padding: 0;
}
 
#login-status #account-options ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 2em;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    font-size: .85em;
}
 
#login-status #account-options ul li {
    position: relative;
}
 
#login-status #account-options ul li, #login-status #account-options ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
 
#login-status #account-options a {
    --box-shadow: rgba(var(--merc-dark-color));
    --wght: var(--ui-wght);
    position: relative;
    flex-grow: 1;
    height: 100%;
    max-height: 2em;
    padding: 0 .25em;
    box-shadow: inset 0 0 0 .0625rem var(--merc-dark-color);
    font-weight: var(--wght);
    transition: color .15s cubic-bezier(.4, 0, .2, 1), font-weight .15s cubic-bezier(.4, 0, .2, 1), font-variation-settings .15s cubic-bezier(.4, 0, .2, 1);
}
 
#login-status #account-options li > a, #login-status #account-options li > a:visited {
    color: rgb(var(--merc-light-color));
}
 
#login-status #account-options li > a:active, #login-status #account-options li > a:hover {
    --wght: var(--ui-hvr-wght);
    color: rgb(var(--merc-dark-color));
    font-weight: var(--wght);
    text-decoration: none;
}
 
#login-status #account-options li > a:focus-within {
    --wght: var(--ui-hvr-wght);
    color: rgb(var(--merc-dark-color));
    font-weight: var(--wght);
    text-decoration: none;
}
 
#login-status #account-options li > a[href*="/messages"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    font-size: 0;
}
 
#login-status #account-options li > a[href*="/messages"]:after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    content: "信息";
    font-size: calc(0.9375rem * .765);
    pointer-events: none;
}
 
#login-status #account-options li > a:before {
    --clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    -webkit-clip-path: var(--clip-path);
    z-index: -1;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--merc-light-color));
    content: " ";
    clip-path: var(--clip-path);
    pointer-events: none;
    transition: -webkit-clip-path .2s cubic-bezier(.4, 0, .2, 1);
    transition: clip-path .2s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .2s cubic-bezier(.4, 0, .2, 1);
}
 
#login-status #account-options li > a:active:before, #login-status #account-options li > a:hover:before {
    --clip-path: polygon(-15% 0, 115% 0, 100% 100%, 0 100%);
}
 
#login-status #account-options li > a:focus-within:before {
    --clip-path: polygon(-15% 0, 115% 0, 100% 100%, 0 100%);
}
 
/* ===默认收起用户信息栏和搜索栏=== */
#search-top-box {
    top: 23px;
    right: calc(3%);
}
 
#login-status {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    top: 24px;
    right: calc(3% + calc(0.9375rem * 1.8) + .25em);
    color: transparent;
    pointer-events: none;
    transition: color .2s cubic-bezier(.4, 0, .2, 1);
    user-select: none;
}
 
@media only screen and (min-width: 980px) {
    #search-top-box {
        right: calc(3% + (-100vw + var(--header-width-on-desktop, 61.25rem)) / 2);
    }
 
    #login-status {
        right: calc(3% + calc(0.9375rem * 1.8) + .25em + (-100vw + var(--header-width-on-desktop, 61.25rem)) / 2);
    }
}
 
#login-status:active, #login-status:hover {
    -webkit-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    color: rgb(var(--merc-light-color));
    pointer-events: all;
    user-select: auto;
}
 
#login-status:focus-within {
    -webkit-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    color: rgb(var(--merc-light-color));
    pointer-events: all;
    user-select: auto;
}
 
#login-status:active #account-options, #login-status:hover #account-options {
    pointer-events: all;
}
 
#login-status:focus-within #account-options {
    pointer-events: all;
}
 
#login-status > :not(#account-topbutton):not([href*="account/messages"]) {
    --clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    -webkit-clip-path: var(--clip-path);
    clip-path: var(--clip-path);
    opacity: 0;
    transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), text-decoration .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), clip-path .2s cubic-bezier(.4, 0, .2, 1), opacity .2s cubic-bezier(.4, 0, .2, 1), -webkit-text-decoration .2s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .2s cubic-bezier(.4, 0, .2, 1);
}
 
#login-status:active > :not(#account-topbutton):not([href*="account/messages"]), #login-status:hover > :not(#account-topbutton):not([href*="account/messages"]) {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: var(--clip-path);
    clip-path: var(--clip-path);
    opacity: 1;
}
 
#login-status:focus-within > :not(#account-topbutton):not([href*="account/messages"]) {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: var(--clip-path);
    clip-path: var(--clip-path);
    opacity: 1;
}
 
#login-status #account-topbutton {
    margin-left: 0;
    background-color: initial;
    pointer-events: all;
    transition: clip-path .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .15s cubic-bezier(.4, 0, .2, 1);
}
 
#login-status:hover #account-topbutton {
    background-color: rgb(var(--merc-light-color));
}
 
#login-status:before {
    -webkit-mask-image: var(--user-account-mask);
    -webkit-mask-size: calc(calc(0.9375rem * 1.8) - .5em);
    -webkit-mask-position: center right;
    -webkit-mask-repeat: no-repeat;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--merc-light-color), 1);
    content: "";
    cursor: pointer;
    mask-image: var(--user-account-mask);
    mask-position: center right;
    mask-repeat: no-repeat;
    mask-size: calc(calc(0.9375rem * 1.8) - .5em);
    pointer-events: all;
    transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
 
#login-status:hover:before {
    background-color: rgba(var(--search-icon-hover-color), 1);
}
 
#login-status:active:after, #login-status:active:before, #login-status:hover:after, #login-status:hover:before {
    background-color: rgba(var(--search-icon-hover-bg-color), 0);
    cursor: auto;
    pointer-events: none;
}
 
#login-status:focus-within:after, #login-status:focus-within:before {
    background-color: rgba(var(--search-icon-hover-bg-color), 0);
    cursor: auto;
    pointer-events: none;
}
 
#login-status #account-topbutton {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: var(--clip-path);
    background-color: rgba(var(--merc-light-color), 0);
    clip-path: var(--clip-path);
}
 
#login-status:active #account-topbutton, #login-status:hover #account-topbutton {
    --clip-path: polygon(30% 35%, 70% 35%, 50% 60%, 50% 60%);
    -webkit-clip-path: var(--clip-path);
    background-color: rgb(var(--merc-light-color));
    clip-path: var(--clip-path);
}
 
#login-status:focus-within #account-topbutton {
    --clip-path: polygon(30% 35%, 70% 35%, 50% 60%, 50% 60%);
    -webkit-clip-path: var(--clip-path);
    background-color: rgb(var(--merc-light-color));
    clip-path: var(--clip-path);
}
 
#login-status #account-options {
    margin: 0;
}
 
#login-status a[href*="account/messages"] {
    color: rgb(var(--merc-light-color));
    pointer-events: all;
}
 
#account-topbutton {
    border: none;
}
 
#account-options {
    border: none;
}