body {
    font-family: sans-serif;
    display: flex; /* Make body a flex container */
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center items horizontally */
    margin: 0; /* Remove default body margin */
}
h1, h2 {
    text-align: center; /* Center the headings as well */
    width: 100%; /* Ensure headings span full width to center effectively */
}
.tile-container {
    display: flex;
    gap: 5px; /* Keep gap for tiles in the palette */
    border: 0px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    width: 800px; /* This will be centered now within the body's flex context */
    overflow-x: auto;
}
.tile {
    cursor: grab;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: 80px;
    transition: none; /* No transition for width changes to avoid resizing */
}
/* Style for tiles specifically in the palette */
.tile-palette {
    border: 1px solid #aaa;
    box-shadow: 2px 2px 5px #888888;
    padding: 10px; /* Keep padding for tiles in the palette */
}
.tile img {
    max-width: 100%;
    max-height: 100%;
    margin-bottom: 5px;
}
.assembly-row, #reference-area { /* Apply common styling to assembly and reference areas */
    display: flex;
    border: 2px dashed #bbb;
    padding: 10px;
    min-height: 100px;
    margin-bottom: 10px;
    width: 800px; /* Corresponds to tilewidth for a whole note - this will be centered */
    overflow-x: auto;
    align-items: center; /* Vertically align items in the row */
}
.row-controls {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 10px; /* Keep consistent gap between elements in controls */
    width: 800px; /* Match the width of the assembly rows for consistent centering */
}
.clear-button {
    padding: 8px 12px;
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.play-button {
    padding: 8px 12px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
/* Style for the output span within each row, making it less prominent */
.row-output {
    font-size: 0.9em;
    color: #777;
    text-align: left; /* Align text to the left within its own space */
    flex-grow: 1; /* Allow it to take up available space */
}