:root{--silver:#c0c0c0;--blue:#000080;--paper:#f4f3e6;--green:#78ff9b;--ui:Tahoma,"MS Sans Serif",Arial,sans-serif;--mono:"Lucida Console","Courier New",monospace}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;overflow:hidden;background:var(--silver);color:#111;font:12px var(--ui)}button,input,select{font:12px var(--ui)}button{cursor:pointer}.app{height:100%;display:grid;grid-template-rows:auto auto 1fr auto}.menu,.toolbar{display:flex;align-items:center;gap:4px;background:var(--silver);white-space:nowrap}.menu{padding:3px 5px;border-bottom:1px solid #808080}.menu button{border:0;background:transparent;padding:3px 8px}.menu button:hover{background:var(--blue);color:#fff}.brand{margin-left:auto;padding-right:4px;font:10px var(--mono)}.toolbar{padding:6px;border-top:1px solid #fff;border-bottom:2px solid #707070;overflow:auto}.toolbar-group{display:inline-flex;align-items:center;gap:4px}.btn{min-height:28px;padding:4px 10px;border:0;border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #404040;border-bottom:2px solid #404040;background:var(--silver)}.btn:active,.btn.active{border-color:#404040 #fff #fff #404040;background:#aaa}.btn.primary{background:#000080;color:#fff;font-weight:700}.btn.icon{width:34px;min-width:34px;padding:2px;font-size:16px}.btn:disabled{color:#777;text-shadow:1px 1px #fff}.mode-switch{display:flex;border:2px inset #fff;background:#fff}.mode-btn{min-height:24px;padding:3px 9px;border:0;border-right:1px solid #777;background:#ddd}.mode-btn:last-child{border-right:0}.mode-btn.active{background:#000080;color:#fff;font-weight:700}.gm-only{display:none}.gm-mode .gm-only{display:inline-flex}.gm-mode div.gm-only{display:block}.gm-mode .chip-only{display:none}.toolbar-select{height:28px;max-width:154px;border:2px inset #fff;background:#fff;padding:2px}.bank-name{max-width:126px;overflow:hidden;text-overflow:ellipsis;font:9px var(--mono)}.sep{width:1px;height:26px;margin:0 2px;background:#777;border-right:1px solid #fff}.filename{margin-left:auto;max-width:180px;overflow:hidden;text-overflow:ellipsis;font:10px var(--mono)}.workspace{min-width:0;min-height:0;display:grid;grid-template-columns:238px minmax(380px,1fr) 306px;background:#808080}.side{min-height:0;overflow:auto;padding:8px;background:#d0d0d0}.side.left{border-right:2px solid #555}.side.right{border-left:2px solid #fff}.panel{margin-bottom:8px;border:2px outset #fff;background:var(--silver)}.panel-title{padding:5px 7px;background:var(--blue);color:#fff;font-weight:700}.panel-body{padding:8px}.field{display:grid;grid-template-columns:92px 1fr;gap:6px;align-items:center;margin-bottom:7px}.field label{font:700 9px var(--mono)}.field select,.field input[type=range]{width:100%;min-width:0}.field select{border:2px inset #fff;background:#fff;padding:3px}.check{display:flex;align-items:center;gap:7px;margin:7px 0;font:10px var(--mono)}.check input{width:16px;height:16px}.gm-bank{margin-bottom:8px;padding:7px;border:1px inset #fff;background:#efefe5;font:9px/1.5 var(--mono)}.gm-bank b{color:#000080}.gm-formats{margin-top:5px;color:#555}.engine-note,.file-info{padding:7px;border:1px solid #777;background:var(--paper);font:9px/1.5 var(--mono)}.engine-note b{color:#000080}.main{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(170px,1fr) auto auto;background:#303030}.display{position:relative;min-height:0;margin:9px;border:2px inset #fff;background:#020804;overflow:hidden}.display canvas{display:block;width:100%;height:100%}.display-label{position:absolute;left:9px;top:7px;color:var(--green);font:10px var(--mono);text-shadow:0 0 4px #00a030;pointer-events:none}.empty{position:absolute;inset:0;display:grid;place-items:center;color:#77f596;text-align:center;font:13px/1.7 var(--mono);pointer-events:none}.empty.hidden{display:none}.transport{display:grid;grid-template-columns:auto auto auto minmax(120px,1fr) auto;gap:5px;align-items:center;padding:6px 9px;background:var(--silver);border-top:2px solid #fff}.time{min-width:92px;text-align:center;font:11px var(--mono)}.seek{width:100%}.now{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:7px 10px;border-top:1px solid #777;background:#111;color:var(--green);font:10px var(--mono)}.now strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.now span{color:#fff}.mixer{display:grid;gap:5px}.track{padding:5px;border:1px solid #777;background:#d9d9d9}.track-head{display:grid;grid-template-columns:1fr auto auto;gap:4px;align-items:center}.track-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 9px var(--mono)}.tiny{width:27px;height:22px;padding:0;border:1px outset #fff;background:var(--silver);font:700 9px var(--ui)}.tiny.active{border-style:inset;background:#000080;color:#fff}.track-meta{margin:3px 0;color:#333;font:8px var(--mono)}.track-controls{display:grid;grid-template-columns:minmax(100px,1fr) 82px;gap:5px;align-items:center}.track-controls select{width:100%;min-width:0;border:2px inset #fff;background:#fff;padding:2px;font:9px var(--mono)}.track-controls input{width:100%;height:13px}.gm-program{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 5px;border:1px inset #fff;background:#f5f5ec;font:9px var(--mono)}.meter{height:8px;margin-top:3px;border:1px inset #fff;background:#111}.meter i{display:block;width:0;height:100%;background:#31d256;transition:width .08s}.status{display:flex;align-items:center;gap:7px;padding:4px 7px;border-top:2px solid #fff;background:var(--silver);font:10px var(--mono)}.status b{color:#000080}.state{margin-left:auto;padding:2px 6px;border:1px solid #444;background:#111;color:var(--green)}.dialog-backdrop{position:fixed;inset:0;z-index:30;display:none;place-items:center;padding:16px;background:rgba(0,0,0,.45)}.dialog-backdrop.open{display:grid}.dialog{width:min(560px,95vw);max-height:88vh;overflow:auto;border:2px outset #fff;background:var(--silver);box-shadow:5px 5px 0 rgba(0,0,0,.35)}.dialog-title{padding:5px 7px;background:var(--blue);color:#fff;font-weight:700}.dialog-body{padding:14px;font:10px/1.6 var(--mono)}.dialog-body b{color:#000080}.dialog-actions{display:flex;justify-content:flex-end;gap:6px;padding:0 14px 14px}.progress-shell{height:24px;margin:12px 0;border:2px inset #fff;background:#fff}.progress-bar{width:0;height:100%;background:#000080;transition:width .2s}.export-details{padding:8px;border:1px solid #777;background:var(--paper)}
@media(max-width:900px){.workspace{grid-template-columns:205px minmax(320px,1fr)}.side.right{display:none}}@media(max-width:620px){.workspace{grid-template-columns:1fr}.side.left{display:none}.brand,.filename{display:none}}