Link to article: SCP-8817.
@import url('https://api.fonts.coollabs.io/css2?family=Finlandica:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/*--------------------------------*/
/*--- ELETRIC DREAM THEME ---*/
/*--------------------------------*/
:root {
--base-font-size: 1.025rem;
--basalt-primary-color: 250,252,253;
--basalt-secondary-color: 154,168,200,.125;
--basalt-tertiary-color: 222,235,240;
--basalt-undertone: 44,190,196;
--basalt-overtone: var(--basalt-tertiary-color);
--basalt-main-text-color: 8,16,20;
--basalt-sub-text-color: 180,180,200;
--basalt-light-text-color: var(--basalt-primary-color);
--link-color: var(--basalt-undertone);
--link-visited-color: 49,144,155;
--basalt-UI-opacity: .675;
--basalt-UI-blur: .125rem;
--base-header-height: min(calc(12.5rem + 13.25vmin), 19.5rem);
--main-content-side-margin: calc(1.75rem + 1.75vw);
--side-bar-button-width: 3.25rem;
--side-bar-button-color: var(--basalt-undertone);
--side-bar-background-color: var(--basalt-primary-color),.9;
--side-bar-button-background-hover: var(--basalt-secondary-color);
--button-background-color: var(--basalt-secondary-color);
--UI-font-primary: 'Finlandica';
--header-title: "Artificial Intelligence";
--header-subtitle: "Application Division";
--title-size: min(calc(1.375rem + 2.5vw), 3.75rem);
--lumina-top-bar-height: 3.25rem;
--lumina-header-image: url(https://scp-wiki.wdfiles.com/local--files/scp-8817/infotech.png);
--lumina-background: unset;
--lumina-footer-image: unset;
--elec-width: 65.25rem;
--elec-glacon: 255,208,140;
}
body {
overflow-x: hidden;
line-height: 1.625;
}
#container {
overflow-x: hidden;
overflow-x: clip;
}
#header, #top-bar div[class*=top-bar]>ul { z-index: initial; }
#top-bar div[class*=top-bar] ul li ul {
z-index: 7;
}
#header h1 a {
gap: 0 1rem;
padding: .5rem;
}
#header h1 a::before {
-webkit-mask-image: initial;
mask-image: initial;
}
#header-extra-div-1 { background-color: rgb(var(--basalt-main-text-color),.15); }
#top-bar div[class*=top-bar]>ul::before {
background-color: rgb(var(--basalt-tertiary-color),.15);
}
#breadcrumbs, .pseudocrumbs {
--_gap: .75rem;
}
#more-options-button {
background-color: rgb(var(--basalt-tertiary-color));
}
.hovertip {
box-shadow: 0 0 0.5rem rgb(var(--basalt-main-text-color),.25);
}
#footer {
padding: var(--bottom-area-padding);
}
#footer::before { all: unset; }
div#license-area, #footer-bar {
font-size: .625em;
}
@media only screen and (max-width: 1024px) {
#header-extra-div-1 {
display: none;
}
}
/*-----------------------------*/
/*--- ARTICLE-SPECIFIC ---*/
/*-----------------------------*/
.background-wrapper {
min-height: calc(100vh - var(--base-header-height));
min-height: calc(100lvh - var(--base-header-height));
z-index: 7;
position: relative;
}
#u-logic-wrapper {
display: flex;
flex-direction: column;
}
#u-logic-wrapper,
#u-logic-wrapper > li {
padding: 0;
margin: 0;
list-style: none;
}
:where(#u-logic-wrapper) > li {
display: block;
}
#u-logic-wrapper > li > * {
margin-inline: auto;
box-sizing: border-box;
}
#u-logic-wrapper > li > br { display: none; }
li.folded + li {
display: none;
}
li.unfolded + li {
display: block;
}
/*-----------------------------*/
#u-t-1.unfolded { display: none; }
#u-t-1 > :is(.filebox) {
max-width: min(var(--elec-width), calc(100% - var(--main-content-side-margin)*2));
margin-block: 1.5rem .75rem;
}
#u-t-1 .foldable-list-container { width: max-content; }
#u-t-1 .foldable-list-container a {
display: block;
text-align: center; text-decoration: none;
padding: 1ch;
font-family: var(--UI-font);
color: rgb(var(--button-text-color));
background-color: rgb(var(--button-background-color));
border: solid .125em rgb(var(--button-border-color));
outline: rgb(var(--button-outline-color)) solid 0;
transition: all var(--button-hover-transition);
}
#u-t-1 .foldable-list-container a:is(:hover,:focus) {
color: rgb(var(--button-hover-text-color));
background-color: rgb(var(--button-hover-background-color));
border-color: rgb(var(--button-hover-border-color));
outline-width: .25rem;
text-decoration: none;
}
:where(#u-t-1.unfolded) ~ #u-coverup {
display: block;
position: fixed;
inset-block-end: 0;
inset-inline-start: 0;
width: 100%;
height: 100vh; height: 100lvh;
background-color: rgb(var(--basalt-main-text-color));
opacity: 0;
animation: t-2-after .25s forwards;
animation-delay: 3.5s;
z-index: -1;
}
#u-blackout { display: none }
:where(#u-t-1.unfolded) ~ #u-blackout {
display: block;
position: absolute;
bottom: calc(100% - 20rem);
left: 0;
height: 50rem;
width: 100%;
z-index: 0;
opacity: 0;
background-color: rgb(var(--basalt-main-text-color));
animation: t-2-after .1s forwards;
animation-delay: 3.5s;
}
/*-----------------------------*/
#u-t-2 { position: relative; }
.domain-expansion {
position: relative; top: 0; left: 0; right: 0;
padding-block: .75rem;
line-height: 1.425rem;
animation: t-2-explode 1.5s forwards, t-2-merge 0.25s forwards;
animation-timing-function: linear;
animation-delay: 2s, 0s;
pointer-events: none;
max-width: unset!important;
max-height: 15rem;
width: min(var(--elec-width), calc(100% - var(--main-content-side-margin)*2));
opacity: 0;
z-index:-1;
}
@keyframes t-2-explode {
to {
top: -25rem;
font-size: 77.5lvh;
line-height: 0.1rem;
font-weight: bold;
left: -9rem;
right: -9rem;
width: calc(100% + 22.5rem);
}
}
@keyframes t-2-merge { to {opacity: 1; } }
.domain-expansion p {
margin: 0; margin-block-end: .625rem;
animation: t-2-dis forwards 0.1s linear;
animation-delay: 3.75s;
}
@keyframes t-2-dis {
to { visibility: hidden; }
}
.background-filler {
height: calc(75vh + 25rem);
height: calc(75lvh + 25rem);
padding-block-end: 7.5rem;
opacity: 0;
pointer-events: none;
background-color: rgb(var(--basalt-main-text-color));
box-shadow: 0 -10rem 0 rgb(var(--basalt-main-text-color));
animation: t-2-after .25s forwards;
animation-delay: 3.5s;
position: relative;
display: flex;
justify-content: center;
align-items: end;
}
@keyframes t-2-after { to { opacity: 1; } }
.foldable-list-container.star-collapse a {
display: block;
color: rgb(var(--elec-glacon));
text-align: center;
font-size: 1.125em;
pointer-events: auto;
filter: drop-shadow(0 0 .5em rgb(var(--basalt-primary-color),.775));
animation: 1s star-collapse ease infinite alternate;
}
.foldable-list-container.star-collapse a::before {
content: "";
display: block;
background-color: rgb(var(--elec-glacon));
width: 6rem;
height: 6rem;
-webkit-mask-image: var(--side-bar-button-mask);
mask-image: var(--side-bar-button-mask);
}
@keyframes star-collapse {
to { filter: drop-shadow(0 0 0em rgb(var(--basalt-primary-color),.25)); }
}
.unfolded .foldable-list-container.star-collapse a { pointer-events: none; animation: none; color: transparent; filter: none; }
/*-----------------------------*/
#u-logic-wrapper > li.forw {
background-color: rgb(var(--basalt-main-text-color));
color: rgb(var(--basalt-light-text-color));
}
li.forw .foldable-list-container {
pointer-events: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1rem 2.5rem;
}
li.forw .foldable-list-container a {
pointer-events: auto;
display: block;
max-width: min(var(--elec-width), calc(100% - var(--main-content-side-margin)*2));
width: max-content;
padding: .75em 1.25em;
border: solid .1rem currentColor;
border-radius: .75rem;
box-sizing: border-box;
color: rgb(var(--elec-glacon));
transition: background-color .25s ease-out;
}
li.forw .foldable-list-container a:is(:hover,:focus) {
background-color: rgb(var(--elec-glacon),.25);
}
li.forw .foldable-list-container:where(:not(.star-collapse)) a::before {
content: "▷";
display: inline-block;
margin-inline-end: .675ch;
}
li.forw.unfolded .foldable-list-container a { pointer-events: none; display: none; }
li.forw:not(.unfolded) .foldable-list-container.star-collapse a {
border: none;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
--elec-glacon: var(--basalt-focus-color);
}
li.forw > * {
animation: elec-fade-in .375s ease-out forwards;
}
@keyframes elec-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/*--------------------------------*/
#u-logic-wrapper .elec-log {
max-width: min(var(--elec-width), calc(100% - var(--main-content-side-margin)*2));
margin-inline: auto;
box-sizing: border-box;
}
.text-bubble {
display: flex;
align-items: center;
gap: .875rem;
margin-block: 1.25rem;
--_accent: var(--elec-glacon);
}
.text-bubble .text-container {
position: relative;
padding: .325rem 1.25rem;
border-radius: .675rem/1.625rem;
box-sizing: border-box;
border: solid 0.175rem rgb(var(--_accent));
background-color: rgb(var(--_accent),.1);
flex-basis: calc(var(--elec-width)*.475);
max-width: calc(100% - 8.75rem)!important;
}
.text-bubble.alexandra {
--_accent: var(--basalt-undertone);
flex-direction: row-reverse;
}
.text-bubble.alexandra::before {
content: "";
width: min(calc(3.5rem + 2.5vw),6rem); flex-shrink: 0;
height: 6.5rem;
background-image: var(--face);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
filter: saturate(0.75);
}
.alexandra .text-container::before {
content: "";
position: absolute;
border: solid transparent .625rem;
border-inline-end: 0;
border-inline-start: solid .75rem rgb(var(--_accent));
inset-block-start: 50%;
inset-inline-start: 100%;
transform: translate(0, -50%);
}
.d-fadeout {
line-height: 7.5em;
text-align: center;
box-shadow: 0 -10rem 9rem rgb(var(--basalt-main-text-color));
position: relative;
}
/*--------------------------------*/
#u-astra {
--_spacing: 8.75rem;
--_bg: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aspace/spacebg.jpg);
}
.space-container {
padding-block: var(--_spacing);
background-image: var(--_bg);
background-size: calc(45rem + 20%);
background-attachment: fixed;
position: relative;
isolation: isolate;
}
.space-container::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: linear-gradient(to bottom, rgb(var(--basalt-main-text-color)), transparent var(--_spacing), transparent calc(100% - var(--_spacing)),rgb(var(--basalt-main-text-color)) );
}
.banner-wrapper {
margin-block: 1rem;
--_mask: linear-gradient(to bottom, transparent, white 30%, white 85%, transparent);
-webkit-mask-image: var(--_mask);
mask-image: var(--_mask);
}
.banner-wrapper img { width: 100%; }
.aapa-block {
position: relative;
padding: .625rem 1.925rem;
isolation: isolate;
text-indent: 3.5ch;
--_dark:27,48,77;
--_accent:255,185,97;
}
.aapa-block::before {
content: "";
position: absolute;
inset: 0;
background-color: rgb(var(--_dark),.75);
border: .25rem solid rgb(var(--_accent));
border-radius: 0 1.5rem;
z-index: -1;
--_mask: linear-gradient(to bottom, white calc(100% - 15rem), transparent calc(100% - 1.5rem));
-webkit-mask-image: var(--_mask);
mask-image: var(--_mask);
}
.aapa-block hr {
background-color: rgb(var(--_accent));
margin-block: 2.25rem;
}
.aapa-block tt { font-style: italic; }
.aapa-block strong {
color: rgb(var(--_accent));
font-family: var(--mono-font);
}
.aapa-block p[style*="center"] {
margin-block: 2.125em -.75em;
text-indent: initial;
}
.blur-1 { filter: blur(.1em); }
.blur-2 { filter: blur(.2em); }
.blur-3 { filter: blur(.3em); }
.blur-4 { filter: blur(.4em); }
.opacity-75 { opacity: .75; }
.opacity-50 { opacity: .5; }
.opacity-25 { opacity: .25; }
.lucidity {
padding: 2.25rem;
margin-block: 50vh; margin-block: 50svh;
font-family: var(--UI-font);
letter-spacing: .025rem;
font-size: 1.25em;
}
.lucidity span {
color: rgb(var(--basalt-light-text-color), .675);
}
#u-logic-wrapper .wiki-content-table :is(th,td) {
border: none;
padding: .675em 1em;
}
#u-logic-wrapper .wiki-content-table th {
text-align: center;
background-color: rgb(var(--elec-glacon));
color: rgb(var(--basalt-main-text-color));
}
/*--------------------------------*/
#u-lampeter {
--_spacing: 20.75rem;
--_bg: url(https://scp-wiki.wdfiles.com/local--files/scp-8817/sky.jpg);
}
:where(#u-lampeter) .space-container {
background-size: cover;
background-position: center;
}
.the-journey {
position: relative;
isolation: isolate;
padding: .5em 2.25em;
color: rgb(var(--basalt-main-text-color));
--_cut: 1.5rem;
}
.the-journey::before, .the-journey::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
clip-path: polygon(var(--_cut) 0,calc(100% - var(--_cut)) 0, 100% var(--_cut), 100% calc(100% - var(--_cut)), calc(100% - var(--_cut)) 100%, var(--_cut) 100%, 0 calc(100% - var(--_cut)), 0 var(--_cut));
background: linear-gradient(to bottom, rgb(210 160 201/.75), rgb(226 177 133/.75));
}
.the-journey::after {
--_cut: 1.325rem;
inset: .325rem;
background: rgb(var(--basalt-background-color),.75);
}
/*--------------------------------*/
#u-aiad {
--_spacing: 17.5rem;
--_bg: linear-gradient(rgb(var(--basalt-background-color),0.775), rgb(var(--basalt-background-color),0.775)),
url("https://scp-wiki.wdfiles.com/local--files/aiad-homescreen/blue_squares_2.gif");
}
:where(#u-aiad) .space-container {
background-size: 30rem;
background-attachment: local;
}
.aiad-interface {
color: rgb(var(--basalt-main-text-color));
}
.aiad-interface hr { margin-block: 3.25rem; }
.lurk {
--_accent: 170,170,170;
}
.aiad-interface .repo {
padding: .325em 1.125em;
border: solid .25rem rgb(126 100 218);
background-color: rgb(var(--basalt-main-text-color),.875);
color: rgb(var(--basalt-background-color));
margin-block: 1.5rem;
}
.repo h3::before { all: unset; }
.repo > p { padding-inline-start: 1.75em; }
.repo > div.blockquote { border-color: inherit; }
/*--------------------------------*/
.crom {
--_accent: 147,63,101;
}
.crom.standalone {
justify-content: center;
text-align: center;
}
.crom.standalone::before { all:unset!important; }
.crom.standalone .text-container::before { all:unset!important; }
.cromfall {
margin-block: 16.75rem;
position: relative;
}
.cromfall::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
box-shadow: inset 0 0 3.75rem .5rem rgb(var(--basalt-main-text-color));
}
/*--------------------------------*/
#u-finale {
--_spacing: 12.5rem;
--_bg: url(https://scp-wiki.wdfiles.com/local--files/scp-8817/finale.jpg);
}
:where(#u-finale) .space-container {
background-size: cover;
}
:where(#u-finale) .space-container::before {
background-image: linear-gradient(to bottom, rgb(var(--basalt-main-text-color)), transparent var(--_spacing), transparent 30%, rgb(var(--basalt-main-text-color)) 65%);
}
.final-act {
background-color: rgb(var(--basalt-main-text-color),.775);
color: rgb(var(--basalt-background-color));
border-radius: 1.25rem;
padding: .25em 1.5em;
-webkit-backdrop-filter: blur(.125rem);
backdrop-filter: blur(.125rem);
}
.final-act p { margin-block: 1.325em; }
.final-act hr {
background-color: rgb(var(--basalt-undertone));
margin-block: 3.25rem;
}
#u-finale .wiki-content-table th {
background-color: rgb(var(--basalt-undertone));
}
:is(#u-finale, #u-epilogue) .text-bubble.alexandra::before { filter: unset; }
.text-bubble.crom::before {
content: "";
width: min(calc(3.5rem + 2.5vw),6rem); flex-shrink: 0;
height: 6.5rem;
background-image: url(https://scp-wiki.wdfiles.com/local--files/scp-8817/crom_neutral.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.text-bubble.crom.tilt::before {
background-image: url(https://scp-wiki.wdfiles.com/local--files/scp-8817/crom_tilt.png);
}
.text-bubble.crom.bow::before {
background-image: url(https://scp-wiki.wdfiles.com/local--files/scp-8817/crom_bow.png);
}
.crom .text-container::before {
content: "";
position: absolute;
border: solid transparent .625rem;
border-inline-start: 0;
border-inline-end: solid .75rem rgb(var(--_accent));
inset-block-start: 50%;
inset-inline-end: 100%;
transform: translate(0, -50%);
}
.crom.silent .text-container { display: none; }
/*--------------------------------*/
#u-finale.unfolded + #u-blackout {
z-index: 1;
height: 100%;
bottom: 0;
pointer-events: auto;
background-color: rgb(var(--basalt-background-color));
}
#u-ascension {
display: none;
position: fixed;
top: 50%; left: 50%;
width: 100%;
aspect-ratio: 16/9;
transform: translate(-50%, -50%);
animation: alexa .9s forwards .75s, ascend-fade .25s forwards 1.625s;
background-image: url(https://scp-wiki.wdfiles.com/local--files/scp-8817/ascension-sheet.png);
background-position-x: 0;
background-position-y: 0%;
animation-timing-function: step-start, ease-out;
background-size: cover;
background-repeat: no-repeat;
opacity: 1;
pointer-events: none;
z-index: 3;
}
#u-finale.unfolded ~ #u-coverup { display: none; }
#u-finale.unfolded ~ #u-ascension { display: block; }
#u-finale.unfolded + #u-blackout::before {
content: "";
position: absolute;
inset: 0;
background-color: rgb(var(--basalt-main-text-color));
opacity: 1;
animation: ascend-b .125s forwards;
animation-delay: 1.75s;
}
@keyframes ascend-b {
to { opacity: 0; }
}
@keyframes alexa {
0% { background-position-y: 0%; }
10% { background-position-y: 11.1%; }
20% { background-position-y: 22.2%; }
30% { background-position-y: 33.3%; }
40% { background-position-y: 44.4%; }
50% { background-position-y: 55.5%; }
60% { background-position-y: 66.6%; }
70% { background-position-y: 77.7%; }
80% { background-position-y: 88.8%; }
90% { background-position-y: 99.9%; }
100% { background-position-y: 99.9%; }
}
@keyframes ascend-fade {
to { opacity: 0; }
}
/*--------------------------------*/
li#u-epilogue {
z-index: 2;
display: none;
padding-block-start: 65rem;
}
#u-finale.unfolded ~ li#u-epilogue {
display: block;
}
#u-epilogue .elec-log { position: relative; padding-block-end: 10rem; }
#u-epilogue .elec-log::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 10rem;
background: linear-gradient(to bottom, rgb(var(--basalt-background-color)), transparent);
z-index: 1;
}
/*--------------------------------*/
.the-question {
text-align: center;
font-family: var(--UI-font);
font-size: 1.25em;
color: rgb(var(--basalt-undertone));
margin-block-start: 40rem;
}
.pass-content {
text-align: center;
font-family: var(--UI-font);
font-size: 1.25em;
line-height: 1.75;
padding-block-start: 5rem;
}
display: none
height: 30rem;
height: 48rem
height: 20rem;
height: 15rem
height:50rem;
height: 75rem
height:35rem
height:10rem;
component:preview
:scp-wiki:theme:bedrock
[info]
:scp-wiki:theme:lumina
[info]
:scp-wiki:component:interwiki-style
[info]
fragment:alex-bubble
fragment:alex-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:alex-bubble
fragment:alex-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:alex-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:alex-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:alex-bubble
fragment:alex-bubble
fragment:alex-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:other-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:other-bubble
fragment:alex-bubble
fragment:alex-bubble
:scp-wiki:component:passcode
[info]
:scp-wiki:component:license-box
[info]
:scp-wiki:component:license-box-end
[info]
pseudocrumbs
full-width
background-wrapper
full-width
folded
filebox
foldable-list-container
folded
domain-expansion
foldable-list-container
background-filler
star-collapse
folded
forw
elec-log
foldable-list-container
folded
forw
elec-log
foldable-list-container
folded
forw
elec-log
d-fadeout
foldable-list-container
star-collapse
folded
forw
space-container
banner-wrapper
aapa-block
elec-log
blur-1
opacity-75
opacity-75
opacity-75
blur-1
opacity-75
blur-2
opacity-75
opacity-75
opacity-50
opacity-25
blur-2
opacity-75
blur-3
opacity-50
blur-4
opacity-50
blur-4
opacity-25
lucidity
foldable-list-container
star-collapse
folded
forw
space-container
the-journey
elec-log
banner-wrapper
the-journey
elec-log
lucidity
foldable-list-container
star-collapse
folded
forw
space-container
aiad-interface
elec-log
repo
repo
repo
repo
repo
blockquote
blockquote
blockquote
repo
lucidity
crom
standalone
text-bubble
text-container
elec-log
cromfall
foldable-list-container
star-collapse
folded
forw
space-container
final-act
elec-log
banner-wrapper
elec-log
foldable-list-container
star-collapse
folded
elec-log
the-question
pass-content
opacity-75
opacity-75
opacity-50
opacity-50
opacity-25
opacity-25
footer-wikiwalk-nav
blockquote
blockquote
blockquote
blockquote
blockquote
blockquote
blockquote
blockquote
blockquote
blockquote
blockquote