*{box-sizing:border-box}
:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body{margin:0;background:#f4f4f4;color:#111;min-height:100vh}
.wrap{max-width:720px;margin:0 auto;padding:28px 18px 48px}
h1{font-size:30px;margin:0 0 8px}
.sub{margin:0 0 24px;color:#555;line-height:1.5}
.disc-switch{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
button{font:inherit}
.disc,.small{border:1px solid #d7d7d7;background:#fff;border-radius:14px;padding:14px 12px;cursor:pointer}
.disc.active{background:#111;color:#fff;border-color:#111}
.player-card{background:#fff;border-radius:22px;padding:18px;box-shadow:0 8px 30px rgba(0,0,0,.06)}
.now{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;color:#666}
.now strong{color:#111;font-size:20px}
.play{width:100%;border:0;border-radius:18px;padding:18px 20px;background:#111;color:#fff;font-size:24px;font-weight:700;cursor:pointer}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 16px}
#player{width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}
#player iframe{width:100%;height:100%}
.hint{font-size:14px;color:#666;line-height:1.5;margin:14px 2px 0}
@media (max-width:480px){
  .wrap{padding-top:20px}
  h1{font-size:26px}
  .play{font-size:22px}
}