SCP-4485-1

---

+ Show component code

:root {
    --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
    --body-width-on-desktop: 45.75rem;
}
@media only screen and (min-width: 56.25rem) {
    #content-wrap {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
           -moz-box-orient: horizontal;
           -moz-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        width: -webkit-calc(100vw - (100vw - 100%));
        width: -moz-calc(100vw - (100vw - 100%));
        width: calc(100vw - (100vw - 100%));
        min-height: -webkit-calc(100vh - -webkit-calc(var(--final-header-height-on-desktop, 10.125rem)));
        min-height: -moz-calc(100vh - -moz-calc(var(--final-header-height-on-desktop, 10.125rem)));
        min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
        -webkit-box-flex: 2;
        -webkit-flex-grow: 2;
           -moz-box-flex: 2;
            -ms-flex-positive: 2;
                flex-grow: 2;
        height: auto;
        position: initial;
        margin: 0 auto;
        max-width: inherit;
        margin-left: -11em;
        margin-left: -webkit-calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
        margin-left: -moz-calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
        margin-left: calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
    }
 
    #main-content {
        position: initial;
        max-height: 100%;
        padding: 2rem 1rem;
        width: 45.75rem;
        width: var(--body-width-on-desktop, 45.75rem);
        max-width: 45.75rem;
        max-width: var(--body-width-on-desktop, 45.75rem);
        margin: 0 auto;
    }
 
    #page-content {
            max-width: min(90vw, 45.75rem);
            max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
    }
 
    #side-bar {
        -webkit-transform: translateX(-14.6rem);
           -moz-transform: translateX(-14.6rem);
            -ms-transform: translateX(-14.6rem);
             -o-transform: translateX(-14.6rem);
                transform: translateX(-14.6rem);
        -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
           -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
            -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
             -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
                transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
        -webkit-transition:
            background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms linear,
            margin 300ms linear,
            -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms linear,
            margin 300ms linear,
            -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -o-transition:
            background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms linear,
            margin 300ms linear,
            -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -moz-transition:
            transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms linear,
            margin 300ms linear,
            -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms linear,
            margin 300ms linear;
        transition:
            transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms linear,
            margin 300ms linear,
            -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        border: none;
        border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4);
        width: var(--sidebar-width-on-desktop, 13.6rem) !important;
        min-width: var(--sidebar-width-on-desktop, 13.6rem) !important;
        grid-area: side-bar;
        padding-right: 2rem;
        background-color: transparent;
        background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
        top: 0;
        max-height: 100vh;
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        padding-left: 0.5rem;
        direction: rtl;
        scrollbar-width: thin;
        -ms-scroll-chaining: none;
            overscroll-behavior: contain;
        overflow-y: scroll;
        scrollbar-color: 
            rgba(170, 170, 170, 0)  /* Thumb */
            rgba(252, 252, 252, 0); /* Track */
        scrollbar-color: 
        rgba(var(--swatch-primary-darker, 170, 170, 170), 0.1)   /* Thumb */
        rgba(var(--swatch-tertiary-color, 252, 252, 252), 0.05); /* Track */
    }
 
    #side-bar::-webkit-scrollbar-track {
        background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8);
    }
 
    #side-bar::-webkit-scrollbar,
    #side-bar::-webkit-scrollbar-thumb,
    #side-bar::-webkit-scrollbar-corner {
        width: 0.5rem;
        border-right-width: -webkit-calc(100vw + 100vh);
        border-right-width: calc(100vw + 100vh);
        border-right-style: inset;
        border-color: inherit;
        background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
    }
 
    #side-bar:hover,
    #side-bar:active {
        background-color: white;
        background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
        padding-right: 0.25rem;
        margin-right: 1.75rem;
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
            -ms-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
        -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
           -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
            -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
             -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
                transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-color: 
            rgba(170, 170, 170, 1)  /* Thumb */
            rgba(252, 252, 252, 1); /* Track */
        scrollbar-color: 
            rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
            rgb(var(--swatch-menubg-color, 252, 252, 252), 1);  /* Track */
        border-color: rgba(var(--swatch-primary-darker), 1);
    }
 
    #side-bar:focus-within {
        background-color: white;
        background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
        padding-right: 0.25rem;
        margin-right: 1.75rem;
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
            -ms-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
        -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
           -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
            -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
             -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
                transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-color: 
            rgba(170, 170, 170, 1)  /* Thumb */
            rgba(252, 252, 252, 1); /* Track */
        scrollbar-color: 
            rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
            rgb(var(--swatch-menubg-color, 252, 252, 252), 1);  /* Track */
        border-color: rgba(var(--swatch-primary-darker), 1);
    }
 
    #main-content::after {
        content: " ";
        position: fixed;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
           -moz-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: 1rem;
        height: 100%;
        max-height: 100%;
        top: 0;
        -webkit-transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -o-transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -moz-transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        left: 1rem;
        background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
        background-repeat: no-repeat;
        background-position: center left 1rem;
        background-attachment: fixed;
        -webkit-background-size: 1rem 12.875rem;
           -moz-background-size: 1rem 12.875rem;
             -o-background-size: 1rem 12.875rem;
                background-size: 1rem 12.875rem;
        pointer-events: none;
    }
 
    #side-bar:hover+#main-content::after,
    #side-bar:active+#main-content::after {
        left: -17em;
        left: -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        left: -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        left: calc(var(--sidebar-width-on-desktop, 17em) * -1);
        background-position: center left -17em;
        background-position: center left -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        background-position: center left -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        background-position: center left calc(var(--sidebar-width-on-desktop, 17em) * -1);
        -webkit-transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -o-transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -moz-transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        opacity: 0;
        width: 0rem;
        font-size: 0em;
    }
 
    #side-bar:focus-within+#main-content::after {
        left: -17em;
        left: -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        left: -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        left: calc(var(--sidebar-width-on-desktop, 17em) * -1);
        background-position: center left -17em;
        background-position: center left -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        background-position: center left -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        background-position: center left calc(var(--sidebar-width-on-desktop, 17em) * -1);
        -webkit-transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -o-transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -moz-transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        opacity: 0;
        width: 0rem;
        font-size: 0em;
    }
 
    #main-content::before {
        --not-ie: absolute;
        content: " ";
        background-color: black;
        background-color: rgb(var(--swatch-alternate-color, 0, 0, 0));
        position: fixed;
        position: var(--not-ie);
        top: 0;
        top: var(--final-header-height-on-desktop, 0);
        left: 0;
        -webkit-transform: translateX(-12.6rem);
           -moz-transform: translateX(-12.6rem);
            -ms-transform: translateX(-12.6rem);
             -o-transform: translateX(-12.6rem);
                transform: translateX(-12.6rem);
        -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
           -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
            -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
             -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
                transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
        width: 17em;
        width: var(--sidebar-width-on-desktop, 17em);
        height: -webkit-calc(100% - 3rem);
        height: -moz-calc(100% - 3rem);
        height: calc(100% - 3rem);
        height: -webkit-calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
        height: -moz-calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
        height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
        -webkit-transition:
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -o-transition:
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -moz-transition:
            transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        opacity: 0.5;
        pointer-events: none;
        z-index: 9;
        margin-bottom: 0;
        margin-bottom: -webkit-calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
        margin-bottom: -moz-calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
        margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
    }
 
    #side-bar:hover+#main-content::before,
    #side-bar:active+#main-content::before {
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
            -ms-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
        opacity: 0;
    }
 
    #side-bar:focus-within+#main-content::before {
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
            -ms-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
        opacity: 0;
    }
 
    #side-bar .side-block {
        margin-top: 1em;
        padding-left: 0.25em;
        background-color: rgb(0, 0, 0, 0);
        -webkit-border-radius: 0;
           -moz-border-radius: 0;
                border-radius: 0;
        border-left-width: 0rem;
        border-right-width: 0rem;
        direction: ltr;
    }
 
    #side-bar .scpnet-interwiki-wrapper {
        direction: ltr;
    }
 
    @supports (-ms-ime-align: auto) {
        #side-bar {
            overflow-y: hidden;
            overflow-x: hidden;
            -webkit-transform: translateX(-90%) !important;
               -moz-transform: translateX(-90%) !important;
                -ms-transform: translateX(-90%) !important;
                 -o-transform: translateX(-90%) !important;
                    transform: translateX(-90%) !important;
        }
 
        #side-bar:hover,
        #side-bar:active {
            overflow-y: auto;
            -webkit-transform: translateX(0) !important;
               -moz-transform: translateX(0) !important;
                -ms-transform: translateX(0) !important;
                 -o-transform: translateX(0) !important;
                    transform: translateX(0) !important;
            margin-left: -0.5rem;
        }
 
        #side-bar:focus-within {
            overflow-y: auto;
            -webkit-transform: translateX(0) !important;
               -moz-transform: translateX(0) !important;
                -ms-transform: translateX(0) !important;
                 -o-transform: translateX(0) !important;
                    transform: translateX(0) !important;
            margin-left: -0.5rem;
        }
 
        #main-content::before {
            left: 1rem;
            -webkit-transform: translateX(-100%) !important;
               -moz-transform: translateX(-100%) !important;
                -ms-transform: translateX(-100%) !important;
                 -o-transform: translateX(-100%) !important;
                    transform: translateX(-100%) !important;
        }
    }
}

