团体版式：夕

夕是一个由EuthanasiaALS 和 bleuboat为异途道门制作的团体版式，可以被引用于任意页面。要在页面中引用该版式，请在其中加入如下代码：

[[include :backrooms-wiki-cn:theme:eve]]

以下为本版式的部分元素示例。

示例

• 

  close

  著作信息

  ---

  X

  名称： 团体版式：夕
  作者： EuthanasiaALS & bleuboat 。

  书画图源：https://pixabay.com/zh/photos/talk-vietnam-ho-guom-6520941/ ，由rx00000xn通过Gemini生成处理，再经由EuthanasiaALS处理得到。

  其余所有美术素材均由EuthanasiaALS绘制。

  ---

• 

  close

  著作信息

  ---

  X

  名称： 团体版式：夕
  作者： EuthanasiaALS & bleuboat 。

  书画图源：https://pixabay.com/zh/photos/talk-vietnam-ho-guom-6520941/ ，由rx00000xn通过Gemini生成处理，再经由EuthanasiaALS处理得到。

  其余所有美术素材均由EuthanasiaALS绘制。

  
  

异途道门篆章

可通过 1 至 6 个加号（“+”）来创建不同级的标题。

折叠 - 点击以展开

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题

一代又一代选择苟活的流浪聚集在一起，寻找让自己活得更长一些的办法，给那些拯救自己生命又将带给自己最终死亡的东西披上神话的外衣，就这样麻痹着自己直到死亡到来，这便是异途道门，一群由绝望者、疯子和蠢货总成的狂热组织，极端冒进而又缺少耐心。

他们疯狂的追求着任何能够赐予超常能力的东西——能让他们活下来的东西，无论未来会遭遇什么，无论那东西的本质如何，无论那会让自己变成什么样子，如果这东西不会当场致命那便会毫不犹豫地使用。

这就是异途道门，如果你厌倦了不计其数的研究组织，厌倦了高科技组织一点一点征服后室让后室变得安全而稳定的故事。那么这个组织将是你的最优选择。如果你想要描写绝望的底层流浪者的故事，想要创造危险至极却又对人有所助益的实体和物品，又或者想要披着神话的外衣去创造似是而非的存在，这里同样是你的优选之处。

——异途道门•中心页

---

通过四个连字符 “----”来在你的页面中创建水平分割线。若未被放在其他部件（诸如引用块）中，其会左右延伸贯穿整个页面。这种将文件分割为多个部分的线就是分割线。

以下为更多页面元素。

分页

此为分页（tab view）。

分页

看，这有更多文字。

多么精巧绝伦。

长 Tab

实际上这里有文字。

由于一些奇怪的原因，这个空 tab 有一个很长的名字，也就是“长而无物”，很糟的现象。

空 Tab

空 Tab

空 Tab

空 Tab

空 Tab

这是	表格
说实话	不写做法不太好。
但是解释起来很麻烦，你还是自己查一下吧。

这是一个引用块，在一行字的起始处加上“> ”来创建。
更多文字

---

一条分割线

嵌套引用块

以下为该版式可用的class类。

[[div class="shadebox"]]

这个引用块的特点是引用块内的文字和引用块外的文字对齐。

[[div class="block"]]

这是一个基础的块级元素，通过为其添加更多的类（class）来进一步样式化。

与 shadebox 不兼容！

[[div class="block shadow"]]

这个引用块的特点是拥有阴影。

[[div class="block dropshadow"]]

同理，但是阴影更大一些。

[[div class="block light-bg"]]

较浅的背景。

[[div class="block dark-bg"]]

较深的背景。

[[div class="block warn"]]

警告块。

[[div class="block pattern"]]

蟠螭纹。

[[div class="block line"]]

边框线。

[[div class="block quote"]]

引用块。

这东西很烦人，不过嘛…有些时候它就是没法避免…

假页面标题

[[div class="meta-title"]]
假页面标题
[[/div]]

纹样标题

二级

[[div class="styled-title"]]
+ 标题
[[/div]]

居中标题

二级

[[div class="styled-title center"]]
+ 标题
[[/div]]

居右标题

二级

[[div class="styled-title right"]]
+ 标题
[[/div]]

---

