Level M6C-5

+ 版式代码

/* 基础设置 */
@charset "UTF-8"; /* 声明字符编码为UTF-8 */
 
/* 引入第三方CSS文件 */
@import url("https://backrooms-to-dv.wikidot.com/local--files/theme:fixed-test/CSS.css"); /* 基础样式文件 */
@import url("https://fastly.jsdelivr.net/gh/Etinjat/CSS@Backrooms/003v_THEME-liminal_new-BHL.css"); /* Backrooms主题扩展样式 */
 
/* 引入Google字体 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap'); /* 主字体 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap'); /* 简体中文无衬线体 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@100;300;400;500;700;900&display=swap'); /* 简体中文衬线体 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap'); /* 繁体中文无衬线体 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@100;300;400;500;700;900&display=swap'); /* 繁体中文衬线体 */
 
/* 根变量定义 */
:root {
   --theme-base: "black-highlighter"; /* 基础主题名称 */
   --theme-id: "br-m6c"; /* 主题ID */
   --theme-name: "BR M6C Theme"; /* 主题显示名称 */
 
   --logo-image: url("https://img.cdn1.vip/i/697ed3ea7e83b_1769919466.webp"); /* 网站Logo */
   --header-title: "The Backrooms M6C"; /* 主标题 */
   --header-subtitle: "你或将来到这里"; /* 副标题 */
 
    /* 字体栈定义 */
    --body-font: Inter, Noto Sans SC, Arimo, Verdana, Geneva, sans-serif; /* 正文字体 */
    --header-font: Inter, Noto Sans SC, Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif; /* 标题字体 */
    --title-font: var(--header-font); /* 同标题字体 */
    --mono-font: Recursive, 幼圆, Noto Serif SC, Consolas, monaco, monospace; /* 等宽字体 */
 
    /* 颜色变量定义(RGB格式) */
    --white-monochrome: 245, 245, 245; /* 实际用作灰白色 */
    --pale-gray-monochrome: 235, 235, 235; /* 浅灰色 */
    --light-gray-monochrome: 180, 180, 180; /* 中灰色 */
    --gray-monochrome: 120, 120, 120; /* 深灰色 */
    --black-monochrome: 30, 30, 30; /* 实际用作黑色 */
    --bright-accent: 80, 80, 100; /* 强调色 */
    --medium-accent: 100, 100, 120; /* 中等强调色 */
    --dark-accent: 60, 60, 80; /* 深强调色 */
    --pale-accent: 150, 150, 170; /* 浅强调色 */
    --dark-gray-monochrome: 90, 90, 90; /* 深灰色 */
    --light-pale-gray-monochrome: 220, 220, 220; /* 浅灰黑色 */
    --very-light-gray-monochrome: 200, 200, 200; /* 非常浅的灰色 */
 
    /* 渐变效果 */
    --gradient-header: linear-gradient(to top,
      rgba(var(--pale-gray-monochrome)) 0%,
      rgba(var(--pale-gray-monochrome), 0.20) 100%
    ); /* 顶部渐变 */
 
    /* 组件颜色变量 */
    --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: 0, 160, 230; /* 链接颜色(蓝色系) */
    --hover-link-color: 0, 230, 255; /* 悬停链接颜色 */
 
    /* 背景渐变距离 */
    --background-gradient-distance: 0rem; /* 无渐变距离 */
 
    /* 斜条纹效果(当前未使用) */
    --diagonal-stripes: linear-gradient(transparent 0);
}
 
/* 页面主体背景样式 */
#skrollr-body {
   background-image: radial-gradient(circle, rgb(var(--pale-gray-monochrome)) 20%, transparent 0); /* 圆点图案 */
   background-repeat: repeat; /* 重复平铺 */
   background-size: 0.25em 0.25em; /* 点阵大小 */
   width: 100%;
   height: 7.5rem;
}
 
/* 侧边栏图片样式 */
#side-bar .side-block div a img {
   filter: invert(1)
brightness(0.8); /* 图片灰度化 */
}
 
/* 主容器样式 */
#container {
   background-image: radial-gradient(circle, rgb(var(--pale-gray-monochrome), 0.40) 50%, transparent 0); /* 半透明点阵 */
   background-size: 0.25em 0.25em; /* 点阵大小 */
   background-repeat: repeat; /* 重复平铺 */
   background-attachment: fixed; /* 固定背景 */
}
 
/* 页面底部按钮样式 */
div#page-options-bottom-2 > a,
div#page-options-bottom > a {
   border-radius: 0em; /* 无圆角 */
   -moz-border-radius: 0em; /* Firefox兼容 */
   border: none; /* 无边框 */
}
 
/* 底部按钮交互状态 */
div#page-options-bottom-2 > a:active,
div#page-options-bottom-2 > a:hover,
div#page-options-bottom > a:active,
div#page-options-bottom > a:hover {
   border: none; /* 保持无边框 */
}
 
/* 顶部区域设置 */
#header, #top-bar {
   background-attachment: scroll; /* 背景不固定 */
}
 
/* 头部区域样式 */
#header {
   background-image: none; /* 无背景图 */
}
 
/* 头部伪元素(用于显示Logo) */
#header::before {
   content: ""; /* 必须内容 */
   position: absolute; /* 绝对定位 */
   height: 100%; /* 全高 */
   width: 100%; /* 全宽 */
   left: 0; /* 左对齐 */
   top: 0; /* 顶部对齐 */
   background-image: var(--logo-image); /* 使用Logo变量 */
   background-size: auto 16rem; /* 自动宽度，高度16rem */
   background-position: center; /* 居中显示 */
   background-repeat: no-repeat; /* 不重复 */
   opacity: 0.4; /* 40%透明度 */
}
 
/* 主标题样式 */
#header h1, #header h1 a {
   position: absolute; /* 绝对定位 */
   top: 1rem; /* 距顶部1rem */
   margin: 0; /* 无外边距 */
   width: 100%; /* 全宽 */
   display: flex; /* 弹性布局 */
   justify-content: center; /* 内容居中 */
   z-index: 0; /* 底层 */
}
 
/* 副标题样式 */
#header h2, #header h2 span, #header h2 span::before {
   position: absolute; /* 绝对定位 */
   top: 2rem; /* 距顶部2rem */
   margin: 0; /* 无外边距 */
   width: 100%; /* 全宽 */
   display: flex; /* 弹性布局 */
   justify-content: center; /* 内容居中 */
}
 
/* 标题文字阴影 */
#header h1 a::before, #header h2 span::before {
   text-shadow: .063rem 0.1rem 0.1rem rgba(255, 255, 255, 0.5); /* 黑色阴影 */
}
 
/* 页脚样式 */
#footer{
   color: rgb(var(--pale-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(--medium-accent), .25); /* 半透明背景 */
}
 
/* 顶部导航菜单链接样式 */
#top-bar div.top-bar > ul > li > a,
#top-bar div.mobile-top-bar > ul > li > a {
   color: rgb(var(--black-monochrome)); /* 白色文字 */
}
 
/* 顶部导航菜单悬停状态(有语法错误) */
#top-bar div.top-bar > ul > li > a:hover,
#top-bar div.mobile-top-bar > ul > li > a:hover {
    color: rgb(var(--pale-gray-monochrome)); /* 应修复为var(--pale-gray-monochrome) */
}
 
/* 顶部导航菜单悬停状态 */
#top-bar div.top-bar > ul > li:hover > a,
#top-bar div.mobile-top-bar > ul > li:hover > a {
    color: rgb(var(--pale-gray-monochrome)); /* 浅灰色文字 */
}
 
/* 登录状态文字样式 */
#login-status {
    color: rgb(var(--black-monochrome)); /* 白色文字 */
}
 
#login-status a {
    color: rgb(var(--black-monochrome)); /* 白色链接 */
}
 