---

+ Show component code

@supports(display: grid) {
    :root {
        /* header measurements */
        --header-height-on-desktop: 10rem;
        --header-height-on-mobile: 10rem;
        --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
        --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
    }
 
    #header {
        --search-textbox-text-color: var(--swatch-secondary-color);
        background: none;
    }
 
    #header::before {
        content: " ";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0.75rem;
        background-image: var(--logo-image);
        background-repeat: no-repeat;
        background-position: center 0;
        background-size: auto calc(var(--header-height-on-desktop) - 1.5rem);
        opacity: 0.8;
        pointer-events: none;
    }
 
    #header h1,
    #header h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: var(--header-height-on-desktop);
        display: flex;
        align-items: center;
        justify-content: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    #header h1 a,
    #header h1 a::before,
    #header h2 span,
    #header h2 span::before {
        margin: 0;
        padding: 0;
        z-index: 0;
        display: block;
        text-align: center;
    }
 
    #header h1 {
        z-index: 1;
    }
 
    #header h1 a::before,
    #header h1 a::after {
        content: var(--header-title);
    }
 
    #header h1 a::before  {
        color: rgb(var(--swatch-text-tertiary-color));
        z-index: -1;
        -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark));
    }
 
    #header h1 a::after {
        color: rgb(var(--swatch-headerh1-color));
        z-index: 1;
    }
 
    #header h2 {
        z-index: 0;
        text-transform: uppercase;
        pointer-events: none;
    }
 
    #header h2 span {
        margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em);
    }
 
    #header h2 span::before,
    #header h2 span::after {
        --wght: 600;
        content: var(--header-subtitle);
        position: absolute;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        text-align: center;
    }
 
    #header h2 span::before {
        -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark));
    }
 
    #header h2 span::after {
        color: rgb(var(--swatch-headerh2-color));
        z-index: 1;
    }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        color: rgba(0, 0, 0, 0);
    }
 
    @media (min-width: 36rem) {
 
        #login-status {
            flex-grow: 1;
            left: 3%;
            right: initial;
        }
 
         #login-status::before {
            --mask-image: none;
            background-color: transparent;
        }
 
        #login-status:not(:focus-within) {
            color: rgb(var(--login-line-divider-color));
            -webkit-user-select: initial;
            -moz-user-select: initial;
            -ms-user-select: initial;
            user-select: initial;
        }
 
        #login-status #account-topbutton,
        #login-status:not(:focus-within) #account-topbutton {
            --clip-path:
                    polygon( 0 0, 100% 0, 100% 100%, 0 100% );
            background-color: rgba(var(--login-arrow-color), 0);
 
        }
 
        #login-status #account-topbutton::before{
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--login-arrow-color), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton:hover::before {
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
        }
 
        #login-status:not(:focus-within) #account-topbutton::after {
            display: none;
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            pointer-events: all;
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {
            opacity: 1;
        }
 
        #login-status #my-account {
            --wght: 300;
        }
 
        #account-options {
            background: var(--gradient-header);
        }
 
        #search-top-box {
            top: 1.5em;
            right: 3%;
            background: rgba(var(--search-focus-textbox-bg-color), 0.4);
            box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4);
        }
 
         #search-top-box:focus-within ~ #login-status {
            opacity: 1;
        }
 
        #search-top-box::after {
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
        }
 
        #search-top-box:not(:focus-within)::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0% 100%
                    );
            background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #search-top-box:not(:focus-within):hover::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            background-color: rgb(var(--search-icon-hover-bg-color));
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) {
            max-width: var(--search-width);
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
            max-width: var(--search-width);
            padding: 0 var(--search-height) 0 1em;
            outline-width: 0;
            background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
            color: rgba(var(--search-textbox-text-color), 0.4);
            cursor: pointer;
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
        #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] {
            pointer-events: all;
            border: none;
        }
 
    }
 
    #page-title::after,
    .meta-title::after,
    #page-title::before,
    .meta-title::before {
        content: "";
        flex-grow: 1;
        height: 0.0625rem;
        background: rgb(var(--swatch-primary));
    }
 
    #page-title::before,
    .meta-title::before {
        margin: auto 1.25rem auto auto;
    }
}

