.viewport{border:.1rem solid var(--shadow-bg);background-color:var(--light-bg);cursor:grab;background-image:url(../media/background.3d51044d.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}.viewport-info{color:#374151;margin-left:1rem;font-size:.875rem}.btn-add,.btn-reset{cursor:pointer;border:none;border-radius:.375rem;padding:.5rem 1rem;font-weight:500;transition:all .2s}.property-text{color:var(--forth-color);white-space:nowrap;font-size:.75rem;font-weight:500}.properties-panel{background-color:var(--light-bg);border:.1rem solid var(--soft-border-color);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(--dark-color);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(--forth-color);white-space:nowrap;font-size:.75rem;font-weight:500}.property-group input{border:.1rem solid var(--soft-border-color);background-color:var(--light-color);border-radius:.25rem;width:100%;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(--text-color);text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:.75rem;overflow:hidden}.btn-delete{color:var(--accent2);cursor:pointer;background:0 0;border:.1rem solid #ff5e7866;border-radius:.25rem;align-self:flex-start;margin-top:.75rem;padding:.3rem .7rem;font-size:.75rem;transition:background-color .15s,border-color .15s}.btn-delete:hover{border-color:var(--accent2);background-color:#ff5e781a}
.textureCanvas{background-color:var(--light-color)}.box-container{position:absolute}.box-rect{border:.1rem solid var(--soft-border-color);box-sizing:border-box;display:inline-block}.box-rect.selected{border:.1rem solid var(--dark-color)}.box-rect.connecting{border:.1rem solid var(--linking-color)}.box-circle{background-color:var(--light-color);border:.1rem solid var(--soft-border-color);box-sizing:border-box;border-radius:2rem;width:100%;height:100%;display:inline-block}.box-circle.selected{border:.1rem solid var(--dark-color)}.box-circle.connecting{border:.1rem solid var(--linking-color)}.box-text{text-align:center;white-space:nowrap;color:var(--text-color);-webkit-user-select:none;user-select:none;border-radius:.3rem;margin-top:-1rem;font-size:.6rem}
.error{color:red;font-size:x-small}.normal{font-size:x-small}.panel-right{width:var(--panel-w);background:var(--light-bg);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(--border);letter-spacing:.1em;text-transform:uppercase;height:36px;color:var(--muted);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{color:#000;background:#99ceff;font-size:18px}.player-btn.play:hover{filter:brightness(1.2);transform:scale(1.05)}.player-btn.stop{background:var(--accent2);color:#fff}.player-btn.stop:hover{filter:brightness(1.2);transform:scale(1.05)}.player-btn.step{color:#000;background:#ddd;font-size:18px}.player-btn.step:hover{filter:brightness(1.1);transform:scale(1.05)}.graphFrame{border-bottom:.1rem solid var(--soft-border-color);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(--soft-border-color);letter-spacing:.04em;color:var(--text-color);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(--setting-bg);border:.1rem solid var(--soft-border-color);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:var(--secondary-bg-color);border-color:var(--muted)}.graphFrameDelete{color:var(--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(--accent2);background-color:#ff5e781a}.graphFrameAdd{background-color:var(--setting-bg);border:.1rem dashed var(--soft-border-color);width:100%;min-height:2rem;color:var(--text-color);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:var(--secondary-bg-color);border-color:var(--muted);color:var(--text-color)}.graphChoiceDropDown{background-color:var(--light-bg);border:.1rem solid var(--soft-border-color);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(--soft-border-color);cursor:pointer;color:var(--text-color);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:var(--secondary-bg-color)}.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(--soft-border-color);border-right:.1rem solid var(--soft-border-color);border-bottom:.1rem solid var(--soft-border-color);color:var(--text-color);background-color:#fff;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:#99ceff;border-bottom-color:#99ceff}.viewport-tab-actions{border:.1rem solid var(--soft-border-color);pointer-events:auto;background-color:#fff;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(--soft-border-color);color:var(--text-color);background-color:#fff;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:var(--light-bg)}