:root{--accentColor: #c7c7d1;--primaryColor: #2c2c35;--secondaryColor: #454554;--darkColor: #0e0e10;--backgroundColor: #16161a;--shadowColor: #c7c7d140}@font-face{font-family:Helvetica Now Display;src:url(/fonts/Helvetica.ttf) format("truetype")}body{margin:0;padding:0;box-sizing:border-box;background-color:var(--backgroundColor);font-family:Helvetica Now Display;color:var(--accentColor);fill:var(--accentColor);-webkit-user-select:none;user-select:none}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{width:1px;background-color:#404040;border-radius:6px}::-webkit-scrollbar-thumb:hover{background-color:#606060}body,html{width:100vw;height:100vh}nav{height:80px;border-bottom:1px solid var(--primaryColor);font-family:Pixelify Sans,sans-serif;display:flex;justify-content:space-between;align-items:center;padding:0 15px}nav .logo{font-size:32px;fill:var(--secondaryColor);text-shadow:var(--shadowColor) 1.5px 1.5px 0px;display:flex;align-items:center;gap:22px}nav .options{display:flex;align-items:center;gap:50px}nav .options a{color:var(--accentColor);text-decoration:none;font-size:24px}nav .options a:hover{filter:brightness(1.5)}nav .options .profile{border-radius:50%;overflow:hidden;width:50px;height:50px;border:1px solid var(--primaryColor)}main{display:flex;height:calc(100% - 115px)}main .column{width:100%;height:100%;display:flex;flex-direction:column;border-right:1px solid var(--primaryColor);padding:15px;gap:15px}main .column .codeBlock{height:100%;display:flex;flex-direction:column;min-height:230px}main .column .codeBlock .topBar{height:60px;background-color:var(--primaryColor);border-radius:15px 15px 0 0;display:flex;justify-content:space-between;align-items:center;padding:0 25px}main .column .codeBlock .topBar .title{display:flex;align-items:center;gap:10px;font-size:18px}main .column .codeBlock .topBar .runButton{background-color:var(--secondaryColor);padding:5px 17px 5px 10px;display:flex;align-items:center;gap:10px;border-radius:5px;border:1.5px solid var(--accentColor);font-size:15px}main .column .codeBlock .topBar .runButton:hover{filter:brightness(1.2)}main .column .codeBlock .topBar .runButton:active{filter:brightness(.8)}main .column .codeBlock .topBar .runButton.active{filter:grayscale(1) brightness(.8) contrast(1.2) saturate(.8);pointer-events:none}main .column .codeBlock .dataContainer{height:100%;background-color:var(--darkColor);border-radius:0 0 15px 15px;overflow-y:auto}main .column .codeBlock .dataContainer .dataBox{height:100%}main .column .consoleBlock{height:40%}main .column{display:flex;flex-direction:column;height:100%;overflow-x:hidden}main .column .canvasContainer{aspect-ratio:1 / 1;flex-shrink:0}main .column .infoBlock{flex-grow:1;display:flex;flex-direction:column}main .column .canvasContainer canvas{width:100%;height:100%;background-color:#c7c7d1;border-radius:10px}main .column .infoBlock .info{width:100%;height:100%;border-radius:15px;background-color:var(--primaryColor)}main .right{width:80%}#toast-container{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:10px;z-index:1000}.toast{padding:10px 20px;border-radius:5px;color:#fff;background-color:#333;font-size:14px;opacity:0;transform:translateY(20px);transition:opacity .3s,transform .3s;text-align:center}.toast.show{opacity:1;transform:translateY(0)}@media only screen and (max-width : 720px){nav .options{display:none}main{flex-direction:column-reverse;justify-content:flex-end}main .column .infoBlock{display:none}main .column{width:auto}main .right{height:fit-content;flex-shrink:0}}.ace_scrollbar{cursor:pointer}.ace_scrollbar::-webkit-scrollbar{width:15px}.ace_scrollbar-v::-webkit-scrollbar-thumb{border-right:3px solid var(--primaryColor)}.ace_scrollbar-h::-webkit-scrollbar-thumb{border-bottom:3px solid var(--primaryColor)}.ace_gutter-layer,.ace_content{margin-top:3px}.ace-twilight .ace_gutter{border-right:1px solid var(--primaryColor);color:var(--accentColor)}.ace-twilight{background-color:var(--darkColor);color:var(--accentColor)}.ace-twilight .ace_cursor{color:var(--accentColor)}.ace-twilight .ace_marker-layer .ace_selection{background:var(--shadowColor)}.ace-twilight.ace_multiselect .ace_selection.ace_start{box-shadow:0 0 3px 0 var(--darkColor)}.ace-twilight .ace_marker-layer .ace_step{background:rgb(102,82,0)}.ace-twilight .ace_marker-layer .ace_bracket{margin:-1px 0 0 -1px;border:1px solid rgba(255,255,255,.25)}.ace-twilight .ace_marker-layer .ace_active-line{background-color:#00000038}.ace-twilight .ace_marker-layer .ace_selected-word{border:1px solid rgba(221,240,255,.2)}.ace-twilight .ace_invisible{color:#ffffff40}.ace-twilight .ace_keyword,.ace-twilight .ace_meta{color:#cda869}.ace-twilight .ace_constant,.ace-twilight .ace_constant.ace_character,.ace-twilight .ace_constant.ace_character.ace_escape,.ace-twilight .ace_constant.ace_other,.ace-twilight .ace_heading,.ace-twilight .ace_markup.ace_heading,.ace-twilight .ace_support.ace_constant{color:#cf6a4c}.ace-twilight .ace_invalid.ace_illegal{color:#f8f8f8;background-color:#562d56bf}.ace-twilight .ace_invalid.ace_deprecated{text-decoration:underline;font-style:italic;color:#d2a8a1}.ace-twilight .ace_support{color:#9b859d}.ace-twilight .ace_fold{background-color:#ac885b;border-color:#f8f8f8}.ace-twilight .ace_support.ace_function{color:#dad085}.ace-twilight .ace_list,.ace-twilight .ace_markup.ace_list,.ace-twilight .ace_storage{color:#f9ee98}.ace-twilight .ace_entity.ace_name.ace_function,.ace-twilight .ace_meta.ace_tag{color:#ac885b}.ace-twilight .ace_string{color:#8f9d6a}.ace-twilight .ace_string.ace_regexp{color:#e9c062}.ace-twilight .ace_comment{font-style:italic;color:#5f5a60}.ace-twilight .ace_variable{color:#7587a6}.ace-twilight .ace_xml-pe{color:#494949}.ace-twilight .ace_indent-guide{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWMQERFpYLC1tf0PAAgOAnPnhxyiAAAAAElFTkSuQmCC) right repeat-y}.ace-twilight .ace_indent-guide-active{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQIW2PQ1dX9zzBz5sz/ABCcBFFentLlAAAAAElFTkSuQmCC) right repeat-y}#console .ace_selection{background-color:transparent}#console .ace_cursor{color:transparent}#console .ace_content{margin:15px}#console .ace_content,#console .ace_scroller{pointer-events:none}#console .ace_line{-webkit-user-select:all;user-select:all;pointer-events:all;cursor:pointer}