[[div class="seal-hr"]]
----
[[/div]]

---

[[div class="double-hr"]]
----
[[/div]]

---

页面字体为思源宋体。
横幅字体为钟齐志莽行书体。
等宽字体为 PT Mono / 思源黑体。

预定义

功能预设： 隐藏标题。

引用方式： |hide-title=true

功能预设： 去除闲章。

引用方式： |no-seal=true

外观预设： 蟠螭纹背景。

引用方式： |pattern-bg=true

外观预设： 暗度陈仓。

引用方式： |uec=true

---

‡ 授权 / 引用

请按如下方式引用此页：

“团体版式：夕”，作者 EuthanasiaALS & bleuboat，来自后室中文维基。原文链接：http://backrooms-wiki-cn.wikidot.com/theme:eve。遵循 CC BY-SA 3.0 协议。

---

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

+ 版式代码

@import url("https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap");
:root {
    --global-white-color: 255, 252, 250;
    --global-pale-color: 250, 240, 230;
    --global-light-color: var(--global-dark-color);
    --global-dark-color: 140, 25, 0;
    --global-black-color: 60, 0, 0;
    --global-accent-1: 255, 25, 0;
    --global-accent-2: 180, 25, 0;
    --global-accent-3: var(--global-dark-color);
    --alt-color: 255, 120, 0;
 
    --light-ui-txt: var(--global-dark-color);
    --dark-ui-bg: 90, 15, 0;
    --bright-ui-bg: var(--global-dark-color);
    --bright-ui-txt: 255, 220, 140;
    --paper-bg: var(--bright-ui-txt);
    --paper-txt: var(--bright-ui-bg);
 
    --global-border-width: 0.145rem;
 
    --body-bg: 60, 25, 15;
 
    --header-bg: var(--bright-ui-bg);
    --header-txt: var(--bright-ui-txt);
    --header-hover-bg: var(--paper-bg);
    --header-hover-txt: var(--paper-txt);
 
    --topbar-hover-bg: var(--header-hover-bg);
    --topbar-hover-txt: var(--header-hover-txt);
 
    --dropdown-bg: var(--header-hover-bg);
    --dropdown-txt: var(--header-hover-txt);
    --dropdown-hover-bg: var(--header-bg);
    --dropdown-hover-txt: var(--header-txt);
 
    --openmenu-hover-txt: 0, 0, 0, 0;
 
    --sidebar-bg: var(--paper-bg);
 
    --heading-bg: var(--bright-ui-bg);
    --heading-txt: var(--bright-ui-txt);
 
    --menu-bg: 0, 0, 0, 0;
    --menu-txt: var(--paper-txt);
    --menu-hover-bg: var(--bright-ui-bg);
    --menu-hover-txt: var(--bright-ui-txt);
 
    --rate-bg: var(--global-bg);
    --rate-txt: var(--global-txt);
 
    --tabview-hover-bg: var(--dark-ui-bg);
    --tabview-selected-bg: var(--bright-ui-bg);
    --tabview-selected-txt: var(--bright-ui-txt);
 
    --toc-bg: var(--global-bg);
    --toc-txt: var(--global-txt);
    --toc-heading-bg: var(--bright-ui-bg);
    --toc-heading-txt: var(--bright-ui-txt);
    --toc-heading-hover-bg: var(--dark-ui-bg);
 
    --dark-block-bg: var(--global-black-color);
 
    --btn-txt: var(--link-primary);
    --btn-hover-bg: var(--bright-ui-bg);
    --btn-hover-txt: var(--bright-ui-txt);
 
    --bottombar-bg: var(--header-bg);
    --bottombar-txt: var(--header-txt);
 
    --banner-height: 19rem;
    --sidebar-width: 14rem;
    --content-width: 52rem;
 
    --dropdown-border-width: 0;
 
    --banner-title-size: 7rem;
    --banner-subtitle-size: .85rem;
    --page-title-size: 2.5rem;
 
    --header-title: "The Backrooms中文维基";
    --banner-title-1: "异途";
    --banner-title-2: "道门";
    --banner-subtitle-1: "一粒金丹吞入腹";
    --banner-subtitle-2: "始知我命不由天";
 
    --sidebar-ui: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_sidebar-icon.svg");
 
    --body-font: "Noto Serif SC", "Noto Serif TC", serif;
    --banner-font: "Zhi Mang Xing", "Zhuque Fangsong (technical preview)", var(--body-font);
    --header-font: var(--body-font);
    --title-font: var(--body-font);
    --ui-font: var(--body-font);
    --mono-font: "PT Mono", "Noto Sans SC", "Noto Sans TC", Consolas, monaco, monospace;
}
 
