/* Studio presentation uses the same type, tools and semantic colors as the app. */
@layer ui-contract {
  #soundRoutesApp #studioScreen .studio-mobile-dock { display: none; }
  #soundRoutesApp #studioScreen {
    --studio-tool-tone: var(--page-tone, var(--section-creation)) !important;
    --studio-line: var(--line) !important;
    --studio-ink: var(--text) !important;
    --studio-track-height: 104px !important;
    --studio-toolbar-height: 60px;
    --studio-nav-height: 68px;
    font: 400 .875rem/1.6 var(--font) !important;
  }
  #soundRoutesApp #studioScreen :is(h3, strong, label, summary, button) {
    font-family: var(--font-heading) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }
  #soundRoutesApp #studioCreationName { font: 600 .9375rem/1.5 var(--font-heading) !important; color: var(--text) !important; }
  #soundRoutesApp #studioScreen > .auth-section-heading > p {
    margin: 10px 0 18px !important; padding: 0 !important;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
    color: var(--text-soft) !important; font: 400 .875rem/1.7 var(--font) !important;
  }
  #soundRoutesApp #studioScreen :is(label, h3, .studio-sound strong, .studio-disclosure > summary) { font-size: .8125rem !important; }
  #soundRoutesApp #studioScreen :is(.studio-master > span, .studio-markers-heading) { font: 500 .75rem/1.5 var(--font-heading) !important; }
  #soundRoutesApp #studioScreen :is(.studio-sound small, .studio-scope-note, .studio-help, .studio-tool-menu p) { font: 400 .75rem/1.6 var(--font) !important; color: var(--text-soft) !important; }
  #soundRoutesApp #studioScreen :is(#studioClock, .studio-console-value, .studio-ruler span) { font-family: var(--font) !important; font-weight: 500 !important; font-variant-numeric: tabular-nums !important; }

  #soundRoutesApp #studioScreen :is(.studio-button, .studio-dropdown > summary, .studio-excerpt > summary) {
    box-sizing: border-box !important;
    min-height: 40px !important; height: auto !important;
    padding: 10px 12px !important; gap: 8px !important;
    border: 1px solid color-mix(in srgb, var(--studio-tool-tone) 18%, white) !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--studio-tool-tone) 8%, white) !important;
    color: color-mix(in srgb, var(--studio-tool-tone) 88%, #20283a) !important;
    box-shadow: 0 2px 8px rgb(31 42 67 / 5%) !important;
    font: 500 .8125rem/1.5 var(--font-heading) !important;
    text-shadow: none !important; filter: none !important; transform: none !important;
    touch-action: manipulation !important;
  }
  #soundRoutesApp #studioScreen :is(.studio-button, .studio-dropdown > summary, .studio-excerpt > summary) svg,
  #soundRoutesApp #studioScreen :is(.studio-button, .studio-dropdown > summary, .studio-excerpt > summary) svg * { color: inherit !important; stroke: currentColor !important; }
  #soundRoutesApp #studioScreen :is(.studio-icon-only, .studio-history, .studio-pedal-action, .studio-track-actions > button, .studio-console-mute, .studio-console-solo, .studio-console-write) {
    width: 40px !important; min-width: 40px !important; max-width: 40px !important;
    height: 40px !important; min-height: 40px !important; max-height: 40px !important;
    flex: 0 0 40px !important; padding: 0 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
  }
  #soundRoutesApp #studioScreen :is(.studio-button:not(.studio-console-eq), .studio-dropdown > summary, .studio-excerpt > summary) svg {
    display: block !important; width: 20px !important; height: 20px !important;
    min-width: 20px !important; min-height: 20px !important; flex: 0 0 20px !important;
  }
  #soundRoutesApp #studioScreen :is([data-studio=play], [data-studio=listen], [data-studio=import], [data-studio=track], [data-studio=bounce], .studio-pedal-power) { --studio-tool-tone: var(--section-sounds) !important; }
  #soundRoutesApp #studioScreen :is([data-studio=save], [data-studio=creations], .studio-timeline-menu > summary) { --studio-tool-tone: var(--section-creation) !important; }
  #soundRoutesApp #studioScreen :is(.studio-danger, [data-studio=stop], [data-play-mode=stop], [data-studio=cancel], .studio-pedal-remove, .studio-console-write) { --studio-tool-tone: var(--section-recording) !important; }
  #soundRoutesApp #studioScreen :is(.studio-tool-menu > summary, #studioEditMenu > summary, [data-studio=clipSettings], [data-studio=touchMove], [data-studio=effects], [data-studio=automation], .studio-console-slot) { --studio-tool-tone: var(--page-tone, var(--section-creation)) !important; }
  #soundRoutesApp #studioScreen :is(.studio-excerpt > summary, [data-studio=solo], [data-studio=soloClips], .studio-console-solo, [data-play-mode=pause]) { --studio-tool-tone: var(--section-groups) !important; }
  #soundRoutesApp #studioScreen .studio-pedal-handle { --studio-tool-tone: var(--effect-color, var(--section-around)) !important; }
  #soundRoutesApp #studioScreen :is(.studio-button, .studio-excerpt > summary):is([aria-pressed=true], .is-selected),
  #soundRoutesApp #studioScreen .studio-dropdown[open] > summary {
    background: color-mix(in srgb, var(--studio-tool-tone) 18%, white) !important;
    border-color: color-mix(in srgb, var(--studio-tool-tone) 50%, white) !important;
    box-shadow: inset 0 -2px 0 var(--studio-tool-tone) !important;
  }
  #soundRoutesApp #studioScreen .studio-button:not(:disabled):hover { background: color-mix(in srgb, var(--studio-tool-tone) 13%, white) !important; }
  #soundRoutesApp #studioScreen .studio-button[aria-pressed=true]:hover { background: color-mix(in srgb, var(--studio-tool-tone) 20%, white) !important; }
  #soundRoutesApp #studioScreen :is(button, summary, input, select):focus-visible { outline: 2px solid var(--ui-focus-color) !important; outline-offset: 3px !important; }
  #soundRoutesApp #studioScreen [data-studio=save][data-state=unsaved]::after { background: var(--section-recording) !important; }
  #soundRoutesApp #studioScreen .studio-console-write.is-writing { background: #f8e2e8 !important; color: #983650 !important; border-color: #b34d68 !important; box-shadow: inset 0 -3px 0 #b34d68 !important; }
  #soundRoutesApp #studioScreen [data-studio=mute][data-solo-muted=true] { border-style: dashed !important; }
  #soundRoutesApp #studioScreen :is(.studio-toolbar, .studio-edit-tools, .studio-sound-actions, .studio-track-actions, .studio-zoom-buttons, .studio-console-switches, .studio-pedal-heading) { gap: 8px !important; }

  #soundRoutesApp #studioScreen :is(.studio-library, .studio-transport, .studio-effects, .studio-console-panel, .studio-clip-inspector) {
    border: 1px solid var(--line) !important; border-radius: 18px !important;
    background: var(--surface) !important; box-shadow: none !important;
  }
  #soundRoutesApp #studioClipDialog .studio-clip-inspector { border: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; gap: 12px !important; }
  #soundRoutesApp #studioScreen :is(.studio-sound, .studio-console-strip) { border-radius: 16px !important; border-color: var(--line) !important; }
  #soundRoutesApp #studioScreen .studio-sound { padding: 12px !important; background: #fafbfe !important; }
  #soundRoutesApp #studioScreen .studio-sound-actions { align-items: center !important; }
  #soundRoutesApp #studioScreen .studio-sound-actions button { white-space: normal !important; }
  #soundRoutesApp #studioScreen .studio-sound strong { color: #51627b !important; line-height: 1.6 !important; }
  /* A narrow left library leaves the arrangement most of the workspace. */
  #soundRoutesApp #studioScreen .studio-workspace { grid-template-columns: 272px minmax(0, 1fr) !important; gap: 12px !important; }
  #soundRoutesApp #studioScreen .studio-library { min-width: 0 !important; align-self: start !important; padding: 8px !important; }
  #soundRoutesApp #studioScreen .studio-library-heading { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; margin-bottom: 8px !important; }
  #soundRoutesApp #studioScreen .studio-library-heading h3 { margin: 0 !important; min-width: 0 !important; font-size: .75rem !important; }
  #soundRoutesApp #studioScreen .studio-library label { min-width: 0 !important; margin-bottom: 8px !important; }
  #soundRoutesApp #studioScreen .studio-library-list { grid-auto-rows: max-content !important; align-content: start !important; gap: 6px !important; max-height: min(60vh, 600px) !important; scrollbar-width: thin; }
  #soundRoutesApp #studioScreen .studio-library :is(input, select) { max-width: 100% !important; min-width: 0 !important; }
  #soundRoutesApp #studioScreen .studio-library .studio-sound { padding: 8px !important; border-radius: 12px !important; }
  #soundRoutesApp #studioScreen .studio-library .studio-sound-heading { grid-template-columns: 40px minmax(0, 1fr) !important; gap: 6px !important; margin-bottom: 6px !important; }
  #soundRoutesApp #studioScreen .studio-library :is(.studio-library-thumbnail, .studio-library-image) { width: 40px !important; height: 40px !important; }
  #soundRoutesApp #studioScreen .studio-library .studio-sound strong { font-size: .75rem !important; line-height: 1.4 !important; }
  #soundRoutesApp #studioScreen .studio-library .studio-sound small { font-size: .625rem !important; line-height: 1.4 !important; }
  #soundRoutesApp #studioScreen .studio-library-waveform { height: 20px !important; margin-bottom: 6px !important; }
  #soundRoutesApp #studioScreen .studio-library .studio-sound-actions { gap: 6px !important; }
  #soundRoutesApp #studioScreen[data-library-collapsed=true] .studio-workspace { grid-template-columns: 56px minmax(0, 1fr) !important; }
  #soundRoutesApp #studioScreen[data-library-collapsed=true] .studio-library { display: flex !important; flex-direction: column !important; contain: size; padding: 5px !important; align-self: stretch !important; background: #f7f8fc !important; }
  #soundRoutesApp #studioScreen[data-library-collapsed=true] .studio-library-heading { margin: 0 0 12px !important; }
  #soundRoutesApp #studioScreen[data-library-collapsed=true] .studio-library-heading h3 { display: none !important; }
  #soundRoutesApp #studioScreen[data-library-collapsed=true] .studio-library-toggle svg { transform: rotate(180deg) !important; }
  #soundRoutesApp #studioScreen .studio-library-rail { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 8px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
  #soundRoutesApp #studioScreen .studio-library-rail::-webkit-scrollbar { display: none; }
  #soundRoutesApp #studioScreen .studio-library-rail :is(.studio-library-thumbnail, .studio-library-image) { width: 36px !important; height: 36px !important; border-radius: 8px !important; }
  #soundRoutesApp #studioScreen .studio-library-rail-empty { display: grid; place-items: center; width: 40px; height: 40px; color: var(--text-soft); }
  #soundRoutesApp #studioScreen .studio-library-rail-empty svg { width: 20px; height: 20px; }
  #soundRoutesApp #studioScreen .studio-excerpt-wave { box-sizing: border-box; margin-top: 12px; padding: 12px 14px 8px; border: 1px solid #dce5e9; border-radius: 12px; background: #f6faf9; cursor: auto; }
  #soundRoutesApp #studioScreen .studio-excerpt-plot { position: relative; height: 96px; touch-action: none; cursor: crosshair; }
  #soundRoutesApp #studioScreen .studio-excerpt-plot canvas { display: block; width: 100%; height: 96px !important; margin: 0 !important; }
  #soundRoutesApp #studioScreen .studio-excerpt-selection { background: rgb(57 125 115 / 8%) !important; border-color: transparent !important; }
  #soundRoutesApp #studioScreen .studio-excerpt-times { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; }
  #soundRoutesApp #studioScreen .studio-excerpt-times output { font: 400 11px/1.5 var(--font) !important; color: #607580; font-variant-numeric: tabular-nums; }
  #soundRoutesApp #studioScreen :is(.studio-excerpt-hint, .studio-excerpt-status) { margin: 8px 0 0; font: 400 .75rem/1.5 var(--font) !important; color: var(--text-soft); }
  #soundRoutesApp #studioScreen .studio-excerpt-status { color: #8a6330; }
  #soundRoutesApp #studioScreen .studio-excerpt-fields { gap: 8px !important; }
  #soundRoutesApp #studioScreen .studio-disclosure > summary { min-height: 40px !important; }
  #soundRoutesApp #studioScreen .studio-timeline { border-color: #d3dceb !important; border-radius: 16px !important; background: #fafbfe !important; }
  #soundRoutesApp #studioScreen :is(.studio-ruler, .studio-markers, .studio-markers-heading) { background: #f3f5fb !important; border-color: #e1e6f1 !important; }
  #soundRoutesApp #studioScreen .studio-lane { background-image: linear-gradient(to right, #e8ecf5 1px, transparent 1px) !important; }
  #soundRoutesApp #studioScreen .studio-track-head { padding: 10px !important; background: #fafbfe !important; border-right-color: #e1e6f1 !important; }
  #soundRoutesApp #studioScreen .studio-track-head.is-selected { background: color-mix(in srgb, var(--track-color) 7%, white) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--track-color) 40%, white) !important; }
  #soundRoutesApp #studioScreen .studio-track-name { font: 600 .8125rem/1.5 var(--font-heading) !important; color: #51627b !important; }
  #soundRoutesApp #studioScreen .studio-track-name-input { min-height: 32px !important; height: 32px !important; font-weight: 500 !important; }
  #soundRoutesApp #studioScreen .studio-clip { border-radius: 10px !important; background: color-mix(in srgb, var(--track-color) 20%, white) !important; }
  #soundRoutesApp #studioScreen .audio-trim-grip {
    --audio-trim-color: #39796f;
    top: 50% !important; bottom: auto !important; width: 22px !important; height: 40px !important;
    transform: translateY(-50%) !important; background: transparent !important; border: 0 !important;
  }
  #soundRoutesApp #studioScreen .studio-clip > span:first-child { font: 500 12px/1.6 var(--font-heading) !important; }
  #soundRoutesApp #studioScreen :is(.studio-dropdown-content, .studio-context-menu, .studio-clip-dialog, .studio-workflow-dialog) {
    border-color: var(--line) !important; border-radius: 18px !important;
    background: white !important; box-shadow: 0 12px 36px rgb(46 56 89 / 12%) !important;
  }
  #soundRoutesApp #studioScreen .studio-dropdown-content { padding: 12px !important; gap: 10px !important; }
  #soundRoutesApp #studioScreen :is(.studio-dropdown-content, .studio-context-menu) .studio-button { max-width: 100% !important; white-space: normal !important; height: auto !important; min-height: 40px !important; }
  #soundRoutesApp #studioScreen .studio-console-strip { border-top-color: var(--track-color) !important; }
  #soundRoutesApp #studioScreen .studio-console-write-spacer { height: 40px !important; min-height: 40px !important; }
  #soundRoutesApp #studioScreen .studio-console-switches { min-height: 40px !important; }
  #soundRoutesApp #studioScreen .studio-preset-row { grid-template-columns: minmax(0, 1fr) 40px 40px !important; }
  #soundRoutesApp #studioScreen .studio-excerpt-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px !important; }
  #soundRoutesApp #studioScreen .studio-console .studio-console-name { min-height: 40px !important; height: auto !important; background: color-mix(in srgb, var(--track-color) 9%, white) !important; }
  #soundRoutesApp #studioScreen .studio-console .studio-console-slot { min-height: 40px !important; height: 40px !important; border-left: 3px solid var(--effect-color, var(--track-color)) !important; }
  #soundRoutesApp #studioScreen .studio-console .studio-console-eq { color: var(--text-soft) !important; border: 1px solid var(--line) !important; background: white !important; }
  #soundRoutesApp #studioScreen .studio-console .studio-console-eq[aria-pressed=true] { color: #51627b !important; border-color: var(--track-color) !important; background: color-mix(in srgb, var(--track-color) 9%, white) !important; }
  #soundRoutesApp #studioScreen .studio-pedal { min-height: 0 !important; padding: 12px !important; border-radius: 16px !important; border-color: var(--line) !important; border-top-color: var(--effect-color) !important; }
  #soundRoutesApp #studioScreen .studio-pedal-controls label > span:first-child { font: 500 .75rem/1.4 var(--font-heading) !important; height: auto !important; min-height: 32px !important; }
  #soundRoutesApp #studioScreen .studio-pedal-controls { gap: 10px 8px !important; }
  #soundRoutesApp #studioScreen .studio-dial { box-sizing: border-box !important; width: 40px !important; height: 40px !important; border-width: 1.5px !important; }
  #soundRoutesApp #studioScreen .studio-busy { background: #f4f0fb !important; color: #604580 !important; border: 1px solid #d8cbe9 !important; box-shadow: var(--shadow) !important; }
}

