:root{color:#e8ebee;font-synthesis:none;letter-spacing:0;background:#17191c;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}button,input{font:inherit;letter-spacing:0}button{color:inherit}.app-shell{background:#202328;grid-template-rows:48px minmax(0,1fr) 42px;width:100%;min-width:760px;height:100%;display:grid}.topbar{background:#181a1e;border-bottom:1px solid #090a0c;grid-template-columns:180px 1fr auto;align-items:center;display:grid;box-shadow:inset 0 -1px #30343a}.brand{color:#f6f7f8;padding:0 16px;font-size:16px;font-weight:700}.brand span{color:#8f98a2;margin-left:4px;font-size:11px;font-weight:600}.transport{justify-content:center;align-items:center;gap:6px;display:flex}.project-controls{align-items:center;gap:14px;padding-right:12px;display:flex}.icon-button,.command-button,.danger-button{cursor:pointer;background:#2c3036;border:1px solid #454b53;border-radius:4px;justify-content:center;align-items:center;height:30px;display:inline-flex}.icon-button{width:30px;padding:0}.command-button{background:#0d756f;border-color:#158f89;gap:7px;padding:0 12px;font-weight:650}.mix-button{background:#3a4047;border-color:#606873}.icon-button:hover:not(:disabled),.command-button:hover:not(:disabled){background:#3a4047}.command-button:hover:not(:disabled){background:#108981}.mix-button:hover:not(:disabled){background:#4a525c}.icon-button:disabled,.command-button:disabled{color:#626871;cursor:not-allowed}.bpm-control{color:#aeb5bd;align-items:center;gap:6px;font-size:11px;font-weight:700;display:flex}.bpm-control input{color:#f3f4f5;background:#25282d;border:1px solid #464b52;border-radius:3px;width:58px;height:27px;padding:0 7px}.segmented{border:1px solid #464b52;border-radius:4px;display:inline-flex;overflow:hidden}.segmented button{color:#aeb5bd;cursor:pointer;background:#25282d;border:0;border-right:1px solid #464b52;min-width:42px;height:26px;font-size:11px}.segmented button:last-child{border-right:0}.segmented button.active{color:#1d2024;background:#d7dce1;font-weight:700}.workspace{grid-template-columns:180px minmax(0,1fr) 210px;min-height:0;display:grid}.track-list,.note-inspector{background:#22252a;min-width:0}.track-list{border-right:1px solid #0c0d0f}.note-inspector{border-left:1px solid #0c0d0f}.panel-heading{color:#9099a3;text-transform:uppercase;-webkit-user-select:none;user-select:none;border-bottom:1px solid #111317;height:33px;padding:9px 11px;font-size:10px;font-weight:800}.track-row{text-align:left;cursor:pointer;background:0 0;border:0;border-bottom:1px solid #17191c;grid-template-columns:22px 1fr;width:100%;min-height:52px;padding:8px 10px;display:grid}.track-row:hover{background:#2a2e34}.track-row.active{background:#30353b;box-shadow:inset 3px 0 #10a8a0}.track-row svg{color:#c4cbd2;margin-top:3px}.track-row strong,.track-row small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.track-row strong{font-size:12px;font-weight:650}.track-row small{color:#858e98;margin-top:3px;font-size:10px}.editor-area{background:#15171a;min-width:0;min-height:0;overflow:hidden}.piano-roll{grid-template:32px minmax(0,1fr)/58px minmax(0,1fr);width:100%;height:100%;display:grid}.timeline-corner{z-index:3;background:#292d32;border-bottom:1px solid #101215;border-right:1px solid #090a0b}.timeline{background:#292d32;border-bottom:1px solid #0f1113;height:32px;overflow:hidden}.timeline-content{height:100%;position:relative}.timeline span{color:#8e97a0;padding-left:5px;font-size:9px;position:absolute;bottom:5px}.pitch-ruler{background:#dbdfe2;border-right:1px solid #090a0b;min-height:0;overflow:hidden}.pitch-ruler>div{color:#30353a;text-align:right;border-bottom:1px solid #a7adb2;height:26px;padding:6px 5px;font-size:9px}.pitch-ruler>.black-key{color:#f0f2f3;background:#292d32;border-color:#111316;width:72%}.roll-scroll{min-width:0;min-height:0;overflow:auto}.roll-canvas{cursor:crosshair;background-color:#24272c;background-image:linear-gradient(90deg,#0d0f12 1px,#0000 1px),linear-gradient(90deg,#0000 111px,#111418 112px),linear-gradient(#353a40 1px,#0000 1px);background-size:28px 100%,112px 100%,100% 26px;position:relative}.note-block{z-index:1;color:#f5fffe;cursor:grab;-webkit-user-select:none;user-select:none;background:#0d918a;border:1px solid #08736e;border-radius:3px;align-items:center;min-width:26px;height:22px;display:flex;position:absolute;overflow:hidden;box-shadow:inset 0 1px #ffffff29}.note-instrument{color:#1c160d;background:#c68422;border-color:#a46b15}.note-block.selected{z-index:2;outline-offset:1px;outline:2px solid #f2bb55}.note-block span{text-overflow:ellipsis;white-space:nowrap;padding:0 8px;font-size:11px;font-weight:650;overflow:hidden}.resize-handle{cursor:ew-resize;background:#ffffff24;border:0;border-left:1px solid #0000004d;width:7px;height:100%;padding:0;position:absolute;top:0;right:0}.dragging-note,.dragging-note *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}.inspector-fields{gap:12px;padding:12px;display:grid}.inspector-fields label{color:#98a1aa;gap:5px;font-size:10px;font-weight:700;display:grid}.inspector-fields input{color:#f1f3f4;background:#191b1f;border:1px solid #454b52;border-radius:3px;width:100%;height:29px;padding:0 8px}.inspector-fields input:focus{border-color:#10a8a0;outline:1px solid #10a8a0}.danger-button{color:#efc9cd;background:#44262a;border-color:#754047;gap:6px;width:100%;margin-top:5px;font-size:11px}.empty-inspector{color:#6f7881;padding:16px 12px;font-size:11px}.bulk-selection{gap:14px;padding:14px 12px;display:grid}.bulk-selection strong{color:#c6cdd4;font-size:12px}.bulk-selection .danger-button{margin:0}.statusbar{color:#838c95;background:#181a1d;border-top:1px solid #0b0d0f;grid-template-columns:minmax(160px,1fr) minmax(220px,480px) 80px;align-items:center;gap:16px;padding:0 12px;font-size:10px;display:grid}.statusbar>span:last-child{text-align:right}.audio-preview{min-width:0}@media (width<=900px){.app-shell{min-width:680px}.workspace{grid-template-columns:150px minmax(0,1fr) 180px}.topbar{grid-template-columns:150px 1fr auto}.segmented button{min-width:35px}}@media (width<=680px){.app-shell{grid-template-rows:82px minmax(0,1fr) 34px;min-width:0}.topbar{grid-template:42px 40px/1fr auto}.brand{grid-column:1}.transport{grid-column:2;padding-right:8px}.project-controls{border-top:1px solid #292d32;grid-area:2/1/auto/-1;justify-content:space-between;padding:0 8px}.workspace{grid-template:52px minmax(180px,1fr) 156px/minmax(0,1fr)}.track-list{border-bottom:1px solid #0c0d0f;border-right:0;grid-row:1;display:flex;overflow:hidden}.track-list .panel-heading{display:none}.track-row{border-bottom:0;border-right:1px solid #17191c;width:50%;min-height:52px}.editor-area{grid-row:2}.note-inspector{border-top:1px solid #0c0d0f;border-left:0;grid-row:3;overflow:auto}.note-inspector .panel-heading{height:27px;padding:7px 9px}.inspector-fields{grid-template-columns:repeat(4,minmax(62px,1fr)) 74px;align-items:end;gap:7px;padding:8px}.danger-button{margin:0}.statusbar{grid-template-columns:1fr auto;padding:0 8px}.audio-preview{display:none}}