#main-article-content .tree {
    position: relative;
    margin: 0;
    padding: 0;

    --tick-offset: 0.9em;
}

#main-article-content .tree ul {
    position: relative;
    padding-left: 15px;
    margin: 0;
}

#main-article-content .tree > ul {
    padding-left: 10px;
}

#main-article-content .tree li {
    margin-inline-start: 0;
    margin: 0;
    padding: 0.2em 0;
    padding-left: 15px;
    text-indent: 10px hanging;
    position: relative;
}

#main-article-content .tree > ul > li {
    padding-left: 0;
}

#main-article-content .tree li::marker {
    content: "";
}

#main-article-content .tree li::after,
#main-article-content .tree li::before {
    content: '';
    position: absolute;
    background: #d8d8d8;
    left: 0;
}

#main-article-content .tree li::before {
    top: var(--tick-offset);
    width: 12px;
    height: 2px;
}

#main-article-content .tree li::after {
    top: 0;
    width: 2px;
    height: 100%;
}

#main-article-content .tree li:first-child:after {
    top: 2px;
    width: 2px;
    height: calc(100% - 2px);
}

#main-article-content .tree li:last-child::after {
    top: 0;
    width: 2px;
    height: var(--tick-offset); /* Trim the vertical line for last child */
}

/* Remove lines for root node */
#main-article-content .tree > ul > li::before,
#main-article-content .tree > ul > li::after {
    display: none;
}