body {
   margin: 0;
   overflow: hidden;
   background: black;
   color: red;
   font-family: monospace;
 }

 #ui {
   position: absolute;
   top: 10px;
   right: 10px;
   padding: 6px;
   background: rgba(0, 0, 0, 0.75);
   border-radius: 8px;
   z-index: 9999;
   font-size: 10px;
   line-height: 1.4;
   max-width: 300px;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
 }

 .panel-title {
   font-weight: bold;
   margin-bottom: 4px;
 }

 .sub-title {
   font-size: 11px;
   opacity: 0.8;
   margin-top: 4px;
   margin-bottom: 2px;
 }

 .block {
   margin-bottom: 10px;
   padding: 6px;
   border-radius: 6px;
   border: 1px solid rgba(0, 0, 255, 1.00);
 }

 .block-source1 {
   border-color: rgba(0, 0, 255, 1.0);
 }

 .block-source2 {
   border-color: rgba(0, 0, 255, 1.0);
 }

 .block-volume {
   border-color: rgba(0, 0, 255, 1.0);
 }

 .block-source1 .panel-title {
   color: red;
 }

 .block-source2 .panel-title {
   color: red;
 }

 .block-volume .panel-title {
   color: red;
 }

 .slider-row {
   display: flex;
   align-items: center;
   margin: 2px 0;
   gap: 6px;
 }

 .slider-row label {
   flex: 0 0 44px;
   /* fixed width label */
 }

 .slider-row input[type="checkbox"] {
  flex: 0 0 auto;
}

 .slider-row input[type="range"] {
   flex: 1;
 }

 #labels {
   margin-top: 6px;
 }


 /* ----- SLIDER STYLE (green theme) ----- */

 /* WebKit browsers (Chrome, Edge, Safari) */
 input[type="range"] {
   -webkit-appearance: none;
   width: 100%;
   height: 4px;
   background: rgba(0, 0, 255, 0.3);
   /* track color */
   border-radius: 4px;
   outline: none;
 }

 /* Track */
 input[type="range"]::-webkit-slider-runnable-track {
   height: 4px;
   background: rgba(0, 0, 255, 0.4);
   border-radius: 4px;
 }

 /* Thumb (the circle) */
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   height: 14px;
   width: 14px;
   background: #0000ff;
   /* bright green */
   border-radius: 50%;
   cursor: pointer;
   margin-top: -5px;
   /* centers thumb on the track */
 }

 /* Firefox */
 input[type="range"]::-moz-range-track {
   height: 4px;
   background: rgba(0, 0, 255, 0.4);
   border-radius: 4px;
 }

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

 /* Style for the material dropdown */
 #materialSelect {
   background: black;
   /* dropdown background */
   color: red;
   /* text color */
   border: 1px solid red;
   /* optional: red border */
   padding: 4px 6px;
   border-radius: 4px;
   font-size: 12px;
 }

 /* Optional: dropdown arrow color (for Chrome/WebKit) */
 #materialSelect::-ms-expand {
   display: none;
   /* hide Windows arrow */
 }

 #materialSelect {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-image:
     linear-gradient(45deg, transparent 50%, red 50%),
     linear-gradient(135deg, red 50%, transparent 50%),
     linear-gradient(to right, black, black);
   background-position:
     calc(100% - 12px) calc(50% - 4px),
     calc(100% - 6px) calc(50% - 4px),
     100% 0;
   background-size:
     6px 6px,
     6px 6px,
     1.5em 100%;
   background-repeat: no-repeat;
 }


 /* ----- TITLE OVERLAYS ----- */

 #titleOverlay {
   position: absolute;
   top: 12px;
   left: 50%;
   transform: translateX(-50%);
   color: red;
   font-size: 20px;
   font-weight: bold;
   z-index: 99999;
   pointer-events: none;
   /* allows clicking through */
   background: rgba(0, 0, 0, 1.00);
   /* black background */
   padding: 2px 8px;
   /* spacing around text */
 }

 #creditOverlay {
   position: absolute;
   bottom: 24px;
   left: 50%;
   transform: translateX(-50%);
   color: red;
   font-size: 14px;
   opacity: 1.0;
   z-index: 99999;
   pointer-events: none;
   background: rgba(0, 0, 0, 1.00);
   /* black background */
   padding: 2px 8px;
   /* spacing around text */
 }


 #disclaimerOverlay {
   position: absolute;
   bottom: 6px;
   left: 50%;
   transform: translateX(-50%);
   color: red;
   font-size: 10px;
   opacity: 1.0;
   z-index: 99999;
   pointer-events: none;
   background: rgba(0, 0, 0, 1.00);
   /* black background */
   padding: 2px 8px;
   /* spacing around text */
 }