:root { color-scheme: dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #111925; color: #eaf0f7; --muted: #a6b4c6; --line: #334254; --accent: #8ce3c5; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button, select, input[type="number"] { border: 1px solid #46566b; border-radius: 8px; background: #223044; color: inherit; min-height: 42px; }
button { padding: 9px 14px; cursor: pointer; }
button:hover:not(:disabled) { background: #30435a; }
button:disabled { opacity: .4; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #f6c675; outline-offset: 3px; }
select { padding: 8px 28px 8px 10px; max-width: 100%; }
input[type="number"] { width: 76px; padding: 8px; }
input[type="range"], input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
input[type="range"] { width: 100%; margin: 5px 0 0; }
input[type="checkbox"] { width: 17px; height: 17px; margin: 0; }
label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: .82rem; font-weight: 600; }
a { color: var(--accent); }
.studio { width: min(1080px, 100%); margin: 0 auto; padding: 28px 32px 36px; }
.page-header { position: relative; margin-bottom: 24px; }
.home-link { display: inline-block; font-size: .85rem; text-decoration: none; margin-bottom: 24px; padding-block: 7px; }
.home-link:hover { text-decoration: underline; }
.badge { float: right; margin-top: 5px; padding: 5px 10px; border: 1px solid #46566b; border-radius: 20px; font-size: .7rem; color: var(--muted); }
h1 { margin: 0; font-size: clamp(2.2rem, 6vw, 3.5rem); line-height: 1.08; letter-spacing: -.055em; }
h1 span { color: var(--accent); }
.intro { margin: 12px 0 0; color: var(--muted); font-size: 1rem; }
.controls { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px; padding: 20px; background: #1b2636; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 20px; }
.transport { display: flex; align-items: center; gap: 16px; margin-right: auto; }
.primary { background: var(--accent); color: #112a25; border-color: var(--accent); font-weight: 750; min-width: 106px; min-height: 48px; }
.primary:hover:not(:disabled) { background: #b3efdb; }
.primary.is-playing { background: #f6c675; border-color: #f6c675; color: #32230c; }
.position { min-width: 105px; color: var(--muted); font-variant-numeric: tabular-nums; font-size: .85rem; }
.field-with-unit { display: flex; align-items: center; gap: 8px; }
.volume-label { width: 120px; display: grid; grid-template-columns: 1fr auto; }
.volume-label input { grid-column: 1 / -1; }
.workspace { background: #192435; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.grid-toolbar { padding: 18px 20px 12px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
h2 { margin: 0; font-size: 1rem; font-weight: 650; }
.grid-toolbar p { margin: 5px 0 0; font-size: .78rem; color: var(--muted); }
.page-controls { display: flex; align-items: center; gap: 12px; white-space: nowrap; font-size: .85rem; }
.page-controls button { padding: 6px 12px; }
.grid-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px 14px; font-size: .75rem; color: var(--muted); }
.legend { display: flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--accent); }
.checkbox-label { flex-direction: row; align-items: center; font-size: .75rem; font-weight: 400; }
.scale-tools { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; padding: 0 20px 10px; }
.scale-tools > .checkbox-label { min-height: 42px; }
#scale-description { flex: 1 1 180px; color: var(--muted); font-size: .75rem; line-height: 1.5; margin: 0 0 5px; }
.scale-guide { padding: 0 20px 14px; color: var(--muted); font-size: .72rem; line-height: 1.6; }
.scale-guide p { margin: 0 0 6px; }
#scale-pitches { color: #cbd7e6; overflow-wrap: anywhere; }
.scale-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 6px; }
.scale-legend[hidden] { display: none; }
.scale-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.scale-legend i { width: 12px; height: 12px; border-radius: 3px; }
.in-scale-key { background: #36525c; border: 1px solid #708b95; }
.outside-key { background: #edb9dc; }
.root-key, .root-marker { font-size: .55rem; font-weight: 800; border-radius: 3px; background: #f6c675; color: #32230c; padding: 1px 3px; }
.root-marker { display: none; margin-left: 3px; vertical-align: middle; }
.scale-highlight .scale-root .root-marker { display: inline-flex; }
.scale-highlight .in-scale > th { background: #2a454e; }
.scale-highlight .scale-root > th { background: #45412f; }
.scale-highlight .out-of-scale > th { background: #1b2636; }
.scale-highlight .in-scale .note-cell:not(.is-note):not(.is-current) { background: #293e4b; }
.scale-highlight .scale-root .note-cell:not(.is-note):not(.is-current) { background: #3e433b; }
.scale-highlight .out-of-scale .note-cell:not(.is-note):not(.is-current) { background: #192638; }
.scale-highlight .out-of-scale .note-cell.is-note:not(.is-current) { background: #edb9dc; }
.scale-highlight .out-of-scale .note-cell.is-note:not(.is-selected) { border-color: #674254; }
.scale-highlight .out-of-scale td.note-segment { border-right-color: #edb9dc; }
.note-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 24px; padding: 0 20px 16px; }
.selection-tools { display: flex; flex-direction: column; gap: 6px; }
#selected-note { color: var(--muted); font-size: .75rem; }
.length-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.length-controls button { padding: 8px 12px; font-size: .8rem; }
.length-field { flex-direction: row; align-items: center; font-size: .75rem; }
.length-field input { width: 62px; }
.note-cell { position: relative; }
td.note-segment { border-right-color: var(--accent); }
.note-cell.is-note, .sharp .note-cell.is-note { background: var(--accent); color: #12372d; border-top: 3px solid #1a403a; border-bottom: 3px solid #1a403a; box-shadow: none; }
.note-cell.is-note.note-start { border-left: 3px solid #1a403a; border-radius: 4px 0 0 4px; }
.note-cell.is-note.note-end { border-right: 3px solid #1a403a; border-radius: 0 4px 4px 0; }
.note-cell.is-note.note-start.note-end { border-radius: 4px; }
.note-cell.is-note.is-selected { border-color: #eaf0f7; }
.resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 14px; display: flex; justify-content: center; align-items: center; font-size: 1rem; line-height: 1; cursor: ew-resize; touch-action: none; background: #163d3326; }
.note-cell.is-note.is-current { background: #f6c675; box-shadow: none; }
.grid-scroll { overflow: auto; max-height: 510px; overscroll-behavior: contain; scrollbar-color: #53647b #142032; scrollbar-width: thin; }
table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 634px; table-layout: fixed; }
th, td { padding: 0; }
thead { position: sticky; top: 0; z-index: 3; }
thead th { height: 30px; background: #25354b; border-bottom: 1px solid #53647b; color: #c4d0df; font-size: .7rem; font-weight: 400; }
thead th:first-child { width: 58px; position: sticky; left: 0; z-index: 4; }
tbody th { position: sticky; left: 0; z-index: 2; background: #2a394d; border-bottom: 1px solid #1b2636; }
tbody th.sharp { background: #152131; }
.pitch { border: 0; border-radius: 0; display: block; width: 100%; min-height: 30px; height: 30px; padding: 0; font-size: .72rem; color: #c3cfdf; background: transparent; }
.pitch:hover { color: white; }
td { border-right: 1px solid #2c3c50; border-bottom: 1px solid #2c3c50; }
.note-cell { display: block; padding: 0; border: 0; border-radius: 0; min-height: 29px; height: 29px; width: 100%; background: #233349; touch-action: auto; }
.sharp .note-cell { background: #1c2a3d; }
.beat-start { border-left: 2px solid #53647b; }
.note-cell:hover:not(:disabled) { background: #3c536b; }
.note-cell[aria-pressed="true"], .sharp .note-cell[aria-pressed="true"] { background: var(--accent); box-shadow: inset 0 0 0 3px #1a403a; }
.note-cell.is-note[aria-pressed="true"] { box-shadow: none; }
.note-cell.is-current { box-shadow: inset 0 0 0 2px #f6c675; background: #414639; }
.note-cell.is-current[aria-pressed="true"] { background: #f6c675; box-shadow: inset 0 0 0 3px #725826; }
.note-cell.is-note.is-current[aria-pressed="true"] { box-shadow: none; }
thead .is-current { background: #f6c675; color: #32230c; font-weight: 700; }
.note-cell:focus-visible { outline-offset: -3px; outline: 3px solid #fff; position: relative; z-index: 1; }
.grid-footer { display: flex; justify-content: space-between; gap: 12px; padding: 12px 20px; color: var(--muted); font-size: .75rem; border-top: 1px solid var(--line); }
#note-count { flex: 0 0 auto; white-space: nowrap; }
.grid-footer > span:last-child { text-align: right; }
.edit-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin-top: 20px; }
.starter-label { flex: 1 1 250px; max-width: 360px; }
.button-group { display: flex; gap: 8px; flex-wrap: wrap; }
.button-group button { font-size: .8rem; }
.file-tools { margin-left: auto; }
.button-group button { white-space: nowrap; }
.feedback { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; font-size: .8rem; margin: 14px 0; min-height: 28px; }
#status { margin: 0; color: #ccd7e4; }
#save-status { color: var(--muted); font-size: .7rem; white-space: nowrap; }
.help { border-top: 1px solid var(--line); padding: 15px 0 0; color: var(--muted); font-size: .85rem; }
summary { cursor: pointer; padding: 8px 0; color: #cbd7e6; }
.help-content { max-width: 760px; line-height: 1.65; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 700px) {
    .studio { padding: 16px 12px 28px; }
    .page-header { margin-bottom: 18px; }
    .home-link { margin-bottom: 18px; }
    .controls { padding: 14px; gap: 14px 18px; }
    .transport { flex-basis: 100%; }
    .volume-label { flex: 1; min-width: 75px; }
    .grid-toolbar { padding: 14px 12px 12px; }
    .grid-toolbar p { font-size: .7rem; }
    .page-controls { gap: 7px; font-size: .75rem; }
    .page-controls button { padding: 5px 9px; }
    .grid-options { padding: 0 12px 12px; gap: 8px; }
    .scale-tools { padding: 0 12px 10px; gap: 12px; }
    .scale-tools > label:not(.checkbox-label) { flex: 1; min-width: 110px; }
    .scale-tools select { width: 100%; padding-right: 18px; }
    .scale-tools > .checkbox-label { min-height: 28px; }
    #scale-description { flex-basis: 100%; }
    .scale-guide { padding: 0 12px 12px; }
    .note-tools { padding: 0 12px 12px; gap: 12px; }
    .note-tools > label { flex-basis: 100%; }
    .note-tools > label select { max-width: 170px; }
    .legend, .checkbox-label { font-size: .65rem; }
    .grid-scroll { max-height: 52vh; min-height: 260px; }
    .pitch { height: 36px; min-height: 36px; }
    .note-cell { height: 35px; min-height: 35px; }
    .grid-footer { padding: 10px 12px; font-size: .65rem; }
    .starter-label { flex-basis: 100%; max-width: none; }
    .file-tools { margin-left: 0; }
    .feedback { flex-direction: column; gap: 6px; }
}
@media (max-width: 360px) {
    .controls { gap: 12px; }
    .controls select { max-width: 120px; }
    .volume-label { flex-basis: 100%; }
    .grid-toolbar { align-items: start; }
    .grid-toolbar p { max-width: 120px; }
}

/* Song controls extend the existing studio and keep the piano roll unchanged. */
.pattern-panel { background: #1b2636; border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin-bottom: 20px; }
.pattern-controls, .track-tools, .drum-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.pattern-controls > label { min-width: 140px; }
.pattern-name { flex: 1; }
.pattern-name input { min-width: 0; width: 100%; border: 1px solid #46566b; border-radius: 8px; background: #223044; color: inherit; min-height: 42px; padding: 8px 10px; }
#pattern-select { max-width: 260px; }
#arrangement-panel { margin-top: 12px; border-top: 1px solid var(--line); }
#arrangement-summary, .arrangement-help { color: var(--muted); font-size: .75rem; }
#arrangement-summary { margin-left: 6px; }
.arrangement { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.song-slot { background: #223044; border: 1px solid #46566b; border-radius: 8px; padding: 8px; max-width: 100%; }
.song-slot.is-current { border-color: #f6c675; }
.song-slot span { display: block; font-size: .75rem; margin-bottom: 6px; overflow-wrap: anywhere; }
.song-slot button { min-height: 32px; min-width: 32px; padding: 4px 8px; margin-right: 4px; font-size: .75rem; }
#add-slot { font-size: .8rem; }
.track-tools { padding: 0 20px 8px; justify-content: space-between; align-items: center; }
.track-tabs { display: flex; gap: 5px; }
.track-tabs [aria-selected="true"] { background: var(--accent); color: #112a25; border-color: var(--accent); }
.track-tabs #track-bass[aria-selected="true"] { background: #9ecfff; border-color: #9ecfff; }
.phrase-help { padding: 0 20px; margin: 0 0 14px; color: var(--muted); font-size: .72rem; }
#piano-roll.bass-track .note-cell.is-note, #piano-roll.bass-track .sharp .note-cell.is-note { background: #9ecfff; border-color: #314d6a; }
#piano-roll.bass-track td.note-segment { border-right-color: #9ecfff; }
#piano-roll.bass-track .note-cell.is-note.is-selected { border-color: #eaf0f7; }
#piano-roll.bass-track.scale-highlight .out-of-scale .note-cell.is-note { background: #edb9dc; }
#piano-roll.bass-track .note-cell.is-note.is-current { background: #f6c675; }
.drum-tools { padding: 14px 20px; border-top: 1px solid var(--line); align-items: center; justify-content: space-between; }
.drum-scroll { overflow: auto; overscroll-behavior: contain; scrollbar-color: #53647b #142032; }
.drum-cell { display: block; width: 100%; height: 32px; min-height: 32px; border: 0; border-radius: 0; padding: 0; background: #233349; touch-action: auto; }
.drum-cell[aria-pressed="true"] { background: #c7b0f8; box-shadow: inset 0 0 0 3px #665182; }
.drum-cell.is-current { background: #414639; box-shadow: inset 0 0 0 2px #f6c675; }
.drum-cell.is-current[aria-pressed="true"] { background: #f6c675; }
.drum-pitch { width: 100%; padding: 0; border: 0; border-radius: 0; font-size: .65rem; height: 32px; min-height: 32px; background: transparent; }
@media (max-width: 700px) {
    .pattern-panel { padding: 14px 12px; }
    .pattern-controls > label { flex: 1; min-width: 110px; }
    #pattern-select { max-width: 100%; }
    .track-tools { padding: 0 12px 8px; }
    .phrase-help { padding: 0 12px; }
    .drum-tools { padding: 12px; }
    .drum-cell, .drum-pitch { height: 35px; min-height: 35px; }
}

/* Keep creation at the front; deeper tools unfold beside the same project. */
[hidden] { display: none !important; }
.studio { width: min(1120px, 100%); padding: 12px 28px 32px; }
.page-header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 16px; margin-bottom: 10px; }
.home-link { grid-column: 1; width: fit-content; margin-bottom: 0; }
.badge { grid-column: 2; grid-row: 1; float: none; justify-self: end; margin: 0; }
h1 { grid-column: 1; font-size: clamp(2rem, 3vw, 2.3rem); }
.intro { grid-column: 2; margin: 0; font-size: .82rem; text-align: right; }
.starting-ideas { margin-bottom: 10px; }
.ideas-heading { display: flex; align-items: baseline; gap: 12px; margin-bottom: 5px; }
.ideas-heading h2 { font-size: .9rem; }
.ideas-heading > span { color: var(--muted); font-size: .75rem; }
.starter-ideas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; min-width: 0; }
.starter-card { display: flex; flex-direction: column; min-width: 0; padding: 8px; background: #192435; border: 1px solid var(--line); border-radius: 9px; }
.starter-card h3 { margin: 0; font-size: .83rem; line-height: 1.3; font-weight: 650; }
.starter-card p { margin: 3px 0 7px; color: var(--muted); font-size: .68rem; line-height: 1.35; }
.starter-ideas .featured-idea { border-color: #618f85; }
.idea-tag { display: inline-block; margin-left: 3px; padding: 2px 4px; border-radius: 4px; background: #8ce3c51a; color: #b3efdb; font-size: .55rem; font-weight: 650; white-space: nowrap; vertical-align: middle; }
.idea-actions { display: flex; gap: 6px; margin-top: auto; }
.idea-actions button { flex: 1; min-width: 0; min-height: 42px; font-size: .75rem; padding: 6px; }
.idea-actions [data-idea] { border-color: #618f85; }
.idea-actions [aria-pressed="true"] { border-color: #f6c675; background: #4a3c26; }
.replace-notice { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; padding: 10px; border: 1px solid #9e8254; border-radius: 8px; background: #342f26; }
.replace-notice p { flex: 1 1 320px; margin: 0; font-size: .8rem; }
.replace-notice button { font-size: .8rem; }
.controls { position: sticky; top: 0; z-index: 8; padding: 8px 12px; gap: 5px 14px; margin-bottom: 10px; background: #1b2636f5; box-shadow: 0 4px 12px #080e1780; border-radius: 10px; }
.transport { gap: 8px; margin-right: auto; }
.primary { min-height: 44px; min-width: 86px; }
.position { min-width: 88px; max-width: 145px; font-size: .72rem; }
.controls > label { font-size: .7rem; gap: 4px; }
.controls select, .controls input[type="number"] { min-height: 42px; padding-block: 6px; }
.controls .field-with-unit { gap: 4px; font-size: .68rem; }
.controls #tempo { width: 62px; }
.controls .volume-label { width: 90px; }
.primary-files { display: flex; gap: 6px; }
.primary-files button { font-size: .75rem; padding: 8px 10px; }
#export-wav { border-color: var(--accent); }
.save-context { display: flex; flex: 1 1 100%; align-items: baseline; justify-content: space-between; gap: 6px 14px; min-width: 0; color: var(--muted); font-size: .67rem; }
#scope-label { flex: 0 0 auto; }
.save-notice { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 3px 10px; min-width: 0; }
#save-status { font-size: .67rem; white-space: normal; overflow-wrap: anywhere; }
#project-download-help { font-size: .64rem; }
.creation-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 8px; }
.creation-tabs { display: flex; gap: 5px; }
.creation-tabs button { min-height: 42px; font-size: .8rem; }
.creation-tabs [aria-selected="true"] { background: #324957; border-color: #8ce3c5; }
.current-project { min-width: 0; margin: 0; font-size: .8rem; font-weight: 600; color: #dce7f3; overflow-wrap: anywhere; text-align: right; }
.pattern-panel { padding: 12px; margin-bottom: 10px; }
.pattern-controls { gap: 10px; }
.pattern-controls label { font-size: .73rem; }
.pattern-controls button { font-size: .73rem; }
#arrangement-panel { margin-top: 10px; }
.song-slot button { min-width: 40px; min-height: 40px; }
.workspace .grid-toolbar { padding: 8px 14px 6px; }
.track-tabs { gap: 5px; }
.track-tabs button { min-width: 72px; font-size: .82rem; }
.track-tabs #track-drums[aria-selected="true"] { background: #c7b0f8; color: #291b42; border-color: #c7b0f8; }
.workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px 8px; }
.workspace-heading h2 { font-size: .85rem; }
.history-tools { flex-wrap: nowrap; gap: 5px; }
.history-tools button { font-size: .72rem; min-height: 42px; padding: 6px 10px; }
.note-tools { padding: 0 14px 8px; gap: 8px 18px; align-items: center; }
.note-tools > label { flex-direction: row; align-items: center; gap: 7px; font-size: .7rem; }
.note-tools select { min-height: 42px; padding: 5px 24px 5px 8px; font-size: .75rem; }
.selection-tools { flex-direction: row; align-items: center; flex-wrap: wrap; }
.length-controls { gap: 5px; }
.length-controls button, .length-field input { min-height: 42px; padding: 6px 9px; }
.length-field input { width: 54px; }
.grid-scroll { max-height: min(470px, 58vh); scroll-margin-top: 125px; }
.track-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 8px 14px; }
.track-actions button { min-height: 36px; font-size: .74rem; padding: 6px 10px; }
.track-actions > span { margin-left: auto; font-size: .68rem; color: var(--muted); }
.grid-footer { align-items: center; flex-wrap: wrap; padding: 9px 14px; gap: 6px 12px; font-size: .7rem; }
#note-count { white-space: normal; }
#editor-hint { flex: 1 1 100%; margin: 0; color: var(--muted); font-size: .73rem; }
.creation-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; padding: 10px 14px; border-top: 1px solid var(--line); background: #1b2b38; }
#creation-tip { flex: 1 1 240px; margin: 0; color: #cbd7e6; font-size: .76rem; line-height: 1.45; }
.creation-nudge button { min-height: 42px; padding: 7px 10px; font-size: .74rem; }
#tip-action { border-color: #618f85; }
#variation-help { flex: 1 1 100%; margin: 0; color: var(--muted); font-size: .68rem; }
.drum-tools { border-top: 0; padding: 2px 14px 10px; gap: 8px; }
.drum-tools p { margin: 0; color: var(--muted); font-size: .74rem; }
.drum-tools button { font-size: .75rem; min-height: 36px; }
.drum-cell, .drum-pitch { min-height: 44px; height: 44px; }
.drum-scroll { scroll-margin-top: 125px; }
.bar-tools, .music-helpers { border-top: 1px solid var(--line); padding: 2px 14px; }
.bar-tools summary, .music-helpers summary { font-size: .76rem; }
.bar-tools > .button-group { padding: 6px 0; }
.bar-tools > p, .file-options > p { font-size: .73rem; color: var(--muted); line-height: 1.5; margin: 6px 0 10px; }
.music-helpers summary span { color: var(--muted); font-size: .68rem; margin-left: 6px; }
.music-helpers .scale-tools, .music-helpers .scale-guide { padding-left: 0; padding-right: 0; }
.file-options { margin-top: 10px; padding: 2px 0; }
.file-options summary { font-size: .78rem; }
.file-options .button-group { align-items: center; padding: 6px 0; }
.feedback { margin: 8px 0 12px; }
.help { padding-top: 8px; }
@media (min-width: 1000px) {
    .workspace { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    .workspace > :not(.grid-toolbar):not(.workspace-heading) { grid-column: 1 / -1; min-width: 0; }
    .workspace .grid-toolbar { grid-column: 1; grid-row: 1; min-width: 0; }
    .workspace-heading { grid-column: 2; grid-row: 1; padding: 8px 14px 6px 0; }
    .workspace-heading h2 { white-space: nowrap; }
}
@media (max-width: 900px) {
    .controls { gap: 9px 12px; }
    .transport { margin-right: 0; }
    .primary-files { margin-left: auto; }
    .position { max-width: 105px; }
    .intro { max-width: 230px; }
    .save-context { flex-wrap: wrap; }
    .save-notice { justify-content: flex-start; }
}
@media (max-width: 700px) {
    .studio { padding: 12px 10px 24px; }
    .page-header { margin-bottom: 10px; gap: 4px 8px; }
    .home-link { margin-bottom: 0; }
    .badge { font-size: .62rem; padding: 4px 7px; }
    h1 { grid-column: 1 / -1; }
    .intro { grid-column: 1 / -1; max-width: none; text-align: left; font-size: .8rem; }
    .starting-ideas { margin-bottom: 10px; }
    .ideas-heading { gap: 8px; flex-wrap: wrap; }
    .ideas-heading > span { font-size: .68rem; }
    .starter-ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .starter-card { padding: 8px; }
    .starter-card h3 { font-size: .8rem; }
    .idea-tag { margin-left: 0; }
    .idea-actions { gap: 5px; }
    .idea-actions button { min-height: 44px; font-size: .73rem; padding: 6px 4px; }
    .controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 8px; gap: 7px 10px; border-radius: 8px; }
    .transport { gap: 8px; grid-column: 1; min-width: 0; }
    .transport .position { font-size: .65rem; max-width: 74px; min-width: 0; }
    .controls .primary { min-width: 74px; padding: 8px; }
    .controls > label { min-width: 0; }
    .controls > label:has(#tempo) { grid-column: 2; grid-row: 2; flex-direction: row; align-items: center; }
    .controls > label:has(#instrument) { grid-column: 1; grid-row: 2; flex-direction: row; align-items: center; }
    .controls #instrument { width: 100%; min-width: 0; font-size: .73rem; }
    .controls .volume-label { width: auto; grid-column: 2; grid-row: 1; grid-template-columns: 1fr auto; margin: 0; }
    .controls .volume-label input { margin: 0; height: 18px; }
    .primary-files { width: 100%; grid-column: 1 / -1; margin: 0; }
    .primary-files button { flex: 1; min-width: 0; min-height: 44px; font-size: .73rem; padding: 6px; }
    .save-context { grid-column: 1 / -1; gap: 4px; font-size: .65rem; }
    .save-notice { gap: 3px 8px; }
    #scope-label { flex-basis: 100%; }
    #project-download-help { font-size: .62rem; }
    .creation-heading { flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
    .creation-tabs { flex: 1 1 100%; }
    .creation-tabs button { flex: 1; }
    .current-project { text-align: left; font-size: .75rem; }
    .workspace .grid-toolbar { padding: 10px 9px 8px; flex-wrap: wrap; gap: 8px; }
    .track-tabs { flex: 1 1 100%; }
    .track-tabs button { flex: 1; min-width: 0; min-height: 44px; }
    .page-controls { margin-left: auto; font-size: .73rem; }
    .page-controls button { min-width: 42px; min-height: 40px; }
    .workspace-heading { padding: 0 9px 8px; align-items: start; gap: 7px; }
    #editor-hint { font-size: .68rem; }
    .workspace-heading h2 { font-size: .8rem; }
    .history-tools button { padding: 6px 8px; min-height: 44px; }
    .note-tools { padding: 0 9px 9px; gap: 8px; }
    .note-tools > label { flex-basis: auto; }
    .note-tools select { max-width: 115px; }
    .selection-tools { width: 100%; }
    .length-controls button, .length-field input { min-height: 44px; }
    .resize-handle { width: 20px; }
    .grid-scroll { min-height: 250px; max-height: 52vh; scroll-margin-top: 180px; }
    .track-actions { padding: 8px 9px; }
    .track-actions button { min-height: 44px; }
    .track-actions > span { margin-left: 0; }
    .grid-footer { padding: 9px; gap: 8px; font-size: .65rem; }
    .creation-nudge { padding: 10px 9px; }
    .creation-nudge button { min-height: 44px; }
    #creation-tip { flex-basis: 100%; }
    .drum-tools { padding: 2px 9px 10px; }
    .drum-tools .button-group { width: 100%; }
    .drum-tools button { min-height: 44px; }
    .drum-scroll { scroll-margin-top: 180px; }
    .bar-tools, .music-helpers { padding-inline: 9px; }
    .bar-tools summary, .music-helpers summary, .file-options summary { min-height: 44px; display: list-item; padding-block: 12px; }
    .feedback { gap: 5px; font-size: .75rem; }
    #save-status { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.creative-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 14px 10px; }
.creative-tools label { flex-direction: row; align-items: center; font-size: .72rem; gap: 6px; }
.creative-tools select { min-height: 36px; font-size: .75rem; padding-block: 6px; }
.creative-tools button { min-height: 36px; font-size: .74rem; padding: 6px 10px; }
.creative-tools > span { color: var(--muted); font-size: .68rem; }
.variation-comparison { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.variation-comparison > span { font-size: .7rem; color: var(--muted); }
.variation-comparison button { min-height: 36px; padding: 6px 10px; font-size: .72rem; }
.variation-comparison button[aria-pressed="true"] { border-color: var(--accent); background: #24433f; }
.move-controls { display: flex; gap: 5px; flex-wrap: wrap; }
.move-controls button { font-size: .72rem; }
.note-cell.entry-restricted:not(.is-current) { background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, #11192540 5px, #11192540 6px); }
.recovery-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; }
.recovery-tools > span { font-size: .73rem; color: var(--muted); }
.recovery-tools button { font-size: .75rem; }
@media (max-width: 700px) {
    .workspace-heading h2 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .history-tools { flex-wrap: nowrap; justify-content: flex-start; width: 100%; max-width: none; }
    .creative-tools { padding: 0 9px 10px; }
    .creative-tools button, .creative-tools select, .variation-comparison button { min-height: 44px; }
    .creative-tools > span { flex-basis: 100%; }
    .variation-comparison { padding-inline: 9px; }
    .move-controls { flex-basis: 100%; }
    .move-controls button { min-height: 44px; }
    .music-helpers .checkbox-label { font-size: .75rem; min-height: 44px; }
}

/* Keyboard scrolling leaves room for the roll's sticky beat and pitch labels. */
.grid-scroll, .drum-scroll { scroll-padding-top: 32px; scroll-padding-inline-start: 60px; }