:root { color-scheme: dark; font-family: "Hiragino Sans", "Yu Gothic", system-ui, sans-serif; background: #100017; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100svh; margin: 0; color: #fff; background: #13001e url("../images/background.png") center / cover fixed; }
body::before { position: fixed; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(15, 0, 31, .74), rgba(6, 0, 18, .9)); content: ""; }
.music-page { position: relative; z-index: 1; width: min(100%, 680px); min-height: 100svh; margin: 0 auto; padding: max(2.8rem, calc(env(safe-area-inset-top) + 2rem)) 1.25rem max(2.5rem, calc(env(safe-area-inset-bottom) + 2rem)); }
.music-header { margin-bottom: 1.7rem; text-align: center; }
.music-header p { margin: 0 0 .45rem; color: #f4e7bc; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: .85rem; font-weight: 700; letter-spacing: .12em; }
.music-header h1 { margin: 0; color: #fff000; font-size: clamp(2rem, 10vw, 3.5rem); letter-spacing: .14em; text-shadow: 0 0 18px rgba(255, 240, 0, .42), 0 0 32px rgba(255, 49, 185, .28); }
.song-panel { margin: 0 auto 1.1rem; padding: 1.25rem; border: 1px solid rgba(130, 252, 255, .58); border-radius: .85rem; background: linear-gradient(135deg, rgba(27, 0, 44, .9), rgba(10, 0, 27, .86)); box-shadow: 0 0 22px rgba(255, 50, 192, .13); }
.song-panel h2 { margin: 0 0 1rem; color: #fff5ce; font-size: clamp(1rem, 4.4vw, 1.35rem); line-height: 1.35; letter-spacing: .02em; text-align: center; }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.service-button { display: grid; min-height: 2.7rem; place-items: center; border: 1px solid rgba(155, 250, 255, .54); border-radius: .4rem; padding: .45rem; color: #dffcff; background: rgba(255, 255, 255, .07); font-size: clamp(.69rem, 3.1vw, .82rem); font-weight: 800; line-height: 1.25; text-align: center; text-decoration: none; }
.service-button:not([href]) { cursor: default; }
.service-button[href]:hover { border-color: #fff000; color: #fff; background: rgba(255, 240, 0, .14); }
.service-button:focus-visible { outline: 2px solid #fff000; outline-offset: 3px; }
.music-back { display: block; width: fit-content; margin: 1.55rem auto 0; padding: .5rem .85rem; color: #8cfcff; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-decoration: underline; text-underline-offset: .25em; }
@media (max-height: 700px) and (min-width: 380px) {
  .music-page { padding-block: max(1.4rem, calc(env(safe-area-inset-top) + .9rem)) max(1.35rem, calc(env(safe-area-inset-bottom) + .9rem)); }
  .music-header { margin-bottom: 1.1rem; }
  .song-panel { margin-bottom: .75rem; padding: 1rem; }
  .song-panel h2 { margin-bottom: .75rem; }
  .music-back { margin-top: .9rem; }
}
@media (min-width: 700px) { .music-page { padding-inline: 2rem; }.song-panel { padding: 1.5rem; } }