html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #f4f2ee;
  color: #e8e6e3;
  font: 12px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace;
}
#view {
  display: block;
  width: 100vw;
  height: 100vh;
  touch-action: none;
  cursor: grab;
}
#view.dragging { cursor: grabbing; }
#hud, #help {
  position: fixed;
  background: rgba(10, 10, 12, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 8px 10px;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
#hud { top: 12px; left: 12px; min-width: 260px; max-width: 360px; }
#hud.hidden { display: none; }
#hud .row { display: flex; gap: 8px; }
#hud .k { color: #8a8780; min-width: 64px; }
#hud .swatch {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 2px;
  vertical-align: -2px;
  margin-right: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
#hud .prompt { margin-top: 6px; color: #f3d9a4; font-style: italic; }
#help { bottom: 12px; left: 50%; transform: translateX(-50%); color: #aaa59c; white-space: nowrap; }
@media (max-width: 640px) { #help { white-space: normal; width: calc(100% - 56px); text-align: center; } }