html, body {
    margin:0;
    height:100%;
    background:black;
    color:#aaa;
}
* {
    box-sizing:border-box;
}
body { 
    font-family: monospace; 
}
canvas {
    background:#d1d1d1;
}
.svgRenderer svg {
    max-width:100%;
    height:auto;
}
.layout {
    flex:1;
    display:flex;
}
.flex-wrap-container { 
    display: flex;
    flex-wrap:wrap;
    gap: 5px; 
}
.flex-col-container { 
    display: flex;
    flex-direction:column;
    flex-wrap:wrap;
    gap: 5px; 
}

.editor-panel { 
    display: flex; 
    gap: 5px;
}

.command-list { 
    margin:1rem 0;
    overflow-y: auto; 
    border: 1px solid #aaa; 
}

.command-item { 
    padding: 2px;
    textarea {
        widtH:100%;
    }
}

.command-item input { 
    width: 60px;
}

.character-buttons {
    display: flex;
    flex-wrap: wrap;
    max-width: 400px;
}

.char-btn {
    width: 20px;
    height: 20px;
    background: black;
    border:1px solid #333;
    color: #aaa;
    cursor: pointer;
    font-family: monospace;
    font-size: 10px;
}

.char-btn:hover {
    border-color:yellow;
}

.char-btn.selected {
    border-color: lime;
}

.char-btn.has-commands {
    background: #aaa;
    color: black;
}
input {
    background:#aaa;
}