+my @wrapstyle = (
+ 'td { white-space: normal; word-spacing: 10em }', # force line break between words
+ '.sample { word-spacing: 0 }',
+ '.sample span { margin-right: 1ex; white-space: nowrap; display: inline-block }', # larger space between letters
+);
+my $spacestyle = '.sample span { margin-right: 0.5ex }'; # separate multiple letters
+my @tapstyle = (
+ @wrapstyle,
+ '{ line-height: 1ex }',
+ 'td:not(.sample) { vertical-align: top }',
+ '.sample { font-size: 80% }',
+);
+
+my @hueorder = (
+ 2,11,20,19,18,21,24,15,6,7,8,5,13, # red .. magenta, grey
+ 1,10,9,12,3,4,0, 14,23,22,25,16,17,26, # dark, light hues
+);
+
+# Order to put similar sounds close to each other:
+# ┌ R Y G C B M X
+# ┌┼──────────────
+# W│ o e y h s f -
+# │muaixqgkdtbp l
+# K│ w n j c z v r
+
+my @hueletters = ((26) x 27);
+@hueletters[map { ord($_) - ord('a') } qw(
+ u a i x q g k d t b p m l w n j c z v r o e y h s f
+)] = @hueorder;
+