.viewport{border:.1rem solid var(--shadow-bg);background-color:var(--canvas-bg);cursor:grab;background-image:url(../media/background.e770ff32.svg);width:100%;height:100%;position:relative;overflow:hidden}.viewport.panning{cursor:grabbing}.viewport-world{width:0;height:0;position:absolute;top:50%;left:50%;overflow:visible}.viewport-controls{z-index:1000;justify-content:center;align-items:center;position:relative}.viewport-controls-menu{cursor:pointer;flex-direction:column;align-items:center;padding:0;list-style:none;display:flex;position:absolute;bottom:2rem}.btn-add,.btn-reset{cursor:pointer;border:none;border-radius:.375rem;padding:.5rem 1rem;font-weight:500;transition:all .2s}.property-text{color:var(--canvas-text);white-space:nowrap;font-size:.75rem;font-weight:500}.properties-panel{background-color:var(--canvas-surface);border:.1rem solid var(--canvas-border);z-index:20;flex-direction:column;width:30rem;height:100%;display:flex;overflow-y:auto;box-shadow:0 .1rem .25rem #000}.properties-header{border-bottom:1px solid var(--canvas-border);color:var(--canvas-text);justify-content:space-between;align-items:center;padding:1rem;font-size:1.125rem;font-weight:600;display:flex}.properties-content{flex-direction:column;flex:1;gap:.4rem;padding:.75rem;display:flex;overflow-y:auto}.property-group{grid-template-columns:5rem 1fr;align-items:center;gap:.5rem;display:grid}.property-group label{color:var(--canvas-text);white-space:nowrap;font-size:.75rem;font-weight:500}.property-group input{border:.1rem solid var(--canvas-border);background-color:var(--canvas-bg);width:100%;color:var(--canvas-text);border-radius:.25rem;min-width:0;padding:.25rem .4rem;font-size:.75rem;transition:border-color .15s,box-shadow .15s}.property-group input:focus{border-color:var(--muted);outline:none;box-shadow:0 0 0 2px #4a556833}.property-group p{color:var(--canvas-text);text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:.75rem;overflow:hidden}.btn-delete{color:var(--canvas-text);cursor:pointer;background-color:#ff5e64b3;border:.1rem solid #ff5e7899;border-radius:.25rem;align-self:flex-start;margin-top:.75rem;padding:.3rem .7rem;font-size:.75rem;font-weight:600;transition:background-color .15s,border-color .15s}.btn-delete:hover{background-color:#ff5e64}
.textureCanvas{background-color:var(--canvas-surface)}.texture-hidden{background-color:var(--canvas-bg);pointer-events:none;position:absolute;inset:0}.box-container{position:absolute}.box-rect{box-sizing:border-box;display:inline-block;position:relative}.box-rect.selected{border:.1rem solid var(--accent-color)}.box-rect.connecting{border:.1rem solid var(--linking-color)}.box-rect:hover:not(.connecting){border:.1rem solid var(--accent-color)}.box-circle{background-color:var(--canvas-surface);box-sizing:border-box;border-radius:2rem;width:100%;height:100%;display:inline-block}.box-circle.selected{border:.1rem solid var(--accent-color)}.box-circle.connecting{border:.1rem solid var(--linking-color)}.box-circle:hover:not(.connecting){border:.1rem solid var(--accent-color)}.box-text{text-align:center;white-space:nowrap;color:var(--canvas-text);-webkit-user-select:none;user-select:none;border-radius:.3rem;margin-top:-1rem;font-size:.6rem}
.error{color:red;white-space:pre-wrap;font-size:x-small}.warning{color:#b8860b;white-space:pre-wrap;font-size:x-small}.normal{font-size:x-small}.panel-right{width:var(--panel-w);background:var(--canvas-surface);flex-direction:column;flex-shrink:0;height:100%;display:flex}.properties-content{flex-direction:column;flex:1;display:flex;overflow-y:auto}.panel-header{border-bottom:1px solid var(--canvas-border);letter-spacing:.1em;text-transform:uppercase;height:36px;color:var(--canvas-text);align-items:center;gap:8px;padding:0 14px;font-size:10px;font-weight:600;display:flex}.panel-header-actions{gap:4px;margin-left:auto;display:flex}
.player-btn{cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:2rem;height:2rem;font-size:14px;transition:all .15s;display:flex}.player-btn.play{background:var(--canvas-surface);color:var(--canvas-text);font-size:18px}.player-btn.play:hover{background:var(--accent-color);color:var(--canvas-text)}.player-btn.stop{background:var(--canvas-surface);color:var(--canvas-text);font-size:18px}.player-btn.stop:hover{background:var(--accent-color);color:var(--canvas-text)}.player-btn.step{background:var(--canvas-surface);color:var(--canvas-text);font-size:18px}.player-btn.step:hover{background:var(--accent-color);color:var(--canvas-text)}.graphFrame{border-bottom:.1rem solid var(--canvas-border);flex-direction:row;justify-content:center;align-items:center;min-height:2rem;display:flex}.graphFrame:last-child{border-bottom:none}.graphFrameHeader{border-right:.1rem solid var(--canvas-border);letter-spacing:.04em;color:var(--canvas-text);text-align:center;white-space:nowrap;justify-content:center;align-self:stretch;align-items:center;width:4rem;padding:.2rem .4rem;font-size:.75rem;font-weight:600;display:flex}.graphFrameBody{flex:1;padding:.25rem .3rem;position:relative}.graphFrameItem{background-color:var(--canvas-surface);border:.1rem solid var(--canvas-border);color:var(--canvas-text);cursor:pointer;text-align:left;white-space:nowrap;text-overflow:ellipsis;border-radius:.2rem;width:fit-content;padding:.15rem .3rem;font-size:.7rem;overflow:hidden}.graphFrameItem:hover{background-color:color-mix(in srgb,var(--accent-color)18%,var(--canvas-surface));border-color:var(--accent-color)}.graphFrameDelete{color:var(--canvas-muted);cursor:pointer;background:0 0;border:none;border-radius:.2rem;padding:.1rem .2rem;font-size:.75rem;line-height:1;transition:color .15s,background-color .15s}.graphFrameDelete:hover{color:var(--accent-color);background-color:color-mix(in srgb,var(--accent-color)15%,transparent)}.graphFrameAdd{background-color:var(--canvas-surface);border:.1rem dashed var(--canvas-border);width:100%;min-height:2rem;color:var(--canvas-text);cursor:pointer;justify-content:center;align-items:center;font-size:1rem;transition:background-color .15s,border-color .15s,color .15s;display:flex}.graphFrameAdd:hover{background-color:color-mix(in srgb,var(--accent-color)18%,var(--canvas-surface));border-color:var(--accent-color);color:var(--canvas-text)}.graphChoiceDropDown{background-color:var(--canvas-surface);border:.1rem solid var(--canvas-border);z-index:100;border-radius:.3rem;flex-direction:column;min-width:7rem;display:flex;position:absolute;top:100%;left:0;overflow:hidden;box-shadow:0 .3rem .8rem #0003}.graphButtonDropDown{text-align:left;border:none;border-bottom:.1rem solid var(--canvas-border);cursor:pointer;color:var(--canvas-text);white-space:nowrap;background:0 0;padding:.3rem .6rem;font-size:.75rem;transition:background-color .12s}.graphButtonDropDown:last-child{border-bottom:none}.graphButtonDropDown:hover{background-color:color-mix(in srgb,var(--accent-color)18%,var(--canvas-surface))}.viewport-tab-control{z-index:100;pointer-events:none;flex-direction:column;align-items:center;display:flex;position:absolute;top:0;left:0;right:0}.viewport-tab-bar{pointer-events:auto;flex-direction:row;display:flex}.viewport-tab{cursor:pointer;border:none;border-left:.1rem solid var(--canvas-border);border-right:.1rem solid var(--canvas-border);border-bottom:.1rem solid var(--canvas-border);background-color:var(--canvas-surface);color:var(--canvas-text);border-radius:.3rem;height:1.6rem;margin-left:-1px;padding:.2rem .8rem;font-size:.75rem;font-weight:600}.viewport-tab:hover{filter:brightness(.95)}.viewport-tab.active{background-color:var(--accent-color)}.viewport-tab-actions{background-color:var(--canvas-surface);border:.1rem solid var(--canvas-border);pointer-events:auto;border-radius:.3rem;flex-direction:row;gap:.4rem;min-width:20rem;padding:.3rem .5rem;display:flex}.viewport-tab-action-btn{cursor:pointer;border:.1rem solid var(--canvas-border);background-color:var(--canvas-surface);color:var(--canvas-text);border-radius:.25rem;flex-direction:column;align-items:center;gap:.2rem;min-width:2.8rem;padding:.3rem .7rem;font-size:.6rem;display:flex}.viewport-tab-action-btn:hover{background-color:color-mix(in srgb,var(--accent-color)18%,var(--canvas-surface))}