* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'MDNichrome';
  src: url("/assets/fonts/nichrome/MDNichrome-Infra.woff") format('woff');
  font-weight: 100;
}
@font-face {
  font-family: 'MDNichrome';
  src: url("/assets/fonts/nichrome/MDNichrome-Thin.woff") format('woff');
  font-weight: 200;
}
@font-face {
  font-family: 'MDNichrome';
  src: url("/assets/fonts/nichrome/MDNichrome-Light.woff") format('woff');
  font-weight: 300;
}
@font-face {
  font-family: 'MDNichrome';
  src: url("/assets/fonts/nichrome/MDNichrome-Regular.woff") format('woff');
  font-weight: 400;
}
@font-face {
  font-family: 'MDNichrome';
  src: url("/assets/fonts/nichrome/MDNichrome-Dark.woff") format('woff');
  font-weight: 500;
}
@font-face {
  font-family: 'MDNichrome';
  src: url("/assets/fonts/nichrome/MDNichrome-Bold.woff") format('woff');
  font-weight: 600;
}
@font-face {
  font-family: 'MDNichrome';
  src: url("/assets/fonts/nichrome/MDNichrome-Black.woff") format('woff');
  font-weight: 700;
}
@font-face {
  font-family: 'MDNichrome';
  src: url("/assets/fonts/nichrome/MDNichrome-Ultra.woff") format('woff');
  font-weight: 800;
}
@font-face {
  font-family: 'MDNichrome';
  src: url("/assets/fonts/nichrome/MDNichrome-InfraOblique.woff") format('woff');
  font-weight: 100;
  font-style: oblique;
}
@font-face {
  font-family: 'MDNichrome';
  src: url("/assets/fonts/nichrome/MDNichrome-ThinOblique.woff") format('woff');
  font-weight: 200;
  font-style: oblique;
}
@font-face {
  font-family: 'MDNichrome';
  src: url("/assets/fonts/nichrome/MDNichrome-LightOblique.woff") format('woff');
  font-weight: 300;
  font-style: oblique;
}
@font-face {
  font-family: 'MDNichrome';
  src: url("/assets/fonts/nichrome/MDNichrome-RegularOblique.woff") format('woff');
  font-weight: 400;
  font-style: oblique;
}
@font-face {
  font-family: 'MDNichrome';
  src: url("/assets/fonts/nichrome/MDNichrome-DarkOblique.woff") format('woff');
  font-weight: 500;
  font-style: oblique;
}
@font-face {
  font-family: 'MDNichrome';
  src: url("/assets/fonts/nichrome/MDNichrome-BoldOblique.woff") format('woff');
  font-weight: 600;
  font-style: oblique;
}
@font-face {
  font-family: 'MDNichrome';
  src: url("/assets/fonts/nichrome/MDNichrome-BlackOblique.woff") format('woff');
  font-weight: 700;
  font-style: oblique;
}
@font-face {
  font-family: 'MDNichrome';
  src: url("/assets/fonts/nichrome/MDNichrome-UltraOblique.woff") format('woff');
  font-weight: 800;
  font-style: oblique;
}
* {
  scrollbar-width: 10px;
  scrollbar-color: #473436 #2f2224;
}
* ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
* ::-webkit-scrollbar-track {
  background: #2f2224;
}
* ::-webkit-scrollbar-thumb {
  background: #473436;
}
* ::-webkit-scrollbar-thumb:hover {
  background: #916a6e;
}
.shader-text {
  display: none;
}
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body {
  font-family: 'MDNichrome', sans-serif;
  font-weight: 400;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3c2c2e;
  color: #fffcfc;
  letter-spacing: 0.025em;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
}
body.loading #main {
  opacity: 0;
}
body.intro #navigation-tray {
  opacity: 0;
  pointer-events: none;
}
body.intro #browse-button,
body.intro #collection-button,
body.intro #search-button,
body.intro #contributors,
body.intro #browsing-footer {
  opacity: 0;
  pointer-events: none;
}
body.intro #audified-container {
  opacity: 0;
  pointer-events: none;
}
body.intro.stage-2 #navigation-tray {
  opacity: 1;
  pointer-events: all;
}
body.browse {
  cursor: grab;
}
body.browse #intro-view {
  pointer-events: none;
  opacity: 0;
}
body.browse #browse-view,
body.browse #add-track-button {
  pointer-events: all;
  opacity: 1;
}
body.browse #ccopy {
  opacity: 1;
}
body.browse #browse-button {
  pointer-events: none;
  opacity: 0;
  margin-bottom: 20px;
}
body.browse.introing {
  /*
      #collection-button, #search-button, #contributors should
      all be disabled until the user can start dragging
      */
}
body.browse.introing #collection-button,
body.browse.introing #search-button,
body.browse.introing #contributors {
  pointer-events: none;
  opacity: 0;
}
body.browse.playlist #browse-button {
  pointer-events: all;
  opacity: 1;
}
body.deep-link #about-button,
body.deep-link #surprise,
body.deep-link #browse-toggle,
body.deep-link #audified-container,
body.deep-link #browse-button,
body.deep-link #collection-button,
body.deep-link #search-button,
body.deep-link #add-track-button,
body.deep-link #logo--about-button,
body.deep-link #roncarterjazz {
  opacity: 0;
  pointer-events: none;
}
body.deep-link #intro-view {
  pointer-events: none;
  opacity: 1;
  z-index: 10;
  background: none;
}
body.deep-link #intro-view #intro-dot,
body.deep-link #intro-view .begin-button {
  display: none;
}
body.deep-link #intro-view #intro-welcome {
  opacity: 0;
  pointer-events: none;
}
body.deep-link #intro-view #intro-rc,
body.deep-link #intro-view #intro-dot,
body.deep-link #intro-view #intro-the,
body.deep-link #intro-view #intro-uni {
  transition: none;
}
body.deep-link #launch-explore {
  display: flex;
  z-index: 20;
}
body.deep-link #hamburger-menu,
body.deep-link #hamburger-menu--ctrl,
body.deep-link #current-release-info--container .tip-p,
body.deep-link #intro-instructions {
  display: none;
}
body.deep-link #about--preview-blurb {
  font-size: 20px;
  text-align: center;
  left: calc(50% - 200px);
  width: 400px;
  top: 100px;
  font-weight: 100;
  opacity: 1;
}
body.search #intro-view {
  pointer-events: none;
  opacity: 0;
}
body.search #search-view {
  pointer-events: all;
  opacity: 1;
}
body.search #browse-view,
body.search #main {
  filter: blur(4px);
}
body.artist #intro-view {
  pointer-events: none;
  opacity: 0;
}
body.artist #artist-view {
  pointer-events: all;
  opacity: 1;
}
body.playlist #intro-view {
  pointer-events: none;
  opacity: 0;
}
body.playlist #playlist-view {
  pointer-events: all;
  opacity: 1;
}
body.playlist #browse-toggle {
  z-index: 9;
}
canvas {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
}
#main {
  z-index: -1;
  transition: opacity 1s ease-in-out;
}
#ccopy {
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
  z-index: 0;
  -webkit-mask: radial-gradient(circle at 50% calc(50% + 50px), transparent 5%, black 30%);
  -webkit-filter: blur(5px);
}
#ccopy.hinting {
  -webkit-mask: radial-gradient(circle at 50% calc(50% + 50px), transparent 5%, black 30%);
}
.view {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#intro-view {
  background: radial-gradient(circle at 50% 47.5%, rgba(56, 44, 52, 0) 40%, rgba(56, 44, 52, 0.8) 100%);
  pointer-events: all;
  opacity: 1;
}
#intro-view.stage-1 #intro-the {
  top: 185px;
  left: 32px;
}
#intro-view.stage-1 #intro-rc {
  top: 200px;
  left: 0;
}
#intro-view.stage-1 #intro-uni {
  top: 248px;
  left: 187px;
}
#intro-view.stage-1 #intro-dot {
  border-radius: 55px;
  width: 110px;
  height: 110px;
  margin-left: -55px;
  opacity: 1;
}
#intro-view.stage-1 .begin-button {
  opacity: 1;
  pointer-events: all;
}
#intro-view.stage-2 #intro-the,
#intro-view.stage-2 #intro-rc,
#intro-view.stage-2 #intro-uni {
  width: -moz-max-content;
  width: max-content;
}
#intro-view.stage-2 #intro-welcome {
  opacity: 1;
}
#intro-inner {
  position: fixed;
  top: 103px;
  left: 50%;
  display: block;
  width: 248px;
  height: 136px;
  margin-left: -124px;
  margin-top: -68px;
  padding: 0;
  pointer-events: none;
  transition: all 2s ease-in-out;
}
#intro-the {
  display: block;
  top: 6px;
  left: 26px;
  z-index: 2;
  position: absolute;
  transition: all 2s ease-in-out;
}
#intro-rc {
  display: block;
  top: 2.5px;
  left: -12px;
  z-index: 2;
  width: 250px;
  position: absolute;
  transition: all 2s ease-in-out;
}
#intro-uni {
  display: block;
  top: 6px;
  left: 172px;
  z-index: 2;
  position: absolute;
  transition: all 2s ease-in-out;
}
#intro-dot {
  background-color: #bd5a47;
  position: absolute;
  opacity: 0;
  top: 170px;
  left: 50%;
  width: 100px;
  border-radius: 50px;
  height: 100px;
  margin-left: -50px;
  z-index: 1;
  transition: all 2s ease-in-out;
}
.launch-buttons {
  display: flex;
  justify-content: center;
  position: fixed;
  color: #fffcfc;
  font-family: 'MDNichrome';
  font-weight: 400;
  font-size: 15px;
  bottom: 20px;
  width: 100%;
}
.launch-buttons .emph {
  font-weight: 600;
}
.begin-button {
  background-color: #a04f3d;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  width: 120px;
  display: flex;
  align-items: center;
  padding: 8px 10px 8px 6px;
  transition: all 0.15s ease-in-out;
}
.begin-button img {
  width: 25px;
  height: auto;
  margin-right: 6px;
}
.begin-button label {
  pointer-events: none;
}
.begin-button:hover {
  background-color: #c15f4b;
}
#begin-button-with {
  border-radius: 10px 0 0 10px;
}
#begin-button-without {
  border-radius: 0 10px 10px 0;
  margin-left: 3px;
}
.intro-message {
  font-family: "Sentinel A", "Sentinel B", "Georgia", serif;
  font-style: normal;
  font-weight: 300;
  color: #fffcfc;
  position: fixed;
  padding: 14px;
  width: 100%;
  letter-spacing: normal;
  font-size: 18px;
  text-align: center;
  transition: all 500ms ease-in-out;
}
.intro-message .hint {
  opacity: 0;
  font-weight: 500;
  font-size: 18px;
  font-style: italic;
  margin-top: 10px;
  color: #d4aeb1;
  transition: opacity 0.15s ease-in-out;
}
.intro-message.hinting .hint {
  opacity: 1;
}
#intro-welcome {
  opacity: 0;
  transition: all 500ms ease-in-out;
  pointer-events: none;
  bottom: 0;
  background: radial-gradient(#3c2c2e, transparent);
  padding: 20px 12px;
  border-radius: 40px;
}
#intro-welcome .emph {
  font-weight: 500;
}
#intro-instructions {
  opacity: 0;
  transition: opacity 500ms ease-in-out;
  pointer-events: none;
  top: 100px;
  transition: all 500ms ease-in-out;
}
#intro-instructions--desktop {
  display: none;
}
#logo-dsktp {
  font-family: 'MDNichrome';
  font-style: normal;
}
#logo-dsktp .logo-dsktp--a {
  opacity: 0.7;
  font-size: 17px;
  font-weight: 600;
}
#logo-dsktp .logo-dsktp--b {
  text-transform: uppercase;
  font-size: 14px;
}
#about-button {
  opacity: 0;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 1;
  cursor: pointer;
  font-family: "Sentinel A", "Sentinel B", "Georgia", serif;
  display: flex;
  position: fixed;
  left: 12px;
  bottom: 14px;
  color: #d4aeb1;
  border: 1px solid #543d3f;
  background-color: rgba(37, 24, 26, 0.6);
  line-height: 30px;
  border-radius: 20px;
  text-align: center;
  font-weight: 300;
  font-size: 18px;
  font-style: italic;
  padding: 0px 14px;
  width: 36px;
  height: 36px;
  transition: all 0.15s ease-in-out;
}
#about-button:hover {
  color: #ffe2e4;
}
#about-i {
  display: block;
}
#about-button--label {
  display: none;
  pointer-events: none;
  margin-left: 8px;
  font-family: 'MDNichrome';
  font-style: normal;
  font-size: 16px;
  line-height: 34px;
  text-transform: lowercase;
  font-weight: 600;
  color: #866b6a;
}
.stage-1 + #about-button,
.stage-2 + #about-button {
  opacity: 1;
  pointer-events: all;
  width: 90px;
}
.stage-1 + #about-button #about-i,
.stage-2 + #about-button #about-i {
  display: none;
}
.stage-1 + #about-button #about-button--label,
.stage-2 + #about-button #about-button--label {
  display: block;
}
#about--popup--inner {
  padding: 30vh 20px 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: auto;
  -webkit-backdrop-filter: brightness(0.5);
          backdrop-filter: brightness(0.5);
  background: linear-gradient(transparent, #050721);
}
#about--popup--inner::-webkit-scrollbar-thumb {
  background-color: #2d2a3e;
}
#about--popup--inner::-webkit-scrollbar-track {
  background-color: transparent ;
}
#about--popup--inner::-webkit-scrollbar {
  width: 4px ;
}
#about--popup {
  cursor: default;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  z-index: 30;
  width: 100%;
  height: 100%;
  background-color: rgba(47, 34, 36, 0.9);
  flex-direction: column;
  transition: opacity 0.15s ease-in-out;
}
#about--popup.active {
  opacity: 1;
  pointer-events: all;
}
#about--popup a {
  transition: all 0.15s ease-in-out;
}
#about--photo-credit {
  top: 12px;
  left: 20px;
  position: fixed;
  color: #b5afc6;
}
#about-photo {
  /*
  instead of setting the background image here, we will
  set it in the js (index.js, showAbout). The advantage
  is that we only load the image if/when we need to [mark 220720]
  */
  height: 100%;
  background-size: cover;
  background-position-x: left;
  background-position-y: -120px;
  background-repeat: no-repeat;
  background-color: #07060b;
  z-index: -1;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}
