/* Looproom studio shell. All editor nodes keep their existing identity and controls. */
body.studio-desktop {
  --bg: #12151b;
  --panel: #1a2029;
  --line: #303946;
  --muted: #8d9bae;
  --lime: #a8dfa6;
  --cream: #dce3ed;
  --orange: #e9ae7b;
  --control: #252e3a;
  --control-line: #414e5e;
  --text-soft: #a7b2c2;
  --desktop-accent: #a8dfa6;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--cream);
  font-size: 12px;
}
body.studio-desktop * { scrollbar-width: thin; scrollbar-color: #4c5b6c #171c24; }
body.studio-desktop :focus-visible { outline: 2px solid #a8dfa6; outline-offset: -2px; }
body.studio-desktop button { transition: background-color .12s, border-color .12s, color .12s; }
body.studio-desktop button:disabled { cursor: default; }
body.studio-desktop input[type="range"] { accent-color: var(--desktop-accent); }
body.studio-desktop .app { width: 100%; height: 100dvh; min-height: 0; overflow: hidden; }
body.studio-desktop .workspace { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }

/* Project and transport remain available while any editor is open. */
body.studio-desktop .topbar { flex: 0 0 44px; height: 44px; min-height: 44px; padding: 0 14px; gap: 20px; background: #181d25; border-color: #303946; }
body.studio-desktop .brand { font-size: 21px; letter-spacing: -1.2px; }
body.studio-desktop .brand small { color: #8492a5; font-size: 8px; letter-spacing: 1.6px; }
body.studio-desktop .project-title-slot { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; border-left: 1px solid #37414e; padding-left: 20px; }
body.studio-desktop .project-title-slot input { width: min(100%, 30ch); min-width: 0; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #e6ebf2; padding: 4px 7px; font: 600 12px 'DM Sans', sans-serif; letter-spacing: 0; }
body.studio-desktop .project-title-slot input:hover { background: #222a35; border-color: #3d4b5c; }
body.studio-desktop .project-title-slot input:focus { border-color: #a8dfa6; outline: none; }
body.studio-desktop .project-title-slot label { color: #8190a2; font-size: 9px; text-transform: uppercase; letter-spacing: .8px; white-space: nowrap; }
body.studio-desktop .top-actions { flex-wrap: nowrap; gap: 6px; }
body.studio-desktop .project-action { min-height: 27px; padding: 4px 9px; border: 1px solid #3b4858; border-radius: 3px; background: #252e3a; color: #d6dfeb; font-size: 10px; line-height: 1.4; }
body.studio-desktop .project-action:hover { background: #354254; border-color: #5d6d7f; }
body.studio-desktop .top-actions .export-btn { height: 28px; padding: 0 12px; border-radius: 3px; background: #a8dfa6; color: #182a20; font-size: 10px; white-space: nowrap; }
body.studio-desktop .export-btn:hover { background: #c0efba; }
body.studio-desktop .export-btn span { margin-left: 7px; font-size: 13px; }
body.studio-desktop .toolbar { position: relative; top: auto; z-index: 5; flex: 0 0 52px; height: 52px; padding: 0 14px; gap: 20px; background: #202732; border-bottom: 1px solid #3a4552; box-shadow: none; }
body.studio-desktop .transport { gap: 14px; min-width: max-content; }
body.studio-desktop .play { width: 31px; height: 31px; border-radius: 4px; background: #a8dfa6; color: #203528; }
body.studio-desktop .transport-btn { display: inline-grid; place-items: center; width: 28px; height: 30px; padding: 0; border: 1px solid #414c5a; border-radius: 4px; background: #29323e; color: #d0dae8; }
body.studio-desktop .transport-divider { height: 27px; background: #3c4654; }
body.studio-desktop .playback-modes { border-color: #465363; background: #151b23; padding: 2px; border-radius: 4px; }
body.studio-desktop .playback-modes button { padding: 6px 9px; color: #9ba8b9; font-size: 9px; }
body.studio-desktop .playback-modes button.selected { background: #3a5545; color: #c5ecc1; }
body.studio-desktop :is(.time-display span, .tempo > span, .signature > span, .master > span:first-child) { color: #929fb0; font-size: 8px; letter-spacing: .9px; margin-bottom: 3px; }
body.studio-desktop .time-display { min-width: 76px; padding: 4px 10px; border-radius: 3px; background: #151b23; border: 1px solid #344050; }
body.studio-desktop .time-display strong { color: #bde8ba; font-size: 17px; font-variant-numeric: tabular-nums; }
body.studio-desktop .tempo input { color: #e3eaf3; font-size: 17px; width: 40px; }
body.studio-desktop .tempo b { color: #8998ad; }
body.studio-desktop .signature { display: block; }
body.studio-desktop .signature .meter-controls { margin-top: 0; gap: 3px; }
body.studio-desktop .meter-controls :is(input, select) { width: 40px; height: 24px; padding: 1px 3px; font-size: 12px; background: #19212b; border-color: #3e4c5e; color: #dce5ef; }
body.studio-desktop .meter-controls select { width: 43px; }
body.studio-desktop .toolbar-right { display: flex; gap: 20px; }
body.studio-desktop .keyboard-hint { color: #99a5b7; font-size: 10px; }
body.studio-desktop kbd { border-color: #4f5b6b; background: #232c38; color: #b7c4d4; }
body.studio-desktop .master { gap: 9px; }
body.studio-desktop .master > span:first-child { display: block; margin: 0; }
body.studio-desktop .master input { width: 74px; }
body.studio-desktop .meter i { background: #9fdca6; width: 3px; height: 16px; }
body.studio-desktop .meter i:nth-last-child(-n+3) { background: #45634e; }

/* Editor launchers, layout controls, and the shared pattern selection. */
body.studio-desktop .workspace-tools { position: relative; z-index: 10; display: flex; align-items: center; gap: 6px; flex: 0 0 34px; min-height: 34px; padding: 3px 10px; background: #181e27; border-bottom: 1px solid #34404e; }
body.studio-desktop .workspace-tools :is(button, select, summary) { min-height: 26px; border: 1px solid transparent; border-radius: 3px; padding: 4px 8px; background: transparent; color: #acb8c9; font: 600 10px 'DM Sans', sans-serif; white-space: nowrap; cursor: pointer; }
body.studio-desktop .workspace-tools :is(button, summary):hover { color: #e8edf5; background: #2b3543; }
body.studio-desktop .workspace-tools button[aria-pressed="true"] { color: #bce9b9; background: #2c4035; border-color: #466c50; }
body.studio-desktop .workspace-tools button.is-focused { color: #c9edc5; box-shadow: inset 0 -2px #a8dfa6; }
body.studio-desktop .workspace-tools select { background: #252f3b; border-color: #3b495b; color: #dce4ef; padding-block: 3px; }
body.studio-desktop .workspace-quick-windows { display: flex; align-items: center; gap: 3px; }
body.studio-desktop .workspace-layout-label { margin-left: auto; }
body.studio-desktop .workspace-tools label { display: flex; align-items: center; gap: 6px; color: #8290a2; font-size: 9px; }
body.studio-desktop .workspace-tools .edit-history { margin-left: 4px; border-left: 1px solid #34404e; padding-left: 5px; }
body.studio-desktop .workspace-tools .edit-history button { font-size: 14px; padding: 2px 7px; }
body.studio-desktop .workspace-tools details { position: relative; }
body.studio-desktop .workspace-tools summary { list-style: none; }
body.studio-desktop .workspace-tools summary::-webkit-details-marker { display: none; }
body.studio-desktop .workspace-tools details[open] > summary { background: #303e4d; color: #dfe8f3; }
body.studio-desktop .workspace-menu-list { position: absolute; z-index: 3000; top: calc(100% + 5px); left: 0; min-width: 220px; max-height: min(70vh, 550px); overflow: auto; padding: 6px; border: 1px solid #4b5a6b; border-radius: 5px; background: #202935; box-shadow: 0 12px 36px #0008; }
body.studio-desktop .workspace-menu-list button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 7px 9px; text-align: left; }
body.studio-desktop .workspace-menu-list hr { border: 0; border-top: 1px solid #455268; margin: 5px; }
body.studio-desktop .workspace-menu-list kbd { padding: 2px 4px; font-size: 8px; margin: 0; }
body.studio-desktop .pattern-bar { flex: 0 0 auto; display: flex; flex-wrap: nowrap; min-height: 35px; width: 100%; margin: 0; padding: 4px 12px; gap: 8px; overflow-x: auto; border: 0; border-bottom: 1px solid #3b4655; border-radius: 0; background: #1e2630; }
body.studio-desktop .pattern-bar label { gap: 6px; font-size: 8px; letter-spacing: .7px; color: #8f9fb1; white-space: nowrap; }
body.studio-desktop .pattern-bar :is(input, select, button) { height: 25px; padding: 3px 7px; border: 1px solid #435165; border-radius: 3px; background: #293442; color: #d7e0ed; font-size: 10px; }
body.studio-desktop .pattern-bar #patternSelect { color: #bfebba; border-color: #4d6856; background: #293b31; }
body.studio-desktop .pattern-bar input { width: 130px; }
body.studio-desktop .pattern-bar #patternLength { width: 50px; }
body.studio-desktop .pattern-bar #patternCount { color: #8c9aad; font-size: 9px; margin-left: auto; padding-left: 5px; }
body.studio-desktop .workspace-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 24px; min-height: 24px; padding: 0 11px; overflow: hidden; background: #181e27; border-top: 1px solid #35404d; color: #93a2b6; font-size: 10px; }
body.studio-desktop .workspace-status > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.studio-desktop .workspace-status #saveStatus { color: #b1c4b0; font-size: 10px; flex-shrink: 0; }
body.studio-desktop .workspace-status #editorHint { flex: 1; color: #8596ac; }
body.studio-desktop .workspace-status-help { border: 0; border-left: 1px solid #3c495b; background: transparent; color: #acbacd; padding: 1px 4px 1px 10px; font-size: 10px; }
body.studio-desktop .workspace-active-editor { font-weight: 700; color: #c7d6e7; }

/* The desk is a genuine bounded workspace, not a scrolling page of cards. */
/* Keep window focus order inside the desk, below transport and Windows menus. */
body.studio-desktop #studioDesk { --lr-left-width: 220px; --lr-bottom-height: 260px; position: relative; z-index: 0; isolation: isolate; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; background: #11161e; }
body.studio-desktop .lr-workspace { display: grid; grid-template-columns: var(--lr-left-width) 4px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 4px var(--lr-bottom-height); }
body.studio-desktop .lr-workspace:not(.has-left) { grid-template-columns: 0 0 minmax(0, 1fr); }
body.studio-desktop .lr-workspace:not(.has-bottom) { grid-template-rows: minmax(0, 1fr) 0 0; }
body.studio-desktop .lr-workspace:not(.has-main).has-bottom { grid-template-rows: 0 0 minmax(0, 1fr); }
body.studio-desktop .lr-zone { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: #191f28; }
body.studio-desktop .lr-zone[data-zone="left"] { grid-column: 1; grid-row: 1 / -1; }
body.studio-desktop .lr-zone[data-zone="main"] { grid-column: 3; grid-row: 1; }
body.studio-desktop .lr-zone[data-zone="bottom"] { grid-column: 3; grid-row: 3; }
body.studio-desktop .lr-zone-content { position: relative; flex: 1; display: flex; min-height: 0; min-width: 0; overflow: hidden; }
body.studio-desktop .lr-zone-tabs { display: flex; flex: 0 0 28px; min-height: 28px; gap: 1px; overflow-x: auto; background: #151b23; border-bottom: 1px solid #36414f; }
body.studio-desktop .lr-zone-tabs button { flex-shrink: 0; border: 0; border-right: 1px solid #303b49; padding: 4px 12px; background: #1c2530; color: #93a4b9; font-size: 10px; }
body.studio-desktop .lr-zone-tabs button[aria-selected="true"] { background: #2b3949; color: #dfe8f3; box-shadow: inset 0 -2px #a8dfa6; }
body.studio-desktop .lr-window { display: flex; flex-direction: column; min-width: 0; min-height: 0; width: 100%; height: 100%; overflow: hidden; background: #1a2029; border: 1px solid #35414f; border-radius: 0; }
body.studio-desktop .lr-window.is-active { border-color: #526b66; }
body.studio-desktop .lr-window-bar { display: flex; align-items: center; gap: 8px; flex: 0 0 29px; min-height: 29px; padding: 0 5px 0 10px; border-bottom: 1px solid #35414e; background: #26303d; color: #becada; cursor: grab; user-select: none; touch-action: none; }
body.studio-desktop .lr-window.is-active > .lr-window-bar { background: #2d3b45; color: #e6efe7; }
body.studio-desktop .lr-window-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: .35px; }
body.studio-desktop .lr-window-title::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 1px; background: #768b9d; vertical-align: 1px; }
body.studio-desktop .lr-window.is-active > .lr-window-bar .lr-window-title::before { background: #a8dfa6; }
body.studio-desktop .lr-window-actions { display: flex; align-items: center; gap: 2px; }
body.studio-desktop .lr-window-actions :is(button, select) { height: 24px; min-height: 24px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #b2c0d1; padding: 0 5px; font-size: 11px; cursor: pointer; }
body.studio-desktop .lr-window-actions button { width: 24px; }
body.studio-desktop .lr-window-actions select { max-width: 76px; font-size: 9px; padding-right: 1px; background: #25313e; border-color: #405061; }
body.studio-desktop .lr-window-actions :is(button, select):hover { background: #425166; color: #f3f7fb; }
body.studio-desktop .lr-window-actions .lr-close-button:hover { background: #693b43; color: #ffd2ce; }
body.studio-desktop .lr-window-body { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; background: #1a2029; }
body.studio-desktop .lr-window-body > .panel { margin: 0; border: 0; border-radius: 0; background: #1a2029; box-shadow: none; }
body.studio-desktop .lr-window-body > :is(.playlist, .piano-roll, .mixer, .notation-panel) { display: flex; flex-direction: column; min-height: 100%; }
body.studio-desktop .lr-window-body > :is(.playlist, .piano-roll, .notation-panel) { height: 100%; }
body.studio-desktop .lr-window.is-floating { position: absolute; z-index: 100; border-color: #64758b; border-radius: 6px; box-shadow: 0 18px 60px #03060bc2, 0 0 0 1px #10141b; }
body.studio-desktop .lr-window.is-floating.is-active { border-color: #83a091; box-shadow: 0 18px 60px #03060bc2, 0 0 0 1px #829c8e26; }
body.studio-desktop .lr-window.is-maximized { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2000; border: 1px solid #64796a; border-radius: 0; }
body.studio-desktop .lr-resize-handle { position: absolute; right: 0; bottom: 0; width: 17px; height: 17px; z-index: 2; border: 0; border-radius: 0; padding: 0; background: linear-gradient(135deg, transparent 48%, #728799 49%, #728799 55%, transparent 56%, transparent 70%, #728799 71%, #728799 77%, transparent 78%); cursor: nwse-resize; touch-action: none; opacity: .75; }
body.studio-desktop .lr-splitter { z-index: 3; border: 0; margin: 0; padding: 0; background: #10161e; touch-action: none; }
body.studio-desktop .lr-left-splitter { grid-column: 2; grid-row: 1 / -1; cursor: col-resize; }
body.studio-desktop .lr-bottom-splitter { grid-column: 3; grid-row: 2; cursor: row-resize; }
body.studio-desktop .lr-splitter:hover, body.studio-desktop .lr-splitter:focus-visible { background: #779c88; }
body.studio-desktop .lr-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #7e8fa3; text-align: center; background: radial-gradient(ellipse at center, #26324066, transparent 65%); }
body.studio-desktop .lr-empty :is(h2, strong) { color: #dce7ef; font: 500 24px 'Space Grotesk', sans-serif; }
body.studio-desktop .lr-empty button { border: 1px solid #526956; border-radius: 4px; padding: 8px 16px; color: #c3edbf; background: #2a3c31; }

/* Remove card-like padding, while keeping every functional control reachable. */
body.studio-desktop .lr-window :is(.panel-header, .rack-header, .playlist-heading, .mixer-heading, .roll-panel-heading, .live-input-heading) { min-height: 34px; height: auto; padding: 6px 10px; gap: 10px; background: #1e2732; border-color: #34404e; }
body.studio-desktop .lr-window :is(.audio-clips-header, .automation-header) { padding: 7px 10px; background: #1e2732; border-bottom: 1px solid #34404e; }
body.studio-desktop .lr-window :is(.panel-title, .audio-clips-title) { gap: 7px; }
body.studio-desktop .lr-window :is(.panel-title h2, .audio-clips-title h2) { margin: 0; font: 600 11px 'DM Sans', sans-serif; color: #c5d2e1; letter-spacing: .1px; }
body.studio-desktop .lr-window :is(.panel-title p, .audio-clips-title p, .playlist-instructions, .mixer-intro, .roll-help, .score-instructions) { display: none; }
body.studio-desktop .lr-window :is(.section-icon, .audio-clips-icon) { width: 22px; height: 22px; font-size: 13px; border-radius: 3px; }
body.studio-desktop .lr-window :is(.section-icon, .mixer-strip-icon, .sound-icon) { background: #2d3a47; }
body.studio-desktop .lr-window :is(.playlist-tools, .roll-toolbar, .score-controls) { padding: 6px 10px; gap: 6px 9px; background: #202a36; border-bottom: 1px solid #34404e; }
body.studio-desktop .lr-window :is(.playlist-tools, .roll-toolbar, .score-controls, .automation, .audio-clips, .studio-mixing, .composition-tools, .take-comp) :is(button, select, input:not([type="range"]):not([type="checkbox"]):not([type="radio"])) { border-color: #45556a; background: #2a3645; color: #d5dfeb; border-radius: 3px; }
body.studio-desktop .lr-window :is(.playlist-tools button, .playlist-tools select, .roll-actions button, .roll-options select) { min-height: 25px; height: 25px; padding: 3px 7px; font-size: 10px; }
body.studio-desktop .lr-window :is(.playlist-tools label, .roll-options, .score-controls label) { color: #9aacbf; }
body.studio-desktop .lr-window :is(.playlist-footer, .mixer-footer, .roll-footer, .rack-footer) { flex: 0 0 auto; height: auto; min-height: 25px; margin: 0; padding: 5px 10px; border-color: #34404e; background: #1c2530; color: #8ea0b5; font-size: 8px; letter-spacing: .5px; }
body.studio-desktop .lr-window :is(.playlist-count, .mixer-heading-note, .muted) { color: #93a4b7; }
body.studio-desktop .lr-window .playlist-count span { color: #6f8197; }
body.studio-desktop .lr-window .playlist-heading { min-height: 22px; height: 22px; justify-content: flex-end; padding: 3px 10px; }
body.studio-desktop .lr-window :is(.playlist-heading, .roll-panel-heading) > .panel-title { display: none; }
body.studio-desktop .lr-window .mixer-heading { display: none; }

/* Browser: compact rows and a fixed search field, independent of the arrangement. */
body.studio-desktop #sounds { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 0; background: #1b222c; }
body.studio-desktop #sounds .side-header { padding: 10px 10px 8px; }
body.studio-desktop #sounds .side-header h2 { margin: 0; font-size: 12px; letter-spacing: 0; }
body.studio-desktop #sounds .side-header :is(.eyebrow, .muted) { display: none; }
body.studio-desktop #sounds > .sampler-open { flex-shrink: 0; width: calc(100% - 18px); margin: 0 9px 6px; min-height: 26px; padding: 4px 8px; text-align: left; font-size: 10px; }
body.studio-desktop .workspace-browser-search { flex-shrink: 0; width: calc(100% - 18px); min-width: 0; height: 29px; margin: 0 9px 8px; padding: 6px 9px; border: 1px solid #3a4a5e; border-radius: 4px; background: #121a24; color: #dce6f0; font-size: 11px; }
body.studio-desktop #soundList { display: block; flex: 1; min-height: 0; overflow-y: auto; padding: 0 9px 8px; }
body.studio-desktop .sound-item { display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 5px 8px; padding: 8px 1px; border-color: #2d3948; }
body.studio-desktop .sound-item-actions { display: flex; grid-column: 2; gap: 4px; }
body.studio-desktop .sound-item-actions button { min-height: 23px; padding: 2px 8px; border: 1px solid #43576c; border-radius: 3px; background: #273747; color: #c2d6dd; font-size: 9px; cursor: pointer; }
body.studio-desktop .sound-item-actions button:hover { background: #3a5147; color: #d6efd1; border-color: #779785; }
body.studio-desktop .workspace-instrument-menu button { white-space: normal; overflow-wrap: anywhere; }
body.studio-desktop .is-pinned-editor .synth-toolbar { margin-top: 0; }
body.studio-desktop .sound-icon { flex-shrink: 0; width: 27px; height: 27px; border-radius: 4px; background: color-mix(in srgb, var(--color) 13%, #27323f); font-size: 13px; }
body.studio-desktop .sound-name { min-width: 0; }
body.studio-desktop .sound-name strong { color: #d1dce9; font-size: 10px; }
body.studio-desktop .sound-name small { color: #7f91a8; margin-top: 3px; font-size: 9px; line-height: 1.35; }
body.studio-desktop .preview { flex-shrink: 0; width: 24px; height: 24px; border-color: #415368; border-radius: 4px; color: #b6c6da; }
body.studio-desktop .preview:hover { background: #354759; color: #e6f0fa; }
body.studio-desktop .workspace-credits { flex-shrink: 0; padding: 8px; border-top: 1px solid #344357; color: #94a9c3; font-size: 9px; }

/* Playlist and piano roll use all available working area. */
body.studio-desktop .playlist-scroll { flex: 1 1 auto; min-height: 180px; max-height: none; background: #141b25; border-color: #354358; }
body.studio-desktop .playlist-grid { min-height: 100%; background: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--playlist-cell) - 1px), #293547 calc(var(--playlist-cell) - 1px), #293547 var(--playlist-cell)), #171f2a; }
body.studio-desktop .playlist-ruler { background: #1e2a38; color: #96a8bd; height: 25px; }
body.studio-desktop :is(.playlist-ruler-label, .playlist-lane-label) { background: #232e3c; border-color: #3b4b61; }
body.studio-desktop .playlist-lane { height: 43px; border-color: #344151; }
body.studio-desktop .playlist-lane-label strong { color: #d5deea; }
body.studio-desktop .playlist-lane-label small { color: #91a4ba; }
body.studio-desktop .playlist-cells { background-color: #1a2431; }
body.studio-desktop .playlist-cell:not(.active):hover { background: #35475c; }
body.studio-desktop .playlist-bar-number { color: #93a7bf; border-color: #36465a; }
body.studio-desktop .playlist-cell { border-color: #303f53; }
body.studio-desktop .playlist-cell.is-playing { box-shadow: inset 2px 0 #d2f0c4; }
body.studio-desktop .piano-roll { --roll-note: #8fc8bd; --roll-selected: #c7e9aa; }
body.studio-desktop .lr-window .piano-roll .roll-panel-heading { flex: 0 0 30px; min-height: 30px; height: 30px; flex-wrap: nowrap; padding: 2px 8px; gap: 6px; }
body.studio-desktop .lr-window .piano-roll .roll-toolbar { flex: 0 0 auto; min-height: 30px; padding: 2px 8px; gap: 4px 10px; }
body.studio-desktop .lr-window .piano-roll .roll-toolbar :is(button, select) { height: 24px; min-height: 24px; padding-block: 2px; }
body.studio-desktop .piano-roll .roll-actions { gap: 3px; }
body.studio-desktop .piano-roll .roll-options { gap: 6px 10px; font-size: 8px; }
body.studio-desktop .piano-roll .roll-octave { gap: 5px; }
body.studio-desktop .roll-scroll { flex: 1 1 auto; min-height: 120px; background: #19212c; }
body.studio-desktop .roll-grid { min-height: 100%; }
body.studio-desktop .roll-tabs { flex-wrap: nowrap; justify-content: flex-start; width: 100%; min-width: 0; max-height: 26px; overflow-x: auto; overflow-y: hidden; background: #151e29; border: 0; border-radius: 2px; padding: 1px; gap: 2px; scrollbar-width: none; }
body.studio-desktop .roll-tabs button { flex-shrink: 0; min-height: 24px; padding: 3px 8px; white-space: nowrap; font-size: 9px; color: #9dafc4; }
body.studio-desktop .roll-tabs button.selected, body.studio-desktop .roll-actions button[aria-pressed="true"] { background: #3a574b; color: #d0efcb; border-color: #769b7c; }
body.studio-desktop .roll-ruler { position: sticky; top: 0; z-index: 5; background: #243142; color: #92a7bf; }
body.studio-desktop .roll-ruler-label { background: #243142; border-color: #455771; }
body.studio-desktop .roll-ruler-steps span { border-color: #3b4b60; }
body.studio-desktop .roll-ruler-steps span.roll-bar-start { background: #33495a; color: #d6e7ec; }
body.studio-desktop .roll-row { border-color: #354154; }
body.studio-desktop .roll-key { background: #c8d1db; color: #283343; border-right-color: #576a80; }
body.studio-desktop .roll-key.black-key { background: #2b3849; color: #b0bfd2; }
body.studio-desktop .roll-cell { background: #233043; border-left-color: #34445b; }
body.studio-desktop .black-row .roll-cell { background: #1c2737; }
body.studio-desktop .roll-cell.roll-beat-start { border-left-color: #495e79; }
body.studio-desktop .roll-cell.roll-bar-start { border-left-color: #667f9e; }
body.studio-desktop .roll-pagination { flex: 0 0 auto; min-height: 29px; padding: 2px 8px; gap: 6px; color: #9dabc0; background: #202b39; border-top: 1px solid #38465a; font-size: 9px; }
body.studio-desktop .roll-pagination :is(input, button) { height: 24px; min-height: 24px; border-color: #48596e; background: #2b394a; color: #ceddea; font-size: 9px; padding: 2px 7px; }
body.studio-desktop .roll-pagination input { width: 48px; }
body.studio-desktop .roll-status { color: #b3c6da; font-size: 10px; }

/* Compact mixer strips show the faders immediately; EQ and signal controls scroll. */
body.studio-desktop .mixer-heading { min-height: 27px; padding-block: 3px; }
body.studio-desktop .mixer-heading .section-icon { width: 18px; height: 18px; font-size: 12px; }
body.studio-desktop .mixer-scroll { flex: 0 0 auto; overflow-x: auto; border-color: #3b4859; }
body.studio-desktop .mixer-strips { min-height: 100%; background: #18212c; }
body.studio-desktop .mixer-strip { flex: 0 0 106px; width: 106px; padding: 7px 8px 9px; border-right-color: #3d4c5f; border-top: 2px solid var(--strip-color); background: linear-gradient(#263342, #1c2734); }
body.studio-desktop .mixer-strip-head { gap: 5px; min-height: 25px; }
body.studio-desktop .mixer-strip-icon { width: 22px; height: 22px; font-size: 12px; border-radius: 3px; }
body.studio-desktop .mixer-strip-head strong { max-width: 65px; margin-top: 2px; font-size: 9px; color: #e0e8f1; }
body.studio-desktop .mixer-channel-number { color: #91a3bb; font-size: 7px; letter-spacing: .45px; }
body.studio-desktop .mixer-switches { margin-top: 6px; gap: 4px; }
body.studio-desktop .mixer-switch, body.studio-desktop .mixer-preview { min-width: 23px; height: 20px; padding: 0 5px; border-color: #506178; background: #263547; color: #b1c0d4; font-size: 8px; }
body.studio-desktop .mixer-switch.is-on { background: color-mix(in srgb, var(--strip-color) 28%, #293746); border-color: var(--strip-color); color: #f0f5f8; }
body.studio-desktop .mixer-fader-area { height: 100px; gap: 6px; padding: 5px; margin: 7px 0; border-radius: 3px; background: #121c28; box-shadow: inset 0 1px 3px #0004; }
body.studio-desktop .mixer-fader-caption { height: 84px; font-size: 7px; color: #7e92ae; }
body.studio-desktop .mixer-fader-caption span:first-child { color: #afc3da; font-size: 7px; }
body.studio-desktop .mixer-volume { height: 88px; gap: 2px; }
body.studio-desktop .mixer-volume input { height: 68px; margin-top: 0; width: 20px; }
body.studio-desktop .mixer-fader-rail { height: 74px; }
body.studio-desktop .mixer-fader-rail span { height: 3px; background: #8cc495; }
body.studio-desktop .mixer-fader-rail span:nth-last-child(-n+2) { background: #3a514c; }
body.studio-desktop .mixer-control-line { color: #9db1c8; font-size: 8px; }
body.studio-desktop .mixer-control output { color: #d0dfef; font-size: 8px; }
body.studio-desktop .mixer-strip-controls .mixer-control { margin-bottom: 9px; }
body.studio-desktop .mixer-strip-controls .mixer-control input { margin-top: 5px; }
body.studio-desktop .mixer-eq-label { border-color: #405168; padding-top: 7px; margin: 5px 0 9px; color: #becfe2; font-size: 8px; }
body.studio-desktop .mixer-eq-label span { color: #7e95af; font-size: 7px; }
body.studio-desktop .mixer-reverb { border-color: #405168; padding-top: 7px; }
body.studio-desktop :is(.mixer-reset, .mixer-fx-button) { border-color: #445b73; background: #26374a; color: #bfd0e4; border-radius: 3px; font-size: 9px; }
body.studio-desktop .mixer-fx-button { min-height: 24px; padding: 4px 6px; margin-top: 6px; }
body.studio-desktop .mixer-signal { background: #1d2936; border-color: #394c62; padding: 12px; --fx-accent: #b3dfad; }
body.studio-desktop .mixer-signal-grid fieldset { background: #243242; border-color: #42546c; border-radius: 4px; }
body.studio-desktop .mixer-signal :is(button, select, input[type="number"]) { background: #2b3b4e; border-color: #52647a; color: #d7e5f3; }
body.studio-desktop .mixer-signal :is(legend, .mixer-filter-type, .mixer-fx-control label) { color: #cbdcee; }
body.studio-desktop .mixer-signal :is(.mixer-signal-route, .mixer-fx-value, fieldset p) { color: #93abc4; }

/* Step sequencer and auxiliary studios use the same compact visual language. */
body.studio-desktop .rack { background: #1d2733; }
body.studio-desktop :is(.rack-labels, .track) { grid-template-columns: 142px 72px minmax(280px, 1fr); gap: 10px; padding-inline: 10px; }
body.studio-desktop .rack-labels { height: 27px; background: #18222e; color: #8fa4be; font-size: 8px; }
body.studio-desktop .track { height: 40px; border-color: #344358; }
body.studio-desktop .track-name strong { color: #d0deef; font-size: 10px; }
body.studio-desktop .track-name small { color: #7890ac; font-size: 8px; }
body.studio-desktop .track-controls input { width: 42px; }
body.studio-desktop .step { height: 22px; border-color: #4b5c71; background: #37475c; border-radius: 3px; }
body.studio-desktop .step:nth-child(8n + 5), body.studio-desktop .step:nth-child(8n + 6), body.studio-desktop .step:nth-child(8n + 7), body.studio-desktop .step:nth-child(8n + 8) { background: #29384c; }
body.studio-desktop .step.on { background: var(--color); border-color: var(--color); }
body.studio-desktop .step.on[style*="--step-strength"] { background: color-mix(in srgb, var(--color) max(22%, var(--step-strength)), #24334a); }
body.studio-desktop .rack-groove { padding: 4px 10px; background: #202c3a; border-color: #3a4a5f; }
body.studio-desktop .rack-groove-controls { align-items: center; gap: 6px 14px; }
body.studio-desktop .rack-groove-setting { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; gap: 5px 10px; }
body.studio-desktop .rack-groove-help { color: #91a5bf; font-size: 9px; }
body.studio-desktop .rack-groove-controls .rack-groove-help { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
body.studio-desktop .rack-groove-range { font-size: 10px; }
body.studio-desktop .rack-groove-range input { width: 85px; }
body.studio-desktop .rack-groove-range output { min-width: 3ch; }
body.studio-desktop .rack-humanize-mode { font-size: 9px; margin: 0; gap: 5px; }
body.studio-desktop .rack-humanize-mode select { min-height: 24px; height: 24px; padding: 2px 5px; background: #26384a; border-color: #465a73; }
body.studio-desktop .rack-groove .project-action { min-height: 26px; padding: 4px 7px; }
body.studio-desktop .live-input-panel { --live-border: #41556c; --live-quiet: #9fb0c5; --live-accent: #b5e2ae; background: #1d2936; }
body.studio-desktop .live-input-body { padding: 10px 12px; }
body.studio-desktop :is(.live-record-button, .live-midi-button, .live-instrument-tabs button, .live-octave button, .live-midi select) { background: #2b394b; color: #d7e5f0; border-color: #4c617b; border-radius: 3px; }
body.studio-desktop .live-instrument-tabs button[aria-pressed="true"] { background: #355143; border-color: #66856a; color: #d0edc9; }
body.studio-desktop .drum-drawer { border: 0; border-radius: 0; background: #1e2b39; }
body.studio-desktop .drum-drawer > summary { padding: 8px 11px; border-color: #3f526a; }
body.studio-desktop .drum-pad-panel { --pad-border: #52657c; --pad-muted: #9cacbf; --pad-text: #dae5f1; padding: 10px 12px; }
body.studio-desktop .drum-pad { background: #2a394c; border-left-color: #c39b78; border-radius: 4px; }
body.studio-desktop .drum-pad:hover { background: #3a4b60; border-color: #b89f84; }
body.studio-desktop .drum-pad.drum-pad-playing { background: #685443; border-color: #e6bc8d; }
body.studio-desktop .score-paper { flex: 1; min-height: 140px; max-height: none; }
body.studio-desktop .score-inspector { padding: 8px 10px; background: #223143; border-color: #435a74; }
body.studio-desktop .score-footer, body.studio-desktop .score-pagination { margin: 0; padding: 7px 10px; color: #a0b3cb; }
body.studio-desktop .audio-clips-scroll, body.studio-desktop .automation-scroll { background: #192432; border-color: #3d5069; }
body.studio-desktop :is(.audio-clips-status, .automation-help, .automation-status) { padding: 5px 10px; font-size: 10px; color: #a2b4ca; }
body.studio-desktop :is(.audio-clips-inspector, .automation-inspector) { border-color: #3d5069; background: #253446; }
body.studio-desktop .audio-storage { padding: 10px 12px; background: #202c3a; color: #cbd9e8; }

/* Native modals stay above windows; use the same palette without altering behavior. */
body.studio-desktop dialog { border-color: #4f637a; background: #202b39; color: #dee7f1; }
body.studio-desktop dialog::backdrop { background: #060c16c7; backdrop-filter: blur(3px); }
body.studio-desktop .export-dialog p { color: #a9bacf; }
body.studio-desktop .export-dialog label { color: #9fb0c7; }
body.studio-desktop .export-dialog :is(select, input:not([type="checkbox"]):not([type="range"]), .clear-btn) { background: #182330; border-color: #4d617b; color: #dce7f5; }
body.studio-desktop .export-dialog .library-group h3 { background: #202b39; }
body.studio-desktop .export-dialog .library-row { border-color: #3b4c60; }
body.studio-desktop .export-dialog .library-kit { background: #2d4139; border-color: #587960; }
body.studio-desktop #toast { z-index: 5000; bottom: 38px; background: #b6e7b0; color: #1a3022; border: 1px solid #d4f2ce; box-shadow: 0 8px 30px #0006; font-size: 11px; }

/* Small displays use one active editor, with all transport controls still available. */
body.studio-desktop .lr-workspace.is-mobile { display: block; }
body.studio-desktop .lr-workspace.is-mobile > :is(.lr-zone, .lr-splitter) { display: none; }
body.studio-desktop .lr-workspace.is-mobile > .lr-mobile-window { position: absolute; inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
body.studio-desktop .lr-mobile-window .lr-resize-handle { display: none; }
@media (max-width: 1100px) {
  body.studio-desktop .toolbar { gap: 10px; }
  body.studio-desktop .toolbar-right .keyboard-hint { display: none; }
  body.studio-desktop .transport { gap: 10px; }
  body.studio-desktop .workspace-tools { gap: 3px; }
  body.studio-desktop .workspace-tools :is(button, summary) { padding-inline: 6px; }
  body.studio-desktop .project-title-slot { padding-left: 12px; }
}
@media (max-width: 900px) {
  body.studio-desktop .topbar { padding-inline: 10px; gap: 10px; }
  body.studio-desktop .brand { font-size: 19px; }
  body.studio-desktop .brand small { display: none; }
  body.studio-desktop .project-title-slot { padding-left: 8px; }
  body.studio-desktop .project-title-slot input { font-size: 11px; }
  body.studio-desktop .toolbar { overflow-x: auto; overflow-y: hidden; padding-inline: 10px; }
  body.studio-desktop .toolbar-right { display: flex; flex-shrink: 0; }
  body.studio-desktop .master { gap: 6px; }
  body.studio-desktop .master input { width: 54px; }
  body.studio-desktop .workspace-tools { overflow: visible; flex-wrap: wrap; flex-basis: auto; }
  body.studio-desktop .workspace-quick-windows { overflow-x: auto; min-width: 0; flex: 1 1 100%; scrollbar-width: none; }
  body.studio-desktop .workspace-layout-label { margin-left: auto; }
  body.studio-desktop .pattern-bar { min-width: 0; }
  body.studio-desktop .pattern-bar :is(label, button) { flex-shrink: 0; }
}
@media (max-width: 620px) {
  body.studio-desktop .topbar { flex-basis: auto; height: auto; min-height: 73px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 9px; padding: 7px 9px; }
  body.studio-desktop .top-actions { grid-column: 1 / -1; justify-content: flex-end; margin: 0; gap: 5px; }
  body.studio-desktop .top-actions .project-action { padding: 3px 8px; min-height: 25px; }
  body.studio-desktop .top-actions .export-btn { height: 25px; font-size: 10px; padding: 0 9px; }
  body.studio-desktop .top-actions .export-btn span { display: inline; }
  body.studio-desktop .project-title-slot input { width: 100%; }
  body.studio-desktop .transport { gap: 9px; }
  body.studio-desktop .signature + .transport-divider { display: block; }
  body.studio-desktop .time-display strong { font-size: 16px; }
  body.studio-desktop .master > span:first-child { display: block; }
  body.studio-desktop .workspace-tools { gap: 3px; padding-inline: 6px; }
  body.studio-desktop .workspace-tools .edit-history { margin-left: 0; padding-left: 2px; }
  body.studio-desktop .workspace-tools .workspace-layout-label { font-size: 0; gap: 0; }
  body.studio-desktop #workspaceLayout { max-width: 90px; }
  body.studio-desktop .pattern-bar { padding-inline: 8px; gap: 7px; }
  body.studio-desktop .pattern-bar #patternCount { margin-left: 0; }
  body.studio-desktop .workspace-status { font-size: 9px; gap: 6px; }
  body.studio-desktop .lr-window :is(.roll-panel-heading, .live-input-heading) { flex-direction: row; flex-wrap: wrap; align-items: center; }
  body.studio-desktop :is(.rack-header, .rack-labels, .track, .rack-footer) { min-width: 550px; }
  body.studio-desktop .lr-window-actions select { max-width: 67px; }
  body.studio-desktop .roll-toolbar { align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  body.studio-desktop button, body.studio-desktop #toast { transition: none; }
}

/* Sound editors share the desk rather than covering it with a modal backdrop.
   Their responsive breakpoint is the window width, including when docked. */
body.studio-desktop .lr-window-body:has(> :is(.workspace-instrument, .workspace-effects)) {
  container: sound-editor / inline-size;
}
body.studio-desktop .lr-window-body > .workspace-instrument {
  display: block;
  position: static;
  inset: auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 100%;
  max-height: none;
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: #1d2733;
  box-shadow: none;
  overflow: visible;
  color: #dce5ef;
}
body.studio-desktop .workspace-instrument > form { margin: 0; }
body.studio-desktop .workspace-instrument .export-dialog-head { align-items: center; gap: 8px; }
body.studio-desktop .workspace-instrument .export-dialog-head h2 { margin: 0; font-size: 16px; }
body.studio-desktop .workspace-instrument .export-dialog-head .eyebrow { font-size: 8px; margin-bottom: 4px; }
body.studio-desktop .workspace-instrument .export-dialog-head .small-icon { flex-shrink: 0; width: 26px; height: 26px; border: 1px solid #42546a; background: #29384a; color: #bacadd; border-radius: 3px; }
body.studio-desktop .workspace-instrument > .export-dialog-head { display: none; }
body.studio-desktop .workspace-instrument > :is(.synth-intro, .sampler-intro) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
body.studio-desktop .workspace-instrument label { display: flex; gap: 5px; margin: 0; letter-spacing: 0; color: #aabbd0; font-size: 10px; }
body.studio-desktop .workspace-instrument :is(input:not([type="checkbox"]):not([type="range"]), select) { min-height: 27px; height: 27px; padding: 3px 6px; margin: 0; border-radius: 3px; font-size: 11px; }
body.studio-desktop .workspace-instrument input[type="range"] { min-height: 15px; accent-color: #a8dfa6; }
body.studio-desktop .workspace-instrument input[type="checkbox"] { min-height: 0; height: auto; width: auto; accent-color: #a8dfa6; }
body.studio-desktop .workspace-instrument .export-btn { min-height: 28px; padding: 5px 9px; border-radius: 3px; font-size: 10px; }
body.studio-desktop .workspace-instrument .project-action { min-height: 27px; }
body.studio-desktop .workspace-instrument :is(.synth-status, .sampler-status) { margin: 9px 0 0; min-height: 15px; font-size: 10px; color: #b6d3bd; }

body.studio-desktop .workspace-instrument .synth-toolbar { margin: 0 0 10px; padding: 8px; gap: 7px; border-radius: 4px; border-color: #405269; background: #243244; }
body.studio-desktop .workspace-instrument .synth-toolbar label { min-width: 145px; max-width: 270px; }
body.studio-desktop .workspace-instrument .synth-toolbar > span { padding-bottom: 6px; font-size: 9px; }
body.studio-desktop .workspace-instrument .synth-layout { grid-template-columns: 132px minmax(0, 1fr); gap: 10px; }
body.studio-desktop .workspace-instrument .synth-list { display: flex; position: sticky; top: 0; max-height: 360px; gap: 4px; }
body.studio-desktop .workspace-instrument :is(.synth-list-item, .sampler-list-item) { padding: 8px; border-radius: 4px; border-color: #3e5066; background: #243243; color: #d9e4f0; }
body.studio-desktop .workspace-instrument :is(.synth-list-item, .sampler-list-item)[aria-pressed="true"] { border-color: #6b9775; background: #2c4439; }
body.studio-desktop .workspace-instrument :is(.synth-list-item, .sampler-list-item) strong { font-size: 10px; }
body.studio-desktop .workspace-instrument :is(.synth-list-item, .sampler-list-item) small { margin-top: 4px; font-size: 9px; color: #91a7be; }
body.studio-desktop .workspace-instrument .synth-patch-heading { gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
body.studio-desktop .workspace-instrument .synth-patch-heading > label { min-width: 140px; flex: 1 1 140px; }
body.studio-desktop .workspace-instrument :is(.synth-oscillators, .synth-two) { gap: 8px; }
body.studio-desktop .workspace-instrument .synth-card { display: flex; padding: 9px; gap: 8px; border-radius: 4px; background: #243141; border-color: #42546b; }
body.studio-desktop .workspace-instrument .synth-card legend { color: #c1dac6; font-size: 10px; }
body.studio-desktop .workspace-instrument .synth-wave { height: 35px; background: #16202c; border-color: #3e5066; }
body.studio-desktop .workspace-instrument .synth-envelope { height: 52px; background: #17222f; }
body.studio-desktop .workspace-instrument .synth-adsr-fields { gap: 8px; }
body.studio-desktop .workspace-instrument .synth-section-grid { margin-top: 10px; }
body.studio-desktop .workspace-instrument .synth-range output { color: #b9dfb7; font-size: 9px; }
body.studio-desktop .workspace-instrument .synth-edit-actions { margin-top: 10px; gap: 6px; }
body.studio-desktop .workspace-instrument .synth-audition { padding: 10px; margin-top: 12px; border-color: #496452; border-radius: 4px; background: #24352d; }
body.studio-desktop .workspace-instrument .synth-audition-head { gap: 7px 12px; margin-bottom: 8px; }
body.studio-desktop .workspace-instrument .synth-audition-head > strong { color: #c4e4bf; font-size: 11px; }
body.studio-desktop .workspace-instrument .synth-audition-head label { flex-direction: row; align-items: center; }
body.studio-desktop .workspace-instrument .synth-audition-head > span { color: #a4bca8; font-size: 9px; }
body.studio-desktop .workspace-instrument .synth-key { height: 54px; padding: 5px 0; gap: 4px; }
body.studio-desktop .workspace-instrument .synth-key.black { height: 43px; }
body.studio-desktop .workspace-instrument .synth-key kbd { display: block; font-size: 8px; }
body.studio-desktop .workspace-instrument .synth-key.held { background: #b5e2ae; border-color: #d1efcb; color: #1c3525; box-shadow: 0 0 0 2px #a8dfa633; }

body.studio-desktop .workspace-instrument .sampler-import { padding: 10px; gap: 9px; border-radius: 4px; border-color: #526a84; background: #233143; }
body.studio-desktop .workspace-instrument .sampler-import > div { min-width: 140px; font-size: 11px; }
body.studio-desktop .workspace-instrument .sampler-import small { font-size: 9px; line-height: 1.5; }
body.studio-desktop .workspace-instrument .sampler-import.dragging { border-color: #a8dfa6; background: #2b4337; }
body.studio-desktop .workspace-instrument .sampler-capture { margin: 10px 0; gap: 7px; }
body.studio-desktop .workspace-instrument .sampler-capture span { font-size: 10px; }
body.studio-desktop .workspace-instrument .sampler-layout { grid-template-columns: 140px minmax(0, 1fr); gap: 10px; }
body.studio-desktop .workspace-instrument .sampler-list { display: flex; max-height: 380px; }
body.studio-desktop .workspace-instrument .sampler-wave { height: 112px; border-radius: 4px; }
body.studio-desktop .workspace-instrument .sampler-wave-help { margin: 6px 0 10px; font-size: 10px; }
body.studio-desktop .workspace-instrument .sampler-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.studio-desktop .workspace-instrument .sampler-toggles { margin: 10px 0; gap: 8px 12px; }
body.studio-desktop .workspace-instrument .sampler-toggles label { flex-direction: row; align-items: center; }
body.studio-desktop .workspace-instrument .sampler-zones { padding: 9px; margin: 10px 0; border-radius: 4px; border-color: #435971; }
body.studio-desktop .workspace-instrument .sampler-zones > summary { font-size: 11px; }
body.studio-desktop .workspace-instrument .sampler-zone { padding: 9px; background: #223142; border-color: #42586d; }
body.studio-desktop .workspace-instrument .sampler-zone-fields { gap: 8px; }
body.studio-desktop .workspace-instrument .sampler-zone-region .sampler-zone-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.studio-desktop .workspace-instrument .sampler-slice { padding-top: 10px; gap: 6px; }

body.studio-desktop .workspace-effects { min-height: 100%; background: #1d2936; }
body.studio-desktop .workspace-effects .mixer-signal { padding: 10px; border: 0; }
body.studio-desktop .workspace-effects .mixer-signal-title { font-size: 15px; }
body.studio-desktop .workspace-effects .mixer-signal-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 10px; margin: 0; color: #a7bbcf; font-size: 10px; background: #243344; border-bottom: 1px solid #41546b; }
body.studio-desktop .workspace-effects .mixer-signal-picker select { flex: 1; min-width: 100px; max-width: 330px; min-height: 27px; background: #182431; color: #daead9; border: 1px solid #4b6957; border-radius: 3px; padding: 3px 7px; font-size: 11px; }
body.studio-desktop .workspace-effects .mixer-signal-empty { margin: 0; padding: 18px 12px; color: #a6bad0; font-size: 12px; line-height: 1.6; }
body.studio-desktop .workspace-effects .mixer-signal-recipes { margin-top: 9px; gap: 5px; }
body.studio-desktop .workspace-effects .mixer-signal-grid { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
body.studio-desktop .workspace-effects .mixer-eq-editor { margin-top: 10px; padding: 8px; border-radius: 4px; border-color: #42566e; }
body.studio-desktop .workspace-effects .mixer-eq-editor .mixer-signal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.studio-desktop .workspace-effects .mixer-eq-editor summary { flex-direction: row; align-items: baseline; font-size: 11px; }
body.studio-desktop .workspace-effects .mixer-eq-editor summary span { font-size: 9px; }
body.studio-desktop .workspace-effects .mixer-insert-order { margin: 10px 0 7px; }

@container sound-editor (max-width: 690px) {
  body.studio-desktop .workspace-instrument :is(.synth-layout, .sampler-layout) { grid-template-columns: minmax(0, 1fr); }
  body.studio-desktop .workspace-instrument :is(.synth-list, .sampler-list) { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 100px; }
  body.studio-desktop .workspace-instrument :is(.synth-list, .sampler-list) > p { grid-column: 1 / -1; margin: 0; }
  body.studio-desktop .workspace-instrument .synth-toolbar > span { margin-left: 0; }
}
@container sound-editor (max-width: 500px) {
  body.studio-desktop .lr-window-body > .workspace-instrument { padding: 9px; }
  body.studio-desktop .workspace-instrument .synth-oscillators { grid-template-columns: minmax(0, 1fr); }
  body.studio-desktop .workspace-instrument .synth-oscillators .synth-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.studio-desktop .workspace-instrument .synth-wave { grid-column: 1 / -1; }
  body.studio-desktop .workspace-instrument .synth-section-grid { grid-template-columns: minmax(0, 1fr); }
  body.studio-desktop .workspace-instrument :is(.synth-list, .sampler-list, .sampler-fields, .sampler-zone-fields) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.studio-desktop .workspace-instrument .synth-patch-heading > label { flex-basis: 100%; }
  body.studio-desktop .workspace-instrument .synth-audition-head > span { width: 100%; margin-left: 0; }
  body.studio-desktop .workspace-instrument .synth-keyboard { gap: 2px; }
  body.studio-desktop .workspace-effects .mixer-eq-editor .mixer-signal-grid { grid-template-columns: minmax(0, 1fr); }
  body.studio-desktop .workspace-effects .mixer-eq-editor summary { flex-direction: column; gap: 4px; }
}
@container sound-editor (min-width: 900px) {
  body.studio-desktop .workspace-effects .mixer-eq-editor .mixer-signal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}