:root{color-scheme:dark;--bg: #1a1a1a;--txt: #eee}html,body{background:var(--bg);color:var(--txt);font-family:"Roboto",sans-serif}*,*::before,*::after{box-sizing:inherit}html{box-sizing:border-box;scrollbar-width:none}input,button,textarea,select{font:inherit}body{margin:0;padding:0;height:100vh;height:100dvh;display:flex;flex-direction:column}pre{margin:0}a{color:#aaa;text-decoration:none;text-shadow:1px 1px 3px #000;transition:color .5s ease}a:hover{color:var(--txt)}header{background-color:var(--bg);min-height:1.875rem;padding:0 .625rem;display:flex;align-items:center}.menu{display:flex;flex-direction:row;justify-content:space-between;width:100%}.menu div{display:flex;align-items:center}.menu div>*{margin-left:.313rem}.menu .preprocessors a.active{background-color:#333;border:2px solid #777}.menu .preprocessors a,.menu .settings button{background-color:rgba(0,0,0,0);border:2px solid #444;color:#fff;padding:0 .5rem;height:1.5rem;border-radius:.4rem;justify-content:center;transition:background-color .3s ease-in-out,border .3s ease-in-out}.menu .preprocessors a img,.menu .settings button img{margin-right:.25rem}.menu .preprocessors a:hover,.menu .settings button:hover{background-color:#555;border:2px solid #555}.menu-button-container{display:none;height:100%;width:30px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center}#menu-toggle{display:none}.menu-button,.menu-button::before,.menu-button::after{display:block;background-color:#fff;position:absolute;height:4px;width:30px;transition:transform 400ms cubic-bezier(0.23, 1, 0.32, 1);border-radius:2px}.menu-button::before{content:"";margin-top:-8px}.menu-button::after{content:"";margin-top:8px}#menu-toggle:checked+.menu-button-container .menu-button::before{margin-top:0px;transform:rotate(405deg)}#menu-toggle:checked+.menu-button-container .menu-button{background:hsla(0,0%,100%,0)}#menu-toggle:checked+.menu-button-container .menu-button::after{margin-top:0px;transform:rotate(-405deg)}.title-mobile{display:none}@media(max-width: 840px){.title-mobile{display:unset}.title{display:none}header{justify-content:space-between;z-index:30}.menu-button-container{display:flex}.menu{position:absolute;top:0;left:0;margin-top:30px;flex-direction:column;overflow:hidden}#menu-toggle~.menu div{height:0;margin:0;padding:0;border:0;transition:height 400ms cubic-bezier(0.23, 1, 0.32, 1)}#menu-toggle:checked~.menu div{border:1px solid #333;height:2.5em;transition:height 400ms cubic-bezier(0.23, 1, 0.32, 1)}.menu>div{justify-content:center;background-color:#222}}@supports(-moz-appearance: none){@media(pointer: coarse),(max-width: 768px){body{margin-bottom:.2px}}}button{border:none;cursor:pointer}.icon{display:flex;background:none;padding:0;margin:0}.flex{display:flex;align-items:center;align-content:center;flex-direction:row;flex-wrap:wrap;word-break:break-word;white-space:break-spaces}#resizer{background:#333;width:1px;cursor:col-resize;user-select:none;touch-action:none;position:relative}#resizer::after{content:"";background:rgba(0,0,0,0);transition:background .5s ease-in-out;display:block;height:100%;width:.438rem;position:absolute;left:-3px;z-index:10}#resizer:hover::after{background:rgba(85,85,85,.8)}#resizer:active::before{content:"";position:fixed;width:100%;height:100%;z-index:999;left:0;top:0}#container{display:flex;flex-grow:1;background:#000}#input,#output{display:flex;flex-direction:column;width:50%;border-top:1px solid #333}.editor{width:100%;height:100%}.statusbar{background:var(--bg);border-top:1px solid #333;padding:.188rem .625rem;height:26px;gap:10px;display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;overflow-y:hidden;overflow-x:auto;scrollbar-width:none}.statusbar::-webkit-scrollbar{display:none}.statusbar>*{display:inline-flex;align-items:center;white-space:pre}.statusbar>:first-child{gap:3px}.hide{display:none}#version[href*=stylus-lang]{color:hsl(69,94%,40%)}#version[href*=stylus-lang]:hover{color:hsl(69,94%,50%)}#version[href*=lesscss]{color:hsl(217,52%,60%)}#version[href*=lesscss]:hover{color:hsl(217,52%,70%)}#version[href*=sass-lang]{color:hsl(330,50%,50%)}#version[href*=sass-lang]:hover{color:#c69}#ace_settingsmenu,#kbshortcutmenu{background-color:#101010;color:#fff;box-shadow:-5px 4px 5px rgba(0,0,0,.55)}.ace_optionsMenuEntry button{background:#000;border:1px solid #404040;margin:0px}.ace_optionsMenuEntry button[ace_selected_button=true]{background:#3c3c3c;box-shadow:1px 0 2px 0 #5c5c5c inset;border-color:#242424}.ace_optionsMenuEntry button:hover{background:#666}.ace_prompt_container{background:#000;box-shadow:0 3px 15px 5px #222}.ace-tm{background-color:#000;color:#fff}.ace_editor.ace_autocomplete{border:1px #303030 solid;box-shadow:2px 3px 5px rgba(0,0,0,.2);background:#000;color:#fff}.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line{background-color:#343434}.ace_completion-message{color:#b9cbff}.ace_editor.ace_autocomplete .ace_line-hover{border:1px solid #303030;background:rgba(233,233,253,.4)}.ace_editor>.ace_sb-v div,.ace_editor>.ace_sb-h div{background:rgba(128,128,128,.5);border:1px solid rgba(128,128,128,.3);transition:background .5s}.ace_editor>.ace_sb-v div:hover,.ace_editor>.ace_sb-h div:hover{background:rgba(128,128,128,.3);border:1px solid rgba(128,128,128,.5)}@media screen and (max-width: 765px){#container{flex-direction:column}#input,#output{width:100% !important;height:50%}}.center{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100vw;height:100dvh;font-size:3.125rem}.center img{filter:drop-shadow(2px 2px 20px black);vertical-align:middle;max-width:100%;min-width:24px}.center h1{font-size:3.125rem;text-align:center;margin:0;padding:0}.center>div{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;flex-direction:column}.center>div section{display:flex;justify-content:center;margin:0 1.25rem}.center>div ul{list-style:none}footer{margin-top:.625rem;font-size:1.25rem}header,.titlebar{left:env(titlebar-area-x, 0);top:env(titlebar-area-y, 0);height:env(titlebar-area-height, 30px);width:env(titlebar-area-width, 100%)}.titlebar{position:fixed}@media(max-width: 800px){.menu{margin-top:env(titlebar-area-height, 30px)}}header,.menu .title,.titlebar{-webkit-app-region:drag}header .logo,.menu div,.menu-button-container{-webkit-app-region:no-drag}