#about--close {
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #b5afc6;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.05em;
  position: fixed;
  top: 12px;
  right: 12px;
  opacity: 0.8;
  transition: color 0.15s ease-in-out;
}
#about--close img {
  margin-left: -2px;
}
#about--close:hover {
  color: #d5cfe7;
  opacity: 1;
}
#about--title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 20px;
}
#about--body {
  font-family: "Sentinel A", "Sentinel B", "Georgia", serif;
  font-style: normal;
  font-weight: 300;
  letter-spacing: normal;
  font-size: 18px;
  color: #f0ebff;
  display: flex;
  flex-direction: column;
  height: calc(100% + 30px);
  max-width: 570px;
}
#about--body p {
  margin-bottom: 10px;
  font-weight: 400;
  max-width: 385px;
  line-height: 1.3;
}
#about--links-rc {
  margin-top: auto;
  max-width: 385px;
}
#about--links-rc,
#about--links-fathom {
  font-size: 16px;
  color: #b5afc6;
}
#about--links-rc a.about--link-btn,
#about--links-fathom a.about--link-btn {
  display: inline-block;
  color: #d5cfe7;
  text-decoration: none;
  font-family: 'MDNichrome';
  font-size: 14px;
  letter-spacing: 0.05em;
  font-weight: 500;
  width: -moz-max-content;
  width: max-content;
  margin-top: 8px;
  transition: all 0.15s ease-in-out;
}
#about--links-rc a.about--link-btn .link-icon,
#about--links-fathom a.about--link-btn .link-icon {
  width: 14px;
  vertical-align: middle;
  margin-left: 5px;
}
#about--links-rc a.about--link-btn:hover,
#about--links-fathom a.about--link-btn:hover {
  color: #f0ebff;
}
#about--links-fathom {
  margin-top: 20px;
  color: #b5afc6;
  line-height: 1.35em;
  display: flex;
}
#about--links-fathom a.fathom--link-btn {
  vertical-align: baseline;
  white-space: nowrap;
}
#about--links-fathom a.fathom--link-btn img {
  height: 11px;
  width: auto;
  margin-left: 2px;
}
#about--socials {
  margin-top: 20px;
  color: #b5afc6;
}
#about--socials--icons {
  margin-top: 14px;
}
#about--socials--icons .about--social-icon {
  opacity: 0.75;
  margin-right: 10px;
}
#about--socials--icons .about--social-icon img {
  height: 24px;
}
#about--socials--icons .about--social-icon:hover {
  opacity: 1;
}
#about--built {
  border-left: 1px solid #69667c;
  padding-left: 8px;
  margin-left: 8px;
}
.inline-link {
  color: #d5cfe7;
  text-shadow: 0 0 25px #d5cfe7;
  text-decoration: none;
}
.inline-link:hover {
  color: #f0ebff;
}
.button--icon {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.menu {
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: fixed;
  right: 0;
  pointer-events: none;
}
.menu.menu-opened {
  cursor: default;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  background-image: radial-gradient(farthest-corner at 100% 0px, #26171F 0%, #26171fad 400px, transparent 600px);
  background-size: 600px 600px;
  background-repeat: no-repeat;
  background-position: top right;
  color: #d4aeb1;
  letter-spacing: 0.05em;
  font-size: 18px;
  font-weight: 600;
}
.menu.menu-opened .font-normal {
  font-weight: 400;
}
.menu.menu-opened .menu-sub {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5em;
}
.menu.menu-opened .menu-ctrl {
  pointer-events: all;
  cursor: pointer;
  background: url(/assets/images/icon-close.svg) no-repeat 50%;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  opacity: 0.7;
}
.menu.menu-opened .menu-ctrl::before {
  content: 'CLOSE';
  position: relative;
  right: 30px;
  font-size: 14px;
  color: #957072;
}
.menu.menu-opened .menu-contents {
  opacity: 1;
  margin-right: unset;
}
.menu.menu-opened .button {
  pointer-events: all;
}
.menu .menu-contents {
  opacity: 0;
  margin-right: -100%;
  display: flex;
  flex-direction: column;
}
.menu .menu-section {
  margin-bottom: 4px;
}
.menu .menu-header {
  font-size: 16px;
  font-weight: 500;
  margin: 8px 12px;
  text-align: right;
}
.menu .menu-item + .menu-item {
  margin-top: 6px;
}
.menu .button {
  cursor: pointer;
  align-items: center;
  padding: 5px 8px;
  border-radius: 30px 0 0 30px;
  display: flex;
  justify-content: space-between;
  height: 60px;
  background-color: #412D33;
  color: #916C6E;
}
.menu .button img {
  width: 12px;
  vertical-align: middle;
  margin-right: 4px;
}
.menu .button.active {
  background-color: #5C4247;
  color: #D4B6B8;
}
.menu .button--icon {
  width: 20px;
  margin: 0 10px;
}
.menu .button--icon img {
  width: 100%;
  height: auto;
}
.menu .button--label {
  padding: 0 6px;
}
#audio-tip {
  position: relative;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
  z-index: 20;
  font-size: 14px;
  color: #A88FB9;
  pointer-events: all;
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: end;
  padding: 10px 14px;
  margin-right: 0;
  border-radius: 20px 0 0 20px;
  max-width: 400px;
  transition: background-color 0.15s ease-in-out;
  cursor: pointer;
}
#audio-tip.active {
  opacity: 1;
  pointer-events: all;
}
#audio-tip .menu-tip-button {
  display: flex;
  height: 26px;
  line-height: 26px;
  width: -moz-max-content;
  width: max-content;
  margin-right: 0px;
  transition: margin-right 0.15s ease-in-out;
}
#audio-tip .menu-tip-i {
  background-color: #A88FB9;
  color: #281921;
  border-radius: 50%;
  height: 26px;
  width: 26px;
  font-size: 18px;
  text-align: center;
  line-height: 26px;
  margin-right: 6px;
  font-family: "Sentinel A", "Sentinel B", "Georgia", serif;
  font-style: italic;
  font-weight: 500;
}
#audio-tip .menu-tip-content {
  font-family: "Sentinel A", "Sentinel B", "Georgia", serif;
  color: #fff;
  line-height: normal;
  letter-spacing: normal;
  font-weight: 500;
  top: 20px;
  right: 0;
  display: none;
  transition: all 0.15s ease-in-out;
  text-align: left;
}
#audio-tip .menu-tip-content p {
  margin: 4px 0;
}
#audio-tip .tip-dismiss {
  background-image: url(/assets/images/icon-plus-white.svg);
  transform: rotate(45deg);
  width: 0;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: auto;
}
#audio-tip.tipping {
  background-color: #5a475f;
  color: #e4bbff;
}
#audio-tip.tipping .menu-tip-content {
  display: block;
}
#audio-tip.tipping .menu-tip-i {
  background-color: #e4bbff;
}
#audio-tip.tipping .menu-tip-button {
  width: 100%;
}
#audio-tip.tipping .tip-dismiss {
  width: 20px;
}
#audio-tip:hover {
  color: #e4bbff;
}
#audio-tip:hover .menu-tip-i {
  background-color: #e4bbff;
}
#hamburger-menu--ctrl {
  pointer-events: all;
  cursor: pointer;
  height: 30px;
  width: 30px;
  position: fixed;
  top: 10px;
  right: 10px;
  background: url(/assets/images/icon-speaker-pink.svg) no-repeat 50%;
  z-index: 999;
  border-radius: 6px;
  opacity: 90%;
}
#hamburger-menu--ctrl::before {
  content: '';
  position: absolute;
  right: calc(100% + 6px);
  top: 8px;
  font-family: "Sentinel A", "Sentinel B", "Georgia", serif;
  letter-spacing: normal;
  font-style: italic;
  color: #d4aeb1;
  width: -moz-max-content;
  width: max-content;
  font-size: 14px;
}
#hamburger-menu--ctrl:hover {
  opacity: 1;
}
#hamburger-menu--ctrl.muted {
  background: url(/assets/images/icon-speaker-pink-off.svg) no-repeat 50%;
}
#hamburger-menu--ctrl.muted::before {
  display: none;
}
#hamburger-menu .menu-ctrl {
  height: 40px;
  width: 40px;
  position: relative;
  top: 10px;
  right: 10px;
}
#hamburger-menu .menu-item {
  display: flex;
  flex-direction: column;
  align-items: end;
}
#hamburger-menu.menu-opened .menu-ctrl {
  background: url(/assets/images/icon-close.svg) no-repeat 50%;
  top: 0;
  right: 0;
}
#hamburger-menu .button {
  width: -moz-max-content;
  width: max-content;
}
#hamburger-menu .button--icon {
  opacity: 50%;
  width: 34px;
}
#hamburger-menu .active .button--icon {
  opacity: 100%;
}
#menu--audified-ctrl .button {
  width: 280px;
}
#menu--audified-ctrl .button + .button {
  margin-top: 2px;
}
#menu--audified-ctrl .button:first-child {
  border-radius: 20px 0 0 0;
}
#menu--audified-ctrl .button:last-child {
  border-radius: 0 0 0 20px;
}
#menu--mute-ctrl .button {
  position: relative;
  transition: background-color 0.15s ease-in-out;
}
#menu--mute-ctrl .button .button--label {
  font-weight: 400;
}
#menu--mute-ctrl .button .button--icon {
  background-image: url(/assets/images/icon-speaker-pink.svg);
  background-position: 50% 5px;
  background-size: 24px;
  background-repeat: no-repeat;
  position: relative;
  height: 100%;
}
#menu--mute-ctrl .button .button--label::after {
  content: ' on';
  font-weight: 600;
}
#menu--mute-ctrl .button::after {
  position: absolute;
  bottom: 14px;
  width: 50px;
  left: 10px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  font-weight: 600;
  content: 'mute';
}
#menu--mute-ctrl .button.muted {
  background-color: #412D33;
  color: #916C6E;
}
#menu--mute-ctrl .button.muted .button--icon {
  background-image: url(/assets/images/icon-speaker-pink-off.svg);
  background-position-y: 3px;
}
#menu--mute-ctrl .button.muted .button--label::after {
  content: ' off';
}
#menu--mute-ctrl .button.muted::after {
  content: 'unmute';
}
#save-share-menu {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
#save-share-menu .menu-ctrl {
  width: 0;
}
#save-share-menu .menu-header {
  display: none;
}
#save-share-menu.menu-opened {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  background-image: radial-gradient(circle at 50% 100%, #35333A 0%, #35333A 25%, #1e222669 40%, transparent 100%);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top right;
  color: #557E87;
}
#save-share-menu.menu-opened .menu-ctrl {
  background: url(/assets/images/icon-close-teal.svg) no-repeat 50%;
  top: 0;
  right: 0;
  height: 40px;
  width: 40px;
  position: relative;
}
#save-share-menu.menu-opened .menu-ctrl::before {
  display: none;
}
#save-share-menu.menu-opened .menu-ctrl,
#save-share-menu.menu-opened .menu-contents {
  position: relative;
  top: 205px;
}
#save-share-menu.menu-opened .menu-header {
  display: block;
  position: absolute;
  top: -34px;
}
#save-share-menu .menu-contents {
  width: 100%;
  align-items: center;
}
#save-share-menu .menu-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#save-share-menu .menu-item {
  width: -moz-max-content;
  width: max-content;
  align-items: center;
}
#save-share-menu .button {
  background-color: #3F5459;
  color: #B9EEFF;
  justify-content: flex-start;
  display: flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 30px;
}
#save-share-menu .button.active {
  background-color: #557E87;
  color: #B9EEFF;
}
#save-share-menu #menu--save .menu-item {
  display: flex;
  flex-direction: column;
}
#save-share-menu #menu--save .button + .button {
  margin-top: 4px;
}
#save-share-menu #menu--save .save-button {
  transition: all 0.15s ease-in-out;
  width: 300px;
  justify-content: center;
}
#save-share-menu #menu--save .save-button .button--label {
  pointer-events: none;
  transition: none 0.15s ease-in-out;
}
#save-share-menu #menu--save .save-button.flash {
  background-color: #6897a1;
}
#save-share-menu #menu--save .item--unsaved {
  display: flex;
}
#save-share-menu #menu--save .item--saved {
  display: none;
}
#save-share-menu #menu--save.saved .item--unsaved {
  display: none;
}
#save-share-menu #menu--save.saved .item--saved {
  display: flex;
}
#save-share-menu #menu--save.saved .item--saved .save-button {
  background-color: #557E87;
  color: #B9EEFF;
}
#save-share-menu #menu--save.saved .save-button {
  width: -moz-max-content;
  width: max-content;
}
#save-share-menu #menu--save.saved .playlist-button {
  background-color: #557E87;
}
#save-share-menu #menu--save.saved .playlist-button.flash {
  background-color: #6897a1;
}
#save-share-menu #menu--share {
  display: none;
  width: 230px;
}
#save-share-menu #menu--youtube {
  width: 260px;
}
#save-share-menu .playlist-button {
  width: 260px;
  transition: background-color 0.15s ease-in-out;
}
#save-share-menu .playlist-button .button--label {
  font-weight: 400;
}
#save-share-menu .playlist-button .playlist-count {
  font-weight: 600;
}
#save-share-menu .playlist-button.flash {
  background-color: #557E87;
}
#save-share-menu .playlist-button #playlists-empty {
  display: none;
  opacity: 0.75;
}
#save-share-menu .playlist-button.zero .button--icon {
  opacity: 0.5;
}
#save-share-menu .playlist-button.zero #playlists-filled {
  display: none;
}
#save-share-menu .playlist-button.zero #playlists-empty {
  display: block;
}
#save-share-menu #menu--youtube .button--icon {
  width: 26px;
}
#save-share-menu #menu--youtube .yt-none {
  display: none;
}
#save-share-menu #menu--youtube.unavailable {
  pointer-events: none;
}
#save-share-menu #menu--youtube.unavailable .button--label {
  opacity: 0.5;
}
#save-share-menu #menu--youtube.unavailable .yt-available {
  display: none;
}
#save-share-menu #menu--youtube.unavailable .yt-none {
  display: block;
}
#copied-alert {
  position: fixed;
  bottom: 40px;
  left: calc(50% - 150px);
  width: 300px;
  height: 90px;
  background-color: #557E87;
  color: #f0ebff;
  text-align: center;
  font-size: 18px;
  border-radius: 8px;
  padding-top: 36px;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}
