<!---
         .iLU1L:....   sL  .   BB                                                          sBBBBBBBrBBB.  :YQBBBBBi                            
               .SQQP2r:         LBQZBBbvi.DB..U                                                    :BBBBBBqKBBBBBB.       :gBBg                        
            iZBq:                BDSr    .ivILBB::                                              .7BBBBM:BBr 7BBB               jBD.                    
          7dP.                    g1         rBBBYB.7q..                                     :gBBXBBB   r    BB                  :gP                   
        iJ:                       .:           BBBBBBBBBBBj                              :jBBBBBBQjB         gY                     1L                 
      .i                                        BBBISv.rYBBBBBBQ5Yv                     BBZBS   BBB          M                        .7               
     :.                                         .BB        BEBBBBBBB                   BBBR.    iB1                                                    
                                                 .B           BBBBBBB.     .ZBbB1    vBB        PB                                                     
   

                                            :L        .  DB:BBBBS    IBBBBBi idB5        .S                                                      
                                                                7     Pr5JPi.BBBBBBg7S         :                                                       
                                                                 vBdBBBBBBBBBBZBBS                                                               
                                                                     BBBI QBBBvZBBBBBB:                                                                
                                                                  BBBR7KBBM7ZBBBBBBB                                                                
                                                                    :BBB..BBBBBBBBQ  KBB                                                               
                                                                   :BBD  BBBBBBBB    JBr                                                               
                                                                   QBB  BBQBBBBBBQ    BB                                                               
                                                                  .BB: BBBBQvBBBBB.   :rr                                                              
                                                                  BBB  dB U. BBBBB    iBB.                                                             
                                                                  BB   BBX7U BBBBg    :BB:                                                             
                                                                  BB  DBBBLBBRBBBB     bBZ                                                             
                                                                 7BB BBBBBB1   BBBJ    jB7                                                             
                                                                  BB BBBBBB    :BBB    rB.                                                             
                                                                  QK BBBBB      BBBX   rB                                                              
                                                                  BB SZBBB       BBB   BB                                                              
                                                                  BBB rBBQ       dBBi bBB                                                              
                                                                  BB :vBBBP      BBBriQBB                                                              
                                                                   BBrr7MB.     .BBB rBBR                                                              
                                                                       ZqB      gBB  .I.                                                               
                                                                        BBv    PBB                                                                     
                                                                        :BQ    BBB                                                                     
                                                                         BBr    YB                                                                     
                                                                         QrK  .rE1                                                                     
                                                                         : Xi   r.                                                                     
                                                                         BLL:   i                                                                      
                                                                          s.    i                                                                      
                                       ────────────────────────────────────────────────────────────────────────────
                                        ▓│              ...::[ SCROLL DOWN TO VIEW SOURCE ]::...                 │▓
                                        ▓│──────────────────────────────────────────────────────────────────────│▓
                                       ──────┘         ░░ (Incase curiosity kills the cat): ░░            └──────
                                         │                                                                      │
                                         │        document       │
                                         │                                                                      │
                                         │      “To my Loveinge good ffrend & contreymann Mr. Wm Shackespere,” dated “ffrom the Bell in Carter Lane the 25 October 1598” and signed “Ryc. Quyney.”      │
                                         └──────────────────────────────────────────────────────────────────────┘


