html,body{margin:0;padding:0;width:100vw;height:100vh;overflow:hidden;background:#000}#app{width:100%;height:100%;margin:0 auto}#viewport{position:absolute;top:0;left:0;width:100%;height:100%}canvas{width:100%!important;height:100%!important}#viewport{width:100vw;height:100vh;position:fixed;top:0;left:0}h2{font-size:12px}.tree-view{color:#fff;padding:10px;max-height:50%;overflow:auto}.tree-node{margin-left:10px;padding:2px 5px;border-left:1px solid #ccc}.tree-node.selected{outline:1px solid red}.leaf-node{position:relative;padding-left:20px;cursor:pointer;height:25px;display:flex;align-items:center}.leaf-node:hover{background-color:#ffffff1a}.leaf-node:before{content:"";position:absolute;top:50%;left:0;transform:translateY(-50%);width:15px;height:1px;background-color:#ccc}.operation-node .node-details{display:flex;gap:10px;cursor:pointer;height:25px;align-items:center;padding-left:5px}.operation-node .node-details span:first-child{font-weight:700}.operation-node .node-details:hover{background-color:#ffffff1a}.operation-type{font-style:italic;color:#aaa}.settings-row{display:flex;flex-direction:row;justify-content:space-between;padding:4px 16px}.toolbar{position:fixed;top:20px;left:50%;transform:translate(-50%);border-radius:10px;backdrop-filter:blur(10px);background-color:#50505080;padding:10px;display:flex;flex-direction:row;gap:10px}#left-panel-container{position:fixed;top:0;left:0;height:100%;width:300px;transform:translate(-100%);transition:transform .3s ease-in-out;z-index:100;padding:10px 0 10px 10px}#left-panel-container.open{transform:translate(0)}#sidebar-toggle-btn{position:absolute;top:50%;right:-30px;transform:translateY(-50%);width:30px;height:60px;background-color:#3c3c3c80;backdrop-filter:blur(10px);color:#fff;border:none;cursor:pointer;border-top-right-radius:5px;border-bottom-right-radius:5px}#left-panel{background-color:#323232cc;overflow:auto;position:absolute;box-sizing:border-box;height:calc(100vh - 20px);top:10px;left:10px;width:300px;background-color:#3c3c3c80;box-shadow:0 0 5px #0003;backdrop-filter:blur(10px);border-radius:5px;z-index:3;overflow-y:auto;font-family:sans-serif;font-size:12px;color:#fff}.tool-btn{border-radius:4px;border:none;background:#aaa;color:#666;box-sizing:border-box;display:block;width:30px;height:30px;text-align:center;cursor:pointer}.tool-btn[data-active=true]{background:#eee;color:#09f}.button-group{display:flex;flex-direction:row;gap:0px}.button-group>button{border-radius:0}.button-group>button:first-child{border-radius:4px 0 0 4px}.button-group>button:last-child{border-radius:0 4px 4px 0}