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

/* A control that has to be visibly a control, on a dark surface, without
 * shouting like `primary`.
 *
 * `.container` alone paints nothing — transparent, borderless — which is right
 * for an icon button sitting in a row of chrome and wrong for anything a
 * person is meant to press on a panel. Twice now that produced a control with
 * no boundary at all: the pitch assistant's five answers and the −/+ steppers
 * in My Pitches. Both were legible and neither looked pressable, and both
 * failed WCAG 1.4.11, which asks 3:1 between a component and its background.
 *
 * On surfaces this dark the fill cannot carry that on its own: one light
 * enough to reach 3:1 leaves too little headroom for the label above it. So
 * the border carries the boundary and the fill only seats the text. Measured
 * against the lighter of the two surfaces it sits on — the assistant's sheet,
 * hsl(hue, 30%, 12%) — the border is 4.35:1 and the label 6.4:1; on the darker
 * panel behind My Pitches both are higher. Margin over the minimum on purpose:
 * the minimum is what disappears first on a dim phone with a comfort filter,
 * which is where this was reported.
 */
.Wjt1ejR_ASN7eeLDxiC9 {
  padding: var(--space-s);
  color: var(--color-gray-9);
  font-weight: var(--font-weight-bold);
  background-color: hsl(var(--hue-blue), 18%, 32%);
  border: 1.5px solid hsl(var(--hue-blue), 30%, 52%);
  border-radius: var(--border-radius);

  /* a press has to show, on a screen with no hover to fall back on */
  &:active:not(:disabled) {
    background-color: hsl(var(--hue-blue), 22%, 42%);
  }

  &:disabled {
    opacity: 0.55;
    cursor: default;
  }
}

.GlT0aJMD1pawJ1uwdI_4 {
  padding: var(--space-xs) var(--space-s);
  background-color: hsl(var(--hue-blue), 40%, 8%);
  border-radius: var(--border-radius);
  margin-bottom: var(--space-xs);
}

