:root {
	--fg-color: #000;
	--bg-color: #F9F9F9;
	--med-font: 1rem;
	--sm-font: 1rem;
	--border-radius: 5px;
	--button-color: #FFF;
	--margin: 20px;
	--transition-duration: 0.2s;

	font-size: 13px;

	--white: #ffffff;
	--light-gray: #f2f2f2;
	--gray: #EAEAEA;
	--inactive-top-tag: #ededed;
	--border-radius-s: 2px;
	--slider-hover: #F8F8F8;
	--slider-thumb-color: #BFBFBF;
	/* Variable collection - Mode 1 */
  --Units: px;
  --Slider-Value: 100;
  --White: #FFFFFFFF;
  --Gray: #EAEAEAFF;
  --light-gray: #F2F2F2FF;
  --med-gray: #6C6C6CFF;
  --cta-hover-color: #2A2A2A;
  --offblack: #373737FF;
  --black: #000000FF;
  --greyed-text: #A7A7A7FF;
  --color-swatch-outline: #DCDCDCFF;
  --inverted-medgray: #DFDFDFFF;
  --inactive-top-tag: #EDEDEDFF;
  --gap-s: 12px;
  --gap-m: 17px;
	--controls-width: 340px;
	--controls-padding: 20px;



	/* Darkmode Color styles */
	--gray-darkmode: rgba(39, 39, 39, 1);
	--bg-darkmode: #191919;
	--offblack-darkmode: rgba(232, 232, 232, 1);
	--white-darkmode: rgba(0, 0, 0, 1);
	--slider-thumb-color-darkmode: rgba(181, 181, 181, 1);
	--light-gray-darkmode: rgba(33, 33, 33, 1);
	--med-gray-darkmode: rgba(137, 137, 137, 1);
	--cta-hover-color-darkmode: #d9d9d9;
	--inverted-medgray-darkmode: rgba(74, 74, 74, 1);
	--grayed-text-darkmode: rgba(93, 93, 93, 1);
	--button-color-darkmode: #000;
	--slider-hover-darkmode: #171717;
	--inactive-top-tag-darkmode: #2A2A2A;

}

/* Darkmode class - apply to body to switch to dark theme */
body, body * {
	transition: background-color var(--transition-duration) ease, color var(--transition-duration) ease, border-color var(--transition-duration) ease;
}

body.darkmode {
	--fg-color: var(--offblack-darkmode);
	--bg-color: var(--bg-darkmode);
	--white: var(--white-darkmode);
	--light-gray: var(--light-gray-darkmode);
	--gray: var(--gray-darkmode);
	--slider-hover: var(--slider-hover-darkmode);
	--slider-thumb-color: var(--slider-thumb-color-darkmode);
	--White: var(--white-darkmode);
	--Gray: var(--gray-darkmode);
	--light-gray: var(--light-gray-darkmode);
	--med-gray: var(--med-gray-darkmode);
	--cta-hover-color: var(--cta-hover-color-darkmode);
	--offblack: var(--offblack-darkmode);
	--black: var(--white-darkmode);
	--greyed-text: var(--grayed-text-darkmode);
	--color-swatch-outline: var(--med-gray-darkmode);
	--inverted-medgray: var(--inverted-medgray-darkmode);
	--inactive-top-tag: var(--inactive-top-tag-darkmode);
	--button-color: var(--button-color-darkmode)
}

.geist-mono, .geist-mono *, .custom-radio-group span {
  font-family: "Geist Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
	font-size: 11px;
}

.caps {
	text-transform: uppercase;
}

/* Hide scrollbars for all browsers */
html, body, .pattern, #patternContainer {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.pattern::-webkit-scrollbar,
#patternContainer::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}


html {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

body {
  margin: 0;
  background-color: var(--bg-color);
  /* display: flex;
  align-items: flex-start;
  justify-content: start;
  height: 100vh;
	max-height: 100vh;
	box-sizing: border-box; */
	/* overflow: hidden; */
	color: var(--fg-color);
	display: flex;
}

body:has(> .along-top) {
	flex-direction: column;
}

#controls.along-top {
	width: 100vw;
	/* height: 500px; */
	overflow-x: scroll;
	position: fixed;
	top: 0px;
	left: 0px;
	padding-bottom: 0px;
}


.horizRule {
	width: 100%;
	border-bottom: 1px solid var(--light-gray);
}

.pattern {
	height: 100vh;
}

html * {
	font-family: 'corporate-s';

}

input {
	font-size: 1rem;
}

