:root{--bg: #212a31;--clr: rgba(255, 255, 255, .932);--brd: rgba(255, 255, 255, .932);--brd-hover: #a764ff}*{margin:0;padding:0;box-sizing:border-box;scrollbar-width:none}body{background-color:#1e1e1e;width:100vw;height:100vh}button{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;color:var(--clr);border-radius:6px;border:1px solid white;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--bg);cursor:pointer;transition:all .25s}button:hover{border-color:var(--brd-hover);background-color:var(--brd-hover)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}nav{position:sticky;font-family:monospace;font-size:1.2em;width:100vw;height:60px;border-bottom:1px solid var(--brd);display:flex;align-items:center;justify-content:space-around}nav #back{display:none}.app-con{display:flex;flex-direction:column;width:100vw;height:calc(100vh - 60px);overflow:hidden}.app{display:flex;width:100vw;height:100%}.app #code-con{height:100%;padding:10px;overflow-y:scroll}.app #canvas-con canvas{image-rendering:pixelated;aspect-ratio:1/1;border:1px solid var(--brd)}#console{width:100vw;height:100%;background-color:#202020;color:var(--clr);padding:10px;border-top:none;border:1px solid var(--brd);font-family:monospace;font-size:1.2em;overflow-y:scroll;z-index:1000}input[type=file]{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;color:var(--clr);border-radius:6px;border:1px solid rgb(153,229,80);padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--bg);cursor:pointer;transition:all .25s}@media screen and (max-width: 768px){nav{width:200vw}nav #back{display:inline-block}.app{width:200vw;overflow-x:scroll}.app #code-con,.app #canvas-con{width:100vw;height:50vh}}