:root { color-scheme: dark; --font-terminal: Menlo, Consolas, monospace; --color-terminal-bg: #0c181f; }
* { box-sizing: border-box; }
body { margin: 0; background: #0c181f; color: #e7edf1; font: 14px system-ui, sans-serif; }
header { height: 36px; padding: 8px 12px; display: flex; gap: 16px; align-items: center; }
header span { color: #b9c9d2; font-size: 12px; }
main { height: calc(100dvh - 36px); overflow: hidden; }
#terminal { width: 100%; height: 100%; }
#loading { position: fixed; inset: 36px 0 0; background: #0c181f; display: grid; place-content: center; padding: 24px; text-align: center; }
#loading[hidden] { display: none; }
#loading p { max-width: 640px; line-height: 1.6; }
.failure-note { display: none; }
#loading[data-failed] .failure-note { display: block; }
#loading[data-failed] .load-note { display: none; }
button { padding: 12px 24px; border: 1px solid #85bba6; border-radius: 4px; background: #234b3c; color: white; font: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid white; outline-offset: 3px; }
@media (max-width: 600px) { header { height: 56px; } main { height: calc(100dvh - 56px); } #loading { top: 56px; } }