*{box-sizing:border-box;margin:0;padding:0}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility}button,input{font:inherit}button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline-offset:2px;outline:2px solid #89b4fa}body{color:#cdd6f4;background:#11111b;height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}#root{flex-direction:column;height:100dvh;display:flex}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.toolbar{z-index:1;background:#1e1e2e;border-bottom:1px solid #313244;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;display:flex;position:relative}.toolbar-section{border-right:1px solid #45475a;align-items:center;gap:4px;padding-right:8px;display:flex}.toolbar-section:last-child{border-right:none}.toolbar-label{color:#6c7086;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;margin-right:4px;font-size:10px}.toolbar-group{gap:2px;display:flex}.toolbar-btn{color:#cdd6f4;cursor:pointer;background:#313244;border:1px solid #45475a;border-radius:4px;justify-content:center;align-items:center;min-width:32px;height:30px;padding:4px 8px;font-size:13px;transition:all .15s;display:flex}.toolbar-btn:hover:not(:disabled){background:#45475a;border-color:#585b70}.toolbar-btn:disabled{opacity:.3;cursor:not-allowed}.toolbar-btn.active{color:#1e1e2e;background:#89b4fa;border-color:#89b4fa}.toolbar-btn.note-icon-btn{min-width:35px;height:30px;padding:1px 4px}.chord-tone-picker select{color:#cdd6f4;background:#181825;border:1px solid #45475a;border-radius:4px;max-width:64px;height:30px;padding:2px 5px;font-size:10px}.toolbar-btn.edit-action-btn{gap:5px;min-width:62px;padding-inline:7px;font-size:11px;font-weight:650}.notation-glyph{-webkit-font-smoothing:antialiased;justify-content:center;align-items:center;font-family:Bravura,Academico,serif;font-style:normal;font-weight:400;line-height:1;display:inline-flex}.duration-glyph{width:22px;height:24px;font-size:26px}.whole-note-glyph{transform:translateY(-2px)}.stemmed-note-glyph{transform:translateY(8px)}.rest-glyph,.accidental-glyph{font-size:27px}.dynamic-glyph{min-width:23px;font-size:28px}.articulation-glyph{min-width:25px;font-size:29px}.dotted-note-glyph{align-items:center;width:27px;height:24px;display:inline-flex;position:relative}.dotted-note-glyph .augmentation-dot-glyph{font-size:17px;position:absolute;top:6px;right:0}.pedal-action-btn{white-space:nowrap;min-width:58px;padding-inline:7px;font-size:11px;font-weight:650}.slur-tool-btn{position:relative}.slur-tool-btn.pending{box-shadow:0 0 0 2px #89b4fa47}.slur-step{color:#1e1e2e;background:#f9e2af;border-radius:999px;place-items:center;width:15px;height:15px;font-size:9px;font-weight:800;display:grid;position:absolute;top:-5px;right:-4px}.toolbar-btn.add-btn{color:#a6e3a1;background:#1e4620;border-color:#2d6930}.toolbar-btn.add-btn:hover{background:#2d6930}.toolbar-btn.danger-btn{color:#f38ba8;background:#4e2028;border-color:#6e2d38}.toolbar-btn.danger-btn:hover{background:#6e2d38}.toolbar-settings-group,.note-names-controls,.sheet-setting-label{align-items:center;display:flex}.toolbar-settings-group{gap:6px}.note-names-controls{gap:2px}.note-names-toggle{color:#a6adc8;letter-spacing:.04em;cursor:pointer;background:#313244;border:1px solid #45475a;border-radius:4px;min-width:42px;height:30px;padding:0 7px;font-size:10px;font-weight:800}.note-names-toggle.note-names-below{min-width:46px}.note-names-toggle:hover{color:#cdd6f4;background:#45475a}.note-names-toggle.active{color:#1e1e2e;background:#89b4fa;border-color:#89b4fa}.sheet-setting-label{color:#a6adc8;white-space:nowrap;gap:4px;font-size:10px;font-weight:650}.tempo-input,.key-signature-select,.time-signature-select{box-sizing:border-box;color:#cdd6f4;text-align:center;background:#181825;border:1px solid #45475a;border-radius:4px;outline:none;height:30px;font-size:11px}.tempo-input{width:50px;padding:3px 4px}.key-signature-select{width:54px;padding:3px 6px}.time-signature-select{width:58px;padding:3px 5px}.tempo-input:focus,.key-signature-select:focus,.time-signature-select:focus{border-color:#89b4fa}.tooltip-wrapper{display:inline-flex;position:relative}.tooltip-wrapper:after{content:attr(data-tooltip);color:#cdd6f4;white-space:normal;box-sizing:border-box;pointer-events:none;opacity:0;z-index:1000;background:#11111b;border:1px solid #45475a;border-radius:6px;width:max-content;max-width:min(320px,100vw - 24px);padding:6px 10px;font-size:11px;line-height:1.4;transition:opacity .15s;position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%);box-shadow:0 4px 12px #0006}.tooltip-wrapper:has(>:hover):after{opacity:1;transition-delay:.4s}.tooltip-wrapper:has(>:focus-visible):after{opacity:1;transition-delay:.4s}@media (width<=760px){.toolbar{scrollbar-width:thin;flex-wrap:nowrap;gap:5px;padding:6px 8px;overflow-x:auto}.toolbar-section{flex:none;padding-right:5px}.toolbar-btn,.toolbar-btn.note-icon-btn{min-width:38px;height:38px}.toolbar-btn.edit-action-btn,.pedal-action-btn{min-width:64px}.note-names-toggle,.tempo-input,.key-signature-select,.time-signature-select{height:38px}}.playback-bar{z-index:2;background:#181825;border-bottom:1px solid #313244;grid-template-columns:minmax(180px,1fr) auto minmax(260px,1fr);align-items:center;gap:16px;min-height:52px;padding:8px 16px;display:grid;position:relative}.playback-left,.playback-right{min-width:0}.playback-left{align-items:center;display:flex}.track-navigation{align-items:center;gap:4px;max-width:100%;display:flex}.track-select-label{align-items:center;gap:5px;min-width:0;display:flex}.track-kind-icon{color:#89b4fa;font-size:12px}.track-select{color:#cdd6f4;background:#1e1e2e;border:1px solid #45475a;border-radius:4px;outline:none;width:158px;min-width:0;padding:3px 20px 3px 7px;font-size:11px}.track-select:focus{border-color:#89b4fa}.track-count{color:#6c7086;text-align:center;min-width:25px;font-size:9px}.track-mode-btn{color:#a6adc8;cursor:pointer;background:#313244;border:1px solid #45475a;border-radius:4px;height:24px;padding:0 7px;font-size:10px;font-weight:700}.track-mode-btn.active{color:#89b4fa;background:#89b4fa33;border-color:#89b4fa}.track-mode-btn.active.mute{color:#f38ba8;background:#f38ba829;border-color:#f38ba8}.playback-right{justify-content:flex-end;align-items:center;display:flex}.playback-center{align-items:center;gap:12px;display:flex}.song-title-input{color:#cdd6f4;background:#1e1e2e;border:1px solid #45475a;border-radius:4px;width:min(100%,300px);padding:6px 12px;font-size:16px;font-weight:600}.song-title-input:focus{border-color:#89b4fa;outline:none}.transport-controls{align-items:center;gap:4px;display:flex}.transport-btn{color:#cdd6f4;cursor:pointer;background:#313244;border:1px solid #45475a;border-radius:6px;justify-content:center;align-items:center;width:34px;height:34px;transition:all .15s;display:flex}.transport-btn:hover:not(:disabled){background:#45475a}.transport-btn:disabled{opacity:.3;cursor:not-allowed}.transport-btn.transport-main{border-radius:6px;width:34px;height:34px}.transport-btn.transport-main.play{color:#1e1e2e;background:#89b4fa;border-color:#89b4fa}.transport-btn.transport-main.play:hover{background:#a8c8fb}.transport-btn.transport-main.pause{color:#1e1e2e;background:#f9e2af;border-color:#f9e2af}.transport-btn.transport-main.pause:hover{background:#fbecc5}.transport-btn.transport-main.loading{color:#89b4fa;opacity:1;background:#45475a;border-color:#585b70}.transport-btn.record-btn{color:#a6adc8;gap:5px;width:auto;min-width:34px;padding:0 8px;font-size:10px;font-weight:700}.transport-btn.record-btn .record-dot{background:0 0;border:2px solid #a6adc8;border-radius:50%;width:11px;height:11px}.transport-btn.record-btn.active{color:#f38ba8;background:#f38ba829;border-color:#f38ba8}.transport-btn.record-btn.active .record-dot{background:#f38ba8;border-color:#f38ba8}.transport-btn.loop-btn.active{color:#1e1e2e;background:#a6e3a1;border-color:#a6e3a1}.loading-spinner{border:2px solid;border-right-color:#0000;border-radius:50%;width:17px;height:17px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.bar-counter{color:#a6adc8;text-align:center;white-space:nowrap;min-width:70px;font-size:10px;font-weight:600}@media (prefers-reduced-motion:reduce){.loading-spinner{border-right-color:currentColor;animation:none}}@media (width<=760px){.playback-bar{grid-template-rows:auto auto;grid-template-columns:minmax(120px,1fr) auto;gap:8px;padding:8px 10px}.playback-left{min-width:0}.track-navigation{width:100%;padding-bottom:1px;overflow-x:auto}.track-select{width:min(154px,38vw)}.song-title-input{width:100%;min-width:0}.playback-center{gap:6px}.playback-right{grid-column:1/-1;justify-content:flex-end;gap:8px}.bar-counter{min-width:62px}.transport-btn.record-btn{width:34px;padding:0}.record-label{display:none}}@media (width<=420px){.playback-bar{grid-template-columns:minmax(100px,1fr) auto}.transport-btn,.transport-btn.transport-main{width:36px;height:36px}.song-title-input{padding-inline:8px;font-size:14px}}.song-manager{background:#181825;border-right:1px solid #313244;flex-direction:column;width:240px;height:100%;display:flex;overflow:hidden}.song-manager-header{border-bottom:1px solid #313244;padding:12px}.song-manager-header h3{color:#cdd6f4;margin:0 0 8px;font-size:14px}.song-manager-actions{gap:4px;display:flex}.sm-btn{color:#cdd6f4;cursor:pointer;background:#313244;border:1px solid #45475a;border-radius:4px;flex:1;padding:4px 10px;font-size:12px}.sm-btn:hover{background:#45475a}.song-list{flex:1;padding:4px;overflow-y:auto}.song-item{border-radius:4px;margin-bottom:2px;padding:0;position:relative}.song-item:hover{background:#313244}.song-item.active{background:#313244;border-left:3px solid #89b4fa}.song-select-btn{width:100%;min-height:48px;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;flex-direction:column;align-items:flex-start;padding:8px 34px 8px 10px;display:flex}.song-item-title{color:#cdd6f4;font-size:13px;font-weight:500}.song-item-info{color:#6c7086;margin-top:2px;font-size:11px}.song-delete-btn{color:#6c7086;cursor:pointer;opacity:0;background:0 0;border:none;border-radius:3px;padding:2px 6px;font-size:14px;position:absolute;top:6px;right:6px}.song-item:hover .song-delete-btn,.song-delete-btn:focus-visible{opacity:1}.song-delete-btn:hover{color:#f38ba8;background:#4e2028}.song-empty{color:#6c7086;text-align:center;padding:20px;font-size:12px}@media (width<=1000px){.song-manager{width:190px}.song-manager-actions{flex-wrap:wrap}.sm-btn{min-width:48px}}@media (width<=760px){.song-manager{border-bottom:1px solid #313244;border-right:0;flex:none;width:100%;height:auto;max-height:132px}.song-manager-header{justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;display:flex}.song-manager-header h3{margin:0}.song-manager-actions{flex-wrap:nowrap;flex:0 0 184px;width:184px}.sm-btn{min-width:54px;min-height:34px;padding-inline:8px}.song-list{scrollbar-width:thin;gap:4px;padding:4px 8px 7px;display:flex;overflow:auto hidden}.song-item{flex:0 0 152px;margin:0}.song-item.active{border-bottom:3px solid #89b4fa;border-left:0}.song-select-btn{min-height:50px;padding-block:6px}.song-delete-btn{opacity:1;min-width:32px;min-height:32px}}.note-input{z-index:10;background:#1e1e2e;border-top:1px solid #313244;flex:none;width:100%;box-shadow:0 -8px 24px #11111b38}.note-input-header{justify-content:space-between;align-items:center;gap:16px;min-height:42px;padding:6px 16px;display:flex}.synth-panel{align-items:center;gap:10px;min-width:0;display:flex}.synth-title{color:#cdd6f4;letter-spacing:.65px;text-transform:uppercase;white-space:nowrap;font-size:11px;font-weight:800}.synth-preset-label,.synth-control{color:#6c7086;letter-spacing:.35px;text-transform:uppercase;white-space:nowrap;align-items:center;gap:5px;font-size:9px;font-weight:700;display:flex}.synth-preset-select{color:#cdd6f4;text-transform:none;background:#181825;border:1px solid #45475a;border-radius:4px;outline:none;width:116px;padding:4px 7px;font-size:11px}.synth-preset-select:focus{border-color:#89b4fa}.synth-control{flex-direction:column;align-items:flex-start;gap:1px}.synth-control input[type=range]{accent-color:#89b4fa;cursor:pointer;width:clamp(52px,5vw,76px);height:12px;margin:0}.synth-reset-btn{color:#a6adc8;cursor:pointer;background:#313244;border:1px solid #45475a;border-radius:4px;padding:4px 7px;font-size:10px}.synth-reset-btn:hover{background:#45475a}.note-input-actions{align-items:center;gap:8px;display:flex}.composer-target{color:#89b4fa;font-size:12px;font-weight:700}.chord-mode-btn,.edit-chord-btn,.update-chord-btn{color:#cdd6f4;cursor:pointer;background:#313244;border:1px solid #585b70;border-radius:4px;padding:4px 10px;font-size:12px;font-weight:600}.chord-mode-btn:hover,.edit-chord-btn:hover,.update-chord-btn:hover{background:#45475a}.chord-mode-btn.active{color:#1e1e2e;background:#89b4fa;border-color:#89b4fa}.update-chord-btn{background:#45475a;border-color:#6c7086}.selection-hint{color:#6c7086;font-size:11px}.add-note-btn{color:#1e1e2e;cursor:pointer;background:#a6e3a1;border:none;border-radius:4px;padding:4px 14px;font-size:12px;font-weight:600}.add-note-btn:hover{background:#b8f0b4}.clear-btn{color:#cdd6f4;cursor:pointer;background:#45475a;border:none;border-radius:4px;padding:4px 10px;font-size:12px}.clear-btn:hover{background:#585b70}.piano-keyboard{padding:0 0 8px;position:relative;overflow:auto hidden}.piano-keys-area{width:100%;min-width:780px;height:clamp(108px,15vh,150px);position:relative}.piano-white-keys{gap:1px;height:100%;padding-inline:1px;display:flex}.piano-white-key{cursor:pointer;background:#e8e8e8;border:1px solid #aaa;border-top:none;border-radius:0 0 3px 3px;flex:1 1 0;justify-content:center;align-items:flex-end;min-width:0;height:100%;padding-bottom:3px;transition:background 80ms;display:flex;position:relative}.piano-white-key:hover{background:#cde4ff}.piano-white-key:active{background:#a0c4f0}.piano-white-key.selected{background:#89b4fa;border-color:#7aa8f0}.piano-white-key.playing{background:linear-gradient(#e8e8e8 0%,#f7a8bc 100%);border-color:#f38ba8;box-shadow:inset 0 -8px 18px #dc26263d}.piano-white-key.selected.playing{background:linear-gradient(#89b4fa 0%,#f38ba8 100%)}.percussion-keyboard .drum-unused{opacity:.22;cursor:default}.percussion-keyboard .white-key-label,.percussion-keyboard .black-key-label{color:#52525b;writing-mode:vertical-rl;max-height:78%;font-size:8px;font-weight:700;line-height:1;overflow:hidden;transform:rotate(180deg)}.percussion-keyboard .black-key-label{color:#f4f4f5}.piano-white-key.c-marker{border-bottom:2px solid #f9e2af}.white-key-label{color:#888;-webkit-user-select:none;user-select:none;pointer-events:none;font-size:7px}.piano-white-key.selected .white-key-label{color:#1e1e2e;font-weight:600}.piano-black-keys{pointer-events:none;width:100%;height:56%;position:absolute;top:0;left:0;right:0}.piano-black-key{cursor:pointer;pointer-events:auto;z-index:1;background:#2a2a2a;border:1px solid #111;border-top:none;border-radius:0 0 3px 3px;width:clamp(10px,1.2vw,18px);height:100%;transition:background 80ms;position:absolute;transform:translate(-50%)}.piano-black-key:hover{background:#4a5568}.piano-black-key:active{background:#667}.piano-black-key.selected{background:#89b4fa;border-color:#7aa8f0}.piano-black-key.playing{background:#f38ba8;border-color:#ffb4c6;box-shadow:0 0 12px #f38ba8bf}.piano-black-key.selected.playing{background:linear-gradient(#89b4fa,#f38ba8)}.black-key-label{inset-inline:0;color:#f4f4f5;text-align:center;-webkit-user-select:none;user-select:none;pointer-events:none;font-size:6px;font-weight:700;line-height:1;position:absolute;bottom:4px}.piano-black-key.selected .black-key-label,.piano-black-key.playing .black-key-label{color:#181825}@media (height<=760px){.piano-keys-area{height:104px}}@media (width<=1100px){.synth-control span,.synth-title{display:none}.synth-panel{gap:6px}}@media (width<=760px){.note-input-header{flex-direction:column;align-items:stretch;gap:4px;padding:5px 8px}.synth-panel{width:100%;min-height:34px;padding-bottom:2px;overflow-x:auto}.note-input-actions{justify-content:flex-end;width:100%;min-width:0}.selection-hint{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.synth-preset-select,.synth-reset-btn,.clear-btn,.update-chord-btn,.add-note-btn{min-height:34px}.piano-keys-area{min-width:720px;height:118px}}.app{flex-direction:column;height:100dvh;display:flex;overflow:hidden}.main-content{flex:1;display:flex;overflow:hidden}.editor-area{flex-direction:column;flex:1;display:flex;overflow:hidden}.score-container{cursor:pointer;scrollbar-gutter:stable;background:#d9dae1;flex:1;padding:20px;overflow:auto}.score-container svg{background:#fffef9;border:1px solid #27272a24;border-radius:2px;margin:0 auto;display:block;box-shadow:0 8px 24px #11111b29}.score-container .playback-cursor-line{stroke:#e11d48;stroke-width:2.25px;stroke-linecap:round;opacity:.82;pointer-events:none;filter:drop-shadow(0 0 2px #e11d4880)}.score-container [data-note-id]{cursor:grab}.score-container [data-note-id].playback-active-note,.score-container [data-note-id].playback-active-note *{fill:#dc2626!important;stroke:#dc2626!important}.score-container .note-name-labels{pointer-events:none;-webkit-user-select:none;user-select:none}.score-container.dragging-note,.score-container.dragging-note [data-note-id]{cursor:grabbing;-webkit-user-select:none;user-select:none}.score-container.slur-mode,.score-container.slur-mode [data-note-id]{cursor:crosshair}.score-container.slur-mode [data-note-id]:hover{opacity:.68}.score-context-menu{z-index:2000;color:#cdd6f4;background:#1e1e2e;border:1px solid #45475a;border-radius:9px;width:218px;padding:6px;position:fixed;box-shadow:0 14px 36px #11111b73}.score-context-title{color:#cdd6f4;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 8px 8px;font-size:12px;font-weight:700;display:flex}.score-context-title span{color:#6c7086;font-size:10px;font-weight:600}.score-context-menu button{color:#cdd6f4;width:100%;min-height:34px;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;grid-template-columns:20px 1fr auto;align-items:center;padding:6px 8px;font-size:12px;display:grid}.score-context-menu button:hover{background:#313244}.score-context-menu button.context-danger{color:#f38ba8}.context-menu-icon{color:#89b4fa;font-size:15px}.context-danger .context-menu-icon{color:inherit}.score-context-menu kbd{color:#6c7086;font-family:inherit;font-size:9px;font-weight:600}.status-bar{background:#181825;border-top:1px solid #313244;justify-content:space-between;align-items:center;min-height:28px;padding:5px 16px;font-size:11px;display:flex}.status-note-info{color:#cdd6f4}.status-note-info strong{color:#89b4fa}.status-hint{color:#585b70}.status-message{color:#f9e2af;font-weight:600}.status-beats{color:#6c7086}.status-shortcuts{color:#45475a;font-size:10px}.status-meta{flex:none;align-items:center;gap:10px;display:flex}.save-status{color:#6c7086;white-space:nowrap;font-size:10px}.save-status.saved:before{content:"✓ ";color:#a6e3a1}.save-status.error{color:#f38ba8;font-weight:700}.selection-actions-btn{color:#cdd6f4;background:#313244;border:1px solid #585b70;border-radius:5px;min-height:28px;padding:3px 9px;font-size:11px;font-weight:700;display:none}.undo-delete-btn{color:#89b4fa;cursor:pointer;background:#89b4fa1f;border:1px solid #89b4fa;border-radius:5px;min-height:26px;padding:3px 9px;font-size:10px;font-weight:700}.confirmation-backdrop{z-index:3000;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0a0a12b8;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.confirmation-dialog{background:#1e1e2e;border:1px solid #45475a;border-radius:12px;width:min(420px,100%);padding:20px;box-shadow:0 18px 50px #00000080}.confirmation-dialog h2{color:#f5f5fa;margin:0 0 8px;font-size:18px}.confirmation-dialog p{color:#a6adc8;font-size:13px;line-height:1.5}.confirmation-actions{justify-content:flex-end;gap:8px;margin-top:18px;display:flex}.confirmation-actions button{color:#cdd6f4;cursor:pointer;background:#313244;border:1px solid #45475a;border-radius:6px;min-height:38px;padding:7px 13px}.confirmation-actions .confirm-danger{color:#f9b6c5;background:#5b2630;border-color:#7f3442}@media (width<=1000px){.score-container{padding:12px}.status-shortcuts{display:none}}@media (width<=760px){.main-content{flex-direction:column}.editor-area{min-height:0}.toolbar{flex-wrap:nowrap;overflow-x:auto}.status-bar{gap:8px;min-height:36px;padding-inline:10px}.status-note-info,.status-hint,.status-message{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.status-meta{gap:6px}.selection-actions-btn{align-items:center;display:inline-flex}.save-status{display:none}.score-context-menu{width:min(260px,100vw - 16px)}.score-context-menu button{min-height:44px}}