╠───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╣
║--------------------------------------------------------------DREAMWEAVER-----------------------------------------------------------║
╠───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╣
║                               *      *           *    *      *       *         *              *            *        *        *      * ║
║    *      *         *                 *    *            *        *        *           *   *      *     *       *         *       *    ║
║                *          *      *                *         *         *    _,'|   *         _.-''``-...___..--';)    *      *         ║
║   *    *   *                           *      *         *        *        /_ \'.      __..-' ,      ,--...--'''                   *   ║
║                    *           *     *     *        *        *        *  <\    .`--'''       `     /'           *      *       *      ║
║       *      *            *                      *       *        *       `-';'               ;   ; ;    *    *                       ║
║  *      *                      *    *    *    *               *     __...--''     ___...--_..'  .;.'              *     *          *  ║
║                    *   *                             *     *    *  (,__....----'''       (,..--''         *                   *       ║
║    *       *    *             *        ╔═══════════════════════════════════════════════════════════╗  *          *     *              ║
║                        *           *   ║                                                           ║        *               *    *    ║
║        /\         *       /\  *        ║   FIRST WITCH 
When shall we three meet again?
In thunder, lightning, or in rain?
SECOND WITCH 
When the hurly-burly’s done,
When the battle’s lost and won.
THIRD WITCH 
That will be ere the set of sun.
FIRST WITCH 
Where the place?
SECOND WITCH  Upon the heath.
THIRD WITCH 
There to meet with Macbeth.
FIRST WITCH  I come, Graymalkin.
SECOND WITCH  Paddock calls.
THIRD WITCH  Anon.
ALL 
Fair is foul, and foul is fair;
Hover through the fog and filthy air.
They exit. *    *       *               *    ║
║                   *          *         ║                                                           ║                    *             ║
║   *     *    *                         ╚═══════════════════════════════════════════════════════════╝  *        *              *       ║
║                  *      *         *     *         *   *        *         *      *         *    *                    *             *   ║
║ *   *     *                  *       *    *    *         *           *      *        *             *       *            *             ║
║                  *      *                        *   *        *                *           *           *       *            *         ║
║  *      *                       *     *    *            *           *   *            *         *                     *          *     ║
║                *         *         *          *     *      *     *          *    *       *         *      *     *        *            ║
╠───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╣
║--------------------------------------------------------------INFORMATION----------------------------------------------------------║
╠───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╣


	🎬
 --->
<!DOCTYPE html>
<html lang="en" class="👗">
	  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!--ink city layout 007
 -Created by www.inkrealm.info 

 (inspired by desire 
 and the spirit of innovation)
    ja: "私の個人情報を販売しない(カリフォルニア州消費者プライバシー法)",
	Частная личная информация, Informações pessoais privadas, 
Persónulegar upplýsingar, 
Private personal information, ព័ត៌មានផ្ទាល់ខ្លួនឯកជន
	(Verbraucherschutzgesetz der Präfektur Kalifornien)
        en: "Do Not Sell My Info (KKKalifornia)"---> 
 
    <title data-rh="true">www.inkrealm.info </title>
     <meta data-rh="true" name="description" content="A writer's website, featuring an extensive list of films about the craft with posters and original art as well as artifacts. Video and audio downloads. The TWO SKINNY GIRLS often places covers and even new songs on the inkrealm.info/twoskinnygirls page. Inkrealm includes writing software and A unique musical notation appp. A Portal to escape the ordinary. Eclectic and frequently updated."/><meta data-rh="true" property="og:url" content="https://www.inkrealm.info"/><meta data-rh="true" property="og:type" content="website"/><meta data-rh="true" property="og:title" content="INKREALM - writing, music, and the visual arts"/>
<meta http-equiv="onion-location" content="http://ukc5me2fw7qihv4wklsms7h7wd27vxx3tgjrns7eycmjgmbnwwpvucyd.onion" />
	
<meta property="tiktok:app_id" content="@twoskinnygirls" />
<meta name="twitter:site" content="@inkrealm" />
<meta name="slack-app-id" content="f060RUD44R3" />

  <link rel="shortcut icon" href="./Images//favicon.ico" />

    <script src="https://cdn.jsdelivr.net/npm/@tonejs/midi@2.0.28/build/Midi.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/music-fonts@latest/fonts/bravura.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
        color: #f0f0f0;
        min-height: 100vh;
        padding: 20px;
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
        background-color: rgba(34, 34, 34, 0.95);
        border-radius: 15px;
        padding: 25px;
        box-shadow: 0 10px 30px rgba(255, 51, 51, 0.3);
        border: 1px solid #444;
    }

    header {
        text-align: center;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 2px solid #ff3333;
    }

    h1 {
        font-size: 2.8rem;
        background: linear-gradient(90deg, #ff3333, #ff6666, #cc0000);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        margin-bottom: 10px;
        font-weight: 700;
        text-shadow: 0 0 20px rgba(255, 51, 51, 0.3);
    }

    .subtitle {
        font-size: 1.1rem;
        color: #aaa;
        margin-bottom: 20px;
    }

    .controls-section {
        background-color: rgba(40, 40, 40, 0.9);
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 25px;
        border: 1px solid #555;
    }

    .section-title {
        font-size: 1.4rem;
        margin-bottom: 15px;
        color: #ff3333;
        display: flex;
        align-items: center;
        gap: 10px;
        text-shadow: 0 0 10px rgba(255, 51, 51, 0.5);
    }

    .section-title i {
        font-size: 1.2rem;
    }

    .controls-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 15px;
    }

    .control-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .control-label {
        font-size: 0.9rem;
        color: #ccc;
        font-weight: 500;
    }

    .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    button {
        background-color: #2a2a2a;
        color: white;
        border: 1px solid #555;
        padding: 10px 15px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: 100px;
    }

    button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(255, 51, 51, 0.4);
        border-color: #ff3333;
        background-color: #333;
    }

    .btn-primary {
        background-color: #ff3333;
        border-color: #ff3333;
    }

    .btn-primary:hover {
        background-color: #cc0000;
        box-shadow: 0 4px 15px rgba(255, 51, 51, 0.6);
    }

    .btn-danger {
        background-color: #cc0000;
        border-color: #cc0000;
    }

    .btn-danger:hover {
        background-color: #990000;
        box-shadow: 0 4px 15px rgba(204, 0, 0, 0.6);
    }

    .btn-warning {
        background-color: #666;
        border-color: #888;
    }

    .btn-warning:hover {
        background-color: #777;
        box-shadow: 0 4px 12px rgba(136, 136, 136, 0.4);
    }

    .btn-info {
        background-color: #444;
        border-color: #666;
    }

    .btn-info:hover {
        background-color: #555;
        box-shadow: 0 4px 12px rgba(102, 102, 102, 0.4);
    }

    .btn-active {
        background-color: #ff6666 !important;
        border-color: #ff3333 !important;
        box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 51, 51, 0.5);
    }

    .note-duration-btn {
        font-family: 'Bravura', sans-serif;
        font-size: 1.8rem;
        padding: 8px 12px;
        min-width: 60px;
    }

    .accidental-btn {
        font-size: 1.2rem;
        padding: 10px 15px;
    }

    input[type="number"], select {
        background-color: #1a1a1a;
        color: white;
        border: 1px solid #555;
        padding: 10px 12px;
        border-radius: 6px;
        font-size: 1rem;
        width: 100%;
    }

    input[type="number"]:focus, select:focus {
        outline: none;
        border-color: #ff3333;
        box-shadow: 0 0 8px rgba(255, 51, 51, 0.5);
    }

    .status-indicator {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 15px;
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 6px;
        margin-top: 15px;
        border: 1px solid #444;
    }

    .status-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #666;
    }

    .status-dot.active {
        background-color: #ff3333;
        animation: pulse 1.5s infinite;
        box-shadow: 0 0 10px rgba(255, 51, 51, 0.8);
    }

    @keyframes pulse {
        0% { opacity: 1; box-shadow: 0 0 10px rgba(255, 51, 51, 0.8); }
        50% { opacity: 0.6; box-shadow: 0 0 20px rgba(255, 51, 51, 0.5); }
        100% { opacity: 1; box-shadow: 0 0 10px rgba(255, 51, 51, 0.8); }
    }

    .staff-container {
        background-color: #e8e8e8; /* Light grey parchment */
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 25px;
        position: relative;
        overflow: hidden;
        border: 2px solid #444; /* Dark grey border */
        box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 51, 51, 0.2);
    }

    .staff-wrapper {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px 0;
        scrollbar-width: thin;
        scrollbar-color: #ff3333 #2a2a2a;
    }

    .staff-wrapper::-webkit-scrollbar {
        height: 10px;
    }

    .staff-wrapper::-webkit-scrollbar-track {
        background: #2a2a2a;
        border-radius: 5px;
    }

    .staff-wrapper::-webkit-scrollbar-thumb {
        background-color: #ff3333;
        border-radius: 5px;
    }

    .staff-wrapper::-webkit-scrollbar-thumb:hover {
        background-color: #cc0000;
    }

    .staff {
        position: relative;
        width: 2000px;
        height: 220px;
        background-color: #e8e8e8;
        border-radius: 8px;
        margin: 0 auto;
    }

    .treble-staff, .bass-staff {
        position: absolute;
        width: 100%;
        height: 100px;
        left: 0;
        background-color: transparent;
    }

    .treble-staff {
        top: 10px;
    }

    .bass-staff {
        bottom: 10px;
    }

    .staff-line {
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #000;
    }

    .treble-staff .staff-line:nth-child(1) { top: 20px; }
    .treble-staff .staff-line:nth-child(2) { top: 40px; }
    .treble-staff .staff-line:nth-child(3) { top: 60px; }
    .treble-staff .staff-line:nth-child(4) { top: 80px; }
    .treble-staff .staff-line:nth-child(5) { top: 100px; }

    .bass-staff .staff-line:nth-child(1) { top: 20px; }
    .bass-staff .staff-line:nth-child(2) { top: 40px; }
    .bass-staff .staff-line:nth-child(3) { top: 60px; }
    .bass-staff .staff-line:nth-child(4) { top: 80px; }
    .bass-staff .staff-line:nth-child(5) { top: 100px; }

    .clef {
        position: absolute;
        left: 30px;
        font-family: 'Bravura', sans-serif;
        font-size: 80px;
        color: #000;
        z-index: 1;
    }

    .treble-clef {
        top: 30px;
    }

    .bass-clef {
        top: 30px;
    }

    .note {
        position: absolute;
        font-family: 'Bravura', sans-serif;
        font-size: 48px;
        color: #1a1a1a;
        cursor: move;
        z-index: 10;
        transition: transform 0.2s ease;
        user-select: none;
        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
    }

    .note:hover {
        transform: scale(1.1);
        filter: brightness(0.8) drop-shadow(2px 2px 3px rgba(255, 51, 51, 0.4));
    }

    .note.selected {
        outline: 3px solid #ff3333;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(255, 51, 51, 0.6);
    }

    .note.deletable {
        outline: 3px solid #cc0000;
        box-shadow: 0 0 10px rgba(204, 0, 0, 0.8);
    }

    .note-dragging {
        opacity: 0.8;
        z-index: 100;
    }

    .accidental {
        position: absolute;
        font-family: 'Bravura', sans-serif;
        font-size: 32px;
        color: #ff3333;
        left: -25px;
        top: 5px;
        filter: drop-shadow(1px 1px 1px rgba(255, 51, 51, 0.3));
    }

    .playback-arrow {
        position: absolute;
        top: 0;
        width: 0;
        height: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 24px solid #ff3333;
        z-index: 5;
        transition: left 0.05s linear;
        filter: drop-shadow(0 0 8px rgba(255, 51, 51, 0.8));
    }

    .ledger-line {
        position: absolute;
        height: 2px;
        background-color: #000;
        width: 60px;
    }

    .footer-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
        margin-top: 25px;
        padding-top: 20px;
        border-top: 1px solid #555;
    }

    .keyboard-shortcuts {
        margin-top: 25px;
        padding: 15px;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 8px;
        font-size: 0.9rem;
        color: #aaa;
        border: 1px solid #444;
    }

    .shortcut-item {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        border-bottom: 1px dashed #555;
    }

    .shortcut-key {
        background-color: #2a2a2a;
        padding: 2px 8px;
        border-radius: 4px;
        font-family: monospace;
        color: #ff3333;
        border: 1px solid #444;
    }

    @media (max-width: 768px) {
        .container {
            padding: 15px;
        }
        
        h1 {
            font-size: 2rem;
        }
        
        .controls-grid {
            grid-template-columns: 1fr;
        }
        
        .staff {
            width: 1500px;
            height: 180px;
        }
        
        button {
            min-width: auto;
            flex-grow: 1;
        }
    }
</style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-music"></i> Symphony Sketch</h1>
            <p class="subtitle">Create, play, and export your musical compositions</p>
        </header>
        
        <div class="controls-section">
            <h2 class="section-title"><i class="fas fa-edit"></i> Note Controls</h2>
            
            <div class="controls-grid">
                <div class="control-group">
                    <div class="control-label">Note Duration</div>
                    <div class="btn-group">
                        <button id="whole-note" class="note-duration-btn" title="Whole Note (1)">𝅝</button>
                        <button id="half-note" class="note-duration-btn" title="Half Note (2)">𝅗𝅥</button>
                        <button id="quarter-note" class="note-duration-btn btn-active" title="Quarter Note (4)">𝅘𝅥</button>
                        <button id="eighth-note" class="note-duration-btn" title="Eighth Note (8)">𝅘𝅥𝅮</button>
                        <button id="sixteenth-note" class="note-duration-btn" title="Sixteenth Note (16)">𝅘𝅥𝅯</button>
                    </div>
                </div>
                
                <div class="control-group">
                    <div class="control-label">Accidentals</div>
                    <div class="btn-group">
                        <button id="natural-btn" class="accidental-btn btn-active" title="Natural (N)">♮</button>
                        <button id="sharp-btn" class="accidental-btn" title="Sharp (S)">♯</button>
                        <button id="flat-btn" class="accidental-btn" title="Flat (F)">♭</button>
                    </div>
                </div>
                
                <div class="control-group">
                    <div class="control-label">Staff Selection</div>
                    <div class="btn-group">
                        <button id="treble-btn" class="btn-active" title="Treble Staff">Treble Clef</button>
                        <button id="bass-btn" title="Bass Staff">Bass Clef</button>
                        <button id="both-staff-btn" title="Both Staves">Both</button>
                    </div>
                </div>
            </div>
            
            <div class="status-indicator">
                <div class="status-dot"></div>
                <span id="status-text">Ready to compose. Click on the staff to add notes.</span>
            </div>
        </div>
        
        <div class="controls-section">
            <h2 class="section-title"><i class="fas fa-play-circle"></i> Playback & Tools</h2>
            
            <div class="controls-grid">
                <div class="control-group">
                    <div class="control-label">Playback Controls</div>
                    <div class="btn-group">
                        <button id="play-btn" class="btn-primary" title="Play (Space)"><i class="fas fa-play"></i> Play</button>
                        <button id="stop-btn" class="btn-danger" title="Stop (Esc)"><i class="fas fa-stop"></i> Stop</button>
                        <button id="record-audio-btn" class="btn-danger" title="Record Audio"><i class="fas fa-microphone"></i> Record</button>
                    </div>
                </div>
                
                <div class="control-group">
                    <div class="control-label">Tempo (BPM)</div>
                    <input type="number" id="tempo-input" min="40" max="240" value="120">
                </div>
                
                <div class="control-group">
                    <div class="control-label">Edit Tools</div>
                    <div class="btn-group">
                        <button id="select-mode-btn" class="btn-active" title="Select/Move Notes (V)"><i class="fas fa-mouse-pointer"></i> Select</button>
                        <button id="delete-mode-btn" class="btn-warning" title="Delete Notes (D)"><i class="fas fa-trash"></i> Delete</button>
                        <button id="undo-btn" title="Undo (Ctrl+Z)"><i class="fas fa-undo"></i> Undo</button>
                        <button id="clear-btn" class="btn-danger" title="Clear All (C)"><i class="fas fa-broom"></i> Clear</button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="staff-container">
            <h2 class="section-title"><i class="fas fa-sliders-h"></i> Composition Staff</h2>
            <div class="staff-wrapper">
                <div class="staff">
                    <div id="treble-staff" class="treble-staff">
                        <!-- Treble staff lines and clef added via JS -->
                    </div>
                    <div id="bass-staff" class="bass-staff">
                        <!-- Bass staff lines and clef added via JS -->
                    </div>
                    <div id="playback-arrow" class="playback-arrow"></div>
                </div>
            </div>
        </div>
        
        <div class="controls-section">
            <h2 class="section-title"><i class="fas fa-download"></i> Export & Share</h2>
            <div class="footer-controls">
                <button id="download-midi-btn" class="btn-info" title="Download as MIDI file"><i class="fas fa-file-download"></i> Download MIDI</button>
                <button id="download-wav-btn" class="btn-info" title="Download as WAV audio"><i class="fas fa-music"></i> Download Audio</button>
                <button id="copy-share-btn" class="btn-info" title="Copy shareable link"><i class="fas fa-share-alt"></i> Share</button>
                <button id="print-score-btn" class="btn-info" title="Print score"><i class="fas fa-print"></i> Print</button>
            </div>
        </div>
        
        <div class="keyboard-shortcuts">
            <h3 class="section-title"><i class="fas fa-keyboard"></i> Keyboard Shortcuts</h3>
            <div class="shortcut-item">
                <span>Space</span>
                <span class="shortcut-key">Play/Pause</span>
            </div>
            <div class="shortcut-item">
                <span>1-5</span>
                <span class="shortcut-key">Note durations (1=Whole, 2=Half, etc.)</span>
            </div>
            <div class="shortcut-item">
                <span>N, S, F</span>
                <span class="shortcut-key">Natural, Sharp, Flat</span>
            </div>
            <div class="shortcut-item">
                <span>V, D</span>
                <span class="shortcut-key">Select mode, Delete mode</span>
            </div>
            <div class="shortcut-item">
                <span>Ctrl+Z, Ctrl+Y</span>
                <span class="shortcut-key">Undo, Redo</span>
            </div>
            <div class="shortcut-item">
                <span>Esc</span>
                <span class="shortcut-key">Stop playback</span>
            </div>
        </div>
    </div>

    <script>
        // Application state
        const state = {
            selectedDuration: 'quarter',
            selectedAccidental: 'natural',
            selectedStaff: 'both',
            currentMode: 'select', // 'select' or 'delete'
            notes: [],
            history: [],
            historyIndex: -1,
            isPlaying: false,
            isRecording: false,
            audioChunks: [],
            mediaRecorder: null
        };

        // DOM elements
        const trebleStaff = document.getElementById('treble-staff');
        const bassStaff = document.getElementById('bass-staff');
        const playbackArrow = document.getElementById('playback-arrow');
        const statusText = document.getElementById('status-text');
        const statusDot = document.querySelector('.status-dot');
        
        // Note mappings
        const trebleNotes = ['F5', 'E5', 'D5', 'C5', 'B4', 'A4', 'G4', 'F4', 'E4', 'D4', 'C4'];
        const bassNotes = ['A3', 'G3', 'F3', 'E3', 'D3', 'C3', 'B2', 'A2', 'G2', 'F2', 'E2'];
        
        // Note symbols for Bravura font
        const noteSymbols = {
            'whole': '𝅝',
            'half': '𝅗𝅥',
            'quarter': '𝅘𝅥',
            'eighth': '𝅘𝅥𝅮',
            'sixteenth': '𝅘𝅥𝅯'
        };
        
        // Note duration mapping for Tone.js
        const toneDurations = {
            'whole': '1n',
            'half': '2n',
            'quarter': '4n',
            'eighth': '8n',
            'sixteenth': '16n'
        };
        
        // MIDI ticks per duration (assuming 96 PPQ)
        const midiTicks = {
            'whole': 384,
            'half': 192,
            'quarter': 96,
            'eighth': 48,
            'sixteenth': 24
        };

        // Audio context and sampler
        let pianoSampler;
        let activeTransport = null;

        // Initialize the application
        document.addEventListener('DOMContentLoaded', initApp);

        async function initApp() {
            setupStaff();
            setupEventListeners();
            await setupAudio();
            setupKeyboardShortcuts();
            updateStatus('Ready to compose. Click on the staff to add notes.', 'ready');
        }

        function setupStaff() {
            // Create staff lines
            for (let i = 0; i < 5; i++) {
                const trebleLine = document.createElement('div');
                trebleLine.className = 'staff-line';
                trebleLine.style.top = `${40 + i * 20}px`;
                trebleStaff.appendChild(trebleLine);
                
                const bassLine = document.createElement('div');
                bassLine.className = 'staff-line';
                bassLine.style.top = `${40 + i * 20}px`;
                bassStaff.appendChild(bassLine);
            }
            
            // Add clefs
            const trebleClef = document.createElement('div');
            trebleClef.className = 'clef treble-clef';
            trebleClef.innerHTML = '&#119070;';
            trebleStaff.appendChild(trebleClef);
            
            const bassClef = document.createElement('div');
            bassClef.className = 'clef bass-clef';
            bassClef.innerHTML = '&#119074;';
            bassStaff.appendChild(bassClef);
            
            // Add initial ledger line areas
            addLedgerLines();
        }

        function addLedgerLines() {
            // Add some ledger line areas for notes outside the staff
            for (let i = 0; i < 3; i++) {
                // Above treble staff
                const trebleLedger = document.createElement('div');
                trebleLedger.className = 'ledger-line';
                trebleLedger.style.top = `${-10 - i * 20}px`;
                trebleLedger.style.left = '100px';
                trebleStaff.appendChild(trebleLedger);
                
                // Below bass staff
                const bassLedger = document.createElement('div');
                bassLedger.className = 'ledger-line';
                bassLedger.style.top = `${130 + i * 20}px`;
                bassLedger.style.left = '100px';
                bassStaff.appendChild(bassLedger);
            }
        }

        function setupEventListeners() {
            // Note duration buttons
            document.getElementById('whole-note').addEventListener('click', () => selectDuration('whole'));
            document.getElementById('half-note').addEventListener('click', () => selectDuration('half'));
            document.getElementById('quarter-note').addEventListener('click', () => selectDuration('quarter'));
            document.getElementById('eighth-note').addEventListener('click', () => selectDuration('eighth'));
            document.getElementById('sixteenth-note').addEventListener('click', () => selectDuration('sixteenth'));
            
            // Accidental buttons
            document.getElementById('natural-btn').addEventListener('click', () => selectAccidental('natural'));
            document.getElementById('sharp-btn').addEventListener('click', () => selectAccidental('sharp'));
            document.getElementById('flat-btn').addEventListener('click', () => selectAccidental('flat'));
            
            // Staff selection buttons
            document.getElementById('treble-btn').addEventListener('click', () => selectStaff('treble'));
            document.getElementById('bass-btn').addEventListener('click', () => selectStaff('bass'));
            document.getElementById('both-staff-btn').addEventListener('click', () => selectStaff('both'));
            
            // Mode buttons
            document.getElementById('select-mode-btn').addEventListener('click', () => setMode('select'));
            document.getElementById('delete-mode-btn').addEventListener('click', () => setMode('delete'));
            
            // Playback and utility buttons
            document.getElementById('play-btn').addEventListener('click', playComposition);
            document.getElementById('stop-btn').addEventListener('click', stopPlayback);
            document.getElementById('record-audio-btn').addEventListener('click', toggleAudioRecording);
            document.getElementById('undo-btn').addEventListener('click', undoAction);
            document.getElementById('clear-btn').addEventListener('click', clearStaff);
            
            // Export buttons
            document.getElementById('download-midi-btn').addEventListener('click', downloadMIDI);
            document.getElementById('download-wav-btn').addEventListener('click', downloadAudio);
            document.getElementById('copy-share-btn').addEventListener('click', copyShareLink);
            document.getElementById('print-score-btn').addEventListener('click', printScore);
            
            // Staff click handlers
            trebleStaff.addEventListener('click', (e) => handleStaffClick(e, 'treble'));
            bassStaff.addEventListener('click', (e) => handleStaffClick(e, 'bass'));
            
            // Tempo input
            document.getElementById('tempo-input').addEventListener('input', updateTempo);
        }

        function setupKeyboardShortcuts() {
            document.addEventListener('keydown', (e) => {
                // Prevent shortcuts when typing in inputs
                if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
                
                switch(e.key) {
                    case ' ': // Space - play/pause
                        e.preventDefault();
                        if (state.isPlaying) {
                            stopPlayback();
                        } else {
                            playComposition();
                        }
                        break;
                    case '1': selectDuration('whole'); break;
                    case '2': selectDuration('half'); break;
                    case '3': selectDuration('quarter'); break;
                    case '4': selectDuration('eighth'); break;
                    case '5': selectDuration('sixteenth'); break;
                    case 'n': case 'N': selectAccidental('natural'); break;
                    case 's': case 'S': selectAccidental('sharp'); break;
                    case 'f': case 'F': selectAccidental('flat'); break;
                    case 'v': case 'V': setMode('select'); break;
                    case 'd': case 'D': setMode('delete'); break;
                    case 'c': case 'C': 
                        if (e.ctrlKey) break; // Don't interfere with Ctrl+C
                        clearStaff(); 
                        break;
                    case 'z': case 'Z': 
                        if (e.ctrlKey) {
                            e.preventDefault();
                            undoAction();
                        }
                        break;
                    case 'y': case 'Y': 
                        if (e.ctrlKey) {
                            e.preventDefault();
                            redoAction();
                        }
                        break;
                    case 'Escape': stopPlayback(); break;
                }
            });
        }

        async function setupAudio() {
            try {
                updateStatus('Loading piano sounds...', 'loading');
                
                pianoSampler = new Tone.Sampler({
                    urls: {
                        "C2": "C2.mp3",
                        "C#2": "Cs2.mp3",
                        "D2": "D2.mp3",
                        "D#2": "Ds2.mp3",
                        "E2": "E2.mp3",
                        "F2": "F2.mp3",
                        "F#2": "Fs2.mp3",
                        "G2": "G2.mp3",
                        "G#2": "Gs2.mp3",
                        "A2": "A2.mp3",
                        "A#2": "As2.mp3",
                        "B2": "B2.mp3",
                        "C3": "C3.mp3",
                        "C#3": "Cs3.mp3",
                        "D3": "D3.mp3",
                        "D#3": "Ds3.mp3",
                        "E3": "E3.mp3",
                        "F3": "F3.mp3",
                        "F#3": "Fs3.mp3",
                        "G3": "G3.mp3",
                        "G#3": "Gs3.mp3",
                        "A3": "A3.mp3",
                        "A#3": "As3.mp3",
                        "B3": "B3.mp3",
                        "C4": "C4.mp3",
                        "C#4": "Cs4.mp3",
                        "D4": "D4.mp3",
                        "D#4": "Ds4.mp3",
                        "E4": "E4.mp3",
                        "F4": "F4.mp3",
                        "F#4": "Fs4.mp3",
                        "G4": "G4.mp3",
                        "G#4": "Gs4.mp3",
                        "A4": "A4.mp3",
                        "A#4": "As4.mp3",
                        "B4": "B4.mp3",
                        "C5": "C5.mp3"
                    },
                    baseUrl: "https://tonejs.github.io/audio/salamander/",
                    onload: () => {
                        updateStatus('Audio loaded successfully!', 'success');
                        document.getElementById('play-btn').disabled = false;
                    },
                    onerror: (error) => {
                        console.error('Error loading audio samples:', error);
                        updateStatus('Audio samples partially loaded. Some notes may not play.', 'warning');
                        document.getElementById('play-btn').disabled = false;
                    }
                }).toDestination();
                
            } catch (error) {
                console.error('Failed to setup audio:', error);
                updateStatus('Failed to load audio. Please refresh the page.', 'error');
            }
        }

        function selectDuration(duration) {
            state.selectedDuration = duration;
            
            // Update UI
            document.querySelectorAll('.note-duration-btn').forEach(btn => btn.classList.remove('btn-active'));
            document.getElementById(`${duration}-note`).classList.add('btn-active');
            
            updateStatus(`Selected: ${duration} note`, 'info');
        }

        function selectAccidental(accidental) {
            state.selectedAccidental = accidental;
            
            // Update UI
            document.querySelectorAll('.accidental-btn').forEach(btn => btn.classList.remove('btn-active'));
            document.getElementById(`${accidental}-btn`).classList.add('btn-active');
            
            updateStatus(`Selected: ${accidental} accidental`, 'info');
        }

        function selectStaff(staff) {
            state.selectedStaff = staff;
            
            // Update UI
            document.getElementById('treble-btn').classList.remove('btn-active');
            document.getElementById('bass-btn').classList.remove('btn-active');
            document.getElementById('both-staff-btn').classList.remove('btn-active');
            document.getElementById(`${staff}-btn`).classList.add('btn-active');
            
            updateStatus(`Selected: ${staff} staff`, 'info');
        }

        function setMode(mode) {
            state.currentMode = mode;
            
            // Update UI
            document.getElementById('select-mode-btn').classList.remove('btn-active');
            document.getElementById('delete-mode-btn').classList.remove('btn-active');
            document.getElementById(`${mode}-mode-btn`).classList.add('btn-active');
            
            // Update note visuals
            document.querySelectorAll('.note').forEach(note => {
                note.classList.toggle('deletable', mode === 'delete');
            });
            
            updateStatus(`Mode: ${mode}`, 'info');
        }

        function handleStaffClick(event, staffType) {
            // Don't trigger if clicking on a note (note handles its own events)
            if (event.target.closest('.note')) return;
            
            const staff = staffType === 'treble' ? trebleStaff : bassStaff;
            const rect = staff.getBoundingClientRect();
            
            // Calculate position relative to staff
            const x = event.clientX - rect.left + staff.parentElement.scrollLeft;
            const y = event.clientY - rect.top;
            
            // Convert y position to note index (each note is 20px apart)
            const noteIndex = Math.round((y - 40) / 20);
            
            // Check if note index is valid
            const maxNoteIndex = staffType === 'treble' ? trebleNotes.length : bassNotes.length;
            
            if (noteIndex >= 0 && noteIndex < maxNoteIndex) {
                if (state.currentMode === 'delete') {
                    updateStatus('Click on notes to delete them', 'info');
                    return;
                }
                
                // Add the note
                addNote(x, noteIndex, staffType);
                saveToHistory();
            } else {
                updateStatus('Click within the staff to add notes', 'warning');
            }
        }

        function addNote(x, noteIndex, staffType) {
            const staff = staffType === 'treble' ? trebleStaff : bassStaff;
            const noteName = staffType === 'treble' ? trebleNotes[noteIndex] : bassNotes[noteIndex];
            
            // Create note element
            const noteElement = document.createElement('div');
            noteElement.className = 'note';
            noteElement.dataset.id = Date.now() + Math.random().toString(36).substr(2, 9);
            noteElement.dataset.staff = staffType;
            noteElement.dataset.noteIndex = noteIndex;
            noteElement.dataset.noteName = noteName;
            noteElement.dataset.duration = state.selectedDuration;
            noteElement.dataset.accidental = state.selectedAccidental;
            
            // Position the note
            noteElement.style.left = `${x - 20}px`;
            noteElement.style.top = `${noteIndex * 20 + 30}px`;
            
            // Add note symbol
            const noteSymbol = document.createElement('span');
            noteSymbol.textContent = noteSymbols[state.selectedDuration];
            noteSymbol.style.display = 'block';
            noteSymbol.style.textAlign = 'center';
            noteSymbol.style.lineHeight = '48px';
            noteElement.appendChild(noteSymbol);
            
            // Add accidental if needed
            if (state.selectedAccidental !== 'natural') {
                const accidental = document.createElement('div');
                accidental.className = 'accidental';
                accidental.textContent = state.selectedAccidental === 'sharp' ? '♯' : '♭';
                noteElement.appendChild(accidental);
            }
            
            // Add event listeners for dragging
            makeNoteDraggable(noteElement);
            
            // Add to staff
            staff.appendChild(noteElement);
            
            // Store note data
            const noteData = {
                id: noteElement.dataset.id,
                x: x,
                noteIndex: noteIndex,
                staff: staffType,
                noteName: noteName,
                duration: state.selectedDuration,
                accidental: state.selectedAccidental,
                element: noteElement
            };
            
            state.notes.push(noteData);
            
            updateStatus(`Added ${noteName} ${state.selectedDuration} note`, 'success');
        }

        function makeNoteDraggable(noteElement) {
            let isDragging = false;
            let startX, startY, initialLeft, initialTop;
            
            noteElement.addEventListener('mousedown', startDrag);
            noteElement.addEventListener('touchstart', startDragTouch);
            
            function startDrag(e) {
                if (state.currentMode === 'delete') {
                    deleteNote(noteElement);
                    return;
                }
                
                isDragging = true;
                noteElement.classList.add('note-dragging');
                noteElement.classList.add('selected');
                
                startX = e.clientX;
                startY = e.clientY;
                initialLeft = parseFloat(noteElement.style.left);
                initialTop = parseFloat(noteElement.style.top);
                
                document.addEventListener('mousemove', drag);
                document.addEventListener('mouseup', stopDrag);
                
                e.preventDefault();
            }
            
            function startDragTouch(e) {
                if (state.currentMode === 'delete') {
                    deleteNote(noteElement);
                    return;
                }
                
                isDragging = true;
                noteElement.classList.add('note-dragging');
                noteElement.classList.add('selected');
                
                const touch = e.touches[0];
                startX = touch.clientX;
                startY = touch.clientY;
                initialLeft = parseFloat(noteElement.style.left);
                initialTop = parseFloat(noteElement.style.top);
                
                document.addEventListener('touchmove', dragTouch);
                document.addEventListener('touchend', stopDragTouch);
                
                e.preventDefault();
            }
            
            function drag(e) {
                if (!isDragging) return;
                
                const deltaX = e.clientX - startX;
                const deltaY = e.clientY - startY;
                
                // Only allow vertical dragging (changing pitch)
                const newTop = initialTop + deltaY;
                const staffHeight = 100; // Height of staff area
                const noteHeight = 20; // Space between notes
                
                // Calculate new note index
                const newNoteIndex = Math.round((newTop - 30) / noteHeight);
                const maxNoteIndex = noteElement.dataset.staff === 'treble' ? trebleNotes.length : bassNotes.length;
                
                if (newNoteIndex >= 0 && newNoteIndex < maxNoteIndex) {
                    noteElement.style.top = `${newNoteIndex * noteHeight + 30}px`;
                    
                    // Update note data
                    const noteIndex = state.notes.findIndex(n => n.id === noteElement.dataset.id);
                    if (noteIndex !== -1) {
                        state.notes[noteIndex].noteIndex = newNoteIndex;
                        state.notes[noteIndex].noteName = noteElement.dataset.staff === 'treble' 
                            ? trebleNotes[newNoteIndex] 
                            : bassNotes[newNoteIndex];
                        noteElement.dataset.noteIndex = newNoteIndex;
                        noteElement.dataset.noteName = state.notes[noteIndex].noteName;
                    }
                }
            }
            
            function dragTouch(e) {
                if (!isDragging) return;
                
                const touch = e.touches[0];
                const deltaX = touch.clientX - startX;
                const deltaY = touch.clientY - startY;
                
                // Only allow vertical dragging (changing pitch)
                const newTop = initialTop + deltaY;
                const staffHeight = 100;
                const noteHeight = 20;
                
                const newNoteIndex = Math.round((newTop - 30) / noteHeight);
                const maxNoteIndex = noteElement.dataset.staff === 'treble' ? trebleNotes.length : bassNotes.length;
                
                if (newNoteIndex >= 0 && newNoteIndex < maxNoteIndex) {
                    noteElement.style.top = `${newNoteIndex * noteHeight + 30}px`;
                    
                    const noteIndex = state.notes.findIndex(n => n.id === noteElement.dataset.id);
                    if (noteIndex !== -1) {
                        state.notes[noteIndex].noteIndex = newNoteIndex;
                        state.notes[noteIndex].noteName = noteElement.dataset.staff === 'treble' 
                            ? trebleNotes[newNoteIndex] 
                            : bassNotes[newNoteIndex];
                        noteElement.dataset.noteIndex = newNoteIndex;
                        noteElement.dataset.noteName = state.notes[noteIndex].noteName;
                    }
                }
            }
            
            function stopDrag() {
                isDragging = false;
                noteElement.classList.remove('note-dragging');
                setTimeout(() => noteElement.classList.remove('selected'), 300);
                
                document.removeEventListener('mousemove', drag);
                document.removeEventListener('mouseup', stopDrag);
                
                saveToHistory();
            }
            
            function stopDragTouch() {
                isDragging = false;
                noteElement.classList.remove('note-dragging');
                setTimeout(() => noteElement.classList.remove('selected'), 300);
                
                document.removeEventListener('touchmove', dragTouch);
                document.removeEventListener('touchend', stopDragTouch);
                
                saveToHistory();
            }
            
            // Click to select (not drag)
            noteElement.addEventListener('click', (e) => {
                if (state.currentMode === 'delete') {
                    deleteNote(noteElement);
                    return;
                }
                
                // Toggle selection
                noteElement.classList.toggle('selected');
                
                // If clicking with Ctrl/Cmd, add to selection
                if (!e.ctrlKey && !e.metaKey) {
                    document.querySelectorAll('.note.selected').forEach(otherNote => {
                        if (otherNote !== noteElement) otherNote.classList.remove('selected');
                    });
                }
            });
        }

        function deleteNote(noteElement) {
            const noteId = noteElement.dataset.id;
            const noteIndex = state.notes.findIndex(n => n.id === noteId);
            
            if (noteIndex !== -1) {
                state.notes.splice(noteIndex, 1);
                noteElement.remove();
                updateStatus('Note deleted', 'info');
                saveToHistory();
            }
        }

        async function playComposition() {
            if (state.notes.length === 0) {
                updateStatus('No notes to play', 'warning');
                return;
            }
            
            try {
                await Tone.start();
                
                if (state.isPlaying) {
                    stopPlayback();
                    return;
                }
                
                state.isPlaying = true;
                updateStatus('Playing...', 'playing');
                
                // Update UI
                document.getElementById('play-btn').innerHTML = '<i class="fas fa-pause"></i> Pause';
                document.getElementById('play-btn').classList.add('btn-warning');
                
                // Sort notes by position
                const sortedNotes = [...state.notes].sort((a, b) => a.x - b.x);
                
                // Set tempo
                const tempo = parseInt(document.getElementById('tempo-input').value) || 120;
                Tone.Transport.bpm.value = tempo;
                
                // Show playback arrow
                playbackArrow.style.display = 'block';
                playbackArrow.style.top = '0px';
                
                // Schedule notes
                const startTime = Tone.now();
                let currentTime = startTime;
                
                sortedNotes.forEach((note, index) => {
                    // Calculate note start time based on horizontal position
                    // Notes further to the right start later
                    const timeOffset = (note.x / 50) * 0.5; // Adjust scaling as needed
                    const noteStartTime = startTime + timeOffset;
                    
                    // Play note
                    const noteName = getFullNoteName(note.noteName, note.accidental);
                    const duration = toneDurations[note.duration];
                    
                    pianoSampler.triggerAttackRelease(noteName, duration, noteStartTime);
                    
                    // Schedule arrow movement
                    Tone.Draw.schedule(() => {
                        playbackArrow.style.left = `${note.x}px`;
                        playbackArrow.style.top = note.staff === 'treble' ? '0px' : '90px';
                    }, noteStartTime);
                    
                    // If last note, schedule arrow hide
                    if (index === sortedNotes.length - 1) {
                        const noteEndTime = noteStartTime + Tone.Time(duration).toSeconds();
                        Tone.Draw.schedule(() => {
                            playbackArrow.style.display = 'none';
                            state.isPlaying = false;
                            updateStatus('Playback finished', 'success');
                            
                            // Reset UI
                            document.getElementById('play-btn').innerHTML = '<i class="fas fa-play"></i> Play';
                            document.getElementById('play-btn').classList.remove('btn-warning');
                        }, noteEndTime);
                    }
                });
                
                // Start transport
                Tone.Transport.start();
                activeTransport = Tone.Transport;
                
            } catch (error) {
                console.error('Playback error:', error);
                updateStatus('Playback error: ' + error.message, 'error');
                state.isPlaying = false;
                
                // Reset UI
                document.getElementById('play-btn').innerHTML = '<i class="fas fa-play"></i> Play';
                document.getElementById('play-btn').classList.remove('btn-warning');
            }
        }

        function stopPlayback() {
            if (activeTransport) {
                activeTransport.stop();
                activeTransport.cancel();
                activeTransport = null;
            }
            
            state.isPlaying = false;
            playbackArrow.style.display = 'none';
            
            updateStatus('Playback stopped', 'info');
            
            // Reset UI
            document.getElementById('play-btn').innerHTML = '<i class="fas fa-play"></i> Play';
            document.getElementById('play-btn').classList.remove('btn-warning');
        }

        function getFullNoteName(baseName, accidental) {
            if (accidental === 'natural') return baseName;
            
            const noteLetter = baseName.charAt(0);
            const octave = baseName.charAt(1);
            
            if (accidental === 'sharp') {
                return `${noteLetter}#${octave}`;
            } else if (accidental === 'flat') {
                // Handle edge cases
                if (noteLetter === 'C') return `Cb${octave}`;
                if (noteLetter === 'F') return `Fb${octave}`;
                return `${noteLetter}b${octave}`;
            }
            
            return baseName;
        }

        function updateTempo() {
            const tempo = document.getElementById('tempo-input').value;
            updateStatus(`Tempo set to ${tempo} BPM`, 'info');
        }

        function saveToHistory() {
            // Remove any redo history beyond current point
            state.history = state.history.slice(0, state.historyIndex + 1);
            
            // Save current state
            const snapshot = state.notes.map(note => ({
                id: note.id,
                x: note.x,
                noteIndex: note.noteIndex,
                staff: note.staff,
                noteName: note.noteName,
                duration: note.duration,
                accidental: note.accidental
            }));
            
            state.history.push(snapshot);
            state.historyIndex++;
            
            // Limit history size
            if (state.history.length > 50) {
                state.history.shift();
                state.historyIndex--;
            }
        }

        function undoAction() {
            if (state.historyIndex > 0) {
                state.historyIndex--;
                restoreFromHistory();
                updateStatus('Undo', 'info');
            } else {
                updateStatus('Nothing to undo', 'warning');
            }
        }

        function redoAction() {
            if (state.historyIndex < state.history.length - 1) {
                state.historyIndex++;
                restoreFromHistory();
                updateStatus('Redo', 'info');
            } else {
                updateStatus('Nothing to redo', 'warning');
            }
        }

        function restoreFromHistory() {
            // Clear current notes
            document.querySelectorAll('.note').forEach(note => note.remove());
            state.notes = [];
            
            // Restore from history
            const snapshot = state.history[state.historyIndex];
            
            snapshot.forEach(noteData => {
                const staff = noteData.staff === 'treble' ? trebleStaff : bassStaff;
                const noteElement = document.createElement('div');
                noteElement.className = 'note';
                noteElement.dataset.id = noteData.id;
                noteElement.dataset.staff = noteData.staff;
                noteElement.dataset.noteIndex = noteData.noteIndex;
                noteElement.dataset.noteName = noteData.noteName;
                noteElement.dataset.duration = noteData.duration;
                noteElement.dataset.accidental = noteData.accidental;
                
                noteElement.style.left = `${noteData.x - 20}px`;
                noteElement.style.top = `${noteData.noteIndex * 20 + 30}px`;
                
                const noteSymbol = document.createElement('span');
                noteSymbol.textContent = noteSymbols[noteData.duration];
                noteSymbol.style.display = 'block';
                noteSymbol.style.textAlign = 'center';
                noteSymbol.style.lineHeight = '48px';
                noteElement.appendChild(noteSymbol);
                
                if (noteData.accidental !== 'natural') {
                    const accidental = document.createElement('div');
                    accidental.className = 'accidental';
                    accidental.textContent = noteData.accidental === 'sharp' ? '♯' : '♭';
                    noteElement.appendChild(accidental);
                }
                
                makeNoteDraggable(noteElement);
                staff.appendChild(noteElement);
                
                state.notes.push({
                    id: noteData.id,
                    x: noteData.x,
                    noteIndex: noteData.noteIndex,
                    staff: noteData.staff,
                    noteName: noteData.noteName,
                    duration: noteData.duration,
                    accidental: noteData.accidental,
                    element: noteElement
                });
            });
        }

        function clearStaff() {
            if (state.notes.length === 0) {
                updateStatus('Staff is already empty', 'warning');
                return;
            }
            
            if (confirm('Clear all notes from the staff?')) {
                document.querySelectorAll('.note').forEach(note => note.remove());
                state.notes = [];
                saveToHistory();
                updateStatus('Staff cleared', 'info');
            }
        }

        async function toggleAudioRecording() {
            if (!state.isRecording) {
                startAudioRecording();
            } else {
                stopAudioRecording();
            }
        }

        async function startAudioRecording() {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ 
                    audio: {
                        echoCancellation: false,
                        noiseSuppression: false,
                        autoGainControl: false
                    } 
                });
                
                state.mediaRecorder = new MediaRecorder(stream);
                state.audioChunks = [];
                
                state.mediaRecorder.ondataavailable = (event) => {
                    if (event.data.size > 0) {
                        state.audioChunks.push(event.data);
                    }
                };
                
                state.mediaRecorder.onstop = () => {
                    const audioBlob = new Blob(state.audioChunks, { type: 'audio/wav' });
                    
                    // Automatically download
                    const url = URL.createObjectURL(audioBlob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `symphony_sketch_${Date.now()}.wav`;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                    
                    updateStatus('Recording saved', 'success');
                };
                
                state.mediaRecorder.start();
                state.isRecording = true;
                
                document.getElementById('record-audio-btn').innerHTML = '<i class="fas fa-stop-circle"></i> Stop';
                document.getElementById('record-audio-btn').classList.remove('btn-danger');
                document.getElementById('record-audio-btn').classList.add('btn-warning');
                
                updateStatus('Recording audio...', 'recording');
                
            } catch (error) {
                console.error('Recording error:', error);
                updateStatus('Recording failed: ' + error.message, 'error');
            }
        }

        function stopAudioRecording() {
            if (state.mediaRecorder && state.isRecording) {
                state.mediaRecorder.stop();
                state.isRecording = false;
                
                document.getElementById('record-audio-btn').innerHTML = '<i class="fas fa-microphone"></i> Record';
                document.getElementById('record-audio-btn').classList.remove('btn-warning');
                document.getElementById('record-audio-btn').classList.add('btn-danger');
                
                updateStatus('Recording stopped', 'info');
            }
        }

        function downloadMIDI() {
            if (state.notes.length === 0) {
                updateStatus('No notes to export', 'warning');
                return;
            }
            
            try {
                // Create MIDI file
                const midi = new Midi();
                const track = midi.addTrack();
                
                // Sort notes by position
                const sortedNotes = [...state.notes].sort((a, b) => a.x - b.x);
                
                let currentTime = 0;
                sortedNotes.forEach(note => {
                    const midiNote = noteToMidiNumber(getFullNoteName(note.noteName, note.accidental));
                    const durationTicks = midiTicks[note.duration];
                    
                    // Calculate time based on x position
                    const time = Math.floor(note.x / 10) * 48; // Convert x position to ticks
                    
                    track.addNote({
                        midi: midiNote,
                        time: time / 96, // Convert ticks to seconds (96 ticks per quarter note)
                        duration: durationTicks / 96
                    });
                });
                
                // Add tempo
                const tempo = parseInt(document.getElementById('tempo-input').value) || 120;
                track.setTempo(tempo);
                
                // Generate MIDI data
                const midiData = midi.toArray();
                const blob = new Blob([midiData], { type: 'audio/midi' });
                const url = URL.createObjectURL(blob);
                
                // Download
                const a = document.createElement('a');
                a.href = url;
                a.download = `symphony_sketch_${Date.now()}.mid`;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
                
                updateStatus('MIDI file downloaded', 'success');
                
            } catch (error) {
                console.error('MIDI export error:', error);
                updateStatus('MIDI export failed: ' + error.message, 'error');
            }
        }

        function noteToMidiNumber(noteName) {
            // Convert note name to MIDI number (C4 = 60)
            const noteMap = {
                'C': 0, 'C#': 1, 'Db': 1, 'D': 2, 'D#': 3, 'Eb': 3,
                'E': 4, 'F': 5, 'F#': 6, 'Gb': 6, 'G': 7, 'G#': 8,
                'Ab': 8, 'A': 9, 'A#': 10, 'Bb': 10, 'B': 11
            };
            
            const match = noteName.match(/^([A-G][b#]?)(-?\d+)$/);
            if (!match) return 60; // Default to C4
            
            const [, note, octave] = match;
            const noteValue = noteMap[note] || 0;
            const octaveValue = parseInt(octave);
            
            return (octaveValue + 1) * 12 + noteValue;
        }

        async function downloadAudio() {
            updateStatus('Audio download coming soon...', 'info');
            // This would require more complex audio rendering
            // For now, users can use the recording feature
        }

        function copyShareLink() {
            // For a real implementation, you would need a backend to store compositions
            // For now, just copy a simple message
            const compositionData = JSON.stringify({
                notes: state.notes.map(n => ({
                    x: n.x,
                    noteIndex: n.noteIndex,
                    staff: n.staff,
                    duration: n.duration,
                    accidental: n.accidental
                })),
                tempo: document.getElementById('tempo-input').value
            });
            
            // Encode to base64 for URL
            const encoded = btoa(compositionData);
            const shareUrl = `${window.location.origin}${window.location.pathname}?composition=${encoded}`;
            
            navigator.clipboard.writeText(shareUrl).then(() => {
                updateStatus('Share link copied to clipboard', 'success');
            }).catch(() => {
                updateStatus('Failed to copy link', 'error');
            });
        }

        function printScore() {
            window.print();
        }

        function updateStatus(message, type) {
            statusText.textContent = message;
            
            // Update status dot color
            statusDot.classList.remove('active');
            const colors = {
                'ready': '#4CAF50',
                'loading': '#FF9800',
                'success': '#4CAF50',
                'error': '#F44336',
                'warning': '#FF9800',
                'info': '#2196F3',
                'playing': '#9C27B0',
                'recording': '#F44336'
            };
            
            statusDot.style.backgroundColor = colors[type] || '#4CAF50';
            
            if (type === 'playing' || type === 'recording') {
                statusDot.classList.add('active');
            }
            
            // Log to console for debugging
            console.log(`[${type.toUpperCase()}] ${message}`);
        }

        // Initialize on load
        window.addEventListener('load', initApp);
    </script>
</body>
</html>