/* "low resolution" considerations which is Mobile-related -- eg. implied bandwidth consumption but not literally about visual dimension -- eg. '$aspect-ratio-narrow' iPhone expresses 3x resolution; cannot use 'image-map' considerations device width => 'max-width' https://iosref.com/res https://screensizemap.com/ https://en.wikipedia.org/wiki/Computer_display_standard iPad Pro 12.9" (gen 5) = 1024 High Definition (720p) = 1280x720 XGA+ (4:3) = 1152x864 */
/* AftM tiers all of which are too bright, but make good seeds */
/* SEB tier - Earth */
/* appTrackProgress */
@keyframes __progress_fade_in { 0% { opacity: 0; }
  100% { opacity: 1; } }

.__progress_fade_in { opacity: 0; animation-name: __progress_fade_in; animation-duration: 1.5s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 0s; animation-timing-function: ease-out; }

@keyframes __progress_fade_out { 0% { opacity: 1; }
  100% { opacity: 0; } }

.__progress_fade_out { opacity: 1; animation-name: __progress_fade_out; animation-duration: 1.5s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 0s; animation-timing-function: ease-out; }

#appTrackProgress { position: absolute; top: 0; left: 0; margin: 0; padding: 0; height: 33vw; -webkit-transform: translate3d(0.5em, 0, 0); transform: translate3d(0.5em, 0, 0); }

