:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
  body { margin: 0 auto; max-width: 34rem; padding: 1rem; }
  h1 { font-size: 1.3rem; margin: 0 0 .75rem; }
  .buttons { display: flex; gap: .5rem; }
  button { flex: 1; padding: 1rem .5rem; font-size: 1rem; border-radius: .5rem; border: 1px solid #8886; }
  button:disabled { opacity: .4; }
  button.next { outline: .25rem solid #e80; font-weight: bold; }     /* the next tap sends this button's command */
  #hint { min-height: 3rem; padding: .75rem; border-radius: .5rem; border-left: .4rem solid #8888; background: #8882; }
  #hint.ok { background: #2a85; border-color: #2a8; }
  #hint.bad { background: #d335; border-color: #d33; }
  #hint.send { background: #e805; border-color: #e80; }
  table { width: 100%; border-collapse: collapse; }
  th, td { text-align: left; padding: .4rem .25rem; border-bottom: 1px solid #8884; font-weight: normal; }
  th { opacity: .7; width: 40%; }
  pre { white-space: pre-wrap; word-break: break-all; font-size: .75rem; opacity: .7; }