:root{--inWidth:50%;--outWidth:calc(100% - var(--inWidth));--height:calc(70% - 12px);--consoleHeight:calc(100% - var(--height));--console-bg:#1a1a1a;--console-text:#e0e0e0;--console-border:#444;--console-control-bg:#2a2a2a;--console-button-bg:transparent;--console-button-text:#e0e0e0;--console-button-border:#666;--console-button-hover-bg:#3a3a3a;--console-button-active-bg:#007bff;--console-button-active-text:#fff;--console-input-bg:#333;--console-input-text:#e0e0e0;--console-input-border:#666;--log-color:#e0e0e0;--info-color:#07f;--warn-color:orange;--error-color:tomato}.custom-console{display:flex;flex-direction:column;box-shadow:0 4px 6px rgba(0,0,0,.1);width:100%;height:400px;background-color:var(--console-bg);color:var(--console-text);font-family:monospace;font-size:14px;border:1px solid var(--console-border);box-sizing:border-box}.custom-console>button{border-radius:none}.console-controls{padding:.3rem;border-bottom:1px solid var(--console-border);display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;background-color:var(--console-control-bg)}.clear-button,.filter-button{padding:.25rem .75rem;border:1px solid var(--console-button-border);font-size:.875rem;cursor:pointer;transition:all .2s ease;background-color:var(--console-button-bg);color:var(--console-button-text)}.clear-button:hover,.filter-button:hover{background-color:var(--console-button-hover-bg)}.filter-button.active{background-color:var(--console-button-active-bg);color:var(--console-button-active-text);border-color:var(--console-button-active-bg)}.text-filter-input{padding:.5rem;border-radius:.375rem;font-size:.875rem;background-color:var(--console-input-bg);color:var(--console-input-text);border:1px solid var(--console-input-border)}.console-output{flex-grow:1;overflow-y:auto;padding:.75rem}.log-entry:not(details){margin-bottom:.25rem;padding:.25rem;border-radius:.25rem;border-bottom:1px dotted var(--console-border);word-break:break-word}.log-entry:last-child{border-bottom:none}.log-entry.log{color:var(--log-color)}.log-entry.info{color:var(--info-color)}.log-entry.warn{color:var(--warn-color)}.log-entry.error{color:var(--error-color)}.timestamp{color:var(--console-text);margin-right:.5rem}.log-entry span{display:inline}.log-entry span[data-type=null],.log-entry span[data-type=undefined]{color:grey}.log-entry span[data-type=boolean],.log-entry span[data-type=error-object],.log-entry span[data-type=html-element],.log-entry span[data-type=number],.log-entry span[data-type=object-summary],.log-entry span[data-type=string]{color:inherit}.log-entry details{margin-left:.5rem;border-left:1px solid var(--console-border);padding-left:.3125rem}.log-entry summary{cursor:pointer;color:inherit}.log-entry pre{padding:.5rem;border-radius:.375rem;overflow-x:auto;background-color:var(--console-input-bg);white-space:pre-wrap;word-break:break-word;color:inherit}.log-entry table{width:100%;margin-top:.5rem;margin-bottom:.5rem;border-collapse:collapse;color:inherit}.log-entry td,.log-entry th{padding:.5rem;text-align:left;border:1px solid var(--console-button-border)}.log-entry th{background-color:#2d3748}.log-entry.group-details{border-bottom:none;margin-bottom:0}body{overflow:hidden;margin:0}#helper,#verticalHelper{transform:translate(-50%,-50%);position:fixed;height:400px;width:400px;top:-1000px;z-index:2147483647}#helper{cursor:ew-resize}#verticalHelper{cursor:ns-resize}#head{border-bottom:1px solid #131419;background-color:#1e2028;width:100vw;height:40px;display:flex;place-content:center}#name{color:#fff;left:0;font-size:35px;position:absolute;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;background-color:transparent;height:36px;outline:none;border:none;resize:none;padding:0 7px 0 2px;display:inline-block;white-space:nowrap;min-width:90%;margin-right:6px}#name:focus{border-bottom:1px solid #07f}#nav{background-color:#161a22;align-items:center;display:flex;width:100vw;height:40px}#nav #stuff{justify-content:center;position:absolute;display:flex;padding:6px;right:0}#nav button#fileCreator{background-color:transparent;anchor-name:--fileCreator;border-radius:200px;margin-right:10px;font-weight:900;font-size:28px;aspect-ratio:1;color:#fff;border:none;width:33px}#nav button#fileCreator:hover{background-color:#343745}#nav .tab-container{display:flex;flex-wrap:nowrap;overflow-x:scroll;overflow-y:hidden;width:calc(100vw - 100px)}#nav .tab{display:flex;flex-wrap:nowrap;flex-shrink:0;flex-grow:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;border-bottom:none;margin-right:5px;padding:8px 15px;color:#7b7b7b;cursor:pointer}.tab input{color:#fff}.tab input::selection{background-color:hsla(0,0%,100%,.8);color:#000}#nav .tab.active,#nav .tab:hover{border-bottom:1px solid #5063f0;color:#fff}#nav .tab button.close-tab{margin-left:10px;background:none;cursor:pointer;font-size:1em;border:none;padding:0}#main{background-color:#5063f0;height:calc(100% - 80px);position:absolute;width:100%}#input{width:calc(var(--inWidth) - 5px);background-color:#000;left:0}#browser,#input{position:absolute;height:100%}#browser{width:calc(var(--outWidth) - 5px);background-color:#0ff;right:0}#output{background-color:#fff;height:var(--height);right:0}#console,#output{position:absolute;width:100%}#console{background-color:#d3d3d3;height:var(--consoleHeight);bottom:0;overflow-y:hidden}#divider{left:calc(var(--inWidth) - 6px);background-color:#343745;position:absolute;cursor:ew-resize;height:100%;width:12px}#divider:active,#divider:hover,#verticalDivider:active,#verticalDivider:hover{background-color:#2096f3}#newFile{inset:auto;position:absolute;top:anchor(bottom);left:anchor(left);position-anchor:--fileCreator;border:none;border-radius:3px;box-shadow:2px 2px 10px 3px rgba(0,0,0,.3)}.option{background-color:transparent;text-align:start;font-size:18px;display:block;padding:5px;border:none;width:100%}.option:hover{background-color:#f5f5f5}.file{display:none;width:100%;height:100%}.file.active{display:block}.settings{display:inline-block}.tab:hover>.settings>*{visibility:visible}.settings>*{visibility:hidden;cursor:pointer;color:#707070}.rename-input,.settings>*{background-color:transparent;border:none}.rename-input{font-family:inherit;font-size:inherit;width:80px}.rename-input.rename-error{border:1px solid red}#run{transition:background-color .2s;background-color:transparent;border:1px solid #b4d883;font-weight:bolder;align-self:center;border-radius:2px;font-size:large;color:#fff}#run:hover{background-color:#b4d883}#editorSettings{position:absolute;right:0;align-self:center}i{font-size:20px;color:#fff}button{background-color:transparent;border:0}#verticalDivider{background-color:#343745;cursor:ns-resize;height:12px;width:100%}#verticalHelper:hover~#browser #console #verticalDivider{background-color:#2096f3}#outputFrame{border:none;width:100%;height:100%}#globalSettings{color:#ccc;border-radius:3px;border:5px solid #2f323f;background-color:#161a22;width:80%;height:80%}#globalSettings::backdrop{background-color:rgba(0,0,0,.4);backdrop-filter:blur(3px)}.switch{background-color:#ccc;position:relative;display:inline-block;width:45px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{content:"";height:14px;width:14px;left:3px;bottom:3px;background-color:#fff}input:checked+.slider{background-color:#2196f3}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{transform:translateX(25px)}.compiler-button{border-radius:3px;border:1px solid #2096f3;transition:background-color .3s;color:#fff;position:relative}.compiler-button:active,.compiler-button:hover{background-color:#50adf6}.upload-area{width:300px;height:200px;border:2px dashed #ccc;text-align:center;line-height:200px;font-size:18px;color:#666;border-radius:10px;cursor:pointer}.upload-area.dragover{border-color:#4caf50;background-color:#f0f8f0;color:#4caf50}.file-input-btn{display:none}.pencil{color:grey;font-size:.85rem}.pencil:hover{color:#fff}.container-div::-webkit-scrollbar{height:8px;background:transparent}.container-div::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.container-div{scrollbar-width:thin;scrollbar-color:#888 transparent}