@font-face {
    font-family: "Helvetica";
    font-style: normal;
    font-weight: 200;
    src: url("/fonts/helvetica/helvetica-light-587ebe5a59211.woff") format("woff");
}
@font-face {
    font-family: "Helvetica";
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/helvetica/Helvetica.woff') format('woff');
}
@font-face {
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/helvetica/Helvetica-Bold.woff') format('woff');
}

#mp_header_logotype_href {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

#mp_header_logotype {
    height: 34px;
    border-radius: 6px;
}

.logotype {
    font-size: 18px;
    font-weight: 600;
}

.header_link {
    all: unset;

    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 2px;
    height: 32px;
    font-size: 18px;
    font-weight: 400;
    text-wrap: nowrap;
    color: var(--color-primary-t);
    transition-duration: 200ms;
}
.header_link:hover {
    color: var(--color-primary);
}
.header_link:active {
    scale: 0.97;
}

.header_link_button {
    all: unset;

    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 14px;
    height: 38px;

    border-radius: 8px;
    font-size: 18px;
    font-weight: 400;
    text-wrap: nowrap;
    color: var(--color-primary-t);
    transition-duration: 200ms;
    color: var(--color-primary-t);
    transition-duration: 200ms;
    background-color: var(--color-primary);
    color: black
}
.header_link_button:hover {
    color: black;
    background-color: var(--color-primary-t);
}
.header_link_button:active {
    scale: 0.97;
}


a {
    all: unset;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


.navigation_header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 1000;
    width: 100%;
    background-color: rgba(30, 30, 30, 0.786);
    -webkit-backdrop-filter: saturate(180%) blur(9px);
    backdrop-filter: saturate(180%) blur(9px);
    height: var(--mp-header-height);
    padding: 0px 18px;
    
    nav {
        flex: 1;
        display: flex;
        flex-direction: row;
        overflow-x: scroll;
        flex-shrink: none;
        gap: 12px;
    }
}

.navigation_header_content {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    max-width: 1200px;
    gap: 24px;

    justify-content: space-between;
}

:root {

    --mp-header-height: 68px;

    --background: #000;
    --fullheight: 100vh;
    --color-primary: #fff;
    --color-primary-t: #d4d4d4;
    --color-secondary: #9e9e9e;
    --color-tertiary: #585858;
    --color-quater: rgba(255,255,255,0.15);
    --font-size-xxl: 180px;
    --font-size-xl: 58px;
    --font-size-l: 34px;
    --font-size-m: 28px;
    --font-size-s: 22px;
    --font-size-xs: 14px;
    --padding-m: 18px;
    --border-radius: 4px;
    --tint-primary: #141414;
    --transition-duration-primary: 130ms;

    --c-iconic: #D9ff00;
    --c-iconic-t: rgba(140,250,10,0.12);

    --spacing-row-primary: 4vh;
    --padding-l: 18px;
    --padding-m: 14px;
    --gap-m: 4px;


    --ux-content-max-width: 700px;

    font-family: 'Helvetica', sans-serif, normal;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;

    color: var(--color-primary);
    background-color: var(--background);
}

.hide-scrollbars {
    scrollbar-width: none;
}
.hide-scrollbars::-webkit-scrollbar {
    display: none;
}

html {
    scroll-behavior: smooth;
}

#root {
    background-color: var(--background);
    height: var(--fullheight);
    scroll-behavior: smooth;
    overscroll-behavior: none;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;

    > section {
        position: relative;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
    }
}

.ww {
    width: 100vw;
}
.vw {
    width: 100%;
}
.wh {
    height: var(--fullheight);
}


.highlight {
    color: var(--color-primary);
}

#about {
    background-color: var(--background);
}

