:root{
  --primary:#E00034;
  --bg:#0f1115;
  --panel:#1a1d24;
  --text:#e5e7eb;
  --muted:#9ca3af;
}

body{
  margin:0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  display:flex;
  flex-direction:column;
  height:100vh;
}

/* Header */
.header{
  background: var(--primary);
  padding:12px;
  display:flex;
  justify-content: space-between;
  align-items:center;
}

.header h1{
  margin:0;
  font-size:1.2rem;
  color:white;
}

/* Vista 3D */
#scope{
  flex:1;
  background:#0b0d11;
}

/* Controles */
.controls{
  background: var(--panel);
  padding:15px;
  display:flex;
  flex-direction:column;
  gap:15px;
}

/* Cada slider */
.control{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.control label{
  font-size:0.85rem;
  color: var(--muted);
  display:flex;
  justify-content:space-between;
}

/* Sliders */
input[type="range"]{
  -webkit-appearance:none;
  width:100%;
  height:6px;
  border-radius:5px;
  background:#2a2f3a;
}

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background: var(--primary);
}