:root {
  color-scheme: dark;
  --bg: #0f1014;
  --fg: #e6e3dd;
  --dim: #9a9fa8;
  --amber: #ffb547;
}
html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  display: grid;
  place-items: center;
  font: 14px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--fg);
}
#screen {
  display: block;
  outline: none;
  touch-action: none;
  cursor: pointer;
}
nav {
  position: fixed;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.25s;
}
body:hover nav,
nav:focus-within {
  opacity: 0.85;
}
/* Touch: a tap is Enter and a swipe steps, so only a small Esc stays visible. */
@media (hover: none) {
  nav {
    top: 8px;
    bottom: auto;
    right: 8px;
    opacity: 0.6;
  }
  nav button:not(.esc) {
    display: none;
  }
}
nav button {
  font: inherit;
  color: var(--fg);
  background: #2a2d34;
  border: 1px solid #3a3e47;
  border-radius: 6px;
  padding: 6px 10px;
  min-width: 40px;
  cursor: pointer;
}
nav button:hover {
  border-color: var(--amber);
  color: var(--amber);
}
noscript {
  color: var(--dim);
  padding: 24px;
}