/* Track: the instruction in the open space, the box of pearls at the bottom (it is the tap area). */

.tr-text { flex-direction: column; gap: 8px; text-align: center; }
.tr-head { margin: 0; font-size: 20px; font-weight: 300; }
.tr-sub { margin: 0; min-height: 1.45em; font-size: 13px; color: var(--stage-dim); font-variant-numeric: tabular-nums; }

/* 350 × 320 on a 390-wide phone; never taller than the bottom ~45% of the screen. */
.tr-box {
  align-self: center;
  width: min(100%, calc(44dvh * 350 / 320));
  aspect-ratio: 350 / 320;
  border-radius: 20px;
  border: 1px solid var(--stage-line);
  background: #151413;
  overflow: hidden;
}
.tr-canvas { display: block; width: 100%; height: 100%; touch-action: none; -webkit-user-select: none; user-select: none; }