@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap');

/*
    font-family: 'Open Sans', sans-serif;
*/

/* general */

html {
    height: 100%;
}

body {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    color: #ffffff;
    background-color: #272a3f;
    background: radial-gradient(circle, rgba(39, 42, 63, 1) 0%, rgba(18, 21, 28, 1) 100%);
    font-size: 16px;
    line-height: 17px;
    font-family: 'Open Sans', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    transition: opacity 0.3s ease-out;
}

.loading:after {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #272a3f;
    z-index: 99999;
}

.btn-wrap {
    display: flex;
    text-align: center;
    gap: 15px;
}

.hidden {
    display: none;
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    min-width: 150px;
    min-height: 46px;
    font-weight: 800;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.1;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    text-align: center;
    padding: 6px 15px;
    background: transparent;
    border-radius: 50px;
    box-shadow: 0 0 14px 0 rgba(0, 89, 255, 0.75);
    position: relative;
    overflow: hidden;
    z-index: 5;
}

.btn-primary {
    transition: all 0.3s ease;
}

.btn-primary:before {
    content: '';
    display: block;
    position: absolute;
    background: linear-gradient(96deg, #8cff00 0%, #0059ff 43.5%, #7a0099 100%);
    top: 0;
    bottom: 0;
    left: -59px;
    right: -59px;
    z-index: -1;
}

.btn-secondary:before {
    content: '';
    display: block;
    position: absolute;
    background: linear-gradient(96deg, #8cff00 0%, #0059ff 43.5%, #7a0099 100%);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -2;
    border-radius: 50px;
}

.btn-secondary:after {
    content: '';
    display: block;
    position: absolute;
    background: #12151b;
    top: 1px;
    bottom: 1px;
    left: 1px;
    right: 1px;
    z-index: -1;
    border-radius: 50px;
}

.btn--full {
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}

.btn-full {
    width: 100%;
    max-width: 256px;
    margin-left: auto;
    margin-right: auto;
}

.btn .prev,
.btn .next {
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    overflow: hidden;
    text-indent: -1000px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}

.btn .prev {
    background-image: url('../images/icon-arrow-prev.svg');
}

.btn .next {
    background-image: url('../images/icon-arrow-next.svg');
}

.btn-sound {
    width: 41px;
    height: 39px;
    position: absolute;
    top: 16px;
    right: 0;
    background: linear-gradient(96deg, #8cff00 0%, #0059ff 43.5%, #7a0099 100%);
    z-index: 100;
    overflow: hidden;
    border-radius: 35px 0 0 35px;
}

.btn-sound:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-sound--on:before {
    background-image: url(../images/icon-audio-on.svg);
}

.btn-sound--off:before {
    background-image: url(../images/icon-audio-off.svg);
    background-position: calc(50% + 2px) 50%;
}

/* main */

.app {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

.wrap {
    margin: 0 auto;
    max-width: 480px;
    width: 100%;
    position: relative;
}

.step {
    min-height: 600px;
    /* height: min(100vh, 100%); */
    height: 100vh;
    height: 100svh;
    background: radial-gradient(63.44% 75.46% at 55.61% 25.32%, rgb(39, 42, 63) 0%, rgb(18, 21, 28) 98.00000190734863%);
    position: absolute;
    opacity: 0;
    transition: all 0.4s ease-in;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.step.step-active {
    position: relative;
    opacity: 1;
    z-index: 100;
    pointer-events: all;
}

.step.step-shown {
    opacity: 0;
    pointer-events: none;
}

.step-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(39, 42, 63);
    background: radial-gradient(circle, rgba(39, 42, 63, 1) 0%, rgba(18, 21, 28, 1) 100%);
    padding: 19px 24px;
}

.step-footer .btn {
    width: 50%;
}

.frame {
    opacity: 0;
    transition: all 0.4s ease-in;
    margin-bottom: 8px;
    max-height: calc((100vh - 84px) / 3);
    max-height: calc((100svh - 84px) / 3);
    position: relative;
}

.frame.frame-active {
    opacity: 1;
}

.frame img {
    display: block;
    margin: auto;
    width: 100%;
    height: 100%;
    max-height: calc((100vh - 84px) / 3);
    max-height: calc((100svh - 84px) / 3);
}

.frame--vars .vars {
    position: absolute;
    top: 0;
    opacity: 0;
}

.frame--vars .vars.shown {
    z-index: 10;
    opacity: 1;
}

@-webkit-keyframes appearing {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes appearing {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.pic-story-wrapper {
    display: flex;
    justify-content: space-between;
}

.pic-story-wrapper img {
    opacity: 0;
    transition: opacity 0.5s ease;
    max-width: 32.75%;
}

.frame-active .pic-story-wrapper img:nth-child(1) {
    -webkit-animation: appearing 0.5s ease-in 0s;
    animation: appearing 0.5s ease-in 0s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.frame-active .pic-story-wrapper img:nth-child(2) {
    -webkit-animation: appearing 0.5s ease-in 0.5s;
    animation: appearing 0.5s ease-in 0.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.frame-active .pic-story-wrapper img:nth-child(3) {
    -webkit-animation: appearing 0.5s ease-in 1s;
    animation: appearing 0.5s ease-in 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

/* Lines */

.line {
    -webkit-animation: appearing 0.5s ease-in-out;
    animation: appearing 0.5s ease-in-out;
    color: #000;
    font: italic 16px/1.1 'Open Sans', sans-serif;
    font-variation-settings: "wdth" 75;
    text-align: center;
    top: 0;
    position: absolute;
    min-width: -webkit-min-content;
    min-width: -moz-min-content;
    min-width: min-content;
    z-index: 2;
}

.line::before {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: '';
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: -1;
}

/* part-1 | start */

.line-bg-cn1::before {
    background-image: url(../images/part-1/txt-bg-cn1.png);
    background-position: left top;
}

.line-bg-cn2::before {
    background-image: url(../images/part-1/txt-bg-cn2.png);
    background-position: right top;
}

.line-bg-wh1::before {
    background-image: url(../images/part-1/txt-bg-wh1.png);
}

.line-bg-wh2::before {
    background-image: url(../images/part-1/txt-bg-wh2.png);
}

.line-bg-wh3::before {
    background-image: url(../images/part-1/txt-bg-wh3.png);
}

.line-bg-wh4::before {
    background-image: url(../images/part-1/txt-bg-wh4.png);
}

.line-bg-wh5::before {
    background-image: url(../images/part-1/txt-bg-wh5.png);
}

.line-bg-wh6::before {
    background-image: url(../images/part-1/txt-bg-wh6.png);
}

.line-bg-wh7::before {
    background-image: url(../images/part-1/txt-bg-wh7.png);
}

.line-bg-wh8::before {
    background-image: url(../images/part-1/txt-bg-wh8.png);
}

.line-bg-yw1::before {
    background-image: url(../images/part-1/txt-bg-yw1.png);
}

.line-bg-yw2::before {
    background-image: url(../images/part-1/txt-bg-yw2.png);
}

.step[data-step="2"] .frame[data-frame="0"] .line-1 {
    padding: 10px 15px;
    width: 58%;
}

.step[data-step="2"] .frame[data-frame="1"] .line-1 {
    top: auto;
    left: 45%;
    bottom: 40%;
    padding: 15px 15px 30px;
    width: 40%;
}

.step[data-step="2"] .frame[data-frame="1"] .line-2 {
    top: 48%;
    right: 5%;
    padding: 15px;
    width: 30%;
}

.step[data-step="2"] .frame[data-frame="2"] .line-1 {
    top: 10%;
    right: 6%;
    padding: 15px 15px 30px;
    width: 40%;
}

.step[data-step="3"] .frame[data-frame="0"] .line-1 {
    top: 4%;
    left: 33%;
    padding: 8px 15px 25px;
    width: 44%;
}

.step[data-step="3"] .frame[data-frame="0"] .line-2 {
    top: auto;
    right: 15%;
    bottom: 10%;
    padding: 8px 15px 25px;
    width: 36%;
}

.step[data-step="3"] .frame[data-frame="1"] .line-1 {
    top: 6%;
    left: 6%;
    padding: 8px 15px 25px;
    width: 37%;
}

.step[data-step="3"] .frame[data-frame="1"] .line-2 {
    top: auto;
    left: 0;
    bottom: 7%;
    padding: 8px 15px 25px;
    width: 36%;
}

.step[data-step="3"] .frame[data-frame="2"] .line-1 {
    top: 0;
    right: 0;
    padding: 10px 15px;
    width: 38%;
}

.step[data-step="3"] .frame[data-frame="2"] .line-2 {
    top: 0;
    right: 0;
    padding: 18px 15px;
    width: 38%;
}

.step[data-step="4"] .frame[data-frame="0"] .line-1 {
    top: 10%;
    left: 27%;
    padding: 10px 15px 30px;
    width: 42%;
}

.step[data-step="4"] .frame[data-frame="1"] .line-1 {
    top: 7%;
    left: 50%;
    padding: 10px 15px 30px;
    width: 34%;
}

.step[data-step="4"] .frame[data-frame="2"] .line-1 {
    top: -30px;
    right: 0;
    padding: 12px 30px 25px 10px;
    width: 34%;
}

.step[data-step="4"] .frame[data-frame="2"] .line-2 {
    top: auto;
    right: 3%;
    bottom: 8%;
    padding: 12px 15px 28px;
    width: 50%;
}

.step[data-step="5"] .frame[data-frame="0"] .line-1 {
    top: 9%;
    right: 17%;
    padding: 10px 15px 25px;
    width: 28%;
}

.step[data-step="5"] .frame[data-frame="1"] .line-1 {
    top: 9%;
    right: 0;
    padding: 11px 40px 30px 15px;
    width: 55%;
}

.step[data-step="7"] .line-1 {
    top: 13%;
    right: 3%;
    padding: 10px 25px 30px;
    width: 28%;
}

.step[data-step="7"] .line-2 {
    top: auto;
    right: 0;
    bottom: 18%;
    padding: 15px 40px 25px 15px;
    width: 52%;
}

.step[data-step="9"] .line-1 {
    font-size: 20px;
    top: 9%;
    left: 0;
    padding: 25px 3% 60px 27%;
    width: 75%;
}

html[lang="ja"] .step[data-step="3"] .frame[data-frame="0"] .line-2 {
    right: 10%;
    bottom: 0;
}

html[lang="ja"] .step[data-step="3"] .frame[data-frame="1"] .line-2 {
    bottom: 2%;
}

html[lang="ja"] .step[data-step="4"] .frame[data-frame="2"] .line-2 {
    bottom: 6%;
}

html[lang="ja"] .step-pt2-story-1 .frame[data-frame="1"] .line-1 {
    right: 1%;
    padding: 25px 30px 22px 80px;
    width: 60%;
}

html[lang="ja"] .step-pt2-story-3 .frame[data-frame="2"] .line-1 {
    right: 16%;
    width: 30%;
}

html[lang="ja"] .step-pt2-story-12 .frame[data-frame="2"] .line-1 {
    padding: 12px 10px 50px 10px;
    width: 40%;
}

/* part-1 | end */

/* part-2 | start */

.line-bg-1::before {
    background-image: url(../images/part-2/bubble-1.png);
}

.line-bg-2::before {
    background-image: url(../images/part-2/bubble-2.png);
}

.line-bg-3::before {
    background-image: url(../images/part-2/bubble-3.png);
}

.line-bg-4::before {
    background-image: url(../images/part-2/bubble-4.png);
}

.line-bg-5::before {
    background-image: url(../images/part-2/bubble-5.png);
}

.line-bg-6::before {
    background-image: url(../images/part-2/bubble-6.png);
}

.line-bg-7::before {
    background-image: url(../images/part-2/bubble-7.png);
}

.line-bg-8::before {
    background-image: url(../images/part-2/bubble-8.png);
}

.line-bg-9::before {
    background-image: url(../images/part-2/bubble-9.png);
}

.line-bg-10::before {
    background-image: url(../images/part-2/bubble-10.png);
}

.line-bg-11::before {
    background-image: url(../images/part-2/bubble-11.png);
}

.line-bg-12::before {
    background-image: url(../images/part-2/bubble-12.png);
}

.line-bg-13::before {
    background-image: url(../images/part-2/bubble-13.png);
}

.line-bg-14::before {
    background-image: url(../images/part-2/bubble-14.png);
}

.line-bg-15::before {
    background-image: url(../images/part-2/bubble-15.png);
}

.line-bg-16::before {
    background-image: url(../images/part-2/bubble-16.png);
}

.line-bg-17::before {
    background-image: url(../images/part-2/bubble-17.png);
}

.line-bg-18::before {
    background-image: url(../images/part-2/bubble-18.png);
}

.step-pt2-story-1 .frame[data-frame="1"] .line-1 {
    top: 11%;
    right: 2%;
    padding: 15px 25px 15px 80px;
    width: 53%;
}

.step-pt2-story-1 .frame[data-frame="2"] .line-1 {
    top: 26%;
    left: 4%;
    padding: 18px 50px 18px 10px;
    width: 42%;
}

.step-pt2-story-2 .frame[data-frame="1"] .line-1 {
    top: 20%;
    left: 35%;
    padding: 12px 15px 32px;
    width: 42%;
}

.step-pt2-story-2 .frame[data-frame="2"] .line-1 {
    top: auto;
    right: 18%;
    bottom: 30%;
    padding: 10px 15px 32px;
    width: 37%;
}

.step-pt2-story-3 .frame[data-frame="0"] .line-1 {
    top: 16%;
    left: 7%;
    padding: 10px 32px 10px 12px;
    width: 34%;
}

.step-pt2-story-3 .frame[data-frame="1"] .line-1 {
    top: 9%;
    left: 50%;
    padding: 8px 15px 30px;
    width: 30%;
}

.step-pt2-story-3 .frame[data-frame="2"] .line-1 {
    top: 24px;
    right: 18%;
    padding: 12px 12px 25px 12px;
    width: 25%;
}

.step-pt2-story-4 .frame[data-frame="1"] .line-1 {
    top: 6%;
    left: 3%;
    padding: 12px 60px 12px 12px;
    width: 47%;
}

.step-pt2-story-4 .frame[data-frame="2"] .line-1 {
    top: 5%;
    left: auto;
    right: 10%;
    padding: 55px 12px 12px 12px;
    width: 38%;
}

.step-pt2-story-6 .frame[data-frame="0"] .line-1 {
    top: 20%;
    left: 7%;
    padding: 13px 32px 15px 10px;
    width: 34%;
}

.step-pt2-story-6 .frame[data-frame="1"] .line-1 {
    top: 4%;
    left: 5%;
    padding: 13px 30px 27px 10px;
    width: 36%;
}

.step-pt2-story-6 .frame[data-frame="1"] .line-2 {
    top: 6.5%;
    right: 3%;
    padding: 10px 10px 38px 10px;
    width: 26%;
}

.step-pt2-story-6 .frame[data-frame="2"] .line-1 {
    top: auto;
    left: 6%;
    bottom: 34%;
    padding: 12px 12px 29px 8px;
    width: 32%;
}

.step-pt2-story-7 .frame[data-frame="1"] .line-1 {
    top: 5%;
    right: 4%;
    padding: 12px 10px 15px 30px;
    width: 35%;
}

.step-pt2-story-7 .frame[data-frame="2"] .line-1 {
    top: auto;
    right: 2%;
    bottom: 6%;
    padding: 12px 12px 35px 12px;
    width: 33.5%;
}

.step-pt2-story-9 .frame[data-frame="1"] .line-1 {
    top: 5%;
    right: 0;
    padding: 10px 25px 34px 8px;
    width: 42%;
}

.step-pt2-story-9 .frame[data-frame="2"] .line-1 {
    top: 11%;
    right: 4%;
    padding: 10px 10px 30px 10px;
    width: 44%;
}

.step-pt2-story-10 .frame[data-frame="1"] .line-1 {
    top: 13%;
    right: 2%;
    padding: 32px 10px 12px 20px;
    width: 50%;
}

.step-pt2-story-10 .frame[data-frame="2"] .line-1 {
    top: auto;
    left: 8%;
    bottom: 0;
    padding: 13px 15px 143px 10px;
    width: 37%;
}

.step-pt2-story-12 .frame[data-frame="1"] .line-1 {
    top: 17%;
    right: 10%;
    padding: 35px 10px 20px 20px;
    width: 49%;
}

.step-pt2-story-12 .frame[data-frame="2"] .line-1 {
    top: 5%;
    left: 5%;
    padding: 12px 10px 35px 10px;
    width: 36%;
}

.step-pt2-story-12 .frame[data-frame="2"] .line-2 {
    top: auto;
    right: 4%;
    bottom: 10%;
    padding: 35px 10px 15px 12px;
    width: 32%;
}

/* part-2 | end */

/* step-intro */

.step-intro {
    background: url(../images/bg-app.jpg) center no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 99;
}

.step-intro .logo {
    max-width: 268px;
    margin-top: 66px;
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
}

.step-intro .model {
    display: block;
    max-height: 70vh;
    max-height: 70svh;
    position: absolute;
    bottom: 0;
    left: 19%;
    z-index: 1;
}

.step-intro .btn-wrap {
    text-align: center;
    padding: 46px 0;

}

.step-intro .btn {
    font-size: 22px;
    min-height: 56px;
}

/* step-rules */

.step-rules {
    background: url(../images/bg-app.jpg) center no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.step-rules:before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(0, 1, 47, 0.62) 0%, rgba(0, 1, 47, 0.62) 54.27%);
    z-index: 0;
    opacity: 0.6;
}

.step-rules ol {
    padding: 150px 105px 40px 40px;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.01em;
    color: #fff;
    list-style: decimal;
    z-index: 2;
}

.step-rules ol li {
    margin-bottom: 20px;
}

.step-rules .btn-wrap {
    text-align: center;
    padding: 46px 0;
}

.step-rules .btn {
    font-size: 22px;
    min-height: 56px;
}


.step-intro-2 .pic {
    display: block;
    margin: auto;
    width: 100%;
    max-height: 100vh;
    max-height: 100svh;
    -o-object-fit: contain;
    object-fit: contain;
}

.step-intro-2 .btn-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 20px 0 46px;
}

.step-intro-2 .btn {
    font-size: 22px;
    min-height: 56px;
}

/* step-canvas */

.step-canvas {
    overflow: hidden;
}

canvas {
    display: block;
    margin: 0 auto;
    height: 100vh;
    height: 100svh;
    max-height: 100vh;
    max-height: 100svh;
    width: 100%;
}

/* step final part-1 */

.step-fin-pt1 .pic {
    display: block;
    margin: auto;
    width: 100%;
    height: 100vh;
    height: 100svh;
    -o-object-fit: cover;
    object-fit: cover;
}

.step-fin-pt1 .btn-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 20px 0 30vh;
}

.step-fin-pt1 .btn {
    font-size: 22px;
    min-height: 84px;
    min-width: 325px;
}

/* step final part-2 */

.step-fin-pt2 {
    background: url(../images/bg-app.jpg) center no-repeat;
    background-size: cover;
}

.step-fin-pt2::before {
    background: linear-gradient(to top, rgba(0, 1, 47, 0.8), rgba(0, 1, 47, 0.9) 54%);
    content: '';
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}

.step-fin-pt2 .step-body {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 20px 15px 50px;
    max-width: 350px;
    margin: 0 auto;
    font-size: 22px;
    line-height: normal;
}

.step-fin-pt2 .btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 20px 15px 50px;
}

.step-fin-pt2 .btn {
    border-radius: 8px;
    margin: 0;
}

.step-fin-pt2 .btn::before {
    background: linear-gradient(to top, #8cff00 0%, #0059ff 43.5%, #7a0099 100%);
    border-radius: 8px;
}

.step-fin-pt2 .btn::after {
    border-radius: 8px;
}

.step-fin-pt2 .btn-proceed {
    -webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate both;
    animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate both;
    background: url(../images/btn-proceed.png) no-repeat center;
    background-size: contain;
    display: inline-flex;
    height: 65px;
    width: 66px;
}

@-webkit-keyframes slide-right {
    0% {
        transform: translateX(-2px);
    }

    100% {
        transform: translateX(3px);
    }
}

@keyframes slide-right {
    0% {
        transform: translateX(-2px);
    }

    100% {
        transform: translateX(3px);
    }
}

/* modal */

.modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0;
    z-index: -10;
    transition: opacity 0.4s ease-in;
}

.modal.modal--visible {
    opacity: 1;
    z-index: 999;
}

.modal-inner {
    position: relative;
    padding: 28px 38px;
    box-shadow: 0 0 14px 0 rgba(0, 89, 255, 0.75);
    background: #12151b;
    margin: auto;
    max-width: 295px;
    border-radius: 28px;
    text-align: center;
}

.modal-inner:before {
    content: '';
    display: block;
    position: absolute;
    background: linear-gradient(96deg, #8cff00 0%, #0059ff 43.5%, #7a0099 100%);
    top: -2px;
    bottom: -2px;
    left: -2px;
    right: -2px;
    z-index: -1;
    border-radius: 28px;
}

.modal-title {
    display: block;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.01em;
    text-align: center;
    margin: 10px 0 20px;
}

.modal-close {
    display: block;
    width: 18px;
    height: 18px;
    position: absolute;
    right: 18px;
    top: 18px;
    background: url(../images/icon-close.svg);
    background-size: 100%;
    background-repeat: no-repeat;
}

/* form */

form .input-wrapper {
    background: linear-gradient(96deg, #8cff00 0%, #0059ff 43.5%, #7a0099 100%);
    border-radius: 25px;
    padding: 2px;
    margin-bottom: 9px;
}

form .form-field {
    display: block;
    width: 100%;
    border: none;
    border-radius: 25px;
    height: 45px;
    text-align: center;
    background-color: #12151b;
    font-size: 1rem;
}

form input::-webkit-input-placeholder {
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

form input::-moz-placeholder {
    -moz-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

form input:-ms-input-placeholder {
    -ms-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

form input::-ms-input-placeholder {
    -ms-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

form input::placeholder {
    transition: color 0.3s ease;
}

form input:focus::-webkit-input-placeholder {
    color: transparent;
}

form input:focus::-moz-placeholder {
    color: transparent;
}

form input:focus:-ms-input-placeholder {
    color: transparent;
}

form input:focus::-ms-input-placeholder {
    color: transparent;
}

form input:focus::placeholder {
    color: transparent;
}

form .btn {
    width: 100%;
    min-height: 45px;
}


/* indicators */

.indicators {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    pointer-events: none;
    margin: 0 auto;
    max-width: 480px;
}

.icon-mouse {
    width: 37px;
    height: 37px;
    position: absolute;
    top: 11px;
    left: 16px;
    background-image: url('../images/icon-mouse.png');
    background-repeat: no-repeat;
    z-index: 100;
}

/* floating bar */

.floating-bar-container {
    position: absolute;
    right: 20px;
    top: calc(50% - 200px);
    width: 40px;
    height: 400px;
    background-color: rgba(18, 21, 27, 0.50);
    border: 12px solid #0144c0;
    border-left: 1px solid #7A0099;
    border-right: 1px solid #65b800;
    border-radius: 10px;
    box-shadow: 0 0 6px #0059FF;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 10001;
}

.floating-bar-container:after {
    content: '';
    display: block;
    position: absolute;
    left: -8px;
    width: 52px;
    height: 52px;
    background-image: url(../images/icon-goal.png);
    z-index: 111;
    top: 64%;
}

.indicators.inactive .floating-bar-container:after {
    top: 44%;
}

.indicators.progress-50 .floating-bar-container:after {
    top: 44%;
}

.indicators.progress-70 .floating-bar-container:after {
    top: 25%;
}

.floating-bar {
    width: 100%;
    height: 0;
    background-size: 40px 400px;
    transition: height 1s linear;
    z-index: 112;
    position: absolute;
    bottom: 0;
}

.inactive .floating-bar {
    bottom: 41%;
}

.floating-bar:after {
    content: '';
    display: block;
    position: absolute;
    left: -8px;
    top: -36px;
    width: 52px;
    height: 36px;
    background-image: url(../images/icon-goal.png);
    background-position: 0px -54px;
}

/* progress bar */

.progress-bar-container {
    position: fixed;
    top: 14px;
    left: calc(50% - 105px);
    width: 210px;
    height: 12px;
    background-color: #12151b;
    border-radius: 10px;
    overflow: hidden;
    z-index: 10001;
    padding: 4px;
}

.progress-bar-container:before {
    content: '';
    display: block;
    position: absolute;
    background: linear-gradient(96deg, #8cff00 0%, #0059ff 43.5%, #7a0099 100%);
    top: -2px;
    bottom: -2px;
    left: -2px;
    right: -2px;
    z-index: -2;
    border-radius: 10px;
}

.progress-bar-container:after {
    content: '';
    display: block;
    position: absolute;
    background: #12151b;
    top: 2px;
    bottom: 2px;
    left: 2px;
    right: 2px;
    z-index: -1;
    border-radius: 50px;
}

.progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(96deg, #8cff00 0%, #0059ff 43.5%, #7a0099 100%);
    background-size: calc(100vw - 160px);
    transition: width 1s linear;
    border-radius: 10px;
}