/* Beat Writer interface: consolidated cascade; music glyph states remain engine-owned. */
html, body { overscroll-behavior-x: none; }
#musicalInput { overscroll-behavior-x: contain; touch-action: pan-y pinch-zoom; white-space: nowrap; }
.line-labels { position: sticky; left: 0px; z-index: 5; }
#fullURLPopup { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(424px, -24px + 100vw); max-height: calc(100dvh - 24px); overflow: auto; z-index: 1100; }
#fullURLPopupCheckboxes { width: 100%; align-items: center; }
#fullURLPopupTextFieldContainer { width: 100%; }
#fullURLPopupTextField { width: 100%; box-sizing: border-box; font-size: 16px; }
#shareStatus { font-size: 13px; min-height: 1.5em; text-align: center; margin: 8px 0px; }
#fullURLPopupCloseButton { padding: 4px; }
@media (max-width: 600px) {
  #fullURLPopup { padding: 16px; }
  #fullURLPopupCheckboxes { min-height: 44px; }
  .fullURLPopupCheckboxLabel { display: inline-flex; align-items: center; gap: 4px; }
}
:root { --ink: #111111; --accent: #e97722; --orange: #f48a2a; --cream: #eef1f3; --paper: #ffffff; --seafoam: #dbe2e6; --rim: #b1bdc5; --shadow: #11111128; }
* { box-sizing: border-box; }
body { background: none rgb(238, 241, 243); color: var(--ink); padding: 8px 12px; font-family: system-ui, sans-serif; }
#GrooveWriter { max-width: 1200px; min-width: 0px; margin: auto; padding: 0px 0px 16px; background: var(--paper); border: 2px solid var(--rim); border-radius: 8px; box-shadow: none; overflow: clip; font-family: system-ui, sans-serif; }
#LeftHandNav, #logoInSubdivision, #advancedEditAnchor, #undoButton, #view-edit-switch, #logoTextUpperLeft, #bottomButtonRow, #addMeasureButton, .closeMeasureButton { display: none !important; }
#modernHeader { display: flex; align-items: center; flex-wrap: wrap; }
.modernBrand { display: flex; align-items: center; gap: 12px; min-width: 230px; color: var(--ink); font-family: system-ui, sans-serif; font-weight: 700; font-style: normal; white-space: normal; line-height: 1.3; letter-spacing: 0px; }
button, select { font: 600 13px system-ui, sans-serif; color: var(--ink); }
#GrooveWriter button, #GrooveWriter select, dialog button, dialog select, #fullURLPopup button, #fullURLPopupCopyButton { min-height: 44px; padding: 9px 12px; border-width: 1px; border-style: solid; border-color: rgb(219, 226, 230) rgb(219, 226, 230) rgb(177, 189, 197); border-image: none; border-radius: 8px; background: rgb(255, 255, 255); box-shadow: none; cursor: pointer; }
#timeSigPopup button { min-height: 44px; padding: 9px 12px; border-width: 1px; border-style: solid; border-color: rgb(219, 226, 230) rgb(219, 226, 230) rgb(177, 189, 197); border-image: none; border-radius: 8px; box-shadow: none; cursor: pointer; }
#GrooveWriter button:hover, dialog button:hover { background: rgb(255, 255, 255); }
#GrooveWriter button:active, dialog button:active { transform: translateY(1px); border-bottom-width: 2px; }
#GrooveWriter button[aria-pressed="true"] { background: rgb(52, 67, 76); color: rgb(255, 255, 255); border-color: rgb(33, 78, 75); box-shadow: rgba(25, 62, 52, 0.25) 0px 2px 4px inset; }
#GrooveWriter .primaryAction { background: var(--accent); color: var(--ink); border-color: rgb(184, 29, 19); }
button:disabled { opacity: 0.45; cursor: default !important; }
button:focus-visible, select:focus-visible, input:focus-visible, [role="button"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
#upperLeft { display: none; }
#RightHandContent { position: relative; top: 0px; left: 0px; width: 100%; max-width: none; height: auto; overflow: visible; padding: 0px 26px 10px; }
#grooveMetadata { margin-top: 6px; }
#sheetMusicTextFields { grid-template-columns: 2.5fr 1fr 1.4fr auto; gap: 14px; align-items: end; background: none; padding: 0px; text-align: left; display: grid !important; }
#sheetMusicTextFields .sheetMusicTextField { display: flex; flex-direction: column; gap: 5px; min-width: 0px; margin: 0px; color: var(--ink); font: 700 11px system-ui, sans-serif; letter-spacing: 0.5px; }
#sheetMusicTextFields input[type="text"] { width: 100%; min-width: 0px; max-width: none; height: 38px; border: 1px solid rgb(219, 226, 230); border-radius: 5px; padding: 6px 10px; background: rgb(255, 255, 255); color: var(--ink); font: 15px system-ui, sans-serif; box-shadow: rgba(36, 66, 51, 0.047) 0px 2px 3px inset; }
#sheetMusicTextFields #KeyButton { position: static; margin: 0px; align-self: end; }
#scoreSizeButton { display: none; }
#sheetMusicDiv { background: rgb(255, 255, 255); border-radius: 0px; box-shadow: none; }
#svgTarget { max-width: 100%; margin: auto; background: transparent; overflow-x: auto; }
#svgTarget svg { max-width: 100%; background: transparent !important; }
#editingToolbar { top: 0px; z-index: 50; }
#divisionButtonContainer { display: flex; width: auto; align-items: flex-start; gap: 16px; flex-wrap: nowrap; margin: 0px; padding: 0px; }
.divisionGroup { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.controlHeading, .compactSubdivision { font: 800 10px system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
.subdivisionChoices { display: flex; gap: 4px; }
#divisionButtonContainer .left-button { width: auto; min-width: 48px; height: 52px; min-height: 52px; margin: 0px; border-width: 1px; border-style: solid; border-color: rgb(219, 226, 230) rgb(219, 226, 230) rgb(177, 189, 197); border-image: none; border-radius: 6px; background: rgb(255, 255, 255); color: var(--ink); cursor: pointer; box-shadow: white 0px 1px 0px inset; }
#divisionButtonContainer .left-button-content { padding: 3px 5px; font-size: 9px; line-height: 1.1; }
#divisionButtonContainer .buttonFraction { font-size: 22px; }
#divisionButtonContainer .buttonSelected { background: rgb(52, 67, 76); color: rgb(255, 255, 255); border-color: rgb(33, 78, 75); }
#divisionButtonContainer .left-button:has(#view-edit-switch) { display: none !important; }
#divisionButtonContainer #timeLabel { margin: 0px; min-width: 58px; }
.compactSubdivision { display: none; }
#playerControl1 { width: 100%; background: none !important; height: auto !important; }
#playerControlsRow1 { display: flex; align-items: center; gap: 10px; height: auto; min-height: 62px; flex-wrap: nowrap !important; background: none !important; }
.midiPlayImage.soundsLoading::before { display: inline-block; width: 22px; height: 22px; border-width: 3px; border-style: solid; border-color: white rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.4); border-image: none; border-radius: 50%; animation: 1s linear 0s infinite normal none running loadingSpin; vertical-align: middle; content: "" !important; }
@keyframes loadingSpin { 
  100% { transform: rotate(360deg); }
}
#tempoAndProgress1 { height: auto; flex: 1 1 0%; min-width: 0px; max-width: none; width: auto; }
.tempoRow { height: auto; min-height: 36px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tempoLabel { flex: 0 0 auto; text-align: left; white-space: nowrap; font: 800 10px system-ui, sans-serif; letter-spacing: 1px; width: auto !important; color: var(--ink) !important; }
#tempoTextField1 { width: 45px; height: 36px; border: 1px solid rgb(219, 226, 230); border-radius: 5px; background: rgb(238, 241, 243); font: 700 17px ui-monospace, monospace; text-align: center; margin: 0px; padding: 3px; color: var(--ink) !important; }
#tempoInput1 { width: 100%; flex: 0 0 100%; height: 20px; min-width: 0px; margin: 0px; accent-color: var(--accent); }
#playbackSettingsButton { white-space: normal; line-height: 1.2; max-width: 110px; font-size: 12px !important; padding: 5px 8px !important; }
#countInButton { white-space: normal; line-height: 1.2; max-width: 82px; min-width: 72px; font-size: 12px !important; padding: 5px 8px !important; }
#musicalInput { margin: 0px auto; text-align: left; overflow-x: auto; box-shadow: rgba(34, 59, 41, 0.07) 0px 2px 3px inset; width: max-content !important; max-width: 100% !important; }
#musicalInput.expanded { margin: 0px auto; background: rgb(238, 241, 243); border: 2px solid var(--rim); border-radius: 8px; text-align: left; overflow-x: auto; box-shadow: rgba(34, 59, 41, 0.07) 0px 2px 3px inset; width: max-content !important; max-width: 100% !important; }
#measureContainer { margin: 0px; }
.staff-container { display: inline-block; vertical-align: top; background: rgb(238, 241, 243); border-right: 2px solid var(--rim); }
.barCaption { position: sticky; left: 0px; background: rgb(238, 241, 243); color: var(--ink); padding: 7px 12px; font: 700 11px ui-monospace, monospace; letter-spacing: 1px; }
#musicalInput .line-labels .hh-label, #musicalInput .line-labels .tom-label, #musicalInput .line-labels .snare-label, #musicalInput .line-labels .kick-label { margin: 0px; padding: 0px 8px; display: flex; align-items: center; line-height: 1; box-sizing: border-box; text-align: left; }
.line-labels { width: 100px; min-width: 100px; max-width: 100px; font: 600 16px system-ui, sans-serif; box-shadow: rgba(37, 70, 51, 0.082) 4px 0px 6px; background: rgb(238, 241, 243) !important; }
#musicalInput .hi-hat, #musicalInput .snare, #musicalInput .kick, #musicalInput .tom, #musicalInput .sticking, #musicalInput .counting { width: 42px; min-width: 42px; height: 44px; margin: 0px 2px; border: 1px solid rgb(219, 226, 230); border-radius: 6px; vertical-align: top; background: rgb(255, 255, 255); box-shadow: none; cursor: pointer; }
#musicalInput .stickings-container, #musicalInput .countings-container { height: 44px; }
#musicalInput .note_part { top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0px; line-height: 1; }
#musicalInput .note_part:not(.tom_circle):not(.snare_circle):not(.kick_circle) { width: max-content; height: max-content; }
#musicalInput .hh_open, #musicalInput .hh_close, #musicalInput .hh_accent { top: 2px; left: 50%; transform: translateX(-50%); font-size: 11px; }
.space_between_note_groups { width: 10px; }
#musicalInput:not(.hasCounts) .countings-container, #musicalInput:not(.hasCounts) .countings-label, #musicalInput:not(.hasStickings) .stickings-container, #musicalInput:not(.hasStickings) .stickings-label, #musicalInput:not(.hasToms) .toms-container, #musicalInput:not(.hasToms) .tom-label { display: none !important; }
#GrooveWriter .playback-step { background: rgb(244, 138, 42) !important; box-shadow: rgb(184, 90, 18) 0px 0px 0px 2px inset !important; }
.editActions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.editActions { grid-area: 1 / 2; }
#laneOptions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; grid-column: 1 / -1; padding: 10px 0px 0px; background: none; border-top: 1px solid rgba(219, 226, 230, 0.333); }
#laneOptions button[role="switch"], #countInButton { position: relative; padding-left: 32px !important; }
#laneOptions button[role="switch"]::before, #countInButton::before { content: ""; position: absolute; left: 10px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: rgb(140, 178, 165); border: 1px solid rgb(177, 189, 197); border-radius: 50%; box-shadow: rgba(39, 60, 41, 0.125) 0px 1px 2px inset; }
#laneOptions button[aria-checked="true"]::before, #countInButton[aria-checked="true"]::before { background: rgb(244, 138, 42); border-color: rgb(238, 241, 243); box-shadow: rgba(238, 174, 115, 0.333) 0px 0px 5px; }
#editHint, #editorStatus { font: 12px system-ui, sans-serif; color: rgb(33, 78, 75); }
#editHint { flex-basis: 100%; order: 3; }
dialog { width: min(420px, -24px + 100vw); max-height: calc(100dvh - 32px); overflow: auto; margin: auto; padding: 22px; background: var(--paper); color: var(--ink); border: 2px solid var(--rim); border-radius: 16px; box-shadow: rgba(23, 55, 45, 0.314) 0px 18px 55px; font: 14px system-ui, sans-serif; }
dialog::backdrop { background: rgba(23, 55, 45, 0.4); }
dialog h2, dialog h3 { margin: 0px 0px 18px; font: 700 22px system-ui, sans-serif; }
dialog > button:last-child { display: block; margin: 16px 0px 0px auto; }
.swingRow { display: flex; align-items: center; gap: 12px; margin: 18px 0px; color: var(--ink); }
.swingLabel { font: 800 11px system-ui, sans-serif; }
.swingOutput { width: auto; color: var(--ink); font: 14px ui-monospace, monospace; min-width: 40px; }
.swingInput { flex: 1 1 0%; min-width: 0px; accent-color: var(--accent); }
.kitControl { flex: 0 0 156px; min-width: 0px; text-align: center; }
.kitHeading { display: block; font: 800 10px system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
#GrooveWriter #kitSelector { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 44px; padding: 6px; font-size: 11px; }
.kitLever { position: relative; flex: 0 0 34px; height: 18px; border: 1px solid var(--rim); border-radius: 12px; background: rgb(52, 67, 76); box-shadow: rgba(0, 0, 0, 0.333) 0px 2px 3px inset; }
.kitLever span { position: absolute; width: 14px; height: 14px; top: 1px; left: 1px; border: 1px solid rgb(184, 90, 18); border-radius: 50%; background: var(--orange); box-shadow: rgba(0, 0, 0, 0.267) 0px 1px 2px; transition: transform 0.15s; }
#kitSelector[aria-checked="true"] .kitLever span { transform: translateX(16px); }
#kitSelector[aria-checked="false"] .kitJazz, #kitSelector[aria-checked="true"] .kitOriginal { opacity: 0.55; }
#kitStatus { display: block; min-width: 0px; overflow-wrap: anywhere; font-size: 11px; line-height: 1.3; color: var(--ink); margin-top: 4px; }
@media (max-width: 600px) {
  .kitControl { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; text-align: left; }
  .kitHeading { flex: 0 0 auto; margin: 0px; }
  #GrooveWriter #kitSelector { width: 156px; flex: 0 0 156px; }
  #kitStatus { flex: 1 1 0%; margin: 0px; }
}
@media (prefers-reduced-motion: reduce) {
  .kitLever span { transition: none; }
}
.noteContextMenu > ul.list, .modernNoteMenu { max-height: calc(100dvh - 24px); max-width: calc(-24px + 100vw); overflow-y: auto; background: var(--paper); color: var(--ink); border: 2px solid var(--rim); border-radius: 9px; box-shadow: rgba(30, 59, 50, 0.333) 0px 8px 28px; font: 14px system-ui, sans-serif; padding: 5px; z-index: 1100; }
.noteContextMenu > ul.list li, .modernNoteMenu li { min-height: 44px; padding: 11px 14px; line-height: 1.4; border-bottom: 1px solid rgb(217, 186, 136); cursor: pointer; }
.modernNoteMenu li:hover, .modernNoteMenu li.menuChecked { background: rgb(238, 241, 243); }
.modernNoteMenu li.selectedSound { background: rgb(52, 67, 76); color: rgb(255, 255, 255); }
.modernNoteMenu li.selectedSound::after { content: " ✓"; float: right; }
.modernNoteMenu li:last-child { border-bottom: 0px; }
#downloadDialog #downloadContextMenu, #noteOptionsDialog .sheetMenu { max-width: none; max-height: none; margin: 0px; padding: 0px; box-shadow: none; border: 0px; background: transparent; list-style: none; display: block !important; position: static !important; inset: auto !important; width: 100% !important; }
#noteOptionsDialog { display: none; }
#noteOptionsDialog[open] { display: flex; flex-direction: column; gap: 0px; position: fixed; top: auto; bottom: 0px; width: 100%; max-width: none; max-height: calc(100dvh - 24px); margin: 0px; border-radius: 18px 18px 0px 0px; padding: 18px 20px max(18px, env(safe-area-inset-bottom)); overflow: hidden; }
#noteOptionsDialog h2 { flex-shrink: 0; }
#noteOptionsDialog .sheetMenu { overflow-y: auto; min-height: 0px; }
#noteOptionsDialog > button:last-child { flex-shrink: 0; width: 100%; }
#timeSigPopup, #fullURLPopup, #metronomeAutoSpeedupConfiguration { background: var(--paper); color: var(--ink); border: 2px solid var(--rim); border-radius: 12px; box-shadow: rgba(25, 62, 52, 0.25) 0px 12px 40px; box-sizing: border-box; }
#fullURLPopupTitle, #fullURLPopupSubTitle, #fullURLPopupSubSubTitle, #timeSigPopupTitle, #fullURLPopup a { color: var(--ink); }
#fullURLPopup input[type="text"], #fullURLPopup textarea, #timeSigPopup select { background: rgb(255, 255, 255); color: var(--ink); border: 1px solid rgb(219, 226, 230); border-radius: 5px; padding: 8px; }
#grooveListWrapper { background: var(--paper); border: 2px solid var(--rim); border-radius: 10px; max-width: calc(-24px + 100vw); box-shadow: rgba(23, 55, 45, 0.267) 0px 8px 24px; }
.grooveListUL { background: var(--paper); color: var(--ink); }
.grooveListHeaderLI { background: rgb(52, 67, 76); color: rgb(255, 255, 255); }
.grooveListLI:hover { background: var(--seafoam); }
.presentationMode #musicalInput, .presentationMode #soundPracticeControls, .presentationMode #grooveMetadata, .presentationMode #divisionButtonContainer, .presentationMode #TopNav { display: none !important; }
.presentationMode #sheetMusicDiv { padding: 24px 12px; }
@media (max-width: 1050px) {
  #divisionButtonContainer { justify-content: center; }
  #playerControlsRow1 { max-width: none; margin: auto; }
  #tempoAndProgress1 { min-width: 90px; }
}
@media (max-width: 600px) {
  body { padding: 0px; background: var(--paper); }
  #GrooveWriter { border: 0px; border-radius: 0px; box-shadow: none; padding-bottom: 12px; }
  .modernBrand { min-width: 0px; overflow-wrap: anywhere; }
  .modernActions button { flex: 1 1 0%; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; line-height: 1.25; padding: 7px 6px !important; font-size: 11px !important; }
  #RightHandContent { padding: 0px 10px 8px; }
  #grooveMetadata { margin-top: 10px; }
  #sheetMusicTextFields { grid-template-columns: 1fr 1fr; gap: 8px; }
  #sheetMusicTextFields .sheetMusicTextField:first-child { grid-column: 1 / -1; }
  #sheetMusicTextFields #KeyButton { display: block; justify-self: end; }
  #sheetMusicTextFields input[type="text"] { height: 34px; font-size: 16px; }
  #sheetMusicTextFields .sheetMusicTextField { font-size: 10px; }
  #scoreSizeButton { display: block; margin: 6px 0px 0px auto; min-height: 30px !important; padding: 3px 8px !important; font-size: 11px !important; border-bottom-width: 1px !important; }
  #sheetMusicDiv { max-height: 145px; overflow: auto; }
  #sheetMusicDiv.expandedScore { max-height: none; }
  #divisionButtonContainer { justify-content: flex-start; gap: 14px; overflow: visible; width: 100%; }
  .divisionGroup:has(.subdivisionChoices) { display: none; }
  .compactSubdivision { display: flex; flex: 1 1 0%; flex-direction: column; gap: 5px; }
  .compactSubdivision select { width: 100%; height: 44px; text-transform: none; font-size: 14px; }
  #editingToolbar #divisionButtonContainer .left-button { min-width: 58px; }
  #playerControlsRow1 { width: 100%; gap: 7px; min-height: 54px; }
  #tempoAndProgress1 { min-width: 55px; flex: 1 1 0%; }
  #tempoTextField1 { width: 40px; height: 28px; font-size: 16px; }
  .tempoLabel { font-size: 9px; }
  .tempoRow { min-height: 28px; gap: 3px; }
  #tempoInput1 { height: 16px; }
  #playbackSettingsButton { width: 69px; max-width: 69px; font-size: 10px !important; }
  #countInButton { width: 78px; min-width: 78px; max-width: 78px; padding-left: 23px !important; font-size: 10px !important; }
  #countInButton::before { left: 6px; width: 10px; height: 10px; margin-top: -5px; }
  .editActions { grid-area: auto / 1; }
  .editActions button { flex: 1 1 0%; font-size: 12px !important; padding: 7px !important; }
  #laneOptions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding-top: 10px; }
  #laneOptions button { font-size: 12px !important; padding-right: 5px !important; }
  #editorStatus, #editHint { grid-column: 1 / -1; margin: 0px; font-size: 11px; }
  .line-labels { font-size: 14px; width: 84px; min-width: 84px; max-width: 84px; }
  dialog { padding: 18px; }
  .presentationMode #sheetMusicDiv { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .midiPlayImage.soundsLoading::before { animation: auto ease 0s 1 normal none running none; }
}
@media (max-height: 500px) and (min-width: 601px) and (max-width: 950px) {
  .divisionGroup:has(.subdivisionChoices) { display: none; }
  .compactSubdivision { display: flex; flex-direction: column; gap: 5px; }
  #divisionButtonContainer { gap: 10px; }
  .compactSubdivision select { height: 44px; min-height: 44px; }
  #playerControlsRow1 { min-height: 54px; }
}
#GrooveWriter #tempoInput1 { appearance: none; background: transparent; border: 0px; box-shadow: none; padding: 0px; }
#tempoInput1::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: rgb(52, 67, 76); }
#tempoInput1::-webkit-slider-thumb { appearance: none; width: 24px; height: 24px; margin-top: -8px; border: 2px solid rgb(170, 80, 17); border-radius: 50%; background: var(--orange); }
#tempoInput1:focus-visible { outline: rgb(52, 67, 76) solid 2px; outline-offset: 4px; }
#modernHeader { background: rgb(255, 255, 255); border-bottom: 1px solid rgb(219, 226, 230); gap: 8px; padding: 10px 18px; }
.modernBrand { font-size: 16px; flex: 1 1 100%; }
.modernActions { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
#GrooveWriter .modernActions button:not(.primaryAction) { border-color: transparent; background: transparent; box-shadow: none; padding: 6px 8px; }
#editingToolbar, #playbackControls { background: rgb(246, 248, 249); border: 1px solid rgb(219, 226, 230); border-radius: 6px; box-shadow: none; }
#editingToolbar { position: static; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); }
#editingToolbar h2 { grid-column: 1 / -1; }
#editingToolbar h2, #playbackControls h2 { margin: 0px; font: 700 11px system-ui, sans-serif; text-transform: uppercase; letter-spacing: 1px; color: rgb(68, 83, 94); }
#editingToolbar #divisionButtonContainer { justify-content: flex-start; }
#helpAnchor { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 10px; font: 700 12px system-ui, sans-serif; cursor: pointer; border-radius: 5px; color: var(--ink) !important; }
#playbackControls #midiPlayer { position: static; width: 100%; height: auto; border: 0px; background: none; padding: 0px; }
#playbackControls .midiPlayImage { width: 64px; height: 64px; flex: 0 0 64px; line-height: 60px; border: 2px solid rgb(184, 90, 18); border-radius: 50%; background: var(--orange); color: rgb(17, 17, 17); cursor: pointer; font-size: 26px; }
#playbackControls .midiPlayImage::before { color: rgb(17, 17, 17) !important; }
#tempoAndProgress1 { display: flex; align-items: center; gap: 10px; }
#tempoAndProgress1 .tempoRow { flex: 0 0 auto; }
#tempoAndProgress1 #tempoAdjustments { margin-top: 0px; flex: 1 1 0%; }
#soundPracticeControls { display: flex; flex-wrap: wrap; align-items: center; border-top: 1px solid rgb(219, 226, 230); }
#soundPracticeControls .kitControl { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; text-align: left; }
#soundPracticeControls .kitHeading { margin: 0px; font-size: 10px; }
#GrooveWriter #soundPracticeControls #kitSelector { width: 156px; flex: 0 0 156px; }
#soundPracticeControls #kitStatus { display: none; }
#soundPracticeControls #playbackSettingsButton { margin-left: auto; max-width: 120px; min-height: 44px; }
#soundPracticeControls #countInButton { min-width: 120px; max-width: none; white-space: nowrap; }
.metronomeSelect { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; }
#soundPracticeControls .swingRow { display: flex; align-items: center; flex: 1 1 160px; min-width: 160px; gap: 6px; margin: 0px; }
#soundPracticeControls .swingLabel, #soundPracticeControls .swingOutput { font-size: 11px; width: auto; white-space: nowrap; color: var(--ink) !important; }
#soundPracticeControls .swingInput { flex: 1 1 0%; min-width: 65px; width: 0px; }
#metronomeOptionsAnchor { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; padding: 8px; border: 1px solid var(--rim); border-radius: 5px; }
#musicalInput { border: 1px solid rgb(219, 226, 230); border-radius: 4px; background: rgb(255, 255, 255) !important; }
#musicalInput .barCaption { background: rgb(241, 244, 246); color: var(--ink); border-bottom: 1px solid rgb(219, 226, 230); }
#sheetMusicDiv { border: 0px; padding: 4px 0px; margin: 4px 0px; }
.presentationMode #playbackControls h2 { display: none; }
.presentationMode #editingToolbar { display: none !important; }
@media (max-width: 1050px) {
  #editingToolbar { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  #editingToolbar { grid-template-columns: 1fr 1fr; }
  #editingToolbar #divisionButtonContainer { grid-column: 1 / -1; }
  #editingToolbar { position: static; }
  #tempoAndProgress1 { display: block; }
  #tempoAndProgress1 #tempoAdjustments { margin-top: 4px; }
  #soundPracticeControls { display: grid; }
  #soundPracticeControls .kitControl { grid-area: 1 / 1; gap: 4px; }
  #soundPracticeControls .kitHeading { display: none; }
  #soundPracticeControls #countInButton { grid-area: 1 / 2; min-width: 110px; width: 110px; font-size: 11px !important; }
  .metronomeSelect { grid-area: 2 / 1 / auto / -1; justify-content: space-between; }
  #soundPracticeControls .swingRow { grid-area: 3 / 1 / auto / -1; min-height: 44px; }
  #soundPracticeControls #playbackSettingsButton { grid-area: 4 / 1 / auto / -1; width: 100%; max-width: none; }
  #modernHeader { padding: 8px; }
  .modernBrand { font-size: 15px; }
  .modernActions { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); width: 100%; }
  .modernActions button, #helpAnchor { width: 100%; min-width: 0px; text-align: center; }
}

.line-labels .countings-label, .line-labels .stickings-label { height: 44px; line-height: 44px; padding: 0px 8px; font-size: 10px; }
#draftRecovery { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 12px; padding: 12px 14px; border: 1px solid rgb(219, 226, 230); border-radius: 8px; background: rgb(238, 241, 243); color: var(--ink); }
.draftRecoveryMessage { flex: 1 1 200px; min-width: 0px; line-height: 1.5; }
#draftRecovery a { display: inline-block; color: rgb(155, 37, 23); font-weight: 700; text-underline-offset: 3px; }
#draftRecovery button { flex: 0 0 auto; white-space: nowrap; margin-left: auto; }
#tempoAdjustments { display: flex; align-items: center; gap: 7px; width: 100%; min-width: 0px; margin-top: 8px; }
#GrooveWriter #tempoAdjustments button { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 5px; font-size: 15px; white-space: nowrap; }
#tempoAdjustments #tempoInput1 { flex: 1 1 0px; width: 0px; height: 24px; min-width: 0px; }
@media (max-width: 600px) {
  #tempoAdjustments { grid-column: 1 / -1; margin-top: 0px; }
  #draftRecovery { gap: 8px 12px; }
  .draftRecoveryMessage { flex-basis: 170px; }
}
#musicalInput .staff-container { display: block; width: max-content; margin: 0px; border-right: 0px; scroll-margin-top: 240px; }
#musicalInput .staff-container + .staff-container { border-top: 10px solid var(--cream,#ffffff); }
#musicalInput .barCaption { display: flex; align-items: center; gap: 8px; width: var(--bar-heading-width,100%); max-width: 100%; box-sizing: border-box; padding: 6px 10px; }
.barHeading { flex: 1 1 0%; }
#musicalInput .barCaption button { min-height: 44px; padding: 6px 12px; font-size: 12px; letter-spacing: 0px; }
#playbackSettingsDialog #metronomeOptionsAnchor { display: none; }
.advancedMetronomeField { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-top: 18px; }
.advancedMetronomeField input { width: 22px; height: 22px; accent-color: var(--orange); }
.advancedMetronomeField select { flex: 1 1 0%; min-height: 44px; min-width: 0px; }
#playbackSettingsDialog p { margin: 7px 0px 18px; color: rgb(68, 83, 94); line-height: 1.5; }
#metronomeChoiceDialog { width: 320px; }
#metronomeChoiceDialog .metronomeChoice { display: block; width: 100%; margin: 7px 0px; text-align: left; }
#metronomeChoiceDialog .metronomeChoice[aria-pressed="true"] { background: rgb(52, 67, 76); color: white; }
#metronomeChoiceDialog .metronomeChoice[aria-pressed="true"]::before { content: "✓ "; }
#GrooveWriter #metronomeSelect { min-height: 44px; width: 145px; text-align: left; font-size: 12px; }
@media (max-width: 600px) {
  #GrooveWriter #metronomeSelect { flex: 1 1 0%; max-width: 200px; }
}
#GrooveWriter .modernActions button[aria-pressed="true"] { background: rgb(52, 67, 76); color: rgb(255, 255, 255); border-color: rgb(52, 67, 76); }
#timeSigPopup { transform: translate(-50%, -50%); max-width: calc(-24px + 100vw); max-height: calc(100dvh - 24px); overflow: auto; z-index: 1000; position: fixed !important; top: 50% !important; left: 50% !important; margin: 0px !important; }
#musicalInput .hi-hat-container, #musicalInput .snare-container, #musicalInput .kick-container, #musicalInput .toms-container { height: 44px; }
#musicalInput .line-labels .hh-label, #musicalInput .line-labels .snare-label, #musicalInput .line-labels .kick-label, #musicalInput .line-labels .tom-label { height: 44px; }
#GrooveWriter #addBarControl { min-height: 48px; white-space: nowrap; }
#musicalInput .staff-container { margin-inline: auto; }
@media (max-width: 600px) {
  #editingToolbar #divisionButtonContainer { gap: 8px; }
  .compactSubdivision { order: 1; min-width: 0px; }
  #GrooveWriter #addBarControl { min-height: 44px; padding: 6px; font-size: 12px; }
}
#timeSigPopup button { font-weight: 700; color: rgb(17, 17, 17) !important; background: rgb(255, 255, 255) !important; border: 1px solid rgb(177, 189, 197) !important; }
#timeSigPopup #timeSigPopupOK { background: var(--orange) !important; border-color: rgb(170, 80, 17) !important; }
#musicalInput.scrollableBars { position: relative; max-height: max(var(--complete-bar-height,440px),min(55dvh,560px)); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
#musicalInput.scrollableBars .staff-container { scroll-margin-top: 8px; }
@media (max-width: 600px) {
  #musicalInput.scrollableBars { max-height: max(var(--complete-bar-height,440px),50dvh); }
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  body { padding: 4px 10px; }
  #modernHeader { flex-wrap: nowrap; padding: 5px 12px; }
  .modernBrand { flex: 1 1 0%; font-size: 14px; }
  .modernActions { flex: 0 0 auto; gap: 2px; }
  #GrooveWriter .modernActions button, #helpAnchor { min-height: 34px; font-size: 11px; padding: 5px 7px; }
  #RightHandContent { padding: 0px 16px 6px; }
  #playbackControls #playerControlsRow1 { min-height: 52px; gap: 8px; }
  #playbackControls .midiPlayImage { width: 52px; height: 52px; flex-basis: 52px; line-height: 48px; font-size: 24px; }
  #GrooveWriter #soundPracticeControls button { min-height: 34px; padding: 4px 7px; }
  #GrooveWriter #metronomeSelect { min-height: 34px; width: 135px; }
  #GrooveWriter #tempoAdjustments button { height: 34px; min-height: 34px; flex-basis: 36px; width: 36px; }
  #grooveMetadata { margin-top: 3px; }
  #sheetMusicTextFields { gap: 8px; }
  #sheetMusicTextFields .sheetMusicTextField { flex-direction: row; align-items: center; gap: 6px; }
  #sheetMusicTextFields input[type="text"] { height: 30px; font-size: 13px; padding: 3px 6px; }
  #sheetMusicDiv { margin: 2px 0px; padding: 0px; }
  #musicalInput .hi-hat, #musicalInput .snare, #musicalInput .kick, #musicalInput .tom, #musicalInput .sticking, #musicalInput .counting { width: 36px; min-width: 36px; height: 36px; margin: 0px 1px; }
  #musicalInput .hi-hat-container, #musicalInput .snare-container, #musicalInput .kick-container, #musicalInput .toms-container, #musicalInput .stickings-container, #musicalInput .countings-container { height: 36px; }
  #musicalInput .line-labels .hh-label, #musicalInput .line-labels .tom-label, #musicalInput .line-labels .snare-label, #musicalInput .line-labels .kick-label, #musicalInput .line-labels .stickings-label, #musicalInput .line-labels .countings-label { height: 36px; }
  #musicalInput .line-labels { font-size: 14px; }
  #musicalInput.scrollableBars { max-height: var(--complete-bar-height,380px); }
  #musicalInput .barCaption button { min-height: 32px; font-size: 11px; padding: 4px 8px; }
  #musicalInput .barCaption { padding: 4px 8px; }
  #GrooveWriter #editingToolbar button, #editingToolbar #groovesAnchor { min-height: 34px; padding: 4px 8px; font-size: 11px; }
  #editingToolbar .left-button { min-height: 44px; }
  #GrooveWriter #addBarControl { min-height: 44px; }
}
#modernHeader #TopNav { display: none !important; }
#soundPracticeControls #kitStatus[data-error="true"] { display: block; max-width: 240px; color: rgb(155, 37, 23); }
#swingInput1 { -webkit-appearance: none; appearance: none; height: 24px; border: 0px; padding: 0px; margin: 0px; touch-action: none; background: transparent !important; }
#swingInput1::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: rgb(52, 67, 76); }
#swingInput1::-webkit-slider-thumb { appearance: none; width: 24px; height: 24px; margin-top: -8px; border: 2px solid rgb(170, 80, 17); border-radius: 50%; background: var(--orange); }
#swingInput1:disabled { opacity: 0.45; }
#noteOptionsDialog[open] { height: auto; overscroll-behavior: contain; }
#noteOptionsDialog .sheetMenu { flex: 1 1 auto; touch-action: pan-y; overscroll-behavior: contain; }
@media (max-width: 600px), (pointer: coarse) {
  #swingInput1 { height: 44px; }
}
#sheetMusicTextFields { padding-top: 6px; }
#editingToolbar > h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#playbackControls > h2 { display: flex; align-items: center; }
#GrooveWriter #editingToolbar .controlTipsButton, #GrooveWriter #playbackControls .controlTipsButton { width: 24px; min-height: 24px; height: 24px; padding: 0px; border-radius: 50%; font: 700 13px system-ui, sans-serif; }
.controlTipsDialog li { margin-bottom: 12px; line-height: 1.5; }
.controlTipsDialog ul { margin: 0px; padding-left: 20px; }
@media (pointer: coarse) {
  #GrooveWriter #editingToolbar .controlTipsButton, #GrooveWriter #playbackControls .controlTipsButton { width: 44px; height: 44px; min-height: 44px; }
}
@media screen and (max-width: 600px) {
  #GrooveWriter #sheetMusicDiv.expandedScore #svgTarget svg { width: 150%; max-width: none; height: auto; margin: 0px; }
  #sheetMusicDiv.expandedScore #svgTarget { overscroll-behavior-x: contain; }
}
#modernHeader { position: relative; }
.beatwriterHome { position: absolute; top: 8px; left: 12px; width: 40px; height: 40px; }
.beatwriterLogo { display: block; width: 100%; height: 100%; }
.modernBrand { padding-left: 48px; padding-right: 0px; min-height: 40px; }
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  #modernHeader { padding-right: 12px; }
  .modernBrand { padding-left: 42px; padding-right: 0px; min-height: 0px; }
  .beatwriterHome { top: 4px; left: 10px; width: 36px; height: 36px; }
}
#notationKeyDialog { width: min(1100px, -24px + 100vw); }
.notationKeyScore { overflow-x: auto; overscroll-behavior-x: contain; }
.notationKeyScore svg { display: block; width: 100%; min-width: 900px; height: auto; }
#sheetMusicTextFields button#LegendLabel { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 8px; border: 1px solid var(--rim); border-radius: 8px; background: var(--paper); color: var(--ink); cursor: pointer; }
@media (pointer: coarse) {
  #sheetMusicTextFields button#LegendLabel { min-width: 44px; min-height: 44px; }
}
.beatwriterHome:focus-visible .beatwriterLogo { outline: rgb(236, 121, 31) solid 3px; outline-offset: 3px; border-radius: 8px; }
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  #sheetMusicTextFields button#LegendLabel { min-height: 30px; padding: 5px 8px; }
}
#editingToolbar, #playbackControls { padding: 6px 8px; margin: 5px 0px; }
#playbackControls #midiPlayer { margin: 2px 0px; }
#soundPracticeControls { gap: 8px; padding-top: 4px; }
.rowToggles { display: grid; grid-template-columns: auto repeat(3, minmax(0px, 1fr)); align-items: center; gap: 4px; }
.rowToggles .controlHeading { margin: 0px; font-size: 10px; white-space: nowrap; }
#GrooveWriter #laneOptions button { min-width: 0px; padding: 5px 7px; }
#laneOptions > button { align-self: stretch; }
#metronomeChoiceDialog #playbackSettingsButton { width: 100%; margin: 12px 0px 0px; }
@media (max-width: 1050px) and (min-width: 601px) {
  #editingToolbar { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); }
  #editingToolbar #divisionButtonContainer { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  #soundPracticeControls { grid-template-columns: minmax(0px, 1fr) auto; gap: 4px 6px; }
  #soundPracticeControls .swingRow { grid-row: 3; }
  .rowToggles { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
  .rowToggles .controlHeading { grid-column: 1 / -1; }
  #GrooveWriter #laneOptions button { font-size: 11px; }
  #GrooveWriter #laneOptions button::before { width: 8px; height: 8px; margin-right: 4px; }
}
@media (hover: hover) and (pointer: fine) {
  #GrooveWriter #soundPracticeControls button { min-height: 32px; padding: 4px 7px; }
  #GrooveWriter #editingToolbar button, #editingToolbar #groovesAnchor { min-height: 32px; padding: 4px 7px; }
  #editingToolbar .left-button, #GrooveWriter #addBarControl { min-height: 40px; }
}
@media (max-width: 600px), (pointer: coarse) {
  #GrooveWriter #soundPracticeControls button, #GrooveWriter #editingToolbar button, #editingToolbar #groovesAnchor { min-height: 44px; }
}
@media (min-width: 601px) {
  #musicalInput:not(.hasToms) .toms-container, #musicalInput:not(.hasToms) .tom-label { pointer-events: none; display: block !important; visibility: hidden !important; }
}
@media (min-width: 1100px) {
  #playbackControls { grid-template-columns: minmax(340px, 0.9fr) minmax(0px, 1.3fr); gap: 4px 12px; align-items: center; }
  #playbackControls > h2 { grid-column: 1 / -1; }
  #playbackControls #playerControlsRow1 { width: 100%; }
  #playbackControls #tempoAndProgress1 { width: 100%; }
  #soundPracticeControls { border-top: 0px; border-left: 1px solid rgb(219, 226, 230); padding: 0px 0px 0px 12px; display: grid; grid-template-columns: auto auto auto; justify-content: space-between; gap: 5px 10px; }
  #soundPracticeControls .kitControl, #soundPracticeControls .metronomeSelect, #soundPracticeControls #countInButton { grid-row: 1; }
  #soundPracticeControls .kitHeading { display: none; }
  #soundPracticeControls .metronomeSelect { justify-content: flex-start; }
  #soundPracticeControls .swingRow { grid-area: 2 / 1 / auto / -1; width: 100%; max-width: none; }
  #GrooveWriter #metronomeSelect { width: 120px; }
  #soundPracticeControls #countInButton { min-width: 110px; }
  #editingToolbar { flex-wrap: wrap; }
  #editingToolbar > h2 { flex: 0 0 100%; }
  #editingToolbar #divisionButtonContainer { flex: 0 0 auto; width: auto; margin: 0px; order: 1; }
}
#playbackControls { display: block; }
#playbackControls #midiPlayer { display: none; }
.sketchPlayback { display: grid; grid-template-columns: minmax(240px, 1.3fr) auto minmax(160px, 1fr) 240px; gap: 16px; align-items: center; margin-top: 6px; }
#playbackControls #tempoAndProgress1 { flex-wrap: wrap; min-width: 0px; }
#playbackControls #tempoAndProgress1 .tempoRow { width: 100%; display: flex; align-items: center; }
#playbackControls #tempoAndProgress1 #tempoAdjustments { flex: 1 1 100%; width: 100%; }
#playbackControls #soundPracticeControls { display: flex; flex-direction: column; align-items: stretch; gap: 5px; border: 0px; padding: 0px; }
#playbackControls #soundPracticeControls .kitControl { justify-content: flex-end; }
#playbackControls #soundPracticeControls .kitHeading { display: none; }
#playbackControls #soundPracticeControls .metronomeSelect { justify-content: space-between; }
#playbackControls #soundPracticeControls #countInButton { align-self: stretch; width: 100%; margin: 0px; }
#playbackControls .sketchPlayback > .swingRow { flex-wrap: wrap; margin: 0px; min-width: 0px; }
#playbackControls .sketchPlayback > .swingRow .swingLabel { width: auto; }
#playbackControls .sketchPlayback > .swingRow .swingOutput { width: auto; }
#playbackControls .sketchPlayback > .swingRow .swingInput { width: 100%; flex: 0 0 100%; min-width: 0px; }
#editingToolbar { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
#editingToolbar #divisionButtonContainer.sketchEditGroups { display: grid; gap: 16px; width: 100%; margin: 0px; align-items: stretch; }
.sketchEditGroups > * + * { border-left: 1px solid rgb(219, 226, 230); padding-left: 16px; }
#editingToolbar .sketchLength { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
#editingToolbar .sketchSubdivisions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
#editingToolbar .sketchSubdivisions .subdivisionChoices { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 4px; }
#editingToolbar .sketchSubdivisions .left-button { width: 100%; min-width: 0px; margin: 0px; }
#editingToolbar #laneOptions.sketchRows { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0px; padding-top: 0px; }
.sketchRows .rowToggles { display: flex; flex-direction: column; align-items: stretch; gap: 4px; order: 0; }
.sketchRows .rowToggles .controlHeading { text-align: left; }
#editingToolbar #laneOptions > button { margin: 0px; align-self: stretch; order: 0; }
.sketchLibrary { display: flex; flex-direction: column; justify-content: center; gap: 5px; }
#editingToolbar .sketchLibrary #groovesAnchor, #editingToolbar .sketchLibrary button { width: 100%; margin: 0px; }
.barSideActions { display: flex; gap: 6px; }
@media (min-width: 601px) {
  #musicalInput .staff-container { position: relative; padding: 8px 95px 8px 55px; }
  #musicalInput .barCaption { display: contents; }
  #musicalInput .barHeading { position: absolute; top: 50%; transform: translateY(-50%); white-space: normal; font-size: 11px; }
  #musicalInput .barSideActions { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); flex-direction: column; }
  #musicalInput .barSideActions button { width: 100%; padding: 4px; }
}
#grooveLibraryDialog { width: min(720px, -24px + 100vw); }
.libraryNotice { padding: 12px; background: rgb(241, 244, 246); border-radius: 8px; line-height: 1.5; }
.libraryTools, .libraryEntry > div { display: flex; flex-wrap: wrap; gap: 6px; }
.libraryEntry { padding: 12px 0px; border-bottom: 1px solid rgb(219, 226, 230); }
.libraryEntry strong { display: block; margin-bottom: 8px; overflow-wrap: anywhere; }
.libraryLinkForm { margin-top: 16px; }
#grooveLibraryDialog label, #saveGrooveDialog label { display: block; font-weight: 600; }
#grooveLibraryDialog input:not([type="file"]), #saveGrooveDialog input { display: block; width: 100%; margin: 6px 0px; padding: 10px; min-height: 44px; border: 1px solid rgb(177, 189, 197); border-radius: 6px; font: 16px system-ui; }
#saveGrooveDialog p { line-height: 1.5; }
#saveGrooveDialog form button { margin-right: 6px; }
@media (max-width: 1050px) {
  .sketchPlayback { grid-template-columns: minmax(0px, 1fr) auto minmax(0px, 1fr); gap: 10px; }
  #playbackControls #soundPracticeControls { grid-column: 1 / -1; display: flex; flex-flow: wrap; justify-content: space-between; align-items: center; }
  #editingToolbar #divisionButtonContainer.sketchEditGroups { gap: 10px; }
  .sketchLibrary { grid-column: 1 / -1; border-left: 0px; padding-left: 0px; flex-direction: row; }
}
@media (max-width: 600px) {
  #playbackControls .sketchPlayback > .swingRow { grid-column: 1 / -1; }
  #playbackControls #soundPracticeControls { display: grid; gap: 6px; }
  #playbackControls #soundPracticeControls .kitControl { grid-column: 1 / -1; justify-content: center; }
  #playbackControls #soundPracticeControls .metronomeSelect { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
  #playbackControls #soundPracticeControls #countInButton { align-self: end; min-width: 0px; }
  #editingToolbar #divisionButtonContainer.sketchEditGroups { gap: 8px; }
  .sketchEditGroups > * + * { padding-left: 8px; }
  #editingToolbar .sketchSubdivisions .subdivisionChoices { display: none; }
  #editingToolbar .sketchSubdivisions .compactSubdivision { display: flex; flex-direction: column; width: 100%; margin: 0px; font-size: 0px; }
  #editingToolbar .sketchSubdivisions .compactSubdivision select { font-size: 13px; width: 100%; min-height: 44px; }
  #editingToolbar #laneOptions.sketchRows { border: 0px; padding-left: 0px; }
  .sketchRows .rowToggles { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); }
  .sketchRows .rowToggles .controlHeading { grid-column: 1 / -1; }
  .sketchLibrary { flex-wrap: wrap; }
  #editingToolbar .sketchLibrary #groovesAnchor, #editingToolbar .sketchLibrary button { width: auto; flex: 1 1 90px; }
  .barSideActions { margin-left: auto; }
  #GrooveWriter .sketchPlayback button, #GrooveWriter #editingToolbar button { min-height: 44px; }
}
#playbackControls .sketchPlayback > .swingRow { height: auto; }
#playbackControls .sketchPlayback .swingLabel, #playbackControls .sketchPlayback .swingOutput { color: var(--ink) !important; }
#editingToolbar #laneOptions.sketchRows { grid-area: auto; border-top: 0px; }
#editingToolbar .sketchLength { border-left: 0px; padding-left: 0px; }
@media (max-width: 600px) {
  #editingToolbar #laneOptions.sketchRows { grid-column: 1 / -1; }
}
@media (min-width: 1100px) and (pointer: fine) {
  #musicalInput .staff-container { padding-top: 4px; padding-bottom: 4px; }
  #editingToolbar #laneOptions.sketchRows, .sketchRows .rowToggles { gap: 3px; }
  #GrooveWriter #editingToolbar .sketchRows button { min-height: 30px; padding-top: 3px; padding-bottom: 3px; }
}
.sketchTransport { display: flex; align-items: center; gap: 10px; }
.sketchTransport .tempoRow { flex-direction: column; justify-content: center; gap: 4px; }
#playbackControls .sketchTransport .midiPlayImage { width: 88px; height: 88px; flex-basis: 88px; line-height: 84px; font-size: 36px; }
#playbackControls #soundPracticeControls .kitControl, #playbackControls #soundPracticeControls .metronomeSelect { width: 100%; margin: 0px; flex: 0 0 auto; }
#GrooveWriter #playbackControls #soundPracticeControls #kitSelector, #GrooveWriter #playbackControls #soundPracticeControls #metronomeSelect, #GrooveWriter #playbackControls #soundPracticeControls #countInButton { display: flex; align-items: center; justify-content: center; width: 100%; max-width: none; height: 36px; min-height: 36px; flex: 0 0 auto; margin: 0px; padding: 5px 8px; border: 1px solid rgb(177, 189, 197); border-radius: 8px; background: rgb(255, 255, 255); color: var(--ink); font: 600 12px system-ui, sans-serif; box-sizing: border-box; }
@media (min-width: 601px) and (max-width: 1050px) {
  #playbackControls #soundPracticeControls { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); }
}
@media (max-width: 600px) {
  .sketchPlayback { grid-template-columns: minmax(0px, 1fr); }
  .sketchTransport { grid-row: 1; justify-content: center; flex-direction: column; }
  .sketchTransport .tempoRow { order: 1; }
  #grooveMetadata { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; padding-top: 6px; }
  #sheetMusicTextFields { display: contents !important; }
  #sheetMusicTextFields #KeyButton { grid-column: 1; justify-self: start; align-self: center; }
  #scoreSizeButton { grid-column: 2; justify-self: end; margin: 0; }
  #playbackControls #tempoAndProgress1 { grid-row: 2; }
  #playbackControls .sketchPlayback > .swingRow { grid-row: 3; }
  #playbackControls #soundPracticeControls { grid-template-columns: minmax(0px, 1fr); }
  #playbackControls #soundPracticeControls .kitControl, #playbackControls #soundPracticeControls .metronomeSelect, #playbackControls #soundPracticeControls #countInButton { grid-area: auto / 1; }
  #GrooveWriter #playbackControls #soundPracticeControls #kitSelector, #GrooveWriter #playbackControls #soundPracticeControls #metronomeSelect, #GrooveWriter #playbackControls #soundPracticeControls #countInButton { height: 44px; min-height: 44px; }
}
#playbackControls #tempoAndProgress1, #playbackControls .sketchPlayback > .swingRow { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 18px 44px; gap: 5px; align-items: center; }
.tempoSliderHeading { grid-column: 1 / -1; font: 800 11px system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
#playbackControls #tempoAndProgress1 #tempoAdjustments { grid-area: 2 / 1 / auto / -1; margin: 0px; height: 44px; }
#playbackControls .sketchPlayback > .swingRow .swingLabel { grid-area: 1 / 1; }
#playbackControls .sketchPlayback > .swingRow .swingOutput { grid-area: 1 / 2; }
#playbackControls .sketchPlayback > .swingRow .swingInput { grid-area: 2 / 1 / auto / -1; align-self: center; margin: 0px; }
#editingToolbar .sketchLength > button, #editingToolbar .sketchLength .left-button { width: 100%; margin: 0px; }
#editingToolbar #divisionButtonContainer.sketchEditGroups { grid-template-columns: 120px minmax(210px, 1.4fr) minmax(165px, 1fr) minmax(150px, 1fr); }
@media (min-width: 601px) {
  #noteOptionsDialog[open] { inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(380px, -32px + 100vw); max-height: calc(100dvh - 48px); border-radius: 12px; padding: 18px; }
}
@media (min-width: 601px) and (max-width: 1050px) {
  #editingToolbar #divisionButtonContainer.sketchEditGroups { grid-template-columns: 110px minmax(190px, 1.3fr) minmax(145px, 1fr); }
}
@media (max-width: 600px) {
  #editingToolbar #divisionButtonContainer.sketchEditGroups { grid-template-columns: 100px minmax(0px, 1fr); }
}
#editingToolbar #laneOptions #editHint { display: block; flex: 0 0 auto; width: 100%; min-height: 32px; margin: 0; font: 12px / 16px system-ui, sans-serif; text-align: left; text-wrap: balance; box-sizing: border-box; }
#editingToolbar #laneOptions #editHint[hidden] { display: block !important; visibility: hidden; }
@media (max-width: 600px) {
  #editingToolbar #laneOptions #editHint { min-height: 48px; }
}
.barStepButtons { display: flex; gap: 4px; }
#musicalInput .barHeading { font: 600 11px system-ui, sans-serif; min-height: 36px; background: rgb(255, 255, 255); border: 1px solid rgb(177, 189, 197); border-radius: 6px; color: var(--ink); }
#musicalInput .barStepButtons button { flex: 1 1 0%; min-width: 0px; font-size: 10px; padding: 3px; }
@media (min-width: 601px) {
  #musicalInput .staff-container { padding-left: 104px; }
  #musicalInput .barHeading { width: 90px; left: 6px; }
}
@media (max-width: 600px) {
  #musicalInput .barCaption { flex-wrap: wrap; gap: 6px; }
  #musicalInput .barHeading { width: 100%; }
  #musicalInput .barSideActions { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); width: 100%; margin: 0px; }
  #musicalInput .barStepButtons { grid-column: 1 / -1; }
  #musicalInput .barSideActions button { min-height: 44px; }
}
#playbackControls > h2 { justify-content: flex-start; gap: 8px; }
#editingToolbar .sketchSubdivisions > .editActions { display: flex; gap: 5px; flex-wrap: wrap; margin: 0px 0px 3px; }
#editingToolbar .sketchSubdivisions > .editActions button { flex: 1 1 0%; min-width: 60px; padding-left: 12px; padding-right: 12px; }
@media (min-width: 601px) and (pointer: fine) {
  #GrooveWriter #playbackControls .controlTipsButton { height: 18px; min-height: 18px; width: 18px; font-size: 11px; }
  #playbackControls .sketchPlayback { margin-top: 3px; }
}
#editingToolbar .sketchRows .controlHeading { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
@media (min-width: 1051px) {
  #playbackControls { display: grid; grid-template-columns: minmax(240px, 1.3fr) auto minmax(160px, 1fr) 240px; gap: 3px 16px; align-items: center; }
  #playbackControls > h2 { grid-area: 1 / 1 / auto / 4; }
  #playbackControls .sketchPlayback { display: contents; }
  #playbackControls #tempoAndProgress1 { grid-area: 2 / 1; }
  #playbackControls .sketchTransport { grid-area: 2 / 2; }
  #playbackControls .sketchPlayback > .swingRow { grid-area: 2 / 3; }
  #playbackControls #soundPracticeControls { grid-area: 1 / 4 / 3; align-self: start; }
}
@media (min-width: 601px) {
  #musicalInput .staff-container { padding-right: 146px; min-height: 165px; }
  #musicalInput .barSideActions { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); width: 132px; }
  #musicalInput .barSideActions .barStepButtons, #musicalInput .barSideActions > button:nth-child(2), #musicalInput .barSideActions > button:last-child { grid-column: 1 / -1; }
  #musicalInput .barSideActions > button { font-size: 11px; }
}
#editingToolbar #divisionButtonContainer.sketchEditGroups { order: 0; }
#editingToolbar .sketchLibrary #editorStatus { display: block; flex: 0 0 auto; width: 100%; margin: 0; text-align: center; }
@media (min-width: 601px) and (max-width: 1050px) {
  #editingToolbar .sketchLibrary { flex-wrap: wrap; }
}
#editingToolbar .sketchLibrary { justify-content: flex-start; }
#editingToolbar .sketchLength h2 { display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: 100%; margin: 0px 0px 5px; white-space: nowrap; }
#editingToolbar .sketchLength h2 .controlTipsButton { flex-shrink: 0; }
@media (max-width: 600px) {
  #editingToolbar .sketchLength h2 { font-size: 10px; gap: 4px; white-space: normal; }
}
.metronomeFooter { padding: 12px 16px 20px; text-align: center; font: 13px system-ui, sans-serif; }
.footerLinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; }
.iterationCredit { display: block; margin-top: 3px; color: #657572; font-size: 12px; }
.metronomeFooter a { display: inline-block; padding: 8px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media screen {
  :root { --seafoam: #dae5db; --rim: #94aaa2; }
  body { background: #f2f2e9; }
  #modernHeader { background: #bdd5cb; border-bottom-color: #8daaa0; }
  .modernBrand { color: rgb(39, 77, 73); }
  #playbackControls { background: #fbefd3; border-color: #a9bdb0; box-shadow: inset 0 1px 0 #fff9e9; }
  #editingToolbar { background: #e8eee0; border-color: #a9bdb0; box-shadow: inset 0 1px 0 #fafff4; }
  #editingToolbar h2, #playbackControls h2, #editingToolbar .controlHeading, .tempoSliderHeading { color: rgb(53, 95, 89); }
  #GrooveWriter #laneOptions button[aria-checked="true"] { background: rgb(71, 108, 102); border-color: rgb(62, 97, 92); color: rgb(255, 255, 255); }
  #GrooveWriter #playbackControls #soundPracticeControls #kitSelector, #GrooveWriter #playbackControls #soundPracticeControls #metronomeSelect, #GrooveWriter #playbackControls #soundPracticeControls #countInButton { background: #fff9e8; border-color: #99afa4; }
  #tempoTextField1 { background: #fae3b7; border-color: #99afa4; }
  dialog, #fullURLPopup, #timeSigPopup { background: #fff8e8; border-color: #94aaa2; }
  #GrooveWriter #editingToolbar button:not([aria-pressed="true"]):not(.primaryAction), #GrooveWriter #editingToolbar .left-button:not(.buttonSelected) { background: #fffaf0; border-color: #a9b9ae; }
  #GrooveWriter #editingToolbar button.primaryAction { background: var(--accent); }
  .metronomeFooter a { color: rgb(53, 95, 89); }
}
/* Give a failed kit-load notice its own readable line instead of a zero-width flex item. */
#playbackControls #soundPracticeControls .kitControl { flex-wrap:wrap; }
#soundPracticeControls #kitStatus[data-error="true"] { flex:0 0 100%; width:100%; }

/* Phone workspace: compact dock, contextual sheets, optional beat focus. */
#phoneViewNav, .phoneBarActions, .phoneBarUndo, .phoneBeatControls { display: none; }
.phoneSheetHeading { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 2; padding: 10px 12px; margin-bottom: 12px; border-radius: 10px; background: #365f59; color: #fffdf4; box-shadow: inset 0 1px 0 #ffffff20; }
.phoneSheetHeading h2 { margin: 0; padding-left: 10px; border-left: 3px solid #f58722; font: 750 16px system-ui, sans-serif; letter-spacing: .025em; line-height: 1.25; }
.phoneEditorView { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 8px 0; font-weight: 600; }
.phoneEditorView select { flex: 1 1 180px; min-width: 0; }
#phoneEditorViewHelp { margin: 0 0 10px; color: #355f59; font: 12px/1.4 system-ui,sans-serif; }
#phoneGeneralDialog { width: min(440px, calc(100vw - 24px)); padding: 14px; }
#phoneGeneralDialog .phoneSheetHeading { border: 0; }
.phoneMenuSection { margin-top: 12px; }
.phoneMenuSection h3 { margin: 0 0 6px; font: 700 11px system-ui,sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
#phoneGeneralDialog .modernActions, .phoneSavedActions, .phoneMenuButtons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0; }
#phoneGeneralDialog .modernActions { width: 100%; }
body #phoneGeneralDialog button { white-space: normal; min-width: 0; min-height: 44px; padding: 8px; border: 1px solid var(--rim); border-radius: 8px; background: #fff; font: 600 13px system-ui,sans-serif; text-align: center; }
body #phoneGeneralDialog #uniqueLinkButton { background: #f58722; border-color: #b65a12; color: #162b2c; }
.phoneSavedActions #uniqueLinkButton, .phoneSavedActions #editorStatus, .phoneMenuButtons > button:first-child { grid-column: 1 / -1; }
#phoneGeneralDialog #editorStatus { font-size: 11px; text-align: center; margin: 0; }
@media screen {
  body.phoneViews { padding: 0; }
  .phoneViews #modernHeader, .phoneViews #playbackControls { display: none; }
  .phoneViews #RightHandContent { padding: 0 6px 6px; }
  .phoneViews #phoneViewNav { display: flex; align-items: center; gap: 4px; position: sticky; top: 0; z-index: 60; padding: 3px; margin-bottom: 4px; border: 1px solid var(--rim); border-radius: 9px; background: #f7f7ee; box-shadow: 0 2px 4px #24343d14; }
  .phoneViews #phoneViewNav a { flex: 0 0 26px; display: flex; align-items: center; }
  .phoneViews #phoneViewNav > button { flex: 1; min-width: 0; min-height: 44px; padding: 4px 3px; font-size: 11px; white-space: normal; }
  .phoneViews #phonePlaybackDock { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; padding: 2px; border-radius: 8px; background: #faeaca; }
  .phoneViews #phonePlaybackDock #midiPlayImage1 { background: #f58722; color: #162b2c; border: 2px solid #b65a12; border-radius: 50%; margin: 0; width: 42px; height: 42px; flex: 0 0 42px; line-height: 38px; font-size: 23px; }
  .phoneViews #phoneBpmButton { min-height: 44px; min-width: 64px; padding: 4px; font: 700 12px system-ui,sans-serif; background: transparent; border: 0; }
  .phoneViews #phoneExitPresentation { display: none; }
  .phoneViews #grooveMetadata { display: none; }
  .phoneViews.phoneDetailsVisible #grooveMetadata { display: grid; }
  .phoneViews:not(.phoneScoreVisible) #sheetMusicDiv { display: none; }
  .phoneViews #sheetMusicDiv { max-height: 100px; padding: 2px; overflow: auto; }
  .phoneViews #sheetMusicDiv.expandedScore { max-height: none; }
  .phoneViews #musicalInput, .phoneViews #musicalInput.scrollableBars { max-height: var(--phone-editor-height,65dvh); overflow: auto; overscroll-behavior: contain; }
  .phoneViews #musicalInput .staff-container { padding: 0; }
  .phoneViews #musicalInput .barCaption { display: flex; position: sticky; left: 0; align-items: center; flex-wrap: wrap; gap: 4px; padding: 3px; }
  .phoneViews #musicalInput .barHeading { position: static; transform: none; width: 112px; flex: 0 0 112px; }
  .phoneViews #musicalInput .barSideActions { position: static; transform: none; display: flex; flex-direction: row; gap: 4px; width: auto; flex: 1; justify-content: flex-end; flex-wrap: wrap; }
  .phoneViews #musicalInput .barSideActions > button, .phoneViews #musicalInput .barStepButtons button { width: auto; min-height: 40px; font-size: 11px; padding: 4px 6px; }
  .phoneViews #musicalInput .barSideActions > .phoneBarSecondary { display: none; }
  .phoneViews .phoneBarActions, .phoneViews .phoneBarUndo { display: block; }
  .phoneViews #musicalInput .barSideActions > .phoneBarUndo { min-width: 44px; font-size: 19px; }
  .phoneViews #musicalInput:not(.hasToms) .toms-container, .phoneViews #musicalInput:not(.hasToms) .tom-label { display: none !important; }
  .phoneViews #phoneEditDialog #editingToolbar { z-index: auto; margin: 0; padding: 6px; }
  .phoneViews #phoneEditDialog #divisionButtonContainer.sketchEditGroups { grid-template-columns: 75px minmax(0,1fr); gap: 6px; }
  .phoneViews #phoneEditDialog .sketchLength h2 { display: none; }
  .phoneViews #phoneEditDialog .sketchSubdivisions { display: flex; padding-left: 6px; }
  .phoneViews #phoneEditDialog .subdivisionChoices { display: none; }
  .phoneViews #phoneEditDialog .compactSubdivision { display: flex; flex-direction: column; width: 100%; font-size: 0; }
  .phoneViews #phoneEditDialog .compactSubdivision select { width: 100%; font-size: 13px; min-height: 44px; }
  .phoneViews #phoneEditDialog #laneOptions, .phoneViews #phoneEditDialog .sketchLibrary { display: flex; grid-column: 1 / -1; border: 0; padding: 0; flex-wrap: wrap; }
  .phoneViews #phoneEditDialog .sketchLibrary { flex-direction: row; }
  .phoneViews #phoneEditDialog .sketchLibrary button, .phoneViews #phoneEditDialog #groovesAnchor { flex: 1 1 90px; width: auto; }
  .phoneViews #phonePlaybackDialog .sketchPlayback { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 6px 0; }
  .phoneViews #phonePlaybackDialog .sketchTransport { order: -1; justify-content: flex-start; }
  .phoneViews #phonePlaybackDialog .tempoRow { flex-direction: row; align-items: center; }
  .phoneViews #phonePlaybackDialog #tempoTextField1 { width: 70px; }
  .phoneViews #phonePlaybackDialog #tempoAndProgress1 { display: block; }
  .phoneViews #phonePlaybackDialog .tempoSliderHeading { display: block; }
  .phoneViews #phonePlaybackDialog #tempoAdjustments { width: 100%; display: flex; gap: 4px; align-items: center; height: 44px; }
  .phoneViews #phonePlaybackDialog #tempoInput1 { flex: 1; min-width: 0; width: auto; }
  .phoneViews #phonePlaybackDialog .swingRow { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0 0 10px; min-height: 44px; flex: 0 0 auto; }
  .phoneViews #phonePlaybackDialog #swingInput1 { width: auto; flex: 1 1 0%; min-width: 80px; height: 44px; }
  .phoneViews #phonePlaybackDialog #soundPracticeControls { display: flex; flex-direction: column; gap: 6px; }
  .phoneViews #phonePlaybackDialog #soundPracticeControls > * { width: 100%; min-width: 0; flex: 0 0 auto; }
  .phoneViews #phonePlaybackDialog #soundPracticeControls #kitSelector, .phoneViews #phonePlaybackDialog #soundPracticeControls #metronomeSelect, .phoneViews #phonePlaybackDialog #countInButton { width: 100%; max-width: none; flex: 0 0 auto; min-height: 44px; font: 600 13px system-ui,sans-serif; }
  .phoneViews #phonePlaybackDialog #kitSelector { display: flex; align-items: center; justify-content: center; gap: 12px; }
  .phoneViews #phonePlaybackDialog .kitHeading { display: none; }
  .phoneViews #phonePlaybackDialog .kitLever { display: block; width: 34px; flex: 0 0 34px; }
  .phoneViews #grooveListWrapper { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%); max-height: calc(100dvh - 24px); max-width: calc(100vw - 24px); overflow: auto; z-index: 1100; }
  .phoneViews.phoneBeatFocus .phoneStepHidden { display: none !important; }
  .phoneViews.phoneBeatFocus .space_between_note_groups, .phoneViews.phoneBeatFocus .opening_note_space, .phoneViews.phoneBeatFocus .end_note_space { display: none; }
  .phoneViews.phoneBeatFocus .phoneBeatControls { display: flex; align-items: center; gap: 4px; margin-left: auto; }
  .phoneViews.phoneBeatFocus .phoneBeatControls select { min-width: 0; min-height: 40px; width: 170px; font-size: 11px; }
  .phoneViews.phoneBeatFocus #musicalInput [role="button"][id] { width: clamp(44px, calc((100vw - 140px) / var(--phone-beat-steps) - 8px), 88px); }
  .phoneViews.phoneBeatFocus #musicalInput .staff-container { width: max-content; min-width: min(100%, var(--bar-heading-width,100%)); }
  .phoneViews.presentationMode #phoneViewNav > button:not(#phoneExitPresentation) { display: none; }
  .phoneViews.presentationMode #phoneExitPresentation { display: block; }
  .phoneViews.presentationMode #sheetMusicDiv { display: block; max-height: none; }
}
@media screen and (orientation: landscape) {
  .phoneViews .metronomeFooter { display: none; }
  .phoneViews #GrooveWriter { padding-bottom: 0; }
}


body .phoneSheetHeading button, body #phoneGeneralDialog .phoneSheetHeading button { min-height: 40px; padding: 7px 14px; border: 1px solid #ffffff50; border-radius: 7px; background: #ffffff12; color: #fffdf4; font: 650 13px system-ui,sans-serif; box-shadow: none; }

.presetMenuHeading { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 2; padding: 8px; background: var(--paper); border-bottom: 1px solid var(--rim); font: 700 13px system-ui,sans-serif; }
.presetMenuHeading button { min-height: 40px; padding: 6px 12px; }

#musicalInput .cymbalVoiceButton { max-width: 100%; min-height: 36px; padding: 4px 7px; border: 1px solid var(--rim); border-radius: 7px; background: var(--paper); color: var(--ink); font: 700 12px system-ui,sans-serif; white-space: nowrap; }

#musicalInput .hh-label { display: flex; align-items: center; justify-content: center; gap: 3px; }
#musicalInput .cymbalRowOptions { min-width: 24px; min-height: 36px; padding: 2px 4px; border: 1px solid var(--rim); border-radius: 7px; background: var(--paper); font-size: 18px; }

/* Stave references stretch to the editor's row spacing; pads remain opaque. */
#musicalInput .notes-row-container { position: relative; }
#musicalInput .editorStaveGuides { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
#musicalInput .editorStaveGuides span { position: absolute; left: 0; right: 0; height: 1px; background: #728980; opacity: .28; }
#musicalInput .hi-hat, #musicalInput .snare, #musicalInput .kick, #musicalInput .tom { z-index: 2; }

#musicalInput .editorLabelGuides { z-index: 0; }
#musicalInput .notes-row-container .line-labels > :not(.editorStaveGuides) { position: relative; z-index: 1; }
@media print {
body { height: auto !important; padding: 0px !important; background: white !important; }
  body > :not(#GrooveWriter), #GrooveWriter > :not(#RightHandContent), #RightHandContent > :not(.Printable), #RightHandContent .Printable > :not(#sheetMusicDiv) { display: none !important; }
  #GrooveWriter, #RightHandContent, #sheetMusicDiv, #svgTarget { width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0px !important; padding: 0px !important; border: 0px !important; background: white !important; box-shadow: none !important; overflow: visible !important; position: static !important; }
  #svgTarget svg { max-width: 100%; }
  #editingToolbar, #playbackControls, #soundPracticeControls, #modernHeader, #grooveMetadata { display: none !important; }
.metronomeFooter { display: none; }
#phoneViewNav, .phoneBarActions, .phoneBarUndo, .phoneBeatControls { display: none !important; }
#RightHandContent > .Printable, body.phoneViews #sheetMusicDiv { display: block !important; }
  #sheetMusicDiv #svgTarget svg { display: block; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; }
  .highlighted, .playback-step { background: transparent !important; }
}
/* The optional tour highlights existing controls; it doesn't rearrange the workspace. */
.tourTarget { outline: 2px solid #d66a1d !important; outline-offset: 4px; box-shadow: 0 0 0 6px #f5872226 !important; }
body .tourCard { position: fixed; inset: auto; margin: 0; z-index: 5000; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; gap: 8px; max-height: min(420px,calc(100dvh - 24px)); padding: 16px; border: 2px solid #7f9b90; border-radius: 12px; background: #fff9e8; color: #24343d; box-shadow: 0 8px 32px #24343d38; text-align: left; font: 14px/1.45 system-ui,sans-serif; }
body .tourCard[hidden] { display: none; }
.tourCard .tourProgress { color: #355f59; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tourCard h2 { margin: 0; font: 750 20px/1.2 system-ui,sans-serif; color: #274d49; }
.tourCard .tourContent { overflow: auto; min-height: 0; }
.tourCard p { margin: 0 0 8px; }
.tourCard .tourExercise { margin: 0; color: #355f59; font-weight: 600; }
.tourCard .tourActions { display: flex; gap: 8px; align-items: center; padding-top: 4px; }
body #beatwriterTour button { min-height: 44px; padding: 8px 12px; border: 1px solid #a9b9ae; border-radius: 8px; background: #fff; font: 650 13px system-ui,sans-serif; color: #24343d; cursor: pointer; }
.tourCard .tourActions button:first-child { margin-right: auto; }
body #beatwriterTour .tourNext { background: #e97722; border-color: #b65a12; color: #162b2c; }
.tourWithCard { padding-bottom: var(--tour-card-space,190px) !important; scroll-padding-bottom: var(--tour-card-space,190px); }
@media (max-width:600px), (max-width:1000px) and (max-height:500px) {
  body .tourCard { max-height: min(280px,48dvh); padding: 10px 12px; gap: 5px; font-size: 12px; line-height: 1.35; }
  .tourCard h2 { font-size: 16px; }
  .tourCard p { margin-bottom: 6px; }
  body #beatwriterTour button { padding: 6px 10px; }
}
@media print { #beatwriterTour { display:none !important; } .tourTarget { outline:0 !important; box-shadow:none !important; } }

.tourCard .tourActions button[hidden] + button:nth-child(2) { margin-right: auto; }

.tourWithCard { scroll-padding-top: 80px; }
@media (min-width:600px) and (max-width:1000px) and (max-height:500px) {
  .phoneViews dialog.tourWithCard { width: min(440px,calc(100dvw - 336px)); max-width: none; margin: 0; left: 12px; top: 12px; padding-bottom: 14px !important; scroll-padding-bottom: 14px; }
  body .tourCard { max-height: min(280px,calc(100dvh - 24px)); }
}