/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before,
::after {
	box-sizing: border-box;
}

html {
	/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
	font-family:
		system-ui,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
	line-height: 1.15; /* 1. Correct the line height in all browsers. */
	-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
	tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/

body {
	margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome 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
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	border-color: currentcolor;
}

/*
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 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
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;
  --color-gray-1: hsl(var(--hue-blue), 10%, 10%);
  --color-gray-2: hsl(var(--hue-blue), 10%, 20%);
  --color-gray-3: hsl(var(--hue-blue), 10%, 30%);
  --color-gray-4: hsl(var(--hue-blue), 10%, 40%);
  --color-gray-5: hsl(var(--hue-blue), 10%, 50%);
  --color-gray-6: hsl(var(--hue-blue), 10%, 60%);
  --color-gray-7: hsl(var(--hue-blue), 10%, 70%);
  --color-gray-8: hsl(var(--hue-blue), 10%, 80%);
  --color-gray-9: hsl(var(--hue-blue), 10%, 90%);

  --font-family: system-ui, sans-serif;
  --font-family-custom: system-ui, sans-serif;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 600;

  --font-size-xs: 0.75rem;
  --font-size-s: 1rem;
  --font-size-m: 1.25rem;
  --font-size-l: 1.5rem;
  --font-size-xl: 2rem;

  --icon-size-s: 1rem;
  --icon-size-m: 1.5rem;
  --icon-size-l: 2rem;
  --icon-size-xl: 3rem;

  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --container-padding: 12px;

  --bg-color: hsl(var(--hue-blue), 40%, 2%);
  --text-color: var(--color-gray-8);
  --link-color: hsl(var(--hue-blue), 92%, 69%);
  --mark-bg-color: hsl(var(--hue-blue), 50%, 30%);

  --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);
  --border-radius: 8px;
  --focus-outline: 4px solid var(--btn-danger-bg-color);

  --input-color: var(--color-gray-1);
  --input-placeholder-color: var(--color-gray-5);
  --input-bg-color: hsl(var(--hue-blue), 10%, 80%);
  --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(-.25rem 0 .75rem hsl(var(--hue-blue), 80%, 50%)) drop-shadow(.25rem 0 .75rem hsl(var(--hue-blue), 80%, 50%)) drop-shadow(0 0 1rem hsla(var(--hue-blue), 80%, 50%, 0.5));

  --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 hsla(var(--hue-pink), 80%, 70%, 0.5));

  /* 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%);

  /* Library */
  --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-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);

  --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);

  /* Account panels */
  --panel-bg-color: hsl(var(--hue-blue), 20%, 10%);

  /* 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-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);
  --animation-text-shadow-glow: glow .25s ease-out;
  --animation-btn-danger-activate: btn-danger-activate 1s var(--activate-1);
  --text-shadow-glow: 0 0 .25em hsl(var(--hue-pink), 100%, 50%), 0 0 .5em hsl(var(--hue-pink), 100%, 50%);

  --animation-btn-star: starBounce .5s var(--bounce-1);
  --bounce-1: linear(0, 0.74 5.9%, 0.911 8.5%, 0.954 9.8%, 0.969 11.1%, 0.956 12.4%, 0.919 13.7%, 0.766 16.5%, -0.246 28.6%, -0.382 31.4%, -0.449 34.2%, -0.456 35.4%, -0.452 36.6%, -0.405 39.3%, 0.012 50.9%, 0.09 54.1%, 0.131 57.3%, 0.138 59.7%, 0.127 62.4%, 0.022 72.7%, -0.011 78.2%, -0.016 82.9%, 0);

  --animation-btn-activate: btn-activate 1s var(--activate-1);
  --activate-1: ease-out;
}

@keyframes starBounce {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.5);
  }
}

@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: var(--btn-active-filter);
  }
}

@keyframes btn-danger-activate {
  from {
    filter: var(--btn-danger-activate-filter);
  }

  to {
    filter: var(--btn-danger-filter);
  }
}
@font-face {
  font-family: 'Beon';
  font-style: normal;
  font-weight: normal;
  src: url(a35814dd9eb496e3d7cc.woff2) format('woff2');
}
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%;
}

a {
  color: var(--link-color);
  font-weight: bold;
  cursor: pointer;
}

/* Form elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"] {
  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);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder {
  color: var(--input-placeholder-color);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]: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;
}

select {
  font-size: var(--font-size-s);
  width: auto;
  padding: var(--space-s);
  padding-right: var(--space-xl);
  appearance: none;
  color: var(--input-color);
  border: none;
  border-radius: var(--border-radius);
  background-color: hsl(var(--hue-blue), 10%, 66%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 height=%271rem%27 viewBox=%270 0 24 24%27><path fill=%27currentColor%27 d=%27M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z%27/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 1.5rem;
  outline: none;
  cursor: pointer;

  &:focus-visible {
    outline: var(--focus-outline);
  }
}

@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);
}

/* override modern-normalize's bad defaults */
html {
  line-height: normal;
}

body,
button,
input,
optgroup,
select,
textarea {
  line-height: 1.4;
}
.rYzGz3Rx2eJjMVVhj_lA {
  background: transparent;
  border: none;
  padding: 0;
  outline: none;
  cursor: pointer;

  &:focus-visible {
    outline: var(--focus-outline);
  }

  svg {
    display: block;
  }
}

.BRCYi6lJspftkCxcFdpw,
.u4HHBIWYgUhQaG3hu6kB,
.X_mi34pYwHmBoHHJS15M {
  padding: var(--space-m);
  width: 100%;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  color: var(--btn-default-color);
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
}

.BRCYi6lJspftkCxcFdpw {
  color: var(--text-color);
  text-shadow: var(--text-shadow);
  background-color: hsl(var(--hue-blue), 10%, 25%);
  background-image: linear-gradient(180deg, hsl(var(--hue-blue), 10%, 30%) 0%, hsl(var(--hue-blue), 10%, 25%) 100%);
}

.u4HHBIWYgUhQaG3hu6kB {
  color: var(--text-color);
  text-shadow: var(--text-shadow);
  background-color: var(--btn-primary-bg-color);
  background-image: linear-gradient(180deg, hsl(var(--hue-blue), 92%, 50%) 0%, hsl(var(--hue-blue), 92%, 45%) 100%);
}

.X_mi34pYwHmBoHHJS15M {
  color: var(--text-color);
  text-shadow: var(--text-shadow);
  background-color: var(--btn-danger-bg-color);
  background-image: linear-gradient(180deg, hsl(var(--hue-pink), 62%, 50%) 0%, hsl(var(--hue-pink), 62%, 45%) 100%);
}
.NLkRlVVNnuiKJMNOXMhe {
  display: flex;
  align-items: center;
  transition: width var(--spring-duration) var(--spring-function);

  button {
    margin-right: var(--space-s);
    cursor: pointer;
    transition: opacity .3s linear;
    flex-shrink: 0;
  }
}

.IW53X1CCc5LsUP_viCWs {
  opacity: 0;
}
.zwhaD6cv3twcOFXz4qKo {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
}

.HY1e7Z58KZwcMy___p2l {
  overflow-y: auto;
  max-height: 40vh;
  background-color: var(--color-gray-2);
  border-radius: var(--border-radius);
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.5);
}

.YGN3PaDZSLpNS2qn0tpc {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-s);
  font-size: var(--font-size-m);
  color: var(--text-color);
  background-color: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.llhRtO7Pzk1CHXdzEjS4 {
  flex: none;
  margin-right: var(--space-s);
  color: var(--btn-bg-color);
}

.ItuyzxIaywb8RFhQuqk7 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.YGN3PaDZSLpNS2qn0tpc:hover,
.YGN3PaDZSLpNS2qn0tpc:active {
  color: var(--link-color);
  background-color: var(--color-gray-3);
}

.YGN3PaDZSLpNS2qn0tpc:hover .llhRtO7Pzk1CHXdzEjS4,
.YGN3PaDZSLpNS2qn0tpc:active .llhRtO7Pzk1CHXdzEjS4 {
  color: var(--link-color);
}

.YGN3PaDZSLpNS2qn0tpc:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: -2px;
}

/* the entry that reflects the current selection (typed search or
   active user filter) stands out in accent */
.YGN3PaDZSLpNS2qn0tpc.snjjUrfVNFsoK55PrkSC,
.YGN3PaDZSLpNS2qn0tpc.snjjUrfVNFsoK55PrkSC:hover,
.YGN3PaDZSLpNS2qn0tpc.snjjUrfVNFsoK55PrkSC:active {
  color: var(--btn-danger-bg-color);
}

