html, body {
	display: grid;
}

html {	
	-webkit-text-size-adjust:100%;
	line-height:1.15
	height: 100%;
}

body {
    font-family: Arial, sans-serif;
    margin: 12;
    padding: 4;
    background: #222;
    color: white;
}

main {
	display:block
}


header {
    background-color: #333;
    color: #fff;
    padding: 1em 2;
    text-align: center;
}

p {
    line-height: 1.6;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

b,strong {
	font-weight:bolder
}

code,kbd,samp {
	font-family:monospace,monospace;
	font-size:1em
}

code {
	background-color: #041e24;
}

.actual-button {
	font-family:inherit;font-size:100%;line-height:1.15;margin:0;
	overflow:visible;	
}


input,optgroup,select,textarea {
	font-family:inherit;font-size:100%;line-height:1.15;margin:0
}

.actual-button input {
	overflow:visible
}

.actual-button select {
	text-transform:none
}

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

.upload-form [type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner::-moz-focus-inner {
	border-style:none;padding:0
}

.upload-form [type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring:-moz-focusring {
	outline:1px dotted ButtonText
}

::-webkit-file-upload-button {
	-webkit-appearance:button;
	font:inherit;
}


.upload-form {
  margin-left: auto;
  margin-right: 2em;
  display: flex;
  gap: 1rem;
  --nf-input-size:1rem;
  --nf-input-font-size:calc(var(--nf-input-size)*0.875);
  --nf-small-font-size:calc(var(--nf-input-size)*0.875);
  --nf-input-font-family:inherit;
  --nf-label-font-family:inherit;
  --nf-input-color:#20242f;
  --nf-input-border-radius:0.25rem;
  --nf-input-placeholder-color:#929292;
  --nf-input-border-color:#c0c4c9;
  --nf-input-border-width:1px;
  --nf-input-border-style:solid;
  --nf-input-border-bottom-width:2px;
  --nf-input-focus-border-color:#3b4ce2;
  --nf-input-background-color:#f9fafb;
  --nf-invalid-input-border-color:var(--nf-input-border-color);
  --nf-invalid-input-background-color:var(--nf-input-background-color);
  --nf-invalid-input-color:var(--nf-input-color);
  --nf-valid-input-border-color:var(--nf-input-border-color);
  --nf-valid-input-background-color:var(--nf-input-background-color);
  --nf-valid-input-color:inherit;
  --nf-invalid-input-border-bottom-color:red;
  --nf-valid-input-border-bottom-color:green;
  --nf-label-font-size:var(--nf-small-font-size);
  --nf-label-color:#374151;
  --nf-label-font-weight:500;
  --nf-slider-track-background:#dfdfdf;
  --nf-slider-track-height:0.25rem;
  --nf-slider-thumb-size:calc(var(--nf-slider-track-height)*4);
  --nf-slider-track-border-radius:var(--nf-slider-track-height);
  --nf-slider-thumb-border-width:2px;
  --nf-slider-thumb-border-focus-width:1px;
  --nf-slider-thumb-border-color:#fff;
  --nf-slider-thumb-background:var(--nf-input-focus-border-color);
  display:block;
  margin-top:calc(var(--nf-input-size)*1.5);
  line-height:1;
  white-space:nowrap;
  --switch-orb-size:var(--nf-input-size);
  --switch-orb-offset:calc(var(--nf-input-border-width)*2);
  --switch-width:calc(var(--nf-input-size)*2.5);
  --switch-height:calc(var(--nf-input-size)*1.25 + var(--switch-orb-offset));
  padding-bottom: 6em;
}

.upload-form input {
	background-color: #4a90e2;
	color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.upload-form input:hover {
	background-color: #357ab8;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.upload-form input:active {
	background-color: #2d5d8c;
	transform: scale(0.98);
}

.upload-form input {
  appearance: button;
  background-color: #1899D6;
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: din-round,sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .8px;
  line-height: 20px;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 13px 16px;
  text-align: center;
  text-transform: uppercase;
  touch-action: manipulation;
  transform: translateZ(0);
  transition: filter .2s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}

.upload-form input:after {
  background-clip: padding-box;
  background-color: #1CB0F6;
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  bottom: -4px;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

div.info {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: white;
  background-color: black;
  padding: 1.5rem 2rem;
  border-left: 4px solid #8c8c8c;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  max-width: 700px;
  margin: 1.5rem auto;
}

/*
h1 {
	place-self: center;
        background: linear-gradient(90deg, #29cc08, #cc4806, #050102) -100%/ 200%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font: 300 clamp(0.5em, 5vw, 5em) exo, sans-serif;
        animation: shimmer 9s linear infinite;
	box-shadow: rgb(5, 1, 2) 0px 20px 30px -10px;
}

@keyframes shimmer { to { background-position: 100% } }
*/
 
h1 {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  text-align: center;

  color: #1899D6;

  /* background: linear-gradient(90deg, #4f46e5, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */

  margin: 2rem 0;
  letter-spacing: -0.5px;

  /* Animation on load: */
  opacity: 0;
  transform: translateY(15px);
  animation: fadeInUp 0.8s ease forwards;
}

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


#clipsin {
	width: 4em;
}

.playlist input[type="number"] {
	width: 3em;
	padding: 2px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 16px;
	background-color: #4d4c46;
	color: white;
}

input[type="number"]:focus {
	outline: none;
	border-color: #007bff;
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}



.actual-button butto buttonn {
	font-family:inherit;font-size:100%;line-height:1.15;margin:0;
        overflow:visible;
	font-family:inherit;font-size:100%;line-height:1.15;margin:0
	overflow:visible
	text-transform:none
	-webkit-appearance:button
	border-style:none;padding:0
	-webkit-appearance:button;
	font:inherit;
	background-color: #4a90e2;
        color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
     appearance: button;
  background-color: #1899D6;
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: din-round,sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .8px;
  line-height: 20px;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 13px 16px;
  text-align: center;
  text-transform: uppercase;
  touch-action: manipulation;
  transform: translateZ(0);
  transition: filter .2s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  font-family:inherit;font-size:100%;line-height:1.15;margin:0;
  overflow:visible;
}


input[type="submit"]:hover {
	background-color: #357ab8;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

input[type="submit"]:active {
	        background-color: #2d5d8c;
        transform: scale(0.98);
}

input[type="submit"]:after {
	  background-clip: padding-box;
  background-color: #1CB0F6;
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  bottom: -4px;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

div.bottom {
	padding-bottom: 4em;
}

#gendow {
	margin-top: 1em;
	float: right;
}

h3 {
  font-size: 0.8em;
}

/*
button {
  font-family:inherit;font-size:100%;line-height:1.15;margin:0;
  overflow:visible;
}
*/

#upload:hover {
  background-color: #357ab8;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#upload:active {
  background-color: #2d5d8c;
  transform: scale(0.98);
}

#generatebutton:hover {
  background-color: #357ab8;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#generatebutton:active {
  background-color: #2d5d8c;
  transform: scale(0.98);
}

#clipsin {
  width: 6em;
}

#mindur, #maxdur {
  width: 5em;
}

#app {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;  /* space between labels/inputs */
  width: fit-content; /* shrink-wrap */
  height: auto; /* ensure it grows */
}



/* Tabs: */

.tab-buttons {
  display: flex;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 1rem;
}

.tab-button {
  padding: 0.6rem 1.2rem;
  border: none;
  background: none;
  cursor: pointer;
  font-weight: 600;
  color: white;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}

.tab-button:hover {
  background: #374151;
}

.tab-button.active {
  background: #374151;
  border-bottom: 3px solid #4f46e5;
}

.tab-content {
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
}

.hidden {
  display: none;
}