body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
:root {
  --handle-size: 20; /* tamaño de los botones (SVG units) */
  --handle-stroke: #464545;
  --handle-stroke-width: 3;
  --handle-fill-volume: #1e8fff31;   /* color volumen */
  --handle-fill-opacity: #00e5ff3f;  /* color opacidad */
  --handle-fill-blend: #ff4dd331;    /* color mix */
  --handle-shadow: 0 0 8px 2px rgba(30,144,255,0.5); /* sombra volumen */
  --handle-shadow-opacity: 0 0 8px 2px rgba(0,229,255,0.5); /* sombra opacidad */
  --handle-shadow-blend: 0 0 8px 2px rgba(255,77,210,0.5); /* sombra mix */
  --close-fill: #ff5c5c;    /* color de fondo del botón de cerrar */
  --close-stroke: #ffffff;  /* color del borde */
  --close-line: #ffffff;    /* color de la X */
  --close-line-width: 2;
}

/* Capas de medios de fondo */
#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
}
#bg-layer {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.bg-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  mix-blend-mode: screen;
  pointer-events: none;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
h1 {
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 78px;
  color: white;
  margin: 10px 0 0 0; /* debajo del h1 */
  text-align: center;
  z-index: 10;
  pointer-events: auto;
  transition: color 0.3s, font-size 0.3s;
}
svg {
  width: 90vmin;
  height: 80vmin;
  display: block;
}
circle {
  cursor: pointer;
  transition: stroke 0.3s, stroke-width 0.3s;
}
text {
  fill: white;
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
  text-anchor: middle;
  cursor: pointer;
  transition: fill 0.3s, font-size 0.3s;
}

/* Sliders circulares (handles) */
.ring-handle {
  cursor: grab;
  vector-effect: non-scaling-stroke;
  transition: filter 1s, r 20s;
}
.ring-handle--volume {
  fill: var(--handle-fill-volume);
  stroke: var(--handle-stroke);
  stroke-width: var(--handle-stroke-width);
  filter: drop-shadow(var(--handle-shadow));
}
.ring-handle--opacity {
  fill: var(--handle-fill-opacity);
  stroke: var(--handle-stroke);
  stroke-width: var(--handle-stroke-width);
  filter: drop-shadow(var(--handle-shadow-opacity));
}
.ring-handle--blend {
  fill: var(--handle-fill-blend);
  stroke: var(--handle-stroke);
  stroke-width: var(--handle-stroke-width);
  filter: drop-shadow(var(--handle-shadow-blend));
}
.ring-handle:hover {
  r: calc(var(--handle-size) * 4);
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.8));
}

/* Etiquetas de control */
.ring-label {
  font-family: "Cal Sans", sans-serif;
  user-select: none;
  font-size: 14px;
  fill: var(--label-color);
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Simulación de fondo usando svg <text> con borde */
.ring-label-bg {
  fill: var(--label-bg);
}

/* Botón de cierre por anillo */
.ring-close {
  cursor: pointer;
  fill: var(--close-fill);
  stroke: var(--close-stroke);
  stroke-width: 1.5;
}
.ring-close:hover {
  filter: drop-shadow(0 0 4px rgba(255,0,0,0.8));
}
/* Líneas de la cruz del botón de cierre */
.ring-close-line {
  stroke: var(--close-line);
  stroke-width: var(--close-line-width);
  stroke-linecap: round;
  cursor: pointer;
}

/* Botón global reset */
.reset-btn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 20;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  font-family: "Cal Sans", sans-serif;
  font-size: 14px;
}
.reset-btn:hover {
  background: rgba(0,0,0,0.75);
}