* {
  box-sizing: border-box;
}

body {
  font-family: serif;
  margin: 1em;
}

header {
  margin-bottom: 0.5em;
}

textarea {
  width: 100%;
  resize: vertical;
  min-height: 6em;
  height: 10em;
  font-family: monospace;
  font-size: 0.9em;
}

/* Anchor points */
.anchor {
  display: none;
  justify-content: space-between;
  color: #0004;
  font-size: 0.5em;
  font-family: monospace;
}

#tables-container {
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;
}

.table-block {
    margin: 0 auto;
}

.tables-group {
    display: flex;
}

/* Tables */
table {
  border-collapse: collapse;
  padding-right: 1px;
  margin: 0 auto;
}

/* First row: Unicode labels — no borders, very small text */
.unicode-row td {
  border: none;
  font-size: 0.45em;
  text-align: center;
  white-space: nowrap;
  padding: 0 1px;
  line-height: 1.2;
  font-family: monospace;
}

/* Second, third, fourth rows: visible borders */
.char-row td,
.practice-row td {
  border: 1px solid black;
  width: 2em;
  height: 2em;
  text-align: center;
  vertical-align: middle;
  padding: 0;
}

.char-row td {
    font-size: .8em;
}

/* Handwriting paper effect on empty practice rows */
/* 3:5:3 calligraphy proportions with 15% top/bottom padding */
/* Lines: ascender(15%), waist(34%), base(66%), descender(85%) */
.practice-row td {
  background-image:
    linear-gradient(#ccc, #ccc),
    linear-gradient(#ccc, #ccc),
    linear-gradient(#ccc, #ccc),
    linear-gradient(#ccc, #ccc);
  background-repeat: no-repeat;
  background-size: 100% 1px, 100% 1px, 100% 2px, 100% 1px;
  background-position: 0 15%, 0 34%, 0 66%, 0 85%;
}

/* Print styles */
@media print {
  textarea {
    display: none;
  }

  header {
    display: none;
  }

  .anchor {
    display: flex;
  }

  body {
    margin: 0;
  }

  .char-row td,
  .practice-row td {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}