.YGN3PaDZSLpNS2qn0tpc.snjjUrfVNFsoK55PrkSC .llhRtO7Pzk1CHXdzEjS4,
.YGN3PaDZSLpNS2qn0tpc.snjjUrfVNFsoK55PrkSC:hover .llhRtO7Pzk1CHXdzEjS4,
.YGN3PaDZSLpNS2qn0tpc.snjjUrfVNFsoK55PrkSC:active .llhRtO7Pzk1CHXdzEjS4 {
  color: var(--btn-danger-bg-color);
}

.HHYLkEZBcUJPga1se3oQ {
  display: flex;
  flex-direction: column;
  opacity: 0;
  color: var(--text-color);
  background: transparent;
  padding: var(--space-m);
  border: 1.5px solid hsl(var(--hue-blue), 20%, 30%);
  border-radius: 16px;
  max-width: min(800px, 90vw);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);
  backdrop-filter: blur(30px) brightness(50%) saturate(100%);
  -webkit-backdrop-filter: blur(30px) brightness(50%) saturate(100%);
  
  &[open] {
    animation: JUb3t4IxoCde77QnaDuQ 0.15s forwards;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
  }
}

.pfOAkdcjAgxEaiTckdFA {
  display: flex;
  font-family: var(--font-family-custom);
  margin: 0 0 var(--space-s) 0;

  h1 {
    flex: 1;
    margin: 0;
    font-size: var(--font-size-xl);
    line-height: 1em;
  }

}

.aIGh3kF56tYlTfTCzGuC {
  position: relative;
  top: calc(var(--space-s) * -1);
  right: calc(var(--space-s) * -1);
  align-self: flex-start;
  color: var(--btn-active-bg-color);
  padding: var(--space-s);
  line-height: 1em;

  &:focus-visible {
    outline: none;
  }

  svg {
    height: var(--icon-size-l);
    line-height: 1em;
  }
}

.M1nSLELWzWtg0nMNVAPp {
  flex: 1;

  &.G89xv3BCUffZqoya0LQl {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.nsGMxmc6ZA0V4Fwl17Bf {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-s);
  column-gap: var(--space-m);
  margin-top: var(--container-padding);
}


@keyframes JUb3t4IxoCde77QnaDuQ {
  from { opacity: 0; }
  to { opacity: 1; }
}

.g6GMN3zm2wAwUXdrNztv {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.BPXMSE6qTyFsaBN9KC9E {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.RgdWsjOTvgGNS4mVKsO0 {
  font-weight: bold;
  overflow-wrap: anywhere;
}

.YqlpOEkYExuu3nS8YDaf {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  overflow-wrap: anywhere;
}

.MsPe70h2pE1JMIFry4m7 {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-s);
}

.UIK2HEzG93kJrZg1zrOI {
  display: flex;
  align-items: center;
  padding: var(--space-xs);

  button {
    cursor: pointer;
    color: var(--btn-bg-color);
  }

  button.PM6oSstQkOr7xx5WXBco {
    color: var(--btn-active-bg-color);
    filter: var(--btn-active-filter);
  }
}

.jvBgtBq5nhwhgFxDdohV {
  align-self: stretch;
  padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-xs) !important;
  font-size: var(--font-size-m) !important;
  color: var(--text-color) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.bpCoN2vmguRe7ZiWYXOH {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
}

.bpCoN2vmguRe7ZiWYXOH .jvBgtBq5nhwhgFxDdohV {
  flex: 1 1 auto;
  min-width: 0;
}

.jvBgtBq5nhwhgFxDdohV::placeholder {
  color: var(--btn-bg-color) !important;
}

.yRcmNgWXHlqworm4xJFy {
  position: relative;
}

.yRcmNgWXHlqworm4xJFy svg {
  height: 2.5rem;
}

.yRcmNgWXHlqworm4xJFy .HcGforjm1Ia4nsKaXlFR {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.2rem;
}

.q3cBXbOJzq3CC3galiDw {
  height: 2.75rem;

  svg {
    height: 3rem;
  }
}

/* the extra filters hide to the right and are clipped until the group
   swipes open (Buttons animates the group's width); never shrink the
   group or the search field starves it on narrow screens and the last
   filter stays clipped even when expanded */
.aM8CASeRLBAkkgVZaRQF {
  position: relative;
  flex: 0 0 auto;
  margin-right: var(--space-s);
  overflow: hidden;
}

/* lit strip on the right edge while the tray is collapsed and one of
   the hidden filters (flawed/downloaded) is active; the strip lives in
   the DOM permanently so it can fade both ways */
.aM8CASeRLBAkkgVZaRQF::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--btn-active-bg-color);
  filter: var(--btn-active-filter);
  opacity: 0;
  transition: opacity .3s linear;
  pointer-events: none;
}

.aM8CASeRLBAkkgVZaRQF.OsxyKaozawCFVmTuLAdz::after {
  opacity: 1;
}

.EpVRhBScYW1RTXwQdqfS {
  width: 48px;
  flex-shrink: 0;

  svg {
    height: 3rem;
  }
}

/* the flaw filter mirrors the row's flaw icon: plain while off, the
   same pink (and glow) as a marked song when the filter is on */
.UIK2HEzG93kJrZg1zrOI button.QWhl2rABUPDTF7sRvhkp.PM6oSstQkOr7xx5WXBco {
  color: var(--btn-danger-bg-color);
  filter: var(--btn-danger-filter);
}
._E4b9xru_u_k_YGeps9v {
  display: flex;
  align-items: center;
  padding: var(--space-xs);

  button {
    cursor: pointer;
    color: var(--btn-bg-color);
  }

  button.LqtGJB7ZgrfUtCHJ2poK {
    color: var(--btn-active-bg-color);
    filter: var(--btn-active-filter);
  }
}

.jGfkFG_zBXEMrAMHkOzo {
  align-self: stretch;
  padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-xs) !important;
  font-size: var(--font-size-m) !important;
  color: var(--text-color) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.uyM_vQ_7uTTA2wNpGC5M {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
}

.uyM_vQ_7uTTA2wNpGC5M .jGfkFG_zBXEMrAMHkOzo {
  flex: 1 1 auto;
  min-width: 0;
}

.jGfkFG_zBXEMrAMHkOzo::placeholder {
  color: var(--btn-bg-color) !important;
}

.MWMEScpcqiZKdHSNrEFg {
  position: relative;

  svg {
    height: 2.5rem;
  }
}

.MWMEScpcqiZKdHSNrEFg .Hqh08Fs40GOYazN71kuG {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.2rem;
}

.P2EE3G9tZaGaqn7Qp9nk {
  height: 2.75rem;

  svg {
    height: 3rem;
  }
}

.tqv2MGacBriEdjinGXG_ {
  width: 48px;
  flex-shrink: 0;

  svg {
    height: 3rem;
  }
}

.ThlJnjEP01mMKWlvDfI_ {
  display: flex;
}

.co__JJL6JHYWRzm_nQDZ {
  display: flex;
  align-items: center;
  padding: var(--space-xs);

  button {
    cursor: pointer;
    color: var(--btn-bg-color);
  }

  button.kb60ME7tFUyg2mhvFEG0 {
    color: var(--btn-active-bg-color);
    filter: var(--btn-active-filter);
  }
}

.gnmtTa8NFKalGFFsVAR1 {
  align-self: stretch;
  padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-xs) !important;
  font-size: var(--font-size-m) !important;
  color: var(--text-color) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.gnmtTa8NFKalGFFsVAR1::placeholder {
  color: var(--btn-bg-color) !important;
}

.tnpFotUZRHPZ3tdtXXGi {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
}

.tnpFotUZRHPZ3tdtXXGi .gnmtTa8NFKalGFFsVAR1 {
  flex: 1 1 auto;
  min-width: 0;
}

.CWsPQkq51DRjtgMIEJI5 {
  position: relative;
}

.CWsPQkq51DRjtgMIEJI5 svg {
  height: 2.5rem;
}

.CWsPQkq51DRjtgMIEJI5 .Qk4ELWcXcOgP6h8S1vbX {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.2rem;
}

.F8e9X9CETveoEl6gyN8w {
  height: 2.75rem;

  svg {
    height: 3rem;
  }
}

