body {
            background-color: #1a1a1a;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            font-family: 'Helvetica Neue', sans-serif;
            user-select: none; /* Prevent text selection on keys */
        }

        h1 {
            font-weight: 300;
            margin-bottom: 10px;
        }

        .status-display {
            margin-bottom: 20px;
            font-size: 1.1em;
            color: #888;
            min-height: 25px;
        }

        .piano {
            display: flex;
            position: relative;
            background: #333;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.3), 0 6px 6px rgba(0,0,0,0.25);
        }

        .key {
            border: 1px solid #222;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            padding-bottom: 10px;
            font-size: 1.2em;
            color: #555;
            transition: background-color 0.1s ease;
        }

        .white {
            width: 60px;
            height: 240px;
            background: linear-gradient(to bottom, #fff, #eee);
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .white.active {
            background: linear-gradient(to bottom, #00c6ff, #0072ff);
            color: white;
        }

        .black {
            width: 40px;
            height: 150px;
            background: linear-gradient(to bottom, #333, #000);
            position: absolute;
            margin-left: -20px;
            z-index: 2;
            color: #ccc;
            border-radius: 0 0 4px 4px;
        }
        
        .black.active {
            background: linear-gradient(to bottom, #00c6ff, #0072ff);
            box-shadow: 0 0 10px #00c6ff;
        }

        /* Positioning black keys */
        .key[data-note="C#4"] { left: 60px; }
        .key[data-note="D#4"] { left: 120px; }
        .key[data-note="F#4"] { left: 240px; }
        .key[data-note="G#4"] { left: 300px; }
        .key[data-note="A#4"] { left: 360px; }
        .key[data-note="C#5"] { left: 480px; }
        .key[data-note="D#5"] { left: 540px; }


        .controls {
            margin-top: 30px;
            display: flex;
            gap: 15px;
        }

        .btn {
            padding: 12px 25px;
            font-size: 1em;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            color: white;
            transition: all 0.2s ease;
            box-shadow: 0 4px 6px rgba(0,0,0,0.2);
        }
        
        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .record-btn {
            background-color: #dc3545;
        }
        .record-btn.recording {
            background-color: #007bff;
            animation: pulse 1.5s infinite;
        }
        
        .play-btn {
            background-color: #28a745;
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(0, 123, 255, 0); }
            100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
        }