proof.css

@font-face {
    font-family:"Fira Logic";
    src: url("https://cdn.jsdelivr.net/gh/gleachkr/FiraLogic/dist/FiraLogic-Regular.woff") format("woff"), 
         url("https://cdn.jsdelivr.net/gh/gleachkr/FiraLogic/dist/FiraLogic-Regular.tff") format("tff")
}

input {
    font-family: "Fira Logic", monospace;
    border-style:none;
    margin:0px !important;
    padding:0px;
    font-size:12pt;
    position: relative; 
}

.label input { text-align:center }

.label, .root {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    line-height:1;
    position: relative; 
}

.root> *, .label > * {
    display: inline-block;
    padding:2px 5px 2px 5px;
    box-sizing:content-box;
}

.forest {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

.node {
    display: inline-block;
}

.label > *:not(.popper) {
    border-bottom: 1px solid black;
}

.label > *:nth-child(1) {
    flex-grow:1;
}

.label > *:nth-last-child(1) {
    flex-grow:1;
}

.node:nth-child(1) > .label > *:nth-child(1) {
    border-bottom: none; 
}

.node:last-child > .label > *:nth-child(3) {
    border-bottom: none;
    position:relative;
    top:.8em;
}

.node > .label > *:nth-child(1) {
    min-width:1em;
}

.node > .label > *:nth-child(3) {
    min-width:1em;
}

.waiting > input { color: gray }

.parse-error > input, .feedback > input { color: red }

.rule input {
    font-size:8pt;
    position:absolute;
    max-width:5em;
    text-overflow:ellipsis;
}

.rule input:focus {
    max-width:none;
}

.rule input:invalid, .root input:invalid { background:#eeeeee; }

.proofJSPopper {
    position:absolute;
    visibility:hidden;
    left:0px;
    z-index:1;
    font-size:12pt;
}

.proofJSPopper[x-placement="left"] > div { float:right; }

.proofJSPopper > div {
    background: white;
    display:inline-block;
    width:-moz-max-content;
    width:-webkit-max-content;
    width:max-content;
    max-width:400px;
    border:1px solid black;
    padding:10px;
    margin-left:5px;
    margin-right:5px;
}

*:hover > .proofJSPopper {
    visibility:visible;
}