#login-status ul a {
    color: rgb(var(--pale-gray-monochrome)); /* 浅灰色链接 */
}
 
/* 账户按钮样式 */
#account-topbutton {
    color: rgb(var(--black-monochrome)); /* 白色文字 */
}
 
/* 维基内容表格样式 */
table.wiki-content-table th {
    background-color: rgb(200, 220, 235) !important; /* 改为明亮的蓝色背景 */
    color: rgb(var(--black-monochrome)); /* 保持白色文字 */
    border-color: rgb(var(--black-monochrome)); /* 白色边框 */
}
 
/* SCP图片块样式 */
.scp-image-block {
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); /* 阴影效果 */
}
 
/* 引用块样式 - 添加20%透明度的青绿色背景 */
blockquote,
div.blockquote {
    background-color: rgba(0, 200, 255, 0.2); /* 20%透明度的青蓝色背景 */
    color: inherit; /* 继承文字颜色 */
    padding: 1rem; /* 适当的内边距 */
    margin: 1rem 0; /* 外边距 */
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); /* 保留原有阴影效果 */
    border-color: rgb(0, 255, 190) !important; /* 蓝色边框 */
}
 
/* 风格化引用块 - 修改左侧边框为蓝色 */
.styled-quote {
   background-color: rgb(var(--pale-gray-monochrome)); /* 浅灰背景 */
   border-left: 0.5rem solid rgb(0, 190, 255); /* 左侧蓝色边框 */
   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(0, 0, 10); /* 黑色背景 */
   border-left: 0.5rem solid rgb(0, 80, 120); /* 稍深的蓝色边框保持层次 */
   color: rgb(255, 255, 255); /* 白色文字提高对比度 */
   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(55,55,55); /* 深灰背景 */
   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(--white-monochrome)); /* 白色文字 */
}
 
/* 亮色内容块 */
.lightblock {
   background-color: rgb(0, 190, 255); /* 蓝色背景 */
   color: rgb(0, 0, 0); /* 黑色文字提高可读性 */
   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)); /* 链接颜色 */
}
 
/* 安全/危险等级容器样式 */
.sd-container {
    --sd-border:var(--gray-monochrome); /* 边框颜色 */
    --sd-text:0,0,0; /* 文字颜色 */
    --sd-symbol:var(--sd-text); /* 符号颜色 */
    --sd-bullets:var(--sd-text); /* 项目符号颜色 */
    --sd-symbol: var(--sd-border) !important; /* 覆盖符号颜色 */
    --sd-symbol-secondary: 255, 255, 255; /* 次要符号颜色 */
}
 
/* 侧边栏图片反转效果 */
#side-bar .side-block div a img {
    filter: invert(calc(230/255)); /* 图片颜色反转(程度约90%) */
}
 
/* 新建页面链接（不存在链接）样式 */
a.newpage {
   background: transparent; /* 透明背景 */
   text-decoration: none; /* 无下划线 */
   color: rgb(255, 180, 0) !important; /* 红色文字，使用!important确保覆盖其他样式 */
}
 
/* 新建页面链接悬停状态 */
a.newpage:hover {
   color: rgb(255, 180, 0) !important; /* 保持橙色 */
   background-color: rgba(200, 255, 0, 0.1); /* 添加淡黄绿色背景提高可识别性 */
}
 
/* 深色边框块样式 - 深灰背景+亮色边框 */
.dark-borderblock {
    background-color: rgb(55,55,55); /* 深灰色背景 */
    color: rgb(255, 255, 255); /* 白色文字确保可读性 */
    padding: 0.01rem 1rem; /* 紧凑的内边距 */
    margin: 0.5rem 0 0.5rem 0.25rem; /* 外边距设置，左侧稍大 */
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); /* 轻微阴影增加层次感 */
    border: solid 0.3rem rgb(0,190,255); /* 亮色粗边框突出显示 */
}
 
/* 亮色边框块样式 - 亮色背景+深色边框 */
.light-borderblock {
    background-color: rgb(0,190,255); /* 亮色背景 */
    color: rgb(0, 0, 0); /* 黑色文字形成对比 */
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    border: solid 0.3rem rgb(55,55,55); /* 深色边框 */
}
 
/* 带边框的Logo块样式 */
.border-logoblock {
    padding: 0.01rem 1rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); /* 阴影效果 */
    color: rgb(255, 255, 255); /* 白色文字 */
    margin: 0.5rem 0 0.5rem 0.25rem;
    display: block; /* 块级显示 */
    position: relative; /* 相对定位为伪元素定位做准备 */
    background-color: rgb(55,55,55); /* 深灰背景 */
    border: solid 0.3rem rgb(0,190,255); /* 亮色边框 */
}
 
/* Logo块的背景水印效果 - 放大2倍 */
.border-logoblock::after {
    content: ""; /* 伪元素必需属性 */
    float: center; /* 居中浮动 */
    border: solid 2px #0000; /* 透明边框 */
    background: url(https://i.mituw.com/imgs/2026/02/23/dfadd42ba55f94ce.png) center/50% no-repeat; /* Logo水印放大2倍 */
    opacity: 0.25; /* 半透明效果 */
    top: 0; /* 覆盖整个父元素 */
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute; /* 绝对定位 */
    z-index: 1; /* 置于内容下层 */
}
 
/* 基础Logo块样式（无边框版） */
.logoblock {
    padding: 0.01rem 1rem;
    color: rgb(255, 255, 255);
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    margin: 0.5rem 0 0.5rem 0.25rem;
    display: block;
    position: relative;
    background-color: rgb(55,55,55); /* 深灰背景 */
}
 
/* 基础Logo块的水印效果 */
.logoblock::after {
    content: "";
    float: center;
    border: solid 2px #0000;
    background: url(https://i.mituw.com/imgs/2026/02/23/dfadd42ba55f94ce.png) center/50% no-repeat;
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
}
 
/* 标题块样式 - 用于章节标题 */
.titleblock {
    background-color: rgb(55,55,55); /* 深灰背景 */
    color: rgb(255,255,255); /* 白色文字 */
    padding: 0.5rem 1rem 0.10rem; /* 上右下左内边距 */
    margin: 1.5rem 0rem 0.5rem 0rem; /* 较大的上外边距 */
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5); /* 较深的阴影 */
    border: solid rgb(0,190,255) 2px; /* 亮色细边框 */
}
 
/* 标题框样式 - 配合titleblock使用 */
.titlebox {
    color: rgb(0,0,0); /* 深灰文字 */
    position: relative; /* 相对定位 */
    top: -1.6rem; /* 上移与titleblock重叠 */
    background-color: rgb(0,190,255); /* 亮色背景 */
    padding: 0.25rem 1rem; /* 内边距 */
    line-height: 0.1rem; /* 紧凑的行高 */
}
 
/* 基础边框块样式 */
.borderblock {
    background-color: rgb(55,55,55); /* 深灰背景 */
    color: rgb(255, 255, 255); /* 白色文字 */
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    border: solid 0.3rem rgb(0,190,255); /* 亮色粗边框 */
}
 
/* 存在链接的悬停效果 */
a:not(.newpage):hover {
    background-color: rgba(0, 230, 255, 0.1) !important; /* 10%透明度的青蓝色背景 */
    transition: background-color 0.2s ease; /* 添加平滑过渡效果 */
}
 
/* 确保侧边栏链接也有相同效果 */
#side-bar a:not(.newpage):hover {
    background-color: rgba(0, 230, 255, 0.1) !important;
}
 
/* 顶部菜单链接悬停效果 */
#top-bar a:hover,
#top-bar div.mobile-top-bar a:hover {
    background-color: rgba(0, 230, 255, 0.1) !important;
}
 
