body {
  font-family: system-ui, Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

p {
    padding: 5px;
    background: #fefefe;
    border: 1px solid #ddd;
    border-radius: 5px;
}
code {
    padding: 5px;
    background: #efefef;
    border: 1px solid #ccc;
    border-radius: 5px;
}

table {
  border-collapse: collapse; /* makes borders look cleaner */
  font-family: system-ui, Arial, sans-serif;
  font-size: 14px;
}

table th,
table td {
  border: 1px solid #ddd;
  padding: 10px 12px;
  text-align: left;
}

table thead th {
  background: #f4f6f8;
  font-weight: 700;
  color: #222;
}

table tbody tr:nth-child(even) {
  background: #fafafa; /* zebra striping */
}

table tbody tr:hover {
  background: #f1f7ff; /* hover highlight */
}

.menu-wrapper {
    position: fixed;
    right: 21px;
    top: 21px;
}

/* Monochrome light button */
button {
  --bg: #f2f2f2;
  --fg: #121212;
  --bd: #cfcfcf;

  appearance: none;
  -webkit-tap-highlight-color: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  padding: 0.75rem 1.15rem;
  border-radius: 12px;

  background: linear-gradient(180deg, #ffffff, var(--bg));
  color: var(--fg);
  border: 1px solid var(--bd);

  font: 650 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 0.2px;

  box-shadow:
    0 10px 24px rgba(0,0,0,0.08),
    0 1px 0 rgba(255,255,255,0.9) inset;

  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
}

button:hover {
  transform: translateY(-1px);
  border-color: #bdbdbd;
  background: linear-gradient(180deg, #ffffff, #eaeaea);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.12),
    0 1px 0 rgba(255,255,255,0.95) inset;
}

button:active {
  transform: translateY(0);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,0.9) inset;
}

button:focus-visible {
  outline: none;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.10),
    0 0 0 3px rgba(0,0,0,0.08),
    0 0 0 6px rgba(0,0,0,0.06);
}

button[disabled] {
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
  box-shadow: none;
}