:root {
            --bg-color: #f4f4f4;
            --piano-white: #fffff0;
            --piano-black: #222;
            --highlight: #ff6b6b;
            --border: #333;
        }

        body {
            font-family: sans-serif;
            background: var(--bg-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        h2 { margin-bottom: 10px; }
        
        /* Container for the demo */
        .widget-container {
            margin-bottom: 40px;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            width: 1000px;
            display: flex;
            justify-content: center;
            
        .superscript {
          vertical-align: super;
          font-size: 0.7em; /* Or 'smaller' */
        }            
        }

        /* --- PIANO CSS --- */
        .piano {
            position: relative;
            height: 120px;
            user-select: none;
            display: flex;
        }

        .key {
            border: 1px solid var(--border);
            border-radius: 0 0 4px 4px;
            cursor: pointer;
            position: relative;
            z-index: 1;
            transition: background 0.1s;
        }

        .key.white {
            width: 40px;
            height: 100%;
            background: var(--piano-white);
        }

        .key.black {
            width: 24px;
            height: 65%;
            background: var(--piano-black);
            position: absolute; /* Overlays white keys */
            z-index: 2;
            margin-left: -12px; /* Center on the line between white keys */
        }

        .key.active {
            background: var(--highlight) !important;
        }
        
        /* Specific override for active black keys to keep them dark but tinted */
        .key.black.active {
            background: #d63030 !important;
        }

        /* --- STAFF CSS --- */
        .staff-container svg {
            width: 100%;
            height: 250px;
        }
        
        .note-head {
            fill: black;
            stroke: none;
        }
        
        .note-accidental {
            font-family: serif;
            font-size: 24px;
            fill: black;
        }
        
        .staff-line {
            stroke: #666;
            stroke-width: 1;
        }
        
        .bar-line {
            stroke: #333;
            stroke-width: 2;
        }
        
        .clef-text {
            font-family: 'Times New Roman', serif;
            font-size: 50px;
            fill: #333;
        }

        /* Controls */
        .controls {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        button {
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
        }