#top-bar > div > ul > :is(li, li:hover, li:focus, li.sfhover, li:focus-within) > ul > li > a {
  display: flex;
  align-items: center;
}
#login-status #account-options ul {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  height: 100%;
}
#login-status #account-options ul li {
  width: var(--user-drop-column-width);
  height: var(--user-drop-row-height);
  background: rgba(var(--user-drop-bg), .8);
  color: rgba(var(--user-drop-txt));
  transition: background var(--global-duration), color var(--global-hover-duration);
}
#login-status #account-options ul li:is(:hover, :focus, :active) {
  background-color: rgba(var(--user-hover-drop-bg));
  color: rgba(var(--user-hover-drop-txt));
  transition: background var(--global-hover-duration), color var(--global-hover-duration);
}
#login-status #account-options ul li a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
}
#login-status :is(.login-status-create-account, .login-status-sign-in) {
  display: flex;
  position: absolute;
  top: 100%;
  right: 0;
  height: var(--user-drop-height);
  width: var(--user-drop-width);
  font-size: var(--global-font-size);
  color: rgb(var(--user-drop-txt));
  text-align: center;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--global-duration), background var(--global-duration);
}
#login-status:is(:hover, :focus,:focus-within) :is(.login-status-create-account, .login-status-sign-in) {
  pointer-events: auto;
  opacity: 1;
  transition: opacity var(--global-hover-duration), background var(--global-duration);
}
#login-status .login-status-create-account {
  right: var(--user-drop-width);
}
#login-status :is(.login-status-create-account, .login-status-sign-in):is(:hover, :focus) {
  background: rgb(var(--user-hover-drop-bg));
  color: rgb(var(--user-hover-drop-txt));
  transition: opacity var(--global-hover-duration), background var(--global-hover-duration);
}
h1 { font-size: 2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em;}
h6 { font-size: 1em; }
table[style^="margin:0;"],
table[style^="margin:0;"] :is(tbody, tr, td) {
  display: contents;
}
#toc {
  display: block;
  width: fit-content;
  margin: .5rem 0;
  padding: 0;
}
#toc.floatleft {
  margin: .5rem 1rem .5rem 0;
}
#toc.floatright {
  margin: .5rem 0 .5rem 1rem;
}
#toc .title, #toc #toc-list {
  margin: 0;
}
.achbox-medals, .achbox-plaques {
  --wrap-bgcl-000: rgb(var(--global-pale-color));
  --wrap-bgcl-111: var(--wrap-bgcl-000);
  --wrap-bgcl-222: var(--wrap-bgcl-000);
  --text-shadow111: rgb(var(--global-dark-color));
  --text-shadow222: rgb(var(--global-light-color));
}
.sd-container {
  --sd-border: var(--global-txt);
  --sd-symbol: var(--sd-border);
  --sd-bullets: var(--sd-border);
  --sd-text: var(--dark-ui-txt);
}
.extrabox {
  --box-border: var(--global-border);
  --box-shadow: var(--global-border);
}
.wrapper {
  --cecs-dark: var(--global-dark-color);
  --cecs-light: var(--global-pale-color);
  --swatch-text-general: var(--global-txt);
}
 
