.music-page{background:#05080d}
.music-page{--container:min(1260px,calc(100% - 30px))}
.music-page .nav-wrap{padding:12px 0}
.music-page .nav-wrap.scrolled{padding:8px 0}
.music-page .nav{height:60px}
.music-page .identity{gap:10px;flex:0 0 auto}
.music-page .identity img{width:48px;height:48px}
.music-page .identity b{font-size:15px;letter-spacing:.2em}
.music-page .identity small{font-size:7px;letter-spacing:.14em}
.music-page .nav-links{gap:18px;font-size:11px;letter-spacing:.04em;white-space:nowrap;flex-wrap:nowrap}
.music-page .nav-links a{white-space:nowrap}
.music-page .nav-button{padding:11px 14px}
.music-page .nav-links a[aria-current="page"]{color:var(--gold2);text-shadow:0 0 18px rgba(214,179,107,.25)}
.music-page .music-control{border-color:rgba(214,179,107,.42)}
.music-page .music-control .music-note{color:var(--gold2)}
.music-page .music-control.playing .music-note{animation:musicpulse 1.15s ease-in-out infinite}

.music-hero{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;padding:135px 0 105px;background:#04070b}
.music-hero-bg{position:absolute;inset:0;background-image:linear-gradient(180deg,rgba(3,5,9,.42),rgba(3,5,9,.9) 82%,#06090f),url('asgard-music-saga.png');background-size:cover;background-position:center;filter:saturate(.88);transform:scale(1.045)}
.music-hero-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(218,175,88,.13),transparent 32%),linear-gradient(90deg,rgba(0,0,0,.5),transparent 22% 78%,rgba(0,0,0,.5));pointer-events:none}
.music-hero::before{content:"ᚨ ᛋ ᚷ ᚨ ᚱ ᛞ";position:absolute;z-index:2;top:105px;left:50%;transform:translateX(-50%);white-space:nowrap;color:rgba(241,213,141,.07);font-family:Cinzel,serif;font-size:clamp(50px,10vw,145px);letter-spacing:.24em}
.music-hero-content{position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center}
.music-saga-banner{width:min(100%,980px);max-height:560px;object-fit:contain;border:1px solid rgba(214,179,107,.3);box-shadow:0 28px 85px rgba(0,0,0,.62),0 0 45px rgba(214,179,107,.08);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.music-hero-lead{max-width:770px;margin:27px auto 30px;color:#c6c1b5;font-size:15px;text-shadow:0 3px 15px #000}
.music-hero .scroll-hint{bottom:18px}

.music-player-section{position:relative;padding:125px 0 135px;overflow:hidden;isolation:isolate}
.music-player-section::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 12%,rgba(214,179,107,.09),transparent 30%),radial-gradient(circle at 50% 65%,rgba(90,151,197,.06),transparent 38%)}
.music-runes{position:absolute;top:46px;left:50%;transform:translateX(-50%);white-space:nowrap;color:rgba(241,213,141,.045);font-family:Cinzel,serif;font-size:clamp(50px,8vw,120px);letter-spacing:.23em;pointer-events:none}
.music-player-section .section-title{margin-bottom:55px}
.music-player-section .section-title h1{font-family:Cinzel,serif;font-size:clamp(44px,6vw,74px);line-height:1;margin:0 0 22px}

.saga-console{--active-accent:#7ab9e8;max-width:1010px;margin:0 auto 34px;display:grid;grid-template-columns:390px 1fr;min-height:520px;border:1px solid rgba(214,179,107,.26);background:linear-gradient(145deg,rgba(214,179,107,.055),transparent 38%),rgba(5,8,13,.88);box-shadow:0 28px 80px rgba(0,0,0,.42);clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);overflow:hidden}
.now-cover-wrap{position:relative;min-height:520px;overflow:hidden;background:#020407}
.now-cover-wrap::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.04);margin:10px;pointer-events:none}
#now-cover{width:100%;height:100%;object-fit:cover;transition:opacity .25s ease,transform .8s ease}
.saga-console.is-changing #now-cover{opacity:.34;transform:scale(1.025)}
.now-cover-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,4,8,.74),transparent 42%),linear-gradient(90deg,transparent 68%,rgba(3,5,9,.36))}
.visualizer{position:absolute;left:27px;right:27px;bottom:25px;height:40px;display:flex;align-items:flex-end;justify-content:center;gap:5px;opacity:.32;transition:.25s}
.visualizer i{display:block;width:4px;height:8px;background:var(--active-accent);box-shadow:0 0 11px var(--active-accent);transform-origin:bottom}
.saga-console.playing .visualizer{opacity:.9}
.saga-console.playing .visualizer i{animation:musicBar .75s ease-in-out infinite alternate}
.saga-console.playing .visualizer i:nth-child(2n){animation-duration:.52s}.saga-console.playing .visualizer i:nth-child(3n){animation-duration:.96s}.saga-console.playing .visualizer i:nth-child(4n){animation-delay:-.3s}
@keyframes musicBar{to{height:36px}}

