*{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:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}#root{flex-direction:column;height:100vh;display:flex}.toolbar{background:#1e1e2e;border-bottom:1px solid #313244;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;display:flex}.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}.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}.rest-position-btn{white-space:nowrap;min-width:50px;padding-inline:7px;font-size:11px}.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}.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:hover:after{opacity:1;transition-delay:.4s}.playback-bar{background:#181825;border-bottom:1px solid #313244;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:8px 16px;display:flex}.playback-left,.playback-right{flex:1}.playback-right{justify-content:flex-end;align-items:center;gap:14px;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:250px;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:50%;width:44px;height:44px}.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}.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)}}.progress-track{background:#313244;border-radius:10px;width:180px;height:20px;position:relative;overflow:hidden}.progress-fill{opacity:.4;background:#89b4fa;border-radius:10px;height:100%;transition:width .15s}.progress-text{color:#cdd6f4;justify-content:center;align-items:center;font-size:10px;font-weight:600;display:flex;position:absolute;inset:0}.tempo-label,.key-signature-label,.sound-label{color:#a6adc8;align-items:center;gap:6px;font-size:13px;display:flex}.tempo-input,.key-signature-select,.sound-select{color:#cdd6f4;text-align:center;background:#1e1e2e;border:1px solid #45475a;border-radius:4px;width:60px;padding:4px 8px;font-size:13px}.key-signature-select{width:58px;padding-inline:7px}.sound-select{text-align:left;width:124px;padding-inline:7px}.tempo-input:focus,.key-signature-select:focus,.sound-select:focus{border-color:#89b4fa;outline:none}@media (prefers-reduced-motion:reduce){.loading-spinner{border-right-color:currentColor;animation:none}}@media (width<=760px){.playback-bar{gap:8px;padding:8px 10px}.song-title-input{width:min(220px,34vw)}.tempo-label,.key-signature-label,.sound-label{gap:3px;font-size:0}.progress-track{display:none}}.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{width:150px}.song-manager-header{padding:10px 8px}}.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:flex-end;align-items:center;padding:4px 16px;display:flex}.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-clef-labels{min-width:780px;height:16px;position:relative}.clef-label{text-transform:uppercase;letter-spacing:.5px;font-size:10px;font-weight:700;position:absolute;transform:translate(-50%)}.bass-label{color:#f9e2af}.treble-label{color:#89b4fa}.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%)}.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)}@media (height<=760px){.piano-keys-area{height:104px}}.app{flex-direction:column;height:100vh;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.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}@media (width<=1000px){.score-container{padding:12px}.status-shortcuts{display:none}}@media (width<=760px){.toolbar{flex-wrap:nowrap;overflow-x:auto}.status-bar{padding-inline:10px}}