#container-wrap-wrap {
    position: relative;
}
#extra-div-1, #extra-div-2, #extra-div-3, #extra-div-4 {
    position: absolute;
    z-index: -1;
    width: 50%;
    height: 80vh;
    background: rgb(var(--dark-ui-bg));
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-size: auto 100%;
    mask-repeat: repeat-x;
    mask-size: auto 100%;
}
#extra-div-1 {
    top: 0;
    left: 0;
    -webkit-mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_bg-2b.svg");
    mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_bg-2b.svg");
}
#extra-div-2 {
    top: 0;
    right: 0;
    -webkit-mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_bg-2a.svg");
    mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_bg-2a.svg");
}
#extra-div-3 {
    bottom: 0;
    left: 0;
    -webkit-mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_bg-2b.svg");
    mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_bg-2b.svg");
    rotate: 180deg;
}
#extra-div-4 {
    bottom: 0;
    right: 0;
    -webkit-mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_bg-2b.svg");
    mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_bg-2b.svg");
    rotate: 180deg;
}
#header {
    grid-template-rows: auto auto;
    top: calc(0px - var(--header-height) - var(--topbar-height));
    transition: top var(--global-duration);
}
#header:is(:hover, :focus-within) {
    top: 0;
    transition: top var(--global-hover-duration);
}
#header h1, #top-bar, #search-top-box, #login-status {
    position: relative;
    top: 0;
}
#header-extra-div-3 {
    pointer-events: auto;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1rem;
}
#header-extra-div-1 {
    background: rgb(var(--header-bg));
    border: none;
    box-shadow: 0 0 6rem rgb(var(--global-black-color));
}
#header h2 {
    display: none;
}
#top-bar > div > ul > :is(li, li:hover, li:focus, li.sfhover, li:focus-within) > ul > li a {
    background: rgb(var(--dropdown-bg));
}
#side-bar {
    --global-border-width: 0;
    padding-top: var(--sidebar-width);
}
#side-bar::before {
    width: calc(var(--header-ui-size) * 0.7);
}
:is(#side-bar, #side-bar:hover, #side-bar:focus-within)::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--sidebar-width);
    background: rgba(var(--menu-txt));
    -webkit-mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_sidebar.svg");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 80%;
    mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_sidebar.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 80%;
}
#side-bar .side-block.media > div > a {
    overflow: hidden;
}
#side-bar .side-block.media > div > a > img {
    position: relative;
    transform: translateX(-20rem);
    filter: drop-shadow(rgb(var(--menu-txt)) 20rem 0);
}
:is(#side-bar, #interwiki) .heading,
#side-bar .collapsible-block a.collapsible-block-link {
    padding: 0 .25rem;
    font-size: 1rem;
    font-weight: 900;
}
#side-bar :is(.collapsible-block-folded, .collapsible-block-unfolded-link) .collapsible-block-link:is(:hover, :focus) {
    background: rgb(var(--dark-ui-bg));
}
#content-wrap {
    width: var(--content-width);
    max-width: 100%;
    margin: 0 auto;
    background: rgb(var(--light-ui-bg));
    padding: var(--banner-height) 1rem 1rem;
    box-sizing: border-box;
}
#main-content {
    width: 100%;
    background: rgb(var(--global-bg));
}
#extra-div-6 {
    writing-mode: vertical-rl;
    font-family: var(--banner-font);
    font-size: var(--banner-title-size);
    line-height: 1;
    letter-spacing: -.15em;
    position: absolute;
    top: calc(var(--header-height) + var(--topbar-height));
    left: 0;
    width: 100%;
    height: var(--banner-height);
}
#extra-div-6 span {
    font-size: var(--banner-subtitle-size);
    letter-spacing: -.15em;
}
#extra-div-6::before {
    content: var(--banner-title-1);
    display: block;
    position: absolute;
    left: 50%;
    top: calc(50% - 8rem);
}
#extra-div-6::after {
    content: var(--banner-title-2);
    display: block;
    position: absolute;
    right: 50%;
    bottom: calc(50% - 8rem);
}
#extra-div-6 span::before {
    content: var(--banner-subtitle-1);
    display: block;
    position: absolute;
    left: calc(50% - var(--banner-title-size));
    top: calc(50% - 6.25rem);
}
#extra-div-6 span::after {
    content: var(--banner-subtitle-2);
    display: block;
    position: absolute;
    left: calc(50% - var(--banner-title-size) - var(--banner-subtitle-size));
    top: calc(50% - 6.25rem);
}
#breadcrumbs {
    text-align: center;
}
#page-title, .meta-title {
    font-family: var(--title-font);
    font-size: var(--page-title-size);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.1rem;
    padding: 0;
    border: none;
    position: relative;
    z-index: 1;
    width: fit-content;
    max-width: calc(100% - 7rem);
    margin: 1.5rem auto 2.5rem;
}
.meta-title {
    max-width: calc(100% - 5rem);
}
.meta-title p {
    display: contents;
}
#page-title::after,
.meta-title::after {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: -2.5rem;
    right: -2.5rem;
    height: 0;
    border-top: 1.8rem solid transparent;
    border-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_line.svg") 100% 25% 0 /1.8rem 3.375rem 0;
}
#page-content {
    padding: 0 1rem 4rem;
    box-sizing: border-box;
    position: relative;
}
.seal {
    position: absolute;
    background: rgb(var(--bright-ui-bg));
    -webkit-mask-image: var(--seal-mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-image: var(--seal-mask);
    mask-repeat: no-repeat;
    mask-size: 100%;
    pointer-events: none;
}
.seal-1 {
    --seal-mask: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_seal-1.svg");
    width: 7.5rem;
    height: 7.5rem;
    bottom: -6rem;
    right: 1rem;
    rotate: -17deg;
}
.seal-2 {
    --seal-mask: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_seal-2.svg");
    width: 2rem;
    height: 4rem;
    bottom: -3.5rem;
    left: 0;
    rotate: 24deg;
}
.seal-3 {
    --seal-mask: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_seal-3.svg");
    width: 3rem;
    height: 5.5rem;
    bottom: -1.5rem;
    right: -0.75rem;
    rotate: 0deg;
}
.seal-4 {
    --seal-mask: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_seal-4.svg");
    width: 3rem;
    height: 7.5rem;
    bottom: -6rem;
    left: 2.5rem;
    rotate: -3deg;
}
div.page-rate-widget-box .rate-points {
    font-weight: 900;
}
.creditBottomRate .page-rate-widget-box {
    border: none;
}
:is(.image-block,.scp-image-block) :is(.image-caption,.scp-image-caption) {
    background: rgb(var(--bright-ui-bg));
    color: rgb(var(--bright-ui-txt));
}
.yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav {
    border: none;
}
:is(blockquote, .blockquote, div.blockquote, [class*=blockquote], .quote) {
    background: rgb(var(--global-bg));
    color: rgb(var(--global-txt));
    border: var(--global-border-width) solid rgb(var(--global-border));
}
.shadow {
    box-shadow: 0 .2rem .5rem rgba(var(--global-dark-color), .4);
}
.dropshadow {
    box-shadow: 0 .2rem 1rem rgba(var(--global-dark-color), .3);
}
.warn {
    background: rgb(var(--bright-ui-bg));
    color: rgb(var(--bright-ui-txt));
}
.pattern {
    position: relative;
    z-index: 0;
}
.pattern::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    pointer-events: none;
    background: rgba(var(--bright-ui-bg), .05);
    -webkit-mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_bg.svg");
    -webkit-mask-repeat: repeat;
    -webkit-mask-size: 3rem;
    mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_bg.svg");
    mask-repeat: repeat;
    mask-size: 3rem;
}
.line {
    box-shadow: inset 0 0 0 0.08rem rgb(var(--global-border)), inset 0 0 0 0.16rem rgb(var(--global-bg)), inset 0 0 0 0.24rem rgb(var(--global-border));
}
.seal-hr {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}
.seal-hr hr {
    width: 3rem;
    height: 3rem;
    margin: 0;
    border: none;
    background: rgb(var(--bright-ui-bg));
    -webkit-mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_seal-1.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_seal-1.svg");
    mask-repeat: no-repeat;
    mask-size: 100%;
}
.seal-hr::before, .seal-hr::after {
    content: "";
    display: block;
    flex: 1;
    height: 0;
    border-top: var(--global-border-width) solid rgb(var(--global-border));
}
.double-hr hr {
    margin: 0.2rem 0;
    height: 0.08rem;
    border: var(--global-border-width) solid rgb(var(--global-border));
}
.kong {
    margin-top: 3rem;
}
#main-content .page-tags,
#page-info-break,
#page-options-container,
#action-area {
    background: rgb(var(--light-ui-bg));
    margin: 0;
}
#main-content #page-content + div {
    padding-top: 4rem;
}
#main-content .page-tags span {
    border: none;
}
#page-options-container {
    padding-top: .5rem;
}
#page-info {
    width: 100%;
}
.page-watch-options {
    margin-bottom: 1rem;
}
#page-options-container .page-options-bottom,
#page-options-container .page-options-bottom a,
#page-options-container .page-options-bottom a#more-options-button {
    border: none;
    font-size: inherit;
}
#action-area {
    padding: 2rem 0;
}
a.action-area-close {
    top: 2rem;
}
#edit-page-form, #new-post-form {
    --light-ui-bg: var(--global-bg);
    --light-ui-txt: var(--global-txt);
    --btn-bg: var(--global-bg);
    --btn-txt: var(--global-txt);
    background: rgb(var(--global-bg));
    color: rgb(var(--global-txt));
    border: none;
}
.preview-message {
    top: 0;
    z-index: 9;
}
#footer {
    position: relative;
    border: none;
    box-shadow: 0 0 6rem rgb(var(--global-black-color));
}
#license-area {
    position: relative;
    --link-primary: var(--bottombar-txt);
    --link-hover: var(--bottombar-txt);
    --link-visited: var(--bottombar-txt);
}
 
