dom-tree {
  display: contents;
}
dom-tree .wrap { --h-el: #8ec5f0; --h-at: #c9c6bb; --h-st: #b3aef2; --h-ev: #79d6b8; --h-tx: #f2bd63; display: flex; flex-direction: column; gap: 1.15rem; font-family: var(--font-mono); width: fit-content; max-width: 100% }
dom-tree .legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-size: var(--slide-ms-3xs); letter-spacing: var(--slide-lt-2); text-transform: uppercase; color: var(--slide-muted); max-width: 19rem }
dom-tree .leg { display: inline-flex; align-items: center; gap: 0.4rem }
dom-tree .dot { width: 8px; height: 8px; border-radius: 50%; flex: none }
dom-tree .dot[data-k=el] { background: var(--h-el) }
dom-tree .dot[data-k=at] { background: var(--h-at) }
dom-tree .dot[data-k=st] { background: var(--h-st) }
dom-tree .dot[data-k=ev] { background: var(--h-ev) }
dom-tree .dot[data-k=tx] { background: var(--h-tx) }
dom-tree .depths { display: grid; grid-template-columns: 3.3rem 3.3rem 1fr; font-size: var(--slide-ms-3xs); letter-spacing: var(--slide-lt-2); text-transform: uppercase; color: var(--slide-muted); border-bottom: 1px solid var(--slide-rule); padding-bottom: 0.45rem; white-space: nowrap; min-width: 19rem }
dom-tree .tree { display: flex; flex-direction: column; align-items: flex-start }
dom-tree .branch { margin-left: 0.7rem; padding-left: 2.6rem; width: 100%; border-left: 1px solid var(--slide-rule) }
dom-tree .item { position: relative; margin-top: 0.4rem }
dom-tree .item::before { content: ''; position: absolute; left: -2.6rem; top: 0.82rem; width: 2.6rem; height: 1px; background: var(--slide-rule) }
dom-tree .item:last-child::after { content: ''; position: absolute; left: calc(-2.6rem - 1px); top: 0.85rem; bottom: -0.6rem; width: 1px; background: var(--slide-bg) }
dom-tree .box { display: inline-block; padding: 0.32rem 0.7rem; font-size: 0.72rem; line-height: 1.25; border: 1px solid transparent; border-radius: 3px; white-space: nowrap }
dom-tree .box[data-italic=true] { font-style: italic }
@media (max-width: 900px), (max-height: 620px) { dom-tree .box { white-space: normal } }
dom-tree .box[data-k=el] { background: color-mix(in oklab, var(--h-el) 16%, var(--slide-bg)); border-color: color-mix(in oklab, var(--h-el) 38%, var(--slide-bg)); color: color-mix(in oklab, var(--h-el) 42%, var(--slide-fg)) }
dom-tree .box[data-k=at] { background: color-mix(in oklab, var(--h-at) 16%, var(--slide-bg)); border-color: color-mix(in oklab, var(--h-at) 38%, var(--slide-bg)); color: color-mix(in oklab, var(--h-at) 42%, var(--slide-fg)) }
dom-tree .box[data-k=st] { background: color-mix(in oklab, var(--h-st) 16%, var(--slide-bg)); border-color: color-mix(in oklab, var(--h-st) 38%, var(--slide-bg)); color: color-mix(in oklab, var(--h-st) 42%, var(--slide-fg)) }
dom-tree .box[data-k=ev] { background: color-mix(in oklab, var(--h-ev) 16%, var(--slide-bg)); border-color: color-mix(in oklab, var(--h-ev) 38%, var(--slide-bg)); color: color-mix(in oklab, var(--h-ev) 42%, var(--slide-fg)) }
dom-tree .box[data-k=tx] { background: color-mix(in oklab, var(--h-tx) 16%, var(--slide-bg)); border-color: color-mix(in oklab, var(--h-tx) 38%, var(--slide-bg)); color: color-mix(in oklab, var(--h-tx) 42%, var(--slide-fg)) }