.join_background {
    background:
        radial-gradient(100%
        100% at var(--join_background_animated_7-x-position) var(--join_background_animated_7-y-position),
        #181310 -47%, transparent),
        radial-gradient(100% 100% at var(--join_background_animated_8-x-position) var(--join_background_animated_8-y-position),
        #1a1616 -41%, transparent),
        radial-gradient(100% 100% at var(--join_background_animated_9-x-position) var(--join_background_animated_9-y-position),
        #1c2022 1%, transparent),
        radial-gradient(100% 100% at var(--join_background_animated_10-x-position) var(--join_background_animated_10-y-position),
        #231c3c 0%, transparent),
        radial-gradient(100% 100% at var(--join_background_animated_11-x-position) var(--join_background_animated_11-y-position),
        #131f13 0%, transparent),
        #1b253b;
    animation-name: join_background_animated;
    animation-iteration-count: infinite;
    animation-duration: 7s;
    transition-timing-function: ease-in-out
}

@property --join_background_animated_7-x-position { syntax: '<percentage>'; inherits: false; initial-value: 34.0625%; }
@property --join_background_animated_7-y-position { syntax: '<percentage>'; inherits: false; initial-value: 85.078125%; }
@property --join_background_animated_8-x-position { syntax: '<percentage>'; inherits: false; initial-value: 49.72656250000001%; }
@property --join_background_animated_8-y-position { syntax: '<percentage>'; inherits: false; initial-value: 27.6171875%; }
@property --join_background_animated_9-x-position { syntax: '<percentage>'; inherits: false; initial-value: 82.734375%; }
@property --join_background_animated_9-y-position { syntax: '<percentage>'; inherits: false; initial-value: 57.92968750000001%; }
@property --join_background_animated_10-x-position { syntax: '<percentage>'; inherits: false; initial-value: 80%; }
@property --join_background_animated_10-y-position { syntax: '<percentage>'; inherits: false; initial-value: 80%; }
@property --join_background_animated_11-x-position { syntax: '<percentage>'; inherits: false; initial-value: 7.343750000000002%; }
@property --join_background_animated_11-y-position { syntax: '<percentage>'; inherits: false; initial-value: 93.671875%; }


:root {

--join_background_animated_7-x-position: 34.0625%
--join_background_animated_7-y-position: 85.078125%
--join_background_animated_8-x-position: 49.72656250000001%
--join_background_animated_8-y-position: 27.6171875%
--join_background_animated_9-x-position: 82.734375%
--join_background_animated_9-y-position: 57.92968750000001%
--join_background_animated_10-x-position: 80%
--join_background_animated_10-y-position: 80%
--join_background_animated_11-x-position: 7.343750000000002%
--join_background_animated_11-y-position: 93.671875%

}


@keyframes join_background_animated {
    25% {
        --join_background_animated_7-x-position: 15%;
        --join_background_animated_7-y-position: 15%;
        --join_background_animated_8-x-position: 85%;
        --join_background_animated_8-y-position: 80%;
    }
    50% {
        --7-x-position: 80%;
        --7-y-position: 15%;
        --8-x-position: 15%;
        --8-y-position: 85%;
        --9-x-position: 20%;
        --9-y-position: 20%;
        --10-x-position: 20%;
        --10-y-position: 20%;
        --11-x-position: 20%;
        --11-y-position: 20%;
    }
}

#join {
    display: flex;
    flex-direction: column;
    gap: 18px;
    
    h1 {
        font-weight: 600;
        font-size: var(--font-size-xl);
        line-height: var(--font-size-xl);
        color: var(--color-primary);
        text-align: center;
    }

    h2 {
        font-size: var(--font-size-m);
        line-height: calc(var(--font-size-m) * 1.1);
        margin: calc(var(--font-size-m)) 0px;
        font-weight: 200;
        color: var(--color-primary);
        text-align: center;
    }

    .body {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        #app-logotype {
            height: 94px;
            margin-top: 24px;
            margin-bottom: 16px;
        }
        .subtitle {
            font-weight: 400;
            font-size: var(--font-size-m);
            line-height: var(--font-size-m);
            color: var(--color-secondary);
            text-align: center;
        }
        .annotation {
            margin-top: 4vh;
            font-weight: 400;
            font-size: var(--font-size-s);
            line-height: var(--font-size-s);
            color: var(--color-secondary);
            text-align: center;
        }
    }
}

#docs {

    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    padding: 18px;
    padding-bottom: 3vh;

    .caption {
        font-size: var(--font-size-m);
        color: var(--color-tertiary);
        font-weight: 400;
    }

    .separator {
        width: 100%;
        height: 1px;
        background-color: rgba(255,255,255,0.07);
        margin: 24px 0px;
    }

    .content {
        width: 100%;
        display: flex;
        flex-direction: column;
        max-width: 1200px;
    }

    footer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: var(--color-secondary);
        font-size: var(--font-size-xs);
 
        .block {
            display: flex;
            flex-direction: column;
            align-items: start;
            justify-content: end;
            gap: 8px;
            text-align: end;
            a {
                cursor: pointer;
            }
        }
        .block:last-child {
            align-items: end;
        }
    }
}


.next-page-down {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.flex-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.mp_app_download_links {
    display: flex;
    flex-direction: row;
    gap: 18px;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 18px;
    margin-top: 34px;
}

.mp_app_download_link {
    cursor: pointer;
    height: 52px;
    transition-duration: var(--transition-duration-primary);
}
.mp_app_download_link:hover {
    scale: 1.04;
}
.mp_app_download_link:active {
    opacity: 0.94;
    scale: 0.99;
}

@supports(-webkit-touch-callout: none) {
    :root {
        --fullheight: 100dvh;
    }
}

@media screen and (max-width: 1000px) {
    :root {
        --font-size-xl: 48px;
        --font-size-m: 25px;
        --font-size-s: 20px;
    }
}
@media screen and (max-width: 800px) {
    :root {
        --font-size-xl: 44px;
        --font-size-m: 23px;
        --font-size-s: 18px;
    }
}
@media screen and (max-width: 660px) {
    :root {
        --font-size-xl: 42px;
        --font-size-m: 22px;
        --font-size-s: 16px;
    }
}

.your-element {background: radial-gradient(100% 100% at var(--65-x-position) var(--65-y-position), #292929 -9%, transparent),radial-gradient(100% 100% at var(--66-x-position) var(--66-y-position), #000000 0%, transparent),radial-gradient(100% 100% at var(--67-x-position) var(--67-y-position), #090f00 -62%, transparent),radial-gradient(100% 100% at var(--68-x-position) var(--68-y-position), #000e14 0%, transparent),#1b253b;animation-name: main; animation-iteration-count: infinite; animation-duration: 8s; transition-timing-function: ease-in-out;}@property --65-x-position {
      syntax: '<percentage>';
        inherits: false;
        initial-value: 29.804687500000004%;
      }@property --65-y-position {
        syntax: '<percentage>';
          inherits: false;
          initial-value: 28.984375%;
        }@property --66-x-position {
      syntax: '<percentage>';
        inherits: false;
        initial-value: 33.71093750000001%;
      }@property --66-y-position {
        syntax: '<percentage>';
          inherits: false;
          initial-value: 65.15625%;
        }@property --67-x-position {
      syntax: '<percentage>';
        inherits: false;
        initial-value: 63.78906250000001%;
      }@property --67-y-position {
        syntax: '<percentage>';
          inherits: false;
          initial-value: 40.35156250000001%;
        }@property --68-x-position {
      syntax: '<percentage>';
        inherits: false;
        initial-value: 76.6796875%;
      }@property --68-y-position {
        syntax: '<percentage>';
          inherits: false;
          initial-value: 79.8046875%;
        }:root {--6-x-position: 16.484374999999996%;--6-y-position: 22.773437500000004%;--7-x-position: 54.60937500000001%;--7-y-position: 28.7890625%;--8-x-position: 80%;--8-y-position: 80%;--9-x-position: 55.00000000000001%;--9-y-position: 61.64062500000001%;--10-x-position: 18.242187499999996%;--10-y-position: 39.17968750000001%;--11-x-position: 54.60937500000001%;--11-y-position: 28.7890625%;--12-x-position: 80%;--12-y-position: 80%;--13-x-position: 55.00000000000001%;--13-y-position: 61.64062500000001%;--14-x-position: 18.242187499999996%;--14-y-position: 39.17968750000001%;--15-x-position: 71.6015625%;--15-y-position: 32.3046875%;--16-x-position: 80%;--16-y-position: 80%;--17-x-position: 55.00000000000001%;--17-y-position: 61.64062500000001%;--25-x-position: 63.20312500000001%;--25-y-position: 21.953125%;--26-x-position: 86.8359375%;--26-y-position: 51.87500000000001%;--27-x-position: 63.98437500000001%;--27-y-position: 83.3203125%;--28-x-position: 27.851562500000004%;--28-y-position: 56.56250000000001%;--30-x-position: 63.20312500000001%;--30-y-position: 21.953125%;--31-x-position: 86.8359375%;--31-y-position: 51.87500000000001%;--32-x-position: 63.98437500000001%;--32-y-position: 83.3203125%;--33-x-position: 27.851562500000004%;--33-y-position: 56.56250000000001%;--35-x-position: 63.20312500000001%;--35-y-position: 21.953125%;--36-x-position: 27.851562500000004%;--36-y-position: 56.56250000000001%;--37-x-position: 86.8359375%;--37-y-position: 51.87500000000001%;--38-x-position: 59.68750000000001%;--38-y-position: 76.09375%;--40-x-position: 63.20312500000001%;--40-y-position: 21.953125%;--41-x-position: 22.578125000000004%;--41-y-position: 60.27343750000001%;--42-x-position: 86.8359375%;--42-y-position: 51.87500000000001%;--43-x-position: 59.68750000000001%;--43-y-position: 76.09375%;--45-x-position: 63.20312500000001%;--45-y-position: 21.953125%;--46-x-position: 22.578125000000004%;--46-y-position: 60.27343750000001%;--47-x-position: 78.828125%;--47-y-position: 52.46093750000001%;--48-x-position: 59.68750000000001%;--48-y-position: 76.09375%;--50-x-position: 29.804687500000004%;--50-y-position: 28.984375%;--51-x-position: 22.578125000000004%;--51-y-position: 60.27343750000001%;--52-x-position: 78.828125%;--52-y-position: 52.46093750000001%;--53-x-position: 59.68750000000001%;--53-y-position: 76.09375%;--55-x-position: 29.804687500000004%;--55-y-position: 28.984375%;--56-x-position: 22.578125000000004%;--56-y-position: 60.27343750000001%;--57-x-position: 63.78906250000001%;--57-y-position: 40.35156250000001%;--58-x-position: 59.68750000000001%;--58-y-position: 76.09375%;--60-x-position: 29.804687500000004%;--60-y-position: 28.984375%;--61-x-position: 33.71093750000001%;--61-y-position: 65.15625%;--62-x-position: 63.78906250000001%;--62-y-position: 40.35156250000001%;--63-x-position: 59.68750000000001%;--63-y-position: 76.09375%;--65-x-position: 29.804687500000004%;--65-y-position: 28.984375%;--66-x-position: 33.71093750000001%;--66-y-position: 65.15625%;--67-x-position: 63.78906250000001%;--67-y-position: 40.35156250000001%;--68-x-position: 76.6796875%;--68-y-position: 79.8046875%;}
    @keyframes main {
      25% {--65-x-position: 85%;--65-y-position: 80%;}50% {--65-x-position: 15%;--65-y-position: 85%;--66-x-position: 20%;--66-y-position: 20%;--67-x-position: 20%;--67-y-position: 20%;--68-x-position: 20%;--68-y-position: 20%;}
    }