body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 2em auto;
    background: #777777;
}
.react-root {
    grid-area: 2 / 2 / 3 / 3;
}

.snippetEmulator {
    display: grid;
    grid-template-rows: 10em 1em 1em 2em;
    grid-template-columns: 20em;
    background: #333333;
    font-family: monospace;
    padding: 0.5em;
}

.snippetEmulator textarea { grid-area: 1 / 1 / 2 / 2 }
.snippetEmulator .src { grid-area: 1 / 1 / 2 / 2 }
.snippetEmulator .message { grid-area: 2 / 1 / 3 / 2 }
.snippetEmulator .buttons { grid-area: 3 / 1 / 4 / 2 }
.snippetEmulator .stacks { grid-area: 4 / 1 / 5 / 2 }
.snippetEmulator textarea {
    background: #0f0f0f;
    color: #dddddd;
    min-height: 10em;
    border: none;
    resize: vertical;
    padding: 0;
    border: none;
}
.snippetEmulator textarea:focus { outline: none; }
.snippetEmulator .buttons a {
    margin-right: 0.5em;
    cursor: pointer;
    user-select: none;
}
.snippetEmulator .step, .snippetEmulator .run { color: lightgreen }
.snippetEmulator .reset { color: lightcoral }
.snippetEmulator .build, .snippetEmulator .edit { color: dodgerblue }
.snippetEmulator .highlight { background-color: darkgoldenrod }
.snippetEmulator .src { overflow: scroll }