body {
    font-family: monospace;
    counter-reset: section;
}

#container {
    color: #334155;
}

#container span { 
    display: inline-block;
    width: 1.1em;
    text-align: center;
}

.b0 { background-color: #4A90E2;}
.b1 { background-color: #FF6B6B;}
.b2 { background-color: #82E0AA;}
.b3 { background-color: #F7DC6F;}
.b4 { background-color: #BB8FCE;}
.b5 { background-color: #F5B7B1;}
.b6 { background-color: #64B5F6;}
.b7 { background-color: #FFA07A;}
.b8 { background-color: #A2D9CE;}
.b9 { background-color: #FFD700;}
.bF { color: #e8eaec; background-color: #e8eaec;}
.bH { color: #FFFFFF; }

#container div {
    display: inline-block;
    font-family: monospace;
    margin: 0.5em;
    background-color: #f8fafc;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid #e2e8f0;
}

#container div::before {
    counter-increment: section;
    content: counter(section) "\A";
    white-space: pre-wrap;
}