/* Print-first styling. The screen view mimics a sheet of US Letter paper. */

:root {
  --ink: #1a1a1a;
  --ink-soft: #555;
  --rule: #c9c6bf;
  --rule-soft: #e4e1da;
  --paper: #fff;
  --desk: #e9e6df;
  --accent: #1a1a1a;

  /* Invocation kinds: each has a color and a non-color cue for B&W prints. */
  --hold: #1d4ed8;
  --hold-bg: #dbe7ff;
  --double: #a64b00;
  --double-bg: #ffecc9;
  --chord: #6d28d9;
  --chord-bg: #efe8ff;
  --move: #1f7a45;
  --move-bg: #dcf1e3;

  /* Diagram keys */
  --bound-bg: #f1ede3;
  --bound-hover: #e2dccb;
  --key-idle: #cfccc5;
  --key-idle-ink: #a09c94;

  /* Controller face buttons, dark enough to read on paper. */
  --face-a: #1e7b1e;
  --face-b: #c4262e;
  --face-x: #1b5fb4;
  --face-y: #9a7400;
  --face-cross: #3a63c9;
  --face-circle: #c9303a;
  --face-square: #b8428a;
  --face-triangle: #16806a;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { font-size: 15px; }

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.35;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 8.5in;
  margin: 1.5rem auto;
  padding: 0.6in 0.5in;
  background: var(--paper);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12), 0 8px 24px rgb(0 0 0 / 0.08);
}

a { color: inherit; }

h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.15; }

.subtitle { margin: 0.15rem 0 0; color: var(--ink-soft); font-style: italic; }

/* ---------- Toolbar (screen only) ---------- */

/* Sits on the desk above the paper: it never prints. */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  max-width: 8.5in;
  margin: 1rem auto -0.5rem;
  font-size: 0.9rem;
}
.toolbar-end { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.toolbar a { text-decoration: none; color: var(--ink-soft); }
.toolbar a:hover { color: var(--ink); }
.toolbar button {
  font: inherit;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--ink);
  border-radius: 0.3rem;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.toolbar button:hover { background: var(--ink); color: var(--paper); }
.toolbar button.ghost, .customize button.ghost { border-color: var(--rule); }
.toolbar button[aria-expanded="true"] { background: var(--ink); color: var(--paper); }

/* Segmented on / off buttons for keyboard & mouse and controller. */
.device-toggle { display: flex; }
.device-toggle button { border-radius: 0; margin-left: -1px; color: var(--ink-soft); }
.device-toggle button:first-child { border-radius: 0.3rem 0 0 0.3rem; margin-left: 0; }
.device-toggle button:last-child { border-radius: 0 0.3rem 0.3rem 0; }
.device-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.device-toggle button[aria-pressed="true"]::before { content: "✓ "; }
.device-toggle button:disabled { cursor: default; }

/* ---------- Customize panel (screen only) ---------- */

.customize {
  max-width: 8.5in;
  margin: 1rem auto 0;
  padding: 0.9rem 1rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0.4rem;
  font-size: 0.88rem;
}
.customize[hidden] { display: none; }
.cz-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.2rem; margin-bottom: 0.8rem; }
.cz-head p { margin: 0; color: var(--ink-soft); flex: 1 1 16rem; }
.cz-head button {
  font: inherit;
  padding: 0.25rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 0.3rem;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.cz-style { display: flex; gap: 0.8rem; align-items: center; }
.cz-label { color: var(--ink-soft); }
.cz-sections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.8rem;
}
.cz-section {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  padding: 0.4rem 0.6rem 0.6rem;
  border: 1px solid var(--rule-soft);
  border-radius: 0.3rem;
}
.cz-section legend { padding: 0 0.3rem; font-weight: 700; }
.cz-check { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.cz-check input { margin: 0; accent-color: var(--ink); }
.cz-section > .cz-check { padding-left: 0.2rem; }
.empty { color: var(--ink-soft); font-style: italic; }

/* ---------- Game header ---------- */

.game-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1rem 1.5rem;
  align-items: end;
  padding-bottom: 0.6rem;
  border-bottom: 3px solid var(--ink);
  margin-bottom: 1rem;
}
.game-header h1 { font-size: 2.2rem; letter-spacing: -0.01em; grid-column: 1; }
.game-header .subtitle, .game-header .meta { grid-column: 1; }
.game-header .meta { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--ink-soft); }
.game-header .legend { grid-column: 2; grid-row: 1 / span 3; }

