html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: #111; } #app { position: fixed; inset: 0; } #canvasWrap { position: absolute; inset: 0; } #graphCanvas { width: 100%; height: 100%; display: block; } #hamburger { position: absolute; top: 10px; left: 10px; z-index: 50; width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(30, 30, 30, 0.9); color: #fff; font-size: 18px; } #topRight { position: absolute; top: 10px; right: 10px; z-index: 50; display: flex; gap: 8px; } #topRight button { padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(30, 30, 30, 0.9); color: #fff; } #sidebar { position: absolute; top: 60px; left: 10px; z-index: 60; width: 320px; max-height: calc(100% - 60px - 200px); overflow: auto; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(20, 20, 20, 0.95); color: #fff; padding: 10px; } #sidebar.hidden { display: none; } .sidebarHeader { font-weight: 600; margin-bottom: 8px; } #sidebar summary { cursor: pointer; padding: 6px 0; font-weight: 600; } .sidebarGroup { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 10px; } .entityBtn { text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(40, 40, 40, 0.9); color: #fff; } #output { position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: 40; border-top: 1px solid rgba(255, 255, 255, 0.12); background: rgba(10, 10, 10, 0.92); padding: 8px; } #outputText { width: 100%; height: 100%; resize: none; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; background: rgba(0, 0, 0, 0.35); color: #eaeaea; padding: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; }