/* Tracing sheets: school-style fonts where the device has them */
.tr-sheet, .tr-preview { --trace-font: "UD Digi Kyokasho N-R", "UD デジタル 教科書体 N-R", "YuKyokasho", "Klee", "BiauKai", "DFKai-SB", "標楷體", "Kaiti TC", "Nanum Myeongjo", "Hiragino Mincho ProN", serif; }
.tr-preview { display: grid; gap: .375rem; margin: .375rem 0 .75rem; }
.tr-row { display: grid; grid-template-columns: repeat(var(--cols, 5), auto); justify-content: start; }
.tr-preview .tr-row { grid-template-columns: repeat(5, 3.375rem); }
.tr-cell { position: relative; width: 3.375rem; height: 3.375rem; border: 1.5px solid #7F9AC2; margin: 0 -1.5px -1.5px 0; display: grid; place-items: center; font: 400 2.5rem/1 var(--trace-font); color: #263049; background:
  linear-gradient(#C9D6EA, #C9D6EA) center / 100% 1px no-repeat, linear-gradient(90deg, #C9D6EA, #C9D6EA) center / 1px 100% no-repeat; }
.tr-cell.trace { color: #C2CAD6; }
.tr-cell.model { background-color: #FFFDF3; }
@media print {
  .tr-sheet { display: grid; gap: 3mm; align-content: start; --cell: min(24mm, calc((var(--pw) - 30mm) / var(--cols)), calc((var(--ph) - 86mm) / 7 - 3mm)); }
  .tr-sheet .tr-row { grid-template-columns: repeat(var(--cols), var(--cell)); }
  .tr-sheet .tr-cell { width: auto; height: var(--cell); font-size: calc(var(--cell) * .78); border: .35mm solid #7F9AC2; margin: 0 -.35mm 0 0;
    background: linear-gradient(#B9C9E2, #B9C9E2) center / 100% .2mm no-repeat, linear-gradient(90deg, #B9C9E2, #B9C9E2) center / .2mm 100% no-repeat; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tr-sheet .tr-cell.trace { color: #BFC7D3; }
}
/* Kana from KanjiVG strokes: ink model with stroke numbers, grey copies to trace */
.tr-glyph { width: 88%; height: 88%; display: block; }
.tr-glyph path { fill: none; stroke: #C2CAD6; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.tr-glyph.model path { stroke: #263049; }
.tr-glyph text { font: 700 .6875rem/1 var(--f-m); fill: #2E6FD8; }
@media print {
  .tr-sheet .tr-glyph path { stroke: #BFC7D3; }
  .tr-sheet .tr-glyph.model path { stroke: #1D2433; }
  .tr-sheet .tr-glyph text { fill: #2E6FD8; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}