@import"https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap";:root{--pcb-base: #016535;--pcb-trace: #014a27;--pcb-trace-lighter: #08693a;--enig: #c49806;--accent-darker: #4e319e;--accent-lighter: #7142f2;--bg-floating: #191919;--bg-surface: #f8f9fa;--bg-overflow: #dee2e6;--btn-inactive: #434343;--btn-inactive-shadow: #2e2e2e;--switch-fg-low: #515151;--switch-fg-high: #f3f3f3;--seq-grid-playhead: #dcdbeb;--seq-grid-low: #d5d5d5;--seq-grid-high: #b8b8b8;--editor-sidebar-width: 360px;--docs-percentage: 0%;--editor-width: 60%}:root{box-sizing:border-box}*{box-sizing:inherit}body,html,.root{margin:0;height:100%}body{font-family:Fira Mono,monospace;background:var(--pcb-base);background-image:url(/assets/bg.de949881.svg);background-position:center center;background-repeat:no-repeat;background-size:cover;padding:20px}.no-select{user-select:none;-webkit-user-select:none}.root{display:flex;flex-direction:column}.menu{display:flex;align-items:flex-start;padding:0 2px;position:relative;z-index:1000}.menu .spacer{flex:1}.menu-item,.dropdown-list>*,.popout-list>*{color:#fff;padding:8px 14px;display:flex;align-items:center;text-decoration:none}.menu-item{padding-bottom:16px;border-radius:4px 4px 0 0;cursor:pointer}.menu-item:not(.run):not(.menu-spacer):hover,.menu-item.show{background:var(--pcb-trace)}.popout-list>*:not(.menu-spacer):hover,.dropdown-list>*:not(.menu-spacer):hover{background:var(--pcb-trace-lighter);color:#fff}.delete-file:hover{color:red}.menu-spacer{position:relative;cursor:default;padding:0 0 7px}.menu-spacer:after{content:"";height:1px;width:100%;background:#317051;position:absolute;top:3px}.dropdown-container,.popout-container{position:relative}.dropdown-list,.popout-list{visibility:hidden;position:absolute;width:max-content}.dropdown-list{border-radius:0 0 4px 4px;top:99%;left:0}.popout-list{border-radius:0 0 4px 4px;--space: 8px;padding:var(--space);padding-left:calc(var(--space) + 2%);left:calc(99% - var(--space));top:calc(var(--space) * -1)}.dropdown-list>*,.popout-list>*{background:var(--pcb-trace)}.dropdown-list>*,.popout-list>*{width:100%}.dropdown-container:hover .dropdown-list,.dropdown-container.show .dropdown-list,.popout-container:hover .popout-list,.popout-container.show .popout-list{visibility:visible}.main-container{flex:1;gap:20px;position:relative;display:flex;overflow:hidden}.menu-item.stale{background:var(--pcb-trace)}.menu-item.stale:hover{background:var(--pcb-trace-lighter)}.code-container{background:var(--bg-surface);width:var(--editor-width);display:flex;flex-direction:column}.logs-container{height:230px;background:var(--pcb-trace);color:#fff;margin-top:20px;padding:10px;overflow:auto}.logs-container pre{font-family:inherit;font-size:.9rem;margin:0;white-space:pre-wrap;word-wrap:break-word}.logs-container button{position:relative;top:-1px;padding:2px 6px;font-size:inherit;font-family:inherit;line-height:inherit;border:none;background:#000000;color:#fff;cursor:pointer;border-radius:3px}.logs-container button:hover{background:#222222}.run{box-shadow:inset 0 0 0 0 var(--enig);background:var(--pcb-trace);position:absolute;top:0;left:50%;transform:translate(-50%);transition:box-shadow .1s linear;cursor:pointer}.stale-run,.run:hover{box-shadow:inset 0 -6px 0 0 var(--enig)}.stale-run:hover{box-shadow:inset 0 -50px 0 0 var(--enig)}.cm-editor{flex:1;overflow:hidden}.cm-scroller{font-family:inherit!important}.logs{height:0px;box-sizing:border-box;overflow-y:auto}.erred{background:#c92a2a;color:#fff;height:80px;padding:5px}.err-line{background:#ecb2b2!important}.game-docs-container{display:flex;flex-direction:column;place-content:center;flex:1;overflow:hidden;gap:20px;align-items:center;font-size:.9em}.game-canvas-container{width:100%;max-height:calc(100% - var(--docs-percentage));aspect-ratio:5/4;transition:height .2s ease-in-out;background:var(--pcb-trace);display:flex;align-items:center;justify-content:center;overflow:hidden}.game-canvas:focus{box-shadow:0 0 2px #fff,0 0 6px #0ff,0 0 10px #f0f}.game-text{image-rendering:pixelated;pointer-events:none;position:absolute}.game-canvas{image-rendering:pixelated;outline:none}.docs{background:var(--bg-surface);height:0;width:100%;overflow-x:hidden;overflow-y:auto;word-wrap:break-word;transition:height .2s ease-in-out}.docs-expanded{padding:10px;height:var(--docs-percentage)}.asset-editor-container{position:fixed;left:0;top:0;width:100%;height:100%;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000000df;padding:60px;gap:10px}.asset-editor-container>.close{align-self:flex-end;background:none;border:none;font-size:1.8em;height:1em;width:1em;color:var(--switch-fg-low);padding:0;display:block;line-height:1;cursor:pointer}.asset-editor-container>.close:hover{color:var(--switch-fg-high)}.asset-editor-content{overflow:hidden;flex:1;width:100%}.hide{display:none}.cm-boolean-toggle,.cm-open-button{line-height:1;vertical-align:middle}.cm-boolean-toggle input{margin:0;margin-right:.5ch}.cm-open-button{position:relative}.cm-open-button button{position:relative;top:-1px;padding:0 4px;font-size:inherit;font-family:inherit;line-height:inherit;border:none;background:var(--pcb-base);color:#fff;cursor:pointer;border-radius:3px}.cm-open-button button:hover{background:var(--pcb-trace)}.cm-open-button bitmap-preview{position:absolute;left:0;width:100px;z-index:999;display:none;pointer-events:none}.cm-open-button:hover bitmap-preview{display:block}.cm-open-button .icon-container{display:inline-block;height:.8em;width:.8em;margin-left:4px;vertical-align:middle;margin-top:-.16em}.cm-open-button ion-icon{height:100%;width:100%}.vertical-bar{position:absolute;left:var(--editor-width);background:none;height:100%;width:6px;margin:0 7px}.vertical-bar:hover{cursor:col-resize;background:var(--pcb-trace);opacity:.8}.next-learn{position:absolute;border-radius:3px;bottom:0px;right:0px;background:var(--pcb-trace);color:#fff;width:5em;height:2em;display:flex;justify-content:center;align-items:center}@keyframes shake{0%{transform:translate(2px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translateY(2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(2px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(2px,2px) rotate(0)}to{transform:translate(1px,-2px) rotate(-1deg)}}.shake{animation-name:shake;animation-duration:.5s;transform-origin:50% 50%;animation-iteration-count:infinite}.sprig-logo{margin-left:15px;margin-top:3px;margin-right:10px;height:2rem;z-index:9999;cursor:pointer}.sprig-logo:hover{transform:scale(1.05)}