+/* terse optimisation */
+
+@media (max-width: 79em) {
+ .keys td {
+ position: relative; /* hides overflow */
+ width: 4.5em;
+ }
+ .keys td b,
+ .keys.meta td b,
+ .keys.ctrl td b,
+ .keys.lead td b { /* leading chars always fit */
+ position: absolute; /* background */
+ right: 0; /* least overlap in corner */
+ font-size: 250%;
+ line-height: 2.5ex;
+ opacity: .5;
+ color: #FFF;
+ }
+ table.keys {
+ width: 62.1em; /* 82.5em - 12 * Δtd(6.2em - 4.5em) */
+ }
+ @media (max-width: 61em) {
+ .keys td {
+ width: 3em;
+ height: 6.75ex; /* 3 lines */
+ font-size: 80%;
+ }
+ table.keys {
+ width: 37em; /* (12 * td(3em + 6px) + 8em) * 80% */
+ }
+ }
+}
+
+/*
+@media screen and (orientation: portrait) and (max-width: 62em) {
+ body table.keys,
+ #rows {
+ margin-top: 1ex;
+ transform: rotate(90deg);
+ transform-origin: top left;
+ width: 68em;
+ height: 37em;
+ margin-left: 40em;
+ margin-bottom: 30em;
+ font-size: 80%;
+ }
+}
+*/