:root {
  color-scheme: dark;
  --ink: #081817;
  --paper: #eae5d5;
  --gold: #dcc18a;
  --mint: #79ecc2;
  --line: #37605a;
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  color: var(--paper);
  background: var(--ink);
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse at 92% 83%, #18534c6b, transparent 44%),
    radial-gradient(ellipse at 14% 104%, #1e61584d, transparent 40%),
    linear-gradient(115deg, #0a1b1b, #0a2422 57%, #0a1a1b);
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #fff1ba; outline-offset: 5px; }
.masthead { background: #081313f2; border-bottom: 1px solid #294541; }
.nav-inner, main, footer { width: min(1120px, calc(100% - 88px)); margin-inline: auto; }
.nav-inner { height: 64px; display: flex; align-items: center; gap: 58px; }
.brand { display: inline-flex; align-items: center; gap: 15px; font-size: 14px; font-weight: 650; letter-spacing: .16em; color: #f2f4ef; }
.brand-mark { width: 28px; height: 27px; background: #eaf3ed; clip-path: polygon(50% 0, 100% 100%, 69% 85%, 50% 45%, 36% 76%, 59% 66%, 66% 81%, 0 100%); }
nav, nav a { height: 100%; }
nav a { display: inline-grid; place-items: center; border-bottom: 3px solid var(--mint); padding: 3px 3px 0; font-weight: 600; color: #d7f9ed; }
main { padding: clamp(42px, 6.7vh, 76px) 0 0; }
.section-title { display: flex; gap: clamp(22px, 3vw, 44px); align-items: center; margin-bottom: clamp(24px, 3.8vh, 40px); }
h1 { margin: 0; font: 700 clamp(32px, 3.8vw, 48px)/1.15 "Songti SC", SimSun, "Noto Serif CJK SC", serif; letter-spacing: .06em; color: #f1e5c8; }
.rule { flex: 1; position: relative; height: 1px; background: linear-gradient(90deg, #486159, #74968c, transparent 95%); }
.rule i, .rule i::after { width: 8px; height: 8px; border: 1px solid #a7ccba; }
.rule i { position: absolute; left: 48%; top: -3px; transform: rotate(45deg); background: #102b27; }
.rule i::after { content: ""; position: absolute; left: 3px; top: -5px; }
.feature { display: grid; grid-template-columns: minmax(0, 1.52fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.cover { position: relative; display: block; border: 1px solid #998657; padding: 3px; box-shadow: 0 16px 44px #01090852; background: #192e29; }
.cover img { width: 100%; height: auto; display: block; }
.cover:hover { border-color: #e4ca8f; }
.details { padding-block: 4px; }
.english { margin: 0 0 9px; font-size: 13px; line-height: 1.4; font-weight: 600; text-transform: uppercase; letter-spacing: .35em; color: var(--gold); }
h2 { margin: 0; }
h2 img { display: block; width: min(78%, 307px); height: auto; }
.genres { padding: 0; margin: 17px 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.genres li { font-size: 12px; line-height: 1.5; padding: 3px 12px; color: #e4dbbe; border: 1px solid #7d795d; border-radius: 2px; }
.description { color: #c6d5ca; font-size: clamp(15px, 1.28vw, 17px); line-height: 1.85; margin: 0 0 23px; max-width: 34em; }
.play { min-height: 49px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; padding: 10px 39px; border: 1px solid #a0f5dc; border-radius: 3px; font-size: 18px; letter-spacing: .07em; font-weight: 750; color: #0b3028; background: linear-gradient(115deg,#adf2c8,#64d5b9); box-shadow: 0 5px 22px #58cdad19; transition: filter .16s ease, transform .16s ease; }
.play:hover { filter: brightness(1.09); transform: translateY(-1px); }
.triangle { width: 0; height: 0; border-block: 7px solid transparent; border-left: 11px solid #174d40; }
.controls { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 4vw, 58px); margin-top: clamp(30px, 5.5vh, 60px); border-block: 1px solid var(--line); color: #b7cac0; }
.controls p { min-height: 62px; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.device { font-weight: 650; color: #d9eade; letter-spacing: .04em; margin-right: 4px; }
.keys { display: inline-flex; gap: 2px; }
kbd { padding: 1px 4px; border: 1px solid #59756b; border-bottom-width: 2px; border-radius: 3px; font: 12px/1.25 Consolas, monospace; color: #d6e7dd; }
footer { margin-top: auto; padding-block: clamp(38px, 8vh, 85px) 30px; display: flex; align-items: center; justify-content: center; gap: 16px; color: #bea983; font-size: 10px; letter-spacing: .38em; font-weight: 600; }
footer span { width: 52px; height: 1px; background: linear-gradient(90deg, transparent, #89997b); }
footer span:last-child { transform: rotate(180deg); }
@media (max-width: 760px) {
  .nav-inner, main, footer { width: calc(100% - 40px); }
  .nav-inner { height: 56px; gap: 26px; }
  .brand { gap: 9px; font-size: 11px; }
  .brand-mark { width: 23px; height: 23px; }
  nav a { font-size: 13px; }
  main { padding-top: 32px; }
  .section-title { margin-bottom: 20px; }
  .feature { grid-template-columns: 1fr; gap: 23px; }
  .english { font-size: 11px; }
  h2 img { width: 216px; }
  .genres { margin-block: 12px; }
  .description { margin-bottom: 17px; }
  .play { width: 100%; }
  .controls { display: block; margin-top: 23px; padding: 11px 0; }
  .controls p { min-height: 31px; gap: 5px; }
  footer { padding: 28px 0; }
}
@media (prefers-reduced-motion: reduce) { .play { transition: none; } }