@import "https://fonts.googleapis.com/css2?family=Scoutie+Sans:ital,wght@0,200..800;1,200..800&display=swap";:root{--bg:#050c10;--bg-dark:#030609;--surface:#0f1618;--editor:#030608;--border:#1a2222;--accent:#4fd392;--text:#f3f4f4;--text-muted:#a3a6ab}*{margin:0;padding:0}body{color:var(--text);font-family:Scoutie Sans,sans-serif}input,button{outline:none}.main-container{background-color:var(--bg);flex-direction:column;justify-content:space-between;gap:5vh;max-width:100vw;padding-bottom:5vh;display:flex}.editor-container{border:solid 1px var(--accent);border-radius:20px;justify-content:space-between;align-items:center;max-width:90vw;height:80vh;margin:0 5%;padding:2%;display:flex}.editor-container .input-section,.editor-container .output-section{flex:4.5;height:100%}.editor-container .input-section .heading-section,.editor-container .output-section .heading-section{justify-content:space-between;align-items:center;height:10%;display:flex}.editor-container .input-section .heading-section .heading,.editor-container .output-section .heading-section .heading{color:var(--accent);font-size:1.2vw;font-weight:500}.editor-container .input-section .heading-section .btn,.editor-container .output-section .heading-section .btn{border:solid 1px var(--accent);color:var(--accent);background-color:#0000;border-radius:10px;justify-content:center;align-items:center;gap:10px;width:10vw;height:60%;font-size:1vw;transition:all .2s linear;display:flex}.editor-container .input-section .heading-section .btn .icon,.editor-container .output-section .heading-section .btn .icon{font-size:1.2vw}.editor-container .input-section .heading-section .btn:hover,.editor-container .output-section .heading-section .btn:hover{background-color:var(--accent);color:var(--bg-dark);cursor:pointer}.editor-container .input-section .heading-section .buttons-container,.editor-container .output-section .heading-section .buttons-container{justify-content:center;align-items:center;gap:20px;height:100%;display:flex}.editor-container .input-section .heading-section .buttons-container .inactive,.editor-container .output-section .heading-section .buttons-container .inactive{color:#000;background-color:gray;border:#000}.editor-container .input-section .editor,.editor-container .output-section .editor{height:90%;min-height:90%;max-height:90%}.editor-container .arrowmark-container{flex:1;justify-content:center;align-items:center;height:100%;display:flex}.editor-container .arrowmark-container .icon{color:var(--accent);font-size:4vw}.json-editor-wrapper{flex-direction:column;width:100%;height:100%;min-height:0;display:flex}.json-editor-wrapper .json-editor{border-radius:12px;flex:1 1 0;width:100%;height:100%;min-height:0;overflow:hidden}.json-editor-wrapper .json-editor>div{height:100%;min-height:0}.json-editor-wrapper .json-editor .cm-editor{background:#211c29;width:100%;min-height:0;font-family:Fira Code,Consolas,monospace;font-size:14px;height:100%!important}.json-editor-wrapper .json-editor .cm-scroller{height:100%;padding:16px 0;overflow:auto}.json-editor-wrapper .json-editor .cm-content{padding:0}.json-editor-wrapper .json-editor .cm-line{padding-left:8px}.json-editor-wrapper .json-editor .cm-gutters{color:#756c82;background:#211c29;border:none;min-width:45px}.json-editor-wrapper .json-editor .cm-activeLineGutter{color:#a99db8;background:0 0}.json-editor-wrapper .json-editor .cm-activeLine{background:#ffffff06}.json-editor-wrapper .json-editor .cm-cursor{border-left-color:#fff}.json-editor-wrapper .json-editor .cm-selectionBackground{background:#ffffff1f!important}.json-editor-wrapper .json-editor .cm-focused{outline:none}.json-editor-wrapper .json-status{align-items:center;gap:10px;margin-top:10px;font-size:1vw;display:flex}.json-editor-wrapper .json-status .status-dot{border-radius:50%;width:10px;height:10px}.json-editor-wrapper .json-status.invalid{color:red}.json-editor-wrapper .json-status.invalid .status-dot{background-color:red}.json-editor-wrapper .json-status.valid{color:var(--accent)}.json-editor-wrapper .json-status.valid .status-dot{background-color:var(--accent)}.typescript-editor-wrapper{flex-direction:column;width:100%;height:100%;min-height:0;display:flex}.typescript-editor-wrapper .typescript-editor{border-radius:12px;width:100%;height:100%;min-height:0;overflow:hidden}.typescript-editor-wrapper .typescript-editor>div{height:100%;min-height:0}.typescript-editor-wrapper .typescript-editor .cm-editor{color:#e9e3ef;background:#211c29;width:100%;min-height:0;font-family:Fira Code,Consolas,monospace;font-size:14px;height:100%!important}.typescript-editor-wrapper .typescript-editor .cm-scroller{height:100%;padding:16px 0;overflow:auto}.typescript-editor-wrapper .typescript-editor .cm-content{padding:0}.typescript-editor-wrapper .typescript-editor .cm-line{padding-left:8px}.typescript-editor-wrapper .typescript-editor .cm-gutters{color:#756c82;background:#211c29;border:none;min-width:45px}.typescript-editor-wrapper .typescript-editor .cm-activeLineGutter{background:0 0}.typescript-editor-wrapper .typescript-editor .cm-focused{outline:none}.typescript-editor-wrapper .json-status{align-items:center;gap:10px;margin-top:10px;font-size:1vw;display:flex}.typescript-editor-wrapper .json-status .status-dot{border-radius:50%;width:10px;height:10px}.typescript-editor-wrapper .json-status.invalid{color:red}.typescript-editor-wrapper .json-status.invalid .status-dot{background-color:red}.typescript-editor-wrapper .json-status.valid{color:var(--accent)}.typescript-editor-wrapper .json-status.valid .status-dot{background-color:var(--accent)}.properties-container{border:solid 1px var(--accent);border-radius:20px;justify-content:space-between;gap:30px;max-width:90vw;height:15vh;margin-left:5%;margin-right:5%;padding:2% 2% 0;display:flex}.properties-container .col{border-right:solid 1px var(--accent);flex-direction:column;flex:1;gap:10px;height:80%;display:flex}.properties-container .col .heading{align-items:center;gap:10px;font-size:1vw;font-weight:500;display:flex}.properties-container .col .heading .icon{color:var(--accent);font-size:1.3vw}.properties-container .col .root-name-input{border:solid 1px var(--accent);width:85%;height:40px;color:var(--text);background-color:#4fd3911e;border-radius:10px;padding-left:5%;font-size:.8vw;transition:all .2s linear}.properties-container .col .root-name-input::placeholder{color:var(--text-muted)}.properties-container .col .root-name-input:hover{box-shadow:0px 0px 4px var(--accent);border:1px solid #fff}.properties-container .col .description{color:var(--text-muted);font-size:.9vw}.properties-container .col .button-container{justify-content:space-between;align-items:stretch;width:90%;height:40px;display:flex}.properties-container .col .button-container .output-btn{border:solid 1px var(--accent);color:var(--accent);background-color:#0000;flex:1;font-size:.8vw}.properties-container .col .button-container .output-btn:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px}.properties-container .col .button-container .output-btn:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px}.properties-container .col .button-container .output-btn.active{background-color:var(--accent);color:var(--bg)}.properties-container .col .button-container .output-btn:hover{cursor:pointer}.properties-container .col .checkbox-container{gap:10px;font-size:1vw;display:flex}.properties-container .col .actions-btns{gap:10px}.properties-container .col .actions-btns .format-btn{border:solid 1px var(--accent);color:var(--accent);background-color:#0000;border-radius:10px;flex:1.5;justify-content:center;align-items:center;gap:10px;font-size:.8vw;transition:all .2s linear;display:flex}.properties-container .col .actions-btns .format-btn .icon{font-size:1.2vw}.properties-container .col .actions-btns .format-btn:hover{background-color:var(--accent);color:var(--bg-dark);cursor:pointer}.properties-container .col .actions-btns .clear-btn{color:red;background-color:#0000;border:1px solid red;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:10px;font-size:.8vw;transition:all .2s linear;display:flex}.properties-container .col .actions-btns .clear-btn .icon{font-size:1.2vw}.properties-container .col .actions-btns .clear-btn:hover{color:#fff;cursor:pointer;background-color:red}.properties-container .col:last-child{border:none}.hero-container{justify-content:space-between;align-items:center;max-width:100vw;height:15vh;padding:0 5%;display:flex}.hero-container .left{flex:3}.hero-container .left .main-title{align-items:center;font-size:3vw;display:flex}.hero-container .left .main-title .icon{font-size:3vw}.hero-container .left .main-title span{color:var(--accent)}.hero-container .left .sub-title{font-size:1.2vw}.hero-container .right{border:solid 1px var(--accent);background-color:#4fd39115;border-radius:20px;flex:1;gap:10px;padding:20px;display:flex}.hero-container .right .icon-container .icon{color:var(--accent);font-size:2vw}.hero-container .right .texts .main-text{font-size:1vw}.hero-container .right .texts .sub-text{color:var(--accent);font-size:.9vw}.navbar-container{background-color:var(--bg-dark);justify-content:space-between;align-items:center;max-width:100vw;height:10vh;padding:0 5%;display:flex}.navbar-container .logo-container{justify-content:center;align-items:center;width:15%;height:100%;display:flex}.navbar-container .logo-container .logo{width:100%}.navbar-container .back-btn{border:solid 2px var(--accent);width:12%;height:50%;color:var(--accent);background-color:#0000;border-radius:20px;justify-content:center;align-items:center;gap:10px;font-size:.8vw;transition:all .2s linear;display:flex}.navbar-container .back-btn .icon{font-size:1.5vw}.navbar-container .back-btn:hover{background-color:var(--accent);color:var(--text);cursor:pointer}.specialities-container{border:solid 1px var(--accent);border-radius:20px;justify-content:space-around;align-items:center;gap:50px;min-width:86vw;max-width:86vw;height:15vh;margin-left:5vw;padding:0 2vw;display:flex}.specialities-container .col{text-wrap:wrap;justify-content:center;align-items:center;gap:20px;display:flex}.specialities-container .col .icon-container{aspect-ratio:1;border:solid 1px var(--accent);width:5vw;box-shadow:0px 0px 8px var(--accent);color:var(--accent);border-radius:14px;justify-content:center;align-items:center;font-size:2vw;display:flex}.specialities-container .col .icon-container .icon{font-size:1.5vw}.specialities-container .col .icon-container.two{color:orange;border:1px solid orange;box-shadow:0 0 8px orange}.specialities-container .col .icon-container.three{color:purple;border:1px solid purple;box-shadow:0 0 8px purple}.specialities-container .col .icon-container.four{color:#0ff;border:1px solid #0ff;box-shadow:0 0 8px #0ff}.specialities-container .col .text-container .main-title{font-size:1.2vw;font-weight:600}.specialities-container .col .text-container .sub-title{color:var(--text-muted);font-weight:300}.tip-container{border:solid 1px var(--accent);background-color:#4fd39110;border-radius:20px;align-items:center;min-width:90vw;max-width:90vw;height:8vh;margin-left:5vw;display:flex;box-shadow:0 0 6px #4fd3918a}.tip-container .icon-container{margin-left:2%}.tip-container .icon-container .icon{color:var(--accent);font-size:2vw}.tip-container .tip{margin-left:2%}.tip-container .tip p{color:var(--text-muted);font-size:1.1vw}.tip-container .tip p .head{color:var(--accent);font-weight:700}.tip-container .tip p .control{color:var(--accent);border:solid 1px var(--accent);border-radius:10px;margin:0 10px;padding:5px 10px}