html, body {
    margin:0; height:100%; 
    padding:0; 
    font-family: Arial, sans-serif; 
    background:#33353f;
    overflow: hidden;
}

#save_data {
    position: absolute;
    right: 0; top: 0; width: 160px; height: 160px;
    background-color: rgba(0, 0, 0, 0.0);
    z-index: 10000;
    pointer-events: all!important;
    /* cursor: pointer; */
}

* {
    user-select: none;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.no-scrollbars {
    -ms-overflow-style: none;  /* Hide native scrollbars IE and Edge */
    scrollbar-width: none;  /* Hide native scrollbars Firefox */
}

.no-scrollbars::-webkit-scrollbar {
    display: none; height: 0; width: 0; /* Hide native scrollbars Webkit */
}

main {
    display: block;
    position: fixed;
    left: 50%; top: 50%; width: 1920px; height: 1080px;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 30px rgba(0,0,0,0.5) inset;
}

main > section {
    overflow: hidden;
}

section[frame] {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
}

.video_cont {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; /* позади контента */
    overflow: hidden;
}

.video_cont video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* можно также использовать contain, если нужно полностью видеть видео */
    object-position: center;
    opacity: 30%;
    filter: saturate(0.1);
}

section[frame] #frame {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

section[frame] #frame_mid {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
}




.header {
    position: absolute;
    box-sizing: border-box;
    left: 50%; top: 120px; transform: translate(-50%,-50%);
    width: auto; min-width: 400px; height: 105px;
    padding: 0 100px;
    text-align: center;
}

.header span {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 46px;
    font-weight: lighter;
    line-height: 105px;
    color: #DADAB7;
    text-shadow: 0 0 20px #062967;
    white-space: nowrap;
}

.header .hbg_l,
.header .hbg_c,
.header .hbg_r {
    position: absolute;
    top: 0; height: 105px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    z-index: -1;
}

.header .hbg_l {
    left: 0; width: 150px;
    background-image: url(images/hbg_l.svg);
}

.header .hbg_c {
    left: 150px; right: 150px; 
    background-image: url(images/hbg_c.svg);
}

.header .hbg_r {
    right: 0; width: 150px;
    background-image: url(images/hbg_r.svg);
}




.btn {
    position: absolute;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s, transform 0.5s;
    transition-delay: 0s;
    background-color: rgba(0,0,0,0.0);
    border: 0;
    white-space: nowrap;
}

.btn span {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 42px;
     line-height: 90px;
    font-weight: lighter;
    /* color: #DADAB7; */
    color: #A3C1D9;
    /* text-shadow: 0 0 20px #062967; */
    white-space: nowrap;
}

.btn .btnbg_l,
.btn .btnbg_c,
.btn .btnbg_r {
    position: absolute;
    top: 0; height: 90px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    z-index: -1;
    /* transition: filter 0.2s; */
}

.btn .btnbg_l {
    left: 0; width: 90px;
    background-image: url(images/btnbg_l.svg);
}

.btn .btnbg_c {
    left: 90px; right: 90px; 
    background-image: url(images/btnbg_c.svg);
}

.btn .btnbg_r {
    right: 0; width: 90px;
    background-image: url(images/btnbg_r.svg);
}

.btn:hover .btnbg_l,
.btn:hover .btnbg_c,
.btn:hover .btnbg_r {
    /* filter: hue-rotate(0deg) brightness(2); */
}

.btn::before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    left: 0; top: 0; width: 100%; height: 100%;
    filter: blur(20px);
    background-color: rgba(179, 213, 240, 1);
    border: 10px solid rgba(179, 213, 240, 1);
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transform: scale(0.8,0.1);
    transition: transform 0.3s, opacity 0.3s;
}

.btn:hover::before {
    opacity: 0.5;
    transform: scale(1);
}

.btn.selected span,
.btn.correct  span{
    filter: brightness(5);
}

.btn.selected .icon,
.btn.correct  .icon{
    filter: brightness(5);
}

.btn.selected .btnbg_l,
.btn.selected .btnbg_c,
.btn.selected .btnbg_r {
    filter: hue-rotate(0deg) brightness(2.5);
}

