Constant TREE_STYLE 

pub const TREE_STYLE: &str = r#"
[data-tree] {
    --dp: 1px;
    --dp-nudge-x: 0px;
    --dp-nudge-y: 0px;
    --tree-step: round(nearest, 18px, var(--dp));
    --tree-gap: round(nearest, 4px, var(--dp));
    --tree-row: round(nearest, 22px, var(--dp));
    --tree-hair: max(calc(2 * var(--dp)), round(nearest, 1.5px, var(--dp)));
    --tree-mid: round(down, calc((var(--tree-row) - var(--tree-hair)) / 2), var(--dp));
    --twistie: 12px;
    --twistie-gap: 4px;
    --tree-line: rgba(255, 255, 255, 0.22);
    padding:
        calc(round(nearest, var(--tree-pad-top, var(--studio-inset, 4px)), var(--dp)) + var(--dp-nudge-y))
        0
        round(nearest, var(--tree-pad-bottom, var(--studio-inset, 4px)), var(--dp))
        var(--dp-nudge-x);
}

.tree-node {
    position: relative;
    -webkit-user-select: none;
    user-select: none;
}

/* VS Code's explorer: 22px rows in its workbench font; a row at `--depth` starts its first glyph
   (`--depth` + 1) steps and a gap in. */
.tree-item {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--tree-row);
    padding: 0 var(--studio-inset, 8px) 0 calc(var(--tree-step) * (var(--depth) + 1) + var(--tree-gap));
    font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif;
    font-size: 13px;
    line-height: var(--tree-row);
    color: rgba(255, 255, 255, 0.8);
    transition: background 0.1s ease;
}

.tree-item.pressable {
    cursor: pointer;
}

.tree-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Under a finger every row is a finger tall, in the file tree and the Syntax Tree alike; the lines
   and branches follow the row. */
@media (pointer: coarse) {
    [data-tree] {
        --tree-row: round(nearest, 44px, var(--dp));
    }
}

/* A row the keyboard reached shows a ring inside its edges; a row pressed with a pointer shows none. */
.tree-item:focus {
    outline: none;
}

.tree-item:focus-visible {
    outline: 1px solid rgba(0, 212, 255, 0.6);
    outline-offset: -1px;
}

.tree-item.selected {
    background: rgba(0, 212, 255, 0.12);
    color: #00d4ff;
}

/* A node's chevron cell, the first glyph of its row. The chevron fills it, so an open node's
   chevron points down from the cell's left edge. */
.tree-item .twistie {
    flex: none;
    width: var(--twistie);
    margin-right: var(--twistie-gap);
    height: var(--tree-row);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Branches. A child at `--depth` hangs from the line `--depth` steps in; its branch leaves that
   line at the row's middle and runs one step, to the line its own children hang from. The first
   child's line starts a row up, at its parent's branch (the corner where the branch turns down),
   and the last child's line stops at its own branch. */
.tree-line,
.tree-branch {
    position: absolute;
    left: calc(var(--tree-step) * var(--depth));
    background: var(--tree-line);
}

.tree-line {
    top: var(--line-top, 0px);
    bottom: 0;
    width: var(--tree-hair);
}

.tree-children > .tree-node:first-child > .tree-line {
    --line-top: calc(var(--tree-mid) - var(--tree-row));
}

.tree-line.last {
    bottom: auto;
    height: calc(var(--tree-mid) + var(--tree-hair) - var(--line-top, 0px));
}

.tree-branch {
    top: var(--tree-mid);
    width: var(--tree-step);
    height: var(--tree-hair);
}
"#;

The tree’s geometry is one step. Its first line stands --tree-step from the tree’s edge, every level’s line one step further in, and every branch runs one step, from its parent’s line to its own; a row’s first glyph (a node’s chevron, else the first thing in its row) sits --tree-gap past the end of its branch. Every length snaps to whole device pixels (--dp, one device pixel in CSS pixels, is set from the page’s device pixel ratio), and the tree’s content starts on a device pixel wherever the layout puts the tree (--dp-nudge-x/-y, under one device pixel, pad it onto the grid), so each line covers whole screen pixels at any zoom and all read at one weight, --tree-hair: about 1.5px and never under two device pixels. A tree sets how far its content stands from its top and bottom with --tree-pad-top and --tree-pad-bottom (the Studio’s inset by default), each held to whole device pixels.