#copied-alert::after {
  content: url(/assets/images/icon-close-teal-lt.svg);
  position: absolute;
  top: 10px;
  right: 10px;
}
#copied-alert.active {
  opacity: 1;
  pointer-events: all;
}
#browse-toggle {
  opacity: 1;
  pointer-events: all;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  height: 40px;
  position: fixed;
  z-index: 11;
  left: 6px;
  top: 6px;
  transition: opacity 0.15s ease-in-out;
}
#browse-toggle input {
  overflow: hidden;
  width: 0;
  display: none;
}
#browse-toggle label {
  cursor: pointer;
  display: flex;
  color: rgb(168 127 118);
  background-color: #50393b;
  font-size: 14px;
  border-radius: 6px;
  padding-right: 10px;
  height: 40px;
  line-height: 40px;
  letter-spacing: 0.065em;
  font-weight: 600;
  box-shadow: 0 0 15px 1px #362729;
  position: relative;
}
#browse-toggle input:checked + label {
  color: #fffcfc;
  background-color: #a04f3d;
  z-index: 1;
}
#browse-toggle .browse-icon {
  background-position: center;
  background-repeat: no-repeat;
  height: 40px;
  width: 40px;
  display: block;
}
#browse-toggle #collab-opt-label {
  margin-right: 2px;
  border-radius: 6px 0 0 6px ;
}
#browse-toggle #collab-opt-label .browse-icon {
  background-image: url(/assets/images/icon-universe-pinkW.svg);
  background-size: 70%;
}
#browse-toggle input:checked + #collab-opt-label .browse-icon {
  background-image: url(/assets/images/icon-universe-a.svg);
}
#browse-toggle #year-opt-label {
  border-radius: 0 6px 6px 0;
}
#browse-toggle #year-opt-label .browse-icon {
  background-image: url(/assets/images/icon-timeline-pinkW.svg);
  background-size: 60%;
}
#browse-toggle input:checked + #year-opt-label .browse-icon {
  background-image: url(/assets/images/icon-timeline-lt.svg);
}
#browse-view.introing #current-release-info--container,
#browse-view.introing #filter-container,
#browse-view.introing #surprise,
#browse-view.introing #add-track-button,
#browse-view.introing #browse-toggle {
  opacity: 0;
  pointer-events: none;
}
#browse-view.hinting #intro-instructions {
  opacity: 1;
}
#browse-view.dragging {
  cursor: grabbing;
}
#browse-view.timeline #timelime-nav {
  opacity: 1;
  pointer-events: none;
}
#browse-view.timeline #timelime-nav #timeline-nav--controls,
#browse-view.timeline #timelime-nav .tl-hint--caret {
  pointer-events: all;
  cursor: pointer;
}
#browse-view.timeline #current-release-info {
  padding-bottom: 30px;
}
#browse-view.timeline #current-release-info .title {
  transform: scale(0.6);
}
#browse-view.timeline #current-release-info--headliner {
  margin: 8px 0 6px;
}
#browse-view.unrelated #current-release--related-titles {
  opacity: 0;
  pointer-events: none;
}
#launch-explore {
  display: none;
  justify-content: center;
  position: fixed;
  color: white;
  font-family: 'MDNichrome';
  font-weight: 400;
  font-size: 15px;
  bottom: 20px;
  width: 100%;
}
#launch-explore .emph {
  font-weight: 600;
}
#launch-explore .button {
  width: 120px;
  display: flex;
  align-items: center;
  padding: 8px 10px 8px 6px;
  cursor: pointer;
  background-color: #a04f3d;
}
#launch-explore .button img {
  width: 25px;
  height: auto;
  margin-right: 6px;
}
#launch-explore .button label {
  pointer-events: none;
}
#launch-explore .button:hover {
  background-color: #c15f4b;
}
#launch-explore .button + .button {
  margin-left: 3px;
}
#enter-with {
  border-radius: 10px 0 0 10px;
}
#enter-without {
  border-radius: 0 10px 10px 0;
}
#release-focus-canvas {
  background: radial-gradient(circle at 50% calc(50% + 50px), rgba(56, 44, 52, 0) 10%, rgba(56, 44, 52, 0.8) 60%);
}
#release-focus-canvas.hinting {
  background: radial-gradient(circle at 50% calc(50% + 50px), rgba(56, 44, 52, 0) 10%, rgba(37, 28, 34, 0.8) 40%);
}
#release-focus-canvas.clickable {
  cursor: crosshair;
}
#filter-container {
  display: none !important;
}
#contributor-banner,
#contributor-count {
  padding-left: 12px;
}
#contributor-banner {
  display: flex;
  justify-content: space-between;
  color: #839296;
  align-items: center;
}
#filter-header {
  font-size: 18px;
}
#filter-clear {
  cursor: pointer;
  font-size: 14px;
  letter-spacing: 0.05em;
  font-weight: 300;
  text-transform: lowercase;
  color: #839296;
  left: calc(50% - 125px);
  text-align: center;
  padding: 5px 10px 7px;
  background: rgba(19, 21, 22, 0.7);
  border-radius: 20px;
}
#filter-clear img {
  vertical-align: middle;
  width: 10px;
  margin-left: 6px;
  opacity: 0.5;
}
#contributor-filters--wrapper {
  display: flex;
  padding: 10px 0;
  margin-bottom: 10px;
  width: 100%;
  overflow-x: scroll;
  width: calc(100vw - 12px);
  position: relative;
  left: -12px;
}
#contributor-filters--wrapper::before {
  z-index: 1;
  content: '';
  height: 48px;
  width: 20px;
  position: fixed;
  left: 6px;
  background: linear-gradient(90deg, rgba(28, 28, 37, 0.5), transparent);
}
#contributor-filters--wrapper::after {
  content: '';
  height: 48px;
  width: 20px;
  position: fixed;
  right: 6px;
  background: linear-gradient(90deg, transparent, rgba(28, 28, 37, 0.5));
}
#contributor-filters--wrapper::-webkit-scrollbar {
  height: 2px;
}
#contributor-filters--wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, transparent 10px, #404C4F 30px, #404C4F calc(100% - 30px), transparent);
}
#contributor-filters--wrapper::-webkit-scrollbar-track {
  background: linear-gradient(90deg, transparent 10px, #131516 30px, #131516 calc(100% - 30px), transparent);
}
#contributor-filters {
  display: flex;
  flex-wrap: nowrap;
  padding: 0 10px;
  width: auto;
}
#contributor-filters .contrib-name {
  pointer-events: all;
  font-family: 'MDNichrome';
  font-size: 20px;
  animation: none;
  background: rgba(150, 118, 118, 0.2);
  padding: 5px 14px;
  margin: 0 1px 1px 0;
}
#contributor-filters .contrib-name.maestro-inline {
  color: #ffd1c7 !important;
  background: rgba(126, 69, 60, 0.4);
}
#contributor-filters .contrib-name + .contrib-name {
  margin-left: 0;
}
#contributor-filters .contrib-name::before {
  display: none;
}
#contributor-filters .contrib-name::after {
  content: url(/assets/images/icon-close-darkpink.svg);
  margin-left: 6px;
  position: relative;
  top: 1px;
}
#contributor-count {
  display: flex;
  font-family: "Sentinel A", "Sentinel B", "Georgia", serif;
  font-size: 14px;
  text-align: left;
  width: 100%;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.15s ease-in-out;
  color: #839296;
}
#contributor-count .count-emph {
  color: #DCFFFF;
}
#contributor-count .tip {
  font-style: italic;
  font-weight: 300;
}
#contributor-maestro {
  opacity: 0;
  display: none;
  color: #d28f81;
}
#timelime-nav {
  position: fixed;
  top: 0;
  left: 0;
  background: linear-gradient(#382c31 120px, transparent);
  z-index: 2;
  height: 160px;
  width: 100%;
  padding: 0px 15px;
  padding-top: 114px;
  opacity: 0;
  pointer-events: none;
  transition: all 500ms ease-in-out;
}
#timelime-nav.tl-scrolled {
  background: transparent;
}
#timelime-nav.tl-scrolled .hint p,
#timelime-nav.tl-scrolled #tl-hint-gesture {
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}
#timelime-nav.tl-scrolled .hint p {
  margin: 10px 0;
}
#timelime-nav.tl-scrolled .hint {
  top: -76px;
}
#timelime-nav.tl-scrolled .tl-hint--caret {
  width: 14px;
}
#timelime-nav .hint {
  color: #e4bbff;
  font-family: "Sentinel A", "Sentinel B", "Georgia", serif;
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  padding-top: 20px;
  transition: all 0.15s ease-in-out;
  width: 300px;
  margin: auto;
  position: relative;
  top: 0;
}
#timelime-nav .hint p {
  margin-bottom: 4px;
}
#timelime-nav .tl-hint--caret {
  width: 6px;
}
#timelime-nav .tl-hint--caret.up {
  transform: rotate(90deg);
}
#timelime-nav .tl-hint--caret.down {
  transform: rotate(-90deg);
}
#tl-hint-gesture {
  opacity: 1;
  height: 100vh;
  top: 0;
  position: fixed;
  left: calc(50% - 50px);
  z-index: -1;
  width: 100px;
  background: linear-gradient(#392b33, transparent, #392b33);
  -webkit-backdrop-filter: brightness(1.5);
          backdrop-filter: brightness(1.5);
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
}
#tl-hint-gesture .hint-gesture {
  position: absolute;
  height: 50px;
  width: 50px;
  left: 25px;
  opacity: 0%;
  top: 30%;
  transform: scale(0.5);
  border-radius: 100%;
  border: 2px solid #e4bbff;
  background: rgba(228, 187, 255, 0.3);
  animation-name: hint-move-vert;
  animation-duration: 6s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-delay: 4s;
  animation-fill-mode: none;
}
@keyframes hint-move-vert {
  0% {
    opacity: 0%;
    top: 30%;
    transform: scale(0.5);
  }
  5% {
    opacity: 100%;
    top: 30%;
    transform: scale(1);
  }
  40% {
    top: 75%;
    transform: scale(1);
  }
  45% {
    transform: scale(0.75);
  }
  60% {
    transform: scale(0.75);
  }
  70% {
    opacity: 100%;
    top: 30%;
    transform: scale(1);
  }
  80% {
    opacity: 0;
    top: 90%;
    transform: scale(0.5);
  }
  100% {
    opacity: 0;
    top: 30%;
    transform: scale(0.5);
  }
}
#timeline-nav--controls {
  display: flex;
  max-width: 300px;
  margin: auto;
  letter-spacing: 0.05em;
  transition: all 500ms ease-in-out;
}
#timeline--current-year {
  flex-grow: 1;
  font-size: 30px;
  text-align: center;
  font-weight: 600;
  text-shadow: 0 0 10px #4f3f40;
  transition: font-size 500ms ease-in-out;
}
#timeline--next-year {
  text-align: right;
}
#timeline--next-year .icon-caret {
  transform: rotate(180deg);
}
.year-control {
  cursor: pointer;
  border-radius: 6px;
  padding: 0 6px;
  color: #d4aeb1;
  font-size: 14px;
  font-weight: 500;
  transition: all 500ms ease-in-out;
  display: flex;
  align-items: center;
  background: transparent;
  color: #e8d8d1;
  animation-name: bubblefast;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  animation-delay: 10s;
}
.year-control img {
  width: 16px;
  transition: width 500ms ease-in-out;
}
.year-control .year-label {
  padding: 0 8px;
}
.year-control.disabled {
  pointer-events: none;
  opacity: 0;
}
.year-control:hover,
.year-control:active {
  background: rgba(149, 112, 114, 0.25);
  color: #fceae1;
}
.year-control:last-child {
  animation-delay: 12s;
}
@keyframes bubblefast {
  0% {
    background: transparent;
    color: #e8d8d1;
  }
  10% {
    background: rgba(149, 112, 114, 0.25);
    color: #fceae1;
  }
  20% {
    background: transparent;
    color: #e8d8d1;
  }
  20%::before {
    opacity: 0.8;
  }
  100% {
    background: transparent;
    color: #e8d8d1;
  }
  100%::before {
    opacity: 0.8;
  }
}
.browse-action {
  transition: opacity 0.15s ease-in-out;
  pointer-events: all;
  opacity: 1;
  letter-spacing: 0.05em;
  width: -moz-max-content;
  width: max-content;
}
#browsing-footer {
  display: flex;
  justify-content: space-between;
  pointer-events: all;
  z-index: 13;
}
#logo--about-button {
  cursor: pointer;
  position: relative;
  bottom: 12px;
  left: 12px;
  width: 80px;
}
#logo--about-button img {
  width: 100%;
  height: auto;
}
#logo--about-button::after {
  opacity: 0;
  content: 'i';
  width: 24px;
  height: 24px;
  line-height: 22px;
  background-color: #654a4b;
  color: #FFF;
  font-family: "Sentinel A", "Sentinel B", "Georgia", serif;
  text-align: center;
  font-style: italic;
  border-radius: 12px;
  position: absolute;
  left: 100%;
  top: 3px;
  margin-left: 10px;
  transition: opacity 0.15s ease-in-out;
}
#roncarterjazz a {
  color: #916c6f;
  text-decoration: none;
  padding: 0 12px;
  font-size: 1em;
}
#about--preview-blurb {
  position: fixed;
  top: 60px;
  left: 20px;
  width: 400px;
  text-align: left;
  font-family: "Sentinel A", "Sentinel B", "Georgia", serif;
  letter-spacing: normal;
  color: #d4aeb1;
  opacity: 0;
}
#search-button {
  cursor: pointer;
  display: flex;
  color: #c15f4b;
  border: 1px solid #50393b;
  opacity: 0.9;
  font-size: 14px;
  border-radius: 6px;
  padding-right: 10px;
  height: 40px;
  letter-spacing: 0.065em;
  font-weight: 600;
  box-shadow: 0 0 15px 1px #362729;
  align-items: center;
  position: fixed;
  right: 58px;
  top: 6px;
}
#search-button .button--icon {
  width: 24px;
  height: 24px;
  margin: 0 6px;
}
#search-button .button--icon img {
  height: auto;
  width: 100%;
}
#surprise--tip {
  letter-spacing: 0.05em;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  background: #ffc1b3;
  border-radius: 6px;
  padding: 8px 12px;
  z-index: 2;
  color: #3c2c2e;
  letter-spacing: normal;
  font-size: 14px;
  transition: opacity 0.15s ease-in-out;
  width: -moz-max-content;
  width: max-content;
  left: -210px;
  top: 10px;
  font-family: 'MDNichrome';
  font-weight: 600;
  padding: 16px;
}
#surprise--tip::before {
  content: url(/assets/images/tip_up_lt.svg);
  position: absolute;
  z-index: 1;
}
#surprise--tip::before {
  top: 18px;
  right: -10px;
  transform: rotate(90deg);
}
#surprise--label {
  color: #d28f81;
  font-weight: 600;
  margin-top: 10px;
}
#surprise {
  position: fixed;
  left: calc(50% - 35px);
  bottom: 10px;
  opacity: 1;
  pointer-events: all;
  transition: all 0.15s ease-in-out;
}
#surprise.na {
  pointer-events: none;
  box-shadow: none;
  filter: grayscale(1);
  opacity: 0.2;
}
#surprise:active #surprise--icon {
  padding: 0px;
}
#surprise:active #surprise--icon .surprise-ring {
  width: 70px;
  height: 70px;
  transform: rotate(30deg);
}
#surprise--icon {
  height: 70px;
  width: 70px;
  padding: 5px;
  display: flex;
  transition: all 0.15s ease-in-out;
}
#surprise--icon #surprise-shuffle {
  background: #a04f3d;
  box-shadow: 0 0 15px 1px #48383a;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
