html, body { margin: 0; height: 100%; background: #111; color: #ddd; font: 16px/1.45 system-ui, sans-serif; }
canvas { width: 100%; height: 100%; display: block; user-select: none; touch-action: none; outline: none; }
main { position: fixed; inset: 0; overflow: auto; padding: 8vh 16px 16px; box-sizing: border-box; background: #111; }
main[hidden], section[hidden], [hidden] { display: none !important; }
main > * { max-width: 40rem; margin-left: auto; margin-right: auto; }
h1 { font-weight: 600; letter-spacing: .04em; }
.row { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px auto; }
button { font: inherit; padding: 10px 18px; border-radius: 6px; border: 1px solid #c33; background: #a22; color: #fff; cursor: pointer; }
button.quiet { background: transparent; border-color: #666; color: #ccc; }
button:focus-visible { outline: 2px solid #8cf; outline-offset: 2px; }
progress { width: 100%; height: 14px; }
.hint { color: #999; font-size: 14px; }
code { color: #bbb; }
#status { color: #f9a; min-height: 1.5em; }
#failures { color: #999; font-size: 13px; }
#starting { position: fixed; left: 0; right: 0; bottom: 12vh; margin: 0; text-align: center; color: #bbb; }
#failTitle { color: #f9a; font-weight: 600; }
#failDetail { white-space: pre-wrap; word-break: break-word; font-size: 13px; color: #aaa; max-height: 40vh; overflow: auto; }