/* Phone landscape: the instrument owns the height; supporting controls share
   one shallow strip. Keep the original controls, labels and event handlers. */
@media (orientation:landscape) and (min-width:560px) and (max-width:1000px) and (max-height:540px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .app{height:100dvh}
  .machine{row-gap:4px;align-content:start}
  .deck-support{
    display:grid;grid-template-columns:minmax(112px,1fr) 90px minmax(0,2.5fr);
    grid-template-areas:'status skin output' 'recordings skin output';
    gap:0 8px;padding:3px 6px 4px;font-size:12px;line-height:1.2;align-items:start;
  }
  .margin-status{grid-area:status;display:block;margin:0;min-width:0}
  .margin-status :is(#status,#input-message,#export-note){font-size:12px;line-height:1.2;margin:0;overflow-wrap:anywhere}
  .margin-status #export-note{margin-top:2px}
  .margin-tools{display:contents}
  .skin-picker{grid-area:skin;display:flex;flex-direction:column;gap:2px;min-width:0;font-size:12px;line-height:1.2}
  .skin-picker select{width:100%;min-width:0;min-height:44px;font-size:16px;padding:2px}
  .skin-picker .skin-sound{display:none}
  .margin-recordings{grid-area:recordings;min-width:0;align-self:end}
  .margin-tools :is(.import-count,#own-count){font-size:12px;line-height:1.2}
  .margin-tools #own-list{display:block;margin:2px 0 0;max-height:44px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .margin-tools #own-list li{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;font-size:12px;line-height:1.2}
  .margin-tools #own-list li>span{flex:1 1 0;overflow-wrap:anywhere}
  .margin-tools #own-list button{min-height:44px;padding:2px 4px;font-size:12px}
  .margin-output{grid-area:output;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(136px,1.6fr) 44px;gap:4px;align-items:end;min-width:0}
  .margin-tools :is(.save-direction,.save-length){min-width:0;gap:2px;font-size:12px;line-height:1.2}
  .margin-tools :is(.save-direction,.save-length) select{width:100%;min-width:0;min-height:44px;padding:2px;font-size:16px}
  .margin-output .save-buttons{grid-column:3;grid-row:1;display:grid;grid-template-columns:1fr 1fr;align-self:end;gap:4px;min-width:0}
  html.native-skin .save-buttons .video-save-button{min-height:44px;height:44px;padding:2px;font-size:12px;line-height:1.15;letter-spacing:0;white-space:normal}
  .margin-tools #info{grid-column:4;grid-row:1;align-self:end;width:44px;height:44px;min-height:44px;font-size:22px}
  .margin-tools #info::after{inset:0}
  #save-random-option{font-size:12px;line-height:1.2;min-height:44px;gap:4px}
  #cancel-render{grid-column:1/-1;min-height:44px;font-size:12px}
  .deck-support .notice{grid-column:1/-1;margin:3px 0 0;padding:6px;font-size:12px;line-height:1.2;max-height:80px;overflow:auto}
  html[data-skin=eightbit] .skin-picker select{font-size:12px}
  html[data-skin=eightbit] .save-buttons .video-save-button{font-size:10px}

  /* Taller, narrower console halves let the complete 3:2 deck grow. Reflow
     transport keys into two rows so their touch areas grow with it. */
  #tape-panel .panel-upper,#tape-panel .panel-lower{aspect-ratio:auto}
  html.native-skin #tape-panel h1{top:3%;height:20%;left:4%;right:4%}
  html.native-skin #tape-panel .meter-panel{top:28%;height:22%;left:5%;width:90%}
  html.native-skin #tape-panel .counter{gap:2px}
  html.native-skin #tape-panel .counter #timer{font-size:12px}
  html.native-skin #tape-panel :is(#mode-label,#duration-label){font-size:8px}
  html.native-skin #tape-panel .tape-progress{top:57%}
  html.native-skin #tape-panel .transport{top:59%;height:28%;left:4%;width:92%;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  html.native-skin #tape-panel .input-buttons{top:auto;bottom:0;left:4%;width:92%;height:12%;min-height:36px}
  html.native-skin #tape-panel.panel-artwork button.art-control{font-size:12px;line-height:1.1;padding:3px;gap:3px}
  html.native-skin #tape-panel.panel-artwork .transport button.art-control{flex-direction:column;font-size:clamp(9px,1.15vw,11px)}
  html.native-skin #tape-panel .transport .art-control>svg{width:12px;height:12px}
  html.native-skin #tape-panel.panel-artwork #add-own{font-size:12px}
  html.native-skin #tape-panel .cutup-controls{top:2%;height:18%;left:4%;width:92%;gap:4px}
  html.native-skin #tape-panel.panel-artwork .cutup-controls button.art-control{font-size:clamp(8px,1.2vw,11px);padding:2px}
  html.native-skin #tape-panel .art-control>.radio-state{bottom:-13px;font-size:9px}
  html.native-skin #tape-panel .playback-options{top:26%;height:15%;left:4%;width:92%;gap:4px}
  html.native-skin #tape-panel.panel-artwork .playback-options button.art-control{font-size:clamp(8px,1.1vw,10px);padding:2px}
  html.native-skin #tape-panel .playback-options .key-label{max-width:100%}
  html.native-skin #tape-panel .speed-control{top:46%;height:17%;left:8%;width:84%}
  html.native-skin #tape-panel .speed-heading{font-size:12px}
  html.native-skin #tape-panel .input-routing{top:68%;height:13%;left:25%;width:70%}
  html.native-skin #tape-panel .input-routing label{font-size:12px}
  html.native-skin #tape-panel #input-route{font-size:14px;padding:2px}
  html.native-skin #tape-panel .export-controls{top:85%;height:13%;left:4%;width:92%}
  html.native-skin #tape-panel.panel-artwork .export-controls #destroy-tape{font-size:12px}
}