karaoke-eternal 1.0.0 → 2.0.0-beta.5

package/build/client/main.a51d7d3f87c474adad54.css

@@ -0,0 +1,2341 @@
+/*! 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: hsl(var(--hue-blue), 10%, 80%);
+  --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 hsl(var(--hue-blue), 80%, 50%));
+
+  --btn-danger-bg-color: hsl(var(--hue-pink), 60%, 57%);
+  --btn-danger-filter: drop-shadow(0 0 10px hsla(var(--hue-pink), 100%, 100%, .5));
+  --btn-danger-activate-filter:
+    drop-shadow(-5px 0 10px hsl(var(--hue-pink), 80%, 70%)) drop-shadow(5px 0 10px hsl(var(--hue-pink), 80%, 70%)) drop-shadow(0 0 10px hsl(var(--hue-pink), 80%, 70%));
+
+  /* UI chrome (header/footer) */
+  --chrome-bg-color: hsla(var(--hue-blue), 100%, 5%, .8);
+  --chrome-border-color: hsla(var(--hue-blue), 24%, 26%, 0.5);
+  --header-notice-color: var(--text-color);
+  --header-notice-bg-color: hsl(var(--hue-blue), 100%, 27%);
+
+  /* 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 ease-out;
+  --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 5s var(--activate-1);
+  --activate-1: linear(0, 0.027 1%, 0.206 4.8%, 0.331 7.9%, 0.437 11%, 0.532 14.3%, 0.623 18.2%, 0.7 22.3%, 0.766 26.8%, 0.821 31.6%, 0.865 36.7%, 0.902 42.4%, 0.954 56%, 0.983 73.7%, 1);
+}
+
+@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: none;
+  }
+}
+@font-face {
+  font-family: 'Beon';
+  font-style: normal;
+  font-weight: normal;
+  src: url(a35814dd9eb496e3d7cc.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 200;
+  src: url(e419b95dccb58b362811.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 700;
+  src: url(7ce9eb3fe454f54745a4.woff2) format('woff2');
+}
+
+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);
+}
+.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%);
+}
+.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 {
+  flex: 1;
+  margin: 0;
+  margin-left: -4px;
+  border: none !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 svg {
+  height: 2.75rem;
+}
+.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%);
+  
+  &[open] {
+    animation: JUb3t4IxoCde77QnaDuQ 0.15s forwards;
+    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
+  }
+}
+
+.pfOAkdcjAgxEaiTckdFA {
+  display: flex;
+  font-family: var(--font-family-custom);
+  margin: 0 0 var(--space-s) 0;
+
+  h1 {
+    flex: 1;
+    margin: 0;
+    font-size: var(--font-size-xl);
+    line-height: 1em;
+  }
+
+}
+
+.aIGh3kF56tYlTfTCzGuC {
+  position: relative;
+  top: calc(var(--space-s) * -1);
+  right: calc(var(--space-s) * -1);
+  align-self: flex-start;
+  color: var(--btn-active-bg-color);
+  padding: var(--space-s);
+  line-height: 1em;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  svg {
+    height: var(--icon-size-l);
+    line-height: 1em;
+  }
+}
+
+.M1nSLELWzWtg0nMNVAPp {
+  flex: 1;
+
+  &.G89xv3BCUffZqoya0LQl {
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+.nsGMxmc6ZA0V4Fwl17Bf {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--space-s);
+  column-gap: var(--space-m);
+  margin-top: var(--container-padding);
+}
+
+
+@keyframes JUb3t4IxoCde77QnaDuQ {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.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);
+    }
+  }
+}
+
+.CHH6ukgfI31pNfRWfp2z {
+  width: 90vw;
+  max-width: 480px;
+}
+
+.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;
+}
+
+.zIEucMK4dBypf03pERBF {
+  text-align: center;
+  margin: var(--space-m) 0;
+  color: grey;
+}
+
+.MhuyzAaoykU7XrttP0lt {
+  margin: 0 1.25rem;
+}
+.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 {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  width: 100%;
+  background-image: linear-gradient(to right, var(--active-item-from-bg-color), var(--active-item-from-bg-color));
+  background-repeat: no-repeat;
+}
+
+.WxqoYmzzeIRmqDepbVLR {
+  flex: 1;
+  font-size: 16px;
+  text-align: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  color: var(--text-color);
+}
+
+.L3KVVs498s_TTzMFHKn5 {
+  cursor: pointer;
+}
+
+.iL_22Dl4fbuLsQo42o2o {
+  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 5s 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));
+  }
+}
+.AOWDkEJZ7Uh6TMmJSmDN {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.Gi_1FjbpZU1FcRC85lBE {
+  flex: 1;
+  margin: .5rem 0;
+  overflow: scroll;
+}
+
+.k8N_J395xr2bblBgwvim {
+  margin-bottom: 1em;
+  overflow-wrap: break-word;
+}
+
+.TSJBvSrnl7BotohIdqrj {
+  font-weight: bold;
+  color: #777;
+}
+
+.MhLrBfYw2bVvon36GHQg {
+  font-family: Beon;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.MRwxEsiCu74aMC4fJ2yn {
+  border: none;
+  color: hsl(var(--hue-blue), 10%, 80%);
+  display: inline-block;
+  font-size: 200%;
+  font-weight: normal;
+  text-transform: uppercase;
+  margin: 0;
+  text-shadow:
+    0 0 .1em hsl(var(--hue-pink), 100%, 100%),
+    0 0 .5em hsl(var(--hue-pink), 100%, 100%),
+    0 0 .25em hsl(var(--hue-pink), 100%, 50%),
+    0 0 .5em hsl(var(--hue-pink), 100%, 50%),
+    0 0 .75em hsl(var(--hue-pink), 100%, 50%),
+    0 0 1em hsl(var(--hue-pink), 100%, 50%),
+    0 0 1.5em hsl(var(--hue-pink), 100%, 50%),
+    0 0 3em hsl(var(--hue-pink), 100%, 50%),
+    0 0 6em hsl(var(--hue-pink), 100%, 50%),
+    0 0 9em hsl(var(--hue-pink), 100%, 50%);
+}
+
+.XrgY7jUteM7yAiFgHV3G {
+  font-size: 40%;
+  text-transform: uppercase;
+  display: block;
+  letter-spacing: .9em;
+  border: .1em solid hsl(var(--hue-blue), 100%, 90%);
+  border-radius: .25em;
+  padding: .25em;
+  text-shadow:
+    0 0 .1em hsl(var(--hue-blue), 100%, 90%),
+    0 0 .25em hsl(var(--hue-blue), 100%, 90%),
+    0 0 .25em hsl(var(--hue-blue), 100%, 50%),
+    0 0 .5em hsl(var(--hue-blue), 100%, 50%);
+  box-shadow:
+    0 0 .1em hsl(var(--hue-blue), 100%, 90%),
+    0 0 .25em hsl(var(--hue-blue), 100%, 90%),
+    0 0 .5em hsl(var(--hue-blue), 100%, 50%),
+    0 0 .75em hsl(var(--hue-blue), 100%, 50%),
+    inset 0 0 .5em hsl(var(--hue-blue), 100%, 50%),
+    inset 0 0 .75em hsl(var(--hue-blue), 100%, 50%);
+}
+
+.opBGPXUVYOwhN4fsI5_5 {
+  letter-spacing: normal;
+}
+
+.kMVEh9LeEn4g4mp_4CQN {
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  min-width: 96px;
+  height: 72px;
+  border-radius: var(--border-radius);
+  align-items: center;
+  cursor: pointer;
+  background-color: var(--btn-bg-color);
+
+  svg {
+    margin: 0 auto;
+    color: #000;
+  }
+
+  &:has(:focus-visible) {
+    outline: var(--focus-outline);
+  }
+}
+
+.YA6i4Cl4kAWWDVU3e1xA {
+  cursor: inherit;
+  display: block;
+  font-size: 999px;
+  filter: alpha(opacity=0);
+  min-height: 100%;
+  min-width: 100%;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  text-align: right;
+  top: 0;
+}
+
+.s4sM5iEgPiWiNqVuWXXy {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 99;
+
+  svg {
+    color: hsl(var(--hue-pink), 100%, 70%);
+    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 1));
+  }
+}
+
+.urwdlhf5zLiQCnkW1lW9 {
+  color: var(--btn-bg-color);
+}
+.UJP7G5dKPXhMYPVm9lGC {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-s);
+}
+
+.MRv8af4NPh12SLYbjwuA {
+  display: flex;
+  gap: var(--space-s);
+}
+
+.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%);
+  }
+}
+
+.LBGExauA2_9eEf6X1NAw {
+  margin-bottom: var(--space-xl);
+  text-align: center;
+  font-size: 30px;
+
+  @media (min-width: 42em) {
+    margin: var(--space-xl) 0;
+    font-size: 36px;
+  }
+}
+.WUYY8MZhwwhVekAlX5_d {
+  background-color: var(--panel-bg-color);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.eP0BAX5ayTg1WGhcfd7y {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-s) var(--container-padding);
+  color: hsl(var(--hue-blue), 10%, 80%);
+  background-color: hsl(var(--hue-blue), 20%, 20%);
+  background-image: linear-gradient(135deg, hsl(209,20%,20%) 0%, hsl(209,20%,10%) 100%);
+
+  h1 {
+    margin: 0;
+    font-size: var(--font-size-l);
+    font-weight: var(--font-weight-bold);
+  }
+}
+
+.OgJ5EnIwV5jp1GGDcabg {
+  padding: var(--container-padding);
+}
+
+.XIvZjD6Co9DyofyCj0Da {
+  text-align: center;
+}
+
+.oPMyaF6eFojk2b8ZQKwH {
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.mFno0FFze3kHGDdbZDBB {
+  color: #aaa;
+  font-size: 75%;
+  margin-top: 1em;
+}
+
+.NjmtwxMJxR179Hk2Pomb {
+  text-decoration: underline;
+}
+
+.okfIUIOCzr40SucFJR9B {
+  text-align: left;
+  width: 90%;
+  height: 90%;
+}
+
+.J1Y6pDd6XtAUjqhW2qIF {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+}
+
+.ZKYWLeUdrki571OMgwqw {
+  display: inline-block;
+  white-space: nowrap;
+  border: 1px solid;
+  border-color: rgba(240, 246, 252, .1);
+  background-image: linear-gradient(180deg, #21262d, #1a1e23 90%);
+  border-radius: 0.25em;
+}
+
+.ZKYWLeUdrki571OMgwqw:hover {
+  border-color: #8b949e;
+  background-image: linear-gradient(180deg, #30363d, #292e33 90%);
+}
+
+.ZKYWLeUdrki571OMgwqw a {
+  display: inline-flex;
+  color: #c9d1d9;
+  padding: 8px 10px;
+  font-size: 12px;
+  line-height: 16px;
+  text-decoration: none;
+}
+
+.ZKYWLeUdrki571OMgwqw svg {
+  margin-right: 5px;
+}
+
+.ZKYWLeUdrki571OMgwqw.z6j4SZzTbavwii_DBoa2 svg {
+  color: #db61a2;
+}
+.eWB988t3JuRQuM9e6O_N p {
+  margin-top: 10px;
+}
+
+.lVRxnFYFCfHZHGIPV2QD {
+  margin-top: var(--input-margin);
+}
+
+.Fj4oA4Er2_057Nqs3d_R {
+  margin-top: var(--input-margin);
+}
+
+.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);
+  }
+}
+
+.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);
+}
+
+.EsTYWrxvRDwQ5bUKgop3 label {
+  padding: var(--container-padding);
+  cursor: pointer;
+}
+
+.ew2x2VQFG7Hj_ltiyxbF {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.WI7RHMq3jaNSZwGU2FA6  {
+  button {
+    display: flex;
+    align-items: center;
+    gap: var(--space-s);
+    padding: var(--space-s);
+    font-size: var(--font-size-s);  
+  }
+
+  svg {
+    height: var(--icon-size-m);
+  }
+}
+
+.tW4weGP7ZNHvtdAvHXkQ {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-m);
+  padding: var(--space-m) var(--container-padding);
+}
+
+.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;
+}
+
+.Q5T7XWGqm4a5MPArNfUg {
+  min-width: 360px;
+}
+
+.YSEBZfRCIoJmOplLt9mP,
+.a5K1WCxiR97esx_y_2Ex,
+.uiSOmb44a9pRFxf0NKJc {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-s);
+  margin: var(--space-l) 0;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.YSEBZfRCIoJmOplLt9mP select {
+  width: fit-content;
+}
+.dlkVNG9BLZN9R9HguwLu {
+  max-width: 50%;
+}
+
+.wM1sRpuOJYI8QczteHwR {
+  cursor: pointer;
+}
+
+.HAVmLg8TCL18Jeiuo7fX {
+  width: 100%;
+}
+
+.HAVmLg8TCL18Jeiuo7fX > * {
+  outline: none;
+}
+
+.HAVmLg8TCL18Jeiuo7fX th {
+  color: hsl(var(--hue-blue), 10%, 60%);
+  font-weight: normal;
+  text-align: left;
+}
+
+.HAVmLg8TCL18Jeiuo7fX th:first-child {
+  width: 100%;
+}
+
+.HAVmLg8TCL18Jeiuo7fX th:nth-child(2) {
+  min-width: 70px;
+}
+
+.HAVmLg8TCL18Jeiuo7fX td {
+  height: 25px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.HAVmLg8TCL18Jeiuo7fX td:first-child  {
+  text-overflow: ellipsis;
+  max-width: 0;
+}
+
+.gqWI3mlnDqWIUNXebNqh {
+  min-width: 360px;
+}
+
+._UZuyKF0ewftaeFpnDiS {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-s);
+  margin-top: var(--space-m);
+}
+
+.egMKJajhBRVHHcS0ruyV {
+  margin-bottom: var(--input-margin);
+}
+
+.krYGtNnm9wreKzV0sC87 {
+  max-width: 50%;
+}
+
+.IhdI0Ej7cIQc3O9IulTL {
+  cursor: pointer;
+}
+
+.dVtQTutpaei_Zk_0Dmhd {
+  width: 100%;
+}
+
+.dVtQTutpaei_Zk_0Dmhd > * {
+  outline: none;
+}
+
+.dVtQTutpaei_Zk_0Dmhd th {
+  color: hsl(var(--hue-blue), 10%, 60%);
+  font-weight: normal;
+  text-align: left;
+}
+
+.dVtQTutpaei_Zk_0Dmhd th:first-child {
+  width: 100%;
+}
+
+.dVtQTutpaei_Zk_0Dmhd th:nth-child(2) {
+  min-width: 70px;
+}
+
+.dVtQTutpaei_Zk_0Dmhd td {
+  height: 25px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.dVtQTutpaei_Zk_0Dmhd td:first-child  {
+  text-overflow: ellipsis;
+  max-width: 0;
+}
+
+.Wdz5LHTVlrpDjGYTKK9L {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-s);
+  cursor: pointer;
+
+  &:has(:focus-visible) {
+    outline: var(--focus-outline);
+  }
+
+  input[type="radio"] {
+    -webkit-appearance: none;
+    appearance: none;
+    min-width: 1.5em;
+    min-height: 1.5em;
+    border-radius: 50%;
+    border: 2px solid var(--btn-bg-color);
+    outline: none;
+
+    &:checked,
+    &:focus:checked,
+    &:hover:checked {
+      background: radial-gradient(
+        circle,
+        var(--btn-active-bg-color) 0%,
+        var(--btn-active-bg-color) 60%,
+        #000 60%,
+        #000 100%
+      );
+    }
+  }
+}
+
+.MTzbvQ4VAtgPXbJKkrGO {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-s);
+
+  input[type="password"] {
+    margin: var(--space-s) 0;
+  }
+
+  label {
+    width: 100%;
+  }
+}
+
+.X1Pj4fM1xquH4Ymuq0Q5 {
+  display: none !important;
+}
+.mlhmoE1JUQKR4Te5DEtv {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-s);
+
+  button {
+    margin-top: var(--space-s);
+  }
+}
+
+.glTWFMiUMaerBvhPz8ti {
+  display: flex;
+  gap: var(--space-s);
+}
+
+.pvyilF8BtiMYHtpXJ_jT {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-s);
+
+  button {
+    margin-top: var(--space-s);
+  }
+}
+.e3jR4OMsV_OIaaAci_hn {
+  margin: 0 auto;
+  overflow: hidden;
+  padding: var(--container-padding);
+
+  h1 {
+    margin: var(--space-l) 0 var(--space-m) 0;
+    font-family: var(--font-family-custom);
+    font-size: var(--font-size-l);
+    color: hsl(var(--hue-blue), 10%, 60%);
+  }
+}
+
+.kfaDc9tZA7V0rbLrrQxW {
+  margin-bottom: var(--space-xl);
+  text-align: center;
+  font-size: 30px;
+
+  @media (min-width: 42em) {
+    margin: var(--space-xl) 0;
+    font-size: 36px;
+  }
+}
+
+.unPhcciIOQl7IyVNBGQk {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-s);
+  white-space: nowrap;
+  margin-bottom: var(--space-m);
+}
+
+.cRQaBuJaYH041jNLJIlp {
+  display: none;
+}
+.EPw4Q8pC4VCZu_ENeHOh {
+  margin: 0 auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  & > div {
+    margin: var(--space-m) auto;
+  }
+}
+
+ .JoCtgfMdp4_LkFISBVdL {
+   overflow: hidden auto !important; /* allow scrolling on Y-axis only */
+   scrollbar-width: none; /* Firefox */
+ }
+
+.JoCtgfMdp4_LkFISBVdL::-webkit-scrollbar {
+    display: none;  /* Safari and Chrome */
+}
+
+.vN10Ra6WwFQwsoJD1_3H {
+  align-items: center;
+  color: var(--alpha-picker-color);
+  display: flex;
+  flex-direction: column;
+  font-size: 2vh;
+  padding: 5px 0;
+  position: fixed;
+  right: 0;
+  width: 32px;
+  cursor: pointer;
+  touch-action: none;
+}
+
+.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);
+    }
+  }
+
+  &._t4JBPFRguFbumW7x8D6 {
+    .bfE_vcKGNAy6HuKrhsLQ {
+      color: var(--song-item-btn-active-bg-color);
+      filter: var(--song-item-btn-active-filter);
+    }
+
+    .a2lTNMjjT5QzeuYbGeux {
+      color: var(--song-item-btn-active-color);
+    }
+  }
+}
+
+.q8d4R7JJbyKfMfb5qTtn {
+  animation: var(--animation-text-shadow-glow);
+}
+
+.hxXzgFhspryRgl6_AkmQ {
+  color: var(--color-gray-5);
+  font-size: 14px;
+  text-align: right;
+  width: 40px;
+}
+
+.z8K08MurHExDsFH50TjN {
+  cursor: pointer;
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  margin-left: 14px;
+}
+
+.oqSOn8U_QmqEzSvyfAw_ {
+  color: var(--color-gray-9);
+  font-size: 18px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.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);
+  }
+}
+
+.bfE_vcKGNAy6HuKrhsLQ {
+  color: var(--song-item-btn-bg-color);
+}
+
+.a2lTNMjjT5QzeuYbGeux {
+  position: absolute;
+  font-size: 14px;
+  top: 0;
+  text-shadow: none;
+  color: var(--text-color);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.IpLs3GshduGnVRAThUSV {
+  color: var(--song-item-btn-active-bg-color);
+  filter: var(--song-item-btn-active-filter);
+}
+
+.r4HcW54ut9T2YXA4ysAf {
+  animation: var(--animation-btn-star);
+  will-change: transform;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+.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);
+}
+.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;
+}
+.l_cLCw9eRNCSyRKgXWS5 {
+  display: flex;
+  height: 100%;
+  text-align: center;
+  align-items: center;
+}
+
+.Fog7IKmx1oVfPd8FU407 {
+  flex: 1;
+}
+
+/* adapted from https://github.com/tobiasahlin/SpinKit */
+.Cy2j9ZX2IZrQWobGUi7X {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.dTWtSURLdyh9OV1LTnaC {
+  background-color: var(--btn-bg-color);
+  height: 40px;
+  width: 6px;
+  animation: pQ8Wi97sGo_5PlIrHfhm 0.8s infinite ease-in-out;
+  margin: 0 5px;
+}
+
+.L3qh5gTBMbZXjFIzwmUI {
+  animation-delay: -0.7s;
+}
+
+.f7Ry7aQoljxI7zOj18tU {
+  animation-delay: -0.6s;
+}
+
+.jZojmB6JI3Y1bkX6XnDI {
+  animation-delay: -0.5s;
+}
+
+.EcvP0cnG_tPw2rSbAdHh {
+  animation-delay: -0.4s;
+}
+
+@-webkit-keyframes pQ8Wi97sGo_5PlIrHfhm {
+  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+  20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes pQ8Wi97sGo_5PlIrHfhm {
+  0%, 40%, 100% {
+    transform: scaleY(0.4);
+  }  20% {
+    transform: scaleY(1.0);
+  }
+}
+
+.bhZWQ2xPWPTNIX6C4F3a h1 {
+  font-family: var(--font-family-custom);
+}
+
+.qVDsyq0en4mmfO12Q9S6 {
+  aspect-ratio: 4/3;
+  margin: 0 auto;
+
+  img {
+    border-radius: var(--border-radius);
+  }
+
+  svg {
+    color: var(--btn-bg-color);
+  }
+
+  img,
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+.wmZzvQLV8SUXBxloByaI {
+  --image-width: 104px;
+  --queue-item-btn-size: 48px;
+
+  position: relative;
+  /* 104px */
+  height: 6.5rem;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  background-color: hsl(var(--hue-blue), 40%, 6%);
+  margin: var(--space-s) 0;
+}
+
+.OcXId78BLaxBJIqdYIof {
+  display: flex;
+  flex: 1;
+  margin: 0.5rem 0 0.5rem var(--space-s);
+  overflow: hidden;
+}
+
+.umnUSnD73DO3rWOYPZ9K {
+  opacity: .5;
+}
+
+.GacRKdveAPO6_ywV1_ca {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: var(--image-width);
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.ctOyiO7TWxvaj2cMva6s {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-top-left-radius: var(--border-radius);
+}
+
+.pCDYhCexaZe_zujCsnng {
+  color: var(--color-gray-7);
+  font-size: var(--font-size-s);
+  padding: var(--space-xs);
+}
+
+.nDkBZyovKLxzMG7K_3Tg {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin-left: var(--container-padding);
+  overflow: hidden;
+}
+
+.Wj7Me9sY8G3TTqTAeAaj {
+  flex: 1;
+}
+
+.oyozFDwcV8GMOumLs906 {
+  color: var(--color-gray-9);
+  font-size: 1.25rem;
+}
+
+.PyOIw1JanvSSiLfkRkZt {
+  color: var(--color-gray-7);
+  font-size: 1.125rem;
+}
+
+.HEBTYqqhv5BzgHhWH7vd {
+  font-size: var(--font-size-s);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  color: var(--color-gray-5);
+  margin-bottom: 0.25rem;
+}
+
+._LtmdT6l38fSEjxPLZod {
+  color: var(--queued-item-color);
+  text-shadow: var(--text-shadow-glow);
+}
+
+.oyozFDwcV8GMOumLs906,
+.PyOIw1JanvSSiLfkRkZt,
+.HEBTYqqhv5BzgHhWH7vd {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* Buttons */
+.SUdDbZdeZwQPymCmhaMA {
+  button {
+    position: relative;
+    /* overflow: hidden; */
+    width: var(--queue-item-btn-size);
+    height: var(--queue-item-btn-size);
+    color: var(--song-item-btn-bg-color);
+  }
+
+  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);
+  }
+
+  svg {
+    width: var(--queue-item-btn-size);
+    height: var(--queue-item-btn-size);
+  }
+}
+
+.gh_SYElq5eTJHE5IZynP svg,
+._gt_BEXlOrYwzEmK6sQ8 svg,
+.ENoEOjlwEk0jBI45f4pk svg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 60px;
+  height: 60px;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.ZRVZZ_1kYEKO36fznW79 {
+  animation: var(--animation-btn-star);
+  will-change: transform;
+}
+
+/* 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);
+}
+