#app{display:flex}.code-container,.canvas-container{flex:0 0 50%;min-width:200px}.splitter{width:16px;cursor:col-resize;background-color:#111;border:2px solid #333}.code-content{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;background:#111;padding:12px 16px;overflow:auto;margin-left:30px;margin-right:10px;font-size:14px;line-height:1.5;border-radius:4px;color:#d4d4d4;overflow-y:auto;height:95%}.tok-kw{color:#ff9d00;font-weight:500}.tok-type{color:#6ae4ff}.tok-number{color:#c3e88d}.tok-string{color:#c792ea}.tok-comment{color:#5c6773;font-style:italic}body{margin:0;padding:0;background-color:#121212;color:#fff;display:flex;height:100vh;width:100vw;font-family:Courier New,Courier,monospace}#app{width:100vw;height:100vh;display:flex}.code-container{width:50vw;height:100vh;background-color:#1e1e1e;display:flex;flex-direction:column;align-items:flex-end;overflow-y:auto;overflow-x:hidden}.code-container button{margin:20px;padding:8px 12px;background-color:#007acc;color:#fff;border:none;border-radius:4px;cursor:pointer;max-width:120px}.code-contentWrapper{flex:1;width:100%;overflow-y:auto;margin-inline:10px}pre{margin:0;padding:0}span.canvas-label{position:absolute;top:10px;left:10px;color:#888;font-size:14px;background-color:#00000080;padding:4px 8px;border-radius:4px;pointer-events:none}span#zoomLabel{left:auto;right:10px}span#posLabel{top:40px;left:auto;right:10px}.canvas-container{width:60vw;height:100vh;background-color:#111;position:relative}.canvas-container canvas{width:100%;height:100%;display:block}.canvas-container{position:relative}#card-layer{position:absolute;top:0;left:0;transition:opacity .15s ease;opacity:1;pointer-events:auto}#card-layer.hidden{opacity:0;pointer-events:none}.node-dot{position:absolute;width:16px;height:16px;background-color:#a22;border-radius:50%;transform:translate(-50%,-50%);pointer-events:auto;cursor:grab;z-index:2}.node-connector{position:absolute;height:1px;background-color:#ccc;transform-origin:0 50%;z-index:1}.node-wrapper:hover .node-connector{background:#f44}.node-card{position:absolute;background-color:#000000d9;border:1px solid #565656;color:#fff;padding:16px;font-size:14px;border-radius:10px;cursor:grab;pointer-events:auto;z-index:3;transition:.15s;display:flex;flex-direction:column;gap:10px;width:100px}.node-card.dragging{cursor:grabbing}.node-card:hover{background-color:#a22;transition:.15s}.node-card-delete{position:absolute;top:0;right:4px;border:none;background:transparent;color:#f55;padding-block:0px;padding-inline:4px;cursor:pointer;font-size:20px}.node-card-delete:hover{color:#f88}.toggle-row{display:flex;gap:10px;margin-top:40px;margin-left:10px}.button-row{display:flex;justify-content:space-between;width:100%}.hideCardsButton,#toggleArrowsButton,#toggleGridButton{background-color:#00000080;color:#888;border:none;padding:4px 8px;border-radius:4px;cursor:pointer;z-index:4}select{background-color:#222;color:#fff;border:1px solid #555;border-radius:4px;font-size:14px;width:100%}input[type=number]{background-color:#222;color:#fff;border:1px solid #555;border-radius:4px;font-size:14px;width:100%;padding:0}span{font-size:12px}.node-card-radius-input{margin-bottom:10px}.tracer-controls{position:absolute;top:80px;left:10px;background-color:#00000080;color:#888;border:none;padding:8px;border-radius:4px;cursor:default;z-index:4;display:flex;flex-direction:column;gap:8px}