.CWsPQkq51DRjtgMIEJI5.aV3rD5kmgdEh3thATGKs {
  animation: G1SXvUFK2XyXZelJoPc4 1s ease-in-out infinite;
}

@keyframes G1SXvUFK2XyXZelJoPc4 {
  0% {
    color: var(--btn-bg-color);
    transform: scale(1);
  }

  50% {
    color: var(--btn-active-bg-color);
    filter: var(--btn-active-filter);
    transform: scale(1.15);
  }

  100% {
    color: var(--btn-bg-color);
    transform: scale(1);
  }
}
.DY6_kAr5khzv1QwqLveK {
  --track-height: 0.5rem;
  --handle-height: 3rem;

  height: var(--handle-height);
  
  &.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;
    height: var(--track-height);
    top: calc(50% - (var(--track-height) / 2));
    width: 100%;
    background-color: var(--transport-volume-track-color);
    border-radius: var(--border-radius);
    cursor: pointer;
  }
  
  & .rc-slider-track {
    position: absolute;
    height: var(--track-height);
    top: calc(50% - (var(--track-height) / 2));
    left: 0;
    border-radius: var(--border-radius);
    background-color: var(--transport-volume-track-active-color);
    filter: var(--transport-volume-track-active-filter);
    cursor: pointer;
  }

  &.rc-slider-vertical {
    height: 100%;
    width: auto;
  }

  &.rc-slider-vertical .rc-slider-rail {
    width: var(--track-height);
    height: 100%;
    left: 50%;
    top: auto;
    transform: translateX(-50%);
    background-color: var(--btn-bg-color);
  }

  &.rc-slider-vertical .rc-slider-track {
    width: var(--track-height);
    left: 50%;
    top: auto;
    transform: translateX(-50%);
  }
}

.kd1i1_RJbONDxmQzev4T {
  --handle-height: 2rem;
}

.X0DCwMUX1tj5tsoGjDFq {
  cursor: pointer;
  color: var(--btn-active-bg-color);
  position: absolute;
  touch-action: pan-x;
  outline: none;

  &:focus-visible {
    outline: var(--focus-outline);
  }

  svg {
    display: block;
    height: var(--handle-height);
  }
}

.dMo9SQYONtw9WYO5lxiN {
  flex: 1;
  min-width: 0;
  width: 100%;
  margin: 0 20px 0 10px;
}

.pMYNwtxIUiwKZSuUB8NQ {
  cursor: pointer;
  color: var(--transport-btn-bg-color);
  filter: var(--transport-btn-filter);
  position: absolute;
  touch-action: pan-x;
  outline: none;

  &:focus-visible {
    outline: var(--focus-outline);
  }

  svg {
    height: var(--icon-size-xl);
  }
}

.sfr6H9YQSnxNFewvtYb2 {
  font-size: 16px;
  color: var(--header-notice-color);
  background-color: var(--header-notice-bg-color);
}

.QYsiKZ5NRjaOsK5iaXfX {
  margin: 0;
  padding: 5px;
  text-align: center;
}

.Kyq1e8Js6YODEAIrpuiV {
  background: hsl(var(--hue-blue), 20%, 15%);
  border-radius: var(--border-radius);
  
  &[data-expanded] {
    .vrRzBvLX1MqJZgM7p38z { 
      transform: rotate(90deg);
    }

    .tVJZZisJHykY_Y7qwkKK {
      border-radius: var(--border-radius) var(--border-radius) 0 0;
    }
  }
}

.vrRzBvLX1MqJZgM7p38z {
  flex-shrink: 0;
}

.tVJZZisJHykY_Y7qwkKK {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: hsl(var(--hue-blue), 20%, 25%);
  background-image: linear-gradient(135deg, hsl(var(--hue-blue), 20%, 25%) 0%, hsl(var(--hue-blue), 20%, 15%) 100%);
  border-radius: var(--border-radius);
  cursor: pointer;

  button {
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    
    &:focus-visible {
      outline: var(--focus-outline);
    }
  }

  svg {
    display: block;
    height: var(--icon-size-l);
  }
}

.Fqzbj50Thya7wadiB1RR {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  cursor: pointer;

  input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    background: var(--btn-bg-color);
    color: var(--btn-bg-color);
    width: 1.25em;
    height: 1.25em;
    border-radius: 0.15em;
    display: grid;
    place-content: center;
    cursor: pointer;

    &:focus-visible {
      outline: var(--focus-outline);
    }
    
    &::before {
      content: "";
      width: 0.65em;
      height: 0.65em;
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
      transform: scale(0);
      background: #000;
    }

    &:checked {
      background: var(--btn-active-bg-color);
    }

    &:checked::before {
      transform: scale(1);
    }
  }
}

._07rR02d9qoDhalHGQFe {
  flex: 1 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}

.YxJz2_g9ABurnuTvtRjd {
  flex: 1;
  min-height: 0;
}

.iCke4cGVydfv216BucaY {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.GTRuAhac9UuybB7qh_gt {
  font-size: var(--font-size-s);
  color: var(--color-gray-5);
  white-space: nowrap;
}

.XR0TY_713KgyfkZVr8k2 {
  width: 100%;
  min-height: 32px;
  padding: var(--space-xs);
  font-size: var(--font-size-s);
  line-height: 1;
}

.sXcRTxeOHman92Gwp9PU {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--font-size-s);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: inherit;
  cursor: pointer;
}

.sXcRTxeOHman92Gwp9PU:disabled {
  cursor: default;
}

.wUDQj1KPeQoJacA_LS9s {
  width: 3.5em;
  font-size: var(--font-size-s);
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 0 var(--space-xs);
}

@media (min-width: 600px) {
  ._07rR02d9qoDhalHGQFe {
    flex: 1 1 0;
    min-width: 44px;
  }
}

.S_RZP54Q58ThF_HrvizC {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.lvDohfXBa5LjNaN4XihU {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.BYmrp41ipVMOVIeYBkAg {
  flex: 1 1 auto;
  width: auto;
  padding: var(--space-s);
  font-size: var(--font-size-s);
  white-space: nowrap;
}

.v0hQOf_5lyuCcnnXZBGY {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  justify-content: flex-end;
}

.NRJegwqUKbFi8hpWz0zW {
  display: flex;
  gap: var(--space-xs);
  margin-right: auto;
}

.NP2EqnrhRM5RYivsAa2W {
  color: var(--btn-danger-bg-color);
  font-size: var(--font-size-s);
  margin: 0;
}

.al7OAfKZ5XH9iAcBdIsL {
  display: flex;
  gap: var(--space-m);
  height: 50vh;
  min-height: 220px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  padding-bottom: var(--space-m);
}

@media (min-width: 600px) {
  .al7OAfKZ5XH9iAcBdIsL {
    gap: var(--space-l);
    overflow-x: auto;
  }
}

.fZerEb50sYVjr9QPclxf  {
  button {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-s);
    font-size: var(--font-size-s);  
  }

  svg {
    height: var(--icon-size-m);
  }
}

.Rbd2GXMirOTOTiaTR5_S {
  margin: 0 1.25rem;
}

.UWgiHRqChqPYjObxkXqw {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-m) var(--container-padding);
}

.Bw4qCeKg9IueFpkHMaQA {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin: 0;
  padding: var(--container-padding);
  border: 1px solid var(--btn-bg-color);
  border-radius: var(--border-radius);
  min-width: 0;
}

.Bw4qCeKg9IueFpkHMaQA legend {
  font-size: var(--font-size-m);
  width: fit-content;
}

.uWd8bSWivhRAF8Ps4g0a {
  display: none;
}

.CHH6ukgfI31pNfRWfp2z {
  width: 90vw;
  max-width: 480px;
}

.xKkwU06MKq2DbjSima4p {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.EYmrcfCMGLTeJOqM1JRG {
  button {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-s);
    font-size: var(--font-size-s);
  }

  svg {
    height: var(--icon-size-m);
  }
}

.sW4LitDeVzCaKEdf2RRA {
}

.eBgZD0SKZoZxdKfDH4T1 {

  /* Safari REALLY doesn't like fieldsets to be flex *items*, hence the .section wrapper */
  fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    margin: 0;
    padding: var(--container-padding);
    border: 1px solid var(--btn-bg-color);
    border-radius: var(--border-radius);
    /* Prevent fieldset from overflowing parent */
    min-width: 0;
  }

  legend {
    font-size: var(--font-size-m);
    width: fit-content;
  }
}

.PJhDzihe1KxTY9CE2xvq legend {
  label {
    display: flex;
    gap: var(--space-s);
    align-items: center;
    cursor: pointer;
  }
}