---

+ Show theme code

@import url("https://use.typekit.net/cjg4ysl.css");
 
@supports(display:grid) {
    :root {
        /* S-CSS-P Integration */
        /* If you're making a new CSS theme, please include the following three variables at minimum. */
        --theme-base: "black-highlighter";
        /* must be either "black-highlighter" or "sigma9" */
        --theme-id: "The-Foundation-theme";
        /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
        --theme-name: "The Foundation Theme";
        /* set this to your theme's full name */
        --body-font: "franklin-gothic-urw", sans-serif;
        --header-font: "titling-gothic-fb-compressed", sans-serif;
        --title-font: "hypatia-sans-pro", sans-serif;
 
        --header-title: "The Foundation";
 
        --light-gray-monochrome: 200, 0, 5;
 
        --header-gradient-color-bottom: var(--dark-accent);
        --header-gradient-color-middle: var(--black-monochrome);
        --header-gradient-color-top: var(--black-monochrome);
 
        --background-gradient-color: var(--light-gray-monochrome);
        --swatch-topmenu-border-color: var(--black-monochrome);
        --swatch-topmenu-bg-color: var(--dark-accent);
 
        --gradient-topmenu: linear-gradient(to bottom,
                rgba(255, 255, 255, 0) 0,
                rgba(255, 255, 255, 0) var(--header-height-on-desktop),
                rgba(var(--swatch-topmenu-border-color)) var(--header-height-on-desktop),
                rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--header-height-on-desktop) + .125rem),
                rgba(var(--swatch-topmenu-bg-color), 1) calc(100% - .125rem),
                rgba(var(--swatch-topmenu-bg-color), 0) calc(100% - .125rem),
                rgba(var(--swatch-topmenu-border-color), 0) 100%);
 
        --gradient-topmenu-mobile: linear-gradient(to bottom,
                rgba(var(--swatch-topmenu-border-color), 1) 0,
                rgba(var(--swatch-topmenu-bg-color), 1) .125rem,
                rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--topbar-height-on-mobile) - .125rem),
                rgba(var(--swatch-topmenu-bg-color), 0) calc(var(--topbar-height-on-mobile) - .125rem),
                rgba(var(--swatch-topmenu-border-color), 0) 3rem);
 
        --gradient-header: linear-gradient(to bottom,
                rgb(var(--header-gradient-color-bottom)) 0%,
                rgb(var(--header-gradient-color-middle)) 90%,
                rgb(var(--header-gradient-color-top)) 100%);
 
        --header-background-image-size: 100% var(--header-height-on-desktop);
        --header-height-on-desktop: 12.25rem;
        --header-height-on-mobile: 12.25rem;
        --topbar-height-on-mobile: 2.5rem;
 
        --header-h1-font-size: calc(var(--base-font-size) * 7);
        --max-font-size: 0.9375rem;
    }
 
    #top-bar {
        --mobile-topmenu-sidebar-button-color: var(--swatch-text-tertiary-color);
    }
 
    html,
    body {
        font-feature-settings: "onum"0;
        font-variant-numeric: tabular-nums;
    }
 
    body {
        --wght: 400;
        background-size: var(--header-background-image-size), 100% 14.25rem, 100% var(--background-gradient-distance);
        font-weight: 400;
    }
 
    #header h1 {
        text-transform: uppercase;
        letter-spacing: 0.2em;
    }
 
    #header h2 {
        display: none;
    }
 
    .danger-diamond a,
    .danger-diamond a:hover {
        box-shadow: initial !important;
        color: rgba(0, 0, 0, 0) !important;
    }
 
    #main-content {
        flex-basis: 100%;
    }
 
    #page-title,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        --wght: 900;
        color: rgba(var(--light-gray-monochrome));
        font-family: var(--title-font);
        font-weight: 900;
    }
 
    hr {
        position: relative;
        height: 0.5em;
        overflow: hidden;
        border: initial;
        background-color: rgba(0, 0, 0, 0);
    }
 
    hr::before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-attachment: fixed;
        background-image: url('https://scp-wiki.wdfiles.com/local--files/theme:the-foundation-theme/cons_circle.png');
        background-repeat: repeat;
        background-position: top center;
        background-size: 100vh;
        pointer-events: none;
        -webkit-clip-path: polygon(50% 10%, 100% 50%, 50% 90%, 0% 50%);
        clip-path: polygon(50% 10%, 100% 50%, 50% 90%, 0% 50%);
    }
 
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href="/classification-committee-memo"]) {
        margin: -0.15em;
        padding: 0.15em;
        transition:
            box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--light-gray-monochrome), 1);
        color: rgb(var(--gray-monochrome));
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }
 
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href="/classification-committee-memo"]):hover {
        margin: -0.25em;
        padding: 0.3em 0.25em 0.2em 0.25em;
        box-shadow: inset 0 -1.5em 0 0 rgba(var(--dark-accent), 1);
        color: rgb(var(--white-monochrome));
        text-decoration: none
    }
 
    #extra-div-3 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--header-height-on-desktop);
        background: url('https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-header-img.png');
        background-position: center center;
        pointer-events: none;
    }
 
    #header::before {
        content: none;
    }
 
    #login-status .printuser {
        --wght: 900;
        color: rgb(var(--swatch-text-light));
        font-weight: 900 !important;
    }
 
    #top-bar div.top-bar>ul>li,
    #top-bar div.mobile-top-bar>ul>li {
        --wght: 800;
        font-family: var(--title-font);
        font-weight: 800;
        text-transform: uppercase;
        isolation: isolate;
    }
 
    #top-bar div.top-bar>ul>li::before,
    #top-bar div.mobile-top-bar>ul>li>a::before {
        content: " ";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition:
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-size 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -webkit-animation-direction: reverse;
        animation-direction: reverse;
        opacity: 0;
        background:
            url('https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-circles-bg.png');
        background-attachment: fixed;
        background-position: center center;
        background-size: 100vh;
        pointer-events: none;
        pointer-events: none;
    }
 
    #top-bar div.top-bar>ul>li:hover::before,
    #top-bar div.mobile-top-bar>ul>li>a:hover::before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
    }
 
    #top-bar div.top-bar>ul>li>a::before,
    #top-bar div.top-bar>ul>li>a::after {
        z-index: 1;
        background-color: rgba(var(--dark-gray-monochrome));
        pointer-events: none;
    }
 
    #side-bar {
        --swatch-border-color: rgb(var(--light-gray-monochrome));
        z-index: 10;
        top: 0;
        background-image:
            linear-gradient(to bottom,
                rgba(var(--swatch-menubg-dark-color), 1) 0%,
                rgba(var(--swatch-menubg-dark-color), 0.55) 100%),
            url("https://scp-wiki.wdfiles.com/local--files/theme:the-foundation-theme/cons_circle.png");
        transition:
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms linear,
            margin 300ms linear,
            transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        background-repeat: no-repeat, no-repeat;
        background-position:
            -2.5rem center,
            calc(-100% + var(--sidebar-width-on-desktop)) center;
        background-size:
            cover,
            125vh;
        background-blend-mode:
            multiply,
            normal;
    }
 
    #side-bar:hover,
    #side-bar:active {
        background-color: rgb(var(--swatch-menubg-dark-color));
        background-position: center center, center center;
    }
 
    #side-bar:focus-within {
        background-color: rgb(var(--swatch-menubg-dark-color));
        background-position: center center, center center;
    }
 
    @media only screen and (max-width:56.25rem) {
        #side-bar:target {
            background-color: rgb(var(--swatch-menubg-dark-color));
            background-position: center center, center center;
        }
    }
 
    #side-bar .heading {
        position: relative;
        padding-top: 0.15em;
        padding-bottom: 0.25em;
        font-family: var(--title-font);
    }
 
    #side-bar div.menu-item a,
    #side-bar div.menu-item .text {
        margin: 0.15em 0;
    }
 
    .yui-navset .yui-nav {
        --wght: 600;
        font-family: var(--title-font);
        font-weight: 600;
    }
 
    .yui-navset .yui-nav a::before {
        background-color: transparent;
        background-image:
            radial-gradient(closest-side,
                rgba(var(--tabs-bg), 1),
                rgba(var(--tabs-bg), 0)),
            url("https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-circles-bg.png"),
            radial-gradient(closest-side,
                rgba(var(--tabs-bg), 1),
                rgba(var(--tabs-bg), 0));
        background-blend-mode: normal, overlay, normal;
        background-position: center center, center center;
        background-size: 100% 100%, 100vw, 100% 100%;
        pointer-events: none;
    }
 
    .yui-navset .yui-nav a:hover::before,
    .yui-navset .yui-nav a:active::before {
        background-color: transparent;
        background-image:
            radial-gradient(rgba(var(--tabs-hover-bg), 0),
                rgba(var(--tabs-hover-bg), 1)),
            url("https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-circles-bg.png"),
            radial-gradient(rgba(var(--tabs-hover-bg), 0),
                rgba(var(--tabs-hover-bg), 1));
 
    }
 
    .yui-navset .yui-nav .selected a::before,
    .yui-navset .yui-nav .selected:hover a::before,
    .yui-navset .yui-nav .selected:focus a::before,
    .yui-navset .yui-nav .selected:active a::before {
        background-color: transparent;
        background-image:
            radial-gradient(rgba(var(--tabs-selected-bg), 0),
                rgba(var(--tabs-selected-bg), 1)),
            url("https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-circles-bg.png"),
            radial-gradient(rgba(var(--tabs-selected-bg), 0),
                rgba(var(--tabs-selected-bg), 1));
    }
 
    .yui-navset .yui-nav li a,
    .yui-navset .yui-nav li a em,
    .yui-navset .yui-nav .selected a,
    .yui-navset .yui-nav .selected a em {
        background-color: transparent !important;
    }
 
    .yui-navset .yui-nav li,
    .yui-navset .yui-nav .selected {
        background-color: rgb(var(--swatch-background));
    }
 
    table.wiki-content-table {
        border-collapse: collapse;
    }
 
    table.wiki-content-table th {
        position: relative;
        border-color: rgb(var(--light-gray-monochrome)) !important;
        background-attachment: fixed;
        background-image: url('https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-circles-bg.png');
        background-position: top center;
        background-size: 100vh;
        font-family: var(--title-font);
        font-weight: 600;
        text-transform: uppercase;
    }
 
    @media only screen and (max-width: 56.25rem) {
        #header h1 a {
            text-align: center;
            font-size: 3.5em;
        }
 
        #top-bar {
            font-size: calc(var(--base-font-size) * 0.8);
        }
 
        #top-bar>div.mobile-top-bar>div.open-menu {
            font-size: calc(var(--base-font-size) * 0.65);
        }
 
        #top-bar div.mobile-top-bar>ul>li>a {
            letter-spacing: 0;
        }
 
        #top-bar>div.top-bar>ul>li:last-of-type>ul,
        #top-bar>div.mobile-top-bar>ul>li:last-of-type>ul {
            left: 50%;
        }
 
        #top-bar div.mobile-top-bar>ul>li>ul>li>a {
            white-space: pre-wrap;
        }
 
        #main-content {
            margin-top: 2.1em;
        }
    }
}
 
