html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    line-height: 1;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
table th {
    text-align: left;
}
*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
details,
summary {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
mark {
    background: none;
}
hr {
    height: 1px;
    margin: 0;
    padding: 0;
}
u {
    text-decoration: none;
}
a {
    color: inherit;
    outline: none;
}

:root {
    --header-height: 80px;
    --page-top-padding: 80px;
    --page-horizontal-padding: 25px;
}
@media (max-width: 1300px) {
    :root {
        --header-height: 70px;
        --page-top-padding: 70px;
    }
}
@media (max-width: 1080px) {
    :root {
        --header-height: 60px;
        --page-top-padding: 60px;
    }
}
@media (max-width: 800px) {
    :root {
        --header-height: 50px;
        --page-top-padding: 50px;
        --page-horizontal-padding: 20px;
    }
}
@media (max-width: 600px) {
    :root {
        --page-horizontal-padding: 15px;
    }
}
@media (max-width: 400px) {
    :root {
        --page-horizontal-padding: 10px;
    }
}
.sizes-viewport-dummy {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}
html {
    font-size: 16px;
    overflow-x: clip;
    background: #fff;
}
@media (max-width: 1600px) {
    html {
        font-size: 16px;
    }
}
@media (max-width: 1300px) {
    html {
        font-size: 16px;
    }
}
@media (max-width: 1080px) {
    html {
        font-size: 16px;
    }
}
@media (max-width: 800px) {
    html {
        font-size: 15px;
    }
}
@media (max-width: 600px) {
    html {
        font-size: 14px;
    }
}
@media (max-width: 400px) {
    html {
        font-size: 14px;
    }
}
@media print {
    html {
        font-size: 10px !important;
    }
}
html.is-theme-dark {
    background: #1a1a1a;
    color: #fff;
}
html.is-theme-abyss {
    background: #140b29;
    color: #fff;
}
html.is-theme-abyss ::selection {
    color: #140b29;
    background: #e381ff;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}
p {
    margin-bottom: 1em;
    line-height: 1.65em;
}
p:last-child {
    margin-bottom: 0;
}
a {
    text-decoration: none;
}
a[href^="mailto"] {
    white-space: nowrap;
}
p .highlight,
ul .highlight,
ol .highlight {
    color: #32ffce;
}
p .highlight.is-green,
ul .highlight.is-green,
ol .highlight.is-green {
    color: #c6ff83;
}
p .highlight.is-purple,
ul .highlight.is-purple,
ol .highlight.is-purple {
    color: #b79eff;
}
p a,
ul a,
ol a {
    text-decoration: none;
}
p a:hover,
ul a:hover,
ol a:hover {
    text-decoration-style: wavy;
    text-decoration-skip-ink: none;
}
li {
    line-height: 2em;
}
strong,
.strong {
    font-weight: 700;
}
button {
    cursor: pointer;
    height: auto;
}
small {
    font-size: 0.5em;
}
h1,
h2,
h3,
h4,
h5,
.h1,
.h2,
.h3,
.h4,
.h5 {
    font-weight: 700;
}
h1,
.h1 {
    font-size: 2rem;
}
h2,
.h2 {
    font-size: 1.75rem;
}
h3,
.h3 {
    font-size: 1.5rem;
}
h4,
.h4 {
    font-size: 1.25rem;
}
::selection {
    background: #8b7bf3;
}
::-moz-selection {
    background: #8b7bf3;
}
.clear-selection ::selection {
    background: rgba(139, 123, 243, 0.333);
}
.clear-selection ::-moz-selection {
    background: rgba(139, 123, 243, 0.333);
}
pre[contenteditable] ::selection {
    background: rgba(139, 123, 243, 0.267);
}
pre[contenteditable] ::-moz-selection {
    background: rgba(139, 123, 243, 0.267);
}
.helper-no-wrap {
    white-space: nowrap !important;
}
.helper-text-align-left {
    text-align: left !important;
}
.helper-text-align-center {
    text-align: center !important;
}
.helper-text-align-right {
    text-align: right !important;
}
.helper-text-muted {
    opacity: 0.5;
}
.grecaptcha-badge {
    opacity: 0;
}
@-moz-keyframes logo-blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes logo-blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes logo-blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes logo-blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.abyss-button {
    position: relative;
    display: inline-block;
    min-width: 58px;
    height: 58px;
    font-size: 16px;
    font-weight: 700;
}
@media (max-width: 800px) {
    .abyss-button {
        font-size: 15px;
    }
}
@media (max-width: 600px) {
    .abyss-button {
        font-size: 14px;
    }
}
@media (max-width: 400px) {
    .abyss-button {
        font-size: 14px;
    }
}
@media (max-width: 800px) {
    .abyss-button {
        min-width: 50px;
        height: 50px;
    }
}
@media (max-width: 600px) {
    .abyss-button {
        min-width: 40px;
        height: 40px;
    }
}
.abyss-button:not(.is-locked):hover .inner.is-hover {
    opacity: 1;
}
.abyss-button.is-primary .inner {
    background: #705df2;
    border: none;
    color: #fff;
}
.abyss-button.is-primary .inner.is-hover {
    border: none;
    background: #fff;
    color: #140b29;
}
.abyss-button.is-round .inner {
    padding-left: 0;
    padding-right: 0;
}
.abyss-button.is-locked {
    cursor: not-allowed;
    opacity: 0.5;
}
.abyss-button .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding-left: 35px;
    padding-right: 35px;
    border: 2px solid #a39bce;
    border-radius: 29px;
    color: #a39bce;
}
.abyss-button .inner.is-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-color: #fff;
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s;
}
.abyss-form {
    --element-botom-margin: 20px;
    --element-height: 60px;
    text-align: left;
}
.abyss-form input:-webkit-autofill,
.abyss-form input:-webkit-autofill:hover,
.abyss-form input:-webkit-autofill:focus,
.abyss-form input:-webkit-autofill:active,
.abyss-form select:-webkit-autofill,
.abyss-form select:-webkit-autofill:hover,
.abyss-form select:-webkit-autofill:focus,
.abyss-form select:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff;
    transition: background-color 5000s ease-in-out 0s;
}
.abyss-form fieldset {
    margin-bottom: 2em;
}
.abyss-form .choices {
    display: flex;
    text-align: center;
    height: var(--element-height);
    margin-bottom: var(--element-botom-margin);
}
.abyss-form .choices .choice {
    --text-color: #a39bce;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #705df2;
    border-right: none;
    font-weight: 700;
    color: var(--text-color);
    cursor: pointer;
}
.abyss-form .choices .choice.is-active {
    --text-color: #fff;
    background: #705df2;
    cursor: default;
}
.abyss-form .choices .choice:hover {
    --text-color: #fff;
}
.abyss-form .choices .choice:first-child {
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}
.abyss-form .choices .choice:last-child {
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
    border-right: 1px solid #705df2;
}
.abyss-form .choices .choice .value {
    vertical-align: middle;
}
.abyss-form .choices .choice .icon {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}
.abyss-form .choices .choice .icon svg *[fill] {
    fill: var(--text-color);
}
.abyss-form .choices .choice .icon svg *[stroke] {
    stroke: var(--text-color);
}
.abyss-form .input-group {
    --input-padding: 15px;
    --text-color: #a39bce;
    position: relative;
    margin-bottom: var(--element-botom-margin);
    font-weight: 500;
}
.abyss-form .input-group.is-input-text,
.abyss-form .input-group.is-input-select,
.abyss-form .input-group.is-input-textarea {
    min-height: var(--element-height);
}
.abyss-form .input-group.is-input-text.is-focused,
.abyss-form .input-group.is-input-select.is-focused,
.abyss-form .input-group.is-input-textarea.is-focused {
    --text-color: #705df2;
}
.abyss-form .input-group.is-input-text.is-focused .label,
.abyss-form .input-group.is-input-select.is-focused .label,
.abyss-form .input-group.is-input-textarea.is-focused .label {
    transform: translateY(-0.4em) scale(0.875);
}
.abyss-form .input-group.is-input-text.is-focused .label .value,
.abyss-form .input-group.is-input-select.is-focused .label .value,
.abyss-form .input-group.is-input-textarea.is-focused .label .value {
    opacity: 0.5;
}
.abyss-form .input-group.is-input-text.is-filled .input-textarea,
.abyss-form .input-group.is-input-select.is-filled .input-textarea,
.abyss-form .input-group.is-input-textarea.is-filled .input-textarea {
    padding-bottom: calc(var(--element-height) * 0.25);
}
.abyss-form .input-group.is-input-text.is-filled .label,
.abyss-form .input-group.is-input-select.is-filled .label,
.abyss-form .input-group.is-input-textarea.is-filled .label {
    transform: translateY(-0.4em) scale(0.875);
}
.abyss-form .input-group.is-input-text.is-filled .label .value,
.abyss-form .input-group.is-input-select.is-filled .label .value,
.abyss-form .input-group.is-input-textarea.is-filled .label .value {
    opacity: 0.5;
}
.abyss-form .input-group.is-input-text.is-error,
.abyss-form .input-group.is-input-select.is-error,
.abyss-form .input-group.is-input-textarea.is-error {
    --text-color: #ff5b86;
}
.abyss-form .input-group.is-input-text.is-error .label,
.abyss-form .input-group.is-input-select.is-error .label,
.abyss-form .input-group.is-input-textarea.is-error .label {
    color: var(--text-color);
}
.abyss-form .input-group.is-input-text.is-error .label .value,
.abyss-form .input-group.is-input-select.is-error .label .value,
.abyss-form .input-group.is-input-textarea.is-error .label .value {
    opacity: 1;
}
.abyss-form .input-group.is-input-text.is-success,
.abyss-form .input-group.is-input-select.is-success,
.abyss-form .input-group.is-input-textarea.is-success {
    --text-color: #32ffce;
}
.abyss-form .input-group.is-input-text.is-success .label,
.abyss-form .input-group.is-input-select.is-success .label,
.abyss-form .input-group.is-input-textarea.is-success .label {
    color: var(--text-color);
}
.abyss-form .input-group.is-input-text.is-success .label .value,
.abyss-form .input-group.is-input-select.is-success .label .value,
.abyss-form .input-group.is-input-textarea.is-success .label .value {
    opacity: 1;
}
.abyss-form .input-group.is-input-text.has-icon .input-text,
.abyss-form .input-group.is-input-select.has-icon .input-text,
.abyss-form .input-group.is-input-textarea.has-icon .input-text,
.abyss-form .input-group.is-input-text.has-icon .input-select,
.abyss-form .input-group.is-input-select.has-icon .input-select,
.abyss-form .input-group.is-input-textarea.has-icon .input-select {
    padding-right: var(--element-height);
}
.abyss-form .input-group.is-input-text.has-icon.has-message .icon,
.abyss-form .input-group.is-input-select.has-icon.has-message .icon,
.abyss-form .input-group.is-input-textarea.has-icon.has-message .icon {
    transform: translateY(10px);
}
.abyss-form .input-group.is-input-text .input-text.is-text-small,
.abyss-form .input-group.is-input-select .input-text.is-text-small,
.abyss-form .input-group.is-input-textarea .input-text.is-text-small,
.abyss-form .input-group.is-input-text .input-select.is-text-small,
.abyss-form .input-group.is-input-select .input-select.is-text-small,
.abyss-form .input-group.is-input-textarea .input-select.is-text-small,
.abyss-form .input-group.is-input-text .input-textarea.is-text-small,
.abyss-form .input-group.is-input-select .input-textarea.is-text-small,
.abyss-form .input-group.is-input-textarea .input-textarea.is-text-small {
    font-size: 14px;
}
.abyss-form .input-group.is-input-text .border,
.abyss-form .input-group.is-input-select .border,
.abyss-form .input-group.is-input-textarea .border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    border: 1px solid var(--text-color);
    pointer-events: none;
}
.abyss-form .input-group.is-input-text .label,
.abyss-form .input-group.is-input-select .label,
.abyss-form .input-group.is-input-textarea .label {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    top: 0;
    left: var(--input-padding);
    width: 100%;
    height: var(--element-height);
    pointer-events: none;
    transform-origin: 0 0;
    transition: transform 0.1s;
}
.abyss-form .input-group.is-input-text .label .value,
.abyss-form .input-group.is-input-select .label .value,
.abyss-form .input-group.is-input-textarea .label .value {
    transition: opacity 0.1s, color 0.15s;
}
.abyss-form .input-group.is-input-text .message,
.abyss-form .input-group.is-input-select .message,
.abyss-form .input-group.is-input-textarea .message {
    position: absolute;
    top: 12px;
    right: 20px;
    font-size: 14px;
    color: var(--text-color);
}
.abyss-form .input-group.is-input-text .input-text,
.abyss-form .input-group.is-input-select .input-text,
.abyss-form .input-group.is-input-textarea .input-text,
.abyss-form .input-group.is-input-text .input-select,
.abyss-form .input-group.is-input-select .input-select,
.abyss-form .input-group.is-input-textarea .input-select {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-right: 10px;
    padding-top: calc(var(--element-height) * 0.25);
    padding-left: var(--input-padding);
    border-radius: 14px;
}
.abyss-form .input-group.is-input-text .input-textarea,
.abyss-form .input-group.is-input-select .input-textarea,
.abyss-form .input-group.is-input-textarea .input-textarea {
    width: 100%;
    min-height: var(--element-height);
    padding-right: 10px;
    padding-left: var(--input-padding);
    padding-top: calc(var(--element-height) * 0.5);
    resize: none;
}
.abyss-form .input-group.is-input-text .icon,
.abyss-form .input-group.is-input-select .icon,
.abyss-form .input-group.is-input-textarea .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    width: var(--element-height);
    height: 100%;
    pointer-events: none;
    transition: transform 0.1s;
}
.abyss-form .input-group.is-input-text .icon svg *[fill],
.abyss-form .input-group.is-input-select .icon svg *[fill],
.abyss-form .input-group.is-input-textarea .icon svg *[fill] {
    fill: var(--text-color);
}
.abyss-form .input-group.is-input-text .icon svg *[stroke],
.abyss-form .input-group.is-input-select .icon svg *[stroke],
.abyss-form .input-group.is-input-textarea .icon svg *[stroke] {
    stroke: var(--text-color);
}
.abyss-form .input-group.is-input-text .abyss-button,
.abyss-form .input-group.is-input-select .abyss-button,
.abyss-form .input-group.is-input-textarea .abyss-button {
    position: absolute;
    top: 6px;
    right: 6px;
    bottom: 6px;
    height: auto;
}
.abyss-form .input-group.is-input-text .abyss-button .inner,
.abyss-form .input-group.is-input-select .abyss-button .inner,
.abyss-form .input-group.is-input-textarea .abyss-button .inner {
    border-radius: 10px;
}
.abyss-form .input-group.is-input-checkbox.is-error .label,
.abyss-form .input-group.is-input-radio.is-error .label {
    color: #ff5b86;
}
.abyss-form .input-group.is-input-checkbox.is-error .label .checkmark:before,
.abyss-form .input-group.is-input-radio.is-error .label .checkmark:before {
    border-color: #ff5b86;
}
.abyss-form .input-group.is-input-checkbox.is-input-radio .label .checkmark:before,
.abyss-form .input-group.is-input-radio.is-input-radio .label .checkmark:before {
    border-radius: 50%;
}
.abyss-form .input-group.is-input-checkbox .label,
.abyss-form .input-group.is-input-radio .label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 1em;
    line-height: 1em;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
}
.abyss-form .input-group.is-input-checkbox .label:last-child,
.abyss-form .input-group.is-input-radio .label:last-child {
    margin-bottom: 0;
}
.abyss-form .input-group.is-input-checkbox .label:hover .checkmark:before,
.abyss-form .input-group.is-input-radio .label:hover .checkmark:before {
    border-color: #705df2;
}
.abyss-form .input-group.is-input-checkbox .label a,
.abyss-form .input-group.is-input-radio .label a {
    text-decoration: none;
}
.abyss-form .input-group.is-input-checkbox .label a:hover,
.abyss-form .input-group.is-input-radio .label a:hover {
    text-decoration-style: wavy;
    text-decoration-skip-ink: none;
}
.abyss-form .input-group.is-input-checkbox .label input,
.abyss-form .input-group.is-input-radio .label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.abyss-form .input-group.is-input-checkbox .label input:checked ~ .checkmark:before,
.abyss-form .input-group.is-input-radio .label input:checked ~ .checkmark:before {
    background: #705df2;
    border: none;
}
.abyss-form .input-group.is-input-checkbox .label input:checked ~ .checkmark:after,
.abyss-form .input-group.is-input-radio .label input:checked ~ .checkmark:after {
    display: block;
}
.abyss-form .input-group.is-input-checkbox .label .checkmark,
.abyss-form .input-group.is-input-radio .label .checkmark {
    position: absolute;
    top: calc(50% - 12px);
    left: 0;
    height: 25px;
    width: 25px;
}
.abyss-form .input-group.is-input-checkbox .label .checkmark:before,
.abyss-form .input-group.is-input-radio .label .checkmark:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #a39bce;
    border-radius: 4px;
    transition: opacity 0.15s;
}
.abyss-form .input-group.is-input-checkbox .label .checkmark:after,
.abyss-form .input-group.is-input-radio .label .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 10px;
    top: 5px;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.abyss-form .buttons-group {
    display: flex;
}
.abyss-form .buttons-group > * {
    margin-right: 10px;
}
.abyss-form .buttons-group > *:last-child {
    margin-right: 0;
}
.abyss-form .buttons-group.is-aligned-right {
    justify-content: flex-end;
}
.alerts {
    margin-bottom: 2rem;
}
.alerts:last-child {
    margin-bottom: 0;
}
.alert {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 25px 35px;
    background: linear-gradient(34.41deg, #4d4657 0%, rgba(61, 59, 84, 0.74) 38.5%, rgba(44, 48, 81, 0.479) 77.01%, rgba(29, 38, 78, 0.234) 113.2%, rgba(15, 28, 75, 0) 147.85%);
    border-radius: 12px;
    margin-bottom: 1rem;
    line-height: 1.25em;
    font-weight: 500;
}
@media (max-width: 600px) {
    .alert {
        padding-left: 30px;
        padding-right: 30px;
    }
}
@media (max-width: 400px) {
    .alert {
        padding-left: 20px;
        padding-right: 20px;
    }
}
.alert.has-icon {
    padding-left: 75px;
    padding-right: 35px;
}
@media (max-width: 600px) {
    .alert.has-icon {
        padding-left: 55px;
        padding-right: 25px;
    }
}
.alert.has-icon.helper-text-align-center {
    padding-right: 75px;
}
@media (max-width: 600px) {
    .alert.has-icon.helper-text-align-center {
        padding-right: 60px;
    }
}
.alert.is-error {
    background: linear-gradient(95deg, #752525 0%, rgba(112, 29, 43, 0.734) 37.85%, rgba(107, 22, 50, 0.484) 73.46%, rgba(102, 15, 56, 0.24) 108.34%, rgba(98, 8, 62, 0) 142.48%);
    color: #ffdcc8;
}
.alert.is-error > .icon svg * {
    fill: #fa6c63;
}
.alert.is-error .button {
    box-shadow: 5px 5px 30px #461926;
}
.alert.is-success {
    background: linear-gradient(75deg, #8ac73d -34.31%, rgba(105, 166, 59, 0.734) 7.18%, rgba(74, 134, 57, 0.479) 47.04%, rgba(43, 103, 55, 0.229) 86.08%, rgba(15, 75, 53, 0) 121.87%);
    color: #ebffdb;
}
.alert.is-success > .icon svg * {
    fill: #f3ffa8;
}
.alert.is-success .button {
    box-shadow: 5px 5px 30px #293d2a;
}
.alert.is-info {
    background: linear-gradient(85deg, #0c5868 0%, rgba(21, 69, 97, 0.745) 44.79%, rgba(29, 51, 90, 0.5) 87.75%, rgba(37, 32, 82, 0.24) 133.46%, rgba(45, 15, 75, 0) 175.51%);
    color: #dbfffb;
}
.alert.is-info > .icon svg * {
    fill: #7ae7ff;
}
.alert.is-info .button {
    box-shadow: 5px 5px 30px #1a2e42;
}
.alert.is-warning {
    background: linear-gradient(75deg, #cf7d30 0%, rgba(174, 94, 43, 0.755) 35.61%, rgba(140, 63, 37, 0.505) 71.97%, rgba(106, 32, 31, 0.255) 108.33%, rgba(71, 0, 26, 0) 145.45%);
    color: #ffedd2;
}
.alert.is-warning > .icon svg * {
    fill: #ffd78a;
}
.alert.is-warning .button {
    box-shadow: 5px 5px 30px #6a3a22;
}
.alert ul {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 1em;
}
.alert ul ul {
    list-style: circle;
}
.alert ul li {
    line-height: 1.25em;
    margin-top: 0.25em;
}
.alert ul li:first-child {
    margin-top: 0;
}
.alert ol {
    list-style: auto;
    padding-left: 20px;
    margin-bottom: 1em;
}
.alert ol li {
    line-height: 1.25em;
    margin-top: 0.25em;
}
.alert ol li:first-child {
    margin-top: 0;
}
.alert ol li::marker {
    font-weight: 700;
}
.alert p {
    line-height: 1.25em;
}
.alert h1,
.alert h2,
.alert h3,
.alert h4,
.alert h5,
.alert .h1,
.alert .h2,
.alert .h3,
.alert .h4,
.alert .h5 {
    margin-bottom: 1em;
}
.alert > .icon {
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translate(-50%, -50%);
}
@media (max-width: 600px) {
    .alert > .icon {
        left: 30px;
    }
}
.alert > .icon svg {
    display: block;
}
.alert .button {
    box-shadow: 5px 5px 30px #27212e;
    -webkit-mask-image: none;
}
.animated-title {
    display: inline-block;
}
.animated-title.is-visible .letter {
    transition-property: opacity, transform;
    transition-duration: 0.3s, 0.3s;
    transition-timing-function: ease-out, ease-out;
    opacity: 1;
    transform: translateY(0);
}
.animated-title.is-visible .letter.letter-0 {
    transition-delay: 0s;
}
.animated-title.is-visible .letter.letter-1 {
    transition-delay: 0.08s;
}
.animated-title.is-visible .letter.letter-2 {
    transition-delay: 0.16s;
}
.animated-title.is-visible .letter.letter-3 {
    transition-delay: 0.24s;
}
.animated-title.is-visible .letter.letter-4 {
    transition-delay: 0.32s;
}
.animated-title.is-visible .letter.letter-5 {
    transition-delay: 0.4s;
}
.animated-title.is-visible .letter.letter-6 {
    transition-delay: 0.48s;
}
.animated-title.is-visible .letter.letter-7 {
    transition-delay: 0.56s;
}
.animated-title.is-visible .letter.letter-8 {
    transition-delay: 0.64s;
}
.animated-title.is-visible .letter.letter-9 {
    transition-delay: 0.72s;
}
.animated-title.is-visible .letter.letter-10 {
    transition-delay: 0.8s;
}
.animated-title.is-visible .letter.letter-11 {
    transition-delay: 0.88s;
}
.animated-title.is-visible .letter.letter-12 {
    transition-delay: 0.96s;
}
.animated-title.is-visible .letter.letter-13 {
    transition-delay: 1.04s;
}
.animated-title.is-visible .letter.letter-14 {
    transition-delay: 1.12s;
}
.animated-title.is-visible .letter.letter-15 {
    transition-delay: 1.2s;
}
.animated-title.is-visible .letter.letter-16 {
    transition-delay: 1.28s;
}
.animated-title.is-visible .letter.letter-17 {
    transition-delay: 1.36s;
}
.animated-title.is-visible .letter.letter-18 {
    transition-delay: 1.44s;
}
.animated-title.is-visible .letter.letter-19 {
    transition-delay: 1.52s;
}
.animated-title.is-visible .letter.letter-20 {
    transition-delay: 1.6s;
}
.animated-title.is-visible .letter.letter-21 {
    transition-delay: 1.68s;
}
.animated-title.is-visible .letter.letter-22 {
    transition-delay: 1.76s;
}
.animated-title.is-visible .letter.letter-23 {
    transition-delay: 1.84s;
}
.animated-title.is-visible .letter.letter-24 {
    transition-delay: 1.92s;
}
.animated-title.is-visible .letter.letter-25 {
    transition-delay: 2s;
}
.animated-title.is-visible .letter.letter-26 {
    transition-delay: 2.08s;
}
.animated-title.is-visible .letter.letter-27 {
    transition-delay: 2.16s;
}
.animated-title.is-visible .letter.letter-28 {
    transition-delay: 2.24s;
}
.animated-title.is-visible .letter.letter-29 {
    transition-delay: 2.32s;
}
.animated-title.is-visible .letter.letter-30 {
    transition-delay: 2.4s;
}
.animated-title.is-visible .letter.letter-31 {
    transition-delay: 2.48s;
}
.animated-title.is-visible .letter.letter-32 {
    transition-delay: 2.56s;
}
.animated-title.is-visible .letter.letter-33 {
    transition-delay: 2.64s;
}
.animated-title.is-visible .letter.letter-34 {
    transition-delay: 2.72s;
}
.animated-title.is-visible .letter.letter-35 {
    transition-delay: 2.8s;
}
.animated-title.is-visible .letter.letter-36 {
    transition-delay: 2.88s;
}
.animated-title.is-visible .letter.letter-37 {
    transition-delay: 2.96s;
}
.animated-title.is-visible .letter.letter-38 {
    transition-delay: 3.04s;
}
.animated-title.is-visible .letter.letter-39 {
    transition-delay: 3.12s;
}
.animated-title.is-visible .letter.letter-40 {
    transition-delay: 3.2s;
}
.animated-title .word {
    white-space: nowrap;
}
.animated-title .letter {
    display: inline-block;
    position: relative;
    color: #fff;
    opacity: 0;
    transform: translateY(-20px);
    will-change: opacity, transform;
}
.animated-title .letter.highlight {
    color: #705df2;
}
.button {
    display: inline-flex;
    position: relative;
    height: 47px;
    margin-right: 20px;
    border-radius: 8px;
    background: #272727;
    flex-direction: row;
    align-items: center;
    text-decoration: none !important;
    overflow: hidden;
    vertical-align: middle;
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}
@media (max-width: 800px) {
    .button {
        margin-right: 15px;
    }
}
@media (max-width: 600px) {
    .button {
        margin-right: 10px;
    }
}
.button:last-child {
    margin-right: 0;
}
.button.is-disabled {
    opacity: 0.5;
    cursor: default;
}
.button.has-icon-left .label {
    margin-left: 0;
}

.button.is-main-join {
    height: 72px;
    border-radius: 36px;
    box-shadow: 0 24px 74px #3c00bd29;
    -webkit-mask-image: none;
}
@media (max-width: 1600px) {
    .button.is-main-join {
        height: 68px;
    }
}
@media (max-width: 1300px) {
    .button.is-main-join {
        height: 64px;
    }
}
@media (max-width: 1080px) {
    .button.is-main-join {
        height: 60px;
    }
}
.button.is-main-join:hover .price {
    opacity: 0.8;
}
.button.is-main-join:hover .price .vat {
    opacity: 1;
}
.button.is-main-join .label {
    margin-left: 40px;
    margin-right: 40px;
    
    font-weight: 700;
    font-size: 20px;
}
@media (max-width: 1600px) {
    .button.is-main-join .label {
        margin-left: 38px;
        margin-right: 38px;
    }
}
@media (max-width: 1300px) {
    .button.is-main-join .label {
        margin-left: 36px;
        margin-right: 36px;
    }
}
@media (max-width: 1080px) {
    .button.is-main-join .label {
        margin-left: 34px;
        margin-right: 34px;
        font-size: 19px;
    }
}
@media (max-width: 800px) {
    .button.is-main-join .label {
        font-size: 18px;
    }
}
.button.is-main-join .vertical-separator {
    display: block;
    position: relative;
    left: -4px;
    width: 1px;
    height: 100%;
    background: #705df2;
    opacity: 0.1;
}
.button.is-main-join .price {
    position: relative;
    padding-right: 20px;
    padding-left: 20px;
    margin-right: 14px;
    
    font-weight: 700;
    font-size: 26px;
    opacity: 0.6;
    transition: opacity 0.3s;
}
@media (max-width: 1080px) {
    .button.is-main-join .price {
        padding-right: 18px;
        padding-left: 18px;
        font-size: 24px;
    }
}
@media (max-width: 800px) {
    .button.is-main-join .price {
        padding-right: 16px;
        padding-left: 16px;
        font-size: 22px;
    }
}
.button.is-main-join .price .vat {
    position: absolute;
    top: calc(50% + 0.85em);
    left: 0;
    width: 100%;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
}
.button.is-main-join .hover {
    opacity: 0.035;
}
.button.is-login .icon {
    width: 21px;
    height: 19px;
}
@media (max-width: 400px) {
    .button.is-login .icon {
        display: none;
    }
}
@media (max-width: 400px) {
    .button.is-login .label {
        margin-left: 15px;
    }
}
.button.is-white {
    background: #fff;
}
.button.is-white .label {
    opacity: 1;
    color: #705df2;
}
@media (max-width: 400px) {
    .button.is-white .label {
        margin-left: 15px;
    }
}
@media (max-width: 400px) {
    .button.is-white .label {
        margin-right: 15px;
    }
}
.button.is-white .hover {
    background: #705df2;
    opacity: 0.035;
}
.button.is-join {
    background: #705df2;
}
.button.is-join .icon {
    width: 18px;
    height: 19px;
    opacity: 1;
}
@media (max-width: 400px) {
    .button.is-join .icon {
        display: none;
    }
}
.button.is-join .label {
    opacity: 1;
}
@media (max-width: 400px) {
    .button.is-join .label {
        margin-left: 15px;
    }
}
.button.is-abyss-join {
    border-radius: 24px;
    padding: 0 10px;
}
.button.is-abyss-join .icon {
    width: 14px;
    height: 16px;
    opacity: 1;
}
.button.is-abyss-join .icon svg * {
    fill: none;
    stroke: #fff;
}
.button.is-abyss-join .label {
    opacity: 1;
}
.button.is-buy-join {
    border-radius: 35px;
    background: #fff;
    height: 70px;
    color: #705df2;
    padding: 0 18px;
    overflow: visible;
    -webkit-mask-image: none;
}
@media (max-width: 800px) {
    .button.is-buy-join {
        height: 60px;
    }
}
@media (max-width: 600px) {
    .button.is-buy-join {
        height: 50px;
    }
}
.button.is-buy-join:hover:before {
    opacity: 0.65;
    transition-duration: 0.05s;
}
.button.is-buy-join:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 35px;
    box-shadow: 0 0 50px #fff;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.button.is-buy-join .icon {
    width: 18px;
    height: 19px;
    opacity: 1;
}
.button.is-buy-join .label {
    opacity: 1;
    font-size: 18px;
    color: #705df2;
}
@media (max-width: 400px) {
    .button.is-buy-join .non-important {
        display: none;
    }
}
.button.is-discord {
    background: #5c43f5;
}
.button.is-discord .icon {
    position: relative;
    top: 2px;
    opacity: 1;
    width: 22px;
    height: 24px;
}
.button.is-discord .label {
    font-weight: 800;
    opacity: 1;
}
.button.is-discord.is-secondary {
    background: #4b495b;
}
.button.is-locked .icon {
    top: 0;
    width: 20px;
    height: 21px;
}
.button.has-code .clickable-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 170px;
    height: 100%;
}
.button.has-code .code {
    display: block;
    position: relative;
    
    font-weight: 700;
    font-size: 16px;
    margin-right: 6px;
    padding: 6px 8px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.267);
}
.button.is-pink {
    background: #ec4a7a;
}
.button.is-pink .icon,
.button.is-pink .label {
    opacity: 1;
}
.button.is-purple {
    background: #705df2;
}
.button.is-purple .icon,
.button.is-purple .label {
    opacity: 1;
}
.button.is-gray {
    background: #393939;
}
.button.is-gray .icon,
.button.is-gray .label {
    opacity: 1;
}
.button.is-small {
    border-radius: 4px;
    height: 24px;
}
.button.is-small .label {
    margin-left: 8px;
    margin-right: 8px;
    font-size: 0.6rem;
}
.button.is-large {
    height: 60px;
    white-space: nowrap;
}
@media (max-width: 800px) {
    .button.is-large {
        height: 55px;
    }
}
@media (max-width: 600px) {
    .button.is-large {
        height: 50px;
    }
}
.button.is-large .label {
    margin-left: 20px;
    margin-right: 20px;
    font-size: 1rem;
}
.button.is-gift .icon {
    width: 20px;
    height: 20px;
}
.button.is-play .icon {
    width: 12px;
    height: 14px;
}
.button.is-play .icon svg {
    display: block;
}
.button.is-linkedin .icon {
    width: 21px;
    height: 21px;
}
.button.is-linkedin .icon svg {
    display: block;
}
.button.is-do.is-done .icon .disc {
    transform: scale(1);
}
.button.is-do .label {
    margin-right: 25px;
    line-height: 1.25em;
}
.button.is-do .hover {
    background: #fff;
}
.button.is-do .icon {
    margin-left: 15px;
    margin-right: 15px;
    width: 29px;
    height: 29px;
    opacity: 1;
}
.button.is-do .icon .default {
    position: absolute;
    top: calc(50% - 5px);
    left: calc(50% - 6px);
    width: 12px;
    height: 11px;
}
.button.is-do .icon .default svg {
    display: block;
}
.button.is-do .icon .default svg * {
    fill: #fff;
}
.button.is-do .icon .disc {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.2s ease-in;
    will-change: transform;
}
.button.is-do .icon .disc .inner {
    position: absolute;
    top: calc(50% - 5px);
    left: calc(50% - 6px);
    width: 12px;
    height: 10px;
}
.button.is-do .icon .disc .inner svg {
    display: block;
    width: 100%;
    height: 100%;
}
.button.is-do .icon .disc .inner svg * {
    fill: #705df2;
}
.button.is-abyss {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.button.is-vote .icon {
    opacity: 1;
}
.button.is-vote .icon.star {
    top: -1px;
}
.button.is-vote .icon.star * {
    fill: #fff;
}
.is-voted .button.is-vote {
    border-color: #ffc37d80;
}
.is-voted .button.is-vote .icon.star * {
    fill: #ffc37d;
}
.button:hover:not(.is-disabled) .hover {
    transform-origin: 0 0;
    transform: scaleX(1);
}
.button:hover:not(.is-disabled) .icon {
    transition-delay: 0.15s;
    opacity: 1;
}
.button:hover:not(.is-disabled) .label {
    transition-delay: 0.25s;
    opacity: 1;
}
.button .hover {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.05;
    transform: scaleX(0);
    transform-origin: 100% 100%;
    transition: transform 0.6s cubic-bezier(0.53, 0.21, 0, 1);
    will-change: transform;
}
.button .icon {
    display: block;
    position: relative;
    margin-left: 15px;
    margin-right: 15px;
    opacity: 0.75;
    transition: opacity 0.3s;
    will-change: opacity;
}
.button .icon svg {
    display: block;
    width: 100%;
    height: 100%;
}
.button .icon svg * {
    fill: #fff;
}
.button .label {
    display: block;
    position: relative;
    text-align: center;
    line-height: 1em;
    
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    margin-left: 15px;
    margin-right: 15px;
    opacity: 0.75;
    transition: opacity 0.3s;
    will-change: opacity;
}
.buy {
    margin-bottom: 7.5vh;
}
.buy .object {
    width: 0;
    height: 0;
    pointer-events: none;
}
.buy .object .radial-glow {
    position: absolute;
    top: 0;
    left: 0;
}
.buy .object img {
    position: relative;
    width: 150px;
    height: 150px;
    transform: translate(-50%, -50%);
}
.buy .object.pyramid {
    display: block;
    position: absolute;
    bottom: 95%;
    left: -5%;
    animation: buy-object-floating 6.5s infinite ease-in-out alternate;
}
.buy .object.pyramid .radial-glow {
    width: 15vmax;
    height: 15vmax;
    background: radial-gradient(closest-side, #b83fff, transparent);
    opacity: 0.15;
    pointer-events: none;
}
.buy .object.sphere {
    display: block;
    position: absolute;
    bottom: 0;
    left: 100%;
    animation: buy-object-floating 7.1s infinite ease-in-out alternate;
}
.buy .object.sphere .radial-glow {
    width: 15vmax;
    height: 15vmax;
    background: radial-gradient(closest-side, #ffbe00, transparent);
    opacity: 0.2;
    pointer-events: none;
}
.buy .object.cube {
    display: block;
    position: absolute;
    top: 15%;
    left: 105%;
    animation: buy-object-floating 8s infinite ease-in-out alternate;
}
.buy .object.cube .radial-glow {
    width: 15vmax;
    height: 15vmax;
    background: radial-gradient(closest-side, #ff0085, transparent);
    opacity: 0.2;
    pointer-events: none;
}
@-moz-keyframes buy-object-floating {
    0% {
        transform: translateY(-30px);
    }
    to {
        transform: translateY(30px);
    }
}
@-webkit-keyframes buy-object-floating {
    0% {
        transform: translateY(-30px);
    }
    to {
        transform: translateY(30px);
    }
}
@-o-keyframes buy-object-floating {
    0% {
        transform: translateY(-30px);
    }
    to {
        transform: translateY(30px);
    }
}
@keyframes buy-object-floating {
    0% {
        transform: translateY(-30px);
    }
    to {
        transform: translateY(30px);
    }
}
.buy .buy-top {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 7.5vh;
    padding-bottom: 5vh;
}
@media (max-width: 800px) {
    .buy .buy-top {
        padding-bottom: 0;
    }
}
.buy .buy-top > * {
    position: relative;
}
.buy .buy-top .section-title {
    margin-bottom: 0.5em;
    font-size: 48px;
    
    font-weight: 800;
    text-align: center;
}
@media (max-width: 1300px) {
    .buy .buy-top .section-title {
        font-size: 44px;
    }
}
@media (max-width: 1080px) {
    .buy .buy-top .section-title {
        font-size: 40px;
    }
}
@media (max-width: 800px) {
    .buy .buy-top .section-title {
        font-size: 36px;
    }
}
@media (max-width: 600px) {
    .buy .buy-top .section-title {
        font-size: 32px;
    }
}
@media (max-width: 400px) {
    .buy .buy-top .section-title {
        font-size: 28px;
    }
}
.buy .buy-top .section-title .highlight {
    color: #705df2;
}
.buy .buy-top .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background: linear-gradient(225deg, #5545b6 0%, #140b29 100%);
}
.buy .product {
    display: flex;
    justify-content: center;
    position: relative;
}
@media (max-width: 800px) {
    .buy .product {
        flex-direction: column-reverse;
        align-items: center;
    }
}
.buy .product .block {
    position: relative;
    width: 408px;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    align-items: center;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(226deg, rgba(112, 93, 242, 0.2) 0%, rgba(28, 17, 52, 0.2) 100%), #271945;
    box-shadow: 0 0 74px #705df24d;
    z-index: 1;
}
@media (max-width: 1080px) {
    .buy .product .block {
        width: 360px;
        padding: 30px 0;
    }
}
@media (max-width: 400px) {
    .buy .product .block {
        width: calc(100% - 60px);
    }
}
.buy .product .block .price {
    margin-bottom: 0.1em;
    text-align: center;
    font-size: 64px;
    
    font-weight: 800;
    background: linear-gradient(180deg, #b4a9ff 0%, #705df2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media (max-width: 1300px) {
    .buy .product .block .price {
        font-size: 59px;
    }
}
@media (max-width: 1080px) {
    .buy .product .block .price {
        font-size: 54px;
    }
}
@media (max-width: 800px) {
    .buy .product .block .price {
        font-size: 49px;
    }
}
@media (max-width: 600px) {
    .buy .product .block .price {
        font-size: 44px;
    }
}
@media (max-width: 400px) {
    .buy .product .block .price {
        font-size: 39px;
    }
}
.buy .product .block .details {
    margin-bottom: 1.25em;
    
    font-weight: 700;
    opacity: 0.8;
}
.buy .product .block .separator {
    width: calc(100% - 150px);
    height: 1px;
    background: #fff;
    opacity: 0.2;
    margin-bottom: 1.25em;
}
.buy .product .block .features {
    margin-bottom: 2em;
}
.buy .product .block .feature {
    display: flex;
    padding: 5px 0;
    align-items: center;
    
    font-weight: 500;
    line-height: 1em;
    font-size: 16px;
}
@media (max-width: 1080px) {
    .buy .product .block .feature {
        padding-top: 2px;
        padding-bottom: 2px;
    }
}
.buy .product .block .feature .icon {
    display: block;
    position: relative;
    width: 10px;
    height: 9px;
    margin-right: 10px;
}
.buy .product .block .feature .icon svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.buy .product .block .feature .icon svg * {
    fill: #fff;
}
.buy .product .block .gift {
    padding: 10px 42px 0;
    font-size: 20px;
}
@media (max-width: 1300px) {
    .buy .product .block .gift {
        font-size: 20px;
    }
}
@media (max-width: 1080px) {
    .buy .product .block .gift {
        font-size: 19px;
    }
}
@media (max-width: 800px) {
    .buy .product .block .gift {
        font-size: 18px;
    }
}
@media (max-width: 600px) {
    .buy .product .block .gift {
        font-size: 17px;
    }
}
@media (max-width: 400px) {
    .buy .product .block .gift {
        font-size: 16px;
    }
}
.buy .product .block .gift .label {
    text-decoration: none;
}
.buy .product .block .gift:hover .label {
    text-decoration-style: wavy;
    text-decoration-skip-ink: none;
}
.buy .product .block .gift .gift-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
}
.buy .product .block .gift .gift-icon svg {
    width: 100%;
    height: 100%;
}
.buy .product .block .gift .gift-icon svg * {
    fill: #fff;
}
.buy .product .preview {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    flex-shrink: 0;
    width: 432px;
}
@media (max-width: 1080px) {
    .buy .product .preview {
        width: 400px;
    }
}
@media (max-width: 800px) {
    .buy .product .preview {
        width: auto;
        position: relative;
        top: 50px;
    }
}
@media (max-width: 600px) {
    .buy .product .preview {
        margin-left: 20px;
        margin-right: 20px;
    }
}
.buy .product .preview .video-container {
    display: block;
    transition: transform 0.3s cubic-bezier(0.25, 0, 0.25, 1);
    border-radius: 6px;
    overflow: hidden;
}
@media not screen and (max-width: 800px) {
    .buy .product .preview .video-container:hover {
        transform: translate(25px);
    }
}
.buy .product .preview .video {
    width: 624px;
    height: auto;
}
@media (max-width: 1080px) {
    .buy .product .preview .video {
        width: 520px;
    }
}
@media (max-width: 600px) {
    .buy .product .preview .video {
        width: 100%;
    }
}
.card {
    box-shadow: 0 14px 40px #000;
    border-radius: 12px;
    width: 550px;
    max-width: 100%;
}
@media (max-width: 600px) {
    .card {
        width: calc(100% - 40px);
    }
}
@media (max-width: 400px) {
    .card {
        width: calc(100% - 20px);
    }
}
html.is-theme-abyss .card {
    background: radial-gradient(190.8% 119.58% at 88.99% 13.61%, rgba(255, 102, 81, 0.2) 0%, rgba(29, 18, 53, 0.2) 71.79%), #271945;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
html.is-theme-abyss .card .card-head {
    background: rgba(0, 0, 0, 0.267);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
html.is-theme-abyss .card .card-body {
    background: none;
}
.card.is-flexible {
    width: auto;
    min-width: 550px;
}
@media (max-width: 600px) {
    .card.is-flexible {
        width: calc(100% - 20px);
        min-width: 0;
    }
}
.card.is-flexible .text {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.card.is-flexible .text p {
    width: 465px;
}
@media (max-width: 600px) {
    .card.is-flexible .text p {
        width: auto;
    }
}
.card.is-flexible .text ul,
.card.is-flexible .text ol {
    text-align: left;
}
.card.is-flexible .text .code-toolbar {
    min-width: 465px;
}
@media (max-width: 600px) {
    .card.is-flexible .text .code-toolbar {
        width: auto;
    }
}
.card.has-close .card-head {
    padding-left: 80px;
    padding-right: 80px;
}
@media (max-width: 600px) {
    .card.has-close .card-head {
        padding-left: 20px;
    }
}
@media (max-width: 400px) {
    .card.has-close .card-head {
        padding-left: 10px;
        padding-right: 60px;
    }
}
.card .card-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: 20px 40px;
    background: #222;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    text-align: center;
}
@media (max-width: 600px) {
    .card .card-head {
        min-height: 80px;
        padding: 20px;
    }
}
@media (max-width: 400px) {
    .card .card-head {
        min-height: 70px;
        padding: 20px 10px;
    }
}
.card .card-head .close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
}
@media (max-width: 400px) {
    .card .card-head .close {
        right: 10px;
    }
}
.card .card-head .close .icon svg * {
    fill: #fff;
    stroke: #fff;
}
.card .card-title {
    font-size: 1.75rem;
}
.card .card-details {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    bottom: 15px;
    right: 15px;
    text-align: right;
    font-size: 0.8rem;
    white-space: nowrap;
    line-height: 1.25em;
}
.card .card-details .link {
    opacity: 0.35;
}
.card .card-details .link:hover {
    opacity: 0.5;
}
.card .card-details .link .icon {
    display: inline-block;
    position: relative;
    width: 12px;
    height: 12px;
    margin-left: 3px;
    vertical-align: middle;
}
.card .card-details .link .icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #fff;
}
.card .card-details .link .icon svg * {
    fill: #fff;
}
.card .card-hero-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.card .buttons .button {
    margin-bottom: 5px;
}
.card .card-body {
    position: relative;
    padding: 40px;
    text-align: left;
    background: #1a1a1a;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
@media (max-width: 600px) {
    .card .card-body {
        padding: 20px;
    }
}
@media (max-width: 400px) {
    .card .card-body {
        padding: 10px;
    }
}
.card.is-error .code {
    margin-bottom: 1rem;
    font-size: 7rem;
    letter-spacing: -0.5rem;
}
.card.is-error .code .digit {
    position: relative;
    
    font-weight: 700;
}
.card.is-error .code .digit:first-child,
.card.is-error .code .digit:last-child {
    color: #ff5b86;
}
.card.is-end .quote {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.card.is-end .quote p {
    position: relative;
    margin-bottom: 1.25em;
}
.card.is-end .quote p:after {
    content: "— Bruno";
    position: absolute;
    bottom: -1.5em;
    right: -2em;
    opacity: 0.5;
}
.card.is-end .progress {
    position: relative;
    width: 100%;
    height: 12px;
    margin-top: 30px;
    margin-bottom: 40px;
    background: #323232;
    border-radius: 4px;
}
.card.is-end .progress.is-complete .fill {
    background: #32ffce;
}
.card.is-end .progress .fill {
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    background: #705df2;
    border-radius: 3px;
}
.card.is-end .progress .percentage {
    position: absolute;
    top: 20px;
    right: 0;
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.35;
}
.card.is-end .progress .pin {
    position: absolute;
    bottom: 12px;
    margin-left: -10px;
}
.card.is-end .buttons {
    display: flex;
    align-items: center;
    justify-content: center;
}
.card.is-end .buttons.is-vertical {
    flex-direction: column;
}
.card.is-end .buttons .button {
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}
code[class*="language-"],
pre[class*="language-"] {
    color: #ccc;
    background: none;
    
    font-size: 0.85rem;
    font-weight: 700;
    text-align: left;
    white-space: pre-wrap;
    word-spacing: normal;
    word-break: break-word;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}
pre[class*="language-"] {
    padding: 25px;
    margin: 0.5em 0;
    overflow: auto;
}
@media (max-width: 600px) {
    pre[class*="language-"] {
        padding: 20px;
    }
}
@media (max-width: 400px) {
    pre[class*="language-"] {
        padding: 15px;
    }
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
    background: #222;
}
:not(pre) > code[class*="language-"] {
    padding: 0.1em;
    border-radius: 0.3em;
    white-space: normal;
}
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #999;
}
.token.punctuation {
    color: #62c8f3;
}
.token.function-name {
    color: #6196cc;
}
.token.italic {
    font-style: italic;
}
.token.entity {
    cursor: help;
}
.token.inserted {
    color: #fff;
}
.token.tag {
    color: #eee;
}
.token.attr-name,
.token.namespace,
.token.deleted {
    color: #e2777a;
}
.token.boolean,
.token.number,
.token.function {
    color: #ffc061;
}
.token.property,
.token.class-name,
.token.constant,
.token.symbol {
    color: #fe6854;
}
.token.selector {
    color: #fff;
}
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
    color: #ac9fff;
}
.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
    color: #7ec699;
}
.token.operator,
.token.entity,
.token.url {
    color: #67cdcc;
}
.token.important,
.token.bold {
    font-weight: 700;
}
.confetti-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.draggable-slider {
    text-align: center;
    touch-action: pan-y;
}
.draggable-slider .mover {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}
.draggable-slider .item {
    -webkit-user-select: none;
    user-select: none;
}
.fat-header {
    background: linear-gradient(38.54deg, #5250b3 0%, rgba(92, 72, 160, 0.755) 27.13%, rgba(103, 63, 140, 0.5) 55.41%, rgba(113, 54, 120, 0.24) 84.27%, rgba(123, 46, 102, 0) 110.83%);
    text-align: center;
    border-radius: 12px;
    padding-top: 75px;
    padding-bottom: 75px;
}
@media (max-width: 1080px) {
    .fat-header {
        padding-top: calc(20px + 6vmin);
        padding-bottom: calc(20px + 6vmin);
    }
}
.fat-header .inner {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 600px) {
    .fat-header .inner {
        padding-left: 40px;
        padding-right: 40px;
    }
}
.fat-header p {
    font-size: 20px;
    opacity: 0.8;
}
.footer {
    padding: 50px 25px;
    background: #202020;
}
@media print {
    .footer {
        display: none;
    }
}
html.experience .footer {
    display: none;
}
html.home .footer,
html.highlights .footer,
html.twitterContests .footer {
    background: #150c21;
}
html.is-theme-abyss .footer {
    background: none;
}
@media (max-width: 600px) {
    .footer {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 400px) {
    .footer {
        padding-left: 10px;
        padding-right: 10px;
    }
}
.footer .inner {
    display: flex;
    justify-content: space-between;
    max-width: 1180px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    color: #fff;
}
@media (max-width: 1080px) {
    .footer .inner {
        flex-wrap: wrap;
    }
}
@media (max-width: 800px) {
    .footer .inner {
        flex-direction: column;
    }
}
.footer a {
    text-decoration: none;
}
.footer a:hover {
    text-decoration: none;
}
.footer .column {
    font-size: 16px;
    text-align: right;
    margin-right: 4em;
}
.footer .column:last-child {
}
@media (max-width: 1080px) {
    .footer .column {
        margin-right: 3em;
        margin-bottom: 2em;
    }
}
@media (max-width: 800px) {
    .footer .column {
        margin-right: 2em;
    }
}
@media (max-width: 600px) {
    .footer .column {
        margin-right: 1.5em;
        text-align: center;
    }
}
@media (max-width: 400px) {
    .footer .column {
        margin-right: 1em;
        margin:  0 auto;
    }
}
.footer .column .column-title {
    margin-bottom: 1em;
    
    font-weight: 700;
    font-size: 18px;
}
@media (max-width: 1080px) {
    .footer .column .column-title {
        margin-bottom: 0.75em;
    }
}
@media (max-width: 800px) {
    .footer .column .column-title {
        margin-bottom: 0.5em;
    }
}
.footer .column .column-title:not(:first-child) {
    margin-top: 1.5em;
}
.footer .column .separator {
    display: block;
    width: 45px;
    height: 1px;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
    background: #fff;
    opacity: 0.2;
}
.footer .column .icon {
    position: relative;
    margin-right: 6px;
    top: 8px;
}
.footer .column .icon svg {
    width: 100%;
    height: 100%;
}
.footer .column .icon svg * {
    fill: #8b8b8b;
}
@media (max-width: 1080px) {
    .footer .column.is-logo {
        width: 100%;
    }
}
@media (max-width: 800px) {
    .footer .column.is-logo {
        width: auto;
    }
}
.footer .column.is-logo .main-logo {
    position: relative;
    align-items: flex-start;
}
.footer .column.is-logo .copyright {
    position: absolute;
    top: 20px;
    left: 45px;
    font-size: 12px;
}
.form a {
    text-decoration: none;
}
.form fieldset {
    margin-bottom: 1em;
}
.form .messages {
    padding-bottom: 2em;
}
.form .messages:last-child {
    padding-bottom: 0;
}
.form .messages.success {
    color: #32ffce;
}
.form .messages.warning {
    color: #ffab3a;
}
.form .messages.errors {
    color: #ff5b86;
}
.form .messages .title {
    
    font-weight: 800;
    font-size: 1.75em;
    margin-bottom: 0.5em;
}
.form .messages li {
    position: relative;
    padding-left: 1em;
}
.form .messages li:before {
    content: "";
    display: block;
    position: absolute;
    top: calc(0.8em - 2px);
    left: 0.2em;
    width: 4px;
    height: 4px;
    background: #fff;
    opacity: 0.2;
}
.form .field.text,
.form .field.textarea,
.form .field.select {
    display: flex;
    position: relative;
    height: 80px;
    max-width: 550px;
    margin-bottom: 10px;
    align-items: center;
    background: #131313;
    border-radius: 12px;
}
@media (max-width: 800px) {
    .form .field.text,
    .form .field.textarea,
    .form .field.select {
        height: 70px;
    }
}
@media (max-width: 600px) {
    .form .field.text,
    .form .field.textarea,
    .form .field.select {
        height: 60px;
    }
}
.form .field.text.textarea,
.form .field.textarea.textarea,
.form .field.select.textarea {
    height: auto;
}
.form .field.text label,
.form .field.textarea label,
.form .field.select label {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    padding-left: 20px;
    font-weight: 700;
    justify-content: flex-start;
    align-items: center;
    pointer-events: none;
    line-height: 1.1em;
}
@media (max-width: 600px) {
    .form .field.text label,
    .form .field.textarea label,
    .form .field.select label {
        width: 35%;
    }
}
.form .field.text label .faded,
.form .field.textarea label .faded,
.form .field.select label .faded {
    padding-left: 3px;
    opacity: 0.4;
    font-weight: 400;
}
.form .field.text input,
.form .field.textarea input,
.form .field.select input {
    width: 100%;
    height: 100%;
    padding-right: 20px;
    padding-left: calc(40% + 20px);
    background: #131313;
    border-radius: 12px;
}
@media (max-width: 600px) {
    .form .field.text input,
    .form .field.textarea input,
    .form .field.select input {
        padding-left: calc(35% + 15px);
    }
}
.form .field.text input:-webkit-autofill,
.form .field.textarea input:-webkit-autofill,
.form .field.select input:-webkit-autofill,
.form .field.text input:-webkit-autofill:hover,
.form .field.textarea input:-webkit-autofill:hover,
.form .field.select input:-webkit-autofill:hover,
.form .field.text input:-webkit-autofill:focus,
.form .field.textarea input:-webkit-autofill:focus,
.form .field.select input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    box-shadow: 0 0 0 100px #131313 inset;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: #fff;
}
.form .field.text input:focus,
.form .field.textarea input:focus,
.form .field.select input:focus {
    box-shadow: 0 14px 40px #0006;
    border: 1px solid #705df2;
    padding-left: calc(40% + 19px);
}
@media (max-width: 600px) {
    .form .field.text input:focus,
    .form .field.textarea input:focus,
    .form .field.select input:focus {
        padding-left: calc(35% + 14px);
    }
}
.form .field.text textarea,
.form .field.textarea textarea,
.form .field.select textarea {
    width: 100%;
    min-height: 80px;
    height: 80px;
    resize: vertical;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-right: 20px;
    padding-left: calc(40% + 20px);
    background: #131313;
    border-radius: 12px;
}
@media (max-width: 800px) {
    .form .field.text textarea,
    .form .field.textarea textarea,
    .form .field.select textarea {
        min-height: 70px;
        height: 70px;
    }
}
@media (max-width: 600px) {
    .form .field.text textarea,
    .form .field.textarea textarea,
    .form .field.select textarea {
        min-height: 70px;
        height: 70px;
        padding-left: calc(35% + 15px);
    }
}
.form .field.text textarea:-webkit-autofill,
.form .field.textarea textarea:-webkit-autofill,
.form .field.select textarea:-webkit-autofill,
.form .field.text textarea:-webkit-autofill:hover,
.form .field.textarea textarea:-webkit-autofill:hover,
.form .field.select textarea:-webkit-autofill:hover,
.form .field.text textarea:-webkit-autofill:focus,
.form .field.textarea textarea:-webkit-autofill:focus,
.form .field.select textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    box-shadow: 0 0 0 100px #131313 inset;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: #fff;
}
.form .field.text textarea:focus,
.form .field.textarea textarea:focus,
.form .field.select textarea:focus {
    box-shadow: 0 14px 40px #0006;
    border: 1px solid #705df2;
    padding-left: calc(40% + 19px);
}
.form .field.text select,
.form .field.textarea select,
.form .field.select select {
    width: 60%;
    margin-left: calc(40% + 20px);
    height: 100%;
    line-height: 80px;
    background: #131313;
}
@media (max-width: 800px) {
    .form .field.text select,
    .form .field.textarea select,
    .form .field.select select {
        line-height: 70px;
    }
}
@media (max-width: 600px) {
    .form .field.text select,
    .form .field.textarea select,
    .form .field.select select {
        margin-left: calc(35% + 15px);
        line-height: 60px;
    }
}
.form .field.text select:-webkit-autofill,
.form .field.textarea select:-webkit-autofill,
.form .field.select select:-webkit-autofill,
.form .field.text select:-webkit-autofill:hover,
.form .field.textarea select:-webkit-autofill:hover,
.form .field.select select:-webkit-autofill:hover,
.form .field.text select:-webkit-autofill:focus,
.form .field.textarea select:-webkit-autofill:focus,
.form .field.select select:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    box-shadow: 0 0 0 100px #131313 inset;
    transition: background-color 5000s ease-in-out 0s;
}
.form .field.text.has-error:after,
.form .field.textarea.has-error:after,
.form .field.select.has-error:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: 1px solid #b24f61;
    pointer-events: none;
}
.form .field.text.has-success:after,
.form .field.textarea.has-success:after,
.form .field.select.has-success:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: 1px solid #9bffe7;
    pointer-events: none;
}
.form .field.checkbox.has-error .label,
.form .field.radio.has-error .label {
    color: #ff5b86;
}
.form .field.checkbox.has-error .label:hover .checkmark:before,
.form .field.radio.has-error .label:hover .checkmark:before {
    opacity: 0.8;
}
.form .field.checkbox.has-error .label .checkmark:before,
.form .field.radio.has-error .label .checkmark:before {
    border-color: #ff5b86;
    opacity: 0.6;
}
.form .field.checkbox.radio .label .checkmark:before,
.form .field.radio.radio .label .checkmark:before {
    border-radius: 50%;
}
.form .field.checkbox .label,
.form .field.radio .label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 25px;
    cursor: pointer;
    user-select: none;
}
.form .field.checkbox .label:hover .checkmark:before,
.form .field.radio .label:hover .checkmark:before {
    opacity: 0.4;
}
.form .field.checkbox .label input,
.form .field.radio .label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.form .field.checkbox .label input:checked ~ .checkmark:after,
.form .field.radio .label input:checked ~ .checkmark:after {
    display: block;
}
.form .field.checkbox .label .checkmark,
.form .field.radio .label .checkmark {
    position: absolute;
    top: calc(50% - 12px);
    left: 0;
    height: 25px;
    width: 25px;
}
.form .field.checkbox .label .checkmark:before,
.form .field.radio .label .checkmark:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 6px;
    opacity: 0.2;
    transition: opacity 0.15s;
}
.form .field.checkbox .label .checkmark:after,
.form .field.radio .label .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 9px;
    top: 5px;
    width: 6px;
    height: 12px;
    border: solid #32ffce;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.form .field.is-disabled {
    opacity: 0.6;
}
.form .instructions {
    color: #ccc;
    padding-left: 0;
    padding-right: 20px;
    padding-top: 0;
    font-size: 0.9rem;
}
.form .submit {
    margin-top: 1em;
    height: 60px;
    padding-left: 20px;
    padding-right: 20px;
    background: #705df2;
    white-space: nowrap;
}
@media (max-width: 800px) {
    .form .submit {
        height: 55px;
    }
}
@media (max-width: 600px) {
    .form .submit {
        height: 50px;
    }
}
.form .submit .label {
    opacity: 1;
}
.form .spacer {
    height: 1.5em;
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #140b29;
    z-index: 6;
    pointer-events: none;
}
@media print {
    .header {
        display: none;
    }
}
html.is-theme-dark .header {
    background: #1a1a1a;
}
html.is-theme-dark .header .menu .menu-background {
    background: linear-gradient(180deg, #1a1a1a 80%, rgba(26, 26, 26, 0.65) 100%);
}
html.is-theme-light .header {
    background: #fff;
}
html.is-theme-light .header .logo-container .main-logo .letter {
    fill: #000;
}
html.is-theme-light .header .links .link .label {
    opacity: 0.65;
}
html.is-theme-light .header .actions .login-button {
    opacity: 0.65;
    transition: opacity 0.15s;
}
html.is-theme-light .header .actions .login-button:hover {
    opacity: 1;
}
html.is-theme-light .header .actions .login-button .icon svg * {
    fill: #000;
}
html.is-theme-light .header .actions .logout-button {
    opacity: 0.65;
    transition: opacity 0.15s;
}
html.is-theme-light .header .actions .logout-button:hover {
    opacity: 1;
}
html.is-theme-light .header .actions .logout-button .icon svg * {
    fill: #000;
}
html.is-theme-light .header .menu-trigger .bar {
    background: #000;
}
html.is-theme-light .header .menu .menu-background {
    background: linear-gradient(180deg, #fff 69.94%, rgba(255, 255, 255, 0.5) 100%);
}
.header.is-menu-open .menu-trigger .bar:nth-child(1) {
    animation-name: bar-1;
}
.header.is-menu-open .menu-trigger .bar:nth-child(2) {
    animation-name: bar-2;
}
.header.is-menu-open .menu-trigger .bar:nth-child(3) {
    animation-name: bar-3;
}
.header.is-menu-open .menu {
    opacity: 1;
    pointer-events: auto;
}
.header .container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: auto;
    height: var(--header-height);
    padding-left: 25px;
    padding-right: 25px;
}
@media (max-width: 600px) {
    .header .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 400px) {
    .header .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}
.header .container .links,
.header .container .actions {
    pointer-events: auto;
}
.header .navigation {
    display: flex;
}
.header .navigation .logo-container {
    display: flex;
    align-items: center;
}
.header .navigation .logo-container .main-logo {
    pointer-events: auto;
}
.header .navigation .logo-container .main-logo .letter {
    fill: #fff;
}
.header .links {
    display: flex;
}
@media (max-width: 1080px) {
    .header .links {
        display: none;
    }
}
.header .links:hover .link .label {
    opacity: 0.5 !important;
}
.header .links:hover .link:hover .label {
    text-decoration: none;
    opacity: 1 !important;
}
.header .links .link {
    position: relative;
    display: block;
    display: flex;
    align-items: center;
    padding-left: 22px;
    padding-right: 22px;
}
@media (max-width: 1080px) {
    .header .links .link {
        padding-left: 15px;
        padding-right: 15px;
    }
}
.header .links .link.is-active .highlight {
    opacity: 1;
    transform: scaleX(1);
}
.header .links .link.is-active .label {
    opacity: 1;
}
.header .links .link .highlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scaleX(0);
    transition: opacity 0.3s, transform 0.3s;
    background: linear-gradient(to bottom, rgba(112, 93, 242, 0.2), rgba(112, 93, 242, 0));
}
.header .links .link .highlight:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 3px;
    background: #705df2;
}
.header .links .link .label {
    
    font-weight: 500;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    letter-spacing: 0.04em;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.header .actions {
    position: relative;
    display: flex;
    align-items: center;
    
    font-weight: 700;
}
@media (max-width: 1080px) {
    .header .actions.is-desktop {
        display: none;
    }
}
.header .actions .login-button {
    display: flex;
    align-items: center;
    margin-right: 20px;
}
@media (max-width: 1080px) {
    .header .actions .login-button {
        margin-right: 10px;
    }
}
.header .actions .login-button:hover .label {
    text-decoration: none;
}
.header .actions .login-button .icon {
    display: inline-block;
    width: 15px;
    height: 20px;
    margin-right: 8px;
}
.header .actions .login-button .icon svg {
    width: 100%;
    height: 100%;
    fill: #fff;
}
.header .actions .logout-button {
    display: flex;
    align-items: center;
    margin-right: 20px;
}
@media (max-width: 1080px) {
    .header .actions .logout-button {
        margin-right: 10px;
    }
}
.header .actions .logout-button:hover .label {
    text-decoration: none;
}
.header .actions .logout-button .icon {
    display: inline-block;
    width: 19px;
    height: 20px;
    margin-right: 8px;
}
.header .actions .logout-button .icon svg {
    width: 100%;
    height: 100%;
    fill: #fff;
}
.header .actions .button {
    margin-left: 15px;
}
.header .actions .button .label {
    font-size: 18px;
}
@media (max-width: 1080px) {
    .header .actions .button .non-important {
        display: none;
    }
}
.header .menu-trigger {
    display: none;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 38px;
    pointer-events: auto;
}
@media (max-width: 1080px) {
    .header .menu-trigger {
        display: block;
    }
}
.header .menu-trigger .bar {
    position: absolute;
    top: calc(50% - 1px);
    left: calc(50% - 12px);
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    animation: 0.3s both;
}
.header .menu-trigger .bar:nth-child(1) {
    animation-name: bar-1-reverse;
}
.header .menu-trigger .bar:nth-child(2) {
    animation-name: bar-2-reverse;
}
.header .menu-trigger .bar:nth-child(3) {
    animation-name: bar-3-reverse;
}
@-moz-keyframes bar-1 {
    0% {
        transform: translateY(-7px);
    }
    50% {
        transform: translateY(0);
    }
    to {
        transform: translateY(0) rotate(-45deg);
    }
}
@-webkit-keyframes bar-1 {
    0% {
        transform: translateY(-7px);
    }
    50% {
        transform: translateY(0);
    }
    to {
        transform: translateY(0) rotate(-45deg);
    }
}
@-o-keyframes bar-1 {
    0% {
        transform: translateY(-7px);
    }
    50% {
        transform: translateY(0);
    }
    to {
        transform: translateY(0) rotate(-45deg);
    }
}
@keyframes bar-1 {
    0% {
        transform: translateY(-7px);
    }
    50% {
        transform: translateY(0);
    }
    to {
        transform: translateY(0) rotate(-45deg);
    }
}
@-moz-keyframes bar-2 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(0) scaleX(1);
    }
    51% {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(0);
    }
}
@-webkit-keyframes bar-2 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(0) scaleX(1);
    }
    51% {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(0);
    }
}
@-o-keyframes bar-2 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(0) scaleX(1);
    }
    51% {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(0);
    }
}
@keyframes bar-2 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(0) scaleX(1);
    }
    51% {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(0);
    }
}
@-moz-keyframes bar-3 {
    0% {
        transform: translateY(7px);
    }
    50% {
        transform: translateY(0);
    }
    to {
        transform: translateY(0) rotate(45deg);
    }
}
@-webkit-keyframes bar-3 {
    0% {
        transform: translateY(7px);
    }
    50% {
        transform: translateY(0);
    }
    to {
        transform: translateY(0) rotate(45deg);
    }
}
@-o-keyframes bar-3 {
    0% {
        transform: translateY(7px);
    }
    50% {
        transform: translateY(0);
    }
    to {
        transform: translateY(0) rotate(45deg);
    }
}
@keyframes bar-3 {
    0% {
        transform: translateY(7px);
    }
    50% {
        transform: translateY(0);
    }
    to {
        transform: translateY(0) rotate(45deg);
    }
}
@-moz-keyframes bar-1-reverse {
    0% {
        transform: translateY(0) rotate(-45deg);
    }
    50% {
        transform: translateY(0);
    }
    to {
        transform: translateY(-7px);
    }
}
@-webkit-keyframes bar-1-reverse {
    0% {
        transform: translateY(0) rotate(-45deg);
    }
    50% {
        transform: translateY(0);
    }
    to {
        transform: translateY(-7px);
    }
}
@-o-keyframes bar-1-reverse {
    0% {
        transform: translateY(0) rotate(-45deg);
    }
    50% {
        transform: translateY(0);
    }
    to {
        transform: translateY(-7px);
    }
}
@keyframes bar-1-reverse {
    0% {
        transform: translateY(0) rotate(-45deg);
    }
    50% {
        transform: translateY(0);
    }
    to {
        transform: translateY(-7px);
    }
}
@-moz-keyframes bar-2-reverse {
    0% {
        transform: scaleX(0);
    }
    50% {
        transform: scaleX(0);
    }
    51% {
        transform: translateY(0) scaleX(1);
    }
    to {
        transform: translateY(0);
    }
}
@-webkit-keyframes bar-2-reverse {
    0% {
        transform: scaleX(0);
    }
    50% {
        transform: scaleX(0);
    }
    51% {
        transform: translateY(0) scaleX(1);
    }
    to {
        transform: translateY(0);
    }
}
@-o-keyframes bar-2-reverse {
    0% {
        transform: scaleX(0);
    }
    50% {
        transform: scaleX(0);
    }
    51% {
        transform: translateY(0) scaleX(1);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes bar-2-reverse {
    0% {
        transform: scaleX(0);
    }
    50% {
        transform: scaleX(0);
    }
    51% {
        transform: translateY(0) scaleX(1);
    }
    to {
        transform: translateY(0);
    }
}
@-moz-keyframes bar-3-reverse {
    0% {
        transform: translateY(0) rotate(45deg);
    }
    50% {
        transform: translateY(0);
    }
    to {
        transform: translateY(7px);
    }
}
@-webkit-keyframes bar-3-reverse {
    0% {
        transform: translateY(0) rotate(45deg);
    }
    50% {
        transform: translateY(0);
    }
    to {
        transform: translateY(7px);
    }
}
@-o-keyframes bar-3-reverse {
    0% {
        transform: translateY(0) rotate(45deg);
    }
    50% {
        transform: translateY(0);
    }
    to {
        transform: translateY(7px);
    }
}
@keyframes bar-3-reverse {
    0% {
        transform: translateY(0) rotate(45deg);
    }
    50% {
        transform: translateY(0);
    }
    to {
        transform: translateY(7px);
    }
}
.header .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    overflow: scroll;
}
.header .menu .menu-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #140b29 69.94%, rgba(20, 11, 41, 0.65) 100%);
}
.header .menu .links {
    padding-top: 80px;
    display: flex;
    flex-direction: column;
}
.header .menu .links .link {
    justify-content: center;
    padding: 0.35em 0;
    font-size: 64px;
    text-align: center;
}
@media (max-width: 1300px) {
    .header .menu .links .link {
        font-size: 59px;
    }
}
@media (max-width: 1080px) {
    .header .menu .links .link {
        font-size: 54px;
    }
}
@media (max-width: 800px) {
    .header .menu .links .link {
        font-size: 49px;
    }
}
@media (max-width: 600px) {
    .header .menu .links .link {
        font-size: 44px;
    }
}
@media (max-width: 400px) {
    .header .menu .links .link {
        font-size: 39px;
    }
}
.header .menu .links .link.is-active .highlight {
    opacity: 1;
    transform: scaleY(1);
}
.header .menu .links .link.is-active .label {
    opacity: 1;
}
.header .menu .links .link .highlight {
    transform: scaleY(0);
    background: linear-gradient(to right, rgba(112, 93, 242, 0.2), rgba(112, 93, 242, 0));
}
.header .menu .links .link .highlight:before {
    width: 3px;
    height: 100%;
}
.header .menu .links .link .label {
    font-weight: 700;
}
.header .menu .links .category {
    color: #705df2;
    position: relative;
    padding: 2em 0 0.5em;
    font-size: 16px;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
}
@media (max-width: 800px) {
    .header .menu .links .category {
        font-size: 15px;
    }
}
@media (max-width: 600px) {
    .header .menu .links .category {
        font-size: 14px;
    }
}
@media (max-width: 400px) {
    .header .menu .links .category {
        font-size: 14px;
    }
}
.header .menu .actions {
    padding-top: 50px;
    padding-bottom: 25px;
    justify-content: center;
}
.important-message {
    
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    --highlight-color: #4ed293;
}
@media (max-width: 1300px) {
    .important-message {
        font-size: 18px;
    }
}
@media (max-width: 1080px) {
    .important-message {
        font-size: 17px;
    }
}
@media (max-width: 800px) {
    .important-message {
        font-size: 17px;
    }
}
@media (max-width: 600px) {
    .important-message {
        font-size: 16px;
    }
}
@media (max-width: 400px) {
    .important-message {
        font-size: 16px;
    }
}
.important-message.is-error {
    --highlight-color: #ff5b86;
}
.important-message > .icon {
    display: block;
    margin-bottom: 5px;
}
.important-message > .icon svg *[fill] {
    fill: var(--highlight-color);
}
.important-message > .icon svg *[stroke] {
    stroke: var(--highlight-color);
}
.important-message .message-title {
    margin-bottom: 0.5em;
    font-size: 48px;
    font-weight: 700;
    color: var(--highlight-color);
}
@media (max-width: 1300px) {
    .important-message .message-title {
        font-size: 44px;
    }
}
@media (max-width: 1080px) {
    .important-message .message-title {
        font-size: 40px;
    }
}
@media (max-width: 800px) {
    .important-message .message-title {
        font-size: 36px;
    }
}
@media (max-width: 600px) {
    .important-message .message-title {
        font-size: 32px;
    }
}
@media (max-width: 400px) {
    .important-message .message-title {
        font-size: 28px;
    }
}
.important-message p em,
.important-message p a {
    color: var(--highlight-color);
}
.important-message .block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 3em;
}
.important-message .block > * {
    position: relative;
}
.important-message .block .background {
    position: absolute;
    inset: 0 0 16px;
    border-radius: 14px;
    background: radial-gradient(150% 150% at 100% 15%, #705df2 0%, transparent 100%);
    opacity: 0.2;
}
.important-message .block.is-discord {
    padding-top: 25px;
}
.important-message .block.is-discord .background {
    background: radial-gradient(150% 150% at 100% 15%, #5a68f1 0%, transparent 100%);
}
.important-message .block.is-video .background {
    top: 30px;
}
.important-message .block.is-video a.video {
    display: block;
    position: relative;
    width: 75%;
    margin-bottom: 1.5em;
}
.important-message .block.is-video a.video video {
    width: 100%;
    border-radius: 8px;
    box-shadow: 5px 5px 20px #0004;
    height: 56.25%;
}
.lazy {
    opacity: 1;
    transition: opacity ease-in 0.3s;
    will-change: opacity;
}
.lazy.is-loaded {
    opacity: 1;
    will-change: auto;
}
.main-logo {
    display: flex;
    width: 220px;
    height: 38px;
    align-items: center;
}
.main-logo.is-light svg * {
    fill: #fff;
}
.main-logo.is-dark {
    height: 44px;
}
.main-logo.is-dark svg * {
    fill: #000;
}
.main-logo.is-dark .logo {
    width: 39px;
    height: 100%;
}
@media (max-width: 600px) {
    .main-logo.is-dark .logo {
        width: 34px;
    }
}
@media (max-width: 400px) {
    .main-logo.is-dark .logo {
        width: 32px;
    }
}
.main-logo.is-dark .logo svg * {
    fill: #705df2;
}
.main-logo.is-dark .text {
    height: 100%;
    margin-left: 10px;
}
@media (max-width: 600px) {
    .main-logo.is-dark .text {
        width: 140px;
        margin-left: 8px;
    }
}
@media (max-width: 400px) {
    .main-logo.is-dark .text {
        width: 122px;
        margin-left: 6px;
    }
}
.main-logo:hover.is-abyss .logo,
.main-logo:hover.is-dark .logo {
    transform: translate(10px);
    transition-delay: 0s;
}
.main-logo:hover.is-abyss .letter,
.main-logo:hover.is-dark .letter {
    transform: translate(10px);
}
.main-logo:hover.is-abyss .letter:nth-child(1),
.main-logo:hover.is-dark .letter:nth-child(1) {
    transition-delay: 0.01s;
}
.main-logo:hover.is-abyss .letter:nth-child(2),
.main-logo:hover.is-dark .letter:nth-child(2) {
    transition-delay: 0.02s;
}
.main-logo:hover.is-abyss .letter:nth-child(3),
.main-logo:hover.is-dark .letter:nth-child(3) {
    transition-delay: 0.03s;
}
.main-logo:hover.is-abyss .letter:nth-child(4),
.main-logo:hover.is-dark .letter:nth-child(4) {
    transition-delay: 0.04s;
}
.main-logo:hover.is-abyss .letter:nth-child(5),
.main-logo:hover.is-dark .letter:nth-child(5) {
    transition-delay: 0.05s;
}
.main-logo:hover.is-abyss .letter:nth-child(6),
.main-logo:hover.is-dark .letter:nth-child(6) {
    transition-delay: 0.06s;
}
.main-logo:hover.is-abyss .letter:nth-child(7),
.main-logo:hover.is-dark .letter:nth-child(7) {
    transition-delay: 0.07s;
}
.main-logo:hover.is-abyss .letter:nth-child(8),
.main-logo:hover.is-dark .letter:nth-child(8) {
    transition-delay: 0.08s;
}
.main-logo:hover.is-abyss .letter:nth-child(9),
.main-logo:hover.is-dark .letter:nth-child(9) {
    transition-delay: 0.09s;
}
.main-logo:hover.is-abyss .letter:nth-child(10),
.main-logo:hover.is-dark .letter:nth-child(10) {
    transition-delay: 0.1s;
}
.main-logo:hover.is-abyss .letter:nth-child(11),
.main-logo:hover.is-dark .letter:nth-child(11) {
    transition-delay: 0.11s;
}
.main-logo:hover.is-abyss .letter:nth-child(12),
.main-logo:hover.is-dark .letter:nth-child(12) {
    transition-delay: 0.12s;
}
.main-logo:hover.is-abyss .letter:nth-child(13),
.main-logo:hover.is-dark .letter:nth-child(13) {
    transition-delay: 0.13s;
}
.main-logo:hover.is-abyss .letter:nth-child(14),
.main-logo:hover.is-dark .letter:nth-child(14) {
    transition-delay: 0.14s;
}
.main-logo:hover.is-abyss .letter:nth-child(15),
.main-logo:hover.is-dark .letter:nth-child(15) {
    transition-delay: 0.15s;
}
.main-logo:hover .triangle-1 {
    animation: logo-blink 0.6s 0.15s;
}
.main-logo:hover .triangle-2,
.main-logo:hover .triangle-3 {
    animation: logo-blink 0.6s 0s;
}
.main-logo:hover .face-1 {
    animation: logo-blink 0.6s 0.1s;
}
.main-logo:hover .face-2,
.main-logo:hover .face-3 {
    animation: logo-blink 0.6s 0.05s;
}
.main-logo:hover .letter {
    transform: translate(10px);
}
.main-logo:hover .letter:nth-child(1) {
    transition-delay: 0.31s;
}
.main-logo:hover .letter:nth-child(2) {
    transition-delay: 0.32s;
}
.main-logo:hover .letter:nth-child(3) {
    transition-delay: 0.33s;
}
.main-logo:hover .letter:nth-child(4) {
    transition-delay: 0.34s;
}
.main-logo:hover .letter:nth-child(5) {
    transition-delay: 0.35s;
}
.main-logo:hover .letter:nth-child(6) {
    transition-delay: 0.36s;
}
.main-logo:hover .letter:nth-child(7) {
    transition-delay: 0.37s;
}
.main-logo:hover .letter:nth-child(8) {
    transition-delay: 0.38s;
}
.main-logo:hover .letter:nth-child(9) {
    transition-delay: 0.39s;
}
.main-logo:hover .letter:nth-child(10) {
    transition-delay: 0.4s;
}
.main-logo:hover .letter:nth-child(11) {
    transition-delay: 0.41s;
}
.main-logo:hover .letter:nth-child(12) {
    transition-delay: 0.42s;
}
.main-logo:hover .letter:nth-child(13) {
    transition-delay: 0.43s;
}
.main-logo:hover .letter:nth-child(14) {
    transition-delay: 0.44s;
}
.main-logo:hover .letter:nth-child(15) {
    transition-delay: 0.45s;
}
.main-logo svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.main-logo .logo {
    display: inline-block;
    width: 220px;
    height: 38px;
    transition: transform 0.2s 0.15s;
    will-change: transform;
}
.main-logo .text {
    display: inline-block;
    width: 156px;
    height: 20px;
    margin-left: 6px;
}
.main-logo .letter {
    transition: transform 0.2s;
    will-change: transform;
}
.main-logo .letter:nth-child(1) {
    transition-delay: 0.14s;
}
.main-logo .letter:nth-child(2) {
    transition-delay: 0.13s;
}
.main-logo .letter:nth-child(3) {
    transition-delay: 0.12s;
}
.main-logo .letter:nth-child(4) {
    transition-delay: 0.11s;
}
.main-logo .letter:nth-child(5) {
    transition-delay: 0.1s;
}
.main-logo .letter:nth-child(6) {
    transition-delay: 0.09s;
}
.main-logo .letter:nth-child(7) {
    transition-delay: 0.08s;
}
.main-logo .letter:nth-child(8) {
    transition-delay: 0.07s;
}
.main-logo .letter:nth-child(9) {
    transition-delay: 0.06s;
}
.main-logo .letter:nth-child(10) {
    transition-delay: 0.05s;
}
.main-logo .letter:nth-child(11) {
    transition-delay: 0.04s;
}
.main-logo .letter:nth-child(12) {
    transition-delay: 0.03s;
}
.main-logo .letter:nth-child(13) {
    transition-delay: 0.02s;
}
.main-logo .letter:nth-child(14) {
    transition-delay: 0.01s;
}
.main-logo .letter:nth-child(15) {
    transition-delay: 0s;
}
.page.is-abyss-form-page {
    padding-top: calc(var(--page-top-padding) + 70px);
    padding-left: var(--page-horizontal-padding);
    padding-right: var(--page-horizontal-padding);
    color: #fff;
    text-align: center;
}
.page.is-abyss-form-page .page-title {
    margin-bottom: 1.5em;
    
    font-weight: 800;
    font-size: 26px;
    text-align: center;
}
@media (max-width: 1300px) {
    .page.is-abyss-form-page .page-title {
        font-size: 24px;
    }
}
@media (max-width: 1080px) {
    .page.is-abyss-form-page .page-title {
        font-size: 22px;
    }
}
@media (max-width: 800px) {
    .page.is-abyss-form-page .page-title {
        font-size: 20px;
    }
}
@media (max-width: 600px) {
    .page.is-abyss-form-page .page-title {
        font-size: 18px;
    }
}
@media (max-width: 400px) {
    .page.is-abyss-form-page .page-title {
        font-size: 18px;
    }
}
@media (max-width: 800px) {
    .page.is-abyss-form-page .page-title {
        text-align: center;
    }
}
.page.is-abyss-form-page .radial-glow {
    position: fixed;
    transform: translate(-50%, -50%);
}
.page.is-abyss-form-page .radial-glow.is-radial-glow-red {
    top: 30%;
    left: 80%;
    width: 50vmax;
    height: 50vmax;
    background: radial-gradient(closest-side, #ff6651, transparent);
    opacity: 0.15;
    pointer-events: none;
}
.page.is-abyss-form-page .radial-glow.is-radial-glow-blue {
    top: 75%;
    left: 70%;
    width: 50vmax;
    height: 50vmax;
    background: radial-gradient(closest-side, #57fdf3, transparent);
    opacity: 0.12;
    pointer-events: none;
}
.page.is-abyss-form-page .radial-glow.is-radial-glow-purple {
    top: 55%;
    left: 20%;
    width: 50vmax;
    height: 50vmax;
    background: radial-gradient(closest-side, #705df2, transparent);
    opacity: 0.11;
    pointer-events: none;
}
.page.is-abyss-form-page .page-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@media (max-width: 400px) {
    .page.is-abyss-form-page .page-content {
        align-items: stretch;
    }
}
.page.is-abyss-form-page .container {
    width: 470px;
}
@media (max-width: 800px) {
    .page.is-abyss-form-page .container {
        width: 420px;
    }
}
@media (max-width: 600px) {
    .page.is-abyss-form-page .container {
        width: 370px;
    }
}
@media (max-width: 400px) {
    .page.is-abyss-form-page .container {
        width: 100%;
    }
}
.page.is-abyss-form-page .important-message {
    width: 100%;
}
.page.is-full-height {
    padding-top: var(--header-height);
}
.page.is-full-height .page-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 80px);
    padding-top: 40px;
    padding-bottom: 40px;
}
@media (max-width: 1080px) {
    .page.is-full-height .page-content {
        min-height: calc(100vh - 60px);
        padding-top: 30px;
        padding-bottom: 30px;
    }
}
@media (max-width: 800px) {
    .page.is-full-height .page-content {
        min-height: calc(100vh - 40px);
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
@media (max-width: 600px) {
    .page.is-full-height .page-content {
        min-height: 0;
        padding-top: 10vh;
        padding-bottom: 10vh;
    }
}
.page.has-boring-content {
    padding-top: var(--header-height);
    padding-bottom: var(--header-height);
    padding-left: var(--page-horizontal-padding);
    padding-right: var(--page-horizontal-padding);
    background-color: #1a1a1a;
}
.page.has-boring-content .text {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
}
.page.has-boring-content .text .lang-switcher {
    margin-bottom: 2em;
}
@media (max-width: 1080px) {
    .page.has-boring-content .text {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}
@media (max-width: 800px) {
    .page.has-boring-content .text {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}
@media (max-width: 600px) {
    .page.has-boring-content .text {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
@media (max-width: 400px) {
    .page.has-boring-content .text {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}
.page.has-boring-content .text .button.is-lang-switch {
    margin-right: 0;
}
.page.has-boring-content .text h2 {
    position: relative;
}
.player {
    position: relative;
    width: 100%;
    background: #202020;
    overflow: hidden;
}
@media (max-width: 800px), (orientation: portrait) {
    .player.is-active .video-area .direction {
        pointer-events: auto;
    }
}
.player.is-active .video-area .tracks .tracks-text,
.player.is-active .controls .volume:hover .progress,
.player.is-active .controls .select .list .mover {
    pointer-events: auto;
}
.player.is-hover .video-area .tracks {
    transform: translateY(-30px);
    transition-duration: 0.2s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
}
.player.is-hover .controls .bottom {
    transform: translateY(-100%) translateY(12px) !important;
    transition-duration: 0.2s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
}
.player.is-hover .controls .quality:hover .list .mover {
    transform: translateY(0);
    transition-timing-function: cubic-bezier(0.29, 0.29, 0, 1);
}
.player.is-hover.is-fullscreen .video-area .tracks {
    transform: translateY(-40px);
}
.player.is-hover.is-meta-loaded .controls .seekbar.is-hover .cursor,
.player.is-hover.is-meta-loaded .controls .seekbar.is-hover .update-hint {
    opacity: 1;
}
.player.has-played-once .poster {
    opacity: 0;
}
.player.has-thumbnail .controls .cursor .cursor-inner .cursor-thumbnail {
    display: block;
}
.player.has-thumbnail .controls .cursor .cursor-inner .cursor-content {
    min-width: 192px;
}
.player.is-playing .controls .play-toggle .pause {
    transform: scale(1);
    transition: 0.12s 0.06s transform;
}
.player.is-playing .controls .play-toggle .play {
    transform: scale(0.001);
    transition: 0.12s transform;
}
.player.is-playing .overlay,
.player.is-playing .logo {
    opacity: 0;
}
.player.is-paused .controls .play-toggle .pause {
    transform: scale(0.001);
    transition: 0.12s transform;
}
.player.is-paused .controls .play-toggle .play {
    transform: scale(1);
    transition: 0.12s 0.06s transform;
}
.player.is-meta-loaded .controls .rate,
.player.is-meta-loaded .controls .play-toggle,
.player.is-meta-loaded .controls .time {
    opacity: 1;
}
.player.is-not-using-hls .controls .quality {
    display: none;
}
.player.is-quality-loaded .controls .quality {
    opacity: 1;
}
.player.is-fullscreen-not-supported .controls .fullscreen-toggle {
    display: none;
}
.player.is-fullscreen .video-area {
    height: 100%;
}
.player.is-fullscreen .video-area .tracks {
    bottom: 2em;
}
.player.is-fullscreen .controls .fullscreen-toggle .icon .corner.corner-1 .shape {
    transform: rotate(-90deg);
}
.player.is-fullscreen .controls .fullscreen-toggle .icon .corner.corner-2 .shape {
    transform: rotate(0);
}
.player.is-fullscreen .controls .fullscreen-toggle .icon .corner.corner-3 .shape {
    transform: rotate(90deg);
}
.player.is-fullscreen .controls .fullscreen-toggle .icon .corner.corner-4 .shape {
    transform: rotate(180deg);
}
.player.is-muted .controls .volume .volume-toggle .icon svg .wave {
    opacity: 0.15;
}
.player .video-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 28px);
    overflow: hidden;
    cursor: pointer;
    z-index: 0;
}
.player .video-area .video,
.player .video-area .video-and-subtitles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
}
.player .video-area .direction {
    display: flex;
    position: absolute;
    top: 0;
    width: 15%;
    max-width: 260px;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1s;
    transition-delay: 0.3s;
    will-change: opacity;
    user-select: none;
    pointer-events: none;
}
html.has-touch .player .video-area .direction {
    display: flex;
}
.player .video-area .direction.is-backward {
    left: 0;
    background: linear-gradient(to right, rgba(11, 11, 11, 0.733) 25%, rgba(11, 11, 11, 0));
}
.player .video-area .direction.is-forward {
    right: 0;
    background: linear-gradient(to left, rgba(11, 11, 11, 0.733) 25%, rgba(11, 11, 11, 0));
}
.player .video-area .direction.is-active {
    transition: none;
    opacity: 1;
}
.player .video-area .tracks {
    position: absolute;
    bottom: 0.5em;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition-property: transform;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.55, 0, 0.25, 1);
    font-size: 1.65vw;
}
.player .video-area .tracks .tracks-text {
    padding: 0.5em 1em;
    border-radius: 0.5vh;
    background: rgba(0, 0, 0, 0.733);
    transition: opacity 0.15s;
    user-select: none;
    text-align: center;
}
.player .video-area .tracks .tracks-text:hover {
    opacity: 0.1;
}
.player .video-area .tracks .tracks-text:empty {
    display: none;
}
.player .video-area .tracks .tracks-text .technical-term {
    
    font-weight: 400;
    font-size: 0.92em;
    color: #32ffce;
    padding: 0 0.15em;
}
.player .video-area .tracks .tracks-text .quote {
    font-style: italic;
}
.player .controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28px;
    z-index: 2;
}
.player .controls .seekbar {
    position: absolute;
    top: 0;
    width: 100%;
    height: 28px;
    background: #0b0b0b;
    cursor: pointer;
}
.player .controls .seekbar .inner {
    position: absolute;
    top: 11px;
    left: 10px;
    right: 10px;
    height: 6px;
    border-radius: 3px;
    background: #313131;
}
.player .controls .seekbar .canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.player .controls .seekbar .sections-separators {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.player .controls .seekbar .sections-separators .section-separator {
    position: absolute;
    top: 0;
    width: 7px;
    height: 6px;
    background: url(/assets/images/player-seekbar-section-separator.png);
    background-size: cover;
}
.player .controls .seekbar .sparkles-container {
    position: absolute;
    top: 50%;
}
.player .controls .seekbar .disabled {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    background-image: repeating-linear-gradient(-55deg, #313131, #313131 5px, #0b0b0b 5px, #0b0b0b 10px);
}
.player .controls .seekbar .update-hint {
    position: absolute;
    top: 0;
    opacity: 0;
    transition: opacity 0.15s;
    will-change: transform, opacity;
}
.player .controls .seekbar .update-hint:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -1px;
    width: 3px;
    height: 6px;
    background: #ffd78a;
    border: 1px solid #000;
}
.player .controls .seekbar .update-hint .icon {
    position: absolute;
    bottom: 6px;
    left: -8px;
    width: 16px;
    height: 15px;
}
.player .controls .seekbar .update-hint .icon svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.player .controls .cursor {
    position: absolute;
    bottom: calc(100% + 22px);
    left: 0;
    height: 28px;
    opacity: 0;
    transition: opacity 0.15s;
    will-change: transform, opacity;
    pointer-events: none;
}
.player .controls .cursor .cursor-inner {
    position: absolute;
    bottom: 0;
    left: 0;
}
.player .controls .cursor .cursor-inner .cursor-tip {
    position: absolute;
    top: calc(100% - 1px);
    left: calc(50% - 10px);
    width: 20px;
    height: 12px;
    border-radius: 2px;
    overflow: hidden;
}
.player .controls .cursor .cursor-inner .cursor-tip:after {
    content: "";
    position: absolute;
    left: calc(50% - 5px);
    top: -5px;
    display: block;
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
    background: #705df2;
}
.player .controls .cursor .cursor-content {
    position: absolute;
    bottom: 0;
    left: 0;
    min-width: 100px;
    transform: translate(-50%);
    background: #705df2;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 500;
    box-shadow: 0 5px 25px #0009;
    pointer-events: none;
}
.player .controls .cursor .cursor-thumbnail {
    display: none;
    position: relative;
    width: 100%;
    height: 108px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    overflow: hidden;
    box-shadow: 2px 2px 20px inset #0003;
    background-size: cover;
}
.player .controls .cursor .cursor-label {
    display: flex;
    position: relative;
    min-height: 28px;
    text-align: center;
}
.player .controls .cursor .cursor-label.has-sections .cursor-time {
    position: relative;
    width: 65px;
    height: auto;
    background: rgba(0, 0, 0, 0.133);
}
.player .controls .cursor .cursor-label .cursor-section-title {
    padding: 8px;
    width: calc(100% - 65px);
    line-height: 1.25em;
}
.player .controls .cursor .cursor-label .cursor-time {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    white-space: nowrap;
}
.player .controls .cursor .cursor-label .cursor-time .value,
.player .controls .cursor .cursor-label .cursor-time .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.player .controls .cursor .cursor-label .cursor-time .placeholder {
    visibility: hidden;
}
.player .controls .bottom {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to top, #0b0b0b, rgba(11, 11, 11, 0.467));
    justify-content: space-between;
    align-items: stretch;
    transform: translateY(0);
    transition-property: transform;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.55, 0, 0.25, 1);
}
.player .controls .bottom .left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.player .controls .bottom .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.player .controls .play-toggle {
    position: relative;
    width: 45px;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s 0.3s;
    will-change: opacity;
}
.player .controls .play-toggle .play,
.player .controls .play-toggle .pause {
    display: block;
    position: absolute;
    will-change: transform;
}
.player .controls .play-toggle .play {
    top: calc(50% - 10px);
    left: 15px;
    width: 17px;
    height: 20px;
}
.player .controls .play-toggle .play svg {
    display: block;
}
.player .controls .play-toggle .play svg * {
    fill: #fff;
}
.player .controls .play-toggle .pause {
    top: calc(50% - 8px);
    left: 15px;
    width: 16px;
    height: 16px;
}
.player .controls .play-toggle .pause .bar {
    display: block;
    position: absolute;
    top: 0;
    width: 6px;
    height: 100%;
    background: #fff;
}
.player .controls .play-toggle .pause .bar.bar-1 {
    left: 0;
}
.player .controls .play-toggle .pause .bar.bar-2 {
    right: 0;
}
.player .controls .time {
    display: block;
    position: relative;
    margin-right: 12px;
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s 0.3s;
    will-change: opacity;
    cursor: pointer;
}
.player .controls .time .current {
    display: inline-block;
}
.player .controls .time .separator {
    display: inline-block;
    opacity: 0.35;
    margin-left: 4px;
    margin-right: 3px;
}
.player .controls .time .duration {
    display: inline-block;
    opacity: 0.35;
}
.player .controls .time .digit {
    display: inline-block;
    width: 0.55em;
    text-align: center;
}
.player .controls .rate {
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s 0.3s;
    will-change: opacity;
}
.player .controls .rate .button {
    margin: 0;
}
.player .controls .rate .button.is-less {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.player .controls .rate .button.is-current {
    border-radius: 0;
    margin-left: 1px;
    margin-right: 1px;
}
.player .controls .rate .button.is-current .label {
    text-align: center;
}
.player .controls .rate .button.is-current .label .text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.player .controls .rate .button.is-current .label .placeholder {
    visibility: hidden;
}
.player .controls .rate .button.is-more {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.player .controls .fullscreen-toggle {
    position: relative;
    width: 45px;
    height: 100%;
}
.player .controls .fullscreen-toggle .icon {
    position: absolute;
    top: 50%;
    left: 50%;
}
.player .controls .fullscreen-toggle .icon .corner {
    position: absolute;
}
.player .controls .fullscreen-toggle .icon .corner.corner-1 {
    top: -5px;
    left: 7px;
}
.player .controls .fullscreen-toggle .icon .corner.corner-1 .shape {
    transform: rotate(90deg);
}
.player .controls .fullscreen-toggle .icon .corner.corner-2 {
    top: 5px;
    left: 7px;
}
.player .controls .fullscreen-toggle .icon .corner.corner-2 .shape {
    transform: rotate(180deg);
}
.player .controls .fullscreen-toggle .icon .corner.corner-3 {
    top: 5px;
    left: -7px;
}
.player .controls .fullscreen-toggle .icon .corner.corner-3 .shape {
    transform: rotate(-90deg);
}
.player .controls .fullscreen-toggle .icon .corner.corner-4 {
    top: -5px;
    left: -7px;
}
.player .controls .fullscreen-toggle .icon .corner.corner-4 .shape {
    transform: rotate(0);
}
.player .controls .fullscreen-toggle .icon .corner .shape {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 6px;
    height: 6px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    border-top-left-radius: 3px;
}
.player .controls .volume {
    position: relative;
    width: 45px;
    height: 100%;
}
.player .controls .volume:hover .progress {
    opacity: 1;
}
.player .controls .volume .volume-toggle {
    display: flex;
    width: 100%;
    height: 100%;
    padding-right: 6px;
    align-items: center;
    justify-content: center;
}
.player .controls .volume .volume-toggle .icon {
    width: 24px;
    height: 16px;
}
.player .controls .volume .volume-toggle .icon svg {
    display: block;
    width: 100%;
    height: 100%;
}
.player .controls .volume .volume-toggle .icon svg .wave {
    opacity: 1;
    transition: 0.15s;
    will-change: opacity;
}
.player .controls .volume .volume-toggle .icon svg * {
    fill: #fff;
}
.player .controls .volume .progress {
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    height: 100px;
    cursor: pointer;
    background: rgba(11, 11, 11, 0.467);
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
.player .controls .volume .progress .bar {
    position: absolute;
    left: calc(50% - 3px);
    bottom: 5px;
    top: 15px;
    width: 6px;
    background: #313131;
    border-radius: 3px;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}
.player .controls .volume .progress .bar .fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 3px;
    transform: translate(100%);
    will-change: transform;
}
.player .controls .shortcuts {
    margin-right: 4px;
}
html.has-touch .player .controls .shortcuts {
    display: none;
}
.player .controls .select {
    position: relative;
    margin-right: 15px;
    z-index: 2;
}
.player .controls .select:hover .list .mover {
    transform: translateY(0);
    transition-timing-function: cubic-bezier(0.29, 0.29, 0, 1);
}
.player .controls .select .is-main {
    position: relative;
    margin-right: 0;
    box-shadow: 0 14px 40px #0002;
    pointer-events: none;
}
html.has-mouse .player .controls .select .is-main {
    pointer-events: auto;
}
html.has-touch .player .controls .select .is-main {
    pointer-events: none;
}
.player .controls .select .is-main .label.is-placeholder {
    margin-right: 26px;
    visibility: hidden;
}
.player .controls .select .is-main .label.is-value {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    line-height: 24px;
}
.player .controls .select .is-main .arrow {
    display: block;
    position: absolute;
    top: calc(50% - 2px);
    right: 10px;
    width: 8px;
    height: 5px;
    transform: rotate(180deg);
}
.player .controls .select .is-main .arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}
.player .controls .select .is-main .arrow svg * {
    fill: #fff;
}
.player .controls .select .list {
    position: absolute;
    bottom: 24px;
    left: 0;
    min-width: 100%;
    overflow: hidden;
    pointer-events: none;
}
.player .controls .select .list .mover {
    padding-top: 5px;
    border-radius: 4px;
    background: #1f1f1f;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.75, 0, 0.25, 1);
    will-change: transform;
}
.player .controls .select .list .link {
    position: relative;
    display: inline-flex;
    height: 25px;
    line-height: 0;
    padding: 10px 15px;
    border-radius: 5px;
    
    font-weight: 700;
    font-size: 0.6rem;
    white-space: nowrap;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
    opacity: 0.75;
}
.player .controls .select .list .link.is-active {
    color: #705df2;
    opacity: 1;
}
.player .controls .select .list .link:hover {
    opacity: 1;
}
.player .controls .quality {
    opacity: 0;
    transition: opacity 0.3s 0.3s;
    will-change: opacity;
}
.player .controls .quality.is-auto-enabled .list .link:first-child {
    color: #705df2;
}
.player .controls .quality.is-auto-enabled .list .link.is-active {
    color: #fff;
}
.player .controls .quality.is-auto-enabled .list .link.is-active:after {
    content: "*";
    color: #705df2;
    font-size: 2em;
}
.player .controls .subtitles button {
    text-transform: uppercase;
}
.player .controls .sponsor {
    display: block;
    position: absolute;
    bottom: 100%;
    right: 0;
    font-size: 64px;
}
@media (max-width: 1300px) {
    .player .controls .sponsor {
        font-size: 59px;
    }
}
@media (max-width: 1080px) {
    .player .controls .sponsor {
        font-size: 54px;
    }
}
@media (max-width: 800px) {
    .player .controls .sponsor {
        font-size: 49px;
    }
}
@media (max-width: 600px) {
    .player .controls .sponsor {
        font-size: 44px;
    }
}
@media (max-width: 400px) {
    .player .controls .sponsor {
        font-size: 39px;
    }
}
@media (max-width: 600px) {
    .player .controls .sponsor {
        display: none;
    }
}
.player .controls .sponsor:hover .label,
.player .controls .sponsor:hover .mux-icon {
    opacity: 1;
}
.player .controls .sponsor .sponsor-inner {
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 2em;
    padding: 0.3em;
}
.player .controls .sponsor .label {
    position: relative;
    left: -1px;
    top: -2px;
    opacity: 0;
    font-size: 12px;
    transition: opacity 0.1s;
}
.player .controls .sponsor .mux-icon {
    position: relative;
    opacity: 0.35;
    transition: opacity 0.1s;
}
.player .controls .sponsor .mux-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}
.player .poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0e0e0e;
    transition: opacity 0.3s;
    pointer-events: none;
}
.player .poster img {
    width: 100%;
    height: -100%;
    object-fit: cover;
}
.player .poster img.is-loaded {
    opacity: 0.75;
}
.player .logo {
    position: absolute;
    top: calc(50% - 34px / 1.5);
    left: calc(50% - 19px);
    width: 34px;
    height: 38px;
    transition: opacity 0.3s;
    pointer-events: none;
}
.player .logo svg {
    display: block;
    width: 100%;
    height: 100%;
}
.player .logo svg * {
    fill: #fff;
}
.player.bp-800 .controls .time {
    font-size: 16px;
}
.player.bp-600 .controls .non-important {
    display: none;
}
.player.bp-600 .controls .play-toggle {
    width: 40px;
}
.player.bp-600 .controls .time {
    margin-right: 8px;
    font-size: 15px;
}
.player.bp-600 .controls .time .separator,
.player.bp-600 .controls .time .duration {
    display: none;
}
.player.bp-600 .controls .rate .button.is-less .label,
.player.bp-600 .controls .rate .button.is-more .label {
    margin-left: 6px;
    margin-right: 6px;
}
.player.bp-600 .controls .rate .button.is-current .label {
    margin-left: 2px;
    margin-right: 2px;
}
.player.bp-600 .controls .shortcuts {
    display: none;
}
.player.bp-600 .controls .select {
    margin-right: 8px;
}
.player.bp-400 .controls .play-toggle {
    width: 30px;
}
.player.bp-400 .controls .play-toggle .play {
    top: calc(50% - 8px);
    left: 10px;
    width: 13px;
    height: 15px;
}
.player.bp-400 .controls .play-toggle .pause {
    top: calc(50% - 6px);
    left: 10px;
    width: 12px;
    height: 12px;
}
.player.bp-400 .controls .play-toggle .pause .bar {
    display: block;
    position: absolute;
    top: 0;
    width: 4px;
    height: 100%;
    background: #fff;
}
.player.bp-400 .controls .play-toggle .pause .bar.bar-1 {
    left: 0;
}
.player.bp-400 .controls .play-toggle .pause .bar.bar-2 {
    right: 0;
}
.player.bp-400 .controls .fullscreen-toggle,
.player.bp-400 .controls .volume {
    width: 40px;
}
.player.bp-400 .controls .time {
    font-size: 12px;
}
.player.bp-400 .controls .seekbar .cursor .cursor-content {
    min-width: auto;
}
.player.bp-400 .controls .seekbar .cursor .cursor-content .cursor-thumbnail {
    display: none;
}
.player.bp-400 .controls .seekbar .cursor .cursor-content .cursor-time {
    padding-left: 10px;
    padding-right: 10px;
    background: none;
}
.player.bp-400 .controls .seekbar .cursor .cursor-content .cursor-section-title {
    display: none;
}
.video-area.is-playing .overlay,
.is-playing .video-area .overlay,
.video-area.is-playing .logo,
.is-playing .video-area .logo {
    opacity: 0;
}
.video-area:hover .triangle-1 {
    animation: logo-blink 0.6s 0.15s;
}
.video-area:hover .triangle-2,
.video-area:hover .triangle-3 {
    animation: logo-blink 0.6s 0s;
}
.video-area:hover .face-1 {
    animation: logo-blink 0.6s 0.1s;
}
.video-area:hover .face-2,
.video-area:hover .face-3 {
    animation: logo-blink 0.6s 0.05s;
}
.video-area:hover .letter {
    transform: translate(10px);
}
.video-area:hover .letter:nth-child(1) {
    transition-delay: 0.32s;
}
.video-area:hover .letter:nth-child(2) {
    transition-delay: 0.34s;
}
.video-area:hover .letter:nth-child(3) {
    transition-delay: 0.36s;
}
.video-area:hover .letter:nth-child(4) {
    transition-delay: 0.38s;
}
.video-area:hover .letter:nth-child(5) {
    transition-delay: 0.4s;
}
.video-area:hover .letter:nth-child(6) {
    transition-delay: 0.42s;
}
.video-area:hover .letter:nth-child(7) {
    transition-delay: 0.44s;
}
.video-area:hover .letter:nth-child(8) {
    transition-delay: 0.46s;
}
.video-area:hover .letter:nth-child(9) {
    transition-delay: 0.48s;
}
.video-area:hover .letter:nth-child(10) {
    transition-delay: 0.5s;
}
.video-area:hover .letter:nth-child(11) {
    transition-delay: 0.52s;
}
.video-area:hover .letter:nth-child(12) {
    transition-delay: 0.54s;
}
.video-area:hover .letter:nth-child(13) {
    transition-delay: 0.56s;
}
.video-area:hover .letter:nth-child(14) {
    transition-delay: 0.58s;
}
.video-area:hover .letter:nth-child(15) {
    transition-delay: 0.6s;
}
.video-area .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0e0e0e;
    opacity: 0.1;
    transition: opacity 0.3s;
    pointer-events: none;
}
.video-area .logo {
    position: absolute;
    top: calc(50% - 17px);
    left: calc(50% - 19px);
    width: 34px;
    height: 38px;
    transition: opacity 0.3s;
    pointer-events: none;
}
.video-area .logo svg {
    display: block;
    width: 100%;
    height: 100%;
}
.video-area .logo svg * {
    fill: #fff;
}
.popin {
    display: none;
}
.popins {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 7;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
html.is-theme-abyss .popins .background {
    background: #140b29;
}
html.is-theme-abyss .popins .card-body a {
    color: #57fdf3;
}
.popins.is-open .background {
    opacity: 0.8;
    pointer-events: auto;
    transition-timing-function: ease-in;
    transition-delay: 0s;
}
.popins .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s 0.2s ease-out;
    will-change: opacity, transform;
}
.popins .popin {
    display: block;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(1, 0, 1, 1);
    will-change: opacity, transform;
    pointer-events: none;
}
.popins .popin.is-active {
    opacity: 1;
    transform: scale(1);
    transition-timing-function: ease-in, cubic-bezier(0, 0, 0, 1);
    pointer-events: auto;
}
.popins .popin .card-body {
    max-height: calc(100vh - 140px);
    overflow: auto;
}
.popins .popin .text {
    margin-bottom: 2em;
}
.popins .popin .remember {
    display: inline-block;
}
.popins .popin .remember .field.checkbox .label {
    padding-left: 0;
    padding-right: 33px;
    margin: 0 0 0 5px;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.popins .popin .remember .field.checkbox .label:hover {
    opacity: 1;
}
.popins .popin .remember .field.checkbox .label:hover .checkmark:before {
    opacity: 0.4;
}
.popins .popin .remember .field.checkbox .label .checkmark {
    left: auto;
    right: 0;
}
html.is-promo {
    --page-top-padding: 160px;
}
@media (max-width: 1080px) {
    html.is-promo {
        --page-top-padding: 150px;
    }
}
@media (max-width: 800px) {
    html.is-promo {
        --page-top-padding: 140px;
    }
}
@media (max-width: 600px) {
    html.is-promo {
        --page-top-padding: 125px;
    }
}
html.is-promo .header {
    top: 80px;
}
@media (max-width: 1080px) {
    html.is-promo .header {
        top: 70px;
    }
}
@media (max-width: 800px) {
    html.is-promo .header {
        top: 55px;
    }
}
@media (max-width: 600px) {
    html.is-promo .header {
        top: 45px;
    }
}
html.is-promo .page.home section.hero .content .trailer-trigger .info .price,
html.is-promo .buy .product .block .price {
    white-space: nowrap;
    background: none;
    -webkit-background-clip: none;
    -webkit-text-fill-color: unset;
}
html.is-promo .page.home section.hero .content .trailer-trigger .info .price .promo-old-price,
html.is-promo .buy .product .block .price .promo-old-price {
    color: #b4a9ff;
    font-size: 30px;
}
html.is-promo .page.home section.hero .content .trailer-trigger .info .price .promo-old-price:after,
html.is-promo .buy .product .block .price .promo-old-price:after {
    background: #b4a9ff;
}
.promo {
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: #0c051b;
    z-index: 7;
    color: #fff;
    overflow: hidden;
}
@media (max-width: 1080px) {
    .promo {
        height: 70px;
    }
}
@media (max-width: 800px) {
    .promo {
        height: 55px;
    }
}
@media (max-width: 600px) {
    .promo {
        height: 45px;
    }
}
.promo .container {
    display: flex;
    width: 1440px;
    height: 100%;
}
.promo .column {
    position: relative;
    width: 25%;
    height: 100%;
}
.promo .column span {
    display: inline-block;
}
.promo .column.is-title {
    align-items: center;
    
    font-weight: 800;
    font-size: 40px;
}
@media (max-width: 1300px) {
    .promo .column.is-title {
        font-size: 32px;
    }
}
@media (max-width: 1080px) {
    .promo .column.is-title {
        font-size: 26px;
    }
}
@media (max-width: 800px) {
    .promo .column.is-title {
        font-size: 22px;
    }
}
@media (max-width: 600px) {
    .promo .column.is-title {
        font-size: 18px;
    }
}
.promo .column.is-title:hover .inner {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.667);
}
.promo .column.is-discount .inner,
.promo .column.is-time .inner {
    justify-content: center;
    align-items: center;
}
.promo .column.is-discount .main,
.promo .column.is-time .main {
    white-space: nowrap;
    
    font-weight: 800;
    font-size: 40px;
}
@media (max-width: 1300px) {
    .promo .column.is-discount .main,
    .promo .column.is-time .main {
        font-size: 32px;
    }
}
@media (max-width: 1080px) {
    .promo .column.is-discount .main,
    .promo .column.is-time .main {
        font-size: 26px;
    }
}
@media (max-width: 800px) {
    .promo .column.is-discount .main,
    .promo .column.is-time .main {
        display: block;
        text-align: center;
        font-size: 22px;
    }
}
@media (max-width: 600px) {
    .promo .column.is-discount .main,
    .promo .column.is-time .main {
        font-size: 18px;
    }
}
.promo .column.is-discount .side,
.promo .column.is-time .side {
    
    font-weight: 800;
    font-size: 30px;
    opacity: 0.65;
    text-transform: uppercase;
}
@media (max-width: 1300px) {
    .promo .column.is-discount .side,
    .promo .column.is-time .side {
        font-size: 22px;
    }
}
@media (max-width: 1080px) {
    .promo .column.is-discount .side,
    .promo .column.is-time .side {
        font-size: 18px;
    }
}
@media (max-width: 800px) {
    .promo .column.is-discount .side,
    .promo .column.is-time .side {
        display: block;
        text-align: center;
        font-size: 16px;
    }
}
@media (max-width: 600px) {
    .promo .column.is-discount .side,
    .promo .column.is-time .side {
        font-size: 14px;
    }
}
@media (max-width: 600px) {
    .promo .column.is-discount {
        width: 20%;
    }
}
.promo .column.is-discount .inner {
    background: linear-gradient(to right, rgba(178, 81, 255, 0.267), rgba(178, 81, 255, 0));
}
@media (max-width: 600px) {
    .promo .column.is-time {
        width: 30%;
    }
}
.promo .column.is-time .inner {
    background: linear-gradient(to right, rgba(242, 93, 200, 0.267), rgba(242, 93, 200, 0));
}
.promo .column.is-time .inner .main .portion {
    display: inline-block;
    min-width: 1.3em;
    text-align: center;
}
.promo .column.is-time .inner .main .separator {
    
    font-weight: 800;
    font-size: 30px;
    text-transform: uppercase;
}
@media (max-width: 1300px) {
    .promo .column.is-time .inner .main .separator {
        font-size: 22px;
    }
}
@media (max-width: 1080px) {
    .promo .column.is-time .inner .main .separator {
        font-size: 18px;
    }
}
@media (max-width: 800px) {
    .promo .column.is-time .inner .main .separator {
        font-size: 16px;
    }
}
@media (max-width: 600px) {
    .promo .column.is-time .inner .main .separator {
        font-size: 14px;
    }
}
@media (max-width: 800px) {
    .promo .column.is-game .not-important {
        display: none;
    }
}
.promo .column.is-game .inner {
    justify-content: flex-end;
    align-items: center;
}
.promo .column.is-game .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
}
.promo .column.is-game .video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.promo .column.is-game .video:after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    width: 50px;
    height: 100%;
    background: linear-gradient(to left, #0e0e0e, rgba(14, 14, 14, 0));
}
.promo .column.is-game .label {
    position: relative;
    
    font-weight: 800;
    font-size: 20px;
    text-transform: uppercase;
    text-align: right;
    transition: transform 0.2s;
}
@media (max-width: 1300px) {
    .promo .column.is-game .label {
        font-size: 18px;
    }
}
@media (max-width: 1080px) {
    .promo .column.is-game .label {
        font-size: 16px;
    }
}
@media (max-width: 800px) {
    .promo .column.is-game .label {
        font-size: 14px;
    }
}
@media (max-width: 600px) {
    .promo .column.is-game .label {
        font-size: 12px;
    }
}
.promo .column.is-game:hover .label {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.667);
}
.promo .column .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0 -7.5%;
    padding: 0 15%;
    clip-path: polygon(13.04% 0%, 100% 0%, 86.96% 100%, 0% 100%);
}
.promo-old-price {
    display: inline-block;
    position: relative;
    text-decoration: none;
    opacity: 0.5;
}
.promo-old-price:after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 2px);
    left: -20%;
    width: 140%;
    height: 0.1em;
    transform: rotate(31deg);
    background: #fff;
}
.promo-new-price {
    position: relative;
    opacity: 1;
}
.promo-new-price .after {
    display: block;
    position: absolute;
    top: -84%;
    right: -70%;
    padding: 0.1em;
    transform: rotate(15deg);
    background: #e35d9f;
    color: #fff;
    box-shadow: 0 0 12px #0008;
    border-radius: 4px;
}
.quizzes-index .chapter.is-open .lessons {
    display: block;
}
.quizzes-index .chapter.is-open .chapter-head:hover .arrow {
    transform: rotate(-180deg);
}
.quizzes-index .chapter.is-open .chapter-head .arrow {
    transform: rotate(-90deg);
}
.quizzes-index .chapter.is-done .chapter-head .progress .circle .fill circle {
    stroke: #32ffce;
}
.quizzes-index .chapter-head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding: 0.5rem 50px 0.5rem 0;
    cursor: pointer;
}
.quizzes-index .chapter-head:hover .arrow {
    opacity: 1;
    transform: rotate(0);
}
.quizzes-index .chapter-head .progress {
    position: relative;
    margin-right: 15px;
}
.quizzes-index .chapter-head .progress .circle {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
.quizzes-index .chapter-head .progress .circle svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.quizzes-index .chapter-head .progress .circle .full circle {
    stroke: #2f2f2f;
}
.quizzes-index .chapter-head .progress .circle .fill {
    transform: rotate(-90deg);
}
.quizzes-index .chapter-head .progress .circle .fill circle {
    stroke: #705df2;
    transition: stroke-dashoffset 0.3s;
}
.quizzes-index .chapter-head .texts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.quizzes-index .chapter-head .texts .label {
    font-size: 0.9rem;
    opacity: 0.5;
}
.quizzes-index .chapter-head .texts .title {
    font-weight: 500;
}
.quizzes-index .chapter-head .arrow {
    position: absolute;
    top: calc(50% - 3px);
    right: 22px;
    opacity: 0.5;
    transform: rotate(-90deg);
    transition: opacity 0.15s, transform 0.3s;
}
.quizzes-index .chapter-head .arrow svg {
    display: block;
}
.quizzes-index .chapter-head .arrow svg * {
    fill: #fff;
    opacity: 1;
}
.quizzes-index .lessons {
    display: none;
    padding-left: 50px;
    margin-bottom: 0.5em;
}
.quizzes-index .lessons .lesson {
    position: relative;
    display: flex;
    align-items: center;
    padding: 6px 0;
    width: 100%;
    text-decoration: none;
}
.quizzes-index .lessons .lesson.is-unavailable {
    pointer-events: none;
}
.quizzes-index .lessons .lesson.is-active:after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 10px);
    right: 0;
    width: 4px;
    height: 20px;
    background: #fff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.quizzes-index .lessons .lesson.is-active .title {
    opacity: 1;
}
.quizzes-index .lessons .lesson .title {
    opacity: 0.5;
    transition: opacity 0.15s;
}
.quizzes-index .lessons:hover .lesson .title {
    opacity: 0.5;
}
.quizzes-index .lessons:hover .lesson:hover .title {
    opacity: 1;
}
.quizzes-index .lessons .icon {
    display: block;
    margin-right: 20px;
    flex-shrink: 0;
}
.quizzes-index .lessons .icon.is-timedOut {
    width: 13px;
    height: 16px;
}
.quizzes-index .lessons .icon.is-timedOut svg * {
    fill: #ff5b86;
}
.quizzes-index .lessons .icon.is-unavailable svg * {
    stroke: #888;
}
.quizzes-index .lessons .icon.is-completed {
    width: 18px;
    height: 20px;
    margin-right: 15px;
}
.quizzes-index .lessons .icon.is-completed svg * {
    fill: #32ffce;
}
.quizzes-index .lessons .icon.is-toDo {
    width: 13px;
    height: 20px;
}
.quizzes-index .lessons .icon.is-toDo svg * {
    fill: #888;
}
.quizzes-index .lessons .icon.is-errors {
    width: 11px;
    height: 11px;
}
.quizzes-index .lessons .icon svg {
    display: block;
    width: 100%;
    height: 100%;
}
.quizzes-index .lessons .icon svg * {
    fill: #fff;
}
.sparkles {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    pointer-events: none;
}
.is-voted .sparkles,
.is-done .sparkles {
    opacity: 1;
}
.is-voted .sparkles .sparkle:nth-child(1) .inner,
.is-done .sparkles .sparkle:nth-child(1) .inner,
.is-voted .sparkles .sparkle:nth-child(2) .inner,
.is-done .sparkles .sparkle:nth-child(2) .inner,
.is-voted .sparkles .sparkle:nth-child(3) .inner,
.is-done .sparkles .sparkle:nth-child(3) .inner {
    transform: translate(25px);
    transition: transform 1.2s cubic-bezier(0, 0, 0, 1);
}
.is-voted .sparkles .sparkle:nth-child(1) .inner:after,
.is-done .sparkles .sparkle:nth-child(1) .inner:after,
.is-voted .sparkles .sparkle:nth-child(2) .inner:after,
.is-done .sparkles .sparkle:nth-child(2) .inner:after,
.is-voted .sparkles .sparkle:nth-child(3) .inner:after,
.is-done .sparkles .sparkle:nth-child(3) .inner:after {
    transition: transform 1.2s 0.25s cubic-bezier(0, 0, 0, 1);
    transform: scale(0.0001);
}
.is-voted .sparkles .sparkle:nth-child(4) .inner,
.is-done .sparkles .sparkle:nth-child(4) .inner,
.is-voted .sparkles .sparkle:nth-child(5) .inner,
.is-done .sparkles .sparkle:nth-child(5) .inner,
.is-voted .sparkles .sparkle:nth-child(6) .inner,
.is-done .sparkles .sparkle:nth-child(6) .inner {
    transform: translate(30px);
    transition: transform 0.5s cubic-bezier(0, 0, 0, 1);
}
.is-voted .sparkles .sparkle:nth-child(4) .inner:after,
.is-done .sparkles .sparkle:nth-child(4) .inner:after,
.is-voted .sparkles .sparkle:nth-child(5) .inner:after,
.is-done .sparkles .sparkle:nth-child(5) .inner:after,
.is-voted .sparkles .sparkle:nth-child(6) .inner:after,
.is-done .sparkles .sparkle:nth-child(6) .inner:after {
    transition: transform 0.5s 0.25s cubic-bezier(0, 0, 0, 1);
    transform: scale(0.0001);
}
.is-voted .sparkles .sparkle:nth-child(7) .inner,
.is-done .sparkles .sparkle:nth-child(7) .inner,
.is-voted .sparkles .sparkle:nth-child(8) .inner,
.is-done .sparkles .sparkle:nth-child(8) .inner,
.is-voted .sparkles .sparkle:nth-child(9) .inner,
.is-done .sparkles .sparkle:nth-child(9) .inner,
.is-voted .sparkles .sparkle:nth-child(10) .inner,
.is-done .sparkles .sparkle:nth-child(10) .inner {
    transform: translate(35px);
    transition: transform 0.3s cubic-bezier(0, 0, 0, 1);
}
.is-voted .sparkles .sparkle:nth-child(7) .inner:after,
.is-done .sparkles .sparkle:nth-child(7) .inner:after,
.is-voted .sparkles .sparkle:nth-child(8) .inner:after,
.is-done .sparkles .sparkle:nth-child(8) .inner:after,
.is-voted .sparkles .sparkle:nth-child(9) .inner:after,
.is-done .sparkles .sparkle:nth-child(9) .inner:after,
.is-voted .sparkles .sparkle:nth-child(10) .inner:after,
.is-done .sparkles .sparkle:nth-child(10) .inner:after {
    transition: transform 0.3s 0.25s cubic-bezier(0, 0, 0, 1);
    transform: scale(0.0001);
}
.is-voted .sparkles.is-small .sparkle:nth-child(1) .inner,
.is-done .sparkles.is-small .sparkle:nth-child(1) .inner,
.is-voted .sparkles.is-small .sparkle:nth-child(2) .inner,
.is-done .sparkles.is-small .sparkle:nth-child(2) .inner,
.is-voted .sparkles.is-small .sparkle:nth-child(3) .inner,
.is-done .sparkles.is-small .sparkle:nth-child(3) .inner {
    transform: translate(15px);
    transition: transform 1.2s cubic-bezier(0, 0, 0.5, 1);
}
.is-voted .sparkles.is-small .sparkle:nth-child(1) .inner:after,
.is-done .sparkles.is-small .sparkle:nth-child(1) .inner:after,
.is-voted .sparkles.is-small .sparkle:nth-child(2) .inner:after,
.is-done .sparkles.is-small .sparkle:nth-child(2) .inner:after,
.is-voted .sparkles.is-small .sparkle:nth-child(3) .inner:after,
.is-done .sparkles.is-small .sparkle:nth-child(3) .inner:after {
    transition: transform 1.2s 0.25s cubic-bezier(0, 0, 0.5, 1);
    transform: scale(0.0001);
}
.is-voted .sparkles.is-small .sparkle:nth-child(4) .inner,
.is-done .sparkles.is-small .sparkle:nth-child(4) .inner,
.is-voted .sparkles.is-small .sparkle:nth-child(5) .inner,
.is-done .sparkles.is-small .sparkle:nth-child(5) .inner,
.is-voted .sparkles.is-small .sparkle:nth-child(6) .inner,
.is-done .sparkles.is-small .sparkle:nth-child(6) .inner {
    transform: translate(20px);
    transition: transform 0.5s cubic-bezier(0, 0, 0.5, 1);
}
.is-voted .sparkles.is-small .sparkle:nth-child(4) .inner:after,
.is-done .sparkles.is-small .sparkle:nth-child(4) .inner:after,
.is-voted .sparkles.is-small .sparkle:nth-child(5) .inner:after,
.is-done .sparkles.is-small .sparkle:nth-child(5) .inner:after,
.is-voted .sparkles.is-small .sparkle:nth-child(6) .inner:after,
.is-done .sparkles.is-small .sparkle:nth-child(6) .inner:after {
    transition: transform 0.5s 0.25s cubic-bezier(0, 0, 0.5, 1);
    transform: scale(0.0001);
}
.is-voted .sparkles.is-small .sparkle:nth-child(7) .inner,
.is-done .sparkles.is-small .sparkle:nth-child(7) .inner,
.is-voted .sparkles.is-small .sparkle:nth-child(8) .inner,
.is-done .sparkles.is-small .sparkle:nth-child(8) .inner,
.is-voted .sparkles.is-small .sparkle:nth-child(9) .inner,
.is-done .sparkles.is-small .sparkle:nth-child(9) .inner,
.is-voted .sparkles.is-small .sparkle:nth-child(10) .inner,
.is-done .sparkles.is-small .sparkle:nth-child(10) .inner {
    transform: translate(25px);
    transition: transform 0.3s cubic-bezier(0, 0, 0.5, 1);
}
.is-voted .sparkles.is-small .sparkle:nth-child(7) .inner:after,
.is-done .sparkles.is-small .sparkle:nth-child(7) .inner:after,
.is-voted .sparkles.is-small .sparkle:nth-child(8) .inner:after,
.is-done .sparkles.is-small .sparkle:nth-child(8) .inner:after,
.is-voted .sparkles.is-small .sparkle:nth-child(9) .inner:after,
.is-done .sparkles.is-small .sparkle:nth-child(9) .inner:after,
.is-voted .sparkles.is-small .sparkle:nth-child(10) .inner:after,
.is-done .sparkles.is-small .sparkle:nth-child(10) .inner:after {
    transition: transform 0.3s 0.25s cubic-bezier(0, 0, 0.5, 1);
    transform: scale(0.0001);
}
.sparkles.is-purple .sparkle .inner:after {
    background: #705df2;
}
.sparkles.is-white .sparkle .inner:after {
    background: #fff;
}
.sparkles.is-gold .sparkle .inner:after {
    background: #ffc37d;
}
.sparkles.is-full-rotation .sparkle:nth-child(1) {
    transform: rotate(369deg);
}
.sparkles.is-full-rotation .sparkle:nth-child(2) {
    transform: rotate(127deg);
}
.sparkles.is-full-rotation .sparkle:nth-child(3) {
    transform: rotate(296deg);
}
.sparkles.is-full-rotation .sparkle:nth-child(4) {
    transform: rotate(278deg);
}
.sparkles.is-full-rotation .sparkle:nth-child(5) {
    transform: rotate(266deg);
}
.sparkles.is-full-rotation .sparkle:nth-child(6) {
    transform: rotate(407deg);
}
.sparkles.is-full-rotation .sparkle:nth-child(7) {
    transform: rotate(399deg);
}
.sparkles.is-full-rotation .sparkle:nth-child(8) {
    transform: rotate(363deg);
}
.sparkles.is-full-rotation .sparkle:nth-child(9) {
    transform: rotate(365deg);
}
.sparkles.is-full-rotation .sparkle:nth-child(10) {
    transform: rotate(210deg);
}
.sparkles .sparkle {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.sparkles .sparkle:nth-child(1) {
    transform: rotate(-108deg);
}
.sparkles .sparkle:nth-child(2) {
    transform: rotate(-126deg);
}
.sparkles .sparkle:nth-child(3) {
    transform: rotate(-54deg);
}
.sparkles .sparkle:nth-child(4) {
    transform: rotate(-162deg);
}
.sparkles .sparkle:nth-child(5) {
    transform: rotate(-18deg);
}
.sparkles .sparkle:nth-child(6) {
    transform: rotate(-72deg);
}
.sparkles .sparkle:nth-child(7) {
    transform: rotate(-144deg);
}
.sparkles .sparkle:nth-child(8) {
    transform: rotate(-90deg);
}
.sparkles .sparkle:nth-child(9) {
    transform: rotate(-36deg);
}
.sparkles .sparkle:nth-child(10) {
    transform: rotate(-180deg);
}
.sparkles .sparkle .inner {
    position: absolute;
}
.sparkles .sparkle .inner:after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #32ffce;
}
section.start {
    position: relative;
    color: #fff;
}
section.start .background {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    background: #150c21;
}
section.start .content {
    display: flex;
    position: relative;
    width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 80px 120px;
    background: #705df2;
    border-radius: 14px;
    justify-content: space-between;
    align-items: center;
}
@media (max-width: 1300px) {
    section.start .content {
        width: auto;
        margin-right: 50px;
        margin-left: 50px;
        padding: 60px 90px;
    }
}
@media (max-width: 1080px) {
    section.start .content {
        margin-right: var(--page-horizontal-padding);
        margin-left: var(--page-horizontal-padding);
        padding: 50px 60px;
    }
}
@media (max-width: 800px) {
    section.start .content {
        padding: 50px 40px 40px;
    }
}
@media (max-width: 600px) {
    section.start .content {
        display: block;
        padding: 50px 20px 30px;
        text-align: center;
    }
}
section.start .texts .section-title {
    margin-bottom: 0.35em;
}
section.start .texts .section-sub-title {
    margin-bottom: 0.35em;
    color: #fff;
}
@media (max-width: 600px) {
    section.start .texts .section-sub-title {
        margin-bottom: 0.35em;
    }
}
section.start .texts .section-sub-title > span {
    opacity: 0.6;
}
@media (max-width: 600px) {
    section.start .texts .trustpilot {
        margin-bottom: 1em;
    }
}
section.start .button {
    margin-right: 0;
}
section.start .illustration {
    position: absolute;
    top: -28px;
    left: 8%;
}
@media (max-width: 1300px) {
    section.start .illustration {
        top: -50px;
    }
}
section.start .join-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}
section.start .join-group .gift {
    padding: 12px 42px 0;
    white-space: nowrap;
    font-size: 16px;
}
section.start .join-group .gift:hover {
    text-decoration: none;
}
section.start .join-group .gift .gift-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
}
section.start .join-group .gift .gift-icon svg {
    width: 100%;
    height: 100%;
}
section.start .join-group .gift .gift-icon svg * {
    fill: #fff;
}
.text {
    color: #fff;
}
.text code[class*="language-"],
.text pre[class*="language-"] {
    color: #ccc;
    background: none;
    
    font-size: 0.85rem;
    font-weight: 700;
    text-align: left;
    white-space: pre-wrap;
    word-spacing: normal;
    word-break: break-word;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}
.text pre[class*="language-"] {
    padding: 25px;
    margin: 0.5em 0;
    overflow: auto;
}
@media (max-width: 600px) {
    .text pre[class*="language-"] {
        padding: 20px;
    }
}
@media (max-width: 400px) {
    .text pre[class*="language-"] {
        padding: 15px;
    }
}
.text :not(pre) > code[class*="language-"],
.text pre[class*="language-"] {
    background: #222;
}
.text :not(pre) > code[class*="language-"] {
    padding: 0.1em;
    border-radius: 0.3em;
    white-space: normal;
}
.text .token.comment,
.text .token.block-comment,
.text .token.prolog,
.text .token.doctype,
.text .token.cdata {
    color: #999;
}
.text .token.punctuation {
    color: #62c8f3;
}
.text .token.function-name {
    color: #6196cc;
}
.text .token.italic {
    font-style: italic;
}
.text .token.entity {
    cursor: help;
}
.text .token.inserted {
    color: #fff;
}
.text .token.tag {
    color: #eee;
}
.text .token.attr-name,
.text .token.namespace,
.text .token.deleted {
    color: #e2777a;
}
.text .token.boolean,
.text .token.number,
.text .token.function {
    color: #ffc061;
}
.text .token.property,
.text .token.class-name,
.text .token.constant,
.text .token.symbol {
    color: #fe6854;
}
.text .token.selector {
    color: #fff;
}
.text .token.important,
.text .token.atrule,
.text .token.keyword,
.text .token.builtin {
    color: #ac9fff;
}
.text .token.string,
.text .token.char,
.text .token.attr-value,
.text .token.regex,
.text .token.variable {
    color: #7ec699;
}
.text .token.operator,
.text .token.entity,
.text .token.url {
    color: #67cdcc;
}
.text .token.important,
.text .token.bold {
    font-weight: 700;
}
.text h2,
.text h3,
.text h4,
.text h5,
.text .h2,
.text .h3,
.text .h4,
.text .h5,
.text .title {
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    font-weight: 700;
}
@media (max-width: 400px) {
    .text h2,
    .text h3,
    .text h4,
    .text h5,
    .text .h2,
    .text .h3,
    .text .h4,
    .text .h5,
    .text .title {
        word-break: break-word;
    }
}
.text h2:first-child,
.text h3:first-child,
.text h4:first-child,
.text h5:first-child,
.text .h2:first-child,
.text .h3:first-child,
.text .h4:first-child,
.text .h5:first-child,
.text .title:first-child {
    margin-top: 0;
}
.text h2,
.text .h2 {
    font-size: 2rem;
}
.text h3,
.text .h3 {
    font-size: 1.75rem;
}
.text h4,
.text .h4 {
    font-size: 1.5rem;
}
.text h5,
.text .h5 {
    font-size: 1.25rem;
}
.text strong {
    font-weight: 700;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}
.text ul,
.text ol {
    margin-bottom: 1em;
}
.text li {
    position: relative;
    padding-left: 1em;
    margin-bottom: 0.25em;
}
.text li:before {
    content: "";
    display: block;
    position: absolute;
    top: calc(0.8em - 2px);
    left: 0.2em;
    width: 4px;
    height: 4px;
    background: #fff;
    opacity: 0.2;
}
.text li ul {
    margin-top: 0.25em;
    padding-left: 1em;
}
.text p,
.text li {
    margin-bottom: 0.5em;
}
.text p:last-child,
.text li:last-child {
    margin-bottom: 0;
}
.text p a:not(.button),
.text li a:not(.button) {
    text-decoration: none;
    color: #b08aff;
}
@media (max-width: 600px) {
    .text p a:not(.button),
    .text li a:not(.button) {
        word-break: break-word;
    }
}
.text p a:not(.button):hover,
.text li a:not(.button):hover {
    text-decoration: none;
}
.text p code,
.text li code {
    display: inline-block;
    position: relative;
    margin-bottom: 1px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 4px;
    font-weight: 700;
    color: #fff;
    
    background: rgba(112, 93, 242, 0.667);
    font-size: 0.85rem;
}
@media (max-width: 600px) {
    .text p code,
    .text li code {
        word-break: break-word;
    }
}
.text .is-image {
    text-align: center;
    line-height: 0;
}
.text .is-image .image-inner {
    display: inline-block;
    border-radius: 6px;
    line-height: 0;
}
.text .is-image .image-inner img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.5s;
}
.text .is-image .image-inner img.is-loaded {
    opacity: 1;
}
.text .code-toolbar pre[class*="language-"] {
    margin-bottom: 1em;
    outline: none;
    border-radius: 6px;
    border: 1px solid #202020;
    font-weight: 700;
}
.text .code-toolbar pre[class*="language-"]:focus {
    border: 1px solid #705df2;
}
.text .code-toolbar .toolbar {
    top: 10px;
    right: 10px;
}
.text .code-toolbar .toolbar .toolbar-item {
    display: inline-block;
    vertical-align: top;
    line-height: 25px;
    height: 25px;
    margin-left: 4px;
}
.text .code-toolbar .toolbar .toolbar-item span,
.text .code-toolbar .toolbar .toolbar-item a,
.text .code-toolbar .toolbar .toolbar-item button {
    display: inline-block;
    line-height: 25px;
    height: 25px;
    padding: 0 10px;
    font-weight: 700;
    box-shadow: none;
    color: inherit;
    border-radius: 4px;
}
.text .code-toolbar .toolbar .toolbar-item span {
    background: none;
}
.text .code-toolbar .toolbar .toolbar-item a,
.text .code-toolbar .toolbar .toolbar-item button {
    background: #1a1a1a;
}
.text .desmos {
    margin-bottom: 1em;
    width: 100%;
    display: flex;
    justify-content: center;
}
.text .desmos iframe {
    width: 600px;
    height: 400px;
}
@media (max-width: 800px) {
    .text .desmos iframe {
        width: 100%;
        height: 300px;
    }
}
.text .video {
    position: relative;
    margin-bottom: 1em;
    background: #202020;
    border-radius: 6px;
    cursor: pointer;
}
.text .video .element {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    outline: none;
}
.text .video .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0e0e0e;
    opacity: 0.1;
    transition: opacity 0.3s;
    pointer-events: none;
}
.text .video .logo {
    position: absolute;
    top: calc(50% - 34px / 1.5);
    left: calc(50% - 19px);
    width: 34px;
    height: 38px;
    transition: opacity 0.3s;
    pointer-events: none;
}
.text .video .logo svg {
    display: block;
    width: 100%;
    height: 100%;
}
.text .video .logo svg * {
    fill: #fff;
}
.text .video.is-playing .overlay,
.text .video.is-playing .logo {
    opacity: 0;
}
.top-navigation {
    position: fixed;
    top: 55px;
    right: 85px;
    text-align: right;
    z-index: 3;
}
@media (max-width: 1600px) {
    .top-navigation {
        top: 45px;
        right: 70px;
    }
}
@media (max-width: 1300px) {
    .top-navigation {
        top: 35px;
        right: 35px;
    }
}
@media (max-width: 1080px) {
    .top-navigation {
        top: 25px;
        right: 25px;
    }
}
@media (max-width: 800px) {
    .top-navigation {
        top: 20px;
        right: 20px;
    }
}
@media (max-width: 600px) {
    .top-navigation {
        top: 15px;
        right: 15px;
    }
}
@media (max-width: 400px) {
    .top-navigation {
        top: 10px;
        right: 10px;
    }
}
.top-navigation br {
    display: none;
}
@media (max-width: 800px) {
    .top-navigation br {
        display: inline;
    }
}
.top-navigation .button {
    height: 48px;
    margin-right: 0;
    margin-left: 15px;
    border-radius: 24px;
    box-shadow: 0 14px 55px #3c00bd26;
    -webkit-mask-image: none;
}
@media (max-width: 1300px) {
    .top-navigation .button {
        margin-left: 10px;
    }
}
@media (max-width: 1080px) {
    .top-navigation .button {
        margin-left: 5px;
    }
}
@media (max-width: 800px) {
    .top-navigation .button {
        margin-left: 0;
        margin-bottom: 10px;
    }
}
.top-navigation .button .label {
    margin-left: 28px;
    margin-right: 28px;
    
    font-weight: 700;
    font-size: 18px;
}
@media (max-width: 1080px) {
    .top-navigation .button .label {
        margin-left: 24px;
        margin-right: 24px;
    }
}
@media (max-width: 800px) {
    .top-navigation .button .label {
        margin-left: 20px;
        margin-right: 20px;
    }
}
@media (max-width: 600px) {
    .top-navigation .button .label:first-letter {
        text-transform: uppercase;
    }
}
@media (max-width: 600px) {
    .top-navigation .button .non-important {
        display: none;
    }
}
.trustpilot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.trustpilot.has-theme-dark .stars .star * {
    fill: #fff;
}
.trustpilot > * {
    display: block;
}
.trustpilot .stars {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 0;
}
.trustpilot .stars .star {
    display: inline-block;
    position: relative;
    margin-right: 3px;
    width: 21px;
    height: 21px;
}
.trustpilot .stars .star:last-child {
    margin-right: 0;
}
.trustpilot .stars .star svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.trustpilot .label {
    margin-left: 0.5em;
}
.trustpilot .label a {
    color: #04da8d !important;
}
.tweet {
    display: block;
    position: relative;
    margin-left: 10px;
    margin-bottom: 20px;
    margin-right: 10px;
    min-height: 360px;
}
@media (max-width: 800px) {
    .tweet {
        margin-left: 0;
        margin-right: 0;
    }
}
.tweet .twitter-tweet {
    position: relative;
}
.tweet .twitter-tweet iframe {
    width: 100% !important;
}
.tweet .placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(238, 238, 238, 0.2);
}
.tweet .placeholder .head {
    display: flex;
    align-items: center;
    margin-bottom: 1em;
}
.tweet .placeholder .head .user {
    width: 48px;
    height: 48px;
    margin-right: 10px;
    background: rgba(238, 238, 238, 0.133);
    border-radius: 50%;
}
.tweet .placeholder .head .titles .name {
    width: 100px;
    height: 1em;
    background: rgba(238, 238, 238, 0.133);
    margin-bottom: 4px;
}
.tweet .placeholder .head .titles .sub-name {
    width: 120px;
    height: 1em;
    background: rgba(238, 238, 238, 0.133);
}
.tweet .placeholder .text {
    margin-bottom: 1em;
}
.tweet .placeholder .text .text-line {
    height: 1em;
    background: rgba(238, 238, 238, 0.133);
    margin-bottom: 4px;
}
.tweet .placeholder .text .text-line:nth-child(1) {
    width: 50%;
}
.tweet .placeholder .text .text-line:nth-child(3) {
    width: 75%;
}
.tweet .placeholder .pictures {
    display: flex;
    margin-bottom: 1em;
}
.tweet .placeholder .pictures .picture {
    width: 80px;
    height: 80px;
    background: rgba(238, 238, 238, 0.133);
}
.tweet .placeholder .pictures .picture:nth-child(1) {
    margin-right: 10px;
}
.tweets {
    margin-bottom: 10vh;
}
.tweets .columns {
    display: flex;
    justify-content: center;
    width: 1560px;
    margin-right: auto;
    margin-left: auto;
}
@media (max-width: 1600px) {
    .tweets .columns {
        width: auto;
        margin-right: 20px;
        margin-left: 20px;
    }
}
@media (max-width: 600px) {
    .tweets .columns {
        margin-left: 15px;
        margin-right: 15px;
    }
}
@media (max-width: 400px) {
    .tweets .columns {
        margin-left: 10px;
        margin-right: 10px;
    }
}
.tweets .column {
    flex: 1;
    max-width: 550px;
}
@media (max-width: 1300px) {
    .tweets .column:nth-child(3) {
        display: none;
    }
}
@media (max-width: 800px) {
    .tweets .column:nth-child(2) {
        display: none;
    }
}
.tweets .column .tweet {
    visibility: visible;
}
.tweets .tweet {
    visibility: hidden;
}
.tweets .tweet iframe {
    position: relative;
    z-index: 1;
}
.tweets .column:nth-child(1) .tweet:nth-child(3n + 1):before,
.tweets .column:nth-child(2) .tweet:nth-child(3n + 2):before,
.tweets .column:nth-child(3) .tweet:nth-child(3n + 3):before {
    content: "";
    display: block;
    width: 50vmax;
    height: 50vmax;
    position: absolute;
    top: -12.5vmax;
    left: -12.5vmax;
    background: radial-gradient(closest-side, #213040, rgba(33, 48, 64, 0));
    pointer-events: none;
    z-index: 0;
}
.tweets .more {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
.tweets .more .button {
    margin-right: 0;
}
.video-jump {
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    height: 0.8em;
    padding: 10px;
    border: 2px solid #fff;
    border-radius: 1em;
    opacity: 0.5;
    transition: opacity 0.15s;
    will-change: opacity;
    cursor: pointer;
    text-decoration: none;
}
@media print {
    .video-jump {
        display: none;
    }
}
.video-jump:hover {
    opacity: 1;
}
.video-jump .time {
    font-size: 0.8rem;
    font-weight: 500;
}
.video-jump .play {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 12px;
    margin-right: 4px;
}
.video-jump .play svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video-jump .play svg * {
    fill: #fff;
}
.abyss-simple-page {
    padding-top: calc(var(--page-top-padding) + 100px);
}
@media (max-width: 1300px) {
    .abyss-simple-page {
        padding-top: calc(var(--page-top-padding) + 80px);
    }
}
@media (max-width: 1080px) {
    .abyss-simple-page {
        padding-top: calc(var(--page-top-padding) + 60px);
    }
}
@media (max-width: 800px) {
    .abyss-simple-page {
        padding-top: calc(var(--page-top-padding) + 40px);
    }
}
@media (max-width: 600px) {
    .abyss-simple-page {
        padding-top: calc(var(--page-top-padding) + 30px);
    }
}
@media (max-width: 400px) {
    .abyss-simple-page {
        padding-top: calc(var(--page-top-padding) + 20px);
    }
}
.abyss-simple-page .abyss-simple-top {
    width: auto;
    max-width: 840px;
    margin: 0 auto 5em;
    text-align: center;
}
@media (max-width: 1080px) {
    .abyss-simple-page .abyss-simple-top {
        width: auto;
        padding-left: 70px;
        padding-right: 70px;
        margin-bottom: 4em;
    }
}
@media (max-width: 600px) {
    .abyss-simple-page .abyss-simple-top {
        padding-left: 40px;
        padding-right: 40px;
        margin-bottom: 2.5em;
    }
}
.abyss-simple-page .abyss-simple-top .page-title {
    
    font-weight: 800;
}
.abyss-simple-page .abyss-simple-top .primary {
    font-size: 48px;
    margin-bottom: 0.25em;
}
@media (max-width: 1300px) {
    .abyss-simple-page .abyss-simple-top .primary {
        font-size: 44px;
    }
}
@media (max-width: 1080px) {
    .abyss-simple-page .abyss-simple-top .primary {
        font-size: 40px;
    }
}
@media (max-width: 800px) {
    .abyss-simple-page .abyss-simple-top .primary {
        font-size: 36px;
    }
}
@media (max-width: 600px) {
    .abyss-simple-page .abyss-simple-top .primary {
        font-size: 32px;
    }
}
@media (max-width: 400px) {
    .abyss-simple-page .abyss-simple-top .primary {
        font-size: 28px;
    }
}
.abyss-simple-page .abyss-simple-top .secondary {
    font-size: 26px;
    color: #705df2;
    margin-bottom: 1.5em;
}
@media (max-width: 1300px) {
    .abyss-simple-page .abyss-simple-top .secondary {
        font-size: 24px;
    }
}
@media (max-width: 1080px) {
    .abyss-simple-page .abyss-simple-top .secondary {
        font-size: 22px;
    }
}
@media (max-width: 800px) {
    .abyss-simple-page .abyss-simple-top .secondary {
        font-size: 20px;
    }
}
@media (max-width: 600px) {
    .abyss-simple-page .abyss-simple-top .secondary {
        font-size: 18px;
    }
}
@media (max-width: 400px) {
    .abyss-simple-page .abyss-simple-top .secondary {
        font-size: 18px;
    }
}
.abyss-simple-page .abyss-simple-top .main-description {
    display: flex;
    justify-content: center;
    margin-bottom: 1em;
    line-height: 1.25em;
    
    font-size: 26px;
    font-weight: 500;
}
@media (max-width: 1300px) {
    .abyss-simple-page .abyss-simple-top .main-description {
        font-size: 24px;
    }
}
@media (max-width: 1080px) {
    .abyss-simple-page .abyss-simple-top .main-description {
        font-size: 22px;
    }
}
@media (max-width: 800px) {
    .abyss-simple-page .abyss-simple-top .main-description {
        font-size: 20px;
    }
}
@media (max-width: 600px) {
    .abyss-simple-page .abyss-simple-top .main-description {
        font-size: 18px;
    }
}
@media (max-width: 400px) {
    .abyss-simple-page .abyss-simple-top .main-description {
        font-size: 18px;
    }
}
.abyss-simple-page .abyss-simple-top .main-description .inner {
    position: relative;
}
@media (max-width: 600px) {
    .abyss-simple-page .abyss-simple-top .main-description .inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}
.abyss-simple-page .abyss-simple-top .main-description .signature {
    position: absolute;
    top: calc(100% + 0.5em);
    right: -50px;
    font-size: 20px;
    color: #57fdf3;
    text-decoration: none;
}
@media (max-width: 1300px) {
    .abyss-simple-page .abyss-simple-top .main-description .signature {
        font-size: 20px;
    }
}
@media (max-width: 1080px) {
    .abyss-simple-page .abyss-simple-top .main-description .signature {
        font-size: 19px;
    }
}
@media (max-width: 800px) {
    .abyss-simple-page .abyss-simple-top .main-description .signature {
        font-size: 18px;
    }
}
@media (max-width: 600px) {
    .abyss-simple-page .abyss-simple-top .main-description .signature {
        font-size: 17px;
    }
}
@media (max-width: 400px) {
    .abyss-simple-page .abyss-simple-top .main-description .signature {
        font-size: 16px;
    }
}
@media (max-width: 600px) {
    .abyss-simple-page .abyss-simple-top .main-description .signature {
        position: static;
        text-align: center;
        margin-top: 0.5em;
    }
}
.abyss-simple-page .abyss-simple-top .main-description .signature:hover {
    text-decoration-style: wavy;
    text-decoration-skip-ink: none;
}
.abyss-simple-page p {
    font-size: 20px;
    color: #fffc;
}
@media (max-width: 1300px) {
    .abyss-simple-page p {
        font-size: 20px;
    }
}
@media (max-width: 1080px) {
    .abyss-simple-page p {
        font-size: 19px;
    }
}
@media (max-width: 800px) {
    .abyss-simple-page p {
        font-size: 18px;
    }
}
@media (max-width: 600px) {
    .abyss-simple-page p {
        font-size: 17px;
    }
}
@media (max-width: 400px) {
    .abyss-simple-page p {
        font-size: 16px;
    }
}
.abyss-simple-page p a {
    color: #57fdf3;
}
.abyss-simple-page p strong {
    color: #fff;
}
.abyss-simple-page .highlight {
    color: #57fdf3;
    font-weight: 800;
}
.page.account {
    padding-top: var(--page-top-padding);
    padding-left: 25px;
    padding-right: 25px;
    background-color: #1a1a1a;
    color: #fff;
}
@media (max-width: 800px) {
    .page.account {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 600px) {
    .page.account {
        padding-left: 15px;
        padding-right: 15px;
    }
}
.page.account .page-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 75px;
    padding-bottom: 45px;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 1300px) {
    .page.account .page-content {
        padding-top: 5vmin;
    }
}
@media (max-width: 600px) {
    .page.account .page-content {
        flex-direction: column;
    }
}
.page.account .page-content h1,
.page.account .page-content h2,
.page.account .page-content h3,
.page.account .page-content h4,
.page.account .page-content h5,
.page.account .page-content .h1,
.page.account .page-content .h2,
.page.account .page-content .h3,
.page.account .page-content .h4,
.page.account .page-content .h5 {
    margin-bottom: 1em;
}
.page.account .content-section {
    margin-bottom: 4em;
}
.page.account .sidebar {
    width: 230px;
    margin-right: 30px;
    border-right: 3px solid #202020;
}
@media (max-width: 600px) {
    .page.account .sidebar {
        width: 100%;
        margin-bottom: 2rem;
        border: none;
    }
}
.page.account .sidebar .item {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    width: 100%;
    text-decoration: none;
}
.page.account .sidebar .item.is-active:after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 10px);
    right: 0;
    width: 4px;
    height: 20px;
    background: #fff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.page.account .sidebar .item.is-active > * {
    opacity: 1;
}
.page.account .sidebar .item > * {
    opacity: 0.5;
    transition: opacity 0.15s;
}
.page.account .sidebar:hover .item > * {
    opacity: 0.5;
}
.page.account .sidebar:hover .item:hover > * {
    opacity: 1;
}
.page.account .sidebar .icon {
    width: 20px;
    margin-right: 10px;
}
.page.account .sidebar .icon.guy-mini {
    height: 16px;
}
.page.account .sidebar .icon.lock {
    height: 14px;
}
.page.account .sidebar .icon.gear {
    height: 16px;
}
.page.account .sidebar .icon.paper {
    height: 14px;
}
.page.account .sidebar .icon.question-mark {
    height: 16px;
}
.page.account .sidebar .icon.certificate {
    height: 20px;
}
.page.account .sidebar .icon.heart {
    height: 12px;
    opacity: 1;
}
.page.account .sidebar .icon.heart svg * {
    fill: #ec4a7a;
}
.page.account .sidebar .icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #fff;
}
.page.account .main {
    width: 540px;
}
@media (max-width: 600px) {
    .page.account .main {
        width: 100%;
    }
}
.page.certificateQuiz {
    padding-top: var(--page-top-padding);
    padding-left: 25px;
    padding-right: 25px;
    background-color: #1a1a1a;
    color: #fff;
}
@media (max-width: 800px) {
    .page.certificateQuiz {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 600px) {
    .page.certificateQuiz {
        padding-left: 15px;
        padding-right: 15px;
    }
}
.page.certificateQuiz .page-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 75px;
    padding-bottom: 45px;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 1300px) {
    .page.certificateQuiz .page-content {
        padding-top: 5vmin;
    }
}
@media (max-width: 800px) {
    .page.certificateQuiz .page-content {
        flex-direction: column;
    }
}
.page.certificateQuiz .page-content h1,
.page.certificateQuiz .page-content h2,
.page.certificateQuiz .page-content h3,
.page.certificateQuiz .page-content h4,
.page.certificateQuiz .page-content h5,
.page.certificateQuiz .page-content .h1,
.page.certificateQuiz .page-content .h2,
.page.certificateQuiz .page-content .h3,
.page.certificateQuiz .page-content .h4,
.page.certificateQuiz .page-content .h5 {
    margin-bottom: 1em;
}
.page.certificateQuiz .sidebar {
    width: 340px;
    margin-right: 75px;
    border-right: 3px solid #202020;
}
@media (max-width: 800px) {
    .page.certificateQuiz .sidebar {
        width: 100%;
        margin-bottom: 2rem;
        border: none;
    }
}
.page.certificateQuiz .sidebar .button.is-certificate {
    margin-top: 1rem;
}
.page.certificateQuiz .main {
    width: 640px;
}
@media (max-width: 800px) {
    .page.certificateQuiz .main {
        width: 100%;
    }
}
.page.certificateQuiz .top {
    margin-bottom: 4rem;
}
.page.certificateQuiz .buttons .button {
    margin-bottom: 4px;
}
.page.certificateQuiz .text .code-toolbar .toolbar {
    display: none;
}
.page.certificateQuiz .questions.is-timedOut {
    pointer-events: none;
    opacity: 0.5;
}
.page.certificateQuiz .questions .question {
    position: relative;
    margin-bottom: 4rem;
}
.page.certificateQuiz .questions .question.is-good {
    pointer-events: none;
}
.page.certificateQuiz .questions .question.is-good .choice input[type="radio"]:checked + .inner {
    background: #705df2;
}
.page.certificateQuiz .questions .question.is-good .choice input[type="radio"]:checked + .inner:after {
    border: none;
}
.page.certificateQuiz .questions .question.is-good .choice input[type="radio"]:checked + .inner .icon.is-checked {
    display: block;
}
.page.certificateQuiz .questions .question.is-wrong.is-unchanged .choice input[type="radio"]:checked + .inner {
    background: #752525;
}
.page.certificateQuiz .questions .question.is-wrong.is-unchanged .choice input[type="radio"]:checked + .inner:after {
    border: none;
}
.page.certificateQuiz .questions .question.is-wrong.is-unchanged .choice input[type="radio"]:checked + .inner .icon.is-cross {
    display: block;
}
.page.certificateQuiz .questions .question .index {
    position: absolute;
    right: calc(100% + 5px);
    bottom: calc(100% - 1.35rem);
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
}
@media (max-width: 800px) {
    .page.certificateQuiz .questions .question .index {
        display: inline-block;
        position: relative;
        right: 0;
        bottom: 0;
    }
}
.page.certificateQuiz .questions .question .sentence {
    margin-bottom: 0.75rem;
}
.page.certificateQuiz .questions .question .choice {
    display: block;
    position: relative;
    margin-bottom: 0.5rem;
    cursor: pointer;
}
.page.certificateQuiz .questions .question .choice .text p code,
.page.certificateQuiz .questions .question .choice .text li code {
    background: rgba(255, 255, 255, 0.129);
}
.page.certificateQuiz .questions .question .choice:hover .inner {
    background: #2a2a2a;
}
.page.certificateQuiz .questions .question .choice input[type="radio"] {
    display: none;
}
.page.certificateQuiz .questions .question .choice input[type="radio"]:checked + .inner:after {
    border: 2px solid #705df2;
}
.page.certificateQuiz .questions .question .choice .inner {
    display: block;
    position: relative;
    border-radius: 12px;
    padding: 8px 34px 8px 18px;
    background: #202020;
}
.page.certificateQuiz .questions .question .choice .inner:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    pointer-events: none;
}
.page.certificateQuiz .questions .question .choice .inner pre[class*="language-"] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}
.page.certificateQuiz .questions .question .choice .inner .icon {
    display: none;
    position: absolute;
    top: 0;
    right: 15px;
    width: 10px;
    height: 10px;
}
.page.certificateQuiz .questions .question .choice .inner .icon svg {
    display: block;
    width: 100%;
    height: 100%;
}
.page.certificateQuiz .questions .question .choice .inner .icon.is-checked {
    top: calc(50% - 4px);
    width: 10px;
    height: 9px;
}
.page.certificateQuiz .questions .question .choice .inner .icon.is-checked svg * {
    fill: #32ffce;
}
.page.certificateQuiz .questions .question .choice .inner .icon.is-cross {
    top: calc(50% - 5px);
    width: 11px;
    height: 11px;
}
.page.certificateQuiz .questions .question .choice .inner .icon.is-cross svg * {
    fill: #32ffce;
}
.page.certificateQuiz .questions .submit-container {
    display: flex;
    justify-content: flex-end;
}
.page.challenges .section {
    margin-bottom: 6em;
}
.page.challenges .star {
    display: inline-block;
    position: relative;
    top: 1px;
    width: 17px;
    height: 17px;
}
.page.challenges .star svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page.challenges .star svg * {
    fill: #ffc37d;
}
.page.challenges .submission {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: 50px;
}
@media (max-width: 800px) {
    .page.challenges .submission {
        margin-bottom: 40px;
    }
}
@media (max-width: 600px) {
    .page.challenges .submission {
        margin-bottom: 25px;
    }
}
.page.challenges .submission.is-rank-1 .details {
    padding-right: 90px;
}
.page.challenges .submission.is-rank-2,
.page.challenges .submission.is-rank-3 {
    width: calc(50% - 12.5px);
}
@media (max-width: 1080px) {
    .page.challenges .submission.is-rank-2,
    .page.challenges .submission.is-rank-3 {
        width: 100%;
    }
}
.page.challenges .submission.is-rank-2 .rank,
.page.challenges .submission.is-rank-3 .rank {
    padding: 20px 0;
}
.page.challenges .submission.is-rank-2 .rank .position,
.page.challenges .submission.is-rank-3 .rank .position {
    font-size: 36px;
}
.page.challenges .submission.is-rank-2 .details,
.page.challenges .submission.is-rank-3 .details {
    flex-direction: column;
    align-items: flex-start;
}
.page.challenges .submission.is-rank-2 .details .titles,
.page.challenges .submission.is-rank-3 .details .titles {
    padding-right: 60px;
}
.page.challenges .submission.is-rank-2 .rank {
    background: linear-gradient(226deg, rgba(6, 148, 185, 0.2) 0%, rgba(17, 31, 52, 0.2) 100%), #271945;
    box-shadow: 0 0 80px #5da2f24d;
}
.page.challenges .submission.is-rank-2 .rank .position {
    background: linear-gradient(180deg, #fff 0%, #adebff 48.96%, #7981ca 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.page.challenges .submission.is-rank-3 .rank {
    left: 100%;
    border-radius: 0 14px 14px 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-left: none;
    background: linear-gradient(226deg, rgba(199, 100, 73, 0.2) 0%, rgba(88, 21, 105, 0.2) 100%), #271945;
    box-shadow: 0 0 80px #705df24d;
}
@media (max-width: 1080px) {
    .page.challenges .submission.is-rank-3 .rank {
        left: auto;
        right: 100%;
        border-radius: 14px 0 0 14px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-right: none;
    }
}
.page.challenges .submission.is-rank-3 .rank .inner {
    align-items: flex-end;
}
.page.challenges .submission.is-rank-3 .rank .position {
    background: linear-gradient(180deg, #ffe3b8 0%, #7f559f 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.page.challenges .submission.is-no-rank {
    width: 330px;
}
.page.challenges .submission.is-no-rank .details {
    flex-direction: column;
    align-items: flex-start;
}
.page.challenges .submission.is-no-rank .details .titles {
    padding-right: 60px;
}
.page.challenges .submission.is-voted .details {
    border-color: #ffc37d80;
    transition: border-color 0.3s;
}
.page.challenges .submission.is-voted .details .titles .title {
    color: #ffc37d;
    transition: color 0.3s;
}
.page.challenges .submission.is-voted .details .button .label:after {
    content: "d";
}
.page.challenges .submission .visual {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: #ff77f133 0 0 80px;
    flex-shrink: 0;
}
.page.challenges .submission .visual .ratio-holder {
    width: 100%;
    padding-top: 56.25%;
}
.page.challenges .submission .visual iframe,
.page.challenges .submission .visual .thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page.challenges .submission .visual .thumbnail {
    object-fit: cover;
}
.page.challenges .submission .rank {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 25px;
    right: 100%;
    border-radius: 14px 0 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-right: none;
    background: linear-gradient(226deg, rgba(255, 140, 56, 0.2) 0%, rgba(88, 21, 105, 0.2) 100%), #271945;
    padding: 10px 0;
    width: 108px;
    text-align: center;
    box-shadow: 0 0 80px #f25d934d;
}
@media (max-width: 800px) {
    .page.challenges .submission .rank {
        top: 0 !important;
        right: 25px !important;
        border-radius: 0 0 14px 14px !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-top: none !important;
        padding: 10px 0 15px !important;
    }
}
@media (max-width: 600px) {
    .page.challenges .submission .rank {
        right: 15px !important;
        width: 90px;
        padding: 6px 0 10px !important;
    }
}
.page.challenges .submission .rank .inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.page.challenges .submission .rank .position {
    
    font-size: 54px;
    font-weight: 800;
    background: linear-gradient(180deg, #fff5eb 0%, #ffbd80 44.79%, #ea4681 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media (max-width: 800px) {
    .page.challenges .submission .rank .position {
        font-size: 36px;
    }
}
@media (max-width: 600px) {
    .page.challenges .submission .rank .position {
        font-size: 28px !important;
    }
}
.page.challenges .submission .rank .votes {
    margin-top: 4px;
    opacity: 0.8;
    
    font-size: 20px;
    font-weight: 700;
    color: #ffc37d;
}
@media (max-width: 1300px) {
    .page.challenges .submission .rank .votes {
        font-size: 20px;
    }
}
@media (max-width: 1080px) {
    .page.challenges .submission .rank .votes {
        font-size: 19px;
    }
}
@media (max-width: 800px) {
    .page.challenges .submission .rank .votes {
        font-size: 18px;
    }
}
@media (max-width: 600px) {
    .page.challenges .submission .rank .votes {
        font-size: 17px;
    }
}
@media (max-width: 400px) {
    .page.challenges .submission .rank .votes {
        font-size: 16px;
    }
}
@media (max-width: 800px) {
    .page.challenges .submission .rank .votes {
        display: none;
    }
}
.page.challenges .submission .details {
    display: flex;
    position: relative;
    width: calc(100% - 50px);
    padding: 35px 40px;
    justify-content: space-around;
    gap: 15px;
    border-radius: 0 0 14px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: none;
    background: radial-gradient(335.46% 124.73% at 101.61% -14.1%, rgba(255, 119, 241, 0.2) 0%, rgba(20, 11, 41, 0.2) 100%), #140b29;
}
@media (max-width: 1080px) {
    .page.challenges .submission .details {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 800px) {
    .page.challenges .submission .details {
        padding: 25px 35px;
    }
}
@media (max-width: 600px) {
    .page.challenges .submission .details {
        padding: 20px;
        width: calc(100% - 25px);
    }
}
.page.challenges .submission .details .titles:hover .launch-author {
    text-decoration: none;
}
.page.challenges .submission .details .titles .title {
    font-size: 20px;
    color: #ff77f1;
    
    font-weight: 500;
}
@media (max-width: 1300px) {
    .page.challenges .submission .details .titles .title {
        font-size: 20px;
    }
}
@media (max-width: 1080px) {
    .page.challenges .submission .details .titles .title {
        font-size: 19px;
    }
}
@media (max-width: 800px) {
    .page.challenges .submission .details .titles .title {
        font-size: 18px;
    }
}
@media (max-width: 600px) {
    .page.challenges .submission .details .titles .title {
        font-size: 17px;
    }
}
@media (max-width: 400px) {
    .page.challenges .submission .details .titles .title {
        font-size: 16px;
    }
}
.page.challenges .submission .details .titles .launch-author {
    display: flex;
    padding: 5px 0;
    
    font-weight: 700;
}
.page.challenges .submission .details .titles .launch-author .arrow {
    position: relative;
    top: 1px;
    margin-left: 2px;
    transform: rotate(-90deg);
}
.page.challenges .submission .details .titles .launch-author .arrow svg * {
    fill: #fff;
    opacity: 1;
}
.page.challenges .submission .details .links {
    display: flex;
    flex-direction: column;
}
.page.challenges .submission .details .links ul li {
    white-space: break-spaces;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page.challenges .submission .details .links ul li:before {
    content: "";
    vertical-align: middle;
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 3px;
    opacity: 0.75;
    margin-top: -1px;
    margin-right: 8px;
}
.page.challenges .submission .details .links ul a {
    opacity: 0.8;
    margin-bottom: 0.5em;
    text-decoration: none;
}
.page.challenges .submission .details .links ul a:hover {
    text-decoration: none;
}
.page.challenges .submission .details .button.is-discord {
    position: absolute;
    top: 35px;
    right: 35px;
}
@media (max-width: 800px) {
    .page.challenges .submission .details .button.is-discord {
        top: 25px;
        right: 25px;
    }
}
@media (max-width: 600px) {
    .page.challenges .submission .details .button.is-discord {
        top: 20px;
        right: 20px;
    }
}
.page.challenges .topic-head {
    position: relative;
    display: flex;
    justify-content: flex-end;
    width: 662px;
    
    font-weight: 700;
    margin: 0 auto 4em;
}
@media (max-width: 1080px) {
    .page.challenges .topic-head {
        width: auto;
        margin-left: 25px;
        margin-right: 25px;
    }
}
@media (max-width: 600px) {
    .page.challenges .topic-head {
        margin-left: 15px;
        margin-right: 15px;
    }
}
.page.challenges .topic-head .content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100% - 1em);
}
.page.challenges .topic-head .content .number {
    margin-bottom: 0.2em;
    font-size: 16px;
    color: #57fdf3;
}
@media (max-width: 800px) {
    .page.challenges .topic-head .content .number {
        font-size: 15px;
    }
}
@media (max-width: 600px) {
    .page.challenges .topic-head .content .number {
        font-size: 14px;
    }
}
@media (max-width: 400px) {
    .page.challenges .topic-head .content .number {
        font-size: 14px;
    }
}
.page.challenges .topic-head .content .name {
    margin-bottom: 0.2em;
    font-size: 48px;
    font-weight: 800;
}
@media (max-width: 1300px) {
    .page.challenges .topic-head .content .name {
        font-size: 44px;
    }
}
@media (max-width: 1080px) {
    .page.challenges .topic-head .content .name {
        font-size: 40px;
    }
}
@media (max-width: 800px) {
    .page.challenges .topic-head .content .name {
        font-size: 36px;
    }
}
@media (max-width: 600px) {
    .page.challenges .topic-head .content .name {
        font-size: 32px;
    }
}
@media (max-width: 400px) {
    .page.challenges .topic-head .content .name {
        font-size: 28px;
    }
}
.page.challenges .topic-head .content .status {
    font-size: 26px;
    font-weight: 800;
    color: #705df2;
}
@media (max-width: 1300px) {
    .page.challenges .topic-head .content .status {
        font-size: 24px;
    }
}
@media (max-width: 1080px) {
    .page.challenges .topic-head .content .status {
        font-size: 22px;
    }
}
@media (max-width: 800px) {
    .page.challenges .topic-head .content .status {
        font-size: 20px;
    }
}
@media (max-width: 600px) {
    .page.challenges .topic-head .content .status {
        font-size: 18px;
    }
}
@media (max-width: 400px) {
    .page.challenges .topic-head .content .status {
        font-size: 18px;
    }
}
.page.challenges .topic-head .image-container {
    position: relative;
    width: calc(470 / 662 * 100%);
    overflow: hidden;
    border-radius: 8px;
}
.page.challenges .topic-head .image-container:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(80deg, rgba(20, 11, 41, 0.8) 0%, rgba(20, 11, 41, 0) 60%);
}
.page.challenges .topic-head .image-container .placeholder {
    width: 100%;
    padding-top: calc(264 / 470 * 100%);
}
.page.challenges .topic-head .image-container .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page.challenges .instructions {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 840px;
    margin: 0 auto 3em;
    text-align: center;
}
@media (max-width: 1080px) {
    .page.challenges .instructions {
        width: auto;
        padding-left: 25px;
        padding-right: 25px;
        margin-bottom: 4em;
    }
}
@media (max-width: 600px) {
    .page.challenges .instructions {
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 2.5em;
    }
}
.page.challenges .instructions ul,
.page.challenges .instructions ol {
    font-size: 20px;
    color: #fffc;
}
@media (max-width: 1300px) {
    .page.challenges .instructions ul,
    .page.challenges .instructions ol {
        font-size: 20px;
    }
}
@media (max-width: 1080px) {
    .page.challenges .instructions ul,
    .page.challenges .instructions ol {
        font-size: 19px;
    }
}
@media (max-width: 800px) {
    .page.challenges .instructions ul,
    .page.challenges .instructions ol {
        font-size: 18px;
    }
}
@media (max-width: 600px) {
    .page.challenges .instructions ul,
    .page.challenges .instructions ol {
        font-size: 17px;
    }
}
@media (max-width: 400px) {
    .page.challenges .instructions ul,
    .page.challenges .instructions ol {
        font-size: 16px;
    }
}
.page.challenges .instructions ul a,
.page.challenges .instructions ol a {
    color: #57fdf3;
}
.page.challenges .instructions ul strong,
.page.challenges .instructions ol strong {
    color: #fff;
}
.page.challenges .instructions li {
    position: relative;
    padding-left: 1em;
    margin-bottom: 0.25em;
    text-align: left;
}
.page.challenges .instructions li:before {
    content: "";
    display: block;
    position: absolute;
    top: calc(0.8em - 2px);
    left: 0.2em;
    width: 4px;
    height: 4px;
    background: #fff;
    opacity: 0.2;
}
.page.challenges .instructions li ul {
    margin-top: 0.25em;
    padding-left: 1em;
}
.page.challenges .ending {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3em;
}
.page.challenges .ending .before {
    margin-bottom: 10px;
    font-size: 26px;
    font-weight: 700;
    
    font-weight: 800;
    color: #57fdf3;
}
@media (max-width: 1300px) {
    .page.challenges .ending .before {
        font-size: 24px;
    }
}
@media (max-width: 1080px) {
    .page.challenges .ending .before {
        font-size: 22px;
    }
}
@media (max-width: 800px) {
    .page.challenges .ending .before {
        font-size: 20px;
    }
}
@media (max-width: 600px) {
    .page.challenges .ending .before {
        font-size: 18px;
    }
}
@media (max-width: 400px) {
    .page.challenges .ending .before {
        font-size: 18px;
    }
}
.page.challenges .ending .time-left {
    margin-bottom: 10px;
    font-size: 26px;
    font-weight: 700;
    
    font-weight: 800;
}
@media (max-width: 1300px) {
    .page.challenges .ending .time-left {
        font-size: 24px;
    }
}
@media (max-width: 1080px) {
    .page.challenges .ending .time-left {
        font-size: 22px;
    }
}
@media (max-width: 800px) {
    .page.challenges .ending .time-left {
        font-size: 20px;
    }
}
@media (max-width: 600px) {
    .page.challenges .ending .time-left {
        font-size: 18px;
    }
}
@media (max-width: 400px) {
    .page.challenges .ending .time-left {
        font-size: 18px;
    }
}
.page.challenges .ending .date {
    color: #fffc;
}
.page.challenges .submissions {
    text-align: center;
}
.page.challenges .submissions .submission {
    display: inline-flex;
    margin: 0 12px 50px;
    position: relative;
    width: 408px;
    text-align: left;
    
    font-weight: 700;
}
@media (max-width: 600px) {
    .page.challenges .submissions .submission {
        width: calc(100% - 30px);
    }
}
.page.challenges .winners {
    width: 840px;
    margin: 0 auto 100px;
}
@media (max-width: 1080px) {
    .page.challenges .winners {
        width: auto;
        padding-left: 125px;
        padding-right: 125px;
    }
}
@media (max-width: 800px) {
    .page.challenges .winners {
        padding-left: 25px;
        padding-right: 25px;
        margin-bottom: 50px;
    }
}
@media (max-width: 600px) {
    .page.challenges .winners {
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 25px;
    }
}
.page.challenges .winners .others {
    display: flex;
    justify-content: space-between;
}
@media (max-width: 1080px) {
    .page.challenges .winners .others {
        flex-direction: column;
        justify-content: default;
        align-items: center;
    }
}
.page.challenges .all-challenges {
    padding-bottom: 100px;
    background: radial-gradient(78.91% 103.53% at 63.96% 0%, rgba(176, 93, 242, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
    text-align: center;
}
.page.challenges .all-challenges .page-title {
    font-size: 48px;
    padding-top: 1.25em;
    margin-bottom: 1.25em;
}
@media (max-width: 1300px) {
    .page.challenges .all-challenges .page-title {
        font-size: 44px;
    }
}
@media (max-width: 1080px) {
    .page.challenges .all-challenges .page-title {
        font-size: 40px;
    }
}
@media (max-width: 800px) {
    .page.challenges .all-challenges .page-title {
        font-size: 36px;
    }
}
@media (max-width: 600px) {
    .page.challenges .all-challenges .page-title {
        font-size: 32px;
    }
}
@media (max-width: 400px) {
    .page.challenges .all-challenges .page-title {
        font-size: 28px;
    }
}
.page.challenges .all-challenges .items {
    text-align: center;
}
.page.challenges .all-challenges .challenge {
    display: inline-block;
    margin: 0 12px 12px;
    position: relative;
    width: 408px;
    
    font-weight: 700;
}
@media (max-width: 600px) {
    .page.challenges .all-challenges .challenge {
        width: calc(100% - 30px);
    }
}
.page.challenges .all-challenges .challenge * {
    position: relative;
    display: block;
}
.page.challenges .all-challenges .challenge .background {
    position: absolute;
    inset: 0 0 60px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: radial-gradient(104.84% 129.17% at 93.34% 4.35%, rgba(112, 93, 242, 0.2) 0%, rgba(28, 17, 52, 0.2) 100%), #1c1134;
}
.page.challenges .all-challenges .challenge .topic {
    position: relative;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    text-align: center;
}
.page.challenges .all-challenges .challenge .topic .number {
    color: #57fdf3;
    margin-bottom: 0.2em;
}
.page.challenges .all-challenges .challenge .topic .name {
    margin-bottom: 0.2em;
    font-size: 26px;
    font-weight: 800;
}
@media (max-width: 1300px) {
    .page.challenges .all-challenges .challenge .topic .name {
        font-size: 24px;
    }
}
@media (max-width: 1080px) {
    .page.challenges .all-challenges .challenge .topic .name {
        font-size: 22px;
    }
}
@media (max-width: 800px) {
    .page.challenges .all-challenges .challenge .topic .name {
        font-size: 20px;
    }
}
@media (max-width: 600px) {
    .page.challenges .all-challenges .challenge .topic .name {
        font-size: 18px;
    }
}
@media (max-width: 400px) {
    .page.challenges .all-challenges .challenge .topic .name {
        font-size: 18px;
    }
}
.page.challenges .all-challenges .challenge .topic .status {
    font-size: 20px;
    font-weight: 800;
    color: #705df2;
}
@media (max-width: 1300px) {
    .page.challenges .all-challenges .challenge .topic .status {
        font-size: 20px;
    }
}
@media (max-width: 1080px) {
    .page.challenges .all-challenges .challenge .topic .status {
        font-size: 19px;
    }
}
@media (max-width: 800px) {
    .page.challenges .all-challenges .challenge .topic .status {
        font-size: 18px;
    }
}
@media (max-width: 600px) {
    .page.challenges .all-challenges .challenge .topic .status {
        font-size: 17px;
    }
}
@media (max-width: 400px) {
    .page.challenges .all-challenges .challenge .topic .status {
        font-size: 16px;
    }
}
.page.challenges .all-challenges .challenge .topic .arrow {
    position: absolute;
    top: 50%;
    left: 50px;
    display: inline-block;
    transform: rotate(90deg);
}
.page.challenges .all-challenges .challenge .topic .arrow svg * {
    fill: #fff;
    opacity: 1;
}
.page.challenges .all-challenges .challenge .preview {
    margin: 0 20px 25px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: #ff77f133 0 0 80px;
}
.page.challenges .all-challenges .challenge .preview:hover .gradient {
    transition-delay: 0.2s;
    opacity: 0;
}
.page.challenges .all-challenges .challenge .preview:hover .title {
    transition-delay: 0.1s;
    transition-timing-function: ease-in, ease-in;
    opacity: 0;
    transform: translate(10px);
}
.page.challenges .all-challenges .challenge .preview:hover .author {
    transition-timing-function: ease-in, ease-in;
    opacity: 0;
    transform: translate(10px);
}
.page.challenges .all-challenges .challenge .preview .media-container {
    position: relative;
}
.page.challenges .all-challenges .challenge .preview .video,
.page.challenges .all-challenges .challenge .preview .image {
    width: 100%;
    height: auto;
}
.page.challenges .all-challenges .challenge .preview .gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(-10deg, rgba(20, 11, 41, 0.8) 20%, rgba(20, 11, 41, 0.1) 80%);
    opacity: 1;
    transition: opacity 0.3s;
    will-change: opacity;
}
.page.challenges .all-challenges .challenge .preview .title-author {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-right: 20px;
    padding-bottom: 20px;
}
.page.challenges .all-challenges .challenge .preview .title {
    margin-bottom: 0.1em;
    font-size: 20px;
    color: #ff77f1;
    
    font-weight: 500;
    opacity: 1;
    transform: translate(0);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    will-change: opacity, transform;
}
@media (max-width: 1300px) {
    .page.challenges .all-challenges .challenge .preview .title {
        font-size: 20px;
    }
}
@media (max-width: 1080px) {
    .page.challenges .all-challenges .challenge .preview .title {
        font-size: 19px;
    }
}
@media (max-width: 800px) {
    .page.challenges .all-challenges .challenge .preview .title {
        font-size: 18px;
    }
}
@media (max-width: 600px) {
    .page.challenges .all-challenges .challenge .preview .title {
        font-size: 17px;
    }
}
@media (max-width: 400px) {
    .page.challenges .all-challenges .challenge .preview .title {
        font-size: 16px;
    }
}
.page.challenges .all-challenges .challenge .preview .author {
    opacity: 1;
    transform: translate(0);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    will-change: opacity, transform;
}
.page.challenges .all-challenges .challenge .preview .bottom-label {
    display: flex;
    justify-content: center;
    padding: 25px;
    background: radial-gradient(150% 150% at 100% 25%, rgba(112, 93, 242, 0.2) 0%, transparent 100%), #140b29;
}
.page.challenges .all-challenges .challenge .preview .bottom-label .arrow {
    position: relative;
    top: 1px;
    display: inline-block;
    margin-left: 10px;
    transform: rotate(-90deg);
}
.page.challenges .all-challenges .challenge .preview .bottom-label .arrow svg * {
    fill: #fff;
    opacity: 1;
}
.popin-how-it-works .steps {
    --sideWidth: 65px;
    position: relative;
    flex-shrink: 0;
    border-bottom-left-radius: 14px;
    max-height: calc(100vh - 140px);
    overflow: auto;
}
.popin-how-it-works .steps .step {
    position: relative;
    padding-left: var(--sideWidth);
    text-align: left;
}
.popin-how-it-works .steps .step:not(:last-child):after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(var(--sideWidth) + 1px);
    right: 0;
    height: 1px;
    background: #fff;
    opacity: 0.2;
}
.popin-how-it-works .steps .step .number {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--sideWidth);
    padding: 25px 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.267);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    
    font-size: 20px;
    font-weight: 700;
}
@media (max-width: 1300px) {
    .popin-how-it-works .steps .step .number {
        font-size: 20px;
    }
}
@media (max-width: 1080px) {
    .popin-how-it-works .steps .step .number {
        font-size: 19px;
    }
}
@media (max-width: 800px) {
    .popin-how-it-works .steps .step .number {
        font-size: 18px;
    }
}
@media (max-width: 600px) {
    .popin-how-it-works .steps .step .number {
        font-size: 17px;
    }
}
@media (max-width: 400px) {
    .popin-how-it-works .steps .step .number {
        font-size: 16px;
    }
}
.popin-how-it-works .steps .step .label {
    flex-shrink: 0;
    padding: 25px 25px 15px;
    text-align: left;
    
    font-size: 20px;
    font-weight: 700;
}
@media (max-width: 1300px) {
    .popin-how-it-works .steps .step .label {
        font-size: 20px;
    }
}
@media (max-width: 1080px) {
    .popin-how-it-works .steps .step .label {
        font-size: 19px;
    }
}
@media (max-width: 800px) {
    .popin-how-it-works .steps .step .label {
        font-size: 18px;
    }
}
@media (max-width: 600px) {
    .popin-how-it-works .steps .step .label {
        font-size: 17px;
    }
}
@media (max-width: 400px) {
    .popin-how-it-works .steps .step .label {
        font-size: 16px;
    }
}
.popin-how-it-works .steps .step .content {
    padding: 0 25px 25px;
}
.popin-how-it-works .steps .step .content a {
    color: #57fdf3;
}
.page.complete .form-title {
    margin-bottom: 1em;
    font-size: 20px;
    
    font-weight: 700;
}
@media (max-width: 1300px) {
    .page.complete .form-title {
        font-size: 20px;
    }
}
@media (max-width: 1080px) {
    .page.complete .form-title {
        font-size: 19px;
    }
}
@media (max-width: 800px) {
    .page.complete .form-title {
        font-size: 18px;
    }
}
@media (max-width: 600px) {
    .page.complete .form-title {
        font-size: 17px;
    }
}
@media (max-width: 400px) {
    .page.complete .form-title {
        font-size: 16px;
    }
}
.page.complete .vat-refund-fieldset.is-checked .payer-company-name,
.page.complete .vat-refund-fieldset.is-checked .payer-vat-number,
.page.complete .vat-refund-fieldset.is-checked .instructions {
    display: block;
}
.page.complete .vat-refund-fieldset .payer-company-name,
.page.complete .vat-refund-fieldset .payer-vat-number,
.page.complete .vat-refund-fieldset .instructions {
    display: none;
}
.page.complete .delivery-fieldset.is-delivery-auto .email,
.page.complete .delivery-fieldset.is-delivery-auto .message {
    display: block;
}
.page.complete .delivery-fieldset .email,
.page.complete .delivery-fieldset .message {
    display: none;
}
.page.complete .delivery-fieldset .message label {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.page.complete .delivery-fieldset .message label .faded {
    padding-left: 0;
    font-size: 0.8em;
}
.popin.popin-discord .code {
    display: inline-flex;
    padding: 0 20px;
    align-items: center;
    justify-content: center;
    
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    height: 47px;
    border-radius: 8px;
    border: 1px solid #5c43f5;
}
.popin.popin-discord .post-invitation {
    display: none;
}
.page.discord {
    padding-top: var(--page-top-padding);
    padding-left: 25px;
    padding-right: 25px;
    background-color: #1a1a1a;
    color: #fff;
    text-align: center;
}
@media (max-width: 800px) {
    .page.discord {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 600px) {
    .page.discord {
        padding-left: 15px;
        padding-right: 15px;
    }
}
.page.discord .number {
    
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}
.page.discord .page-content {
    padding-top: 75px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 1300px) {
    .page.discord .page-content {
        padding-top: 5vmin;
    }
}
.page.discord .page-content a:not(.button) {
    text-decoration: none;
}
.page.discord .columns {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
@media (max-width: 800px) {
    .page.discord .columns {
        flex-direction: column-reverse;
        align-items: center;
    }
}
.page.discord .columns .column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    margin-bottom: 5em;
}
.page.discord .columns .column:nth-child(1) {
    padding-right: 75px;
    border-right: 3px solid #202020;
}
.page.discord .columns .column:nth-child(2) {
    padding-left: 75px;
}
@media (max-width: 800px) {
    .page.discord .columns .column {
        width: auto;
    }
    .page.discord .columns .column:nth-child(1) {
        padding-right: 0;
        border-right: none;
    }
    .page.discord .columns .column:nth-child(2) {
        padding-left: 0;
    }
}
.page.discord .main-icon {
    margin-bottom: 1.5em;
}
@media (max-width: 800px) {
    .page.discord .main-icon {
        margin-bottom: 0.75em;
    }
}
.page.discord .main-icon.lock {
    display: inline-block;
    position: relative;
    width: 42px;
    height: 50px;
    margin-bottom: calc(1.5em + 4px);
    opacity: 0.65;
}
@media (max-width: 800px) {
    .page.discord .main-icon.lock {
        margin-bottom: 0.75em;
    }
}
.page.discord .main-icon.lock .loop {
    position: absolute;
    top: 0;
    left: 4px;
    width: 34px;
    height: 22px;
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
    border-top: 8px solid #fff;
    border-left: 8px solid #fff;
    border-right: 8px solid #fff;
    animation-name: lock-animation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.65, 0, 0.25, 1);
    animation-direction: alternate;
}
@-moz-keyframes lock-animation {
    0% {
        transform: translate(0);
    }
    33% {
        transform: translate(-24px);
    }
    to {
        transform: translate(-24px);
    }
}
@-webkit-keyframes lock-animation {
    0% {
        transform: translate(0);
    }
    33% {
        transform: translate(-24px);
    }
    to {
        transform: translate(-24px);
    }
}
@-o-keyframes lock-animation {
    0% {
        transform: translate(0);
    }
    33% {
        transform: translate(-24px);
    }
    to {
        transform: translate(-24px);
    }
}
@keyframes lock-animation {
    0% {
        transform: translate(0);
    }
    33% {
        transform: translate(-24px);
    }
    to {
        transform: translate(-24px);
    }
}
.page.discord .main-icon.lock .case {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 42px;
    height: 28px;
    background: #fff;
}
.page.discord .title {
    margin-bottom: 0.5em;
}
.page.discord .title .secondary {
    font-weight: 400;
    opacity: 0.65;
}
.page.discord .count {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5em;
    padding: 7px 11px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}
.page.discord .count .icon {
    margin-right: 8px;
}
.page.discord .count .icon svg {
    display: block;
}
.page.discord .count .number {
    font-size: 0.8rem;
}
.page.discord .description {
    margin-bottom: 1.5em;
}
@media (max-width: 800px) {
    .page.discord .description br {
        display: none;
    }
}
.page.discord .bullet-points {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5em;
}
.page.discord .bullet-points ul {
    padding: 20px 30px;
    background: #202020;
    border-radius: 10px;
    text-align: left;
}
.page.discord .bullet-points .icon {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-right: 0.8em;
}
.page.discord .bullet-points .icon svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page.discord .bullet-points .icon svg * {
    fill: #32ffce;
}
.page.discord .bullet-points .icon.check {
    width: 10px;
    height: 9px;
}
.page.discord .bullet-points .icon.cross {
    width: 10px;
    height: 11px;
}
.page.discord .leaderboard {
    display: flex;
    justify-content: center;
}
.page.discord .leaderboard .title {
    margin-bottom: 1em;
}
.page.discord .leaderboard .inner {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    width: 600px;
}
.page.discord .leaderboard .description {
    max-width: 400px;
}
.page.discord .leaderboard .users {
    position: relative;
    background: #202020;
    width: 100%;
    border-radius: 10px;
    font-size: 0.8rem;
}
.page.discord .leaderboard .users .row {
    display: flex;
    justify-content: space-around;
    margin: 10px;
    padding: 8px 0;
}
.page.discord .leaderboard .users .column {
    display: flex;
    align-items: center;
}
.page.discord .leaderboard .users .head {
    opacity: 0.5;
}
.page.discord .leaderboard .users .user {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.027);
}
.page.discord .leaderboard .users .user:nth-child(2) {
    color: #ffcd52;
}
.page.discord .leaderboard .users .rank {
    width: 10%;
    justify-content: center;
}
.page.discord .leaderboard .users .rank.has-medal {
    font-size: 1.5rem;
}
.page.discord .leaderboard .users .name {
    width: 40%;
    justify-content: flex-start;
    text-align: left;
}
.page.discord .leaderboard .users .name .avatar {
    display: block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    font-size: 0.8em;
    border-radius: 6px;
}
.page.discord .leaderboard .users .messages {
    width: 20%;
    justify-content: center;
}
.page.discord .leaderboard .users .xp,
.page.discord .leaderboard .users .level {
    width: 15%;
    justify-content: center;
}
.page.discord .leaderboard .users .bottom {
    padding: 8px 0 16px;
}
.page.discord .leaderboard .users .bottom a {
    opacity: 0.5;
}
.page.discord .leaderboard .users .bottom a:hover {
    opacity: 0.8;
}
.page.error .code {
    margin-bottom: 1rem;
    font-size: 7rem;
    letter-spacing: -0.5rem;
}
.page.error .code .digit {
    position: relative;
    
    font-weight: 700;
}
.page.error .code .digit:first-child,
.page.error .code .digit:last-child {
    color: #ff5b86;
}
.page.experience .experience {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page.highlights .button.is-more {
    height: 66px;
    border-radius: 33px;
    box-shadow: 0 14px 55px #3c00bd26;
    -webkit-mask-image: none;
}
.page.highlights .button.is-more .hover {
    opacity: 0.035;
}
.page.highlights .button.is-more .label {
    margin-right: 35px;
    margin-left: 35px;
    font-size: 20px;
}
@media (max-width: 1300px) {
    .page.highlights .button.is-more .label {
        font-size: 20px;
    }
}
@media (max-width: 1080px) {
    .page.highlights .button.is-more .label {
        font-size: 19px;
    }
}
@media (max-width: 800px) {
    .page.highlights .button.is-more .label {
        font-size: 18px;
    }
}
@media (max-width: 600px) {
    .page.highlights .button.is-more .label {
        font-size: 17px;
    }
}
@media (max-width: 400px) {
    .page.highlights .button.is-more .label {
        font-size: 16px;
    }
}
.page.home {
    font-size: 16px;
}
@media (max-width: 800px) {
    .page.home {
        font-size: 15px;
    }
}
@media (max-width: 600px) {
    .page.home {
        font-size: 14px;
    }
}
@media (max-width: 400px) {
    .page.home {
        font-size: 14px;
    }
}
.page.home .section-title {
    
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: 45px;
}
@media (max-width: 1300px) {
    .page.home .section-title {
        font-size: 44px;
    }
}
@media (max-width: 1080px) {
    .page.home .section-title {
        font-size: 40px;
    }
}
@media (max-width: 800px) {
    .page.home .section-title {
        font-size: 36px;
    }
}
@media (max-width: 600px) {
    .page.home .section-title {
        font-size: 32px;
    }
}
@media (max-width: 400px) {
    .page.home .section-title {
        font-size: 28px;
    }
}
.page.home .section-title strong {
    color: #705df2;
    font-weight: 800;
}
.page.home .section-sub-title {
    
    font-weight: 500;
    color: #a5a5a5;
    font-size: 26px;
}
@media (max-width: 1300px) {
    .page.home .section-sub-title {
        font-size: 24px;
    }
}
@media (max-width: 1080px) {
    .page.home .section-sub-title {
        font-size: 22px;
    }
}
@media (max-width: 800px) {
    .page.home .section-sub-title {
        font-size: 20px;
    }
}
@media (max-width: 600px) {
    .page.home .section-sub-title {
        font-size: 18px;
    }
}
@media (max-width: 400px) {
    .page.home .section-sub-title {
        font-size: 18px;
    }
}
.page.home p {
    /* color: #ffffffb3; */
}
.page.home p a,
.page.home p strong {
    color: #fff;
}
.page.home .radial-glow {
    display: block;
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.page.home .chapter {
    position: relative;
}
.page.home .chapter .section-title {
    margin-bottom: 0.5em;
}
.page.home .chapter .information {
    align-items: center;
    /* margin-bottom: 2em; */
    font-weight: 500;
    line-height: 30px;
}
.page.home .chapter .information .format-icon {
    margin-left: 15px;
}
.page.home .chapter .description {
    margin-bottom: 2em;
}
.page.home .chapter .lessons {
    display: table;
    width: 100%;
    font-weight: 500;
}
.page.home .chapter .lessons .lesson {
    display: table-row;
    background-position: bottom left;
    background-image: url(../img/dotted-border.png);
    background-size: 7px 1px;
    background-repeat: repeat-x;
}
.page.home .chapter .lessons .lesson:last-child {
    background: none;
}
.page.home .chapter .lessons .lesson:hover .lesson-title-badges {
    text-decoration: none;
}
.page.home .chapter .lessons .lesson:hover .lesson-title-badges .badges .is-sneak-peek {
    opacity: 1;
}
.page.home .chapter .lessons .column {
    display: table-cell;
    vertical-align: middle;
}
.page.home .chapter .lessons .lesson-number {
    text-align: left;
    color: var(--chapter-text-color);
    padding-right: 15px;
    width: 1%;
    white-space: nowrap;
    vertical-align: baseline;
}
@media (max-width: 600px) {
    .page.home .chapter .lessons .lesson-number {
        padding-right: 10px;
    }
}
@media (max-width: 400px) {
    .page.home .chapter .lessons .lesson-number {
        padding-right: 8px;
    }
}
.page.home .chapter .lessons .lesson-title-badges {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.page.home .chapter .lessons .lesson-title-badges .title {
    padding-top: 14px;
    padding-right: 10px;
    padding-bottom: 14px;
}
@media (max-width: 400px) {
    .page.home .chapter .lessons .lesson-title-badges .title {
        padding-right: 8px;
    }
}
.page.home .chapter .lessons .lesson-title-badges .badges {
    white-space: nowrap;
}
.page.home .chapter .lessons .lesson-title-badges .badges .badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 14px;
}
.page.home .chapter .lessons .lesson-title-badges .badges .is-free {
    background: #ff5b86;
}
.page.home .chapter .lessons .lesson-title-badges .badges .is-sneak-peek {
    opacity: 0;
    background: #ffa257;
}
@media (max-width: 400px) {
    .page.home .chapter .lessons .lesson-title-badges .badges .is-sneak-peek {
        display: none;
    }
}
.page.home .chapter .lessons .lesson-title-badges .badges .is-new {
    background: #705df2;
}
.page.home .chapter .lessons .lesson-duration {
    text-align: left;
    padding-right: 15px;
    width: 1%;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .page.home .chapter .lessons .lesson-duration {
        padding-left: 10px;
    }
}
@media (max-width: 400px) {
    .page.home .chapter .lessons .lesson-duration {
        padding-left: 8px;
    }
}
.page.home section.hero {
    position: relative;
    min-height: 100vh;
}
@media (max-width: 800px) {
    .page.home section.hero {
        min-height: 0;
    }
}
.page.home section.hero.is-interacting .experience {
    transform: translate(0);
    transition-duration: 1s;
    transition-delay: 0.3s;
    transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
}
@media (max-width: 800px) {
    .page.home section.hero.is-interacting .experience {
        transition: none;
    }
}
.page.home section.hero.is-interacting .main-logo {
    opacity: 0;
    transform: translate(-30px);
    transition-property: opacity, transform;
    transition-duration: 0.3s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.75, 0, 1, 1);
}
@media (max-width: 800px) {
    .page.home section.hero.is-interacting .main-logo {
        transition: none;
    }
}
.page.home section.hero.is-interacting .navigation {
    opacity: 1;
    transform: translateY(0);
    transition-property: opacity, transform;
    transition-duration: 0.5s;
    transition-delay: 1s;
}
@media (max-width: 800px) {
    .page.home section.hero.is-interacting .navigation {
        transition: none;
    }
}
.page.home section.hero.is-interacting .click {
    opacity: 0;
    transform: translateY(105px);
    transition-property: opacity, transform;
    transition-duration: 0.5s;
    transition-delay: 0s;
}
.page.home section.hero.is-interacting .mask {
    transition-duration: 1s;
}
.page.home section.hero.is-interacting .mask.is-left {
    transform: translate(-100%);
    transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
    transition-delay: 0.3s;
}
.page.home section.hero.is-interacting .close {
    pointer-events: auto;
}
.page.home section.hero.is-interacting .close .background {
    transform: scale(1);
    transition-duration: 0.5s;
    transition-delay: 0.95s;
    transition-timing-function: cubic-bezier(0.59, 1.97, 0.55, 0.83);
}
.page.home section.hero.is-interacting .close .bars {
    transform: scale(1);
    transition-duration: 0.5s;
    transition-delay: 1s;
    transition-timing-function: cubic-bezier(0.59, 1.97, 0.55, 0.83);
}
.page.home section.hero.is-interacting .chapters {
    pointer-events: auto;
}
.page.home section.hero.is-interacting .chapters .overlay {
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 1.3s;
}
.page.home section.hero.is-interacting .content {
    pointer-events: none;
}
.page.home section.hero.is-interacting .content .element {
    opacity: 0;
    transform: translate(-30px);
    transition-property: opacity, transform;
    transition-duration: 0.3s, 0.3s;
    transition-timing-function: cubic-bezier(0.75, 0, 1, 1);
}
@media (max-width: 800px) {
    .page.home section.hero.is-interacting .content .element {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
.page.home section.hero.is-interacting .content .element.delay-0 {
    transition-delay: 0s;
}
.page.home section.hero.is-interacting .content .element.delay-1 {
    transition-delay: 0.05s;
}
.page.home section.hero.is-interacting .content .element.delay-2 {
    transition-delay: 0.1s;
}
.page.home section.hero.is-interacting .content .element.delay-3 {
    transition-delay: 0.15s;
}
.page.home section.hero.is-interacting .content .element.delay-4 {
    transition-delay: 0.2s;
}
.page.home section.hero.is-interacting .content .element.delay-5 {
    transition-delay: 0.25s;
}
.page.home section.hero.is-not-interacting .experience {
    transform: translate(730px);
    transition-duration: 1s;
    transition-delay: 0.3s;
    transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
}
@media (max-width: 2150px) {
    .page.home section.hero.is-not-interacting .experience {
        transform: translate(630px);
    }
}
@media (max-width: 1600px) {
    .page.home section.hero.is-not-interacting .experience {
        transform: translate(535px);
    }
}
@media (max-width: 1300px) {
    .page.home section.hero.is-not-interacting .experience {
        transform: translate(450px);
    }
}
@media (max-width: 1080px) {
    .page.home section.hero.is-not-interacting .experience {
        transform: translate(390px);
    }
}
@media (max-width: 800px) {
    .page.home section.hero.is-not-interacting .experience {
        transform: none;
        transition: none;
    }
}
.page.home section.hero.is-not-interacting .main-logo {
    opacity: 1;
    transform: translate(0);
    transition-property: opacity, transform;
    transition-duration: 0.3s;
    transition-delay: 1s;
    transition-timing-function: cubic-bezier(0, 0, 0.25, 1), cubic-bezier(0, 0, 0.25, 1);
}
@media (max-width: 800px) {
    .page.home section.hero.is-not-interacting .main-logo {
        transition: none;
    }
}
.page.home section.hero.is-not-interacting .navigation {
    opacity: 0;
    transform: translateY(105px);
    transition-property: opacity, transform;
    transition-duration: 0.5s;
    transition-delay: 0s;
}
.page.home section.hero.is-not-interacting .click {
    opacity: 1;
    transform: translateY(0);
    transition-property: opacity, transform;
    transition-duration: 0.5s;
    transition-delay: 1s;
}
.page.home section.hero.is-not-interacting .mask {
    transition-duration: 1s;
}
.page.home section.hero.is-not-interacting .mask.is-left {
    transform: translate(0);
    transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
    transition-delay: 0.3s;
}
.page.home section.hero.is-not-interacting .close {
    pointer-events: none;
}
.page.home section.hero.is-not-interacting .close .background {
    transform: scale(0.0001);
    transition-duration: 0.5s;
    transition-delay: 0.1s;
}
.page.home section.hero.is-not-interacting .close .bars {
    transform: scale(0.0001);
    transition-duration: 0.5s;
    transition-delay: 0s;
}
.page.home section.hero.is-not-interacting .chapters {
    pointer-events: none;
}
.page.home section.hero.is-not-interacting .chapters .overlay {
    opacity: 0;
    transition-duration: 1s;
}
.page.home section.hero.is-not-interacting .content {
    pointer-events: auto;
}
.page.home section.hero.is-not-interacting .content .element {
    opacity: 1;
    transform: translate(0);
    transition-property: opacity, transform;
    transition-duration: 0.3s, 0.3s;
    transition-timing-function: cubic-bezier(0, 0, 0.25, 1), cubic-bezier(0, 0, 0.25, 1);
}
.page.home section.hero.is-not-interacting .content .element.delay-0 {
    transition-delay: 1s;
}
.page.home section.hero.is-not-interacting .content .element.delay-1 {
    transition-delay: 1.05s;
}
.page.home section.hero.is-not-interacting .content .element.delay-2 {
    transition-delay: 1.1s;
}
.page.home section.hero.is-not-interacting .content .element.delay-3 {
    transition-delay: 1.15s;
}
.page.home section.hero.is-not-interacting .content .element.delay-4 {
    transition-delay: 1.2s;
}
.page.home section.hero.is-not-interacting .content .element.delay-5 {
    transition-delay: 1.25s;
}
.page.home section.hero .experience {
    position: absolute;
    top: var(--page-top-padding);
    left: 0;
    width: calc(100% - 500px);
    bottom: 0;
    outline: none;
    overflow: hidden;
    will-change: transform;
    transition-property: transform;
}
@media (max-width: 1600px) {
    .page.home section.hero .experience {
        width: calc(100% - 460px);
    }
}
@media (max-width: 1300px) {
    .page.home section.hero .experience {
        width: calc(100% - 420px);
    }
}
@media (max-width: 1080px) {
    .page.home section.hero .experience {
        width: calc(100% - 360px);
    }
}
@media (max-width: 800px) {
    .page.home section.hero .experience {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        height: 75vw;
        max-height: 100vh;
    }
}
.page.home section.hero .experience .canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: grab;
}
.page.home section.hero .navigation {
    position: absolute;
    bottom: 45px;
    left: calc(50% - 131px);
    width: 262px;
    height: 58px;
    background: #fff;
    border-radius: 29px;
    box-shadow: 0 30px 70px #3c00bd22;
    will-change: transform;
    cursor: default;
    z-index: 3;
    user-select: none;
}
@media (max-width: 1600px) {
    .page.home section.hero .navigation {
        left: calc(50% - 125px);
        bottom: 40px;
        width: 250px;
        height: 58px;
    }
}
@media (max-width: 1300px) {
    .page.home section.hero .navigation {
        left: calc(50% - 120px);
        bottom: 35px;
        width: 240px;
        height: 56px;
    }
}
@media (max-width: 1080px) {
    .page.home section.hero .navigation {
        left: calc(50% - 115px);
        bottom: 30px;
        width: 230px;
        height: 52px;
    }
}
@media (max-width: 800px) {
    .page.home section.hero .navigation {
        left: calc(50% - 110px);
        bottom: 25px;
        width: 220px;
        height: 48px;
    }
}
@media (max-width: 600px) {
    .page.home section.hero .navigation {
        left: calc(50% - 105px);
        bottom: 20px;
        width: 210px;
        height: 44px;
    }
}
@media (max-width: 400px) {
    .page.home section.hero .navigation {
        left: calc(50% - 100px);
        bottom: 20px;
        width: 200px;
        height: 40px;
    }
}
.page.home section.hero .navigation .sibling {
    display: flex;
    position: absolute;
    top: 0;
    width: 60px;
    height: 100%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: none;
}
@media (max-width: 1600px) {
    .page.home section.hero .navigation .sibling {
        width: 58px;
    }
}
@media (max-width: 1300px) {
    .page.home section.hero .navigation .sibling {
        width: 56px;
    }
}
@media (max-width: 1080px) {
    .page.home section.hero .navigation .sibling {
        width: 54px;
    }
}
@media (max-width: 800px) {
    .page.home section.hero .navigation .sibling {
        width: 52px;
    }
}
@media (max-width: 600px) {
    .page.home section.hero .navigation .sibling {
        width: 50px;
    }
}
@media (max-width: 400px) {
    .page.home section.hero .navigation .sibling {
        width: 48px;
    }
}
.page.home section.hero .navigation .sibling.is-active {
    pointer-events: auto;
}
.page.home section.hero .navigation .sibling.is-active .icon {
    opacity: 1;
}
.page.home section.hero .navigation .sibling.is-previous {
    left: 0;
    padding-left: 3px;
}
.page.home section.hero .navigation .sibling.is-previous:after {
    right: 0;
}
.page.home section.hero .navigation .sibling.is-previous .icon {
    top: 1px;
}
.page.home section.hero .navigation .sibling.is-next {
    right: 0;
    padding-right: 3px;
}
.page.home section.hero .navigation .sibling.is-next:after {
    left: 0;
}
.page.home section.hero .navigation .sibling.is-next .icon {
    transform: rotate(180deg);
}
.page.home section.hero .navigation .sibling:after {
    content: "";
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: #705df2;
    opacity: 0.1;
}
.page.home section.hero .navigation .sibling .icon {
    display: block;
    position: relative;
    width: 12px;
    height: 7px;
    opacity: 0.2;
    transition: opacity 0.2s;
    will-change: opacity;
}
.page.home section.hero .navigation .sibling .icon svg {
    display: block;
    width: 100%;
    height: 100%;
}
.page.home section.hero .navigation .sibling .icon svg * {
    fill: #705df2;
    opacity: 1;
}
.page.home section.hero .navigation .label {
    display: flex;
    position: absolute;
    top: 0;
    left: 60px;
    right: 60px;
    height: 100%;
    line-height: 58px;
    justify-content: center;
    font-size: 18px;
    opacity: 0.9;
    color: #202020;
}
@media (max-width: 1600px) {
    .page.home section.hero .navigation .label {
        line-height: 58px;
    }
}
@media (max-width: 1300px) {
    .page.home section.hero .navigation .label {
        line-height: 56px;
        font-size: 16px;
    }
}
@media (max-width: 1080px) {
    .page.home section.hero .navigation .label {
        line-height: 52px;
        font-size: 15px;
    }
}
@media (max-width: 800px) {
    .page.home section.hero .navigation .label {
        line-height: 48px;
        font-size: 15px;
    }
}
@media (max-width: 600px) {
    .page.home section.hero .navigation .label {
        line-height: 44px;
        font-size: 14px;
    }
}
@media (max-width: 400px) {
    .page.home section.hero .navigation .label {
        line-height: 40px;
        font-size: 13px;
    }
}
.page.home section.hero .navigation .label .value {
    position: relative;
    display: inline-block;
}
.page.home section.hero .navigation .label .value .placeholder {
    visibility: hidden;
}
.page.home section.hero .navigation .label .value .digit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition-property: transform, opacity;
    transition-duration: 0.5s, 0.5s;
    will-change: transform, opacity;
}
.page.home section.hero .navigation .label .value .digit.is-before {
    transform: translateY(10px);
    opacity: 0;
    transition-delay: 0, 0;
}
.page.home section.hero .navigation .label .value .digit.is-current {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.2s, 0.2s;
}
.page.home section.hero .navigation .label .value .digit.is-after {
    transform: translateY(-10px);
    opacity: 0;
    transition-delay: 0, 0;
}
.page.home section.hero .click {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 45px;
    left: calc(50% - 77px);
    width: 154px;
    height: 52px;
    background: #fff;
    border-radius: 29px;
    box-shadow: 0 30px 70px #3c00bd22;
    will-change: transform;
    cursor: default;
    z-index: 3;
    pointer-events: none;
    user-select: none;
}
@media (max-width: 1600px) {
    .page.home section.hero .click {
        left: calc(50% - 77px);
        bottom: 40px;
        width: 154px;
        height: 52px;
    }
}
@media (max-width: 1300px) {
    .page.home section.hero .click {
        left: calc(50% - 77px);
        bottom: 35px;
        width: 154px;
        height: 52px;
    }
}
@media (max-width: 1080px) {
    .page.home section.hero .click {
        left: calc(50% - 77px);
        bottom: 30px;
        width: 154px;
        height: 52px;
    }
}
@media (max-width: 800px) {
    .page.home section.hero .click {
        left: calc(50% - 72px);
        bottom: 25px;
        width: 144px;
        height: 48px;
    }
}
@media (max-width: 600px) {
    .page.home section.hero .click {
        left: calc(50% - 67px);
        bottom: 20px;
        width: 134px;
        height: 44px;
    }
}
@media (max-width: 400px) {
    .page.home section.hero .click {
        left: calc(50% - 62px);
        bottom: 20px;
        width: 124px;
        height: 40px;
    }
}
.page.home section.hero .click .arrow {
    position: relative;
    width: 12px;
    height: 8px;
}
.page.home section.hero .click .arrow.is-arrow-left {
    transform: rotate(90deg);
}
.page.home section.hero .click .arrow.is-arrow-right {
    transform: rotate(-90deg);
}
.page.home section.hero .click .arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}
.page.home section.hero .click .arrow svg * {
    fill: #202020;
    opacity: 1;
}
.page.home section.hero .click .hand {
    width: 30px;
    height: 30px;
    margin: 0 17px;
    overflow: hidden;
    animation: hero-hand 2s infinite;
}
.page.home section.hero .click .hand .hand-illustration {
    width: 30px;
    height: 30px;
    background-image: url(/assets/images/hands.png);
    background-size: 30px 60px;
    background-position: top left;
    animation: hero-hand-illustration 2s infinite;
}
@-moz-keyframes hero-hand-illustration {
    4.9% {
        background-position: top left;
    }
    5% {
        background-position: bottom left;
    }
    45% {
        background-position: bottom left;
    }
    45.1% {
        background-position: top left;
    }
}
@-webkit-keyframes hero-hand-illustration {
    4.9% {
        background-position: top left;
    }
    5% {
        background-position: bottom left;
    }
    45% {
        background-position: bottom left;
    }
    45.1% {
        background-position: top left;
    }
}
@-o-keyframes hero-hand-illustration {
    4.9% {
        background-position: top left;
    }
    5% {
        background-position: bottom left;
    }
    45% {
        background-position: bottom left;
    }
    45.1% {
        background-position: top left;
    }
}
@keyframes hero-hand-illustration {
    4.9% {
        background-position: top left;
    }
    5% {
        background-position: bottom left;
    }
    45% {
        background-position: bottom left;
    }
    45.1% {
        background-position: top left;
    }
}
@-moz-keyframes hero-hand {
    5% {
        transform: translate(0);
    }
    10% {
        transform: translate(5px);
    }
    20% {
        transform: translate(-5px);
    }
    30% {
        transform: translate(5px);
    }
    40% {
        transform: translate(-5px);
    }
    45% {
        transform: translate(0);
    }
}
@-webkit-keyframes hero-hand {
    5% {
        transform: translate(0);
    }
    10% {
        transform: translate(5px);
    }
    20% {
        transform: translate(-5px);
    }
    30% {
        transform: translate(5px);
    }
    40% {
        transform: translate(-5px);
    }
    45% {
        transform: translate(0);
    }
}
@-o-keyframes hero-hand {
    5% {
        transform: translate(0);
    }
    10% {
        transform: translate(5px);
    }
    20% {
        transform: translate(-5px);
    }
    30% {
        transform: translate(5px);
    }
    40% {
        transform: translate(-5px);
    }
    45% {
        transform: translate(0);
    }
}
@keyframes hero-hand {
    5% {
        transform: translate(0);
    }
    10% {
        transform: translate(5px);
    }
    20% {
        transform: translate(-5px);
    }
    30% {
        transform: translate(5px);
    }
    40% {
        transform: translate(-5px);
    }
    45% {
        transform: translate(0);
    }
}
.page.home section.hero .mask {
    position: absolute;
    height: 100%;
    background: #140b29;
    transition-property: transform;
    will-change: transform;
    z-index: 1;
}
@media (max-width: 800px) {
    .page.home section.hero .mask {
        display: none;
    }
}
.page.home section.hero .mask.is-left {
    top: 0;
    left: 0;
    width: 960px;
}
@media (max-width: 2150px) {
    .page.home section.hero .mask.is-left {
        width: 800px;
    }
}
@media (max-width: 1600px) {
    .page.home section.hero .mask.is-left {
        width: 650px;
    }
}
@media (max-width: 1300px) {
    .page.home section.hero .mask.is-left {
        width: 540px;
    }
}
@media (max-width: 1080px) {
    .page.home section.hero .mask.is-left {
        width: 420px;
    }
}
.page.home section.hero .close {
    display: block;
    position: absolute;
    top: 50%;
    left: 115px;
    z-index: 3;
    transition: transform 0.45s cubic-bezier(0.75, 0, 0.25, 1);
    pointer-events: none;
}
@media (max-width: 1600px) {
    .page.home section.hero .close {
        left: 100px;
    }
}
@media (max-width: 1300px) {
    .page.home section.hero .close {
        left: 85px;
    }
}
@media (max-width: 1080px) {
    .page.home section.hero .close {
        left: 70px;
    }
}
@media (max-width: 800px) {
    .page.home section.hero .close {
        left: 60px;
    }
}
@media (max-width: 600px) {
    .page.home section.hero .close {
        top: 40px;
        left: auto;
        right: 45px;
    }
}
@media (max-width: 400px) {
    .page.home section.hero .close {
        top: 35px;
        left: auto;
        right: 35px;
    }
}
.page.home section.hero .close:hover {
    transform: rotate(180deg);
}
.page.home section.hero .close .background {
    display: block;
    position: absolute;
    top: -30px;
    left: -30px;
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 30px 70px #3c00bd22;
    transition-property: transform;
    will-change: transform;
}
@media (max-width: 600px) {
    .page.home section.hero .close .background {
        top: -25px;
        left: -25px;
        width: 49px;
        height: 49px;
    }
}
.page.home section.hero .close .bars {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition-property: transform;
    will-change: transform;
}
.page.home section.hero .close .bars .bar {
    display: block;
    position: absolute;
    top: -1px;
    left: -9px;
    width: 19px;
    height: 3px;
    background: #705df2;
    border-radius: 2px;
}
.page.home section.hero .close .bars .bar.bar-1 {
    transform: rotate(-45deg);
}
.page.home section.hero .close .bars .bar.bar-2 {
    transform: rotate(45deg);
}
.page.home section.hero .chapters {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 500px;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
@media (max-width: 1600px) {
    .page.home section.hero .chapters {
        width: 460px;
    }
}
@media (max-width: 1300px) {
    .page.home section.hero .chapters {
        width: 420px;
    }
}
@media (max-width: 1080px) {
    .page.home section.hero .chapters {
        width: 360px;
    }
}
@media (max-width: 800px) {
    .page.home section.hero .chapters {
        display: none;
    }
}
.page.home section.hero .chapters .container {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 20px);
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.page.home section.hero .chapters .chapter {
    display: none;
    position: absolute;
    display: flex;
    top: 180px;
    left: 0;
    width: 100%;
    min-height: calc(100% - 180px);
    padding-right: 80px;
    padding-bottom: 100px;
    padding-left: 80px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    pointer-events: none;
}
.page.home section.hero .chapters .chapter:nth-child(1) {
    --chapter-text-color: #ff7850;
}
.page.home section.hero .chapters .chapter:nth-child(2) {
    --chapter-text-color: #62c7ff;
}
.page.home section.hero .chapters .chapter:nth-child(3) {
    --chapter-text-color: #fbb606;
}
.page.home section.hero .chapters .chapter:nth-child(4) {
    --chapter-text-color: #8784ff;
}
.page.home section.hero .chapters .chapter:nth-child(5) {
    --chapter-text-color: #85a4b2;
}
.page.home section.hero .chapters .chapter:nth-child(6) {
    --chapter-text-color: #b9e76e;
}
.page.home section.hero .chapters .chapter:nth-child(7) {
    --chapter-text-color: #6ebbf3;
}
@media (max-width: 1600px) {
    .page.home section.hero .chapters .chapter {
        top: 140px;
        min-height: calc(100% - 160px);
        padding-right: 70px;
        padding-bottom: 85px;
        padding-left: 70px;
    }
}
@media (max-width: 1300px) {
    .page.home section.hero .chapters .chapter {
        top: 110px;
        min-height: calc(100% - 140px);
        padding-right: 60px;
        padding-bottom: 70px;
        padding-left: 60px;
    }
}
@media (max-width: 1080px) {
    .page.home section.hero .chapters .chapter {
        top: 80px;
        min-height: calc(100% - 140px);
        padding-right: 50px;
        padding-bottom: 55px;
        padding-left: 50px;
    }
}
.page.home section.hero .chapters .chapter.is-active {
    pointer-events: auto;
}
.page.home section.hero .chapters .chapter.is-active .element {
    opacity: 1;
    transform: translate(0);
    transition-timing-function: ease-out;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-0 {
    transition-delay: 0s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-1 {
    transition-delay: 0.05s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-2 {
    transition-delay: 0.1s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-3 {
    transition-delay: 0.15s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-4 {
    transition-delay: 0.2s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-5 {
    transition-delay: 0.25s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-6 {
    transition-delay: 0.3s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-7 {
    transition-delay: 0.35s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-8 {
    transition-delay: 0.4s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-9 {
    transition-delay: 0.45s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-10 {
    transition-delay: 0.5s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-11 {
    transition-delay: 0.55s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-12 {
    transition-delay: 0.6s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-13 {
    transition-delay: 0.65s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-14 {
    transition-delay: 0.7s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-15 {
    transition-delay: 0.75s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-16 {
    transition-delay: 0.8s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-17 {
    transition-delay: 0.85s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-18 {
    transition-delay: 0.9s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-19 {
    transition-delay: 0.95s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-20 {
    transition-delay: 1s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-21 {
    transition-delay: 1.05s;
}
.page.home section.hero .chapters .chapter.is-active .element.delay-22 {
    transition-delay: 1.1s;
}
.page.home section.hero .chapters .chapter .grid,
.page.home section.hero .chapters .chapter .illustration {
    display: none;
}
.page.home section.hero .chapters .chapter .element {
    opacity: 0;
    transform: translate(30px);
    transition-duration: 0.3s;
}
.page.home section.hero .chapters .overlay {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
    opacity: 0;
    will-change: opacity;
}
.page.home section.hero .chapters .overlay.is-top {
    top: 0;
    height: 180px;
    background: linear-gradient(#140b29 60%, rgba(20, 11, 41, 0) 100%);
}
.page.home section.hero .chapters .overlay.is-bottom {
    bottom: 0;
    height: 100px;
    background: linear-gradient(rgba(20, 11, 41, 0), #140b29);
}
.page.home section.hero .content {
    display: flex;
    position: relative;
    width: 960px;
    min-height: 100vh;
    padding-top: var(--page-top-padding);
    padding-right: 120px;
    padding-bottom: 60px;
    padding-left: 200px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    transition-property: opacity, transform;
    z-index: 1;
}
@media (max-width: 2150px) {
    .page.home section.hero .content {
        width: 800px;
        padding-right: 80px;
        padding-left: 180px;
    }
}
@media (max-width: 1600px) {
    .page.home section.hero .content {
        width: 650px;
        padding-right: 60px;
        padding-left: 110px;
    }
}
@media (max-width: 1300px) {
    .page.home section.hero .content {
        width: 540px;
        padding-right: 50px;
        padding-left: 80px;
    }
}
@media (max-width: 1080px) {
    .page.home section.hero .content {
        width: 420px;
        padding-right: 20px;
        padding-left: var(--page-horizontal-padding);
    }
}
@media (max-width: 800px) {
    .page.home section.hero .content {
        min-height: 0;
        width: auto;
        padding-top: calc(var(--page-top-padding) + 30px);
    }
}
@media (max-width: 600px) {
    .page.home section.hero .content {
        min-height: 0;
        width: auto;
    }
}
.page.home section.hero .content .main-title {
    margin-bottom: 2.5vh;
    font-size: 64px;
    font-weight: 800;
    line-height: 1em;
    letter-spacing: -0.02em;
}
@media (max-width: 1600px) {
    .page.home section.hero .content .main-title {
        font-size: 58px;
    }
}
@media (max-width: 1300px) {
    .page.home section.hero .content .main-title {
        font-size: 52px;
    }
}
@media (max-width: 1080px) {
    .page.home section.hero .content .main-title {
        font-size: 46px;
    }
}
@media (max-width: 800px) {
    .page.home section.hero .content .main-title {
        font-size: 40px;
    }
}
@media (max-width: 600px) {
    .page.home section.hero .content .main-title {
        font-size: 34px;
    }
}
@media (max-width: 400px) {
    .page.home section.hero .content .main-title {
        font-size: 28px;
    }
}
.page.home section.hero .content .author {
    display: block;
    margin-bottom: 3vh;
}
@media (orientation: portrait) {
    .page.home section.hero .content .author {
        margin-bottom: 3vw;
    }
}
.page.home section.hero .content .author .picture {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    margin-right: 12px;
}
.page.home section.hero .content .author .label {
    display: inline-block;
    vertical-align: middle;
    height: 50px;
    line-height: 50px;
    font-weight: 700;
}
.page.home section.hero .content .description {
    margin-bottom: 3vh;
    max-width: 700px;
}
.page.home section.hero .content .description p:last-child {
    margin-bottom: 0;
}
.page.home section.hero .content .separator {
    position: relative;
    width: 250px;
    height: 2px;
    margin-bottom: 3vh;
}
.page.home section.hero .content .separator:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #705df2;
    opacity: 0.15;
}
.page.home section.hero .content .students {
    display: flex;
    margin-bottom: 4vh;
    line-height: 1.5em;
    align-items: center;
}
.page.home section.hero .content .students p {
    margin-bottom: 0;
}
.page.home section.hero .content .students .illustration {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}
.page.home section.hero .content .trailer-trigger {
    position: relative;
    width: 55%;
    margin-top: 2vh;
}
.page.home section.hero .content .trailer-trigger:hover .video video {
    transform: scale(1.1);
    transition-duration: 0.15s;
}
.page.home section.hero .content .trailer-trigger:hover .info {
    transition-duration: 0.15s;
    transform: translate(10px);
}
.page.home section.hero .content .trailer-trigger:hover .glow {
    transition-duration: 0.15s;
    opacity: 1;
}
.page.home section.hero .content .trailer-trigger .placeholder {
    padding-top: 56.25%;
}
.page.home section.hero .content .trailer-trigger .glow {
    position: absolute;
    inset: 15px;
    box-shadow: 0 0 80px #705df299;
    opacity: 0;
    transition: opacity 1s;
}
.page.home section.hero .content .trailer-trigger .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 14px;
}
.page.home section.hero .content .trailer-trigger .video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s;
}
.page.home section.hero .content .trailer-trigger .video .play {
    position: absolute;
    top: calc(50% - 10px);
    left: calc(50% - 8px);
    width: 17px;
    height: 20px;
}
.page.home section.hero .content .trailer-trigger .video .play svg {
    display: block;
    -webkit-filter: drop-shadow(0 0 5px rgba(20, 11, 41, 0.3));
    filter: drop-shadow(0 0 5px rgba(20, 11, 41, 0.3));
}
.page.home section.hero .content .trailer-trigger .video .play svg * {
    fill: #fff;
}
.page.home section.hero .content .trailer-trigger .info {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 90%;
    width: 100%;
    height: 100%;
    transition: transform 1s;
}
.page.home section.hero .content .trailer-trigger .info .inner {
    position: relative;
    padding: 16px 20px 25px 25px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: radial-gradient(104.84% 129.17% at 93.34% 4.35%, rgba(112, 93, 242, 0.2) 0%, rgba(28, 17, 52, 0.2) 100%), #1c1134;
    box-shadow: 0 0 80px #705df24d;
}
@media (max-width: 1300px) {
    .page.home section.hero .content .trailer-trigger .info .inner {
        padding: 14px 15px 23px 20px;
    }
}
@media (max-width: 1080px) {
    .page.home section.hero .content .trailer-trigger .info .inner {
        padding: 12px 15px 21px;
    }
}
@media (max-width: 800px) {
    .page.home section.hero .content .trailer-trigger .info .inner {
        padding: 16px 20px 25px 25px;
    }
}
@media (max-width: 600px) {
    .page.home section.hero .content .trailer-trigger .info .inner {
        padding: 14px 15px 23px 20px;
    }
}
@media (max-width: 400px) {
    .page.home section.hero .content .trailer-trigger .info .inner {
        padding: 12px 15px 21px;
    }
}
.page.home section.hero .content .trailer-trigger .info .inner .notch {
    position: absolute;
    top: 22px;
    right: calc(100% + -0px);
    width: 10px;
    height: 18px;
    overflow: hidden;
    pointer-events: none;
}
.page.home section.hero .content .trailer-trigger .info .inner .notch:after {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 3px;
    width: 14px;
    height: 14px;
    background: #1c1134;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transform: rotate(45deg);
}
.page.home section.hero .content .trailer-trigger .info .price {
    margin-bottom: 0.1em;
    font-size: 64px;
    
    font-weight: 800;
    background: linear-gradient(180deg, #b4a9ff 0%, #705df2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media (max-width: 1300px) {
    .page.home section.hero .content .trailer-trigger .info .price {
        font-size: 59px;
    }
}
@media (max-width: 1080px) {
    .page.home section.hero .content .trailer-trigger .info .price {
        font-size: 54px;
    }
}
@media (max-width: 800px) {
    .page.home section.hero .content .trailer-trigger .info .price {
        font-size: 49px;
    }
}
@media (max-width: 600px) {
    .page.home section.hero .content .trailer-trigger .info .price {
        font-size: 44px;
    }
}
@media (max-width: 400px) {
    .page.home section.hero .content .trailer-trigger .info .price {
        font-size: 39px;
    }
}
.page.home section.hero .content .trailer-trigger .info .details {
    
    font-weight: 700;
    opacity: 0.8;
}
.page.home section.trailer-video {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.page.home section.trailer-video.is-open {
    opacity: 1;
    pointer-events: auto;
}
.page.home section.trailer-video.is-open .player-container .close {
    pointer-events: auto;
}
.page.home section.trailer-video.is-open .player-container .close .background {
    transform: scale(1);
    transition-duration: 0.5s;
    transition-delay: 0.05s;
    transition-timing-function: cubic-bezier(0.59, 1.97, 0.55, 0.83);
}
.page.home section.trailer-video.is-open .player-container .close .bars {
    transform: scale(1);
    transition-duration: 0.5s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.59, 1.97, 0.55, 0.83);
}
.page.home section.trailer-video .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 1;
    cursor: pointer;
}
.page.home section.trailer-video .player-container {
    position: relative;
    max-width: min(80vh * (1920 / 1080), 1920px);
    width: calc(100% - 160px);
}
@media (max-width: 1080px) {
    .page.home section.trailer-video .player-container {
        width: calc(100% - 120px);
    }
}
@media (max-width: 800px) {
    .page.home section.trailer-video .player-container {
        width: calc(100% - 80px);
    }
}
@media (max-width: 600px) {
    .page.home section.trailer-video .player-container {
        width: calc(100% - 60px);
    }
}
@media (max-width: 400px) {
    .page.home section.trailer-video .player-container {
        width: calc(100% - 40px);
    }
}
.page.home section.trailer-video .player-container .placeholder {
    padding-top: calc(56.25% + 28px);
}
.page.home section.trailer-video .player-container .player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page.home section.trailer-video .player-container .join-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
@media (max-width: 800px), (orientation: portrait) {
    .page.home section.trailer-video .player-container .join-container {
        top: 100%;
        height: 25vh;
    }
}
.page.home section.trailer-video .player-container .join-container .join-button {
    transition: transform 0.45s cubic-bezier(0.75, 0, 0.25, 1);
    transform: scale(0.0001);
    transition-duration: 0.5s;
    transition-delay: 0.1s;
}
.page.home section.trailer-video .player-container .join-container .join-button.is-visible {
    transform: scale(1);
    transition-duration: 0.5s;
    transition-delay: 0.05s;
    transition-timing-function: cubic-bezier(0.59, 1.97, 0.55, 0.83);
    pointer-events: auto;
}
.page.home section.trailer-video .player-container .close {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    transition: transform 0.45s cubic-bezier(0.75, 0, 0.25, 1);
    pointer-events: none;
}
.page.home section.trailer-video .player-container .close:hover {
    transform: rotate(180deg);
}
.page.home section.trailer-video .player-container .close .background {
    display: block;
    position: absolute;
    top: -30px;
    left: -30px;
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 30px 70px #3c00bd22;
    transition-property: transform;
    will-change: transform;
    transform: scale(0.0001);
    transition-duration: 0.5s;
    transition-delay: 0.1s;
}
@media (max-width: 600px) {
    .page.home section.trailer-video .player-container .close .background {
        top: -25px;
        left: -25px;
        width: 49px;
        height: 49px;
    }
}
.page.home section.trailer-video .player-container .close .bars {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition-property: transform;
    will-change: transform;
    transform: scale(0.0001);
    transition-duration: 0.5s;
    transition-delay: 0s;
}
.page.home section.trailer-video .player-container .close .bars .bar {
    display: block;
    position: absolute;
    top: -1px;
    left: -10px;
    width: 20px;
    height: 3px;
    background: #705df2;
    border-radius: 2px;
}
.page.home section.trailer-video .player-container .close .bars .bar.bar-1 {
    transform: rotate(-45deg);
}
.page.home section.trailer-video .player-container .close .bars .bar.bar-2 {
    transform: rotate(45deg);
}
.page.home section.career {
    position: relative;
    padding-top: 7.5vh;
    text-align: center;
}
.page.home section.career .radial-glow {
    top: 50%;
    left: 75%;
    width: 50vmax;
    height: 50vmax;
    background: radial-gradient(closest-side, #ff6651, transparent);
    opacity: 0.1;
    pointer-events: none;
}
.page.home section.career .titles {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 25px;
    padding-right: 25px;
}
@media (max-width: 800px) {
    .page.home section.career .titles {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 600px) {
    .page.home section.career .titles {
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media (max-width: 400px) {
    .page.home section.career .titles {
        padding-left: 10px;
        padding-right: 10px;
    }
}
.page.home section.career .section-title {
    margin-bottom: 0.5em;
}
.page.home section.career .section-sub-title {
    margin-bottom: 2em;
}
.page.home section.career .skills {
    font-size: 0;
    margin: 0 auto;
}
@media (max-width: 1080px) {
    .page.home section.career .skills {
        width: calc((25vw + 50px) * 2);
    }
}
@media (max-width: 800px) {
    .page.home section.career .skills {
        width: auto;
    }
}
.page.home section.career .skills .skill {
    display: inline-block;
    vertical-align: top;
    width: 260px;
    max-width: 20vw;
    margin-left: 25px;
    margin-right: 25px;
}
@media (max-width: 1080px) {
    .page.home section.career .skills .skill {
        width: 25vw;
        max-width: 9999px;
    }
}
@media (max-width: 800px) {
    .page.home section.career .skills .skill {
        width: calc(50vw - 100px);
    }
}
@media (max-width: 600px) {
    .page.home section.career .skills .skill {
        width: calc(50vw - 50px);
    }
}
@media (max-width: 400px) {
    .page.home section.career .skills .skill {
        width: auto;
    }
}
.page.home section.career .skills .skill .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 70px;
    margin-bottom: 25px;
}
@media (max-width: 800px) {
    .page.home section.career .skills .skill .icon {
        margin-bottom: 22px;
    }
}
@media (max-width: 600px) {
    .page.home section.career .skills .skill .icon {
        margin-bottom: 19px;
    }
}
@media (max-width: 400px) {
    .page.home section.career .skills .skill .icon {
        margin-bottom: 15px;
    }
}
.page.home section.career .skills .skill .label {
    margin-bottom: 1em;
    font-size: 26px;
    
    font-weight: 800;
}
@media (max-width: 1300px) {
    .page.home section.career .skills .skill .label {
        font-size: 24px;
    }
}
@media (max-width: 1080px) {
    .page.home section.career .skills .skill .label {
        font-size: 22px;
    }
}
@media (max-width: 800px) {
    .page.home section.career .skills .skill .label {
        font-size: 20px;
    }
}
@media (max-width: 600px) {
    .page.home section.career .skills .skill .label {
        font-size: 18px;
    }
}
@media (max-width: 400px) {
    .page.home section.career .skills .skill .label {
        font-size: 18px;
    }
}
.page.home section.testimonies {
    position: relative;
    padding-top: 7.5vh;
}
.page.home section.testimonies .radial-glow {
    top: 100px;
    left: 25%;
    width: 50vmax;
    height: 50vmax;
    background: radial-gradient(closest-side, #ff6651, transparent);
    opacity: 0.08;
    pointer-events: none;
}
.page.home section.testimonies .section-title {
    margin-bottom: 1.5em;
    text-align: center;
    padding-left: 25px;
    padding-right: 25px;
}
@media (max-width: 800px) {
    .page.home section.testimonies .section-title {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 600px) {
    .page.home section.testimonies .section-title {
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media (max-width: 400px) {
    .page.home section.testimonies .section-title {
        padding-left: 10px;
        padding-right: 10px;
    }
}
.page.home section.testimonies .items .item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
    width: 408px;
    max-width: 60vw;
    padding: 40px;
    margin-right: 25px;
    vertical-align: top;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: radial-gradient(150% 150% at 0% 100%, #261c45 0%, rgba(35, 25, 74, 0) 100%);
    text-align: left;
    pointer-events: none;
    --item-size-ratio: 1;
}
@media (max-width: 1600px) {
    .page.home section.testimonies .items .item {
        padding: 35px;
    }
}
@media (max-width: 1300px) {
    .page.home section.testimonies .items .item {
        padding: 30px;
        --item-size-ratio: 0.9;
    }
}
@media (max-width: 800px) {
    .page.home section.testimonies .items .item {
        padding: 25px;
        margin-right: 20px;
        --item-size-ratio: 0.8;
    }
}
@media (max-width: 600px) {
    .page.home section.testimonies .items .item {
        padding: 20px;
        margin-right: 15px;
        --item-size-ratio: 0.7;
    }
}
@media (max-width: 400px) {
    .page.home section.testimonies .items .item {
        padding: 15px;
        margin-right: 10px;
        --item-size-ratio: 0.6;
    }
}
.page.home section.testimonies .items .item.is-mrdoob {
    width: calc(300px * var(--item-size-ratio));
}
.page.home section.testimonies .items .item.is-JanWillemTulp {
    width: calc(500px * var(--item-size-ratio));
}
.page.home section.testimonies .items .item.is-Anemolito {
    width: calc(350px * var(--item-size-ratio));
}
.page.home section.testimonies .items .item.is-ilithya_rocks {
    width: calc(450px * var(--item-size-ratio));
}
.page.home section.testimonies .items .item.is-aqro {
    width: calc(408px * var(--item-size-ratio));
}
.page.home section.testimonies .items .item.is-ayamflow {
    width: calc(300px * var(--item-size-ratio));
}
.page.home section.testimonies .items .item.is-ameliemaiaa {
    width: calc(300px * var(--item-size-ratio));
}
.page.home section.testimonies .items .item.is-jtruk {
    width: calc(450px * var(--item-size-ratio));
}
.page.home section.testimonies .items .item.is-th_ebenezer {
    width: calc(450px * var(--item-size-ratio));
}
.page.home section.testimonies .items .item.is-3d_visionary {
    width: calc(470px * var(--item-size-ratio));
}
.page.home section.testimonies .items .item.is-im_Charp {
    width: calc(350px * var(--item-size-ratio));
}
.page.home section.testimonies .items .item.is-Axiome_CG {
    width: calc(450px * var(--item-size-ratio));
}
.page.home section.testimonies .items .item .author {
    display: flex;
    width: 100%;
    margin-bottom: calc(2em * var(--item-size-ratio));
}
.page.home section.testimonies .items .item .author .illustration {
    width: 58px;
    height: 58px;
    margin-right: 10px;
    border-radius: 29px;
}
.page.home section.testimonies .items .item .author .details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.page.home section.testimonies .items .item .author .details > * {
    margin: 2px 0;
}
.page.home section.testimonies .items .item .author .name {
    font-weight: 700;
}
.page.home section.testimonies .items .item .author .job {
    color: #a5a5a5;
}
.page.home section.testimonies .items .item .author .followers {
    color: #a5a5a5;
}
.page.home section.testimonies .items .item .author .followers .count {
    font-weight: 700;
    color: #fff;
}
.page.home section.testimonies .items .item .message {
    margin-bottom: calc(1.5em * var(--item-size-ratio));
    text-align: left;
}
.page.home section.testimonies .items .item .message p {
    color: #fff;
    
    font-weight: 500;
    line-height: calc(1.75 * var(--item-size-ratio));
}
.page.home section.testimonies .items .item .message p em {
    font-weight: 700;
}
.page.home section.testimonies .items .item .link {
    display: flex;
    padding: 10px 20px 10px 0;
    
    font-weight: 700;
    pointer-events: auto;
    text-decoration: none;
}
.page.home section.testimonies .items .item .link:hover {
    text-decoration-style: wavy;
    text-decoration-skip-ink: none;
}
.page.home section.testimonies .items .item .link .arrow {
    position: relative;
    top: 1px;
    margin-left: 2px;
    transform: rotate(-90deg);
}
.page.home section.testimonies .items .item .link .arrow svg * {
    fill: #fff;
    opacity: 1;
}
.page.home section.presentation {
    padding-top: 10vh;
    margin-bottom: 6vh;
    background: #150c21;
    color: #fff;
    text-align: center;
    padding-left: 25px;
    padding-right: 25px;
}
@media (max-width: 800px) {
    .page.home section.presentation {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 600px) {
    .page.home section.presentation {
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media (max-width: 400px) {
    .page.home section.presentation {
        padding-left: 10px;
        padding-right: 10px;
    }
}
.page.home section.presentation .section-title {
    margin-bottom: 1em;
}
.page.home section.presentation .section-title strong {
    color: #705df2;
}
.page.home section.presentation .description {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5vh;
}
@media (max-width: 1080px) {
    .page.home section.presentation .description {
        max-width: 600px;
    }
}
.page.home section.presentation .numbers {
    display: flex;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-around;
    align-items: center;
}
.page.home section.presentation .numbers .number {
    position: relative;
    width: 25%;
}
.page.home section.presentation .numbers .number:first-child .radial-glow {
    left: 0;
}
.page.home section.presentation .numbers .number:last-child .radial-glow {
    left: 100%;
}
.page.home section.presentation .numbers .number .radial-glow {
    top: 100%;
    left: 50%;
    width: 25vmax;
    height: 25vmax;
    background: radial-gradient(closest-side, #705df2, transparent);
    opacity: 0.12;
    pointer-events: none;
}
.page.home section.presentation .numbers .value {
    margin-bottom: 0.1em;
    text-align: center;
    font-size: 100px;
    
    font-weight: 800;
    background: linear-gradient(180deg, #b4a9ff 0%, #705df2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media (max-width: 1300px) {
    .page.home section.presentation .numbers .value {
        font-size: 92px;
    }
}
@media (max-width: 1080px) {
    .page.home section.presentation .numbers .value {
        font-size: 84px;
    }
}
@media (max-width: 800px) {
    .page.home section.presentation .numbers .value {
        font-size: 76px;
    }
}
@media (max-width: 600px) {
    .page.home section.presentation .numbers .value {
        font-size: 68px;
    }
}
@media (max-width: 400px) {
    .page.home section.presentation .numbers .value {
        font-size: 60px;
    }
}
.page.home section.presentation .numbers .label {
    font-size: 26px;
    
    font-weight: 500;
    white-space: nowrap;
    width: 240px;
    margin-left: calc(50% - 120px);
}
@media (max-width: 1300px) {
    .page.home section.presentation .numbers .label {
        font-size: 24px;
    }
}
@media (max-width: 1080px) {
    .page.home section.presentation .numbers .label {
        font-size: 22px;
    }
}
@media (max-width: 800px) {
    .page.home section.presentation .numbers .label {
        font-size: 20px;
    }
}
@media (max-width: 600px) {
    .page.home section.presentation .numbers .label {
        font-size: 18px;
    }
}
@media (max-width: 400px) {
    .page.home section.presentation .numbers .label {
        font-size: 18px;
    }
}
@media (max-width: 600px) {
    .page.home section.presentation .numbers .label .optional {
        display: none;
    }
}
.page.home section.presentation .numbers .label .icon {
    position: relative;
    top: -1px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}
@media (max-width: 600px) {
    .page.home section.presentation .numbers .label .icon {
        margin-left: 0;
    }
}
@media (max-width: 400px) {
    .page.home section.presentation .numbers .label .icon {
        display: none;
    }
}
.page.home section.presentation .numbers .label .icon.is-book {
    width: 19px;
    height: 21px;
}
.page.home section.presentation .numbers .label .icon.is-paper-lines {
    width: 18px;
    height: 21px;
}
.page.home section.presentation .numbers .label .icon.is-player {
    width: 20px;
    height: 14px;
}
.page.home section.presentation .numbers .label .icon svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page.home section.summary {
    position: relative;
    display: flex;
    width: 1272px;
    margin: 0 auto;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    --chapter-color: #fff;
    --chapter-text-color: #ccc;
    --navigation-width: 86px;
}
@media (max-width: 1300px) {
    .page.home section.summary {
        --navigation-width: 80px;
        width: auto;
        margin-left: 25px;
        margin-right: 25px;
    }
}
@media (max-width: 1080px) {
    .page.home section.summary {
        --navigation-width: 74px;
        margin-left: 20px;
        margin-right: 20px;
    }
}
@media (max-width: 800px) {
    .page.home section.summary {
        --navigation-width: 68px;
        margin-left: 15px;
        margin-right: 15px;
    }
}
@media (max-width: 600px) {
    .page.home section.summary {
        --navigation-width: 62px;
        margin-left: 10px;
        margin-right: 10px;
    }
}
@media (max-width: 400px) {
    .page.home section.summary {
        --navigation-width: 56px;
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
    }
}
.page.home section.summary .navigation {
    width: var(--navigation-width);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    background: #1c1134;
}
.page.home section.summary .navigation .mover {
    position: sticky;
    top: 80px;
}
.page.home section.summary .navigation .item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: calc(var(--navigation-width) * (62 / 86));
    cursor: pointer;
}
.page.home section.summary .navigation .item:hover .number {
    opacity: 1;
}
.page.home section.summary .navigation .item.is-before:after {
    transform-origin: 100% 100%;
}
.page.home section.summary .navigation .item.is-active .number {
    opacity: 1;
}
.page.home section.summary .navigation .item.is-active:before {
    opacity: 0.3;
}
.page.home section.summary .navigation .item.is-active:after {
    transform: scaleY(1);
    transform-origin: 100% 0;
}
.page.home section.summary .navigation .item.is-after:after {
    transform-origin: 100% 0%;
}
.page.home section.summary .navigation .item:nth-child(1) {
    --chapter-color: #ff6651;
}
.page.home section.summary .navigation .item:nth-child(2) {
    --chapter-color: #63bff2;
}
.page.home section.summary .navigation .item:nth-child(3) {
    --chapter-color: #ffb905;
}
.page.home section.summary .navigation .item:nth-child(4) {
    --chapter-color: #705df2;
}
.page.home section.summary .navigation .item:nth-child(5) {
    --chapter-color: #adbbd0;
}
.page.home section.summary .navigation .item:nth-child(6) {
    --chapter-color: #78d24e;
}
.page.home section.summary .navigation .item:nth-child(7) {
    --chapter-color: #00fff0;
}
.page.home section.summary .navigation .item .number {
    position: relative;
    font-size: 26px;
    
    font-weight: 800;
    opacity: 0.4;
    transition: opacity 0.3s;
}
@media (max-width: 1300px) {
    .page.home section.summary .navigation .item .number {
        font-size: 24px;
    }
}
@media (max-width: 1080px) {
    .page.home section.summary .navigation .item .number {
        font-size: 22px;
    }
}
@media (max-width: 800px) {
    .page.home section.summary .navigation .item .number {
        font-size: 20px;
    }
}
@media (max-width: 600px) {
    .page.home section.summary .navigation .item .number {
        font-size: 18px;
    }
}
@media (max-width: 400px) {
    .page.home section.summary .navigation .item .number {
        font-size: 18px;
    }
}
.page.home section.summary .navigation .item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #1c1134 0%, var(--chapter-color) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.page.home section.summary .navigation .item:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background: var(--chapter-color);
    pointer-events: none;
    transform: scaleY(0);
    transition: transform 0.3s;
}
.page.home section.summary .chapters {
    width: calc(100% - var(--navigation-width));
    background: #271945;
}
.page.home section.summary .chapters .chapter-container {
    position: relative;
    padding: 80px 80px 80px calc(50% - 20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}
@media (max-width: 1300px) {
    .page.home section.summary .chapters .chapter-container {
        padding: 60px 55px 60px calc(50% - 20px);
    }
}
@media (max-width: 1080px) {
    .page.home section.summary .chapters .chapter-container {
        padding: 40px 30px 40px calc(50% - 15px);
    }
}
@media (max-width: 800px) {
    .page.home section.summary .chapters .chapter-container {
        padding: 35px 30px;
    }
}
@media (max-width: 600px) {
    .page.home section.summary .chapters .chapter-container {
        padding: 25px 20px;
    }
}
@media (max-width: 400px) {
    .page.home section.summary .chapters .chapter-container {
        padding: 15px;
    }
}
.page.home section.summary .chapters .chapter-container:nth-child(1) {
    --chapter-color: #ff6651;
    --chapter-text-color: #ff7850;
}
.page.home section.summary .chapters .chapter-container:nth-child(2) {
    --chapter-color: #63bff2;
    --chapter-text-color: #62c7ff;
}
.page.home section.summary .chapters .chapter-container:nth-child(3) {
    --chapter-color: #ffb905;
    --chapter-text-color: #fbb606;
}
.page.home section.summary .chapters .chapter-container:nth-child(4) {
    --chapter-color: #705df2;
    --chapter-text-color: #8784ff;
}
.page.home section.summary .chapters .chapter-container:nth-child(5) {
    --chapter-color: #adbbd0;
    --chapter-text-color: #85a4b2;
}
.page.home section.summary .chapters .chapter-container:nth-child(6) {
    --chapter-color: #78d24e;
    --chapter-text-color: #b9e76e;
}
.page.home section.summary .chapters .chapter-container:nth-child(7) {
    --chapter-color: #00fff0;
    --chapter-text-color: #6ebbf3;
}
.page.home section.summary .chapters .chapter-container:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(100% 100% at 100% 15%, var(--chapter-color) 0%, #271945 100%);
    opacity: 0.2;
}
.page.home section.summary .chapters .chapter-container .illustration {
    position: absolute;
    top: 15%;
    left: 25%;
    transform: translate(-50%);
}
@media (max-width: 1300px) {
    .page.home section.summary .chapters .chapter-container .illustration {
        transform: translate(-50%) scale(0.9);
    }
}
@media (max-width: 1080px) {
    .page.home section.summary .chapters .chapter-container .illustration {
        transform: translate(-50%) scale(0.8);
    }
}
@media (max-width: 800px) {
    .page.home section.summary .chapters .chapter-container .illustration {
        top: 100px;
        left: calc(100% - 50px);
        transform: translate(-50%, -50%) scale(0.6);
    }
}
@media (max-width: 600px) {
    .page.home section.summary .chapters .chapter-container .illustration {
        transform: translate(-50%, -50%) scale(0.5);
    }
}
@media (max-width: 400px) {
    .page.home section.summary .chapters .chapter-container .illustration {
        display: none;
    }
}
.page.home section.summary .chapters .chapter-container .illustration .radial-glow {
    top: 75%;
    left: 50%;
    width: 25vmax;
    height: 25vmax;
    background: radial-gradient(closest-side, var(--chapter-color), transparent);
    opacity: 0.05;
    pointer-events: none;
}
@media (max-width: 800px) {
    .page.home section.summary .chapters .chapter .section-title {
        margin-right: 150px;
    }
}
@media (max-width: 400px) {
    .page.home section.summary .chapters .chapter .section-title {
        margin-right: 0;
    }
}
@media (max-width: 800px) {
    .page.home section.summary .chapters .chapter .information .optional {
        display: none;
    }
}
@media (max-width: 800px) {
    .page.home section.summary .chapters .chapter .description {
        margin-right: 100px;
    }
}
@media (max-width: 400px) {
    .page.home section.summary .chapters .chapter .description {
        margin-right: 0;
    }
}
.page.home section.bruno-simon {
    color: #fff;
}
@media (max-width: 600px) {
    .page.home section.bruno-simon {
        text-align: center;
    }
}
.page.home section.bruno-simon .content {
    position: relative;
    width: 1056px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5vh;
    padding-top: 20vh;
}
@media (max-width: 1080px) {
    .page.home section.bruno-simon .content {
        width: auto;
        padding-left: 25px;
        padding-right: 25px;
    }
}
@media (max-width: 800px) {
    .page.home section.bruno-simon .content {
        padding-top: 7.5vh;
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 0;
    }
}
@media (max-width: 600px) {
    .page.home section.bruno-simon .content {
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media (max-width: 400px) {
    .page.home section.bruno-simon .content {
        padding-left: 10px;
        padding-right: 10px;
    }
}
.page.home section.bruno-simon .photo {
    position: absolute;
    bottom: 0;
    left: 500px;
    width: calc((100vw - 1056px) / 2 + 556px);
    height: 100%;
}
@media (max-width: 1080px) {
    .page.home section.bruno-simon .photo {
        left: 400px;
        width: calc(100vw - 400px);
    }
}
@media (max-width: 800px) {
    .page.home section.bruno-simon .photo {
        position: static;
        left: auto;
        width: auto;
        height: 150px;
    }
}
@media (max-width: 600px) {
    .page.home section.bruno-simon .photo {
        display: none;
    }
}
.page.home section.bruno-simon .photo .image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 634px;
}
@media (max-width: 800px) {
    .page.home section.bruno-simon .photo .image {
        max-width: none;
        left: auto;
        right: 0;
        width: 60%;
    }
}
.page.home section.bruno-simon .photo .image .bruno {
    display: block;
    width: 100%;
    height: auto;
}
.page.home section.bruno-simon .photo .image .object {
    width: 30%;
    transform: translate(-50%, -50%);
}
.page.home section.bruno-simon .photo .image .object .placeholder {
    padding-top: 100%;
}
.page.home section.bruno-simon .photo .image .object img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page.home section.bruno-simon .photo .image .object.sphere {
    display: block;
    position: absolute;
    bottom: 45%;
    left: 72%;
    animation: photo-object-floating-2 7.1s infinite ease-in-out alternate;
}
.page.home section.bruno-simon .photo .image .object.pyramid {
    display: block;
    position: absolute;
    bottom: 70%;
    left: 0%;
    animation: photo-object-floating-2 6.5s infinite ease-in-out alternate;
}
.page.home section.bruno-simon .photo .image .object.cube {
    display: block;
    position: absolute;
    bottom: 100%;
    left: 25%;
    animation: photo-object-floating-2 8s infinite ease-in-out alternate;
}
@-moz-keyframes photo-object-floating-2 {
    0% {
        transform: translateY(-30px);
    }
    to {
        transform: translateY(30px);
    }
}
@-webkit-keyframes photo-object-floating-2 {
    0% {
        transform: translateY(-30px);
    }
    to {
        transform: translateY(30px);
    }
}
@-o-keyframes photo-object-floating-2 {
    0% {
        transform: translateY(-30px);
    }
    to {
        transform: translateY(30px);
    }
}
@keyframes photo-object-floating-2 {
    0% {
        transform: translateY(-30px);
    }
    to {
        transform: translateY(30px);
    }
}
.page.home section.bruno-simon .photo .gradient {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 888px;
    background: radial-gradient(farthest-side at 60% 80%, #f25de3, rgba(242, 93, 227, 0));
    opacity: 0.3;
    pointer-events: none;
}
.page.home section.bruno-simon .section-title {
    margin-bottom: 1em;
}
.page.home section.bruno-simon .section-title .hand {
    animation: hand-waving 8s infinite;
    transform-origin: 75% 75%;
}
@-moz-keyframes hand-waving {
    0% {
        transform: rotate(0);
    }
    2% {
        transform: rotate(25deg);
    }
    6% {
        transform: rotate(-25deg);
    }
    8% {
        transform: rotate(0);
    }
}
@-webkit-keyframes hand-waving {
    0% {
        transform: rotate(0);
    }
    2% {
        transform: rotate(25deg);
    }
    6% {
        transform: rotate(-25deg);
    }
    8% {
        transform: rotate(0);
    }
}
@-o-keyframes hand-waving {
    0% {
        transform: rotate(0);
    }
    2% {
        transform: rotate(25deg);
    }
    6% {
        transform: rotate(-25deg);
    }
    8% {
        transform: rotate(0);
    }
}
@keyframes hand-waving {
    0% {
        transform: rotate(0);
    }
    2% {
        transform: rotate(25deg);
    }
    6% {
        transform: rotate(-25deg);
    }
    8% {
        transform: rotate(0);
    }
}
.page.home section.bruno-simon .description {
    max-width: 400px;
    margin-bottom: 3em;
}
@media (max-width: 800px) {
    .page.home section.bruno-simon .description {
        position: relative;
        z-index: 1;
        width: 55%;
    }
}
@media (max-width: 600px) {
    .page.home section.bruno-simon .description {
        width: 80%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 400px) {
    .page.home section.bruno-simon .description {
        width: auto;
    }
}
.page.home section.bruno-simon .social-links {
    display: flex;
    position: relative;
    left: -11px;
}
@media (max-width: 600px) {
    .page.home section.bruno-simon .social-links {
        justify-content: center;
    }
}
.page.home section.bruno-simon .social-links .link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70px;
    text-align: center;
}
.page.home section.bruno-simon .social-links .link:hover .icon svg * {
    fill: #fff;
    transition-duration: 0.05s;
}
.page.home section.bruno-simon .social-links .link:hover .number:before {
    opacity: 0.5;
    transition-duration: 0.05s;
}
.page.home section.bruno-simon .social-links .link:hover .number:after {
    opacity: 0.7;
    transition-duration: 0.05s;
}
.page.home section.bruno-simon .social-links .link > * {
    display: block;
}
.page.home section.bruno-simon .social-links .icon {
    position: relative;
    display: block;
    flex-shrink: 0;
    margin-bottom: 10px;
}
.page.home section.bruno-simon .social-links .icon svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page.home section.bruno-simon .social-links .icon svg * {
    fill: #705df2;
    transition: fill 0.3s;
}
.page.home section.bruno-simon .social-links .icon.twitter-logo {
    display: block;
    width: 33px;
    height: 33px;
}
.page.home section.bruno-simon .social-links .icon.github-logo {
    display: block;
    width: 33px;
    height: 33px;
}
.page.home section.bruno-simon .social-links .icon.linkedin-logo {
    display: block;
    width: 30px;
    height: 33px;
}
.page.home section.bruno-simon .social-links .number {
    position: relative;
    color: #705df2;
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
}
.page.home section.bruno-simon .social-links .number:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(50% 50% at 50% 0%, #705df2 0%, rgba(0, 0, 0, 0) 100%);
    opacity: 0.2;
    transition: opacity 0.3s;
}
.page.home section.bruno-simon .social-links .number:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(112, 93, 242, 0) 0%, #705df2 50%, rgba(112, 93, 242, 0) 100%);
    opacity: 0.5;
    transition: opacity 0.3s;
}
.page.home section.bruno-simon .social-links .number .value {
    position: relative;
    
    font-weight: 800;
    background: linear-gradient(180deg, #b4a9ff 30%, #705df2 70%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.page.home section.bruno-simon .projects {
    margin-bottom: 10vh;
}
.page.home section.bruno-simon .projects .sub-title {
    width: 1056px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
}
@media (max-width: 1080px) {
    .page.home section.bruno-simon .projects .sub-title {
        width: auto;
        padding-left: 25px;
        padding-right: 25px;
    }
}
@media (max-width: 800px) {
    .page.home section.bruno-simon .projects .sub-title {
        padding-top: 7.5vh;
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 600px) {
    .page.home section.bruno-simon .projects .sub-title {
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media (max-width: 400px) {
    .page.home section.bruno-simon .projects .sub-title {
        padding-left: 10px;
        padding-right: 10px;
    }
}
.page.home section.bruno-simon .projects .sub-title strong {
    color: #705df2;
}
.page.home section.bruno-simon .projects .item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    margin-right: 25px;
    vertical-align: top;
    text-align: left;
}
@media (max-width: 800px) {
    .page.home section.bruno-simon .projects .item {
        margin-right: 20px;
    }
}
@media (max-width: 600px) {
    .page.home section.bruno-simon .projects .item {
        margin-right: 15px;
    }
}
@media (max-width: 400px) {
    .page.home section.bruno-simon .projects .item {
        margin-right: 10px;
    }
}
.page.home section.bruno-simon .projects .item:hover .radial-glow {
    opacity: 0.25;
    transition-duration: 0.15s;
}
.page.home section.bruno-simon .projects .item:hover .info {
    transform: translateY(0);
}
.page.home section.bruno-simon .projects .item .radial-glow {
    top: 60%;
    left: 50%;
    width: 25vmax;
    height: 25vmax;
    background: radial-gradient(closest-side, #705df2, transparent);
    opacity: 0.9;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.page.home section.bruno-simon .projects .item .visual {
    --project-width: 342px;
    position: relative;
    width: var(--project-width);
    height: calc(var(--project-width) * 472 / 684);
    border-radius: 14px;
    overflow: hidden;
    z-index: 1;
}
@media (max-width: 1080px) {
    .page.home section.bruno-simon .projects .item .visual {
        --project-width: 300px;
    }
}
@media (max-width: 800px) {
    .page.home section.bruno-simon .projects .item .visual {
        --project-width: 260px;
    }
}
@media (max-width: 600px) {
    .page.home section.bruno-simon .projects .item .visual {
        --project-width: 240px;
    }
}
@media (max-width: 400px) {
    .page.home section.bruno-simon .projects .item .visual {
        --project-width: 220px;
    }
}
.page.home section.bruno-simon .projects .item .visual img,
.page.home section.bruno-simon .projects .item .visual .video-placeholder,
.page.home section.bruno-simon .projects .item .visual video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page.home section.bruno-simon .projects .item .visual video {
    opacity: 0;
    transition: opacity 0.3s;
}
.page.home section.bruno-simon .projects .item .visual video.is-playing {
    opacity: 1;
}
.page.home section.bruno-simon .projects .item .info {
    position: relative;
    display: flex;
    width: calc(100% - 20px);
    padding: 25px 25px 20px;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-radius: 0 0 14px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: none;
    background: radial-gradient(150% 200% at 120% 50%, rgba(255, 119, 241, 0.2) 0%, rgba(20, 11, 41, 0.2) 100%), #140b29;
    pointer-events: auto;
    transform: translateY(-5px);
    transition: transform 0.3s;
}
@media (max-width: 800px) {
    .page.home section.bruno-simon .projects .item .info {
        padding: 22px 20px 15px;
    }
}
@media (max-width: 600px) {
    .page.home section.bruno-simon .projects .item .info {
        padding: 20px 15px 15px;
    }
}
@media (max-width: 400px) {
    .page.home section.bruno-simon .projects .item .info {
        padding: 15px 10px 10px;
    }
}
.page.home section.bruno-simon .projects .item .info .title {
    font-weight: 500;
    margin-bottom: 0.25em;
}
.page.home section.bruno-simon .projects .item .info .details {
    color: #ffffffb3;
}
.page.home section.bruno-simon .projects .item .info .icon {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
}
.page.home .community {
    text-align: center;
}
.page.home .community .section-title {
    margin-bottom: 1.5em;
}
.page.home .community .items {
    max-width: 1200px;
    margin: 0 auto;
}
.page.home .community .item {
    display: inline-block;
    vertical-align: top;
    margin: 0 12px 7.5vh;
    padding: 40px 35px 0;
    position: relative;
    width: 512px;
}
@media (max-width: 1600px) {
    .page.home .community .item {
        width: 480px;
        padding: 38px 30px 0;
    }
}
@media (max-width: 1300px) {
    .page.home .community .item {
        width: 440px;
        padding: 36px 25px 0;
    }
}
@media (max-width: 1080px) {
    .page.home .community .item {
        width: 400px;
        padding: 34px 20px 0;
    }
}
@media (max-width: 800px) {
    .page.home .community .item {
        width: 400px;
    }
}
@media (max-width: 600px) {
    .page.home .community .item {
        width: auto;
        margin-left: var(--page-horizontal-padding);
        margin-right: var(--page-horizontal-padding);
    }
}
.page.home .community .item:hover.is-challenge .radial-glow {
    opacity: 0.5;
    transition-duration: 75ms;
}
.page.home .community .item:hover.is-selection .radial-glow {
    opacity: 0.75;
    transition-duration: 75ms;
}
.page.home .community .item:hover .preview .gradient {
    transition-delay: 0.2s;
    opacity: 0;
}
.page.home .community .item:hover .preview .title {
    transition-delay: 0.1s;
    transition-timing-function: ease-in, ease-in;
    opacity: 0;
    transform: translate(10px);
}
.page.home .community .item:hover .preview .author {
    transition-timing-function: ease-in, ease-in;
    opacity: 0;
    transform: translate(10px);
}
.page.home .community .item.is-challenge .background {
    bottom: 60px;
}
.page.home .community .item.is-challenge .radial-glow {
    width: 30vmax;
    height: 30vmax;
    background: radial-gradient(closest-side, #ff77f1, transparent);
    opacity: 0.35;
    pointer-events: none;
}
.page.home .community .item.is-selection .background {
    bottom: 60px;
}
.page.home .community .item.is-selection .radial-glow {
    width: 30vmax;
    height: 30vmax;
    background: radial-gradient(closest-side, #62b2df, transparent);
    opacity: 0.55;
    pointer-events: none;
}
.page.home .community .item.is-discord {
    padding-bottom: 40px;
}
.page.home .community .item.is-discord .background {
    overflow: hidden;
}
.page.home .community .item.is-discord .background svg {
    display: block;
    position: absolute;
    top: 0;
    right: -60px;
    width: 200px;
    height: 200px;
    opacity: 0.13;
    transform: rotate(-35deg);
}
.page.home .community .item.is-discord .background svg * {
    fill: #7289da;
}
.page.home .community .item.is-discord .radial-glow {
    top: calc(100% - 60px);
    width: 300px;
    height: 300px;
    background: radial-gradient(closest-side, #5c43f5, transparent);
    opacity: 0.15;
    pointer-events: none;
}
.page.home .community .item > * {
    position: relative;
}
.page.home .community .item .background {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: radial-gradient(100% 100% at 100% 5%, rgba(112, 93, 242, 0.2) 0%, transparent 100%), #1c1134;
}
.page.home .community .item .title {
    margin-bottom: 0.75em;
    font-size: 48px;
    
    font-weight: 800;
}
@media (max-width: 1300px) {
    .page.home .community .item .title {
        font-size: 44px;
    }
}
@media (max-width: 1080px) {
    .page.home .community .item .title {
        font-size: 40px;
    }
}
@media (max-width: 800px) {
    .page.home .community .item .title {
        font-size: 36px;
    }
}
@media (max-width: 600px) {
    .page.home .community .item .title {
        font-size: 32px;
    }
}
@media (max-width: 400px) {
    .page.home .community .item .title {
        font-size: 28px;
    }
}
.page.home .community .item .description {
    margin-bottom: 1.5em;
    font-size: 20px;
}
@media (max-width: 1300px) {
    .page.home .community .item .description {
        font-size: 20px;
    }
}
@media (max-width: 1080px) {
    .page.home .community .item .description {
        font-size: 19px;
    }
}
@media (max-width: 800px) {
    .page.home .community .item .description {
        font-size: 18px;
    }
}
@media (max-width: 600px) {
    .page.home .community .item .description {
        font-size: 17px;
    }
}
@media (max-width: 400px) {
    .page.home .community .item .description {
        font-size: 16px;
    }
}
.page.home .community .item .separator {
    width: 50%;
    height: 1px;
    margin: 0 auto 1.5em;
    background: #fff;
    opacity: 0.2;
    font-size: 20px;
}
@media (max-width: 1300px) {
    .page.home .community .item .separator {
        font-size: 20px;
    }
}
@media (max-width: 1080px) {
    .page.home .community .item .separator {
        font-size: 19px;
    }
}
@media (max-width: 800px) {
    .page.home .community .item .separator {
        font-size: 18px;
    }
}
@media (max-width: 600px) {
    .page.home .community .item .separator {
        font-size: 17px;
    }
}
@media (max-width: 400px) {
    .page.home .community .item .separator {
        font-size: 16px;
    }
}
.page.home .community .item .project-title {
    font-size: 26px;
    
    font-weight: 800;
    margin-bottom: 1em;
}
@media (max-width: 1300px) {
    .page.home .community .item .project-title {
        font-size: 24px;
    }
}
@media (max-width: 1080px) {
    .page.home .community .item .project-title {
        font-size: 22px;
    }
}
@media (max-width: 800px) {
    .page.home .community .item .project-title {
        font-size: 20px;
    }
}
@media (max-width: 600px) {
    .page.home .community .item .project-title {
        font-size: 18px;
    }
}
@media (max-width: 400px) {
    .page.home .community .item .project-title {
        font-size: 18px;
    }
}
.page.home .community .item .radial-glow {
    position: absolute;
    top: 70%;
    left: 50%;
    transition: opacity 0.3s;
}
.page.home .community .item .preview {
    margin: 0 20px 25px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
@media (max-width: 1300px) {
    .page.home .community .item .preview {
        margin: 0 18px 25px;
    }
}
@media (max-width: 1080px) {
    .page.home .community .item .preview {
        margin: 0 16px 25px;
    }
}
@media (max-width: 800px) {
    .page.home .community .item .preview {
        margin: 0 14px 25px;
    }
}
@media (max-width: 600px) {
    .page.home .community .item .preview {
        margin: 0 12px 25px;
    }
}
@media (max-width: 400px) {
    .page.home .community .item .preview {
        margin: 0 0 25px;
    }
}
.page.home .community .item .preview .media-container {
    position: relative;
}
.page.home .community .item .preview .video,
.page.home .community .item .preview .image {
    display: block;
    width: 100%;
    height: auto;
}
.page.home .community .item .preview .gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(-10deg, rgba(20, 11, 41, 0.8) 20%, rgba(20, 11, 41, 0.1) 80%);
    opacity: 1;
    transition: opacity 0.3s;
    will-change: opacity;
}
.page.home .community .item .preview .title-author {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-right: 20px;
    padding-bottom: 20px;
}
.page.home .community .item .preview .title {
    margin-bottom: 0.1em;
    font-size: 20px;
    color: #ff77f1;
    
    font-weight: 500;
    opacity: 1;
    transform: translate(0);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    will-change: opacity, transform;
}
@media (max-width: 1300px) {
    .page.home .community .item .preview .title {
        font-size: 20px;
    }
}
@media (max-width: 1080px) {
    .page.home .community .item .preview .title {
        font-size: 19px;
    }
}
@media (max-width: 800px) {
    .page.home .community .item .preview .title {
        font-size: 18px;
    }
}
@media (max-width: 600px) {
    .page.home .community .item .preview .title {
        font-size: 17px;
    }
}
@media (max-width: 400px) {
    .page.home .community .item .preview .title {
        font-size: 16px;
    }
}
.page.home .community .item .preview .author {
    opacity: 1;
    transform: translate(0);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    will-change: opacity, transform;
}
.page.home .community .item .preview .bottom-label {
    display: flex;
    padding: 25px;
    justify-content: center;
    
    font-weight: 800;
    background: radial-gradient(150% 150% at 100% 25%, rgba(112, 93, 242, 0.2) 0%, transparent 100%), #140b29;
}
@media (max-width: 800px) {
    .page.home .community .item .preview .bottom-label {
        padding: 20px 25px;
    }
}
@media (max-width: 600px) {
    .page.home .community .item .preview .bottom-label {
        padding: 15px 20px;
    }
}
.page.home .community .item .preview .bottom-label .arrow {
    position: relative;
    top: 1px;
    display: inline-block;
    margin-left: 10px;
    transform: rotate(-90deg);
}
.page.home .community .item .preview .bottom-label .arrow svg * {
    fill: #fff;
    opacity: 1;
}
.page.home .community .item .preview .bottom-label strong {
    color: #fff;
    font-weight: 800;
}
.page.home section.highlights {
    padding-top: 5vh;
    text-align: center;
}
.page.home section.highlights .section-title {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
}
@media (max-width: 800px) {
    .page.home section.highlights .section-title {
        width: auto;
        margin-left: var(--page-horizontal-padding);
        margin-right: var(--page-horizontal-padding);
    }
}
.page.home section.highlights .section-title strong {
    color: #705df2;
    font-weight: 800;
}
.page.home section.beginner {
    padding-top: 10vh;
    background: radial-gradient(150% 150% at 60% 0%, rgba(112, 93, 242, 0.2), transparent), #150c21;
    text-align: center;
    color: #fff;
    overflow: hidden;
    --item-width: 323px;
    --item-margin: 25px;
}
@media (max-width: 1600px) {
    .page.home section.beginner {
        --item-width: 300px;
    }
}
@media (max-width: 1300px) {
    .page.home section.beginner {
        --item-width: 280px;
        --item-margin: 20px;
    }
}
@media (max-width: 1080px) {
    .page.home section.beginner {
        --item-width: 260px;
        --item-margin: 15px;
    }
}
@media (max-width: 800px) {
    .page.home section.beginner {
        --item-width: 240px;
        --item-margin: 10px;
    }
}
@media (max-width: 600px) {
    .page.home section.beginner {
        --item-width: 280px;
        --item-margin: 0;
    }
}
.page.home section.beginner .content {
    width: calc(var(--item-width) * 3 + var(--item-margin) * 2 * 3);
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 1080px) {
    .page.home section.beginner .content {
        width: calc(var(--item-width) * 2 + var(--item-margin) * 2 * 2);
    }
}
@media (max-width: 600px) {
    .page.home section.beginner .content {
        width: var(--item-width);
    }
}
.page.home section.beginner .section-title {
    margin-bottom: 1.5em;
}
.page.home section.beginner .items {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.page.home section.beginner .item {
    display: flex;
    width: var(--item-width);
    margin-bottom: 40px;
    margin-left: var(--item-margin);
    margin-right: var(--item-margin);
    padding: 10px 35px 35px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: radial-gradient(100% 100% at 100% 5%, rgba(112, 93, 242, 0.2) 0%, transparent 100%), #1c1134;
    flex-direction: column;
    align-items: center;
}
@media (max-width: 1600px) {
    .page.home section.beginner .item {
        padding: 10px 30px 35px;
    }
}
@media (max-width: 1300px) {
    .page.home section.beginner .item {
        padding: 10px 25px 30px;
    }
}
@media (max-width: 1080px) {
    .page.home section.beginner .item {
        padding: 10px 20px 25px;
    }
}
@media (max-width: 800px) {
    .page.home section.beginner .item {
        padding: 10px 15px 20px;
    }
}
@media (max-width: 600px) {
    .page.home section.beginner .item {
        padding: 10px 25px 30px;
    }
}
.page.home section.beginner .item .illustration {
    display: block;
    position: relative;
    top: -30px;
    width: 138px;
    height: 138px;
}
.page.home section.beginner .item .label {
    margin-bottom: 0.5em;
    
    font-weight: 700;
    line-height: 1.25em;
    font-size: 26px;
}
@media (max-width: 1300px) {
    .page.home section.beginner .item .label {
        font-size: 24px;
    }
}
@media (max-width: 1080px) {
    .page.home section.beginner .item .label {
        font-size: 22px;
    }
}
@media (max-width: 800px) {
    .page.home section.beginner .item .label {
        font-size: 20px;
    }
}
@media (max-width: 600px) {
    .page.home section.beginner .item .label {
        font-size: 18px;
    }
}
@media (max-width: 400px) {
    .page.home section.beginner .item .label {
        font-size: 18px;
    }
}
.page.home section.beginner .item .description {
    color: #cecece;
    opacity: 0.8;
}
.page.home section.faq {
    padding-top: 5vh;
    padding-bottom: 10vh;
}
.page.home section.faq .content {
    width: 876px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 1080px) {
    .page.home section.faq .content {
        width: auto;
        margin-left: var(--page-horizontal-padding);
        margin-right: var(--page-horizontal-padding);
    }
}
.page.home section.faq .section-title {
    width: 408px;
    margin-bottom: 1em;
}
@media (max-width: 1080px) {
    .page.home section.faq .section-title {
        width: calc(50% - 20px);
    }
}
@media (max-width: 600px) {
    .page.home section.faq .section-title {
        width: auto;
    }
}
.page.home section.faq .section-title strong {
    color: #705df2;
    font-weight: 800;
}
.page.home section.faq .columns {
    display: flex;
    justify-content: space-between;
}
@media (max-width: 600px) {
    .page.home section.faq .columns {
        display: block;
    }
}
.page.home section.faq .column {
    width: 408px;
}
@media (max-width: 1080px) {
    .page.home section.faq .column {
        width: calc(50% - 20px);
    }
}
@media (max-width: 600px) {
    .page.home section.faq .column {
        width: auto;
    }
}
.page.home section.faq .item {
    margin-bottom: 3em;
}
.page.home section.faq .question {
    margin-bottom: 1em;
    
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.02em;
}
.page.home section.faq .answer {
    opacity: 0.8;
}
.page.join .page-content .buttons-group .abyss-button {
    height: 58px;
}
.page.join .page-content .steps {
    position: relative;
}
.page.join .page-content .step {
    display: none;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-delay: 0;
    will-change: opacity;
    pointer-events: none;
}
.page.join .page-content .step.is-active {
    opacity: 1;
    transition-duration: 0.3s;
    pointer-events: auto;
}
.page.join .page-content .step-0 .process {
    margin-bottom: 2em;
}
.page.join .page-content .step-0 .voucher-container {
    height: 0;
    opacity: 0;
    overflow: hidden;
}
.page.join .page-content .step-0 .voucher-container .voucher-inner {
    display: inline-block;
    width: 100%;
}
.page.join .page-content .step-0 .voucher-container.is-visible {
    opacity: 1;
    height: auto;
}
.page.join .page-content .step-0 .voucher-container.is-animated {
    transition: height 0.3s 0.1s, opacity 0.2s;
}
.page.join .page-content .step-0 .voucher-container.is-animated.is-visible {
    transition: height 0.3s, opacity 0.3s 0.15s;
}
.page.join .page-content .step-1 .abyss-button .deeper {
    position: relative;
}
.page.join .page-content .step-1 .abyss-button .local-price {
    position: absolute;
    top: 100%;
    right: 0;
    opacity: 0.4;
    font-size: 13px;
}
@media (max-width: 600px) {
    .page.join .page-content .step-1 .abyss-button .non-important {
        display: none;
    }
}
.page.join .page-content .step-1 .abyss-button .price {
    white-space: nowrap;
}
.page.join .page-content .step-1 .voucher-messages {
    display: none;
}
.page.join .page-content .step-1 .voucher-messages.is-active {
    display: block;
}
.page.join .page-content .step-1 .stripe-container {
    min-height: 200px;
    transition-property: opacity;
    transition-duration: 0.3s;
    opacity: 0;
}
.page.join .page-content .step-1 .stripe-container.is-visible {
    opacity: 1;
}
.page.join .page-content .step-1 .stripe-element {
    margin-bottom: 1em;
}
.page.join .page-content .step-1 .stripe-message {
    margin-top: 1em;
    text-align: right;
    font-size: 16px;
}
@media (max-width: 800px) {
    .page.join .page-content .step-1 .stripe-message {
        font-size: 15px;
    }
}
@media (max-width: 600px) {
    .page.join .page-content .step-1 .stripe-message {
        font-size: 14px;
    }
}
@media (max-width: 400px) {
    .page.join .page-content .step-1 .stripe-message {
        font-size: 14px;
    }
}
.page.join .page-content .step-1 .stripe-message.has-error {
    color: #ff5b86;
}
.page.join .page-content .step-1 .stripe-message.has-success {
    color: #32ffce;
}
.page.join .page-content .loader {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition-property: opacity;
    transition-duration: 0.3s;
    opacity: 0;
    pointer-events: none;
}
.page.join .page-content .loader.is-active {
    opacity: 1;
    pointer-events: auto;
    transition-duration: 0.25s;
}
.page.join .page-content .loader .loading-label {
    opacity: 1;
    font-size: 0.75rem;
    line-height: 1em;
    margin-bottom: 8px;
    color: #a39bce;
}
.page.join .page-content .loader .dots {
    display: flex;
    align-items: center;
    justify-content: center;
}
.page.join .page-content .loader .dots .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: 3px;
    margin-right: 3px;
    background: #a39bce;
    animation: loader-dot 1s infinite linear;
}
.page.join .page-content .loader .dots .dot:nth-child(2) {
    animation-delay: 0.15s;
}
.page.join .page-content .loader .dots .dot:nth-child(3) {
    animation-delay: 0.3s;
}
@-moz-keyframes loader-dot {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes loader-dot {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes loader-dot {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes loader-dot {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.page.subscribeClosed .panel {
    width: 580px;
}
.page.subscribeClosed .panel .head {
    position: relative;
}
.page.subscribeClosed .panel .body {
    padding: 25px 40px 40px;
    font-size: 18px;
    text-align: center;
}
@media (max-width: 800px) {
    .page.subscribeClosed .panel .body {
        padding: 20px 30px 35px;
    }
}
@media (max-width: 600px) {
    .page.subscribeClosed .panel .body {
        padding: 15px 20px 30px;
    }
}
@media (max-width: 400px) {
    .page.subscribeClosed .panel .body {
        padding: 10px 15px 25px;
    }
}
.page.lessons {
    padding-top: var(--page-top-padding);
    background-color: #1a1a1a;
    color: #fff;
}
.page.lessons .player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media print {
    .page.lessons .player {
        display: none;
    }
}
.page.lessons .player-top {
    position: relative;
    width: 100%;
}
@media print {
    .page.lessons .player-top {
        display: none;
    }
}
.page.lessons .player-top .ratio-dummy {
    aspect-ratio: 1920/1080;
    margin-bottom: 28px;
    max-width: 100vw;
    max-height: calc(100vh - 155px);
}
.page.lessons .player-floating {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: calc(192px * 1.65);
    height: 206.2px;
    background: #202020;
    z-index: 4;
    will-change: transform;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 14px 40px #0009;
}
@media print {
    .page.lessons .player-floating {
        display: none !important;
    }
}
.page.lessons .player-floating.has-player {
    display: block;
}
.page.lessons .player-floating:hover .handle,
html.has-touch .page.lessons .player-floating .handle {
    opacity: 1;
    transition-duration: 0.15s;
    transition-delay: 0s;
}
.page.lessons .player-floating .player .video-area .tracks,
.page.lessons .player-floating .player .controls .subtitles {
    display: none;
}
.page.lessons .player-floating .handle {
    position: absolute;
    top: 0;
    width: 34px;
    height: 34px;
    z-index: 2;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.5s;
    transition-delay: 0.2s;
    will-change: opacity;
}
.page.lessons .player-floating .handle:hover .background {
    opacity: 0.8;
}
.page.lessons .player-floating .handle.is-disable {
    right: 64px;
    cursor: pointer;
}
.page.lessons .player-floating .handle.is-disable .icon {
    position: absolute;
    top: 50%;
    right: 50%;
}
.page.lessons .player-floating .handle.is-disable .icon .bar {
    position: absolute;
    top: -1px;
    left: -10px;
    width: 20px;
    height: 2px;
    background: #fff;
}
.page.lessons .player-floating .handle.is-disable .icon .bar.bar-1 {
    transform: rotate(-45deg);
}
.page.lessons .player-floating .handle.is-disable .icon .bar.bar-2 {
    transform: rotate(45deg);
}
.page.lessons .player-floating .handle.is-move {
    right: 34px;
    cursor: all-scroll;
}
.page.lessons .player-floating .handle.is-move .icon {
    position: absolute;
    top: calc(50% - 11px);
    left: calc(50% - 11px);
}
.page.lessons .player-floating .handle.is-resize {
    right: 0;
    cursor: ne-resize;
}
.page.lessons .player-floating .handle.is-resize .icon {
    position: absolute;
    top: calc(50% - 14px);
    right: calc(50% - 14px);
}
.page.lessons .player-floating .handle .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #131313;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.15s;
    will-change: opacity;
}
.page.lessons .lessons-list {
    position: fixed;
    top: calc(var(--page-top-padding) + 10px);
    bottom: 0;
    left: 0;
    width: 450px;
    z-index: 5;
    transform: translate(-100%);
    transition: transform 0.5s cubic-bezier(0.53, 0.21, 0, 1);
    will-change: transform;
}
@media (max-width: 600px) {
    .page.lessons .lessons-list {
        width: 340px;
    }
}
@media (max-width: 400px) {
    .page.lessons .lessons-list {
        width: calc(100vw - 45px);
    }
}
@media print {
    .page.lessons .lessons-list {
        display: none;
    }
}
.page.lessons .lessons-list.is-visible {
    transform: translate(0);
}
.page.lessons .lessons-list.is-visible .toggle-button .bar.bar-2 .inner {
    transform: translate(100%);
    transition-delay: 0.4s;
}
.page.lessons .lessons-list.is-visible .toggle-button .bar.bar-3 .inner {
    transform: translate(100%);
    transition-delay: 0.5s;
}
.page.lessons .lessons-list.is-visible .toggle-button .bar.bar-4 .inner {
    transform: translate(0);
    transition-delay: 0.6s;
}
.page.lessons .lessons-list.is-visible .toggle-button .bar.bar-5 .inner {
    transform: translate(0);
    transition-delay: 0.7s;
}
.page.lessons .lessons-list.is-down .shadow-overlay {
    opacity: 0;
}
.page.lessons .lessons-list .toggle-button {
    position: absolute;
    left: 100%;
    top: 12px;
    height: 47px;
    width: 47px;
    background: #282828;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    box-shadow: 0 14px 40px #0009;
    cursor: pointer;
}
@media (max-width: 400px) {
    .page.lessons .lessons-list .toggle-button {
        top: 0;
    }
}
.page.lessons .lessons-list .toggle-button:hover .hover {
    transform-origin: 0 0;
    transform: scaleX(1);
}
.page.lessons .lessons-list .toggle-button .shadow-fix {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}
.page.lessons .lessons-list .toggle-button .hover {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.05;
    transform: scaleX(0);
    transform-origin: 100% 100%;
    transition: transform 0.6s cubic-bezier(0.53, 0.21, 0, 1);
    will-change: transform;
}
.page.lessons .lessons-list .toggle-button .bar {
    position: absolute;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    overflow: hidden;
}
.page.lessons .lessons-list .toggle-button .bar.bar-1 {
    top: calc(50% - 1px);
    left: calc(50% - 10px);
}
.page.lessons .lessons-list .toggle-button .bar.bar-2 {
    top: calc(50% - 7px);
    left: calc(50% - 10px);
}
.page.lessons .lessons-list .toggle-button .bar.bar-2 .inner {
    transition-delay: 0.7s;
}
.page.lessons .lessons-list .toggle-button .bar.bar-3 {
    top: calc(50% + 5px);
    left: calc(50% - 10px);
}
.page.lessons .lessons-list .toggle-button .bar.bar-3 .inner {
    transition-delay: 0.6s;
}
.page.lessons .lessons-list .toggle-button .bar.bar-4 {
    top: calc(50% - 1px);
    left: calc(50% - 10px);
    width: 10px;
    transform-origin: 1px 1px;
    transform: rotate(-45deg);
}
.page.lessons .lessons-list .toggle-button .bar.bar-4 .inner {
    transform: translate(-100%);
    transition-delay: 0.5s;
}
.page.lessons .lessons-list .toggle-button .bar.bar-5 {
    top: calc(50% - 1px);
    left: calc(50% - 10px);
    width: 10px;
    transform-origin: 1px 1px;
    transform: rotate(45deg);
}
.page.lessons .lessons-list .toggle-button .bar.bar-5 .inner {
    transform: translate(-100%);
    transition-delay: 0.4s;
}
.page.lessons .lessons-list .toggle-button .bar .inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    background: #fff;
    transition: transform 0.2s;
    will-change: transform;
}
.page.lessons .lessons-list .scroll-container {
    position: absolute;
    top: 0;
    left: 10px;
    bottom: 10px;
    width: calc(100% - 10px);
    background: #0e0e0e;
    border-radius: 12px;
    box-shadow: 0 14px 40px #0009;
    overflow: hidden;
}
@media (max-width: 400px) {
    .page.lessons .lessons-list .scroll-container {
        left: 0;
        width: 100%;
        border-top-right-radius: 0;
    }
}
.page.lessons .lessons-list .scroll-mover {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 40px);
    height: 100%;
    overflow-y: scroll;
}
.page.lessons .lessons-list .shadow-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 220px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.533), rgba(0, 0, 0, 0));
    opacity: 1;
    transition: opacity 0.3s;
    pointer-events: none;
}
.page.lessons .lessons-list .chapter-container {
    width: 440px;
}
@media (max-width: 600px) {
    .page.lessons .lessons-list .chapter-container {
        width: 330px;
    }
}
@media (max-width: 400px) {
    .page.lessons .lessons-list .chapter-container {
        width: calc(100% - 40px);
    }
}
.page.lessons .lessons-list .chapter {
    display: flex;
    position: relative;
    background: #1a1a1a;
    padding: 15px 20px 15px 80px;
    border-radius: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
@media (max-width: 600px) {
    .page.lessons .lessons-list .chapter {
        padding-left: 55px;
    }
}
html.has-no-user .page.lessons .lessons-list .chapter {
    padding-left: 30px;
}
@media (max-width: 600px) {
    html.has-no-user .page.lessons .lessons-list .chapter {
        padding-left: 15px;
    }
}
.page.lessons .lessons-list .chapter.is-done .title {
    color: #32ffce;
}
.page.lessons .lessons-list .chapter.is-done .progress .circle .fill circle {
    stroke: #32ffce;
}
.page.lessons .lessons-list .chapter.is-done .progress .percentage {
    color: #32ffce;
}
.page.lessons .lessons-list .chapter .label {
    
    font-weight: 700;
    font-size: 0.9rem;
}
.page.lessons .lessons-list .chapter .title {
    
    font-weight: 700;
    font-size: 1.75rem;
    color: #705df2;
    line-height: 1em;
    margin-bottom: 0.15em;
}
.page.lessons .lessons-list .chapter .progress {
    position: absolute;
    top: calc(50% - 19px);
    left: 24px;
}
@media (max-width: 600px) {
    .page.lessons .lessons-list .chapter .progress {
        left: 6px;
    }
}
html.has-no-user .page.lessons .lessons-list .chapter .progress {
    display: none;
}
.page.lessons .lessons-list .chapter .progress .circle {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 38px;
    height: 38px;
}
.page.lessons .lessons-list .chapter .progress .circle svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page.lessons .lessons-list .chapter .progress .circle .full circle {
    stroke: #2f2f2f;
}
.page.lessons .lessons-list .chapter .progress .circle .fill {
    transform: rotate(-90deg);
}
.page.lessons .lessons-list .chapter .progress .circle .fill circle {
    stroke: #705df2;
    transition: stroke-dashoffset 0.3s;
}
.page.lessons .lessons-list .chapter .progress .percentage {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 36px;
    
    font-weight: 700;
    font-size: 0.75rem;
    color: #705df2;
}
.page.lessons .lessons-list .list {
    padding-top: 5px;
    padding-bottom: 5px;
}
.page.lessons .lessons-list .list:hover .lesson:not(:hover).is-current .background:after {
    transform-origin: 100% 100%;
    transform: scaleX(0);
}
.page.lessons .lessons-list .lesson {
    display: block;
    position: relative;
}
.page.lessons .lessons-list .lesson.is-current .link .background:after {
    transform-origin: 0 0;
    transform: scaleX(1);
}
.page.lessons .lessons-list .lesson.is-current .link .title {
    opacity: 1;
}
.page.lessons .lessons-list .lesson.is-active .status .icon .active,
.page.lessons .lessons-list .lesson.is-done .status .icon .done {
    transform: scale(1);
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.52, 2.67, 0.61, 0.6);
}
.page.lessons .lessons-list .lesson.is-was-done.is-current .status .icon .active {
    background: #32ffce;
}
.page.lessons .lessons-list .lesson.is-was-done.is-current .status .icon .active .inner svg * {
    fill: #202020;
}
.page.lessons .lessons-list .lesson .link {
    display: block;
    padding: 16px 75px;
}
@media (max-width: 600px) {
    .page.lessons .lessons-list .lesson .link {
        padding-left: 55px;
        padding-right: 55px;
    }
}
@media (max-width: 400px) {
    .page.lessons .lessons-list .lesson .link {
        padding-right: 20px;
    }
}
.page.lessons .lessons-list .lesson .link:hover .background:after {
    transform-origin: 0 0;
    transform: scaleX(1);
}
.page.lessons .lessons-list .lesson .link:hover .title,
.page.lessons .lessons-list .lesson .link:hover .badge.is-sneak-peek {
    opacity: 1;
}
.page.lessons .lessons-list .lesson .link .background {
    position: absolute;
    top: 0;
    left: 12px;
    right: 0;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}
@media (max-width: 600px) {
    .page.lessons .lessons-list .lesson .link .background {
        left: 5px;
        right: 5px;
    }
}
@media (max-width: 400px) {
    .page.lessons .lessons-list .lesson .link .background {
        left: 0;
        right: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}
.page.lessons .lessons-list .lesson .link .background:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.05;
    transform: scaleX(0);
    transform-origin: 100% 100%;
    transition: transform 0.6s cubic-bezier(0.53, 0.21, 0, 1);
    will-change: transform;
}
.page.lessons .lessons-list .lesson .link .title {
    display: block;
    position: relative;
    font-weight: 400;
    line-height: 1.35em;
    opacity: 0.5;
    transition: opacity 0.3s;
}
.page.lessons .lessons-list .lesson .link .badge {
    position: absolute;
    top: -3px;
    right: 0;
    padding: 4px 8px;
    background: #705df2;
    border-radius: 8px;
    font-size: 0.8rem;
}
.page.lessons .lessons-list .lesson .link .badge.is-sneak-peek {
    background: #666;
    opacity: 0;
    transition: opacity 0.15s;
}
.page.lessons .lessons-list .lesson .link .duration {
    position: absolute;
    top: calc(50% - 0.4em);
    right: 32px;
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.35;
}
@media (max-width: 600px) {
    .page.lessons .lessons-list .lesson .link .duration {
        right: 13px;
    }
}
@media (max-width: 400px) {
    .page.lessons .lessons-list .lesson .link .duration {
        display: none;
    }
}
.page.lessons .lessons-list .lesson .status {
    display: block;
    position: absolute;
    top: 0;
    left: 26px;
    width: 40px;
    height: 100%;
}
@media (max-width: 600px) {
    .page.lessons .lessons-list .lesson .status {
        left: 5px;
    }
}
html.has-user .page.lessons .lessons-list .lesson .status {
    cursor: alias;
}
html.has-no-user .page.lessons .lessons-list .lesson .status {
    pointer-events: none;
}
.page.lessons .lessons-list .lesson .status .icon {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
}
html.has-user .page.lessons .lessons-list .lesson .status .icon {
    cursor: alias;
}
.page.lessons .lessons-list .lesson .status .icon .to-do {
    display: block;
    position: absolute;
    top: -9px;
    left: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
}
.page.lessons .lessons-list .lesson .status .icon .done {
    display: block;
    position: absolute;
    top: -13px;
    left: -13px;
    width: 26px;
    height: 26px;
    background: #32ffce;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.2s ease-in;
    will-change: transform;
}
.page.lessons .lessons-list .lesson .status .icon .done .inner {
    position: absolute;
    top: calc(50% - 5px);
    left: calc(50% - 6px);
    width: 12px;
    height: 10px;
}
.page.lessons .lessons-list .lesson .status .icon .done .inner svg {
    display: block;
    width: 100%;
    height: 100%;
}
.page.lessons .lessons-list .lesson .status .icon .done .inner svg * {
    fill: #202020;
}
.page.lessons .lessons-list .lesson .status .icon .active {
    display: block;
    position: absolute;
    top: -15px;
    left: -15px;
    width: 29px;
    height: 29px;
    background: #705df2;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.2s ease-in;
    will-change: transform;
}
.page.lessons .lessons-list .lesson .status .icon .active .inner {
    position: absolute;
    top: calc(50% - 6px);
    left: calc(50% - 4px);
    width: 10px;
    height: 11px;
}
.page.lessons .lessons-list .lesson .status .icon .active .inner svg {
    display: block;
    width: 100%;
    height: 100%;
}
.page.lessons .lessons-list .lesson .status .icon .active .inner svg * {
    fill: #fff;
}
.page.lessons .tabs {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 500px;
    z-index: 5;
}
@media (max-width: 1080px) {
    .page.lessons .tabs {
        width: 400px;
    }
}
@media (max-width: 800px) {
    .page.lessons .tabs {
        width: 360px;
    }
}
@media (max-width: 400px) {
    .page.lessons .tabs {
        width: calc(100% - 15px);
    }
}
@media print {
    .page.lessons .tabs {
        display: none;
    }
}
.page.lessons .tabs .tabs-buttons {
    display: flex;
    position: absolute;
    bottom: 100%;
    left: 0;
    height: 47px;
    width: 100%;
    border-top-left-radius: 15px;
}
@media (max-width: 1080px) {
    .page.lessons .tabs .tabs-buttons {
        left: auto;
        right: 0;
        width: 94px;
    }
}
.page.lessons .tabs .tabs-button {
    display: flex;
    align-items: center;
    position: relative;
    width: 50%;
    height: 47px;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    background: #1a1a1a;
}
.page.lessons .tabs .tabs-button:first-child {
    border-top-left-radius: 15px;
}
.page.lessons .tabs .tabs-button.is-scroll-up {
    position: absolute;
    right: calc(100% + 5px);
    bottom: 0;
    width: 55px;
    border-top-right-radius: 15px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.53, 0.21, 0, 1);
    will-change: transform;
}
@media (max-width: 1080px) {
    .page.lessons .tabs .tabs-button.is-scroll-up {
        right: 99px;
        width: 47px;
    }
}
.page.lessons .tabs .tabs-button.is-scroll-up.is-active {
    transform: translateY(0);
}
.page.lessons .tabs .tabs-button.is-scroll-up .icons {
    left: 50%;
}
.page.lessons .tabs .tabs-button:hover .hover {
    transform-origin: 0 0;
    transform: scaleX(1);
}
.page.lessons .tabs .tabs-button:hover .icon.is-scroll-up svg .arrow {
    animation: scroll-up-icon 2s infinite;
}
@-moz-keyframes scroll-up-icon {
    0% {
        transform: translateY(0);
    }
    10% {
        transform: translateY(6px);
    }
    20% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(6px);
    }
    40% {
        transform: translateY(0);
    }
}
@-webkit-keyframes scroll-up-icon {
    0% {
        transform: translateY(0);
    }
    10% {
        transform: translateY(6px);
    }
    20% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(6px);
    }
    40% {
        transform: translateY(0);
    }
}
@-o-keyframes scroll-up-icon {
    0% {
        transform: translateY(0);
    }
    10% {
        transform: translateY(6px);
    }
    20% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(6px);
    }
    40% {
        transform: translateY(0);
    }
}
@keyframes scroll-up-icon {
    0% {
        transform: translateY(0);
    }
    10% {
        transform: translateY(6px);
    }
    20% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(6px);
    }
    40% {
        transform: translateY(0);
    }
}
.page.lessons .tabs .tabs-button:hover .icon.is-link svg path {
    stroke-dashoffset: 66px;
}
.page.lessons .tabs .tabs-button:hover .icon.is-list .row:nth-child(1) .line {
    transform: scaleX(0.4);
}
.page.lessons .tabs .tabs-button:hover .icon.is-list .row:nth-child(2) .line {
    transform: scaleX(1);
}
.page.lessons .tabs .tabs-button:hover .icon.is-list .row:nth-child(3) .line {
    transform: scaleX(0.7);
}
.page.lessons .tabs .tabs-button .hover {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.05;
    transform: scaleX(0);
    transform-origin: 100% 100%;
    transition: transform 0.6s cubic-bezier(0.53, 0.21, 0, 1);
    will-change: transform;
}
.page.lessons .tabs .tabs-button .icons {
    position: absolute;
    top: 50%;
    left: 38px;
}
@media (max-width: 1080px) {
    .page.lessons .tabs .tabs-button .icons {
        left: 25px;
    }
}
.page.lessons .tabs .tabs-button .icon.is-scroll-up {
    display: block;
    position: absolute;
    top: -9px;
    left: -8px;
    width: 16px;
    height: 21px;
    opacity: 0.5;
}
.page.lessons .tabs .tabs-button .icon.is-scroll-up svg {
    display: block;
    width: 100%;
    height: 100%;
}
.page.lessons .tabs .tabs-button .icon.is-link {
    display: block;
    position: absolute;
    top: -7px;
    left: -15px;
    width: 29px;
    height: 14px;
    opacity: 0.5;
}
.page.lessons .tabs .tabs-button .icon.is-link svg {
    display: block;
    width: 100%;
    height: 100%;
}
.page.lessons .tabs .tabs-button .icon.is-link svg path {
    stroke-dasharray: 33px;
    stroke-dashoffset: 0px;
    transition: stroke-dashoffset 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.page.lessons .tabs .tabs-button .icon.is-list {
    display: block;
    position: absolute;
    top: -8px;
    left: -15px;
    opacity: 0.5;
    font-size: 0;
}
.page.lessons .tabs .tabs-button .icon.is-list * {
    display: block;
}
.page.lessons .tabs .tabs-button .icon.is-list .row {
    position: relative;
    width: 30px;
    height: 4px;
    margin-bottom: 3px;
}
.page.lessons .tabs .tabs-button .icon.is-list .row .dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 4px;
    background: #fff;
}
.page.lessons .tabs .tabs-button .icon.is-list .row .line {
    position: absolute;
    top: 1px;
    left: 8px;
    right: 0;
    height: 2px;
    background: #fff;
    transform-origin: 0 0;
    transition: transform 0.3s;
}
.page.lessons .tabs .tabs-button .icon.is-list .row:nth-child(1) .line {
    transform: scaleX(0.7);
}
.page.lessons .tabs .tabs-button .icon.is-list .row:nth-child(2) .line {
    transform: scaleX(0.4);
}
.page.lessons .tabs .tabs-button .icon.is-list .row:nth-child(3) .line {
    transform: scaleX(1);
}
.page.lessons .tabs .tabs-button .label {
    position: relative;
    margin-left: 70px;
    
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.8;
}
@media (max-width: 400px) {
    .page.lessons .tabs .tabs-button .label {
        display: none;
    }
}
.page.lessons .tabs .tabs-button .inactive-shade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.133), rgba(0, 0, 0, 0.4));
    opacity: 0;
    transition: opacity 0.3s;
}
.page.lessons .tabs .tabs-mover {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 500px;
    max-height: calc(100vh - 90px);
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.53, 0.21, 0, 1);
    will-change: transform;
    box-shadow: 0 -40px 40px #0009;
}
@media (max-width: 1080px) {
    .page.lessons .tabs .tabs-mover {
        box-shadow: 0 0 40px #0009;
        border-top-left-radius: 15px;
    }
}
.page.lessons .tabs .tabs-mover.is-visible {
    transform: translate(0);
}
.page.lessons .tabs .tabs-mover.is-visible .tabs-button:not(.is-active) .inactive-shade {
    opacity: 1;
}
.page.lessons .tabs .tabs-mover .tabs-targets {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    overflow: hidden;
}
@media (max-width: 1080px) {
    .page.lessons .tabs .tabs-mover .tabs-targets {
        border-top-left-radius: 15px;
    }
}
.page.lessons .tabs .tabs-mover .tabs-target {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.page.lessons .tabs .tabs-mover .tabs-target.is-active {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.2s;
}
.page.lessons .tabs .tabs-mover .tabs-target .links li,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content li {
    padding-left: 1.75em;
}
.page.lessons .tabs .tabs-mover .tabs-target .links li:before,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content li:before {
    top: calc(0.8em - 4px);
    width: 6px;
    height: 6px;
    border-radius: 3px;
}
.page.lessons .tabs .tabs-mover .tabs-target .links li:hover .link .video-jump,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content li:hover .link .video-jump {
    opacity: 0.5;
}
.page.lessons .tabs .tabs-mover .tabs-target .links li:hover .link .video-jump:hover,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content li:hover .link .video-jump:hover {
    opacity: 1;
}
.page.lessons .tabs .tabs-mover .tabs-target .links li:last-child > .link:not(.is-parent) .path,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content li:last-child > .link:not(.is-parent) .path {
    display: none;
}
.page.lessons .tabs .tabs-mover .tabs-target .links:hover .link .label,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content:hover .link .label {
    opacity: 0.5;
}
.page.lessons .tabs .tabs-mover .tabs-target .links:hover .link:hover .label,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content:hover .link:hover .label {
    opacity: 1;
}
.page.lessons .tabs .tabs-mover .tabs-target .links.is-source-player .link.is-active + ul .dot .disc,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content.is-source-player .link.is-active + ul .dot .disc {
    transform: scale(1.5);
    background: #705df2;
}
.page.lessons .tabs .tabs-mover .tabs-target .links .link,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link {
    position: relative;
    display: block;
    color: #fff;
    text-decoration: none;
    padding-top: 5px;
    padding-bottom: 5px;
}
.page.lessons .tabs .tabs-mover .tabs-target .links .link.is-done .dot .disc,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link.is-done .dot .disc {
    transform: scale(0.0001);
}
.page.lessons .tabs .tabs-mover .tabs-target .links .link.is-done .dot .check,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link.is-done .dot .check {
    transform: scale(1);
}
.page.lessons .tabs .tabs-mover .tabs-target .links .link.is-active .dot .disc,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link.is-active .dot .disc {
    transform: scale(1.5);
    background: #705df2;
}
.page.lessons .tabs .tabs-mover .tabs-target .links .link.is-default .path .line,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link.is-default .path .line {
    position: absolute;
    top: -4px;
    left: -1px;
    display: block;
    width: 2px;
    height: 8px;
    background: #555;
}
.page.lessons .tabs .tabs-mover .tabs-target .links .link.is-parent .path .line,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link.is-parent .path .line {
    position: absolute;
    top: -4px;
    left: -1px;
    display: block;
    width: 11px;
    height: calc(1em + 4px);
    border-left: 2px solid #555;
    border-bottom: 2px solid #555;
    border-bottom-left-radius: 8px;
}
.page.lessons .tabs .tabs-mover .tabs-target .links .link .label,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link .label {
    transition: opacity 0.15s;
}
.page.lessons .tabs .tabs-mover .tabs-target .links .link .video-jump,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link .video-jump {
    margin-left: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}
.page.lessons .tabs .tabs-mover .tabs-target .links .link .dot,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link .dot {
    position: absolute;
    top: 50%;
    left: -20px;
    width: 0;
    height: 0;
}
.page.lessons .tabs .tabs-mover .tabs-target .links .link .dot .disc,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link .dot .disc {
    display: block;
    position: absolute;
    top: -3px;
    left: -3px;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #555;
    transition: transform 0.15s;
}
.page.lessons .tabs .tabs-mover .tabs-target .links .link .dot .check,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link .dot .check {
    display: block;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 10px;
    height: 9px;
    transition: transform 0.15s;
    transform: scale(0.0001);
}
.page.lessons .tabs .tabs-mover .tabs-target .links .link .dot .check svg,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link .dot .check svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page.lessons .tabs .tabs-mover .tabs-target .links .link .dot .check svg *,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link .dot .check svg * {
    fill: #32ffce;
}
.page.lessons .tabs .tabs-mover .tabs-target .links .link .path,
.page.lessons .tabs .tabs-mover .tabs-target .table-of-content .link .path {
    position: absolute;
    bottom: 0;
    left: -20px;
    width: 0;
    height: 0;
}
.page.lessons .tabs .tabs-mover .tabs-target .join-message {
    margin-top: 1.5em;
}
.page.lessons .tabs .tabs-mover .tabs-target .join-message .inner {
    padding: 20px 30px;
    background: #202020;
    border-radius: 15px;
}
@media (max-width: 800px) {
    .page.lessons .tabs .tabs-mover .tabs-target .join-message .alternative.alternative.is-large {
        display: none;
    }
    .page.lessons .tabs .tabs-mover .tabs-target .join-message .alternative.alternative.is-small {
        display: inline;
    }
}
.page.lessons .tabs .tabs-mover .tabs-target .join-message .alternative.is-small {
    display: none;
}
.page.lessons .tabs .tabs-mover .scroll-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.page.lessons .tabs .tabs-mover .scroll-mover {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 40px);
    height: 100%;
    padding: 25px 55px 25px 25px;
    overflow-y: scroll;
}
.page.lessons .tabs .tabs-mover .shadow-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 220px;
    background: url(../images/bottom-shadow-gradient.png);
    opacity: 1;
    transition: opacity 0.3s;
    pointer-events: none;
}
.page.lessons .main {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.page.lessons .main .content {
    margin-bottom: 2em;
}
.page.lessons .main .content.width-1792 {
    max-width: 1792px;
}
@media (max-width: 2150px) {
    .page.lessons .main .content.width-1792 {
        max-width: 1344px;
    }
}
.page.lessons .main .content.width-1536 {
    max-width: 1536px;
}
@media (max-width: 1600px) {
    .page.lessons .main .content.width-1536 {
        max-width: 1024px;
    }
}
.page.lessons .main .content .text:not(.links) {
    margin-top: 4em;
    margin-bottom: 4em;
}
.page.lessons .main .content .text:not(.links) > h2,
.page.lessons .main .content .text:not(.links) > h3,
.page.lessons .main .content .text:not(.links) > h4,
.page.lessons .main .content .text:not(.links) > h5,
.page.lessons .main .content .text:not(.links) > .h2,
.page.lessons .main .content .text:not(.links) > .h3,
.page.lessons .main .content .text:not(.links) > .h4,
.page.lessons .main .content .text:not(.links) > .h5,
.page.lessons .main .content .text:not(.links) > ul,
.page.lessons .main .content .text:not(.links) > ol,
.page.lessons .main .content .text:not(.links) > p:not(.is-image),
.page.lessons .main .content .text:not(.links) > pre {
    margin-left: 280px;
    margin-right: 280px;
}
@media (max-width: 2150px) {
    .page.lessons .main .content .text:not(.links) > h2,
    .page.lessons .main .content .text:not(.links) > h3,
    .page.lessons .main .content .text:not(.links) > h4,
    .page.lessons .main .content .text:not(.links) > h5,
    .page.lessons .main .content .text:not(.links) > .h2,
    .page.lessons .main .content .text:not(.links) > .h3,
    .page.lessons .main .content .text:not(.links) > .h4,
    .page.lessons .main .content .text:not(.links) > .h5,
    .page.lessons .main .content .text:not(.links) > ul,
    .page.lessons .main .content .text:not(.links) > ol,
    .page.lessons .main .content .text:not(.links) > p:not(.is-image),
    .page.lessons .main .content .text:not(.links) > pre {
        margin-left: 200px;
        margin-right: 200px;
    }
}
@media (max-width: 1600px) {
    .page.lessons .main .content .text:not(.links) > h2,
    .page.lessons .main .content .text:not(.links) > h3,
    .page.lessons .main .content .text:not(.links) > h4,
    .page.lessons .main .content .text:not(.links) > h5,
    .page.lessons .main .content .text:not(.links) > .h2,
    .page.lessons .main .content .text:not(.links) > .h3,
    .page.lessons .main .content .text:not(.links) > .h4,
    .page.lessons .main .content .text:not(.links) > .h5,
    .page.lessons .main .content .text:not(.links) > ul,
    .page.lessons .main .content .text:not(.links) > ol,
    .page.lessons .main .content .text:not(.links) > p:not(.is-image),
    .page.lessons .main .content .text:not(.links) > pre {
        margin-left: 45px;
        margin-right: 45px;
    }
}
@media (max-width: 1080px) {
    .page.lessons .main .content .text:not(.links) > h2,
    .page.lessons .main .content .text:not(.links) > h3,
    .page.lessons .main .content .text:not(.links) > h4,
    .page.lessons .main .content .text:not(.links) > h5,
    .page.lessons .main .content .text:not(.links) > .h2,
    .page.lessons .main .content .text:not(.links) > .h3,
    .page.lessons .main .content .text:not(.links) > .h4,
    .page.lessons .main .content .text:not(.links) > .h5,
    .page.lessons .main .content .text:not(.links) > ul,
    .page.lessons .main .content .text:not(.links) > ol,
    .page.lessons .main .content .text:not(.links) > p:not(.is-image),
    .page.lessons .main .content .text:not(.links) > pre {
        margin-left: 10px;
        margin-right: 10px;
    }
}
.page.lessons .main .details {
    display: flex;
    background: #705df2;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
@media (max-width: 600px) {
    .page.lessons .main .details {
        display: block;
    }
}
@media print {
    .page.lessons .main .details {
        display: block;
    }
}
.page.lessons .main .details .side {
    flex-grow: 1;
    padding: 40px 45px;
}
@media (max-width: 1300px) {
    .page.lessons .main .details .side {
        padding: 35px 35px 30px;
    }
}
@media (max-width: 1080px) {
    .page.lessons .main .details .side {
        width: auto;
        padding: 30px 25px;
    }
}
@media (max-width: 800px) {
    .page.lessons .main .details .side {
        padding: 25px 20px;
    }
}
.page.lessons .main .details .informations {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}
@media (max-width: 600px) {
    .page.lessons .main .details .informations {
        width: auto;
    }
}
@media print {
    .page.lessons .main .details .informations {
        width: auto;
        text-align: center;
    }
}
.page.lessons .main .details .informations .current-lesson .label {
    margin-bottom: 0.25em;
    font-size: 1.2em;
    
    font-weight: 500;
    letter-spacing: -0.05em;
}
.page.lessons .main .details .informations .current-lesson .title {
    margin-bottom: 0.5em;
    font-size: 2rem;
    
    font-weight: 800;
    line-height: 1.25em;
}
.page.lessons .main .details .informations .current-lesson .mandatory,
.page.lessons .main .details .informations .current-lesson .difficulty {
    font-size: 0.9rem;
}
.page.lessons .main .details .informations .current-lesson .difficulty .value {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 4px;
    border: 1px solid #fff;
    font-weight: 700;
}
.page.lessons .main .details .informations .sibling {
    position: relative;
}
.page.lessons .main .details .informations .sibling.is-previous {
    left: -10px;
}
.page.lessons .main .details .informations .sibling.is-previous .arrow {
    transform: rotate(90deg);
}
.page.lessons .main .details .informations .sibling.is-previous .sibling-link .sibling-info {
    align-items: flex-start;
    left: 0;
    padding: 12px 20px 12px 40px;
}
.page.lessons .main .details .informations .sibling.is-next {
    left: 10px;
}
.page.lessons .main .details .informations .sibling.is-next .arrow {
    transform: rotate(-90deg);
}
.page.lessons .main .details .informations .sibling.is-next .sibling-link .sibling-info {
    align-items: flex-end;
    right: 0;
    padding: 12px 40px 12px 20px;
}
.page.lessons .main .details .informations .sibling .sibling-link {
    display: block;
    position: relative;
    width: 40px;
    height: 40px;
}
.page.lessons .main .details .informations .sibling .sibling-link:hover .sibling-info {
    opacity: 1;
    pointer-events: auto;
}
.page.lessons .main .details .informations .sibling .sibling-link .sibling-info {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    background: #6251d6;
    border-radius: 12px;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
.page.lessons .main .details .informations .sibling .sibling-link .sibling-info .sibling-title {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.2em;
    
    font-weight: 700;
    letter-spacing: -0.05em;
    white-space: nowrap;
}
.page.lessons .main .details .informations .sibling .arrow {
    display: block;
    position: absolute;
    top: calc(50% - 4px);
    left: calc(50% - 6px);
    right: 20px;
    width: 11px;
    height: 7px;
}
.page.lessons .main .details .informations .sibling .arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}
.page.lessons .main .details .informations .sibling .arrow svg * {
    fill: #fff;
    opacity: 1;
}
.page.lessons .main .details .aside {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.133);
    padding-right: 10px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
@media (max-width: 600px) {
    .page.lessons .main .details .aside {
        width: auto;
        border-top-left-radius: 0;
    }
}
@media print {
    .page.lessons .main .details .aside {
        display: none;
    }
}
.page.lessons .main .details .aside .title {
    margin-bottom: 1em;
}
.page.lessons .main .details .aside .title .icon {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 19px;
}
.page.lessons .main .details .aside .title .icon svg {
    display: block;
    width: 100%;
    height: 100%;
}
.page.lessons .main .details .aside .title .icon svg * {
    fill: #fff;
}
.page.lessons .main .details .aside .title > .label {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    font-size: 1.2em;
    
    font-weight: 700;
    letter-spacing: -0.05em;
}
.page.lessons .main .details .aside .aside-section:not(:last-child) {
    margin-bottom: 1.25em;
}
.page.lessons .main .details .aside .files .info-button {
    margin-left: 1em;
}
@media (max-width: 1080px) {
    .page.lessons .main .details .aside .files .button {
        margin-bottom: 0.25rem;
    }
}
.page.lessons .main .details .aside .files .button .label {
    margin-left: 20px;
    margin-right: 20px;
}
.page.lessons .main .details .aside .files .starter {
    background: #fff;
}
.page.lessons .main .details .aside .files .starter .label {
    opacity: 1;
    color: #705df2;
}
.page.lessons .main .details .aside .files .starter .hover {
    background: #705df2;
}
.page.lessons .main .details .aside .files .final {
    color: #fff;
}
.page.lessons .main .details .aside .files .final .label {
    opacity: 1;
}
.page.lessons .main .details .aside .info-button {
    display: inline-block;
    padding-top: 6px;
    padding-bottom: 6px;
}
.page.lessons .main .details .aside .info-button.is-link .label {
    text-decoration: none;
    text-decoration-style: dashed;
    text-underline-position: under;
}
.page.lessons .main .details .aside .info-button .icon {
    display: inline-block;
    vertical-align: middle;
    width: 17px;
    height: 17px;
}
.page.lessons .main .details .aside .info-button .icon svg {
    display: block;
    width: 100%;
    height: 100%;
}
.page.lessons .main .details .aside .info-button .icon svg * {
    fill: #fff;
}
.page.lessons .main .details .aside .info-button .label {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
}
.page.lessons .text .has-anchor {
    position: relative;
}
.page.lessons .text .has-anchor:hover .anchor .link svg {
    opacity: 0.3;
}
.page.lessons .text .has-anchor:hover .anchor .link:hover svg {
    opacity: 1;
}
.page.lessons .text .anchor {
    position: absolute;
    top: 0;
    left: 0;
}
@media (max-width: 1080px) {
    .page.lessons .text .anchor {
        position: static;
    }
}
.page.lessons .text .anchor .target {
    position: absolute;
    top: -80px;
    left: 0;
}
.page.lessons .text .anchor .link {
    position: absolute;
    top: 3px;
    right: 0;
    width: 50px;
    height: 1em;
    line-height: 1em;
    cursor: pointer;
    white-space: nowrap;
}
@media (max-width: 1080px) {
    .page.lessons .text .anchor .link {
        position: relative;
        top: 0;
    }
}
.page.lessons .text .anchor .link svg {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 4px;
    height: 100%;
    opacity: 0;
    transition: opacity 0.1s;
}
@media (max-width: 1080px) {
    .page.lessons .text .anchor .link svg {
        position: static;
        vertical-align: middle;
    }
}
.page.lessons .text .anchor .link .copied {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 100%;
    font-weight: 400;
    font-size: 13px;
    opacity: 0;
    transition: opacity 1s;
}
@media (max-width: 1080px) {
    .page.lessons .text .anchor .link .copied {
        position: static;
        vertical-align: middle;
    }
}
.page.lessons .text .anchor .link .copied:after {
    content: "copied";
}
.page.lessons .text .anchor .link .copied.is-visible {
    opacity: 1;
    transition-duration: 0s;
}
.page.lessons .text .is-fade-out {
    position: relative;
}
.page.lessons .text .is-fade-out:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 120px;
    background-image: linear-gradient(rgba(26, 26, 26, 0), #1a1a1a);
    pointer-events: none;
}
.page.lessons .text .join-message {
    display: flex;
    justify-content: center;
    margin-top: 5em;
}
.page.lessons .text .join-message .inner {
    width: 50%;
    padding: 40px 60px;
    background: #202020;
    border-radius: 15px;
    text-align: center;
}
@media (max-width: 1080px) {
    .page.lessons .text .join-message .inner {
        width: 60%;
    }
}
@media (max-width: 800px) {
    .page.lessons .text .join-message .inner {
        width: 75%;
    }
}
@media (max-width: 600px) {
    .page.lessons .text .join-message .inner {
        width: auto;
    }
}
.page.lessons .text .join-message .buttons {
    margin-top: 2em;
}
.page.lessons .end {
    display: flex;
    position: relative;
    width: 100%;
    padding: 45px;
    background: #705df2;
    border-radius: 12px;
    justify-content: space-between;
}
@media (max-width: 800px) {
    .page.lessons .end {
        padding: 30px 35px;
    }
}
@media (max-width: 600px) {
    .page.lessons .end {
        display: block;
        padding: 30px 25px;
    }
}
@media (max-width: 400px) {
    .page.lessons .end {
        padding: 25px 20px;
    }
}
@media print {
    .page.lessons .end {
        display: none;
    }
}
.page.lessons .end .left {
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 600px) {
    .page.lessons .end .left {
        margin-right: 0;
        margin-bottom: 2rem;
    }
}
.page.lessons .end .sur-title {
    margin-bottom: 0.25em;
    font-size: 1.2em;
    
    font-weight: 500;
    letter-spacing: -0.05em;
}
.page.lessons .end .title {
    font-size: 2rem;
    
    font-weight: 800;
    line-height: 1.25em;
}
.page.lessons .end .button {
    height: 80px;
    margin-right: 0;
    background: #fff;
}
.page.lessons .end .button .label {
    text-align: left;
    color: #705df2;
}
.page.lessons .end .button .hover {
    background: #705df2;
}
.page.lessons .end .button .icon {
    margin-left: 25px;
    margin-right: 25px;
}
.page.lessons .end .button .icon .default svg {
    display: block;
}
.page.lessons .end .button .icon .default svg * {
    fill: #705df2;
}
.page.lessons .end .button .icon .disc {
    background: #705df2;
}
.page.lessons .end .button .icon .disc .inner svg * {
    fill: #fff;
}
.page.login .page-title {
    margin-bottom: 1em;
    font-size: 48px;
    text-align: left;
}
@media (max-width: 1300px) {
    .page.login .page-title {
        font-size: 44px;
    }
}
@media (max-width: 1080px) {
    .page.login .page-title {
        font-size: 40px;
    }
}
@media (max-width: 800px) {
    .page.login .page-title {
        font-size: 36px;
    }
}
@media (max-width: 600px) {
    .page.login .page-title {
        font-size: 32px;
    }
}
@media (max-width: 400px) {
    .page.login .page-title {
        font-size: 28px;
    }
}
@media (max-width: 800px) {
    .page.login .page-title {
        text-align: center;
    }
}
.page.login .container {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: auto;
}
@media (max-width: 1080px) {
    .page.login .container {
        width: 100%;
    }
}
.page.login .abyss-form {
    width: 430px;
}
@media (max-width: 1080px) {
    .page.login .abyss-form {
        width: 400px;
    }
}
.page.login .submit {
    display: block;
    width: 100%;
}
.page.login .illustration {
    position: relative;
    width: 320px;
    margin-left: 80px;
    overflow: hidden;
    border-radius: 14px;
}
@media (max-width: 1080px) {
    .page.login .illustration {
        width: 280px;
        margin-left: 40px;
    }
}
@media (max-width: 800px) {
    .page.login .illustration {
        display: none;
    }
}
.page.login .illustration:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 5px 5px 20px #0004 inset;
}
.page.login .illustration img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 30px);
    height: 100%;
    object-fit: cover;
    animation: login-illustration-animation 14s infinite alternate;
}
@-moz-keyframes login-illustration-animation {
    0% {
        transform: translate(0);
    }
    to {
        transform: translate(-30px);
    }
}
@-webkit-keyframes login-illustration-animation {
    0% {
        transform: translate(0);
    }
    to {
        transform: translate(-30px);
    }
}
@-o-keyframes login-illustration-animation {
    0% {
        transform: translate(0);
    }
    to {
        transform: translate(-30px);
    }
}
@keyframes login-illustration-animation {
    0% {
        transform: translate(0);
    }
    to {
        transform: translate(-30px);
    }
}
.page.selection .projects {
    margin-bottom: 100px;
}
.page.selection .project {
    display: flex;
    align-items: center;
    width: 1056px;
    margin: 0 auto 50px;
}
@media (max-width: 1080px) {
    .page.selection .project {
        flex-direction: column;
        width: auto;
        margin-left: 50px;
        margin-right: 50px;
    }
}
@media (max-width: 1080px) {
    .page.selection .project {
        margin-left: 25px;
        margin-right: 25px;
    }
}
@media (max-width: 600px) {
    .page.selection .project {
        margin-left: 15px;
        margin-right: 15px;
    }
}
.page.selection .project.is-last {
    margin-bottom: 125px;
}
@media not screen and (max-width: 1300px) {
    .page.selection .project.is-last {
        width: 1272px;
    }
}
@media not screen and (max-width: 1300px) {
    .page.selection .project.is-last .details {
        padding-top: 80px;
        padding-right: 50px;
        padding-bottom: 80px;
    }
}
.page.selection .project .visual {
    position: relative;
    width: calc(690 / 1056 * 100%);
    background: #140b29;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: #ff77f133 0 0 80px;
    flex-shrink: 0;
    z-index: 1;
}
@media (max-width: 1080px) {
    .page.selection .project .visual {
        width: 100%;
    }
}
.page.selection .project .visual .ratio-holder {
    width: 100%;
    padding-top: 56.25%;
}
.page.selection .project .visual iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page.selection .project .details {
    position: relative;
    width: calc(366 / 1056 * 100%);
    flex-shrink: 0;
    padding: 50px 35px 50px 50px;
}
@media (max-width: 1080px) {
    .page.selection .project .details {
        width: calc(100% - 50px);
    }
}
@media (max-width: 800px) {
    .page.selection .project .details {
        padding: 25px 35px;
    }
}
@media (max-width: 600px) {
    .page.selection .project .details {
        width: calc(100% - 25px);
        padding: 20px;
    }
}
.page.selection .project .details > * {
    position: relative;
}
.page.selection .project .details .background {
    position: absolute;
    inset: 0 0 0 -50px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: radial-gradient(335.46% 124.73% at 101.61% -14.1%, rgba(255, 119, 241, 0.2) 0%, rgba(20, 11, 41, 0.2) 100%), #140b29;
}
@media (max-width: 1080px) {
    .page.selection .project .details .background {
        left: 0;
        border-radius: 0 0 14px 14px;
        border-top: none;
    }
}
.page.selection .project .details .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5em;
    color: #57fdf3;
    
    font-weight: 800;
}
.page.selection .project .details .info .social-links {
    display: flex;
}
.page.selection .project .details .info .social-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
}
.page.selection .project .details .info .social-links .icon {
    width: 14px;
    height: 14px;
}
.page.selection .project .details .info .social-links .icon.is-link {
    position: relative;
    left: 2px;
    width: 20px;
    transform: rotate(-35deg);
}
.page.selection .project .details .info .social-links .icon.is-link svg * {
    stroke: #57fdf3;
    opacity: 1;
}
.page.selection .project .details .info .social-links .icon.is-twitter {
    width: 17px;
}
.page.selection .project .details .info .social-links .icon.is-twitter svg * {
    fill: #57fdf3;
}
.page.selection .project .details .info .social-links .icon.is-linkedin svg * {
    fill: #57fdf3;
}
.page.selection .project .details .info .social-links .icon svg {
    display: block;
    width: 100%;
    height: 100%;
}
.page.selection .project .details .title {
    margin-bottom: 0.75em;
    font-size: 26px;
    
    font-weight: 800;
}
@media (max-width: 1300px) {
    .page.selection .project .details .title {
        font-size: 24px;
    }
}
@media (max-width: 1080px) {
    .page.selection .project .details .title {
        font-size: 22px;
    }
}
@media (max-width: 800px) {
    .page.selection .project .details .title {
        font-size: 20px;
    }
}
@media (max-width: 600px) {
    .page.selection .project .details .title {
        font-size: 18px;
    }
}
@media (max-width: 400px) {
    .page.selection .project .details .title {
        font-size: 18px;
    }
}
.page.selection .project .details .title:hover {
    text-decoration: none;
}
.page.selection .project .details .author {
    margin-bottom: 0.75em;
    color: #ff77f1;
    
    font-size: 26px;
    font-weight: 500;
}
@media (max-width: 1300px) {
    .page.selection .project .details .author {
        font-size: 24px;
    }
}
@media (max-width: 1080px) {
    .page.selection .project .details .author {
        font-size: 22px;
    }
}
@media (max-width: 800px) {
    .page.selection .project .details .author {
        font-size: 20px;
    }
}
@media (max-width: 600px) {
    .page.selection .project .details .author {
        font-size: 18px;
    }
}
@media (max-width: 400px) {
    .page.selection .project .details .author {
        font-size: 18px;
    }
}
.page.selection .project .details .links {
    margin-bottom: 2em;
    display: flex;
    flex-direction: column;
}
.page.selection .project .details .links ul li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page.selection .project .details .links ul li:before {
    content: "";
    vertical-align: middle;
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 3px;
    opacity: 0.75;
    margin-top: -1px;
    margin-right: 8px;
}
.page.selection .project .details .links a {
    opacity: 0.8;
    margin-bottom: 0.5em;
    text-decoration: none;
}
.page.selection .project .details .links a:hover {
    text-decoration: none;
}
.page.selection .project .details .project-link {
    display: flex;
    padding: 5px 0;
    
    font-weight: 700;
}
.page.selection .project .details .project-link:hover {
    text-decoration: none;
}
.page.selection .project .details .project-link .arrow {
    position: relative;
    top: 1px;
    margin-left: 2px;
    transform: rotate(-90deg);
}
.page.selection .project .details .project-link .arrow svg * {
    fill: #fff;
    opacity: 1;
}
.page.selection .pagination {
    display: flex;
    justify-content: center;
    padding: 0 25px;
    margin-bottom: 4em;
}
.page.selection .pagination .abyss-button {
    margin-left: 4px;
    margin-right: 4px;
}
.page.selection .more {
    display: flex;
    justify-content: center;
}
.page.testAbyssForm {
    padding-top: calc(var(--page-top-padding) + 70px);
    padding-left: 25px;
    padding-right: 25px;
    color: #fff;
    text-align: center;
}
@media (max-width: 800px) {
    .page.testAbyssForm {
        padding-top: var(--page-top-padding);
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 600px) {
    .page.testAbyssForm {
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media (max-width: 400px) {
    .page.testAbyssForm {
        padding-left: 10px;
        padding-right: 10px;
    }
}
.page.testAbyssForm .page-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.page.testAbyssForm .abyss-form,
.page.testAbyssForm .important-message {
    width: 470px;
}
@media (max-width: 800px) {
    .page.testAbyssForm .abyss-form,
    .page.testAbyssForm .important-message {
        width: 420px;
    }
}
@media (max-width: 600px) {
    .page.testAbyssForm .abyss-form,
    .page.testAbyssForm .important-message {
        width: 370px;
    }
}
@media (max-width: 400px) {
    .page.testAbyssForm .abyss-form,
    .page.testAbyssForm .important-message {
        width: auto;
    }
}
.page.testCards {
    padding-top: calc(var(--page-top-padding) + 70px);
    padding-left: 25px;
    padding-right: 25px;
    color: #fff;
    text-align: center;
}
@media (max-width: 800px) {
    .page.testCards {
        padding-top: var(--page-top-padding);
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 600px) {
    .page.testCards {
        padding-left: 15px;
        padding-right: 15px;
    }
}
.page.testCards .page-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.page.testCards .card {
    margin-bottom: 80px;
}
.page.twitterContests {
    padding-top: calc(var(--page-top-padding) + 100px);
    font-size: 20px;
}
@media (max-width: 1600px) {
    .page.twitterContests {
        font-size: 18px;
    }
}
@media (max-width: 1300px) {
    .page.twitterContests {
        font-size: 16px;
    }
}
@media (max-width: 1080px) {
    .page.twitterContests {
        font-size: 15px;
    }
}
@media (max-width: 800px) {
    .page.twitterContests {
        font-size: 15px;
    }
}
@media (max-width: 600px) {
    .page.twitterContests {
        font-size: 14px;
    }
}
@media (max-width: 400px) {
    .page.twitterContests {
        font-size: 13px;
    }
}
.page.twitterContests .main-logo {
    position: absolute;
    top: 55px;
    left: 85px;
    z-index: 2;
}
@media (max-width: 1600px) {
    .page.twitterContests .main-logo {
        top: 45px;
        left: 70px;
    }
}
@media (max-width: 1300px) {
    .page.twitterContests .main-logo {
        top: 35px;
        left: 55px;
    }
}
@media (max-width: 1080px) {
    .page.twitterContests .main-logo {
        top: 25px;
        left: 40px;
    }
}
@media (max-width: 800px) {
    .page.twitterContests .main-logo {
        top: 20px;
        left: 30px;
    }
}
@media (max-width: 600px) {
    .page.twitterContests .main-logo {
        top: 20px;
        left: 20px;
    }
}
@media (max-width: 400px) {
    .page.twitterContests .main-logo {
        top: 20px;
        left: 20px;
    }
}
.page.twitterContests .section-title {
    
    font-weight: 800;
    font-size: 48px;
    letter-spacing: -0.02em;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
    text-align: center;
}
@media (max-width: 1600px) {
    .page.twitterContests .section-title {
        font-size: 44px;
    }
}
@media (max-width: 1300px) {
    .page.twitterContests .section-title {
        font-size: 40px;
    }
}
@media (max-width: 1080px) {
    .page.twitterContests .section-title {
        margin-left: auto;
        margin-right: auto;
        font-size: 36px;
    }
}
@media (max-width: 800px) {
    .page.twitterContests .section-title {
        font-size: 32px;
    }
}
@media (max-width: 600px) {
    .page.twitterContests .section-title {
        margin-left: 20px;
        margin-right: 20px;
        font-size: 28px;
    }
}
@media (max-width: 400px) {
    .page.twitterContests .section-title {
        font-size: 24px;
    }
}
.page.twitterContests .section-title strong {
    color: #705df2;
    font-weight: 800;
}
.page.twitterContests .winners {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3rem;
}
.page.twitterContests .winner {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    border: 2px solid rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    padding: 10px 15px;
}
.page.twitterContests .winner .user-picture-container {
    display: inline-block;
    vertical-align: top;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    overflow: hidden;
    background: #dfdae4;
}
.page.twitterContests .winner .user-picture {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}
.page.twitterContests .winner .user-information {
    display: inline-flex;
    vertical-align: top;
    width: calc(100% - 68px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 10px;
    line-height: 22px;
    font-size: 16px;
}
@media (max-width: 1600px) {
    .page.twitterContests .winner .user-information {
        line-height: 21px;
        font-size: 15px;
    }
}
@media (max-width: 1300px) {
    .page.twitterContests .winner .user-information {
        line-height: 20px;
        font-size: 14px;
    }
}
@media (max-width: 1080px) {
    .page.twitterContests .winner .user-information {
        line-height: 19px;
        font-size: 13px;
    }
}
@media (max-width: 800px) {
    .page.twitterContests .winner .user-information {
        line-height: 18px;
        font-size: 12px;
    }
}
.page.twitterContests .winner .user-information .name {
    font-weight: 700;
    color: #434246;
}
.page.twitterContests .winner .user-information .screen-name {
    color: #705df2;
}
.page.twitterContests .winner .user-information .date {
    font-size: 14px;
    opacity: 0.5;
}
@media (max-width: 1080px) {
    .page.twitterContests .winner .user-information .date {
        font-size: 13px;
    }
}
@media (max-width: 800px) {
    .page.twitterContests .winner .user-information .date {
        display: block;
        font-size: 12px;
    }
}
.page.twitterContests .winner .user-information .date:hover {
    text-decoration: none;
}