.hMPTUMcNQY0YeMY1WnWo {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.WPJeW28XmDzljHtBz0mq {
  display: flex;
  gap: var(--space-s);

  button {
    display: block;
    background-color: var(--btn-active-bg-color);
    border-radius: var(--border-radius);
    width: 100%;

    svg {
      height: var(--icon-size-xl);
      color: #000;
      margin: 0 auto;
    }
  }
}

.Sx5QwRYN26kPCBm4i6rP {
  margin: 0;
  height: 2lh;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zIEucMK4dBypf03pERBF {
  text-align: center;
  margin: var(--space-m) 0;
  color: grey;
}

.MhuyzAaoykU7XrttP0lt {
  margin: 0 1.25rem;
}

.lz1c743WkpNBN_CactYS {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.lz1c743WkpNBN_CactYS button {
  flex: 1;
}

.e_KmsD9B0qh5vl9zIxGw {
  display: block;
  background-color: var(--btn-active-bg-color);
  border-radius: var(--border-radius);
}

.e_KmsD9B0qh5vl9zIxGw svg {
  height: var(--icon-size-xl);
  color: #000;
  margin: 0 auto;
}

.lz1c743WkpNBN_CactYS .J8TS2WWST_yWALSlpXRG {
  flex: 0 0 auto;
  width: auto;
}

.ILlOcDDAhZo5qTnrwtdq {
  flex: 1;
  margin: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.s6dMfvg4cHkpBCZwMxlM {
  display: flex;
  align-items: center;
  padding: 0 var(--container-padding) 0 var(--space-xs);
}

.utieeUffOQOs5Tb422mr {
  color: var(--transport-btn-bg-color);
  filter: var(--transport-btn-filter);

  svg {
    height: var(--icon-size-xl);
  }
}

.pRlD2sOdoJdRfrjBCylf {
  animation: var(--animation-btn-danger-activate);
}

.ffq0SD5gzioIYEcgKgLY,
.pjBKslXw1U349A1rnhe0 {
  svg {
    height: 2.66rem;
  }
}

.tQEHmnxGjJM781oxemUN {
  margin: 0 2px;
}

.fIuT4teYAIcl4oLOLEzJ {
  color: var(--btn-active-bg-color);
  filter: var(--btn-active-filter);
}

.HZ7zG9VjL9eCkdQDZGIM {
  color: var(--btn-active-bg-color);
  filter: var(--btn-active-filter);
}

.R0tWhGzOMnxRvplqamqt {
  --progress-color: hsl(var(--hue-blue), 100%, 20%);

  display: flex;
  align-items: center;
  height: 40px;
  width: 100%;
  background-image: linear-gradient(to right, var(--progress-color), var(--progress-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);
}

.iL_22Dl4fbuLsQo42o2o {
  color: var(--btn-danger-bg-color);
  filter: var(--btn-danger-filter);
}

.rMNneKuTapuKwyse_AMl {
  color: var(--btn-active-bg-color);
  filter: var(--btn-active-filter);
}

.g57riS6T9y0m4TeW__lm {
  font-size: 16px;
  color: var(--header-notice-color);
  background-color: var(--header-notice-bg-color);
}

.ySs5DarGdmdZJqJADh2K {
  margin: 0;
  padding: 5px;
  text-align: center;
}

.ySs5DarGdmdZJqJADh2K a {
  color: var(--queued-item-color);
  text-shadow: var(--text-shadow-glow);
  text-decoration: none;
}

.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;

  &:empty {
    display: none;
  }
}

.sjMaG58osNAeqXFe4zpO {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  background-color: var(--chrome-bg-color);
  border-top: 1px solid var(--chrome-border-color);
  z-index: 99;

  a {
    flex: 1;
    padding: var(--space-xs) 0;
  }

  span {
    display: flex;
    justify-content: center;
    color: var(--btn-bg-color);
    /* filter: drop-shadow(0px 1px 0px hsl(var(--hue-blue), 100%, 30%)); */

    svg {
      height: var(--icon-size-xl);
    }
  }

  .KFIi1hoqiTVulFtwCOgg span {
    color: var(--link-color);
    filter: var(--btn-active-filter) drop-shadow(0 0 1px rgba(0, 0, 0, 1));
  }
}

.bx9kUlhkDMmCKpxez9Kn {
  animation: YlMykufEl9xVpOVVrlnC 1s var(--activate-1);
}

@keyframes YlMykufEl9xVpOVVrlnC {
  from {
    filter: var(--btn-activate-filter) drop-shadow(0 0 0 transparent);
  }

  to {
    filter: var(--btn-active-filter) drop-shadow(0 0 1px rgba(0, 0, 0, 1));
  }
}
.PHA1RYYxDsH0dYXl40Fg {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.g93zjst7OeyqC7ZbWkuc {
  margin-top: 0;
  overflow-wrap: anywhere;
  color: var(--color-gray-5);
}

.mJMHculdfvYOZ6hKHwWB {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.vuVg81PIYXSEHIFjcQMg {
  font-weight: bold;
  overflow-wrap: anywhere;
}

.hWZ1zWcCbAVsgioxgASA {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  overflow-wrap: anywhere;
}

.dnNwfgOviUc8X3ixYtoU {
  color: var(--btn-danger-bg-color);
  font-size: var(--font-size-s);
  margin: var(--space-s) 0 0;
}

.h_pECHUWmBjBViZKjNAP {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-s);
}

.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;
  line-height: normal;
}

.TSJBvSrnl7BotohIdqrj {
  font-weight: bold;
  color: #777;
}

.gQAoP9hF3ScD5LLJrzlQ {
  font-size: 1.5em;
}

.NS3EtiiOgeZ5TVfGKuPi {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-m);
  margin: var(--space-l) 0;
}

._AuI5uVP2aeWAYEUCikq {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  font-size: var(--font-size-s);
}

.HT1SORjIXxFsjMXAgfN6 {
  font-weight: var(--font-weight-bold);
}

._90cfd_M299lXtNbZ525 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.iNhHKVOzsUDvVArpghRO {
  width: auto;
  padding: 0 var(--space-s);
  font-size: var(--font-size-s);
  color: var(--btn-active-bg-color);
  filter: var(--btn-active-filter);
}

._AuI5uVP2aeWAYEUCikq input {
  font-size: var(--font-size-m);
}

.O2onHSpINFY_PXeWZ7QT {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.O2onHSpINFY_PXeWZ7QT input {
  flex: 1;
  min-width: 0;
}

.W9Cex3tzYopxJs9oJ0ro {
  flex: 0 0 auto;
  width: 32px;
  min-height: 32px;
  padding: var(--space-xs);
  color: var(--btn-active-bg-color);
  filter: var(--btn-active-filter);
}

.W9Cex3tzYopxJs9oJ0ro svg {
  height: 1.5rem;
}

.tBUXAs_I4wpQxHyY5i3A {
  flex: 0 0 auto;
  align-self: center;
  width: auto;
  padding: var(--space-s);
}

.tBUXAs_I4wpQxHyY5i3A svg {
  width: 24px;
  height: 24px;
  transform: rotate(90deg);
}

.N3DAYQ1_mZY6kkp_JitK {
  color: var(--color-gray-5);
  margin-top: 0;
}

.mXbNNR5uI9BFEcMqJ6SE {
  color: var(--btn-danger-bg-color);
  font-size: var(--font-size-s);
  margin: var(--space-s) 0 0;
}

.E3AX_p7_bSz_MMlPPgf6 {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

.E3AX_p7_bSz_MMlPPgf6 button {
  width: auto;
  padding: var(--space-s) var(--space-l);
}

.Ylb58LkPEqlFOoTDgpSz {
  color: var(--color-gray-5);
  margin-top: 0;
}

.L1o02B8WSZEM6O258qdk {
  color: var(--btn-danger-bg-color);
  font-size: var(--font-size-s);
  margin: var(--space-s) 0 0;
}

.BznyahvnyzNJdvsWEIhI {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

.BznyahvnyzNJdvsWEIhI button {
  width: auto;
  padding: var(--space-s) var(--space-l);
}

.cGThRBrrRMhXgI84cBmw {
  margin-top: 0;
}

.XLOYIBEBvWjPEbpWQ628 {
  list-style: none;
  margin: var(--space-m) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.qWbs8N14xaNl6IGq041j {
  border: 1px solid var(--color-gray-3);
  border-radius: var(--border-radius);
  padding: var(--space-s);
}

.AN4fT5PugNQnda3ZiqKv {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  cursor: pointer;
}

.AN4fT5PugNQnda3ZiqKv input {
  flex: 0 0 auto;
}

.WD0AN7mfaYWxVnjXGqEQ {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  user-select: text;
}

.CATK2iR_fUJdrvxojkO2 {
  flex: 0 0 auto;
  color: var(--color-gray-5);
}

.lwHAk54tIxCJHZSfBqh_ {
  flex: 0 0 auto;
  width: auto;
  padding: 0 var(--space-s);
  font-size: var(--font-size-s);
}

.fUByNBbU62GA2NfhYfC7 {
  width: 100%;
  margin-top: var(--space-s);
  max-height: 240px;
  background: #000;
}

.jrlPKwMspg8a7yi2Gac5 {
  width: 100%;
  margin-top: var(--space-s);
}

.PNaB23JsNLgJ0uKNB3A9 {
  color: var(--btn-danger-bg-color);
  font-size: var(--font-size-s);
  margin: var(--space-s) 0 0;
}

.RfFJGB3Z8kW8zClPEg65 {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

.RfFJGB3Z8kW8zClPEg65 button {
  width: auto;
  padding: var(--space-s) var(--space-l);
}

.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%;
  font-weight: normal;
  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 transparent;
  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%);
}

.DWgmgDjZ7evrSUQVOufA {
  border-color: hsl(var(--hue-blue), 100%, 90%);
  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;
}
.kMVEh9LeEn4g4mp_4CQN {
  display: flex;
  position: relative;
  overflow: hidden;
  min-width: 96px;
  height: 72px;
  border-radius: var(--border-radius);
  align-items: center;
  cursor: pointer;
  background-color: var(--btn-bg-color);

  svg {
    margin: 0 auto;
    color: #000;
  }

  &:has(:focus-visible) {
    outline: var(--focus-outline);
  }
}

.YA6i4Cl4kAWWDVU3e1xA {
  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;
}

.s4sM5iEgPiWiNqVuWXXy {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;

  svg {
    color: hsl(var(--hue-pink), 100%, 70%);
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 1));
  }
}

.urwdlhf5zLiQCnkW1lW9 {
  color: var(--btn-bg-color);
}
.UJP7G5dKPXhMYPVm9lGC {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.MRv8af4NPh12SLYbjwuA {
  display: flex;
  gap: var(--space-s);
}

.R8Bv6t9LbcLXZWcapiD9 {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s);
  font-size: var(--font-size-s);
}

.pntlIV4AJA5JOweDlVgA {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-m) var(--container-padding);
}

.GCfH7SesVkbr3XJWAf4x {
  padding-left: var(--space-l);
}

.IwyJhXcw4stbQluvU1RS {
  margin: 0 auto;
  overflow: hidden;
  padding: var(--container-padding);

  h1 {
    margin: var(--space-l) 0 var(--space-m) 0;
    font-family: var(--font-family-custom);
    font-size: var(--font-size-l);
    color: hsl(var(--hue-blue), 10%, 60%);
  }

  button {
    margin-top: var(--space-s);
  }
}

.LBGExauA2_9eEf6X1NAw {
  margin-bottom: var(--space-xl);
  text-align: center;
  font-size: 30px;

  @media (min-width: 42em) {
    margin: var(--space-xl) 0;
    font-size: 36px;
  }
}
.WUYY8MZhwwhVekAlX5_d {
  background-color: var(--panel-bg-color);
  border-radius: 12px;
  overflow: hidden;
}

.eP0BAX5ayTg1WGhcfd7y {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-s) var(--container-padding);
  color: hsl(var(--hue-blue), 10%, 80%);
  background-color: hsl(var(--hue-blue), 20%, 20%);
  background-image: linear-gradient(135deg, hsl(209,20%,20%) 0%, hsl(209,20%,10%) 100%);

  h1 {
    margin: 0;
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold);
  }
}

.OgJ5EnIwV5jp1GGDcabg {
  padding: var(--container-padding);
}

.XIvZjD6Co9DyofyCj0Da {
  text-align: center;
}

.oPMyaF6eFojk2b8ZQKwH {
  font-size: 24px;
  cursor: pointer;
}

.mFno0FFze3kHGDdbZDBB {
  color: #aaa;
  font-size: 75%;
  margin-top: 1em;
}

.NjmtwxMJxR179Hk2Pomb {
  text-decoration: underline;
}

.okfIUIOCzr40SucFJR9B {
  text-align: left;
  width: 90%;
  height: 90%;
}

.J1Y6pDd6XtAUjqhW2qIF {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.ZKYWLeUdrki571OMgwqw {
  display: inline-block;
  white-space: nowrap;
  border: 1px solid;
  border-color: rgba(240, 246, 252, .1);
  background-image: linear-gradient(180deg, #21262d, #1a1e23 90%);
  border-radius: 0.25em;
}

.ZKYWLeUdrki571OMgwqw:hover {
  border-color: #8b949e;
  background-image: linear-gradient(180deg, #30363d, #292e33 90%);
}

.ZKYWLeUdrki571OMgwqw a {
  display: inline-flex;
  color: #c9d1d9;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 16px;
  text-decoration: none;
}

.ZKYWLeUdrki571OMgwqw svg {
  margin-right: 5px;
}

.ZKYWLeUdrki571OMgwqw.zMurrtazRZl6yxeeInn2 svg {
  color: #E3B341;
}

.ZKYWLeUdrki571OMgwqw.z6j4SZzTbavwii_DBoa2 svg {
  color: #db61a2;
}
.eWB988t3JuRQuM9e6O_N p {
  margin-top: var(--space-s);
}

.XaBoCyvdOpimp_jUKJiK {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin-top: var(--space-s);
}
.F7xbkYJzoNCBoDHg_P2Q {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.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;
}

.Z1AkYsOvWFhZrcYR6W9z {
  width: 90%;
  height: 95%;
}

.PCD9_JwmkY6aoE1S6ZP_ {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.zuvIYSwYXKYBkknUSBt0 {
  padding: 10px;
  border: 1px solid var(--text-color);
  border-radius: var(--border-radius);
  background: var(--panel-bg-color);
  overflow-wrap: anywhere;
}

.Er04pbLH9MbYq06HYgN2 {
  flex: 1;
  margin: var(--space-s) 0;
  overflow: auto;
}

.PQDNPIs88caRIT2AXWfT {
  display: flex;
  gap: var(--space-m);
}

.ATXORF88MX2KCM3GK6PD {
  overflow-wrap: anywhere;
}

.J_rtBBS98nuownep8wbe {
  font-weight: bold;
  color: #777;
}

.YZaEmIfhPKE_g3gNZwso {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin-bottom: var(--space-m);
}

.vfEtFMD1PnnZpL7KJi5i {
  display: flex;
  align-items: center;
  background-color: var(--panel-bg-color);
  padding: var(--space-xs);
  margin-bottom: var(--space-s);
  border-radius: var(--border-radius);
}

.reQxnTVFy0pmOJ_OxHEW {
  flex: 1;
  user-select: text;
  text-overflow: ellipsis;
  overflow: hidden;
  direction: rtl;
  text-align: left;
  white-space: nowrap;
}

.cLbX8ACpwjrJHf1i33Kw {
  cursor: grab;
  color: var(--btn-bg-color);
  height: var(--icon-size-l);
}

.mFavmW0ojDDlX4oNvSlc,
.vKWSaWmD75njSGInSqpQ {
  color: var(--btn-active-bg-color);
  padding: var(--space-xs);

  svg {
    height: var(--icon-size-l);
  }
}
.IkPiZ7oarPYasin3JcFC  {
  button {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-s);
    font-size: var(--font-size-m);
  }

  svg {
    height: var(--icon-size-l);
  }
}

.eYUqAJLLPnFSGQfPrwJp {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--container-padding);
}

.COsFBSxrE3VeJHh23G5V {
  display: flex;
  align-items: flex-end;
  gap: var(--space-m);

  button {
    flex: 1;
  }
}

.iQsmu84S0UOMvskFslib  {
  button {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-s);
    font-size: var(--font-size-m);
  }

  svg {
    height: var(--icon-size-l);
  }
}

.EsTYWrxvRDwQ5bUKgop3 {
  padding: var(--container-padding);
}

.wnHCpEuTBTUVa59U3w_k {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-m) / 2);
  margin-bottom: var(--space-l);
}

