@import "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&family=Inter:wght@200&family=Fira+Code:wght@700&family=Bebas+Neue&family=Dancing+Script:wght@600&display=swap";
.main__css-arena{gap:var(--gap-main);display:flex}.target-layout,.playground{border-radius:var(--border-radius-l);background-color:var(--bg-darkest);outline:1px solid var(--border-dark);flex-direction:column;width:100%;height:330px;display:flex}.target-layout{background:linear-gradient(to right,var(--bg-darkest),var(--bg-darkest),var(--gradient-darkest))}.main{gap:var(--gap-main);height:calc(100vh - 65px);max-width:var(--max-content-width);max-height:var(--max-content-height);grid-template:"editor arena""editor theory"1fr/1fr 1fr;margin:0 auto;padding:15px;display:grid}.main__editor{outline:1px solid var(--border-dark);border-radius:var(--border-radius-l);grid-area:editor}.main__arena{gap:var(--gap-main);grid-area:arena;display:flex}.main__playground{grid-area:playground;width:fit-content}.main__target{grid-area:target;width:fit-content}.main__theory{border-radius:var(--border-radius-l);outline:1px solid var(--border-dark);flex-direction:column;grid-area:theory;display:flex;overflow:hidden}@media (max-width:1200px){.main{background-color:var(--bg-dark);grid-template:"theory"60vh"editor"60vh"arena"/1fr 1fr;width:100vw;max-width:none;height:fit-content;padding:10px 0 0}.main__editor,.main__theory{width:100vw}.main__arena{margin:0 auto}.main__level-progress{height:330px}}@media (max-width:930px){.main__arena{flex-direction:column;align-items:center}}@media (max-width:500px){.main{padding-bottom:10px}}
.editor{border-radius:var(--border-radius-l);background:linear-gradient(to bottom,var(--bg-darkest),var(--gradient-darkest));flex-direction:column;height:100%;display:flex;overflow:hidden}.editor>*{padding:15px}.editor.completed{outline:1px solid var(--completed-light);filter:drop-shadow(0 0 10px var(--completed-light));animation:.2s ease-in-out editorCompletedAnimation}@keyframes editorCompletedAnimation{0%{transform:scale(1)}50%{transform:scale(1.01)}to{transform:scale(1)}}.editor__challenge{color:var(--text-on-dark);font-weight:var(--text-regular);text-align:center;font-size:var(--text-m);background-color:var(--yellow-bg)}.editor__challenge--bold{color:var(--text-on-dark);font-weight:var(--text-bold)}textarea{resize:none;width:100%;font-family:monospace;line-height:1.3;font-size:var(--text-m);color:var(--text-on-light);background:0 0;border:none;flex:1}textarea:focus{outline:none}.editor__title--light-typo{font-weight:var(--text-regular)}.editor__title svg{transform:rotate(-20deg)}.editor__title{justify-content:center;align-items:center;gap:20px;display:flex}.editor__title svg{filter:drop-shadow(3px 3px 5px #0000004d)}.editor-buttons__wrapper{justify-content:space-between;align-items:center;gap:10px;padding-bottom:0;display:flex}.editor-buttons__actions{align-items:center;gap:10px;margin-left:auto;display:flex}.editor__semicolon-hint{font-size:var(--text-s);color:var(--highlight-yellow);animation:.3s fadeInHint}.editor__semicolon-hint code{font-family:monospace;font-weight:var(--text-bold)}@keyframes fadeInHint{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.solution-code{background-color:var(--gradient-darkest);border-radius:var(--border-radius-l);flex-direction:column;gap:20px;width:100%;height:100%;padding:20px;display:flex}.solution-header>div{background-color:var(--gradient-darkest);border-radius:7px;align-items:center;gap:10px;padding:2px 10px;display:flex;position:relative}.solution-header{justify-content:space-between;align-items:center;margin-bottom:10px;padding:2px 5px;display:flex}.solution-header__title{color:var(--highlight-yellow);font-weight:var(--text-bold);font-size:var(--text-xl)}
.subheader-section{height:var(--section-title-height);border-bottom:1px solid var(--bg-dark)}.subheader-title{max-width:650px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 30% 70%,#0000);mask-image:linear-gradient(90deg,#0000,#000 30% 70%,#0000)}.subheader-title-heading{align-items:center;gap:15px;display:flex}.subheader-title h2{width:max-content}.subheader-title--animated{animation:scroll-left var(--scroll-left-duration,80s)linear infinite}.subheader-section span{color:var(--text-on-light)}
.editor-button{background-color:var(--bg-darkest);border:1px solid var(--highlight-yellow);border-radius:9999px;width:fit-content;height:29px;padding:0 8px}.editor-button div{align-items:center;gap:5px;display:flex}.editor-button>div>span{font-size:var(--text-xs);color:var(--bg-light)}
.solution-code__wrapper{border-radius:var(--border-radius-l);border:.5px solid #264254;flex-direction:column;gap:7px;padding:10px;display:flex;position:relative}.solution-code__wrapper div{white-space:pre-wrap;font-family:monospace;font-size:var(--text-s)}.block__code-wrapper{background-color:var(--code-solution);border-radius:var(--border-radius-l)}.block_code-text{font-weight:var(--text-bold);padding:15px}
.copy-code-button{border:1px solid #3e3e3e;border-radius:10px;align-items:center;gap:5px;padding:3px 5px;display:flex;position:absolute;bottom:20px;right:20px}.copy-code-button__text{font-size:var(--text-xs)}
.modal-solution__background{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);z-index:999;background-color:#8190a04a;display:none;position:fixed;inset:0}.modal-solution__background.showModal{display:block}.modal-solution__wrapper{border-radius:var(--border-radius-xl);z-index:2;max-width:500px;min-height:fit-content;position:relative;top:0;left:50%;transform:translate(-50%,50%)}.solution-header__title{padding:5px;line-height:1.5}.close-modal-button{background-color:var(--gradient-darkest);border-radius:9999px;place-content:center;width:40px;height:40px;font-size:20px;display:grid;box-shadow:inset 1px 1px 2px #ffffff1a}
.sub-header{background-color:var(--header-arena);border-radius:var(--border-radius-l)var(--border-radius-l)0px 0px;background:linear-gradient(135deg,var(--yellow-bg)0%,var(--green-bg)100%);justify-content:space-between;gap:45px;height:33px;padding:5px 10px;display:flex}.sub-header__title{color:var(--text-on-dark);align-items:center;gap:10px;display:flex}.sub-header__svg{outline:2px solid var(--highlight-yellow);background-color:var(--bg-darkest);border-radius:5px}.sub-header__left{gap:20px;display:flex}.sub-header__buttons>button{color:var(--text-on-dark)}
.sub-header__button{font-size:var(--text-xs);color:var(--dark-blue);align-items:center;gap:5px;display:flex}
.block{cursor:crosshair;transition:all .2s;position:relative}.block.completed{transition:box-shadow .4s;animation:.25s ease-out pop}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.block.completed:after{content:"";background:var(--completed-light);background-image:url(/assets/check.svg);background-position:50%;background-repeat:no-repeat;background-size:80%;border-radius:50px;width:24px;height:24px;position:absolute;top:-8px;right:-8px;box-shadow:0 5px 10px #00000058}.block-name-text{white-space:nowrap;color:var(--highlight-red);font-size:var(--text-s);display:none;position:absolute;bottom:-25px;left:50%;transform:translate(-50%)}
.block-container{border-radius:var(--border-radius-l);width:400px;height:300px;position:relative;overflow:hidden}@media (max-width:410px){.block-container{width:100vw}}.completed-sublevel-message{opacity:0;font-size:var(--text-xs);background-color:var(--completed-dark);z-index:1;border-radius:5px 0 0 12px;padding:5px 15px;transition:all .5s;position:absolute;top:10px;right:0;transform:translate(100%)}.completed-sublevel-message span{color:#fff}.completed-sublevel-message.completed{opacity:1;transform:translate(0)}

.grid-wrapper{opacity:0;width:100%;height:100%;position:absolute;top:0;left:0}.grid-wrapper.show{opacity:1}.gridX{width:50px;height:100%;position:absolute;top:0}.info-gridX{width:50px;font-size:var(--text-xxs);text-align:center;color:var(--gradient-light);margin-top:10px;padding:2px;position:absolute;top:0;transform:translate(50%)rotate(-10deg)}.gridY{width:100%;height:50px;position:absolute;top:0}.info-gridY{font-size:var(--text-xxs);text-align:center;color:var(--gradient-light);margin-left:8px;padding:2px;position:absolute;top:0;transform:translateY(-50%)rotate(-10deg)}
.target-layout{position:relative}
.theory__title--font-0{margin-left:30px;font-family:Playfair Display,serif;font-weight:900}.theory__title--font-1{margin-left:30px;font-family:Inter,sans-serif;font-weight:200}.theory__title--font-2{margin-left:30px;font-family:Fira Code,monospace;font-weight:700}.theory__title--font-3{margin-left:30px;font-family:Bebas Neue,sans-serif;font-weight:400}.theory__title--font-4{margin-left:30px;font-family:Dancing Script,cursive;font-weight:600}.theory__text{background:linear-gradient(to right,var(--yellow-bg)0%,var(--green-bg)100%);font-size:var(--text-s);font-weight:var(--text-regular);scrollbar-width:auto;scrollbar-color:var(--scroll-color)transparent;flex:1;overflow:hidden auto}.theory__text-limit{grid-template-columns:1fr;gap:20px;margin:0 auto;padding:20px 25px;display:grid}.text-theory__container>p{color:var(--text-on-light);font-size:var(--text-s);line-height:1.6;font-weight:var(--text-regular);border-radius:var(--border-radius-l);margin-bottom:10px;padding:10px;transition:all .2s;position:relative}.text-theory__container>p:hover{background-color:var(--bg-dark)}.text-theory__container>p:before{content:"";background-color:#78aead6a;width:6px;height:17px;position:absolute;top:14px;left:-8px}.text-syntax__title,.text-theory__title{color:var(--text-on-dark);font-weight:var(--text-bold);font-size:var(--text-l)}:is(.text-syntax__title,.text-theory__title):before{content:"•";margin-right:5px}.syntax-property__code,.text-theory__container{background:var(--bg-darkest);color:var(--text-on-dark);border-radius:var(--border-radius-l);font-size:var(--text-m);margin:15px 0 10px 20px;padding:12px 30px;overflow-x:auto;box-shadow:inset 0 0 0 1px #ffffff14}.text-theory__container{padding:12px 20px 12px 29px;position:relative}.syntax-property__code code{white-space:pre;font-family:Fira Code,monospace;font-size:var(--text-s)}.theory__title{justify-content:center;align-items:center;display:flex}.theory__title--light{font-weight:var(--text-regular)}.theory__title--bold{font-weight:var(--text-bold);margin-left:30px}@media (max-width:500px){.theory__text{padding:10px 16px}}
.main__level-progress{border-radius:var(--border-radius-l);outline:1px solid var(--border-dark);flex-direction:column;width:70px;padding:15px;display:flex;position:relative}.progress__title{border-bottom:.5px solid var(--border-dark);white-space:nowrap;justify-content:center;padding-bottom:5px;font-size:20px;display:flex}.main__level-progress.show{outline:1px solid var(--completed-light);filter:drop-shadow(0 0 4px var(--completed-light));animation:.2s ease-in-out editorCompletedAnimation}.level-completed-modal__title-wrapper{justify-content:space-between;align-items:center;gap:10px;display:flex}.level-completed-modal__title-wrapper div{align-items:center;gap:10px;display:flex}.level-completed-modal__title-wrapper .level-completed-modal__confetti{transform-origin:50%;animation:1s 2 forwards vibrate}.level-completed-modal__title-text{color:#0a1422;font-size:var(--text-xl);font-weight:var(--text-bolder)}.level-completed-modal{background-color:var(--highlight-yellow);color:#0a1422;font-size:var(--text-m);border-radius:var(--border-radius-l);opacity:0;transform-origin:0;flex-direction:column;justify-content:center;gap:10px;padding:25px 20px 20px;line-height:1.3;transition:opacity .8s;display:flex;position:absolute;top:0;left:0;transform:scale(0)translate(0)}.level-completed-modal.show{z-index:9999;opacity:1;background-color:var(--highlight-yellow);color:#0a1422;width:405px;height:100%;left:-10px;transform:scale(1)translate(-100%)}.level-completed-modal__close-button{position:absolute;top:0;right:0;transform:translate(-30%,30%)}.next-level-button{justify-content:center;margin-top:30px;display:flex}.next-level{padding:10px}@media (max-width:930px){.main__level-progress{flex-direction:row;width:calc(100vw - 20px);height:fit-content}.progress__title{border-bottom:0;border-right:.5px solid var(--border-dark);padding-right:15px}}@keyframes editorCompletedAnimation{0%{transform:scale(1)}50%{transform:scale(1.01)}to{transform:scale(1)}}@keyframes vibrate{0%{transform:rotate(0)translate(0)}10%{transform:rotate(3deg)translate(1px,-1px)}20%{transform:rotate(-2deg)translate(-1px,2px)}30%{transform:rotate(4deg)translate(2px,-1px)}40%{transform:rotate(-3deg)translate(-2px,1px)}50%{transform:rotate(2deg)translate(1px,1px)}60%{transform:rotate(-4deg)translate(-1px,-2px)}70%{transform:rotate(3deg)translate(2px)}80%{transform:rotate(-2deg)translate(-1px,1px)}90%{transform:rotate(1deg)translateY(-1px)}to{transform:rotate(0)translate(0)}}
.progress-dots{flex-direction:column;justify-content:space-around;align-items:center;height:100%;margin:auto 0;display:flex}@media (max-width:930px){.progress-dots{flex-direction:row;gap:10px;width:100%}}
.level-dot{background-color:var(--highlight-red);filter:drop-shadow(0 0 7px #db0000);pointer-events:none;border-radius:50px;width:10px;height:10px;animation:2s linear infinite zoom;position:relative}.level-dot.completed{filter:drop-shadow(0 0 7px #157839);background-color:green}.level-dot__selected.current{opacity:.4;outline:4px dashed var(--highlight-red);width:90%;height:90%;position:absolute;transform:translate(-50%)translateY(-50%)rotate(45deg)}.level-dot__selected.current.completed{outline:4px dashed var(--completed-light)}.level-dot-wrapper{cursor:pointer;place-content:center;width:100%;height:100%;display:grid;position:relative}.level-dot__sublevel-name{background-color:var(--highlight-yellow);color:#0a1422;white-space:nowrap;font-size:var(--text-s);border-radius:5px;padding:5px 10px;display:none;position:absolute;top:50%;left:-50%;transform:translate(-80%,-50%)}.level-dot__sublevel-name.show{display:block}.level-dot__sublevel-name__edge{background-color:var(--highlight-yellow);width:7px;height:7px;display:block;position:absolute;top:50%;right:0;transform:translate(50%,-50%)rotate(-45deg)}@keyframes zoom{0%{transform:scale(.8)}50%{transform:scale(1.4)}to{transform:scale(.8)}}

.modal-alert-mobile{z-index:12;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);justify-content:center;padding:5vh 16px;display:none;position:fixed;inset:0}.modal-alert-mobile__container{background-color:var(--highlight-yellow);max-width:600px;max-height:fit-content}.modal-alert-mobile__title,.modal-alert-mobile__description{color:#0a1422}.modal-alert-mobile__container{border-radius:var(--border-radius-l);width:fit-content;padding:25px 20px 20px;position:relative}.modal-alert-mobile__main-content{flex-direction:column;gap:10px;display:flex}.modal-alert-mobile__close-btn{position:absolute;top:0;right:0;transform:translate(-30%,30%)}.modal-alert-mobile__title{font-size:var(--text-xl);font-weight:var(--text-bolder);text-align:center;display:block}.modal-alert-mobile__description{font-size:var(--text-s);text-align:center}.modal-alert-mobile__svg{justify-content:center;display:flex}.alert-svg__circle{background-color:#fff;border-radius:50px;padding:10px}@media (max-width:1200px){.modal-alert-mobile{display:flex}.modal-alert-mobile.hide{display:none}}