/* one compact row: sorting plus the filter toggle */
.cDwbq8IH2uS8aBf7Pymb {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.EFmdmGoBE5sHW10RxVhJ {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25em 0.7em;
  border: none;
  border-radius: 999px;
  background-color: hsl(var(--hue-blue), 40%, 16%);
  color: var(--color-gray-8);
  font-size: var(--font-size-xs);
  cursor: pointer;
  white-space: nowrap;
}

.CDXxe0avEmy1lfaTaQgR {
  background-color: hsl(var(--hue-blue), 60%, 40%);
  color: #fff;
  font-weight: bold;
}

.nFMC2vy25E21UQIibgew { font-size: 0.7em; opacity: 0.8; }

/* Capped and scrollable: the list of categories grows with the library, and
   without a ceiling it pushed the songs off a phone screen entirely. */
.w0I4biyNQxlWH8uPTKRf {
  max-height: 42vh;
  overflow-y: auto;
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid hsl(var(--hue-blue), 30%, 18%);
}

.eVq3bd5YeGhcgrBonnil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.IvZGxJ93YmTIG8qlKd_g {
  font-size: var(--font-size-xs);
  color: var(--color-gray-6);
  min-width: 4.5em;
}

.ld6AQkOqzg2AjPFIP3xI {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.6em;
  border: none;
  border-radius: 999px;
  background-color: hsl(var(--hue-blue), 40%, 16%);
  color: var(--color-gray-8);
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.ld6AQkOqzg2AjPFIP3xI:hover { background-color: hsl(var(--hue-blue), 40%, 24%); }

.eCKFxDCepD5qtNpqLA2_ {
  background-color: hsl(var(--hue-blue), 60%, 40%);
  color: #fff;
  font-weight: bold;
}

.mFLgS8IdV2CVp4x3Euvf { opacity: 0.6; font-size: 0.85em; }

.IcUPO3eqrfpcCzNnv4nH {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding-top: var(--space-xs);
}

.dZNUgkCH8S0AkiSqoBap {
  border: none;
  background: none;
  color: var(--btn-danger-bg-color);
  font-size: var(--font-size-xs);
  cursor: pointer;
  padding: 0;
}

.Hc0223vL4176SdF_KdgT {
  border: none;
  background: none;
  color: var(--color-gray-6);
  font-size: var(--font-size-xs);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.Hc0223vL4176SdF_KdgT:disabled { opacity: 0.5; cursor: default; }

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

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

.yRcmNgWXHlqworm4xJFy svg {
  height: 2.5rem;
}

.q3cBXbOJzq3CC3galiDw {
  height: 2.75rem;

  svg {
    height: 3rem;
  }
}

.zKCotnvYis3lj_IxNd42 {
  margin-right: var(--space-s);

  svg {
    height: 3rem;
  }
}
.huc8nEUkcq3vl4AoXJG8 {
}

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

.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 {
  width: 100%;
  margin: 0 34px 0 30px;
}

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

.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%);
  
  /* `opacity: 1` here, statically, and the animation only on top of it.
     It used to be `animation: fadeIn 0.15s forwards` ALONE, which made a
     keyframe animation the only thing that ever made this dialog visible —
     `opacity: 0` above is the base state, and nothing else overrode it. A
     modal opened with showModal() is in the top layer and swallows every tap
     whether or not it can be seen, so anything that stops that one animation
     from running (a WebKit compositing quirk, an element promoted out of the
     UA's `dialog:not([open]) { display: none }` in the same frame, a future
     reduced-motion rule) leaves the screen looking untouched and dead to
     input. The animation is decoration; being visible is not. */
  &[open] {
    opacity: 1;
    animation: JUb3t4IxoCde77QnaDuQ 0.15s;
    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;

  /* A scrolling body needs a real size of its own, because `overflow: auto`
     takes away the one it would otherwise get for free.

     `flex: 1` is `flex: 1 1 0%`. Inside a dialog that has a `max-height` but
     no `height`, that 0% is a percentage of an indefinite size — which the
     spec says to treat as `content`, and which Chrome does when it works out
     how tall the dialog should be. WebKit resolves it to 0 instead. On its
     own that is harmless: a flex item's automatic `min-height` is its content
     height, so it cannot actually shrink below what it holds. But
     `overflow: auto` sets that minimum to 0 — and now nothing is holding the
     body open. Safari ends up with a dialog exactly the height of its title
     bar and a 0px scroll container with the entire body clipped inside it.
     That is the "Busca una canción" shell with only a title and an X,
     confirmed on an iPad, with the X still working because the title lives
     outside this element.

     `flex-basis: auto` makes the body's starting size its content, so the
     dialog grows to fit it on every engine; `min-height: 0` lets it shrink
     again, and scroll, once the dialog hits its `max-height`. The rest of the
     modals — none scrollable, none capped — keep the plain `flex: 1` above and
     are not touched by this. */
  &.G89xv3BCUffZqoya0LQl {
    flex: 1 1 auto;
    min-height: 0;
    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; }
}

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

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

/*
 * The instrumental. Turning it down is almost never what somebody means — the
 * room would hear a guide vocal over nothing — so it is quieter and last,
 * without being hidden or disabled.
 */
.Vdwq4WpbkyOkqqt6hWqG {
  opacity: 0.75;
  padding-top: var(--space-s);
  border-top: 1px solid var(--btn-bg-color);
}

.HACrOwNQWiCd8junQQDy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
}

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

/* the level in words, so nothing here is conveyed by a slider position alone */
.P5sLXRdtA5mfsM6TlAtO {
  font-variant-numeric: tabular-nums;
  color: var(--text-color-dim, inherit);
  font-size: var(--font-size-s);
}

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

/* A large target, because this is used on a phone mid-song.
 *
 * Surface, border and colour come from Button's `quiet` variant; this only has
 * to stay square and stay tappable. Deliberately no padding override, the same
 * reasoning as the steppers in MyPitches: both would be plain class selectors,
 * so whichever stylesheet the bundler happens to emit last would win, and a
 * target that is 48px on one build and not the next is not a size.
 * `box-sizing: border-box` (modern-normalize) is what keeps the variant's
 * padding and border inside the 48 rather than on top of it.
 */
.p1t0FQ03G_sLJDTFcPIf {
  flex: 0 0 auto;
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;

  /* The glyph's size, stated outright.
   *
   * `Icon` writes an `<svg>` with a viewBox and no width or height unless it is
   * handed a `size`, and these two buttons hand it none — they are the only
   * two in the codebase that do; every other unsized `<Icon>` sits under a
   * rule like this one. Left implicit, the svg is a replaced flex item with an
   * aspect ratio and no intrinsic size inside a box that has a minimum and no
   * height. Blink resolves that to something and shrinks it to fit; WebKit
   * resolves it against the box's *indefinite* height and gets 0, so the
   * button paints and the glyph inside it does not. iPad Safari showed four
   * blank rounded squares where Android showed four icons — the same class of
   * indefinite-size resolution `Modal.css` documents for the scrollable body.
   *
   * `--icon-size-m` keeps the control at exactly the 48px target the rule
   * above promises (24 + 16 padding + 3 border < 48), and is the size the
   * other quiet icon rows in /account already use. */
  svg {
    height: var(--icon-size-m);
  }
}

/* Muted, written as two classes on purpose. `quiet` sets its own
 * `background-color` from a single class, so a single-class rule here would win
 * or lose on the order webpack emits the two chunks in, and a state that shows
 * on one build and not the next is not a state.
 *
 * A darker seat, rather than the `opacity: 0.6` this was. Dimming was the right
 * idea — a muted stem is off — and the wrong mechanism twice over once the
 * control is a `quiet` one: that variant draws a *disabled* control at
 * `opacity: 0.55`, so muted and "you may not change this" became the same
 * picture; and dimming a control that had only just been made legible gives
 * back the contrast the variant exists to provide.
 *
 * The border and the label colour are left alone, so the boundary and the icon
 * stay as readable muted as unmuted. The icon is 12.5:1 on this fill and 6.4:1
 * on the unmuted one, and the two fills read 1.96:1 apart — that difference is
 * what carries the state, with the icon changing to VOLUME_OFF and the
 * "· Muted" in the readout beside it, so no part of it is colour alone. None of
 * those three depend on what is behind the modal: they are inside an opaque
 * button.
 *
 * The border is not, and this is the first place `quiet` has been used on a
 * surface that is not opaque. `Modal.css` paints no background at all — it is
 * `backdrop-filter: blur(30px) brightness(50%)` — so the ground is whatever
 * happens to be behind the dialog, and the boundary ratio is a range rather
 * than a figure. Over the page background alone it is 5.4:1; over the lightest
 * thing likely to be behind it, a /library artist card blurred and halved to
 * about hsl(209, 50%, 12%), 4.35:1.
 *
 * The instrumental row is the weakest of the three. `.secondary` composites it
 * at `opacity: 0.75` and an ancestor's opacity cannot be undone by a child, so
 * its border runs 3.40:1 over the page background down to 3.04:1 over that
 * bright card — WCAG 1.4.11 asks 3:1, and that is the floor, not headroom. Its
 * icon holds up better, 4.8:1 to 4.7:1. Left as it is because widening this to
 * give the modal an opaque background is a bigger change than the defect;
 * flagged for the physical gate instead.
 */
.p1t0FQ03G_sLJDTFcPIf.TLeWAdSPsguni_JqAHBh {
  background-color: hsl(var(--hue-blue), 18%, 14%);
}

/*
 * Key, set apart from the three levels above it.
 *
 * The same separator `.secondary` draws, without the dimming: a key change is
 * not a control somebody rarely means — it is the reason a lot of people are
 * holding the phone at all. The rule is only here to stop it reading as a
 * fourth stem.
 */
.LuWLBSW08cUcVMxfzKvm {
  padding-top: var(--space-s);
  border-top: 1px solid var(--btn-bg-color);
}

.JOQXGBGtzdQZYL0Z1GZX {
  flex: 1 1 auto;
}

.lAN5OmkcgtALVGJsJ3PQ {
  margin: 0;
  font-size: var(--font-size-s);
  color: var(--text-color-dim, inherit);
}

.UzZalw2DLOwQRPVwusm9 {
  align-self: flex-start;
}

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

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

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

/* the checkbox sits in the legend, same as the visualizer's, so the switch
   reads as the heading of its own box rather than a stray line inside one */
.fwUgpHeuaKxKMF_czP75 legend {
  label {
    display: flex;
    gap: var(--space-s);
    align-items: center;
    cursor: pointer;
  }
}

.G_sms525Bd9jYYkLfdOC {
  margin: 0;
  color: var(--color-gray-6);
  font-size: var(--font-size-s);
}

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

.MhuyzAaoykU7XrttP0lt {
  margin: 0 1.25rem;
}

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

/* A native control on purpose: six presets is a list, and the room's television
   is often driven from a phone where the platform picker is the better one. */
.MuQXEZ7E6zZmEfByq_ur {
  width: 100%;
  padding: var(--space-s);
  font-size: var(--font-size-m);
  color: inherit;
  background-color: var(--btn-bg-color);
  border: 1px solid var(--btn-bg-color);
  border-radius: var(--border-radius);
}

.kNuteCKAroJNpXemgXVQ {
  width: 90vw;
  max-width: 480px;

  /* Tall enough that a whole section usually fits, capped so the Modal's
     scrollable body — not the page — is what scrolls on a short screen. The
     title bar and the Done button stay put either way. */
  max-height: 90vh;
}

/*
 * The strip. Two equal targets the width of the dialog, so a thumb or a remote
 * cannot miss; the selected one is drawn as the surface the panel below sits
 * on, which is what makes it read as "you are here" without a caption.
 */
.tqRWWmL3dYm2tS_wFIYz {
  display: flex;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
  border-bottom: 1px solid var(--btn-bg-color);
}

.eva1H79ksmEQ5zlpNc1g {
  flex: 1 1 0;
  min-height: 48px;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  font-size: var(--font-size-m);
}

/*
 * Two classes on purpose: `quiet` sets its own background from one class, so a
 * single-class rule here would win or lose on the order the bundler emits the
 * two stylesheets. Selected is carried by the fill, the text colour and
 * `aria-selected`, so no part of it is colour alone.
 */
.eva1H79ksmEQ5zlpNc1g.kb7Gq7nGdJF0gotmPXxW {
  background-color: var(--btn-active-bg-color);
  color: #000;
}

.yu9R20ay6SsYmuBSfhvv {
  display: flex;
  flex-direction: column;
}

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

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

.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 var(--space-s);
}

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

.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));
  }
}
/* Anchored above the nav rather than centered: the question is an aside, and a
   centered dialog would stop whatever the singer was doing to read it. */
.C6Q5fJOGBVEeC5Jgtm5B {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 98; /* under the nav (99), which stays reachable */
  display: flex;
  justify-content: center;
  padding: var(--space-s);
  pointer-events: none;
}

.vnJOwfsHtTDq0Nq3rElc {
  pointer-events: auto;
  width: 100%;
  max-width: 480px;
  padding: var(--container-padding);
  color: var(--text-color);
  background-color: hsl(var(--hue-blue), 30%, 12%);
  border: 1.5px solid hsl(var(--hue-blue), 20%, 30%);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgb(0 0 0 / 60%);
  animation: _F6oEVTlljq78dM6Lj7Y var(--spring-duration) var(--spring-function);
}

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

.eddPxMojgzSgNi23SGOh {
  flex: none;
  color: var(--link-color);
}

.cII2m4xIEMIhYM8jQlJB {
  flex: 1;
  margin: 0;
  font-family: var(--font-family-custom);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  line-height: 1.2em;
}

.pAwOXml1lXSOhnBKS2RR {
  flex: none;
  align-self: flex-start;
  padding: var(--space-xs);
  color: var(--btn-active-bg-color);
  line-height: 1em;

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

.k7oWJvm3IFpWbkMZegtu {
  margin: var(--space-s) 0 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-gray-9);
}

