:root{color-scheme:dark;font-family:"Microsoft YaHei",system-ui,sans-serif;background:#0b1320;color:#e9eff9}*{box-sizing:border-box}body{margin:0}main{max-width:1120px;margin:auto;padding:32px 24px 60px}h1{font-size:30px;line-height:1.4;margin:0 0 16px}h2{font-size:22px;margin:0 0 12px}h3{font-size:20px;margin:0 0 12px}p{line-height:1.85;margin:10px 0}.muted{color:#b7c4d8;font-size:14px}a{color:#86d5e8}.notice{border-left:3px solid #71c1dd;padding:8px 16px;background:#142235;border-radius:4px}.track{margin:28px 0;padding:24px;background:#132033;border:1px solid #2a3d57;border-radius:16px}audio{width:100%;margin:6px 0 12px}.legend{display:flex;gap:24px;font-size:13px;color:#bccbdf;flex-wrap:wrap}.legend span:before{content:"";display:inline-block;width:14px;height:4px;margin:0 8px 3px 0;background:#f6c778}.legend span+span:before{background:#81cbe4}canvas{display:block;width:100%;height:245px;cursor:crosshair;margin-top:10px}.chapters{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}button{font-family:inherit;border:1px solid #3d5471;background:#192d45;color:#dbe8f7;cursor:pointer;border-radius:8px;padding:8px 12px;line-height:1.6}button:hover,button:focus-visible{border-color:#8ed3e4;background:#23445e}button.active{background:#294b63;border-color:#8ed3e4;color:white}.chapters button{font-size:12px}.details{margin-top:20px;border-top:1px solid #30445e;padding-top:20px}.range{font-size:13px;color:#a4d5e4}.label{font-weight:700;color:#f4cf8a;margin-right:8px}.detail p{margin:12px 0}.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px}.compare article{padding:20px;background:#142235;border-radius:12px}.compare button{font-size:12px}table{border-collapse:collapse;width:100%;margin-top:20px}th,td{text-align:left;border-bottom:1px solid #30445e;padding:10px;font-size:14px}th{color:#f2ce8b}.links{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px}@media(max-width:650px){main{padding:20px 14px}h1{font-size:25px}.track{padding:16px}.compare{grid-template-columns:1fr}.chapters button{padding:6px 9px}.legend{gap:12px}}@media print{body{background:white;color:black}.track,.compare article{background:white;color:black;border-color:#ccc}button,audio,canvas,.links{display:none}.muted,.range{color:#444}.detail p{display:block}main{max-width:none;padding:0}}

/* Preserve the reference appearance while keeping narrow screens usable. */
.compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.track, .compare article { min-width: 0; }
.table-scroll { width: 100%; overflow-x: auto; }
.table-scroll table { min-width: 420px; }
canvas { touch-action: pan-y; }
canvas:focus-visible { outline: 2px solid #8ed3e4; outline-offset: 4px; }
.media-error[hidden] { display: none; }
.site-header { max-width: 1120px; margin: auto; padding: 22px 24px; }
.site-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #2a3d57; }
.brand { color: #f1c47d; font-size: 24px; font-weight: 700; text-decoration: none; }
.brand span { color: #e9eff9; font-size: 16px; margin-left: 9px; }
.header-note { color: #b7c4d8; font-size: 13px; }
main { min-height: calc(100vh - 76px); }
a:focus-visible { outline: 2px solid #8ed3e4; outline-offset: 4px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 28px; font-size: 13px; color: #b7c4d8; }
.breadcrumb a { text-decoration: none; }
.breadcrumb .separator { color: #58718e; }
.breadcrumb [aria-current] { color: #e9eff9; }
.page-heading { margin-bottom: 26px; }
.page-heading h1 { margin-bottom: 8px; }
.page-heading p { margin-top: 0; max-width: 760px; }
.home-heading { padding: 32px 0 18px; }
.home-heading h1 { font-size: clamp(32px, 5vw, 48px); }
.entry { display: grid; grid-template-columns: 1fr 180px; gap: 30px; align-items: center; padding: 38px; margin: 18px 0 40px; border: 1px solid #3d5471; border-radius: 16px; background: #132033; text-decoration: none; color: #e9eff9; }
.entry:hover { border-color: #8ed3e4; }
.entry h2 { font-size: clamp(30px, 5vw, 46px); margin-bottom: 6px; }
.entry-action { display: inline-block; margin-top: 24px; color: #86d5e8; border-bottom: 1px solid #86d5e8; padding-bottom: 3px; }
.four-keys { display: flex; gap: 9px; height: 140px; padding: 8px; border-bottom: 4px solid #f1c47d; }
.four-keys i { flex: 1; border: 1px solid #3d5471; background: #192d45; position: relative; }
.four-keys i::after { content: ""; position: absolute; inset: auto 0 26px; height: 7px; background: #f1c47d; }
.four-keys i:nth-child(2)::after { bottom: 66px; background: #7fc8df; }
.four-keys i:nth-child(3)::after { bottom: 96px; }
.four-keys i:nth-child(4)::after { bottom: 46px; background: #7fc8df; }
.course-group { margin-top: 32px; }
.group-heading { display: flex; gap: 14px; align-items: baseline; margin-bottom: 14px; }
.group-heading h2 { margin: 0; }
.course-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.course-link { display: flex; align-items: center; min-height: 95px; border: 1px solid #2a3d57; background: #132033; padding: 20px 16px; border-radius: 8px; color: #e9eff9; text-decoration: none; }
.course-link:hover { border-color: #8ed3e4; }
.course-link.has-songs { border-color: #637068; }
.course-link strong { display: block; font-size: 22px; font-weight: 600; }
.song-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; overflow-x: auto; padding: 4px 3px 8px; }
.song-slot { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 164px; border: 1px solid #2a3d57; background: #132033; border-radius: 10px; padding: 18px; color: #e9eff9; text-decoration: none; text-align: center; font-size: clamp(24px, 3vw, 34px); font-weight: 600; }
.slot-label { line-height: 1.2; white-space: nowrap; }
.song-slot.empty { background: transparent; border-style: dashed; }
.song-slot.empty .slot-label { color: #b7c4d8; }
.song-slot.filled { border-color: #566a7e; }
.song-slot.filled:hover, .song-slot[aria-current] { border-color: #8ed3e4; background: #192d45; }
.song-overview { padding: 20px 24px; background: #142235; border-radius: 10px; }
.song-overview h2 { font-size: 21px; }
.song-overview p { max-width: 880px; }
.reading-list { margin-top: 12px; }
.reading { padding: 23px 0; border-bottom: 1px solid #30445e; }
.reading h3 { font-size: 19px; margin-bottom: 6px; }
.reading p { max-width: 880px; }
.reading button { font-size: 12px; }
.content-section { margin-top: 38px; }
.stats-table th { width: 48%; font-weight: 500; }
.stats-table td { color: #e9eff9; }
.source-link { font-size: 13px; }
.song-title { overflow-wrap: anywhere; }
@media (max-width: 650px) {
  .compare { grid-template-columns: minmax(0, 1fr); }
  .site-header { padding: 18px 14px; }
  .header-note { display: none; }
  .breadcrumb { margin-bottom: 22px; }
  .home-heading { padding-top: 20px; }
  .entry { padding: 25px 22px; grid-template-columns: 1fr; gap: 22px; }
  .four-keys { height: 96px; max-width: 165px; }
  .four-keys i:nth-child(2)::after { bottom: 46px; }
  .four-keys i:nth-child(3)::after { bottom: 66px; }
  .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .course-link { padding: 17px 15px; }
  .course-link strong { font-size: 20px; }
  .song-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .song-slot { min-height: 112px; padding: 8px; font-size: clamp(13px, 4vw, 18px); }
  .song-overview { padding: 18px; }
  .song-overview h2 { font-size: 19px; }
}