styles.css

body,html{margin:0;padding:0;height:100%;overflow:hidden}body{background-color:#000;color:#fff;font-family:Arial,sans-serif;background-repeat:no-repeat;background-position:center center;background-size:cover;display:flex;flex-direction:column}#heatmapContainer{flex-grow:1;width:100%;position:relative}#controlPanel{position:absolute;top:20px;left:20px;z-index:1000;background-color:rgba(0,0,0,.7);padding:15px;border-radius:5px;transition:opacity .3s ease}.hidden{opacity:0;pointer-events:none}button,input[type=number],select{margin:5px;padding:5px 10px;font-size:14px}button{cursor:pointer;background-color:#4caf50;color:#fff;border:none;border-radius:4px}#resetBackgroundButton{background-color:#f44336}#clearHeatmapButton{background-color:#2196f3}.pulse,.ripple{position:absolute;border-radius:50%;pointer-events:none;width:20px;height:20px}.ripple{transform:scale(0);animation:ripple 2s forwards}.pulse{animation:pulse 1s forwards}.float{position:absolute;border-radius:50%;pointer-events:none;width:20px;height:20px;transition:all 2s ease-out}@keyframes ripple{to{transform:scale(10);opacity:0}}@keyframes pulse{0%{transform:scale(0);opacity:1}100%{transform:scale(20);opacity:0}}