/* Phone portrait is a full-width instrument, not a scaled sidebar. Keep the
   existing materials and live controls, with supporting text below both. */
@media (orientation:portrait) and (max-width:699px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .app{display:block;height:auto;min-height:100svh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
  .machine{display:flex;flex-direction:column;width:100%;height:auto;min-height:100svh;gap:0}
  .machine>.deck-panel{display:flex;width:100%;height:auto;padding:0;order:0}
  .machine>.machine-controls{display:block;order:1;width:100%;height:auto;margin:0;padding:0;overflow:visible}
  .machine>.deck-support{order:2;margin-top:auto}
  .deck{width:100%;height:auto;aspect-ratio:3/2}
  html.native-skin #tape-panel.panel-artwork{
    display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:6px 10px;
    width:100%;height:auto;aspect-ratio:auto;padding:8px 12px 10px;
  }
  #tape-panel :is(.panel-upper,.panel-lower){display:contents}
  html.native-skin #tape-panel :is(h1,.meter-panel,.tape-progress,.transport,.input-buttons,.cutup-controls,.playback-options,.speed-control,.input-routing,.export-controls){
    position:relative;inset:auto;width:auto;height:auto;min-width:0;margin:0;padding:0;grid-column:1/-1;grid-row:auto;
  }
  html.native-skin #tape-panel h1{height:40px;font-size:28px;line-height:1.15;letter-spacing:.04em;border-bottom:0}
  html[data-skin=cassette] #tape-panel h1{height:48px;background-size:auto 180%;background-position:center}
  html[data-skin=eightbit] #tape-panel h1{font-size:26px;letter-spacing:0}
  html[data-skin=collage] #tape-panel h1{margin:0 8px 3px;box-shadow:none}
  html.native-skin #tape-panel .meter-panel{display:flex;flex-direction:column;gap:4px}
  html.native-skin #tape-panel .meter-bank{height:72px;gap:8px}
  html.native-skin #tape-panel .vu-wrap{border-width:2px}
  html.native-skin #tape-panel .counter{position:static;inset:auto;min-height:22px;padding:0;gap:6px;align-items:center}
  html.native-skin #tape-panel .counter #timer{font-size:18px;line-height:1.2}
  html.native-skin #tape-panel :is(#mode-label,#duration-label){font-size:12px;line-height:1.2;letter-spacing:0}
  html[data-skin=cassette] #tape-panel .meter-bank{height:58px;gap:0}
  html[data-skin=cassette] #tape-panel .vu-wrap{border:0}
  html.native-skin #tape-panel .tape-progress{height:2px;min-height:2px}
  html.native-skin #tape-panel .transport{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;min-height:68px}
  html.native-skin[data-skin] #tape-panel.panel-artwork button.art-control,
  html.native-skin[data-skin] #tape-panel.panel-artwork .cutup-controls button.art-control,
  html.native-skin[data-skin] #tape-panel.panel-artwork .playback-options button.art-control.loop-button{
    min-height:44px;height:100%;font-size:14px;line-height:1.2;padding:6px 4px;gap:4px;
  }
  html.native-skin #tape-panel .art-control>svg{width:19px;height:19px}
  html.native-skin #tape-panel .transport .art-control>span{white-space:nowrap}
  html.native-skin #tape-panel .input-buttons{min-height:44px}
  html.native-skin #tape-panel.panel-artwork #add-own{font-size:16px;line-height:1.2;min-height:44px;padding:6px 10px}
  html.native-skin #tape-panel .cutup-controls{display:grid;grid-template-columns:1fr 2fr;gap:6px;min-height:58px;margin:2px 0 14px}
  html.native-skin #tape-panel .source-buttons{gap:6px}
  html.native-skin #tape-panel .art-control>.radio-state{bottom:-14px;font-size:12px;line-height:1.2;white-space:nowrap}
  html.native-skin #tape-panel .playback-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;min-height:46px}
  html.native-skin #tape-panel .playback-options .key-label{max-width:90%;line-height:1.15}
  html.native-skin #tape-panel .speed-control{display:flex;flex-direction:column;gap:0;padding:5px 4px 0}
  html.native-skin #tape-panel .speed-heading{position:static;display:flex;justify-content:space-between;align-items:center;font-size:14px;line-height:1.2}
  html.native-skin #tape-panel #speed-value{font-size:14px;line-height:1.2}
  html.native-skin #tape-panel #speed{position:static;width:100%;height:44px;margin:0}
  html.native-skin #tape-panel #speed::-webkit-slider-thumb{width:24px;height:30px;margin-top:-14px}
  html.native-skin #tape-panel #speed::-moz-range-thumb{width:24px;height:30px}
  html.native-skin #tape-panel .input-routing{grid-column:1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;min-height:44px}
  html.native-skin #tape-panel .input-routing label{position:static;height:auto;font-size:14px;line-height:1.2}
  html.native-skin #tape-panel #input-route{height:44px;min-height:44px;padding:6px;font-size:16px;line-height:1.2}
  html.native-skin #tape-panel .export-controls{grid-column:2;display:flex;align-items:center}
  html.native-skin #tape-panel.panel-artwork .export-controls #destroy-tape{width:100%;height:44px;min-height:44px;font-size:14px;padding:6px;gap:6px}
  html.native-skin #tape-panel .export-controls .art-control>svg{width:16px;height:22px}
  /* Keep the small supporting area useful, without the desktop-sized blocks. */
  .deck-support{padding:10px 12px 14px;font-size:14px;line-height:1.3}
  .margin-status{display:block;margin:0 0 8px}
  .margin-status :is(#status,#input-message){font-size:14px;line-height:1.3;margin:0 0 3px}
  .margin-status #export-note{font-size:12px;line-height:1.3}
  .margin-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 12px;align-items:start}
  .skin-picker{order:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 8px;align-items:center;font-size:14px}
  .skin-picker select{min-width:0;width:100%;min-height:44px;font-size:16px;padding:5px}
  .skin-sound{grid-column:1/-1;margin:0;font-size:12px;line-height:1.2}
  .margin-recordings{order:1;min-width:0;align-self:center}
  .margin-tools :is(.import-count,#own-count){font-size:12px;line-height:1.3}
  .margin-tools #own-list{grid-template-columns:1fr;margin-top:4px;gap:6px}
  .margin-tools #own-list li{font-size:13px;line-height:1.3;gap:2px}
  .margin-tools #own-list button{min-height:44px;font-size:14px}
  .margin-output{order:2;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;gap:8px;align-items:end}
  .margin-tools :is(.save-direction,.save-length){font-size:12px;line-height:1.3;gap:3px}
  .margin-tools :is(.save-direction,.save-length) select{width:100%;min-width:0;min-height:44px;font-size:16px;padding:5px}
  .save-buttons{grid-column:1/3;grid-row:2;display:flex;flex-direction:column;gap:6px;width:100%}
  .save-buttons .video-save-button{min-height:44px;padding:6px 10px;font-size:14px}
  .margin-tools #info{grid-column:3;grid-row:2;min-width:44px;width:44px;height:44px;min-height:44px;align-self:end}
  .margin-tools #info::after{inset:0}
  #cancel-render{grid-column:1/-1;min-height:44px}
  #save-random-option{font-size:12px;line-height:1.3;min-height:44px}
  .deck-support .notice{font-size:14px;line-height:1.35;padding:10px;max-height:none;overflow:visible}
  html.native-skin dialog{width:calc(100% - 20px);max-height:calc(100svh - 24px);padding:16px}
  html.native-skin dialog .action-button{font-size:16px;min-height:44px}
  html[data-skin=eightbit] .skin-picker{grid-template-columns:1fr}
  html[data-skin=eightbit] .skin-picker select{font-size:14px}
  html[data-skin=eightbit] #tape-panel.panel-artwork #add-own{font-size:14px}
}

/* Portrait: instrument first, directly above the meters and transport; compact options last. */
@media (orientation:portrait) and (max-width:699px){
  .machine>.deck-panel{display:contents}
  .machine>.machine-controls{order:1;flex:none}
  .machine .deck{order:0;flex:none;width:100%;aspect-ratio:1536/1024}
  .machine .deck-support{order:2;width:100%;margin:0;padding:6px 10px calc(8px + env(safe-area-inset-bottom))}
  .deck-support .margin-status{margin-bottom:4px}
  .deck-support .margin-status :is(#status,#input-message){margin:0;font-size:12px}
  .deck-support #export-note{display:none}
  .deck-support .margin-tools{gap:4px 8px}
  .deck-support .skin-picker{font-size:12px}
  .deck-support .skin-sound{display:none}
  .deck-support .margin-output{gap:4px 6px}
  .deck-support .margin-tools :is(.save-direction,.save-length){font-size:11px;gap:1px}
  .deck-support .save-buttons{flex-direction:row;gap:6px}
  .deck-support .save-buttons .video-save-button{flex:1;padding:5px;font-size:12px}
}