body {
    display: grid;
    grid-template-columns: 1fr 50% 1fr;
    grid-template-rows: 2em auto;
    background: #777777;
}

.main {
    grid-area: 2 / 2 / 3 / 3;
}

.main .snippet, .main .display {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr auto 1fr;
}

.main .snippet .snippetEmulator, .main .display canvas {
    grid-area: 1 / 2 / 2 / 3;
}

.snippetEmulator {
    display: grid;
    grid-template-rows: auto 1em 1em 2em;
    grid-template-columns: 40em;
    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 }

.snippetEmulator .src .directive { color: darkcyan }
.snippetEmulator .src .macro { color: mediumpurple }
.snippetEmulator .src .number { color: lightskyblue }
.snippetEmulator .src .string { color: darkseagreen }
.snippetEmulator .src .label { color: chocolate }
.snippetEmulator .src .comment { color: grey }

span.mono {
    font-family: monospace;
    font-weight: bolder;
    color: white;
}
p.sidebar {
    background-color: #555555;
    border: 1px solid #aaaaaa;
    padding: 0.5em;
}