#surprise--icon #surprise-shuffle img {
  width: 26px;
  height: 100%;
  margin: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
#surprise--icon .surprise-ring {
  position: fixed;
  width: 60px;
  height: 60px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  transition: all 0.15s ease-in-out;
}
#surprise--icon #ring-outer {
  padding: 2px;
}
#surprise--icon #ring-inner {
  padding: 6px;
}
#view-collection-button {
  display: flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 30px 0 0 30px;
  display: none;
  background-color: rgba(85, 126, 135, 0.3);
  color: #557E87;
}
#view-collection-button img {
  width: 12px;
  vertical-align: middle;
  margin-right: 4px;
}
#view-collection-button .button--icon {
  background-image: url(/assets/images/icon-bookmark-teal.svg);
  background-size: contain;
  width: 40px;
  height: 100%;
  background-position: 50%;
  background-size: 50%;
  background-repeat: no-repeat;
  color: #B9EEFF;
}
#view-collection-button .button--icon .zero {
  color: #131516;
}
#surprise,
#add-track-button {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#add-track-button--tip {
  font-family: "Sentinel A", "Sentinel B", "Georgia", serif;
  font-weight: 300;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  background: #362729;
  border: 0.5px solid #a04f3d;
  border-radius: 6px;
  padding: 8px 12px;
  z-index: 2;
  color: #ffe2e4;
  letter-spacing: normal;
  font-size: 14px;
  font-weight: 400;
  transition: opacity 0.15s ease-in-out;
  top: -10px;
  left: calc(100% + 10px);
  width: 100px;
  text-align: left;
}
#add-track-button--tip::before {
  content: url(/assets/images/tip_up.svg);
  position: absolute;
  z-index: 1;
}
#add-track-button--tip::before {
  left: -16px;
  top: 10px;
  transform: rotate(-90deg);
}
#add-track-button {
  font-weight: 300;
  justify-content: center;
  transition: all 500ms ease-in-out;
  position: fixed;
  top: calc(50% - 40px);
  transition: all 0.15s ease-in-out;
  pointer-events: none;
}
#add-track-button:hover {
  color: #f6f6f6;
}
#add-track-button .add-track-button--no-audio {
  display: none;
}
#add-track-button.hinting-no-audio .add-track-button--with-audio {
  display: none;
}
#add-track-button.hinting-no-audio .add-track-button--no-audio {
  display: inline;
}
#add-track-button--label {
  font-family: "Sentinel A", "Sentinel B", "Georgia", serif;
  letter-spacing: normal;
  color: #87b3bc;
  font-style: italic;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
}
#add-track-button--label.active {
  opacity: 1;
  pointer-events: all;
}
#add-track-button--unsaved {
  display: block;
}
#add-track-button--saved {
  display: none;
}
#browse-view--info {
  pointer-events: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  text-align: center;
  position: relative;
}
#browse-view--info.is-filtering #timelime-nav {
  opacity: 0;
  pointer-events: none;
}
#browse-view--info.is-filtering #timeline-nav--controls {
  max-width: 180px;
}
#browse-view--info.is-filtering #timeline--current-year {
  font-size: 18px;
}
#browse-view--info.is-filtering .year-control {
  font-size: 12px;
}
#browse-view--info.is-filtering .year-control img {
  width: 10px;
}
#browse-view--info.save-menu--opened #contributors,
#browse-view--info.save-menu--opened #add-track-button {
  opacity: 0;
  pointer-events: none;
}
.tip-p {
  pointer-events: none;
  font-family: "Sentinel A", "Sentinel B", "Georgia", serif;
  font-style: italic;
  font-weight: 100;
  font-size: 14px;
  color: #d4aeb1;
  opacity: 1;
  transition: all 1000ms ease-in-out;
  color: #A88FB9;
}
.tip-p p {
  transition: all 1000ms ease-in-out;
}
.tip-p #tip-tl {
  opacity: 0;
}
.tip-p #tip-drag {
  opacity: 1;
}
.tip-p #gesture-anim {
  position: fixed;
  height: 30px;
  width: 30px;
  left: 0;
  top: 100px;
  border-radius: 100%;
  border: 2px solid #e4bbff;
  background: rgba(228, 187, 255, 0.3);
  opacity: 0%;
  transform: scale(0.5);
}
.tip-p #tip-drag,
.tip-p #tip-tl {
  background: linear-gradient(90deg, #A88FB9 0%, #e4bbff 5%, #A88FB9 10%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: txt-gradient 10s ease infinite;
  background-size: 200% 100%;
}
.tip-p.hinting #gesture-anim {
  left: 0;
  animation-name: hint-move-horiz;
  animation-duration: 10s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-iteration-count: 3;
  animation-delay: 500ms;
}
@keyframes txt-gradient {
  0% {
    background-position: 100% 50%;
  }
  50%,
  100% {
    background-position: -100% 50%;
  }
}
@keyframes hint-move-horiz {
  0%,
  100% {
    left: 0%;
    transform: scale(0.5);
  }
  5% {
    opacity: 100%;
    transform: scale(0.75);
  }
  10% {
    left: 60%;
    transform: scale(0.75);
  }
  25% {
    transform: scale(0.5);
  }
  40% {
    opacity: 100%;
    left: 25%;
    transform: scale(0.75);
  }
  50% {
    opacity: 0;
    left: 100%;
    transform: scale(0.5);
  }
}
#tip-tl {
  position: relative;
  top: -18px;
}
.timeline #tip-drag {
  opacity: 0;
}
.timeline #gesture-anim {
  top: 130px;
}
.timeline #tip-tl {
  opacity: 1;
}
.timeline .tip-p .headline {
  opacity: 0;
}
#selected-release--header {
  font-size: 18px;
  color: rgb(168 127 118);
  position: relative;
  bottom: 20px;
}
#current-release-info--container {
  padding: 60px 20px 0px 20px;
  height: 50%;
  padding-top: 60px;
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font-weight: 400;
  position: fixed;
  z-index: 2;
  top: 0;
  text-align: center;
  opacity: 1;
  transition: opacity 0.15s ease-in-out;
}
#current-release-info {
  flex-grow: 1;
  padding-bottom: 40px;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 500ms ease-in-out;
  opacity: 0;
}
#current-release-info .title {
  font-size: 50px;
  text-transform: uppercase;
  line-height: 0.95;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  display: flex;
  align-items: end;
  margin-bottom: 0;
  transition: transform 500ms ease-in-out;
}
#current-release-info .title.short {
  font-size: 58px;
}
#current-release-info .title.long {
  font-size: 40px;
}
#current-release-info .title.long.very {
  font-size: 32px;
}
#current-release-info .serial {
  color: #fceae1;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  letter-spacing: 0.05em;
  display: flex;
  font-size: 16px;
  max-width: 100%;
  transition: all 0.15s ease-in-out;
}
#current-release-info .serial .label {
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#current-release-info .serial .year::after {
  content: '|';
  font-weight: 100;
  padding: 0 6px;
}
#current-release-info .serial.barless .year::after {
  content: '';
  padding: 0;
}
#current-release-info--headliner {
  font-family: 'MDNichrome';
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 20px 0 6px;
  transition: margin 500ms ease-in-out;
  color: #F8E6DD;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
