:root { color-scheme: dark; font-family: "MS Gothic", "Osaka-Mono", "Courier New", monospace; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: #090909; color: #d8d8d8; }
button, input { font: inherit; }
.screen { width: min(920px, 100%); min-height: min(720px, 100vh); margin: 0 auto; border-inline: 1px solid #333; display: flex; flex-direction: column; background: #050505; }
.statusbar { display: flex; justify-content: space-between; gap: 1rem; padding: 7px 10px; border-bottom: 1px solid #777; font-size: 13px; letter-spacing: .08em; }
.terminal { flex: 1; min-height: 520px; padding: 15px 14px 8px; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.48; tab-size: 4; }
.line { min-height: 1.48em; }
.dim { color: #8a8a8a; }
.bright { color: #fff; }
.error { text-decoration: underline; text-decoration-style: dotted; }
.command { border-top: 1px solid #777; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; padding: 8px 10px; }
.command input { width: 100%; min-width: 0; background: transparent; color: #fff; border: 0; outline: 0; padding: 4px 0; caret-color: #fff; }
.command button, .softkeys button { border: 1px solid #555; background: #0a0a0a; color: #cfcfcf; padding: 5px 8px; cursor: pointer; }
.command button:hover, .softkeys button:hover { border-color: #aaa; color: #fff; }
.command input:disabled { opacity: .45; }
.softkeys { width: min(920px, 100%); margin: 8px auto 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px; }
.softkeys button { flex: 1 1 80px; font-size: 12px; }
.back { width: min(920px, 100%); margin: 12px auto 30px; padding: 0 8px; font-size: 12px; }
.back a { color: #888; }
.dialog { border: 1px solid #777; margin: 8px 0; padding: 10px; }
.dialog label { display: grid; gap: 4px; margin: 7px 0; }
.dialog input, .dialog textarea, .dialog select { width: 100%; background: #050505; color: #fff; border: 1px solid #555; padding: 6px; font: inherit; }
.dialog textarea { min-height: 96px; resize: vertical; }
.dialog .actions { display: flex; gap: 7px; justify-content: flex-end; }
.dialog button { border: 1px solid #777; background: #111; color: #fff; padding: 5px 10px; }
@media (max-width: 620px) { .terminal { min-height: 64vh; font-size: 14px; padding-inline: 9px; } .screen { min-height: 78vh; } .command { padding-inline: 8px; } }