.melody-editor{margin-top:20px;border:1px solid #465164;border-radius:11px;overflow:hidden;background:#253246;color:#edf2fa;min-width:0}.melody-top{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:13px 16px;background:#1d293b}.melody-top>div:first-child{display:flex;flex-direction:column}.melody-eyebrow{font-size:10px;letter-spacing:.14em;color:#e6b66c;font-weight:700}.melody-top strong{font-size:15px;margin-top:2px}.melody-tools{display:flex;gap:5px}.melody-editor button{min-height:40px;padding:7px 11px;font-size:13px;border-radius:6px}.melody-tools button:first-child,.melody-tools button:nth-child(2),.melody-tools button:last-child{width:40px;font-size:21px;padding:3px}.melody-editor button[aria-pressed=true]{background:#735235;border-color:#edbe79;color:#ffdda0}.melody-view-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px 16px;padding:5px 15px;font-size:11px;color:#b9c6d8}.melody-view-tools label{display:flex;align-items:center;gap:6px;white-space:nowrap}.melody-view-tools input[type=range]{width:90px;height:36px;accent-color:#e6b66c}.melody-view-tools input[type=checkbox]{width:16px;height:16px;accent-color:#e6b66c}.melody-legend{display:flex;align-items:center;gap:6px}.melody-legend i{display:inline-block;width:19px;height:8px;border-radius:50%;background:linear-gradient(#e68752,#ffdf8f,#e78b50);border:1px solid #9c493b}.melody-legend b{color:#e9a180;font-size:20px;font-weight:400;margin-left:9px}.melody-grid{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:28px 320px;background:#f6f5f1;color:#36404e;overflow:hidden;color-scheme:light;border-top:1px solid #172333;border-bottom:1px solid #111c2b}.melody-corner{font-size:9px;letter-spacing:.1em;display:grid;place-items:center;background:#d9dce1;border-right:1px solid #a9b1bd;border-bottom:1px solid #a9b1bd}.melody-ruler-scroll{overflow:hidden;background:#e4e6e9;border-bottom:1px solid #aeb5c0}.melody-ruler{height:28px;position:relative}.melody-ruler span{position:absolute;top:4px;white-space:nowrap;font-size:10px;color:#4a5261;padding-left:5px;font-variant-numeric:tabular-nums}.melody-keys-window{overflow:hidden;position:relative;border-right:1px solid #8f99a8;background:#dce0e5}.melody-keys{width:100%;position:absolute;top:0;left:0}.melody-editor .melody-key{display:block;width:100%;min-height:0;border:0;border-bottom:1px solid #b5bdc8;background:#fdfcf8;color:#555d68;border-radius:0;padding:0 8px;font-size:10px;text-align:right;box-shadow:inset -3px 0 0 #e4e6e9}.melody-editor .melody-key.black{background:#455060;color:#f1f3f5;width:86%;box-shadow:inset -4px 0 0 #2f3846}.melody-editor .melody-key.octave{font-weight:750;color:#1f2937;border-bottom-color:#8e99a9}.melody-editor .melody-key:hover{background:#f3c889;color:#302719}.melody-viewport{position:relative;overflow:auto;overscroll-behavior:contain;scrollbar-color:#929caa #e4e6e9;touch-action:none;background:#f6f5f1;outline-offset:-3px;isolation:isolate}.melody-viewport.adding{cursor:crosshair}.melody-scene{display:block;user-select:none;max-width:none}.melody-note{cursor:move;outline:none;touch-action:none}.melody-blob{stroke:#a44342;stroke-width:1.1;filter:drop-shadow(0 1px 1px #8d4c3020)}.melody-note.selected .melody-blob,.melody-note:focus .melody-blob{stroke:#7442b8;stroke-width:2.5;filter:drop-shadow(0 0 3px #8f5eb977)}.melody-note.uncertain .melody-blob{stroke-dasharray:3 2;opacity:.75}.melody-intonation{fill:none;stroke:#9e3548;stroke-width:1.2;pointer-events:none}.melody-note-label{font-size:10px;font-weight:600;fill:#633521;paint-order:stroke;stroke:#ffe3a9aa;stroke-width:2.5;pointer-events:none}.melody-handle{cursor:ew-resize}.melody-playhead{position:absolute;top:0;width:1.5px;pointer-events:none;background:#36506b;z-index:3}.melody-playhead span{position:sticky;display:block;top:0;width:9px;height:8px;margin-left:-4px;background:#36506b;clip-path:polygon(0 0,100% 0,50% 100%)}.melody-selection{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:11px 13px;background:#1d293b}.melody-selection-name{font-size:13px;color:#f4d29f;min-width:100px;flex:1;font-weight:600}.melody-selection>label{display:flex;flex-direction:column;gap:3px;font-size:10px;color:#a9b8cc}.melody-editor .melody-selection input{width:88px;min-height:34px;font-size:12px;padding:5px 7px}.melody-note-actions{display:flex;gap:4px}.melody-note-actions button{min-width:34px;min-height:34px;font-size:14px;padding:5px 8px}.melody-note-actions button[data-action=split]{font-size:11px}.melody-bottom{padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #3b4659}.melody-help{font-size:11px;line-height:1.5;color:#aebbd0;max-width:510px}.melody-bottom button{flex-shrink:0}.melody-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}body.melody-expanded{overflow:hidden}.melody-editor.expanded{position:fixed;inset:20px;z-index:60;margin:0;display:flex;flex-direction:column;box-shadow:0 0 0 40px #07111cf2,0 20px 80px #0008}.melody-editor.expanded .melody-grid{flex:1;min-height:0;grid-template-rows:28px minmax(0,1fr)}.melody-editor.expanded .melody-view-tools{justify-content:flex-end;gap:24px}.melody-editor.expanded .melody-legend{margin-right:auto}.melody-editor.expanded .melody-selection{gap:18px}.piano-controls{margin-top:20px}@media(max-width:600px){.melody-top{padding:10px}.melody-top strong{font-size:13px}.melody-eyebrow{font-size:9px}.melody-tools{gap:3px}.melody-editor .melody-tools button{min-height:40px;padding:5px 7px;font-size:12px}.melody-tools button:first-child,.melody-tools button:nth-child(2),.melody-tools button:last-child{width:32px;font-size:20px!important}.melody-view-tools{padding:6px 10px;gap:5px 12px;font-size:10px}.melody-legend{flex-basis:100%}.melody-grid{grid-template-columns:50px minmax(0,1fr);grid-template-rows:28px 290px}.melody-selection{padding:10px;gap:9px}.melody-selection-name{flex-basis:100%;min-width:0}.melody-editor .melody-selection input{width:78px;min-height:40px}.melody-note-actions{flex-basis:100%;justify-content:space-between}.melody-note-actions button{min-height:44px;min-width:44px}.melody-bottom{flex-direction:column;align-items:stretch;padding:10px}.melody-editor.expanded{inset:0;border-radius:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.melody-editor.expanded .melody-view-tools{justify-content:space-between;gap:5px 12px}.melody-editor.expanded .melody-selection{gap:9px}.melody-editor.expanded .melody-bottom{flex-direction:row}.melody-editor.expanded .melody-bottom p{font-size:10px}.melody-editor.expanded .melody-bottom button{font-size:11px;padding:7px}.melody-editor.expanded .melody-grid{min-height:120px}}@media(max-height:600px){.melody-editor.expanded .melody-help{display:none}.melody-editor.expanded .melody-selection{padding:6px 12px}.melody-editor.expanded .melody-note-actions{flex-basis:auto}.melody-editor.expanded .melody-view-tools{padding:1px 12px}.melody-editor.expanded .melody-bottom{padding:5px 12px}}
.recognition-settings{width:205px;max-width:100%;display:flex;flex-direction:column;gap:0}.recognition-settings label{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#c7d1df;font-weight:600}.recognition-settings output{color:#f4cf91;font-variant-numeric:tabular-nums}.recognition-settings input{height:30px;accent-color:#e6b66c}.recognition-settings span{font-size:10px;color:#9cabbf}.melody-transport{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:9px 15px;border-bottom:1px solid #3c485b;background:#202d40;flex-shrink:0}.melody-editor .melody-play{min-width:116px;background:#e5b775;color:#30261a;border-color:#e5b775}.melody-editor .melody-play:hover{background:#f4cd95}.melody-source,.melody-instrument{font:inherit;font-size:12px;max-width:100%;min-width:0;height:40px;padding:5px 28px 5px 10px;border:1px solid #465369;border-radius:6px;background:#142034;color:#edf2fa}.melody-source:focus-visible,.melody-instrument:focus-visible{outline:3px solid #47c5b1;outline-offset:2px}.melody-clock{margin-left:auto;color:#e5d4b8;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}.melody-playhead{width:2px;background:#ab5261}.melody-playhead span{background:#ab5261}.melody-playhead.playing{width:3px;background:#c52d48;box-shadow:0 0 0 1px #fff8}.melody-playhead.playing span{background:#c52d48}@media(max-width:600px){.melody-transport{padding:7px 10px;gap:6px}.melody-editor .melody-play{min-width:106px}.melody-source,.melody-instrument{flex:1;min-width:160px;width:175px}.melody-clock{font-size:11px}.recognition-settings{width:100%}}@media(max-height:600px){.melody-transport{padding:4px 12px}.melody-editor .melody-transport button,.melody-source,.melody-instrument{min-height:34px;height:34px}}
.melody-mixer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:8px 16px 3px;background:#202d40;border-bottom:1px solid #3c485b;flex-shrink:0}.melody-mixer label{display:grid;grid-template-columns:1fr auto;align-items:center;font-size:12px;font-weight:600;color:#c5d1e1;gap:0 8px;min-width:0}.melody-mixer output{font-size:11px;font-weight:500;color:#e8c38e;font-variant-numeric:tabular-nums}.melody-mixer input{grid-column:1/-1;height:32px;accent-color:#e6b66c}.melody-mixer label:first-child input{accent-color:#47c5b1}.melody-mixer label:last-child input{accent-color:#9b9fee}@media(max-width:600px){.melody-mixer{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 18px;padding:7px 10px 3px}.melody-mixer label:last-child{grid-column:1/-1}.melody-mixer label{font-size:11px}.melody-mixer input{height:28px}}@media(max-height:600px){.melody-mixer{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:3px 12px 0}.melody-mixer label:last-child{grid-column:auto}.melody-mixer label{font-size:10px}.melody-mixer input{height:26px}.melody-editor.expanded{overflow-y:auto}}

@media(max-width:600px){.melody-instrument{flex:1;min-width:100px;width:125px}.melody-clock{margin-left:0}.melody-source{min-width:125px;width:150px}}