@-webkit-keyframes fade {
    0% {
        opacity: 1;
    }
 
    100% {
        opacity: 0;
    }
}
 
@keyframes fade {
    0% {
        opacity: 1;
    }
 
    100% {
        opacity: 0;
    }
}

---

+ Show component code

#side-bar {
    /* ===SECONDARY & TERTIARY COLORS=== */
    /* Editing these will edit a vast majority of theme elements. Useful for making dark themes */
 
    /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
    --swatch-secondary-color: var(--swatch-menubg-dark-color);
    --swatch-tertiary-color: var(--swatch-menubg-medium-color);
    --swatch-alternate-color: var(--swatch-menubg-light-color);
 
    /* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */
    --swatch-text-secondary-color: var(--swatch-menutxt-dark-color);
    --swatch-text-tertiary-color: var(--swatch-menutxt-light-color);    
 
    /* ===SIDE-BAR ELEMENTS=== */
 
        /* ===SIDE-BAR GENERAL=== */
    --sidebar-bg-color: var(--swatch-menubg-dark-color);
    --sidebar-resources-bg-color: 0,0,0,0;
    --sidebar-media-bg-color: 0,0,0,0;
 
        /* ===SIDEBLOCK MENU=== */
    --sideblock-heading-border-color: var(--bright-accent);
    --sideblock-heading-bg-color: 0,0,0,0; /* Transparent */
    --sideblock-heading-text-color: var(--swatch-text-tertiary-color);
 
        /* ===MENU-ITEMS=== */
    --sidebar-border-color: var(--swatch-primary), 0.08;
    --sidebar-subtest-color: var(--swatch-text-tertiary-color);
 
    --sidebar-links-text: var(--swatch-text-tertiary-color);
    --sidebar-links-hover-bg-color: var(--bright-accent);
    --sidebar-links-hover-text-color: var(--swatch-text-tertiary-color);
 
        /* ===SIDEBAR COLLAPSIBLES=== */
            /*Folded Colors */
    --sidebar-collapsible-fld-link-bg: var(--swatch-primary), 0.25;    
    --sidebar-collapsible-fld-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-fld-link-hover-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-fld-arrow-hover-color: var(--swatch-text-tertiary-color);
 
            /*Unfolded Colors */
    --sidebar-collapsible-ufld-link-bg: var(--swatch-primary-darker), 0.25;    
    --sidebar-collapsible-ufld-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-ufld-link-hover-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-ufld-arrow-hover-color: var(--swatch-text-tertiary-color);
 
            /* Unfolded Body Colors */
    --sidebar-collapsible-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-link-hover-color: var(--swatch-text-tertiary-color);
 
    scrollbar-color: 
        rgba(var(--swatch-primary-darker), 0.1) /* Thumb */
        rgba(var(--swatch-secondary-color), 0.05); /* Track */
 
    border-color: rgba(var(--swatch-secondary-color), 0.4);
}
 
