:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  background: #fff;
  color: #20252b;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; }
.page {
  width: min(100% - 36px, 1050px);
  margin: 38px auto 72px;
}
h1 { font-size: 32px; line-height: 1.25; font-weight: 700; margin: 0 0 22px; }
.search-container { margin: 0 0 22px; }
#song-search {
  width: 100%;
  display: block;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  color: #21252b;
  border: 1px solid #cbd3dc;
  border-radius: 5px;
  background: #fff;
  outline-offset: 2px;
}
#song-search::placeholder { color: #747e87; opacity: 1; }
#song-search:focus { border-color: #3977b8; outline: 2px solid #a5cbe9; }
.table-scroller { max-width: 100%; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 15px; }
th, td { padding: 12px 13px; border: 1px solid #e0e4e8; vertical-align: middle; }
thead th { background: #f1f3f5; color: #23262b; font-weight: 700; white-space: nowrap; }
tbody tr:nth-child(even) { background-color: #f8f9fa; }
tbody tr:hover { background: #eef4f9; }
th.song-number, td.song-number { width: 140px; white-space: nowrap; }
.sort { appearance: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; background: transparent; text-align: left; }
.sort:hover { text-decoration: underline; }
.sort:focus-visible { outline: 2px solid #3977b8; outline-offset: 4px; border-radius: 2px; }
.sort-indicator { font-size: 10px; margin-left: 5px; color: #6a7784; }
#empty-state { text-align: center; color: #5a6470; padding: 24px 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
@media (max-width: 650px) {
  .page { width: calc(100% - 20px); margin: 22px auto 46px; }
  h1 { font-size: 26px; margin-bottom: 18px; }
  .search-container { margin-bottom: 16px; }
  #song-search { font-size: 16px; padding: 13px 11px; }
  table { font-size: 13px; }
  th, td { padding: 11px 8px; }
  th.song-number, td.song-number { width: 76px; white-space: normal; }
  thead th { white-space: normal; }
  .sort-indicator { margin-left: 3px; }
}