@font-face{font-family:"Inter Tight";src:url(fonts/inter-tight.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
:root{
  --bg:#f4f6fb; --card:#fff; --card2:#f7f8fc; --fg:#1d2433; --dim:#6b7385; --line:#e6e9f2;
  --accent:#4f7cff; --accent2:#7c5cff;
  --shadow:0 8px 24px -12px rgba(40,60,120,.18),0 2px 6px -2px rgba(40,60,120,.06);
  --shadow-h:0 18px 40px -16px rgba(40,60,120,.32),0 4px 10px -4px rgba(40,60,120,.08);
  --sans:"Inter Tight","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --serif:"Instrument Serif","Songti SC","Noto Serif SC",serif;
  --max:1200px; --pad:clamp(16px,4vw,32px); --r:20px; color-scheme:light;
}
[data-theme="dark"]{--bg:#12151d;--card:#1b1f2a;--card2:#222736;--fg:#e8ebf3;--dim:#98a0b3;--line:#2a3040;--shadow:0 8px 24px -12px rgba(0,0,0,.5);--shadow-h:0 18px 40px -16px rgba(0,0,0,.7);color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;background:var(--bg)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.dim{color:var(--dim);font-weight:400}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:8px}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* nav (same as main site) */
.nav{position:fixed;inset:0 0 auto;z-index:50;color:#fff;transition:background .35s,color .35s,box-shadow .35s}
.nav__inner{display:flex;align-items:center;gap:20px;height:64px}
.nav__logo{font-weight:700;font-size:19px;display:flex;align-items:baseline;gap:6px;margin-right:auto;text-shadow:0 1px 8px rgba(30,40,80,.25)}
.nav__zh{font-family:var(--serif);font-style:italic;font-weight:400;opacity:.85}
.nav__links{font-size:15px;font-weight:500;text-shadow:0 1px 8px rgba(30,40,80,.25)}
.nav__links a:hover{text-decoration:underline;text-underline-offset:4px}
.theme-btn{width:38px;height:38px;border-radius:12px;border:0;display:grid;place-items:center;cursor:pointer;color:inherit;background:rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.theme-btn svg{width:20px;height:20px}
.i-moon{display:none}[data-theme="dark"] .i-moon{display:block}[data-theme="dark"] .i-sun{display:none}
.nav.is-solid{background:color-mix(in srgb,var(--card) 82%,transparent);color:var(--fg);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 var(--line)}
.nav.is-solid .nav__logo,.nav.is-solid .nav__links{text-shadow:none}
.nav.is-solid .theme-btn{background:var(--card2)}

/* hero banner */
.hero{position:relative;height:clamp(340px,52vh,480px);overflow:hidden;display:grid;place-items:center;text-align:center;color:#fff}
.hero__bg{position:absolute;inset:-2%;background:#cfd8ef url(hero.webp) center 45%/cover no-repeat;animation:kenburns 32s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08) translate(-1%,-1%)}}
.hero__shade{position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 50%,rgba(40,55,110,.3),transparent 75%),linear-gradient(to bottom,rgba(30,40,90,.3),rgba(30,40,90,0) 40%)}
.hero__content{position:relative;z-index:2;padding:0 var(--pad);transform:translateY(-10px)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.2em;opacity:.95;text-shadow:0 1px 8px rgba(40,50,110,.4)}
.hero h1{margin-top:8px;font-size:clamp(40px,7vw,72px);font-weight:800;letter-spacing:-.03em;line-height:1.1;text-shadow:0 4px 26px rgba(40,50,110,.4);animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
.hero__sub{margin-top:10px;font-size:15px;text-shadow:0 1px 10px rgba(40,50,110,.5);animation:rise 1s .2s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero__waves{position:absolute;z-index:2;left:0;bottom:-1px;width:100%;height:clamp(48px,8vh,90px)}
.waves__g use{animation:drift 22s linear infinite}
.waves__g .w1{fill:color-mix(in srgb,var(--bg) 35%,transparent);animation-duration:26s;animation-delay:-4s}
.waves__g .w2{fill:color-mix(in srgb,var(--bg) 55%,transparent);animation-duration:19s;animation-direction:reverse;animation-delay:-8s}
.waves__g .w3{fill:color-mix(in srgb,var(--bg) 75%,transparent);animation-duration:15s;animation-delay:-2s}
.waves__g .w4{fill:var(--bg);animation-duration:30s}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(176px)}}

/* sections */
.section{padding:clamp(20px,3vh,32px) 0}
.section__head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;margin-bottom:16px;padding:0 4px}
.section__head h2{font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.02em;display:flex;align-items:baseline;gap:10px}
.section__head h2::before{content:"";align-self:center;width:6px;height:22px;border-radius:4px;background:linear-gradient(var(--accent),var(--accent2))}
.section__head h2 .dim{font-size:14px;font-weight:500}
.search{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:99px;padding:0 16px;height:42px;width:min(320px,100%);color:var(--dim);transition:border-color .2s}
.search:focus-within{border-color:var(--accent)}
.search svg{width:15px;height:15px;flex:none}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--fg);font:inherit;font-size:14px}

.mine{display:grid;gap:16px}
.feature{display:grid;grid-template-columns:132px 1fr;grid-template-rows:auto auto;column-gap:22px;align-items:end;padding:18px;border-radius:var(--r);color:#fff;
  background:linear-gradient(140deg,#ff7a9c,#ff9f6e);box-shadow:var(--shadow)}
.feature img{width:132px;height:132px;border-radius:14px;object-fit:cover;grid-row:1/3;box-shadow:0 10px 24px -10px rgba(120,30,60,.5)}
.feature>a.open,.feature iframe{grid-column:2;align-self:start}
.feature h3{font-size:24px;font-weight:800}
.feature p{margin:4px 0 12px;opacity:.9;font-size:14px}
.feature iframe{width:100%;max-width:420px;height:86px;border:0;border-radius:10px;display:block}
.feature a.open{font-size:14px;font-weight:700}

.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:18px}
.song a{display:block;border-radius:var(--r);padding:10px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.song a:hover{transform:translateY(-5px);box-shadow:var(--shadow-h)}
.song__cover{position:relative;border-radius:13px;overflow:hidden}
.song__cover::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:#fff;background:rgba(20,30,60,.35);opacity:0;transition:opacity .25s}
.song a:hover .song__cover::after{opacity:1}
.song img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--card2);transition:transform .5s}
.song a:hover img{transform:scale(1.06)}
.song__name{margin:10px 2px 0;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song__meta{margin:2px 2px 2px;color:var(--dim);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty{color:var(--dim);text-align:center;padding:56px 16px;border:1px dashed var(--line);border-radius:var(--r);background:var(--card)}
.footer{margin-top:40px;border-top:1px solid var(--line);background:var(--card)}
.footer .wrap,.footer.wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;padding-bottom:26px;color:var(--dim);font-size:13px}
.footer a:hover{color:var(--accent)}

.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}

@media (max-width:600px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .feature{grid-template-columns:88px 1fr;column-gap:14px;padding:14px;align-items:center}
  .feature img{width:88px;height:88px;grid-row:auto}
  .feature>a.open,.feature iframe{grid-column:1/-1;max-width:none;margin-top:12px}
  .search{width:100%}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}