.tree{--spacing: 1.5rem;--radius: 10px}.tree li{display:block;position:relative;padding-left:calc(2 * var(--spacing) - var(--radius) - 2px)}.tree ul{margin-left:calc(var(--radius) - var(--spacing));padding-left:0}.tree ul li{border-left:2px solid #ddd}.tree ul li:last-child{border-color:transparent}.tree ul li:before{content:"";display:block;position:absolute;top:calc(var(--spacing) / -2);left:-2px;width:calc(var(--spacing) + 2px);height:calc(var(--spacing) + 1px);border:solid #ddd;border-width:0 0 2px 2px}.tree summary{display:block;cursor:pointer}.tree summary::marker,.tree summary::-webkit-details-marker{display:none}.tree summary:focus{outline:none}.tree summary:focus-visible{outline:1px dotted #000}.tree li:after,.tree summary:before{content:"";display:block;position:absolute;top:calc(var(--spacing) / 2 - var(--radius));left:calc(var(--spacing) - var(--radius) - 1px);width:calc(2 * var(--radius));height:calc(2 * var(--radius));border-radius:50%;background:#ddd}.tree summary:before{z-index:1;content:"+";color:#fff;background:#6c757d;line-height:calc(2 * var(--radius) - 2px);text-align:center}.tree details[open]>summary:before{background-position:calc(-2 * var(--radius)) 0;content:"-"}