body {
    margin: 0;

    :root[data-crystal-color-scheme='light'] & {
        background: var(--stark-color-body, #ffffff);
    }

    :root[data-crystal-color-scheme='dark'] & {
        background: var(--stark-color-body, #292929ff);
    }

    input:-webkit-autofill {
        box-shadow: 0 0 0 1000px white inset;
    }

    .hidden {
        display: none;
    }

    .splash-screen {
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        :root[data-crystal-color-scheme='light'] & {
            background: var(
                --stark-background-gradient,
                linear-gradient(300deg, rgba(242, 247, 255, 0.18) 0%, rgba(242, 247, 255, 0) 100%),
                linear-gradient(160deg, rgba(232, 241, 255, 0.2) 0%, rgba(232, 241, 255, 0) 50%),
                linear-gradient(45deg, rgba(238, 233, 255, 0.9) 0%, rgba(238, 233, 255, 0.4) 100%),
                #fff
            );

            .just-logo {
                background-image: url(//static.crystal.ai/assets/stark/animations/crystal/looping-glyph.gif);
            }
        }

        :root[data-crystal-color-scheme='dark'] & {
            background: var(--stark-background-gradient, transparent);

            .just-logo {
                background-image: url(//static.crystal.ai/assets/stark/animations/crystal/looping-glyph-white.gif);
            }
        }

        .just-logo {
            position: absolute;
            z-index: 2;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 140px;
            height: 140px;
            background-size: cover;
        }

        .blob-container {
            top: 0;
            left: 0;
            position: fixed;
            width: 100vw;
            height: 100vh;
            display: flex;
            z-index: -1;

            .blob-inner-container {
                width: 50%;
                height: 100%;
                position: relative;
            }

            .blob {
                position: absolute;
                width: 34vw;
                height: 34vw;
                filter: blur(120px);
                transition: transform 10s linear;
                will-change: transform;
            }
        }

        #root-v3 {
            position: relative;
            height: 100%;
        }
    }
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes scale-logo {
    0% {
        transform: scale(65%);
    }

    100% {
        transform: scale(100%);
    }
}