button, .button{
	background-color: var(--button-color);
	color: var(--fg-color);
	border: 0;
	/* border: 0; */
	font-size: var(--med-font);
	transition: var(--transition-duration);
	height: 30px;
	border-radius: var(--border-radius);
}

#uiControls {
	display: flex;
	gap: 3px;
	background-color: var(--bg-color);
	pointer-events: all;
}





.custom-radio-group {
	display: flex;
	gap: 3px;
}

.custom-radio-group span {
	background: var(--inactive-top-tag);
	border-radius: var(--border-radius-s);
	padding: 3px 5px;
	cursor: pointer;
	text-transform: uppercase;
	transition: background-color var(--transition-duration) ease;
}

.custom-radio-group label:not(.selected) span:hover {
	background: color-mix(in srgb, var(--inactive-top-tag) 93%, black);
}

body.darkmode .custom-radio-group label:not(.selected) span:hover {
	background: color-mix(in srgb, var(--inactive-top-tag) 90%, white);
}

#controlBlocksContainer {
	display: flex;
	gap: var(--gap-s);
	pointer-events: none;
}



.stacked #controlBlocksContainer {
	flex-direction: column;
	align-items: stretch;
}

.along-top #controlBlocksContainer {
	flex-direction: row;
	align-items: flex-start;
}



/* Custom radio button styles */
.custom-radio-group span {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.custom-radio-group label {
	display: flex;
}

.custom-radio-group label input[type="radio"] {
	display: none;
}

.custom-radio-group label.selected span {
	background: var(--fg-color);
	color: var(--bg-color);
}

label.button {
	display: inline-flex !important;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	flex: 2;
}
.uploadContainer {
	display: flex!important;
	gap: 4px;
}
#playUploadedAudioBtn {
	overflow: hidden;
	text-wrap: nowrap;
	transition: var(--transition-duration) width;
}
button.mainButton {
	height: 54px;
	background: var(--fg-color);
	color: var(--bg-color);
	position: relative;
	min-width: 246px;
}
button.mainButton::before,
button.mainButton::after {
	content: "";
	position: absolute;
	width: 40px;
	height: 40px;
	background-image: url('icons/btn-flourish-w.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	top: 50%;
	transform: translateY(-50%);
	mix-blend-mode: lighten;
	filter: invert(1);
	transition: filter var(--transition-duration) ease, mix-blend-mode var(--transition-duration) ease;
}
button.mainButton::before {
	left: 10px;
}
button.mainButton::after {
	right: 10px;
	transform: translateY(-50%) scaleX(-1);
}
button.mainButton:hover {
	background: var(--cta-hover-color);
}

body.darkmode button.mainButton::before,
body.darkmode button.mainButton::after {
	filter: invert(0);
	mix-blend-mode: darken;
}

#audioLevelContainer {
	display: flex;
	flex-direction: row;
}

#audioLevel {
	color: var(--greyed-text);
  font-family: "Geist Mono", monospace;
	margin-left: 0px;
	font-size: 11px;
	display: block;
	width: 55px;
	text-align: right;
}

/* button.motionActive {
	border: 1px solid purple;
} */

/* button:hover, input[type="file"]::file-selector-button:hover, .button:hover {
	background-color: var(--hover-color);
} */


#patternContainer {
  /* min-width: 100vw; */
  flex: 1 1 auto;
  min-height: 100vh;
  /* width: max-content;
  height: max-content; */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  overflow: auto;
}
/* canvas {
	margin-top: 40px;
	margin-left: 40px;
	margin-bottom: 40px;
  display: block;
} */

#patternContainer.padded canvas {
	margin: 40px;
	/* border: .5px solid var(--fg-color); */
}

@media (max-width: 800px) {
	#patternContainer.padded canvas {
		margin: 9px;
	}
}

#controls {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100vh;
	width: var(--controls-width);
	overflow-y: scroll;
	overflow-x: visible;
	box-sizing: border-box;
	min-width: var(--controls-width);
	padding-right: var(--controls-padding);
	padding-bottom: 100px;
	padding-top: var(--controls-padding);
	padding-left: var(--controls-padding);
	pointer-events: none;
	/* position: fixed;
	top: 0px;
	left: 0px; */
	z-index: 11;
	/* Hide scrollbars for #controls */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none;  /* IE and Edge */
}
#controls::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
}

#controlBlocksContainer * {
	pointer-events: all;
}


#debuggers {
	display: flex;
	flex-direction: column;
	gap: 9px;
	pointer-events: all;
}

#controls p {
	margin-top: 0em;
	margin-bottom: 0em;
	font-size: 18px;
	/* font-weight: bold; */
}