@media screen and (min-aspect-ratio: 19/10) { #appTrackProgress { height: 25vw; } }

#appTrackProgress [data-role="trackProgress"] { position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; }

#appTrackProgress svg { width: 33vw; height: 33vw; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackProgress svg { width: 25vw; height: 25vw; } }

#appTrackProgress svg .__progress_bg { stroke: #cfc286; stroke-width: 10px; stroke-opacity: 1; fill: #857137; fill-opacity: 0.20; }

#appTrackProgress svg .__progress_fg { stroke: #ebe1ad; stroke-width: 0; fill: #ebe1ad; }

#appTrackProgress svg .__progress_arc { stroke: #9bb5b5; stroke-width: 10px; stroke-opacity: 1; fill: none; }

#appTrackProgress svg .__progress_needle { stroke: #c0e9ea; stroke-width: 3px; stroke-opacity: 0.3; fill: none; }

#appTrackProgress [data-role="countdownTimer"] { position: absolute; left: 0.5em; top: 26vw; width: calc(33vw - 1em); text-align: center; color: #857137; opacity: 0.5; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackProgress [data-role="countdownTimer"] { top: 20vw; width: calc(25vw - 1em); } }

@media screen and (max-width: 560px) { #appTrackProgress [data-role="countdownTimer"] { font-size: 7pt; } }

/* appTrackTimeline */
.__ui-index-timeline-crop { display: block; width: 0; height: 0; }

#appTrackTimeline { position: absolute; display: block; top: 0; left: 0; margin: 0; padding: 0; width: 100%; overflow: hidden; height: 33vw; clip-path: url(#clipProgressStandard); }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline { height: 25vw; clip-path: url(#clipProgressAspectRatio); } }

#appTrackTimeline span { position: absolute; }

#appTrackTimeline [data-role="trackTimeline"] { left: 0; right: 0; height: 23vw; top: 5vw; transform: translate3d(29.1vw, 0, 0); }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline [data-role="trackTimeline"] { height: 17vw; top: 3vw; transform: translate3d(21.5vw, 0, 0); } }

#appTrackTimeline .__timeline_bg, #appTrackTimeline .__timeline_fg { display: block; left: 0; top: 0; height: 23vw; width: 70vw; line-height: 46vw; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_bg, #appTrackTimeline .__timeline_fg { height: 19vw; width: 78vw; line-height: 38vw; } }

#appTrackTimeline .__timeline_bg { opacity: 0.4; }

#appTrackTimeline .__timeline_mask_0 { mask-size: 100vw; mask-position: -6vw 0; -webkit-mask-size: 100vw; -webkit-mask-position: -6vw 0; }

#appTrackTimeline .__timeline_mask_1 { mask-size: 80vw; mask-position: -2vw 0; -webkit-mask-size: 80vw; -webkit-mask-position: -2vw 0; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_mask_1 { mask-size: 83vw; -webkit-mask-size: 83vw; } }

#appTrackTimeline .__timeline_mask_2 { mask-size: 80vw; mask-position: -10vw 0; -webkit-mask-size: 80vw; -webkit-mask-position: -10vw 0; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_mask_2 { mask-size: 83vw; mask-position: -8vw 0; -webkit-mask-size: 83vw; -webkit-mask-position: -8vw 0; } }

#appTrackTimeline .__timeline_mask_3 { mask-size: 100vw; mask-position: -4vw 0; -webkit-mask-size: 100vw; -webkit-mask-position: -4vw 0; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_mask_3 { mask-position: -3vw 0; -webkit-mask-position: -3vw 0; } }

#appTrackTimeline .__timeline_mask_4 { mask-size: 85vw; mask-position: -6vw 0; -webkit-mask-size: 85vw; -webkit-mask-position: -6vw 0; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_mask_4 { mask-position: -3vw -3vw; -webkit-mask-position: -3vw -3vw; } }

#appTrackTimeline .__timeline_mask_5 { mask-size: 115vw; mask-position: -21vw 0; -webkit-mask-size: 115vw; -webkit-mask-position: -21vw 0; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_mask_5 { mask-size: 125vw; mask-position: -23vw 0; -webkit-mask-size: 125vw; -webkit-mask-position: -23vw 0; opacity: 0.15; } }

#appTrackTimeline .__timeline_mask_6 { mask-size: 80vw; mask-position: -2vw 0; -webkit-mask-size: 80vw; -webkit-mask-position: -2vw 0; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_mask_6 { mask-position: -2vw -1.5vw; -webkit-mask-position: -2vw -1.5vw; } }

#appTrackTimeline .__timeline_mask_7 { mask-size: 95vw; mask-position: -26vw 0; -webkit-mask-size: 95vw; -webkit-mask-position: -26vw 0; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_mask_7 { mask-size: 100vw; mask-position: -20vw -1vw; -webkit-mask-size: 100vw; -webkit-mask-position: -20vw -1vw; } }

#appTrackTimeline .__timeline_mask_8 { mask-size: 90vw; mask-position: -18vw 0; -webkit-mask-size: 90vw; -webkit-mask-position: -18vw 0; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_mask_8 { mask-size: 95vw; mask-position: -17vw -1vw; -webkit-mask-size: 95vw; -webkit-mask-position: -17vw -1vw; opacity: 0.15; } }

#appTrackTimeline .__timeline_mask_9 { mask-size: 110vw; mask-position: -10vw 0; -webkit-mask-size: 110vw; -webkit-mask-position: -10vw 0; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_mask_9 { mask-position: -9vw 0; -webkit-mask-position: -9vw 0; } }

#appTrackTimeline .__timeline_mask_10 { mask-size: 85vw; mask-position: -6vw 0; -webkit-mask-size: 85vw; -webkit-mask-position: -6vw 0; }

#appTrackTimeline .__timeline_mask_11 { mask-size: 100vw; mask-position: -14vw 0; -webkit-mask-size: 100vw; -webkit-mask-position: -14vw 0; }

#appTrackTimeline .__timeline_mask_12 { mask-size: 100vw; mask-position: -28vw 0; -webkit-mask-size: 100vw; -webkit-mask-position: -28vw 0; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_mask_12 { mask-position: -19vw 0; -webkit-mask-position: -19vw 0; } }

#appTrackTimeline .__timeline_mask_13 { mask-size: 80vw; mask-position: -1vw 0; -webkit-mask-size: 80vw; -webkit-mask-position: -1vw 0; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_mask_13 { mask-size: 91vw; mask-position: -2vw -4vw; -webkit-mask-size: 91vw; -webkit-mask-position: -2vw -4vw; opacity: 0.15; } }

#appTrackTimeline .__timeline_mask_14 { mask-size: 105vw; mask-position: -12vw 0; -webkit-mask-size: 105vw; -webkit-mask-position: -12vw 0; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_mask_14 { mask-size: 95vw; mask-position: -5vw -1vw; -webkit-mask-size: 95vw; -webkit-mask-position: -5vw -1vw; } }

#appTrackTimeline .__timeline_mask_15 { mask-size: 85vw; mask-position: -11vw 0; -webkit-mask-size: 85vw; -webkit-mask-position: -11vw 0; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_mask_15 { mask-size: 86vw; mask-position: -4vw -2vw; -webkit-mask-size: 86vw; -webkit-mask-position: -4vw -2vw; } }

#appTrackTimeline .__timeline_mask_16 { mask-size: 75vw; mask-position: -2vw 0; -webkit-mask-size: 75vw; -webkit-mask-position: -2vw 0; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_mask_16 { mask-size: 82vw; -webkit-mask-size: 82vw; } }

#appTrackTimeline .__timeline_mask_17 { mask-size: 100vw; mask-position: -2vw 0; -webkit-mask-size: 100vw; -webkit-mask-position: -2vw 0; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_mask_17 { mask-size: 112vw; mask-position: -3vw -6vw; -webkit-mask-size: 112vw; -webkit-mask-position: -3vw -6vw; opacity: 0.15; } }

#appTrackTimeline .__timeline_mask_18 { mask-size: 75vw; mask-position: 0vw 0; -webkit-mask-size: 75vw; -webkit-mask-position: 0vw 0; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_mask_18 { mask-size: 77vw; mask-position: 4vw 0; -webkit-mask-size: 77vw; -webkit-mask-position: 4vw 0; } }

#appTrackTimeline .__timeline_mask_19 { mask-size: 70vw; mask-position: -1vw 0; -webkit-mask-size: 70vw; -webkit-mask-position: -1vw 0; opacity: 0.2; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_mask_19 { mask-size: 80vw; mask-position: -3vw -4vw; -webkit-mask-size: 80vw; -webkit-mask-position: -3vw -4vw; } }

#appTrackTimeline .__timeline_mask_20 { mask-size: 90vw; mask-position: -7vw 0; -webkit-mask-size: 90vw; -webkit-mask-position: -7vw 0; opacity: 0.15; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_mask_20 { mask-size: 90vw; mask-position: -7vw -2vw; -webkit-mask-size: 90vw; -webkit-mask-position: -7vw -2vw; } }

#appTrackTimeline .__timeline_mask_21 { mask-size: 85vw; mask-position: -3vw 0; -webkit-mask-size: 85vw; -webkit-mask-position: -3vw 0; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_mask_21 { mask-size: 90vw; mask-position: -3vw 0; -webkit-mask-size: 90vw; -webkit-mask-position: -3vw 0; } }

#appTrackTimeline .__timeline_mask_22 { mask-size: 80vw; mask-position: -2vw 0; -webkit-mask-size: 80vw; -webkit-mask-position: -2vw 0; opacity: 0.15; }

@media screen and (min-aspect-ratio: 19/10) { #appTrackTimeline .__timeline_mask_22 { mask-size: 80vw; mask-position: -3vw -5vw; -webkit-mask-size: 80vw; -webkit-mask-position: -3vw -5vw; } }

#appTrackTimeline .__timeline_fg { /* // clip overflow @ 25vw //   tried really hard to get this to work //   but it always clipped the visible image on the bottom, //   so ... the top-line is what it is @media screen and (min-aspect-ratio: $aspect-ratio-wide) { // all of the foreground images are framed to 33vw //   top-line of the images is "important" //   so we'll clip 1vw on the top & 3vw on the bottom top: -1vw; bottom: 0; line-height: 40vw; // 20vw * 2 } */ }

/* appAudioPlayer */
@keyframes __audioPlayer_audioBuffering { 0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; } }

#appAudioPlayer { position: absolute; top: 0; left: 0; margin-left: 0.5em; padding: 0; width: 33vw; height: 33vw; }

@media screen and (min-aspect-ratio: 19/10) { #appAudioPlayer { width: 25vw; height: 25vw; } }

#appAudioPlayer button, #appAudioPlayer span { position: absolute; display: block; background-size: cover; background-repeat: no-repeat; background-position: 0 0; opacity: calc(1 - (var(--track-timeRatio) * 0.5)); }

#appAudioPlayer button { border-radius: 1vw; border: 0px solid transparent; filter: invert(80%) sepia(26%) saturate(475%) hue-rotate(12deg) brightness(96%) contrast(81%); }

#appAudioPlayer button:hover, #appAudioPlayer button:active { opacity: 1; filter: invert(73%) sepia(12%) saturate(353%) hue-rotate(132deg) brightness(95%) contrast(92%); background-color: transparent; }

#appAudioPlayer [data-role="audioPlayer"] { position: absolute; width: 5vw; height: 5vw; top: 14vw; left: 14vw; }

@media screen and (min-aspect-ratio: 19/10) { #appAudioPlayer [data-role="audioPlayer"] { top: 10vw; left: 10vw; } }

#appAudioPlayer [data-role="audioStart"], #appAudioPlayer [data-role="audioStop"] { width: 5vw; height: 5vw; top: 0vw; left: 0vw; opacity: calc(0.85 - (var(--track-timeRatio) * 0.5)); background-color: #222; }

#appAudioPlayer [data-role="audioStart"] { background-image: url("../../svg/main-app/noun_Arrow Right_2571267.svg"); }

#appAudioPlayer [data-role="audioStop"] { background-image: url("../../svg/main-app/noun_pause_2571286.svg"); }

#appAudioPlayer [data-role="audioVolumeDown"], #appAudioPlayer [data-role="audioVolumeUp"] { width: 3vw; height: 3vw; left: -5.5vw; background-color: #333; }

#appAudioPlayer [data-role="audioVolumeUp"] { background-image: url("../../svg/main-app/noun_Dropdown_3918602.svg"); transform: rotate(180deg); top: -1vw; }

#appAudioPlayer [data-role="audioVolumeDown"] { background-image: url("../../svg/main-app/noun_Dropdown_3918602.svg"); top: 3vw; }

#appAudioPlayer .__audioVolume { width: 0.5vw; height: 7vw; top: -1vw; left: -2vw; background-color: #cfc286; border-radius: 0.25vw; border: 0px solid transparent; clip: rect(calc((1 - var(--value-playerVolume)) * 7vw), 0.5vw, 7vw, 0); }

#appAudioPlayer .__audioBuffering { width: 3vw; height: 3vw; top: 0vw; left: 6.5vw; background-image: url("../../svg/main-app/noun_dots_2496388.svg"); filter: invert(73%) sepia(12%) saturate(353%) hue-rotate(132deg) brightness(95%) contrast(92%); animation-name: __audioPlayer_audioBuffering; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: forwards; /* or: backwards, both, none */ }

/* appCurrentTrack */
#appCurrentTrack { /* :first-child trackTitle (absolute) trackArtists trackSecret? trackAlbum */ /* trackSounds? trackClassic? trackInSack? trackProvider? */ }

#appCurrentTrack [data-role="trackView"] { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; }

#appCurrentTrack [data-role="trackView"] ul { flex: 1; list-style-type: none; margin: 0; padding: 0; margin-right: 2em; margin-top: 35vw; }

@media screen and (min-width: 560px) { #appCurrentTrack [data-role="trackView"] ul { margin-top: 29.5vw; } }

@media screen and (min-width: 560px) and (min-aspect-ratio: 19/10) { #appCurrentTrack [data-role="trackView"] ul { margin-top: 23vw; } }

#appCurrentTrack [data-role="trackView"] ul:first-child { flex: 2; margin-left: 5vw; }

@media screen and (min-width: 560px) { #appCurrentTrack [data-role="trackView"] ul:first-child { margin-left: 40vw; } }

@media screen and (min-width: 560px) and (min-aspect-ratio: 19/10) { #appCurrentTrack [data-role="trackView"] ul:first-child { margin-left: 32vw; } }

#appCurrentTrack [data-role="trackView"] li { padding: 0; line-height: 1.1; }

@media screen and (min-width: 560px) { #appCurrentTrack [data-role="currentTrack"] a { display: inline-block; padding: 0.1em 0.1em; margin: -0.1em 0; color: #857137; text-decoration: underline; text-decoration-color: #857137; background-color: rgba(250, 248, 235, 0.2); } #appCurrentTrack [data-role="currentTrack"] a:visited { color: #857137; text-decoration-color: #857137; } #appCurrentTrack [data-role="currentTrack"] a:hover, #appCurrentTrack [data-role="currentTrack"] a:active { color: #bea663; text-decoration-color: #bea663; } }

#appCurrentTrack [data-role="trackTitle"] { position: absolute; top: 0; right: 0; left: 39vw; height: 28vw; font-size: clamp(100%, 3vw, 3vw); line-height: 1.1; text-shadow: #fff 1px 1px 0; }

@media screen and (min-aspect-ratio: 19/10) { #appCurrentTrack [data-role="trackTitle"] { left: 31vw; height: 22vw; } }

#appCurrentTrack [data-role="trackTitle"] > span { position: absolute; display: block; left: 0; right: 0.5em; bottom: 1vw; padding-left: 0.75vw; text-indent: -0.75vw; }

#appCurrentTrack [data-role="trackTitle"] > span::first-letter { font-family: "Yanone Tagesschrift", serif; font-size: clamp(166%, 5vw, 5vw); vertical-align: middle; line-height: 0.7; }

@media screen and (min-aspect-ratio: 19/10) { #appCurrentTrack .__trackView_album [data-role="trackTitle"] > span { right: 12vw; } }

#appCurrentTrack [data-role="trackArtists"] { font-size: 85%; }

@media screen and (min-width: 560px) and (min-aspect-ratio: 19/10) { #appCurrentTrack [data-role="trackArtists"] { font-size: clamp(85%, 1.2vw, 1.2vw); } }

#appCurrentTrack [data-role="trackAlbum"] { margin-top: 0.75vw; font-size: 100%; }

@media screen and (min-aspect-ratio: 19/10) { #appCurrentTrack [data-role="trackAlbum"] { font-size: clamp(100%, 1.5vw, 1.5vw); } }

#appCurrentTrack [data-role="trackSecret"] { margin-top: 1vw; font-style: italic; font-size: 75%; }

@media screen and (min-aspect-ratio: 19/10) { #appCurrentTrack [data-role="trackSecret"] { font-size: clamp(75%, 1vw, 1vw); } }

#appCurrentTrack ul[data-role="trackMetadata"] { padding-top: 0.25em; }

#appCurrentTrack ul[data-role="trackMetadata"] li { font-size: 75%; }

@media screen and (min-aspect-ratio: 19/10) { #appCurrentTrack ul[data-role="trackMetadata"] li { font-size: clamp(75%, 1vw, 1vw); } }

#appCurrentTrack ul[data-role="trackMetadata"] li + li { padding-top: 0.25vw; }

#appCurrentTrack [data-role="trackCover"], #appCurrentTrack [data-role="trackNoCover"] { position: absolute; right: 1vw; top: 6vw; width: 10vw; height: 10vw; border: 0.5vw solid #ebe1ad; }

@media screen and (min-aspect-ratio: 19/10) { #appCurrentTrack [data-role="trackCover"], #appCurrentTrack [data-role="trackNoCover"] { top: 4vw; } }

#appCurrentTrack [data-role="trackCover"] { color: transparent; }

#appCurrentTrack [data-role="trackNoCover"] { display: inline-block; color: #cfc286; font-family: "Yanone Tagesschrift", serif; font-size: 1.5vw; line-height: 11em; vertical-align: top; text-align: center; }

#appCurrentTrack [data-role="modal"] { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

#appCurrentTrack [data-role="modal"] + [data-role="currentTrack"] { visibility: hidden; opacity: 0; }

#appCurrentTrack [data-role="modalClose"] { display: block; position: absolute; left: 35vw; top: 5.5vw; filter: invert(73%) sepia(12%) saturate(353%) hue-rotate(132deg) brightness(95%) contrast(92%); opacity: 0.6; display: inline-block; width: 4vw; height: 4vw; color: transparent; background-image: url("../../svg/main-app/noun_prohibited_2986695.svg"); background-size: cover; background-repeat: no-repeat; background-position: 0 0; }

@media screen and (min-aspect-ratio: 19/10) { #appCurrentTrack [data-role="modalClose"] { left: 27vw; top: 3.4vw; } }

#appCurrentTrack [data-role="modalClose"]:hover, #appCurrentTrack [data-role="modalClose"]:active { opacity: 1; }

#appCurrentTrack [data-role="quickSearch"] { margin: 5vw 0 0 40vw; }

@media screen and (min-aspect-ratio: 19/10) { #appCurrentTrack [data-role="quickSearch"] { margin: 3vw 0 0 32vw; } }

#appCurrentTrack [data-role="searchStep"] { padding-top: 1vw; height: 22vw; font-size: 1.5vw; }

#appCurrentTrack .__search_step_engine[data-role="searchStep"] li + li { margin-top: 0.2em; }

@media screen and (min-aspect-ratio: 19/10) { #appCurrentTrack [data-role="searchStep"] { height: 18vw; font-size: 1.3vw; } #appCurrentTrack .__search_step_engine[data-role="searchStep"] { font-size: 1.15vw; } }

#appCurrentTrack [data-role="searchStep"] .__title { font-size: 2.5vw; }

#appCurrentTrack [data-role="searchStep"] button { text-decoration: underline; color: #857137; text-decoration-color: #bea663; }

#appCurrentTrack [data-role="searchStep"] button:hover, #appCurrentTrack [data-role="searchStep"] button:active { text-decoration: underline; }

#appCurrentTrack [data-role="searchStep"] button:visited { color: #857137; text-decoration-color: #bea663; }

#appCurrentTrack [data-role="searchStep"] button:hover, #appCurrentTrack [data-role="searchStep"] button:active { color: #bea663; text-decoration-color: #bea663; }

#appCurrentTrack [data-role="searchStep"] ul { margin: 0.5em 0 0 0; padding-left: 1em; }

#appCurrentTrack [data-role="searchSummary"] { font-size: 75%; line-height: 1.15; }

#appCurrentTrack [data-role="searchSummary"] ul { margin: 1.5em 0 0 0; padding: 0; list-style-type: none; }

#appCurrentTrack [data-role="searchSummary"] li { padding: 0; }

#appCurrentTrack [data-role="searchSummary"] .__step_past .__label, #appCurrentTrack [data-role="searchSummary"] .__step_current .__label { font-weight: bold; }

#appCurrentTrack [data-role="trackSearch"] { position: absolute; left: 32.5vw; top: 23.5vw; opacity: 0.65; filter: invert(73%) sepia(12%) saturate(353%) hue-rotate(132deg) brightness(95%) contrast(92%); }

@media screen and (max-aspect-ratio: 3/5) { #appCurrentTrack [data-role="trackSearch"] { display: none; } }

@media screen and (min-aspect-ratio: 19/10) { #appCurrentTrack [data-role="trackSearch"] { left: 24.7vw; top: 17.5vw; } }

@media screen and (min-aspect-ratio: 4/3) { #appCurrentTrack [data-role="trackSearch"] { opacity: 0.5; } }

#appCurrentTrack [data-role="trackSearch"]:hover, #appCurrentTrack [data-role="trackSearch"]:active { opacity: 1; }

#appCurrentTrack [data-role="trackSearch"] button { display: inline-block; width: 4vw; height: 4vw; color: transparent; background-image: url("../../svg/main-app/noun_Search_3777071.svg"); background-size: cover; background-repeat: no-repeat; background-position: 0 0; }

/* appHistoricalList */
#appHistoricalList { position: relative; margin: 0; padding: 0; /* "native" mask-size for full/* */ }

#appHistoricalList a { color: #444; text-decoration-color: #444; }

#appHistoricalList ul { margin: 0; padding: 0; list-style-type: none; }

#appHistoricalList li { margin: 0; padding: 0; }

#appHistoricalList [data-role="historicalTrack"] { position: relative; padding: 1em; min-height: 4.5em; }

#appHistoricalList [data-role="historicalTrack"] + li { margin-top: 1em; }

#appHistoricalList [data-role="trackView"] { position: relative; }

#appHistoricalList .__trackView_album[data-role="trackView"] { padding-right: 7.5em; min-height: 7em; }

#appHistoricalList [data-role="trackTitle"] { font-size: 120%; line-height: 1.1; max-height: 4.4em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical; white-space: normal; text-shadow: #fff 1px 1px 0; }

#appHistoricalList [data-role="trackArtists"], #appHistoricalList [data-role="trackAlbum"] { font-size: 85%; padding-left: 1em; }

#appHistoricalList [data-role="trackArtists"] { padding-top: 0.5em; }

#appHistoricalList [data-role="trackSecret"] { font-size: 75%; padding-left: 1.1em; padding-top: 0.5em; }

#appHistoricalList ul[data-role="trackMetadata"] { padding-top: 0.75em; }

#appHistoricalList ul[data-role="trackMetadata"] li { font-size: 75%; padding-left: 1.1em; }

#appHistoricalList ul[data-role="trackMetadata"] li + li { padding-top: 0.5em; }

#appHistoricalList [data-role="trackCover"], #appHistoricalList [data-role="trackNoCover"] { position: absolute; display: block; top: 0; right: 0; }

#appHistoricalList [data-role="trackCover"] { width: 7em; height: 7em; color: transparent; }

#appHistoricalList [data-role="trackNoCover"] { display: inline-block; width: 6.5em; height: 6.5em; border: 0.25em solid #ebe1ad; color: #cfc286; font-size: 100%; line-height: 11em; vertical-align: top; text-align: center; }

#appHistoricalList .__timeline_bg, #appHistoricalList .__timeline_fg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-width: 0.15em; border-radius: 0.3em; }

#appHistoricalList .__timeline_bg { opacity: 0.6; }

#appHistoricalList .__timeline_mask_0 { mask-size: 1200px; mask-position: -17em 0; -webkit-mask-size: 1200px; -webkit-mask-position: -17em 0; }

#appHistoricalList .__timeline_mask_1 { mask-size: 1200px; mask-position: -13em -8em; -webkit-mask-size: 1200px; -webkit-mask-position: -13em -8em; }

#appHistoricalList .__timeline_mask_2 { mask-size: 1200px; mask-position: -12em -6em; -webkit-mask-size: 1200px; -webkit-mask-position: -12em -6em; }

#appHistoricalList .__timeline_mask_3 { mask-size: 1600px; mask-position: -32em -6em; -webkit-mask-size: 1600px; -webkit-mask-position: -32em -6em; }

#appHistoricalList .__timeline_mask_4 { mask-size: 1920px; mask-position: -38em -23em; -webkit-mask-size: 1920px; -webkit-mask-position: -38em -23em; }

#appHistoricalList .__timeline_mask_5 { mask-size: 1980px; mask-position: -24em 0; -webkit-mask-size: 1980px; -webkit-mask-position: -24em 0; }

#appHistoricalList .__timeline_mask_6 { mask-size: 1206px; mask-position: -7em -5em; -webkit-mask-size: 1206px; -webkit-mask-position: -7em -5em; }

#appHistoricalList .__timeline_mask_7 { mask-size: 1200px; mask-position: -27em -1em; -webkit-mask-size: 1200px; -webkit-mask-position: -27em -1em; }

#appHistoricalList .__timeline_mask_8 { mask-size: 2000px; mask-position: -65em -1em; -webkit-mask-size: 2000px; -webkit-mask-position: -65em -1em; }

#appHistoricalList .__timeline_mask_9 { mask-size: 1500px; mask-position: -38em -11em; -webkit-mask-size: 1500px; -webkit-mask-position: -38em -11em; }

#appHistoricalList .__timeline_mask_10 { mask-size: 1200px; mask-position: -34em -5em; -webkit-mask-size: 1200px; -webkit-mask-position: -34em -5em; }

#appHistoricalList .__timeline_mask_11 { mask-size: 1000px; mask-position: -8em -2em; -webkit-mask-size: 1000px; -webkit-mask-position: -8em -2em; }

#appHistoricalList .__timeline_mask_12 { mask-size: 1200px; mask-position: -24em 0; -webkit-mask-size: 1200px; -webkit-mask-position: -24em 0; }

#appHistoricalList .__timeline_mask_13 { mask-size: 1200px; mask-position: -2em 0; -webkit-mask-size: 1200px; -webkit-mask-position: -2em 0; }

#appHistoricalList .__timeline_mask_14 { mask-size: 1200px; mask-position: -20em -5em; -webkit-mask-size: 1200px; -webkit-mask-position: -20em -5em; }

#appHistoricalList .__timeline_mask_15 { mask-size: 1200px; mask-position: -11em -5em; -webkit-mask-size: 1200px; -webkit-mask-position: -11em -5em; }

#appHistoricalList .__timeline_mask_16 { mask-size: 1080px; mask-position: -22em -6em; -webkit-mask-size: 1080px; -webkit-mask-position: -22em -6em; }

#appHistoricalList .__timeline_mask_17 { mask-size: 1600px; mask-position: -19em -4em; -webkit-mask-size: 1600px; -webkit-mask-position: -19em -4em; }

#appHistoricalList .__timeline_mask_18 { mask-size: 1200px; mask-position: -28em 0; -webkit-mask-size: 1200px; -webkit-mask-position: -28em 0; }

#appHistoricalList .__timeline_mask_19 { mask-size: 1400px; mask-position: -25em -9em; -webkit-mask-size: 1400px; -webkit-mask-position: -25em -9em; }

#appHistoricalList .__timeline_mask_20 { mask-size: 1200px; mask-position: -14em -6em; -webkit-mask-size: 1200px; -webkit-mask-position: -14em -6em; }

#appHistoricalList .__timeline_mask_21 { mask-size: 1600px; mask-position: -28em -8em; -webkit-mask-size: 1600px; -webkit-mask-position: -28em -8em; }

#appHistoricalList .__timeline_mask_22 { mask-size: 1200px; mask-position: -6em -5em; -webkit-mask-size: 1200px; -webkit-mask-position: -6em -5em; }

/* appFeedEntry */
/* universal truths */
.__timeline_bg.__timeline_color_0 { background-color: #c0e9ea; }

.__timeline_bg.__timeline_color_1 { background-color: #feffc1; }

.__timeline_bg.__timeline_color_2 { background-color: #d0f3ca; }

.__timeline_bg.__timeline_color_3 { background-color: rgba(207, 194, 134, 0.7); }

#appTrackTimeline .__timeline_fg, .__timeline_fg { mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; /* count = 23 @see 'main-app' + TIMELINE_MASK_RANGE fine-tuned for 25vw there are "low resolution" considerations which is Mobile-related -- implied bandwidth consumption but not visual dimension, eg. '$aspect-ratio-narrow' https://devdocs.io/css/image-set() = not good for Mobile */ }

#appTrackTimeline .__timeline_fg.__timeline_color_0, .__timeline_fg.__timeline_color_0 { background-color: #538396; }

#appTrackTimeline .__timeline_fg.__timeline_color_1, .__timeline_fg.__timeline_color_1 { background-color: #a07821; }

#appTrackTimeline .__timeline_fg.__timeline_color_2, .__timeline_fg.__timeline_color_2 { background-color: #5e913f; }

#appTrackTimeline .__timeline_fg.__timeline_color_3, .__timeline_fg.__timeline_color_3 { background-color: rgba(133, 113, 55, 0.8); }

#appTrackTimeline .__timeline_fg.__timeline_mask_0, .__timeline_fg.__timeline_mask_0 { mask-image: url("../../images/mask/slow/a-symbolic-diagram-of-the-operations-of-nature.png"); -webkit-mask-image: url("../../images/mask/slow/a-symbolic-diagram-of-the-operations-of-nature.png"); opacity: 0.2; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_0, .__timeline_fg.__timeline_mask_0 { mask-image: url("../../images/mask/full/a-symbolic-diagram-of-the-operations-of-nature.png"); -webkit-mask-image: url("../../images/mask/full/a-symbolic-diagram-of-the-operations-of-nature.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_1, .__timeline_fg.__timeline_mask_1 { mask-image: url("../../images/mask/slow/a-table-of-medieval-alchemical-symbols.png"); -webkit-mask-image: url("../../images/mask/slow/a-table-of-medieval-alchemical-symbols.png"); opacity: 0.15; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_1, .__timeline_fg.__timeline_mask_1 { mask-image: url("../../images/mask/full/a-table-of-medieval-alchemical-symbols.png"); -webkit-mask-image: url("../../images/mask/full/a-table-of-medieval-alchemical-symbols.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_2, .__timeline_fg.__timeline_mask_2 { mask-image: url("../../images/mask/slow/surya-the-regent-of-the-sun.png"); -webkit-mask-image: url("../../images/mask/slow/surya-the-regent-of-the-sun.png"); opacity: 0.2; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_2, .__timeline_fg.__timeline_mask_2 { mask-image: url("../../images/mask/full/surya-the-regent-of-the-sun.png"); -webkit-mask-image: url("../../images/mask/full/surya-the-regent-of-the-sun.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_3, .__timeline_fg.__timeline_mask_3 { mask-image: url("../../images/mask/slow/fifteen-rosicrucian-and-qabbalistic-diagrams-table-iv-figure-53.png"); -webkit-mask-image: url("../../images/mask/slow/fifteen-rosicrucian-and-qabbalistic-diagrams-table-iv-figure-53.png"); opacity: 0.15; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_3, .__timeline_fg.__timeline_mask_3 { mask-image: url("../../images/mask/full/fifteen-rosicrucian-and-qabbalistic-diagrams-table-iv-figure-53.png"); -webkit-mask-image: url("../../images/mask/full/fifteen-rosicrucian-and-qabbalistic-diagrams-table-iv-figure-53.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_4, .__timeline_fg.__timeline_mask_4 { mask-image: url("../../images/mask/slow/the-leaves-of-hermes-sacred-tree.png"); -webkit-mask-image: url("../../images/mask/slow/the-leaves-of-hermes-sacred-tree.png"); opacity: 0.15; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_4, .__timeline_fg.__timeline_mask_4 { mask-image: url("../../images/mask/full/the-leaves-of-hermes-sacred-tree.png"); -webkit-mask-image: url("../../images/mask/full/the-leaves-of-hermes-sacred-tree.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_5, .__timeline_fg.__timeline_mask_5 { mask-image: url("../../images/mask/slow/the-sephirothic-tree-of-the-later-qabbalists.png"); -webkit-mask-image: url("../../images/mask/slow/the-sephirothic-tree-of-the-later-qabbalists.png"); opacity: 0.2; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_5, .__timeline_fg.__timeline_mask_5 { mask-image: url("../../images/mask/full/the-sephirothic-tree-of-the-later-qabbalists.png"); -webkit-mask-image: url("../../images/mask/full/the-sephirothic-tree-of-the-later-qabbalists.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_6, .__timeline_fg.__timeline_mask_6 { mask-image: url("../../images/mask/slow/the-theory-of-elemental-music.png"); -webkit-mask-image: url("../../images/mask/slow/the-theory-of-elemental-music.png"); opacity: 0.2; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_6, .__timeline_fg.__timeline_mask_6 { mask-image: url("../../images/mask/full/the-theory-of-elemental-music.png"); -webkit-mask-image: url("../../images/mask/full/the-theory-of-elemental-music.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_7, .__timeline_fg.__timeline_mask_7 { mask-image: url("../../images/mask/slow/fifteen-rosicrucian-and-qabbalistic-diagrams-table-xi-figures-1-11.png"); -webkit-mask-image: url("../../images/mask/slow/fifteen-rosicrucian-and-qabbalistic-diagrams-table-xi-figures-1-11.png"); opacity: 0.15; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_7, .__timeline_fg.__timeline_mask_7 { mask-image: url("../../images/mask/full/fifteen-rosicrucian-and-qabbalistic-diagrams-table-xi-figures-1-11.png"); -webkit-mask-image: url("../../images/mask/full/fifteen-rosicrucian-and-qabbalistic-diagrams-table-xi-figures-1-11.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_8, .__timeline_fg.__timeline_mask_8 { mask-image: url("../../images/mask/slow/the-round-table-of-king-arthur.png"); -webkit-mask-image: url("../../images/mask/slow/the-round-table-of-king-arthur.png"); opacity: 0.2; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_8, .__timeline_fg.__timeline_mask_8 { mask-image: url("../../images/mask/full/the-round-table-of-king-arthur.png"); -webkit-mask-image: url("../../images/mask/full/the-round-table-of-king-arthur.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_9, .__timeline_fg.__timeline_mask_9 { mask-image: url("../../images/mask/slow/key-to-the-great-philosophical-secret.png"); -webkit-mask-image: url("../../images/mask/slow/key-to-the-great-philosophical-secret.png"); opacity: 0.2; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_9, .__timeline_fg.__timeline_mask_9 { mask-image: url("../../images/mask/full/key-to-the-great-philosophical-secret.png"); -webkit-mask-image: url("../../images/mask/full/key-to-the-great-philosophical-secret.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_10, .__timeline_fg.__timeline_mask_10 { mask-image: url("../../images/mask/slow/navaho-sand-painting.png"); -webkit-mask-image: url("../../images/mask/slow/navaho-sand-painting.png"); opacity: 0.15; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_10, .__timeline_fg.__timeline_mask_10 { mask-image: url("../../images/mask/full/navaho-sand-painting.png"); -webkit-mask-image: url("../../images/mask/full/navaho-sand-painting.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_11, .__timeline_fg.__timeline_mask_11 { mask-image: url("../../images/mask/slow/hieroglyphic-plan-by-hermes-of-the-ancient-zodiac.png"); -webkit-mask-image: url("../../images/mask/slow/hieroglyphic-plan-by-hermes-of-the-ancient-zodiac.png"); opacity: 0.175; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_11, .__timeline_fg.__timeline_mask_11 { mask-image: url("../../images/mask/full/hieroglyphic-plan-by-hermes-of-the-ancient-zodiac.png"); -webkit-mask-image: url("../../images/mask/full/hieroglyphic-plan-by-hermes-of-the-ancient-zodiac.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_12, .__timeline_fg.__timeline_mask_12 { mask-image: url("../../images/mask/slow/the-mystery-of-the-macrocosm.png"); -webkit-mask-image: url("../../images/mask/slow/the-mystery-of-the-macrocosm.png"); opacity: 0.2; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_12, .__timeline_fg.__timeline_mask_12 { mask-image: url("../../images/mask/full/the-mystery-of-the-macrocosm.png"); -webkit-mask-image: url("../../images/mask/full/the-mystery-of-the-macrocosm.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_13, .__timeline_fg.__timeline_mask_13 { mask-image: url("../../images/mask/slow/the-crucifixion-of-quetzalcoatl.png"); -webkit-mask-image: url("../../images/mask/slow/the-crucifixion-of-quetzalcoatl.png"); opacity: 0.2; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_13, .__timeline_fg.__timeline_mask_13 { mask-image: url("../../images/mask/full/the-crucifixion-of-quetzalcoatl.png"); -webkit-mask-image: url("../../images/mask/full/the-crucifixion-of-quetzalcoatl.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_14, .__timeline_fg.__timeline_mask_14 { mask-image: url("../../images/mask/slow/a-table-of-sephirothic-correspondences.png"); -webkit-mask-image: url("../../images/mask/slow/a-table-of-sephirothic-correspondences.png"); opacity: 0.2; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_14, .__timeline_fg.__timeline_mask_14 { mask-image: url("../../images/mask/full/a-table-of-sephirothic-correspondences.png"); -webkit-mask-image: url("../../images/mask/full/a-table-of-sephirothic-correspondences.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_15, .__timeline_fg.__timeline_mask_15 { mask-image: url("../../images/mask/slow/a-salamander-according-to-paracelsus.png"); -webkit-mask-image: url("../../images/mask/slow/a-salamander-according-to-paracelsus.png"); opacity: 0.15; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_15, .__timeline_fg.__timeline_mask_15 { mask-image: url("../../images/mask/full/a-salamander-according-to-paracelsus.png"); -webkit-mask-image: url("../../images/mask/full/a-salamander-according-to-paracelsus.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_16, .__timeline_fg.__timeline_mask_16 { mask-image: url("../../images/mask/slow/the-great-god-pan.png"); -webkit-mask-image: url("../../images/mask/slow/the-great-god-pan.png"); opacity: 0.2; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_16, .__timeline_fg.__timeline_mask_16 { mask-image: url("../../images/mask/full/the-great-god-pan.png"); -webkit-mask-image: url("../../images/mask/full/the-great-god-pan.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_17, .__timeline_fg.__timeline_mask_17 { mask-image: url("../../images/mask/slow/fifteen-rosicrucian-and-qabbalistic-diagrams-table-xii-figures-12-19.png"); -webkit-mask-image: url("../../images/mask/slow/fifteen-rosicrucian-and-qabbalistic-diagrams-table-xii-figures-12-19.png"); opacity: 0.2; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_17, .__timeline_fg.__timeline_mask_17 { mask-image: url("../../images/mask/full/fifteen-rosicrucian-and-qabbalistic-diagrams-table-xii-figures-12-19.png"); -webkit-mask-image: url("../../images/mask/full/fifteen-rosicrucian-and-qabbalistic-diagrams-table-xii-figures-12-19.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_18, .__timeline_fg.__timeline_mask_18 { mask-image: url("../../images/mask/slow/the-tree-of-classical-mythology.png"); -webkit-mask-image: url("../../images/mask/slow/the-tree-of-classical-mythology.png"); opacity: 0.15; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_18, .__timeline_fg.__timeline_mask_18 { mask-image: url("../../images/mask/full/the-tree-of-classical-mythology.png"); -webkit-mask-image: url("../../images/mask/full/the-tree-of-classical-mythology.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_19, .__timeline_fg.__timeline_mask_19 { mask-image: url("../../images/mask/slow/the-bembine-table-of-isis.png"); -webkit-mask-image: url("../../images/mask/slow/the-bembine-table-of-isis.png"); opacity: 0.15; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_19, .__timeline_fg.__timeline_mask_19 { mask-image: url("../../images/mask/full/the-bembine-table-of-isis.png"); -webkit-mask-image: url("../../images/mask/full/the-bembine-table-of-isis.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_20, .__timeline_fg.__timeline_mask_20 { mask-image: url("../../images/mask/slow/the-scheme-of-the-universe-according-to-the-greeks-and-romans.png"); -webkit-mask-image: url("../../images/mask/slow/the-scheme-of-the-universe-according-to-the-greeks-and-romans.png"); opacity: 0.2; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_20, .__timeline_fg.__timeline_mask_20 { mask-image: url("../../images/mask/full/the-scheme-of-the-universe-according-to-the-greeks-and-romans.png"); -webkit-mask-image: url("../../images/mask/full/the-scheme-of-the-universe-according-to-the-greeks-and-romans.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_21, .__timeline_fg.__timeline_mask_21 { mask-image: url("../../images/mask/slow/the-tree-of-noah.png"); -webkit-mask-image: url("../../images/mask/slow/the-tree-of-noah.png"); opacity: 0.15; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_21, .__timeline_fg.__timeline_mask_21 { mask-image: url("../../images/mask/full/the-tree-of-noah.png"); -webkit-mask-image: url("../../images/mask/full/the-tree-of-noah.png"); } }

#appTrackTimeline .__timeline_fg.__timeline_mask_22, .__timeline_fg.__timeline_mask_22 { mask-image: url("../../images/mask/slow/babbitts-atom.png"); -webkit-mask-image: url("../../images/mask/slow/babbitts-atom.png"); opacity: 0.2; }

@media screen and (min-width: 1152px) { #appTrackTimeline .__timeline_fg.__timeline_mask_22, .__timeline_fg.__timeline_mask_22 { mask-image: url("../../images/mask/full/babbitts-atom.png"); -webkit-mask-image: url("../../images/mask/full/babbitts-atom.png"); } }

@media screen and (max-aspect-ratio: 3/5) { #appTrackTimeline .__timeline_fg, .__timeline_fg { display: none; mask-image: none; -webkit-mask-image: none; } }

ul[data-role="trackMetadata"] li { position: relative; }

ul[data-role="trackMetadata"] li::before { content: ""; position: absolute; display: block; background-size: cover; background-repeat: no-repeat; background-position: 0 0; opacity: 0.7; }

[data-role="trackSounds"]::before { margin: -0.1em 0.5em 0 -1.7em; width: 1.2em; height: 1.2em; background-image: url("../../svg/main-app/noun_Playlist_2815364.svg"); }

[data-role="trackClassic"]::before { margin: 0 0.5em 0 -2.25em; width: 1.75em; height: 1.2em; background-image: url("../../svg/main-app/noun_Award_3971038.svg"); }

[data-role="trackInSack"]::before { margin: 0 0.5em 0 -2.25em; width: 1.75em; height: 1.2em; background-image: url("../../svg/main-app/noun_Best time_3967407.svg"); }

[data-role="trackProvider"]::before { margin: -0.1em 0.5em 0 -1.85em; width: 1.35em; height: 1.2em; background-image: url("../../svg/main-app/noun_component_3120659.svg"); }

/* crossover with '_header.scss' we let the logo fade out */
@keyframes __ui-logo-header__fade-logo { 0% { opacity: 1; }
  100% { opacity: 0.15; } }

@media screen and (min-aspect-ratio: 4/3) { .__ui-logo-header__fade-logo { animation-name: __ui-logo-header__fade-logo; animation-duration: 23s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 5s; } }

@keyframes __ui-logo-header__fade-listen { 0% { opacity: 1;
    color: #000; }
  100% { opacity: 0.6;
    color: #999; } }

@media screen and (min-aspect-ratio: 4/3) { .__ui-logo-header__fade-listen { animation-name: __ui-logo-header__fade-listen; animation-duration: 23s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 5s; } }

.__ui-logo-header__fade-listen:hover, .__ui-logo-header__fade-listen:active { animation-fill-mode: none; }

/*# sourceMappingURL=index.css.map */