.draw-note-overlay{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:hsla(0,0%,100%,.85);border-top:2px solid rgba(156,39,176,.25);bottom:0;box-shadow:0 -8px 32px rgba(115,3,192,.2),0 -4px 16px rgba(115,3,192,.1),inset 0 1px 0 hsla(0,0%,100%,.6);box-sizing:border-box;display:none;flex-direction:column;height:50vh;left:0;max-height:500px;min-height:280px;position:fixed;right:0;transition:all .3s cubic-bezier(.2,.8,.4,1.2);z-index:20000}@media (max-width:768px){.draw-note-overlay{height:45vh;padding:12px 16px 10px}}@media (max-width:480px){.draw-note-overlay{height:40vh;padding:10px 12px 8px}}.draw-note-overlay.visible{animation:slide-up .3s ease-out;display:flex}@keyframes slide-up{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.dark-theme .draw-note-overlay{background:rgba(30,28,48,.98);border-top-color:rgba(156,39,176,.4);box-shadow:0 -8px 32px rgba(115,3,192,.3),0 -4px 16px rgba(115,3,192,.2),inset 0 1px 0 hsla(0,0%,100%,.1)}.draw-note-close{align-items:center;background:linear-gradient(135deg,rgba(156,39,176,.1),rgba(115,3,192,.15));border:1px solid rgba(156,39,176,.25);border-radius:50%;box-shadow:0 2px 8px rgba(115,3,192,.15);color:#9c27b0;cursor:pointer;display:flex;font-size:24px;height:36px;justify-content:center;line-height:1;position:absolute;right:20px;top:16px;transition:all .2s cubic-bezier(.2,.8,.4,1.2);width:36px;z-index:10}.draw-note-close:hover{background:linear-gradient(135deg,rgba(156,39,176,.2),rgba(115,3,192,.25));border-color:rgba(156,39,176,.45);box-shadow:0 4px 12px rgba(115,3,192,.25);transform:scale(1.08) rotate(90deg)}.draw-note-close:active{transform:scale(.95)}.dark-theme .draw-note-close{background:linear-gradient(135deg,rgba(156,39,176,.2),rgba(115,3,192,.25));border-color:rgba(156,39,176,.5);box-shadow:0 2px 10px rgba(115,3,192,.3);color:#e1bee7}.dark-theme .draw-note-close:hover{background:linear-gradient(135deg,rgba(189,113,197,.3),rgba(156,39,176,.35));border-color:rgba(236,56,188,.6);box-shadow:0 4px 16px rgba(115,3,192,.4);color:#fff}.draw-note-content{flex:1;flex-direction:column;margin:0 auto;max-width:720px;min-height:0}.draw-note-content,.draw-note-staff{display:flex;position:relative;width:100%}.draw-note-staff{justify-content:center;margin-bottom:8px}.draw-note-staff:before{color:rgba(156,39,176,.6);font-size:11px;font-weight:600;left:10px;letter-spacing:.5px;position:absolute;text-transform:uppercase;top:-18px}.dark-theme .draw-note-staff:before{color:rgba(206,147,216,.6)}.draw-note-canvas-container{background:transparent;border-radius:16px;max-width:100%;padding:2px 0 0;width:100%}#drawNoteCanvas{border-radius:12px;cursor:pointer;display:block;height:auto;margin:0 auto;max-width:650px;touch-action:manipulation;transition:box-shadow .2s ease;width:100%}#drawNoteCanvas:active{transform:scale(.99)}.draw-note-help{align-self:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);background:rgba(156,39,176,.05);border:1px solid rgba(156,39,176,.15);border-radius:30px;color:rgba(0,0,0,.65);display:inline-block;font-size:13px;margin-top:4px;padding:6px 12px;text-align:center}.draw-note-help u{font-weight:500;text-decoration-color:#9c27b0;text-decoration-thickness:2px}.dark-theme .draw-note-help{background:rgba(156,39,176,.12);border-color:rgba(156,39,176,.25);color:hsla(0,0%,100%,.75)}.dark-theme .draw-note-help u{text-decoration-color:#ec38bc}.swipe-hint{animation:float 3s ease-in-out infinite;background:linear-gradient(135deg,#9c27b0,#7303c0);border-radius:40px;bottom:30px;box-shadow:0 4px 15px rgba(115,3,192,.4),0 0 20px rgba(115,3,192,.2);color:#fff;font-size:14px;font-weight:500;left:50%;padding:8px 16px;pointer-events:none;position:absolute;transform:translateX(-50%);white-space:nowrap;z-index:5}@keyframes float{0%,to{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}.swipe-direction-feedback{align-items:center;animation:fade-out .5s ease forwards;background:rgba(156,39,176,.9);border-radius:50%;box-shadow:0 0 20px rgba(115,3,192,.6),0 0 40px rgba(115,3,192,.3);color:#fff;display:flex;font-size:24px;font-weight:700;height:50px;justify-content:center;pointer-events:none;position:fixed;width:50px;z-index:21000}@keyframes fade-out{0%{opacity:1;transform:scale(1)}70%{opacity:.7;transform:scale(1.2)}to{opacity:0;transform:scale(.8)}}@media (max-width:768px){.draw-note-overlay{height:42vh;padding:16px 18px 14px}.draw-note-close{font-size:22px;height:34px;right:16px;top:14px;width:34px}.draw-note-staff:before{font-size:10px;top:-16px}.draw-note-help{font-size:12px;padding:5px 12px}.swipe-hint{bottom:25px;font-size:12px;padding:6px 14px}}@media (max-width:480px){.draw-note-overlay{height:40vh;padding:14px 14px 12px}.draw-note-close{font-size:20px;height:32px;right:14px;top:12px;width:32px}.draw-note-staff:before{font-size:9px;left:5px;top:-15px}.draw-note-help{font-size:11px;padding:4px 10px}.swipe-hint{display:none}}@keyframes swipe-pulse{0%{filter:drop-shadow(0 0 5px rgba(156,39,176,.5))}50%{filter:drop-shadow(0 0 15px rgba(156,39,176,.8))}to{filter:drop-shadow(0 0 5px rgba(156,39,176,.5))}}.canvas-swipe-active #drawNoteCanvas{animation:swipe-pulse 1.5s infinite}.draw-note-overlay::-webkit-scrollbar{width:6px}.draw-note-overlay::-webkit-scrollbar-track{background:rgba(156,39,176,.05);border-radius:10px}.draw-note-overlay::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#9c27b0,#7303c0);border-radius:10px}.draw-note-overlay::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#7303c0,#9c27b0)}.draw-note-swipe-zone-label{fill:#9c27b0;font-size:11px;font-weight:600}.dark-theme .draw-note-swipe-zone-label{fill:#ce93d8}.swipe-zone-pressed .draw-note-swipe-area{opacity:.8;transform:scale(.98)}.note-preview{transition:all .2s ease}@media (min-width:769px) and (max-width:1024px){.draw-note-overlay{height:44vh}#drawNoteCanvas{max-width:580px}}@media (min-height:900px){.draw-note-overlay{height:38vh}}@media (max-height:600px){.draw-note-overlay{height:50vh}.draw-note-staff:before{display:none}}#draw-note-wrapper{pointer-events:none;position:fixed;transition:none;will-change:left,top;z-index:20000}#draw-note-wrapper .draw-note-overlay{animation:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:none;border-radius:24px;box-shadow:0 20px 40px rgba(0,0,0,.2),0 8px 16px rgba(115,3,192,.3),0 0 0 1px rgba(156,39,176,.2);height:auto;min-width:320px;position:relative;width:auto}.dark-theme #draw-note-wrapper .draw-note-overlay{box-shadow:0 20px 40px rgba(0,0,0,.4),0 8px 16px rgba(115,3,192,.5),0 0 0 1px rgba(156,39,176,.3)}.draw-note-header:active{background:linear-gradient(135deg,rgba(156,39,176,.2),rgba(115,3,192,.25));cursor:grabbing}.draw-note-header.dragging{opacity:.9;transform:scale(1.02)}.draw-note-title{align-items:center;display:flex;gap:8px}.draw-note-title:before{content:"🎵";font-size:18px;opacity:.9}@media (max-width:768px){#draw-note-wrapper .draw-note-overlay{min-width:280px}}@media (max-width:480px){#draw-note-wrapper .draw-note-overlay{min-width:260px}.draw-note-header{padding:1px}.draw-note-title{font-size:14px}.draw-note-title:before{font-size:16px}}@keyframes draw-note-appear{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}#draw-note-wrapper[style*="display: block"] .draw-note-overlay{animation:draw-note-appear .2s ease-out}#draw-note-drag-handle{position:relative}#draw-note-drag-handle:after{color:rgba(156,39,176,.5);content:"\22EE\22EE";font-family:Segoe UI,Arial Unicode MS,sans-serif;font-size:18px;letter-spacing:2px;pointer-events:none;position:absolute;right:60px;top:50%;transform:translateY(-50%)}.dark-theme #draw-note-drag-handle:after{color:rgba(206,147,216,.5)}#draw-note-drag-handle .draw-note-close{font-size:18px;height:32px;position:static;width:32px}.drag-hint{background:#9c27b0;border-radius:20px;color:#fff;font-size:12px;left:50%;opacity:0;padding:4px 12px;pointer-events:none;position:absolute;top:-30px;transform:translateX(-50%);transition:opacity .3s ease;white-space:nowrap}#draw-note-drag-handle:hover .drag-hint{opacity:1}.dark-theme .draw-note-tool-btn{background:linear-gradient(135deg,rgba(156,39,176,.2),rgba(115,3,192,.25));border-color:rgba(206,147,216,.4)}.dark-theme .draw-note-tool-btn:hover{border-color:rgba(206,147,216,.8);box-shadow:0 4px 15px rgba(115,3,192,.5)}.selected-tool-indicator{align-self:center;background:rgba(156,39,176,.05);border-radius:20px;color:rgba(156,39,176,.8);display:inline-block;font-size:13px;font-weight:500;margin-top:8px;padding:4px 8px;text-align:center}.dark-theme .selected-tool-indicator{background:rgba(156,39,176,.15);color:#ce93d8}@media (max-width:768px){.draw-note-toolbar{padding:10px 16px}.draw-note-tool-btn{height:42px;width:42px}.draw-note-tool-btn img{height:24px;width:24px}}@media (max-width:480px){.draw-note-toolbar{padding:8px 12px}.draw-note-tool-btn{height:38px;width:38px}.draw-note-tool-btn img{height:22px;width:22px}.selected-tool-indicator{font-size:12px}}.dark-theme .draw-note-tool-btn:hover{transform:scale(1.05)}.dark-theme .draw-note-tool-btn img{opacity:.95}.dark-theme .draw-note-tool-btn:hover img{filter:brightness(0) invert(1);opacity:1}.dark-theme .draw-note-tool-btn.active{border-color:transparent;box-shadow:0 4px 20px rgba(206,147,216,.6)}.dark-theme .draw-note-tool-btn.active img{filter:brightness(0) invert(1)}.dark-theme .draw-note-tool-btn img[src*=note],.dark-theme .draw-note-tool-btn img[src*=pause]{filter:brightness(0) invert(.9)}.dark-theme .draw-note-tool-btn.active img[src*=note],.dark-theme .draw-note-tool-btn.active img[src*=pause]{filter:brightness(0) invert(1)}.draw-note-tool-btn img{filter:none}.draw-note-tool-btn.active img{filter:brightness(0) invert(1)!important}.draw-note-toolbar{background:linear-gradient(135deg,hsla(0,0%,100%,.05),rgba(156,39,176,.02));border-bottom:1px solid rgba(156,39,176,.15);display:flex;flex-direction:column;gap:8px;padding:12px 20px;position:relative}.draw-note-toolbar-content{box-sizing:border-box;display:flex;flex-direction:column;gap:2px;padding-right:60px;width:100%}.draw-note-notes-row,.draw-note-rests-row{display:flex;flex-wrap:nowrap;gap:8px;justify-content:center}.draw-note-tool-btn{align-items:center;background:linear-gradient(135deg,rgba(156,39,176,.1),rgba(115,3,192,.15));border:2px solid rgba(156,39,176,.3);border-radius:50%;cursor:pointer;display:flex;flex-shrink:0;height:48px;justify-content:center;padding:0;transition:all .2s cubic-bezier(.2,.8,.4,1.2);width:48px}.draw-note-tool-btn:hover{border-color:rgba(156,39,176,.6);box-shadow:0 4px 12px rgba(115,3,192,.3);transform:scale(1.05)}.draw-note-tool-btn.active{background:linear-gradient(135deg,#9c27b0,#7303c0);border-color:transparent;box-shadow:0 4px 15px rgba(115,3,192,.4);transform:scale(1.1)}.draw-note-tool-btn.active img{filter:brightness(0) invert(1)}.draw-note-tool-btn img{height:28px;opacity:.9;transition:filter .2s ease;width:28px}.draw-note-delete-corner-btn{align-items:center;background:linear-gradient(135deg,#9c27b0,#7303c0);border:2px solid rgba(156,39,176,.3);border-radius:50%;box-shadow:0 4px 15px rgba(115,3,192,.3);color:#fff;cursor:pointer;display:flex;flex-shrink:0;height:48px;justify-content:center;padding:0;position:absolute;right:20px;top:50%;transform:translateY(-50%);transition:all .2s cubic-bezier(.2,.8,.4,1.2);width:48px;z-index:10}.draw-note-delete-corner-btn:hover{background:linear-gradient(135deg,#7303c0,#9c27b0);border-color:rgba(156,39,176,.6);box-shadow:0 6px 20px rgba(115,3,192,.5);transform:translateY(-50%) scale(1.1)}.draw-note-delete-corner-btn:active{box-shadow:0 2px 10px rgba(115,3,192,.4);transform:translateY(-50%) scale(.95)}.draw-note-delete-corner-btn img{filter:brightness(0) invert(1);height:24px;transition:transform .2s ease;width:24px}.draw-note-delete-corner-btn:hover img{transform:rotate(5deg)}.dark-theme .draw-note-tool-btn{background:linear-gradient(135deg,rgba(156,39,176,.3),rgba(115,3,192,.35));border-color:rgba(206,147,216,.5)}.dark-theme .draw-note-tool-btn:hover{border-color:rgba(206,147,216,.9);box-shadow:0 4px 15px rgba(115,3,192,.6)}.dark-theme .draw-note-tool-btn img{filter:brightness(0) invert(.9)}.dark-theme .draw-note-delete-corner-btn,.dark-theme .draw-note-tool-btn.active{background:linear-gradient(135deg,#ce93d8,#9c27b0)}.dark-theme .draw-note-delete-corner-btn{border-color:rgba(206,147,216,.5);box-shadow:0 4px 15px rgba(115,3,192,.5)}.dark-theme .draw-note-delete-corner-btn:hover{background:linear-gradient(135deg,#9c27b0,#ce93d8);border-color:rgba(206,147,216,.8);box-shadow:0 6px 25px rgba(115,3,192,.7)}@media (max-width:992px){.draw-note-toolbar-content{padding-right:55px}.draw-note-tool-btn{height:42px;width:42px}.draw-note-tool-btn img{height:24px;width:24px}.draw-note-delete-corner-btn{height:42px;right:18px;width:42px}.draw-note-delete-corner-btn img{height:20px;width:20px}.draw-note-notes-row,.draw-note-rests-row{gap:6px}}@media (max-width:768px){.draw-note-toolbar{padding:10px 16px}.draw-note-toolbar-content{gap:6px;padding-right:50px}.draw-note-tool-btn{height:38px;width:38px}.draw-note-tool-btn img{height:22px;width:22px}.draw-note-delete-corner-btn{height:38px;right:16px;width:38px}.draw-note-delete-corner-btn img{height:18px;width:18px}.draw-note-notes-row,.draw-note-rests-row{gap:5px}}@media (max-width:600px){.draw-note-toolbar{padding:8px 14px}.draw-note-toolbar-content{gap:5px;padding-right:45px}.draw-note-tool-btn{border-width:1.5px;height:34px;width:34px}.draw-note-tool-btn img{height:20px;width:20px}.draw-note-delete-corner-btn{border-width:1.5px;height:34px;right:14px;width:34px}.draw-note-delete-corner-btn img{height:16px;width:16px}.draw-note-notes-row,.draw-note-rests-row{gap:4px}}@media (max-width:480px){.draw-note-toolbar{padding:8px 12px}.draw-note-toolbar-content{gap:4px;padding-right:42px}.draw-note-tool-btn{border-width:1.5px;height:30px;width:30px}.draw-note-tool-btn img{height:18px;width:18px}.draw-note-delete-corner-btn{border-width:1.5px;height:30px;right:12px;width:30px}.draw-note-delete-corner-btn img{height:14px;width:14px}.draw-note-notes-row,.draw-note-rests-row{gap:3px}}@media (max-width:380px){.draw-note-toolbar{padding:6px 10px}.draw-note-toolbar-content{gap:3px;padding-right:38px}.draw-note-tool-btn{border-width:1.5px;height:26px;width:26px}.draw-note-tool-btn img{height:16px;width:16px}.draw-note-delete-corner-btn{border-width:1.5px;height:26px;right:10px;width:26px}.draw-note-delete-corner-btn img{height:12px;width:12px}.draw-note-notes-row,.draw-note-rests-row{gap:2px}}@media (max-width:320px){.draw-note-toolbar{padding:5px 8px}.draw-note-toolbar-content{gap:2px;padding-right:35px}.draw-note-tool-btn{border-width:1px;height:22px;width:22px}.draw-note-tool-btn img{height:14px;width:14px}.draw-note-delete-corner-btn{border-width:1px;height:22px;right:8px;width:22px}.draw-note-delete-corner-btn img{height:10px;width:10px}.draw-note-notes-row,.draw-note-rests-row{gap:1px}}@keyframes delete-corner-pulse{0%{box-shadow:0 4px 15px rgba(115,3,192,.3)}50%{box-shadow:0 4px 25px rgba(115,3,192,.6)}to{box-shadow:0 4px 15px rgba(115,3,192,.3)}}.draw-note-delete-corner-btn:focus-visible{animation:delete-corner-pulse 2s infinite;outline:2px solid #9c27b0;outline-offset:2px}