Level LW-1030 - “终末之城”

+ 版式代码

:root {
   --theme-base: "black-highlighter";
   --theme-id: "dark-liminal";
   --theme-name: "Dark Liminal Theme";
 
   --logo-image: url("http://backrooms-wiki.wikidot.com/local--files/component:theme/logo.svg");
   --header-title: "The Backrooms";
   --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;
 
   --white-monochrome: 18, 22, 32;
   --pale-gray-monochrome: 0, 4, 15;
   --light-gray-monochrome: 95, 95, 95;
   --gray-monochrome: 183, 186, 195;
   --black-monochrome: 230, 235, 239;
   --bright-accent: 115, 119, 129;
   --medium-accent: 183, 186, 195;
   --dark-accent: 115, 119, 129;
   --pale-accent: 115, 119, 129;
   --dark-gray-monochrome: 207, 207, 203;
   --light-pale-gray-monochrome: 11, 11, 11;
   --very-light-gray-monochrome: 40, 40, 40;
 
   --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: 230, 23, 68;
   --hover-link-color: 230, 23, 68;
 
   --background-gradient-distance: 0rem;
 
   --diagonal-stripes: linear-gradient(transparent 0);
}
 
#skrollr-body {
   background-image:
    radial-gradient(circle, rgb(var(--pale-gray-monochrome)) 50%, transparent 0);
   background-repeat: repeat;
   background-size: 0.25em 0.25em;
   width: 100%;
   height: 7.5rem;
}
 
#side-bar .side-block div a img {
   filter: grayscale(100%);
}
 
#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;
   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;
}
 
#header::before {
   content: "";
   position: absolute;
   height: 100%;
   width: 100%;
   left: 0;
   top: 0;
   background-image: var(--logo-image);
   background-size: auto 16rem;
   background-position: center;
   background-repeat: no-repeat;
   opacity: 0.4;
}
 
#header h1, #header h1 a {
   position: absolute;
   top: 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;
   margin: 0;
   width: 100%;
   display: flex;
   justify-content: center;
}
 
#header h1 a::before, #header h2 span::before {
   text-shadow: .063rem 0.1rem 0.1rem #0c0c0c;
}
 
