@media (max-width:1100px) { .transport button { flex-basis:46px; width:46px; } .transport button span,.transport button b { display:none; } .status { flex-basis:90px; width:90px; } .studio-top { grid-template-columns:220px minmax(0,1fr); } }
@media (max-width:960px) {
  body { height:auto; min-height:100dvh; overflow-x:hidden; overflow-y:auto; grid-template-rows:auto auto; padding:8px; }
  .app-bar { min-height:56px; flex-wrap:wrap; gap:5px; }.brand { flex:0 0 auto; margin-right:auto; }.brand small { display:none; }.transport { order:3; width:100%; }.transport button { flex:1 1 0; width:0; min-width:0; }.transport button span,.transport button b { display:inline; }.status { flex:0 0 90px; width:90px; margin-left:0; }.sound-toggle { margin-left:0; }.panels-menu { margin-left:0; }
  .workspace { --lower-panel-height:184px; display:flex; flex-direction:column; gap:8px; }.code-stack { height:592px; min-height:592px; grid-template-rows:minmax(0,1fr) var(--lower-panel-height); }.code-stack.code-hidden,.code-stack.console-hidden { grid-template-rows:1fr; }.editor-region { min-height:340px; }.studio-region { min-height:608px; grid-template-rows:minmax(400px,1fr) var(--lower-panel-height); }.studio-top { grid-template-columns:220px minmax(0,1fr); }.console-panel { grid-template-rows:28px minmax(0,1fr) 58px; }
}
@media (max-width:620px) { #play > span { display:none; }.studio-region { min-height:918px; grid-template-rows:minmax(700px,1fr) var(--lower-panel-height); }.studio-top { grid-template-columns:1fr; grid-template-rows:auto minmax(390px,1fr); }.studio-top.controls-hidden,.studio-top.canvas-hidden { grid-template-rows:1fr; } #inputs-panel { grid-template-columns:repeat(2,minmax(130px,1fr)); }.console-controls { grid-template-columns:1fr 64px; }.console-controls #console-context { grid-column:1/-1; max-width:none; } }
@media (max-height:700px) and (min-width:961px) { body { padding:10px; gap:8px; grid-template-rows:52px minmax(0,1fr); }.app-bar { padding-block:4px; }.workspace { --lower-panel-height:148px; }.keyboard-scroll { padding-block:2px; }.piano-chassis { height:112px; padding-bottom:4px; }.piano-label-rail { height:14px; line-height:12px; } #piano { height:82px; }.key.white { height:82px; }.key.black { height:52px; }.first-cue { display:none; } }
@media (max-height:800px) { .first-cue { display:none; } }