@media (max-width: 700px), (max-width: 1000px) and (pointer: coarse), (max-width: 1000px) and (max-height: 500px) {
  @layer ui-contract {
    /* A compact app header leaves the working area to the composition. */
    #soundRoutesApp[data-screen=studio] #appHeader {
      display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
      grid-template-rows: auto auto !important; gap: 8px !important;
      min-height: 0 !important; height: auto !important; padding: 12px !important;
      background: white !important; border: 1px solid var(--line) !important; border-radius: 18px !important;
    }
    #soundRoutesApp[data-screen=studio] #appHeader::after { display: none !important; }
    #soundRoutesApp[data-screen=studio] #appHeader .app-header-brand { grid-row: 1 !important; padding: 0 !important; margin: 0 !important; }
    #soundRoutesApp[data-screen=studio] #appHeader .app-header-actions { grid-row: 2 !important; grid-column: 1 !important; justify-self: start !important; margin: 0 !important; }
    #soundRoutesApp[data-screen=studio] #appHeader :is(.app-header-title-sub, .app-header-pill-row, .app-header-wave) { display: none !important; }
    #soundRoutesApp[data-screen=studio] #appHeader .app-header-title { column-gap: 9px !important; }
    #soundRoutesApp[data-screen=studio] #appHeader .app-header-title-main { font-size: 1rem !important; color: #51627b !important; }
    #soundRoutesApp[data-screen=studio] #appHeader .app-header-logo { width: 32px !important; height: 32px !important; border-radius: 9px !important; }
    #soundRoutesApp[data-screen=studio] #appHeader .app-header-version { color: #68758c !important; border-color: var(--line) !important; background: #f5f6fb !important; }
    #soundRoutesApp #studioScreen { --studio-track-height: 88px !important; padding-top: 16px !important; }
    #soundRoutesApp #studioScreen > .auth-section-heading { margin-bottom: 10px !important; }
    #soundRoutesApp #studioScreen > .auth-section-heading > p { display: none !important; }
    #soundRoutesApp #studioScreen .studio-toolbar { gap: 6px !important; }
    #soundRoutesApp #studioScreen .studio-toolbar { grid-template-columns: 40px minmax(0, 1fr) 40px 40px !important; }
    #soundRoutesApp #studioScreen { padding-bottom: 28px !important; }
    #soundRoutesApp[data-screen=studio] #soundRoutesRoot > .app-credit { margin-bottom: calc(var(--studio-dock-height, 84px) + 24px + env(safe-area-inset-bottom)) !important; }
    #soundRoutesApp #studioScreen .studio-mobile-dock {
      display: grid !important; position: fixed; z-index: 70;
      inset: auto max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
      width: auto; max-width: 964px; margin-inline: auto; padding: 8px;
      gap: 6px; border: 1px solid var(--line); border-radius: 16px;
      background: rgb(255 255 255 / 97%); box-shadow: 0 4px 24px rgb(38 57 66 / 14%);
    }
    #soundRoutesApp #studioScreen .studio-mobile-readout {
      display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
      min-width: 0; gap: 4px 8px; padding-inline: 4px;
      font: 400 .6875rem/1.4 var(--font) !important; color: var(--text-soft);
    }
    #soundRoutesApp #studioScreen .studio-mobile-readout #studioClock { font-size: .6875rem !important; white-space: nowrap; }
    #soundRoutesApp #studioMobileSaveState { color: var(--section-sounds); }
    #soundRoutesApp #studioMobileDock[data-save-state=unsaved] #studioMobileSaveState { color: var(--section-groups); }
    #soundRoutesApp #studioMobileDock[data-save-state=saving] #studioMobileSaveState { color: var(--section-map); }
    #soundRoutesApp #studioMobileDock[data-save-state=error] #studioMobileSaveState { color: var(--section-recording); }
    #soundRoutesApp #studioScreen .studio-mobile-actions {
      display: grid; grid-template-columns: repeat(5, minmax(40px, 1fr));
      justify-items: center; align-items: center; gap: 6px;
    }
    #soundRoutesApp #studioScreen .studio-tool-menu .studio-transport {
      display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
      position: static !important; margin: 0 !important; padding: 0 !important;
      border: 0 !important; background: transparent !important; box-shadow: none !important;
    }
    #soundRoutesApp #studioScreen .studio-tool-menu #studioLoop {
      width: 100% !important; max-width: none !important; justify-content: flex-start !important;
      height: auto !important; max-height: none !important; gap: 8px !important; padding: 8px 12px !important;
    }
    #soundRoutesApp #studioScreen .studio-tool-menu #studioLoop > span:not([data-studio-icon]) {
      display: inline !important; position: static !important; width: auto !important; height: auto !important;
      clip: auto !important; clip-path: none !important; overflow: visible !important; margin: 0 !important;
    }
    #soundRoutesApp #studioScreen .studio-busy { bottom: calc(var(--studio-dock-height, 84px) + 20px + env(safe-area-inset-bottom)) !important; }
    #soundRoutesApp #studioCreationName { font-size: .8125rem !important; line-height: 1.4 !important; }
    #soundRoutesApp #studioScreen .studio-mobile-nav { top: var(--studio-toolbar-height) !important; }
    #soundRoutesApp #studioScreen > .studio-transport { top: calc(var(--studio-toolbar-height) + var(--studio-nav-height)) !important; }
    #soundRoutesApp #studioScreen .studio-mobile-track { gap: 5px !important; padding-top: 4px !important; margin-bottom: 8px !important; }
    #soundRoutesApp #studioScreen .studio-mobile-track > span { font: 500 .75rem/1.5 var(--font-heading) !important; }
    #soundRoutesApp #studioScreen :is(input:not([type=range]):not([type=checkbox]), select, textarea) { font-size: var(--ui-input-size) !important; min-height: 40px !important; }
    #soundRoutesApp #studioScreen .studio-console-add { --ui-field-height: 40px !important; }
    #soundRoutesApp #studioScreen .studio-pane-button { font-weight: 500 !important; }
    #soundRoutesApp #studioScreen .studio-edit-tools { flex-wrap: nowrap !important; overflow-x: auto !important; padding: 4px 0 10px !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; }
    #soundRoutesApp #studioScreen .studio-edit-tools > * { flex-shrink: 0 !important; }
    #soundRoutesApp #studioScreen .studio-zoom-buttons { margin-left: 0 !important; }
    #soundRoutesApp #studioScreen :is(.studio-library, .studio-effects, .studio-console-panel) { margin-top: 8px !important; padding: 12px !important; }
    #soundRoutesApp #studioScreen .studio-workspace { display: block !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-library-toggle { display: none !important; }
    #soundRoutesApp #studioScreen .studio-library-list { max-height: none !important; overflow: visible !important; }
    #soundRoutesApp #studioScreen .studio-library .studio-sound small { font-size: .75rem !important; }
    #soundRoutesApp #studioScreen .studio-track-head { padding: 8px !important; }
    #soundRoutesApp #studioScreen .studio-track-switches { gap: 6px !important; }
    #soundRoutesApp #studioScreen :is(.studio-track-name-input, .studio-console-name-input, .studio-dial-value) { min-height: 40px !important; height: 40px !important; font-size: var(--ui-input-size) !important; }
    #soundRoutesApp #studioScreen .studio-pedal-controls.studio-eq-values { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    #soundRoutesApp #studioScreen .studio-pedal-add { width: 100% !important; }
    #soundRoutesApp #studioScreen .studio-pedal { padding: 10px !important; }
    #soundRoutesApp #studioScreen .studio-pedal-heading { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) 40px 40px !important; align-items: center !important; }
    #soundRoutesApp #studioScreen .studio-pedal-heading > strong { margin: 0 !important; }
    #soundRoutesApp #studioScreen .studio-pedal-controls input.studio-dial-value { width: 100% !important; max-width: 90px !important; }
    #soundRoutesApp #studioScreen .studio-dropdown[open] > .studio-dropdown-content {
      position: fixed !important; inset: auto 12px calc(var(--studio-dock-height, 84px) + 20px + env(safe-area-inset-bottom)) !important;
      width: calc(100% - 24px) !important; max-width: none !important; max-height: 70vh !important; max-height: min(70dvh, calc(100dvh - var(--studio-dock-height, 84px) - 36px)) !important;
      overflow-y: auto !important; z-index: 60 !important; overscroll-behavior: contain !important;
    }
    #soundRoutesApp #studioScreen :is(.studio-library, .studio-arranger, .studio-effects, .studio-console-panel, .studio-touch-tools) { scroll-margin-top: calc(var(--studio-toolbar-height) + var(--studio-nav-height) + 12px) !important; }
  }
}