/* Hover Scrollbar Behavior */
#side-bar:hover,
#side-bar:active {
    scrollbar-color: 
        rgb(var(--swatch-primary-darker), 1) /* Thumb */
        rgb(var(--swatch-menubg-dark-color), 1); /* Track */
}
 
#side-bar:focus-within {
    scrollbar-color: 
        rgb(var(--swatch-primary-darker), 1) /* Thumb */
        rgb(var(--swatch-menubg-color), 1); /* Track */
}
 
#side-bar::-webkit-scrollbar-track {
    background-color: rgba(var(--swatch-tertiary-color), 0.8);
}
 
#side-bar::-webkit-scrollbar,
#side-bar::-webkit-scrollbar-thumb,
#side-bar::-webkit-scrollbar-corner {
    background-color: rgba(var(--swatch-menubg-dark-color), 0);
}
 
#side-bar .side-block.media a:any-link {
    background: rgba(var(--swatch-menubg-light-color),0.75) !important;
}
 
#side-bar .side-block.media a::before {
    background: rgb(var(--social-color));
}
 
#side-bar .side-block.media a img {
    filter: drop-shadow(0 0 0 rgba(var(--swatch-alternate-color),0));
    transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
 
#side-bar .side-block.media a:hover img,
#side-bar .side-block.media a:active img {
    filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
}
 
