/* Muze Tracks cohesion pass: one continuous hero, ledger, and discovery composition. */ @media(min-width:851px){ #albumModal.albumPageMode:not(.libraryDetailModal){ align-items:flex-start!important; top:calc(var(--album-page-header-height,88px) - 1px)!important; padding-top:0!important; background:#0b0a0d!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; overflow-x:hidden!important; overflow-y:auto!important; } /* Color-only refinement: the Exceptional card's numeric score is ivory. */ body #albumModal.albumPageMode:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats) .albumScoreStat:has(>.exceptionalStatus)>strong.statValueWithIcon{ color:#f3eee6!important; -webkit-text-fill-color:#f3eee6!important; } body #albumModal.albumPageMode:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat>.exceptionalStatus)>.linerAccoladeStat>strong.statValueWithIcon{ color:#d6ab35!important; -webkit-text-fill-color:#d6ab35!important; } body #albumModal.albumPageMode:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat>.exceptionalStatus)>.linerAccoladeStat>span{ color:#f3eee6!important; -webkit-text-fill-color:#f3eee6!important; } #albumModal.albumPageMode:not(.libraryDetailModal)>.modalPanel{ flex-shrink:0!important; max-height:none!important; overflow:visible!important; border-color:transparent!important; border-radius:0!important; background:transparent!important; box-shadow: 0 0 34px 10px rgba(6,5,8,.72), 0 0 68px 18px rgba(50,22,45,.18)!important; } #albumModal.albumPageMode:not(.libraryDetailModal)>.modalPanel::after{ content:none!important; display:none!important; } body.albumPageView>.app{ position:relative!important; z-index:60!important; pointer-events:none!important; } body.albumPageView{ background:#0b0a0d!important; } body:not(.light) #albumModal.albumPageMode:not(.libraryDetailModal){ background: radial-gradient(ellipse 76% 24% at 50% 0%,rgba(var(--album-perimeter-soft-rgb,91,45,85),.05),transparent 76%), radial-gradient(ellipse 76% 24% at 50% 100%,rgba(var(--album-perimeter-soft-rgb,91,45,85),.04),transparent 76%), radial-gradient(ellipse 24% 76% at 0% 50%,rgba(var(--album-perimeter-rgb,91,45,85),.065),transparent 76%), radial-gradient(ellipse 24% 76% at 100% 50%,rgba(var(--album-perimeter-soft-rgb,91,45,85),.055),transparent 76%), radial-gradient(circle at 18% 42%,rgba(var(--album-perimeter-rgb,73,27,69),.008),transparent 30%), radial-gradient(circle at 0% 48%,rgba(var(--album-perimeter-rgb,91,45,85),.04),transparent 27%), radial-gradient(circle at 100% 48%,rgba(var(--album-perimeter-soft-rgb,91,45,85),.032),transparent 27%), radial-gradient(circle at 50% 0%,rgba(var(--album-perimeter-soft-rgb,91,45,85),.055),transparent 25%), linear-gradient(180deg,#0b0a0d 0%,#050507 100%)!important; } body:not(.light) #albumModal.albumPageMode:not(.libraryDetailModal)>.modalPanel{ background:transparent!important; box-shadow:none!important; } body:not(.light) #albumModal.albumPageMode:not(.libraryDetailModal) .linerAlbumPage{ background:transparent!important; } body.albumPageView>.app>:not(.topbar):not(#sideNav):not(#navOverlay){ visibility:hidden!important; } body.albumPageView>.app>#sideNav, body.albumPageView>.app>#navOverlay{ pointer-events:auto!important; } body.albumPageView>.app>.topbar{ position:fixed!important; z-index:61!important; top:24px!important; left:50%!important; width:min(1120px,92vw)!important; margin:0!important; padding:0!important; transform:translateX(-50%)!important; background:transparent!important; border:0!important; pointer-events:auto!important; } body.albumPageView>.app>.topbar::after{ content:""!important; position:absolute!important; z-index:62!important; top:auto!important; right:auto!important; bottom:0!important; left:0!important; width:35px!important; height:1px!important; background:linear-gradient(90deg,rgba(214,171,53,.25),#d6ab35 52%,rgba(214,171,53,.48))!important; box-shadow:0 0 6px rgba(214,171,53,.14)!important; transform:none!important; pointer-events:none!important; } body.albumPageView>.app>.topbar .brandWrap::before, body.albumPageView>.app>.topbar .brandWrap::after{ content:none!important; display:none!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .linerAlbumPage.albumSubviewOpen>:not(.linerTabs):not(.albumPageSubview){ display:none!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview{ position:relative!important; display:block!important; width:100%!important; max-height:none!important; margin:0!important; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview .albumOverviewSleeve{ margin:0!important; border-color:transparent!important; background:transparent!important; box-shadow:none!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview .albumOverviewSleeve:before{ content:none!important; display:none!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .linerAlbumPage.albumSubviewOpen:has(.albumPageSubview[data-album-page-subview="overview"]){ background: linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.10) 52%,rgba(0,0,0,.42)), radial-gradient(circle at 70% 18%,rgba(255,255,255,.09),transparent 18%), linear-gradient(90deg,rgba(5,5,5,.976) 0%,rgba(8,8,8,.88) 48%,rgba(3,3,3,.945) 100%), var(--overview-page-cover)!important; background-size:auto,auto,auto,cover!important; background-position:center,center,center,var(--overview-page-position,50% 20%)!important; background-repeat:no-repeat!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview.albumInfoPopupPanel{ width:min(1240px,100%)!important; margin-inline:auto!important; } } @media(min-width:851px){ #albumModal.albumPageMode:not(.libraryDetailModal) .linerTabs{ zoom:.9!important; } } @media(min-width:1051px){ #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactPopular>h3{ position:relative!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactPopular>h3::before{ content:""!important; position:absolute!important; top:-9px!important; left:0!important; width:44px!important; height:1px!important; border-radius:999px!important; background:#f4c84a!important; box-shadow:none!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactPopularBody strong{ color:#f4c84a!important; } #albumModal:not(.libraryDetailModal) .albumTrackSections{margin-top:0!important} #albumModal:not(.libraryDetailModal) .albumTrackMain{gap:32px!important} #albumModal:not(.libraryDetailModal) .trackJourneyHeart, #albumModal:not(.libraryDetailModal) .trackJourneyList, #albumModal:not(.libraryDetailModal) .albumMoreLikeThis, #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy, #albumModal:not(.libraryDetailModal) .sameArtistEssentials{ border-color:rgba(214,171,53,.13)!important; border-radius:16px!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.012)!important; } #albumModal:not(.libraryDetailModal) .trackJourneyHeart{background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008)),#09090d!important} #albumModal:not(.libraryDetailModal) .trackJourneyList{ position:relative!important; background:linear-gradient(180deg,rgba(13,14,17,.973),rgba(13,14,17,.982)),radial-gradient(circle at 53% 1%,rgba(91,45,85,.075),transparent 42%),var(--hero-scene,var(--album-cover)) var(--moment-focus,50% 50%)/cover no-repeat,linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008)),#0d0e11!important; } #albumModal:not(.libraryDetailModal) .trackJourneyListSection{ position:relative!important; min-width:0!important; } #albumModal:not(.libraryDetailModal) .trackJourneyListSection::before{ content:""!important;position:absolute!important;z-index:5!important;top:-22px!important;left:50%!important;width:7px!important;height:7px!important;border:1px solid rgba(214,171,53,.40)!important;background:#d6ab35!important;opacity:.32!important;transform:translateX(-50%) rotate(45deg)!important;pointer-events:none!important; } #albumModal:not(.libraryDetailModal) .trackJourneyList::before{content:none!important} #albumModal:not(.libraryDetailModal) .trackJourneyHeading{ margin:0 0 14px!important; padding:0 18px!important; } #albumModal:not(.libraryDetailModal) .tracklist-eyebrow{ display:block!important; margin:0 0 6px!important; color:var(--muze-gold,#d6ab35)!important; font-family:var(--muze-sans)!important; font-size:10px!important; font-weight:700!important; letter-spacing:.14em!important; text-transform:uppercase!important; } #albumModal:not(.libraryDetailModal) .tracklist-heading{ margin:0!important; color:#f3eee5!important; font-family:var(--muze-serif)!important; font-size:30px!important; font-weight:500!important; line-height:1!important; letter-spacing:-.02em!important; } #albumModal:not(.libraryDetailModal) .tracklist-heading::after{ content:""!important; display:block!important; width:44px!important; height:1px!important; margin-top:10px!important; background:var(--muze-gold,#d6ab35)!important; opacity:.65!important; } #albumModal:not(.libraryDetailModal) .albumDiscoveryRail{gap:10px!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeThis, #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy, #albumModal:not(.libraryDetailModal) .sameArtistEssentials{ position:relative!important;background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008)),#0d0d10!important; } #albumModal:not(.libraryDetailModal) .albumMoreLikeThis::after, #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy::after, #albumModal:not(.libraryDetailModal) .sameArtistEssentials::after{ content:""!important;position:absolute!important;left:50%!important;bottom:-3px!important;width:5px!important;height:5px!important;border:1px solid rgba(214,171,53,.32)!important;background:#0d0d10!important;opacity:.62!important;transform:translateX(-50%) rotate(45deg)!important;pointer-events:none!important; } #albumModal:not(.libraryDetailModal) .albumMoreLikeThis>header, #albumModal:not(.libraryDetailModal) .sameArtistEssentials>header{display:block!important;margin:0 0 15px!important} #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy>header{align-items:flex-start!important;margin:0 0 15px!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeThis>header>span, #albumModal:not(.libraryDetailModal) .sameArtistEssentials>header>span, #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy>header>div>span{ display:block!important;color:#d6ab35!important;font:700 11px/1.1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important;letter-spacing:.14em!important;text-transform:uppercase!important; } #albumModal:not(.libraryDetailModal) .albumMoreLikeThis>header>h3, #albumModal:not(.libraryDetailModal) .sameArtistEssentials>header>h3, #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy>header>div>h3{ display:block!important;margin:6px 0 0!important;color:#f3eee6!important;font:600 clamp(24px,1.65vw,26px)/1.06 var(--muze-serif,Georgia,"Times New Roman",serif)!important;letter-spacing:-.015em!important; } #albumModal:not(.libraryDetailModal) .trackJourneyComment .trackCommentBubble, #albumModal:not(.libraryDetailModal) .trackJourneyFavorite .trackLove, #albumModal:not(.libraryDetailModal) .trackJourneyOverflow>summary{ color:rgba(243,238,229,.34)!important;opacity:1!important;transition:color .16s ease,background .16s ease,opacity .16s ease!important; } #albumModal:not(.libraryDetailModal) .trackJourneyComment .trackCommentBadge{color:rgba(243,238,229,.42)!important} #albumModal:not(.libraryDetailModal) .trackJourneyComment .trackCommentBubble:hover, #albumModal:not(.libraryDetailModal) .trackJourneyComment .trackCommentBubble:focus-visible, #albumModal:not(.libraryDetailModal) .trackJourneyFavorite .trackLove:hover, #albumModal:not(.libraryDetailModal) .trackJourneyFavorite .trackLove:focus-visible, #albumModal:not(.libraryDetailModal) .trackJourneyOverflow>summary:hover, #albumModal:not(.libraryDetailModal) .trackJourneyOverflow>summary:focus-visible, #albumModal:not(.libraryDetailModal) .trackJourneyOverflow[open]>summary{color:rgba(243,238,229,.82)!important} #albumModal:not(.libraryDetailModal) .trackJourneyFavorite .trackLove.hasUserRating{color:#efbd43!important} } /* Verified, source-backed album quotation. */ #albumModal:not(.libraryDetailModal) .albumCredibleQuote{ position:relative!important; display:flex!important; min-width:0!important; min-height:190px!important; padding:20px 22px!important; flex-direction:column!important; overflow:hidden!important; border:1px solid rgba(214,171,53,.22)!important; border-radius:14px!important; background:radial-gradient(circle at 18% 20%,rgba(218,174,55,.075),transparent 45%),#0d0d10!important; box-shadow:inset 0 1px 0 rgba(218,174,55,.08)!important; } #albumModal:not(.libraryDetailModal) .albumCredibleQuote:hover{border-color:rgba(214,171,53,.32)!important;background:radial-gradient(circle at 18% 20%,rgba(218,174,55,.09),transparent 45%),#0d0d10!important} #albumModal:not(.libraryDetailModal) .albumQuoteMark{position:absolute!important;top:21px!important;left:17px!important;color:#d6ab35!important;font:700 78px/.72 Georgia,"Times New Roman",serif!important;opacity:.18!important;pointer-events:none!important} #albumModal:not(.libraryDetailModal) .albumCredibleQuote>header{position:relative!important;z-index:1!important;margin:0 0 13px 0!important;padding-left:1px!important} #albumModal:not(.libraryDetailModal) .albumQuoteEyebrow{color:#d6ab35!important;font:750 10px/1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important;letter-spacing:.16em!important;text-transform:uppercase!important} #albumModal:not(.libraryDetailModal) .albumCredibleQuote blockquote{position:relative!important;z-index:1!important;display:-webkit-box!important;margin:0!important;overflow:hidden!important;color:#eee8dd!important;font:italic 500 18px/1.4 Georgia,"Times New Roman",serif!important;letter-spacing:-.005em!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important} #albumModal:not(.libraryDetailModal) .albumCredibleQuote cite{position:relative!important;z-index:1!important;display:block!important;margin-top:10px!important;overflow:hidden!important;color:rgba(243,239,230,.58)!important;font:500 11px/1.35 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important;font-style:normal!important;text-overflow:ellipsis!important;white-space:nowrap!important} #albumModal:not(.libraryDetailModal) .albumCredibleQuote cite b{color:#d6ab35!important;font-weight:650!important} #albumModal:not(.libraryDetailModal) .albumQuoteSourceLink{position:relative!important;z-index:2!important;display:inline-block!important;width:max-content!important;margin-top:7px!important;color:#d6ab35!important;font:700 11px/1.2 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important;text-decoration:none!important} #albumModal:not(.libraryDetailModal) .albumQuoteSourceLink:hover{color:#f0c94f!important;text-decoration:underline!important;text-underline-offset:3px!important} #albumModal:not(.libraryDetailModal) .albumCredibleQuoteEmpty{position:relative!important;z-index:1!important;margin:7px 0 auto!important;color:rgba(243,239,230,.62)!important;font:500 15px/1.45 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important} #albumModal:not(.libraryDetailModal) .albumQuoteAdminStrip{position:relative!important;z-index:2!important;display:flex!important;margin-top:auto!important;padding-top:9px!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;border-top:1px solid rgba(255,255,255,.06)!important} #albumModal:not(.libraryDetailModal) .albumQuoteStatus{color:#d6ab35!important;font:700 9px/1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important;letter-spacing:.09em!important;text-transform:uppercase!important} #albumModal:not(.libraryDetailModal) .albumQuoteStatus.isVerified{color:#b7cba8!important} #albumModal:not(.libraryDetailModal) .albumQuoteAdminStrip button{min-height:26px!important;padding:5px 10px!important;border:1px solid rgba(214,171,53,.3)!important;border-radius:999px!important;background:transparent!important;color:#d6ab35!important;font-size:9px!important} @media(min-width:1051px){#albumModal:not(.libraryDetailModal) .albumCompactCards.withoutCredibleQuote{grid-template-columns:minmax(0,1.05fr) minmax(0,1.1fr)!important}#albumModal:not(.libraryDetailModal) .albumCredibleQuote.isDraft{min-height:190px!important}} @media(max-width:768px){ #albumModal:not(.libraryDetailModal) .albumMobileCredibleQuote{width:100%!important;height:auto!important;min-height:0!important;margin:18px 0 0!important;padding:20px!important} #albumModal:not(.libraryDetailModal) .albumMobileCredibleQuote blockquote{font-size:18px!important;-webkit-line-clamp:unset!important} #albumModal:not(.libraryDetailModal) .albumMobileCredibleQuote cite{white-space:normal!important} #albumModal:not(.libraryDetailModal) .albumMobileCredibleQuote .albumQuoteSourceLink{display:block!important;margin-top:9px!important} } .albumQuoteAdminModal{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:20px;font-family:var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)} .albumQuoteAdminBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(8px)} .albumQuoteAdminPanel{position:relative;width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 40px);padding:24px;overflow:auto;border:1px solid rgba(214,171,53,.3);border-radius:16px;background:#101014;color:#eee8dd;box-shadow:0 24px 80px rgba(0,0,0,.55)} .albumQuoteAdminClose{position:absolute;top:14px;right:16px;width:34px;height:34px;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:50%;background:#17171c;color:#eee8dd;font-size:22px} .albumQuoteAdminPanel h2{margin:5px 0 8px;color:#f3efe6;font:600 28px/1.1 Georgia,"Times New Roman",serif} .albumQuoteAdminIntro{max-width:650px;margin:0 0 20px;color:rgba(243,239,230,.62);font-size:13px;line-height:1.5} .albumQuoteAdminGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .albumQuoteAdminGrid label{display:flex;min-width:0;flex-direction:column;gap:6px;color:rgba(243,239,230,.67);font-size:11px;font-weight:700;letter-spacing:.04em} .albumQuoteAdminGrid label.isWide{grid-column:1/-1} .albumQuoteAdminGrid label small{font-weight:500;opacity:.6} .albumQuoteAdminGrid :is(input,textarea,select){box-sizing:border-box;width:100%;padding:10px 11px;border:1px solid rgba(255,255,255,.11);border-radius:8px;outline:none;background:#0b0b0e;color:#f3efe6;font:500 13px/1.45 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif);resize:vertical} .albumQuoteAdminGrid :is(input,textarea,select):focus{border-color:rgba(214,171,53,.64);box-shadow:0 0 0 3px rgba(214,171,53,.08)} .albumQuoteVerifiedOutput{display:flex;min-height:39px;padding:0 11px;align-items:center;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:#0b0b0e;color:rgba(243,239,230,.68);font-size:12px} .albumQuoteAdminMeta{display:flex;min-height:28px;margin-top:13px;align-items:center;justify-content:space-between;gap:15px;color:rgba(243,239,230,.48);font-size:11px} .albumQuoteAdminMeta strong{color:#d6ab35;font-weight:650} .albumQuoteAdminActions{display:flex;margin-top:14px;flex-wrap:wrap;gap:9px} .albumQuoteAdminActions button{min-height:35px;padding:8px 13px;border:1px solid #d6ab35;border-radius:8px;background:#d6ab35;color:#0d0d10;font-weight:750} .albumQuoteAdminActions button.secondary{border-color:rgba(214,171,53,.3);background:transparent;color:#d6ab35} .albumQuoteAdminActions button:disabled{cursor:not-allowed;filter:none;opacity:.35} .albumQuoteAdminStatus{min-height:18px;margin:12px 0 0;color:#d6ab35;font-size:12px} .albumQuoteEditorLaunch{display:flex;margin:18px 0;padding:16px;align-items:center;justify-content:space-between;gap:18px;border:1px solid rgba(214,171,53,.24);border-radius:12px;background:#0d0d10} .albumQuoteEditorLaunch>div{display:flex;min-width:0;flex-direction:column;gap:5px}.albumQuoteEditorLaunch p{margin:0}.albumQuoteEditorLaunch strong{display:block;overflow:hidden;color:#eee8dd;font:italic 500 14px/1.4 Georgia,"Times New Roman",serif;text-overflow:ellipsis;white-space:nowrap}.albumQuoteEditorLaunch span{color:rgba(243,239,230,.48);font-size:10px}.albumQuoteEditorLaunch button{flex:0 0 auto} @media(max-width:640px){.albumQuoteAdminPanel{padding:20px 16px}.albumQuoteAdminGrid{grid-template-columns:1fr}.albumQuoteAdminGrid label.isWide{grid-column:auto}.albumQuoteAdminActions button{flex:1 1 calc(50% - 9px)}.albumQuoteEditorLaunch{align-items:flex-start;flex-direction:column}.albumQuoteEditorLaunch strong{white-space:normal}} /* Retired left-column landing-page experiment. Kept inert for rollback traceability. */ @media(min-width:99999px){ #albumModal:not(.libraryDetailModal) .albumTrackSectionLayout{ grid-template-columns:minmax(0,1fr) var(--album-discovery-rail-width,360px)!important; gap:18px!important; align-items:start!important; } #albumModal:not(.libraryDetailModal) .albumTrackMain{ gap:14px!important; } #albumModal:not(.libraryDetailModal) .trackJourneyHeart{ position:relative!important; isolation:isolate!important; grid-template-columns:minmax(250px,1.15fr) minmax(190px,.8fr) 140px!important; grid-template-areas:"identity insight artwork"!important; gap:26px!important; min-height:270px!important; height:auto!important; overflow:hidden!important; padding:28px 30px!important; border:1px solid rgba(214,171,53,.15)!important; border-radius:16px!important; background:#08090c!important; box-shadow:0 18px 48px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.012)!important; } #albumModal:not(.libraryDetailModal) .trackJourneyHeart::before{ content:""!important; position:absolute!important; z-index:-2!important; inset:0!important; opacity:1!important; background:linear-gradient(90deg,rgba(5,5,8,.94) 0%,rgba(5,5,8,.73) 46%,rgba(5,5,8,.86) 100%),var(--hero-scene,var(--album-cover)) var(--moment-focus,50% 50%)/cover no-repeat!important; filter:saturate(.72) contrast(1.02) brightness(.78)!important; } #albumModal:not(.libraryDetailModal) .trackJourneyHeart::after{ content:""!important; position:absolute!important; z-index:-1!important; inset:0!important; pointer-events:none!important; background:radial-gradient(circle at 46% 58%,rgba(91,45,85,.13),transparent 42%)!important; } #albumModal:not(.libraryDetailModal) .trackJourneyHeart.hasArtistCutout::after{ background: linear-gradient(90deg,rgba(8,8,11,.42) 0%,rgba(8,8,11,.04) 38%,rgba(8,8,11,.04) 62%,rgba(8,8,11,.46) 100%), radial-gradient(circle at 50% 58%,rgba(214,171,53,.10),transparent 42%), var(--artist-cutout) var(--artist-cutout-position,37.5%) var(--artist-cutout-y,bottom)/auto var(--artist-cutout-scale,96%) no-repeat!important; opacity:.72!important; filter:saturate(.72) brightness(.76) contrast(1.04)!important; } #albumModal:not(.libraryDetailModal) .trackJourneyHeart.hasArtistCutout.hasArtistFanart::after{ background: linear-gradient(90deg,rgba(8,8,11,.72) 0%,rgba(8,8,11,.20) 40%,rgba(8,8,11,.14) 66%,rgba(8,8,11,.62) 100%), linear-gradient(0deg,rgba(8,8,11,.54),rgba(8,8,11,.12) 55%,rgba(8,8,11,.32)), var(--artist-cutout) center 43%/cover no-repeat!important; opacity:.74!important; filter:saturate(.68) brightness(.72) contrast(1.04)!important; } #albumModal:not(.libraryDetailModal) .trackHeartCopy, #albumModal:not(.libraryDetailModal) .trackHeartInsight, #albumModal:not(.libraryDetailModal) .trackHeartArtwork{ position:relative!important; z-index:1!important; align-self:center!important; } #albumModal:not(.libraryDetailModal) .trackHeartType{ display:block!important; margin:0 0 13px!important; color:#d6ab35!important; font:700 11px/1.1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; letter-spacing:.13em!important; text-transform:uppercase!important; } #albumModal:not(.libraryDetailModal) .trackJourneyHeart h4{ max-width:100%!important; margin:0!important; color:#f4efe6!important; font:500 clamp(38px,3.5vw,56px)/1 var(--muze-serif,Georgia,"Times New Roman",serif)!important; letter-spacing:-.025em!important; white-space:nowrap!important; } #albumModal:not(.libraryDetailModal) .trackHeartArtist{ margin:10px 0 0!important; color:rgba(245,240,232,.72)!important; font:500 18px/1.2 var(--muze-serif,Georgia,"Times New Roman",serif)!important; } #albumModal:not(.libraryDetailModal) .trackHeartArtist span{color:#d6ab35!important} #albumModal:not(.libraryDetailModal) .trackHeartPlay{ display:flex!important; align-items:center!important; gap:13px!important; margin-top:23px!important; } #albumModal:not(.libraryDetailModal) .trackHeartPlay .featurePlay{ width:56px!important; height:56px!important; min-width:56px!important; border:1px solid rgba(214,171,53,.48)!important; border-radius:50%!important; background:linear-gradient(180deg,#f0c94d,#ddb12e)!important; color:#101014!important; box-shadow:0 10px 26px rgba(214,171,53,.16)!important; } #albumModal:not(.libraryDetailModal) .trackHeartPlay>b{ color:#d6ab35!important; font:700 12px/1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; letter-spacing:.12em!important; text-transform:uppercase!important; } #albumModal:not(.libraryDetailModal) .trackHeartPlay>time{ color:rgba(245,240,232,.48)!important; font:500 13px/1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; } #albumModal:not(.libraryDetailModal) .trackHeartInsight{padding:0!important} #albumModal:not(.libraryDetailModal) .trackHeartPulseLabel{ margin:0 0 13px!important; color:#d6ab35!important; font:700 11px/1.1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; letter-spacing:.13em!important; text-transform:uppercase!important; } #albumModal:not(.libraryDetailModal) .trackHeartPulse{gap:17px!important} #albumModal:not(.libraryDetailModal) .trackHeartScore>strong{ color:#d6ab35!important; font:500 46px/1 var(--muze-serif,Georgia,"Times New Roman",serif)!important; } #albumModal:not(.libraryDetailModal) .trackHeartScore>small{ color:rgba(245,240,232,.55)!important; font:600 13px/1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; } #albumModal:not(.libraryDetailModal) .trackHeartPulseMeta{ display:block!important; margin-top:12px!important; color:rgba(245,240,232,.46)!important; font:700 10px/1.2 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; letter-spacing:.08em!important; text-transform:uppercase!important; } #albumModal:not(.libraryDetailModal) .trackHeartNumber{color:rgba(91,45,85,.09)!important} #albumModal:not(.libraryDetailModal) .trackHeartArtwork{ grid-area:artwork!important; width:140px!important; justify-self:end!important; text-align:center!important; } #albumModal:not(.libraryDetailModal) .trackHeartArtwork>img, #albumModal:not(.libraryDetailModal) .trackHeartArtwork>strong{ width:140px!important; height:140px!important; border:0!important; border-radius:10px!important; object-fit:cover!important; box-shadow:0 12px 30px rgba(0,0,0,.30)!important; } #albumModal:not(.libraryDetailModal) .trackHeartArtwork>div{gap:4px!important;margin-top:11px!important} #albumModal:not(.libraryDetailModal) .trackHeartArtwork>div strong{ color:#f4efe6!important; font:500 19px/1.1 var(--muze-serif,Georgia,"Times New Roman",serif)!important; text-align:center!important; } #albumModal:not(.libraryDetailModal) .trackHeartArtwork>div span{ color:rgba(245,240,232,.52)!important; font:500 12px/1.2 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; text-align:center!important; } #albumModal:not(.libraryDetailModal) .heartAdminMenu{ position:absolute!important; z-index:8!important; top:17px!important; right:17px!important; margin:0!important; } #albumModal:not(.libraryDetailModal) .trackJourneyList{ overflow:visible!important; border:1px solid rgba(214,171,53,.13)!important; border-radius:16px!important; background:radial-gradient(circle at 50% 0%,rgba(91,45,85,.045),transparent 38%),linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008)),#0d0e11!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.012)!important; } #albumModal:not(.libraryDetailModal) .trackJourneyList::before{top:-5px!important} #albumModal:not(.libraryDetailModal) .trackSequenceIntro{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:24px!important; min-height:86px!important; padding:18px 24px!important; border-bottom:1px solid rgba(255,255,255,.055)!important; } #albumModal:not(.libraryDetailModal) .trackSequenceIntro div>p{ margin:0 0 8px!important; color:#d6ab35!important; font:700 11px/1.1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; letter-spacing:.13em!important; text-transform:uppercase!important; } #albumModal:not(.libraryDetailModal) .trackSequenceIntro div>span, #albumModal:not(.libraryDetailModal) .trackSequenceIntro>p{ margin:0!important; color:rgba(245,240,232,.58)!important; font:500 13px/1.3 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; } #albumModal:not(.libraryDetailModal) .trackSequenceIntro div>span b{margin:0 4px!important;color:#d6ab35!important;font-weight:400!important} #albumModal:not(.libraryDetailModal) .trackSequenceIntro>p{white-space:nowrap!important} #albumModal:not(.libraryDetailModal) .trackSequenceIntro>p span{ display:inline-block!important; margin:0 7px!important; color:rgba(245,240,232,.62)!important; font-size:27px!important; line-height:.7!important; vertical-align:-3px!important; } #albumModal:not(.libraryDetailModal) .trackJourneyHeader, #albumModal:not(.libraryDetailModal) .trackJourneyRow{ grid-template-columns:38px 34px minmax(180px,1fr) minmax(145px,220px) 66px 74px 56px 28px!important; gap:8px!important; padding-inline:20px!important; } #albumModal:not(.libraryDetailModal) .trackJourneyHeader{ min-height:52px!important; color:rgba(245,240,232,.44)!important; font-size:10px!important; font-weight:700!important; letter-spacing:.14em!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow{ min-height:62px!important; height:62px!important; padding-block:0!important; border-bottom:1px solid rgba(255,255,255,.055)!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackNo{ color:rgba(245,240,232,.42)!important; font:600 13px/1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; font-variant-numeric:tabular-nums!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse{ width:31px!important; height:31px!important; min-width:31px!important; border:1px solid rgba(245,240,232,.22)!important; border-radius:50%!important; background:transparent!important; box-shadow:none!important; color:#d6ab35!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse::before{border-left-color:#d6ab35!important} #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse:hover, #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse:focus-visible{ border-color:rgba(214,171,53,.58)!important; background:rgba(214,171,53,.06)!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow.isMostLoved .trackPulse, #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse.isPreviewing{ border-color:rgba(214,171,53,.55)!important; background:linear-gradient(180deg,#f0c94d,#ddb12e)!important; color:#101014!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow.isMostLoved .trackPulse::before, #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse.isPreviewing::before{border-left-color:#101014!important} #albumModal:not(.libraryDetailModal) .trackJourneyTitle>strong{ color:rgba(245,240,232,.84)!important; font:600 15px/1.25 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow.isMostLoved{ width:100%!important; height:62px!important; margin:0!important; padding-inline:20px!important; border:0!important; border-bottom:1px solid rgba(255,255,255,.055)!important; border-radius:0!important; background:linear-gradient(90deg,rgba(214,171,53,.08),rgba(91,45,85,.055),transparent)!important; box-shadow:inset 2px 0 0 #d6ab35!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow.isMostLoved .trackJourneyTitle>strong{color:#f4efe6!important} #albumModal:not(.libraryDetailModal) .trackJourneyPulseButton{gap:8px!important} #albumModal:not(.libraryDetailModal) .trackRatingStars{min-width:92px!important;font-size:14px!important;letter-spacing:1px!important} #albumModal:not(.libraryDetailModal) .trackJourneyPulseButton small{color:#d6ab35!important;font-size:11px!important} #albumModal:not(.libraryDetailModal) .trackJourneyRow>time{ color:rgba(245,240,232,.50)!important; font-size:12px!important; font-variant-numeric:tabular-nums!important; } #albumModal:not(.libraryDetailModal) .trackJourneyComment .trackCommentBubble, #albumModal:not(.libraryDetailModal) .trackJourneyFavorite .trackLove, #albumModal:not(.libraryDetailModal) .trackJourneyOverflow>summary{color:rgba(245,240,232,.38)!important} #albumModal:not(.libraryDetailModal) .trackJourneyFavorite .trackLove.hasUserRating{color:#d6ab35!important} #albumModal:not(.libraryDetailModal) .trackJourneyFooter{ display:grid!important; grid-template-columns:auto minmax(60px,1fr) auto minmax(60px,1fr)!important; align-items:center!important; gap:14px!important; min-height:62px!important; padding:12px 22px!important; color:rgba(245,240,232,.56)!important; font:700 11px/1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; letter-spacing:.12em!important; text-transform:uppercase!important; } #albumModal:not(.libraryDetailModal) .trackJourneyFooter:not(.hasAction){display:flex!important;justify-content:center!important} #albumModal:not(.libraryDetailModal) .trackJourneyFooter:not(.hasAction)>i{display:none!important} #albumModal:not(.libraryDetailModal) .trackJourneyFooterMeta{white-space:nowrap!important} #albumModal:not(.libraryDetailModal) .trackJourneyFooter>i{ display:block!important; width:100%!important; height:1px!important; background:linear-gradient(90deg,transparent,rgba(214,171,53,.55))!important; } #albumModal:not(.libraryDetailModal) .trackJourneyFooter>i:last-child{background:linear-gradient(90deg,rgba(214,171,53,.55),transparent)!important} #albumModal:not(.libraryDetailModal) .trackJourneyFooter .viewTracklist{ width:auto!important; min-height:0!important; padding:8px 0!important; border:0!important; background:transparent!important; color:#d6ab35!important; font:700 11px/1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; letter-spacing:.12em!important; white-space:nowrap!important; } #albumModal:not(.libraryDetailModal) .trackJourneyFooter .viewTracklist:hover, #albumModal:not(.libraryDetailModal) .trackJourneyFooter .viewTracklist:focus-visible{color:#efc44d!important;transform:translateY(1px)!important;outline:0!important} #albumModal:not(.libraryDetailModal) .albumDiscoveryRail{gap:14px!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeThis, #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy{ padding:20px!important; border:1px solid rgba(214,171,53,.13)!important; border-radius:16px!important; background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008)),#0d0d10!important; box-shadow:0 14px 38px rgba(0,0,0,.10)!important; } #albumModal:not(.libraryDetailModal) .albumDiscoveryRail .sameArtistEssentials{display:none!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeThis>header>span, #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy>header>div>span{ color:#d6ab35!important; font:700 11px/1.1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; letter-spacing:.14em!important; text-transform:uppercase!important; } #albumModal:not(.libraryDetailModal) .albumMoreLikeThis>header>h3{ margin:7px 0 0!important; color:#f3eee5!important; font:600 26px/1.02 var(--muze-serif,Georgia,"Times New Roman",serif)!important; letter-spacing:-.02em!important; } #albumModal:not(.libraryDetailModal) .albumMoreLikeGrid{gap:10px!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeCard{ grid-template-columns:80px minmax(0,1fr) auto!important; gap:12px!important; min-height:86px!important; padding:3px!important; } #albumModal:not(.libraryDetailModal) .albumMoreLikeArt{width:80px!important;height:80px!important;border-radius:9px!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeCopy>strong{ display:-webkit-box!important; overflow:hidden!important; color:#f3eee5!important; font:500 17px/1.05 var(--muze-serif,Georgia,"Times New Roman",serif)!important; letter-spacing:-.012em!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; } #albumModal:not(.libraryDetailModal) .albumMoreLikeCopy>small{ margin-top:5px!important; color:rgba(243,238,229,.58)!important; font-size:12px!important; } #albumModal:not(.libraryDetailModal) .albumMoreLikeScore{ padding:8px 7px!important; border-color:rgba(214,171,53,.38)!important; color:#d6ab35!important; font-size:12px!important; } #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy{border-color:rgba(214,171,53,.11)!important} #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy>header{align-items:flex-start!important;margin-bottom:18px!important} #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy>header>div>h3{ display:block!important; margin:7px 0 0!important; color:#f3eee5!important; font:600 24px/1.05 var(--muze-serif,Georgia,"Times New Roman",serif)!important; letter-spacing:-.015em!important; } } /* Compact only the track ledger by roughly 10%; retain its full column width. */ @media(min-width:1051px){ #albumModal:not(.libraryDetailModal) .trackJourneyHeader{ min-height:47px!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow{ min-height:52px!important; height:52px!important; padding-block:5px!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow.isMostLoved{ height:52px!important; } #albumModal:not(.libraryDetailModal) .trackJourneyFooter{ min-height:50px!important; } #albumModal:not(.libraryDetailModal) .trackJourneyTitle>strong{ font-size:14px!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse{ width:31px!important; height:31px!important; min-width:31px!important; } } /* Track ledger play controls: keep the glyph and hit area, remove the ring. */ @media(min-width:1051px){ #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse{ border-color:transparent!important; background:transparent!important; box-shadow:none!important; color:rgba(243,238,229,.46)!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse:hover, #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse:focus-visible{ color:rgba(243,238,229,.78)!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse::before{ border-left-color:rgba(243,238,229,.46)!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse:hover::before, #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse:focus-visible::before{ border-left-color:rgba(243,238,229,.78)!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse:not(.isPreviewing)::before{ border-left-color:rgba(243,238,229,.46)!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow:hover .trackPulse:not(.isPreviewing), #albumModal:not(.libraryDetailModal) .trackJourneyRow:focus-within .trackPulse:not(.isPreviewing), #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse:not(.isPreviewing):focus-visible{ border-color:transparent!important; background:transparent!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow:hover .trackPulse:not(.isPreviewing)::before, #albumModal:not(.libraryDetailModal) .trackJourneyRow:focus-within .trackPulse:not(.isPreviewing)::before, #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse:not(.isPreviewing):hover::before, #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse:not(.isPreviewing):focus-visible::before{ border-left-color:rgba(243,238,229,.78)!important; } } /* The Most Loved row is distinguished by tone and marker, not an outline. */ @media(min-width:1051px){ #albumModal:not(.libraryDetailModal) .trackJourneyRow.isMostLoved{ border-color:transparent!important; box-shadow:none!important; } } /* Calmer Tracks balance: protect ledger readability and quiet the supporting rail. */ @media(min-width:1051px){ #albumModal:not(.libraryDetailModal) .trackJourneyList{ background:radial-gradient(circle at 52% 0%,rgba(91,45,85,.035),transparent 40%),linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008)),#0d0e11!important; } #albumModal:not(.libraryDetailModal) .trackJourneyHeart{ column-gap:24px!important; } #albumModal:not(.libraryDetailModal) .trackHeartPulseLabel{ margin-bottom:12px!important; } #albumModal:not(.libraryDetailModal) .trackCommunityPulse.large{ height:40px!important; opacity:.84!important; } #albumModal:not(.libraryDetailModal) .trackCommunityPulse.large i:nth-child(4n+1){height:12px!important} #albumModal:not(.libraryDetailModal) .trackCommunityPulse.large i:nth-child(4n+2){height:23px!important} #albumModal:not(.libraryDetailModal) .trackCommunityPulse.large i:nth-child(4n+3){height:33px!important} #albumModal:not(.libraryDetailModal) .trackCommunityPulse.large i:nth-child(4n){height:27px!important} #albumModal:not(.libraryDetailModal) .trackHeartArtwork{ align-self:center!important; padding-left:2px!important; } #albumModal:not(.libraryDetailModal) .trackHeartArtwork>div{ display:grid!important; gap:3px!important; margin-top:10px!important; } #albumModal:not(.libraryDetailModal) .trackHeartArtwork>div strong, #albumModal:not(.libraryDetailModal) .trackHeartArtwork>div span{ line-height:1.22!important; } #albumModal:not(.libraryDetailModal) .albumMoreLikeCopy>strong{ display:-webkit-box!important; overflow:hidden!important; color:#f3eee5!important; font-family:var(--muze-serif,Georgia,"Times New Roman",serif)!important; font-size:13px!important; font-weight:400!important; line-height:1.08!important; letter-spacing:-.012em!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; } #albumModal:not(.libraryDetailModal) .albumMoreLikeCopy>small{ color:rgba(243,238,229,.45)!important; } #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy{ border-color:rgba(214,171,53,.11)!important; background:linear-gradient(180deg,rgba(255,255,255,.014),rgba(255,255,255,.006)),#0d0d10!important; } #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy>header>div>h3{ font-size:23px!important; line-height:1.06!important; } } /* One hero play action; compress the cinematic panel without crowding it. */ @media(min-width:1051px){ #albumModal:not(.libraryDetailModal) .trackHeartArtworkPlay{ display:none!important; } #albumModal:not(.libraryDetailModal) .trackJourneyHeart{ min-height:250px!important; height:250px!important; padding:16px 26px!important; } #albumModal:not(.libraryDetailModal) .trackJourneyHeart.hasArtistCutout::before{ background: radial-gradient(circle at 50% 70%,rgba(91,45,85,.14),transparent 46%), linear-gradient(110deg,#07080a 0%,#0c0b0f 50%,#07080a 100%)!important; filter:none!important; } #albumModal:not(.libraryDetailModal) .trackJourneyHeart.hasArtistCutout::after{ content:""!important; position:absolute!important; inset:0!important; z-index:-1!important; pointer-events:none!important; background: linear-gradient(90deg,rgba(8,8,11,.42) 0%,rgba(8,8,11,.04) 38%,rgba(8,8,11,.04) 62%,rgba(8,8,11,.46) 100%), radial-gradient(circle at 50% 58%,rgba(214,171,53,.10),transparent 42%), var(--artist-cutout) var(--artist-cutout-position,37.5%) var(--artist-cutout-y,bottom)/auto var(--artist-cutout-scale,96%) no-repeat!important; opacity:.72!important; filter:saturate(.72) brightness(.76) contrast(1.04)!important; } #albumModal:not(.libraryDetailModal) .trackJourneyHeart.hasArtistCutout.hasArtistFanart::after{ background: linear-gradient(90deg,rgba(8,8,11,.72) 0%,rgba(8,8,11,.20) 40%,rgba(8,8,11,.14) 66%,rgba(8,8,11,.62) 100%), linear-gradient(0deg,rgba(8,8,11,.54),rgba(8,8,11,.12) 55%,rgba(8,8,11,.32)), var(--artist-cutout) center 43%/cover no-repeat!important; opacity:.74!important; filter:saturate(.68) brightness(.72) contrast(1.04)!important; } #albumModal:not(.libraryDetailModal) .trackHeartType{ margin-bottom:10px!important; } #albumModal:not(.libraryDetailModal) .trackJourneyHeart h4{ font-size:clamp(30px,2.7vw,44px)!important; } #albumModal:not(.libraryDetailModal) .trackHeartArtist{ margin-top:8px!important; font-size:15px!important; } #albumModal:not(.libraryDetailModal) .trackHeartPlay{ margin-top:16px!important; } #albumModal:not(.libraryDetailModal) .trackHeartPlay .featurePlay{ width:47px!important; height:47px!important; min-width:47px!important; } #albumModal:not(.libraryDetailModal) .trackHeartArtwork{ width:135.52px!important; } #albumModal:not(.libraryDetailModal) .trackHeartArtwork>img, #albumModal:not(.libraryDetailModal) .trackHeartArtwork>strong{ width:135.52px!important; height:135.52px!important; } #albumModal:not(.libraryDetailModal) .trackHeartArtwork:has(>img.isAlbum3dFace){ width:186.34px!important; transform:translateX(-144px)!important; } #albumModal:not(.libraryDetailModal) .trackHeartArtwork>img.isAlbum3dFace{ width:186.34px!important; height:186.34px!important; object-fit:contain!important; transform:none!important; } } /* Desktop tracklist ratings and personal-love hierarchy. */ @media(min-width:1051px){ #albumModal:not(.libraryDetailModal) .trackJourneyList .trackRatingStars i::after{ color:#d6ab35!important; } #albumModal:not(.libraryDetailModal) .trackJourneyList .trackJourneyFavorite .trackLove{ color:rgba(245,240,232,.38)!important; } #albumModal:not(.libraryDetailModal) .trackJourneyList .trackJourneyFavorite .trackLove:not(.hasUserRating):hover, #albumModal:not(.libraryDetailModal) .trackJourneyList .trackJourneyFavorite .trackLove:not(.hasUserRating):focus-visible{ color:rgba(214,171,53,.76)!important; } #albumModal:not(.libraryDetailModal) .trackJourneyList .trackJourneyFavorite .trackLove.hasUserRating{ color:#d6ab35!important; } #albumModal:not(.libraryDetailModal) .trackJourneyList .trackJourneyFavorite .trackLove.hasUserRating:hover, #albumModal:not(.libraryDetailModal) .trackJourneyList .trackJourneyFavorite .trackLove.hasUserRating:focus-visible{ color:#efbd43!important; } #albumModal:not(.libraryDetailModal) .trackJourneyList .trackJourneyFavorite .trackLove:disabled, #albumModal:not(.libraryDetailModal) .trackJourneyList .trackJourneyFavorite .trackLove[aria-disabled="true"]{ color:rgba(245,240,232,.18)!important; cursor:not-allowed!important; } } /* Retired landing-page cascade seal. */ @media(min-width:99999px){ #albumModal:not(.libraryDetailModal) .trackJourneyHeart{ grid-template-columns:minmax(250px,1.15fr) minmax(190px,.8fr) 140px!important; gap:26px!important; min-height:270px!important; height:auto!important; padding:28px 30px!important; } #albumModal:not(.libraryDetailModal) .trackJourneyHeart h4{ font-size:clamp(38px,3.5vw,56px)!important; line-height:1!important; white-space:nowrap!important; } #albumModal:not(.libraryDetailModal) .trackHeartArtist{margin-top:10px!important;font-size:18px!important} #albumModal:not(.libraryDetailModal) .trackHeartPlay{margin-top:23px!important} #albumModal:not(.libraryDetailModal) .trackHeartPlay .featurePlay{width:56px!important;height:56px!important;min-width:56px!important} #albumModal:not(.libraryDetailModal) .trackHeartArtwork{width:140px!important} #albumModal:not(.libraryDetailModal) .trackHeartArtwork>img, #albumModal:not(.libraryDetailModal) .trackHeartArtwork>strong{width:140px!important;height:140px!important} #albumModal:not(.libraryDetailModal) .trackCommunityPulse.large{height:46px!important;opacity:.9!important} #albumModal:not(.libraryDetailModal) .trackHeartPulseLabel{margin-bottom:13px!important} #albumModal:not(.libraryDetailModal) .trackJourneyHeader{min-height:52px!important} #albumModal:not(.libraryDetailModal) .trackJourneyRow, #albumModal:not(.libraryDetailModal) .trackJourneyRow.isMostLoved{min-height:62px!important;height:62px!important;padding-block:0!important} #albumModal:not(.libraryDetailModal) .trackJourneyTitle>strong{font-size:15px!important} #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse{ width:31px!important;height:31px!important;min-width:31px!important; border:1px solid rgba(245,240,232,.22)!important; border-radius:50%!important; background:transparent!important; color:#d6ab35!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse::before, #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse:not(.isPreviewing)::before{border-left-color:#d6ab35!important} #albumModal:not(.libraryDetailModal) .trackJourneyRow:hover .trackPulse:not(.isPreviewing), #albumModal:not(.libraryDetailModal) .trackJourneyRow:focus-within .trackPulse:not(.isPreviewing), #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse:not(.isPreviewing):focus-visible{ border-color:rgba(214,171,53,.58)!important; background:rgba(214,171,53,.06)!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow:hover .trackPulse:not(.isPreviewing)::before, #albumModal:not(.libraryDetailModal) .trackJourneyRow:focus-within .trackPulse:not(.isPreviewing)::before, #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse:not(.isPreviewing):hover::before, #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse:not(.isPreviewing):focus-visible::before{border-left-color:#d6ab35!important} #albumModal:not(.libraryDetailModal) .trackJourneyRow.isMostLoved .trackPulse, #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse.isPreviewing{ border-color:rgba(214,171,53,.55)!important; background:linear-gradient(180deg,#f0c94d,#ddb12e)!important; color:#101014!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow.isMostLoved .trackPulse::before, #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse.isPreviewing::before{border-left-color:#101014!important} #albumModal:not(.libraryDetailModal) .trackJourneyRow.isMostLoved{ width:100%!important; margin:0!important; padding-inline:20px!important; border:0!important; border-bottom:1px solid rgba(255,255,255,.055)!important; border-radius:0!important; background:linear-gradient(90deg,rgba(214,171,53,.08),rgba(91,45,85,.055),transparent)!important; box-shadow:inset 2px 0 0 #d6ab35!important; } #albumModal:not(.libraryDetailModal) .trackJourneyFooter{min-height:62px!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeCard{grid-template-columns:80px minmax(0,1fr) auto!important;min-height:86px!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeArt{width:80px!important;height:80px!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeCopy>strong{font-size:17px!important;font-weight:500!important;line-height:1.05!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeCopy>small{font-size:12px!important} #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy>header>div>h3{display:block!important;font-size:24px!important} } /* Retired landing-page density experiment. */ @media(min-width:99999px){ #albumModal:not(.libraryDetailModal) .albumTrackMain{gap:4px!important} #albumModal:not(.libraryDetailModal) .trackJourneyHeart{ grid-template-columns:minmax(235px,1.15fr) minmax(175px,.8fr) 126px!important; gap:23px!important; min-height:210px!important; padding:18px 27px!important; } #albumModal:not(.libraryDetailModal) .trackHeartType{margin-bottom:11px!important;font-size:10px!important} #albumModal:not(.libraryDetailModal) .trackJourneyHeart h4{font-size:clamp(34px,3.1vw,50px)!important} #albumModal:not(.libraryDetailModal) .trackHeartArtist{margin-top:8px!important;font-size:16px!important} #albumModal:not(.libraryDetailModal) .trackHeartPlay{margin-top:19px!important;gap:11px!important} #albumModal:not(.libraryDetailModal) .trackHeartPlay .featurePlay{width:50px!important;height:50px!important;min-width:50px!important} #albumModal:not(.libraryDetailModal) .trackHeartPlay>b{font-size:11px!important} #albumModal:not(.libraryDetailModal) .trackHeartPlay>time{font-size:12px!important} #albumModal:not(.libraryDetailModal) .trackHeartPulseLabel{margin-bottom:11px!important;font-size:10px!important} #albumModal:not(.libraryDetailModal) .trackCommunityPulse.large{height:41px!important} #albumModal:not(.libraryDetailModal) .trackHeartScore>strong{font-size:41px!important} #albumModal:not(.libraryDetailModal) .trackHeartScore>small{font-size:11px!important} #albumModal:not(.libraryDetailModal) .trackHeartPulseMeta{margin-top:10px!important;font-size:9px!important} #albumModal:not(.libraryDetailModal) .trackHeartArtwork{width:126px!important} #albumModal:not(.libraryDetailModal) .trackHeartArtwork>img, #albumModal:not(.libraryDetailModal) .trackHeartArtwork>strong{width:126px!important;height:126px!important} #albumModal:not(.libraryDetailModal) .trackHeartArtwork>div{margin-top:8px!important} #albumModal:not(.libraryDetailModal) .trackHeartArtwork>div strong{font-size:17px!important} #albumModal:not(.libraryDetailModal) .trackHeartArtwork>div span{font-size:10px!important} #albumModal:not(.libraryDetailModal) .trackSequenceIntro{min-height:78px!important;padding:15px 22px!important} #albumModal:not(.libraryDetailModal) .trackSequenceIntro div>p{margin-bottom:6px!important;font-size:10px!important} #albumModal:not(.libraryDetailModal) .trackSequenceIntro div>span, #albumModal:not(.libraryDetailModal) .trackSequenceIntro>p{font-size:12px!important} #albumModal:not(.libraryDetailModal) .trackSequenceIntro>p span{font-size:24px!important} #albumModal:not(.libraryDetailModal) .trackJourneyHeader{min-height:47px!important;font-size:9px!important} #albumModal:not(.libraryDetailModal) .trackJourneyRow, #albumModal:not(.libraryDetailModal) .trackJourneyRow.isMostLoved{min-height:55px!important;height:55px!important} #albumModal:not(.libraryDetailModal) .trackJourneyTitle>strong{font-size:13px!important} #albumModal:not(.libraryDetailModal) .trackJourneyRow .trackPulse{width:28px!important;height:28px!important;min-width:28px!important} #albumModal:not(.libraryDetailModal) .trackRatingStars{min-width:82px!important;font-size:12px!important} #albumModal:not(.libraryDetailModal) .trackJourneyPulseButton small{font-size:10px!important} #albumModal:not(.libraryDetailModal) .trackJourneyRow>time{font-size:11px!important} #albumModal:not(.libraryDetailModal) .trackJourneyFavorite .trackLove{font-size:18px!important} #albumModal:not(.libraryDetailModal) .trackJourneyFooter{min-height:54px!important;padding-block:10px!important;font-size:10px!important} #albumModal:not(.libraryDetailModal) .trackJourneyFooter .viewTracklist{font-size:10px!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeThis, #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy{padding:18px!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeThis>header>h3{font-size:24px!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeCard{grid-template-columns:72px minmax(0,1fr) auto!important;min-height:78px!important;gap:11px!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeArt{width:72px!important;height:72px!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeCopy>strong{font-size:15px!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeCopy>small{font-size:10px!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeScore{font-size:11px!important;padding:7px 6px!important} #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy>header>div>h3{font-size:22px!important} } /* Preserve the approved discovery rail while the desktop hero and tracklist use their prior design. */ @media(min-width:1051px){ #albumModal:not(.libraryDetailModal) .albumDiscoveryRail{gap:14px!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeThis, #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy{ padding:18px!important; border:1px solid rgba(214,171,53,.13)!important; border-radius:16px!important; background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008)),#0d0d10!important; box-shadow:0 14px 38px rgba(0,0,0,.10)!important; } #albumModal:not(.libraryDetailModal) .albumDiscoveryRail .sameArtistEssentials{display:none!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeThis>header>span, #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy>header>div>span{ color:#d6ab35!important; font:700 11px/1.1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; letter-spacing:.14em!important; text-transform:uppercase!important; } #albumModal:not(.libraryDetailModal) .albumMoreLikeThis>header>h3{ margin:7px 0 0!important; color:#f3eee5!important; font:600 24px/1.02 var(--muze-serif,Georgia,"Times New Roman",serif)!important; letter-spacing:-.02em!important; } #albumModal:not(.libraryDetailModal) .albumMoreLikeGrid{gap:10px!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeCard{ grid-template-columns:72px minmax(0,1fr) auto!important; gap:11px!important; min-height:78px!important; padding:3px!important; } #albumModal:not(.libraryDetailModal) .albumMoreLikeArt{width:72px!important;height:72px!important;border-radius:9px!important} #albumModal:not(.libraryDetailModal) .albumMoreLikeCopy>strong{ display:-webkit-box!important; overflow:hidden!important; color:#f3eee5!important; font:500 15px/1.05 var(--muze-serif,Georgia,"Times New Roman",serif)!important; letter-spacing:-.012em!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; } #albumModal:not(.libraryDetailModal) .albumMoreLikeCopy>small{ margin-top:5px!important; color:rgba(243,238,229,.58)!important; font-size:10px!important; } #albumModal:not(.libraryDetailModal) .albumMoreLikeScore{ padding:7px 6px!important; border-color:rgba(214,171,53,.38)!important; color:#d6ab35!important; font-size:11px!important; } #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy{ border-color:rgba(214,171,53,.11)!important; background:linear-gradient(180deg,rgba(255,255,255,.014),rgba(255,255,255,.006)),#0d0d10!important; } #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy>header{align-items:flex-start!important;margin-bottom:18px!important} #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy>header>div>h3{ display:block!important; margin:7px 0 0!important; color:#f3eee5!important; font:600 22px/1.06 var(--muze-serif,Georgia,"Times New Roman",serif)!important; letter-spacing:-.015em!important; } } /* Keep Same Artist Essentials hidden while retaining both discovery cards. */ @media(min-width:1051px){ #albumModal:not(.libraryDetailModal) .sameArtistEssentials{ display:none!important; } } /* Retired desktop album pager experiment. */ .albumStageNavigation{display:none} @media(min-width:99999px){ #albumModal.albumStageMode:not(.libraryDetailModal) .modalPanel{ height:95vh!important; max-height:95vh!important; overflow:hidden!important; } #albumModal.albumStageMode:not(.libraryDetailModal) .linerAlbumPage[data-album-stage]{ height:100%!important; min-height:100%!important; box-sizing:border-box!important; overflow:hidden!important; } #albumModal.albumStageMode:not(.libraryDetailModal) .linerAlbumPage[data-album-stage]>.linerHero, #albumModal.albumStageMode:not(.libraryDetailModal) .linerAlbumPage[data-album-stage]>.linerContentGrid, #albumModal.albumStageMode:not(.libraryDetailModal) .linerAlbumPage[data-album-stage]>#trackRatingsList, #albumModal.albumStageMode:not(.libraryDetailModal) .linerAlbumPage[data-album-stage]>.listenerCardsSection, #albumModal.albumStageMode:not(.libraryDetailModal) .linerAlbumPage[data-album-stage]>.linerPlayer{ display:none!important; } #albumModal.albumStageMode:not(.libraryDetailModal) .linerAlbumPage[data-album-stage="overview"]>.linerHero{ display:grid!important; animation:albumStageEnter .22s ease both; } #albumModal.albumStageMode:not(.libraryDetailModal) .linerAlbumPage[data-album-stage="loved"]>#trackRatingsList, #albumModal.albumStageMode:not(.libraryDetailModal) .linerAlbumPage[data-album-stage="tracks"]>#trackRatingsList{ display:block!important; margin-top:0!important; animation:albumStageEnter .22s ease both; } #albumModal.albumStageMode:not(.libraryDetailModal) .linerAlbumPage[data-album-stage="loved"] .trackJourneyList, #albumModal.albumStageMode:not(.libraryDetailModal) .linerAlbumPage[data-album-stage="loved"] .albumDiscoveryRail, #albumModal.albumStageMode:not(.libraryDetailModal) .linerAlbumPage[data-album-stage="loved"] .albumTrackRailResizeHandle, #albumModal.albumStageMode:not(.libraryDetailModal) .linerAlbumPage[data-album-stage="loved"] .albumJourneyArc{ display:none!important; } #albumModal.albumStageMode:not(.libraryDetailModal) .linerAlbumPage[data-album-stage="loved"] .trackJourneyHeart{ display:grid!important; } #albumModal.albumStageMode:not(.libraryDetailModal) .linerAlbumPage[data-album-stage="tracks"] .trackJourneyHeart{ display:none!important; } #albumModal.albumStageMode:not(.libraryDetailModal) .linerAlbumPage[data-album-stage="tracks"] .trackJourneyList{ display:block!important; } #albumModal.albumStageMode:not(.libraryDetailModal) .linerAlbumPage[data-album-stage="comments"]>.linerContentGrid{ display:grid!important; height:calc(95vh - 92px)!important; min-height:0!important; max-height:calc(95vh - 92px)!important; margin-top:0!important; overflow:hidden!important; animation:albumStageEnter .22s ease both; } #albumModal.albumStageMode:not(.libraryDetailModal) .linerAlbumPage[data-album-stage="comments"]>.linerContentGrid>.linerPanel{ height:100%!important; min-height:0!important; box-sizing:border-box!important; overflow:hidden!important; } #albumModal.albumStageMode:not(.libraryDetailModal) .linerAlbumPage[data-album-stage="comments"] #albumRatingsSection{ display:flex!important; flex-direction:column!important; } #albumModal.albumStageMode:not(.libraryDetailModal) .linerAlbumPage[data-album-stage="comments"] #commentsList{ flex:1 1 auto!important; min-height:72px!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; } #albumModal.albumStageMode:not(.libraryDetailModal) .albumStageNavigation{ display:block!important; position:absolute!important; z-index:40!important; inset:0!important; pointer-events:none!important; } #albumModal.albumStageMode:not(.libraryDetailModal) .albumStageArrow{ position:absolute!important; top:50%!important; display:grid!important; place-items:center!important; width:44px!important; height:44px!important; padding:0!important; transform:translateY(-50%)!important; border:1px solid rgba(214,171,53,.34)!important; border-radius:50%!important; background:rgba(8,8,11,.86)!important; color:rgba(245,240,232,.82)!important; box-shadow:0 10px 28px rgba(0,0,0,.28)!important; font:400 34px/1 Georgia,serif!important; pointer-events:auto!important; cursor:pointer!important; backdrop-filter:blur(8px)!important; transition:color .16s ease,border-color .16s ease,background .16s ease,transform .16s ease!important; } #albumModal.albumStageMode:not(.libraryDetailModal) .albumStageArrow.previous{left:9px!important} #albumModal.albumStageMode:not(.libraryDetailModal) .albumStageArrow.next{right:9px!important} #albumModal.albumStageMode:not(.libraryDetailModal) .albumStageArrow:hover, #albumModal.albumStageMode:not(.libraryDetailModal) .albumStageArrow:focus-visible{ border-color:rgba(214,171,53,.72)!important; background:rgba(24,20,13,.94)!important; color:#efbd43!important; outline:none!important; } #albumModal.albumStageMode:not(.libraryDetailModal) .albumStageArrow:disabled{ visibility:hidden!important; pointer-events:none!important; } #albumModal.albumStageMode:not(.libraryDetailModal) .albumStageStatus{ position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip-path:inset(50%)!important; white-space:nowrap!important; } @keyframes albumStageEnter{ from{opacity:.45;transform:translateX(10px)} to{opacity:1;transform:translateX(0)} } } /* Reference-density desktop view: smaller contents, unchanged outer track-area width. */ @media(min-width:1051px){ #albumModal:not(.libraryDetailModal) #trackRatingsList>.albumTrackSectionLayout{ width:111.111111%!important; max-width:111.111111%!important; zoom:.9!important; } /* Reveal each clipped discovery card as its own temporary desktop hover drawer. */ #albumModal:not(.libraryDetailModal) .albumDiscoveryRail{ --discovery-hover-reveal:clamp(142px,8vw,154px); position:relative!important; z-index:26!important; align-self:stretch!important; } #albumModal:not(.libraryDetailModal) .albumDiscoveryRail:not(:has(.albumInfluenceLegacy)){ justify-content:center!important; box-sizing:border-box!important; padding-bottom:80px!important; } #albumModal:not(.libraryDetailModal) .albumMoreLikeThis, #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy{ position:relative!important; z-index:1!important; transform:translateX(0); transition:transform .24s cubic-bezier(.2,.75,.25,1),filter .24s ease!important; will-change:transform; } #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy{ margin-top:auto!important; } #albumModal:not(.libraryDetailModal) .albumLegacyCard{ grid-template-columns:64.9px minmax(0,1fr)!important; } #albumModal:not(.libraryDetailModal) .albumLegacyCard>span{ width:64.9px!important; height:64.9px!important; } #albumModal:not(.libraryDetailModal) .albumLegacyCard>span>b{ font-size:21.9px!important; } #albumModal:not(.libraryDetailModal) .albumLegacyCard>div>strong{ font-size:13.1px!important; } #albumModal:not(.libraryDetailModal) .albumLegacyCard>div>small{ font-size:9.3px!important; } #albumModal:not(.libraryDetailModal) .albumMoreLikeThis::before, #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy::before{ content:""; position:absolute; top:0; right:calc(-1 * var(--discovery-hover-reveal)); bottom:0; width:var(--discovery-hover-reveal); } #albumModal:not(.libraryDetailModal) .albumMoreLikeThis:hover, #albumModal:not(.libraryDetailModal) .albumMoreLikeThis:focus-within, #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy:hover, #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy:focus-within{ z-index:2!important; transform:translateX(calc(-1 * var(--discovery-hover-reveal))); filter:drop-shadow(18px 16px 30px rgba(0,0,0,.34)); } } @media(min-width:1051px) and (prefers-reduced-motion:reduce){ #albumModal:not(.libraryDetailModal) .albumMoreLikeThis, #albumModal:not(.libraryDetailModal) .albumInfluenceLegacy{ transition:none!important; } } /* Keep the Most Loved Track artwork frame borderless. */ #albumModal:not(.libraryDetailModal) .trackHeartArtwork, #albumModal:not(.libraryDetailModal) .trackHeartArtwork>img, #albumModal:not(.libraryDetailModal) .trackHeartArtwork>strong{ border:0!important; outline:0!important; } #albumModal:not(.libraryDetailModal) .trackHeartArtwork>div{ display:none!important; } /* Attribute TheAudioDB artwork in context without competing with the feature content. */ #albumModal:not(.libraryDetailModal) .trackAudioDbCredit{ position:absolute!important; z-index:3!important; right:18px!important; bottom:8px!important; color:rgba(245,240,232,.42)!important; font:600 8px/1.2 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; letter-spacing:.045em!important; text-decoration:none!important; } #albumModal:not(.libraryDetailModal) .trackAudioDbCredit:hover, #albumModal:not(.libraryDetailModal) .trackAudioDbCredit:focus-visible{ color:rgba(214,171,53,.82)!important; text-decoration:underline!important; } /* User-selected lighter plum; retain the existing Spotify pill geometry. */ #albumModal:not(.libraryDetailModal) .linerActions a{ border-color:#5e3c78!important; background:#5e3c78!important; color:#fffaf2!important; } /* Match the compact editorial typography used by the Exceptional reference. */ #albumModal:not(.libraryDetailModal) .linerHeroStatsDeck .exceptionalStatus, #albumModal:not(.libraryDetailModal) .linerHeroStatsDeck .exceptionalStatus b, #albumModal:not(.libraryDetailModal) .linerHeroStatsDeck .linerAccoladeStat>span{ color:#d6ab35!important; font:700 10px/1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; letter-spacing:.14em!important; text-transform:uppercase!important; } #albumModal:not(.libraryDetailModal) .linerHeroStatsDeck .linerAccoladeStat::after{ bottom:50px!important; } /* Desktop compact track preview: share one exact bottom edge with the sidebar. */ @media(min-width:1051px){ #albumModal.albumPageMode:not(.libraryDetailModal) .linerHeroSide{ position:relative!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .heroSideCard.influence{ position:relative!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .heroSideCard.influence .influencePreviewDesktop{ -webkit-line-clamp:2!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .heroSideCard.influence .influenceExpandHint{ position:static!important; z-index:2!important; display:flex!important; width:max-content!important; margin:-3px 0 7px!important; color:#d6ab35!important; font:700 9px/1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; letter-spacing:.09em!important; text-transform:uppercase!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .heroSideCard.influence.is-expanded{ z-index:20!important; height:auto!important; max-height:none!important; padding-bottom:17px!important; overflow:visible!important; background:#101014!important; box-shadow:0 18px 36px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.035)!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .heroSideCard.influence.is-expanded .influencePreviewDesktop{ display:none!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .heroSideCard.influence.is-expanded .influenceFull{ display:block!important; overflow:visible!important; white-space:normal!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackHeader{ min-height:60px!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackTitle{ position:relative!important; display:flex!important; min-width:0!important; padding:0 0 9px!important; flex-direction:column!important; gap:3px!important; align-items:flex-start!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackTitle::after{ content:""; position:absolute; bottom:0; left:0; width:50px; height:1px; background:#d6ab35; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSequenceLabel{ padding:0!important; border-radius:0!important; background:transparent!important; color:#d6ab35!important; font:700 10px/1.2 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; letter-spacing:.12em!important; text-transform:uppercase!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackTitleRow{ display:flex!important; gap:10px!important; align-items:center!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackHeader h3{ color:#f3efe6!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackCount{ padding:4px 8px!important; border-radius:999px!important; background:rgba(255,255,255,.07)!important; color:rgba(243,239,230,.58)!important; font-size:10px!important; } /* The album modal already starts below the global header; avoid applying that offset twice in Overview. */ #albumModal.albumPageMode:not(.libraryDetailModal) .linerAlbumPage.albumSubviewOpen:has(.albumPageSubview[data-album-page-subview="overview"])>.linerTabs{ top:80px!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSidebar{ height:426px!important; min-height:426px!important; max-height:426px!important; padding-top:72px!important; box-sizing:border-box!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackColumn .trackJourneyList:not(.isExpanded){ display:flex!important; height:578px!important; min-height:578px!important; max-height:578px!important; box-sizing:border-box!important; flex-direction:column!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackColumn .trackJourneyRow{ height:56px!important; min-height:56px!important; box-sizing:border-box!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackColumn .trackJourneyList:not(.isExpanded) .trackJourneyRow{ height:54px!important; min-height:54px!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackColumn .trackJourneyList:not(.isExpanded)>.viewTracklist{ width:auto!important; min-height:36px!important; height:36px!important; margin:12px 15px 19px!important; margin-top:auto!important; padding:0 14px!important; border:1px solid rgba(214,171,53,.32)!important; border-radius:999px!important; background:rgba(214,171,53,.035)!important; } } @media(min-width:1321px){ #albumModal.albumPageMode:not(.libraryDetailModal) .linerHeroSide{grid-template-rows:154px 112px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .heroSideCard.influence.is-expanded{position:absolute!important;inset:0 0 auto!important} #albumModal.albumPageMode:not(.libraryDetailModal) .heroSideCard.mood{grid-row:2!important} } @media(min-width:1161px) and (max-width:1320px){ #albumModal.albumPageMode:not(.libraryDetailModal) .linerHeroSide{grid-template-rows:144px 104px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .heroSideCard.influence.is-expanded{position:absolute!important;inset:0 0 auto!important} #albumModal.albumPageMode:not(.libraryDetailModal) .heroSideCard.mood{grid-row:2!important} } @media(min-width:1051px) and (max-width:1160px){ #albumModal.albumPageMode:not(.libraryDetailModal) .linerHeroSide{grid-template-rows:112px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .heroSideCard.influence{grid-column:1!important;grid-row:1!important} #albumModal.albumPageMode:not(.libraryDetailModal) .heroSideCard.influence.is-expanded{position:absolute!important;top:0!important;right:auto!important;left:0!important;width:calc(50% - 6px)!important} #albumModal.albumPageMode:not(.libraryDetailModal) .heroSideCard.mood{grid-column:2!important;grid-row:1!important} } /* Premium asymmetric rating/rank pair, scaled to the existing Muze hero. */ #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo{ display:grid!important; grid-template-columns:minmax(0,1.28fr) minmax(0,1fr)!important; gap:8px!important; align-items:end!important; height:129px!important; padding:0!important; border:0!important; background:transparent!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat, #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.linerAccoladeStat{ position:relative!important; display:flex!important; box-sizing:border-box!important; min-width:0!important; flex-direction:column!important; justify-content:flex-start!important; align-items:center!important; margin:0!important; text-align:center!important; transition:border-color 160ms ease,box-shadow 160ms ease!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat{ width:100%!important; height:129px!important; min-height:129px!important; padding:11px!important; border:1.5px solid rgba(220,174,55,.72)!important; border-radius:12px!important; background:linear-gradient(145deg,rgba(45,34,15,.28) 0%,rgba(13,13,15,.98) 42%,#08080a 100%)!important; box-shadow:0 0 28px rgba(212,165,45,.12),inset 0 1px 0 rgba(255,220,120,.05)!important; transform:translateY(-3px)!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.linerAccoladeStat{ width:100%!important; height:117px!important; min-height:117px!important; padding:10px 8px!important; border:1px solid rgba(191,144,42,.35)!important; border-radius:11px!important; background:linear-gradient(145deg,rgba(24,21,17,.32),#08080a)!important; box-shadow:0 0 16px rgba(212,165,45,.04)!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:hover{ border-color:rgba(231,188,67,.86)!important; box-shadow:0 0 34px rgba(212,165,45,.17),inset 0 1px 0 rgba(255,220,120,.07)!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.linerAccoladeStat:hover{ border-color:rgba(191,144,42,.52)!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat>strong{ order:0!important; justify-content:center!important; margin:11px 0 6px!important; color:#f5f0e7!important; font:700 38px/.95 var(--muze-serif,Georgia,"Times New Roman",serif)!important; letter-spacing:-.035em!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.linerAccoladeStat>strong{ order:0!important; align-self:stretch!important; justify-content:center!important; margin:12px 0 8px!important; color:#f5f0e7!important; font:700 31px/.95 var(--muze-serif,Georgia,"Times New Roman",serif)!important; letter-spacing:-.035em!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>*>small{ order:1!important; display:block!important; margin:0!important; color:#8e8982!important; font:600 10px/1.25 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; text-align:center!important; -webkit-line-clamp:2!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat>small{ width:72px!important; max-width:72px!important; white-space:normal!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat>.exceptionalStatus, #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.linerAccoladeStat>span{ position:absolute!important; right:8px!important; bottom:10px!important; left:8px!important; order:2!important; display:block!important; width:auto!important; min-height:0!important; margin:0!important; overflow:visible!important; color:#ddaf37!important; font-family:var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; font-weight:800!important; line-height:1!important; text-align:center!important; text-transform:uppercase!important; white-space:nowrap!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat>.exceptionalStatus, #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat>.exceptionalStatus b{ font-size:8px!important; letter-spacing:.24em!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.linerAccoladeStat>span{ bottom:10px!important; color:#c89a32!important; font-size:7px!important; letter-spacing:.18em!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat::after, #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.linerAccoladeStat::after{ content:""!important; position:absolute!important; right:auto!important; bottom:30px!important; left:14%!important; width:72%!important; height:3px!important; border-radius:999px!important; background:linear-gradient(90deg,#e3b536 0%,#c69421 38%,rgba(198,148,33,.10) 100%)!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.linerAccoladeStat::after{ bottom:28px!important; left:16%!important; width:68%!important; opacity:.78!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo .exceptionalFeather{ display:block!important; width:11px!important; min-width:11px!important; max-width:11px!important; height:22px!important; flex:0 0 11px!important; color:#ddb13c!important; stroke-width:1.1!important; } /* Non-exceptional ratings have no footer label: keep their outline visible and return the divider to the bottom edge instead of reserving label space. */ #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus)){ transform:none!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus))>span{ position:absolute!important; right:8px!important; bottom:10px!important; left:8px!important; display:block!important; width:auto!important; min-height:0!important; margin:0!important; color:#c89a32!important; font:800 7px/1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; letter-spacing:.18em!important; text-align:center!important; text-transform:uppercase!important; white-space:nowrap!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus))::after{ bottom:28px!important; } @media(min-width:1321px){ #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero{grid-template-columns:244px minmax(330px,1fr) 196px 270px!important;gap:18px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .linerHeroSide{width:270px!important} } @media(min-width:1161px) and (max-width:1320px){ #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero{grid-template-columns:232px minmax(290px,1fr) 167px 220px!important;gap:18px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .linerHeroSide{width:220px!important} } @media(min-width:1051px) and (max-width:1160px){ #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero{grid-template-columns:230px minmax(280px,1fr) 172px!important;gap:18px!important} } @media(max-width:1050px){ #albumModal:not(.libraryDetailModal) .albumInlineReactions{grid-template-columns:1fr} #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo{ width:min(100%,209px)!important; max-width:209px!important; margin:20px auto 22px!important; } } @media(max-width:650px){ #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo{ grid-template-columns:minmax(0,1fr)!important; gap:9px!important; height:auto!important; } #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo>.albumScoreStat{ width:100%!important; height:160px!important; min-height:160px!important; padding:15px!important; border-radius:14px!important; } #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo>.linerAccoladeStat{ width:80%!important; height:135px!important; min-height:135px!important; justify-self:end!important; padding:14px!important; border-radius:12px!important; } #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo>.albumScoreStat>strong{font-size:47px!important} #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo>.linerAccoladeStat>strong{font-size:37px!important} #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo>.albumScoreStat>.exceptionalStatus, #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo>.albumScoreStat>.exceptionalStatus b{font-size:9px!important} #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus))>span{font-size:9px!important} #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo>.linerAccoladeStat>span{font-size:9px!important} } /* Non-exceptional hierarchy: the score leads while rank remains secondary. Exceptional pairs are deliberately excluded from every rule below. */ #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus))){ grid-template-columns:minmax(0,1fr) minmax(0,.88fr)!important; gap:14px!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus)){ border-color:rgba(226,179,55,.82)!important; background:linear-gradient(145deg,rgba(48,35,15,.32) 0%,rgba(15,14,14,.98) 46%,#09090a 100%)!important; box-shadow:inset 0 1px 0 rgba(255,220,120,.07)!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus)):hover{ border-color:rgba(235,190,67,.9)!important; box-shadow:inset 0 1px 0 rgba(255,220,120,.09)!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus)))>.linerAccoladeStat{ border-color:rgba(174,132,39,.27)!important; background:linear-gradient(145deg,rgba(17,16,15,.52),#070709)!important; box-shadow:none!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus)))>.linerAccoladeStat:hover{ border-color:rgba(184,141,42,.4)!important; box-shadow:none!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus)))>.linerAccoladeStat::after{ left:23%!important; width:54%!important; opacity:.62!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus))>span{ color:#ddaF37!important; } @media(max-width:650px){ #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus))){ grid-template-columns:minmax(0,1fr)!important; gap:14px!important; } #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus)))>.linerAccoladeStat{ width:88%!important; } } /* Paint the top edge inside the rounded outline so it cannot be clipped by a parent compositing layer. This follows the card radius in both score states. */ #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo{ overflow:visible!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat{ border-top-color:rgba(230,183,58,.92)!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:has(>.exceptionalStatus){ box-shadow:0 0 28px rgba(212,165,45,.12),inset 0 1.5px 0 rgba(230,183,58,.78),inset 0 1px 0 rgba(255,220,120,.05)!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:has(>.exceptionalStatus):hover{ box-shadow:0 0 34px rgba(212,165,45,.17),inset 0 1.5px 0 rgba(238,194,70,.88),inset 0 1px 0 rgba(255,220,120,.07)!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus)){ box-shadow:inset 0 1.5px 0 rgba(230,183,58,.9),inset 0 1px 12px rgba(222,174,49,.075)!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus)):hover{ box-shadow:inset 0 1.5px 0 rgba(238,194,70,.96),inset 0 1px 14px rgba(222,174,49,.09)!important; } /* Keep the raised primary plaque inside its paint area and bring the desktop pair closer to the album copy. Exceptional pairs remain untouched. */ #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus))){ height:137px!important; } @media(min-width:1051px){ #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus))){ position:relative!important; left:-20px!important; } } @media(max-width:650px){ #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus))){ height:auto!important; } } /* Reinforce the straight top segment independently from the rounded outline; this avoids the hero's layered backgrounds visually swallowing that edge. */ #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus))::before{ content:""!important; position:absolute!important; top:0!important; right:11px!important; left:11px!important; z-index:2!important; display:block!important; height:1.5px!important; border-radius:999px!important; background:rgba(230,183,58,.94)!important; pointer-events:none!important; } /* Final non-exceptional plaque hierarchy: score first, rank second. */ #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus))){ grid-template-columns:minmax(0,1fr) minmax(0,.72fr)!important; gap:13px!important; height:133px!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus)){ transform:translateY(-4px)!important; border-color:rgba(230,183,58,.92)!important; background:linear-gradient(145deg,rgba(51,37,15,.36) 0%,rgba(16,15,14,.98) 46%,#09090a 100%)!important; box-shadow:inset 0 1px 12px rgba(222,174,49,.075),inset 0 1px 0 rgba(255,224,132,.11)!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus)):hover{ border-color:rgba(238,194,70,.96)!important; box-shadow:inset 0 1px 14px rgba(222,174,49,.09),inset 0 1px 0 rgba(255,224,132,.13)!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus))>strong{ font-size:41px!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus))::after{ left:10%!important; width:80%!important; opacity:1!important; background:linear-gradient(90deg,#e6b83d 0%,#d5a62d 58%,rgba(213,166,45,.16) 100%)!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus))>span{ color:#e1b23a!important; letter-spacing:.22em!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus)))>.linerAccoladeStat{ border-color:rgba(164,124,36,.23)!important; background:linear-gradient(145deg,rgba(14,14,14,.58),#060608)!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus)))>.linerAccoladeStat>strong{ font-size:28px!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus)))>.linerAccoladeStat>small{ color:#77736d!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus)))>.linerAccoladeStat::after{ left:27.5%!important; width:45%!important; opacity:.48!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus)))>.linerAccoladeStat>span{ color:#ad852d!important; } @media(max-width:650px){ #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus))){ grid-template-columns:minmax(0,1fr)!important; height:auto!important; } #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus)){ transform:none!important; } #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus)))>.linerAccoladeStat{ width:88%!important; } #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus))>strong{ font-size:51px!important; } #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus)))>.linerAccoladeStat>strong{ font-size:33px!important; } } /* Card-outline correction: keep both score states fully inside their grid paint area. The secondary plaque moves down instead of pulling the score upward. */ #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat{ transform:none!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat>.exceptionalStatus){ height:132px!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus))){ height:133px!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus)))>.linerAccoladeStat{ transform:translateY(4px)!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus))::before{ content:none!important; } @media(max-width:650px){ #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo:has(>.albumScoreStat>.exceptionalStatus), #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus))){ height:auto!important; } #albumModal:not(.libraryDetailModal) .linerHeroCopy>.linerStats.linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus)))>.linerAccoladeStat{ transform:none!important; } } /* Final paint-order guard for the score-card top edge. */ #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:has(>.exceptionalStatus){ border-top-color:rgba(220,174,55,.72)!important; box-shadow:0 0 28px rgba(212,165,45,.12),inset 0 1px 0 rgba(255,220,120,.05)!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:has(>.exceptionalStatus):hover{ border-top-color:rgba(231,188,67,.86)!important; box-shadow:0 0 34px rgba(212,165,45,.17),inset 0 1px 0 rgba(255,220,120,.07)!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus)){ border-top-color:rgba(230,183,58,.92)!important; box-shadow:inset 0 1px 12px rgba(222,174,49,.075)!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus)):hover{ border-top-color:rgba(238,194,70,.96)!important; box-shadow:inset 0 1px 14px rgba(222,174,49,.09)!important; } /* Restore the compact divider dimensions from the original stat cards. */ #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat::after, #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.linerAccoladeStat::after{ left:50%!important; width:60px!important; max-width:calc(100% - 16px)!important; height:1px!important; transform:translateX(-50%)!important; } /* Use a contained divider element instead of inherited pseudo-elements. */ #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat::after, #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.linerAccoladeStat::after{ content:none!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo .statDivider{ position:absolute!important; right:auto!important; bottom:28px!important; left:50%!important; display:block!important; width:60px!important; max-width:calc(100% - 16px)!important; height:1px!important; margin:0!important; border:0!important; border-radius:999px!important; background:linear-gradient(90deg,#d9aa32,rgba(217,170,50,.16))!important; transform:translateX(-50%)!important; pointer-events:none!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus)))>.linerAccoladeStat>.statDivider{ opacity:.48!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus))>.statDivider{ height:3px!important; } /* Balance only the non-exceptional score plaque's internal content. */ #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus))>strong, #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus))>small{ position:relative!important; top:-4px!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus))>span{ bottom:14px!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo>.albumScoreStat:not(:has(>.exceptionalStatus))>.statDivider{ bottom:32px!important; } /* Stars now own the rating action; remove the redundant desktop Rate column. */ @media(min-width:1051px){ #albumModal:not(.libraryDetailModal) .trackJourneyHeader, #albumModal:not(.libraryDetailModal) .trackJourneyRow{ grid-template-columns:38px 34px minmax(180px,1fr) minmax(145px,220px) 66px 28px!important; } #albumModal:not(.libraryDetailModal) .trackJourneyOverflow{ grid-column:6!important; grid-row:1!important; } #albumModal:not(.libraryDetailModal) .trackJourneyPulseButton{ cursor:pointer!important; } } /* Shift only the compact Album Sequence / Tracklist title block. */ @media(min-width:1051px){ #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackTitle{ margin-left:20px!important; } } /* Pull the interactive rating cluster left without disturbing later columns. */ @media(min-width:1051px){ #albumModal:not(.libraryDetailModal) .trackJourneyHeader>span:nth-child(4), #albumModal:not(.libraryDetailModal) .trackJourneyPulseButton{ position:absolute!important; top:50%!important; left:50%!important; transform:translate(-50%,-50%)!important; } #albumModal:not(.libraryDetailModal) .trackJourneyHeader, #albumModal:not(.libraryDetailModal) .trackJourneyRow{position:relative!important} #albumModal:not(.libraryDetailModal) .trackJourneyPulseButton{ grid-column:1 / -1!important; } #albumModal:not(.libraryDetailModal) .trackJourneyHeader>span:nth-child(4), #albumModal:not(.libraryDetailModal) .trackJourneyPulseButton{ left:calc(50% + 30px)!important; } #albumModal:not(.libraryDetailModal) .trackTimeHeading{ grid-column:5!important; grid-row:1!important; justify-self:center!important; justify-content:center!important; position:relative!important; left:-55px!important; width:44px!important; } #albumModal:not(.libraryDetailModal) .trackTimeHeading svg{ position:absolute!important; top:50%!important; left:-19px!important; transform:translateY(-50%)!important; } #albumModal:not(.libraryDetailModal) .trackJourneyRow>time{ position:relative!important; left:-60px!important; } #albumModal:not(.libraryDetailModal) .trackMenuHeading{ grid-column:6!important; grid-row:1!important; position:relative!important; left:10px!important; justify-self:center!important; text-align:center!important; font-size:9px!important; letter-spacing:.1em!important; } #albumModal:not(.libraryDetailModal) .trackJourneyOverflow{ position:relative!important; left:10px!important; } } /* Balance the secondary plaque without changing its lowered card position. */ #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus)))>.linerAccoladeStat>strong, #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus)))>.linerAccoladeStat>small{ position:relative!important; top:-3px!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus)))>.linerAccoladeStat>span{ bottom:13px!important; } #albumModal:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats).linerStatsTwo:has(>.albumScoreStat:not(:has(>.exceptionalStatus)))>.linerAccoladeStat>.statDivider{ bottom:31px!important; } /* Keep track ratings distinct from Muze's gold editorial accents. */ #albumModal:not(.libraryDetailModal) .trackJourneyList .trackRatingStars i::after{ color:#a67bc3!important; } #albumModal:not(.libraryDetailModal) .trackJourneyList .trackJourneyPulseButton>small{ color:var(--muze-gold,#d6ab35)!important; } /* Admin-only inline closing-verdict editor on the compact album landing page. */ #albumModal:not(.libraryDetailModal) .albumCompactVerdict.isAdminEditable{ cursor:pointer!important; transition:border-color .18s ease,background .18s ease!important; } #albumModal:not(.libraryDetailModal) .albumCompactVerdict.isAdminEditable:hover, #albumModal:not(.libraryDetailModal) .albumCompactVerdict.isAdminEditable:focus-visible{ border-color:rgba(214,171,53,.48)!important; background:linear-gradient(145deg,rgba(214,171,53,.055),rgba(255,255,255,.018))!important; outline:none!important; } #albumModal:not(.libraryDetailModal) .albumCompactVerdictAdminHint{ position:absolute!important; left:16px!important; bottom:15px!important; z-index:2!important; color:#d6ab35!important; font:800 10px/1.2 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; font-style:normal!important; letter-spacing:.08em!important; text-transform:uppercase!important; } #albumModal:not(.libraryDetailModal) .albumCompactVerdict.isEditing{ cursor:default!important; padding:14px 16px!important; } #albumModal:not(.libraryDetailModal) .albumCompactVerdictEditor{ position:relative!important; z-index:3!important; display:grid!important; gap:9px!important; width:100%!important; } #albumModal:not(.libraryDetailModal) .albumCompactVerdictEditor label{ color:#d6ab35!important; font:900 10px/1.2 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; letter-spacing:.1em!important; text-transform:uppercase!important; } #albumModal:not(.libraryDetailModal) .albumCompactVerdictEditor textarea{ box-sizing:border-box!important; width:100%!important; min-height:94px!important; resize:vertical!important; border:1px solid rgba(214,171,53,.28)!important; border-radius:8px!important; padding:10px 11px!important; background:rgba(0,0,0,.36)!important; color:#eee8dd!important; outline:none!important; font:500 12.5px/1.45 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; } #albumModal:not(.libraryDetailModal) .albumCompactVerdictEditor textarea:focus{ border-color:rgba(214,171,53,.68)!important; } #albumModal:not(.libraryDetailModal) .albumCompactVerdictEditor>div{ display:flex!important; gap:8px!important; } #albumModal:not(.libraryDetailModal) .albumCompactVerdictEditor button{ border:1px solid rgba(214,171,53,.48)!important; border-radius:999px!important; padding:7px 12px!important; background:#d6ab35!important; color:#111!important; font:850 11px/1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; cursor:pointer!important; } #albumModal:not(.libraryDetailModal) .albumCompactVerdictEditor button.secondary{ background:transparent!important; color:#d6ab35!important; } #albumModal:not(.libraryDetailModal) .albumCompactVerdictEditor button:disabled{opacity:.58!important;cursor:wait!important} #albumModal:not(.libraryDetailModal) .albumCompactVerdictSaveStatus{ min-height:12px!important; color:#e5a9a9!important; font-size:10px!important; } /* Reference-matched compact Listener Reactions card. */ #albumModal:not(.libraryDetailModal) .albumCompactReactions{ box-sizing:border-box!important; height:214px!important; min-height:214px!important; max-height:214px!important; padding:14px!important; border:1px solid rgba(214,171,53,.22)!important; border-radius:12px!important; background:linear-gradient(145deg,rgba(16,16,18,.98),rgba(11,11,13,.98))!important; box-shadow:0 12px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.018)!important; } #albumModal:not(.libraryDetailModal) .albumCompactReactionsHeader{ display:flex!important; min-height:24px!important; margin:0 0 10px!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; } #albumModal:not(.libraryDetailModal) .albumCompactReactionsHeader h3{ display:flex!important; min-width:0!important; flex:1 1 auto!important; margin:0!important; align-items:center!important; gap:10px!important; color:#eee8dd!important; font:600 16px/1.15 var(--muze-serif,Georgia,"Times New Roman",serif)!important; white-space:nowrap!important; } #albumModal:not(.libraryDetailModal) .albumCompactReactionsIcon{ display:grid!important; width:20px!important; height:20px!important; flex:0 0 20px!important; place-items:center!important; color:#eee8dd!important; } #albumModal:not(.libraryDetailModal) .albumCompactReactionsIcon svg{ display:block!important; width:20px!important; height:20px!important; overflow:visible!important; fill:none!important; stroke:currentColor!important; stroke-width:1.8!important; stroke-linecap:round!important; stroke-linejoin:round!important; } #albumModal:not(.libraryDetailModal) .albumCompactReactionsMore{ display:inline-flex!important; flex:0 0 auto!important; align-items:center!important; align-self:center!important; justify-content:center!important; gap:5px!important; min-width:0!important; margin:7px 0 0!important; padding:3px 0!important; border:0!important; background:transparent!important; color:#d6ab35!important; font:800 10px/1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; white-space:nowrap!important; cursor:pointer!important; } #albumModal:not(.libraryDetailModal) .albumCompactReactionsMore:hover{ color:#efc64c!important; } #albumModal:not(.libraryDetailModal) .albumCompactReactionList{ display:grid!important; width:calc(100% + 28px)!important; margin-inline:-14px!important; max-height:none!important; flex:1 1 auto!important; grid-template-rows:repeat(2,minmax(0,1fr))!important; gap:7px!important; overflow:hidden!important; } #albumModal:not(.libraryDetailModal) .albumCompactReaction{ box-sizing:border-box!important; display:grid!important; width:100%!important; min-height:0!important; padding:8px 10px!important; grid-template-columns:38px minmax(0,1fr) auto!important; gap:10px!important; align-items:center!important; overflow:hidden!important; border:1px solid rgba(255,255,255,.065)!important; border-radius:7px!important; background:rgba(255,255,255,.025)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.012)!important; } #albumModal:not(.libraryDetailModal) .albumCompactReactionAvatar{ position:relative!important; display:grid!important; width:38px!important; height:38px!important; min-width:38px!important; max-width:38px!important; min-height:38px!important; max-height:38px!important; border:1px solid rgba(214,171,53,.28)!important; border-radius:50%!important; overflow:hidden!important; object-fit:cover!important; filter:none!important; } #albumModal:not(.libraryDetailModal) .albumCompactReactionAvatar>img, #albumModal:not(.libraryDetailModal) .albumCompactReactionAvatar>svg{ position:absolute!important; inset:0!important; display:block!important; width:100%!important; max-width:100%!important; height:100%!important; max-height:100%!important; object-fit:cover!important; object-position:center top!important; border-radius:50%!important; transform:none!important; } #albumModal:not(.libraryDetailModal) .albumCompactReactionCopy{ min-width:0!important; } #albumModal:not(.libraryDetailModal) .albumCompactReactionCopy p{ display:-webkit-box!important; margin:0!important; overflow:hidden!important; color:rgba(243,239,230,.83)!important; font:500 10.5px/1.28 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; } #albumModal:not(.libraryDetailModal) .albumCompactReactionCopy q{quotes:'\201C' '\201D' '\2018' '\2019'!important} #albumModal:not(.libraryDetailModal) .albumCompactReactionCopy q::before{content:open-quote!important} #albumModal:not(.libraryDetailModal) .albumCompactReactionCopy q::after{content:close-quote!important} #albumModal:not(.libraryDetailModal) .albumCompactReactionCopy>span{ display:block!important; margin-top:4px!important; overflow:hidden!important; color:rgba(243,239,230,.47)!important; font:600 9px/1.2 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #albumModal:not(.libraryDetailModal) .albumCompactReactionCopy>span b{ margin:0 4px!important; color:rgba(243,239,230,.28)!important; font-weight:400!important; } #albumModal:not(.libraryDetailModal) .albumCompactReactionLike{ display:inline-flex!important; width:auto!important; min-width:38px!important; height:auto!important; min-height:0!important; padding:3px 0 3px 5px!important; align-items:center!important; justify-content:flex-end!important; gap:4px!important; border:0!important; background:transparent!important; color:rgba(243,239,230,.58)!important; font:650 9.5px/1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)!important; white-space:nowrap!important; } #albumModal:not(.libraryDetailModal) .albumCompactReactionLike>span{ display:inline!important; margin:0!important; color:inherit!important; font-size:16px!important; line-height:1!important; } #albumModal:not(.libraryDetailModal) .albumCompactReactionLike:hover, #albumModal:not(.libraryDetailModal) .albumCompactReactionLike.liked{ color:#d6ab35!important; } /* Light editorial serif for the desktop Closing Verdict quotation. */ @media(min-width:1051px){ #albumModal:not(.libraryDetailModal) .albumCompactVerdict:not(.isEditing) blockquote{ color:#eee8dd!important; font-family:Georgia,"Times New Roman",serif!important; font-size:18px!important; font-style:italic!important; font-weight:400!important; line-height:1.45!important; letter-spacing:-.005em!important; } #albumModal:not(.libraryDetailModal) .albumCompactVerdict:not(.isEditing) blockquote strong, #albumModal:not(.libraryDetailModal) .albumCompactVerdict:not(.isEditing) blockquote b{ font-weight:400!important; } } /* Expand the desktop album description in place without moving adjacent hero modules. */ @media(min-width:1051px){ #albumModal:not(.libraryDetailModal) .linerHero:has(.albumHeroDescription.is-expanded){ height:auto!important; min-height:0!important; max-height:none!important; align-items:start!important; } #albumModal:not(.libraryDetailModal) .linerHero:has(.albumHeroDescription.is-expanded)>.linerCover{ position:relative!important; top:var(--album-expanded-cover-offset,0)!important; left:auto!important; } #albumModal:not(.libraryDetailModal) .linerHero:has(.albumHeroDescription.is-expanded)>.linerHeroCopy{ position:relative!important; top:var(--album-expanded-copy-offset,0)!important; } #albumModal:not(.libraryDetailModal) .linerHero:has(.albumHeroDescription.is-expanded)>.linerHeroStatsDeck{ position:relative!important; top:var(--album-expanded-stats-offset,0)!important; } #albumModal:not(.libraryDetailModal) .linerHero:has(.albumHeroDescription.is-expanded)>.linerHeroSide{ position:relative!important; top:var(--album-expanded-side-offset,0)!important; } #albumModal:not(.libraryDetailModal) .linerHeroCopy:has(>.albumHeroDescription.is-expanded)>.albumHeroDescription{ max-height:none!important; margin:0 0 12px!important; padding:0!important; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; scrollbar-width:auto!important; } #albumModal:not(.libraryDetailModal) .linerHeroCopy:has(>.albumHeroDescription.is-expanded)>.linerTags{ display:flex!important; } #albumModal:not(.libraryDetailModal) .linerHeroCopy:has(>.albumHeroDescription.is-expanded)>.linerActions{ display:flex!important; } } /* Restore the existing admin most-loved-track picker in the compact sidebar. */ @media(min-width:1051px){ #albumModal:not(.libraryDetailModal) .albumCompactPopular{ position:relative!important; overflow:visible!important; } #albumModal:not(.libraryDetailModal) .albumCompactPopular>.compactLovedAdminMenu{ top:12px!important; right:12px!important; } #albumModal:not(.libraryDetailModal) .albumCompactPopular>.compactLovedAdminMenu>summary{ padding:6px 9px!important; font-size:9px!important; } #albumModal:not(.libraryDetailModal) .albumCompactPopular>.compactLovedAdminMenu .mostLovedAdminControls{ top:34px!important; right:0!important; width:172px!important; } } /* Dedicated album community layer: All Listener Reactions. */ #albumModal.albumPageMode:not(.libraryDetailModal) .linerAlbumPage.albumSubviewOpen:has(.albumPageSubview[data-album-page-subview="reactions"])>.linerTabs{display:none!important} #albumModal:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="reactions"]{padding:0!important;background:#09090c!important} #albumModal:not(.libraryDetailModal) .allListenerReactionsPage{min-height:calc(100vh - var(--album-page-header-height,72px));color:#f3efe6;background:radial-gradient(circle at 70% 0,rgba(214,171,53,.055),transparent 30%),#09090c;animation:allReactionsEnter .18s ease both} #albumModal:not(.libraryDetailModal) .allListenerReactionsPage .srOnly{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} #albumModal:not(.libraryDetailModal) .albumReactionsShell{box-sizing:border-box;width:min(calc(100% - 48px),1440px);margin-inline:auto} #albumModal:not(.libraryDetailModal) .albumReactionsContext{border-bottom:1px solid rgba(214,171,53,.19);background:linear-gradient(90deg,rgba(214,171,53,.035),rgba(255,255,255,.008),rgba(214,171,53,.025))} #albumModal:not(.libraryDetailModal) .albumReactionsContext>.albumReactionsShell{display:grid;min-height:90px;grid-template-columns:160px minmax(220px,1fr) auto auto;gap:22px;align-items:center} #albumModal:not(.libraryDetailModal) .albumReactionsBack{padding:0;border:0;background:transparent;color:#d6ab35;font:700 12px/1.2 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif);text-align:left} #albumModal:not(.libraryDetailModal) .albumReactionsIdentity{display:grid;min-width:0;grid-template-columns:60px minmax(0,1fr);gap:14px;align-items:center} #albumModal:not(.libraryDetailModal) .albumReactionsIdentity img{width:60px;height:60px;border:1px solid rgba(214,171,53,.27);border-radius:6px;object-fit:cover} #albumModal:not(.libraryDetailModal) .albumReactionsIdentity strong{display:block;overflow:hidden;color:#f3efe6;font:600 21px/1.08 var(--muze-serif,Georgia,"Times New Roman",serif);text-overflow:ellipsis;white-space:nowrap} #albumModal:not(.libraryDetailModal) .albumReactionsIdentity span{display:block;margin-top:5px;color:rgba(243,239,230,.68);font-size:13px} #albumModal:not(.libraryDetailModal) .albumReactionsContextMetric{display:grid;padding-left:22px;grid-template-columns:auto auto;gap:6px;align-items:baseline;border-left:1px solid rgba(214,171,53,.22)} #albumModal:not(.libraryDetailModal) .albumReactionsContextMetric strong{color:#f3efe6;font:650 16px/1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)} #albumModal:not(.libraryDetailModal) .albumReactionsContextMetric span{color:rgba(243,239,230,.55);font-size:11px} #albumModal:not(.libraryDetailModal) .albumReactionsContext a{display:inline-flex;min-height:40px;padding:0 18px;align-items:center;border:1px solid rgba(214,171,53,.42);border-radius:999px;background:#d6ab35;color:#0b0b0d;font-size:12px;font-weight:800;text-decoration:none} #albumModal:not(.libraryDetailModal) .albumReactionsContent{padding-block:20px 48px} #albumModal:not(.libraryDetailModal) .allReactionsTitle{margin-bottom:16px} #albumModal:not(.libraryDetailModal) .allReactionsTitle h1{margin:0;color:#f4f0e8;font:600 clamp(42px,4vw,52px)/.98 var(--muze-serif,Georgia,"Times New Roman",serif);letter-spacing:-.025em} #albumModal:not(.libraryDetailModal) .allReactionsTitle p{margin:7px 0 0;color:rgba(243,239,230,.66);font:400 15px/1.4 var(--muze-serif,Georgia,"Times New Roman",serif)} #albumModal:not(.libraryDetailModal) .allReactionsLayout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(380px,.85fr);gap:36px;align-items:start} #albumModal:not(.libraryDetailModal) .allReactionsMain{min-width:0} #albumModal:not(.libraryDetailModal) .allReactionsFilters{display:flex;min-width:0;margin-bottom:12px;align-items:center;gap:10px} #albumModal:not(.libraryDetailModal) .allReactionsFilters>i{width:1px;height:24px;flex:0 0 1px;background:rgba(214,171,53,.22)} #albumModal:not(.libraryDetailModal) .allReactionsFilterGroup{display:inline-flex;flex:0 0 auto;border:1px solid rgba(255,255,255,.1);border-radius:999px;overflow:hidden;background:#101014} #albumModal:not(.libraryDetailModal) .allReactionsFilterGroup button{min-height:36px;padding:0 15px;border:0;border-left:1px solid rgba(255,255,255,.08);border-radius:0;background:transparent;color:rgba(243,239,230,.68);font-size:11px;font-weight:650} #albumModal:not(.libraryDetailModal) .allReactionsFilterGroup button:first-child{border-left:0} #albumModal:not(.libraryDetailModal) .allReactionsFilterGroup button.active{background:rgba(214,171,53,.12);color:#efbd43;box-shadow:inset 0 0 0 1px rgba(214,171,53,.55)} #albumModal:not(.libraryDetailModal) .allReactionsSearch{display:flex;min-width:180px;min-height:38px;margin-left:auto;padding:0 13px;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:#101014} #albumModal:not(.libraryDetailModal) .allReactionsSearch b{color:rgba(243,239,230,.62);font-size:19px;font-weight:400;transform:rotate(-20deg)} #albumModal:not(.libraryDetailModal) .allReactionsSearch input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#f3efe6;font-size:11px} #albumModal:not(.libraryDetailModal) .allReactionsSearch input::placeholder{color:rgba(243,239,230,.4)} #albumModal:not(.libraryDetailModal) .albumInlineReactions{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:30px;width:100%;min-width:0;box-sizing:border-box;margin:28px 0 0;padding:0;border:0;background:transparent} #albumModal:not(.libraryDetailModal) .albumInlineReactions>*{grid-column:1;min-width:0} #albumModal:not(.libraryDetailModal) .allReactionComposer{display:grid;margin-bottom:10px;padding:12px 0 18px;grid-template-columns:42px minmax(0,1fr);gap:14px;border:0;border-radius:0;background:transparent} #albumModal:not(.libraryDetailModal) .allReactionsComposerAvatar{width:42px;height:42px;border:1px solid rgba(214,171,53,.54);border-radius:50%;overflow:hidden;object-fit:cover} #albumModal:not(.libraryDetailModal) .allReactionsComposerAvatar :is(img,svg){display:block;width:100%;height:100%;object-fit:cover} #albumModal:not(.libraryDetailModal) .allReactionComposer textarea{box-sizing:border-box;width:100%;min-height:42px;padding:10px 0 8px;resize:vertical;border:0;border-bottom:1px solid rgba(255,255,255,.24);border-radius:0;outline:0;background:transparent;color:#f3efe6;font:400 14px/1.45 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)} #albumModal:not(.libraryDetailModal) .allReactionComposer textarea:focus{border-bottom-color:rgba(214,171,53,.7)} #albumModal:not(.libraryDetailModal) .allReactionComposer textarea::placeholder{color:rgba(243,239,230,.42)} #albumModal:not(.libraryDetailModal) .albumInlineReactions .allReactionComposer textarea{height:42px;min-height:42px;align-self:start;padding-bottom:6px} #albumModal:not(.libraryDetailModal) .allReactionComposerFoot{grid-column:2;display:flex;align-items:center;gap:14px} #albumModal:not(.libraryDetailModal) .allReactionComposerFoot label{display:flex;min-width:0;align-items:center;gap:7px;color:#d6ab35} #albumModal:not(.libraryDetailModal) .allReactionComposerFoot select{max-width:230px;padding:5px 24px 5px 4px;border:0;outline:0;background:#101014;color:rgba(243,239,230,.66);font-size:11px} #albumModal:not(.libraryDetailModal) .allReactionComposerFoot>span{margin-left:auto;color:rgba(243,239,230,.46);font-size:10px} #albumModal:not(.libraryDetailModal) .allReactionComposerFoot>button{min-height:34px;padding:0 16px;border:1px solid #e4b73a;border-radius:999px;background:#d6ab35;color:#0b0b0d;font-size:11px;font-weight:800} #albumModal:not(.libraryDetailModal) .allReactionsFeed{display:grid;gap:0} #albumModal:not(.libraryDetailModal) .allReactionCard{position:relative;display:grid;min-width:0;padding:16px 0 18px;grid-template-columns:44px minmax(0,1fr) 24px;gap:14px;border:0;border-radius:0;background:transparent} #albumModal:not(.libraryDetailModal) .allReactionAvatar{width:44px;height:44px;border:1px solid rgba(255,255,255,.13);border-radius:50%;overflow:hidden;object-fit:cover} #albumModal:not(.libraryDetailModal) .allReactionAvatar :is(img,svg){display:block;width:100%;height:100%;object-fit:cover} #albumModal:not(.libraryDetailModal) .allReactionCardBody{min-width:0} #albumModal:not(.libraryDetailModal) .allReactionCardBody>header{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:12px} #albumModal:not(.libraryDetailModal) .allReactionCardBody>header>div{display:flex;min-width:0;align-items:center;gap:8px;overflow:hidden;white-space:nowrap} #albumModal:not(.libraryDetailModal) .allReactionCardBody>header strong{color:#f3efe6;font-size:13px;font-weight:700} #albumModal:not(.libraryDetailModal) .allReactionCardBody>header :is(span,time,i){color:rgba(243,239,230,.45);font-size:10px;font-style:normal} #albumModal:not(.libraryDetailModal) .allReactionScope{display:inline-flex!important;min-height:25px;padding:0 9px;flex:0 0 auto;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.025);color:rgba(243,239,230,.68)!important;font-size:9px!important;font-weight:650!important} #albumModal:not(.libraryDetailModal) button.allReactionScope{cursor:pointer} #albumModal:not(.libraryDetailModal) .allReactionScope i{width:6px;height:6px;border-radius:50%;background:#d6ab35} #albumModal:not(.libraryDetailModal) .allReactionScope span{color:#d6ab35!important;font-size:13px!important} #albumModal:not(.libraryDetailModal) .allReactionCardBody>p{margin:7px 0 9px;color:rgba(243,239,230,.83);font:400 13px/1.48 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)} #albumModal:not(.libraryDetailModal) .allReactionCardBody>footer{display:flex;align-items:center;gap:18px} #albumModal:not(.libraryDetailModal) .allReactionCardBody>footer button{display:inline-flex;padding:0;align-items:center;gap:5px;border:0;background:transparent;color:rgba(243,239,230,.55);font-size:10px} #albumModal:not(.libraryDetailModal) .allReactionCardBody>footer button>span{color:#d6ab35;font-size:15px} #albumModal:not(.libraryDetailModal) .allReactionCardBody>footer .allReactionReplyAction>span{color:#fff!important} #albumModal:not(.libraryDetailModal) .allReactionCardBody>footer button.liked{color:#d6ab35} #albumModal:not(.libraryDetailModal) .allReactionMenu{position:relative;align-self:end} #albumModal:not(.libraryDetailModal) .allReactionMenu>summary{display:grid;width:24px;height:28px;place-items:center;list-style:none;cursor:pointer;color:rgba(243,239,230,.5);font-size:20px} #albumModal:not(.libraryDetailModal) .allReactionMenu>summary::-webkit-details-marker{display:none} #albumModal:not(.libraryDetailModal) .allReactionMenu>div{position:absolute;right:0;bottom:28px;z-index:5;width:145px;padding:6px;border:1px solid rgba(214,171,53,.22);border-radius:8px;background:#17171c;box-shadow:0 12px 30px rgba(0,0,0,.4)} #albumModal:not(.libraryDetailModal) .allReactionMenu>div :is(button,span){display:block;box-sizing:border-box;width:100%;padding:7px;border:0;background:transparent;color:rgba(243,239,230,.62);font-size:10px;text-align:left} #albumModal:not(.libraryDetailModal) .allReactionReplies{margin-top:11px;padding:5px 0 0 12px;border-left:1px solid rgba(214,171,53,.18)} #albumModal:not(.libraryDetailModal) .allReactionReplies.hidden,.allReactionReplyBox.hidden{display:none!important} #albumModal:not(.libraryDetailModal) .allReactionReplies .reactionReply{display:grid;grid-template-columns:36px minmax(0,1fr);gap:11px;padding:8px 0} #albumModal:not(.libraryDetailModal) .allReactionReplies .reactionReplyAvatar{display:grid;width:36px;height:36px;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:50%;background:rgba(214,171,53,.1);color:#f3efe6;font:700 13px/1 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)} #albumModal:not(.libraryDetailModal) .allReactionReplies .reactionReplyMeta{display:flex;align-items:baseline;gap:8px;font-family:var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)} #albumModal:not(.libraryDetailModal) .allReactionReplies .reactionReplyMeta strong{color:#f3efe6;font-size:15px;font-weight:700} #albumModal:not(.libraryDetailModal) .allReactionReplies .reactionReplyMeta span{color:rgba(243,239,230,.45);font-size:12px} #albumModal:not(.libraryDetailModal) .allReactionReplies .reactionReply p{margin:7px 0 0;color:rgba(243,239,230,.83);font:400 16px/1.5 var(--muze-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)} #albumModal:not(.libraryDetailModal) .allReactionReplyBox{margin-top:10px;padding:4px 0 0;border:0;border-radius:0;background:transparent} #albumModal:not(.libraryDetailModal) .allReactionReplyBox textarea{box-sizing:border-box;width:100%;min-height:48px;padding:8px 0;border:0;border-bottom:1px solid rgba(255,255,255,.18);border-radius:0;resize:vertical;background:transparent;color:#f3efe6} #albumModal:not(.libraryDetailModal) .allReactionReplyBox>div{display:flex;margin-top:7px;justify-content:flex-end;gap:7px} #albumModal:not(.libraryDetailModal) .allReactionReplyBox button{padding:6px 10px;border:1px solid rgba(214,171,53,.3);border-radius:999px;background:transparent;color:#d6ab35;font-size:9px} #albumModal:not(.libraryDetailModal) .allReactionsEmpty{display:flex;min-height:150px;padding:24px 0;align-items:center;justify-content:center;flex-direction:column;gap:7px;border:0;border-bottom:1px solid rgba(255,255,255,.075);border-radius:0;background:transparent;text-align:center} #albumModal:not(.libraryDetailModal) .allReactionsEmpty strong{font:600 20px/1.2 var(--muze-serif,Georgia,"Times New Roman",serif)} #albumModal:not(.libraryDetailModal) .allReactionsEmpty span{color:rgba(243,239,230,.56);font-size:12px} #albumModal:not(.libraryDetailModal) .loadMoreAllReactions{display:block;min-width:260px;min-height:40px;margin:12px auto 0;padding:0 24px;border:1px solid rgba(214,171,53,.65);border-radius:999px;background:transparent;color:#d6ab35;font-size:11px;font-weight:750} #albumModal:not(.libraryDetailModal) .loadMoreAllReactions[hidden]{display:none!important} #albumModal:not(.libraryDetailModal) .allReactionsSidebar{position:sticky;top:24px;min-width:0} #albumModal:not(.libraryDetailModal) .allReactionsSidebar>.albumCompactSidebar{width:100%!important} #albumModal:not(.libraryDetailModal) .allReactionsSidebar>.linerHeroSide{position:static!important;width:100%!important;grid-column:auto!important;grid-row:auto!important} #albumModal:not(.libraryDetailModal) .allReactionsSidebar>.albumDiscoveryRail{display:grid;grid-template-columns:1fr;gap:14px} @media(min-width:1051px){ #albumModal:not(.libraryDetailModal) .allReactionsTitle h1{font-size:56px} #albumModal:not(.libraryDetailModal) .allReactionsTitle p{font-size:17px} #albumModal:not(.libraryDetailModal) .allReactionsFilterGroup button{min-height:40px;padding-inline:17px;font-size:12px} #albumModal:not(.libraryDetailModal) .allReactionsSearch{min-width:205px;min-height:42px} #albumModal:not(.libraryDetailModal) .allReactionsSearch input{font-size:12px} #albumModal:not(.libraryDetailModal) .allReactionComposer{padding-block:15px 22px;grid-template-columns:50px minmax(0,1fr);gap:16px} #albumModal:not(.libraryDetailModal) .allReactionsComposerAvatar{width:50px;height:50px} #albumModal:not(.libraryDetailModal) .allReactionComposer textarea{min-height:48px;font-size:16px} #albumModal:not(.libraryDetailModal) .allReactionComposerFoot select{max-width:270px;font-size:12px} #albumModal:not(.libraryDetailModal) .allReactionComposerFoot>span{font-size:11px} #albumModal:not(.libraryDetailModal) .allReactionComposerFoot>button{min-height:38px;padding-inline:19px;font-size:12px} #albumModal:not(.libraryDetailModal) .allReactionCard{padding-block:21px 23px;grid-template-columns:52px minmax(0,1fr) 26px;gap:17px} #albumModal:not(.libraryDetailModal) .allReactionAvatar{width:52px;height:52px} #albumModal:not(.libraryDetailModal) .allReactionCardBody>header strong{font-size:15px} #albumModal:not(.libraryDetailModal) .allReactionCardBody>header :is(span,time,i){font-size:12px} #albumModal:not(.libraryDetailModal) .allReactionScope{min-height:28px;padding-inline:11px;font-size:10px!important} #albumModal:not(.libraryDetailModal) .allReactionCardBody>p{margin-block:10px 12px;font-size:16px;line-height:1.5} #albumModal:not(.libraryDetailModal) .allReactionCardBody>footer{gap:22px} #albumModal:not(.libraryDetailModal) .allReactionCardBody>footer button{gap:7px;font-size:12px} #albumModal:not(.libraryDetailModal) .allReactionCardBody>footer button>span{font-size:18px} } @keyframes allReactionsEnter{from{opacity:0}to{opacity:1}} @media(prefers-reduced-motion:reduce){#albumModal:not(.libraryDetailModal) .allListenerReactionsPage{animation:none}} @media(max-width:1050px){ #albumModal:not(.libraryDetailModal) .allReactionsLayout{grid-template-columns:1fr} #albumModal:not(.libraryDetailModal) .allReactionsSidebar{position:static} #albumModal:not(.libraryDetailModal) .allReactionsFilters{overflow-x:auto;padding-bottom:4px;scrollbar-width:thin} #albumModal:not(.libraryDetailModal) .allReactionsSearch{min-width:190px;flex:0 0 190px} #albumModal:not(.libraryDetailModal) .allReactionsSidebar>.linerHeroSide{display:grid!important} } @media(max-width:700px){ #albumModal:not(.libraryDetailModal) .albumInlineReactions{width:min(calc(100% - 24px),1440px)} #albumModal:not(.libraryDetailModal) .albumReactionsShell{width:min(calc(100% - 24px),1440px)} #albumModal:not(.libraryDetailModal) .albumReactionsContext>.albumReactionsShell{min-height:78px;grid-template-columns:auto minmax(0,1fr) auto;gap:11px} #albumModal:not(.libraryDetailModal) .albumReactionsBack{font-size:0} #albumModal:not(.libraryDetailModal) .albumReactionsBack::before{content:"←";font-size:20px} #albumModal:not(.libraryDetailModal) .albumReactionsIdentity{grid-template-columns:48px minmax(0,1fr);gap:10px} #albumModal:not(.libraryDetailModal) .albumReactionsIdentity img{width:48px;height:48px} #albumModal:not(.libraryDetailModal) .albumReactionsIdentity strong{font-size:17px} #albumModal:not(.libraryDetailModal) .albumReactionsIdentity span{font-size:11px} #albumModal:not(.libraryDetailModal) .albumReactionsContextMetric{display:none} #albumModal:not(.libraryDetailModal) .albumReactionsContext a{min-height:34px;padding:0 11px;font-size:9px} #albumModal:not(.libraryDetailModal) .albumReactionsContent{padding-block:18px 34px} #albumModal:not(.libraryDetailModal) .allReactionsTitle h1{font-size:38px} #albumModal:not(.libraryDetailModal) .allReactionsTitle p{font-size:13px} #albumModal:not(.libraryDetailModal) .allReactionsFilters{width:100%;gap:8px} #albumModal:not(.libraryDetailModal) .allReactionsFilterGroup button{padding-inline:12px} #albumModal:not(.libraryDetailModal) .allReactionComposer{padding:12px;grid-template-columns:36px minmax(0,1fr);gap:9px} #albumModal:not(.libraryDetailModal) .allReactionsComposerAvatar{width:36px;height:36px} #albumModal:not(.libraryDetailModal) .allReactionComposerFoot{grid-column:1/-1;flex-wrap:wrap} #albumModal:not(.libraryDetailModal) .allReactionComposerFoot label{max-width:55%;order:1} #albumModal:not(.libraryDetailModal) .allReactionComposerFoot>span{order:2} #albumModal:not(.libraryDetailModal) .allReactionComposerFoot>button{width:100%;order:3} #albumModal:not(.libraryDetailModal) .allReactionCard{padding:12px;grid-template-columns:38px minmax(0,1fr) 20px;gap:9px} #albumModal:not(.libraryDetailModal) .allReactionAvatar{width:38px;height:38px} #albumModal:not(.libraryDetailModal) .allReactionCardBody>header{align-items:flex-start;flex-direction:column;gap:6px} #albumModal:not(.libraryDetailModal) .allReactionCardBody>header>div{max-width:100%} #albumModal:not(.libraryDetailModal) .allReactionCardBody>p{font-size:13px} #albumModal:not(.libraryDetailModal) .allReactionReplies .reactionReply{grid-template-columns:30px minmax(0,1fr);gap:9px;padding:6px 0} #albumModal:not(.libraryDetailModal) .allReactionReplies .reactionReplyAvatar{width:30px;height:30px;font-size:11px} #albumModal:not(.libraryDetailModal) .allReactionReplies .reactionReplyMeta strong{font-size:13px} #albumModal:not(.libraryDetailModal) .allReactionReplies .reactionReplyMeta span{font-size:10px} #albumModal:not(.libraryDetailModal) .allReactionReplies .reactionReply p{margin-top:4px;font-size:13px;line-height:1.48} #albumModal:not(.libraryDetailModal) .loadMoreAllReactions{width:100%;min-width:0} } /* Use the album cover's sampled palette as the visible desktop hero field. */ @media(min-width:851px){ body:not(.light) #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero{ background: linear-gradient(180deg,rgba(11,11,13,0) 60%,rgba(11,11,13,.08) 63%,rgba(11,11,13,.22) 68%,rgba(11,11,13,.40) 78%,rgba(11,11,13,.59) 90%,rgba(11,11,13,.77) 100%), linear-gradient(90deg,rgba(5,5,7,.40) 0%,rgba(5,5,7,.52) 58%,rgba(5,5,7,.68) 100%), rgb(var(--album-perimeter-rgb,214,171,53))!important; border-bottom:0!important; box-shadow:none!important; } body:not(.light) #albumModal.albumPageMode:not(.libraryDetailModal) .linerTabs{ background: linear-gradient(180deg,rgba(11,11,13,.77) 0%,rgba(11,11,13,.83) 35%,rgba(11,11,13,.89) 70%,rgba(11,11,13,.94) 100%), linear-gradient(90deg,rgba(5,5,7,.40) 0%,rgba(5,5,7,.52) 58%,rgba(5,5,7,.68) 100%), rgb(var(--album-perimeter-rgb,214,171,53))!important; border-top:0!important; border-bottom:0!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } body:not(.light) #albumModal.albumPageMode:not(.libraryDetailModal) #trackRatingsList.albumTrackSections{ background: linear-gradient(180deg,rgba(11,11,13,.94) 0%,rgba(11,11,13,.97) 24px,rgba(11,11,13,.99) 36px,#0b0b0d 44px,#0b0b0d 100%), linear-gradient(90deg,rgba(5,5,7,.40) 0%,rgba(5,5,7,.52) 58%,rgba(5,5,7,.68) 100%), rgb(var(--album-perimeter-rgb,214,171,53))!important; } body:not(.light) #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero::before{ display:none!important; } body:not(.light) #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero :is(.linerHeroStatsDeck>*,.linerHeroCopy>.linerStats>*,.heroSideCard){ background: linear-gradient(rgba(5,5,7,.46),rgba(5,5,7,.46)), rgb(var(--album-perimeter-rgb,214,171,53))!important; } body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero>.linerHeroSide>.heroSideCard{ border:0!important; outline:0!important; background:none!important; background-color:transparent!important; background-image:none!important; box-shadow:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero>.linerHeroSide>.heroSideCard::before, body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero>.linerHeroSide>.heroSideCard::after{ content:none!important; display:none!important; } } /* Match the desktop album-page body scale to the enlarged hero typography. */ @media(min-width:1051px){ #albumModal.albumPageMode:not(.libraryDetailModal) .linerTabs{height:54px!important;gap:34px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .linerTabs button{font-size:15px!important;line-height:54px!important} #albumModal.albumPageMode:not(.libraryDetailModal) #trackRatingsList.albumTrackSections{padding-top:34px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackHeader{min-height:54px!important;margin-bottom:16px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSequenceLabel{font-size:13px!important;letter-spacing:.1em!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackHeader h3{font-size:34px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackCount{font-size:12.5px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackColumn .trackJourneyList:not(.isExpanded){height:578px!important;min-height:578px!important;max-height:578px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackColumn .trackJourneyHeader{height:40px!important;min-height:40px!important;font-size:12px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackColumn .trackJourneyRow{height:64px!important;min-height:64px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackColumn .trackJourneyList:not(.isExpanded) .trackJourneyRow{height:54px!important;min-height:54px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackColumn .trackJourneyRow .trackNo{font-size:14px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackColumn .trackJourneyRow .trackPulse{width:34px!important;min-width:34px!important;height:34px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackColumn .trackJourneyTitle>strong{font-size:17px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackColumn .trackRatingStars{font-size:16px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackColumn .trackJourneyPulseButton small, #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackColumn .trackJourneyRow>time{font-size:13.5px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackColumn .trackJourneyList:not(.isExpanded)>.viewTracklist{height:44px!important;min-height:44px!important;font-size:14px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSideCard>h3, #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactCard h3{font-size:21px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReactionsHeader h3{ color:#f3efe6!important; font:600 21px/1.15 var(--muze-serif,Georgia,"Times New Roman",serif)!important; letter-spacing:normal!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactPopularBody strong{font-size:14.4px!important} /* Fit a two-line heading and track details inside the original 150px card. */ #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSidebar>.albumCompactPopular{padding:10px 17px 8px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactPopular>h3{line-height:1.05!important;margin-bottom:4px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactPopularBody :is(small,em){margin-top:2px!important;line-height:1.15!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactPopularBody small, #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactPopularBody em{font-size:12px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReaction p{font-size:13px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReaction span{font-size:11px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactCards{gap:22px!important;margin-top:36px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactCard{height:230px!important;min-height:230px!important;padding:20px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCredibleQuote{min-height:230px!important;padding:24px 26px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCredibleQuote blockquote{font-size:22px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCredibleQuote cite, #albumModal.albumPageMode:not(.libraryDetailModal) .albumQuoteSourceLink{font-size:13px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactAbout{grid-template-columns:116px minmax(0,1fr)!important;gap:20px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactArtistArt, #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactArtistArt img{width:116px!important;height:164px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactAbout p{font-size:15px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactAbout button{min-height:36px!important;padding:8px 15px!important;font-size:12.5px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSimilarItem>span, #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSimilarItem img{max-width:110px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSimilarItem strong{font-size:12px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSimilarItem small{font-size:11px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactLongform{margin-top:44px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactLongform :is(.albumInfluenceLegacy,.sameArtistEssentials,.albumMoreLikeThis){padding:22px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactLongform :is(.albumInfluenceLegacy,.sameArtistEssentials,.albumMoreLikeThis) h3{font-size:24px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactLongform :is(.albumInfluenceLegacy,.sameArtistEssentials,.albumMoreLikeThis) p{font-size:15.5px!important;line-height:1.5!important} } /* Carry the enlarged desktop album-page scale into Overview and Details & Credits. */ @media(min-width:1051px){ /* Invert the score-card emphasis: gold values, ivory category labels. */ body #albumModal.albumPageMode:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats) :is(.albumScoreStat,.linerAccoladeStat)>strong.statValueWithIcon{ color:#d6ab35!important; -webkit-text-fill-color:#d6ab35!important; } body #albumModal.albumPageMode:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats) .albumScoreStat>span:not(.exceptionalStatus), body #albumModal.albumPageMode:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats) .linerAccoladeStat>span{ color:#f3eee6!important; -webkit-text-fill-color:#f3eee6!important; } body #albumModal.albumPageMode:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats) .linerAccoladeStat>strong.statValueWithIcon{ color:#f3eee6!important; -webkit-text-fill-color:#f3eee6!important; } body #albumModal.albumPageMode:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats) .linerAccoladeStat>span{ color:#d6ab35!important; -webkit-text-fill-color:#d6ab35!important; } /* Let the expanded editorial card participate in layout so Vibe & Mood follows it. */ #albumModal.albumPageMode:not(.libraryDetailModal) .linerHeroSide:has(>.heroSideCard.influence.is-expanded){ height:auto!important; grid-template-columns:1fr!important; grid-template-rows:auto 112px!important; align-self:start!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .linerHeroSide>.heroSideCard.influence.is-expanded{ position:relative!important; inset:auto!important; width:100%!important; height:auto!important; min-height:154px!important; max-height:none!important; grid-column:1!important; grid-row:1!important; overflow:visible!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .linerHeroSide:has(>.heroSideCard.influence.is-expanded)>.heroSideCard.mood{ position:relative!important; display:block!important; grid-column:1!important; grid-row:2!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactPopularBody .featurePlay, #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactPopularBody .featurePlay:hover, #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactPopularBody .featurePlay:focus-visible, #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactPopularBody .featurePlay.isPreviewing{ color:#f3eee6!important; } /* Match the tracklist section marker to the filled rating stars. */ #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSequenceLabel{ color:#a67bc3!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackTitle::after{ background:#a67bc3!important; } /* Preserve breathing room below the enlarged Most Popular Track artwork. */ #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSidebar{ height:466px!important; min-height:466px!important; max-height:466px!important; gap:30px!important; } /* Details & Credits already lives below the global header, so its sticky tabs start at the panel top. */ #albumModal.albumPageMode:not(.libraryDetailModal) .linerAlbumPage.albumSubviewOpen:has(.albumPageSubview[data-album-page-subview="info"])>.linerTabs{ top:0!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .albumOverviewSleeve{ min-height:590px!important; padding:66px 70px 56px!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewFeatureTop, #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewBodyGrid{ gap:48px!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewMeta{font-size:13px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] h3{font-size:70px!important;max-width:790px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] h3.overviewTitleLong{font-size:55px!important;max-width:820px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewMiniAlbumCard{width:58px!important;height:58px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewFeatureTags{gap:11px!important;margin-bottom:29px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewFeatureTags button{min-height:42px!important;padding:10px 17px!important;font-size:14px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewIntro{max-width:770px!important;margin-bottom:38px!important;font-size:22px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewIntro.overviewIntroLong{max-width:820px!important;font-size:19px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewFeatureArt{width:min(100%,340px)!important;min-height:150px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewFeatureArt img{min-height:150px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewFeatureArt blockquote{padding:17px 27px 18px!important;font-size:20px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewPoints{gap:25px!important;margin-bottom:32px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewPoints>div{grid-template-columns:minmax(0,1fr)!important;gap:0!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewIcon{width:62px!important;height:62px!important;font-size:29px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewPoints strong{font-size:14px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewPoints p{color:rgba(255,255,255,.84)!important;font-family:Georgia,"Times New Roman",serif!important;font-size:22px!important;line-height:1.58!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .albumOverviewSleeve:has(.overviewIntroLong) .overviewPoints p{font-size:19px!important;line-height:1.46!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewScoreStrip{max-width:690px!important;padding:20px 25px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewScoreStrip span{font-size:18px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewScoreStrip strong{font-size:34px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewScoreStrip small{font-size:14px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewMood p{font-size:13px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewMomentChips span, #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview[data-album-page-subview="overview"] .overviewMomentChips button{padding:10px 16px!important;font-size:15px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumPageSubview.albumInfoPopupPanel{ width:min(1440px,100%)!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumInfoPage{padding:0 56px 64px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInfoHero{grid-template-columns:250px minmax(0,1fr)!important;gap:44px!important;min-height:350px!important;padding:46px 78px 43px 0!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInfoHeroArt{width:250px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInfoEyebrow{font-size:12px!important;margin-bottom:14px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInfoHero h2{font-size:54px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInfoArtist{font-size:23px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInfoHeroMeta{font-size:15.5px!important;margin-top:14px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInfoHeroSignals{gap:10px!important;margin-top:22px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInfoHeroSignals>div{min-width:150px!important;padding:11px 14px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInfoHeroSignals strong{font-size:22px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInfoHeroSignals span{font-size:11px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInfoNav{margin-inline:-56px!important;padding:12px 56px!important;gap:6px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInfoNav a{min-height:44px!important;padding:10px 14px!important;font-size:13.5px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInfoBlock{padding:50px 0 54px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInfoHeading{gap:13px!important;margin-bottom:25px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInfoHeading>span{width:36px!important;height:36px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInfoHeading h3, #albumModal.albumPageMode:not(.libraryDetailModal) .albumDetailsBlock>.albumInfoHeading h3{font-size:24px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumSnapshotGrid{width:100%!important;gap:18px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInformationPanel>header, #albumModal.albumPageMode:not(.libraryDetailModal) .albumGlancePanel>header{min-height:54px!important;padding:11px 17px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInformationPanel>header h4, #albumModal.albumPageMode:not(.libraryDetailModal) .albumGlancePanel>header h4{font-size:18px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInformationPrimary{padding:15px 17px 13px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInformationPrimary>article{min-height:74px!important;gap:10px!important;padding:7px 14px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInformationPrimary span, #albumModal.albumPageMode:not(.libraryDetailModal) .albumInformationCompact span, #albumModal.albumPageMode:not(.libraryDetailModal) .albumGlanceStats span{font-size:14px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInformationPrimary strong, #albumModal.albumPageMode:not(.libraryDetailModal) .albumInformationCompact strong{font-size:15px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInformationCompact{margin:0 17px 15px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInformationCompact>article{min-height:64px!important;padding:10px 13px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumGlanceStats>.albumGlanceFact{min-height:84px!important;gap:10px!important;padding:11px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumGlanceStats strong{font-size:17px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInfoPeople{gap:14px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .infoPerson{min-height:126px!important;padding:17px!important;grid-template-columns:50px minmax(0,1fr) auto!important} #albumModal.albumPageMode:not(.libraryDetailModal) .infoPersonAvatar{width:46px!important;height:46px!important;font-size:13px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .infoPerson strong{font-size:18px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .infoPersonPrimary{font-size:14.5px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .infoPersonSecondary{font-size:13px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .infoRolePill{min-height:30px!important;padding:5px 10px!important;font-size:12px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumProductionBlock .infoPerson{min-height:98px!important;grid-template-columns:50px minmax(0,1fr) auto!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumSongwriting summary{min-height:54px!important;padding:11px 17px!important;font-size:18px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInfoLabels strong, #albumModal.albumPageMode:not(.libraryDetailModal) .albumCertificationGrid strong{font-size:18px!important} #albumModal.albumPageMode:not(.libraryDetailModal) .albumInfoLabels span, #albumModal.albumPageMode:not(.libraryDetailModal) .albumCertificationGrid span{font-size:14.5px!important} } /* Final desktop paint reset: insight content sits directly on the hero field. */ @media(min-width:851px){ html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHeroSide, html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHeroSide>.heroSideCard{ --album-polish-surface:transparent!important; background-color:transparent!important; background-image:none!important; box-shadow:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHeroSide>.heroSideCard{ border:0!important; outline:0!important; } html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHeroSide>.heroSideCard::before, html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHeroSide>.heroSideCard::after{ content:none!important; display:none!important; } html body #albumModal.albumPageMode:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats){ background:transparent!important; background-color:transparent!important; background-image:none!important; border:0!important; outline:0!important; box-shadow:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } html body #albumModal.albumPageMode:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats)::before, html body #albumModal.albumPageMode:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats)::after{ content:none!important; display:none!important; } html body #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSequenceLabel{ color:rgb(var(--album-perimeter-soft-rgb,166,123,195))!important; } html body #albumModal.albumPageMode:not(.libraryDetailModal) .trackJourneyList .trackRatingStars i::after{ color:rgb(var(--album-track-star-rgb,var(--album-perimeter-soft-rgb,166,123,195)))!important; } html body #albumModal.albumPageMode:is(.albumGrayPerimeter,.albumIvoryStatsPerimeter):not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats) :is(.albumScoreStat,.linerAccoladeStat)>small{ color:#f5f0e7!important; -webkit-text-fill-color:#f5f0e7!important; opacity:1!important; } html body #albumModal.albumPageMode.albumRedPerimeter:not(.libraryDetailModal) :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats) :is(.albumScoreStat,.linerAccoladeStat)>small{ color:#fff!important; } html body #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactTrackTitle::after{ background:rgb(var(--album-perimeter-soft-rgb,166,123,195))!important; } } /* Keep long track names inside the title column at every album-page width. */ #albumModal.albumPageMode:not(.libraryDetailModal) .trackJourneyTitle{ min-width:0!important; max-width:100%!important; overflow:hidden!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .trackJourneyTitle>strong{ display:block!important; min-width:0!important; max-width:100%!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } /* Desktop card swap: preserve each destination footprint and refit only its contents. */ @media(min-width:1051px){ #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactWorkspace>.albumCompactSidebar{ height:auto!important; min-height:466px!important; max-height:none!important; gap:12px!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSidebar>.albumCompactAboutSidebar{ box-sizing:border-box!important; display:grid!important; width:100%!important; height:146px!important; min-height:146px!important; max-height:146px!important; padding:14px!important; grid-template-columns:78px minmax(0,1fr)!important; gap:12px!important; align-items:center!important; align-content:start!important; overflow:hidden!important; margin-top:0!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactAboutSidebar .albumCompactArtistArt, #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactAboutSidebar .albumCompactArtistArt img{ width:78px!important; height:118px!important; border-radius:8px!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactAboutSidebar>div:last-child{ min-width:0!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactAboutSidebar h3{ display:-webkit-box!important; margin:0 0 8px!important; overflow:hidden!important; font-size:17px!important; line-height:1.15!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactAboutSidebar p{ display:-webkit-box!important; margin:0 0 10px!important; overflow:hidden!important; font-size:11.5px!important; line-height:1.35!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactAboutSidebar button{ min-height:28px!important; padding:5px 10px!important; font-size:10px!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSidebar>.albumCompactSimilarSidebar{ box-sizing:border-box!important; display:block!important; width:100%!important; height:190px!important; min-height:190px!important; max-height:190px!important; padding:14px 14px 10px!important; overflow:hidden!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSimilarSidebar>header h3{ margin:0 0 10px!important; font-size:21px!important; line-height:1.15!important; white-space:nowrap!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSimilarSidebar>div{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:12px!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSimilarSidebar .albumCompactSimilarItem{ min-width:0!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSimilarSidebar .albumCompactSimilarItem>span{ box-sizing:border-box!important; width:73px!important; max-width:100%!important; height:73px!important; aspect-ratio:auto!important; margin-inline:auto!important; overflow:hidden!important; border:1px solid rgba(215,170,53,.12)!important; border-radius:7px!important; transition:border-color 170ms ease!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSimilarSidebar .albumCompactSimilarItem img{ width:100%!important; max-width:100%!important; height:100%!important; margin:0!important; border:0!important; border-radius:6px!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSimilarSidebar .albumCompactSimilarItem strong{ display:-webkit-box!important; min-height:29px!important; max-height:29px!important; margin-top:9px!important; overflow:hidden!important; color:rgba(243,239,230,.92)!important; font-size:12px!important; font-weight:600!important; line-height:1.2!important; text-overflow:ellipsis!important; white-space:normal!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSimilarSidebar .albumCompactSimilarItem small{ display:block!important; margin-top:4px!important; overflow:hidden!important; color:rgba(243,239,230,.48)!important; font-size:11px!important; line-height:1.15!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSimilarSidebar .albumCompactSimilarItem:hover>span, #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactSimilarSidebar .albumCompactSimilarItem:focus-visible>span{ border-color:rgba(215,170,53,.35)!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactCards>.albumCompactReactionsWide{ box-sizing:border-box!important; display:flex!important; height:auto!important; min-height:0!important; max-height:none!important; padding:22px!important; flex-direction:column!important; align-self:start!important; overflow:hidden!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactCards.withoutCredibleQuote>.albumCompactReactionsWide{ grid-column:2!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactCards:not(.withoutCredibleQuote)>.albumCompactReactionsWide{ grid-column:3!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReactionsWide .albumCompactReactionsHeader{ min-height:25px!important; margin:0 0 8px!important; align-items:center!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReactionsWide .albumCompactReactionsMore{ margin:0!important; padding:4px 0!important; align-self:center!important; color:#cba437!important; font-size:11px!important; font-weight:700!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReactionsWide .albumCompactReactionList{ display:flex!important; width:100%!important; margin:0!important; min-height:0!important; max-height:none!important; flex:0 1 auto!important; flex-direction:column!important; gap:0!important; overflow:visible!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReactionsWide .albumCompactReaction{ display:grid!important; width:calc(100% + 16px)!important; height:auto!important; min-height:0!important; margin:0 -8px!important; padding:16px 8px!important; grid-template-columns:40px minmax(0,1fr) auto!important; gap:14px!important; align-items:start!important; border:0!important; border-radius:6px!important; background:transparent!important; box-shadow:none!important; transition:background-color 170ms ease!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReactionsWide .albumCompactReaction+.albumCompactReaction{ border-top:1px solid rgba(255,255,255,.045)!important; border-radius:0 0 6px 6px!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReactionsWide .albumCompactReaction:hover{ background:rgba(215,170,53,.025)!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReactionsWide .albumCompactReactionAvatar{ width:40px!important; min-width:40px!important; max-width:40px!important; height:40px!important; min-height:40px!important; max-height:40px!important; align-self:start!important; border-color:rgba(215,170,53,.18)!important; box-shadow:none!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReactionsWide .albumCompactReactionCopy p{ color:rgba(243,239,230,.94)!important; font-size:14.5px!important; font-weight:500!important; line-height:1.48!important; display:-webkit-box!important; overflow:hidden!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReactionsWide .albumCompactReactionMeta{ display:flex!important; min-width:0!important; margin-top:8px!important; align-items:center!important; flex-wrap:wrap!important; gap:5px!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReactionsWide .albumCompactReactionUser{ display:block!important; min-width:0!important; overflow:hidden!important; color:rgba(243,239,230,.66)!important; font-size:11.75px!important; font-weight:500!important; line-height:1.2!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReactionsWide .albumCompactReactionTime{ color:rgba(243,239,230,.42)!important; font-size:11.75px!important; font-weight:400!important; line-height:1.2!important; white-space:nowrap!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReactionsWide .albumCompactReactionMeta b{ margin:0 1px!important; color:rgba(243,239,230,.22)!important; font-weight:400!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReactionsWide .albumCompactReactionBadge{ display:inline-flex!important; max-width:160px!important; min-height:19px!important; padding:2px 7px!important; align-items:center!important; gap:4px!important; overflow:hidden!important; border:1px solid rgba(255,255,255,.07)!important; border-radius:999px!important; background:rgba(255,255,255,.018)!important; color:rgba(243,239,230,.48)!important; font-size:10px!important; font-weight:600!important; line-height:1!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReactionsWide .albumCompactReactionBadge i{ flex:0 0 auto!important; color:#d6ab35!important; font-style:normal!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReactionsWide .albumCompactReactionBadge:not(.isTrack) i{ width:4px!important; height:4px!important; border-radius:50%!important; background:#d6ab35!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReactionsWide .albumCompactReactionLike{ min-width:42px!important; padding:3px 4px 3px 8px!important; align-self:start!important; color:rgba(243,239,230,.58)!important; font-size:11.5px!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReactionsWide .albumCompactReactionEmpty{ display:flex!important; min-height:105px!important; margin:0!important; flex-direction:column!important; justify-content:center!important; gap:6px!important; color:rgba(243,239,230,.72)!important; font-size:14px!important; } #albumModal.albumPageMode:not(.libraryDetailModal) .albumCompactReactionsWide .albumCompactReactionEmpty small{ color:rgba(243,239,230,.43)!important; font-size:12px!important; } } /* Slate hero treatment: color only; preserve the existing bottom fade geometry. */ @media(min-width:1051px){ html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero{ background:linear-gradient(180deg,rgba(11,11,13,0) 60%,rgba(11,11,13,.08) 63%,rgba(11,11,13,.22) 68%,rgba(11,11,13,.40) 78%,rgba(11,11,13,.59) 90%,rgba(11,11,13,.77) 100%),linear-gradient(180deg,transparent 0%,rgba(0,0,0,.05) 48%,rgba(0,0,0,.22) 100%),linear-gradient(100deg,#6f8996 0%,#5f7884 32%,#42555f 68%,#2c3941 100%)!important; } html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerTabs{ background:linear-gradient(180deg,rgba(11,11,13,.77),rgba(11,11,13,.94)),linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.22)),linear-gradient(100deg,#6f8996 0%,#5f7884 32%,#42555f 68%,#2c3941 100%)!important; } html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero .linerHeroCopy>h2{color:#f2ede4!important;-webkit-text-fill-color:#f2ede4!important} html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero .linerHeroCopy>h3{color:#eee8de!important;-webkit-text-fill-color:#eee8de!important} html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero :is(.albumHeroDescription,.linerHeroCopy>p:not(.eyebrow),.heroSideCard p){color:#d2d4d1!important} html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero :is(.moodScale em,.linerMoodTags){color:#b9bdba!important} html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero .heroSideCard h4, html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero .heroSideCard h4>span{color:#d5a92a!important;-webkit-text-fill-color:#d5a92a!important} html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero :is(.linerHeroCopy>.eyebrow,.albumHeroDescriptionToggle,.influenceToggleHint,.linerArtistVerified){color:#e0b42e!important} html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero :is(.linerTags>*,.heroSideCard>div>small){background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.12)!important;color:#e0e0dc!important} html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats)>:is(.albumScoreStat,.linerAccoladeStat){background:rgba(255,255,255,.06)!important} html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats) .albumScoreStat>strong.statValueWithIcon{color:#f2ede4!important;-webkit-text-fill-color:#f2ede4!important} html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats) .linerAccoladeStat>strong.statValueWithIcon{color:#e0b42e!important;-webkit-text-fill-color:#e0b42e!important} html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats) :is(.albumScoreStat,.linerAccoladeStat)>small{color:#d2d4d1!important;-webkit-text-fill-color:#d2d4d1!important;opacity:1!important} html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero :is(.linerHeroStatsDeck,.linerHeroCopy>.linerStats) :is(.albumScoreStat,.linerAccoladeStat)>span, html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero .exceptionalStatus b{color:#b8912a!important;-webkit-text-fill-color:#b8912a!important} html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero .exceptionalFeather{color:#e0b42e!important;stroke:#e0b42e!important} html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero .statDivider{background:linear-gradient(90deg,#e0b42e,rgba(224,180,46,.15))!important} html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero .linerActions>button{background:#e0b42e!important;border-color:#e0b42e!important;color:#17130a!important} html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero .linerActions>a{background:#6a3f86!important;border-color:#6a3f86!important;color:#f2ede4!important} html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerHero .linerActions>a:hover{background:#765096!important;border-color:#765096!important} html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerTabs button.active{color:#f2ede4!important} html body #albumModal.albumPageMode:not(.libraryDetailModal) .linerTabs button.active::after{background:#e0b42e!important} } /* Similar albums: preserve the original three-card grid and overlay compact paging chevrons. */ #albumModal:not(.libraryDetailModal) .albumCompactSimilar{position:relative!important} #albumModal:not(.libraryDetailModal) .albumCompactSimilarItem[hidden]{display:none!important} #albumModal:not(.libraryDetailModal) .albumCompactSimilarPageStatus{ position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; } #albumModal:not(.libraryDetailModal) .albumCompactSimilarArrow{ position:absolute!important;z-index:3!important;top:50%!important;display:grid!important;width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important;margin:0!important;padding:0 0 2px!important;place-items:center!important; border:1px solid rgba(214,171,53,.55)!important;border-radius:50%!important;background:rgba(9,9,11,.72)!important;color:#f3efe6!important;font:500 24px/1 Georgia,serif!important;cursor:pointer!important;opacity:0!important;pointer-events:none!important;transform:translateY(-50%)!important;transition:opacity 160ms ease,background 160ms ease,border-color 160ms ease!important;box-shadow:0 3px 12px rgba(0,0,0,.38)!important;backdrop-filter:blur(4px)!important; } #albumModal:not(.libraryDetailModal) .albumCompactSimilarArrow.isPrevious{left:3px!important} #albumModal:not(.libraryDetailModal) .albumCompactSimilarArrow.isNext{right:3px!important} #albumModal:not(.libraryDetailModal) .albumCompactSimilar:hover .albumCompactSimilarArrow, #albumModal:not(.libraryDetailModal) .albumCompactSimilar:focus-within .albumCompactSimilarArrow{opacity:1!important;pointer-events:auto!important} #albumModal:not(.libraryDetailModal) .albumCompactSimilarArrow:hover{border-color:#d6ab35!important;background:rgba(9,9,11,.92)!important}