.home-body { background: #fafafa; color: #111114; color-scheme: light; }
.home-body .app-header { background: #0b0b0d; color: #fafafa; }
.home-brand { text-decoration: none; color: inherit; }
.home-nav { display: flex; align-items: center; gap: 32px; margin-left: 32px; }
.home-nav a { padding: 14px 0; border-bottom: 2px solid transparent; color: #a0a5af; text-decoration: none; font-size: 16px; font-weight: 650; }
.home-nav a[aria-current=page] { color: #fafafa; border-color: #caff3a; }
#home-start { margin-left: auto; text-decoration: none; }
.home-main { padding: 0 40px 96px; }
.home-heading { display: flex; align-items: center; gap: 24px; margin: 26px 0 20px; min-height: 48px; }
.home-heading h1 { font-size: 28px; line-height: 1.3; overflow-wrap: anywhere; }
.home-heading .icon-button { color: #111114; width: 36px; height: 36px; }
.home-search { display: flex; align-items: center; gap: 10px; margin-left: auto; width: 260px; padding: 8px 0; border-bottom: 1px solid #717681; }
.home-search svg { width: 18px; height: 18px; color: #535b68; }
.home-search input { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; outline: 0; }
.home-search:focus-within { border-color: #1672fa; }
.home-tabs { display: flex; gap: 24px; min-height: 44px; margin-bottom: 20px; border-bottom: 1px solid #b7bec9; }
.home-tabs button { border: 0; border-bottom: 3px solid transparent; padding: 8px 0 12px; background: transparent; color: #535b68; font-weight: 650; }
.home-tabs button[aria-selected=true] { color: #075cda; border-color: #1672fa; }
.home-status { margin: 12px 0; font-size: 13px; color: #535b68; }
.home-status[data-error=true] { color: #bd3450; }
.home-status:empty { display: none; }
.album-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 24px; }
.album-item { min-width: 0; }
.album-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; }
.album-open .home-cover { width: 100%; aspect-ratio: 1; height: auto; }
.album-open strong { display: block; margin-top: 12px; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.album-open:hover strong, .text-link:hover { color: #075cda; }
.album-meta { margin-top: 6px; color: #535b68; font-size: 12px; overflow-wrap: anywhere; }
.home-cover { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; background: #dce0e7; color: #68717e; overflow: hidden; }
.home-cover img { width: 100%; height: 100%; object-fit: cover; }
.home-table { width: 100%; table-layout: fixed; border-collapse: collapse; text-align: left; }
.home-table th { padding: 12px 10px; border-bottom: 1px solid #8f96a2; color: #535b68; font-size: 12px; font-weight: 550; }
.home-table td { padding: 14px 10px; border-bottom: 1px solid #d3d6dc; vertical-align: middle; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.home-table th:first-child { width: 35%; }
.home-table.song-table th:first-child { width: 34%; }
.home-table.song-table th:nth-child(2) { width: 25%; }
.home-table.song-table th:last-child { width: 72px; }
.home-table.history-table th:first-child { width: 180px; }
.home-table.history-table th:nth-child(2) { width: 98px; }
.home-table.history-table th:last-child { width: 56px; }
.home-table.stats-table th:not(:first-child) { width: 10%; }
.home-song { display: flex; align-items: center; gap: 14px; min-width: 0; }
.home-song > div { min-width: 0; }
.text-link { border: 0; padding: 0; background: transparent; text-align: left; font: inherit; color: inherit; overflow-wrap: anywhere; }
.home-song .text-link { font-weight: 650; }
.credit-links { display: flex; flex-wrap: wrap; gap: 4px 12px; color: #535b68; font-size: 12px; }
.history-action { display: inline-grid; width: 32px; height: 32px; color: #075cda; border-color: #b7bec9; }
.history-action svg { width: 16px; height: 16px; }
.home-summary { display: flex; flex-wrap: wrap; gap: 32px; padding: 18px 0; margin: 0 0 24px; border-top: 1px solid #b7bec9; border-bottom: 1px solid #b7bec9; }
.home-summary div { display: flex; gap: 12px; align-items: baseline; }
.home-summary dt { color: #535b68; }
.home-summary dd { margin: 0; font-size: 24px; font-weight: 750; }
.home-detail { display: flex; gap: 24px; align-items: center; margin: 0 0 24px; }
.home-detail .home-cover { width: 96px; height: 96px; }
.home-detail h2 { font-size: 24px; margin: 0 0 8px; overflow-wrap: anywhere; }
.home-detail p { margin-top: 8px; color: #535b68; }
.home-pagination { display: flex; align-items: center; justify-content: end; gap: 18px; margin-top: 24px; color: #535b68; font-size: 13px; }
.home-pagination .icon-button { color: #111114; width: 36px; height: 36px; }
.stats-mode { margin: 0 0 20px; max-width: 260px; }
.stats-mode span { color: #111114; }
.round-wrong { margin-top: 4px; font-size: 12px; color: #bd3450; }
.outcome-correct { color: #075cda; }
.outcome-incorrect { color: #bd3450; }
.history-player { position: fixed; z-index: 2; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 28px; min-height: 80px; padding: 12px 40px; border-top: 1px solid #717681; background: #0b0b0d; color: #fafafa; }
.history-player > div { flex: 1; min-width: 0; }
.history-player strong, .history-player span { display: block; overflow-wrap: anywhere; }
.history-player span { color: #a0a5af; font-size: 12px; }
.history-player audio { width: 360px; height: 44px; }
.history-player .icon-button { width: 36px; height: 36px; }
@media (max-width: 1100px) {
  .home-main { padding: 0 28px 96px; }
  .home-nav { gap: 20px; margin-left: 0; }
  .album-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}