.slider-container {
	display:flex;
	flex-direction: column;
}

.slider-container.half {
	width: calc(50% - 5px);
}




/* #generateControls {
	position: fixed;
	bottom: 0px;
	left: 0px;
	padding: 20px;
	background-color: var(--bg-color);
	width: 300px;
	box-sizing: border-box;
	z-index: 3;
} */

#generateControls {
	padding: 0px;
	width: calc(var(--controls-width) - 2 * var(--controls-padding));
	box-shadow: none !important;
	background: none !important;
}

.along-top #generateControls {
	/* position: fixed;
	bottom: 80px;
	left: var(--controls-padding); */
}



input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: var(--gray);
  border: none;
  border-radius: 3px;
  transition: var(--transition-duration);
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at center, var(--white) 0, var(--white) 2px, var(--slider-thumb-color) 2px, var(--slider-thumb-color) 100%);
  border: .5px solid var(--slider-thumb-color);
  cursor: pointer;
  border-radius: 50%;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at center, var(--white) 0, var(--white) 42x, var(--slider-thumb-color) 2px, var(--slider-thumb-color) 100%);
  cursor: pointer;
  border-radius: 50%;
}



.slider-only-container {
  padding: 0px 0px 6px 0px;
  border-radius: var(--border-radius);
  transition: background-color var(--transition-duration) ease;
	cursor: pointer;
}

.slider-only-container:hover {
  background: var(--slider-hover);
  padding-left: 0.3em;
    padding-right: 0.3em;
    margin-left: -0.3em;
    width: 100%;
    background: var(--slider-hover);
}

.styled-slider {
	margin: 0;
	box-sizing: border-box;
}

.labelContainer {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 2px;
	gap: 10px;
}

.labelContainer label {
	text-wrap: nowrap;
}

.labelContainer span {
	font-size: var(--sm-font);
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border: 0.5px solid var(--fg-color);
  background: var(--bg-color);
	margin: 0;
	margin-right: 3px;
	cursor: pointer;
}

input[type="checkbox"]:checked {
  background: var(--fg-color);
}

input[type="checkbox"] + label, input[type="checkbox"] + span {
  /* styles */
	cursor: pointer;
}

input[type="file"]::file-selector-button {
  appearance: none;
  border: 0;
  background: var(--button-color);
  color: var(--fg-color);
  padding: 4px 8px;
  cursor: pointer;
	font-family: 'corporate-s';
	transition: var(--transition-duration);
	border-radius: var(--border-radius);
	height: 30px;
	width: 50%;
}

/* Hide the "no file chosen" text for file inputs */
input[type="file"]::before {
  content: none !important;
}

input[type="file"]::-webkit-file-upload-button {
  /* Ensure webkit browsers also hide the text */
}

/* Alternative approach: hide the text content */
input[type="file"] {
  color: transparent;
}

input[type="file"]::after {
  content: none !important;
}

input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border: 0.5px solid var(--fg-color);
  border-radius: 50%;
  background: var(--bg-color);
}

/* Hide the default file input since we're using custom styling */
input[type="file"] {
	display: none;
}

/* Custom File Input Styling - Better Control */
.custom-file-input {
	position: relative;
	display: inline-block;
	width: 100%;
}

.custom-file-input input[type="file"] {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.custom-file-input-label {
	display: block;
	padding: 10px 16px;
	background: var(--light-gray);
	border: none; /* Remove border */
	border-radius: 4px;
	color: var(--fg-color);
	font-size: 14px;
	text-align: center;
	cursor: pointer;
	transition: all var(--transition-duration) ease;
	width: 100%;
	box-sizing: border-box;
	margin-top: 0.75em;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height:1;
}

.custom-file-input-label:hover {
	background: color-mix(in srgb, var(--inactive-top-tag) 90%, white);
	/* color: var(--bg-color); */
}

.custom-file-input-label:active {
	transform: translateY(1px);
}

/* File name display */
.file-name {
	margin-top: 8px;
	font-size: 12px;
	color: var(--fg-color);
	opacity: 0.7;
}


#colorSelect {
  	border: 0.5px solid var(--fg-color);
}

#colorSelect:focus {
  outline: none;
}

input[type="number"] {
  border: 0;
	background: var(--button-color);
	border-radius: 4px;
  outline: none; /* optional: removes focus ring */
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.controlBlock {
	display: flex;
	flex-direction: column;
	gap: var(--gap-m);
	border-radius: 10px;
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.10);
	padding: var(--gap-m, 17px) var(--gap-s, 12px);
	min-width: 232px;
	background-color: var(--white);
}