@media (max-width: 480px) {
  @layer ui-contract {
    #soundRoutesApp #studioScreen .studio-edit-tools { display: flex !important; justify-content: flex-start !important; overflow: visible !important; }
    #soundRoutesApp #studioScreen .studio-zoom-buttons { margin-inline-start: auto !important; justify-content: flex-end !important; }
  }
}
@media (max-width: 360px) {
  @layer ui-contract {
    #soundRoutesApp #studioScreen .studio-edit-tools { display: grid !important; grid-template-columns: repeat(4, 40px) !important; justify-content: space-between !important; }
    #soundRoutesApp #studioScreen .studio-zoom-buttons { grid-column: span 2 !important; margin-inline-start: 0 !important; justify-content: space-between !important; }
  }
}
@media (max-width: 1000px) and (max-height: 500px) {
  @layer ui-contract {
    #soundRoutesApp #studioScreen .studio-toolbar { position: static !important; }
    #soundRoutesApp #studioScreen .studio-mobile-nav { position: sticky !important; top: 0 !important; }
    #soundRoutesApp #studioScreen :is(.studio-library, .studio-timeline, .studio-effects, .studio-console-panel) { scroll-margin-top: calc(var(--studio-nav-height) + 12px) !important; }
    #soundRoutesApp #studioScreen > .studio-transport { top: 0 !important; }
  }
}

