.progress-bar-container{position:relative;display:flex;align-items:center;background-color:var(--white-background-color);height:32px;border-radius:16px;width:90%;--indicator-side-margin: 12px}.progress-bar-container .progress-indicator{height:10px;border-radius:16px;background:linear-gradient(to right,#41c19f,#ac84e3);margin:0 var(--indicator-side-margin);transition:width 1s ease-in-out;z-index:0}.progress-bar-container .checkpoint_container{position:absolute;display:flex;justify-content:space-between;align-items:center;z-index:1;width:calc(100% - 24px);right:var(--indicator-side-margin)}.progress-bar-container .check-point{position:absolute;transition:all 1s ease-in-out}@keyframes checkpoint-fade-in{0%{opacity:0;transform:translateY(0) scale(.1)}to{opacity:1;transform:translateY(0) scale(1)}}.check-point.fade-in{animation:checkpoint-fade-in .28s ease-out}.goal-star{position:absolute;right:calc(var(--indicator-side-margin) / 2 * -1)}@keyframes rotate{0%{transform:rotate(0);animation-timing-function:ease}to{transform:rotate(360deg)}}@keyframes purun{0%{transform:scale(1) translate(0)}15%{transform:scale(.9) translateY(5%)}30%{transform:scale(1.3,.8) translateY(10%)}50%{transform:scale(.8,1.3) translateY(-10%)}70%{transform:scale(1.1,.9) translateY(5%)}to{transform:scale(1) translate(0)}}.goal-star.completed{animation:rotate 1s ease-in 0s 1}.survey-option{--padding-side: 24px;display:flex;background-color:var(--white-background-color);border-radius:3em;border:solid 1px var(--text-black-color);min-height:3em;padding:4px var(--padding-side);align-items:center;justify-content:space-between;color:var(--text-black-color);font-size:var(--font-size-medium);line-height:1.5;overflow-wrap:anywhere;word-break:break-all;gap:8px;cursor:pointer;overflow:hidden;transition:all .6s cubic-bezier(.23,1,.32,1)}.survey-option:hover{background-color:var(--option-hover-color)}.question-text{font-size:var(--font-size-large);color:var(--text-black-color);display:flex;justify-content:center;place-items:center;max-width:90%;word-break:break-all;text-align:center}.option-list{display:flex;flex-direction:column;gap:12px;width:90%}@keyframes fade-in{0%{opacity:0;transform:translateY(0) scale(.5)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:.9}50%{opacity:.3}}.loader-container{align-self:end}.loader{animation:fade-in .3s linear 1;width:120px;height:120px}.loader .base-circle{animation:spin .5s linear infinite;transform-origin:50% 50%}.loader .ring-rotating{animation:spin 1.5s linear infinite,pulse 1.5s ease-in-out infinite;transform-origin:50% 50%}@keyframes container-fade-in{0%{opacity:0}to{opacity:1}}.result-container{--title-color: hsl(10, 82%, 44%);--background-orange-color: #f5d7b0;--background-purple-color: #d9c3fa;--list-label-background-color: #fff2ef;--title-height: 40px}.result-container{display:flex;flex-direction:column;align-items:center;justify-content:start;background-color:var(--white-background-color);position:absolute;width:85%;height:80vh;border-radius:20px;box-shadow:var(--default-box-shadow);animation:container-fade-in .7s ease-in 1;overflow:scroll;-ms-overflow-style:none;scrollbar-width:none;line-height:1.7;max-width:800px}.box::-webkit-scrollbar{display:none}.result-container .result-top-text{color:var(--text-black-color);font-size:clamp(.9rem,3.5vw,1.1rem);font-weight:500;display:flex;padding-inline:10px;justify-content:center}.result-container .result-items:has(.gamechange-logo) .result-top-text{padding-top:var(--title-height)}.result-container .title{width:85%;display:flex;position:fixed;align-items:center;justify-content:center;height:var(--title-height);border-radius:8px 8px 0 0;background-color:var(--title-color);color:var(--text-white-color);font-size:clamp(1rem,1.2rem,3rem);z-index:1;max-width:800px}.result-container .result-items{display:grid;grid-template-columns:100%;grid-template-rows:auto;gap:20px;padding-top:var(--title-height);padding-inline:20px;padding-bottom:5vh;margin:20px auto;--items-padding-bottom: 16px;--items-padding-inline: 16px}.result-container:has(.gamechange-logo) .result-items{padding-top:unset!important}.result-container .result-item{justify-content:flex-start;flex-direction:row;flex-wrap:wrap;border-radius:20px;background:linear-gradient(#ffefde,#ffc3b5);padding-bottom:var(--items-padding-bottom);padding-inline:var(--items-padding-inline)}.result-container .gamechange-logo-wrapper{display:flex;justify-content:center;margin-left:calc(var(--items-padding-inline) * -1);margin-right:calc(var(--items-padding-inline) * -1)}.result-container .gamechange-logo{width:100%;max-width:500px}.result-container .result-item .index-label{font-family:Montserrat,sans-serif;font-weight:500;position:relative;padding-left:calc(var(--items-padding-inline)* 2);padding-block:8px;font-size:1.1rem}.result-container .result-item .index-label .index-label-text:before{content:"";background-color:var(--text-black-color);position:absolute;top:50%;left:var(--items-padding-inline);transform:translateY(-50%);width:8px;height:8px;border-radius:999px}.result-container .result-item .index-label:after{content:"";background-color:var(--text-black-color);position:absolute;bottom:-5px;left:50%;transform:translate(-50%);height:1px;width:95%}.result-container .result-items .text{font-size:1rem;word-break:break-word;margin:0}.result-container .result-items .list{display:flex;flex-direction:column;justify-content:center;width:100%;font-size:1rem;flex-wrap:wrap;word-break:break-word;list-style:none;margin:16px auto;padding:0;position:relative}.list .list-label{display:flex;border-left:solid 8px var(--title-color);background:var(--list-label-background-color);border-radius:0 8px 8px 0;padding:.5em;list-style-type:none!important}.list .text{padding:8px}.result-container .result-items .link{display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:var(--text-black-color);cursor:pointer;border:solid var(--text-black-color) 1px;padding:8px 16px;border-radius:24px;margin:8px auto;gap:8px;background-color:#ffffff80;transition:background-color .2s ease-in 0s}.result-container .result-items .link:hover{background-color:#fff;border-color:transparent}.result-container .result-items .link:hover .link-arrow-circle svg:first-child{animation:arrow-move-right .7s ease both infinite}.result-container .result-items .link-arrow-circle{width:40px;height:40px;background-color:#fff;color:#262626;border-radius:50%;overflow:hidden;position:relative;flex-shrink:0}.result-container .result-items .link-arrow-circle svg{position:absolute;top:50%;left:50%;width:16px;height:9px;transform:translate(-50%,-50%)}.back-button-container{display:grid;justify-items:center;margin-top:30px}.back-button-container>a{width:60%;max-width:250px;cursor:pointer;text-decoration:none;display:flex;flex-wrap:wrap;align-items:end;color:var(--text-black-color)}.brand-logo-wrapper{display:flex;align-items:flex-end}.brand-logo-wrapper .reg-mark{text-decoration:none;color:var(--brand-logo-yellow-color);font-size:clamp(1.5rem,6vw,2rem);line-height:.5}.brand-logo{width:100%}.back-button-container>a:hover{transform:scale(1.1);transition:.3s}.back-button-container .navigation{display:flex;width:100%;justify-content:center;font-size:clamp(.8rem,3.5vw,1rem);align-items:center;border-radius:24px;padding:8px 0}.back-button-container:hover .link-back-circle svg{animation:arrow-move-left 1s ease both infinite}.result-container .result-items .link-back-circle{width:40px;height:20px;background-color:#fff;color:#262626;border-radius:50%;overflow:hidden;position:relative;flex-shrink:0}.result-container .result-items .link-back-circle svg{position:absolute;top:50%;left:70%;width:16px;height:9px;transform:translate(-50%,-50%)}:root{--bg1-outer-color: hsl(160, 70%, 70%);--bg1-inner-color: hsl(130, 70%, 70%);--bg2-outer-color: hsl(100, 70%, 70%);--bg2-inner-color: hsl(60, 70%, 70%);--bg3-outer-color: hsl(50, 70%, 70%);--bg3-inner-color: hsl(30, 70%, 70%);--bg4-outer-color: hsl(20, 70%, 70%);--bg4-inner-color: hsl(10, 70%, 70%);--result-color: hsl(18, 85%, 64%)}@property --outer{syntax: "<color>"; inherits: false; initial-value: hsl(210,70%,70%);}@property --inner{syntax: "<color>"; inherits: false; initial-value: hsl(170,70%,70%);}#root:before,#root:after{content:"";position:absolute;pointer-events:none;z-index:-1;left:0;right:0;height:40vh;filter:blur(1px);transition:--outer .7s ease-in,--inner .7s ease-in}#root:before{top:0;background:linear-gradient(to bottom,var(--outer) 0%,var(--inner) 25%,rgba(255,255,255,0) 40%)}#root:after{height:40vh;bottom:0;background:linear-gradient(to top,var(--outer) 0%,var(--inner) 25%,rgba(255,255,255,0) 40%)}#root.bg-1:before,#root.bg-1:after{--outer: var(--bg1-outer-color);--inner: var(--bg1-inner-color)}#root.bg-2:before,#root.bg-2:after{--outer: var(--bg2-outer-color);--inner: var(--bg2-inner-color)}#root.bg-3:before,#root.bg-3:after{--outer: var(--bg3-outer-color);--inner: var(--bg3-inner-color)}#root.bg-4:before,#root.bg-4:after{--outer: var(--bg4-outer-color);--inner: var(--bg4-inner-color)}#root.result{background-color:var(--result-color)}#root.result:before,#root.result:after{--outer: var(--white-background-color);--inner: var(--result-color)}#root.result:after{height:55vh}@media(prefers-reduced-motion:reduce){#root:before,#root:after{transition:none}}.survey-container{width:100%;max-width:600px;height:100vh;display:grid;justify-items:center;grid-template-rows:15vh 1fr 1.5fr}.survey-container .progress-bar-container{align-self:center}html{font-size:16px}body{margin:0}:root{--white-background-color: #fff;--text-black-color: #262626;--text-white-color: #fff;--option-hover-color: hsl(191, 28%, 82%);--orange-color: #ee8456;--light-orange-color: #f5d7b0;--brand-logo-yellow-color: #f9a51b}:root{--font-size-large: 24px;--font-size-medium: 14px}:root{--footer-height: 5dvh}#root{position:relative;z-index:0;background-color:var(--white-background-color);min-height:100dvh;overflow:hidden;transition:.7s ease-in}.wrapper{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100dvh - var(--footer-height));color:var(--text-black-color);line-height:1.7}.footer{background-color:var(--text-black-color);color:var(--text-white-color);text-align:center;min-height:var(--footer-height);font-size:.9rem;display:grid;align-items:center;justify-items:center;place-items:center;width:100%}@keyframes arrow-move-right{0%{transform:translate(-215%,-50%)}to{transform:translate(-50%,-50%)}}@keyframes arrow-move-left{0%{transform:translate(-50%,-50%)}to{transform:translate(-130%,-50%)}}