body {
    font-family: sans-serif;
    display: grid;
    grid-template-areas:
        "header header"
        "simulation controls"
        "data data";
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    padding: 20px;
}

h1 {
    grid-area: header;
    text-align: center;
}

#simulation-container {
    grid-area: simulation;
    border: 1px solid black;
    display: flex;
    gap: 20px;
    align-items: center;
}

#simulation-canvas {
    flex: 1;
    height: 240px;
}



#controls-container {
    grid-area: controls;
    border: 1px solid black;
    padding: 10px;
}

#data-container {
    grid-area: data;
    border: 1px solid black;
    padding: 10px;
}

.graph {
    flex: 1;
}

.graph canvas {
    width: 100%;
    height: 120px;
}

.control {
    margin-bottom: 10px;
}