#contributors--btm-tip,
#contributors--more-banner {
  font-family: "Sentinel A", "Sentinel B", "Georgia", serif;
  font-style: italic;
  font-weight: 100;
  color: #d4aeb1;
  margin: 8px 0;
  font-size: 14px;
  display: none;
}
#contributors--more-banner label {
  font-family: 'MDNichrome';
  color: #ffe2e4;
  font-style: normal;
  width: 100%;
  text-align: center;
  font-weight: 400;
}
#contributors {
  pointer-events: all;
  position: fixed;
  top: calc(50% + 100px);
  left: 0;
  height: calc(100% - 50% - 180px);
  overflow-y: auto;
  width: 100%;
  padding: 0 3px;
  transition: all 500ms ease-in-out;
  display: flex;
  flex-direction: column;
}
#contributors::-webkit-scrollbar-track {
  background-color: transparent;
}
#contributors::-webkit-scrollbar {
  width: 4px;
}
#contributors.moring #and-more {
  display: flex;
  align-items: center;
}
#contributors.moring #and-more #and-more-count {
  margin-right: 4px;
}
#contributors.moring.mored {
  cursor: default;
  align-content: flex-start;
  height: calc(100% - 50% - 112px);
  margin-top: 14px;
  background: #1f181e;
  border-radius: 8px 8px 0 0;
  z-index: 11;
}
#contributors.moring.mored ::-webkit-scrollbar-track {
  background-color: transparent;
}
#contributors.moring.mored ::-webkit-scrollbar {
  width: 4px;
}
#contributors.moring.mored .contrib-name {
  animation: none;
}
#contributors.moring.mored #contributors--btm-tip {
  display: block;
}
#contributors.moring.mored .mored-out {
  display: block;
}
#contributors.moring.mored #contrib-name--wrapper {
  max-height: calc(100% - 34px);
  padding: 0 3px 24px;
  overflow-y: scroll;
}
#contributors.moring.mored #contributors--less-btn {
  position: absolute;
  right: 0px;
  top: 0px;
}
#contributors.moring.mored #contributors--less-btn:hover #and-less {
  color: #d4aeb1;
}
#contributors.moring.mored #contributors--more-fade {
  pointer-events: none;
  height: 60px;
  position: fixed;
  bottom: 0;
  background: linear-gradient(transparent, #1f181e 95%);
  left: 2px;
  width: calc(100% - 4px);
  border-radius: 8px;
}
#contributors.moring.mored #and-more {
  display: none;
}
#contributors.moring.mored #and-less,
#contributors.moring.mored #contributors--more-banner {
  display: block;
}
.deep-link #contributors.moring.mored {
  top: 50%;
  height: 50%;
  padding-bottom: 50px;
}
.deep-link #contributors.moring.mored #contributors--more-fade {
  height: 140px;
}
#contrib-name--wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 770px;
  transition: margin 500ms ease-in-out;
}
#contrib-name--wrapper::-webkit-scrollbar {
  width: 4px;
}
#contributors--more-btn {
  pointer-events: all;
}
#and-more,
#and-less {
  cursor: pointer;
  pointer-events: all;
  width: -moz-max-content;
  width: max-content;
  margin: auto;
  position: relative;
  display: none;
  transition: all 0.15s ease-in-out;
}
#and-more .icon-plus,
#and-less .icon-plus,
#and-more .icon-x,
#and-less .icon-x {
  width: 18px;
  vertical-align: middle;
  margin-right: 4px;
  /* let clicks and taps pass through to the parent */
  pointer-events: none;
}
#and-more {
  font-family: "Sentinel A", "Sentinel B", "Georgia", serif;
  color: #ebd9d1;
  font-style: italic;
  padding: 4px 10px;
}
#and-more .icon-plus {
  background: rgba(210, 143, 129, 0.75);
  border-radius: 50%;
  padding: 3px;
  width: 16px;
  height: 16px;
}
#and-less {
  margin-top: 0;
  padding: 5px;
  color: #957072;
  font-family: 'MDNichrome';
  font-style: normal;
}
#and-less--label {
  pointer-events: none;
}
.contrib-name {
  cursor: default;
  display: inline-block;
  white-space: nowrap;
  padding-right: 10px;
  position: relative;
  font-family: "Sentinel A", "Sentinel B", "Georgia", serif;
  font-style: normal;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.35em;
  transition: all 0.15s ease-in-out;
}
.contrib-name::before {
  margin-right: 6px;
  margin-bottom: -1px;
  content: '';
  background-image: url(/assets/images/contrib-s-a.svg);
  background-repeat: no-repeat;
  background-size: 20%;
  background-position: center;
  width: 12px;
  height: 12px;
  display: inline-block;
  transition: all 0.15s ease-in-out;
}
.contrib-name.maestro-inline::before {
  background-image: url(/assets/images/contrib-rc-red.svg);
  background-size: 100%;
  width: 14px;
  height: 14px;
  margin-bottom: -2px;
}
.contrib-name.c1::before {
  background-image: url(/assets/images/contrib-c1-a.svg);
  background-size: 20%;
}
.contrib-name.c2::before {
  background-image: url(/assets/images/contrib-c2-a.svg);
  background-size: 50%;
}
.contrib-name.c3::before {
  background-image: url(/assets/images/contrib-c3-a.svg);
  background-size: 65%;
}
.contrib-name.c4::before {
  background-image: url(/assets/images/contrib-c4-a.svg);
  background-size: 100%;
}
.contrib-name.filtered {
  color: #927170 !important;
  background: rgba(24, 16, 18, 0.4);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  animation: none;
  padding: 3px 19px;
}
.contrib-name.filtered.maestro-inline {
  color: #d28f81 !important;
}
.contrib-name.filtered::before {
  opacity: 0;
  width: 0;
  margin: 0;
}
.contrib-name.mored-out {
  display: none;
}
@keyframes bubble {
  0% {
    background: transparent;
    color: #e8d8d1;
  }
  0%::before {
    opacity: 0.8;
  }
  5% {
    background: rgba(149, 112, 114, 0.25);
    color: #fceae1;
  }
  5%::before {
    opacity: 1;
  }
  10% {
    background: transparent;
    color: #e8d8d1;
  }
  10%::before {
    opacity: 0.8;
  }
  100% {
    background: transparent;
    color: #e8d8d1;
  }
  100%::before {
    opacity: 0.8;
  }
}
@keyframes bubbleMaestro {
  0% {
    background: transparent;
    color: #ffc1b3;
  }
  0%::before {
    opacity: 0.8;
  }
  5% {
    background: rgba(160, 79, 61, 0.25);
    color: #ffd1c7;
  }
  5%::before {
    opacity: 1;
  }
  10% {
    background: transparent;
    color: #ffc1b3;
  }
  10%::before {
    opacity: 0.8;
  }
  100% {
    background: transparent;
    color: #ffc1b3;
  }
  100%::before {
    opacity: 0.8;
  }
}
.contrib-name {
  background: transparent;
  color: #fceae1;
  font-weight: 400;
  transition: all 0.15s ease-in-out;
  padding: 3px 9px 5px;
  border-radius: 20px;
  margin: 0 -3px;
  animation-name: bubble;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 5s;
}
.contrib-name::before {
  opacity: 0.8;
}
.contrib-name + .contrib-name.filtered {
  margin-left: 3px;
  padding: 3px 14px 5px;
}
.contrib-name.filtered {
  margin: 0;
  padding: 3px 15px 5px;
}
.contrib-name.maestro-inline {
  color: #ffc1b3;
  animation-name: bubbleMaestro;
}
.contrib-name:nth-child(2n) {
  animation-delay: 6s;
}
.contrib-name:nth-child(3n) {
  animation-delay: 7s;
}
.contrib-name:nth-child(4n) {
  animation-delay: 8s;
}
.contrib-name.single {
  animation: none;
}
#add-track-button.save-menu--opened,
#contributors.save-menu--opened {
  opacity: 0 !important;
}
#current-release--related-titles {
  display: none;
  opacity: 0;
  position: fixed;
  width: calc(50% - 100px - 180px);
  right: 0;
  top: calc(50% + 20px);
  height: calc(100% - 50% + 80px);
  text-align: left;
  flex-direction: column;
  color: #fceae1;
  border-left: 1px solid #50393b;
  padding: 0 10px;
}
#current-release--related-titles .titles-header h1 {
  font-size: 24px;
  font-weight: 300;
  padding-bottom: 8px;
  color: rgb(168 127 118);
}
#current-release--related-titles #titles--curr-headliner {
  font-weight: 500;
}
#current-release--related-titles h2.related-title--name {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 6px;
}
#current-release--related-titles ul {
  list-style-type: none;
  height: 100%;
  overflow: auto;
  padding: 10px;
  position: relative;
  left: -20px;
  padding-bottom: 200px;
}
#current-release--related-titles ul::-webkit-scrollbar-track {
  background-color: transparent;
}
#current-release--related-titles ul::-webkit-scrollbar {
  width: 4px;
}
#current-release--related-titles .related-title--item {
  cursor: default;
  padding: 10px;
}
#current-release--related-titles .related-title--item:hover {
  background-color: #543d3f;
}
#current-release--related-titles .related-title--item + .related-title--item {
  border-top: 1px solid #654a4b;
}
#current-release--related-titles .related-title--info {
  display: flex;
}
#current-release--related-titles .related-title--headliner {
  font-weight: 400;
}
#current-release--related-titles .related-title--headliner::after {
  content: '';
  font-weight: 100;
  padding: 0 4px;
}
#current-release--related-titles .related-title--date {
  font-weight: 300;
}
#current-release--related-titles::after {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 400px;
  content: '';
  pointer-events: none;
  background: radial-gradient(circle at 85% 190%, #32262d, #32262d 30%, transparent 45%);
}
#audified-container {
  display: none !important;
  opacity: 0;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: fixed;
  left: 60px;
  bottom: 13px;
  display: flex;
  transition: opacity 1s ease-in-out;
  font-size: 14px;
  letter-spacing: 0.05em;
}
#audified-container.active {
  opacity: 1;
  pointer-events: all;
}
#audified-container p {
  display: none;
  margin-right: 10px;
  color: #d4aeb1;
}
#audified-container input {
  overflow: hidden;
  width: 0;
  opacity: 0.1;
}
#audified-container label {
  cursor: pointer;
  display: flex;
  color: #957072;
  background-color: #543d3f;
  padding: 6px 10px;
  width: 90px;
  height: 40px;
  text-align: center;
  font-weight: 600;
  position: relative;
  box-shadow: 0 0 15px 1px #362729;
  transition: all 0.15s ease-in-out;
}
#audified-container label:hover {
  background-color: #694b4f;
  color: #ffe2e4;
}
#audified-container label .audified--label-text {
  align-self: center;
}
#audified-container input:checked + label {
  color: #fffcfc;
  background-color: #957072;
  z-index: 1;
  cursor: default;
}
#audified-container input:disabled + label,
#audified-container input:disabled + label:hover {
  color: #a68d87;
  background-color: #6a5453;
}
#audified-disabled-tip {
  font-family: 'MDNichrome';
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  background: #ffc1b3;
  border-radius: 6px;
  padding: 8px 12px;
  z-index: 2;
  color: #3c2c2e;
  letter-spacing: normal;
  font-size: 14px;
  transition: opacity 0.15s ease-in-out;
  width: 325px;
  bottom: 60px;
  left: -30px;
}
#audified-disabled-tip::before {
  content: url(/assets/images/tip_up_lt.svg);
  position: absolute;
  z-index: 1;
}
#audified-disabled-tip::before {
  top: calc(100% - 5px);
  left: calc(50% - 2px);
  transform: rotate(180deg);
}
#audified-disabled-tip.active {
  opacity: 1;
}
#audified--with-opt:hover #audified-disabled-tip {
  opacity: 1;
}
#audified--all-opt-label {
  border-radius: 6px 0 0 6px;
}
#audified--with-opt-label {
  border-radius: 0 6px 6px 0;
  margin-left: 3px;
}
#collection-button--flash-tip {
  font-family: 'MDNichrome';
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  background: #ffc1b3;
  border-radius: 6px;
  padding: 8px 12px;
  z-index: 2;
  color: #3c2c2e;
  letter-spacing: normal;
  font-size: 14px;
  transition: opacity 0.15s ease-in-out;
  top: calc(100% + 14px);
  width: 110px;
  transition: all 0.1s ease-in-out;
}
#collection-button--flash-tip::before {
  content: url(/assets/images/tip_up_lt.svg);
  position: absolute;
  z-index: 1;
}
#collection-button--flash-tip::before {
  top: -10.5px;
}
#navigation-tray {
  display: none !important;
  pointer-events: none;
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  padding: 6px;
}
#navigation-tray .button {
  pointer-events: all;
  cursor: pointer;
  display: flex;
  margin-right: 6px;
  width: 40px;
  height: 40px;
  background-color: rgba(24, 16, 18, 0.25);
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
}
#navigation-tray .button .nav-btn--icon {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
#navigation-tray .button .nav-btn--label {
  display: none;
  pointer-events: none;
  align-self: center;
  margin-right: 8px;
  padding-right: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #d28f81;
  letter-spacing: 0.05em;
}
#navigation-tray .button .active {
  display: none;
}
#navigation-tray .button .inactive {
  display: inline;
}
#navigation-tray .button.selected {
  background-color: #a04f3d;
  border-color: #a04f3d;
}
#navigation-tray .button.selected .nav-btn--label {
  color: #fffcfc;
}
#navigation-tray .button.selected .active {
  display: inline;
}
#navigation-tray .button.selected .inactive {
  display: none;
}
#navigation-tray .button.flash {
  border-color: #d4aeb1;
  background-color: #2f2224;
  transition: all 0.1s ease-in-out;
}
#navigation-tray .button.flash .nav-btn--label {
  color: #d4aeb1;
}
#navigation-tray .button.flash #playlist-count {
  color: #fffcfc !important;
}
#navigation-tray .button.flash #collection-button--flash-tip {
  opacity: 1;
}
.icon {
  max-height: 100%;
}
#browse-button.button {
  width: -moz-max-content !important;
  width: max-content !important;
  padding: 0 6px;
  margin-left: 0;
  display: flex;
  align-items: center;
  font-weight: 400;
}
#browse-button.button span {
  margin-left: 2px;
  font-weight: 600;
}
#browse-button.button img {
  margin-right: 8px;
  vertical-align: sub;
}
#browse-button.button.timing #back-to-uni {
  display: none;
}
#browse-button.button.timing #back-to-time {
  display: inline-block;
}
#back-to-time {
  display: none;
}
#collection-button.button {
  position: relative;
  margin-left: auto;
}
#collection-button.button .nav-btn--icon {
  background-image: url(/assets/images/icon-bookmark-red.svg);
  background-size: 60%;
}
#collection-button.button #playlist-count {
  color: #181012;
  font-size: 12px;
  padding-top: 9px;
  font-weight: 500;
  width: 100%;
  background-position: center;
  background-size: 18px;
  text-align: center;
  flex-shrink: 0;
  transition: color 0.15s ease-in-out;
}
#collection-button.button.selected .nav-btn--icon {
  background-image: url(/assets/images/icon-bookmark-white.svg);
}
#collection-button.button.selected #playlist-count {
  color: #3c2c2e;
}
#collection-button.button.zero .nav-btn--icon {
  background-image: url(/assets/images/icon-bookmark-stroke-red.svg);
}
#collection-button.button.zero #playlist-count {
  color: #7e453c;
}
#collection-button.button.zero.tooltipping #empty-collection-tooltip {
  display: block;
  opacity: 1;
}
#collection-button.button.zero.selected {
  background-color: #9676763b;
}
#empty-collection-tooltip {
  font-family: "Sentinel A", "Sentinel B", "Georgia", serif;
  font-weight: 300;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  background: #362729;
  border: 0.5px solid #a04f3d;
  border-radius: 6px;
  padding: 8px 12px;
  z-index: 2;
  color: #ffe2e4;
  letter-spacing: normal;
  font-size: 14px;
  font-weight: 400;
  transition: opacity 0.15s ease-in-out;
  top: calc(100% + 12px);
  left: calc(50% - 190px);
  width: 305px;
}
#empty-collection-tooltip::before {
  content: url(/assets/images/tip_up.svg);
  position: absolute;
  z-index: 1;
}
#empty-collection-tooltip::before {
  top: -13px;
  left: calc(50% + 33px);
}
#empty-collection-tooltip img {
  vertical-align: middle;
  width: 12px;
  margin: 0 2px;
}
#artist-view {
  background-color: #3c2c2e;
  z-index: 15;
  display: flex;
  flex-direction: column;
}
#artist-view #search-return {
  cursor: pointer;
  font-size: 14px;
  letter-spacing: 0.05em;
  font-weight: 400;
  color: #92756e;
  padding: 8px 0;
  border-radius: 7px;
  margin-right: 10px;
}
#artist-view #search-return img {
  width: 8px;
  vertical-align: bottom;
  margin-right: 6px;
  opacity: 0.6;
}
#artist-view .view-unscrollable {
  margin: 10px 16px 0px 16px;
}
#artist-view .scrollable {
  padding: 0 16px;
  height: calc(100vh - 30px);
}
#artist-view .list-view--artists {
  height: calc(100% - 360px);
}
#artist-view #collab-list {
  height: calc(100% - 40px);
}
#artist-view #collab-list--inner {
  overflow-y: auto;
  padding-right: 6px;
}
#artist-view #recording-list {
  margin-bottom: 24px;
  height: 206px;
}
#artist-view.maestro #rcee {
  display: block;
}
#artist-view.maestro .view-unscrollable,
#artist-view.maestro .scrollable {
  display: none;
}
#artist-view #collab-count,
#artist-view .search--matches--header {
  font-weight: 600;
  color: #ffe2e4;
  padding-bottom: 4px;
  margin-top: 20px;
}
#artist-view #collab-count .withwith,
#artist-view .search--matches--header .withwith {
  color: #d4aeb1;
  font-weight: 400;
}
#artist-view .search--matches--header h3 {
  font-weight: 400;
}
#artist-view .search--matches--header h3 .emph {
  font-weight: 600;
}
#rcee {
  display: none;
  background-image: url(/assets/images/rc-img.png);
  height: 100%;
  background-size: cover;
  background-position-x: left;
  background-position-y: 30%;
  background-repeat: no-repeat;
  background-color: #07060b;
}
#rcee--close {
  display: flex;
  align-items: center;
  color: #d4aeb1;
  font-weight: 200;
  letter-spacing: 0.05em;
  position: fixed;
  top: 12px;
  right: 12px;
}
.rc-fade {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-backdrop-filter: brightness(0.5);
          backdrop-filter: brightness(0.5);
}
#rcee-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 60px 30px 30px;
}
#rcee-title {
  font-size: 44px;
  position: relative;
  margin-bottom: 20px;
}
#quote {
  font-family: "Sentinel A", "Sentinel B", "Georgia", serif;
  font-style: italic;
  font-weight: 100;
  letter-spacing: normal;
  font-size: 24px;
  position: relative;
  max-width: 550px;
}
#quote::before {
  content: '\201C';
  position: absolute;
  left: -10px;
}
.photo-credit {
  position: relative;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.05em;
  font-weight: 200;
  margin-top: 8px;
  color: #ffe2e4;
}
.photo-credit .emph {
  font-weight: 400;
}
#artist-header--top-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: #d4aeb1;
}
#artist-title {
  flex-grow: 2;
  padding-top: 6px;
}
#collaborator-name {
  font-size: 40px;
  margin: 14px 0 8px 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.collab-image,
