ul[fs] { &, ul { padding: 0; list-style: none; }
    font-family: monospace;
    max-width: max-content;
    margin: 0; padding: 0;

    --li-pad-block: .0em; --li-indent: 1em; --li-radius: .2em; --split-pad-start: 2em;
    --mute-o: .25; --mute-op: calc(100% * var(--mute-o)); /* muted-opacity */
    --bg-lch: 0 0 0;        --tree-lch: var(--bg-lch); --tree-o: var(--mute-o);
    --tree-color: oklch(var(--tree-lch) / var(--tree-o));
    --tree-branch-y: 0.7em; --tree-stroke: 1px;
    --gap: 1rem;                      --box-lch: var(--bg-lch);
    --box-background-color: oklch(var(--box-lch) / var(--box-background-o)); --box-background-o: .02;
    --box-outline-color:    oklch(var(--box-lch) / var(--box-outline-o));    --box-outline-o: calc(var(--box-background-o) * 3);

    li {
      line-height: 1.4em;
      &:has(ul) { font-weight: bold; }
      &:not([p=\-]) { padding: var(--li-pad-block) 0 var(--li-pad-block) var(--li-indent); }
      &:not([p=\-]) {  background: linear-gradient(var(--tree-color), var(--tree-color)) 0 var(--tree-branch-y) / var(--li-indent) var(--tree-stroke) no-repeat, linear-gradient(var(--tree-color), var(--tree-color)) 0 0 / var(--tree-stroke) 100% no-repeat;
        &:last-child { background: linear-gradient(var(--tree-color), var(--tree-color)) 0 var(--tree-branch-y) / var(--li-indent) var(--tree-stroke) no-repeat, linear-gradient(var(--tree-color), var(--tree-color)) 0 0 / var(--tree-stroke) var(--tree-branch-y) no-repeat; }
      }

      &:not([p=\-]):not([s])[_] { position: relative;
        &::before { /* boxes */ pointer-events: none;
          content: ''; position: absolute; inset: 0; left: var(--li-indent); border-radius: var(--li-radius);
          background-color:  var(--box-background-color);
          outline: 1px solid var(--box-outline-color);
        }
      }

      display: grid;
      &[i]::after { /* info */ content: attr(i) / attr(i); color: color-mix(in oklch, currentColor var(--mute-op), transparent); place-self: end; white-space: pre; }
      &[i]:has(ul) { /* dir */
        display: grid;
        column-gap: var(--gap);
        grid-template: ". I"
                       "C C";
        &::after { grid-area: I; }
        > ul     { grid-area: C; }
      }
      &:not(:has(ul)):not([s]) { /* file */ font-weight: normal; grid-template: ". ."; gap: var(--gap); }
      &[s] { /* split*/
        /* font-weight: normal; */
        /* text-align: end; */
        padding-block-start: var(--split-pad-start); color: color-mix(in oklch, currentColor var(--mute-op), transparent);
        background: linear-gradient(var(--tree-color), var(--tree-color)) 0 0 / var(--tree-stroke) 100% no-repeat;
      }
    }
  }