karaoke-eternal 1.0.0

package/build/main.4be526e3a94d53aeceae.css

@@ -0,0 +1,2034 @@
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+
+/*
+Document
+========
+*/
+
+/**
+Use a better box model (opinionated).
+*/
+
+*,
+::before,
+::after {
+	box-sizing: border-box;
+}
+
+/**
+Use a more readable tab size (opinionated).
+*/
+
+html {
+	-moz-tab-size: 4;
+	tab-size: 4;
+}
+
+/**
+1. Correct the line height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+*/
+
+html {
+	line-height: 1.15; /* 1 */
+	-webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/*
+Sections
+========
+*/
+
+/**
+Remove the margin in all browsers.
+*/
+
+body {
+	margin: 0;
+}
+
+/**
+Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+*/
+
+body {
+	font-family:
+		system-ui,
+		-apple-system, /* Firefox supports this but not yet `system-ui` */
+		'Segoe UI',
+		Roboto,
+		Helvetica,
+		Arial,
+		sans-serif,
+		'Apple Color Emoji',
+		'Segoe UI Emoji';
+}
+
+/*
+Grouping content
+================
+*/
+
+/**
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+*/
+
+hr {
+	height: 0; /* 1 */
+	color: inherit; /* 2 */
+}
+
+/*
+Text-level semantics
+====================
+*/
+
+/**
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr[title] {
+	text-decoration: underline dotted;
+}
+
+/**
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+	font-weight: bolder;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+	font-family:
+		ui-monospace,
+		SFMono-Regular,
+		Consolas,
+		'Liberation Mono',
+		Menlo,
+		monospace; /* 1 */
+	font-size: 1em; /* 2 */
+}
+
+/**
+Add the correct font size in all browsers.
+*/
+
+small {
+	font-size: 80%;
+}
+
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+sup {
+	top: -0.5em;
+}
+
+/*
+Tabular data
+============
+*/
+
+/**
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+
+table {
+	text-indent: 0; /* 1 */
+	border-color: inherit; /* 2 */
+}
+
+/*
+Forms
+=====
+*/
+
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	font-family: inherit; /* 1 */
+	font-size: 100%; /* 1 */
+	line-height: 1.15; /* 1 */
+	margin: 0; /* 2 */
+}
+
+/**
+Remove the inheritance of text transform in Edge and Firefox.
+1. Remove the inheritance of text transform in Firefox.
+*/
+
+button,
+select { /* 1 */
+	text-transform: none;
+}
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+	-webkit-appearance: button;
+}
+
+/**
+Remove the inner border and padding in Firefox.
+*/
+
+::-moz-focus-inner {
+	border-style: none;
+	padding: 0;
+}
+
+/**
+Restore the focus styles unset by the previous rule.
+*/
+
+:-moz-focusring {
+	outline: 1px dotted ButtonText;
+}
+
+/**
+Remove the additional ':invalid' styles in Firefox.
+See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
+*/
+
+:-moz-ui-invalid {
+	box-shadow: none;
+}
+
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+
+legend {
+	padding: 0;
+}
+
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+	vertical-align: baseline;
+}
+
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+	height: auto;
+}
+
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+	-webkit-appearance: textfield; /* 1 */
+	outline-offset: -2px; /* 2 */
+}
+
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+
+::-webkit-file-upload-button {
+	-webkit-appearance: button; /* 1 */
+	font: inherit; /* 2 */
+}
+
+/*
+Interactive
+===========
+*/
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+	display: list-item;
+}
+
+:root {
+  --hue-blue: 209;
+  --hue-pink: 270;
+
+  /* Defaults */
+  --font-family: system-ui, sans-serif;
+  --font-family-custom: Raleway, system-ui, sans-serif;
+  --bg-color: #000;
+  --text-color: hsl(var(--hue-blue), 10%, 87%);
+  --link-color: hsl(var(--hue-blue), 92%, 69%);
+  --text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+  --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+  --drop-shadow-filter: drop-shadow(0 2px 5px #222);
+  --container-padding: 10px;
+  --btn-margin: 6px;
+  --border-radius: 5px;
+
+  --input-color: #444;
+  --input-placeholder-color: var(--btn-bg-color);
+  --input-bg-color: hsl(var(--hue-blue), 10%, 90%);
+  --input-outline-color: hsl(var(--hue-blue), 90%, 50%);
+  --input-margin: 7px;
+
+  --btn-bg-color: hsl(var(--hue-blue), 40%, 30%);
+  --btn-active-bg-color: var(--link-color);
+  --btn-active-filter: drop-shadow(0 0 10px hsla(var(--hue-blue), 100%, 100%, .5));
+  --btn-activate-filter:
+    drop-shadow(-5px 0 10px hsl(var(--hue-blue), 80%, 50%))
+    drop-shadow(5px 0 10px hsl(var(--hue-blue), 80%, 50%))
+    drop-shadow(0 0 10px hsl(var(--hue-blue), 80%, 50%));
+
+  --btn-danger-bg-color: hsl(var(--hue-pink), 60%, 57%);
+  --btn-danger-filter: drop-shadow(0 0 10px hsla(var(--hue-pink), 100%, 100%, .5));
+  --btn-danger-activate-filter:
+    drop-shadow(-5px 0 10px hsl(var(--hue-pink), 80%, 70%))
+    drop-shadow(5px 0 10px hsl(var(--hue-pink), 80%, 70%))
+    drop-shadow(0 0 10px hsl(var(--hue-pink), 80%, 70%));
+
+  /* UI chrome (header/footer) */
+  --chrome-bg-color: hsla(var(--hue-blue), 100%, 5%, .8);
+  --chrome-border-color: hsla(var(--hue-blue), 24%, 26%, 0.5);
+  --header-notice-color: var(--text-color);
+  --header-notice-bg-color: hsl(var(--hue-blue), 100%, 27%);
+
+  /* Navigation */
+  --nav-link-color: var(--btn-bg-color);
+  --nav-active-color: var(--link-color);
+  --nav-active-filter: var(--btn-active-filter);
+  --animation-nav-activate: var(--animation-btn-activate);
+
+  /* Library */
+  --artist-item-height: 44px;
+  --artist-folder-color: var(--text-color);
+  --artist-folder-bg-color: hsl(var(--hue-blue), 90%, 25%);
+  --artist-folder-starred-color: #000;
+  --artist-folder-starred-bg-color: var(--link-color);
+  --artist-folder-starred-filter: var(--btn-active-filter);
+  --artist-name-color: hsl(var(--hue-blue), 10%, 85%);
+
+  --song-item-btn-width: 44px;
+  --song-item-btn-height: 44px;
+  --song-item-btn-bg-color: hsl(var(--hue-blue), 100%, 15%);
+  --song-item-btn-active-color: #333;
+  --song-item-btn-active-bg-color: var(--btn-active-bg-color);
+  --song-item-btn-active-filter: var(--btn-active-filter);
+  --song-duration-color: hsl(var(--hue-blue), 10%, 45%);
+  --song-title-color: hsl(var(--hue-blue), 10%, 80%);
+
+  --alpha-picker-color: var(--artist-folder-bg-color);
+  --queued-item-color: hsl(var(--hue-pink), 70%, 80%);
+  --queued-item-text-shadow: var(--text-shadow-glow);
+
+  --search-results-heading-color: var(--text-color);
+  --search-results-heading-bg-color: var(--artist-folder-bg-color);
+  --mark-bg-color: hsl(var(--hue-blue), 50%, 30%);
+
+  /* Queue */
+  --active-item-from-bg-color: hsl(var(--hue-blue), 70%, 15%);
+  --active-item-to-bg-color: hsl(var(--hue-blue), 70%, 30%);
+  --queue-item-height: 92px;
+
+  /* Account panels */
+  --panel-bg-color: hsl(var(--hue-blue), 20%, 10%);
+  --panel-title-color: hsl(var(--hue-blue), 10%, 92%);
+  --panel-title-bg-color: hsl(var(--hue-blue), 5%, 30%);
+  --panel-title-size: 20px;
+  --panel-title-padding: 6px;
+  --panel-title-font: 300 20px var(--font-family-custom);
+
+  /* PlaybackCtrl */
+  --transport-btn-bg-color: var(--btn-danger-bg-color);
+  --transport-btn-filter: var(--btn-danger-filter);
+  --transport-volume-track-color: var(--btn-bg-color);
+  --transport-volume-track-active-color: var(--btn-active-bg-color);
+  --transport-volume-track-active-filter: var(--btn-active-filter);
+
+  /* Up Next header/banner */
+  --up-next-bg-color-from: hsl(var(--hue-blue), 70%, 20%);
+  --up-next-bg-color-to: hsl(var(--hue-blue), 70%, 35%);
+  --up-next-filter: none;
+
+  --up-now-bg-color-from: hsl(var(--hue-pink), 70%, 20%);
+  --up-now-bg-color-to: hsl(var(--hue-pink), 50%, 40%);
+  --up-now-filter: none;
+
+  /* <button> colors */
+  --btn-default-color: #333;
+  --btn-default-bg-color: hsl(var(--hue-blue), 10%, 75%);
+
+  --btn-primary-color: #333;
+  --btn-primary-bg-color: var(--btn-active-bg-color);
+
+  /* Animation */
+  --spring-duration: .5s;
+  --spring-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --function-ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+  --animation-bounce: bounce .25s ease-out;
+  --animation-text-shadow-glow: glow .25s ease-out;
+  --animation-btn-activate: btn-activate .1s ease-out;
+  --animation-btn-danger-activate: btn-danger-activate .1s ease-out;
+  --text-shadow-glow: 0 0 .25em hsl(var(--hue-pink), 100%, 50%), 0 0 .5em hsl(var(--hue-pink), 100%, 50%);
+}
+
+@keyframes bounce {
+  from { transform: scale3d(1, 1, 1); }
+  3% { transform: scale3d(1.75, 1.75, 1.75); }
+  95% { transform: scale3d(.9, .9, .9); }
+  to { transform: scale3d(1, 1, 1); }
+}
+
+@keyframes glow {
+  from { text-shadow: none; }
+  25% { text-shadow: 0 0 4px hsl(var(--hue-pink), 100%, 100%), 0 0 8px hsl(var(--hue-pink), 100%, 100%), 0 0 12px hsl(var(--hue-pink), 100%, 100%); }
+  to { text-shadow: var(--text-shadow-glow); }
+}
+
+@keyframes btn-activate {
+  from { filter: var(--btn-activate-filter); }
+  to { filter: none; }
+}
+
+@keyframes btn-danger-activate {
+  from { filter: var(--btn-danger-activate-filter); }
+  to { filter: none; }
+}
+
+@font-face {
+  font-family: 'Beon';
+  font-style: normal;
+  font-weight: normal;
+  src: url(a35814dd9eb496e3d7cc.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 200;
+  src: url(e419b95dccb58b362811.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 700;
+  src: url(7ce9eb3fe454f54745a4.woff2) format('woff2');
+}
+
+.rc-slider {
+  position: relative;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.rc-slider * {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.rc-slider-rail {
+  position: absolute;
+  width: 100%;
+  background-color: var(--transport-volume-track-color);
+  height: 6px;
+  border-radius: 6px;
+}
+
+.rc-slider-track {
+  position: absolute;
+  left: 0;
+  height: 6px;
+  border-radius: 6px;
+  background-color: var(--transport-volume-track-active-color);
+  filter: var(--transport-volume-track-active-filter);
+}
+
+html {
+  height: 100%;
+  touch-action: manipulation;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  font-family: var(--font-family);
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body.scroll-lock {
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
+}
+
+h1 {
+  font-weight: normal;
+}
+
+a {
+  color: var(--link-color);
+  font-weight: bold;
+  cursor: pointer;
+}
+
+svg {
+  vertical-align: bottom;
+}
+
+/* Form elements */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+select {
+  display: block;
+  width: 100%;
+  padding: 8px;
+  font-size: 18px;
+  box-shadow: inset 1px 1px 3px 0px rgba(50, 50, 50, 0.75);
+  border: none;
+  border-radius: var(--border-radius);
+  color: var(--input-color);
+  background-color: var(--input-bg-color);
+}
+
+::placeholder {
+  color: var(--input-placeholder-color);
+}
+
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+input[type="search"]:focus,
+select:focus,
+button:focus {
+  box-shadow: inset 0px 0px 5px 3px var(--input-outline-color);
+  outline: none;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="search"]::-webkit-search-cancel-button {
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+/* Buttons */
+button {
+  background-color: var(--btn-default-bg-color);
+  border: none;
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  color: var(--btn-default-color);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: inherit;
+  padding: 16px;
+  width: 100%;
+}
+
+button.primary {
+  background-color: var(--btn-primary-bg-color);
+  color: var(--btn-primary-color);
+}
+
+@supports (backdrop-filter: saturate(250%) blur(20px)) or (-webkit-backdrop-filter: saturate(250%) blur(20px)) {
+  .bg-blur {
+    background-color: transparent !important;
+    -webkit-backdrop-filter: saturate(250%) blur(20px);
+    backdrop-filter: saturate(250%) blur(20px);
+  }
+}
+
+mark {
+  color: inherit;
+  background-color: var(--mark-bg-color);
+}
+
+.UIK2HEzG93kJrZg1zrOI {
+  display: flex;
+  align-items: center;
+  padding-right: var(--container-padding);
+}
+
+.jvBgtBq5nhwhgFxDdohV {
+  flex: 1;
+  margin: 0;
+  margin-left: -4px;
+  border: none !important;
+  color: var(--text-color) !important;
+  background-color: transparent !important;
+  box-shadow: none !important;
+}
+
+.jvBgtBq5nhwhgFxDdohV::placeholder {
+  color: var(--input-placeholder-color) !important;
+}
+
+.cwDhxOIVfzteFzlWeKwa {
+  cursor: pointer;
+  fill: var(--btn-bg-color);
+}
+
+.Y7B1obsA9DO34NOCVSUZ {
+  fill: var(--btn-active-bg-color);
+  filter: var(--btn-active-filter);
+}
+
+.fvmAaIs1XBUyXOMAAkYo {
+  animation: var(--animation-bounce);
+}
+
+.dMo9SQYONtw9WYO5lxiN {
+  width: 100%;
+  margin: -5px 34px 0 30px;
+}
+
+.pMYNwtxIUiwKZSuUB8NQ {
+  cursor: pointer;
+  fill: var(--transport-btn-bg-color);
+  filter: var(--transport-btn-filter);
+  position: absolute;
+  top: -18px;
+  touch-action: 'pan-x';
+  outline: none;
+}
+
+.sfr6H9YQSnxNFewvtYb2 {
+  font-size: 16px;
+  color: var(--header-notice-color);
+  background-color: var(--header-notice-bg-color);
+}
+
+.QYsiKZ5NRjaOsK5iaXfX {
+  margin: 0;
+  padding: 5px;
+  text-align: center;
+}
+
+.Mavkfley4QjffP3Catge {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+}
+
+.CNM_5gB7G5H_AMRhZuHX {
+  background: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: -1;
+}
+
+.CKty5KaEk_nKaO8C9NWj {
+  max-width: 800px;
+  display: inline-block;
+  text-align: left;
+  vertical-align: middle;
+  background: var(--bg-color);
+  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
+  margin: 1.2rem;
+  padding: 1.2rem;
+  position: relative;
+  overflow-y: auto;
+  /* end defaults */
+  background-clip: padding-box;
+  outline: none;
+}
+
+.rSAvyMqmZiU8isOniIRg {
+  height: 100%;
+  outline: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  text-align: center;
+}
+
+.AxFsDuLo2IzSUTFEbuZo {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  background-color: transparent;
+  display: flex;
+  /* end defaults */
+  border-radius: 0;
+  box-shadow: none;
+  fill: var(--btn-active-bg-color);
+  width: auto;
+}
+
+@keyframes react-responsive-modal-overlay-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes react-responsive-modal-overlay-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes react-responsive-modal-modal-in {
+  0% {
+    transform: scale(0.96);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(100%);
+    opacity: 1;
+  }
+}
+
+@keyframes react-responsive-modal-modal-out {
+  0% {
+    transform: scale(100%);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.96);
+    opacity: 0;
+  }
+}
+
+.HHYLkEZBcUJPga1se3oQ {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.eJLT6828XSsubIHdpAW2 {
+  font-family: var(--font-family-custom);
+  margin: 0 0 1rem 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.M1nSLELWzWtg0nMNVAPp {
+  flex: 1;
+  -webkit-overflow-scrolling: touch;
+  overflow: auto;
+}
+
+.nsGMxmc6ZA0V4Fwl17Bf {
+  margin-top: var(--container-padding);
+}
+
+.eBgZD0SKZoZxdKfDH4T1 {
+  border: 1px solid var(--btn-bg-color);
+  border-radius: var(--border-radius);
+  margin-top: var(--container-padding);
+}
+
+.PJhDzihe1KxTY9CE2xvq {
+}
+
+.Y8xCNeqBBAdhv1S2a0zC {
+}
+
+.PJhDzihe1KxTY9CE2xvq legend,
+.Y8xCNeqBBAdhv1S2a0zC legend {
+  margin-left: -.5em;
+}
+
+.PJhDzihe1KxTY9CE2xvq legend label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.PJhDzihe1KxTY9CE2xvq legend input[type="checkbox"] {
+  margin-right: .25em;
+}
+
+.lNVvAVB0rbHGFBU4wBbH {
+  display: block;
+  margin: 0.8em 0;
+  color: hsl(var(--hue-blue), 10%, 67%);
+}
+
+.Y8xCNeqBBAdhv1S2a0zC label:first-of-type {
+  margin-top: .25rem;
+}
+
+.QyK2Uk7cCogrdI3yDGZX {
+  display: flex;
+  margin: .25rem 0 .5rem 0;
+  justify-content: space-between;
+}
+
+.Busc1bvYRrq8mQTC8UsA {
+  width: 30%;
+  display: block;
+  padding: 0;
+  background-color: var(--btn-active-bg-color);
+}
+
+.UD9HYyUBgOjSl2ux6LIp {
+  fill: var(--btn-base-blue);
+}
+
+.eBgZD0SKZoZxdKfDH4T1 legend label {
+  font-size: 18px;
+  padding: 0 .25em;
+}
+
+.zIEucMK4dBypf03pERBF {
+  text-align: center;
+  margin: 1rem 0;
+  color: grey;
+}
+
+.MhuyzAaoykU7XrttP0lt {
+  padding-bottom: 1em;
+  margin: 0 15px;
+}
+
+.vA6PJ2CfQyCJ0Aqjod8g {
+  cursor: pointer;
+  fill: var(--btn-active-bg-color);
+  position: absolute;
+  top: -15px;
+  touch-action: 'pan-x';
+  outline: none;
+}
+
+.s6dMfvg4cHkpBCZwMxlM {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--container-padding);
+}
+
+.utieeUffOQOs5Tb422mr {
+  cursor: pointer;
+  fill: var(--transport-btn-bg-color);
+  filter: var(--transport-btn-filter);
+}
+
+.pRlD2sOdoJdRfrjBCylf {
+  animation: var(--animation-btn-danger-activate);
+}
+
+.ffq0SD5gzioIYEcgKgLY {
+}
+
+.pjBKslXw1U349A1rnhe0 {
+}
+
+.tQEHmnxGjJM781oxemUN {
+  margin-left: 7px;
+}
+
+.fIuT4teYAIcl4oLOLEzJ {
+  fill: var(--btn-active-bg-color);
+  filter: var(--btn-active-filter);
+}
+
+.HZ7zG9VjL9eCkdQDZGIM {
+  fill: var(--btn-active-bg-color);
+  filter: var(--btn-active-filter);
+}
+
+.R0tWhGzOMnxRvplqamqt {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  width: 100%;
+  background-image: linear-gradient(to right, var(--active-item-from-bg-color), var(--active-item-from-bg-color));
+  background-repeat: no-repeat;
+}
+
+.WxqoYmzzeIRmqDepbVLR {
+  flex: 1;
+  font-size: 16px;
+  text-align: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  color: var(--text-color);
+}
+
+.L3KVVs498s_TTzMFHKn5 {
+  cursor: pointer;
+}
+
+.iL_22Dl4fbuLsQo42o2o {
+  fill: var(--btn-danger-bg-color);
+  filter: var(--btn-danger-filter);
+}
+
+.rMNneKuTapuKwyse_AMl {
+  fill: var(--btn-active-bg-color);
+  filter: var(--btn-active-filter);
+}
+
+.qdbIg3xgUn4KEomWXd7E {
+  font-size: 16px;
+  color: var(--text-color);
+  animation-duration: 1.5s;
+  animation-direction: alternate;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-out;
+}
+
+.PhYxOVpDCwPMJWw0BE6k {
+  animation-name: chycT2sgXRCUDLsKIkuK;
+  filter: var(--up-next-filter);
+}
+
+@keyframes chycT2sgXRCUDLsKIkuK {
+  0% { background-color: var(--up-next-bg-color-to); }
+  100% { background-color: var(--up-next-bg-color-from); }
+}
+
+.C9WuYntlaEVvxRaewY7r {
+  animation-name: arEOr6pUTnFXinmiHz2o;
+  filter: var(--up-now-filter);
+}
+
+@keyframes arEOr6pUTnFXinmiHz2o {
+  0% { background-color: var(--up-now-bg-color-to); }
+  100% { background-color: var(--up-now-bg-color-from); }
+}
+
+.pXcSEQ5RRGogLr2WCFum {
+  background-color: var(--up-next-bg-color-from);
+}
+
+.ZYRIFRvELzaH67PRlPlp {
+  margin: 0;
+  padding: 5px;
+  text-align: center;
+}
+
+.vreYukSnqUrGi25wejn4 {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: var(--chrome-bg-color);
+  border-bottom: 1px solid var(--chrome-border-color);
+  z-index: 1;
+}
+
+.sjMaG58osNAeqXFe4zpO {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  text-decoration: none;
+  width: 100%;
+  background-color: var(--chrome-bg-color);
+  border-top: 1px solid var(--chrome-border-color);
+  z-index: 1;
+}
+
+.ekb54bjQ8jCQ8gjJwL6h {
+  flex: 1;
+  padding-top: 4px;
+  padding-bottom: 8px;
+  text-align: center;
+  fill: var(--nav-link-color);
+}
+
+.CERhwPlf7uoRzmK7byOo {
+  fill: var(--nav-active-color);
+  filter: var(--nav-active-filter);
+}
+
+.bx9kUlhkDMmCKpxez9Kn {
+  animation: var(--animation-nav-activate);
+}
+
+.LpKkKnxGUM9XUZaJYwKA {
+  filter: drop-shadow(0px 1px 0px hsl(var(--hue-blue), 100%, 30%));
+}
+
+.AOWDkEJZ7Uh6TMmJSmDN {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.Gi_1FjbpZU1FcRC85lBE {
+  flex: 1;
+  margin: .5rem 0;
+  overflow: scroll;
+}
+
+.k8N_J395xr2bblBgwvim {
+  margin-bottom: 1em;
+  overflow-wrap: break-word;
+}
+
+.TSJBvSrnl7BotohIdqrj {
+  font-weight: bold;
+  color: #777;
+}
+
+.MhLrBfYw2bVvon36GHQg {
+  font-family: Beon;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.MRwxEsiCu74aMC4fJ2yn {
+  border: none;
+  color: hsl(var(--hue-blue), 10%, 80%);
+  display: inline-block;
+  font-size: 200%;
+  text-transform: uppercase;
+  margin: 0;
+  text-shadow:
+    0 0 .1em hsl(var(--hue-pink), 100%, 100%),
+    0 0 .5em hsl(var(--hue-pink), 100%, 100%),
+    0 0 .25em hsl(var(--hue-pink), 100%, 50%),
+    0 0 .5em hsl(var(--hue-pink), 100%, 50%),
+    0 0 .75em hsl(var(--hue-pink), 100%, 50%),
+    0 0 1em hsl(var(--hue-pink), 100%, 50%),
+    0 0 1.5em hsl(var(--hue-pink), 100%, 50%),
+    0 0 3em hsl(var(--hue-pink), 100%, 50%),
+    0 0 6em hsl(var(--hue-pink), 100%, 50%),
+    0 0 9em hsl(var(--hue-pink), 100%, 50%);
+}
+
+.XrgY7jUteM7yAiFgHV3G {
+  font-size: 40%;
+  text-transform: uppercase;
+  display: block;
+  letter-spacing: .9em;
+  border: .1em solid hsl(var(--hue-blue), 100%, 90%);
+  border-radius: .25em;
+  padding: .25em;
+  text-shadow:
+    0 0 .1em hsl(var(--hue-blue), 100%, 90%),
+    0 0 .25em hsl(var(--hue-blue), 100%, 90%),
+    0 0 .25em hsl(var(--hue-blue), 100%, 50%),
+    0 0 .5em hsl(var(--hue-blue), 100%, 50%);
+  box-shadow:
+    0 0 .1em hsl(var(--hue-blue), 100%, 90%),
+    0 0 .25em hsl(var(--hue-blue), 100%, 90%),
+    0 0 .5em hsl(var(--hue-blue), 100%, 50%),
+    0 0 .75em hsl(var(--hue-blue), 100%, 50%),
+    inset 0 0 .5em hsl(var(--hue-blue), 100%, 50%),
+    inset 0 0 .75em hsl(var(--hue-blue), 100%, 50%);
+}
+
+.opBGPXUVYOwhN4fsI5_5 {
+  letter-spacing: normal;
+}
+
+.U8A_lOQ63TZUTsiYgktE {
+  top: var(--container-padding);
+  background-color: var(--panel-bg-color);
+  border-radius: var(--border-radius);
+  overflow: hidden;
+}
+
+.TEhgIScv1BL8HW1JbB3B {
+  background-color: var(--panel-title-bg-color);
+  font: var(--panel-title-font);
+  margin: 0;
+  padding: var(--panel-title-padding);
+  color: var(--panel-title-color);
+}
+
+.XIvZjD6Co9DyofyCj0Da {
+  padding: var(--container-padding);
+  text-align: center;
+}
+
+.oPMyaF6eFojk2b8ZQKwH {
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.mFno0FFze3kHGDdbZDBB {
+  color: #aaa;
+  font-size: 75%;
+  margin-top: 1em;
+}
+
+.NjmtwxMJxR179Hk2Pomb {
+  text-decoration: underline;
+}
+
+.GAUmcVf7ad6DttxMOqMj {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.lESUPQPijSGMX4Z2Z_vW {
+  flex: 1;
+  margin: .5rem 0;
+  overflow: scroll;
+}
+
+.rIur97ACvqfbIkmbOiCL {
+    overflow: hidden;
+    position: relative;
+    min-width: 96px;
+    height: 72px;
+    border-radius: var(--border-radius);
+    text-align: center;
+    cursor: pointer;
+}
+
+._03pNkaJuEzTEpMZlrFAs {
+    cursor: inherit;
+    display: block;
+    font-size: 999px;
+    filter: alpha(opacity=0);
+    min-height: 100%;
+    min-width: 100%;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    text-align: right;
+    top: 0;
+}
+
+.zDcM8XBIpYcWZBK2ostT {
+  position: absolute;
+  top: 0;
+  left: 0;
+  fill: hsl(var(--hue-pink), 100%, 70%);
+  z-index: 99;
+}
+
+.QoNRuAf71c67_0daJ00g {
+  fill: var(--btn-bg-color);
+}
+
+.UJP7G5dKPXhMYPVm9lGC {
+  display: flex;
+  flex-direction: column;
+}
+
+.MRv8af4NPh12SLYbjwuA {
+  display: flex;
+  margin-bottom: var(--input-margin);
+}
+
+.TFXhqL1_ppdgVq8Ip8G0 {
+  margin-bottom: var(--input-margin);
+}
+
+select.TFXhqL1_ppdgVq8Ip8G0 {
+  cursor: pointer;
+}
+
+.TXcvFiC1fGbvm_9tjD0d {
+  margin: 0 0 0 var(--input-margin);
+}
+
+.AdPYAIbFPpGhbG80E9oa {
+  background-color: var(--panel-bg-color);
+  border-radius: var(--border-radius);
+  margin: 10px 0;
+  overflow: hidden;
+}
+
+.LbIcdbrF5GE54rSrqL_I {
+  margin: 0;
+  font: var(--panel-title-font);
+  padding: var(--panel-title-padding);
+  background-color: var(--panel-title-bg-color);
+  color: var(--panel-title-color);
+}
+
+.eWB988t3JuRQuM9e6O_N {
+  padding: var(--container-padding);
+}
+
+.eWB988t3JuRQuM9e6O_N p {
+  margin-top: 10px;
+}
+
+.lVRxnFYFCfHZHGIPV2QD {
+  margin-top: var(--input-margin);
+}
+
+.Fj4oA4Er2_057Nqs3d_R {
+  margin-top: var(--input-margin);
+}
+
+.zXRZqy8GypIyzzonhQDj {
+  display: flex;
+  height: 40px;
+  cursor: pointer;
+  align-items: center;
+}
+
+.nn35PIgJyM8hd_PfVG9P {
+  flex: 1;
+  font-size: 16px;
+  margin-left: 5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.iWBd2Rn8EbpVZP3_NmrF {
+  fill: var(--text-color);
+}
+
+.PCD9_JwmkY6aoE1S6ZP_ {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.zuvIYSwYXKYBkknUSBt0 {
+  padding: 10px;
+  border: 1px solid #ccc;
+}
+
+.Er04pbLH9MbYq06HYgN2 {
+  flex: 1;
+  margin: .5rem 0;
+  overflow: scroll;
+}
+
+.iMjsWmBEoY_an0jfzpzr {
+  flex: 1;
+  width: auto;
+}
+
+.k7DvjmmaDcQjq3A2XJBH {
+  margin-left: 1em;
+  width: auto;
+}
+
+.vfEtFMD1PnnZpL7KJi5i {
+  display: flex;
+  align-items: center;
+  background-color: var(--panel-bg-color);
+  padding: 3px;
+  margin: 0 0 5px 0;
+  border-radius: var(--border-radius);
+}
+
+.reQxnTVFy0pmOJ_OxHEW {
+  flex: 1;
+  user-select: text;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.ZYVMDVEYbeodkfufIBsd {
+  cursor: pointer;
+  fill: var(--btn-danger-bg-color);
+}
+
+.cLbX8ACpwjrJHf1i33Kw {
+  fill: var(--btn-bg-color);
+}
+
+.iEi_d5e035onJ18oKA6M {
+  background-color: var(--panel-title-bg-color);
+  border-radius: var(--border-radius);
+}
+
+.IkPiZ7oarPYasin3JcFC {
+  display: flex;
+  align-items: center;
+  padding: 3px 5px;
+  cursor: pointer;
+}
+
+.eabAFWz3ueFCR7MFdfnm {
+  flex: 1;
+  margin-left: 5px;
+}
+
+.H5t2XU3F3BFidL0_rXXf {
+  fill: var(--text-color);
+}
+
+.eYUqAJLLPnFSGQfPrwJp {
+  padding: var(--container-padding);
+}
+
+.COsFBSxrE3VeJHh23G5V {
+  display: flex;
+  margin-top: var(--container-padding);
+}
+.rFRCbyZPT_PQc_wrBjwo {
+  background-color: var(--panel-title-bg-color);
+  border-radius: var(--border-radius);
+  margin-top: var(--container-padding);
+}
+
+.iQsmu84S0UOMvskFslib {
+  display: flex;
+  align-items: center;
+  padding: 3px 5px;
+  cursor: pointer;
+}
+
+.ug6Vnih76yOx9OR2lGmt {
+  flex: 1;
+  margin-left: 5px;
+}
+
+.EsTYWrxvRDwQ5bUKgop3 {
+  padding: var(--container-padding);
+  margin-left: 20px;
+}
+
+.EsTYWrxvRDwQ5bUKgop3 label {
+  padding: var(--container-padding);
+  cursor: pointer;
+}
+
+.hE76lHI6zK5vyZqbFZPC {
+  fill: var(--text-color);
+}
+
+.UpHxEb2QWaWp9rGss7Hw {
+  top: var(--container-padding);
+  background-color: var(--panel-bg-color);
+  border-radius: var(--border-radius);
+  overflow: hidden;
+}
+
+.DXs3pxIfjaqE0SeBpWKz {
+  margin: 0;
+  font: var(--panel-title-font);
+  padding: var(--panel-title-padding);
+  background-color: var(--panel-title-bg-color);
+  color: var(--panel-title-color);
+}
+
+.ew2x2VQFG7Hj_ltiyxbF {
+  padding: var(--container-padding);
+}
+
+.zlSZG60tYLnv3ifQhy83 label {
+  cursor: pointer;
+}
+
+.KPS_QjyNbNZvOcq4_1Pg {
+  margin-bottom: var(--input-margin);
+}
+
+.B5kM8X2kOsyfaMqa0xWN {
+  margin-bottom: var(--input-margin);
+}
+
+.ysLnY77UZ_c1_TfyXfgo {
+  background-color: var(--panel-bg-color);
+  border-radius: var(--border-radius);
+  margin: 10px 0;
+  overflow: hidden;
+}
+
+.hx1d5UAAVzr0KT0tBfNB {
+  align-items: center;
+  display: flex;
+  padding: var(--panel-title-padding);
+  background-color: var(--panel-title-bg-color);
+}
+
+.hx1d5UAAVzr0KT0tBfNB h1 {
+  color: var(--panel-title-color);
+}
+
+.hx1d5UAAVzr0KT0tBfNB select {
+  font-size: 16px;
+  height: 24px; /* --panel-title-font size + top/bottom padding */
+  max-width: 33%;
+  padding: 0;
+}
+
+.u57YoQwu4we4ucg5Z3JI {
+  flex: 1;
+  margin: 0;
+  padding: 0;
+  font: var(--panel-title-font);
+}
+
+.wM1sRpuOJYI8QczteHwR {
+  cursor: pointer;
+}
+
+.OUzt44G4J9NqiXahGZNg {
+  padding: var(--container-padding);
+}
+
+.HAVmLg8TCL18Jeiuo7fX {
+  width: 100%;
+}
+
+.HAVmLg8TCL18Jeiuo7fX > * {
+  outline: none;
+}
+
+.HAVmLg8TCL18Jeiuo7fX th {
+  color: hsl(var(--hue-blue), 10%, 60%);
+  font-weight: normal;
+  text-align: left;
+}
+
+.HAVmLg8TCL18Jeiuo7fX th:first-child {
+  width: 100%;
+}
+
+.HAVmLg8TCL18Jeiuo7fX th:nth-child(2) {
+  min-width: 70px;
+}
+
+.HAVmLg8TCL18Jeiuo7fX td {
+  height: 25px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.HAVmLg8TCL18Jeiuo7fX td:first-child  {
+  text-overflow: ellipsis;
+  max-width: 0;
+}
+
+.GOcqON1ttKvLN26MFNIy {
+  margin-bottom: var(--input-margin);
+}
+
+.egMKJajhBRVHHcS0ruyV {
+  margin-bottom: var(--input-margin);
+}
+
+.ffaCMJ3wIqwLL6cRptTw {
+  background-color: var(--panel-bg-color);
+  border-radius: var(--border-radius);
+  margin: 10px 0;
+  overflow: hidden;
+}
+
+.tQTBvPKeFLjVpNbYouTj {
+  align-items: center;
+  display: flex;
+  padding: var(--panel-title-padding);
+  background-color: var(--panel-title-bg-color);
+}
+
+.tQTBvPKeFLjVpNbYouTj h1 {
+  color: var(--panel-title-color);
+}
+
+.tQTBvPKeFLjVpNbYouTj select {
+  font-size: 16px;
+  height: 24px; /* --panel-title-font size + top/bottom padding */
+  max-width: 33%;
+  padding: 0;
+}
+
+.bc5ncwHH9YJ23tSoHwjU {
+  flex: 1;
+  margin: 0;
+  padding: 0;
+  font: var(--panel-title-font);
+}
+
+.IhdI0Ej7cIQc3O9IulTL {
+  cursor: pointer;
+}
+
+.qCcT2N3kiZaZB2i4v2gX {
+  padding: var(--container-padding);
+}
+
+.dVtQTutpaei_Zk_0Dmhd {
+  width: 100%;
+}
+
+.dVtQTutpaei_Zk_0Dmhd > * {
+  outline: none;
+}
+
+.dVtQTutpaei_Zk_0Dmhd th {
+  color: hsl(var(--hue-blue), 10%, 60%);
+  font-weight: normal;
+  text-align: left;
+}
+
+.dVtQTutpaei_Zk_0Dmhd th:first-child {
+  width: 100%;
+}
+
+.dVtQTutpaei_Zk_0Dmhd th:nth-child(2) {
+  min-width: 70px;
+}
+
+.dVtQTutpaei_Zk_0Dmhd td {
+  height: 25px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.dVtQTutpaei_Zk_0Dmhd td:first-child  {
+  text-overflow: ellipsis;
+  max-width: 0;
+}
+
+._kg8JIOeafNciIqzc0kY {
+  margin-bottom: var(--input-margin);
+}
+
+.Gt1harUlpdZAYOWiLjgK {
+  height: 36px;
+}
+
+.f1EKGJojigwMU6SsYuZr {
+  align-items: baseline;
+  color: hsl(var(--hue-blue), 10%, 60%);
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 1em;
+}
+
+.f1EKGJojigwMU6SsYuZr h2 {
+  color: hsl(var(--hue-blue), 10%, 80%);
+  flex: 1;
+  margin: 0 1em 0 0;
+  font-size: 32px;
+  font-family: var(--font-family-custom);
+  font-weight: 200;
+  white-space: nowrap;
+}
+
+.Z00W8gVjj0IMplO_RP3Q {
+  align-items: baseline;
+  color: hsl(var(--hue-blue), 10%, 60%);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.Z00W8gVjj0IMplO_RP3Q h2 {
+  color: hsl(var(--hue-blue), 10%, 80%);
+  flex: 1;
+  margin: 0 1em 0 0;
+  font-size: 32px;
+  font-family: var(--font-family-custom);
+  font-weight: 200;
+  white-space: nowrap;
+}
+
+.eWcvh3MX2knJm1d0CQWu {
+  align-items: baseline;
+  color: hsl(var(--hue-blue), 10%, 60%);
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: var(--container-padding);
+}
+
+.eWcvh3MX2knJm1d0CQWu h2 {
+  color: hsl(var(--hue-blue), 10%, 80%);
+  flex: 1;
+  margin: 0 1em 0 0;
+  font-size: 32px;
+  font-family: var(--font-family-custom);
+  font-weight: 200;
+  white-space: nowrap;
+}
+
+.GSpYmU6m4qxOLmgK4rX3 {
+  margin-bottom: var(--input-margin);
+}
+
+.e3jR4OMsV_OIaaAci_hn {
+  margin: 0 auto;
+  overflow: hidden;
+  padding: var(--container-padding);
+}
+
+.kfaDc9tZA7V0rbLrrQxW {
+  margin: 2rem 0;
+  text-align: center;
+  font-size: 30px;
+}
+
+@media (min-width: 42em) {
+  .kfaDc9tZA7V0rbLrrQxW {
+    margin: 3rem 0;
+    font-size: 36px;
+  }
+}
+
+.EPw4Q8pC4VCZu_ENeHOh {
+  margin: 0 auto;
+  padding: 0 1vw;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+ .JoCtgfMdp4_LkFISBVdL {
+   overflow: hidden auto !important; /* allow scrolling on Y-axis only */
+   scrollbar-width: none; /* Firefox */
+ }
+
+.JoCtgfMdp4_LkFISBVdL::-webkit-scrollbar {
+    display: none;  /* Safari and Chrome */
+}
+
+.vN10Ra6WwFQwsoJD1_3H {
+  align-items: center;
+  color: var(--alpha-picker-color);
+  display: flex;
+  flex-direction: column;
+  font-size: 2vh;
+  padding: 5px 0;
+  position: fixed;
+  right: 0;
+  width: 32px;
+  cursor: pointer;
+  touch-action: none;
+}
+
+.NLkRlVVNnuiKJMNOXMhe {
+  display: flex;
+  align-items: center;
+  transition: width var(--spring-duration) var(--spring-function);
+}
+
+.IW53X1CCc5LsUP_viCWs {
+  opacity: 0;
+}
+
+.Hk5Oiz4LTn0TQU1HJ_4r {
+  display: flex;
+  align-items: center;
+}
+
+.zik5wR9zmSukEda8d8FN {
+  text-shadow: var(--queued-item-text-shadow);
+}
+
+.zik5wR9zmSukEda8d8FN .oqSOn8U_QmqEzSvyfAw_ {
+  color: var(--queued-item-color);
+}
+
+.q8d4R7JJbyKfMfb5qTtn {
+  animation: var(--animation-text-shadow-glow);
+}
+
+.hxXzgFhspryRgl6_AkmQ {
+  color: var(--song-duration-color);
+  font-size: 12px;
+  text-align: right;
+  width: 40px;
+}
+
+.z8K08MurHExDsFH50TjN {
+  cursor: pointer;
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  margin-left: 14px;
+}
+
+.oqSOn8U_QmqEzSvyfAw_ {
+  color: var(--song-title-color);
+  font-size: 18px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.INKd0vI4DamezRZUfFHO {
+  color: #aaa;
+  font-size: 15px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* Buttons */
+.DLgbTdB3hYU0zYVmvotm {
+  cursor: pointer;
+  width: var(--song-item-btn-width);
+  height: var(--song-item-btn-height);
+  margin-right: var(--btn-margin);
+  transition: opacity .3s;
+}
+
+.bfE_vcKGNAy6HuKrhsLQ {
+  fill: var(--song-item-btn-bg-color);
+  height: var(--song-item-btn-height);
+}
+
+.sITkO1nY1LgSZ74YOArz {
+  fill: var(--song-item-btn-active-bg-color);
+  filter: var(--song-item-btn-active-filter);
+}
+
+.a2lTNMjjT5QzeuYbGeux {
+  position: relative;
+  font-size: 13px;
+  top: -28px;
+  text-align: center;
+  text-shadow: none;
+  color: var(--text-color);
+}
+
+.sF5sWiz0_6zeoGgwx9_r {
+  color: var(--song-item-btn-active-color);
+}
+
+.r4HcW54ut9T2YXA4ysAf {
+  animation: var(--animation-bounce);
+}
+
+.IpLs3GshduGnVRAThUSV {
+  fill: var(--song-item-btn-active-bg-color);
+  filter: var(--song-item-btn-active-filter);
+}
+
+.ZQ1vJSuEzaXfK5U2mVy3 {
+  display: flex;
+  height: var(--artist-item-height);
+  align-items: center;
+  overflow: hidden;
+}
+
+.Oeq1kmzT_zA03h__nm96 {
+}
+
+.Lo0KOIA2KNbjdkAzONWs {
+  color: var(--artist-name-color);
+  flex: 1;
+  font-size: 20px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 3px;
+  cursor: pointer;
+}
+
+.MX_Porxug1vkdk_A2Vcz {
+  color: var(--queued-item-color);
+  text-shadow: var(--queued-item-text-shadow);
+}
+
+.HZ0_7hegL7xDvnX1Vw9I {
+  animation: var(--animation-text-shadow-glow);
+}
+
+.lLz_KOztRoFN8eQxqGc1 {
+  height: var(--artist-item-height);
+  fill: var(--artist-folder-bg-color);
+}
+
+.Bc6UO2wMDwOUxrq1bAUP {
+  color: var(--artist-folder-starred-color);
+  fill: var(--artist-folder-starred-bg-color);
+  filter: var(--artist-folder-starred-filter);
+}
+
+.b9LqH0GqWQ8WmCaa4ktx {
+  position: relative;
+  top: -30px;
+  text-align: center;
+  font-size: 16px;
+}
+
+.EsKyaVkUOVjrQNBLIEEM {
+  position: relative;
+  top: -34px;
+  text-align: center;
+  fill: var(--text-color);
+}
+
+.qAmZbfGSZX2Xu4xgWagx {
+  fill: #000;
+}
+
+.FM0NON48tUGevc0Mocok,
+.CEmdQRH561N9ZZS2sElY {
+  color: var(--search-results-heading-color);
+  background-color: var(--search-results-heading-bg-color);
+  font-size: 18px;
+  text-align: center;
+}
+
+.l_cLCw9eRNCSyRKgXWS5 {
+  display: flex;
+  height: 100%;
+  text-align: center;
+  align-items: center;
+}
+
+.Fog7IKmx1oVfPd8FU407 {
+  flex: 1;
+}
+
+/* adapted from https://github.com/tobiasahlin/SpinKit */
+.Cy2j9ZX2IZrQWobGUi7X {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.dTWtSURLdyh9OV1LTnaC {
+  background-color: var(--btn-bg-color);
+  height: 40px;
+  width: 6px;
+  animation: pQ8Wi97sGo_5PlIrHfhm 0.8s infinite ease-in-out;
+  margin: 0 5px;
+}
+
+.L3qh5gTBMbZXjFIzwmUI {
+  animation-delay: -0.7s;
+}
+
+.f7Ry7aQoljxI7zOj18tU {
+  animation-delay: -0.6s;
+}
+
+.jZojmB6JI3Y1bkX6XnDI {
+  animation-delay: -0.5s;
+}
+
+.EcvP0cnG_tPw2rSbAdHh {
+  animation-delay: -0.4s;
+}
+
+@-webkit-keyframes pQ8Wi97sGo_5PlIrHfhm {
+  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+  20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes pQ8Wi97sGo_5PlIrHfhm {
+  0%, 40%, 100% {
+    transform: scaleY(0.4);
+  }  20% {
+    transform: scaleY(1.0);
+  }
+}
+
+.bhZWQ2xPWPTNIX6C4F3a h1 {
+  font-family: var(--font-family-custom);
+}
+
+.mzDMD6M1pFKWJavfPkH5 {
+  border-radius: var(--border-radius);
+}
+
+.VlpZ7WoRWqt_q9Lph86w {
+  fill: var(--btn-bg-color);
+}
+
+.wmZzvQLV8SUXBxloByaI {
+  background-image: linear-gradient(to right, var(--active-item-from-bg-color), var(--active-item-to-bg-color));
+  background-repeat: no-repeat;
+  height: var(--queue-item-height);
+  overflow: hidden;
+  padding-right: 4px;
+}
+
+.OcXId78BLaxBJIqdYIof {
+  display: flex;
+  flex: 1;
+  margin-top: var(--container-padding);
+  margin-right: 0;
+  margin-bottom: var(--container-padding);
+  margin-left: var(--container-padding);
+  overflow: hidden;
+}
+
+.umnUSnD73DO3rWOYPZ9K {
+  opacity: .5;
+}
+
+.GacRKdveAPO6_ywV1_ca {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 96px;
+  height: 72px;
+}
+
+.RGd3UJAFUhL9NuucNZat {
+  max-width: 96px;
+  max-height: 72px;
+}
+
+.ctOyiO7TWxvaj2cMva6s {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-top-left-radius: var(--border-radius);
+}
+
+.pCDYhCexaZe_zujCsnng {
+  color: #ccc;
+  font-size: 15px;
+  padding: 3px 3px;
+}
+
+.nDkBZyovKLxzMG7K_3Tg {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin-left: var(--container-padding);
+  overflow: hidden;
+  padding: 3px 0;
+}
+
+.Wj7Me9sY8G3TTqTAeAaj {
+  flex: 1;
+}
+
+.VVVypNxrRbHxoVVWCt7a {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.oyozFDwcV8GMOumLs906 {
+  font-size: 19px;
+}
+
+.PyOIw1JanvSSiLfkRkZt {
+  color: #aaa;
+  font-size: 17px;
+}
+
+.HEBTYqqhv5BzgHhWH7vd {
+  font-size: 15px;
+  /*  for some reason composes: ellipsis; isn't working here */
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  color: #777;
+}
+
+._LtmdT6l38fSEjxPLZod {
+  color: var(--queued-item-color);
+  text-shadow: var(--text-shadow-glow);
+}
+
+/* Buttons */
+.ipO9CAddWNfj0FeLnSlg {
+  cursor: pointer;
+  fill: var(--song-item-btn-bg-color);
+  margin-right: var(--btn-margin);
+  transition: opacity .3s;
+}
+
+.YmwxQ7Vy9kTAPCo00I2U {
+  fill: var(--song-item-btn-active-bg-color);
+  filter: var(--song-item-btn-active-filter);
+}
+
+.tX8eNQUgD77rREuwXWHO {
+  fill: var(--btn-danger-bg-color);
+  filter: var(--btn-danger-filter);
+}
+
+.ZRVZZ_1kYEKO36fznW79 {
+  animation: var(--animation-bounce);
+}
+
+.bbUhdC2XhFqBtedX7G5x {
+  animation: egvUeoIxP3c8CjTQWSwH .3s;
+}
+
+.oj9sgd1_DuPZvgyJKc_3 {
+  animation: zM_lTYVFPmOz9sQfvcpQ .5s;
+}
+
+@keyframes egvUeoIxP3c8CjTQWSwH {
+  0% { opacity: 0; transform: scale3d(0, 0, 0); }
+  100% { opacity: 1; transform: scale3d(1, 1, 1); }
+}
+
+@keyframes zM_lTYVFPmOz9sQfvcpQ {
+  0% { opacity: 1; transform: scale3d(1, 1, 1); }
+  100% { opacity: 0; transform: scale3d(0, 0, 0); }
+}
+
+.SF0X5MbNRNL3euuIjCwB {
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.SF0X5MbNRNL3euuIjCwB h1 {
+  font-family: var(--font-family-custom);
+}
+