:root { --line: #0d0d0d; --ink: #3a3a3a; --dim: #262626; }
html, body { margin: 0; height: 100%; background: #000; }
/* Browser-drawn bits (autofill lists, mobile address bar, tap flash) must stay dark too. */
html { color-scheme: dark; -webkit-tap-highlight-color: transparent; }
::selection { background: #141414; color: var(--ink); } /* default is bright blue */
body { display: grid; place-items: center; }
main { width: min(420px, calc(100vw - 32px)); }
input {
  width: 100%; box-sizing: border-box; padding: 8px 2px;
  background: #000; color: var(--ink); caret-color: var(--ink);
  border: 0; border-bottom: 1px solid var(--line); outline: none;
  font: 16px ui-monospace, Consolas, monospace; /* <16px makes iOS zoom on focus */
  /* No transitions: every state change here is a keypress, and keypresses must feel instant. */
}
/* Dots while locked, done in CSS: a real type=password field drags in the password manager. */
input:not(.on) { -webkit-text-security: disc; }
input.on  { border-bottom-color: #181818; }
input.bad { border-bottom-color: #2a0000; }
#hint { height: 1.4em; margin-top: 6px; color: var(--dim); font: 12px ui-monospace, Consolas, monospace; white-space: pre; overflow: hidden; }