/* 顶栏链接默认状态（未悬停） */
#top-bar div.top-bar > ul > li > a,
#top-bar div.mobile-top-bar > ul > li > a {
    color: rgb(80, 80, 80) !important; /* 深灰色文字 */
    transition: color 0.2s ease; /* 添加颜色过渡效果 */
}
 
/* 顶栏链接悬停状态（保持原有悬停效果） */
#top-bar div.top-bar > ul > li > a:hover,
#top-bar div.mobile-top-bar > ul > li > a:hover {
    color: rgb(var(--pale-gray-monochrome)) !important; /* 悬停时变为浅灰色 */
    background-color: rgba(0, 230, 255, 0.1) !important; /* 保持青蓝色背景悬停效果 */
}
 
/* 分页顶部(tabview)样式 - 修改选中分页为蓝色 */
.yui-navset .yui-nav .selected {
    background-color: rgb(0, 230, 255) !important; /* 选中分页蓝色背景 */
    border-color: rgb(0, 230, 255) !important; /* 蓝色边框 */
}
 
/* 选中分页的文字颜色 */
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    color: rgb(255, 255, 255) !important; /* 白色文字提高可读性 */
    background-color: transparent !important; /* 透明背景 */
}
 
/* 分页内容区域 */
.yui-navset .yui-content {
    background-color: rgba(0, 190, 255, 0.1) !important; /* 淡蓝色背景 */
    border-color: rgb(0, 190, 255) !important; /* 蓝色边框 */
}
 
/* 未选中分页悬停效果 */
.yui-navset .yui-nav a:hover {
    background-color: rgba(0, 230, 255, 0.2) !important; /* 淡蓝色悬停背景 */
}

+ 展开样式代码

:root {
    --ani-speed: 1;
}
 
/*====所有的动画===*/
 
/*基础*/
 
@keyframes rightin0{
    0%{
    transform:translateX(-1rem);
    opacity:0;
    }
    100%{
    transform:translateX(0);
    opacity:1;
    }
}
 
@keyframes upin0{
    0%{
    transform:translateY(1rem);
    opacity:0;
    }
    100%{
    transform:translateY(0);
    opacity:1;
    }
}
 
