:root{--carousel-container-padding: 5svh;--triangle-shape-height: 6svh;--choice-button-height: 25svh}body{margin:0;height:100svh;overflow:hidden;font-family:Helvetica,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-image:linear-gradient(140deg,#6579f0,#9289fd 60%,#a990fe)}.main{height:100svh;width:100svw;overflow:hidden;position:fixed}#background{background-image:linear-gradient(140deg,#6078fa,#3d59c6,#001f63);position:absolute;width:100svw;height:100svh;z-index:-1;opacity:0}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.hidden{display:none!important}.fadeOut{animation:fadeOut .5s 1 ease-in forwards}.fadeIn{animation:fadeIn .5s 1 ease-in forwards}#onboarding{position:absolute;width:100svw;height:100svh;top:0;left:0;display:flex;align-items:center;justify-content:center;font-size:4vw;color:#fff}#onboardingContainer{display:flex;flex-direction:column;align-items:center;width:40vw;row-gap:10svh}#onboardingContainer .input{display:flex;flex-direction:column;row-gap:1svh}#onboardingContainer .input.disabled{color:#ffffff81}#onboardingContainer .input.disabled .inputFieldContainer{border-color:#ffffff81}.inputFieldContainer.invalid{border-color:#001f63}#onboardingContainer p{margin:0}#onboardingInputContainer{display:flex;flex-direction:column;row-gap:3svh;width:100%}.rndButton{color:#6070f9;background:linear-gradient(180deg,#fff,#e3ffff);box-shadow:0 0 3svh #fff;border:none;border-radius:5svh;padding:1svh;width:100%;cursor:pointer;font-size:2vw}.rndButton.continue{padding:3svh}.rndButton.continue:disabled,#verifyBtn:disabled{opacity:30%;pointer-events:none}.rndButton:active{animation:buttonPress .3s}.inputFieldContainer{border-radius:3svh;border:.5svh solid #f5ffff;display:flex;padding:1vw;column-gap:1vw}.inputFieldContainer input{background-color:transparent;border:none;color:#fff;font-size:2vw}.inputFieldContainer input:focus{outline:none}.inputFieldContainer input:disabled{color:#ffffff81}.inputFieldContainer input::placeholder{color:#ffffff81}.input p{font-size:2vw}#sosScreen{position:absolute;bottom:0;left:0;height:100svh;width:100svw;display:flex;align-items:center;justify-content:center;column-gap:5vw;z-index:29}.sosContainer{z-index:29;width:30%;height:60%;background-color:#edefff;color:#6070f9;border-radius:5svh;border:1svh solid #f5ffff;font-size:2vw;padding:2svh 3svh;display:flex;flex-direction:column;justify-content:space-evenly}.sosContainer p{text-align:center;margin:0}.sosContainer span{font-weight:700}.sideElements{height:100svh;width:100vw}.sideElement{margin:6svh}#idIndicator{position:absolute;bottom:0svh;left:0svh}#dayindicator{position:absolute;top:0svh;right:0svh}.startScreen{display:flex;align-items:center;justify-content:center;height:100svh}.startMenu{color:#fff;font-size:4svh;display:flex;flex-direction:column;align-items:center;position:relative}.startMenu *{padding:0;margin:0}.timeframe{position:absolute;color:#f5e217;bottom:-27svh;display:flex;flex-direction:column;align-items:center;width:50vw}.timeframe span{color:#fff}.timeframe .note{font-size:3svh}.fadingOut{animation:fadingOut .2s 1 ease-in forwards}.fadingIn{animation:fadingIn .5s 1 ease-in forwards}.start.roundedBtn{margin-top:5svh;width:30vw;height:15svh;border-radius:10svh;font-size:5svh;box-shadow:0 0 10svh #ffffffba;cursor:pointer}.roundedBtn{background:#fff;color:#6070f9;background:linear-gradient(180deg,#fff,#e3ffff);box-shadow:0 0 3svh #fff;border:none;border-radius:5svh;padding:1svh;height:10svh;width:20vw;font-size:3svh;cursor:pointer}.roundedBtn.faded{pointer-events:none;opacity:30%}.roundedBtn:active{animation:buttonPress .3s}.sosButton{position:absolute;top:0svh;left:0svh;background:#6579f0;background:linear-gradient(0deg,#6579f0,#9289fd,#a990fe);border:none;color:#fff;font-size:3svh;width:15svh;height:15svh;border-radius:100svh;box-shadow:0 .5svh 1svh #00000081;cursor:pointer;z-index:30}.sosButton.close{color:#5a5a5a;font-weight:700;font-size:5svh}.sosButton:active{animation:buttonPress .3s}.roundBtnSide{border:.5svh solid #6070f9;background-color:#fff0;font-size:2svh;color:#ffffff93;width:15svh;height:15svh;border-radius:100svh}.roundedBtn p{margin:0}.roundBtnSide *{margin:0svh}.interactionButtonsCon{position:absolute;bottom:-8svh;left:10vw;display:flex}.interactionButtonsCon :first-child{margin-right:5vw!important}.roundBtn.record{border-radius:100svh;width:10svh;background-color:#fff;border:none;margin-right:10vw;box-shadow:0 0 3svh #fff;cursor:pointer;font-size:2svw;padding:0}.roundBtn.delete{border-radius:100svh;width:8vw;background-color:#fff;color:#6070f9;border:none;margin-right:7vw;box-shadow:0 0 3svh #fff;cursor:pointer;font-size:2vw}.listenBtn{position:absolute;border-radius:10svh;width:10svh;height:10svh;background:linear-gradient(0deg,#adf9f8,#d6fcfc,#e6f8f8);border:none;box-shadow:0 0 2svh #fff;cursor:pointer;font-size:2vw;z-index:2;top:-1svh;right:-1svh}.record.active{animation:pulseRecord 2s infinite;box-shadow:0 0 #fff0;background:linear-gradient(0deg,#adf9f8,#d6fcfc,#e6f8f8)}.roundedBtn.interaction.submit{width:12vw;font-size:4svh;margin-right:5vw}.submit:disabled,.choice:disabled{color:#7c7c7c;background:linear-gradient(180deg,#a4a4a480,#7a8a8a8c)!important;box-shadow:0 0 3svh #acacacb0;pointer-events:none}#clearBtn:disabled{pointer-events:none;opacity:70%}#clearBtn:active{animation:deleteBtn .1s}.roundedBtn.interaction.choice{font-size:4svh;width:30vw;background:linear-gradient(0deg,#adf9f8,#deffff)}.roundedBtn.reject{background:linear-gradient(0deg,#adf9f8,#deffff)}.roundedBtn.confirmStory{height:20svh}.choiceBtn{display:flex;justify-content:center;align-items:center;position:relative;height:var(--choice-button-height);width:25vw;border-radius:10svh;font-size:4svh;z-index:1}.carouselBtn{height:var(--choice-button-height);width:25vw;border-radius:10svh;margin:0 5svh 0 0}.carouselBtn.faded{pointer-events:none;animation:btnInactive .1s 1 ease-in forwards}.carouselBtn span{font-weight:700;font-size:3vw}.carouselBtn p{font-weight:lighter;font-size:1.5vw}.voiceBtnMakoto{background:linear-gradient(0deg,#adf9f8,#deffff)}.choiceBtn span{font-weight:700}.choiceBtn p{font-weight:lighter;text-align:center}.feedbackBtn{border-radius:100svh;width:10svh;height:10svh;background-color:#fff;border:none;margin-top:2svh;box-shadow:0 0 3svh #fff;cursor:pointer;font-size:2vw}.feedbackBtn:active{animation:buttonPress .3s}#idField,#dateField{font-size:3svh;color:#fff}.triangle{content:"";width:0;height:0}.speechBubble{position:absolute;bottom:5svh;right:calc(-1 * var(--triangle-shape-height))}.confirm{position:absolute;bottom:30svh;right:calc(-1 * var(--triangle-shape-height))}.right{border-top:3svh solid transparent;border-left:var(--triangle-shape-height) solid #f5ffff;border-bottom:3svh solid transparent}.left{border-top:3svh solid transparent;border-right:var(--triangle-shape-height) solid #f5ffff;border-bottom:3svh solid transparent}.carouselRight{position:absolute;bottom:calc(((var(--choice-button-height) + 2 * var(--carousel-container-padding))/2) - (var(--triangle-shape-height) / 2));right:3vw;z-index:1;cursor:pointer}.carouselLeft{position:absolute;bottom:calc(((var(--choice-button-height) + 2 * var(--carousel-container-padding))/2) - (var(--triangle-shape-height) / 2));left:3vw;z-index:1;cursor:pointer}.right.inactive{border-left:var(--triangle-shape-height) solid #a2abab;pointer-events:none}.left.inactive{border-right:var(--triangle-shape-height) solid #a2abab;pointer-events:none}.inputBox{display:flex;position:absolute;bottom:15svh;left:10svh;width:40vw;max-height:30svh;min-height:10svh;color:#fff;background-color:#5761d7;border-radius:5svh;border:1svh solid #fff}.textInputInteraction{text-align:center;margin:2svh 3svh;font-size:3svh;overflow:hidden}#textInputContainer{width:100%;display:flex;align-items:center;justify-content:end;flex-direction:column;font-size:4svh;-webkit-mask-image:linear-gradient(0deg,black 10svh,transparent 25svh);mask-image:linear-gradient(0deg,black 10svh,transparent 25svh);row-gap:2svh;padding:2svh 3svh}#textInputContainer p{margin:0}#choiceContainer{display:flex;justify-content:space-evenly;position:absolute;width:100vw;bottom:10svh;left:0}#outputBox{position:absolute;text-align:center;bottom:50svh;right:35vw;background-color:#edefff;color:#6070f9;border-radius:5svh;border:1svh solid #f5ffff;font-size:5svh;width:45vw;padding:2svh 3svh;max-height:40svh}.textOutputInteraction{max-height:34svh;overflow-y:auto}#carousel{position:absolute;width:100vw;bottom:5svh;left:0;overflow:hidden;padding:var(--carousel-container-padding) 0 var(--carousel-container-padding) 0}#carouselChoices{position:relative;display:flex;left:10vw;width:1000vw;transition:all .5s}#confirmContainer{position:absolute;min-height:80%;max-height:80%;bottom:10svh;right:35vw;display:flex;flex-direction:column;justify-content:space-between}#confirmTextContainer{text-align:center;background-color:#edefff;color:#6070f9;border-radius:5svh;border:1svh solid #f5ffff;font-size:5svh;width:45vw;padding:2svh 3vw 2svh 3vw;position:relative}#confirmTextContainer p:first-child{font-weight:700}.confirmButtonContainer{display:flex;justify-content:space-between;align-items:flex-end}#readingContainer{position:absolute;bottom:0;left:0;display:flex;width:100svw;min-height:65svh;justify-content:center;align-items:end;margin-bottom:6svh;padding-bottom:3svh;overflow:hidden}#unfreezeButton{position:absolute;bottom:0svh;left:0svh;background:linear-gradient(0deg,#6579f0,#9289fd,#a990fe);border:none;color:#fff;font-size:3svh;width:15svh;height:15svh;border-radius:100svh;box-shadow:0 .5svh 1svh #00000081;cursor:pointer;margin:6svh}#feedbackButtonContainer{position:absolute;display:flex;flex-direction:column;bottom:3svh;left:8.5svh}#readingTextContainer{width:60%;display:flex;flex-direction:column;justify-content:flex-end;row-gap:3svh;overflow:hidden;-webkit-mask-image:linear-gradient(0deg,black 20svh,transparent 90svh);mask-image:linear-gradient(0deg,black 20svh,transparent 90svh)}#readingTextContainer p{font-size:5svh;color:#fff;margin:0;font-weight:lighter}#readingTextContainer p:last-child{font-weight:700;animation:fadingIn .5s ease-in forwards}#valenceArousalContainer{display:flex;column-gap:.5vw;margin-bottom:10svh}.valenceArousalElement{display:flex;flex-direction:column;align-items:center;row-gap:2svh;justify-content:space-between}.valenceArousalElement img{height:15svh}.arousalBig{height:18svh!important}#valenceArousalMainContainer{position:absolute;bottom:0;left:0;display:flex;width:100%;height:100%;align-items:flex-end;justify-content:center}.scaleBtn{border-radius:100svh;width:10svh;height:10svh;background-color:#fff;border:none;box-shadow:0 0 3svh #fff;cursor:pointer;font-size:3vw;color:#6070f9;margin:0 1.5vw;padding:0}.scaleBtn:active{animation:buttonPress .3s}.popUp{position:absolute;bottom:0;left:0;height:100%;width:100%;display:flex;align-items:center;justify-content:center;z-index:20}.popUp p{margin:0}.popUpContainer{display:flex;align-items:center;justify-content:center;flex-direction:column;width:40vw;background-color:#edefff;color:#6070f9;border-radius:5svh;border:1svh solid #f5ffff;font-size:2vw;padding:5svh 3vw 5svh 3vw}.popUpContainer .rndButton{background:linear-gradient(0deg,#6579f0,#9289fd,#a990fe);box-shadow:0 .5svh 1svh #00000081;color:#fff;width:fit-content;padding:2svh 4vw 2svh 4vw}#numberInputContainer{display:flex;align-items:center;justify-content:center;width:100%;gap:3svh;padding:2vw 0 0}#numberInputContainer input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}#numberInputContainer input[type=number]{padding:2vh 1vw 2svh 1vw;font-size:2vw;width:25%}#audioRepeat.rndButton{font-size:1vw;padding:2vh 2vw 2svh 2vw}#audioCheckPopUp .numberErrorMsg{font-size:1vw;padding:1vw 0 2vw;visibility:hidden}#audioCheckPopUp #numberCheckContainer{display:flex;flex-direction:column;align-items:center}.burst-1{position:absolute;animation-delay:0s;opacity:0;pointer-events:none}.burst-2{position:absolute;animation-delay:.2s;opacity:0;pointer-events:none}.burst-3{position:absolute;animation-delay:.4s;opacity:0;pointer-events:none}.burst{animation-name:burst;animation-duration:1s;animation-timing-function:ease-out}@keyframes burst{0%{transform:translateY(0) scale(1);opacity:0}to{transform:translateY(-200%) scale(1.5);opacity:1}}#spinnerContainer{position:absolute;display:flex;flex-direction:column;align-items:center;bottom:5svh;left:calc(50svw - 20svh)}#spinnerContainer p{font-size:4svh;color:#fff;font-weight:700}.spinner{height:15svh;width:15svh;border:1.5svh solid;border-color:white transparent white transparent;border-radius:50%;animation:spinning 1.5s ease-in-out infinite}#audioCheckPopUp #spinnerContainer{position:relative;display:flex;flex-direction:column;align-items:center;bottom:0;left:0;padding:4vw 0 2vw}#audioCheckPopUp #spinnerContainer p{font-size:2svh;color:#6070f9;font-weight:700}#audioCheckPopUp .spinner{height:5svh;width:5svh;border:1svh solid;border-color:#6070f9 transparent #6070f9 transparent}@keyframes spinning{to{transform:rotate(360deg)}}@keyframes fadingOut{0%{opacity:100%}to{opacity:0%;display:none}}@keyframes fadingIn{0%{opacity:0%;display:none}to{opacity:100%}}@keyframes btnInactive{0%{opacity:100%}to{opacity:30%}}@keyframes pulseRecord{0%{transform:scale(1);box-shadow:0 0 #adf9f8}70%{transform:scale(1.1);box-shadow:0 0 0 3svh #adf9f800}to{transform:scale(1)}}@keyframes deleteBtn{0%{transform:translate(0);background:linear-gradient(0deg,#adf9f8,#d6fcfc,#e6f8f8);box-shadow:0 0 3svh #adf9f8}20%{transform:translate(1vw)}40%{transform:translate(-1vw)}60%{transform:translate(1vw)}80%{transform:translate(-1vw)}to{transform:translate(0);background:linear-gradient(0deg,#adf9f8,#d6fcfc,#e6f8f8);box-shadow:0 0 3svh #adf9f8}}@keyframes buttonPress{0%{transform:scale(1)}60%{transform:scale(.9)}to{transform:scale(1)}}