.now-details{display:flex;flex-direction:column;justify-content:center;padding:48px 52px;position:relative}
.now-details::before{content:"";position:absolute;left:0;top:13%;bottom:13%;width:1px;background:linear-gradient(transparent,var(--active-accent),transparent);opacity:.6}
.now-eyebrow{margin:0 0 13px;color:var(--active-accent);font-size:9px;font-weight:900;letter-spacing:.28em;transition:color .25s}
.now-details h2{margin:0;font-family:Cinzel,serif;font-size:clamp(34px,4.2vw,56px);line-height:1.06;letter-spacing:-.035em}
.now-story{max-width:540px;margin:20px 0 29px;color:#aaa69d;font-size:13px}
.player-controls{display:flex;align-items:center;gap:14px;margin-bottom:25px}
.player-controls button{border:1px solid rgba(214,179,107,.28);background:rgba(7,10,16,.75);color:#f4ead4;cursor:pointer;transition:.25s}
.player-controls button:hover{transform:translateY(-3px);border-color:var(--active-accent);box-shadow:0 0 24px rgba(214,179,107,.08)}
.player-icon{width:48px;height:48px;font-size:28px;line-height:1}
.player-main{width:68px;height:68px;border-radius:50%!important;background:linear-gradient(135deg,#f0d38c,#c89b4e)!important;color:#151007!important;font-size:21px!important;box-shadow:0 16px 38px rgba(211,168,84,.22)}
.play-symbol{display:block;font-family:Cinzel,serif;font-size:19px;font-weight:900;letter-spacing:.01em;transform:none}
.saga-console.playing .play-symbol{animation:chapterRunePulse 1.35s ease-in-out infinite}
@keyframes chapterRunePulse{50%{transform:scale(1.08);text-shadow:0 0 14px rgba(21,16,7,.28)}}
.player-timeline{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:12px;color:#9f9b92;font-size:10px;font-variant-numeric:tabular-nums}
.player-timeline input{width:100%;accent-color:var(--active-accent);cursor:pointer}
.now-meta{display:flex;justify-content:space-between;gap:20px;margin-top:18px;padding-top:17px;border-top:1px solid rgba(214,179,107,.14);color:#77746d;font-size:8px;font-weight:800;letter-spacing:.16em}
.now-meta b{color:var(--gold2);font-family:Cinzel,serif;font-size:12px}

.chapter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.chapter-card{position:relative;border:1px solid rgba(214,179,107,.16);background:rgba(6,9,14,.74);clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.chapter-card:hover{transform:translateY(-7px);border-color:var(--chapter-accent);box-shadow:0 22px 48px rgba(0,0,0,.32),0 0 22px color-mix(in srgb,var(--chapter-accent) 20%,transparent)}
.chapter-card.active{border-color:var(--chapter-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--chapter-accent) 28%,transparent),0 20px 55px rgba(0,0,0,.3)}
.chapter-select{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.chapter-art{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:#04070b}
.chapter-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,6,10,.8),transparent 45%);opacity:.55;transition:.3s}
.chapter-art img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease,filter .35s ease}
.chapter-card:hover .chapter-art img{transform:scale(1.04);filter:saturate(1.08)}
.chapter-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(5,8,13,.68);backdrop-filter:blur(10px);color:#fff;font-family:Cinzel,serif;font-style:normal;font-size:19px;font-weight:800;letter-spacing:.02em;opacity:.92;transition:.28s;text-shadow:0 0 18px rgba(0,0,0,.45)}
.chapter-card:hover .chapter-play,.chapter-card.active .chapter-play{border-color:var(--chapter-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--chapter-accent) 35%,transparent),0 0 26px color-mix(in srgb,var(--chapter-accent) 22%,transparent);background:rgba(5,8,13,.78);color:var(--gold2)}
.chapter-card.playing .chapter-play{border-color:var(--chapter-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--chapter-accent) 36%,transparent),0 0 28px color-mix(in srgb,var(--chapter-accent) 30%,transparent),0 0 52px rgba(0,0,0,.18);background:rgba(6,9,14,.84);color:var(--gold2);transform:translate(-50%,-50%) scale(1.04)}
.chapter-copy{display:block;min-height:154px;padding:20px 18px 21px}
.chapter-copy small{display:block;color:var(--chapter-accent);font-size:7px;font-weight:900;letter-spacing:.18em}
.chapter-copy strong{display:block;margin:8px 0 11px;font-family:Cinzel,serif;font-size:17px;line-height:1.22}
.chapter-copy em{display:block;color:#7f7c75;font-style:normal;font-size:7px;font-weight:800;letter-spacing:.16em}

.music-finale{position:relative;min-height:660px;display:grid;place-items:center;text-align:center;overflow:hidden;padding:100px 0}
.music-finale-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(214,179,107,.14),transparent 27%),linear-gradient(0deg,rgba(4,6,10,.95),rgba(4,6,10,.62)),url('music-chapter-4.png');background-size:cover;background-position:center 62%;filter:saturate(.72)}
.music-finale-content{position:relative;z-index:2}
.music-finale h2{margin:0;font-family:Cinzel,serif;font-size:clamp(39px,5.6vw,70px);line-height:1.08}
.music-finale-content>p:not(.overline){max-width:600px;margin:22px auto 30px;color:#aaa69d}

@media(max-width:1320px){
  .music-page .nav-links{gap:14px;font-size:10.5px}
  .music-page .nav-button{padding:10px 12px}
  .music-page .identity b{font-size:14px;letter-spacing:.18em}
}
@media(max-width:1080px){
  .saga-console{grid-template-columns:340px 1fr}
  .chapter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:790px){
  .music-hero{min-height:820px;padding-top:120px}
  .music-saga-banner{max-height:none}
  .saga-console{grid-template-columns:1fr;max-width:620px}
  .now-cover-wrap{min-height:0;aspect-ratio:3/4;max-height:670px}
  .now-details{padding:37px 28px 40px}
  .now-details::before{left:9%;right:9%;top:0;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,transparent,var(--active-accent),transparent)}
}
@media(max-width:560px){
  .music-hero{min-height:720px;padding:105px 0 88px}
  .chapter-play{width:64px;height:64px;font-size:17px}
  .music-hero::before{top:95px;font-size:44px;letter-spacing:.13em}
  .music-saga-banner{border-width:1px}
  .music-hero-lead{font-size:13px;margin:21px auto 25px}
  .music-player-section{padding:90px 0 100px}
  .music-runes{top:30px;font-size:45px;letter-spacing:.12em}
  .chapter-grid{grid-template-columns:1fr;max-width:410px;margin:0 auto}
  .chapter-copy{min-height:0}
  .saga-console{margin-bottom:27px}
  .now-details h2{font-size:36px}
  .player-timeline{grid-template-columns:36px 1fr 36px;gap:8px}
  .now-meta{align-items:flex-start;flex-direction:column;gap:7px}
  .music-finale{min-height:570px}
}