*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#050510;color:#00fff7;font-family:"Courier New",monospace}
body{overflow:hidden}
button,select,input{font:inherit}
button,select,input{background:#050510;color:#00fff7;border:1px solid #00fff7}
button{cursor:pointer;padding:5px 8px}
button:hover{background:#00fff7;color:#050510}
select,input{padding:5px}
#cglApp{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}
.app-header{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:2px solid #ff00cc;background:#080814}
.eyebrow{font-size:10px;color:#ff00cc}
h1{font-size:18px;margin:3px 0 0;color:#fff}
h1 span{font-size:11px;color:#ff00cc}
.count{font-size:12px}
.controls{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:7px;padding:8px;border-bottom:1px solid #00fff7}
.controls label{font-size:10px;display:flex;align-items:center;gap:4px}
.controls input{width:145px}
.controls select{min-width:105px;max-width:170px}
.piece-row{flex:0 0 auto;display:flex;gap:10px;align-items:center;padding:8px;border-bottom:1px solid #00fff7}
.piece-label{font-size:11px;display:flex;align-items:center;gap:6px;min-width:0}
#piece{min-width:280px;max-width:52vw}
.meta{font-size:10px;color:#ccc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.workspace{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,2.1fr) minmax(230px,1fr);gap:8px;padding:8px}
.tab-panel,.midi-panel{min-height:0;border:1px solid #00fff7;background:#020208;display:flex;flex-direction:column}
.panel-head{flex:0 0 auto;min-height:35px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 8px;border-bottom:1px solid #ff00cc;background:#0a0a16;color:#fff;font-size:12px}
.tab-tools{display:flex;align-items:center;gap:5px}
.tab-tools button{font-size:10px}
.speed{font-size:9px;color:#ccc;display:flex;align-items:center;gap:3px}
.speed input{width:65px}
#tab{flex:1 1 auto;min-height:0;margin:0;padding:14px;overflow:auto;white-space:pre;font:14px/1.35 "Courier New",monospace;color:#f2f2f2}
.midi-panel{padding-bottom:10px}
.midi-panel .panel-head{margin-bottom:10px}
.midi-status{padding:10px;font-size:11px;color:#ccc;min-height:45px}
#midiSelect{width:calc(100% - 20px);margin:0 10px 8px}
#midi{width:calc(100% - 20px);margin:0 10px}
.midi-buttons{display:flex;flex-wrap:wrap;gap:5px;padding:10px}
.midi-buttons button{font-size:10px}
footer{flex:0 0 auto;display:flex;justify-content:space-between;padding:5px 10px;border-top:1px solid #00fff7;font-size:9px;color:#777}
@media(max-width:800px){
  body{overflow:auto}
  #cglApp{min-height:100%;height:auto}
  .workspace{grid-template-columns:1fr;grid-template-rows:minmax(360px,1fr) auto}
  .midi-panel{min-height:150px}
  .piece-row{align-items:flex-start;flex-direction:column}
  #piece{min-width:0;width:100%;max-width:none}
  .meta{white-space:normal}
  .controls input{width:100%}
}