body {
    margin: 0;
    padding: 0;
    background: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: sans-serif;
    color: white;
    touch-action: none;
    user-select: none;
}

#app-container {
    text-align: center;
    width: 100%;
    max-width: 800px;
    padding: 20px;
}

h1 {
    margin-bottom: 10px;
    color: #eee;
}

p {
    margin-bottom: 20px;
    color: #aaa;
    font-size: 0.9rem;
}

.piano {
    position: relative;
    display: flex;
    justify-content: center;
    height: 300px;
    background: #111;
    padding: 10px 10px 0 10px;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    /* Ensure keys don't spill */
}

.key {
    position: relative;
    border-radius: 0 0 5px 5px;
    cursor: pointer;
    transition: background 0.1s, transform 0.05s;
}

.key.white {
    flex: 1;
    background: white;
    border: 1px solid #ccc;
    z-index: 1;
    height: 100%;
    box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.1);
}

.key.white:active,
.key.white.active {
    background: #f0f0f0;
    transform: translateY(2px);
    box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.2);
}

.key.black {
    width: 6%;
    /* Adjust based on visuals */
    height: 60%;
    background: black;
    z-index: 2;
    margin-left: -3%;
    /* Pull back to overlap */
    margin-right: -3%;
    /* Pull next key */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* Adjust margin logic: The HTML structure is interleaved. 
   To make black keys sit ON TOP of the border between white keys, 
   we can use negative margins.
   However, with display:flex, standard flow places them side by side.
   Trick: Use width 0 for black keys in flex flow, but explicit width and overflow visible?
   Or better: Position absolute is standard for black keys in a relative container.
   But current HTML structure is flat list.
   Let's try a different CSS approach for interleaved:
   White keys take up Width. Black keys take up 0 width in flow but render with width?
*/

/* Re-thinking CSS for interleaved div structure */
.piano {
    display: flex;
    /* Only for white keys? No */
    /* Let's use Grid or simple flex with absolute black keys? 
       Actually, if I put black keys inside white keys? No.
       Let's stick to the current HTML but use a specific flex hack.
       
       Make ALL keys flex items? 
       If I make all keys flex items, they sit side by side.
       C (white) | C# (black) | D (white) ...
       This looks like a Harpsichord with inverted colors if widths are same.
       We want C# to be ON TOP of C and D.
       
       Solution: 
       Make only WHITE keys flex: 1.
       Position BLACK keys absolutely relative to the piano container? 
       Yes, but we need to know WHERE.
       
       Let's change HTML to separate them? No, I already wrote HTML. 
       Let's use the `margin` hack I started:
       
       .key.white { flex: 1; }
       .key.black { width: 0; overflow: visible; z-index: 2; }
       
       Inside .key.black:
       .key.black::after { content: ''; display:block; width: 40px; height: 200px; background: black; position: relative; left: -20px; }
       
       Wait, let's just use absolute positioning for black keys based on `nth-child` or percentages.
       Since we know the order:
       C, C#, D, D#, E, F, F#, G, G#, A, A#, B, C
       
       Total 8 white keys. 12.5% each.
       C# is between 1 and 2. Left: 12.5% - (blackWidth/2)
       D# is between 2 and 3. Left: 25% - ...
       
       Let's update CSS to use absolute for black keys.
    */
}

.key.white {
    flex: 1;
    background: white;
    border: 1px solid #999;
    height: 100%;
}

.key.black {
    position: absolute;
    width: 6%;
    height: 60%;
    background: #111;
    z-index: 10;
    border-radius: 0 0 3px 3px;
    /* Manual positioning */
}

/* 8 white keys: 
   C4 (1), D4 (2), E4 (3), F4 (4), G4 (5), A4 (6), B4 (7), C5 (8)
   Width of one white key approx 100% / 8 = 12.5%
*/

.key[data-note="C#4"] {
    left: 8.5%;
}

/* 12.5 - (6/1.5) approx? Let's tune visually. 
   Center of split is 12.5%. Black key width 6%. Center - 3% = 9.5%? 
*/
.key[data-note="C#4"] {
    left: 9.5%;
}

.key[data-note="D#4"] {
    left: 22%;
}

/* 25% - 3% = 22% */
.key[data-note="F#4"] {
    left: 47%;
}

/* 50% - 3% = 47% (F is 4th key -> 4*12.5 = 50%) */
.key[data-note="G#4"] {
    left: 59.5%;
}

/* 62.5% - 3% */
.key[data-note="A#4"] {
    left: 72%;
}

/* 75% - 3% */

.key.black:active,
.key.black.active {
    background: #333;
    transform: translateY(2px);
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
}