@keyframes staggerUp {
    0% { transform: translateY(1.2rem); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
 
@keyframes opacity-1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
 
@keyframes letter-spacing-opacity {
    0% {
        letter-spacing: 10px;
        opacity: 0;
    }
    100% {
        letter-spacing: 0;
        opacity: 1;
    }
}
 
@keyframes fadeInScale {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
 
@keyframes blur5 {
    0% {
        filter: blur(5px);
    }
    100% {
        filter: blur(0px);
    }
}
 
@keyframes fadeIn-sd {
  0% {clip-path: polygon(0% 0%,0% 0%, -10% 100%,0% 100%);}
  100% {clip-path: polygon(0% 0%,110% 0%, 100% 100%,0% 100%);}
  }
 
@keyframes rightin{
    0%{
    transform:translateX(-1rem);
    opacity:0;
    }
    80%{
    transform:translateX(-1rem);
    opacity:0;
    }
    100%{
    transform:translateX(0);
    opacity:1;
    }
}
 
@keyframes rras-space{
    from { transform:rotateX(90deg); }
    to{ transform:rotateX(0deg); }
}
 
@keyframes leftin{
    0%{
    transform:translateX(1rem);
    opacity:0;
    }
    80%{
    transform:translateX(1rem);
    opacity:0;
    }
    100%{
    transform:translateX(0);
    opacity:1;
    }
}
 
@keyframes leftin0{
    0%{
    transform:translateX(1rem);
    opacity:0;
    }
    100%{
    transform:translateX(0);
    opacity:1;
    }
}
 
@keyframes upin1{
    0%{
    transform:translateY(1rem);
    opacity:0;
    }
    50%{
    transform:translateY(1rem);
    opacity:0;
    }
    100%{
    transform:translateY(0);
    opacity:1;
    }
}
 
@keyframes upin2{
    0%{
    transform:translateY(1rem);
    opacity:0;
    }
    50%{
    transform:translateY(1rem);
    opacity:0;
    }
    75%{
    transform:translateY(0);
    opacity:1;
    }
    100%{
    transform:translateY(0);
    opacity:1;
    }
}
 
@keyframes sd-diamond-pattern {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.15;
  }
}
 
/*
        这什么逆天写法
        transform: translateX(-1rem);
        transform: rotate(30deg);
*/
 
@keyframes ic-right {
    0% {
        transform: translateX(-1rem) rotate(30deg);
        opacity: 0;
    }
 
    80% {
        transform: translateX(-1rem) rotate(30deg);
        opacity: 0;
    }
 
    100% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}
 
@keyframes ic-border {
    0% {
        border-bottom: rgba(var(--ic_border-color), 0) solid var(--ic_interspace);
    }
 
    100% {
        border-bottom: rgba(var(--ic_border-color), 1) solid var(--ic_interspace);
    }
}
 
@keyframes ic-add-h {
    0% {
        clip-path: polygon(50% 0%,50% 0%,50% 100%,50% 100%);
        background-color: rgba(var(--ic_border-color), 1);
    }
 
    100% {
        clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
        background-color: rgba(var(--ic_add-habitability-bg-color), 1);
    }
}
 
@keyframes ic-add-r {
    0% {
        clip-path: polygon(50% 0%,50% 0%,50% 100%,50% 100%);
        background-color: rgba(var(--ic_border-color), 1);
    }
 
    100% {
        clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
        background-color: rgba(var(--ic_add-resource-bg-color), 1);
    }
}
 
@keyframes ic-add-s {
    0% {
        clip-path: polygon(50% 0%,50% 0%,50% 100%,50% 100%);
        background-color: rgba(var(--ic_border-color), 1);
    }
 
    100% {
        clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
        background-color: rgba(var(--ic_add-signal-bg-color), 1);
    }
}
 
@keyframes border-spin-pc {
        0%{
    clip-path: polygon(0% 0%,0% 0.4rem,0% 0.4rem,0% 0%);
        transform: scaleX(5000%);
    }
 
    30% {
        clip-path: polygon(0% 0%,0% 0.4rem,100% 0.4rem,100% 0%);
        transform: scaleX(5000%);
        opacity: 1;
    }
 
    60% {
        clip-path: polygon(0% 0%,0% 100%,100% 100%,100% 0%);
        transform: scaleX(5000%);
        opacity: 1;
    }
 
    100% {
        transform: scaleX(100%);
        opacity: 1;
    }
}
 
@keyframes border-spin-mo {
    0% {
        clip-path: polygon(50% 0%,50% 100%,50% 100%,50% 0%);
    }
 
    70% {
        clip-path: polygon(50% 0%,50% 100%,50% 100%,50% 0%);
        opacity: 1;
    }
 
    100% {
        clip-path: polygon(0% 0%,0% 100%,100% 100%,100% 0%);
        opacity: 1;
    }
}
 
@keyframes rightin {
    0% {
        transform: translateX(-1rem);
        opacity: 0;
    }
 
    80% {
        transform: translateX(-1rem);
        opacity: 0;
    }
 
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
 
@keyframes rightin2 {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
 
    80% {
        transform: translateY(1rem);
        opacity: 0;
    }
 
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
 
@keyframes upin0 {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
 
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
 
@keyframes right0 {
    0% {
        transform: translateX(-1rem);
        opacity: 0;
    }
 
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
 
@keyframes fadeIn-nu-sd {
    0% {
        clip-path: polygon(0% 0%,0% 0%, -10% 100%,0% 100%);
        transform: rotateY(180deg);
    }
 
    100% {
        clip-path: polygon(0% 0%,200% 0%, 100% 100%,0% 100%);
        transform: rotateX(0deg);
        opacity: 1;
    }
}
 
@keyframes upin1 {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
 
    50% {
        transform: translateY(1rem);
        opacity: 0;
    }
 
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
 
@keyframes upin2 {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
 
    50% {
        transform: translateY(1rem);
        opacity: 0;
    }
 
    75% {
        transform: translateY(0);
        opacity: 1;
    }
 
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
 
@keyframes fadeIn-nu-exit {
    0% {
        clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 0%,0% 0%);
    }
 
    25% {
        clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 100%,0% 100%);
    }
 
    100% {
        clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
    }
}
 
@keyframes fadeIn-nu-env {
    0% {
        clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 0%,0% 0%);
    }
 
    25% {
        clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 100%,0% 100%);
    }
 
    100% {
        clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
    }
}
 
@keyframes fadeIn-nu-enti {
    0% {
        clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 0%,0% 0%);
    }
 
    25% {
        clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 100%,0% 100%);
    }
 
    100% {
        clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
    }
}
 
@keyframes no-opacity {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
 
@keyframes cecs-stripe {
    to {
        opacity: 1;
        transform: skew(45deg);
    }
}
 
@keyframes cecs-class-wrapper {
    to {
        background-color: rgb(var(--cecs-dark));
    }
}
 
@keyframes cecs-class-clip {
    0% {
        clip-path: polygon(0% 0%,0.5em 0%, 0.5em 0%,0% 0%);
    }
 
    25% {
        clip-path: polygon(0% 0%,0.5em 0%, 0.5em 100%,0% 100%);
    }
 
    100% {
        clip-path: polygon(0% 0%,100% 0%, 100% 100%,0% 100%);
    }
}
 
@keyframes cecs-border-top {
    0% {
        border-top: rgb(var(--cecs-accent)) solid 0em;
    }
 
    100% {
        border-top: rgb(var(--cecs-accent)) solid 0.2em;
    }
}
 
@keyframes fadeIn-cecs-wrapper {
    0% {
        clip-path: polygon(0% 0%,100% 0%, 100% -10%,0% 0%);
    }
 
    100% {
        clip-path: polygon(0% 0%,100% 0%, 100% 100%,0% 100%);
    }
}
 
@keyframes cocs-safety {
    to {
        height: 4.5em;
    }
}
 
@keyframes cocs-border-top {
    0% {
        border-top: rgb(var(--cocs-accent)) solid 0em;
    }
 
    100% {
        border-top: rgb(var(--cocs-accent)) solid 0.2em;
    }
}
 
@keyframes cocs-border-bottom {
    0% {
        border-bottom: rgba(var(--cocs-accent),0) solid 0em;
    }
 
    100% {
        border-bottom: rgba(var(--cocs-accent),1) solid 0.2em;
    }
}
 
@keyframes fadeIn-cecs-wrapper {
    0% {
        clip-path: polygon(0% 0%,100% 0%, 100% -10%,0% 0%);
    }
 
    100% {
        clip-path: polygon(0% 0%,100% 0%, 100% 100%,0% 100%);
    }
}
 
@keyframes paper-in{
from{transform: skew(10deg, 10deg) scale(0.8);opacity: 0;}
to{    transform: skew(0deg, 0deg) scale(1);opacity: 1;}
}
 
@keyframes paper-in-object{
from{transform: skew(0);opacity: 0;}
to{    transform: skew(45deg);opacity: 1;}
}
 
@keyframes ebcs-iets{
0%{
box-shadow: inset var(--box-shadow, 0 0.05rem 0.15rem rgba(0, 0, 0, 0));
background-color: rgb(var(--blockquote-bg-color, 0, 10, 8, 0));
opacity: 0;
}
1%{
opacity: 1;
}
100%{
box-shadow: inset var(--box-shadow, 0 0.05rem 0.15rem rgba(0, 0, 0, 0.4));
background-color: rgb(var(--blockquote-bg-color, 0, 10, 8, 0.03));
opacity: 1;
}
}
 
@keyframes dark-bd{
     to{
         border-bottom: solid 0.1em rgba(255,255,255,1);
     }
}
 
@keyframes standard-bd{
     to{
         border-bottom: solid 0.1em rgba(51,51,51,1);
     }
}
 
/*======最基本的SD=====*/
/*简写了下，另外我在思考为啥看起来一样的代码又出错了*/
 
/*
*/
 
.sd-container{animation-fill-mode: forwards;}
 
.sd-container .top-box,
.top-box-x,.top-box-e{
  animation: fadeIn-sd calc(2s / var(--ani-speed) );
}
 
.sd-container .top-text,
.top-text-x,.top-text-e{
  animation: rightin calc(2.25s / var(--ani-speed) );
}
 
.sd-container .bottom-text,
.bottom-text-x,.bottom-text-e{
  animation: rightin calc(2.5s / var(--ani-speed) );
}
 
.sd-container .diamondy,
.diamondy-x,.diamondy-e{
  animation: upin1 calc(3s / var(--ani-speed) );
}
.sd-container .diamond-image,
.diamond-image-x,.diamond-image-e
{
  animation: upin2 calc(4s / var(--ani-speed) );
}
 
.sd-container .bottom-box ul li {
    opacity: 0;
    animation: staggerUp calc(0.6s / var(--ani-speed)) ease-out forwards;
}
 
.sd-container .bottom-box ul li:nth-child(1) {
    animation-delay: calc(2.2s / var(--ani-speed));
}
 
.sd-container .bottom-box ul li:nth-child(2) {
    animation-delay: calc(2.4s / var(--ani-speed));
}
 
.sd-container .bottom-box ul li:nth-child(3) {
    animation-delay: calc(2.6s / var(--ani-speed));
}
 
.sd-container .diamond-pattern {
  animation: sd-diamond-pattern calc(0.5s / var(--ani-speed)) forwards;
  animation-delay: calc(2.5s / var(--ani-speed));
}
 
.sd-container .header-diamond .bg{
  opacity: 0;
  animation: opacity-1 calc(0.5s / var(--ani-speed)) forwards;
  animation-delay: calc(2.5s / var(--ani-speed));
}
 
/*
*/
 
/*RRAS，我寻思是*/
 
/*
{$rras}/
 
.rras--level span{
    opacity: 0;
    opacity: 0;
animation: letter-spacing-opacity calc(1s / var(--ani-speed) ) forwards , rightin0 calc(1s / var(--ani-speed) ) forwards , blur5 calc(1s / var(--ani-speed) ) forwards ;
}
 
.rras--bg {
clip-path: polygon(0% 0%,0% 0%, -10% 100%,0% 100%);
  animation: fadeIn-sd calc(1s / var(--ani-speed) ) forwards;
}
 
.rras--text{
opacity: 0;
animation: fadeInScale calc(0.7s / var(--ani-speed) ) calc(1.7s / var(--ani-speed) ) forwards;
}
 
.rras--space{
transform:rotateX(90deg);
  animation: rras-space calc(0.7s / var(--ani-speed) ) calc(1s / var(--ani-speed) ) forwards;
}
 
.rras .rras--info{
opacity: 0;
animation: fadeInScale calc(0.7s / var(--ani-speed) ) calc(1s / var(--ani-speed) ) forwards , blur5 calc(0.7s / var(--ani-speed) ) calc(1s / var(--ani-speed) ) forwards;
}
 
/{$rras}
*/
 
/*FDSD*/
 
/*
{$fdsd}/
 
.title-bar{
  animation: fadeIn-sd calc(1s / var(--ani-speed) );
}
 
.sd-image{
  animation: upin1 calc(2s / var(--ani-speed) );
}
 
.list-item{
opacity:0;
}
 
.list-item:nth-child(1) {
  animation: rightin0 calc(0.5s / var(--ani-speed) ) calc(1.5s / var(--ani-speed)) forwards;
}
 
.list-item:nth-child(2)  {
  animation: rightin0 calc(0.5s / var(--ani-speed) ) calc(1.7s / var(--ani-speed)) forwards;
}
 
.list-item:nth-child(3)  {
  animation: rightin0 calc(0.5s / var(--ani-speed) ) calc(1.9s / var(--ani-speed)) forwards;
}
 
/{$fdsd}
*/
 
/*====================岛屿分级系统================*/
/*
{$ic}/
 
.ic_wrap-box .ic_top-left-box {
    animation: right0  calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
.ic_wrap-box .ic_top-left-box .ic_text {
    animation: right0  calc(1.1s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
.ic_wrap-box .ic_h-icon {
    animation: ic-right  calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.3s / var(--ani-speed));
    opacity: 0;
}
 
.ic_wrap-box .ic_r-icon {
    animation: ic-right  calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.4s / var(--ani-speed));
    opacity: 0;
}
 
.ic_wrap-box .ic_s-icon {
    animation: ic-right  calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.5s / var(--ani-speed));
    opacity: 0;
}
 
.ic_wrap-box .ic_sd-box {
    clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 0%,0% 0%);
    animation: fadeIn-nu-exit calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
.ic_wrap-box .ic_infobox-1,.ic_wrap-box .ic_infobox-2 {
    clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 0%,0% 0%);
    animation: fadeIn-nu-env calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.1s / var(--ani-speed));
}
 
.ic_wrap-box .ic_infobox-3 {
    clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 0%,0% 0%);
    animation: fadeIn-nu-enti calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.2s / var(--ani-speed));
}
 
.ic_wrap-box .ic_sd-box .ic_text {
    animation: rightin2 calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
.ic_wrap-box .ic_sd-box .ic_sd {
    animation: rightin2 calc(1.1s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
.ic_wrap-box .ic_infobox-1 .ic_text {
    animation: rightin calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.1s / var(--ani-speed));
}
 
.ic_wrap-box .ic_infobox-1 .ic_info {
    animation: rightin calc(1.1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.1s / var(--ani-speed));
}
 
.ic_wrap-box .ic_infobox-2 .ic_text {
    animation: rightin calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.2s / var(--ani-speed));
}
 
.ic_wrap-box .ic_infobox-2 .ic_info {
    animation: rightin calc(1.1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.2s / var(--ani-speed));
}
 
.ic_wrap-box .ic_infobox-3 .ic_text {
    animation: rightin calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.3s / var(--ani-speed));
}
 
.ic_wrap-box .ic_infobox-3 .ic_info {
    animation: rightin calc(1.1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.3s / var(--ani-speed));
}
 
.ic_wrap-box .ic_add-h {
    clip-path: polygon(50% 0%,50% 0%,50% 100%,50% 100%);
    animation: ic-add-h  calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.3s / var(--ani-speed));
}
 
.ic_wrap-box .ic_add-r {
    clip-path: polygon(50% 0%,50% 0%,50% 100%,50% 100%);
    animation: ic-add-r  calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.4s / var(--ani-speed));
}
 
.ic_wrap-box .ic_add-s {
    clip-path: polygon(50% 0%,50% 0%,50% 100%,50% 100%);
    animation: ic-add-s  calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.5s / var(--ani-speed));
}
 
.ic_wrap-box .ic_add-h .ic_text {
    animation: rightin2 calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.5s / var(--ani-speed));
}
 
.ic_wrap-box .ic_add-h .ic_info {
    animation: rightin calc(1.1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.5s / var(--ani-speed));
}
 
.ic_wrap-box .ic_add-r .ic_text {
    animation: rightin2 calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.6s / var(--ani-speed));
}
 
.ic_wrap-box .ic_add-r .ic_info {
    animation: rightin calc(1.1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.6s / var(--ani-speed));
}
 
.ic_wrap-box .ic_add-s .ic_text {
    animation: rightin2 calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.7s / var(--ani-speed));
}
 
.ic_wrap-box .ic_add-s .ic_info {
    animation: rightin calc(1.1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.7s / var(--ani-speed));
}
 
.ic_addbox .ic_text,.ic_addbox .ic_info{
        opacity: 0;
}
 
.ic_top-box {
    animation: ic-border  calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
.ic_wrap-box {
    border-bottom: rgba(var(--ic_border-color), 0) solid var(--ic_interspace);
    animation: ic-border  calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
    animation-delay: calc(0.7s / var(--ani-speed));
}
 
/{$ic}
*/
 
/*====================新版层级================*/
 
/*
{$nusd}/
 
.sdnumber p {
    opacity: 0;
    animation: right0 calc(2s / var(--ani-speed));
    animation-fill-mode: forwards;
}
 
.sdnumber p {
    opacity: 0;
    animation: right0 calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
.sdnumber strong {
    opacity: 0;
    animation: right0 calc(1.2s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
.sdnumber .lines {
    opacity: 0;
    animation: fadeIn-nu-sd calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
.sd-container .exit {
    animation: fadeIn-nu-exit calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
.sd-container .environment {
    animation: fadeIn-nu-env calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
.sd-container .entity {
    animation: fadeIn-nu-enti calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
.sd-container .syntax .sd{
    animation: rightin calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
.sd-container .syntax p strong {
    animation: rightin calc(1.05s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
.class.customclass strong::after{
    animation: no-opacity calc(1.05s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
.sd-container .exit strong {
    animation: rightin2 calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
.sd-container .exit p span:nth-child(3) {
    animation: rightin2 calc(1.1s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
.sd-container .environment strong {
    animation: rightin2 calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
.sd-container .environment p span:nth-child(3) {
    animation: rightin2 calc(1.1s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
.sd-container .entity strong {
    animation: rightin2 calc(1s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
.sd-container .entity p span:nth-child(3) {
    animation: rightin2 calc(1.1s / var(--ani-speed) );
    animation-fill-mode: forwards;
}
 
@media only screen and (min-width: 1071px) {
 
    .sd-container .border {
        animation: border-spin-pc calc(1s / var(--ani-speed) );
        transform-origin: right;
    }
 
.sdnumber p {
    animation-delay: calc((2s / var(--ani-speed))*0.6);
}
 
.sdnumber p {
    animation-delay: calc((1s / var(--ani-speed))*0.6);
}
 
.sdnumber strong {
    animation-delay: calc((1.2s / var(--ani-speed))*0.6);
}
 
.sdnumber .lines {
    animation-delay: calc((1s / var(--ani-speed))*0.6);
}
 
}
 
@media only screen and (min-width: 620px) and (max-width: 1070px) {
    .sd-container .border {
        animation: border-spin-mo calc(1s / var(--ani-speed) );
        animation-fill-mode: forwards;
    }
}
 
@media only screen and (max-width: 620px) {
 
    .sd-container .border {
        animation: border-spin-mo calc(1s / var(--ani-speed) );
        animation-fill-mode: forwards;
    }
 
    .sd-container .exit {
        clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 0%,0% 0%);
        animation-delay: 0;
        animation-fill-mode: forwards;
    }
 
    .sd-container .environment {
        clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 0%,0% 0%);
        animation-delay: calc(0.5s / var(--ani-speed) );
        animation-fill-mode: forwards;
    }
 
    .sd-container .entity {
        clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 0%,0% 0%);
        animation-delay: calc(1s / var(--ani-speed) );
        animation-fill-mode: forwards;
    }
}
 
/{$nusd}
*/
 
/*===================标签式分级系统================*/
/* 难做的钥匙啊 */
 
/*
{$bqsd}/
 
.block-right{
     opacity: 0;
     transform: translateX(1rem);
     animation: leftin calc(1s / var(--ani-speed)) forwards;
}
 
.block-right .diamond-image{
     clip-path: polygon(0% 0%,0% 0%, -10% 100%,0% 100%);
     animation: fadeIn-sd calc(1s / var(--ani-speed)) forwards;
     animation-delay: calc(1s / var(--ani-speed));
}
 
.class-inner a{
     animation: letter-spacing-opacity calc(1s / var(--ani-speed)) forwards,blur5 calc(1s / var(--ani-speed)) forwards;
     filter: blur(5px);
     letter-spacing: 10px;
     opacity: 0;
}
 
.level-wrapper:nth-of-type(3){
    opacity: 0;
    animation: rightin calc(0.5s / var(--ani-speed)) ease-out forwards;
    animation-delay: calc(1s / var(--ani-speed));
}
 
.level-wrapper:nth-of-type(4){
    opacity: 0;
    animation: rightin calc(0.5s / var(--ani-speed)) ease-out forwards;
    animation-delay: calc(1.25s / var(--ani-speed))!important;
}
 
.level-wrapper:nth-of-type(5){
    opacity: 0;
    animation: rightin calc(0.5s / var(--ani-speed)) ease-out forwards;
    animation-delay: calc(1.5s / var(--ani-speed))!important;
}
 
.properties{
        transform: scale(0.8) translateY(1.2rem);
        opacity: 0;
        filter: blur(5px);
        animation: staggerUp calc(3s / var(--ani-speed)) forwards calc(2s / var(--ani-speed)),blur5 calc(2s / var(--ani-speed)) forwards calc(2s / var(--ani-speed)),fadeInScale calc(1s / var(--ani-speed)) forwards calc(2s / var(--ani-speed));
}
 
/{$bqsd}
*/
 
/*PLS现象组件*/
 
/*
{$pls}/
 
.pls .pls-title em {
    opacity: 0;
}
 
.pls .pls-title .pls-subtitle {
    clip-path: polygon(0% 0%,0% 0%, -10% 100%,0% 100%);
    animation: fadeIn-sd calc(1s / var(--ani-speed)) forwards;
}
 
.pls .pls-title em {
    opacity: 0;
    animation: letter-spacing-opacity calc(1s / var(--ani-speed)) forwards;
    animation-delay: calc(1s / var(--ani-speed));
}
 
.pls .pls-list li {
    opacity: 0;
    animation: staggerUp calc(0.6s / var(--ani-speed)) ease-out forwards;
}
 
.pls .pls-list li:nth-child(1) {
    animation-delay: calc(1.2s / var(--ani-speed));
}
 
.pls .pls-list li:nth-child(2) {
    animation-delay: calc(1.4s / var(--ani-speed));
}
 
.pls .pls-list li:nth-child(3) {
    animation-delay: calc(1.6s / var(--ani-speed));
}
 
.pls-icon {
    opacity: 0;
    animation: fadeInScale calc(0.8s / var(--ani-speed)) forwards;
    animation-delay: calc(1.8s / var(--ani-speed));
    position: relative;
}
 
.pls-icon:before {
    animation: blur5 calc(0.8s / var(--ani-speed)) forwards;
    animation-delay: calc(1.8s / var(--ani-speed));
    position: relative;
}
 
.pls-icon-title {
    opacity: 0;
    animation: staggerUp calc(0.6s / var(--ani-speed)) forwards;
    animation-delay: calc(2.2s / var(--ani-speed));
    display: inline-block;
}
 
.pls-side p span {
    opacity: 0;
    display: inline-block;
    animation: staggerUp calc(0.5s / var(--ani-speed)) forwards;
    animation-delay: calc(2.3s / var(--ani-speed));
}
 
@media screen and (max-width: 768px) {
 
.pls .pls-title em {
    animation-delay: calc(0s / var(--ani-speed));
}
 
.pls .pls-list li:nth-child(1) {
    animation-delay: calc(0.5s / var(--ani-speed));
}
 
.pls .pls-list li:nth-child(2) {
    animation-delay: calc(0.7s / var(--ani-speed));
}
 
.pls .pls-list li:nth-child(3) {
    animation-delay: calc(0.9s / var(--ani-speed));
}
 
.pls-icon {
    animation-delay: calc(1.2s / var(--ani-speed));
}
 
.pls-icon:before {
    animation-delay: calc(1.2s / var(--ani-speed));
}
 
.pls-icon-title {
    animation-delay: calc(1.8s / var(--ani-speed));
}
 
.pls-side p span {
    animation-delay: calc(1.9s / var(--ani-speed));
}
 
}
 
/{$pls}
*/
 
/*统合实体分类系统*/
 
/*
{$cecs}/
 
.class-wrapper {
    clip-path: polygon(0% 0%,0.5em 0%, 0.5em 0%,0% 0%);
    background-color: rgb(var(--cecs-light));
    animation: cecs-class-wrapper calc(1s / var(--ani-speed)) calc(4s / var(--ani-speed)) forwards , cecs-class-clip calc(1.1s / var(--ani-speed)) calc(2.9s / var(--ani-speed)) forwards;
}
 
.class-stripe {
    opacity: 0;
    transform: skew(0deg);
    animation: cecs-stripe calc(0.5s / var(--ani-speed)) calc(4s / var(--ani-speed)) forwards;
}
 
.class-label {
    z-index: 1;
    opacity: 0;
    animation: rightin0 calc(0.5s / var(--ani-speed)) calc(3.5s / var(--ani-speed)) forwards;
}
 
.class-inner {
    opacity: 0;
    animation: rightin0 calc(0.5s / var(--ani-speed)) calc(3.7s / var(--ani-speed)) forwards;
}
 
.properties-label {
    opacity: 0;
    animation: upin0 calc(0.5s / var(--ani-speed)) calc(4.2s / var(--ani-speed)) forwards;
}
 
.properties {
    animation: blur5 calc(0.5s / var(--ani-speed)) calc(4.2s / var(--ani-speed)) forwards , fadeInScale calc(0.5s / var(--ani-speed)) calc(4.2s / var(--ani-speed)) forwards;
    opacity: 0;
}
 
.wrapper .label-wrapper .hexa-outerline .hexa-midline {
    opacity: 0;
    animation: fadeInScale calc(0.5s / var(--ani-speed)) forwards;
}
 
.wrapper .label-wrapper .hexa-outerline .hexa-innerline {
    opacity: 0;
    animation: fadeInScale calc(0.5s / var(--ani-speed)) forwards;
    animation-delay: calc(0.2s / var(--ani-speed));
}
 
.wrapper div .label-wrapper .label strong {
    opacity: 0;
    animation: rightin0 calc(1s / var(--ani-speed) ) forwards;
    animation-delay: calc(0.2s / var(--ani-speed));
}
 
.cecs-wrapper {
    border-top: rgb(var(--cecs-accent)) solid 0em;
    animation: cecs-border-top calc(1s / var(--ani-speed) ) forwards;
    animation-delay: calc(0.2s / var(--ani-speed));
}
 
.cecs-wrapper .base,.cecs-wrapper .base:after {
    opacity: 0;
    animation: opacity-1 calc(1s / var(--ani-speed) ) forwards;
    animation-delay: calc(1.2s / var(--ani-speed));
}
 
.cecs-wrapper .last-stripe {
    opacity: 0;
    animation: rightin0 calc(1s / var(--ani-speed) ) forwards;
    animation-delay: calc(1.2s / var(--ani-speed));
}
 
.cecs-wrapper .text-box {
    opacity: 0;
    animation: fadeInScale calc(0.8s / var(--ani-speed)) forwards;
    animation-delay: calc(1.8s / var(--ani-speed));
}
 
.cecs-wrapper .iets:before {
    clip-path: polygon(0% 0%,100% 0%, 100% -10%,0% 0%);
    animation: fadeIn-cecs-wrapper calc(1s / var(--ani-speed) ) forwards;
    animation-delay: calc(1.8s / var(--ani-speed));
}
 
.iets-wrapper strong {
    opacity: 0;
    animation: rightin0 calc(0.5s / var(--ani-speed) ) forwards;
    animation-delay: calc(2.8s / var(--ani-speed));
}
 
.iets-wrapper .iets-val strong {
    opacity: 0;
    animation: rightin0 calc(0.5s / var(--ani-speed) ) forwards , blur5  calc(0.4s / var(--ani-speed) ) forwards;
    animation-delay: calc(2.9s / var(--ani-speed));
}
 
/{$cecs}
*/
 
/*物品*/
/* 跟HW的实体那个略微改了一下 */
 
/*
{$cocs}/
 
.cocs-wrapper + div {
    clip-path: polygon(0% 0%,0.5em 0%, 0.5em 0%,0% 0%);
    animation: cecs-class-clip calc(1.1s / var(--ani-speed)) calc(2.5s / var(--ani-speed)) forwards;
}
 
.wrapper .label-wrapper .hexa-outerline .hexa-midline {
    opacity: 0;
    animation: fadeInScale calc(0.5s / var(--ani-speed)) forwards;
}
 
.wrapper .label {
    animation: letter-spacing-opacity  calc(0.5s / var(--ani-speed) ) forwards;
    animation-delay: calc(1s / var(--ani-speed));
    opacity: 0;
}
 
.wrapper .label-wrapper .hexa-outerline .hexa-innerline {
    opacity: 0;
    animation: fadeInScale calc(0.5s / var(--ani-speed)) forwards;
    animation-delay: calc(0.2s / var(--ani-speed));
}
 
div[class*=base2] {
    height: 0;
    animation: cocs-safety calc(0.5s / var(--ani-speed)) forwards;
    animation-delay: calc(2.2s / var(--ani-speed));
}
 
div[class*=custom-color] {
    height: 0;
    animation: cocs-safety calc(0.5s / var(--ani-speed)) forwards;
    animation-delay: calc(2.2s / var(--ani-speed));
}
 
.purpose-stripe {
    opacity: 0;
    z-index: 3;
    animation: paper-in-object calc(0.4s / var(--ani-speed)) calc(3.4s / var(--ani-speed)) forwards,blur5 calc(0.5s / var(--ani-speed)) calc(3.2s / var(--ani-speed)) forwards;
}
 
.purpose-label {
    z-index: 2;
    opacity: 0;
    animation: rightin0 calc(0.5s / var(--ani-speed)) calc(3.4s / var(--ani-speed)) forwards;
}
 
.cocs-purpose {
    opacity: 0;
    z-index: 1;
    animation: fadeInScale calc(0.5s / var(--ani-speed)) calc(3s / var(--ani-speed)) forwards,blur5 calc(0.5s / var(--ani-speed)) calc(3s / var(--ani-speed)) forwards;
}
 
.purpose-inner {
    opacity: 0;
    z-index: 2;
    animation: rightin0 calc(0.5s / var(--ani-speed)) calc(3.4s / var(--ani-speed)) forwards;
}
 
.cocs-wrapper {
    border-top: rgba(var(--cocs-accent),0) solid 0em;
    animation: cocs-border-top calc(1s / var(--ani-speed) ) forwards calc(0.2s / var(--ani-speed)), cocs-border-bottom calc(1s / var(--ani-speed)) backwards calc(2.3s / var(--ani-speed));
}
 
.cocs-wrapper .base,
.cocs-wrapper .base:after {
    opacity: 0;
    animation: opacity-1 calc(1s / var(--ani-speed) ) forwards;
    animation-delay: calc(1.2s / var(--ani-speed));
}
 
.cocs-wrapper .last-stripe {
    opacity: 0;
    animation: rightin0 calc(1s / var(--ani-speed) ) forwards;
    animation-delay: calc(1.2s / var(--ani-speed));
}
 
.cocs-wrapper .text-box {
    opacity: 0;
    animation: fadeInScale calc(0.8s / var(--ani-speed)) forwards;
    animation-delay: calc(1.8s / var(--ani-speed));
}
 
.status {
    animation: blur5 calc(0.5s / var(--ani-speed)) calc(4.4s / var(--ani-speed)) forwards , fadeInScale calc(0.5s / var(--ani-speed)) calc(4.4s / var(--ani-speed)) forwards;
    opacity: 0;
}
 
.status-label {
    opacity: 0;
    animation: upin0 calc(0.5s / var(--ani-speed)) calc(4.2s / var(--ani-speed)) forwards;
}
 
/{$cocs}
*/
 
/*实体生物学分类系统*/
 
/*
{$ebcs}/
 
.ebcs{
transform: skew(10deg, 10deg);
opacity: 0;
animation: paper-in calc(0.8s / var(--ani-speed)) calc(0s / var(--ani-speed)) forwards;
}
 
.ebcs-title h2{
transform:translateX(-1rem);
    opacity:0;
animation: rightin0 calc(0.5s / var(--ani-speed)) calc(0.85s / var(--ani-speed)) forwards;
 
}
 
.ebcs-number p span{
        opacity: 0;
animation: leftin0 calc(0.5s / var(--ani-speed)) calc(0.87s / var(--ani-speed)) forwards;
}
 
.ebcs-number p strong{
letter-spacing: 10px;
        opacity: 0;
animation: letter-spacing-opacity calc(0.5s / var(--ani-speed)) calc(0.9s / var(--ani-speed)) forwards;
}
 
.ebcs-iets{
animation: ebcs-iets calc(1.5s / var(--ani-speed)) calc(1s / var(--ani-speed)) forwards;
box-shadow: inset var(--box-shadow, 0 0.05rem 0.15rem rgba(0, 0, 0, 0));
background-color: rgb(var(--blockquote-bg-color, 0, 10, 8, 0));
opacity: 0;
}
 
.ebcs-iets strong{
animation: blur5 calc(1.5s / var(--ani-speed)) calc(1s / var(--ani-speed)) forwards , opacity-1 calc(1.5s / var(--ani-speed)) calc(2s / var(--ani-speed)) forwards;
opacity: 0;
}
 
.ebcs-meta span:nth-child(1){
opacity: 0;
animation: rightin0 calc(0.5s / var(--ani-speed)) calc(2s / var(--ani-speed)) forwards;
}
 
.ebcs-meta span:nth-child(3){
opacity: 0;
animation: rightin0 calc(0.5s / var(--ani-speed)) calc(2.25s / var(--ani-speed)) forwards;
}
 
.ebcs-meta span:nth-child(5){
opacity: 0;
animation: rightin0 calc(0.5s / var(--ani-speed)) calc(2.5s / var(--ani-speed)) forwards;
}
 
.ebcs-des{
animation: fadeIn-sd calc(1s / var(--ani-speed)) calc(2.5s / var(--ani-speed)) forwards;
clip-path: polygon(0% 0%,0% 0%, -10% 100%,0% 100%);
}
 
.ebcs-img{
opacity: 0;
animation: blur5 calc(1s / var(--ani-speed)) calc(2.5s / var(--ani-speed)) forwards , fadeInScale  calc(1s / var(--ani-speed)) calc(2.5s / var(--ani-speed)) forwards;
}
 
/{$ebcs}
*/
 
/* 人物 */
/*
{$poi}/
.footerbox{
    animation: fadeIn-sd calc(1s / var(--ani-speed)) forwards;
}
 
.footerbox > h4{
    animation: fadeInScale calc(1s / var(--ani-speed)) forwards calc(1s / var(--ani-speed));
    opacity: 0;
}
 
.footerbox > h4{
    animation: fadeInScale calc(0.5s / var(--ani-speed)) forwards calc(1s / var(--ani-speed));
    opacity: 0;
}
 
.footerbox img{
    animation: blur5 calc(1s / var(--ani-speed)) forwards calc(1.5s / var(--ani-speed)), fadeInScale calc(1s / var(--ani-speed)) forwards calc(1.5s / var(--ani-speed));
    opacity: 0;
}
 
.footerflavor{
    animation: upin0 calc(0.5s / var(--ani-speed)) forwards calc(1s / var(--ani-speed));
    opacity: 0;
}
 
.footerflavor > *:not(img,hr):nth-child(1){
    animation:staggerUp calc(1s / var(--ani-speed)) forwards calc(1.8s / var(--ani-speed));
    opacity: 0;
}
 
.footerflavor > *:not(img,hr):nth-child(2){
    animation:staggerUp calc(1s / var(--ani-speed)) forwards calc(2.2s / var(--ani-speed));
    opacity: 0;
}
 
.footerflavor > *:not(img,hr):nth-child(3){
    animation:staggerUp calc(1s / var(--ani-speed)) forwards calc(2.6s / var(--ani-speed));
    opacity: 0;
}
 
.footerflavor > *:not(img):nth-child(4){
    animation:staggerUp calc(1s / var(--ani-speed)) forwards calc(3s / var(--ani-speed));
    opacity: 0;
}
 
.footerflavor > *:not(img):nth-child(5){
    animation:staggerUp calc(1s / var(--ani-speed)) forwards calc(3.4s / var(--ani-speed));
    opacity: 0;
}
 
.footerflavor > *:not(img):nth-child(6){
    animation:staggerUp calc(1s / var(--ani-speed)) forwards calc(3.8s / var(--ani-speed));
    opacity: 0;
}
 
.footerflavor > *:not(img):nth-child(7){
    animation:staggerUp calc(1s / var(--ani-speed)) forwards calc(4.2s / var(--ani-speed));
    opacity: 0;
}
 
.footerflavor > *:not(img):nth-child(8){
    animation:staggerUp calc(1s / var(--ani-speed)) forwards calc(4.6s / var(--ani-speed));
    opacity: 0;
}
 
.footerflavor > *:not(img):nth-child(9){
    animation:staggerUp calc(1s / var(--ani-speed)) forwards calc(5s / var(--ani-speed));
    opacity: 0;
}
 
.footerflavor > *:not(img):nth-child(10){
    animation:staggerUp calc(1s / var(--ani-speed)) forwards calc(5.4s / var(--ani-speed));
    opacity: 0;
}
 
.footerflavor > *:not(img):nth-child(n + 11){
    animation:staggerUp calc(1s / var(--ani-speed)) forwards calc(5.8s / var(--ani-speed));
    opacity: 0;
}
 
/{$poi}
*/
 
/* upes */
 
/*
{$upes}/
 
.phenomenon-content{
     animation: fadeIn-sd calc(1s / var(--ani-speed)) forwards;
}
 
.colmod-link-top .foldable-list-container a{
     animation: leftin calc(1.5s / var(--ani-speed)) forwards calc(-0.5s / var(--ani-speed));   
    opacity: 0;
}
 
div.colmod-content-anti,
div.colmod-content{
    animation: fadeInScale calc(1.5s / var(--ani-speed)) backwards, blur5 calc(1.3s / var(--ani-speed)) backwards!important;
}
 
.standard-border {
    border-bottom: solid 0.1em rgba(51, 51, 51, 0);
}
 
.dark-border {
    border-bottom: solid 0.1em rgba(255,255,255,0);
}
 
.dark-border:nth-of-type(1){
    animation: dark-bd calc(0.5s / var(--ani-speed)) forwards calc(1.25s / var(--ani-speed));
}
 
.standard-border:nth-of-type(1){
    animation: standard-bd calc(0.5s / var(--ani-speed)) forwards calc(1.25s / var(--ani-speed));
}
 
.phenomenon-content div[class*=level] > *{
     opacity: 0;
    animation: letter-spacing-opacity calc(0.5s / var(--ani-speed)) forwards calc(1.5s / var(--ani-speed));
}
 
.dark-border:nth-of-type(2){
    animation: dark-bd calc(0.5s / var(--ani-speed)) forwards calc(1.75s / var(--ani-speed));
}
 
.standard-border:nth-of-type(2){
    animation: standard-bd calc(0.5s / var(--ani-speed)) forwards calc(1.75s / var(--ani-speed));
}
/{$upes}
*/

生存难度：生存難度：

等级等級 0

• 安全且稳定
• 实体绝迹
• 雨雾连绵

---

如何使用：

[[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: 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 M6C-5是后室M6C层群的第6层。

描述

该层级被描述为一座位于平静海域上的混凝土孤岛，该岛屿的地面高出海平面100米左右，然而任何物体接触到海面都会立刻以类似“重置”的方式回到层级中央。整座混凝土岛屿面积接近230平方公里，地面十分平整。由于勘探技术有限，该层级远处的空间暂不能被探明。

该层级的气候凉爽而湿润，温度始终保持在5℃至17℃之间，且总是天气阴沉、一直下雨。虽然云层可能会有短时间的散开，但雨似乎从未停过。据相关报告推测¹，该层级的小雨可能有使流浪者感到镇定、宁静的作用，可以达到缓和心情、放松精神的效果。该层级内不存在昼夜循环，层级内的时间总是锁定在上午11时²。

Level M6C-5中一栋楼房的照片。

该层级的岛屿上存在一座废弃的大型城市。该城市的建筑风格类似前厅中千禧年前后新兴起的建筑风格，虽然风格较旧，但楼体却近乎完好。大楼内可被随意进入的房间内可能存在补给，但只有当有流浪者切出该层级时，补给才会随机刷新，刷新位置和数量不定。所有被上锁或堵塞的门，被强行破开后会成为一个临时的层级出口，并保持打开2分钟至30分钟，之后会恢复原本的样貌，即不可打开的门。

在岛屿正中央是一片空地，面积约1.5平方公里，其中种植了大面积的长青草坪，因此这片空地会显得生机盎然。在广场中心有一座高约10米的青灰色石碑，上面没有雕刻任何图案或字样。该区域系目前整个层级内流浪者聚集密度最大的部分。

基地、前哨和社区

M.I.C.细雨广场

• 该社区由M.I.C.创建并管理，作为该层级内规模最大的流浪者聚集地，其内部几乎聚集了该层级内的所有定居流浪者。这些流浪者的生活资源绝大部分来自M.I.C.其他基地的补给。

• 该社区的常住人口约70人，暂不接受非常住流浪者加入该社区，但仍然会为其它流浪者给予帮助。

先行者

• 该前哨由三名最初发现该层级的流浪者组成，虽不接受其他流浪者加入，但愿意为其他流浪者指引方向或提供一些有效消息。该前哨与上述的「M.I.C.细雨广场」社区每隔2天左右汇合一次，以补充必需的生活物资。

• 「先行者」的三名成员总是行踪不定，因此寻找起来比较困难。他们最常在较为远离中央空地的区域徘徊。

入口和出口

入口

• 进入Level M6C-3“积水段”中的一扇位于某家空店面的员工通道门，将会来到该层级。
• 穿行Level M6C-6的一处被明显标记的地下车库可以来到该层级。
• 无意中踩入后室M6C层群中任何一个层级中的水坑都有概率进入该层级。如果有意切入将留在原处。

出口

• 任意一处以上文中提到的方式制造的临时出口，指向后室M6C层群中任意一处较为安全的层级³。
• 从一座地下车库可以来到Level M6C-6。

脚注

1. 暂可以确定是该层级降雨造成的效果，而非完全的心理作用。

2. 仅由指南针和太阳位置推测，但并不会对其他物体的时间流动造成影响。如在该层级内，钟表可以照常运行。

3. 通常情况下，生存难度等级小于等于1。

---

作者信息

作者：Mimura Foxium
屏幕之外，文中图片由作者本人拍摄。