.controlBlockTitle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--light-gray);
	padding-bottom: var(--gap-m);
	/* margin-bottom: var(--gap-m); */
}

.closed .controlBlockTitle {
	margin-bottom: 0px;
	padding-bottom: 0px;
	border-bottom: 0px;
	border-bottom: 0px solid var(--light-gray);
}


.spacer {
	width: 100%;
	height: 12px;
}

/* .closed .spacer {
	height: 4px;
} */

#motionControls.closed > * {
  display: none;
}

/* #motionControls {
	gap: 5px;
} */

#motionControls.closed > .always-visible, #motionControls.closed > p {
  display: flex;
}

.hideControls {
	visibility: hidden;
	pointer-events: none;
	display: none !important;
}

#toggleMessage {
	position: fixed;
	top: var(--margin);
	left: var(--margin);
	z-index: 10;
}

.toggleMessageMobile {
	display: none;
}


@media (hover: none) and (pointer: coarse) {
  /* styles for touch-only devices */
	#controls p.toggleMessage {
		display: none;
	}
	
	#controls p.toggleMessageMobile {
		display: block;
		visibility: visible;
		pointer-events: auto;
		/* position: absolute; */
		z-index: 10;
		margin-top: 0px;
		text-shadow:
    -1px -1px 0 white,
     1px -1px 0 white,
    -1px  1px 0 white,
     1px  1px 0 white;
	}
}

.color-option {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.color-option input[type="radio"] {
  display: none;
}

.color-option {
	/* flex: 1; */
}

.color-option .img-wrap {
  display: inline-block;
  position: relative;
  transition: var(--transition-duration);
  transform: translateY(0px);
	height: 45px;
}

.img-wrap.black img {
	background: black;
}
.img-wrap.white img {
	background: white;
}

.color-option img {
  /* width: 38px; */
  	border: .25px solid var(--light-gray);
  border-radius: var(--border-radius-s);
  transition: border var(--transition-duration) ease;
	width: 100%;
	height: 100%;
}

.color-option input[type="radio"]:checked + .img-wrap, .color-option input[type="radio"]:hover + .img-wrap {
  transform: translateY(-5px);
}

.color-option input[type="radio"]:checked + .img-wrap::after, .color-option input[type="radio"]:hover + .img-wrap::after {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 23px;
  height: 23px;
  background: url('icons/color-arrow.svg') no-repeat center/9px 9px;
  pointer-events: none;
}

body.darkmode .color-option input[type="radio"]:checked + .img-wrap::after, 
body.darkmode .color-option input[type="radio"]:hover + .img-wrap::after {
  background: url('icons/color-arrow-white.svg') no-repeat center/9px 9px;
}

#colorControls {
  display: flex;
  justify-content: space-between;
  gap: 4px;
	margin-bottom: 8px;
}

.color-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.color-label {
  color: var(--fg-color);
}

.selected-color-tag {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  color: var(--fg-color);
  background-color: var(--light-gray);
	padding: 3px 5px;
  border-radius: var(--border-radius);
  text-transform: uppercase;
}

body > #colorControls {
  display: none;
}

#textAreaMarker {
	border: .5px solid red;
	background-color: #ff000020;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	pointer-events: none;
}




#p5_loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.canvasButtons {
	/* gap: 10px; */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0px 0 2px 0;
	align-items: end;
	width: 100%;
	gap:6px;
}


button {
	cursor: pointer;
}

button.canvasSizeButton {
	font-size: var(--sm-font);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	border: 0;
	/* width: 43px; */
	flex: 1;
	padding-bottom: 5px;
	height: 100%;
	background-color: transparent;
	padding: 0px;
	/* border-radius: var(--border-radius); */
	/* border-left: .5px solid black; */
}

.canvasSizeButtonWrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 47px;
	background: var(--gray);
	width:100%;
	border-radius: var(--border-radius-s);
	margin-bottom: 3px;
	transition: background var(--transition-duration);

}

