style.css

body {
	padding: 2rem;
	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
	background-color: #0e051e;       /* Fondo general morado ultra oscuro */
	color: #f5f0ff;                  /* Texto principal brillante (blanco con tinte lila) */
}

h1 {
	font-size: 16px;
	margin-top: 0;
	color: #fff01f;                  /* Título principal en Amarillo LED brillante */
}

p {
	color: #a794c4;                  /* Texto secundario en morado suavizado/lavanda */
	font-size: 15px;
	margin-bottom: 10px;
	margin-top: 5px;
}

.card {
	max-width: 620px;
	margin: 0 auto;
	padding: 16px;
	background-color: rgba(28, 14, 46, 0.9); /* Panel morado oscuro traslúcido */
	border: 1px solid rgba(188, 148, 254, 0.15); /* Línea sutil morada */
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(9, 3, 20, 0.6); /* Sombra profunda nocturna */
}

.card p:last-child {
	margin-bottom: 0;
}

/* --- Añadidos sugeridos basados en tu simulador si usas estas clases --- */

/* Para los sliders (controles de rango) */
input[type="range"] {
	accent-color: #bc00dd; /* El punto flotante del control en morado neón brillante */
}

/* El fondo del slider o la barra de progreso estilo LED */
.slider-track-highlight {
	background-color: #fff01f; /* Barra del slider en amarillo neón */
}

/* Para el botón o indicador de estado "Listo" */
.status-ready {
	color: #a794c4;
	border: 1px solid rgba(255, 240, 31, 0.3);
}

.status-dot {
	background-color: #fff01f; /* Cambia el punto verde por el amarillo LED */
	box-shadow: 0 0 8px #fff01f; /* Efecto de brillo LED */
}