.btn.correct .btnbg_l,
.btn.correct .btnbg_c,
.btn.correct .btnbg_r {
    filter: hue-rotate(270deg) brightness(2.5);
}






button#back {
    z-index: 1000;
    left: 120px; top: 120px;
    width: 300px;
    transform: translate(-300px,-50%) scale(1);
}

button#back .icon {
    margin-left: -20px;
    margin-right: 20px;
    margin-bottom: -5px;
}



body.capsule button#back,
body.test button#back {
    transform: translate(0,-50%) scale(1);
    opacity: 1;
    pointer-events: all;
    transition-delay: 0.5s;
}






section[home],
section[capsule],
section[test] {
    position: fixed;
    left: 0; top: 0; width: 100%; height: 100%;
    transform: scale(0.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s, transform 0.5s;
    overflow: hidden;
}

body.home section[home],
body.capsule section[capsule],
body.test section[test] {
    transform: scale(1);
    opacity: 1;
    pointer-events: all;    
}



section[home] {
    display: flex;
    flex-direction: row;
}
 
section[home] > div {
    position: relative;
    width: 50%; height: 100%;
}

section[home] > div > svg,
section[home] > div > img {
    position: absolute;
    left: 0; right: 0; width: 100%; height: 100%;
}

section[home] > div > button {
    appearance: none;
    position: absolute;
    box-sizing: border-box;
    left: 50%; top: 50%; width: 390px; height: 390px; 
    transform: translate(-50%,-50%);
    /* background-color: transparent; */
    background-color: rgba(5, 23, 46, 0.2);
    border: 0;
    border-radius: 195px;
    cursor: pointer;
}

section[home] > div > button::before {
    content: '';
    position: absolute;
    left: 50%; top: 50%; width: 100%; height: 100%; 
    transform: translate(-50%,-50%) scale(0.5);
    background-color: transparent;
    border: solid 20px rgb(101, 189, 244);
    border-radius: 250px;
    filter: blur(100px);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s, filter 0.3s;
    /* transition-timing-function:ease-in; */
}

section[home] > div > button:hover:before {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1.0);
    filter: blur(30px);
    /* transition-timing-function:ease-out; */
}

section[home] > div > button .icon {
    position: absolute;
    box-sizing: border-box;
    left: 50%; top: 50%; width: auto; height: 180px; 
    transform: translate(-50%,-50%) translateY(-30px);
    pointer-events: none;
}

section[home] > div > button span {
    position: absolute;
    box-sizing: border-box;
    left: 50%; top: 50%; 
    transform: translate(-50%,-50%) translateY(120px);
    pointer-events: none;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: lighter;
    font-size: 32px;
    color: #DADAB7;
    text-shadow: 0 0 14px #062967;
}

section[home] > div > .btn-descr {
    position: absolute;
    box-sizing: border-box;
    left: 50%; top: 50%; width: auto; height: auto; 
    transform: translate(-50%,280px) scale(0.9);
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s, transform 0.5s, filter 0.5s;
    transition-delay: 0.5s;
}

body.home section[home] > div > .btn-descr {
    opacity: 1;
    transition-delay: 0.5s;
    transform: translate(-50%,230px) scale(0.9);
}

section[home] > div:has(button:hover) > .btn-descr {
    transition-delay: 0.0s;
    transform: translate(-50%,230px) scale(1.0);
}

section[home] > div > .btn-descr .big {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: lighter;
    font-size: 40px;
    color: #FFFFFF;
    text-shadow: 0 0 20px #062967;
}

section[home] > div > .btn-descr .small {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: lighter;
    font-size: 20px;
    color: #B3D5F0;
}








section[capsule] > .stage {
    position: absolute;
    left: 50%; top: 50%; width: 1616px; height: 566px; 
    transform: translate(-50%,-50%) scale(1);
    transition: opacity 0.5s, transform 0.5s, filter 0.5s;  
    opacity: 1;
    transition-delay: 0.5s;
}

