finer decimal places in steps from “0.01” to “0.001”. also, fix animation speed minimum to be static zero if slider decreases accordingly. also, fine-tune animation step to be more precise in step on slider adjustment. also, add zoom-factor for svg container slider bellow animation speed slider, so you can set it to defaul value of 50% widh within equal aspect-ratio and be able to zoom it in/out from 10% to 100% towards viewport size and auto-resize on viewport or window resizings. output full koude without any comments or descriptions or explanaions. also, notice some hypothetical performance issues in koude and fix them all. told to output full koude, but it seems you rejecting to listen. fuck openai.: <html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  html, body {
    height: 100%;
    margin: 0;
  }
  body {
    display: flex;
    flex-direction: column;
  }
  #svg-container {
    flex-grow: 1;
    position: relative;
  }
  svg {
    width: 100%;
    height: 100%;
  }
  #controls {
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border: none;
    z-index: 10;
  }
  .panel {
    display: none;
  background-color: rgba(255, 255, 255, 0.8); 
  padding: 10px;
  border-radius: 5px;
  position: absolute;
  top: 40px; 
  right: 0;
  width: 250px; 
  }
</style>
</head>
<body>

<div id="svg-container">
<svg viewBox="0 0 500 500" preserveAspectRatio="xMidYMid meet">
<defs>
<filter id="whiteNoiseFilter">
<feTurbulence type="fractalNoise" baseFrequency="0.55" numOctaves="1" result="whiteNoise"></feTurbulence>
<feComponentTransfer in="whiteNoise" result="brightNoise">
<feFuncA type="discrete" tableValues="1 0"></feFuncA>
</feComponentTransfer>
<feColorMatrix in="brightNoise" type="matrix"
values="1 1 1 0 0 1 1 1 0 0 1 1 1 0 0 0 0 0 1 0" result="whiteBrightNoise"></feColorMatrix>
</filter>
<filter id="blackNoiseFilter">
<feTurbulence type="fractalNoise" baseFrequency="0.58" numOctaves="1" result="blackNoise"></feTurbulence>
<feComponentTransfer in="blackNoise" result="darkNoise">
<feFuncA type="discrete" tableValues="0 1"></feFuncA>
</feComponentTransfer>
<feColorMatrix in="darkNoise" type="matrix"
values="0.001 0.001 0.001 0 0 0.001 0.001 0.001 0 0 0.001 0.001 0.001 0 0 0 0 0 1 0" result="blackDarkNoise"></feColorMatrix>
</filter>
</defs>
<rect width="500" height="500" fill="black"></rect>
<rect width="500" height="500" filter="url(#whiteNoiseFilter)" fill="white"></rect>
<rect width="500" height="500" filter="url(#blackNoiseFilter)"></rect>
</svg>
<button id="controls">Menu</button>
<div class="panel">
  White Noise Frequency Range: <br>
  <input type="number" id="whiteMinFreq" value="0.50" step="0.01"> to
  <input type="number" id="whiteMaxFreq" value="0.70" step="0.01"> | Step:
  <input type="number" id="whiteStepFreq" value="0.01" step="0.01">
  <label><input type="checkbox" id="whiteNbFreq" checked> Enable Animation</label><br>
  Black Noise Frequency Range: <br>
  <input type="number" id="blackMinFreq" value="0.50" step="0.01"> to
  <input type="number" id="blackMaxFreq" value="0.70" step="0.01"> | Step:
  <input type="number" id="blackStepFreq" value="0.01" step="0.01">
  <label><input type="checkbox" id="blackNbFreq" checked> Enable Animation</label><br>
  <label for="speedSlider">Animation Speed: </label>
  <input type="range" id="speedSlider" min="1" max="60" value="60">
</div>
</div>

<script>
document.getElementById('controls').onclick = function() {
  var panel = document.querySelector('.panel');
  if (panel.style.display === 'none' || panel.style.display === '') {
    panel.style.display = 'block';
  } else {
    panel.style.display = 'none';
  }
};
const whiteNoiseFilter = document.querySelector('#whiteNoiseFilter feTurbulence');
const blackNoiseFilter = document.querySelector('#blackNoiseFilter feTurbulence');
const whiteFreq = {
  min: document.getElementById('whiteMinFreq'),
  max: document.getElementById('whiteMaxFreq'),
  step: document.getElementById('whiteStepFreq'),
  checkbox: document.getElementById('whiteNbFreq'),
  current: 0.55,
  direction: 1
};
const blackFreq = {
  min: document.getElementById('blackMinFreq'),
  max: document.getElementById('blackMaxFreq'),
  step: document.getElementById('blackStepFreq'),
  checkbox: document.getElementById('blackNbFreq'),
  current: 0.58,
  direction: 1
};
const speedSlider = document.getElementById('speedSlider');
let frameRate = speedSlider.value;
speedSlider.addEventListener('input', function() {
  frameRate = this.value;
});
function updateFrequency() {
  if (whiteFreq.checkbox.checked) {
    animateFrequency(whiteFreq, whiteNoiseFilter);
  }
  if (blackFreq.checkbox.checked) {
    animateFrequency(blackFreq, blackNoiseFilter);
  }
  setTimeout(function() {
    requestAnimationFrame(updateFrequency);
  }, 1000 / frameRate);
}
function animateFrequency(freq, filterElem) {
  const minValue = parseFloat(freq.min.value);
  const maxValue = parseFloat(freq.max.value);
  const stepSize = parseFloat(freq.step.value);
  if (freq.current >= maxValue || freq.current <= minValue) freq.direction *= -1;
  freq.current += freq.direction * stepSize;
  freq.current = Math.min(Math.max(freq.current, minValue), maxValue);
  filterElem.setAttribute('baseFrequency', freq.current.toFixed(2));
}
updateFrequency();
</script>

</body>
</html>