.o8EynZkJADAr7fxd60Yl {
  color: var(--color-gray-6);
  font-size: var(--font-size-s);

  &::before {
    content: ' — ';
  }
}

.q9atkXp8OMklRkVmTkJg {
  margin: 0 0 var(--space-m) 0;
  color: var(--color-gray-6);
  font-size: var(--font-size-s);

  strong {
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
  }
}

/* Two columns so the whole scale fits on a phone without scrolling, with the
   confirming answer spanning the middle: high answers above it, low below. */
.anHtnNSdCvh2MGCwnrb4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-s);
}

/* The surface and the boundary come from Button's `quiet` variant, which
   exists because this was the second control in the app to render with
   neither. Only the sizing is this component's business. */
.LaocSJSuzGT2DOsvVNd1,
.xw2YX7epnPLVN9ERg4cn {
  min-height: 44px; /* stays tappable with a microphone in the other hand */
  font-size: var(--font-size-s);
}

.xw2YX7epnPLVN9ERg4cn {
  grid-column: 1 / -1;
}

.LeIIqU7Jn_MWEWJITnjF {
  display: block;
  margin-top: var(--space-s);
  padding: var(--space-xs);
  color: var(--color-gray-8);
  font-size: var(--font-size-s);
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
}

.laSRCqOFUbTfkRXELxnb {
  margin: 0;
  color: var(--color-gray-8);
  font-size: var(--font-size-s);
}

@keyframes _F6oEVTlljq78dM6Lj7Y {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.FrpYp4VNyjDkMutipThc {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding-bottom: var(--space-m);
  margin-bottom: var(--space-m);
  border-bottom: 1px solid hsl(var(--hue-blue), 30%, 20%);
}

.GpPbHw9UHuT8ZB2faKjO {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  font-size: var(--font-size-xs);
  color: var(--color-gray-6);
}

.n3E7A_uJYnYnSDHBEPOJ {
  width: 100%;
  font-size: var(--font-size-s);
}

.YOdMbqm29l_mAL8pjvjf {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-gray-6);
}

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

.VM5V4oj5Kn8OUBaEV5gF {
  display: inline-block;
  margin-top: var(--space-xs);
  color: var(--btn-danger-bg-color);
  cursor: pointer;
}

.tYKF5p0wjMVADMGHkt2W {
  padding-bottom: var(--space-m);
  margin-bottom: var(--space-m);
  border-bottom: 1px solid hsl(var(--hue-blue), 30%, 20%);
}

.BR1hp6rEMgfoaahBQjct {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-xs) 0 var(--space-s);
}

.qXt1hZqzIkABIJXdPTWa {
  font-size: var(--font-size-xs);
  color: var(--color-gray-6);
}

.EQGXjWdD3JrQDGGMO99S {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background-color: hsl(var(--hue-blue), 40%, 20%);
  font-size: var(--font-size-xs);
}

.B23EPa_VguFS_rcmRu8V {
  cursor: pointer;
  color: var(--btn-danger-bg-color);
  font-weight: bold;
}

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

.PQI6QnCmDntgk7KWQVVX {
  font-size: var(--font-size-xs);
}

.FTQDz5bis089ekhqTddM {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-s);
}

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

.kZbmexKKTmKWa8miI6ct {
  padding-bottom: var(--space-m);
  margin-bottom: var(--space-m);
  border-bottom: 1px solid hsl(var(--hue-blue), 30%, 20%);
}

.PY8Ot6SG5_39ryHG7luy { margin-top: var(--space-xs); }
.fRFNh5KbihPr3bHy4Kf4 { color: var(--color-gray-6); font-size: var(--font-size-xs); }
.b93gpvHNIU67pPYLNsNH { margin: var(--space-xs) 0 0; font-size: var(--font-size-xs); color: var(--color-gray-6); }

.t2971DkOFG0fqUo5h2eR {
  list-style: none;
  margin: var(--space-s) 0 0;
  padding: var(--space-s);
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  background-color: hsl(var(--hue-blue), 40%, 8%);
  border-radius: var(--border-radius);
}

.t2971DkOFG0fqUo5h2eR li {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 2.6em;
  padding: 0.15em 0.3em;
  border-radius: var(--border-radius);
  background-color: hsl(var(--hue-blue), 40%, 16%);
}

.a7lY9GOAy0GV9tF1VhXA { background-color: hsl(45, 60%, 30%) !important; }
.oQLPbRQ4FaUPX9sphMJ0 { font-size: var(--font-size-xs); font-weight: bold; }
.DsPH235JZuaQy8eFMn_J { font-size: var(--font-size-xs); color: var(--color-gray-6); }

/* a bulk-imported song nobody has checked yet */
.aT2_ETuapk3znzIcVOGg {
  margin: 12px 0;
  padding: 12px;
  border-radius: 6px;
  border-left: 3px solid var(--yellow, #d9a520);
  background: var(--bg-raised, rgba(255, 255, 255, 0.06));
}

.dfLI_3JGHaXYI3lFjXqS {
  margin: 0 0 6px;
  font-weight: 600;
}

/* the YouTube title the guess came from, verbatim */
.laP5E1WS2bzmxj8r_dvz {
  margin: 0 0 10px;
  font-size: 0.9em;
  opacity: 0.75;
  word-break: break-word;
}

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

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

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

.IN32fOu4ZnEnpI8WYb3V {
  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;
}
.CBl1pD7NG374Zg2RCxan {
  margin: 0 auto;
  overflow-y: auto;
  padding: var(--container-padding);

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

/* the same fluid sizing as the sign-in screen: a television browser is wide
   and short, and a logo sized off width alone eats the room the list needs */
.oroHwyGCNMKFU0dMdli0 {
  text-align: center;
  font-size: clamp(20px, 4vh, 30px);
  margin-top: clamp(0px, 1.5vh, var(--space-m));
  margin-bottom: clamp(var(--space-m), 4vh, var(--space-xl));
}

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

/* One control, whatever the room count.
 *
 * This was a column of cards, one per room. That reads well at two rooms and
 * badly at six: the cards pushed Enter off the bottom of a phone, so choosing
 * meant scrolling past every room to reach the way in — and on a television
 * browser, which is wide and short, sooner than that.
 *
 * The argument for cards was that "someone here" is why people pick one room
 * over another and a dropdown hides it. The state moved into the option text
 * instead, the way My Room already writes it, so the chosen room still says it
 * without opening anything and the rest say it the moment the list is open. */
.rbxnCkSjR59GlNePQe7S {
  width: 100%;
  margin-bottom: var(--space-l);
  font-size: var(--font-size-m);

  &:disabled {
    opacity: 0.6;
    cursor: default;
  }
}

/* A Button has no disabled styling of its own, and this one goes disabled the
   moment it is pressed — without this it looks pressable for as long as the
   round trip takes, which invites a second press. */
.RJbHrqmZMZaA44c5aFOA {
  margin-bottom: var(--space-m);

  &:disabled {
    opacity: 0.45;
    cursor: default;
  }
}

.NUXfcCnhlYV9dlvLDK0W {
  display: block;
  width: 100%;
  padding: var(--space-s);
  background: none;
  border: none;
  color: var(--color-gray-5);
  font-size: var(--font-size-s);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.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);
}
.e8tUvzW8BeWXosEGhwRV {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;

  svg {
    color: #fff;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 1));
  }
}

/* the camera input is opened programmatically by the button above, so it must
   not cover the container the way .fileInput deliberately does */
.lXSz19sLRMN0RyU_bi7W {
  display: none;
}

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

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

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

/* `hidden` is only a user-agent rule (`display: none`), and ANY author
   `display` on the same element outranks it. A panel that passes a
   `contentClassName` carrying its own layout therefore stays open no matter
   what the toggle says — which is exactly what happened to My Pitches, whose
   content class is a flex column: the chevron turned, aria-expanded flipped,
   and eighteen songs stayed on screen.

   Written as `.content[hidden]` on purpose. That is one class plus an
   attribute, so it beats the caller's single class whichever order the
   bundler happens to emit the two stylesheets in — a fix that depends on
   emit order is a fix that works until the next build. */
.OgJ5EnIwV5jp1GGDcabg[hidden] {
  display: none;
}

/* A collapsible panel's title is a button, and has to keep looking like a
   title: no chrome of its own, the whole row tappable, and a chevron that
   turns rather than a second word saying "show". */
.y2n7ZVg2jeNyuT0LrngX {
  flex: 1;
  min-width: 0;
}

.TvWVISdFMxS1sxc05SL7 {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;

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

.hZdU5ku3D_CsFtZ8hsPF {
  flex: none;
  transition: transform 150ms ease;
}

.WUYY8MZhwwhVekAlX5_d[data-expanded] .hZdU5ku3D_CsFtZ8hsPF {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .hZdU5ku3D_CsFtZ8hsPF {
    transition: none;
  }
}

.XIvZjD6Co9DyofyCj0Da {
  text-align: center;
}

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

/* the installed version: the one line on this panel someone is asked to
   read back, so it sits above the attribution rather than under it */
.FtnW3aFB6mW_QmvqF7ui {
  margin-top: var(--space-m);
  margin-bottom: 0;
}

.mJbeb_KsaSM6Oun9PKY4 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* a comfortable target on a phone without turning a line of text into a
     button; the negative margin keeps it from pushing the paragraph around */
  padding: 6px 4px;
  margin: -6px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: var(--font-size-s);
}

.uB6Wi5vbcXm74KN8TIsY {
  opacity: 0.7;
}

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

/* everything above this rule is this project; everything below it is credit
   for the work it is built on */
.uHo9tdHhv04fN86LErUQ {
  margin: var(--space-l) auto var(--space-m);
  border: none;
  border-top: 1px solid rgba(240, 246, 252, .1);
}

/* "What's new" and "Licences" sit on one line: two paragraphs of one link
   each read as two separate statements, which they are not. */
.bI9BIeo94fiHM1E6vlGm {
  display: flex;
  gap: var(--space-m);
  justify-content: center;
  margin-top: var(--space-m);
}

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

/*
 * One row: label, then the control. Stacked, it cost a whole line of height
 * on the sign-in screen — the screen with the least of it to give — for a
 * two-word label.
 */
.WuwIl2B_6gZTENAJDKzS {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
}

.o0RrzePK5igTR3MFDwMh {
  margin: 0;
  font-size: var(--font-size-s);
  white-space: nowrap;
}

.W35BUlGiHTSAj6_I9AiA {
  flex: 1 1 12ch;
  min-width: 0;
}

/* below both, whatever the row above wrapped to */
.rqeVZIpShhoRP26yp1ep {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--font-size-xs);
  opacity: 0.75;
}