/* Presentation must preserve hidden controls and the existing tool policies. */
@layer ui-contract {
  #soundRoutesApp #studioScreen [hidden],
  #soundRoutesApp #studioScreen[data-tool-level=simple] :is([data-tool-level=normal], [data-tool-level=full], [data-studio=automation], [data-studio=reverse], .studio-automation, .studio-inline-automation, .studio-sample-automation, .studio-handle-stretch, .studio-console-write-spacer),
  #soundRoutesApp #studioScreen[data-tool-level=normal] :is([data-tool-level=full], .studio-sample-automation),
  #soundRoutesApp #studioScreen[data-group-effects=false] :is(#studioEffectChoices, #studioClipEffects, [data-studio=clipEffects], [data-group-tool=effects]),
  #soundRoutesApp #studioScreen[data-group-automation=false] :is(.studio-automation, .studio-inline-automation, .studio-sample-automation, [data-studio=automation]),
  #soundRoutesApp #studioScreen[data-group-transforms=false] :is([data-group-tool=transforms], [data-studio=reverse], .studio-handle-stretch, label:has([data-stretch-method]), label:has([data-spectral-window]), label:has([data-mix-feedback=pitch]), label:has([data-mix-feedback=speed]), label:has(#studioTempo)) { display: none !important; }
}

