.main-block {
    width: 100%;
    aspect-ratio: 2;
    background:
        radial-gradient(125% 125% at 50% 100%, var(--color-dark-9) 40%, var(--color-green-4-025) 100%),
        var(--color-dark-9);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.main-block-video-back {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.main-block-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.main-block-margin {
    width: 62.5%;
    margin: var(--size-128px) auto;
    margin-top: calc(var(--size-16px) + var(--size-64px) + var(--size-128px));
    position: relative;
    z-index: 1;
}
.auth-block {
    width: 37.5%;
    min-height: var(--size-128px);
    z-index: 1;
}

.auth-title {
    margin: 0 0 var(--size-16px) 0;
    font-variation-settings: "wdth" 200;
    font-weight: 400;
}
.input-title {
    margin: var(--size-12px) 0 var(--size-8px) 0;
}
.auth-mail-input, .auth-password-input, .auth-username-input, .auth-mail-code-input {
    width: auto;
}
.auth-mail-code-input {
    display: flex;
    gap: var(--size-16px);
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    clip: auto;
    margin-top: var(--size-16px);
}
.auth-code-cell {
    font-family: 'MartianGrotesk';
    width: calc(100% / 6 - var(--size-16px) * 5 / 6 - var(--size-1px) * 2);
    aspect-ratio: 0.625;
    padding: 0;
    border-radius: var(--size-16px);
    border: var(--size-1px) solid var(--color-light-9);
    background-color: var(--color-dark-5);
    color: var(--color-light-1);
    font-weight: 400;
    text-align: center;
    outline: none;
    transition: border-color 0.4s ease, transform 0.4s ease;
    font-size: var(--size-24px);
}
.auth-code-cell:focus {
    border-color: var(--color-green-4);
    transform: translateY(calc(-1 * var(--size-1px)));
}
.auth-button {
    width: 100%;
    margin-top: var(--size-32px);
}
.auth-not-auccount {
    margin: var(--size-16px) auto 0 auto;
    width: fit-content;
}
.auth-message {
    padding: var(--size-16px);
    border-radius: var(--size-16px);
    margin: var(--size-16px) 0;
    word-wrap: break-word;
    text-align: center;
}
.auth-message-success {
    background-color: rgba(40, 167, 69, 0.2);
    color: #51cf66;
    border: var(--size-1px) solid rgba(40, 167, 69, 0.5);
}
@media screen and (max-width: 420px) {
    .main-block {
        aspect-ratio: 0.5;
    }
    .main-block-video {
        object-fit: cover;
        object-position: 70% center;
    }
    .main-block-margin {
        width: auto;
        margin: var(--size-32px) var(--size-16px);
        margin-top: calc(var(--size-48px) + var(--size-64px));
    }
    .auth-block {
        width: auto;
    }
}