.NlKuXmcraPVFykxbkTOC {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.fEBtdTUohuxH0OKwMuxt {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-5);
}

.EsTYWrxvRDwQ5bUKgop3 label {
  padding: var(--container-padding);
  cursor: pointer;
}

.aiaE6AX0GeLpAcQX0uxD {
  width: 90%;
  height: 95%;
}

.f4Zb5e61pdftf8Lvj2RH {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.xi7c6J0XsIvPs1yGeaTw {
  padding: 10px;
  border: 1px solid var(--text-color);
  border-radius: var(--border-radius);
  background: var(--panel-bg-color);
  overflow-wrap: anywhere;
}

.ezigKmZMJARc8saSlOLl {
  flex: 1;
  margin: var(--space-s) 0;
  overflow: auto;
}

.uLqljfpjRhxazHZ_z_vY,
.fyg1sEfO119W3kFoEn1b {
  display: flex;
  height: 40px;
  cursor: pointer;
  align-items: center;
}

.uLqljfpjRhxazHZ_z_vY:hover {
  background: var(--color-gray-2);
}

.fyg1sEfO119W3kFoEn1b {
  background: var(--mark-bg-color);
}

.kd3lRa17OwiwuLyVf9b7 {
  flex: 1;
  font-size: 16px;
  margin-left: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.y2vY08oP9V4E_JbbPyZQ {
  display: flex;
  gap: var(--space-m);
}
.NETZO9taJKnjaev999Gl {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.BPPzbaW5HKIhST8tOTiT {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.rUrMtSlK5kF9kXjLORgf {
  font-size: var(--font-size-s);
  color: var(--color-gray-5);
}

.UBeXAU2D35gxrZPtkPUW {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
}

.Xn0O_U61o92EdQQOw5Wx {
  font-size: var(--font-size-s);
  color: var(--color-gray-4);
}

.osHbT7TY7BLBfQQn7BL0 {
  margin-left: auto;
  width: auto;
  padding: var(--space-xs);
  color: var(--btn-active-bg-color);
}

.osHbT7TY7BLBfQQn7BL0 svg {
  height: var(--icon-size-l);
}

.r_zRCjFTjlk5tGTdEI9w {
  margin: 0;
  padding: var(--space-s);
  border-radius: var(--radius-m);
  background: var(--color-surface-2);
  font-size: var(--font-size-s);
  white-space: pre-wrap;
  word-break: break-word;
}

.AaYfOKGhgnmSXI0W5HqA {
  color: var(--color-danger);
}

.CnPy7WSB2wTWOfOj9_s2,
.G0wAseNdC6loYPbnHR3L {
  font-size: var(--font-size-s);
  color: var(--color-gray-4);
}

.URxMvJaxjUiX6uftiJpA {
  max-width: 480px;
}

.tKqrYebIK9QU2xzq7yUX {
  font-size: var(--font-size-m);
}

.LGDycPKL58D0ukiS4QSL {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-s);
  width: 100%;
}
.sJxMD1hfjKk1X0gnEJgY {
  button {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-s);
    font-size: var(--font-size-m);
  }

  svg {
    height: var(--icon-size-l);
  }
}

.HOZ6hFf5wn40Y6xZyLBr {
  padding: var(--container-padding);

  label {
    cursor: pointer;
  }
}

.Wnn491LVCQ3kFPB3ZxgD {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

.VsDr4oWg42o2vdwTEhjs {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.MF54huxQCj9lkIStbSRn {
  display: flex;
  gap: var(--space-s);
}

.MF54huxQCj9lkIStbSRn input {
  flex: 1;
  min-width: 0;
}

.mW0fYWGwp69Zz3dUaSo2 {
  flex: 0 0 auto;
  width: auto;
  padding: var(--space-s);
}

.mW0fYWGwp69Zz3dUaSo2 svg {
  width: 20px;
  height: 20px;
}

.MsV5b80CyOLkE68ui4qW {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-5);
}
.ew2x2VQFG7Hj_ltiyxbF {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.WI7RHMq3jaNSZwGU2FA6  {
  button {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-s);
    font-size: var(--font-size-s);  
  }

  svg {
    height: var(--icon-size-m);
  }
}

.tW4weGP7ZNHvtdAvHXkQ {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-m) var(--container-padding);
}

.Q5T7XWGqm4a5MPArNfUg {
  min-width: 360px;
}

.YSEBZfRCIoJmOplLt9mP,
.a5K1WCxiR97esx_y_2Ex,
.uiSOmb44a9pRFxf0NKJc {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin: var(--space-l) 0;

  &:first-child {
    margin-top: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.YSEBZfRCIoJmOplLt9mP select {
  width: fit-content;
}
.dlkVNG9BLZN9R9HguwLu {
  max-width: 50%;
}

.wM1sRpuOJYI8QczteHwR {
  cursor: pointer;
}

.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;
}

.wjAPyG8pPzwLDaXFfDlg {
  display: flex;
  align-items: flex-end;
  gap: var(--space-m);

  button {
    flex: 1;
  }
}

.gqWI3mlnDqWIUNXebNqh {
  min-width: 360px;
}

._UZuyKF0ewftaeFpnDiS {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin-top: var(--space-m);
}

.egMKJajhBRVHHcS0ruyV {
  margin-bottom: var(--input-margin);
}

.krYGtNnm9wreKzV0sC87 {
  max-width: 50%;
}

.IhdI0Ej7cIQc3O9IulTL {
  cursor: pointer;
}

.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;
}

.juO4KnStMP44gEr78_2I {
  padding-left: calc(var(--space-m) + 2ch);
  position: relative;
}

.juO4KnStMP44gEr78_2I::before {
  color: hsl(var(--hue-blue), 10%, 60%);
  content: '└';
  left: var(--space-m);
  position: absolute;
}

.sv0Rh8Ono1Ao_j7kp6OB {
  display: flex;
  align-items: flex-end;
  gap: var(--space-m);

  button {
    flex: 1;
  }
}

.Wdz5LHTVlrpDjGYTKK9L {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  cursor: pointer;

  &:has(:focus-visible) {
    outline: var(--focus-outline);
  }

  input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 1.5em;
    min-height: 1.5em;
    border-radius: 50%;
    border: 2px solid var(--btn-bg-color);
    outline: none;

    &:checked,
    &:focus:checked,
    &:hover:checked {
      background: radial-gradient(
        circle,
        var(--btn-active-bg-color) 0%,
        var(--btn-active-bg-color) 60%,
        #000 60%,
        #000 100%
      );
    }
  }
}

.MTzbvQ4VAtgPXbJKkrGO {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);

  input[type="password"] {
    margin: var(--space-s) 0;
  }

  label {
    width: 100%;
  }
}