.eWB988t3JuRQuM9e6O_N p {
  margin-top: var(--space-s);
}

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

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

/* `hidden` is only a user-agent rule (`display: none`), and ANY author
   `display` on the same element outranks it. An accordion whose caller passes
   a `contentClassName` carrying its own layout therefore stays open no matter
   what the button says — which is exactly what happened to the queue dialog's
   "Song settings", whose content class is a flex column: aria-expanded was
   false, the section had `hidden`, and every slider stayed on screen.

   Written as `.content[hidden]` on purpose. That is one class plus an
   attribute, so it beats the caller's single class whichever order the
   bundler happens to emit the two stylesheets in — a fix that depends on
   emit order is a fix that works until the next build. Same rule, same
   reasoning, as `Panel.css`. */
.pJrAoM1AYVYYF94s_MOG[hidden] {
  display: none;
}

/* Heading, icon and content padding mirror the three sibling rows in this
   group (see RepertoirePrefs.css and PlayerPrefs.css) so the four read as one
   list rather than as three of a kind plus one. */
.h6zf7GwaWepsrjRFQdBa  {
  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);
  }
}

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

.ETINY3f0vAH1qB0lPc8_ {
  margin: 0;
  color: var(--color-gray-6);
  font-size: var(--font-size-s);
}

/* min-width: 0 so a long label cannot push the row wider than the panel on a
   narrow screen; the slider below is what has to keep the width. */
.Vp_gTXMLqibMy5RCJQVV {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.T4nQeLaViZ8rLhHGiHxo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
}

.hhMLNCStZT9zVtLCpFkY {
  color: var(--color-gray-9);
}

/* tabular figures so the number does not jog sideways as a slider is dragged */
.JHlEKpFaxJiHNL4Y5oeP {
  color: var(--color-gray-7);
  font-size: var(--font-size-s);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.XdkGxLUHDWhKzU_oJ2HQ {
  align-self: flex-start;
  color: var(--color-gray-6);
  font-size: var(--font-size-s);
}

/* Heading and icon mirror the other accordion rows in /account (see
   RepertoirePrefs.css), so the four rows across Settings and My Preferences
   read as one list. */
.S5l7e9ZqhmJ2Q_OiuT8_  {
  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);
  }
}

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

.LaVMGgOeNuPavFYGan1c,
.JeDgX4XVu1xm6LEqPr8C {
  margin: 0;
  color: var(--color-gray-6);
  font-size: var(--font-size-s);
}

/* stacked rather than side-by-side: a phone cannot fit a title, a stepper, a
   button and a link on one line without truncating the title, which is the
   one part that has to stay readable */
.fiJproyR4VFs8daoP9_r {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid hsl(var(--hue-blue), 20%, 18%);
}

.fiJproyR4VFs8daoP9_r:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.RlamwPpSDU2lqIJfPC8u {
  min-width: 0; /* lets the ellipsis below actually kick in */
}

.GF34CW_pXZrPcMsWuKYJ {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-gray-9);
}

.JBKT4txf0yFluq4HB12K {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-gray-7);
  font-size: var(--font-size-s);
}

.v_y5xRNt8gSbUXp7MlLQ {
  color: var(--color-gray-6);
  font-size: var(--font-size-s);
  font-style: italic;
}

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

/* Surface, border and weight come from Button's `quiet` variant; these two
   only have to stay square and stay tappable. Deliberately no padding
   override: both are plain class selectors, so whichever stylesheet the
   bundler happens to emit last would win, and a stepper that is 44px on one
   build and not the next is not a size. */
.cm6DHFliZkBf4hCCeAEC {
  min-width: 44px;
  min-height: 44px;
}

.gUmFFLdb0Vd_jE4PTh9s {
  min-width: 2.5em;
  text-align: center;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.cplCTT1RIEhQEvThPce8 {
  margin-left: var(--space-xs);
}

.EmXcAQU887yQPS3aKhP9 {
  margin-left: auto;
  color: var(--color-gray-6);
  font-size: var(--font-size-s);
  cursor: pointer;
}

/* the same stacked rows the Settings group uses, so the two read alike */
.ViovmEo0keZ_DtVWaAPi {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.K1GFkz7cQWtcovxHmMXK,
.SwP7f0DoO3liLordWxlp {
  margin: 0;
  color: var(--color-gray-6);
  font-size: var(--font-size-s);
}

.BAfyhXxiUoQ4Xv0zrz_3 {
  align-self: flex-start;
}

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

.YOPK3f2srsXxPf2Wv3Kn {
  font-size: var(--font-size-s);
  color: var(--color-gray-6);
}

/* a file input on a phone is a tap target, so it gets room to be one */
.sAGhlRvdTiuRrHSOZLNx {
  padding: var(--space-xs) 0;
}

.IvUkYw0NvHgb8kvbQV0N {
  font-size: var(--font-size-s);
  color: var(--color-gray-6);
}

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

.pB61n2qSYlPtYftKCgrl {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-s);
  border-top: 1px solid hsl(var(--hue-blue), 20%, 18%);
}

.en3Ih9cofDfg6xeZckuX {
  margin: 0;
}

.bxFweAQu_agT2vvCSOWY ul {
  margin: var(--space-xs) 0;
  padding-left: 1.2em;
  font-size: var(--font-size-s);
}

.r0GW0g89ngInRyH0IaUQ {
  color: var(--color-gray-6);
}

.owRy5qSGCQHhN2TvvTOP {
  align-self: flex-start;
  font-size: var(--font-size-s);
}

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

.spQwcUASXV45EucGyeZv {
  width: 100%;
  margin-bottom: var(--space-s);
}

/* A Button carries no disabled styling of its own, so "Change room" would
   look pressable while it is pointing at the room they are already in. */
.C6K7f6lrm9GYrnHwzuwp:disabled {
  opacity: 0.45;
  cursor: default;
}

.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);
  display: flex;
  flex-direction: column;
}

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

