@layer base{:root{--black: #303030;--blue: #3b82f6;--lightblue: #60a5fa;--red: #db3d58;--gray-1: #f3f4f6;--gray-2: #d1d5db;--gray-3: #6b7280;--white: #fff;--whiteTranslucent: rgba(255, 255, 255, .3);--fontFamily: "Inter", Arial;--fontWeight: 300}[data-theme=light]{--textColor: var(--black);--headingColor: var(--black);--anchorColor: var(--blue);color:var(--textColor);font-family:var(--fontFamily);font-weight:var(--fontWeight)}[data-theme=dark]{--textColor: var(--white);--headingColor: var(--white);--anchorColor: var(--blue);color:var(--textColor);font-family:var(--fontFamily);font-weight:var(--fontWeight)}}.tree-diagram{height:100vh;width:100vw}.tree-diagram .logo{position:absolute;top:1em;left:1em;z-index:100}.tree-diagram #arrow,.tree-diagram #arrow-inset{fill:var(--red)}.tree-diagram svg.tree{width:100vw;height:100vh}.tree-diagram svg.tree g{fill:var(--lightblue)}.tree-diagram svg.tree g:hover{fill:var(--blue)}.tree-diagram svg.tree g.hide{opacity:.3}@keyframes pulse{to{stroke-width:80;stroke-opacity:0}}.tree-diagram svg.tree .node-broadcast{fill:var(--white);stroke:var(--lightblue);stroke-width:40;animation-name:pulse;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes drill{to{stroke-dashoffset:-20}}.tree-diagram svg.tree .node-line{stroke:var(--lightblue);stroke-width:2;pointer-events:none}.tree-diagram svg.tree .node-line.prop-drilling{stroke:var(--red);stroke-width:3;stroke-dasharray:10;animation-name:drill;animation-timing-function:linear;animation-duration:.7s;animation-iteration-count:infinite}.tree-diagram svg.tree .node-selected{fill:var(--white);stroke:var(--lightblue);stroke-width:1}.tree-diagram svg.tree .node{cursor:grab}.tree-diagram svg.tree .node:hover{fill:var(--blue)}.tree-diagram svg.tree .node.dragging{cursor:grabbing;stroke:transparent;stroke-width:100}.tree-diagram svg.tree .node.feature{fill:var(--red)}.tree-diagram svg.tree .add-node{fill:var(--white);stroke:var(--lightblue);stroke-width:2;cursor:pointer}.tree-diagram svg.tree .add-node:hover{fill:var(--lightblue)}.tree-diagram svg.tree text{font-family:Arial;fill:var(--black);pointer-events:none}.tree-diagram svg.tree text.label{font-size:1.5em;font-weight:700}.tree-diagram svg.tree text.node-id{fill:var(--white)}.tree-diagram svg.tree .node.selected~text{fill:var(--red)}.tree-diagram-legend{position:absolute;bottom:1em;left:1em;z-index:100;font-family:Arial;color:var(--gray-3)}.tree-diagram-legend .description{margin:0 0 .5em;font-size:.9em}.tree-diagram-legend u{color:var(--gray-3);font-weight:700}.tree-diagram-legend .key{display:inline-block;padding:.5em 1em;border-radius:.4em;border:1px solid var(--gray-2);color:var(--gray-3);background-color:var(--white)}.tree-diagram-legend .key:hover{background-color:var(--gray-1)}.tree-diagram-legend .menu{display:none;position:absolute;bottom:3em;left:0;list-style:none;margin:0 0 0 -1em;padding:1em;background-color:var(--whiteTranslucent)}.tree-diagram-legend .menu li:not(.description){margin-top:.3em;white-space:nowrap}.tree-diagram-legend .menu li>*+*{margin-left:.4em}.tree-diagram-legend .menu li span:not(.key){text-shadow:0 0 2px var(--white),0 0 10px var(--white);font-size:1em}.tree-diagram-legend .trigger:hover+.menu{display:block}.tree-diagram-legend .menu.open{display:block}.tree-diagram-legend .trigger{cursor:help;outline:none}.tree-diagram-legend .trigger:focus+.menu{display:block}.tree-diagram .capture-tree-btn{position:absolute;bottom:1em;right:1em;z-index:100;background:var(--blue);color:var(--white);border:none;padding:.75em 1.1em;border-radius:.5em;font-size:.9em;cursor:pointer;box-shadow:0 2px 6px #00000026}.tree-diagram .capture-tree-btn:hover:not(:disabled){background:var(--lightblue)}.tree-diagram .capture-tree-btn:disabled{opacity:.6;cursor:default}