.X1Pj4fM1xquH4Ymuq0Q5 {
  display: none !important;
}
.mlhmoE1JUQKR4Te5DEtv {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);

  button {
    margin-top: var(--space-s);
  }
}

.glTWFMiUMaerBvhPz8ti {
  display: flex;
  gap: var(--space-s);
}

.pvyilF8BtiMYHtpXJ_jT {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);

  button {
    margin-top: var(--space-s);
  }
}
.e3jR4OMsV_OIaaAci_hn {
  margin: 0 auto;
  overflow: hidden;
  padding: var(--container-padding);

  h1 {
    margin: var(--space-l) 0 var(--space-m) 0;
    font-family: var(--font-family-custom);
    font-size: var(--font-size-l);
    color: hsl(var(--hue-blue), 10%, 60%);
  }
}

.kfaDc9tZA7V0rbLrrQxW {
  margin-bottom: var(--space-xl);
  text-align: center;
  font-size: 30px;

  @media (min-width: 42em) {
    margin-top: var(--space-xl);
    margin-bottom: calc(var(--space-xl) * 2);
    font-size: 36px;
  }
}

.unPhcciIOQl7IyVNBGQk {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  white-space: nowrap;
  margin-bottom: var(--space-m);
}

.cRQaBuJaYH041jNLJIlp {
  display: none;
}
.EPw4Q8pC4VCZu_ENeHOh {
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  & > div {
    margin: var(--space-m) auto;
  }
}

 .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;
}

.UQrnmg0hts6OBDLeeXuR {
  color: var(--song-item-btn-bg-color);

  svg {
    display: block;
  }
}

.Qfinlt4rYm2ZSVL12mDV {
  color: var(--btn-danger-bg-color);
  filter: var(--btn-danger-filter);
}

