html.blech-midi-root { height: auto; min-height: 100%; overflow-x: clip; overflow-y: auto; }
.blech-midi-page { --midiphoria-accent: #96f4cc; --accent: #96f4cc; height: auto; min-height: 100dvh; overflow: visible; background: #07090b; color: #d5e1df; }
.blech-midi-workspace.mixer-shell { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 24px; max-width: 1600px; padding: 20px 30px 36px; background: transparent; }
.blech-midi-workspace [hidden] { display: none !important; }
.blech-midi-stage, .blech-midi-workspace #creativeControlsHost { min-width: 0; }
.blech-midi-heading h1 { margin: 8px 0 14px; color: #96f4cc; font-size: clamp(26px, 3vw, 38px); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; }
.blech-midi-credit { font-size: 11px; color: #a1b4ae; }
.blech-midi-modes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.blech-midi-modes button { min-height: 36px; padding: 8px 12px; background: #111916; color: #dbe6df; border: 1px solid #324037; }
.blech-midi-modes button[aria-pressed="true"] { color: #96f4cc; border-color: #96f4cc; }
.blech-midi-modes a { margin-left: auto; font-size: 11px; }
.blech-midi-transport { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 12px; }
.blech-midi-transport .control { width: 100px; }
.blech-master-exact { display: grid; gap: 2px; font-size: 10px; color: #a1b4ae; }
.blech-master-exact input { width: 76px; min-width: 0; height: 28px; padding: 3px 5px; font-variant-numeric: tabular-nums; }
.blech-midi-transport .control > span:first-child { flex-direction: column; gap: 4px; }
.blech-midi-transport #playButton, .blech-midi-preparation-heading #generateDrawingMidi { min-height: 44px; background: #96f4cc; border-color: #96f4cc; color: #07110b; }
.blech-midi-transport #playButton { min-width: 74px; }
.blech-midi-workspace #mixerPerformanceCanvas { height: clamp(130px, 20vh, 190px); }
.blech-midi-flow-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0 20px; }
.blech-midi-flow-controls output { margin-left: auto; font-size: 11px; }
.blech-midi-preparation-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.blech-midi-preparation-heading h2 { margin: 0; font-size: 14px; font-weight: 400; }
.blech-midi-workspace .midiphoria-drawing-viewport { height: clamp(270px, 40vh, 400px); }
.blech-midi-workspace .midiphoria-help { color: #a1b4ae; font-size: 11px; line-height: 1.5; }
.blech-midi-workspace #creativeStatus:empty { display: none; }
.blech-midi-workspace .midiphoria-drawing-actions a { color: #96f4cc; font-size: 11px; }
.blech-midi-workspace .mixer-performance { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; border: 0; }
.blech-midi-workspace .mixer-sample-bank { max-height: 300px; }
.blech-midi-workspace .mixer-stamp-shape-controls { margin-bottom: 0; }
.blech-midi-workspace .mixer-stamp-midi, .blech-midi-workspace .mixer-sample-message { margin: 0; }
.blech-midi-workspace .mixer-source-volume.control { display: block; }
.blech-midi-workspace .automata-midi-preview { max-height: 260px; }
.blech-midi-workspace .automata-midi-rule-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.blech-midi-workspace .automata-midi-rule-navigation { grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: start; }
.blech-midi-workspace .automata-midi-rule-navigation .automata-midi-rule-picker { grid-column: 2; grid-row: 1; }
.blech-midi-workspace .automata-midi-rule-navigation > button:first-child { grid-column: 1; grid-row: 1; }
.blech-midi-workspace .automata-midi-rule-navigation > button:last-child { grid-column: 3; grid-row: 1; }
.blech-midi-notes { grid-column: 1 / -1; font-size: 12px; line-height: 1.6; color: #a1b4ae; }
.blech-midi-notes summary { cursor: pointer; min-height: 36px; align-content: center; }
.blech-midi-notes p { max-width: 85ch; }
.blech-midi-effects { margin: 16px 0 0; padding-top: 8px; }
.blech-midi-font-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.blech-midi-font-controls .deck-file { display: grid; gap: 8px; min-width: 0; width: 100%; }
.blech-midi-font-controls input { width: 100%; min-width: 0; }
.blech-midi-font-controls output { overflow-wrap: anywhere; font-size: 11px; }
.blech-midi-effect-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.blech-midi-effect-controls input[type="number"], .blech-midi-effect-controls select { width: 100%; min-width: 0; margin-top: 6px; }
.blech-midi-effects #mixerFontStatus:empty { display: none; }
.blech-midi-workspace.mixer-shell { grid-template-columns: minmax(0, 1fr) 270px; }
.blech-midi-workbenches { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.blech-midi-workbenches > section { min-width: 0; scroll-margin-top: 90px; }
.blech-midi-modes a { margin-left: 0; min-height: 32px; display: inline-flex; align-items: center; }
.blech-midi-modes a:last-child { margin-left: auto; }
.blech-midi-workspace #creativePadsHost .mixer-sample-bank { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-height: 170px; margin-bottom: 20px; }
.blech-midi-workspace #creativePadsHost .mixer-saved-pads-inline,
.blech-midi-workspace #creativePadsHost .mixer-saved-bank { display: contents; }
.blech-midi-workspace #creativePadsHost .mixer-saved-pad[data-playing="true"] { order: -1; }
.blech-midi-workspace #creativePadsHost .mixer-sample-bank .mixer-saved-pad > button { min-height: 104px; }
.blech-midi-workspace #creativePadsHost .mixer-saved-pad-actions button { min-height: 32px; display: inline-flex; flex-direction: row; justify-content: center; align-items: center; border: 0; background: transparent; padding: 3px 5px; }
.blech-midi-workspace #creativePadsHost .mixer-saved-pad-actions label { margin-right: auto; }
.blech-midi-workspace #creativePadsHost .mixer-saved-pad-actions { gap: 2px; }
.blech-drawing-playback { margin-bottom: 10px; }
.blech-seed-bridge { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.blech-seed-bridge > label { flex: 1; min-width: 100px; font-size: 11px; }
.blech-seed-bridge input { width: 100%; display: block; accent-color: #f5ce6b; }
.blech-seed-bridge button { min-height: 36px; font-size: 11px; }
.blech-seed-bridge button[aria-pressed="true"] { color: #f5ce6b; border-color: #f5ce6b; }
#drawingSeedStatus { display: block; margin: 6px 0 16px; min-height: 1.5em; }
#drawingShapeControls .mixer-stamp-shape-controls { gap: 12px; }
#drawingMessageHost { margin-top: 16px; }
.blech-midi-workspace #automataMidiTools .midiphoria-automata { margin: 0; padding: 0; border: 0; }
.blech-midi-workspace #automataMidiTools .midiphoria-automata > summary { display: none; }
.blech-midi-workspace .automata-midi-body { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.blech-midi-workspace .automata-midi-main, .blech-midi-workspace .automata-midi-figure { width: 100%; min-width: 0; margin: 0; }
.blech-midi-workspace .automata-midi-live-transport { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.blech-midi-workspace .automata-midi-play-pause { width: 40px; height: 40px; padding: 7px; flex: 0 0 auto; border-radius: 50%; color: #96f4cc; border: 1px solid #96f4cc; background: transparent; }
.blech-midi-workspace .automata-midi-play-pause[aria-pressed="true"] { background: #174333; }
.blech-midi-workspace.mixer-shell .automata-midi-play-pause { border-radius: 50%; }
.automata-midi-live-transport h2 { margin: 0 auto 0 0; font-size: 14px; font-weight: 400; }
.automata-midi-live-status { font-size: 10px; color: #a1b4ae; }
.blech-midi-workspace .automata-midi-rule-details summary { cursor: pointer; min-height: 36px; align-content: center; font-size: 12px; }
.blech-midi-workspace .automata-midi-rule-details .automata-midi-rule-settings { margin-top: 12px; }
.blech-midi-workspace .automata-midi-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 6px; }
.blech-midi-workspace .automata-midi-actions select { flex: 1; min-width: 100px; width: auto; }
.blech-midi-workspace .automata-midi-seed { margin: 4px 0; }
.blech-midi-workspace .automata-midi-seed { min-width: 0; width: 100%; }
.blech-midi-workspace #automataMidiSeedStrip { display: block; width: 100%; height: 26px; background: #111916; }
.blech-midi-workspace .automata-midi-preview { height: 160px; max-height: 160px; }
.blech-midi-workspace .automata-midi-rule-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.blech-automata-sound { display: flex; align-items: start; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.blech-automata-sound > label:first-child { display: grid; gap: 8px; flex: 1; min-width: 130px; font-size: 11px; }
.blech-automata-sound select { width: 100%; min-width: 0; }
.blech-automata-sound .control { width: 110px; }
.blech-automata-sound .control > span:first-child { display: grid; gap: 4px; font-size: 11px; }
.blech-midi-workspace #creativeControlsHost > .mixer-performance > .mixer-sample-controls { display: flex; flex-wrap: wrap; }
@media (max-width: 1200px) { .blech-midi-workspace.mixer-shell { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-inline: 16px; } .blech-midi-workspace #creativeControlsHost { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (max-width: 800px) {
  .blech-midi-workspace.mixer-shell { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 16px; }
  .blech-midi-modes a { margin-left: 0; }
  .blech-midi-transport { gap: 10px; }
  .blech-midi-transport .control { width: 76px; }
  .blech-midi-workspace .midiphoria-drawing-viewport { height: 280px; }
  .blech-midi-workspace .automata-midi-rule-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .blech-midi-workbenches { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .blech-midi-workspace #creativePadsHost .mixer-sample-bank { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 190px; }
  .blech-midi-workspace #creativeControlsHost { display: block; }
  .blech-midi-workspace #creativeControlsHost > * { margin-bottom: 20px; }
}
@media (pointer: coarse) {
  .blech-midi-transport #playButton, .blech-midi-preparation-heading #generateDrawingMidi { min-height: 48px; }
  .blech-midi-effects > summary { min-height: 48px; align-content: center; }
  .blech-midi-workspace .blech-midi-transport button, .blech-midi-workspace .blech-midi-modes button,
  .blech-midi-workspace .blech-midi-preparation-heading button, .blech-midi-workspace .midiphoria-drawing-tools button { min-height: 48px; min-width: 48px; }
  .blech-midi-workspace :is(.midiphoria-drawing-actions a, .blech-midi-modes a, .blech-midi-notes summary) { min-height: 48px; display: inline-flex; align-items: center; }
  .blech-midi-workspace .midiphoria-automata :is(input[type="number"], input[type="search"]) { min-height: 48px; }
  .blech-midi-workspace #creativePadsHost .mixer-saved-pad-actions :is(button, label), .blech-seed-bridge button { min-height: 48px; min-width: 48px; }
  .blech-seed-bridge input { min-height: 48px; }
  .blech-midi-workspace .automata-midi-play-pause { width: 48px; height: 48px; }
}
.blech-art-creator { margin-top: 24px; scroll-margin-top: 90px; }
.blech-art-creator > summary, .blech-art-settings > summary { cursor: pointer; min-height: 40px; align-content: center; font-size: 13px; }
.blech-art-body { display: grid; gap: 12px; padding-top: 10px; }
.blech-art-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.blech-art-actions button { min-height: 38px; }
.blech-art-upload { display: grid; gap: 6px; font-size: 11px; flex: 1; min-width: 180px; }
.blech-art-upload input { min-width: 0; width: 100%; font-size: 11px; }
.blech-art-scene { min-width: 0; }
.blech-art-scene canvas { display: block; width: 100%; height: auto; aspect-ratio: 25 / 11; background: #080d10; border-radius: 0; }
.blech-art-scene output, #artStatus { display: block; margin-top: 6px; font-size: 11px; color: #a1b4ae; }
#artStatus:empty { display: none; }
.blech-art-layers { display: flex; gap: 8px 16px; flex-wrap: wrap; }
.blech-art-layer { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; color: var(--art-layer); }
.blech-art-layer label { display: flex; gap: 6px; align-items: center; min-width: 0; overflow-wrap: anywhere; font-size: 11px; }
.blech-art-layer button { padding: 3px 6px; min-height: 28px; border: 0; background: transparent; }
.blech-art-check { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.blech-art-script { display: grid; gap: 6px; font-size: 11px; }
.blech-art-script select { width: 100%; min-width: 0; }
.blech-art-body .midiphoria-help { margin: 0; }
.blech-art-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-block: 12px; }
.blech-art-controls > label { min-width: 0; display: grid; gap: 6px; align-content: start; font-size: 11px; }
.blech-art-controls .control > span:first-child { display: grid; gap: 5px; }
.blech-art-controls select { width: 100%; min-width: 0; }
.blech-art-seed { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; }
.blech-art-seed input { width: 120px; min-width: 0; }
#artSend { background: #96f4cc; border-color: #96f4cc; color: #07110b; }
.blech-art-settings .midiphoria-help { margin-top: 12px; }
@media (max-width: 650px) { .blech-art-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (pointer: coarse) { .blech-art-creator :is(button, summary, input[type="number"]), .blech-art-layer label, .blech-art-check { min-height: 48px; } }

#blackMidiViewport { position: absolute; inset: 0; }
#blackMidiViewport[hidden], #blackMidiControls[hidden] { display: none; }
.midiphoria-score-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; font-size: 11px; color: #a1b4ae; }
.midiphoria-score-stats output { display: block; font: 16px ui-monospace, monospace; color: #96f4cc; margin-top: 4px; }
.midiphoria-score-tracks { max-height: 240px; overflow-y: auto; margin: 12px 0; }
.midiphoria-score-track { display: grid; grid-template-columns: 20px minmax(0, 1fr) 34px; gap: 8px; align-items: center; min-height: 38px; font-size: 11px; }
.midiphoria-score-track span { overflow-wrap: anywhere; }
.midiphoria-score-track input[type="color"] { width: 32px; height: 28px; padding: 1px; border: 0; background: transparent; }
#blackMidiControls details { margin: 14px 0; font-size: 12px; }
#blackMidiControls summary { cursor: pointer; min-height: 26px; }
#blackMidiControls .mixer-range-knob { display: block; width: 48px; height: 48px; min-height: 48px; }
.blech-file-player { min-width: 0; margin-bottom: 18px; scroll-margin-top: 90px; }
.blech-file-player > summary, .blech-file-settings > summary { cursor: pointer; min-height: 40px; align-content: center; font-size: 13px; color: #96f4cc; }
.blech-file-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .72fr); align-items: start; gap: 20px; margin: 12px 0 24px; }
.blech-file-stage, .blech-file-library { min-width: 0; }
.blech-file-transport { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.blech-file-transport .control { width: 80px; }
.blech-file-transport .control > span { display: grid; gap: 4px; }
.blech-file-transport .play-button { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; }
.blech-file-transport .play-button[aria-pressed="true"] { color: #07110b; }
.blech-file-transport .transport-pause { fill: none; stroke: currentColor; stroke-width: 3; }
.blech-file-viewport { position: relative; width: 100%; height: clamp(180px, 28vh, 300px); background: #030706; margin-top: 12px; }
.blech-file-viewport:fullscreen { width: 100vw; height: 100dvh; }
.blech-file-viewport #blackFullscreen { position: absolute; top: 8px; right: 8px; background: #0a1210b8; z-index: 5; }
.blech-file-player .blech-file-position { display: block; width: 100%; margin: 12px 0; }
.blech-file-position > span { display: flex; justify-content: space-between; font-size: 11px; }
.blech-file-position input { width: 100%; accent-color: #96f4cc; }
.blech-file-player .midiphoria-library-heading { flex-wrap: wrap; }
.blech-file-player h2 { margin: 0; font-size: 12px; font-weight: 500; }
.blech-file-player .midiphoria-song-list { height: 240px; min-height: 180px; max-height: 45vh; }
.blech-file-player input[type="search"] { box-sizing: border-box; width: 100%; min-width: 0; background: #111916; color: #dbe6df; border: 1px solid #324037; border-radius: 0; padding: 8px; }
.blech-file-player #blackMidiControls > .control { display: inline-grid; align-content: start; vertical-align: top; gap: 8px; width: calc(50% - 10px); margin: 10px 10px 8px 0; }
.blech-file-player #blackMidiControls > .control > span { display: grid; gap: 4px; font-size: 11px; }
.blech-file-player #blackMidiControls select { width: 100%; min-width: 0; }
.blech-file-player :is(#blackTempoStatus, #blackPlayerStatus, #blackSongSearchStatus):empty, #blackSongDescription:empty { display: none; }
.blech-file-player a, #blackMidiCredits a { color: #96f4cc; }
.blech-midi-preparation-heading { flex-wrap: wrap; }
.blech-midi-preparation-heading h2 { margin-right: auto; }
@media (max-width: 700px) { .blech-file-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
@media (pointer: coarse) {
  .blech-file-player :is(button, summary, .blech-art-check) { min-height: 48px; }
  .blech-file-transport .play-button { flex-basis: 48px; width: 48px; height: 48px; }
}

/* One persistent performance stage; only the preparation panel scrolls. */
html.blech-midi-root { height: 100%; overflow: hidden; }
body.blech-midi-page { height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.blech-midi-page > .masthead { flex: 0 0 auto; position: relative; }
.blech-midi-workspace.mixer-shell { flex: 1; min-height: 0; width: 100%; max-width: 1680px; margin: 0 auto; padding: 6px 20px 12px; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr); grid-template-rows: minmax(0, 1fr); gap: 8px 20px; overflow: hidden; }
.blech-midi-stage { grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.blech-midi-heading { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; }
.blech-midi-heading h1 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: clamp(23px, 2.5vw, 34px); font-weight: 800; letter-spacing: -.04em; white-space: nowrap; }
.blech-midi-heading h1 img { width: 76px; height: 44px; object-fit: contain; }
.blech-note-counters { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; min-width: 0; padding: 3px 0; }
.blech-note-counters > div { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.blech-note-counters > div > span:first-child { font-size: 10px; color: #a1b4ae; }
.blech-note-counters > div > span:last-child { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 4px; }
.blech-note-counters output { color: #96f4cc; font-size: 20px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.blech-note-counters small, .blech-note-counters small output { color: #a1b4ae; font-size: 12px; }
#blechResetNoteCount { min-width: 32px; min-height: 32px; margin-left: auto; padding: 4px; font-size: 18px; }
@media (max-width: 700px) { .blech-note-counters { gap: 6px 10px; } .blech-note-counters output { font-size: 17px; } .blech-note-counters small output { font-size: 11px; } }
@media (pointer: coarse) { #blechResetNoteCount { min-width: 48px; min-height: 48px; } }
.blech-midi-transport { margin: 0; flex-wrap: nowrap; gap: 12px; }
.blech-midi-transport .control { width: 112px; }
.blech-midi-transport .control, .blech-file-transport .control { display: grid; grid-template-columns: 1fr 36px; gap: 6px; align-items: center; }
.blech-midi-transport .control > span:first-child, .blech-file-transport .control > span { display: grid; font-size: 10px; gap: 3px; }
.blech-midi-workspace .blech-midi-heading .mixer-range-knob,
.blech-midi-workspace .blech-file-transport .mixer-range-knob { width: 36px; height: 36px; min-height: 36px; }
.blech-midi-workspace .blech-midi-heading .mixer-source-volume.control { display: grid; }
.blech-file-player { flex: 1; min-height: 0; margin: 0; }
.blech-file-layout, .blech-file-stage { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 4px; margin: 0; }
.blech-file-transport { flex-wrap: nowrap; gap: 10px; min-height: 44px; }
.blech-file-transport .control { width: 120px; }
.blech-file-transport .play-button { width: 40px; height: 40px; flex-basis: 40px; }
.blech-file-viewport { flex: 1; min-height: 100px; height: auto; margin: 0; overflow: hidden; }
.blech-file-player .blech-file-position { display: grid; grid-template-columns: minmax(0, 1fr) 110px; align-items: center; gap: 10px; margin: 0; flex: 0 0 26px; }
.blech-file-position > span { grid-column: 2; grid-row: 1; white-space: nowrap; justify-content: flex-end; }
.blech-file-position > span b { display: none; }
.blech-file-position input { grid-column: 1; grid-row: 1; margin: 0; }
#blackCurrentSong { position: absolute; right: 50px; bottom: 36px; z-index: 1; max-width: 45%; margin: 0; font-size: 10px; pointer-events: none; padding: 3px 5px; background: #07100ce0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blech-file-stage { position: relative; }
#blackTempoStatus, #blackPlayerStatus { margin: 0; }
.blech-live-strip { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; min-width: 0; min-height: 0; max-height: 224px; padding: 4px 0 10px; border-bottom: 1px solid #293831; overflow: hidden; }
.blech-layers-heading { display: flex; flex: none; justify-content: space-between; align-items: center; gap: 10px; }
.blech-layers-heading h2 { margin: 0; font-size: 12px; font-weight: 600; }
#creativePlaybackStatus { font-size: 10px; color: #a1b4ae; text-align: right; }
#blechLayersEmpty { margin: 0; color: #a1b4ae; font-size: 10px; }
#blechLayersEmpty[hidden] { display: none; }
#blechLiveLayers { display: grid; gap: 4px; min-width: 0; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.blech-live-layer { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px 48px; align-items: center; gap: 6px; border-left: 2px solid #96f4cc; padding: 3px 0 3px 8px; font-size: 10px; }
.blech-live-layer[data-paused="true"] { border-left-color: #91a099; }
.blech-layer-copy { display: grid; min-width: 0; gap: 3px; }
.blech-layer-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blech-layer-copy > small { color: #a1b4ae; font-size: 9px; }
.blech-live-layer label { display: flex; gap: 3px; align-items: center; min-height: 32px; }
.blech-live-layer input { margin: 0; accent-color: #96f4cc; }
.blech-live-layer button { min-height: 34px; padding: 4px 6px; }
.blech-live-layer [data-layer-pause][aria-pressed="true"] { background: #294137; }
#blechAutomataToggle { flex: none; align-self: flex-start; font-size: 10px; min-height: 32px; }
#creativeStatus { margin: 0; flex: 0 0 auto; font-size: 10px; max-height: 42px; overflow: auto; }
#creativeStatus:empty { display: none; }
.blech-workbench { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; overflow: hidden; }
.blech-preparation { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
.blech-file-transport-label { font-size: 10px; color: #a1b4ae; white-space: nowrap; }
.blech-workspace-tabs { display: flex; flex-wrap: wrap; flex: 0 0 auto; min-width: 0; overflow-x: auto; gap: 2px; border-bottom: 1px solid #293831; }
.blech-workspace-tabs [role="tab"] { flex: 0 0 auto; white-space: nowrap; border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 9px 12px; min-height: 36px; font-size: 11px; color: #a1b4ae; }
.blech-workspace-tabs [aria-selected="true"] { color: #96f4cc; border-bottom-color: #96f4cc; background: #111d17; }
.blech-workspace-tabs [role="tab"]:focus-visible { outline: 2px solid #96f4cc; outline-offset: -3px; }
.blech-preparation > [role="tabpanel"] { flex: 1; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; padding: 12px 4px 24px; scrollbar-gutter: stable; }
.blech-preparation > [role="tabpanel"] h2 { font-size: 14px; font-weight: 500; margin: 0 0 10px; }
.blech-file-library { max-width: 1000px; }
.blech-file-library .midiphoria-library-heading { display: flex; gap: 12px; align-items: center; margin: 0 0 12px; }
.blech-file-library .midiphoria-library-heading h2 { margin: 0 auto 0 0; }
.blech-file-library #blackSongSelect { width: 100%; height: 42px; border: 1px solid #3a4b42; background: #111916; color: #d5e1df; border-radius: 0; padding: 8px; }
.blech-file-library .midiphoria-file { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 18px 0; font-size: 12px; }
.blech-file-library .midiphoria-file input { max-width: 100%; }
.blech-midi-workspace #creativePadsHost .mixer-sample-bank { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); max-height: none; overflow: visible; margin-bottom: 0; }
.blech-midi-workspace #creativePadsHost .mixer-sample-bank .mixer-saved-pad > button { min-height: 80px; }
#drawingShapeControls { flex: 0 0 auto; padding: 6px 4px; border-bottom: 1px solid #293831; }
#drawingShapeControls .mixer-stamp-shape-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
#drawingShapeControls .mixer-stamp-shape-controls > label { display: grid; grid-template-columns: auto 38px; min-width: 110px; gap: 2px 8px; font-size: 10px; }
#drawingShapeControls .mixer-stamp-shape-controls > label > output { grid-column: 1; }
#drawingShapeControls .mixer-range-knob { grid-column: 2; grid-row: 1 / 3; width: 36px; height: 36px; min-height: 36px; }
#drawingShapeControls .mixer-stamp-offset input { grid-column: 1 / -1; width: 140px; }
#drawingShapeControls #mixerStampHint { display: none; }
.blech-midi-workspace:not([data-frame="stamps"]) #drawingShapeControls .mixer-stamp-actions { display: none; }
.blech-midi-workspace .midiphoria-drawing-viewport { height: clamp(150px, 26vh, 250px); }
.blech-midi-workspace #creativeControlsHost { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.blech-midi-effects { margin: 0; }
.blech-art-creator { margin: 0; }
.blech-art-creator > summary { display: none; }
.blech-art-scene canvas { height: 200px; aspect-ratio: auto; }
#blackMidiControls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#blackMidiControls > .control { display: grid; align-content: start; gap: 8px; min-width: 0; font-size: 11px; }
#blackMidiControls select { width: 100%; min-width: 0; }
#blackMidiControls .midiphoria-score-stats, #blackMidiControls details { margin: 0; }
#blackMidiControls .midiphoria-score-stats, #blackMidiControls > h2, #blackMidiControls > p, #blackMidiControls > details { grid-column: 1 / -1; }
.blech-midi-workspace .automata-midi-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
#drawingMessageHost { margin: 0; min-width: 0; }
.blech-text-message { display: grid; gap: 6px; font-size: 12px; }
.blech-text-preview { margin: 0; min-width: 0; }
.blech-text-preview canvas { display: block; width: 100%; aspect-ratio: 25 / 8; border-radius: 0; }
.blech-text-preview figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; font-size: 10px; color: #a1b4ae; }
.blech-text-size { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blech-text-position { display: grid; gap: 8px; font-size: 11px; }
.blech-text-position > span { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; }
.blech-text-position input { width: 100%; min-width: 0; margin: 0; accent-color: #96f4cc; }
.blech-text-actions { align-items: center; }
#blechTextDrop { background: #96f4cc; color: #07110b; min-height: 40px; padding-inline: 18px; }
@media (pointer: coarse) {
  #blechTextDrop, .blech-text .blech-generator-check { min-height: 48px; }
  .blech-text-position input { min-height: 32px; }
}
@media (max-width: 700px) {
  .blech-live-strip { max-height: 120px; padding-bottom: 6px; }
  .blech-workspace-tabs { flex-wrap: nowrap; }
  .blech-midi-heading { gap: 8px; flex-wrap: wrap; }
  .blech-midi-heading h1 { font-size: 22px; }
  .blech-midi-heading h1 img { width: 48px; height: 30px; }
  .blech-midi-transport { gap: 8px; width: 100%; justify-content: space-between; }
  .blech-midi-transport .control { width: 96px; }
  .blech-file-transport { gap: 6px; flex-wrap: wrap; }
  .blech-file-transport .control { width: 94px; }
  .blech-file-transport .blech-art-check { min-height: 24px; font-size: 10px; }
  #blackCurrentSong { max-width: 75%; }
  #drawingShapeControls .mixer-stamp-shape-controls { gap: 6px 12px; }
  #drawingShapeControls .mixer-stamp-shape-controls > label { min-width: 90px; }
  #drawingShapeControls .mixer-stamp-offset input { width: 100px; }
  .blech-midi-workspace #creativeControlsHost, .blech-midi-workspace .automata-midi-body { grid-template-columns: minmax(0, 1fr); }
  #blackMidiControls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-height: 500px) and (min-width: 701px) {
  .blech-workspace-tabs { flex-wrap: nowrap; }
  .blech-live-strip { max-height: 120px; padding-bottom: 6px; }
  .blech-midi-heading { flex-wrap: wrap; gap: 4px; }
  .blech-midi-heading h1 { font-size: 21px; }
  .blech-midi-heading h1 img { width: 48px; height: 28px; }
  .blech-midi-transport { gap: 6px; }
  .blech-file-transport { flex-wrap: wrap; gap: 4px; }
  .blech-file-transport .control { width: 92px; }
  .blech-midi-transport .control { width: 96px; }
  .blech-file-transport .blech-art-check { min-height: 24px; }
  #drawingShapeControls .mixer-stamp-shape-controls { gap: 4px; }
  .blech-midi-workspace .automata-midi-body, .blech-midi-workspace #creativeControlsHost { grid-template-columns: minmax(0, 1fr); }
  #blackMidiControls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (pointer: coarse) {
  .blech-file-transport #blackPlayButton { width: 48px; height: 48px; flex-basis: 48px; }
  .blech-workspace-tabs [role="tab"], .blech-live-layer button, .blech-live-layer label, #blechAutomataToggle { min-height: 48px; }
}
.blech-file-layout { align-items: stretch; }
.blech-file-stage { width: 100%; }
.blech-generator input:not([type="range"]):not([type="checkbox"]), .blech-generator select { background: #111916; color: #d5e1df; border: 1px solid #324037; padding: 7px 9px; border-radius: 0; }

.blech-live-layer button { color: #96f4cc; background: #111d17; border: 1px solid #324037; }
@media (pointer: coarse) {
  .blech-midi-workspace .blech-midi-heading .mixer-range-knob, .blech-midi-workspace .blech-file-transport .mixer-range-knob, #drawingShapeControls .mixer-range-knob { width: 48px; height: 48px; min-height: 48px; }
  .blech-midi-transport .control, .blech-file-transport .control { grid-template-columns: 1fr 48px; }
}
.blech-midi-workspace .midiphoria-drawing-viewport { height: clamp(140px, 18vh, 200px); margin-bottom: 10px; }
.blech-midi-preparation-heading { margin-bottom: 4px; }
.blech-drawing-playback { margin-bottom: 6px; }
@media (max-width: 700px), (max-height: 500px) {
  .blech-preparation { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .blech-preparation > [role="tabpanel"] { overflow: visible; }
  #drawingShapeControls { overflow-x: auto; }
  #drawingShapeControls .mixer-stamp-shape-controls { flex-wrap: nowrap; min-width: max-content; }
  #drawingShapeControls .mixer-stamp-shape-controls > label { flex: 0 0 auto; min-width: 110px; }
  #drawingShapeControls .mixer-stamp-shape-controls > .mixer-stamp-offset { min-width: 140px; }
  .blech-midi-workspace .midiphoria-drawing-viewport { height: 150px; }
}
.blech-file-transport { flex: 0 0 auto; }
@media (max-height: 500px) and (min-width: 701px) {
  .blech-file-viewport { min-height: 64px; }
}
@media (max-height: 500px) and (min-width: 701px) {
  .blech-file-viewport { min-height: 48px; }
  .blech-file-player .blech-file-position { flex-basis: 36px; min-height: 36px; }
  .blech-file-position input { min-height: 36px; }
}

.blech-text-message { font-size: 14px; font-weight: 600; }
.blech-text-message textarea { width: 100%; min-width: 0; min-height: 92px; box-sizing: border-box; resize: vertical; padding: 12px; border: 1px solid #779d8b; border-radius: 0; background: #080d10; color: #effff6; font: 18px/1.5 monospace; }
.blech-text-message textarea:focus { outline: 2px solid #96f4cc; outline-offset: 2px; }
.blech-text-align { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; font-size: 11px; }
.blech-text-align legend { font-size: 10px; color: #a1b4ae; margin-bottom: 4px; }
.blech-text-align label { display: flex; align-items: center; gap: 3px; min-height: 32px; }
.blech-text-align input { margin: 0; accent-color: #96f4cc; }
.blech-text-layout { min-width: 0; }
#blechTextLines { margin: 6px 0 0; padding-left: 28px; max-height: 112px; overflow-y: auto; font: 13px/1.7 monospace; }
#blechTextLines li { padding-left: 5px; }
#blechTextLines li > span { white-space: pre; }
#blechTextLines small { margin-left: 12px; color: #a1b4ae; font: 10px system-ui; }
.blech-text-editing { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #96f4cc; font-size: 12px; }
.blech-text-editing[hidden], #blechTextApply[hidden], #blechTextScaleControl[hidden] { display: none; }
.blech-layer-copy [data-layer-edit] { justify-self: start; min-height: 26px; padding: 2px 8px; font-size: 10px; }
@media (pointer: coarse) {
  .blech-text button, .blech-text-align label, .blech-layer-copy [data-layer-edit] { min-height: 48px; }
}

.blech-text-actions button, #blechTextDone { border: 1px solid #3a4b42; border-radius: 0; background: #111916; color: #d5e1df; min-height: 36px; padding: 6px 12px; font: inherit; font-size: 11px; cursor: pointer; }
.blech-text-actions button:disabled { opacity: .4; cursor: default; }
.blech-text-actions #blechTextDrop { background: #96f4cc; color: #07110b; }
#blechTextApply { border-color: #96f4cc; }
#blechTextHint { margin: 0; }
#blechTextStatus:empty { display: none; }
@media (pointer: coarse) { .blech-text-actions button, #blechTextDone { min-height: 48px; } }

/* A shallow MIDI channel in Files; narrow screens scroll controls sideways. */
.blech-file-channel { flex: 0 0 auto; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; padding: 3px 0; border-bottom: 1px solid #293831; scrollbar-width: thin; }
.blech-file-channel .blech-file-transport { width: max-content; min-width: 100%; min-height: 36px; flex-wrap: nowrap; gap: 8px; }
.blech-file-channel .blech-file-transport .control { width: 98px; flex: 0 0 98px; }
.blech-file-channel .blech-file-transport .play-button { width: 34px; height: 34px; flex: 0 0 34px; }
.blech-file-channel .mini-action { min-height: 30px; padding: 4px 7px; font-size: 10px; white-space: nowrap; }
.blech-file-channel .mz-tap-tempo { width: 30px; min-width: 30px; min-height: 30px; height: 30px; padding: 2px; font-size: 9px; }
.blech-file-channel .blech-art-check { min-height: 30px; white-space: nowrap; font-size: 10px; gap: 4px; }
.blech-file-channel .blech-art-check input { margin: 0; }
.blech-file-bpm, .blech-file-ratio { display: grid; gap: 2px; flex: 0 0 62px; font-size: 10px; color: #a1b4ae; }
.blech-file-channel .blech-file-bpm input, .blech-file-channel .blech-file-ratio select { box-sizing: border-box; width: 62px; min-width: 0; height: 26px; min-height: 26px; padding: 2px 4px; border: 1px solid #324037; border-radius: 0; background: #111916; color: #d5e1df; font: inherit; font-size: 11px; }
.blech-file-bpm input:disabled { opacity: .7; }
.blech-file-link:has(input:checked) { color: #96f4cc; }
.blech-file-channel #blackTempoStatus { min-height: 14px; font-size: 10px; line-height: 14px; white-space: nowrap; }
.blech-gm-banks { margin-top: 20px; display: grid; gap: 8px; }
.blech-banks-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.blech-banks-heading a { font-size: 11px; white-space: nowrap; }
.blech-gm-banks .blech-banks-heading h2 { margin: 0; }
.blech-gm-banks > .midiphoria-help, .blech-gm-banks #mixerFontStatus { margin: 0; }
.blech-gm-banks #mixerFontStatus:empty { display: none; }
.blech-gm-banks #mixerBankChooser { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px; }
.blech-gm-banks #mixerBankChooser > p { grid-column: 1 / -1; margin: 0; }
.blech-gm-banks #mixerBankChooser > p:empty { display: none; }
.blech-gm-banks #mixerBankChooser > button { min-height: 32px; padding: 4px 7px; font-size: 10px; }
.blech-midi-heading #creativeVolumeHost .control { width: 128px; }
@media (pointer: coarse) {
  .blech-file-channel .blech-file-transport #blackPlayButton { width: 48px; height: 48px; flex-basis: 48px; }
  .blech-file-channel .mini-action, .blech-file-channel .blech-art-check { min-height: 48px; }
  .blech-file-channel .blech-file-bpm input, .blech-file-channel .blech-file-ratio select { height: 32px; min-height: 32px; }
}

/* Layers stay with the preparation controls at every screen size. */
.blech-section-label { font-size: 10px; color: #9bafa5; text-transform: uppercase; letter-spacing: .09em; margin: 4px 0; }
.blech-settings-tabs { justify-content: flex-end; border-bottom: 0; margin: 4px 0; }
.blech-settings-tabs [role="tab"] { font-size: 10px; min-height: 28px; padding: 4px 10px; }
.blech-preparation { overflow-y: auto; display: block; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 4px; }
.blech-preparation > [role="tabpanel"] { overflow: visible; padding: 12px 0 20px; }
.blech-frame-tabs { margin-bottom: 10px; }
.blech-frame-tabs [role="tab"] { padding: 7px 9px; font-size: 10px; }
.blech-info { border-top: 1px solid #293831; margin-top: 40px; padding: 14px 0 30px; }
.blech-preparation > .blech-live-strip { max-height: 182px; margin: 8px 0 12px; }
.blech-live-layer { grid-template-columns: minmax(100px, 1fr) minmax(50px, 90px) auto 54px 42px; gap: 8px; }
.blech-layer-level { min-width: 0; width: 100%; }
.blech-layer-timeline { position: relative; height: 12px; width: 100%; background: #15201b; overflow: hidden; }
.blech-layer-timeline canvas { width: 100%; height: 12px; display: block; opacity: .6; }
.blech-layer-timeline > i { position: absolute; top: 0; bottom: 0; width: 2px; background: #e5fff5; left: 0; }
.blech-live-layer[data-paused="true"] .blech-layer-timeline { opacity: .4; }
#blechDropControls { margin: 4px 0 8px; padding: 8px 0 10px; border-bottom: 1px solid #293831; display: grid; gap: 9px; }
.blech-drop-heading { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; min-width: 0; font-size: 11px; }
.blech-drop-heading output { font-size: 10px; color: #a1b4ae; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.blech-drop-transport, .blech-drop-transport [role="group"] { display: flex; gap: 5px; align-items: center; }
.blech-drop-transport > button:last-child { margin-left: auto; }
#blechDropControls button { min-height: 32px; font-size: 11px; padding: 5px 10px; border: 1px solid #34493c; border-radius: 0; background: #111916; color: #d5e1df; }
#blechDropControls #blechDropSend { min-width: 90px; background: #96f4cc; color: #07110b; border-color: #96f4cc; }
#blechDropControls button[aria-pressed="true"] { color: #96f4cc; border-color: #96f4cc; background: #1b3025; }
#blechDropControls button:disabled { opacity: .4; }
.blech-drop-sound { display: grid; grid-template-columns: 66px minmax(90px, 1fr) 104px; gap: 9px; align-items: end; }
.blech-drop-sound label, .blech-drop-position label { display: grid; min-width: 0; gap: 3px; font-size: 10px; color: #a1b4ae; }
.blech-drop-sound select, .blech-drop-position input { width: 100%; min-width: 0; height: 28px; background: #111916; color: #d5e1df; border: 1px solid #34493c; border-radius: 0; padding: 3px; box-sizing: border-box; font: inherit; }
.blech-drop-sound .control { grid-template-columns: 1fr 32px; align-items: center; }
.blech-drop-sound .control span { display: grid; gap: 3px; font-size: 10px; }
.blech-drop-sound .mixer-range-knob { width: 32px; height: 32px; min-height: 32px; }
.blech-drop-position { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
#blechDropControls .blech-drop-position button { font-size: 10px; min-height: 28px; }
#blechDropStatus { font-size: 10px; color: #a1b4ae; }
#blechDropStatus:empty { display: none; }
#blackMidiViewport { position: absolute; inset: 0; }
.blech-drop-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.blech-drop-overlay > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.blech-drop-handle { position: absolute; pointer-events: auto; cursor: move; touch-action: none; background: #96f4cc08; border: 1px dashed #96f4cc; border-radius: 0; padding: 0; min-width: 24px; min-height: 24px; }
.blech-drop-handle:hover { background: #96f4cc16; }
.blech-drop-handle:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.blech-drop-floating { position: absolute; display: flex; align-items: center; gap: 5px; background: #07110bee; padding: 2px 4px; max-width: 100%; box-sizing: border-box; pointer-events: none; font-size: 10px; }
.blech-drop-floating button { pointer-events: auto; border: 1px solid #34493c; border-radius: 0; background: #111916; color: #d5e1df; padding: 3px 6px; font-size: 10px; min-height: 26px; }
.blech-drop-floating button[aria-pressed="true"] { background: #96f4cc; color: #07110b; }
.blech-stamp-current { display: flex; align-items: center; gap: 8px; min-width: 0; }
.blech-stamp-thumbnail { width: 64px; height: 32px; flex: 0 0 64px; object-fit: contain; }
.blech-stamp-current-label { overflow: hidden; text-overflow: ellipsis; }
.blech-stamp-choice-copy { display: grid; gap: 2px; }
.blech-stamp-choice-copy small { color: #a1b4ae; font-size: 10px; }
#blechStampPicker { margin: 8px 0 14px; }
#blechStampPicker summary { max-width: 100%; box-sizing: border-box; }
/* These source-local sends are represented by the shared Send Drop strip. */
.blech-midi-workspace :is(#blechMathDrop, #blechFramesDrop, #artSend, #generateDrawingMidi),
.blech-midi-workspace :is(label:has(#blechMathLoop), label:has(#blechFramesLoop), label:has(#artLoop)),
.blech-midi-workspace #drawingPlaybackOptions { display: none; }
.blech-midi-workspace #creativePadsHost .mixer-saved-pads-inline { display: block; }
.blech-midi-workspace #creativePadsHost .mixer-saved-bank { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.blech-midi-workspace .automata-midi-seed-actions { display: flex; gap: 8px; margin: 8px 0; }
@media (max-width: 700px) {
  .blech-live-layer { grid-template-columns: minmax(80px, 1fr) 42px auto 45px 36px; gap: 4px; padding-left: 4px; }
  .blech-drop-position { grid-template-columns: 1fr 1fr auto; }
}
@media (pointer: coarse) {
  #blechDropControls .blech-drop-transport button, .blech-drop-floating button, .blech-live-layer button { min-height: 48px; }
  #blechDropControls .blech-drop-transport button { min-width: 48px; }
}

#blechDropControls .blech-drop-sound label.control { display: grid; grid-template-columns: 1fr 44px; min-height: 34px; gap: 4px; }
#blechDropControls .blech-drop-sound label.control > span:first-child { display: grid; gap: 3px; }
#blechDropControls .blech-drop-sound label.control > .mixer-range-knob { display: inline-block; margin: 0; }
.blech-midi-workspace #creativePadsHost .mixer-stamp-palette { display: none !important; }
.blech-midi-workspace #creativeControlsHost > .mixer-performance > .mixer-sample-controls { display: none; }
.blech-frame-advanced { margin-top: 18px; font-size: 11px; color: #a1b4ae; }
.blech-frame-advanced summary { cursor: pointer; padding: 8px 0; }
.blech-frame-advanced .mixer-stamp-source-controls { display: grid; gap: 12px; }
.blech-frame-advanced input, .blech-frame-advanced select { max-width: 100%; }

/* Dropped copies share one compact mixer, independent of the selected generator. */
#blechLiveLayers { display: flex; flex-direction: column; align-items: stretch; gap: 2px; overflow: auto; }
.blech-live-layer { position: relative; display: flex; flex: 0 0 auto; flex-wrap: nowrap; gap: 4px; padding: 2px 0 2px 4px; width: max-content; min-width: 100%; min-height: 32px; box-sizing: border-box; }
.blech-live-layer[data-selected="true"] { background: #173326; border-left-color: #c9ffe6; }
.blech-layer-copy { display: flex; align-items: center; flex: 1 1 168px; width: 168px; min-width: 168px; gap: 6px; }
.blech-layer-copy > [data-layer-name] { flex: 1 1 auto; min-width: 0; width: 0; height: 28px; min-height: 28px; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; border: 0; background: transparent; font-size: 10px; }
.blech-layer-copy > [data-layer-name][aria-pressed="true"] { color: #e5fff5; }
.blech-layer-copy > [data-layer-name]:focus-visible { outline: 2px solid #e5fff5; outline-offset: -2px; }
.blech-layer-copy .blech-layer-timeline { flex: 0 0 42px; width: 42px; cursor: pointer; }
.blech-layer-timeline, .blech-layer-timeline canvas { height: 6px; }
.blech-live-layer > button { flex: 0 0 28px; width: 28px; height: 28px; min-height: 28px; padding: 0; font-size: 12px; }
.blech-live-layer > [data-layer-stop] { font-size: 20px; }
.blech-live-layer > button[aria-pressed="true"] { color: #07110b; background: #96f4cc; }
.blech-live-layer[data-muted="true"] { border-left-color: #54615b; }
.blech-live-layer[data-muted="true"] .blech-layer-copy { opacity: .45; }
.blech-live-layer label.blech-layer-loop { flex: 0 0 28px; position: relative; display: grid; place-items: center; min-height: 28px; width: 28px; height: 28px; margin: 0; }
.blech-layer-loop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.blech-layer-loop > span { display: grid; place-items: center; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #324037; font-size: 21px; color: #96f4cc; background: #111d17; }
.blech-layer-loop:has(:checked) > span { color: #07110b; background: #96f4cc; }
.blech-layer-loop:has(:focus-visible) > span { outline: 2px solid #e5fff5; outline-offset: 2px; }
.blech-live-layer label.blech-layer-dial, .blech-live-layer label.blech-layer-channel { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 0; min-height: 0; height: 28px; font-size: 8px; line-height: 1; color: #a1b4ae; margin: 0; }
.blech-live-layer .blech-layer-dial .mixer-range-knob { width: 28px; min-width: 28px; max-width: 28px; flex-basis: 28px; height: 28px; min-height: 28px; }
.blech-live-layer .blech-layer-dial .mixer-range-knob > .mz-range-knob__dial { top: 2px; width: 24px; height: 24px; }
.blech-live-layer .blech-layer-dial .mixer-range-knob > input { min-height: 0; }
.blech-live-layer .blech-layer-channel select { width: 46px; min-width: 0; height: 28px; min-height: 28px; padding: 2px; background: #111916; color: #d5e1df; border: 1px solid #34493c; border-radius: 0; font-size: 10px; }
.blech-live-layer > [data-layer-settings][aria-expanded="true"] { color: #07110b; background: #96f4cc; }
.blech-layer-editor { position: sticky; left: 0; display: grid; flex: 0 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 8px; width: 100%; min-width: 0; padding: 6px; box-sizing: border-box; background: #16241d; }
.blech-layer-editor[hidden] { display: none; }
.blech-preparation > .blech-live-strip:has(.blech-layer-editor:not([hidden])) { max-height: min(320px, 45dvh); }
.blech-layer-editor-heading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.blech-layer-editor-heading strong { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #c9ffe6; font-size: 10px; }
.blech-layer-editor-heading button { flex: 0 0 24px; min-width: 24px; width: 24px; height: 24px; min-height: 24px; padding: 0; font-size: 18px; }
.blech-layer-editor > label { display: grid; gap: 3px; min-width: 0; margin: 0; color: #a7bdb2; font-size: 10px; }
.blech-layer-editor input[type="number"], .blech-layer-editor select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 28px; height: 28px; padding: 3px; border: 1px solid #34493c; border-radius: 0; background: #101a14; color: #e1f0e8; font-size: 11px; }
.blech-layer-editor > output { grid-column: 1 / -1; color: #f0ae94; font-size: 10px; }
.blech-layer-editor > output:empty { display: none; }
@media (pointer: coarse) {
  .blech-layer-editor input[type="number"], .blech-layer-editor select, .blech-layer-editor-heading button { min-height: 48px; height: 48px; }
  .blech-layer-editor-heading button { flex-basis: 48px; min-width: 48px; width: 48px; }
}
#blechSavedDrops { margin-bottom: 16px; font-size: 11px; }
#blechSavedDrops > summary { cursor: pointer; padding: 8px 0; }
#blechSavedDrops .mixer-saved-bank { display: grid; gap: 5px; grid-template-columns: 1fr; margin-top: 8px; }
#blechSavedDrops .mixer-saved-pad { display: flex; align-items: center; gap: 5px; padding: 0; border: 0; }
#blechSavedDrops [data-pad-play] { display: flex; align-items: center; min-width: 0; flex: 1; min-height: 28px; padding: 4px 6px; gap: 6px; font-size: 10px; }
#blechSavedDrops [data-pad-play] canvas, #blechSavedDrops [data-pad-play] small { display: none; }
#blechSavedDrops [data-pad-play] span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#blechSavedDrops .mixer-saved-pad-actions { display: flex; gap: 4px; }
#blechSavedDrops .mixer-saved-pad-actions button { min-height: 28px; padding: 2px 4px; font-size: 10px; }
#blechMathPicker { min-width: 0; flex: 1 1 200px; }
#blechMathPicker summary { max-width: 100%; box-sizing: border-box; }
.blech-layer-copy [data-layer-edit] { padding: 0 3px; min-height: 18px; height: 18px; font-size: 9px; justify-self: start; }
@media (pointer: coarse) {
  .blech-live-layer { min-height: 52px; }
  .blech-live-layer > button, .blech-live-layer label.blech-layer-loop, .blech-live-layer .blech-layer-dial .mixer-range-knob, .blech-live-layer .blech-layer-channel select { flex-basis: 48px; width: 48px; min-width: 48px; max-width: 48px; height: 48px; min-height: 48px; }
  .blech-live-layer label.blech-layer-dial, .blech-live-layer label.blech-layer-channel, .blech-layer-copy > [data-layer-name], .blech-layer-copy [data-layer-edit] { height: 48px; min-height: 48px; }
  .blech-live-layer .blech-layer-dial .mixer-range-knob > .mz-range-knob__dial { top: 12px; }
}

.blech-drop-position { grid-template-columns: repeat(4, minmax(48px, 1fr)); gap: 8px; }
#blechDropReset { grid-column: 1 / -1; justify-self: end; }
.blech-drop-resize { position: absolute; z-index: 3; pointer-events: auto; touch-action: none; transform: translate(-50%, -50%); width: 12px; height: 12px; min-width: 12px; min-height: 12px; padding: 0; border: 1px solid #e5fff5; border-radius: 0; background: #c94420; }
.blech-drop-resize[data-resize="left"], .blech-drop-resize[data-resize="right"] { cursor: ew-resize; }
.blech-drop-resize[data-resize="top"], .blech-drop-resize[data-resize="bottom"] { cursor: ns-resize; }
.blech-drop-resize[data-resize="top-left"], .blech-drop-resize[data-resize="bottom-right"] { cursor: nwse-resize; }
.blech-drop-resize[data-resize="top-right"], .blech-drop-resize[data-resize="bottom-left"] { cursor: nesw-resize; }
.blech-drop-resize:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (pointer: coarse) {
  .blech-drop-resize { width: 28px; height: 28px; min-width: 28px; min-height: 28px; border: 8px solid transparent; background-clip: padding-box; }
}

@media (pointer: coarse) {
  .blech-midi-workspace .blech-drop-overlay .blech-drop-resize { width: 28px; height: 28px; min-width: 28px; min-height: 28px; }
  #blechSavedDrops [data-pad-play], #blechSavedDrops .mixer-saved-pad-actions button, #blechSavedDrops .mixer-saved-pad-actions label { min-height: 48px; min-width: 48px; }
  #blechSavedDrops .mixer-saved-pad { flex-wrap: wrap; }
  #blechSavedDrops [data-pad-play] { flex-basis: 100%; }
}

/* The title and counts stay above a single master transport. */
.blech-midi-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding-bottom: 8px; }
.blech-note-counters { justify-content: flex-start; flex-wrap: nowrap; gap: 10px; }
.blech-note-counters > div > span:first-child { white-space: nowrap; }
#blechResetNoteCount { margin-left: 0; flex-shrink: 0; }
.blech-midi-heading .blech-midi-transport { grid-column: 1 / -1; justify-content: flex-start; gap: 8px; width: 100%; }
.blech-midi-transport .control.blech-master-knob { width: 36px; grid-template-columns: 36px; }
.blech-midi-transport .blech-master-exact input { box-sizing: border-box; }
.blech-midi-transport #creativeStop { margin-left: auto; }
#blechMasterPlay { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; border-radius: 50%; border: 1px solid #496358; background: #111d17; color: #96f4cc; }
#blechMasterPlay[aria-pressed="true"] { color: #07110b; background: #96f4cc; }
#blechMasterPlay svg { width: 24px; height: 24px; }
#blechMasterPlay .transport-pause { fill: none; stroke: currentColor; stroke-width: 3; }
#blechMasterPlay[aria-pressed="false"] .transport-pause, #blechMasterPlay[aria-pressed="true"] .transport-play { display: none; }
#blechMasterPlay .transport-play { fill: currentColor; }
#blechFileTransport { min-width: 0; margin-top: 10px; }
#blechFileTransport .blech-file-position { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 8px 0; }
#blechFileTransport #blackCurrentSong { position: static; max-width: none; padding: 0; margin: 4px 0; }
#blechFileTransport #blackPlayerStatus:empty { display: none; }
.blech-settings-tabs, .blech-frame-tabs { position: static; }
@media (max-width: 1100px) {
  .blech-midi-heading { column-gap: 8px; }
  .blech-midi-heading h1 { font-size: 22px; gap: 6px; }
  .blech-midi-heading h1 img { width: 48px; height: 30px; }
  .blech-note-counters { gap: 7px; }
  .blech-note-counters > div > span:first-child { font-size: 9px; }
  .blech-note-counters output { font-size: 17px; }
}
@media (max-width: 700px), (max-height: 500px) {
  .blech-midi-heading { grid-template-columns: minmax(0, 1fr); }
  .blech-note-counters { justify-content: flex-start; }
  #blechResetNoteCount { margin-left: auto; }
}
@media (pointer: coarse) {
  #blechMasterPlay { flex-basis: 48px; width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
  .blech-midi-transport .control.blech-master-knob { width: 48px; grid-template-columns: 48px; }
}

/* On phones, split the space below the masthead equally between the graphic
   and one scrolling control panel. Layers and open editors cannot resize it. */
@media (max-width: 700px), (max-height: 500px) {
  .blech-midi-workspace.mixer-shell { padding: 4px 10px 8px; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .blech-midi-stage { grid-column: 1; grid-row: 1; overflow: hidden; }
  .blech-midi-stage > .blech-file-player { flex: 1; min-height: 0; }
  .blech-file-viewport { min-height: 0; display: flex; flex-direction: column; }
  .blech-file-header { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding-bottom: 4px; background: #07090b; }
  .blech-file-header .blech-midi-heading { display: flex; align-items: center; flex: 1; min-width: 0; flex-wrap: nowrap; gap: 8px; padding: 0; }
  .blech-file-viewport #blackFullscreen { position: static; flex: 0 0 auto; }
  #blackMidiViewport { position: relative; inset: auto; flex: 1; min-height: 0; }
  .blech-workbench { grid-column: 1; grid-row: 2; border-top: 1px solid #293831; padding-top: 6px; }
  .blech-preparation { scroll-padding-top: 0; }
  .blech-workspace-tabs { position: static; flex-wrap: nowrap; }
  .blech-midi-heading { grid-template-columns: auto minmax(0, 1fr); }
  .blech-midi-heading h1 { font-size: 18px; gap: 4px; }
  .blech-midi-heading h1 img { width: 26px; height: 24px; }
  .blech-preparation > .blech-midi-transport { flex-wrap: wrap; gap: 8px; }
  .blech-note-counters { gap: 4px; justify-content: flex-end; }
  .blech-note-counters > div { flex-direction: column; gap: 0; }
  .blech-preparation > .blech-live-strip,
  .blech-preparation > .blech-live-strip:has(.blech-layer-editor:not([hidden])) { max-height: none; overflow: visible; }
  #blechLiveLayers { overflow-y: hidden; }
}
.blech-file-player .blech-drop-floating-compact button { min-height: 28px; }
@media (max-height: 500px) {
  .blech-file-header #blechResetNoteCount, .blech-file-header #blackFullscreen { min-height: 32px; height: 32px; }
}
@media (max-width: 360px) {
  .blech-file-header h1 { font-size: 16px; }
  .blech-file-header h1 img { width: 20px; }
  .blech-file-header .blech-note-counters output { font-size: 12px; }
}