/* 纹样标题-通用 */
h1, h2, h3, h4, h5, h6, :is(.bibitems, .footnotes-footer) .title {
    font-weight: 900;
}
.styled-title :is(h1, h2, h3, h4, h5, h6),
.styled-title :is(.bibitems, .footnotes-footer) .title {
    margin: 1rem 0;
    line-height: 1;
    border-left: var(--global-border-width) solid rgb(var(--bright-ui-bg));
    padding-left: 0.125em;
    box-sizing: border-box;
    width: fit-content;
}
.styled-title :is(.bibitems, .footnotes-footer) .title {
    margin-top: 1.25rem;
}
.styled-title.center :is(h1, h2, h3, h4, h5, h6),
.styled-title.center :is(.bibitems, .footnotes-footer) .title {
    border: none;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: calc(100% - 5.445em);
}
.styled-title.right :is(h1, h2, h3, h4, h5, h6),
.styled-title.right :is(.bibitems, .footnotes-footer) .title {
    border-left: none;
    padding-left: 0;
    border-right: var(--global-border-width) solid rgb(var(--bright-ui-bg));
    padding-right: 0.125em;
    margin-left: auto;
}
 
/* 纹样标题-H1 */
.styled-title h1,
.styled-title :is(.bibitems, .footnotes-footer) .title {
    position: relative;
    max-width: calc(100% - 2.7225em);
}
.styled-title.center h1
.styled-title.center :is(.bibitems, .footnotes-footer) .title {
    max-width: calc(100% - 5.445em);
}
.styled-title h1::after,
.styled-title :is(.bibitems, .footnotes-footer) .title::after,
.styled-title.center h1::before,
.styled-title.center :is(.bibitems, .footnotes-footer) .title::before {
    content: "";
    display: block;
    width: 2.66em;
    height: 1.5em;
    position: absolute;
    top: -0.125em;
    left: calc(100% + 0.0625em);
    background: rgb(var(--bright-ui-bg));
    -webkit-mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_line-r.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: auto 100%;
    mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_line-r.svg");
    mask-repeat: no-repeat;
    mask-size: auto 100%;
}
.styled-title:is(.center, .right) h1::after,
.styled-title:is(.center, .right) :is(.bibitems, .footnotes-footer) .title::after {
    left: auto;
    right: calc(100% + 0.0625em);
    -webkit-mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_line-l.svg");
    mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_line-l.svg");
}
 
@media only screen and (max-width: 768px) {
    :root {
        --page-title-size: 2rem;
    }
    .seal-1 {
        width: 5.5rem;
    }
    .styled-title h1,
    .styled-title :is(.bibitems, .footnotes-footer) .title {
        max-width: calc(100% - 2em);
    }
    .styled-title.center h1,
    .styled-title.center :is(.bibitems, .footnotes-footer) .title {
        max-width: calc(100% - 4em);
    }
    .styled-title h1::after,
    .styled-title :is(.bibitems, .footnotes-footer) .title::after,
    .styled-title.center h1::before,
    .styled-title.center :is(.bibitems, .footnotes-footer) .title::before {
        width: 2em;
        height: 1.125em;
        top: 0;
    }
}