@media (max-width: 980px) {
  .topbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .topbar-identity {
    display: grid;
    gap: 2px;
  }

  .transport {
    justify-content: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-work-mode="tracking"] .transport,
  html[data-work-mode="modulation"] .transport,
  html[data-work-mode="effects"] .transport,
  html[data-work-mode="performance"] .transport,
  html[data-work-mode="synth"] .transport {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mode-tabs {
    min-width: 0;
  }

  .mode-tab {
    min-height: 34px;
  }

  .controls-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .module-wide {
    grid-column: span 2;
  }



}

@media (max-width: 680px) {
  .synth-shell {
    width: min(100vw - 16px, 1180px);
    padding-top: 8px;
  }

  .topbar {
    align-items: stretch;
  }

  .transport {
    justify-content: stretch;
    grid-template-columns: 1fr;
    width: 100%;
  }

  html[data-work-mode="tracking"] .transport,
  html[data-work-mode="modulation"] .transport,
  html[data-work-mode="effects"] .transport,
  html[data-work-mode="performance"] .transport,
  html[data-work-mode="synth"] .transport {
    grid-template-columns: 1fr;
  }

  .mode-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .mode-tab {
    width: 100%;
  }

  .visual-panel {
    height: 178px;
  }


  .readout {
    flex-direction: column;
    gap: 6px;
    font-size: 0.66rem;
  }

  .scope-mode {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
  }

  .scope-mode select {
    width: min(100%, 160px);
  }

  .controls-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .field,
  .mini-grid .field {
    grid-template-columns: 1fr;
  }

  .field.has-knob,
  .field.has-knob.has-value-unit,
  .mini-grid .field.has-knob,
  .mini-grid .field.has-knob.has-value-unit {
    grid-template-columns: minmax(82px, 0.95fr) 36px minmax(58px, 0.62fr);
  }

  .field.has-knob.has-value-unit,
  .mini-grid .field.has-knob.has-value-unit {
    grid-template-columns: minmax(82px, 0.9fr) 36px minmax(50px, 0.52fr) minmax(28px, 0.28fr);
  }

  .range-knob {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }

  .live-slot-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .live-slot-field {
    grid-column: 1 / -1;
  }

  .project-row {
    grid-template-columns: 1fr;
  }

  .instrument-mixer-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .instrument-mixer-panel strong {
    grid-column: span 1;
  }


  html[data-work-mode="effects"] .controls-grid .module-effect-guide,
  html[data-work-mode="effects"] .controls-grid .module-effect-rack,
  html[data-work-mode="effects"] .controls-grid .module-effect-xy,
  html[data-work-mode="effects"] .controls-grid .module-effect-parameters,
  html[data-work-mode="effects"] .controls-grid .module-effect-routing {
    grid-column: span 1;
  }

  html[data-work-mode="modulation"] .controls-grid .module-modulation-guide,
  html[data-work-mode="modulation"] .controls-grid .module-studio-mixer,
  html[data-work-mode="modulation"] .controls-grid .module-macros,
  html[data-work-mode="modulation"] .controls-grid .module-matrix {
    grid-column: span 1;
  }


  .module-wide {
    grid-column: auto;
  }

  .module {
    min-height: 0;
  }

  .preset-rack,
  .dice-rack,
  .audition-rack,
  .theme-rack {
    grid-template-columns: auto minmax(130px, 1fr);
    width: 100%;
  }

  .preset-rack select,
  .dice-rack select,
  .audition-rack select,
  .theme-rack select {
    width: 100%;
  }

  .audition-rack {
    grid-template-columns: minmax(74px, 1fr) minmax(54px, auto) minmax(62px, auto);
  }

  .audition-status {
    grid-column: 1 / -1;
    width: 100%;
  }

  .tempo-controls {
    grid-template-columns: 32px minmax(72px, 1fr) 32px;
  }

  .panel-command {
    max-width: none;
  }

}

@media (max-width: 420px) {
  .mode-tabs {
    grid-template-columns: 1fr;
  }

  .audition-rack {
    grid-template-columns: auto minmax(66px, 1fr);
  }

  .audition-rack .ghost-button {
    grid-column: span 2;
    width: 100%;
  }
}