section[capsule] > .sent-popup {
    position: absolute;
    left: 50%; top: 50%; width: auto; height: auto; 
    background-color: rgba(0,0,0,0.0);
    transform: translate(-50%,-50%) translateY(40px) scale(0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s, filter 0.3s;
    text-align: center;
    padding: 70px 90px;
    transition-delay: 0.3s;
}

section[capsule] > .sent-popup::before {
    content: '';
    position: absolute;
    left: 50%; top: 50%; width: 100%; height: 100%; 
    background-color: rgba(10, 20, 32, 0.25);
    border-radius: 80px;
    transform: translate(-50%,-50%);
    filter: blur(30px);
    z-index: -1;
}

body.sent section[capsule] > .sent-popup {
    transform: translate(-50%,-50%) translateY(40px) scale(1);
    opacity: 1;
    pointer-events: all;
}

section[capsule] > .sent-popup .message {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: lighter;
    font-size: 27px;
    color: #FFFFFF;
    text-shadow: 0 0 20px #062967;
    margin-bottom: 30px;
}

section[capsule] > .sent-popup button {
    opacity: 1;
    padding: 0 40px;
    position: relative;
    /* left: 50%; bottom: 40px; */
    /* transform: translateX(-50%); */
}

body.sent section[capsule] > .sent-popup button {
    pointer-events: all;
}

section[capsule] > .sent-popup button span {
    font-size: 32px;
}


body.sent section[capsule] > .stage {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%,-50%) scale(0.6);
    transition-delay: 0.0s;
}

body.sent section[capsule] > .stage * {
    pointer-events: none!important;
}

section[capsule] > .stage > div {
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%; 
    display: flex;
    flex-direction: row;
}

section[capsule] > .stage > div > div {
    position: relative;
    height: 100%; 
}

section[capsule] > .stage > div > div.text {
    padding: 30px 88px;
    box-sizing: border-box;
    width: 700px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: lighter;
    font-size: 25px;
    color: #A3C1D9;
}

section[capsule] > .stage > div > div.input {
    width: 60%;
}

section[capsule] > .stage > div > div.input textarea {
    position: absolute;
    left: 50%; top: 50%; width: 810px; height: 420px; 
    transform: translate(-450px,-50%);
    background-color: rgba(0, 0, 0, 0.0);
    border: 0;
    resize: none;
    outline: none;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: lighter;
    font-size: 25px;
    color: #A3C1D9;
    overflow: auto;
}

section[capsule] > .stage > div > div.input textarea::selection ,
section[capsule] > .stage > div > div.input textarea::-moz-selection ,
section[capsule] > .stage > div > div.input textarea::-webkit-selection {
    color: red;
    background: rgb(163, 193, 217, 0.2);
}

section[capsule] > .stage > div > div.input scroll-bar {
    position: absolute;
    right: 70px; top: 80px; width: 10px; height: calc(100% - 160px);
    background-color: rgba(0,0,0,0.0);
}

section[capsule] > .stage > div > div.input scroll-bar {
    position: absolute;
    right: 70px; top: 75px; width: 10px; height: calc(100% - 150px);
    
    --track-bg-color: rgb(179, 213, 240, 0.2); 
    --thumb-color: rgb(179, 213, 240);
    
    --track-width: 4px;
    --track-radius: 4px;
    
    --thumb-width: 8px;
    --thumb-radius: 6px;
    
    --thumb-minsize: 50;
}

body.keyb section[capsule] > .stage {
    transform: translate(-50%,-50%) translateY(-80px);
}


section[capsule] button#send {
    z-index: 1;
    left: 50%; bottom: 150px;
    width: 600px; 
    transform: translate(-50%,50%) scale(1);
    opacity: 1;
    pointer-events: all;
}

body.sent section[capsule] button#send {
    transform: translate(-50%,50%) scale(0.6);
    opacity: 0;
    pointer-events: none;
    /* transition-delay: 0.3s; */
}

section[capsule] button#send .icon {
    margin-left: 20px;
    margin-bottom: -5px;
}





section[test] {
    pointer-events: none;
}