.xq3Wj5saVZ7LuykwsqKd {
  animation: var(--animation-btn-star);
  will-change: transform;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

.GZ4AfJ1RXsLXR9aQ3QpE {
  position: relative;
  color: var(--song-item-btn-bg-color);

  svg {
    display: block;
  }
}

.TPl9cEhtUMAt0h6N9YCP {
  position: absolute;
  font-size: 14px;
  top: 0;
  text-shadow: none;
  color: var(--color-gray-6);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.KxWIysIVYOPpQ2J0J7m9 {
  color: var(--song-item-btn-active-bg-color);
  filter: var(--song-item-btn-active-filter);
}

.KxWIysIVYOPpQ2J0J7m9 .TPl9cEhtUMAt0h6N9YCP {
  color: var(--song-item-btn-active-color);
}

.fQvlCYdTv_qPyPxDbEan {
  animation: var(--animation-btn-star);
  will-change: transform;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}
.Hk5Oiz4LTn0TQU1HJ_4r {
  --song-item-btn-size: 48px;

  position: relative;
  display: flex;  align-items: center;
  margin-left: var(--space-xs);
  margin-bottom: var(--space-xs);
  background-color: hsl(var(--hue-blue), 40%, 6%);
  border-left: var(--space-xs) solid var(--song-item-btn-bg-color);
  height: 52px;

  &.otX4OYp4lT3aOtJMqjAT {
    height: 64px;
  }

  &.Ar5Q9JpCbRQjA3OMib2W {
    text-shadow: var(--queued-item-text-shadow);

    .oqSOn8U_QmqEzSvyfAw_ {
      color: var(--queued-item-color);
    }
  }

  &.iMwtWGP1vWpUXRv3MLTP:not(.Ar5Q9JpCbRQjA3OMib2W) {
    .oqSOn8U_QmqEzSvyfAw_ {
      color: var(--color-gray-5);
    }

    .INKd0vI4DamezRZUfFHO {
      color: var(--color-gray-4);
    }
  }


}

.q8d4R7JJbyKfMfb5qTtn {
  animation: var(--animation-text-shadow-glow);
}

.dEMKXiuXOGFhiNxYZG2c {
  border-left-color: var(--btn-active-bg-color);
  animation: VpYK0U055IuVJP7H7vnJ 1.2s ease-in-out 3;
}

@keyframes VpYK0U055IuVJP7H7vnJ {
  0% {
    background-color: hsl(var(--hue-blue), 40%, 6%);
  }

  50% {
    background-color: hsl(var(--hue-blue), 60%, 18%);
  }

  100% {
    background-color: hsl(var(--hue-blue), 40%, 6%);
  }
}

.hxXzgFhspryRgl6_AkmQ {
  color: var(--color-gray-5);
  font-size: 14px;
  text-align: right;
  width: 40px;
}

.z8K08MurHExDsFH50TjN {
  flex: 1;
  align-self: stretch;
  align-content: center;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 14px;
  cursor: pointer;
}

.oqSOn8U_QmqEzSvyfAw_ {
  overflow: hidden;
  color: var(--color-gray-9);
  font-size: 18px;
  line-height: normal;
  text-overflow: ellipsis;
}

.INKd0vI4DamezRZUfFHO {
  color: var(--color-gray-7);
  font-size: 16px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-top: var(--space-xs);
}

/* queue-for-others picker: portalled to document.body so virtualized
   rows can't paint over it; zero height so the dropdown anchors at top */
.LypF9zdKShT3A0eQsNdY {
  position: fixed;
  height: 0;
  overflow: visible;
  z-index: 50;
}

/* no room below the row: anchor at the row top and grow upward
   (child is RecentSearches' .container, whose top:100% is overridden;
   bottom:100% of a zero-height parent sits at the parent's top edge) */
.G_1HeegkQkcNAeyPEist > div {
  top: auto;
  bottom: 100%;
}

/* Buttons */
.DLgbTdB3hYU0zYVmvotm {
  position: relative;

  svg {
    display: block;
    width: var(--song-item-btn-size);
    height: var(--song-item-btn-size);
  }
}

.IpLs3GshduGnVRAThUSV {
  color: var(--song-item-btn-active-bg-color);
  filter: var(--song-item-btn-active-filter);
}

.wS8vbzhiTV9XOpPaNEsX {
  color: var(--btn-danger-bg-color);
  filter: var(--btn-danger-filter);
}
.ZQ1vJSuEzaXfK5U2mVy3 {
  --artist-item-height: 48px;
  --artist-item-btn-size: 48px;

  display: flex;
  height: var(--artist-item-height);
  align-items: center;
  overflow: hidden;
}

.WyqZYE5CKt82WwPFFY0U {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
}

.Lo0KOIA2KNbjdkAzONWs {
  color: var(--artist-name-color);
  flex: 1;
  font-size: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 3px;
  cursor: pointer;
}

.p93wNKEZo5tcFcoqQsLu {
  position: relative;
  color: var(--artist-folder-bg-color);

  svg {
    height: var(--artist-item-height);
  }

  .EDIoZvkx8L71cjC29VBS svg {
    height: 24px;
  }

  div {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    width: 100%;
    height: 100%;
  }
}

.uK9euOQJZqLMy1JCBauJ .p93wNKEZo5tcFcoqQsLu {
  color: var(--artist-folder-starred-bg-color);
  filter: var(--artist-folder-starred-filter);
}

.uK9euOQJZqLMy1JCBauJ .EDIoZvkx8L71cjC29VBS,
.uK9euOQJZqLMy1JCBauJ .b9LqH0GqWQ8WmCaa4ktx {
  color: #000;
}

.HZ0_7hegL7xDvnX1Vw9I {
  animation: var(--animation-text-shadow-glow);
}

.sfB8p0Y7lGZmslY0UxWw {
  color: var(--queued-item-color);
  text-shadow: var(--queued-item-text-shadow);
}

/* swipe-revealed actions (admin only) */
.QI6f_0wsy3luWzwzwiMn {
  position: relative;

  svg {
    display: block;
    width: var(--artist-item-btn-size);
    height: var(--artist-item-btn-size);
  }
}

._rnpPwx8x3P74Aklmt_g {
  color: var(--song-item-btn-active-bg-color);
  filter: var(--song-item-btn-active-filter);
}

.FM0NON48tUGevc0Mocok {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  background-color: hsl(var(--hue-blue), 90%, 25%);
  font-size: 18px;
}
.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);
}

.qVDsyq0en4mmfO12Q9S6 {
  aspect-ratio: 4/3;
  margin: 0 auto;

  img {
    border-radius: var(--border-radius);
  }

  svg {
    color: var(--btn-bg-color);
  }

  img,
  svg {
    width: 100%;
    height: 100%;
  }
}
.wmZzvQLV8SUXBxloByaI {
  --image-width: 104px;
  --queue-item-btn-size: 48px;

  position: relative;
  /* 104px */
  height: 6.5rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: hsl(var(--hue-blue), 40%, 6%);
  margin: var(--space-s) 0;
  line-height: normal;
  /* vertical scrolling stays native (never blocked by swipe handlers);
     horizontal gestures go to react-swipeable for expand/locate */
  touch-action: pan-y;
}

.Qa6L0Os1V4kU8WXIbyhh {
  position: absolute;
  left: 1vh;
  top: 50%;
  margin-top: -16px;
  z-index: 1;
  pointer-events: none;
  color: var(--btn-active-bg-color);
}

.OcXId78BLaxBJIqdYIof {
  display: flex;
  flex: 1;
  margin: 0.5rem 0 0.5rem var(--space-s);
  overflow: hidden;
}

.umnUSnD73DO3rWOYPZ9K {
  opacity: .5;
}

.GacRKdveAPO6_ywV1_ca {
  position: relative;
  display: flex;
  justify-content: center;
  width: var(--image-width);
  aspect-ratio: 4 / 3;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
  }
}

.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: var(--color-gray-7);
  font-size: var(--font-size-s);
  padding: var(--space-xs);
}

.nDkBZyovKLxzMG7K_3Tg {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: var(--container-padding);
  overflow: hidden;
}

.Wj7Me9sY8G3TTqTAeAaj {
  flex: 1;
}

.oyozFDwcV8GMOumLs906 {
  color: var(--color-gray-9);
  font-size: 1.25rem;
}

.PyOIw1JanvSSiLfkRkZt {
  color: var(--color-gray-7);
  font-size: 1.125rem;
}