#side-bar .side-block.media a:focus-within img {
    filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
}
 
html:not(:lang(cn)) div.scpnet-interwiki-wrapper p::before {
    box-shadow: inherit;
}
 
#side-bar iframe.scpnet-interwiki-frame:not(:lang(cn)) {
    filter: invert(1);
}
 
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before,
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::before,
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::after {
    background-color: rgb(var(--swatch-menubg-dark-color));
}
 
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before {
    mix-blend-mode: lighten;
}

<html>
    <head>
    </head>
    <body>
        <script type="text/javascript">
        function sendStyle() {
            try {
                window.parent.window.interwikiFrame.bhlDark();
            } catch(e) {}
        }
        sendStyle();
        </script>
    </body>
</html>

SCP-4485 오리엔테이션 8 의 1

!! 원격 단말 메시지 !!

안녕하십니까, 연구원님.

라크(Lark) 박사와 저는 당신이 SCP-4485 의무 오리엔테이션에 협조해 주시어 기쁩니다. 아주 훌륭하고 경험 많은 연구원 한 명을 처분하게 되었다면 저희 둘은 몹시 불쾌해졌으리라 생각합니다.

당신은 이제 모든 문서를 세심하게 읽고, 제가 만족하는 정도에 이를 때까지 이들을 파악해야 합니다. 이로 말미암아 당신의 진행 경과를 제가 원격 단말로 추적하게 되었습니다. 흡족한 수준 내로 당신이 진입하게 된다면 그때 당신은 사무실을 떠나셔도 좋습니다.

실망시키지 마십시오.

제12기지 이사관
로이드 마이클슨(Lloyd Michaelson)

---

SCP-4485 문서 1
최초 SCP 문서	1967년 7월 8일 기록

⇛ 클릭해서 보기 ⇚

지정번호:

SCP-4485

분류 등급:

위험 평가:

배정 기지:

유클리드-적색(Euclid-Red)

보류

제35기지

관련 장소:

독일 브라문트(Bramund)
[접촉 지점]

독일 그렌발트(Grenwald)
[집결 지역]

                                               

                                               

                                               

                                               

관련 인물:

막스 켈퍼(Max Kelper)

1

서독 남부에서 활동하던 부서진 신의 교단 탄원자(supplicant).

요제프 폰 슈메테를리네(Josef Von Schmetterline)

2

서독 남부에서 활동하던 부서진 신의 교단 탄원자.

보리스 알더만(Boris Aldermann)

3

서독 남부 부서진 신의 교단 지역지도자.

         

         

         

         

         

보안 격리 프로토콜

SCP-4485는 제35기지 고도 보안 격리함에 보관한다. SCP-4485에게는 기지 내 인가필 논리학자에게 증명받은 인원만이 접근할 수 있으며, 이 논리학자는 재단 유럽 지역 수리연구부장 (현임 빅토르 야테스[Viktor Jates] 박사) 이 임명한 자라야 한다. 해당 대상자는 SCP-4485 접근 인가를 받기 전에 이하의 사고 기본 3원칙 및 그 응용에 능통함을 증명해야 한다.

• 동일률 (어떤 것은 그 자신과 같다)
• 모순율 (명제는 참인 동시에 거짓일 수 없다)
• 배중률 (명제는 참이거나 거짓이다)

더불어 해당 대상자는 《충족이유율의 네 겹의 뿌리에 관하여》에서 확립된 쇼펜하우어의 4법칙, 《사고 법칙 연구》에서 소개되는 불의 대안대수표현에 능통하고, 러셀과 화이트헤드의 《수학원리》와 러셀의 《철학의 문제들》의 내용을 철저히 이해하며, 괴델의 증명을 스스로 유도할 줄 알아야 한다.

마지막으로, 해당 대상자는 타르스키의 수정된 동일률 (라이프니츠 원리, 반사성, 대칭성, 추이성과 그 역) 을 이해하고 적용할 줄 알아야 한다. 또한 직관논리, 초일관논리, 3치논리, 양상논리, 퍼지논리 등 현대 논리주의에도 마찬가지로 친숙해야 한다.

종합하자면 해당 대상자는 무엇이 참이고 논리적인지, 또 무엇이 거짓이고 비논리적인지 능숙하게 분별하는 데 있어, 현재 우리가 이해하는 범위 안에서 인류가 달성 가능한 최고 수준에 이를 만큼 전적으로 능통해야 한다.