#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(--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(var(--pale-gray-monochrome)) !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,
div.blockquote {
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-quote {
   background-color:rgb(var(--pale-gray-monochrome));
   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(--gray-monochrome));
   border-left: 0.5rem solid rgba(var(--pale-gray-monochrome));
   color:rgb(var(--white-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(--white-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));
}
 
.lightblock {
   background-color:rgb(var(--gray-monochrome));
   color:rgb(var(--white-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));
}
 
/* 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;
 
}
 
#side-bar .side-block div a img {
    filter: invert(calc(230/255));
}

+ 展开样式代码

: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}
*/

生存难度：生存難度：

等级等級 终末

• 不安全
• 大量实体与严重精神危害
• 终末

Level LW-1030是后室LW层群的第1031层。

描述

图1：一张由某个流浪者进入此层级后拍摄的照片。

Level LW-1030由一座中型沿海城市¹和郊区组成。此层级疑似有孤立效应，流浪者无法遇见其他流浪者，但同时进入层级²则可以相见。 该层级在流浪者离开或死亡后会重置。

根据M.E.G.某探索队的报告：此层级分为 市区区域 和 郊区区域 。市区区域 是大多数流浪者进入此层级后的位置，这里的面积不大³，部分建筑未完工，请不要进入。郊区区域 表现为一片森林，目前尚未探明，未确定面积，可能存在未知危险，不建议前往。层级内可能会出现一些由 液态痛苦 组成的湖，这些湖不仅会对人体造成伤害，也可能会对精神有伤害，因此如果遇到请远离。

市区区域

本层级大部分区域由城市组成，城市内部的建筑与设施主要有：

• 住宅区
• 办公楼
• 公园
• 商业区

下面是各区域详细介绍：

住宅区

住宅区在 市区区域 最为常见，目前的探索已经确认了层级内的住宅皆为普通住宅，可放心探索。住宅里一般情况下有物资⁴。住宅区会出现少量实体。

办公楼

办公楼楼主要在层级中心出现，数量有约50栋，部分办公楼是未完工状态，请不要进入未完工的办公楼，否则可能会导致任何形式的死亡⁵。其他的办公楼则可以加入，但内部可能有实体。办公楼没有物资，因此不建议进入。

公园

公园较为少见，但遍布 市区区域 。公园是此层级内较为安全的地方，一般情况下实体不会进入公园。你可以在公园里找到少量的物资⁶。

商业区

商业区是 市区区域 内最不常见的区域，通常表现为大型步行街或商场。商业区是 市区区域 内物资最丰富的地方⁷，但实体比其他区域较多，建议快速探索。

郊区区域

本层级 市区区域 外的区域由 郊区区域 组成，目前只有森林，如果发现了小镇，无论如何都请原路返回，因为那是 Level LW-1016 的入口。

有传闻指出，如果离开 市区区域 ，长时间往 郊区区域 走可能会来到 Level LW-1071 ，该出口已被确认为是可行的。

终末事件

图2：M.E.G一探索队在海边拍下的图片，可以看到远处已经出现了暴雨，这是终末事件的前兆。

图3：一张由流浪者在终末事件发生后在图1相同位置拍摄的照片⁸。

终末事件会在流浪者进入此层级后5小时到3天内出现。终末事件出现前最明显的特征为突然在远处出现并慢慢靠近的暴雨，通常情况下出现前兆后10分钟内就会发生终末事件。

终末事件发生后，层级将会变得不再安全和不稳定，大量危险实体会出现，离开层级会变得困难⁹，同时会开始下酸雨¹⁰；同时，此层级也会出现严重的精神危害，会导致流浪者出现思觉失调、精神分裂、自杀倾向等。

根据唯一一个在终末事件发生后2天仍在生存且逃离的流浪者所说，层级内会出现一个类似黑洞的不知名物体吞噬整个层级，会导致所有生物和建筑消失。

我很幸运活到了终末事件发生后2天，当时天空中突然出现一个“黑洞”，开始吞噬整个层级，我很幸运我活了下来，我不知道有多少流浪者会因此葬身于此。

—John（化名）

关于终末事件的详细介绍，你可以去看看 Phenomenon LW-6 。

基地，前哨和社区

该层级不存在已知的基地、前哨和社区。

入口和出口

入口

• 在 Level 11 中连续往北走 5-10 小时可能会来到这里。
• 在任意一个层级中闭眼同时幻想毁灭和城市会来到这里。
• 在 Level LW-1016 一直往小镇外走可能会来到此层级的 郊区区域 。

出口

• 如上述所说，在 郊区区域 找到一个小镇会进入 Level LW-1016。在一个未完工的办公楼的顶部跳下来也会前往该层级。
• 从海滩中切出可能会前往 Level 0 ，不过这通常会导致死亡而不是前往 Level 0 。
• 在一栋住宅里从窗户切出有小概率会来到 Level 11。
• 如果离开 市区区域 ，长时间往 郊区区域 走可能会来到 Level LW-1071 。

---

那么，这篇文章是谁写的呢？

作者：Edwin_0510
三张照片都是作者在布里斯班旅行时拍下的，我截取了照片的一部分，并通过简单的修改图片达成了这种效果。
这是我第二篇在Wikidot写的文，也是我第三篇有写出来的文，可能有些不好，可以去讨论区指出。

Footnotes

1. 类似于前厅里名为“布里斯班”和“黄金海岸”这两个城市的结合体

2. 经过测试，大约相差20秒内进入算同时。

3. 和Level 11无法比

4. 如果该住宅已经废弃了，则不会出现任何物资

5. 一般以被砸死为主

6. 目前只能找到杏仁水

7. 这里里有很多稀有物资

8. 我们找到这个照片时，照片已经损坏了，故此照片的色调有些奇怪

9. 出口会失效或者降低离开机会。

10. 根据幸存的流浪者所说，这些酸雨似乎永远不会停止。