:root{--webvis-blue: #2484C6;--cx-primary-color: #60b1dc;--cx-primary-color-active: #8facc0;--cx-secondary-color: #a1a1a1;--cx-secondary-color-active: #adadad;--cx-tertiary-color: transparent;--cx-tertiary-color-active: #ccc}html,body{font-family:Roboto,sans-serif;width:100%;height:100%;margin:0;padding:0}*{box-sizing:border-box}.app-container{display:flex;flex-direction:column;height:100%}main{display:flex;flex:1;min-height:0}#viewer{width:70%;height:100%;background:#f5f5f5;position:relative;display:flex;overflow:hidden}#webvis-tree-container{position:absolute;top:70px;left:20px;bottom:20px;height:auto;width:350px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;transition:transform .3s ease;z-index:10;display:flex;flex-direction:column;pointer-events:auto}#webvis-tree-container.tree-closed{transform:translate(-390px)}.tree-toggle-button{position:absolute;top:20px;left:20px;width:36px;height:36px;border:none;border-radius:4px;background:var(--cx-primary-color, #60b1dc);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:11;padding:8px;box-shadow:0 2px 4px #0003}.tree-toggle-button:hover{background:var(--cx-primary-color-active, #8facc0)}#viewer.tree-open .icon-open,#viewer.tree-closed .icon-close{display:none}#viewer.tree-open .icon-close,#viewer.tree-closed .icon-open{display:block}.tree-toggle-button svg{width:20px;height:20px}webvis-tree{flex:1;overflow:auto}webvis-viewer{flex:1;width:100%;height:100%}#timeline-container{width:100%;border-top:2px solid var(--border-color, #e0e0e0)}#timeline-container:empty{display:none;border:none}