SCP-4485의 영향을 입은 구역은 격리 조치하고 재단 요원들이 경비한다.

설명:

SCP-4485는 독일계 프랑스 예술가 장 아르프_{Jean Arp} (한스 아르프

4

프랑스에서 사용한 법적 성명은 장이지만, 독일어를 쓸 때는 스스로를 독일 이름인 한스로 지칭했다.

_{Hans Arp})가 집필한 작은 가죽표지 책이다. SCP-4485 자체는 평범하게 생겼으며, 다소 해지고 약간 빛이 바랬다. 책등에는 저자의 이름 HANS ARP가 블록체 대문자로 가죽에 찍혀 있다. SCP-4485의 앞표지에는 "gott ist ohne zweck"

5

"신에게 목적은 없다"

라는 말이 간단한 물고기 그림 아래에 쓰여 있다. SCP-4485는 현실과 인간의 인식력에 극심한 악영향을 끼친다. 논리주의를 충분히 훈련받지 못하고 SCP-4485에 노출된 사람은 혼란에 빠져 진실과 거짓을 구분하지 못하게 된다. 이렇게 논리와 비논리를 분별하지 못하는 현상은 물리적 형태로도 나타나, 주변 현실의 구조가 바뀌게 된다. SCP-4485를 바로 에워싸는 근처 지역은 오랜 시간에 걸쳐 천천히 훼손되며 몹시 무질서해지고 앞뒤가 맞지 않는 상태로 변모한다. 이 효과는 SCP-4485를 그곳에서 치우더라도 계속 남아 있는다. 현재 이렇게 변경된 현실을 되돌리는 방법은 발견되지 않았다.

발견: SCP-4485는

브라문트

6

이후 모든 공문서에서 말소되었다.

마을에서, 해당 지역 내 정신질환과 다른 이상 현상들이 급증하며 발견되었다. SCP-4485의 발견에 관련된 부가 정보는 본 파일 내의 노먼 요원의 보고서에서 확인할 수 있다.

---

SCP-4485 문서 2
현장요원 노먼의 보고서	1967년 6월 29일 기록

⇛ 클릭해서 보기 ⇚

극비

훈련시 사용 허가. 4등급 인가.
Dr. Chen Sui

재단 현장 보고서
요원명:프레드릭 노먼(Fredrick Norman) 요원

서론: 제35기지 소속 SCP 재단 현장 요원 프레드릭 노먼의 SCP-4485 변칙개체 관련 보고서.

본문: 현장 요원 ██████ █████과 최초 통신한 내용으로 말미암아 브라문트로 이동해 이상현상의 근원을 탐색해야 할 만한 근거가 상당해졌다. 지역 병원에 입원한 환자들이 혼란 상태와 의욕 상실 등을 호소했다. 본인이 살폈던 환자들은 신체에는 이상이 없었으나 환각과 현실을 구분하지 못하는 상태였는데, 환각이 환자들을 딱히 괴롭히는 것은 또 아니었다. 환자들은 이따금 헛소리를 지껄이거나 난데없이 아무 이유도 없이 웃곤 했으며, 질문에 좀처럼 대답하지 않았다.

막스 켈퍼, 요제프 폰 슈메테를리네, 이 두 환자는 프로이센 부서진 신의 교단 주 종파에서도 활동이 왕성하고 유명한 자들이었으며, 마지막으로 우리가 마주쳤을 때는 아예 적대적인 광신자였다. 이제 두 사람에게 적대성은 기미도 없었으며, 어떤 일이 있었는지 물어도 둘은 대답하지 않았고, 다만 브라문트 내의 변칙적 활동에 대해 "신이 벌써 오셨다"라는 말만을 꺼냈다. 내가 있을 때 두 사람은 내내 무슨 동물이 내는 것 같은 소리들만 지껄였는데, 내가 병실을 떠나면서도 이 소리는 계속 들려왔다.

우리가 ███████████ █████████ 병원에서 면담했던 환자들은 모두 자기 이름도 못 알아봤고, 자신과 서로를 "한스아르프(hansarp)"라고 불렀다. 그 이름이 무슨 뜻인지, 혹시 자기들의 병환하고 어떤 상관이 있는지, 더 자세하게 말은 나온 적 없다.

우리 팀은 사흘 동안 병원에 머물렀다가 브라문트로 떠났다. 제35기지에서 환자들을 검사차 데려갈 테니 추가 자원들을 달라고 요청했을 때였다. 우리는 모두 이 환자들이 이렇게 괴상한 증상을 겪고 있느니만큼 분류랑 연구랑 필요하긴 하겠다고 생각했다. 6월 19일 우리는 그렌발트에 도착했다. 강 하나 건너면 브라문트 나오는 곳이었다. 원래 목적은 그렌발트에서 자원들을 규합했다가 그 주 일요일에 브라문트로 진입하는 것이었다. 그런데 브라문트 지역에서 어떤 활동을 발견하면서, 우리는 더 일찍 대응에 나서야 했다.

그렌발트 주민들이 브라문트 상공의 하늘의 질감이 달라졌다고 호소했다. 나는 질감의 차이까지는 못 봤지만, 색깔이 달라진 것은 쉽게 보였다. 파란 하늘 아래로 산이 깔려 있어야 할 곳에 회색과 주황색 등의 색조가 다양하게, 마을 경계부터 고체 기둥으로 쭉 위로 뻗어올랐다. 기둥 속에서 이상한 모양들도 나타났다. 관찰하기 어려운 기하학적 모양이 보였고, 찰랑임이 보였고, 내가 아는 건 아니지만 문자 같아 보이는 이상한 기호들도 떠올랐다. 예상했던 활동이 훨씬 격심해진 것을 깨닫고 우리는 한 시간 내로 채비를 마쳐 브라문트로 움직였다.

