html, body { margin: 0; height: 100%; background: #000; color: #9f9; font: 13px ui-monospace, Menlo, monospace; overscroll-behavior: none; }
#wrap { display: flex; flex-direction: column; height: 100%; height: 100dvh; }
#term { flex: 1; min-height: 0; overflow: hidden; margin: 4px 4px 0; display: flex; align-items: flex-start; justify-content: center; }
#term .xterm { flex: none; }
#keys { display: none; flex-wrap: wrap; gap: 4px; padding: 4px; border-top: 1px solid #232; background: #0a0f0a;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#keys button { flex: 1 0 auto; min-width: 2.4em; height: 34px; padding: 0 6px; font: 15px ui-monospace, Menlo, monospace;
  color: #cfe; background: #1b261b; border: 1px solid #2f4a2f; border-radius: 6px; -webkit-tap-highlight-color: transparent; }
#keys button:active, #keys button.on { background: #3a6a3a; color: #fff; }
@media (pointer: coarse), (max-width: 700px) { #keys { display: flex; } }
body.embed #keys { display: flex; flex-wrap: nowrap; gap: 2px; padding: 3px; }
body.embed #keys button { flex: 1 1 auto; height: 28px; font-size: 12px; min-width: 0; padding: 0 3px; }
#bar { padding: 5px 10px; font-size: 12px; color: #8a8; border-top: 1px solid #232; display: flex; gap: 12px; flex-wrap: wrap; }
#status { color: #fc6; }
body.embed #bar { padding: 2px 6px; font-size: 11px; }