.HEBTYqqhv5BzgHhWH7vd {
  font-size: var(--font-size-s);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-gray-5);
  margin-bottom: 0.25rem;
}

._LtmdT6l38fSEjxPLZod {
  color: var(--queued-item-color);
  text-shadow: var(--text-shadow-glow);
}

.oyozFDwcV8GMOumLs906,
.PyOIw1JanvSSiLfkRkZt,
.HEBTYqqhv5BzgHhWH7vd {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Buttons */
.SUdDbZdeZwQPymCmhaMA {
  button {
    position: relative;
    width: var(--queue-item-btn-size);
    height: var(--queue-item-btn-size);
  }

  button:not(.en2EUqvEdVRhrEtbh7hu) {
    color: var(--song-item-btn-bg-color);

    svg {
      height: 100%;
      width: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }
  }

  button.YmwxQ7Vy9kTAPCo00I2U {
    color: var(--song-item-btn-active-bg-color);
    filter: var(--song-item-btn-active-filter);
  }

  button.tX8eNQUgD77rREuwXWHO {
    color: var(--btn-danger-bg-color);
    filter: var(--btn-danger-filter);
  }
}

.gh_SYElq5eTJHE5IZynP svg,
.ENoEOjlwEk0jBI45f4pk svg {
  width: 60px !important;
  height: 60px !important;
}

/* Currently playing  */
.wmZzvQLV8SUXBxloByaI.x1y3JtPFnfVcJSd6mKkB {
  /* Added 1% tail fade (99% -> 100%) */
  background-image: linear-gradient(to right,
      hsl(var(--hue-blue), 100%, 20%) 99%,
      transparent 100%);
  background-repeat: no-repeat;
  background-size: var(--progress, 0%) 100%;
}

.wmZzvQLV8SUXBxloByaI.x1y3JtPFnfVcJSd6mKkB::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: auto;
  width: var(--progress, 0%);
  --queue-item-crawl-span: 300%;
  --queue-item-shine-width: 55vw;
  /* Tile must exceed shine width; gap factor creates transparent buffer so repeat is seamless */
  --queue-item-gap-factor: 1.5;
  --queue-item-tile-size: calc(var(--queue-item-shine-width) * var(--queue-item-gap-factor));
  /* Soften trailing edge of shine (fade last 1%) */
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 99%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 99%, rgba(0, 0, 0, 0) 100%);
  /* Slightly reduced alpha of shine for overall softness */
  background: linear-gradient(90deg,
      transparent 0%,
      transparent calc(50% - (var(--queue-item-shine-width) / 2)),
      rgba(255, 255, 255, 0.55) 50%,
      transparent calc(50% + (var(--queue-item-shine-width) / 2)),
      transparent 100%);
  /* Use the computed tile size so the shine fully fits inside one repeat */
  background-size: var(--queue-item-tile-size) 100%;
  background-repeat: repeat-x;
  animation: cWb6RjtltIZ875IxD0pA 3s linear infinite;
  will-change: background-position;
  mix-blend-mode: overlay;
  opacity: 0.85;
}

.wmZzvQLV8SUXBxloByaI.x1y3JtPFnfVcJSd6mKkB.pXOty7OejiIGXdAxm6PY::after {
  animation-play-state: paused;
}

@keyframes cWb6RjtltIZ875IxD0pA {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: var(--queue-item-tile-size) 0;
  }
}

/* requeue-for-user picker: portalled to document.body so the row's
   overflow:hidden can't clip it; zero height so the dropdown anchors at top */
.VyboTMaDEVssE1KnHPIp {
  position: fixed;
  height: 0;
  overflow: visible;
  z-index: 50;
}

/* no room below the row: anchor at the row top and grow upward
   (child is RecentSearches' .container, whose top:100% is overridden;
   bottom:100% of a zero-height parent sits at the parent's top edge) */
.RIUvZAFbICC3dG9aQfQF > div {
  top: auto;
  bottom: 100%;
}

.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);
}

.fnrgY26m1qh8qXoa7cNp {
  max-height: 30vh;
  overflow-y: auto;
}

.VqBl67wJcavHxPcW8e4I {
  list-style: none;
  margin: 0;
  padding: 0;
}

.NMrcBkZ4kAueH5ajy9jm {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) 0;
  border-top: 1px solid var(--chrome-border-color);
}

.hji_KcTcCPeLi_1o1De8 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-m);
}

.T4UkRoUG2kAXQRJEyHOM {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-gray-5);
  font-size: var(--font-size-s);
  text-transform: capitalize;
}

.wRS0ie__pyb43khMzQgq {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: var(--space-s);
  color: var(--btn-active-bg-color);
  filter: var(--btn-active-filter);
}

.wRS0ie__pyb43khMzQgq svg {
  height: 1.75rem;
  width: auto;
}

.HAhYWumcLNciMRpUrCJJ {
  color: var(--btn-danger-bg-color);
}
.SL2km6WfB8LO2f6aNmp7 {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.MVCELo062Vp3bh1S1ZrP {
  color: var(--color-gray-5);
  margin-top: 0;
}

.biKHElp6b0gZSBYcjrqU {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  font-size: var(--font-size-s);
  cursor: pointer;
}

.biKHElp6b0gZSBYcjrqU .x2GlDU8OMsMUuFPCcvVX {
  font-weight: var(--font-weight-bold);
}

.biKHElp6b0gZSBYcjrqU select {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-m);
}

.SkScn_hFP0XAMogys3Hu {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

.SkScn_hFP0XAMogys3Hu button {
  width: auto;
  padding: var(--space-s) var(--space-l);
}
.oXSJX7DzufMnJHozUfLy {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.CzD28SsBubcMSYo0jdcN {
  width: 100%;
  height: 100%;
}

._1dIyIoA8tVTmrf6oLAq {
  visibility: hidden;
  position: absolute;
}

.wQO00dbi9MZoVASKosCB {
  position: absolute;
  inset: 0;
  animation: QSc5DvpWNinPGJ0hWZW7 1.2s ease-in-out infinite;
}

@keyframes QSc5DvpWNinPGJ0hWZW7 {
  0% {
    background-color: var(--color-gray-3);
  }

  50% {
    background-color: #000;
  }

  100% {
    background-color: var(--color-gray-3);
  }
}

.cLYvmHE9hEkJ78dIf3kd {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-s);
  width: 100%;
}

.cLYvmHE9hEkJ78dIf3kd button {
  width: auto;
  padding: var(--space-s) var(--space-l);
}
.R8mEZ9X57jHxS2klW2Lv {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-s) 0;
  cursor: pointer;
}

.Zgzx_jVR0KqvpnPGAhyG {
  position: relative;
  flex: 0 0 auto;
  border: none;
  border-radius: var(--border-radius);
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
}

.HpcIx3Cjzfha9631s2Ag {
  display: block;
  width: 128px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--border-radius);
}

.VFjoSjfLRTkgSCPP_e_i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.8));
  pointer-events: none;
}

.SJY39lRSzYcadRFgtyrd {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.bS1H_VgwFpq6GAUvd9My {
  color: var(--color-gray-9);
  font-size: 1.25rem;
}

.V76wwu6Uw5t9DoIKO1My {
  color: var(--color-gray-7);
  font-size: 1.125rem;
}

.fJ2Qavo9gJOTglEAmhG3 {
  font-size: var(--font-size-s);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-gray-5);
  margin-bottom: 0.25rem;
}

.bS1H_VgwFpq6GAUvd9My,
.V76wwu6Uw5t9DoIKO1My {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.ULFu5zGzgTy8Z60NEhbB {
  color: var(--btn-danger-bg-color);
  font-size: var(--font-size-s);
  margin: var(--space-s) 0 0;
}

.G2ECqS_bRIhGb36Zt18A {
  color: var(--color-gray-5);
  font-size: var(--font-size-s);
  margin: var(--space-s) 0 0;
}

.DSkQ1NRoyjnkn9XB2THd {
  list-style: none;
  margin: 0;
  padding: 0;
}
.g7u5jI6xgooLieFT9R_s {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.POeBgw0e7QiEaMZ5mNsz {
  flex: 0 0 auto;
  padding: var(--space-s) var(--container-padding) 0;
}

.S7SpJW7mRxua40TtsrMd {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.xg9pSfSdm9_uW109FXVZ {
  padding: var(--space-s) var(--container-padding);
}

.xg9pSfSdm9_uW109FXVZ .Nhz0Fbc8cvDYgsnnRt3I {
  margin-top: 0;
}