.collab-img {
  width: auto;
  background: #966e66a8;
  flex-shrink: 0;
}
.collab-left {
  padding: 0px 8px 0 8px;
}
.collab-title {
  font-family: 'MDNichrome';
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 16px;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.collab-contributors {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 4px 0;
}
.collab-year {
  color: #ffe2e4;
  font-size: 14px;
}
#all-collaborations-toggle,
#all-collaborators-toggle {
  display: none;
  font-family: "Sentinel A", "Sentinel B", "Georgia", serif;
  font-style: italic;
  font-weight: 300;
  color: #d4aeb1;
  padding-bottom: 8px;
  margin-bottom: 20px;
  letter-spacing: normal;
}
#all-collaborations-toggle {
  border-bottom: 1px solid #A2746C;
}
input {
  font-family: 'MDNichrome';
}
#search-view {
  z-index: 12;
}
#search-inner {
  width: 100%;
  height: 100%;
  padding: 16px;
  padding-top: 4px;
  background-color: #3c2c2e;
  display: flex;
  flex-direction: column;
  transition: background-color 0.15s ease-in-out;
}
#search-inner .scrollable {
  display: none;
  height: 100%;
  overflow: hidden;
}
#search-inner.typed {
  background-color: rgba(47, 34, 36, 0.9);
}
#search-inner.typed ::-webkit-scrollbar-track,
#search-inner.typed .search--artist-match,
#search-inner.typed .search--release-match,
#search-inner.typed #search-term,
#search-inner.typed #search-header {
  background-color: #25181a;
}
#search-inner.typed .scrollable {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}
#search-inner.empty-filling .scrollable {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  overflow: visible;
  height: calc(100% - 140px);
  position: relative;
  left: -16px;
  width: 100vw;
}
#search-inner.empty-filling .search--empty-filler {
  display: block;
}
#search-inner.empty-filling .search-matches {
  padding: 6px 16px 20px;
  overflow: visible;
}
#search-inner.empty-filling #search-left {
  flex-grow: 1;
  height: unset;
}
#search-inner.empty-filling .search--matches--left {
  display: none;
}
#search-inner.empty-filling #search-artist-matches {
  height: calc(100% - 310px);
}
#search-inner.empty-filling #search-release-matches {
  margin-bottom: 20px;
}
#search-inner.empty-filling #search-release-matches .search-results-container {
  margin-left: -16px;
  width: 100vw;
  padding: 0 16px 6px;
  height: 100%;
  flex-grow: 1;
}
#search-inner .collab-title,
#search-inner .collab-contributors {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
}
.search--empty-filler {
  display: none;
}
.search-matches {
  overflow: hidden;
  padding: 6px 0 16px;
}
.search-matches.no-results .search--no-matches {
  display: block;
  height: 70px;
}
.search-matches.no-results .search--matches--header h3 {
  color: #8d7371 !important;
}
.search-results-container {
  overflow-y: auto;
  padding-right: 6px;
}
#recording-list--inner,
#collab-list--inner {
  height: 100%;
}
#search-left {
  height: calc(100% - 270px);
}
#search-artist-matches {
  color: #fffcfc;
  height: 100%;
}
#search-artist-matches .search-results-container {
  max-height: 100%;
}
#search-release-matches {
  flex-shrink: 0;
  flex-direction: column;
  overflow-y: auto;
}
#search-release-matches.no-results {
  height: 80px;
}
#search-release-matches .search-results-container,
#recording-list--inner {
  display: flex;
  margin-top: 8px;
  overflow-y: hidden;
  padding-bottom: 6px;
}
.search--no-matches {
  display: none;
  font-size: 24px;
  font-weight: 200;
  margin: 14px 0;
  color: #d4aeb1;
}
#search-view-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #d4aeb1;
}
#search-view--close,
#artist-dismiss {
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #d4aeb1;
  font-weight: 200;
  letter-spacing: 0.05em;
}
#search-view--close:hover,
#artist-dismiss:hover {
  color: #ffe2e4;
}
#search-header {
  display: flex;
  flex-direction: row;
  margin-bottom: 14px;
  background: #2f2224;
  padding: 0px 7px;
  border-radius: 8px;
  width: 100%;
  max-width: 400px;
}
#search-icon {
  background-image: url(/assets/images/icon-search-ltpink.svg);
}
#search-icon,
#search-dismiss {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  width: 24px;
}
#search-term {
  flex-grow: 2;
  border-width: 0;
  font-weight: 400;
  letter-spacing: 0.7px;
  font-size: 16px;
  width: 100%;
  height: 100%;
  padding: 12px;
  outline: none;
  border: none;
  color: #fffcfc;
  background-color: #2f2224;
  font-family: 'MDNichrome';
  -webkit-user-select: auto;
  -moz-user-select: auto;
  user-select: auto;
}
#search-term::-moz-placeholder {
  color: #957072;
}
#search-term::placeholder {
  color: #957072;
}
#search-dismiss {
  background-image: url(/assets/images/icon-close.svg);
  opacity: 0.5;
  display: flex;
}
#search-dismiss .icon {
  width: 24px;
  display: block;
}
#search-dismiss p {
  display: block;
}
.search--matches--header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.search--matches--header .search--matches--right {
  font-family: "Sentinel A", "Sentinel B", "Georgia", serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: normal;
  font-size: 14px;
  text-transform: unset;
  color: #d4aeb1;
}
.search--artist-match,
.search--release-match,
.artist-collaboration,
.co-collaboration {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  margin: 6px 0;
  padding: 6px 8px;
  letter-spacing: 0.7px;
  background-color: rgba(47, 34, 36, 0.6);
}
.search--artist-match:hover,
.search--release-match:hover,
.artist-collaboration:hover,
.co-collaboration:hover {
  background-color: #2f2224;
}
.search--artist-match:first-child,
.search--release-match:first-child,
.artist-collaboration:first-child,
.co-collaboration:first-child {
  margin-top: 0;
}
.search--artist-match {
  align-items: baseline;
  margin: 0;
}
.search--artist-match + .search--artist-match {
  margin-top: 6px;
}
.search--artist-name,
.co-collab-name {
  font-size: 18px;
  font-weight: 300;
  margin-right: 8px;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search--artist-count .collab-num--label,
.co-collab-count-wrap .collab-num--label {
  font-weight: 400;
}
.search--artist-count .collab-num,
.co-collab-count-wrap .collab-num,
.search--artist-count .co-collab-count,
.co-collab-count-wrap .co-collab-count {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.7px;
  color: #ffe2e4;
}
.search--release-match,
.artist-collaboration {
  flex-direction: column;
  margin: 0 6px 0 0;
  width: calc(38vw - 32px);
  max-width: 130px;
  max-height: 260px;
}
.search--release-match .collab-left,
.artist-collaboration .collab-left {
  padding: 10px 0;
}
#search-view,
#artist-view {
  cursor: default;
}
#search-view h3,
#artist-view h3 {
  font-weight: 300;
  text-transform: uppercase;
  color: #d4aeb1;
  letter-spacing: 0.05em;
  font-size: 16px;
  font-weight: 500;
}
#search-view #search--empty-prompt,
#artist-view #search--empty-prompt {
  text-transform: none;
  color: #957072;
  font-weight: 400;
  height: 44px;
}
#playlist-view {
  z-index: 9;
  background: linear-gradient(-45deg, #364349, #2f2224);
  padding: 14px 0 0 10px;
  cursor: default;
}
#playlist-view #playlist-empty-msg {
  display: none;
  color: #557E87;
  font-size: 18px;
  line-height: 1.2em;
  padding: 28px;
}
#playlist-view #playlist-empty-msg .emph {
  color: #B9EEFF;
}
#playlist-view.empty #playlist-empty-msg {
  display: block;
}
#playlist-view.empty #playlist-list--wrap {
  display: none;
}
#playlist-inner {
  height: calc(100% - 55px);
  display: flex;
  flex-direction: column;
}
#playlist--footer {
  padding: 10px 20px;
  letter-spacing: 0.05em;
  font-size: 14px;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 55px;
}
#playlist--footer p {
  color: #d4aeb1;
  line-height: 1.15em;
}
#playlist--footer a {
  color: #ffe2e4;
  text-decoration: none;
  font-family: 'MDNichrome';
  font-weight: 500;
  width: -moz-max-content;
  width: max-content;
  margin-top: 8px;
  transition: all 0.15s ease-in-out;
}
#playlist--footer a .link-icon {
  width: 10px;
  vertical-align: text-bottom;
  margin-left: 2px;
}
#playlist--footer a:hover {
  color: #f0ebff;
}
#embed-wrap {
  overflow: hidden;
  transition: height 0.15s ease-in-out;
}
#playlist-list--wrap--title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #ffe2e4;
  padding: 8px 0;
  border-bottom: 1px solid #694b4f;
  margin-right: 20px;
}
#playlist-list--wrap {
  overflow: hidden;
}
#playlist-list {
  height: calc(100% - 45px);
  overflow: auto;
  margin-top: 12px;
  padding-bottom: 35px;
  padding-right: 10px;
}
#playlist-list::-webkit-scrollbar {
  width: 5px;
}
.playlist-release {
  cursor: default;
  display: flex;
  flex-direction: column;
  position: relative;
  background: rgba(58, 78, 85, 0.5);
  padding: 8px;
  margin-bottom: 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 1;
  transition: background 0.15s ease-in-out;
}
.playlist-release:first-child {
  margin-top: 0;
}
.playlist-release.no-link .playlist-release--cover {
  opacity: 0.5;
}
.playlist-release.no-link .playlist-release--video-control {
  display: none;
}
.playlist-release.no-link .playlist-release--link {
  display: none;
}
.playlist-release.no-link .preview-label {
  display: none;
}
.playlist-release.no-link .no-preview-label {
  display: flex;
}
.playlist-release.playing {
  background-color: #3A4E55;
}
.playlist-release.playing .preview-label {
  display: flex;
  opacity: 1;
}
.playlist-release.playing .playlist-release--video-control {
  background-image: none;
  cursor: pointer;
}
.playlist-release.playing .playlist-release--info {
  color: #fffcfc;
}
.playlist-release.playing .playlist-release--link {
  right: -5px;
  opacity: 1;
  pointer-events: all;
  margin-top: 8px;
  color: #DDF7FF;
  background-color: #557E87;
}
.playlist-release.playing .playlist-release--cover,
.playlist-release.playing .playlist-release--video-control {
  height: 110px;
  width: 110px;
}
.playlist-release.playing.finished .playlist-release--video-control {
  background-image: url(/assets/images/icon-speaker-white.svg);
}
.playlist-release.playing.finished .preview-label {
  color: #567e87;
}
.playlist-release.playing.finished .preview-label img {
  opacity: 0;
}
.playlist-release.playing .playlist-release--remove {
  opacity: 1;
}
.playlist-release.playing .playlist-release--link .full-note,
.playlist-release.playing .playlist-release--details-btn .full-note {
  display: inline;
}
.playlist-release.removing {
  opacity: 0;
  margin-bottom: -106px;
  transition: all 0.75s ease-in-out;
}
.playlist-release.removing div {
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
#playlist-release--info-l .playlist-release--video-control {
  position: absolute;
  top: 7px;
}
.playlist-release--descriptors {
  display: none;
  justify-content: space-between;
  overflow: hidden;
  height: 0px;
  align-items: baseline;
  transition: height 0.15s ease-in-out;
}
.preview-label,
.no-preview-label {
  font-size: 14px;
  letter-spacing: normal;
  height: 30px;
  display: flex;
  align-items: center;
  color: #B9EEFF;
  font-weight: 600;
}
.preview-label {
  display: none;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}
