body { margin: 0; }
canvas { display: block; }
#controlPanel {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 10px;
    background-color: rgba(0,0,0,0.7);
    color: white;
    font-family: Arial, sans-serif;
    z-index: 100;
}
/* Collapsible details and summary styles */
details {
    background-color: #000;
    color: #00ff00;
    margin-bottom: 5px;
}

summary {
    cursor: pointer;
}

#readoutPanel {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    background-color: rgba(0,0,0,0.7);
    color: blue;
    font-family: Arial, sans-serif;
    white-space: nowrap;
    z-index: 100;
}
#hoverPanel {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    background-color: rgba(0,0,0,0.7);
    color: blue;
    font-family: Arial, sans-serif;
    white-space: nowrap;
    z-index: 100;
    visibility: hidden;
}