.legend {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0.25rem 0.9rem;
  margin: 0;
  font-size: 0.8rem;
}
.legend > div { display: flex; align-items: center; gap: 0.4rem; }
.legend dt { font-size: 1rem; }
.legend dd { margin: 0; color: var(--ink-soft); }

/* ---------- Sections ---------- */

.section { margin-top: 1.4rem; }
.section:first-of-type { margin-top: 0; }
.section-header { margin-bottom: 0.6rem; }
.level-2 > .section-lead > .section-header h2 {
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--ink);
}
.level-3 > .section-lead > .section-header h3 { font-size: 1.15rem; }

.section > * + * { margin-top: 0.9rem; }
.section-lead { break-inside: avoid; }

.row {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 0.9rem 1.2rem;
  align-items: start;
}

.note {
  margin: 0;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--rule);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- Tables ---------- */

figure { margin: 0; }
.kb-table { break-inside: avoid; }
.kb-table figcaption { margin-bottom: 0.3rem; }
.kb-table .table-title {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kb-table .subtitle { font-size: 0.8rem; }

.kb-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.kb-table thead th {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-align: left;
  padding: 0 0.4rem 0.2rem 0;
  border-bottom: 1.5px solid var(--ink);
}
.kb-table tbody th,
.kb-table tbody td {
  padding: 0.28rem 0.4rem 0.28rem 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
  text-align: left;
}
.kb-table tbody tr:last-child > * { border-bottom-color: var(--rule); }
.kb-table .action { font-weight: 500; }
.kb-table .bind { line-height: 1.9; }
.kb-table .notes { font-size: 0.78rem; color: var(--ink-soft); }
.kb-table.cols-2 .action { width: 55%; }
.kb-table.cols-3 .action { width: 34%; }
.kb-table.cols-4 .action { width: 30%; }
.kb-table .none { color: var(--rule); }
.kb-table tr.group th {
  padding-top: 0.5rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* ---------- Keycaps and bind notation ---------- */

.key {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  min-width: 1.9em;
  justify-content: center;
  padding: 0.05em 0.45em;
  font: 600 0.82em/1.35 var(--font);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-bottom-width: 2px;
  border-radius: 0.3em;
  white-space: nowrap;
}
.key.mouse { border-radius: 0.9em; }

/* Controller buttons: face buttons are round and coloured, the rest pills. */
.key.pad { border-radius: 0.9em; }
.key.pad-face {
  min-width: 1.75em;
  padding: 0.05em 0.3em;
  border-radius: 999px;
}
.key.pad-face .glyph { font-weight: 800; }
.key.pad-trigger { border-radius: 0.8em 0.8em 0.3em 0.3em; }
.key.pad-bumper { border-radius: 0.3em 0.3em 0.6em 0.6em; }
.face-a { color: var(--face-a); fill: var(--face-a); }
.face-b { color: var(--face-b); fill: var(--face-b); }
.face-x { color: var(--face-x); fill: var(--face-x); }
.face-y { color: var(--face-y); fill: var(--face-y); }
.face-cross { color: var(--face-cross); fill: var(--face-cross); }
.face-circle { color: var(--face-circle); fill: var(--face-circle); }
.face-square { color: var(--face-square); fill: var(--face-square); }
.face-triangle { color: var(--face-triangle); fill: var(--face-triangle); }

/* Hold: thick solid border + HOLD tag. */
.key.hold {
  background: var(--hold-bg);
  border: 2px solid var(--hold);
  border-bottom-width: 3px;
}
.key.hold .tag { color: var(--hold); }

/* Double-tap: double border + ×2 tag. */
.key.double {
  background: var(--double-bg);
  border: 3px double var(--double);
}
.key.double .tag { color: var(--double); }

.key .tag {
  font-size: 0.72em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Chord: dashed enclosure around the keys pressed together. */
.chord {
  display: inline-flex;
  align-items: center;
  gap: 0.1em;
  padding: 0.05em 0.25em;
  background: var(--chord-bg);
  border: 1.5px dashed var(--chord);
  border-radius: 0.45em;
  white-space: nowrap;
}
.chord > .key.press { border-color: var(--chord); }
.op-chord { color: var(--chord); font-weight: 800; }

.op { margin: 0 0.2em; color: var(--ink-soft); font-weight: 700; font-size: 0.85em; }
.op-alt { font-weight: 400; font-style: italic; margin: 0 0.35em; }
.op-pair { font-weight: 400; }

.unbound { color: var(--ink-soft); font-style: italic; font-size: 0.85em; }
.bind-error { color: #b00020; font-family: ui-monospace, monospace; border-bottom: 1px dotted; }
.block-error { color: #b00020; border: 1px dashed; padding: 0.5rem; }

/* ---------- Keyboard diagrams ---------- */

.diagram { position: relative; break-inside: avoid; }
.diagram-caption {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: 0.4rem;
}
.diagram-scroll { overflow-x: auto; }
.kb-svg { display: block; width: 100%; height: auto; margin: 0 auto; font-family: var(--font); }

.kcap rect { fill: var(--paper); stroke: var(--key-idle); stroke-width: 1; }
.kcap .kcap-legend { fill: var(--key-idle-ink); font-weight: 600; }
.kcap.bound rect { fill: var(--bound-bg); stroke: var(--ink); stroke-width: 1.5; }
.kcap.bound .kcap-legend { fill: var(--ink); font-weight: 700; }
.kcap-label { fill: var(--ink); font-weight: 500; }
.kcap.move rect { fill: var(--move-bg); stroke: var(--move); }
.wasd-svg .kcap.move .kcap-legend { stroke: var(--move-bg); }
.kicon {
  fill: none;
  stroke: var(--move);
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.kcap-more { fill: var(--ink-soft); font-weight: 700; }
.wasd-svg .kcap-legend { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.wasd-svg .kcap.bound .kcap-legend { stroke: var(--bound-bg); }
.kcap[tabindex] { cursor: pointer; outline: none; }
.kcap[tabindex]:hover rect,
.kcap[tabindex]:focus-visible rect,
.kcap.active rect { fill: var(--bound-hover); stroke-width: 2.5; }

.pip circle { stroke: none; }
.pip text { fill: #fff; font-size: 8px; font-weight: 800; }
.pip.hold circle { fill: var(--hold); }
.pip.double circle { fill: var(--double); }
.pip.chord circle, .pip.seq circle { fill: var(--chord); }

.pip-legend {
  display: flex;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.pip-legend li { display: flex; align-items: center; gap: 0.3rem; }
.pip-legend .pip {
  display: inline-grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
}
.pip-legend .move-swatch {
  display: inline-grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 0.25rem;
  background: var(--move-bg);
  border: 1px solid var(--move);
  color: var(--move);
  font-size: 0.7rem;
  font-weight: 800;
}
.pip-legend .more-swatch { color: var(--ink-soft); font-weight: 700; font-size: 0.7rem; }
.pip-legend .pip.hold { background: var(--hold); }
.pip-legend .pip.double { background: var(--double); }
.pip-legend .pip.chord, .pip-legend .pip.seq { background: var(--chord); }

.leaders path { fill: none; stroke: var(--ink-soft); stroke-width: 1; }
.leaders path.halo { stroke: var(--paper); stroke-width: 3.5; }
.leader-dots circle { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; }
.callouts text { fill: var(--ink); font-weight: 500; }
.kface { fill: var(--ink); font-weight: 500; }
/* Labels and leaders sit above the keys; let the pointer reach the keys. */
.wasd-svg .kcap-faces, .wasd-svg .leaders, .wasd-svg .leader-dots, .wasd-svg .callouts { pointer-events: none; }
.co-tag { font-size: 0.78em; font-weight: 800; letter-spacing: 0.03em; }
.co-tag.hold { fill: var(--hold); }
.co-tag.double { fill: var(--double); }
.co-tag.chord, .co-tag.seq { fill: var(--chord); }

/* ---------- Controller diagram ---------- */

.pad-body { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.pad-dpad-base { fill: var(--rule-soft); stroke: none; }
.pbtn > rect, .pbtn > circle, .pbtn > path { fill: var(--paper); stroke: var(--key-idle); stroke-width: 1.2; }
.pbtn.bound > rect, .pbtn.bound > circle, .pbtn.bound > path { fill: var(--bound-bg); stroke: var(--ink); stroke-width: 1.5; }
.pbtn > .pband-edge, .pbtn > .pband-face { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pbtn > .pband-edge { stroke: var(--key-idle); }
.pbtn > .pband-face { stroke: var(--paper); }
.pbtn.bound > .pband-edge { stroke: var(--ink); }
.pbtn.bound > .pband-face { stroke: var(--bound-bg); }
.pbtn[tabindex]:hover > .pband-face,
.pbtn[tabindex]:focus-visible > .pband-face,
.pbtn.active > .pband-face { stroke: var(--bound-hover); }
.pbtn-stick > .pbtn-cap { fill: none; stroke-dasharray: 2 2; }
.pbtn-click > circle { fill: var(--paper); }
.pbtn.pbtn-click.bound > circle { fill: var(--ink); }
.pbtn-click.bound .pbtn-label { fill: var(--paper); }
.pbtn-label { font-size: 9px; font-weight: 700; fill: var(--key-idle-ink); }
.pbtn-label.small { font-size: 8px; }
.pbtn-label.tiny { font-size: 6px; }
.pbtn.bound .pbtn-label { fill: var(--ink); }
.pbtn .pbtn-arrow { fill: var(--key-idle-ink); stroke: none; }
.pbtn.bound .pbtn-arrow { fill: var(--ink); }
.pbtn-face .pbtn-glyph { font-size: 11px; font-weight: 800; fill: inherit; opacity: 0.45; }
.pbtn-face.bound .pbtn-glyph { opacity: 1; }
.pad-ps .pbtn-face .pbtn-glyph { font-size: 12px; }
.pbtn[tabindex] { cursor: pointer; outline: none; }
.pbtn[tabindex]:hover > :first-child,
.pbtn[tabindex]:focus-visible > :first-child,
.pbtn.active > :first-child { fill: var(--bound-hover); stroke-width: 2.5; }
.co-btn { font-weight: 800; }
.pad-svg .leaders, .pad-svg .leader-dots, .pad-svg .callouts { pointer-events: none; }

.key-card {
  position: absolute;
  z-index: 10;
  min-width: 12rem;
  max-width: 20rem;
  padding: 0.5rem 0.65rem;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0.4rem;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.15);
  font-size: 0.85rem;
}
.key-card[hidden] { display: none; }
.key-card-title { font-weight: 800; margin-bottom: 0.3rem; }
.key-card ul { margin: 0; padding: 0; list-style: none; }
.key-card li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 0.5rem;
  align-items: center;
  padding: 0.2rem 0;
  border-top: 1px solid var(--rule-soft);
}
.key-card .kc-where { grid-column: 2; font-size: 0.72rem; color: var(--ink-soft); }

/* ---------- Home page ---------- */

.game-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.game-list li { border-bottom: 1px solid var(--rule-soft); }
.game-list a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  text-decoration: none;
}
.game-list a:hover .game-name { text-decoration: underline; }
.game-name { font-weight: 700; font-size: 1.1rem; }
.game-list .subtitle { margin: 0; }

/* ---------- Small screens ---------- */

/* :not(.paper) keeps these out of the print simulation (see js/pages.js). */
@media (max-width: 700px) {
  html:not(.paper) { font-size: 15px; }
  html:not(.paper) main { margin: 0; padding: 16px; box-shadow: none; }
  html:not(.paper) .toolbar { margin: 0; padding: 12px 16px 4px; }
  html:not(.paper) .game-header { grid-template-columns: 1fr; }
  html:not(.paper) .game-header .legend { grid-column: 1; grid-row: auto; margin-top: 0.6rem; }
  html:not(.paper) .row { grid-template-columns: minmax(0, 1fr); }
  html:not(.paper) .kb-table.cols-3 .notes { font-size: 0.75rem; }
  html:not(.paper) .diagram-caption { flex-direction: column; align-items: start; gap: 0.3rem; }
  html:not(.paper) .kb-svg { min-width: 600px; }
  html:not(.paper) .pad-svg { min-width: 520px; }
  html:not(.paper) .customize { margin: 8px 16px 0; }
}

/* ---------- Page break markers (screen only) ---------- */

/* A gap in the paper, showing the desk behind, like two sheets laid end to end. */
.page-marker {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 18px;
  margin: 0.5in -0.5in;
  padding: 0 0.6rem;
  background: var(--desk);
  box-shadow: inset 0 5px 5px -5px rgb(0 0 0 / 0.18), inset 0 -5px 5px -5px rgb(0 0 0 / 0.18);
  color: var(--ink-soft);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.page-count { color: var(--ink-soft); margin-left: auto; margin-right: 1rem; }
/* Page 1's label sits on the desk just above the sheet, not in a gap. */
.page-marker.first {
  max-width: 8.5in;
  margin: 1rem auto -1.5rem;
  background: none;
  box-shadow: none;
}
@media (max-width: 700px) {
  html:not(.paper) .page-marker { margin: 24px -16px; }
  html:not(.paper) .page-marker.first { margin: 0; }
}

/* ---------- Print ---------- */

/* Page size and margin are mirrored in js/pages.js for the on-screen page breaks. */
@page { size: letter portrait; margin: 0.45in; }

@media print {
  html { font-size: 8.6pt; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: none; }
  main { max-width: none; margin: 0; padding: 0; box-shadow: none; }
  .screen-only { display: none !important; }
  .page-break { break-before: page; margin-top: 0; }
  /* ---------- Controller diagram ---------- */

.pad-body { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.pad-dpad-base { fill: var(--rule-soft); stroke: none; }
.pbtn > rect, .pbtn > circle, .pbtn > path { fill: var(--paper); stroke: var(--key-idle); stroke-width: 1.2; }
.pbtn.bound > rect, .pbtn.bound > circle, .pbtn.bound > path { fill: var(--bound-bg); stroke: var(--ink); stroke-width: 1.5; }
.pbtn > .pband-edge, .pbtn > .pband-face { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pbtn > .pband-edge { stroke: var(--key-idle); }
.pbtn > .pband-face { stroke: var(--paper); }
.pbtn.bound > .pband-edge { stroke: var(--ink); }
.pbtn.bound > .pband-face { stroke: var(--bound-bg); }
.pbtn[tabindex]:hover > .pband-face,
.pbtn[tabindex]:focus-visible > .pband-face,
.pbtn.active > .pband-face { stroke: var(--bound-hover); }
.pbtn-stick > .pbtn-cap { fill: none; stroke-dasharray: 2 2; }
.pbtn-click > circle { fill: var(--paper); }
.pbtn.pbtn-click.bound > circle { fill: var(--ink); }
.pbtn-click.bound .pbtn-label { fill: var(--paper); }
.pbtn-label { font-size: 9px; font-weight: 700; fill: var(--key-idle-ink); }
.pbtn-label.small { font-size: 8px; }
.pbtn-label.tiny { font-size: 6px; }
.pbtn.bound .pbtn-label { fill: var(--ink); }
.pbtn .pbtn-arrow { fill: var(--key-idle-ink); stroke: none; }
.pbtn.bound .pbtn-arrow { fill: var(--ink); }
.pbtn-face .pbtn-glyph { font-size: 11px; font-weight: 800; fill: inherit; opacity: 0.45; }
.pbtn-face.bound .pbtn-glyph { opacity: 1; }
.pad-ps .pbtn-face .pbtn-glyph { font-size: 12px; }
.pbtn[tabindex] { cursor: pointer; outline: none; }
.pbtn[tabindex]:hover > :first-child,
.pbtn[tabindex]:focus-visible > :first-child,
.pbtn.active > :first-child { fill: var(--bound-hover); stroke-width: 2.5; }
.co-btn { font-weight: 800; }
.pad-svg .leaders, .pad-svg .leader-dots, .pad-svg .callouts { pointer-events: none; }

.key-card { display: none; }
  .keyboard-diagram .kb-svg { width: 88%; margin: 0 auto; }
  /* Denser tables on paper. */
  .kb-table tbody th, .kb-table tbody td { padding-top: 0.14rem; padding-bottom: 0.14rem; }
  .kb-table .bind { line-height: 1.6; }
  .diagram-scroll { overflow: visible; }
  .meta a { text-decoration: none; }
}