브라문트로 들어가는 길에 안개가 뚜렷하게 깔려 있었는데, 다가갈수록 더 짙어졌다. 그렌발트에서 보이던 흑백 색깔 기둥이 점점 더 잘 보이지가 않았으며, 가끔은 아예 하늘이 보이지 않기도 했다. 같이 가던 특무부대 대원들 몇 명이 우리가 가는 길이 맞는 길인지 확실하지 못하다는 느낌을 호소했다. 분명히 똑바로 가고 있었는데도. 몇 번은 대원들이 아예 멈춰서서, 우리가 길을 잃었으니

그렌발트로 돌아가야 한다고 주장했다. 특무부대 대장마저도 부대에 몇 명이 있었는지 갈피를 잡지 못했다. █████ ██████ 가 알려준 바로는 한 번은 대원 3명이 느닷없이 걸음을 멈추더니 우향우로 돌아 그대로 길을 떠나버렸다고 하는데, 그 장면을 내가 직접 보지는 못했다.

브라문트 안으로 들어서자 우리는 알았다. 우리 장비며 피부에서 색깔이 다 빠져나가 있었다. 그곳에 채색이라고는, 이따금 주황빛이 스며나오는 걸 빼고는 전혀 보이지가 않았다. 원기둥 안에서 모종의 이상한 바람이 순환했는데, 종종 우리를 스치면 어떤 소리가 들려왔다. 그 소리 때문에 우리가 서로 대화할 수가 없어서, 시각적 수단을 써먹어 가며 대화하면서 나아갈 수밖에 없었다.

브라문트 내의 상황도 다를 바는 없었다. 건물들이 분해되어 가는데, 기반에서 떨어졌으면서도 공중에 그대로 걸려 있었다. 자기 근방에서 중력이 멈추었다는 듯. 커다랗고 검은 모양이 땅 밑에서 움직이면서 먹이 주위를 도는 상어처럼 움직이는 게 보였는데, 다만 지면 위로 떠오르지는 않았다. 안개 속 어딘가에서는 이상한 음악소리가, 바람이 우리를 스치고 또 변칙성의 진원지로 내닫을 때마다 들려왔다. 나는 못 느꼈지만 사람들이 계속 다른 증세를 호소하면서 공황이 부대를 압도한 탓에 나아가기가 어려웠으며, 몇몇은 아예 동료가 바깥으로 데려다줄 때까지 기다리며 남아 있어야 했다.

변칙활동의 진원지는 조그만 도서관이 무너지고 남은 잔해였다. 이 건물을 나는 바로 알아봤다. 지역 변칙예술가들이 모이는 장소였는데, 어느 날 습격을 받아 변칙예술가 몇 명을 구금하고 건물을 철거한 바 있었던 곳이었다. 잔해 속에서 소름끼치는 광경이 보였다. 사람들이 둥글게 둘러모여 이상하고 부자연스러운 모양으로 뒤틀려 있었는데, 그 모습이 큰방 중앙의 커다랗고 복잡한 기계의 일부가 되어 있었다.

기계는 모종의 이상한 힘으로써 돌아갔는데, 가시 돋친 큰 철이랑 콘크리트랑 인간의 유해가 한데 뭉친 무슨 덩어리를 들어올렸다 단 위로 내리쳤다 했다. 한 번 들어올려질 때마다 사람들이 그린 원은 한 발짝 앞으로 나아가, 일그러지고 춤추며 기계가 내는 기괴한 선율과 알 수 없는 화음을, 꿈에도 나올 듯한 화음을 맞췄다. 다음 사람이 단으로 올라가면 기계가 그 위로 떨어졌고, 그 유해가 공중으로 붕 떠올라 부자연스럽게 하늘로 날아갔다. 도서관 잔해 위로 유해가 날아오르는 그 하늘에, 이상한 이미지가 하나 떠올라 있었다. 도무지 뭐라 이해 못할 형상이었다. 똑딱이는 기계는 시계추처럼 다시 들어올려졌고, 또 한 사람이 단 위로 올라가면 다시 떨어졌다.

우리는 도서관 안의 피영향자들을 모두 죽이고 폐허에는 불을 붙였다. 하늘의 이상한 형상이 사라지자, 우리는 기계를 해체하는 작업에 착수했다. 뜯어낼 수 있는 데까지는 뜯어내고, 나머지는 폭발물을 이용해 부숴냈다. 기계 중심에는 말라빠진 남자가 들어 있었는데, 얼굴이 벗겨져서 철사로 아직도 두개골에 붙어 있는 속살에 매달려 있었다. 숨 쉬는 채로. 남자는 피부도 없는 입술로 까맣게 타 버린 듯한 목소리만 낼 수 있었지만, 내가 하는 질문에 모두 대답을 했다. 이름을 묻자 "한스아르프"라고 대답했다. 무슨 일이 있었는지 묻자 그 책을 건네줬다. 이 책이 뭔지 묻자, 신이라고 대답했다.

SCP-4485는 기지 격리진에게 넘겨져 격리 처리되었으며, 우리는 피영향 지역에 격리 조치를 취했다. 이후 법의학 분석 결과 이 남자는 부서진 신의 교단 지역지도자 보리스 알더만이었다. 우리는 알더만의 몸을 기계에서 떼어내지 못했는데, 아직도 거기 그대로 있으리라 생각한다.

---