:root {
  --bg: #16171a;
  --ink: #d7d9de;
  --muted: #6c707a;
  --faint: #2a2c31;
  --red: #ff5a4e;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "Space Mono", ui-monospace, Menlo, monospace;
}

/* Font size scales so a full row (offset + hex + ascii, ~51ch) fits the viewport. */
main {
  font-size: clamp(8px, calc((100vw - 32px) / 41), 24px);
  line-height: 2;
}

p { margin: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cmd {
  margin-bottom: 1.6em;
  color: var(--muted);
  font-size: max(12px, .7em);
}
.cmd b { color: var(--ink); font-weight: 400; }

/* ---- hexdump ---- */

.row {
  display: flex;
  align-items: baseline;
  white-space: pre;
}

.offset { margin-right: 2ch; color: var(--muted); }
.hex { margin-right: 2ch; }
.ascii { font-weight: 700; }

.byte { cursor: default; }
.hex .byte:not(:last-child) { margin-right: 1ch; }
.byte.empty { color: var(--faint); }

.row.overflow .byte { color: var(--red); }
.row.overflow .byte.empty { color: var(--faint); }

.byte.hover { background: var(--ink); color: var(--bg); }
.row.overflow .byte.hover { background: var(--red); color: var(--bg); }

.fault {
  margin-top: 2.2em;
  color: var(--red);
  font-size: max(13px, .8em);
}
.fault span { color: var(--muted); }

/* Phones: put the ascii column under the hex. */
@media (max-width: 600px) {
  main {
    width: 100%;
    padding: 0 16px;
    font-size: calc((100vw - 32px) / 33);
  }
  .row { flex-wrap: wrap; }
  .ascii { flex-basis: 100%; padding-left: 11ch; }
}