.e4aSM6gboNRQP4wI0wBk {
  margin: 0;
  padding: 0 var(--container-padding) var(--container-padding);
  color: var(--color-gray-6);
  font-size: var(--font-size-s);
}

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

/* A native picker: a handful of presets is a list, and this page is as often
   on a phone as on a laptop. */
._TWxqCGGl24xsIqeyLRk {
  width: 100%;
  max-width: 22rem;
  padding: var(--space-s);
  font-size: var(--font-size-m);
  color: inherit;
  background-color: var(--btn-bg-color);
  border: 1px solid var(--btn-bg-color);
  border-radius: var(--border-radius);
}

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

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

.V7fNqWOidpPHAzWFDFys label {
  cursor: pointer;
}

.xx83mxLR2KSYAbIyuPbe {
  margin: 0;
  color: var(--color-gray-6);
  font-size: var(--font-size-s);
}

.ew2x2VQFG7Hj_ltiyxbF {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.W9T9llIEsdH_5oB8zQeJ {
  margin: 0 0 var(--space-m) 0;
  color: var(--color-gray-5);
}

.WfYNPX7FNEMRQZpzjbpo {
  font-family: var(--font-family-custom);
  font-size: var(--font-size-xl);
  letter-spacing: 0.15em;
  text-align: center;
  margin-bottom: var(--space-m);
}

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

  input[type="text"] {
    flex: 1;
    /* without this the field refuses to shrink below the length of the URL it
       holds, and a long invite link pushes the two buttons off a phone */
    min-width: 0;
  }
}

/* Square, because these two say what they do with an icon and nothing else.
 *
 * They used to be a word — "Copiar" — on a Button with no variant, which
 * paints nothing at all: transparent, borderless, the label the only thing on
 * screen. It read as a caption rather than a control and failed WCAG 1.4.11,
 * which asks 3:1 between a component and its background. `quiet` is the
 * variant that exists for exactly this (see Button.css): a border that carries
 * the boundary and a fill that only seats the icon.
 *
 * 44px is the tap target, not the icon: two 22px icons side by side on a phone
 * are two things nobody can hit apart. The box is `border-box` (modern-
 * normalize), so `quiet`'s own 8px padding and 1.5px border sit inside those
 * 44px and leave 25px for a 22px icon.
 *
 * Deliberately no padding of its own. `.quiet` and `.action` are both plain
 * class selectors on the same element, in two different CSS chunks, so a
 * padding written here would be decided by whichever stylesheet webpack
 * emitted last — the same trap My Pitches' steppers document, and the same
 * one that kept My Pitches from folding. Contest nothing and there is nothing
 * to lose.
 */
.hLlBvmUCkFjlaUMKSyNk {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
}

/* Holds its line whether or not it is saying anything, so confirming a copy
   does not shove the rest of the panel down a row. */
.SjfmLN9E3TOhufBLOw5_ {
  min-height: 1.4em;
  margin: var(--space-xs) 0 0 0;
  font-size: var(--font-size-s);
  color: var(--color-gray-6);
}

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

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

.HOcMzCIA0WXMfcLNpS_4 {
  margin: 0 1.25rem;
}

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

._zeQjaCY8RxRMtxT2JAF {
  display: none;
}

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

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

.PSHZ844GzN1yCxeslpBa {
  margin: 0;
  color: var(--color-gray-6);
  font-size: var(--font-size-s);
}

.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;
}
.pPcZLjZNfVI_UuCi9Lta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-bottom: var(--space-s);
  font-size: var(--font-size-s);
}

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

/* An empty result has to say so where the rows would have been, not leave a
   header floating over nothing. */
.zj9GgZlTMV4ErjhQbbx0 {
  margin: var(--space-m) 0 0 0;
  color: var(--color-gray-6);
  font-size: var(--font-size-s);
}

.Jgzs9_cLI1vYr_2vtrQi {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-gray-2);
}

.MK8kX6tifuVv6MTsdeHj {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-gray-5);
}

/* A long room list is the normal case for a venue, not the exception, and the
   modal it sits in is already the tallest thing on the account screen. */
.G4GPlu35A8cbp3dWLNKe {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-height: 30vh;
  overflow-y: auto;
}

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

  /* Buttons are full width by default (see Button.css); side by side they
     would each demand the whole row. */
  button {
    flex: 1 1 0;
    width: auto;
    padding: var(--space-s);
    font-weight: var(--font-weight-normal);
  }
}

.AocznOCPFWtOHRghql_R {
  width: 100%;
}

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

/* below the form rather than inside it: this applies immediately and on its
   own, and pressing Enter in the form must never trigger it */
.AU_LevkrnP2plt2QLDJy {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-s);
  padding-top: var(--space-s);
  border-top: 1px solid hsl(var(--hue-blue), 20%, 18%);
  font-size: var(--font-size-s);
}

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

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

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

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

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

/* folded away by default: most people joining have nothing to bring, and the
   join form is the last place to add a field everyone must read past */
.e1JU1HJdpg7EC_jFpUxg {
  margin-bottom: 12px;
  color: var(--color-gray-7);
}

.mNmLo1YzpegTKpBUdWAv {
  margin: 8px 0;
  font-size: var(--font-size-s);
  color: var(--color-gray-6);
}

.OMzwnjQPRyyPB71uCpNt {
  padding: 4px 0;
  width: 100%;
}

.kFe9ZxtATPNmRxUg3luX {
  margin: 8px 0 4px;
  font-size: var(--font-size-s);
  color: var(--color-gray-6);
}

