body {font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; margin:0; background:linear-gradient(135deg,#f7fafc 0%,#e3f6ff 100%); color:#222; letter-spacing:0.02em;}
.container {max-width: 900px; margin: 0 auto; padding: 0 16px;}
.site-header {background: rgba(255,255,255,0.95); box-shadow: 0 4px 24px #e0f7fa; border-bottom: 1.5px solid #e0f7fa; position:sticky; top:0; z-index:10;}
.site-header .container {display: flex; align-items: center; justify-content: space-between; height: 64px;}
.logo {font-size: 2em; color: #1abc9c; text-shadow: 0 2px 8px #b2f2dd; text-decoration: none; font-weight: 900; letter-spacing:0.08em;}
nav a {margin-left: 28px; color: #555; text-decoration: none; transition: color .2s, border-bottom .2s; font-size:1.08em; padding-bottom:2px; border-bottom:2px solid transparent;}
nav a:hover {color: #1abc9c; border-bottom:2px solid #1abc9c;}
.site-main {padding: 40px 0 32px 0;}
.intro {text-align: center; margin-bottom: 36px;}
.intro h1 {font-size: 2.5em; color: #1abc9c; margin-bottom: 10px; font-weight:800; letter-spacing:0.06em;}
.intro p {font-size:1.15em; color:#555;}
.recommend {margin-bottom: 36px;}
.song-list {display: flex; flex-wrap: wrap; gap: 22px; list-style: none; padding: 0;}
.song-list li {background: linear-gradient(120deg,#fff 80%,#e0f7fa 100%); border-radius: 16px; box-shadow: 0 4px 24px #e0f7fa; flex: 1 1 200px; min-width: 200px; max-width: 260px; transition: transform .22s, box-shadow .22s; border:1.5px solid #e0f7fa; position:relative; overflow:hidden;}
.song-list li:hover {transform: translateY(-8px) scale(1.04); box-shadow: 0 8px 32px #b2f2dd;}
.song-list a {display: flex; flex-direction: column; padding: 22px 18px; color: #222; text-decoration: none;}
.song-title {font-weight: bold; font-size: 1.18em; margin-bottom: 8px; letter-spacing:0.04em;}
.song-artist {font-size: 1em; color: #1abc9c;}
.site-footer {background: rgba(255,255,255,0.97); color: #888; text-align: center; padding: 22px 0; font-size: 1em; margin-top: 40px; box-shadow: 0 -2px 16px #e0f7fa; border-top:1.5px solid #e0f7fa;}
.button {display:inline-block; background:linear-gradient(90deg,#1abc9c 60%,#2bb673 100%); color:#fff; border:none; border-radius:24px; padding:10px 28px; font-size:1.08em; font-weight:700; box-shadow:0 2px 8px #b2f2dd; cursor:pointer; transition:background .18s,box-shadow .18s; margin:12px 0;}
.button:hover {background:linear-gradient(90deg,#2bb673 60%,#1abc9c 100%); box-shadow:0 4px 16px #1abc9c44;}
::-webkit-scrollbar {width:8px; background:#e0f7fa;}
::-webkit-scrollbar-thumb {background:#b2f2dd; border-radius:8px;}
@media (max-width: 600px) {
  .site-header .container, .site-main, .site-footer {padding-left: 8px; padding-right: 8px;}
  .song-list {gap: 12px;}
  .song-list li {min-width: 120px; max-width: 100%;}
  .logo {font-size:1.3em;}
  .intro h1 {font-size:1.4em;}
}