/* Keep a long effect chain inside a compact board instead of growing the page. */
@layer ui-contract {
  #soundRoutesApp #studioScreen .studio-pedal-rack {
    gap: 8px !important; align-items: start !important; align-content: start !important;
    grid-auto-rows: max-content !important;
    padding: 2px !important; min-width: 0 !important; overflow-anchor: none;
  }
  #soundRoutesApp #studioScreen .studio-pedal-rack:has(.studio-pedal) {
    box-sizing: border-box !important; height: 300px !important; overflow: auto !important;
    overscroll-behavior: contain; scrollbar-gutter: stable; scroll-padding: 4px;
  }
  #soundRoutesApp #studioScreen .studio-pedal {
    min-height: 0 !important; padding: 8px !important; border-top-width: 2px !important; border-radius: 12px !important;
  }
  #soundRoutesApp #studioScreen .studio-pedal-heading { min-height: 40px !important; }
  #soundRoutesApp #studioScreen .studio-pedal-controls { gap: 6px 8px !important; margin-top: 8px !important; }
  #soundRoutesApp #studioScreen .studio-pedal-controls:not(.studio-eq-values) > label {
    display: grid !important; grid-template-columns: 40px minmax(0, 1fr) !important;
    grid-template-rows: auto 40px !important; gap: 2px 4px !important; align-items: center !important;
  }
  #soundRoutesApp #studioScreen .studio-pedal-controls:not(.studio-eq-values) > label > span:first-child {
    grid-column: 1 / -1 !important; min-height: 26px !important;
  }
  #soundRoutesApp #studioScreen .studio-pedal-controls:not(.studio-eq-values) .studio-dial { grid-row: 2; grid-column: 1; }
  #soundRoutesApp #studioScreen .studio-pedal-controls:not(.studio-eq-values) input.studio-dial-value {
    grid-row: 2; grid-column: 2; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important;
    min-width: 0 !important; min-height: 40px !important; height: 40px !important; padding: 2px !important;
  }
}

/* A docked mixer stays on screen while the arrangement channels scroll. */
@layer ui-contract {
  #soundRoutesApp[data-screen=studio] { --studio-console-space: 360px; }
  #soundRoutesApp[data-screen=studio]:has(#studioConsolePanel:not([open])) { --studio-console-space: 100px; }
  #soundRoutesApp[data-screen=studio] #studioScreen { padding-bottom: calc(var(--studio-console-space) + 20px) !important; }
  #soundRoutesApp[data-screen=studio] #studioScreen .studio-toolbar {
    position: sticky !important; top: 8px !important; z-index: 66;
    padding-block: 6px !important; background: var(--surface,white) !important;
  }
  #soundRoutesApp #studioScreen #studioConsolePanel {
    position: fixed !important; z-index: 64;
    left: var(--studio-console-left,16px); right: var(--studio-console-right,16px); bottom: 40px;
    box-sizing: border-box !important; width: auto !important; max-width: none !important;
    height: 40px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important;
    border-radius: 16px !important; background: var(--surface,white) !important;
    box-shadow: 0 -6px 24px rgb(46 56 89 / 9%) !important;
  }
  #soundRoutesApp #studioScreen #studioConsolePanel[open] { height: 304px !important; }
  #soundRoutesApp #studioScreen #studioConsolePanel > summary {
    box-sizing: border-box !important; width: 100% !important; min-height: 40px !important; height: 40px !important;
    margin: 0 !important; padding: 8px 12px !important; border-radius: 0 !important; background: var(--surface,white) !important;
  }
  #soundRoutesApp #studioScreen #studioConsole {
    box-sizing: border-box !important; height: calc(100% - 40px) !important;
    padding: 4px 8px 8px !important; overflow: auto !important; overscroll-behavior: contain;
    align-items: start !important; scrollbar-gutter: stable;
  }
  #soundRoutesApp #studioScreen .studio-console-strip {
    display: grid !important; grid-template-columns: 104px minmax(0,1fr) !important;
    grid-template-rows: 40px 100px 24px 40px !important; gap: 4px 6px !important;
    flex: 0 0 238px !important; width: 238px !important; height: 248px !important;
    padding: 8px !important; border-top-width: 2px !important;
  }
  #soundRoutesApp #studioScreen .studio-console-strip :is(.studio-console-name,.studio-console-name-input) { grid-column: 1 / -1; grid-row: 1; }
  #soundRoutesApp #studioScreen .studio-console-levels { grid-column: 1; grid-row: 2; height: 100px !important; gap: 12px !important; }
  #soundRoutesApp #studioScreen .studio-console input.studio-console-fader { height: 100px !important; min-height: 0 !important; width: 40px !important; min-width: 40px !important; flex-basis: 40px !important; }
  #soundRoutesApp #studioScreen .studio-console-value { grid-column: 1; grid-row: 3; margin: 0 !important; align-self: end; }
  #soundRoutesApp #studioScreen .studio-console-switches { grid-column: 1 / -1; grid-row: 4; margin: 0 !important; align-items: center; justify-content: start !important; }
  #soundRoutesApp #studioScreen .studio-console-write-spacer { display: none !important; }
  #soundRoutesApp #studioScreen .studio-console-processing {
    grid-column: 2; grid-row: 2 / 4; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; scrollbar-gutter: stable;
  }
  #soundRoutesApp #studioScreen .studio-console-processing > * { flex-shrink: 0; }
  #soundRoutesApp #studioScreen .studio-timeline {
    max-height: max(180px,calc(100dvh - var(--studio-console-space,352px) - var(--studio-toolbar-height,60px) - var(--studio-transport-height,64px) - 96px)) !important;
    overflow: auto !important; overscroll-behavior: contain; scrollbar-gutter: stable;
  }
}
@media (min-width: 701px) and (min-height: 501px) and (pointer: fine) {
  @layer ui-contract {
    #soundRoutesApp #studioScreen > .studio-transport { position: sticky !important; top: calc(var(--studio-toolbar-height,60px) + 16px) !important; z-index: 65; }
  }
}
@media (max-width: 700px), (max-width: 1000px) and (pointer: coarse), (max-width: 1000px) and (max-height: 500px) {
  @layer ui-contract {
    #soundRoutesApp[data-screen=studio], #soundRoutesApp[data-screen=studio]:has(#studioConsolePanel:not([open])) { --studio-console-space: 0px; }
    #soundRoutesApp[data-screen=studio] #studioScreen .studio-toolbar { top: 0 !important; }
    #soundRoutesApp #studioScreen[data-mobile-pane=mixer] #studioConsolePanel[open] {
      inset: calc(var(--studio-toolbar-height,60px) + var(--studio-nav-height,68px) + 12px) 12px calc(var(--studio-dock-height,84px) + 16px + env(safe-area-inset-bottom)) !important;
      height: auto !important;
    }
    #soundRoutesApp #studioScreen[data-mobile-pane=mixer] > .studio-mobile-track { visibility: hidden; }
    #soundRoutesApp #studioScreen .studio-timeline {
      max-height: max(140px,calc(100dvh - var(--studio-toolbar-height,60px) - var(--studio-nav-height,68px) - var(--studio-dock-height,84px) - 190px)) !important;
    }
  }
}
@media (min-width: 701px) and (min-height: 501px) and (pointer: fine) {
  @layer ui-contract {
    #soundRoutesApp #studioScreen .studio-library {
      display: flex !important; flex-direction: column !important; min-height: 0 !important;
      max-height: max(240px,calc(100dvh - var(--studio-console-space,352px) - var(--studio-toolbar-height,60px) - 26px)) !important;
      overflow: visible !important;
    }
    #soundRoutesApp #studioScreen #studioLibraryBody:not([hidden]) { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
    #soundRoutesApp #studioScreen .studio-library label { flex-shrink: 0; }
    #soundRoutesApp #studioScreen .studio-library-list { flex: 1 1 auto; min-height: 0; max-height: none !important; }
    #soundRoutesApp[data-screen=studio] #soundRoutesRoot > .app-credit {
      position: fixed !important; bottom: 0; left: 12px; right: 12px; z-index: 63;
      box-sizing: border-box; min-height: 28px !important; margin: 0 !important; padding: 4px !important;
      background: var(--surface,white); font-size: 11px !important;
    }
  }
}

/* Dense DAW layout: 40px commands, 32px channel switches, smaller text. */
@layer ui-contract {
  #soundRoutesApp[data-screen=studio] { --studio-console-space: 296px; }
  #soundRoutesApp[data-screen=studio]:has(#studioConsolePanel:not([open])) { --studio-console-space: 96px; }
  #soundRoutesApp #studioScreen { font-size: 12px !important; }
  #soundRoutesApp #studioScreen :is(label,h3,summary,.studio-button) { font-size: 12px !important; }
  #soundRoutesApp #studioScreen .studio-button:not(.studio-console-eq) svg { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; flex-basis: 18px !important; }
  #soundRoutesApp #studioScreen .studio-track-head { padding: 6px !important; }
  #soundRoutesApp #studioScreen .studio-track-name { height: 20px !important; min-height: 20px !important; max-height: 20px !important; padding: 0 !important; font-size: 11.5px !important; line-height: 1.4 !important; }
  #soundRoutesApp #studioScreen .studio-track-number { font-size: 9px !important; }
  #soundRoutesApp #studioScreen .studio-track-switches { flex-basis: 32px !important; gap: 4px !important; }
  #soundRoutesApp #studioScreen .studio-track-mix { gap: 4px !important; }
  #soundRoutesApp #studioScreen .studio-track-meter { height: 52px !important; flex-basis: 14px !important; }
  #soundRoutesApp #studioScreen .studio-track-pan { flex-basis: 32px !important; font-size: 10px !important; }
  #soundRoutesApp #studioScreen .studio-track-pan .studio-dial { width: 28px !important; height: 28px !important; }
  #soundRoutesApp #studioScreen .studio-clip > span:first-child { font-size: 10.5px !important; }
  #soundRoutesApp #studioScreen :is(.studio-ruler,.studio-marker-row,.studio-markers,.studio-markers-heading) { min-height: 22px !important; }
  #soundRoutesApp #studioScreen :is(.studio-ruler,.studio-marker-row,.studio-markers) { height: 22px !important; }
  #soundRoutesApp #studioScreen .studio-ruler span { font-size: 10px !important; }
  #soundRoutesApp #studioScreen .studio-transport { padding: 6px !important; gap: 6px !important; }
  #soundRoutesApp #studioScreen .studio-toolbar { gap: 6px !important; margin-bottom: 8px !important; }
  #soundRoutesApp #studioScreen .studio-edit-tools { gap: 6px !important; margin-block: 4px !important; }
  #soundRoutesApp #studioScreen #studioConsolePanel[open] { height: 240px !important; }
  #soundRoutesApp #studioScreen .studio-console-strip {
    flex-basis: 196px !important; width: 196px !important; height: 188px !important;
    grid-template-columns: 76px minmax(0,1fr) !important; grid-template-rows: 32px 76px 18px 32px !important;
    padding: 6px !important; gap: 4px !important;
  }
  #soundRoutesApp #studioScreen .studio-console-strip :is(.studio-console-name,.studio-console-name-input) {
    height: 32px !important; min-height: 32px !important; padding: 3px !important; font-size: 11px !important;
  }
  #soundRoutesApp #studioScreen .studio-console-levels { height: 76px !important; gap: 8px !important; }
  #soundRoutesApp #studioScreen .studio-console input.studio-console-fader { height: 76px !important; width: 32px !important; min-width: 32px !important; flex-basis: 32px !important; }
  #soundRoutesApp #studioScreen .studio-console-switches { min-height: 32px !important; }
  #soundRoutesApp #studioScreen .studio-console-value { font-size: 10px !important; }
  #soundRoutesApp #studioScreen .studio-console-processing { gap: 4px !important; }
  #soundRoutesApp #studioScreen .studio-console .studio-console-eq { height: 40px !important; min-height: 40px !important; }
  #soundRoutesApp #studioScreen .studio-console .studio-console-slot { height: 32px !important; min-height: 32px !important; font-size: 10.5px !important; padding: 3px !important; }
}
@media (max-width: 700px), (max-width: 1000px) and (pointer: coarse), (max-width: 1000px) and (max-height: 500px) {
  @layer ui-contract {
    #soundRoutesApp[data-screen=studio], #soundRoutesApp[data-screen=studio]:has(#studioConsolePanel:not([open])) { --studio-console-space: 0px; }
    #soundRoutesApp #studioScreen #studioConsolePanel[open] { height: auto !important; }
    #soundRoutesApp #studioScreen .studio-pane-button { min-height: 48px !important; font-size: 10.5px !important; }
    #soundRoutesApp #studioScreen .studio-console-strip :is(.studio-console-name,.studio-console-name-input) { font-size: 12px !important; }
  }
}
@media (min-width: 701px) and (min-height: 501px) and (pointer: fine), (min-width: 1001px) {
  @layer ui-contract {
    #soundRoutesApp #studioScreen .studio-workspace { padding-top: 8px !important; }
  }
}
@layer ui-contract {
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console .studio-console-eq { padding: 0 !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console .studio-console-eq > svg {
    display: block !important; width: 100% !important; height: 100% !important;
    min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important;
  }
}
@media (max-width: 700px), (max-width: 1000px) and (pointer: coarse), (max-width: 1000px) and (max-height: 500px) {
  @layer ui-contract {
    #soundRoutesApp #studioScreen #studioConsole {
      display: grid !important; grid-template-columns: repeat(auto-fit,minmax(min(160px,100%),1fr)) !important;
      align-content: start !important; gap: 8px !important;
    }
    #soundRoutesApp #studioScreen #studioConsole .studio-console-strip {
      position: relative !important; inset: auto !important; margin: 0 !important;
      width: 100% !important; min-width: 0 !important; max-width: none !important; flex-basis: auto !important;
    }
  }
}
/* A landscape phone uses one header row so the mixer keeps usable height. */
@media (min-width: 600px) and (max-width: 1000px) and (max-height: 500px) {
  @layer ui-contract {
    #soundRoutesApp #studioScreen .studio-toolbar { width: calc(100% - 194px) !important; }
    #soundRoutesApp #studioScreen .studio-mobile-nav {
      position: fixed !important; top: 8px !important; right: 12px !important; z-index: 76;
      width: 178px !important; grid-template-columns: repeat(4,40px) !important; gap: 6px !important; padding: 0 !important; margin: 0 !important;
    }
    #soundRoutesApp #studioScreen .studio-pane-button {
      min-height: 40px !important; flex-direction: row !important; gap: 4px !important; padding: 4px !important; font-size: 10px !important;
    }
    #soundRoutesApp #studioScreen .studio-pane-button svg { width: 16px !important; height: 16px !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen #studioConsolePanel { top: 64px !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-pane-button > span:last-child {
      position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important;
      padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important;
    }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console-strip { height: 170px !important; grid-template-rows: 28px 64px 14px 32px !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console-strip :is(.studio-console-name,.studio-console-name-input) { height: 28px !important; min-height: 28px !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console-levels,
    #soundRoutesApp #soundRoutesRoot #studioScreen input.studio-console-fader { height: 64px !important; }
  }
}

/* Recording cards have an explicit, single-item native drag image. */
@layer ui-contract {
  #soundRoutesApp #studioScreen .studio-sound:is(:hover,:focus-within,.is-library-dragging) {
    border-color: var(--section-creation) !important;
    background: color-mix(in srgb,var(--section-creation) 10%,white) !important;
    box-shadow: inset 3px 0 0 var(--section-creation) !important;
  }
  #soundRoutesApp #studioScreen .studio-library-drag-preview {
    position: fixed !important; left: -10000px !important; top: 0 !important;
    display: grid !important; grid-template-columns: 40px minmax(0,1fr) !important;
    align-items: center !important; gap: 8px !important; box-sizing: border-box !important;
    width: 224px !important; max-height: 80px !important; padding: 8px !important;
    border: 2px solid var(--section-creation) !important; border-radius: 12px !important;
    background: #f2edf7 !important; box-shadow: none !important; pointer-events: none;
  }
  #soundRoutesApp #studioScreen .studio-library-drag-preview :is(.studio-library-thumbnail,.studio-library-image) { width: 40px !important; height: 40px !important; }
  #soundRoutesApp #studioScreen .studio-library-drag-preview strong { font-size: 12px !important; }

  /* Tall, narrow strips rather than a square containing two control columns. */
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console-strip {
    flex: 0 0 124px !important; width: 124px !important; height: 222px !important;
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: 24px 32px 32px 54px 14px 32px !important;
    gap: 4px !important; padding: 6px !important; border-radius: 12px !important;
    background: color-mix(in srgb,var(--track-color) 9%,#f7f5fb) !important;
  }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console-strip > * { grid-column: 1 !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console-strip :is(.studio-console-name,.studio-console-name-input) { grid-row: 1 !important; height: 24px !important; min-height: 24px !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console-strip > .studio-console-eq { grid-row: 2 !important; height: 32px !important; min-height: 32px !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console-processing { grid-row: 3 !important; height: 34px !important; padding: 0 !important; scrollbar-gutter: auto; scrollbar-width: thin; }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console-levels { grid-row: 4 !important; height: 54px !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen input.studio-console-fader { height: 54px !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console-value { grid-row: 5 !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console-switches { grid-row: 6 !important; gap: 4px !important; justify-content: center !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console-inserts {
    display: grid !important; grid-template-columns: minmax(0,1fr) 32px !important;
    align-items: start !important; gap: 3px !important; padding: 0 !important; border: 0 !important; background: transparent !important;
  }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console-slots { display: flex !important; flex-direction: row !important; height: 34px !important; overflow: auto !important; scrollbar-width: none; }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console-slot { flex: 0 0 32px !important; width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 3px !important; justify-content: center !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console-slot > span:last-child { display: none !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console-add { --ui-field-height: 32px !important; width: 32px !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console-add select { height: 32px !important; min-height: 32px !important; padding: 0 !important; color: transparent !important; background-image: none !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console-add option { color: var(--text) !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console-add > svg { left: 8px !important; width: 16px !important; height: 16px !important; }

  /* Neutral workspace; color is reserved for recordings and channel identity. */
  #soundRoutesApp #soundRoutesRoot #studioScreen { background: #f7f8fb !important; border-color: #d8deea !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen :is(.studio-library,.studio-effects,.studio-console-panel,.studio-transport) { background: #fafbfd !important; border-color: #d6ddea !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen :is(.studio-toolbar,.studio-mobile-nav,.studio-console-panel > summary) { background: #f4f6fa !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-timeline { background: #f5f6fa !important; border-color: #cbd5e4 !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-track-head { background: #f0f3f8 !important; border-color: #d5dcea !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-track { border-bottom: 1px solid #d3dbe8 !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-track:nth-child(even) .studio-lane { background-color: #eef1f7 !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-lane { background-image: linear-gradient(to right,#dce2ee 1px,transparent 1px) !important; }
  #soundRoutesApp #soundRoutesRoot #studioScreen .studio-console-strip { background: #f7f8fb !important; }
  #soundRoutesApp #studioScreen .studio-rack-tools { position: sticky; top: 0; z-index: 2; padding: 4px 2px 8px; background: #fafbfd; }
  #soundRoutesApp #studioScreen .studio-rack-tools .studio-pedal-add { width: min(100%,260px) !important; }

}

/* The selected channel's effects and mixer form one stationary work area. */
@media (min-width: 701px) and (min-height: 501px) and (pointer: fine), (min-width: 1001px) {
  @layer ui-contract {
    #soundRoutesApp[data-screen=studio] {
      --studio-console-height: 272px; --studio-effects-height: 40px;
      --studio-console-space: calc(var(--studio-console-height) + var(--studio-effects-height) + 64px);
    }
    #soundRoutesApp[data-screen=studio]:has(#studioConsolePanel:not([open])) { --studio-console-height: 40px; --studio-console-space: calc(var(--studio-console-height) + var(--studio-effects-height) + 64px); }
    #soundRoutesApp[data-screen=studio]:has(#studioEffects[open],#studioClipEffects[open]:not([hidden])) { --studio-effects-height: 212px; }
    #soundRoutesApp #soundRoutesRoot #studioScreen #studioConsolePanel { bottom: 32px !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen #studioConsolePanel[open] { height: var(--studio-console-height) !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen :is(#studioEffects,#studioClipEffects) {
      position: fixed !important; z-index: 64; box-sizing: border-box !important;
      left: var(--studio-effects-left,var(--studio-console-left,16px)); right: var(--studio-console-right,16px);
      bottom: calc(var(--studio-console-height) + 40px) !important;
      height: 40px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
      border: 1px solid #d6ddea !important; border-radius: 14px !important;
      overflow: hidden !important; box-shadow: 0 -3px 12px rgb(76 52 106 / 5%) !important;
    }
    #soundRoutesApp #soundRoutesRoot #studioScreen :is(#studioEffects,#studioClipEffects)[open] { display: flex !important; flex-direction: column !important; height: var(--studio-effects-height) !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen #studioClipEffects[hidden] { display: none !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen :is(#studioEffects,#studioClipEffects) > summary {
      position: static !important; transform: none !important; flex: 0 0 34px !important;
      height: 34px !important; min-height: 34px !important; max-width: none !important; width: 100% !important;
      box-sizing: border-box !important; margin: 0 !important; padding: 6px 10px !important; border-radius: 0 !important;
      background: #f0f3f8 !important; border-bottom: 1px solid #d6ddea !important;
    }
    #soundRoutesApp #soundRoutesRoot #studioScreen :is(#studioEffectChoices,#studioClipEffectChoices) { display: flex !important; flex-direction: column !important; flex: 1 1 auto; min-height: 0 !important; overflow: hidden !important; padding: 4px 8px !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-rack-tools { flex: 0 0 auto; padding-block: 0 4px; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-pedal-rack { min-height: 0 !important; overflow: auto !important; flex: 1 1 auto; overscroll-behavior: contain; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-pedal-rack:has(.studio-pedal) { height: auto !important; overflow: auto !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-mixer-details { position: absolute; top: 0; right: 138px; z-index: 4; box-sizing: border-box; width: 150px; max-height: 180px; overflow: auto; padding: 4px 8px; background: #fafbfd; border-radius: 10px; border: 1px solid #d6ddea; }
    #soundRoutesApp #soundRoutesRoot #studioScreen :is(#studioEffects,#studioClipEffects) > .studio-preset-toolbar { position: absolute; top: 0; right: 4px; width: 128px; margin: 0 !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen :is(#studioEffects,#studioClipEffects) > .studio-preset-toolbar button { height: 32px !important; min-height: 32px !important; padding: 3px 8px !important; font-size: 11px !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen :is(#studioEffects,#studioClipEffects) > summary { padding-right: 300px !important; white-space: nowrap; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-transport { min-height: 40px !important; padding: 4px !important; margin-bottom: 4px !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-toolbar { padding: 0 !important; min-height: 40px !important; margin-bottom: 4px !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-edit-tools { padding: 0 !important; margin-block: 0 4px !important; min-height: 40px !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen > .auth-section-heading { display: none !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen { margin-top: 10px !important; padding-top: 10px !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-workspace { grid-template-columns: 224px minmax(0,1fr) !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen[data-library-collapsed=true] .studio-workspace { grid-template-columns: 56px minmax(0,1fr) !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen :is(#studioEffects,#studioClipEffects) .studio-pedal { padding: 6px !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen :is(#studioEffects,#studioClipEffects) .studio-pedal-heading { min-height: 32px !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen :is(#studioEffects,#studioClipEffects) .studio-pedal-action { width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; flex-basis: 32px !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-library { max-height: max(180px,calc(100dvh - var(--studio-console-height) - 48px - var(--studio-workspace-top,80px))) !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-timeline { min-height: 64px !important; max-height: max(64px,calc(100dvh - var(--studio-console-height) - var(--studio-effects-height) - 48px - var(--studio-timeline-top,170px))) !important; }
  }
}
@media (max-width: 700px), (max-width: 1000px) and (pointer: coarse), (max-width: 1000px) and (max-height: 500px) {
  @layer ui-contract {
    #soundRoutesApp #soundRoutesRoot #studioScreen #studioConsole { grid-template-columns: repeat(auto-fit,minmax(min(124px,100%),1fr)) !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen #studioConsole .studio-console-strip { width: 100% !important; min-width: 0 !important; max-width: none !important; }
  }
}

@layer ui-contract {
  #soundRoutesApp #studioScreen .studio-rack-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  #soundRoutesApp #studioScreen .studio-rack-tabs { display: flex; flex: 1 1 140px; min-width: 0; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
  #soundRoutesApp #studioScreen .studio-rack-tab { flex: 0 0 auto; height: 32px !important; min-height: 32px !important; padding: 3px 8px !important; font-size: 11px !important; }
}
@media (min-width: 701px) and (min-height: 501px) and (pointer: fine), (min-width: 1001px) {
  @layer ui-contract {
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-rack-tools { flex-wrap: nowrap; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-rack-tools .studio-pedal-add { flex: 0 0 170px; width: 170px !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-pedal-rack { display: flex !important; gap: 8px !important; scroll-snap-type: x proximity; overflow-x: auto !important; overflow-y: hidden !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-pedal-rack > .studio-pedal { flex: 0 0 100%; width: 100% !important; height: 100% !important; overflow-y: auto; overscroll-behavior: contain; scroll-snap-align: start; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-pedal-controls:not(.studio-eq-values) { grid-template-columns: repeat(auto-fit,minmax(76px,1fr)) !important; margin: 2px 0 !important; gap: 4px 8px !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-pedal-controls:not(.studio-eq-values) > label { grid-template-columns: 32px minmax(0,1fr) !important; grid-template-rows: 22px 32px !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-pedal-controls:not(.studio-eq-values) > label > span:first-child { min-height: 22px !important; font-size: 10px !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-pedal-controls .studio-dial { width: 30px !important; height: 30px !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-pedal-controls input.studio-dial-value { height: 30px !important; min-height: 30px !important; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-pedal-order { display: flex !important; flex-direction: row; align-items: center; gap: 6px; margin-top: 4px; }
    #soundRoutesApp #soundRoutesRoot #studioScreen .studio-pedal-order select { width: 54px !important; min-height: 24px !important; height: 24px !important; padding: 0 4px !important; font-size: 11px !important; }
  }
}