.preview-label img {
  vertical-align: middle;
  margin-left: 4px;
  width: 16px;
}
.no-preview-label {
  display: none;
}
.remove-label {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.075em;
  color: #896e6e;
  text-transform: uppercase;
  padding-right: 25px;
}
.playlist-release--cover,
.playlist-release--video-control {
  height: 90px;
  width: 90px;
  margin-right: 10px;
  transition: all 0.15s ease-in-out;
}
.playlist-release--video-control {
  cursor: pointer;
  background-image: url(/assets/images/icon-speaker-white.svg);
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  position: absolute;
}
.playlist-release--info {
  color: #B9EEFF;
  transition: all 0.15s ease-in-out;
  display: flex;
  width: 100%;
  justify-content: flex-start;
}
.playlist-release--info--text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: calc(100% - 112px);
}
.playlist-release--title {
  cursor: pointer;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100% - 70px);
  transition: color 0.15s ease-in-out;
}
.playlist-release--title:hover {
  opacity: 1;
}
.playlist-release--artist,
.playlist-release--serial {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.playlist-release--artist {
  font-weight: 500;
  letter-spacing: 0.05em;
  font-size: 14px;
  max-width: calc(100% - 60px);
}
.playlist-release--serial {
  transition: all 0.15s ease-in-out;
  letter-spacing: 0.05em;
  font-size: 16px;
}
.playlist-release--serial::before {
  content: '|';
  font-weight: 100;
  padding: 0 6px;
}
.playlist-release--serial .playlist-release--label {
  display: none;
  font-weight: 300;
}
.playlist-release--serial .playlist-release--year {
  font-weight: 300;
}
.playlist-release--serial.barless .playlist-release--year::after {
  content: '';
  padding: 0;
}
.playlist-release--row {
  display: flex;
  margin-top: 6px;
  align-items: baseline;
}
.playlist-release--row.playlist--links {
  display: block;
}
.playlist--links {
  margin-top: auto;
}
.playlist-release--details-btn {
  display: none;
}
.playlist-release--link {
  display: block;
  position: relative;
  right: -8px;
  margin-left: auto;
  border-radius: 20px 0 0 20px;
  color: #85B3C1;
  background-color: #374950;
  text-decoration: none;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 500;
  width: -moz-max-content;
  width: max-content;
  letter-spacing: 0.05em;
  transition: background-color 0.15s ease-in-out;
}
.playlist-release--link img {
  width: 20px;
  vertical-align: middle;
  margin-left: 5px;
}
.playlist-release--link .full-note {
  display: none;
  font-weight: 300;
}
.playlist-release--remove {
  position: absolute;
  top: 6px;
  right: 6px;
  opacity: 0.75;
  cursor: pointer;
}
.playlist-release--remove img {
  width: 15px;
  vertical-align: middle;
}
.playlist-release--remove label {
  font-size: 14px;
  color: #557E87;
  height: 30px;
  display: block;
}
.playlist-release--remove .remove-text {
  text-transform: uppercase;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}
.playlist-release--remove:hover .remove-text {
  opacity: 1;
}
.oblique {
  font-style: oblique;
}
.single .plural {
  display: none;
}
.hidden {
  display: none;
}
@media screen and (max-width: 375px) {
  .intro-message {
    font-size: 4.75vw !important;
  }
  .intro-message .hint {
    font-size: 4.75vw !important;
  }
  .intro-message#intro-welcome {
    padding: 40px 0;
  }
}
@media screen and (max-width: 920px) {
  .dsktp {
    display: none !important;
  }
  .mobile {
    display: inherit;
  }
  #save-share-menu.menu-opened .menu-ctrl {
    position: fixed;
    bottom: 180px;
    top: unset;
  }
  #save-share-menu.menu-opened .menu-contents {
    position: fixed;
    bottom: 4px;
    top: unset;
    transform: scale(0.85);
  }
  #search-view-title {
    flex-direction: column-reverse;
  }
  #search-view--close {
    margin-left: auto;
  }
  .intro-message .mobile {
    display: inline;
  }
  #add-track-button {
    top: calc(50% - 14px);
    font-size: 14px;
  }
  #add-track-button--label {
    display: inline;
  }
  #browse-view.timeline #browse-view--info #current-release-info--container {
    opacity: 0;
  }
  #browse-view.timeline #browse-view--info.tl-scrolled #current-release-info--container,
  #browse-view.timeline #browse-view--info.is-filtering #current-release-info--container {
    opacity: 1;
  }
}
@media screen and (min-width: 921px) {
  #contributor-count--label .dsktp {
    margin-right: 2px;
  }
  .dsktp {
    display: inline-block;
  }
  .mobile {
    display: none;
  }
  #browse-toggle {
    top: 20px;
    left: calc(50% - 250px);
    width: 500px;
    justify-content: center;
  }
  #browse-toggle label {
    font-size: 16px;
  }
  #browse-toggle label:hover {
    background-color: #654a4b;
    color: #fffcfc;
  }
  #browse-toggle label:hover#collab-opt-label .browse-icon {
    background-image: url(/assets/images/icon-universe-a.svg);
    transition: all 15ms ease-in-out;
  }
  #browse-toggle label:hover#year-opt-label .browse-icon {
    background-image: url(/assets/images/icon-timeline-lt.svg);
    transition: all 15ms ease-in-out;
  }
  #logo--about-button {
    position: fixed;
    bottom: unset;
    left: 20px;
    top: 20px;
    width: 210px;
    opacity: 0.8;
    cursor: pointer;
  }
  #logo--about-button::after {
    opacity: 1;
  }
  #logo--about-button:hover {
    opacity: 1;
  }
  #logo--about-button:hover::after {
    opacity: 1;
  }
  #search-button.button {
    font-size: 16px;
    top: 20px;
    right: 100px;
    color: #d28f81;
    background-color: rgba(126, 69, 60, 0.5);
    opacity: 0.7;
    cursor: pointer;
  }
  #search-button.button:hover {
    opacity: 1;
  }
  #hamburger-menu--ctrl {
    top: 20px;
    right: 40px;
  }
  #hamburger-menu--ctrl::before {
    top: 35px;
    right: -14px;
  }
  #hamburger-menu {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .tip-p {
    font-size: 16px;
  }
  .tip-p #gesture-anim {
    top: 140px;
  }
  #current-release-info--container {
    padding-top: 80px;
    height: 50%;
  }
  #audified-container {
    left: calc(50% - 101.5px);
    bottom: 40px;
    font-size: 16px;
  }
  #audified-container label {
    width: 100px;
  }
  .menu-tip-content {
    font-size: 16px;
  }
  #surprise {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(160, 79, 61, 0.5);
    padding: 10px;
    border-radius: 150px 150px 0 0;
    width: 300px;
    height: 150px;
    bottom: -30px;
    left: calc(50% - 150px);
  }
  #surprise #surprise-shuffle {
    box-shadow: none;
  }
  #surprise.hovered #surprise-shuffle {
    background: #c15f4b;
  }
  #intro-instructions--desktop {
    display: inline;
  }
  #about-button {
    top: 20px;
    left: 20px;
    width: auto;
    background-color: transparent;
    border: none;
  }
  #about--photo-credit {
    bottom: 54px;
    right: 50px;
    top: unset;
    left: unset;
  }
  #contributor-filters--wrapper {
    left: -20px;
    width: calc(100vw - 40px);
  }
  #contributor-filters--wrapper::before {
    left: 20px;
  }
  #contributor-filters--wrapper::after {
    right: 20px;
  }
  #contributor-filters {
    padding: 0 20px;
  }
  #current-release--related-titles {
    display: flex;
    opacity: 1;
    pointer-events: all;
  }
  #contributors {
    width: calc(50% - 100px - 100px);
    top: 50%;
    height: calc(100% - 50% - 20px);
    margin-top: 10px;
  }
  #contributors::after {
    content: '';
    pointer-events: none;
    height: 150px;
    position: fixed;
    bottom: 0;
    left: 2px;
    width: calc(100% - 4px);
    border-radius: 8px;
    z-index: -1;
  }
  #contributors.moring.mored {
    height: 50%;
    background-color: unset !important;
  }
  #contrib-name--wrapper {
    justify-content: left;
    display: grid;
    grid-template-columns: 50% 50%;
    text-align: left;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%;
  }
  #contributor-count {
    font-size: 18px;
  }
  #contributors--more-banner {
    display: block;
    text-align: left;
    margin: 10px 0 10px 20px;
  }
  #contributors--more-banner label {
    font-size: 18px;
    color: rgb(168 127 118);
  }
  #contributors.moring.mored #contributors--more-fade {
    background: linear-gradient(transparent, #32262d 45%);
  }
  #intro-view #intro-the img {
    height: 29px;
  }
  #intro-view #intro-rc svg {
    height: 40px;
  }
  #intro-view #intro-uni img {
    height: 32px;
  }
  #intro-view.stage-1 #intro-the {
    top: 170px;
    left: 40px;
  }
  #intro-view.stage-1 #intro-rc {
    top: 203px;
    left: 0;
  }
  #intro-view.stage-1 #intro-uni {
    top: 254px;
    left: 144px;
  }
  #intro-view.stage-2 #intro-the {
    top: 12px;
    left: -106px;
  }
  #intro-view.stage-2 #intro-rc {
    top: 2.5px;
    left: -44px;
  }
  #intro-view.stage-2 #intro-uni {
    top: 12px;
    left: 215px;
  }
  .intro-message {
    padding: 20px 30%;
    text-shadow: 0px 0px 10px #413233;
    font-weight: 300;
    font-size: 26px;
  }
  #intro-welcome {
    bottom: 75px;
    width: 800px;
    left: calc(50% - 400px);
  }
  #browse-view--info.save-menu--opened #contributors,
  #browse-view--info.save-menu--opened #add-track-button {
    opacity: 1;
    pointer-events: all;
  }
  #add-track-button {
    position: fixed;
    width: 200px;
    text-align: center;
    top: calc(50% + 210px);
    left: calc(50% - 100px);
  }
  body.deep-link #current-release-info--container {
    height: calc(50% + 60px);
  }
  body.deep-link #contributors {
    top: 50%;
    height: calc(50% - 20px);
  }
  #current-release-info .title.short {
    font-size: 60px;
  }
  #current-release-info .title {
    font-size: 52px;
    transform: scale(1) !important;
  }
  #current-release-info .title.long {
    font-size: 48px;
  }
  #current-release-info .title.long.very {
    font-size: 44px;
  }
  #current-release-info .contributors {
    font-size: 20px;
  }
  #contributor-banner {
    font-size: 16px;
  }
  #current-release-info--headliner,
  #current-release-info .serial {
    font-size: 22px;
  }
  .contrib-name {
    height: 36px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 5px 15px 7px;
    animation: none !important;
    margin: unset;
  }
  .contrib-name:hover {
    background: rgba(149, 112, 114, 0.4);
    color: #fffcfc;
  }
  .contrib-name:hover.maestro-inline {
    color: #ffd1c7 !important;
    background: rgba(126, 69, 60, 0.8);
  }
  .contrib-name + .contrib-name.filtered {
    padding: 5px 19px 7px;
  }
  .contrib-name.filtered {
    padding: 5px 21px 7px;
  }
  .contrib-name.filtered:hover {
    background: #25181a;
  }
  .contrib-name.filtered:hover.maestro-inline {
    color: #ffd1c7 !important;
    background: rgba(126, 69, 60, 0.8);
  }
  #and-more {
    padding: 4px 10px 6px 10px;
    margin-left: 2px;
    position: relative;
    bottom: -2px;
  }
  #and-more:hover {
    border-radius: 6px;
    background: rgba(101, 74, 75, 0.5);
  }
  #timelime-nav {
    padding-top: 130px;
  }
  #timelime-nav .hint p {
    margin-top: -8px;
    margin-bottom: -4px;
  }
  #timelime-nav .tl-hint--caret {
    width: 8px;
    margin: 8px;
  }
  #timelime-nav .tl-hint--caret:last-child {
    opacity: 1;
  }
  #timelime-nav.tl-scrolled .hint {
    top: -100px;
  }
  .year-control {
    font-size: 18px;
  }
  .year-control.hovered {
    background: rgba(84, 61, 63, 0.8);
  }
  #timeline--current-year {
    font-size: 44px;
  }
  #tl-hint-gesture {
    top: -172px;
    height: calc(100vh - 172px);
    width: 150px;
  }
  #tl-hint-gesture .hint-gesture {
    left: 50px;
  }
  #playlist-view #playlist-inner {
    max-width: 650px;
    margin: auto;
  }
  #search-left {
    height: 100%;
    width: 500px;
    margin-right: 20px;
    flex-shrink: 0;
  }
  #search-inner.typed .scrollable {
    flex-direction: row;
    justify-content: flex-start;
  }
  #search-inner,
  #artist-view {
    padding: 20px 20px;
  }
  #search-inner.maestro,
  #artist-view.maestro {
    padding: 0;
  }
  #search-inner .list-view--artists,
  #artist-view .list-view--artists {
    height: calc(100% + 20px);
    margin: 8px 0 0 20px;
    flex-grow: 1;
  }
  #search-inner .list-view--artists .search--matches--header,
  #artist-view .list-view--artists .search--matches--header {
    position: absolute;
    top: 92px;
  }
  #search-inner #collab-list,
  #artist-view #collab-list {
    height: calc(100% - 30px);
  }
  #search-inner.empty-filling .search--artist-match {
    background-color: unset;
    padding: 10px 0;
    border-bottom: 1px solid #50393b;
    color: #ffe2e4;
  }
  #search-inner.empty-filling .search--artist-match:hover {
    color: #fffcfc;
  }
  #search-inner.empty-filling .search--artist-match .search--artist-name {
    font-size: 24px;
    font-weight: 500;
  }
  #search-inner.empty-filling .scrollable {
    left: unset;
    width: unset;
  }
  #search-inner.empty-filling #search-release-matches {
    flex-direction: row;
  }
  #search-inner.empty-filling #search-release-matches .search-results-container {
    margin-left: unset;
    width: unset;
  }
  #artist-view .scrollable,
  #search-inner .scrollable,
  #search-inner.empty-filling .scrollable {
    height: calc(100vh - 50px);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    overflow: hidden;
  }
  #rcee-text {
    padding: 80px;
  }
  #rc-fade {
    top: 0;
  }
  #search-inner.empty-filling #search-artist-matches,
  #search-artist-matches {
    height: 100%;
  }
  #search-inner.empty-filling #search-artist-matches .search-results-container,
  #search-artist-matches .search-results-container {
    height: 100%;
  }
  #search-release-matches {
    height: 270px;
    flex-shrink: 1;
  }
  #recording-list {
    height: 100% !important;
    width: 50%;
    max-width: 700px;
    border-right: 1px solid #50393b;
    padding-right: 20px;
  }
  #recording-list--inner {
    height: calc(100% - 8px);
  }
  #search-release-matches {
    height: calc(100% - 0px) !important;
    margin-top: 0;
    border: none;
  }
  #recording-list--inner,
  #search-release-matches .search-results-container {
    flex-wrap: wrap;
    overflow: auto;
  }
  .artist-collaboration,
  .search--release-match {
    margin-bottom: 12px;
  }
  #save-share-menu.menu-opened .menu-ctrl {
    bottom: 202px;
    top: unset;
    position: fixed;
    right: calc(50% - 136px);
  }
  #save-share-menu.menu-opened .menu-contents {
    bottom: 11px;
    top: unset;
    position: fixed;
  }
}
@media screen and (min-width: 600px) {
  #about--popup--inner {
    padding: 50px;
    padding-top: 64px;
    padding-left: 20px;
  }
  #about--photo-credit {
    left: unset;
  }
  #about--close {
    top: 20px;
    right: 30px;
  }
  #about-photo {
    background-size: contain;
    background-position-x: right;
    background-position-y: 0;
  }
  #about--body {
    font-size: 22px;
  }
  #about--body p,
  #about--links-rc {
    max-width: unset;
  }
  #about--links-rc,
  #about--links-fathom {
    font-size: 20px;
    max-width: 470px;
  }
  #about--links-rc a.about--link-btn,
  #about--links-fathom a.about--link-btn {
    font-size: 17px;
  }
  #about--links-rc a.fathom--link-btn img,
  #about--links-fathom a.fathom--link-btn img {
    height: 14px;
  }
}
@media (max-height: 584px) {
  #browse-toggle {
    height: 34px;
    top: 6px;
  }
  #browse-toggle label {
    height: 34px;
    line-height: 34px;
  }
  #browse-toggle .browse-icon {
    height: auto;
    width: 20px;
    background-size: 100% !important;
    margin: 0 6px;
  }
  #search-button {
    height: 34px;
  }
  .tip-p .headline {
    display: none;
  }
  .tip-p #gesture-anim {
    top: 72px;
  }
  #navigation-tray {
    padding: 8px 12px;
  }
  #navigation-tray .button {
    width: 34px;
    height: 34px;
  }
  #navigation-tray .button#browse-button {
    width: auto;
  }
  #collection-button.button #playlist-count {
    background-size: 15px;
  }
  #add-track-button {
    top: calc(50% - 40px);
  }
  #contributor-count,
  #contributor-maestro {
    opacity: 0;
  }
  #current-release-info--container {
    height: calc(50% - 20px);
    padding-top: 50px;
  }
  #current-release-info .serial {
    margin-bottom: 6px;
  }
  #current-release-info .title.short {
    font-size: 36px;
  }
  #current-release-info .title {
    font-size: 36px;
  }
  #current-release-info .title.long {
    font-size: 30px;
  }
  #current-release-info .title.long.very {
    font-size: 22px;
  }
  #current-release-info--headliner {
    margin-top: 2px !important;
  }
  #filter-clear {
    top: calc(calc(50% - 20px));
    transform: scale(0.85);
  }
  .title {
    transform: scale(0.9);
  }
  #contributors {
    top: calc(50% + 100px - 20px);
    height: 96px;
  }
  #contributors.moring.mored {
    height: calc(50% - 94px);
  }
  #timelime-nav {
    padding-top: 75px;
    height: 42px;
  }
  .timeline #tip-tl {
    opacity: 0;
  }
  .timeline #gesture-anim {
    top: 80px;
  }
  #audified-container {
    bottom: 12px;
  }
  #surprise {
    bottom: 0px;
  }
  #about-button {
    bottom: 14px;
  }
  #search-view #search--empty-prompt {
    height: 24px;
    font-size: 14px;
  }
  #search-artist-matches {
    height: 100% !important;
  }
}
@media screen and (min-height: 700px) {
  #browse-view--info.is-filtering #timelime-nav {
    top: calc(200px + 5vh);
  }
  #current-release-info .title {
    transform: scale(0.7);
  }
}
@media screen and (min-width: 600px) and (max-width: 920px) and (min-height: 800px) {
  #contributors {
    top: calc(50% + 150px);
  }
}
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .begin-button {
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
  }
  #contributors.moring.mored {
    background-color: rgba(27, 20, 26, 0.8);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
  }
  #search-inner {
    background-color: rgba(60, 44, 46, 0.9);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
  }
}