/* Desktop studio: one persistent canvas framed by two independent work areas. */
:root { --studio-bg: #111916; --studio-panel: #19221d; --studio-line: #344138; --studio-ink: #e6ece5; --studio-muted: #9faf9f; --studio-accent: #e4b670; }
body.game-page { background: #0b110e; font-size: 12px; display: grid; grid-template-columns: 208px minmax(0, 1fr); grid-template-rows: 52px minmax(0, 1fr); gap: 0; }
body.game-page.studio-open { grid-template-columns: 208px minmax(300px, 1fr) 328px; grid-template-rows: 52px minmax(0, 1fr); }
body.game-page.studio-open[data-midi-layout=focus] { grid-template-columns: 200px minmax(280px, 1fr) 360px; }
.game-chrome { grid-column: 1 / -1; grid-row: 1; padding: 8px 10px; display: flex; align-items: center; gap: 12px; background: #1d2922; border-bottom: 1px solid #405044; z-index: 20; min-width: 0; }
.game-chrome button, .game-chrome select, .game-chrome summary { box-sizing: border-box; font: inherit; color: var(--studio-ink); background: #253329; border: 1px solid #4a5b4c; border-radius: 5px; min-height: 32px; cursor: pointer; padding: 5px 8px; }
.game-chrome button:hover, .game-chrome summary:hover { background: #344838; border-color: #75957a; }
.game-chrome button:disabled { opacity: .35; cursor: default; }
.game-chrome select { color-scheme: dark; }
.game-chrome [hidden], .midi-instrument-head[hidden] { display: none !important; }
#levelSelects { display: flex; flex-wrap: nowrap; gap: 6px; flex: none; min-width: 0; }
#levelIndexSelect { width: clamp(148px, 13vw, 220px); max-width: 220px; flex: none; min-width: 0; border-color: #617963; color: #f0f5e9; background: #2b3c2c; }
.level-navigation { display: flex; flex-direction: row; gap: 0; }
#levelPrevButton, #levelNextButton { z-index: 0; }
.level-tools { position: relative; }
.level-tools > summary { list-style: none; }
.level-tools-popover { position: absolute; top: calc(100% + 10px); left: 0; width: 284px; padding: 14px; border: 1px solid #52664f; border-radius: 8px; background: #1a271e; box-shadow: 0 14px 35px #0008; display: flex; flex-direction: column; gap: 14px; }
.level-tools-popover label, .saved-level-controls { display: flex; flex-direction: column; align-items: stretch; gap: 6px; color: #b5c5b6; font-size: 11px; }
#gameTypeSelect, #levelGroupSelect, #savedLevelSelect { max-width: none; width: 100%; }
.secondary-actions { display: flex; gap: 5px; }
.level-tools-popover .game-links { margin: 0; padding-top: 12px; border-top: 1px solid #354d38; gap: 18px; }
.level-tools-popover a { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.midi-instrument-head { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.midi-instrument-menus { display: flex; flex: none; }
.midi-instrument-menus details { position: relative; }
.midi-instrument-menus summary { list-style: none; }
.midi-instrument-menus details > div { position: absolute; left: 0; top: calc(100% + 10px); display: flex; flex-direction: column; min-width: 215px; padding: 6px; z-index: 100; background: #1a271e; border: 1px solid #52664f; border-radius: 7px; box-shadow: 0 12px 28px #0008; }
.midi-instrument-menus button { text-align: left; border: none; display: flex; align-items: center; gap: 9px; }
.midi-headunit-readout { display: flex; flex-direction: column; gap: 4px; min-width: 110px; width: 132px; padding: 4px 6px; border-radius: 4px; background: #0d1711; color: #d5cfa4; font: 9px ui-monospace, monospace; white-space: nowrap; }
.midi-headunit-readout > * { overflow: hidden; text-overflow: ellipsis; }
#midiLastEvent { color: #7f9c80; }
.midi-game-transport, .midi-layout-choices { display: flex; flex-wrap: nowrap; gap: 0; flex: none; }
.segmented { display: inline-flex; padding: 2px; background: #111b14; border: 1px solid #435544; border-radius: 7px; }
.segmented > button { border: 0; background: transparent; border-radius: 4px; min-height: 27px; padding: 4px 7px; }
.midi-layout-choices { margin-left: auto; }
.midi-layout-choices > button { font-size: 11px; display: flex; align-items: center; gap: 4px; }
.midi-layout-choices button[aria-pressed=true] { background: #d6b275; color: #222b20; box-shadow: 0 1px 3px #0004; }
.midi-speed-control { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #a6b7a7; }
.midi-speed-control input[type=range] { width: 45px; }
.midi-speed-control input[type=number] { width: 44px; background: #142018; color: #c4d6c4; border: 1px solid #415044; min-height: 26px; border-radius: 4px; font-size: 11px; padding: 2px; }
.midi-instrument-head .midi-control-group { border: 0; padding: 0; gap: 3px; flex-wrap: nowrap; }
.midi-instrument-head .midi-field select { max-width: 92px; padding-left: 5px; padding-right: 3px; font-size: 11px; }
.midi-key-controls { flex: none; }
.midi-instrument-head.is-studio-closed { flex: none; margin-left: auto; }
.midi-instrument-head .midi-listen-row { width: auto; flex-wrap: nowrap; gap: 6px; flex: none; }
#midiLocalListenButton { background: #567148; border-color: #829864; color: #f5f8e9; min-height: 32px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; white-space: nowrap; }
.midi-volume-control { display: flex; align-items: center; gap: 4px; }
.midi-volume-control input { width: 60px; }
.midi-volume-control output { font: 10px ui-monospace, monospace; color: #c5d2bc; min-width: 25px; }
input[type=range] { accent-color: #d2aa67; }
#midiWorkspaceToggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.studio-open #midiWorkspaceToggle { display: none; }
.studio-library { grid-column: 1; grid-row: 2; min-height: 0; overflow-y: auto; padding: 0 12px 12px; background: var(--studio-panel); border-right: 1px solid var(--studio-line); scrollbar-width: thin; scrollbar-color: #4f6050 transparent; }
.studio-events { display: none; }
.studio-open .studio-events { display: block; }
.studio-section-heading { display: flex; align-items: center; justify-content: space-between; padding: 13px 0 10px; border-top: 1px solid #3b493d; color: #c8d5c8; font-size: 12px; }
.studio-section-heading > span:first-child { display: flex; align-items: center; gap: 6px; }
.live-label { font: 8px ui-monospace, monospace; letter-spacing: .14em; color: #95b681; padding: 3px 4px; border: 1px solid #42573c; border-radius: 3px; }
.studio-output-summary { color: #8da18c; font-size: 10px; line-height: 1.5; margin-top: 14px; border-top: 1px solid #344638; padding-top: 10px; }
.game, .studio-open .game { grid-column: 2; grid-row: 2; display: flex; padding: 6px; align-items: center; min-width: 0; min-height: 0; background: radial-gradient(ellipse at center, #1f3022 0%, #0b130d 75%); }
.game-stage-slot, .studio-open .game-stage-slot { display: flex; width: 100%; height: 100%; align-items: center; justify-content: flex-start; }
.game_container, .studio-open .game_container { margin: 0; outline: 1px solid #3b4e39; box-shadow: 0 8px 40px #0008; }
.studio-open .midi-sequencer, .midi-sequencer, .midi-sequencer:has(> .midi-advanced-workspace:not([open])) { grid-column: 3; grid-row: 2; margin: 0; border: 0; border-left: 1px solid #53604b; border-radius: 0; background: #e9e5d7; color: #343b2d; gap: 0; }
body.game-page.studio-open[data-midi-layout=overlay] { grid-template-columns: 208px minmax(300px, 1fr) 328px; }
body.game-page.studio-open[data-midi-layout=overlay] .game { grid-column: 2 / -1; }
body.game-page.studio-open[data-midi-layout=overlay] .midi-sequencer { grid-column: 3; grid-row: 2; margin: 6px; z-index: 5; border: 1px solid #b1b39c; border-radius: 10px; box-shadow: 0 10px 45px #0009; }
.midi-studio-header { padding: 13px 14px; gap: 6px; min-height: 47px; box-sizing: border-box; }
.midi-studio-header strong { color: #3b4736; font-size: 13px; line-height: 1.4; }
.midi-sequencer button, .midi-sequencer input:not([type=range]), .midi-sequencer select, .midi-sequencer textarea { background: #f9f7ed; color: #39422f; border-color: #b8baa5; border-radius: 5px; }
.midi-sequencer button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.midi-sequencer button:hover { background: #dbdfcb; border-color: #8b9b78; }
.midi-sequencer :is(h2, h3, .midi-sound-heading h2) { color: #3b4736; }
.midi-sequencer .midi-help, .midi-sequencer .midi-field { color: #656e58; }
.midi-sequencer input[type=number] { min-width: 0; font-variant-numeric: tabular-nums; }
.midi-view-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 0 10px 10px; border-color: #c4c7b1; }
.midi-view-tabs button { display: flex; flex-direction: column; gap: 5px; font-size: 10px; min-height: 45px; padding: 5px 2px; border-color: transparent; background: transparent; }
.midi-view-tabs button[aria-pressed=true], .midi-choice-row button[aria-pressed=true] { background: #536546; color: #fffbee; border-color: #475c3a; }
.midi-editor-view { padding: 13px; scrollbar-width: thin; scrollbar-color: #adb59b transparent; }
.midi-active-key { font-size: 10px; margin: 8px 0 16px; }
.midi-active-key button { font-size: 10px; padding: 4px 5px; }
.midi-sounds-layout { display: block; }
.midi-game-event-list { display: flex; flex-direction: column; gap: 3px; max-height: none; overflow: visible; }
.midi-game-event { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 8px; min-height: 32px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #b8c7b6; text-align: left; padding: 3px 8px !important; cursor: pointer; }
.midi-game-event strong { font-size: 11px; font-weight: 500; }
.midi-game-event span { color: #7e927e; font-size: 9px; }
.midi-game-event .midi-event-count { grid-column: 1 / -1; font: 9px ui-monospace, monospace; }
.midi-game-event[aria-selected=true] { background: #34472f; border-color: #7c936a; color: #f1f4df; }
.midi-game-event[aria-selected=true] span { color: #b7c89e; }
.midi-game-event:hover { background: #293c2c; }
.midi-sound-heading { margin-bottom: 8px; }
.midi-sound-heading h2 { font-size: 19px; font-weight: 600; }
.midi-route-summary { overflow-wrap: anywhere; line-height: 1.5; font-size: 10px; color: #758164; margin: 0 0 8px; }
#midiInspectTrack { font-size: 10px; min-height: 25px; padding: 3px 7px; }
.midi-choice-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; margin: 16px 0 10px; padding: 3px; border: 1px solid #b7bea5; border-radius: 7px; background: #d9deca; }
.midi-choice-row button { min-height: 33px; font-size: 10px; padding: 5px; border-color: transparent; }
.midi-behavior-select { margin-top: 8px; }
.midi-tactile-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.midi-tactile-controls > .midi-field { display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 0; padding: 10px; background: #dce1ce; border: 1px solid #bac3a8; border-radius: 7px; }
.midi-tactile-controls .midi-field span { font-size: 11px; }
.midi-tactile-controls output { font-size: 10px; min-height: 1em; font-variant-numeric: tabular-nums; }
.midi-tactile-controls input[type=range] { width: 100%; min-height: 22px; }
.midi-sound-contour { border-color: #adb79a; height: 72px; }
.midi-sound-contour span { background: #7b9267; color: #fff; font-size: 10px; }
.midi-sound-contour span.is-next { background: #b28a4f; outline: 2px solid #806335; outline-offset: -2px; }
#midiSoundPreview { background: #586e48; color: #fffdf0; margin: 14px 0 8px; }
.midi-editor-notice { border-color: #c4cbb5; color: #697757; padding: 8px 13px; }
.midi-shared-sound-controls { border: 1px solid #b8baa5; padding: 10px; margin-bottom: 12px; }
.midi-shared-sound-controls > summary { cursor: pointer; margin-bottom: 8px; }
#midiExpertView .midi-region { background: #dce1ce; border-color: #b8baa5; }
#midiExpertView .midi-step-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
#midiProjectView .midi-preset-panel { background: #dce1ce; border-color: #b8baa5; color: #536148; }
.midi-sequencer summary { color: #536148; }
.game-chrome :focus-visible, .studio-library :focus-visible, .midi-sequencer :focus-visible { outline: 2px solid #bd8b35; outline-offset: 2px; }
#midiGamePlay[aria-pressed=true] { --icon: url('../assets/icons/lucide/pause.svg'); background: #485d3f; color: #f4f4dc; }
@media (min-width: 1600px) { body.game-page.studio-open { grid-template-columns: 220px minmax(300px, 1fr) 360px; } .midi-instrument-head { gap: 14px; } .midi-headunit-readout { width: 175px; font-size: 10px; } .midi-speed-control input[type=range] { width: 65px; } .midi-volume-control input { width: 80px; } }
@media (max-width: 1500px) { .game-chrome { gap: 7px; padding: 8px; } .midi-instrument-head { gap: 6px; } .midi-headunit-readout { min-width: 104px; width: 104px; font-size: 8px; } .midi-speed-control > span, .midi-speed-control input[type=range] { display: none; } .midi-layout-choices button { padding: 4px 6px; font-size: 10px; } .midi-layout-choices button::before { width: 13px; height: 13px; } .midi-volume-control input { width: 45px; } #levelIndexSelect { width: 155px; } body.game-page.studio-open { grid-template-columns: 200px minmax(280px,1fr) 316px; } }
@media (max-width: 1150px) { .midi-headunit-readout { display: none; } .midi-key-controls { display: none !important; } body.game-page.studio-open { grid-template-columns: 192px minmax(240px,1fr) 300px; } #levelIndexSelect { width: 135px; } }

.game-chrome { box-sizing: border-box; min-height: 0; }
#levelSelects .level-navigation button { min-height: 27px; }
/* Retain a usable stacked fallback; the redesigned workspace targets desktop. */
@media (max-width: 999px) {
  body.game-page, body.game-page.studio-open, body.game-page.studio-open[data-midi-layout=focus], body.game-page.studio-open[data-midi-layout=overlay] { display: flex; flex-direction: column; }
  .game-chrome, .studio-open .game-chrome { display: flex; flex-wrap: wrap; flex: 0 0 auto; height: auto; min-height: 48px; }
  #levelSelects { display: flex; flex-wrap: nowrap; flex: 1 1 auto; }
  #levelIndexSelect { width: auto; flex: 1 1 120px; max-width: 240px; }
  .midi-instrument-head { flex-wrap: wrap; flex: 1 1 100%; gap: 6px; }
  .midi-instrument-head .midi-headunit-readout { display: none; }
  .midi-layout-choices { margin-left: 0; }
  .studio-library { order: 1; flex: 0 0 auto; max-height: 180px; border-right: 0; border-bottom: 1px solid #344138; }
  .studio-library .character-controls { max-width: 360px; }
  .studio-open .studio-library { max-height: 110px; }
  .studio-open .studio-events { display: none; }
  .game-stage-slot, .studio-open .game-stage-slot { justify-content: center; }
  .game, .studio-open .game { display: flex; order: 2; flex: 1 1 auto; min-height: 100px; padding: 5px; }
  .studio-open .game { flex: 0 1 28dvh; }
  .midi-sequencer, .studio-open .midi-sequencer, body.game-page.studio-open[data-midi-layout=overlay] .midi-sequencer { position: static; order: 3; flex: 1 1 45dvh; min-height: 150px; margin: 4px; width: auto; border: 1px solid #53604b; border-radius: 7px; }
  .midi-view-tabs button { flex-direction: row; }
}
@media (max-width: 999px) and (max-height: 500px) { .studio-library { display: none; } .studio-open .midi-sequencer { min-height: 100px; } }

/* Modulation is a dense editor: keep names inside their high-contrast field boxes. */
#midiModulationInspector { padding: 10px; border: 1px solid #7d8e78; border-radius: 8px; background: #e7eddd; color: #263a2d; }
#midiModulationInspector > summary { color: #263a2d; font-weight: 700; }
#midiModulationInspector .midi-help { color: #415641; margin: 6px 0 10px; line-height: 1.45; }
#midiModulationInspector .midi-region__header { padding: 0; margin: 0 0 8px; }
#midiModulationInspector h3 { color: #263a2d; font-size: 12px; letter-spacing: .04em; }
#midiModulationInspector .midi-inline-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 64px), 1fr)); gap: 5px; align-items: stretch; margin-bottom: 5px; }
#midiModulationInspector .midi-field { box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0; min-width: 0; min-height: 44px; margin: 0; padding: 4px 6px; border: 1px solid #7d8e78; border-radius: 5px; background: #fcfbf5; color: #263a2d; }
#midiModulationInspector .midi-field > span { display: block; color: #415641; font-size: 10px; line-height: 1.2; font-weight: 700; white-space: normal; overflow: visible; text-overflow: clip; }
#midiModulationInspector .midi-field > input:not([type=checkbox]), #midiModulationInspector .midi-field > select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 24px; height: 24px; padding: 2px 0 0; border: 0; border-radius: 0; background: transparent; color: #182d20; font-size: 13px; font-variant-numeric: tabular-nums; box-shadow: none; }
#midiModulationInspector .midi-field:focus-within { border-color: #29533b; box-shadow: 0 0 0 1px #29533b; }
#midiModulationInspector .midi-field > input:focus-visible, #midiModulationInspector .midi-field > select:focus-visible { outline-offset: 1px; }
#midiModulationInspector .midi-field--toggle { flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; }
#midiModulationInspector input[type=checkbox] { accent-color: #29533b; flex: none; }
#midiModulationInspector .midi-automation-list { gap: 8px; margin-top: 10px; }
#midiModulationInspector .midi-automation-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 5px; padding: 7px; border: 1px solid #13251c; border-radius: 7px; background: #263a2d; color: #fcfbf5; }
#midiModulationInspector .midi-automation-row > .midi-field--toggle { grid-column: 1; grid-row: 1; min-height: 32px; padding: 4px 7px; background: #cfe5b5; border-color: #cfe5b5; }
#midiModulationInspector .midi-automation-row > .midi-field--toggle > span { color: #1d3a27; }
#midiModulationInspector .midi-automation-remove { grid-column: 2; grid-row: 1; align-self: stretch; min-height: 32px; padding: 4px 7px; border-color: #b77f6b; background: #f5ddd1; color: #613323; font-weight: 600; }
#midiModulationInspector #midiAutomationAddButton { min-height: 28px; padding: 4px 9px; border-color: #48623b; background: #cfe5b5; color: #1d3a27; font-weight: 700; }

/* Persistent safety and source context belong in the pane's compact titlebar. */
#midiTransportStrip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; flex-wrap: nowrap; gap: 6px; min-height: 40px; padding: 6px 8px; border-bottom: 1px solid #adb69f; background: #e0e5d4; }
#midiEditScope { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #263a2d; font-size: 12px; line-height: 1.3; }
#midiPanicButton { align-self: center; gap: 4px; min-height: 26px; height: 26px; padding: 3px 7px; border: 1px solid #963b2d; border-radius: 4px; background: #ad4434; color: #fff9f1; font-size: 11px; font-weight: 700; white-space: nowrap; }
#midiPanicButton::before { width: 12px; height: 12px; }
#midiPanicButton:hover { background: #933625; }
#midiWorkspaceClose { align-self: center; margin-left: 0; width: 26px; height: 26px; min-height: 26px; padding: 4px !important; border-radius: 4px; }
#midiWorkspaceClose::before { width: 14px; height: 14px; }
.midi-view-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 6px 8px; }
.midi-view-tabs button { flex-direction: row; justify-content: flex-start; gap: 6px; min-height: 28px; padding: 4px 7px; font-size: 11px; }
.midi-view-tabs button::before { width: 14px; height: 14px; }
.midi-view-tabs .midi-view-tab--secondary { color: #536148; }
.midi-view-tabs button[aria-pressed=true] { color: #fffbee; }
.midi-editor-view { padding: 10px; }
.midi-sound-heading { gap: 5px; margin-bottom: 6px; }
.midi-sound-heading h2 { font-size: 14px; }
.midi-sound-secondary { margin-top: 8px; padding-top: 7px; border-top: 1px solid #bbc3ad; }
.midi-sound-secondary > summary { display: flex; align-items: center; gap: 6px; padding: 3px 0; color: #415641; font-size: 11px; cursor: pointer; }
.midi-sound-secondary > .midi-button-row { gap: 4px; margin: 7px 0; }
.midi-event-context { display: grid; gap: 5px; margin-top: 12px; padding: 8px; border: 1px solid #bbc3ad; border-radius: 5px; background: #e0e5d4; }
.midi-event-context .midi-active-key { flex-wrap: wrap; margin: 0; gap: 4px; }
.midi-event-context .midi-field { margin: 0; }
.midi-instrument-menus details > div { min-width: 180px; padding: 4px; gap: 1px; }
.midi-game-event[hidden], .midi-event-count[hidden] { display: none; }
.midi-game-event span { overflow-wrap: anywhere; }
.midi-starting-palettes { position: relative; border: 0; padding: 0; margin: 0; }
.midi-starting-palettes > summary { display: inline-flex; align-items: center; gap: 4px; list-style: none; white-space: nowrap; }
.midi-preset-popover { position: absolute; right: 0; top: calc(100% + 8px); z-index: 100; width: 310px; max-width: calc(100vw - 24px); max-height: 65vh; overflow-y: auto; padding: 12px; background: #1a271e; color: #c5d2bc; border: 1px solid #52664f; border-radius: 7px; box-shadow: 0 12px 28px #0008; }
.midi-preset-popover .midi-preset-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
.midi-instrument-head .midi-preset-popover .midi-field select { max-width: none; width: 100%; }
.midi-preset-popover p { margin: 0 0 8px; font-size: 11px; }
.midi-preset-popover .midi-help { color: #a6b7a7; }
#levelIndexSelect { border-radius: 5px 0 0 5px; margin-right: -6px; }
#levelSelects .level-navigation { border-radius: 0 5px 5px 0; border-left: 0; padding: 0; }
.midi-instrument-menus { border-left: 1px solid #52664f; padding-left: 8px; }
.level-tools[open] .level-tools-popover, .midi-starting-palettes[open] .midi-preset-popover { animation: drawer-down 140ms ease-out; }
@keyframes drawer-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .level-tools[open] .level-tools-popover, .midi-starting-palettes[open] .midi-preset-popover { animation: none; } }
@media (max-width: 1500px) { .midi-starting-palettes > summary { font-size: 0; gap: 0; padding: 5px; } }

#levelSelects .level-navigation > button { border-radius: 0; }
#levelSelects .level-navigation > button:last-child { border-radius: 0 4px 4px 0; }
.game, .studio-open .game { padding-left: 4px; }

.midi-layout-choices > button { font-size: 10px; gap: 3px; padding: 4px 5px; }
@media (min-width: 1000px) and (max-width: 1599px) { .midi-instrument-head { gap: 7px; } .midi-headunit-readout { box-sizing: border-box; width: 110px; min-width: 90px; } }

.game-chrome:has(.midi-starting-palettes[open], .level-tools[open], .midi-instrument-menus details[open]) { z-index: 60; }

@media (max-width: 999px) { .midi-preset-popover { position: fixed; left: 12px; right: 12px; top: auto; width: auto; max-width: none; } }

.midi-game-event { overflow: hidden; isolation: isolate; }
.midi-game-event .midi-audible-note { position: absolute; left: 0; pointer-events: none; background: #e9bf78; color: #1a281e; border-radius: 2px; padding: 0 2px; font: 8px ui-monospace, monospace; line-height: 10px; z-index: -1; }

.midi-event-clip-editor { margin: 10px 0; border-block: 1px solid #b9c1a8; padding-block: 9px; }
.midi-event-clip-editor [hidden] { display: none !important; }
.midi-clip-controls { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-block: 8px; }
.midi-clip-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 10px; min-width: 0; }
.midi-clip-controls :is(input,select) { width: 100%; min-width: 0; box-sizing: border-box; font-size: 10px; padding: 4px 2px; }
.midi-clip-controls .midi-clip-flag { flex-direction: row; align-items: center; align-self: end; gap: 6px; min-height: 24px; }
.midi-clip-controls .midi-clip-flag input { width: auto; flex: 0 0 auto; padding: 0; }
.midi-event-clip-grid { display: grid; grid-template-columns: repeat(var(--clip-cells,8),minmax(0,1fr)); height: 105px; gap: 1px; touch-action: none; user-select: none; background: repeating-linear-gradient(to top,#bdc6ac 0 1px,transparent 1px 12px); }
.midi-event-clip-grid .midi-event-clip-cell { position: relative; display: block; padding: 0; min-width: 0; border-radius: 2px; background: #f8f6e780; border-color: #a6b597; overflow: hidden; }
.midi-event-clip-cell[aria-pressed=true] { background: #d0dab8; outline: 1px solid #5a7350; }
.midi-event-clip-cell small { position: absolute; bottom: 1px; left: 0; width: 100%; font: 8px ui-monospace,monospace; }
.midi-clip-note-bar { position: absolute; left: 0; right: 0; height: 12px; border-radius: 2px; background: #536e45; color: #fffceb; font: 8px ui-monospace,monospace; line-height: 12px; }

.midi-skill-event-dock { position: relative; height: 82px; background: #152118; border-bottom: 1px solid #3c533c; }
.midi-skill-event-dock[hidden] { display: none; }
.midi-skill-event-groups { position: absolute; top: 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1px; }
.midi-skill-event-slot { display: flex; flex-direction: column; gap: 2px; min-width: 0; border-inline-start: 1px solid #3b4c38; }
.midi-skill-event-dock .midi-game-event { grid-template-columns: minmax(0,1fr); gap: 0; padding: 3px 1px !important; min-height: 36px; border-radius: 3px; text-align: center; }
.midi-skill-event-dock .midi-game-event strong { font-size: 9px; line-height: 13px; }
.midi-skill-event-dock .midi-event-summary { font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.midi-skill-event-dock .midi-event-count { display: none; }
.midi-skill-event-dock.is-compact .midi-game-event strong { font-size: 10px; }

@media (max-width: 999px) { .studio-open .studio-events { display: block; } .studio-open .studio-library { max-height: 180px; } }

.midi-output-pressure-slot { flex: 0 0 14ch; width: 14ch; min-height: 1em; overflow: hidden; font: 9px ui-monospace,monospace; }
.midi-output-pressure { display: inline-block; max-width: 100%; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: #413622; color: #ead093; padding: 2px 5px; border-radius: 3px; font: 9px ui-monospace,monospace; }
#midiAudioControls { position: relative; }

.midi-capture-buttons { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.midi-output-capture iframe { width: 100%; height: 330px; box-sizing: border-box; border: 1px solid #536252; background: #f5f7f8; }
.midi-output-capture pre { white-space: pre-wrap; max-height: 220px; overflow: auto; font: 11px/1.4 ui-monospace, monospace; }
.midi-output-capture [hidden] { display: none; }

.midi-output-pressure[hidden] { display: none; }

.midi-event-clip-cell .midi-dispatched-cell-note { position: absolute; left: 2px; right: 2px; z-index: 1; pointer-events: none; border-radius: 2px; background: #e9bf78; color: #1a281e; font: 8px ui-monospace, monospace; line-height: 10px; text-align: left; padding: 0 2px; }

.midi-music-direction { display: flex; flex-direction: column; flex: 0 0 150px; width: 150px; gap: 0; min-width: 0; }
.midi-music-direction select { box-sizing: border-box; width: 100%; min-height: 24px; height: 24px; padding: 2px 4px; font-size: 11px; }
.midi-music-direction-status { display: block; height: 12px; line-height: 12px; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }