:root { color-scheme: dark; }
html, body { 
  height: 100%; 
  margin: 0; 
  background:#000; 
  color:#fff; 
  font-family: 'Courier New', Courier, monospace, Roboto, sans-serif; 
}

h3.section{
  font-size: 0.8em;
  font-weight: lighter;
  letter-spacing: 0.3em;
  font-family: Arial, Helvetica, sans-serif;
}

#panel {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 350px; padding: 20px; overflow: auto;
  background: rgb(10, 10, 10); z-index: 9999;
  line-height: 2.8; font-size: 12px; box-sizing: border-box;
  border-right: 1px solid rgba(255,255,255,0.06);
}

.panel-header { 
  display: flex; 
  justify-content: center;   /* center horizontally */
  align-items: center;       /* center vertically inside header */
  gap: 8px; 
  margin-bottom: 8px; 
}

.logo { 
  display: block;
  margin: 0 auto;            /* ensures horizontal centering */
  max-width: 55%;            /* controls size */
  height: auto;              /* keep aspect ratio */
  padding: 70px;
}


.section { margin: 10px 0 4px; font-weight: 700; letter-spacing:.04em; }

.row { 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:20px; 
  margin:5px 0; 
  margin-top: 10px;
  margin-bottom: 10px;
}

 /* Style span labels inside .row */
.row span {
  flex: 0 0 90px;         /* fixed width */
  font-size: 11px;        /* smaller text */
  color: #ccc;            /* softer color */
  letter-spacing: 0.05em; /* slight tracking */
  line-height: 3em;
  text-transform: uppercase;
}
 
.group { 
  background: rgba(255, 255, 255, 0.03); 
  padding:10px; 
  margin:6px 0; 
  border: 1px solid rgba(255, 255, 255, 0.15); /* subtle border */
}

input[type="range"] { 
  width: 100%; 
}

select, input[type="number"] {
  width: 10%; padding: 6px;
  display: flex;
  justify-content: space-between;
  background:#0f0f12; color:#fff; border:1px solid rgba(255,255,255,0.12);
}

input[type="text"] {
  width: 90%; padding: 6px;
  display: flex;
  justify-content: space-between;
  background:#0f0f12; color:#fff; border:1px solid rgba(255,255,255,0.12);
}

.btn {
  width:100%; padding:8px; margin-top:6px;
  background:#1e1e1e; color:#fff; border:1px solid rgba(255,255,255,0.15); border-radius:0px; cursor:pointer;
}
.btn:hover { background:#2a2a33; }

/* DIVIDER */

.divider{
  border-top:0.5px solid rgba(229, 229, 229, 0.944);
padding-top: 40px;
}

/* INPUT */

/* Align radio buttons with text and add spacing */
input[type="radio"] {
  appearance: none;      /* remove default style */
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 15px;
  height: 15px;
  border: 1px solid rgba(255,255,255,0.6);
  background: #000000;
  cursor: pointer;
  position: relative;
}

/* Checked state */
input[type="radio"]:checked {
  background: #ffffff;   /* fill color when selected */
  border-color: #ffffff;
}
/* Style the label so the whole area is clickable */
label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  color: #fff;
  border-radius: 0px;
}

/* Optional: highlight label when selected */
input[type="radio"]:checked + span {
  color: #ffffff;
  font-weight: bold;
}



/* Sliders */

/* Track */
input[type="range"] {
  -webkit-appearance: none; /* Remove default styling */
  background: transparent; /* Let the pseudo-element draw it */
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: #444; /* Track color */
  border-radius: 0px;
}

input[type="range"]::-moz-range-track {
  height: 6px;
  background: #444;
  border-radius: 0px;
}

/* Thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  background: #ffffff; /* Thumb color */
  border-radius: 0%;
  cursor: pointer;
  margin-top: -5px; /* Align with track */
}

input[type="range"]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  background: #ff6600;
  border-radius: 50%;
  cursor: pointer;
}


/* DROPDOWN SLIDERS */

/* show only selected movement's params */
.group[data-axis] { display: none; }
.group[data-axis].active { display: block; }

.group[data-axis].active {
  animation: fadeIn 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px); /* slightly bigger movement for visibility */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}