.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 {
    /* the same reasoning as .logo below: on a short screen these headings
       were the second biggest consumer of the room the form needed */
    margin: clamp(var(--space-s), 2.5vh, 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 {
  text-align: center;

  /*
   * The big logo is a reward for having room, and room here is vertical.
   * Keyed on WIDTH alone, a desktop window dragged short — or a television
   * browser, which is wide and short by nature — got the largest logo and
   * doubled margins at exactly the moment the sign-in form had nowhere left
   * to appear, so reaching the password field meant scrolling a page that
   * barely scrolled.
   *
   * Below that, it is sized fluidly rather than at another breakpoint: a TV
   * browser reports whatever viewport it likes, and there is no useful
   * "phone or desktop" to guess at.
   */
  font-size: clamp(20px, 4vh, 30px);
  margin-top: clamp(0px, 1.5vh, var(--space-m));
  margin-bottom: clamp(var(--space-m), 4vh, var(--space-xl));

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

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

.n79F86zyfhS4K8CY6Wi_ {
  color: var(--btn-danger-bg-color);
  text-align: center;
}

.THtvzvAWdkpsdvNDTM3m {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  margin-top: var(--space-m);

  flex-wrap: wrap;

  input[type="text"] {
    flex: 1 1 12ch;
    min-width: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  /* Buttons are 100% wide by default (see Button.css), which in a flex row
     makes them fight the input for the space. "Use invite" happened to fit;
     "Usar la invitación" did not, and overflowed across the field next to
     it. Sized to its own words instead, whatever those turn out to be. */
  button {
    flex: 0 0 auto;
    width: auto;
    padding-inline: var(--space-m);
    white-space: nowrap;
  }

  /* On a phone the button's own label leaves the field too narrow to read
     its placeholder, so it takes the next row instead. */
  @media (max-width: 30em) {
    button {
      flex: 1 0 100%;
    }
  }
}

/* an invite's room, stated rather than offered */
.Hdk42cUAhagaHqozSQZC {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-m);
}

.IVX3fSvI8wrJF_b1LAav {
  font-size: var(--font-size-xs);
  color: var(--color-gray-5);
}

.YzdyKfdUeMJVhMKqHk3w {
  font-size: var(--font-size-m);
  color: var(--color-gray-8);
  overflow-wrap: anywhere;
}

.F3qfFiiBpXTQTOzVdNEk {
  width: 100%;
}

.CRBWhsVoAZqZKx3A677W {
  margin-top: var(--space-m);
  font-size: var(--font-size-s);
  color: var(--color-gray-5);
}

.nvT5jsZd1QJlk1okmNMy {
  margin-bottom: var(--space-s);
}

/* the installed version, directly under the wordmark */
.OzRSzwqj7SsHNVP8WQw9 {
  margin: 0 0 var(--space-m);
  text-align: center;
}

.eE3_XnN576ySXkUMusSe {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* a reachable target on a phone without turning a caption into a button;
     the negative margin keeps it from pushing the layout around */
  padding: 6px 8px;
  margin: -6px 0;
  color: var(--color-gray-5);
  font-size: var(--font-size-xs);
  font-weight: normal;
  /* underlined, not coloured: at this size, on this background, hue is not a
     cue every reader gets */
  text-decoration: underline;
  text-underline-offset: 2px;
}

.FSKuzLK8UxMYlDbEerSU {
  opacity: 0.7;
}

.ueiHjtX_S3hM5KgsTRUE {
  margin: var(--space-l) 0 0;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-gray-5);

  a {
    color: inherit;
    font-weight: normal;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

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

.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;
  }
}
.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;
}
.Hk5Oiz4LTn0TQU1HJ_4r {
  --song-item-btn-size: 48px;

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

.hxXzgFhspryRgl6_AkmQ {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  color: var(--color-gray-5);
  font-size: 14px;
  text-align: right;
  width: 40px;
}

/* matches the pitch badge on queued items, so the same number reads as the
   same thing in the library and in the queue */
.TKwZfINashQIdsYa2MAV {
  padding: 0 0.35em;
  border-radius: var(--border-radius);
  font-size: 12px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  color: var(--color-gray-9);
  background-color: hsl(var(--hue-blue), 60%, 25%);
}

.JV2EAm3KwxzpGPdzPqda {
  color: var(--color-gray-6);
  background-color: hsl(var(--hue-blue), 20%, 18%);
}

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

/* 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);
}
.TxZhLEEKbT2fBh0OS9__ {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.xCKZXeOjxiXA2VEkXpQD {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-s);
}

.lie_cP4CPL7EeuMCLDeL {
  color: var(--color-gray-6);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

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

/* global.css styles the text inputs by attribute selector, which a textarea
   never matches; these are the same rules so the two look like one family */
.iX1GeimAQiCBtDh_F0D0 {
  display: block;
  width: 100%;
  padding: 8px;
  font-family: inherit;
  font-size: 18px;
  resize: vertical;
  box-shadow: inset 1px 1px 3px 0 rgb(50 50 50 / 75%);
  border: none;
  border-radius: var(--border-radius);
  color: var(--input-color);
  background-color: var(--input-bg-color);

  &::placeholder {
    color: var(--input-placeholder-color);
  }

  &:focus {
    box-shadow: inset 0 0 5px 3px var(--input-outline-color);
    outline: none;
  }
}

.tWOFhUANCgvtfhqGa5OT {
  margin: 0;
  color: var(--color-gray-6);
  font-size: var(--font-size-s);
}

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

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

.reDtdr59F6wEhMfhv1j6 {
  margin: 0;
  font-size: var(--font-size-m);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.hA528iSQWopD6Xs5HCs2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.ST1fbSV9oEPJ8b5YcWeo {
  font-size: var(--font-size-l);
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.GKJO0U6wC2iuBlt__QX1 {
  margin: 0 1.25rem;
}

.GuGRU3YGJxBkZCmoKX3A {
  margin: 0;
  color: var(--color-gray-6);
  font-size: var(--font-size-s);
  text-align: center;
}

/* A link rather than a second checkbox: forgetting is a one-way action taken
   now, not a state to leave sitting next to "remember". Muted, because the
   common path through this dialog does not involve it. */
.q_T7HLqKd2BlDSTbglpn {
  align-self: flex-start;
  color: var(--color-gray-6);
  font-size: var(--font-size-s);
  cursor: pointer;
}

/* The disclosure holding everything technical. Same treatment the account
   settings give theirs, so the two read as one convention. */
.GEC4tdEMPjdkNImSwqhx {
  align-self: stretch;
}

.Ii_5C6_p_H_ZrTWPJkrM {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  padding: var(--space-s) 0 var(--space-s) var(--space-m);
}

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

/* One quiet word, not a recital of four percentages — the whole point of the
   section being closed is that the dialog is short. */
.C9MtmNqRO40HU_Qu6qkJ {
  font-size: var(--font-size-s);
  color: var(--color-gray-6);
}

.tkK9w8fRMypVoMen4Hgg {
  margin: 0 0 var(--space-m);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.WXVBNyEyfe4wez0YWa8r {
  color: var(--btn-danger-bg-color);
  text-align: center;
}

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

.KjEwPxru_2NNFaZ9GLYw {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-radius: var(--border-radius);
  background-color: hsl(var(--hue-blue), 40%, 8%);

  &:hover {
    background-color: hsl(var(--hue-blue), 40%, 14%);
  }
}

.Qe4fQqIBtbdOB9YkljEt {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  width: 100%;
  padding: var(--space-s);
  border: none;
  border-radius: var(--border-radius);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.WjHAmBQGvF_WcECU3fFt {
  background-color: hsl(var(--hue-blue), 50%, 20%);
}

.Bw1UICpKVUQmqvgUwp0u {
  margin-right: var(--space-s);
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--color-gray-6);
  border-radius: var(--border-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.zVTdoyGK75sa6sNuEn5U {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: 0 var(--space-s) var(--space-s);
  color: var(--color-gray-6);
  font-size: var(--font-size-xs);

  & video {
    width: 100%;
    max-height: 45vh;
    background: #000;
  }

  & audio {
    width: 100%;
  }
}

.NMvBQM9z6xl1ByoPsv3g {
  font-size: var(--font-size-m);
  flex-shrink: 0;
}

.KgVfPJ9793UGYn7l9fCQ {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

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

.Q8CxiPhXodIDlPt3zkGh {
  padding: 0 0.4em;
  border-radius: var(--border-radius);
  background-color: hsl(var(--hue-blue), 60%, 30%);
  font-size: var(--font-size-xs);
}

.RHH6JMzHulWkLq9s4foD {
  font-size: var(--font-size-xs);
  color: var(--color-gray-6);
}

.ZQ1vJSuEzaXfK5U2mVy3 {
  --artist-item-height: 48px;

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

.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);
}
.l_cLCw9eRNCSyRKgXWS5 {
  display: flex;
  height: 100%;
  text-align: center;
  align-items: center;
}

.Fog7IKmx1oVfPd8FU407 {
  flex: 1;
}

.DAQNxdQ31hZwPsGbtl1A {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  border-radius: var(--border-radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vI5Pox33xtzTEd2Ym0vm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.DDaxfOsOvl_ElVrgZYIm {
  color: var(--btn-danger-bg-color);
  text-align: center;
  padding: 0 var(--space-m);
}

.PNs0fUHViSBl9vYgBK5h {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-m);
  text-align: center;
  color: var(--color-gray-7);
}

/* the point of the whole panel: the song is still gettable. Small, because it
   reassures rather than instructs. */
.liTnJoOmkDDZBk1cvwUE {
  margin: calc(var(--space-m) * -1) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-gray-6);
}

.HHhb66gTxo8N0NDJLgVI {
  display: inline-block;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--border-radius);
  background-color: hsl(var(--hue-blue), 60%, 25%);
  color: var(--color-gray-9);
  text-decoration: none;
  font-weight: bold;
}

.TICTXQJtljwMCdN70_xj {
  padding: var(--space-s) var(--space-m);
  border-radius: var(--border-radius);
  border: none;
  background-color: var(--color-gray-4);
  color: var(--color-gray-9);
  font-weight: bold;
  cursor: pointer;
}

._ztQNy2DAFlQlciD8VLi {
  display: flex;
  flex-direction: column;
}

.I_twpWci9WYG3hw638Xg {
  margin-bottom: var(--space-m);
}

.QiaVmqJkXQWdrlhG77Ya {
  font-size: var(--font-size-m);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vMvW6zMtibMeyLbdtQpn {
  font-size: var(--font-size-s);
  color: var(--color-gray-6);
}

.BY6yu6WOlk0NOdhvAoIx {
  margin: var(--space-m) 0 var(--space-s);
  font-size: var(--font-size-s);
  font-weight: normal;
  color: var(--color-gray-6);

  &:first-of-type {
    margin-top: 0;
  }
}

.Pb0BNcl50eYpWpEi67Te {
  margin: 0 0 var(--space-s);
  font-size: var(--font-size-xs);
  color: var(--color-gray-6);
}

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

.bSZ0Ky8uaRxWLaZVeN6k {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  width: 100%;
  padding: var(--space-s);
  background-color: hsl(var(--hue-blue), 40%, 8%);
  border: none;
  border-radius: var(--border-radius);
  color: inherit;
  text-align: left;
  cursor: pointer;

  &:hover {
    background-color: hsl(var(--hue-blue), 40%, 14%);
  }
}

.ixpLKdbWQul_LzM2Ky1Q {
  width: 56px;
  height: 32px;
  object-fit: cover;
  border-radius: var(--border-radius);
  flex-shrink: 0;
}

.yiVVIUis8EiUkZ8PR0pA {
  flex: 1;
  min-width: 0;
}

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

.Zx64Rc_aPqBb6rdjbabu {
  font-size: var(--font-size-xs);
  color: var(--color-gray-6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Bf1MsZqcJWr7Py6ja24v {
  font-size: var(--font-size-s);
  color: var(--color-gray-6);
  flex-shrink: 0;
}

.EPafoevrGaUIbBlbVbGH {
  flex-shrink: 0;
  color: var(--color-gray-6);
}

.L9hBvd8E3HdHnvPLG1zq {
  text-align: center;
  color: var(--color-gray-6);
}

.owFxhMeWrU9Mn5uay8Z0 {
  margin: 12px 0 4px;
  padding: 12px;
  border-radius: 6px;
  background: var(--bg-raised, rgba(255, 255, 255, 0.06));
}

.bFFrER5AGSu3DSdQKHmZ {
  width: 100%;
}

.kSyUhanAGOtiYfWa_eq6 {
  font-weight: 600;
  margin-bottom: 4px;
}

/* the song being fetched right now: the one thing that proves it is moving */
.EsT0sSbD1aLrL0f6MZmV {
  font-size: 0.9em;
  opacity: 0.75;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pF7xE8COsIpADQ4Xf_h0 {
  color: var(--red, #e5534b);
  margin: 8px 0;
}

._lIDnOHSBn3E9dx6KTim {
  width: 90vw;
  max-width: 560px;
  /* dvh where it exists: on a phone `vh` is measured against the tallest the
     viewport ever gets (URL bar hidden), so a `vh`-sized dialog can extend
     past the bottom of what is actually on screen and take the results list
     with it. Plain `vh` stays as the fallback. */
  max-height: 80vh;
  max-height: 80dvh;
}

.stADr4bYgoULllPd506R {
  margin: 0 0 var(--space-m);
  font-size: var(--font-size-m);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ireOk4ty48NbUchKlytp {
  display: flex;
  gap: var(--space-s);
  margin-bottom: var(--space-m);

  button {
    flex: 1;
  }
}

.lBEDrCETRY8fIkg2LYL_ {
  display: flex;
  gap: var(--space-s);
  margin-bottom: var(--space-m);

  /* not stretched and not squeezed: Button is 100% wide by default, which in
     a row makes it fight the field beside it and spill its label across it as
     soon as a translation is longer than the English was */
  button {
    flex: 0 0 auto;
    width: auto;
    padding-inline: var(--space-m);
    white-space: nowrap;
  }
}

.Nevyio4MUYt8zvfzuwqN {
  flex: 1;
}

.wcfUoYVgLjVygl2i91Y8 {
  margin: 0 0 var(--space-m);
  font-size: var(--font-size-xs);
  color: var(--color-gray-6);
}

.N2NM17bLoCFoUI1t2ARr {
  margin-bottom: var(--space-m);
}

.qIn9bP3YqYuhOiWp8JyD {
  margin-bottom: var(--space-m);
  padding: var(--space-s);
  border-radius: var(--border-radius);
  background-color: hsl(var(--hue-blue), 40%, 12%);
  font-size: var(--font-size-s);
}

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

/* the message and the way out of it, stacked: a failed search leaves nothing
   else on screen to act on, so the retry has to be part of the error itself */
._GKWCRM8NCXgd5DPIN0v {
  margin: 0 0 var(--space-s);
}

.YFGOpfoNB_ny_UJeXe1J {
  width: auto;
  padding-inline: var(--space-m);
}

.vNUGbQRk5BVpZ4Dsv7l4 {
  text-align: center;
  color: var(--color-gray-6);
}

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

.KUL_2q5EgA2hs2CMT72Z {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  width: 100%;
  padding: var(--space-s);
  background-color: hsl(var(--hue-blue), 40%, 8%);
  border: none;
  border-radius: var(--border-radius);
  color: inherit;
  text-align: left;
  cursor: pointer;

  &:hover:not(:disabled) {
    background-color: hsl(var(--hue-blue), 40%, 14%);
  }

  &:disabled {
    opacity: 0.5;
    cursor: default;
  }
}

.ZGq1Htd7hdcli4ytQC0f {
  width: 88px;
  height: 50px;
  object-fit: cover;
  border-radius: var(--border-radius);
  flex-shrink: 0;
}

.O14kkiu1_JVO_Ct_AVnU {
  flex: 1;
  min-width: 0;
}

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

.n388lc641ulU78EVN_UU {
  font-size: var(--font-size-xs);
  color: var(--color-gray-6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.C5TCk5f78aBy0Hn_mScd {
  margin-left: 0.25em;
  color: hsl(var(--hue-blue), 70%, 65%);
  font-weight: bold;
}

.YUszf_iQsTkyQrC6zStw {
  font-size: var(--font-size-xs);
  color: var(--color-gray-7);
  white-space: nowrap;
}

.f_lM8koq76aMzsv4xEFG {
  display: block;
  margin-bottom: var(--space-m);
  font-size: var(--font-size-s);
}

.PB6Lx_7mpDhTsaqdkJMu {
  font-size: var(--font-size-s);
  color: var(--color-gray-6);
  flex-shrink: 0;
}

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

.FnPkng5qIwCaoz6ppk4Q {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  font-size: var(--font-size-xs);
  color: var(--color-gray-6);
}

.XnKHVCAYEULHRqfNuMy5 {
  width: 100%;
  font-size: var(--font-size-s);
}

.LkTDuAsFbAciMgNxLeVL {
  align-self: flex-start;
  padding: var(--space-xs) var(--space-s);
  border: none;
  border-radius: var(--border-radius);
  background-color: hsl(var(--hue-blue), 40%, 18%);
  color: var(--color-gray-8);
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.FM0NON48tUGevc0Mocok,
.CEmdQRH561N9ZZS2sElY {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  background-color: hsl(var(--hue-blue), 90%, 25%);
  font-size: 18px;
}

.NkoR59_U7B74V8WTUWTX {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
}
.yM8TiNVCALmCTSzZMAEg {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: var(--space-s);
  padding: var(--space-s);
  pointer-events: none;
}

.t8qTxcfStwQ5GiPsE0Ys {
  pointer-events: auto;
  box-shadow: 0 2px 12px rgb(0 0 0 / 50%);
}

/* An empty section still reports its result, but reads as a quiet footnote
   rather than another row of the list. */
.QY1nhMcbW4CyWsBKJmMm {
  display: flex;
  align-items: center;
  padding-left: var(--space-s);
  font-size: var(--font-size-xs);
  font-style: italic;
  color: var(--color-gray-6);
}

.bhZWQ2xPWPTNIX6C4F3a h1 {
  font-family: var(--font-family-custom);
}

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

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

.UAMZ1Oc4D2MYq21Gy81H {
  margin: 0;
  font-size: var(--font-size-m);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dybgG8YE8sxkTh3wtCi_ {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);

  /* the remove button stays on the right even when it is the only one there */
  &:has(> :only-child) {
    justify-content: flex-end;
  }
}

.q3cFMtHyBh9DNhuyyuaG {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding-top: var(--space-m);
  border-top: 1px solid var(--chrome-border-color);
}

.Q5y_qaMRiCJsuyxIMV2z {
  margin: 0;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-6);
}

.CX5D8lNx7T00oyYEOuKY {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s);
  border-radius: var(--border-radius);
  background-color: var(--panel-bg-color);
}

.M1IhjDK3ko30CI5V8udj {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

.MSU4ZUU8KQ1nAYOuZQsI {
  color: var(--color-gray-6);
  font-size: var(--font-size-xs);
}

.hd6sUtOY74lvYLiXEzFQ {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.sntk01sYscSL2vQ6ytJJ {
  margin: 0;
  color: var(--color-gray-6);
  font-size: var(--font-size-s);
}

.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%;
  }
}
.EsqtsWYqU2Co3NFTdZQU {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  z-index: 3;
  cursor: ew-resize;
  touch-action: none; /* the drag is ours, not the browser's scroll */
}

.AS1p8bKGzkArbuiIEMoz {
  position: absolute;
  bottom: 2px;
  width: 3px;
  height: 12px;
  margin-left: -1.5px;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 0 4px rgb(0 0 0 / 70%);
}

/*
 * The clock, always on.
 *
 * Pinned to the right end of the bar rather than following the handle: it is a
 * readout, not a tooltip, and a number that slides around under a moving
 * finger is harder to read than one that stays put. Tabular figures so it does
 * not twitch as the seconds turn.
 */
.Vd6Zu0IcELC7HVejiL4c {
  position: absolute;
  right: 0.5em;
  bottom: 2px;
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: rgb(255 255 255 / 78%);
  text-shadow: 0 1px 2px rgb(0 0 0 / 85%);
  white-space: nowrap;
  pointer-events: none;
}

/* While a finger is down it is answering the gesture, so it is the brighter
   of the two states and the total steps back. */
.Mi3nSXOWqyVNutWCEXYE {
  color: #fff;
}

.Sx8sYFSeO5fmMv4u9c6p {
  opacity: 0.6;
}

/*
 * The handle's own timestamp.
 *
 * Small, and above the bar rather than on it, so it says where the handle is
 * without covering the thing it is pointing at. It rides the handle, which is
 * the one place a following label is right: it is that handle's position, not
 * the song's overall progress — that is what the readout at the end is for.
 */
.rNvjWtR_EpM09BUuigM4 {
  position: absolute;
  bottom: 15px;
  padding: 0.05em 0.35em;
  border-radius: var(--border-radius);
  background-color: rgb(0 0 0 / 75%);
  color: rgb(255 255 255 / 88%);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}

/* While a finger is down it is the thing being read, so it comes forward. */
.rNvjWtR_EpM09BUuigM4.Mi3nSXOWqyVNutWCEXYE {
  background-color: rgb(0 0 0 / 90%);
  color: #fff;
}

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

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

  /* The row is a fixed 6.5rem and this column can now hold four lines — title,
     artist, dedication, pitch status. Clipping here keeps the extra one inside
     the block instead of pushing the singer's name out of the row. */
  min-height: 0;
  overflow: hidden;
}

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

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

.Z5Tk7VGmwmt7PzqgwmzA {
  display: inline-block;
  margin-left: var(--space-xs);
  padding: 0 0.4em;
  border-radius: var(--border-radius);
  font-size: var(--font-size-s);
  font-weight: bold;
  color: var(--color-gray-9);
  background-color: hsl(var(--hue-blue), 60%, 25%);
  vertical-align: middle;
}

.bWsVp3wmzPGp1wspUUhV {
  font-size: var(--font-size-s);
  color: var(--color-gray-6);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.RUur8h3IYSBzQ8mdueUF {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  font-size: var(--font-size-s);
  color: var(--queued-item-color);
}

.UtLuIrLJNd5sxICr2mrX {
  font-style: italic;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  /* quoted here rather than in the message catalogue: which marks a language
     uses around quoted speech is a property of the language, and the browser
     already knows them */
  &::before {
    content: open-quote;
  }

  &::after {
    content: close-quote;
  }
}

.pMWCDUI4pvn4LPprYyNw {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--color-gray-6);
  font-variant-numeric: tabular-nums;
}

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

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

.WeOknv5KWZ5DbJUT1y3m {
  position: fixed;
  right: var(--space-s);
  z-index: 2;
}

.qeY9skypFYNrS23UB215 {
  padding: var(--space-xs) var(--space-s);
  font-size: var(--font-size-xs);
  background-color: hsl(var(--hue-blue), 40%, 18%);
  color: var(--btn-danger-bg-color);
  box-shadow: 0 2px 8px rgb(0 0 0 / 50%);
}

.kg98gJODrDy0mQMUrvFH {
  padding: var(--space-s);
  padding-top: calc(var(--space-s) + 56px);
  padding-bottom: calc(var(--space-s) + 56px);
  height: 100%;
  overflow-y: auto;
}

.DNIhitbADfzeitbzHG5d {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
}

/* Sized to their content, never stretched: a full-width button scales its icon
   with it, which is what blew the camera glyph up to fill a desktop screen. */
.DNIhitbADfzeitbzHG5d button {
  flex: 0 0 auto;
  min-height: 44px; /* comfortable tap target on a phone */
}

.C_v9Sknvk9_c5W09FEKE {
  margin-left: auto;
  font-size: var(--font-size-s);
  color: var(--color-gray-6);
}

/* on a narrow screen the two actions share the row evenly */
@media (max-width: 480px) {
  .DNIhitbADfzeitbzHG5d button { flex: 1 1 0; }
  .C_v9Sknvk9_c5W09FEKE { display: none; }
}

.Ec1hJZd8AT7lAE_aVivf { display: none; }

.uKO5PlFn3BpLu62Wkvw2 {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-s);
  font-size: var(--font-size-s);
}

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

/* square tiles that reflow from 3 across on a phone to more on a TV */
.Fu6FxVZXh7NJRMXEiu65 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--space-xs);
}

.gvXEsTptOkiH5H4ZsHOJ {
  padding: 0;
  border: none;
  border-radius: var(--border-radius);
  overflow: hidden;
  aspect-ratio: 1;
  background-color: hsl(var(--hue-blue), 40%, 10%);
  cursor: pointer;
}

.gvXEsTptOkiH5H4ZsHOJ img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kcaRMdAPHN6YPjHE289X {
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: rgb(0 0 0 / 92%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kcaRMdAPHN6YPjHE289X img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.X2Fes4cjfe2JRdIq6F8H {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-s) var(--space-m);
  background: linear-gradient(to top, rgb(0 0 0 / 80%), transparent);
}

.CE7AIn6nZAphpR9JLNqo {
  flex: 1;
  color: var(--color-gray-8);
  font-size: var(--font-size-s);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Y_xfe5litcC2Zo9d1mtg {
  border: none;
  background: none;
  color: #fff;
  cursor: pointer;
  padding: var(--space-xs);
  display: flex;
}