:root{color:#202423;font-synthesis:none;text-rendering:optimizelegibility;background:#f5f7f3;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100svh;margin:0}button,input,textarea{font:inherit}button{cursor:pointer}:root{--surface:#fff;--surface-subtle:#fbfcfb;--border:#dce2d9;--border-strong:#cfd8cf;--text:#202423;--text-subtle:#657069;--accent:#227c68;--accent-strong:#145f4f}.app-shell{box-sizing:border-box;grid-template-rows:auto minmax(320px,1fr);gap:14px;width:100%;min-height:100svh;margin:0 auto;padding:18px 16px 24px;display:grid}button{border:1px solid var(--border-strong);background:var(--surface);color:#26302b;border-radius:7px;min-height:38px;padding:0 13px}button:hover{border-color:var(--accent)}button[data-active=true]{border-color:var(--accent);color:var(--accent-strong);background:#e7f2ed;font-weight:700}button:disabled{cursor:not-allowed;opacity:.6}.instrument-panel{border:1px solid var(--border);background:var(--surface);border-radius:8px;overflow:hidden}.instrument-panel[data-mode=argument]{box-shadow:inset 3px 0 0 var(--accent)}.keyboard-scroll{background:linear-gradient(#fbfcfb,#f5f7f3);padding:16px 16px 12px;overflow:hidden}.keyboard-track{width:100%;position:relative}.keyboard-track[data-layout=wrapped]{max-width:100%}.piano-key{text-align:center;touch-action:manipulation;border-radius:0 0 7px 7px;min-height:0;padding:0;display:block;position:absolute;top:0;overflow:hidden;container-type:inline-size}.piano-key[data-kind=white]{--key-height:132px;--key-label-inset:7px;z-index:1;height:var(--key-height);color:var(--text);background:linear-gradient(#fff 0%,#f7f9f6 72%,#edf1ec 100%);border:1px solid #ccd5cf}.piano-key[data-kind=black]{--key-height:84px;--key-label-inset:5px;z-index:3;height:var(--key-height);color:#f6faf7;background:linear-gradient(#303936 0%,#111715 100%);border:1px solid #1f2724;box-shadow:0 8px 14px #1f272447}.piano-key:hover{border-color:var(--accent);box-shadow:0 0 0 3px #227c6824}.piano-key[data-pressed=true]{transform:translateY(4px)}.piano-key-text{bottom:var(--key-label-inset);min-width:0;display:inline-flex;position:absolute}.piano-key-text[data-orientation=horizontal]{align-items:center;width:calc(100% - 16px);left:50%;transform:translate(-50%)}.piano-key-text[data-orientation=vertical]{left:calc(50% + var(--key-label-font-size,16px) * .54);width:calc(var(--key-height) - var(--key-label-inset) * 2);transform-origin:0 100%;align-items:flex-end;transform:rotate(-90deg)}.piano-key-text span{text-overflow:clip;width:100%;min-width:0;font-family:Segoe UI,Arial,sans-serif;font-size:var(--key-label-font-size,16px);white-space:nowrap;font-weight:500;font-stretch:100%;line-height:1.08;overflow:hidden}.piano-key-text[data-orientation=horizontal] span{text-align:center}.piano-key-text[data-orientation=vertical] span{text-align:left}.piano-key[data-tone=argument]{border-color:#9ac5b7}.piano-key[data-tone=scroll]{color:var(--accent-strong);background:linear-gradient(#fbfffd 0%,#eef7f3 72%,#dfeee7 100%);border-color:#9ac5b7}.piano-key[data-tone=disabled]{color:#9aa59f;background:linear-gradient(#f8faf8 0%,#eef1ee 100%);border-color:#d7ded7}.piano-key[data-kind=black][data-tone=disabled]{color:#8d9993;background:linear-gradient(#3b4340 0%,#222826 100%);border-color:#2c3431}.piano-key[data-kind=white][data-tone=red]{box-shadow:inset 0 -4px #e8a099}.piano-key[data-kind=white][data-tone=green],.piano-key[data-kind=white][data-tone=teal]{box-shadow:inset 0 -4px #8fc8ac}.piano-key[data-kind=white][data-tone=orange],.piano-key[data-kind=white][data-tone=gold]{box-shadow:inset 0 -4px #d7b65f}.piano-key[data-kind=white][data-tone=violet]{box-shadow:inset 0 -4px #aaa0d9}.piano-key[data-kind=white][data-tone=blue],.piano-key[data-kind=white][data-tone=cyan]{box-shadow:inset 0 -4px #8dbfd0}.piano-key[data-tone=compile]{border-color:var(--accent)}.piano-key[data-tone=label]{border-color:#8bb8ce}.piano-key[data-kind=white][data-tone=label]{background:linear-gradient(#fbfdff 0%,#eef5f8 72%,#dce8ed 100%);box-shadow:inset 0 -4px #8bb8ce}.piano-key[data-kind=black][data-tone=label]{background:linear-gradient(#263f4d 0%,#10202a 100%)}.piano-key[data-kind=white][data-tone=compile]{box-shadow:inset 0 -4px 0 var(--accent);background:linear-gradient(#f9fffc 0%,#edf7f2 72%,#dcece4 100%)}.piano-key[data-kind=black][data-tone=compile]{background:linear-gradient(#2c4a41 0%,#10231e 100%)}.control-strip{border-top:1px solid var(--border);background:var(--surface);grid-template-columns:minmax(0,1fr) minmax(144px,auto);align-items:center;gap:12px;padding:12px 16px 14px;display:grid}.input-status{min-width:0;color:var(--text-subtle);text-overflow:ellipsis;white-space:nowrap;font:13px/1.4 ui-monospace,Consolas,monospace;overflow:hidden}.midi-control{background:linear-gradient(#fff,#edf1ec);border-radius:7px;align-content:center;justify-self:end;gap:2px;min-width:144px;min-height:44px;display:grid}.midi-control strong{text-overflow:ellipsis;min-width:0;font:700 13px/1 ui-monospace,Consolas,monospace;overflow:hidden}.midi-control span{min-width:0;color:var(--text-subtle);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.source-section{grid-template-columns:minmax(280px,1fr) minmax(320px,1fr);gap:14px;min-height:0;display:grid}.editor{border:1px solid var(--border);resize:vertical;width:100%;min-height:320px;color:var(--text);tab-size:2;background:repeating-linear-gradient(#fff 0 27px,#fbfcfb 27px 54px);border-radius:8px;outline:none;padding:16px;font:14px/1.9 ui-monospace,Consolas,monospace;display:block}.editor:focus{border-color:var(--accent);box-shadow:0 0 0 3px #227c6821}.score-panel{border:1px solid var(--border);background:var(--surface);border-radius:8px;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:320px;display:grid;overflow:hidden}.score-detail{border-bottom:1px solid var(--border);min-width:0;color:var(--text-subtle);text-overflow:ellipsis;white-space:nowrap;padding:12px 14px;font:13px/1.35 ui-monospace,Consolas,monospace;overflow:hidden}.score-scroll{min-height:0;overflow:hidden auto}.score-systems{min-width:0;padding:14px 0 18px}.score-system{height:158px;margin:0 14px 12px;position:relative}.staff-lines{background:linear-gradient(#cfd8cf,#cfd8cf) 0 0/100% 1px no-repeat,linear-gradient(#cfd8cf,#cfd8cf) 0 13px/100% 1px no-repeat,linear-gradient(#cfd8cf,#cfd8cf) 0 26px/100% 1px no-repeat,linear-gradient(#cfd8cf,#cfd8cf) 0 39px/100% 1px no-repeat,linear-gradient(#cfd8cf,#cfd8cf) 0 52px/100% 1px no-repeat,linear-gradient(#cfd8cf,#cfd8cf) 0 65px/100% 1px no-repeat,linear-gradient(#cfd8cf,#cfd8cf) 0 78px/100% 1px no-repeat,linear-gradient(#cfd8cf,#cfd8cf) 0 91px/100% 1px no-repeat;height:91px;position:absolute;top:33px;left:0;right:0}.score-event{height:100%;min-height:0;color:var(--text-subtle);background:0 0;border:0;border-radius:0;padding:0;position:absolute;top:0}.score-event:hover,.score-event[data-selected=true]{background:#227c6814}.score-event span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.score-note .note-head{left:50%;top:var(--note-top);background:var(--surface);border:2px solid;border-radius:50%;width:18px;height:13px;position:absolute;overflow:visible;transform:translate(-50%,-50%)rotate(-18deg)}.score-note .note-accidental{left:calc(50% - 20px);top:var(--note-top);color:currentColor;text-align:center;width:12px;font:700 15px/1 ui-monospace,Consolas,monospace;position:absolute;overflow:visible;transform:translate(-50%,-52%)}.score-note .note-head:after{content:"";transform-origin:bottom;background:currentColor;width:2px;height:34px;position:absolute;bottom:6px;right:-6px;transform:rotate(18deg)}.score-barline:before{content:"";background:#9daf9f;width:1px;height:91px;position:absolute;top:33px;left:50%}.score-note[data-role=operand] .note-head{border-width:2px;width:14px;height:10px}.score-note[data-role=operand] .note-head:after{height:24px}.score-note[data-role=control] .note-head{opacity:.74;background:currentColor}.score-note[data-role=control] .note-head:after{height:28px}.score-note[data-octave="0"]{color:#9f6f16}.score-note[data-octave="1"]{color:#2f7b52}.score-note[data-octave="2"]{color:#2d7792}.score-note[data-octave="3"]{color:#6d63b0}.score-note[data-octave="4"]{color:#a34c44}.score-note[data-octave="5"]{color:#227c68}.score-note[data-octave="6"]{color:#59635f}.score-event[data-kind=label]{color:#245f78;text-align:left;height:28px;padding:0 8px;font:700 12px/28px ui-monospace,Consolas,monospace}.score-event[data-kind=annotation],.score-event[data-kind=operand],.score-event[data-kind=unknown]{height:24px;color:var(--text-subtle);text-align:left;padding:0 8px;font:12px/24px ui-monospace,Consolas,monospace;top:128px}.score-event[data-kind=unknown]{color:#9b5a45}.score-event[data-kind=operand]{color:#735c9f}@media (width<=900px){.app-shell{padding-inline:11px;width:100%;padding-top:12px}.control-strip{grid-template-columns:minmax(0,1fr) minmax(116px,auto)}.source-section{grid-template-columns:1fr}}@media (width<=560px){.app-shell{padding-inline:8px;gap:10px;width:100%;padding-top:8px}.keyboard-scroll{padding:10px 10px 8px}.control-strip{gap:8px;padding:10px}.midi-control{min-width:116px}.editor,.score-panel{min-height:300px}.score-system{margin-inline:10px}}