.canvasSizeButtonWrapper:hover {
	background: color-mix(in srgb, var(--gray) 90%, #000 7%);
}

body.darkmode .canvasSizeButtonWrapper:hover {
	background: color-mix(in srgb, var(--gray) 90%, #fff 7%);
}



.canvasSizeButtonWrapper img {
	transform: scale(.84);
}

/* Dark mode canvas size button icons */
body.darkmode .canvasSizeButtonWrapper img[src*="fullsize.svg"] {
	content: url('icons/fullsize-white.svg');
}

body.darkmode .canvasSizeButtonWrapper img[src*="9-16.svg"] {
	content: url('icons/9-16-white.svg');
}

body.darkmode .canvasSizeButtonWrapper img[src*="4-5.svg"] {
	content: url('icons/4-5-white.svg');
}

body.darkmode .canvasSizeButtonWrapper img[src*="16-9.svg"] {
	content: url('icons/16-9-white.svg');
}

.canvasSizeButton span {
	font-family: "Geist Mono", monospace;
	color: var(--greyed-text);
	font-size: 11px;
}



button.canvasSizeButton:hover {
	background-color: var(--button-color);
	border-radius: var(--border-radius);
}

.sepLine {
	height: 50px;
	width: 0px;
	border-right: .5px solid var(--gray);
}

.cclabel {
	margin-bottom: -11px;
}



.buttonEye {
	width: 20px;
	height: 20px;
	padding-right: 5px;
}
.buttonWordmark {
	width: 100px;
}

.slider-container:has(input:disabled) {
  opacity: 0.4;
  pointer-events: none;
}

input.slider-value {
	flex-shrink: 1;
	min-width: 0;
	background: var(--light-gray);
	text-align: center;
	font-family: "Geist Mono", monospace;
  font-size: 11px;
	color: var(--med-gray)
}

.slider-units {
	font-size: var(--sm-font);
	color: var(--med-gray);
	font-family: "Geist Mono", monospace;
	white-space: nowrap;
}

.input-units-container {
	display: flex;
	align-items: center;
	gap: 4px;
}

.canvas-dimensions, .space-dimensions {
	font-size: 11px;
	color: var(--greyed-text);
	margin-top: 4px;
	text-align: center;
}

button:disabled {
  opacity: 0.5;
	pointer-events: none;
}

.bottom-logo {
	height: 40px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
}

/* Dark mode logo */
body.darkmode .bottom-logo img[src*="Eternal_Research-Wordmark-Black.svg"] {
	content: url('logos/Eternal_Research-Wordmark-White.svg');
}


.inner-radio {
	display: flex;
	width: 100%;
	justify-content: space-between;
	font-family: 'LouizeItalic', serif;
	font-style: italic;
}

@font-face {
	font-family: 'LouizeItalic';
	src: url('icons/205TF-Louize-Italic.woff2') format('woff2');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

.louize-italic, .inner-radio > span {
	font-family: 'LouizeItalic', serif;
	font-style: italic;
	font-size: 13px;
}




#mic, #mp3 {
	display: none;
}

.mic #mic, .mp3 #mp3 {
	display: block;
}


.play-btn, .shuffle-btn {
	text-align: left;
	display: flex;
	align-items: center;
	padding: 0px;
	margin-left: -2px;
}

.play-btn::before, .shuffle-btn::before {
	transition: background-color var(--transition-duration);
	background-color: var(--light-gray)
}

.play-btn:hover::before, .shuffle-btn:hover::before {
	background-color: rgba(0, 0, 0, 0.12);
}

body.darkmode .play-btn:hover::before, body.darkmode .shuffle-btn:hover::before {
	background-color: rgba(255, 255, 255, 0.22);
}

.play-btn::before {
	content: "";
	display: inline-block;
	width: 26px;
	height: 26px;
	vertical-align: middle;
	margin-right: 0.5em;
	background-image: url('icons/play-btn.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 40px;
}

body.darkmode .play-btn::before {
	background-image: url('icons/play-btn-white.svg');
}

/* Pause button state */
.play-btn.pause-state::before {
	background-image: url('icons/pause-btn.svg');
}

body.darkmode .play-btn.pause-state::before {
	background-image: url('icons/pause-btn-white.svg');
}

/* Stop button state */
.play-btn.stop-state::before {
	background-image: url('icons/stop-btn.svg');
}

body.darkmode .play-btn.stop-state::before {
	background-image: url('icons/stop-btn-white.svg');
}

.shuffle-btn::before {
	content: "";
	display: inline-block;
	width: 26px;
	height: 26px;
	vertical-align: middle;
	margin-right: 0.5em;
	background-image: url('icons/shuffle.svg');
	background-size: contain;
	background-size: 17px 17px;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 40px;
}

body.darkmode .shuffle-btn::before {
	background-image: url('icons/shuffle-white.svg');
}




.uploadContainer input {
	width: 100%;
	box-sizing: border-box;
}

/* Audio loader styles */
.audio-loader {
	width: 20px;
	height: 20px;
	border: 2px solid #f3f3f3;
	border-top: 2px solid #333;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	display: none;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}