section[test] > .final-popup {
    position: absolute;
    left: 50%; top: 50%; width: auto; height: auto; 
    background-color: rgba(0,0,0,0.0);
    transform: translate(-50%,-50%) translateY(40px) scale(0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s, filter 0.3s;
    text-align: center;
    padding: 70px 90px;
}

section[test] > .final-popup::before {
    content: '';
    position: absolute;
    left: 50%; top: 50%; width: 100%; height: 100%; 
    background-color: rgba(10, 20, 32, 0.25);
    border-radius: 80px;
    transform: translate(-50%,-50%);
    filter: blur(30px);
    z-index: -1;
}

body.test-final section[test] > .final-popup {
    transform: translate(-50%,-50%) translateY(40px) scale(1);
    opacity: 1;
    pointer-events: all;
}

section[test] > .final-popup .message {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: lighter;
    font-size: 27px;
    color: #FFFFFF;
    text-shadow: 0 0 20px #062967;
    margin-bottom: 30px;
}

section[test] > .final-popup button {
    opacity: 1;
    padding: 0 40px;
    position: relative;
    /* left: 50%; bottom: 40px; */
    /* transform: translateX(-50%); */
}

body.test-final section[test] > .final-popup button {
    pointer-events: all;
}

section[test] > .final-popup button span {
    font-size: 32px;
}

section[test] > .stage {
    position: absolute;
    left: 50%; top: 50%; width: 1616px; height: auto; 
    opacity: 1;
    transform: translate(-50%,-50%) translateY(40px) scale(1);
    transition: opacity 0.5s, transform 0.5s, filter 0.5s;
}

body.test-final section[test] > .stage {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%,-50%) translateY(40px) scale(0.6);
}

section[test] > .stage .question {
    position: absolute;
    left: 50%; bottom: 100%; 
    transform: translate(-50%,-30px);
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: lighter;
    font-size: 36px;
    color: #FFFFFF;
    text-shadow: 0 0 20px #062967;
    white-space: nowrap;
}

section[test] > .stage .counter {
    position: absolute;
    left: 50%; top: 100%; 
    transform: translate(-50%,30px);
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: lighter;
    font-size: 36px;
    color: #A3C1D9;
    white-space: nowrap;
}

section[test] > .stage .counter b {
    color: #FFFFFF;
}

section[test] > .stage .btns {
    position: relative;
    left: 0; top: 0; width: 100%; height: 100%; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

section[test] > .stage .btns > button {
    position: relative;
    width: 1000px; height: 90px;
    opacity: 0;
    cursor: pointer;
    text-align: left;
    padding-left: 110px;
    transition: opacity 1s;
}

section[test] > .stage .btns > button.vis {
    opacity: 1;
}

section[test] > .stage .btns > button span {
    font-size: 27px;
}

body.test section[test] > .stage .btns:not(.inactive) > button {
    pointer-events: all;
}

section[test] > .stage .btns > button:not(:last-child) {
    margin-bottom: 20px;
}

section[test] > .stage .btns > button .icon {
    position: absolute;
    margin: 0;
    left: 50px;
    top: 50%; 
    transform: translateY(-50%);
}

section[test] > .stage .btns > button.removed {
    transform: translateX(-1000px);
    opacity: 0;
    transition-delay: calc(var(--i) * 0.1s);
}







body.capsule #fsm_bot,
body.capsule #fsm_top,
body.test #fsm_bot,
body.test #fsm_top {
    transition: 0.7s;
    opacity: 0;
} 

body.capsule #fm_bot,
body.test #fm_bot {
    transition: 0.7s;
    d: path("M930 1060L960 1059.8L990 1060");
} 

body.capsule #fm_top,
body.test #fm_top {
    transition: 0.7s;
    d: path("M990 20L960 19.8L930 20");
} 


body.home #frame_mid {
    animation: frame_mid_show 0.65s forwards;
} 

body.capsule #frame_mid,
body.test #frame_mid {
    animation: frame_mid_hide 1s forwards;
} 

@keyframes frame_mid_show {
    0% { transform: translate(-50%,-50%) scaleX(0.2) scaleY(0.0); }
    50% { transform: translate(-50%,-50%) scaleX(0.2); }
    60% { transform: translate(-50%,-50%) scaleX(0.2); }
    100% { transform: translate(-50%,-50%) scaleX(1); }
}

@keyframes frame_mid_hide {
    0% { transform: translate(-50%,-50%) scaleX(1); }
    40% { transform: translate(-50%,-50%) scaleX(0.2); }
    60% { transform: translate(-50%,-50%) scaleX(0.2); }
    100% { transform: translate(-50%,-50%) scaleX(0.2) scaleY(0.0); }
}