*{margin:0;padding:0;position:relative;box-sizing:border-box}html,body{max-width:100vw;overflow:hidden;font-weight:600;font-family:Montserrat;color:#fff}body{width:100%}:root{--clip-path-top-left: 20px;--clip-path-top-right:calc(100% - 20px);--clip-path-bottom-right:calc(100% - 40px);--clip-path-bottom-left: 40px}.container{position:fixed;max-height:100vh;overflow:hidden}.header__container{-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;position:fixed;z-index:100;top:2rem;padding:0 2rem;display:flex;flex-direction:column;font-weight:300}@media only screen and (max-width: 965px){.header__container{top:3rem}}.container__top{pointer-events:none;-webkit-user-select:none;user-select:none;display:flex;flex-direction:row-reverse;align-items:start;justify-content:space-between}@media only screen and (max-width: 965px){.container__top{flex-direction:column}}.header__title{pointer-events:none;-webkit-user-select:none;user-select:none;display:block;position:relative;font-size:4rem;margin-top:16rem;margin-bottom:2rem}@media only screen and (max-width: 965px){.header__title{margin-top:1rem;margin-bottom:2rem;font-size:1.4rem}}.small{font-size:1rem}.logo{width:100%}.logo .cls-1{fill:#8cffe6a5;background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);background-size:400% 400%;animation:gradient 15s ease infinite}.capsule{-webkit-user-select:none;user-select:none;pointer-events:all;background-color:#3affe53f;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#0af;display:block;width:6rem;padding:.6rem 1rem;border-radius:.4rem;margin-bottom:1rem;font-size:.6rem}@media only screen and (max-width: 965px){.capsule{padding:.5rem 1rem;font-size:.6rem;margin-bottom:1rem;margin-left:-.28rem}}.container__small{pointer-events:none;-webkit-user-select:none;user-select:none;padding-left:.2rem;width:100%;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1rem}@media only screen and (max-width: 965px){.container__small{font-size:.6rem;display:none;grid-template-columns:1fr 1fr}}.container__controls{overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:3;position:fixed;bottom:1rem;left:1rem;border-radius:.8rem;padding:1rem}@media only screen and (max-width: 965px){.container__controls{font-weight:400;display:flex;justify-content:center;align-items:center;flex-direction:column;bottom:1rem;border:none;left:0;right:0;width:100%}}.controls__title{pointer-events:none;width:100%;-webkit-user-select:none;user-select:none;align-self:start;font-weight:400;text-transform:capitalize;padding:1rem 1.2rem;border-radius:.8rem;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-bottom:0}@media only screen and (max-width: 965px){.controls__title{padding:.4rem 1.2rem;font-size:.8rem;background-color:transparent}}#indicator{width:20px;height:20px;border-radius:50%;opacity:0;border-top:2px solid rgb(109,255,80);animation:spin .8s linear infinite}#path,#mode{color:#0af}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.container__controls p{-webkit-user-select:none;user-select:none;font-size:.9rem;padding:1rem 1.2rem;font-weight:300;max-width:600px;line-height:1.6}@media only screen and (max-width: 965px){.container__controls p{padding:1rem;align-self:start;display:none}}.container__btn{pointer-events:none;-webkit-user-select:none;user-select:none;display:flex;flex-direction:row;gap:1rem;justify-content:start;justify-items:center;margin-top:.4rem;gap:0 2rem;padding:0 0 0 1.2rem;position:relative}@media only screen and (max-width: 965px){.container__btn{gap:.6rem .8rem;padding:0 .4rem;margin-top:.6rem;max-width:600px;width:100%;align-items:center;display:grid;grid-template-columns:repeat(2,1fr);justify-items:center}}.toggleBtn{--cut: 20px;clip-path:polygon(0 var(--cut),var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);font-weight:400;pointer-events:all;-webkit-user-select:none;user-select:none;color:#fff;text-align:center;min-width:155px;padding:1rem 1.8rem;cursor:pointer;background-color:#ffffff72;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);background-size:400% 400%;animation:gradient 15s ease infinite;transition:background .3s,color .3s;opacity:.9;grid-column:2/2}@media only screen and (max-width: 965px){.toggleBtn{font-weight:500;min-width:88px;padding:.8rem 1.8rem;font-size:.6rem;min-width:120px;position:relative;width:70%;grid-column:2/2;justify-self:end;border:none}}.hover-effect .word{white-space:nowrap}.hover-effect .char{position:relative}.hover-effect{font-kerning:none;position:relative;white-space:nowrap}.hover-effect--cursor-square .char{--opa: 0}.hover-effect--cursor-square .char:after{content:"";width:1ch;top:0;left:0;position:absolute;opacity:var(--opa)}.hints{position:relative;text-align:left;display:flex;justify-content:start;align-items:center;overflow:hidden;scale:0;width:100%;transform-origin:0% 100%;background-color:#0000004d;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:.4rem;padding:1rem}@media only screen and (max-width: 965px){.hints{font-size:.6rem;padding:.4rem .8rem;height:100%;text-align:left}}.hints .hx{width:max-content;text-align:left;margin:auto 0;height:100%}@media only screen and (max-width: 965px){.hints .hx{line-height:2.1}}@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.toggleBtn:active{transition:background .3s,color .3s;background:rgba(80,247,255,1);color:#fff}.toggleBtn:hover,.active,.active:hover{transition:background .3s,color .3s;color:#fff;background:rgba(80,247,255,1)}